:root {
	--brand-red: #E3121A;   /* Rojo vivo del logo */
	--brand-black: #111111; /* Negro profundo del logo */
	--brand-white: #FFFFFF;
	--brand-gray: #F8F9FA;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: var(--brand-black);
	background-color: var(--brand-white);
}

/* Navbar */
.navbar-brand img { max-height: 50px; }
.nav-link { color: var(--brand-black) !important; font-weight: 600; }
.nav-link:hover { color: var(--brand-red) !important; }

/* Botones del Sistema */
.btn-brand-red { background-color: var(--brand-red); color: white; border: none; font-weight: 600; }
.btn-brand-red:hover { background-color: #b80d14; color: white; }
.btn-brand-dark { background-color: var(--brand-black); color: white; border: none; }
.btn-brand-dark:hover { background-color: #222222; color: white; }

/* Detalles corporativos */
.bg-brand-dark { background-color: var(--brand-black) !important; }
.brand-divider { height: 3px; width: 60px; background-color: var(--brand-red); margin: 15px 0; }

/* Estilos para la sección de Transición de Imagen */
.bg-transition-gradient {
	background: linear-gradient(135deg, #111111 0%, #222222 50%, #E3121A 100%);
}
.brand-old-box {
	border: 2px dashed #ccc;
	background-color: #f8f9fa;
	opacity: 0.7;
	transition: all 0.3s ease;
}
.brand-old-box:hover {
	opacity: 1;
}
.brand-new-box {
	border: 2px solid var(--brand-red);
	background-color: #ffffff;
	box-shadow: 0 10px 20px rgba(227, 18, 26, 0.1);
}
.badge-evolution {
	background-color: var(--brand-red);
	color: white;
	font-size: 0.75rem;
	padding: 5px 10px;
	border-radius: 20px;
}		
/* Estilos para los elementos desplegables (Dropdowns) */
.dropdown-menu {
	border-top: 3px solid var(--brand-red) !important; /* Detalle lineal rojo */
	border-radius: 0 0 4px 4px;
}
.dropdown-item:hover {
	background-color: var(--brand-gray);
	color: var(--brand-red) !important;
}

/* Transiciones de color dinámicas para el Footer */
.footer-links a.transition-link, .text-secondary a {
	transition: color 0.2s ease-in-out;
}
.footer-links a.transition-link:hover, .text-secondary a:hover {
	color: var(--brand-red) !important;
}

/* Corrección de círculos perfectos en redes sociales */
/* Centrado milimétrico y perfecto de los iconos de redes sociales */
.social-icon-circle {
	display: inline-flex;       /* Activa Flexbox para el contenedor */
	align-items: center;        /* Centrado vertical perfecto */
	justify-content: center;    /* Centrado horizontal perfecto */
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #ffffff;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

/* Control estricto sobre el tamaño físico del icono */
.social-icon-circle i {
	font-size: 1.1rem;
	line-height: 1;             /* Resetea cualquier altura de línea heredada */
	display: inline-block;
	margin: 0;                  /* Elimina márgenes residuales del navegador */
	padding: 0;                 /* Elimina padding residual */
}

/* Efecto Hover moderno */
.social-icon-circle:hover, .social-icon-circle:focus {
	color: #ffffff !important;
	background-color: var(--brand-red);
	border-color: var(--brand-red);
	transform: translateY(-2px);
}

/* Efecto hover interactivo para el Libro de Reclamaciones */
.hover-reclamaciones {
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.hover-reclamaciones:hover {
	border-color: var(--brand-white) !important;
	background-color: #1e1e1e !important;
}

/* Estilos para las Tarjetas de Servicios */
.service-card {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	border-bottom: 4px solid transparent !important; /* Base invisible lista para el cambio */
	border-radius: 8px;
}

/* Caja de Iconos Redondos */
.service-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background-color: var(--brand-gray);
	color: var(--brand-black);
	border-radius: 12px;
	font-size: 1.75rem;
	transition: all 0.3s ease;
}

/* Efecto Hover en las Tarjetas */
.service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
	border-bottom: 4px solid var(--brand-red) !important; /* Línea inferior roja activa */
}

.service-card:hover .service-icon-box {
	background-color: var(--brand-red);
	color: var(--brand-white);
}

/* Animación en la flecha de cotizar */
.arrow-link i {
	transition: transform 0.2s ease;
}
.arrow-link:hover i {
	transform: translateX(5px);
}

/* Clase específica para los enlaces de llamada a la acción en servicios */
.link-service-brand {
	color: var(--brand-red) !important;
	font-weight: 700;
	font-size: 0.875rem; /* Equivalente a small de Bootstrap */
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	margin-top: auto; /* Empuja el enlace al fondo de la tarjeta */
	transition: color 0.2s ease-in-out;
}

/* Comportamiento al pasar el cursor (Hover) */
.link-service-brand:hover, 
.link-service-brand:focus {
	color: var(--brand-black) !important; /* Cambia a negro para hacer un contraste elegante */
	text-decoration: none;
}

/* Animación sutil de la flecha incorporada en la clase */
.link-service-brand i {
	transition: transform 0.2s ease-in-out;
}

.link-service-brand:hover i {
	transform: translateX(6px); /* Desplaza la flecha a la derecha en el hover */
}

/* Enlace de créditos en el Footer */
.footer-credit-link {
	color: #ffffff !important; /* Fuerza el color blanco */
	font-weight: 700;
	text-decoration: none;
	transition: color 0.2s ease-in-out;
}

/* Efecto al pasar el cursor */
.footer-credit-link:hover, 
.footer-credit-link:focus {
	color: var(--brand-red) !important; /* Cambia al rojo corporativo en el hover */
	text-decoration: underline;
}

/* CONTROL ABSOLUTO DE ALTURA IGUALITARIA EN ALTA LUMINOSIDAD */
.carousel-img {
	height: 520px !important;
	max-height: 520px !important;
	object-fit: cover !important; /* Mantiene la misma altura recortando excedentes de la imagen 3 */
	object-position: center;
	width: 100% !important;
	filter: none !important;      /* Elimina cualquier filtro de oscurecimiento residual */
}

#carouselPrincipal, 
#carouselPrincipal .carousel-inner, 
#carouselPrincipal .carousel-item {
	height: 520px !important;
	max-height: 520px !important;
	overflow: hidden;
}

@media (max-width: 991.98px) {
	.carousel-img, 
	#carouselPrincipal, 
	#carouselPrincipal .carousel-inner, 
	#carouselPrincipal .carousel-item {
		height: 350px !important;
		max-height: 350px !important;
	}
}

.placeholder-muted::placeholder {
	color: rgba(255, 255, 255, 0.4) !important;
}

/* Estilos para la Sección de Videos */
.video-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-radius: 8px;
}
.video-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important;
}
.video-card .card-body {
	border-top: 2px solid var(--brand-gray);
	background-color: #ffffff;
}

/* ==========================================================================
   ESTILOS SUPERIOR - HERO, MISIÓN, VISIÓN E IMAGEN
   ========================================================================== */

/* Contenedor estandarizado para la página interna */
.container-nosotros {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* --- 1. Estilos del Hero Superior --- */
.nosotros-hero-section {
	padding: 60px 0 40px 0;
	background-color: #ffffff;
	border-bottom: 1px solid #f1f5f9;
}

.hero-text-content h1 {
	font-size: 2.5rem;
	color: #0f172a; /* Azul pizarra oscuro elegante */
	font-weight: 700;
	margin: 0 0 10px 0;
}

.hero-lead {
	font-size: 1.2rem;
	color: #475569;
	margin: 0;
	line-height: 1.5;
}

/* --- 2. Estilos de la Estructura en Columnas (Grid) --- */
.empresa-info-section {
	padding: 60px 0;
	background-color: #ffffff;
}

.grid-dos-columnas {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr; /* Equilibrio de tamaño entre texto e imagen */
	gap: 50px;
	align-items: center; /* Centra verticalmente el contenido */
}

/* --- 3. Tarjetas Ejecutivas de Misión y Visión --- */
.column-texto-mv {
	display: flex;
	flex-direction: column;
	gap: 25px; /* Espaciado entre la tarjeta de misión y visión */
}

.mv-card {
	background-color: #f8fafc; /* Fondo gris ultra suave moderno */
	border-left: 5px solid #002D62; /* Detalle con tu azul de marca */
	padding: 25px 30px;
	border-radius: 0 12px 12px 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.mv-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.mv-icon {
	font-size: 1.5rem;
}

.mv-card h2 {
	font-size: 1.4rem;
	color: #1e293b;
	font-weight: 600;
	margin: 0;
}

.mv-card p {
	font-size: 1rem;
	color: #334155;
	line-height: 1.6;
	margin: 0;
}

/* --- 4. Contenedor de la Imagen de Referencia --- */
.column-imagen-referencia {
	position: relative;
}

.wrapper-imagen {
	position: relative;
	z-index: 2;
}

.img-responsive-nosotros {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	display: block;
}

/* Efecto decorativo geométrico detrás de la foto */
.decoracion-borde {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 100%;
	height: 100%;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	z-index: 1;
	pointer-events: none;
}

/* --- 5. RESPONSIVE DESIGN (Adaptación a Celulares) --- */
@media (max-width: 912px) {
	.grid-dos-columnas {
		grid-template-columns: 1fr; /* En pantallas pequeñas pasa a una sola columna */
		gap: 40px;
	}

	.column-imagen-referencia {
		order: -1; /* Mueve la imagen arriba en celulares para mejorar el impacto visual */
	}
	
	.hero-text-content h1 {
		font-size: 2.1rem;
	}
}


/* Contenedor Principal de la Sección */
.acreditaciones-section {
	padding: 80px 0;
	background-color: #ffffff; /* Fondo blanco limpio para mejorar el contraste */
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* O la tipografía de tu web */
}

/* Contenedor alineado y centrado */
.acreditaciones-section .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

/* Cabecera de la Sección (Título y Subtítulo) */
.section-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-header h2 {
	font-size: 2.4rem;
	color: #1e293b; /* Azul pizarra oscuro, más suave y moderno a la vista */
	font-weight: 700;
	margin: 0 0 15px 0;
}

/* Detalle visual: Línea sutil debajo del título corporativo */
.section-header h2::after {
	content: '';
	display: block;
	width: 60px;
	height: 3px;
	background-color: #002D62; /* Tu azul corporativo como acento discreto */
	margin: 15px auto 0 auto;
	border-radius: 2px;
}

.section-header p {
	font-size: 1.1rem;
	color: #64748b; /* Gris intermedio para una lectura descansada */
	max-width: 750px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Rejilla configurada exactamente a 3 columnas por fila */
.acreditaciones-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales fijas en escritorio */
	gap: 30px; /* Espaciado uniforme entre tarjetas */
}

/* Tarjetas individuales de acreditación */
.acreditacion-card {
	background: #ffffff;
	border-radius: 12px;
	padding: 35px 25px;
	text-align: center;
	border: 1px solid #e2e8f0; /* Borde ultra fino que reemplaza sombras pesadas */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between; /* Mantiene los elementos distribuidos verticalmente */
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efecto Hover interactivo */
.acreditacion-card:hover {
	transform: translateY(-5px);
	border-color: #002D62; /* El borde se ilumina con tu azul de marca */
	box-shadow: 0 12px 20px rgba(0, 45, 98, 0.08); /* Sombra suave azulada */
}

/* Iconos de las tarjetas */
.card-icon {
	font-size: 2.8rem;
	margin-bottom: 15px;
	line-height: 1;
}

/* Títulos internos de las acreditaciones */
.acreditacion-card h3 {
	font-size: 1.3rem;
	color: #0f172a;
	font-weight: 600;
	margin: 0 0 10px 0;
}

/* Descripciones de los certificados */
.acreditacion-card p {
	font-size: 0.95rem;
	color: #475569;
	line-height: 1.5;
	margin: 0 0 20px 0;
	min-height: 48px; /* Forzar misma altura visual para textos de 2 o 3 líneas */
}

/* --- Etiquetas / Badges Informativas (Pie de Tarjeta) --- */
.badge-legal, .badge-tech {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Estilo para Autorizaciones del Estado (MTC, DGAC) */
.badge-legal {
	background-color: #e0f2fe; /* Celeste muy suave */
	color: #0369a1; /* Azul intermedio */
}

/* Estilo para Certificaciones Técnicas (ISO, SST, Mercancías) */
.badge-tech {
	background-color: #dcfce7; /* Verde muy suave */
	color: #15803d; /* Verde intermedio */
}

/* ==========================================================================
   RESPONSIVE DESIGN (Adaptación a Tablets y Celulares)
   ========================================================================== */

/* Pantallas medianas (Tablets - hasta 992px) */
@media (max-width: 992px) {
	.acreditaciones-grid {
		grid-template-columns: repeat(2, 1fr); /* Pasa automáticamente a 2 por fila */
		gap: 20px;
	}
	
	.section-header h2 {
		font-size: 2.1rem;
	}
}

/* Pantallas pequeñas (Celulares - hasta 600px) */
@media (max-width: 600px) {
	.acreditaciones-section {
		padding: 50px 0;
	}

	.acreditaciones-grid {
		grid-template-columns: 1fr; /* 1 sola tarjeta por fila para lectura cómoda */
	}

	.section-header h2 {
		font-size: 1.8rem;
	}
	
	.acreditacion-card {
		padding: 25px 20px;
	}
}

/* ========================================================
   ESTILOS PREMIUM PARA LA SECCIÓN DE PROYECTOS B2B
   ======================================================== */

.proyectos-lista-section {
    padding: 80px 0;
    background-color: #ffffff !important; /* Fondo blanco puro */
}

.vertical-gap-b2b {
    display: flex;
    flex-direction: column;
    gap: 50px; /* Separación elegante entre tarjetas */
}

/* Tarjeta de Proyecto con Profundidad Tridimensional */
.proyecto-tarjeta-b2b {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important; /* Borde ultra sutil */
    border-radius: 12px !important;
    overflow: hidden !important;
    /* Sombras muy suaves y elegantes */
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03), 0 2px 8px -1px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
}

.proyecto-tarjeta-b2b:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.1), 0 10px 15px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Control estricto del tamaño de imágenes (Evita desbordamientos) */
.proyecto-bloque-imagen {
    width: 100% !important;
    height: 260px !important;
    overflow: hidden !important;
    position: relative;
    background-color: #cbd5e1;
}

.img-proyectos-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Encuadre inteligente de la avioneta */
    transition: transform 0.5s ease !important;
}

.proyecto-tarjeta-b2b:hover .img-proyectos-fluid {
    transform: scale(1.04); /* Efecto zoom sutil al pasar el mouse */
}

/* Contenido Textual Organizado */
.proyecto-bloque-info {
    padding: 35px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.proyecto-bloque-info h2 {
    font-size: 1.6rem !important;
    color: #0f172a !important; /* Azul oscuro pizarra de alta legibilidad */
    margin: 15px 0 10px 0 !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
}

.proyecto-bloque-info p {
    font-size: 0.98rem !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
}

.proyecto-bloque-info p strong {
    color: #0f172a !important;
}

/* Etiquetas (Píldoras de diseño) */
.proyecto-tag {
    display: inline-block !important;
    align-self: flex-start;
    padding: 6px 14px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    letter-spacing: 0.8px !important;
}
.tag-rojo { background-color: #fee2e2 !important; color: #dc2626 !important; }
.tag-azul { background-color: #dbeafe !important; color: #1d4ed8 !important; }
.tag-celeste { background-color: #e0f2fe !important; color: #0369a1 !important; }
.tag-gris { background-color: #f1f5f9 !important; color: #334155 !important; }

/* Paneles de KPIs Sólidos Laterales */
.proyecto-bloque-kpi {
    padding: 40px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    color: #ffffff !important;
    min-width: 260px !important;
}

.kpi-oscuro { background-color: #0f172a !important; }
.kpi-azul-corp { background-color: #1d4ed8 !important; }
.kpi-celeste-corp { background-color: #0284c7 !important; }

.kpi-grande {
    display: block !important;
    font-size: 3.8rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #f59e0b !important; /* Oro corporativo */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.kpi-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 8px 0 0 0 !important;
    letter-spacing: 1px !important;
}

.kpi-subtexto {
    font-size: 0.82rem !important;
    opacity: 0.85 !important;
    margin: 15px 0 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 12px !important;
    width: 100% !important;
    line-height: 1.4 !important;
}

/* Grilla Interna para KPI Doble (Sanofi) */
.kpi-doble-grid {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
}

.kpi-mini-box {
    flex: 1 !important;
    padding: 10px 0 !important;
}

.kpi-mini-box:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.kpi-mediano {
    font-size: 2.8rem !important;
    font-weight: 800 !important;
    display: block !important;
    color: #ffffff !important;
}

.kpi-label-sm {
    font-size: 0.78rem !important;
    margin: 6px 0 0 0 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Proyecto Completo sin KPI (Latina) */
.tarjeta-ancho-completo {
    border-left: 6px solid #475569 !important;
}

/* ========================================================
   MEDIA QUERY: TRANSFORMACIÓN HORIZONTAL RESPONSIVA (PC)
   ======================================================== */
@media (min-width: 992px) {
    .proyecto-tarjeta-b2b {
        flex-direction: row !important; /* Cambia a fila horizontal en PC */
        height: auto !important;        /* ¡ELIMINADO EL ALTO FIJO! Crece según el texto */
        min-height: 290px !important;   /* Mantiene una proporción estética mínima */
        align-items: stretch !important; /* Forza a que la imagen y el KPI midan lo mismo que el texto */
    }

    .proyecto-bloque-imagen {
        width: 30% !important;
        height: auto !important;        /* Se adapta al estiramiento de la tarjeta */
        min-height: 260px !important;
    }

    .proyecto-bloque-info {
        width: 45% !important;
        padding: 35px 45px !important;  /* Espaciado interno generoso y elegante */
    }

    .proyecto-bloque-kpi {
        width: 25% !important;
        height: auto !important;        /* Se estira verticalmente junto al contenedor */
    }

    /* Alternancia de filas (Izquierda / Derecha) para dar ritmo */
    .tarjeta-invertida-b2b {
        flex-direction: row-reverse !important;
    }
    
    /* El último proyecto ocupará la imagen a la izquierda y el resto texto */
    .tarjeta-ancho-completo .proyecto-bloque-imagen {
        width: 30% !important;
    }
}

/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN BIOLÓGICOS (51PCXP)
   ======================================================== */

.biologicos-info-section {
    padding: 80px 0;
    background-color: #ffffff; /* Fondo blanco limpio para continuar la fluidez corporativa */
}

.biologicos-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.biologicos-texto h2 {
    font-size: 1.8rem;
    color: #0f172a;
    margin: 15px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.p-destacado {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    font-weight: 500;
    margin-bottom: 15px;
}

/* Tarjeta Destacada 24/7 (Alta Conversión B2B) */
.biologicos-destacado-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 40px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02) !important;
    
    /* CAMBIO DE COLOR DEL BORDE SUPERIOR: De azul brillante a Gris Pizarra Corporativo */
    border-top: 4px solid #1e293b !important; 
}

.kpi-badge-247 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.cronometro-icon {
    font-size: 1.8rem;
}

.biologicos-destacado-card h3 {
    font-size: 1.4rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.biologicos-destacado-card p {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.beneficio-entrega {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.beneficio-entrega:last-child {
    margin-bottom: 0;
}

.check-icon {
    color: #16a34a; /* Verde éxito */
    font-weight: bold;
    font-size: 1.1rem;
}

.beneficio-entrega p {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
}

/* Sección Inferior de Pilares Técnicos */
.biologicos-pilares-section {
    padding: 80px 0;
    background-color: #f8f9fa; /* Fondo gris neutro muy suave para dar separación */
    border-top: 1px solid #e2e8f0;
}

.section-header-biologicos {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.section-header-biologicos h2 {
    font-size: 1.8rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 15px;
}

.section-header-biologicos p {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

/* Grilla de Pilares (Estructura de 3 columnas) */
.biologicos-grid-pilares {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móvil */
    gap: 30px;
}

.pilar-bio-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease;
}

.pilar-bio-card:hover {
    transform: translateY(-3px);
}

.pilar-icon {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.pilar-bio-card h3 {
    font-size: 1.2rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 12px;
}

.pilar-bio-card p {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* ========================================================
   MEDIA QUERY PARA COMPUTADORAS (PC)
   ======================================================== */
@media (min-width: 768px) {
    .biologicos-grid-pilares {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas perfectas en escritorio */
    }
}

/* Control de Imagen en Sección Biológicos */
.biologicos-bloque-imagen {
    width: 100% !important;
    height: 380px !important; /* Incrementamos la altura para revelar los tubos completos */
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 20px 0 25px 0 !important; /* Espaciado equilibrado */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

.img-bio-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Mantiene el encuadre perfecto sin deformar la foto */
    object-position: center center !important; /* Centra la visualización vertical y horizontal */
    display: block !important;
}

/* Ajuste fino para pantallas pequeñas/laptops si fuera necesario */
@media (max-width: 1200px) {
    .biologicos-bloque-imagen {
        height: 320px !important; /* Altura dinámica adaptada a pantallas medianas */
    }
}

/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN DISTRIBUCIÓN LOCAL
   ======================================================== */

.local-info-section {
    padding: 80px 0;
    background-color: #ffffff; /* Mantiene la fluidez del fondo blanco limpio */
}

.local-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.local-texto h2 {
    font-size: 1.8rem;
    color: #0f172a;
    margin: 15px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Grilla interna para las modalidades en la columna izquierda */
.local-modalidades-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.modalidad-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #f8f9fa; /* Caja gris muy sutil para dar estructura */
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 3px solid #cbd5e1; /* Línea neutral de acento */
}

.mod-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.modalidad-item h4 {
    font-size: 1rem;
    color: #0f172a;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.modalidad-item p {
    font-size: 0.88rem;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

/* Tarjeta de Control Tecnológico (Columna Derecha) */
.local-control-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Línea de acento gris pizarra idéntica a Biológicos */
    align-self: start;
}

.control-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.radar-icon {
    font-size: 1.8rem;
    color: #f59e0b; /* Toque de oro para guiar la atención al monitoreo */
}

.local-control-card h3 {
    font-size: 1.4rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.local-control-card p {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.control-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

.subtitulo-tecnologico {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.beneficio-control {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.beneficio-control:last-child {
    margin-bottom: 0;
}

.check-icon-oro {
    color: #f59e0b; /* Check dorado unificado con la paleta de valor */
    font-weight: bold;
    font-size: 1.1rem;
}

.beneficio-control p {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

/* Control de Imagen en Sección Distribución Local */
.local-bloque-imagen {
    width: 100% !important;
    height: 250px !important; /* Altura controlada y simétrica para equilibrar el texto */
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 15px 0 25px 0 !important; /* Espaciado que da aire entre los párrafos */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important; /* Suave relieve tridimensional */
}

.img-local-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Ajusta la foto del motorizado perfectamente sin deformarla */
    object-position: center center !important; /* Mantiene la acción en el centro de la pantalla */
    display: block !important;
}

/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN DISTRIBUCIÓN NACIONAL
   ======================================================== */

.nacional-info-section {
    padding: 80px 0;
    background-color: #ffffff; /* Mantiene el fondo blanco limpio */
}

.nacional-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nacional-texto h2 {
    font-size: 1.8rem;
    color: #0f172a;
    margin: 15px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Control e Integración de la Imagen Nacional */
.nacional-bloque-imagen {
    width: 100% !important;
    height: 380px !important; /* Incrementamos de 250px a 380px para dar el aire vertical suficiente */
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 20px 0 25px 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.img-nacional-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Mantiene la proporción perfecta sin estirar la foto */
    
    /* CAMBIO CLAVE: Cambiamos de "center" a "top center" para priorizar la cabeza y el rostro */
    object-position: top center !important; 
    display: block !important;
}

/* Bloque Informativo de las 41 Ciudades */
.nacional-cobertura-badge {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #f8f9fa; /* Fondo gris neutral sutil */
    padding: 18px 22px;
    border-radius: 8px;
    border-left: 3px solid #cbd5e1;
    margin-top: 15px;
}

.map-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.nacional-cobertura-badge h4 {
    font-size: 1rem;
    color: #0f172a;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.nacional-cobertura-badge p {
    font-size: 0.92rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* Tarjeta Destacada 24/7 (Columna Derecha) */
.nacional-entrega-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Borde superior gris pizarra unificado */
    align-self: start;
}

.entrega-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.reloj-icon {
    font-size: 1.8rem;
    color: #f59e0b; /* Icono en tono oro corporativo */
}

.nacional-entrega-card h3 {
    font-size: 1.4rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.nacional-entrega-card p {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.entrega-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

.subtitulo-operativo {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.beneficio-nacional {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.beneficio-nacional:last-child {
    margin-bottom: 0;
}

.beneficio-nacional p {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

/* Ajuste dinámico opcional para pantallas medianas o laptops */
@media (max-width: 1200px) {
    .nacional-bloque-imagen {
        height: 320px !important; /* Mantiene un balance estético en pantallas más compactas */
    }
}

/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN SEGUROS DE CARGA
   ======================================================== */

.seguros-info-section {
    padding: 80px 0;
    background-color: #ffffff; /* Mantiene la consistencia del fondo blanco */
}

.seguros-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.seguros-texto h2 {
    font-size: 1.8rem;
    color: #0f172a;
    margin: 15px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Control e Integración de la Imagen de Seguros */
.seguros-bloque-imagen {
    width: 100% !important;
    height: 250px !important; /* Mantiene simetría con las otras páginas del menú */
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 15px 0 25px 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.img-seguros-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Bloque Informativo del Respaldo de Chubb */
.seguros-alianza-box {
    background-color: #f8f9fa; /* Fondo gris neutral suave */
    padding: 22px;
    border-radius: 8px;
    border-left: 3px solid #cbd5e1;
    margin-top: 25px;
}

.chubb-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
}

.shield-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.chubb-header h4 {
    font-size: 1rem;
    color: #0f172a;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.small-pizarrra {
    font-size: 0.88rem;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

.chubb-detalles {
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.5;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

/* Tarjeta Técnica de la Póliza (Columna Derecha) */
.seguros-poliza-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Borde superior pizarra unificado */
    align-self: start;
}

.poliza-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.document-icon {
    font-size: 2rem;
}

.seguros-poliza-card h3 {
    font-size: 1.3rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.poliza-numero {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    margin: 2px 0 0 0;
    letter-spacing: 0.5px;
}

.poliza-intro {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.seguros-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

.subtitulo-seguros {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.riesgo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.riesgo-item:last-child {
    margin-bottom: 0;
}

.check-icon-oro {
    color: #f59e0b; /* Check dorado corporativo unificado */
    font-weight: bold;
    font-size: 1.1rem;
}

.riesgo-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

/* Caja Destacada de Costos / Prima Mínima */
.prima-comercial-box {
    background-color: #fcf8f2; /* Tono arena/oro cálido muy claro */
    border: 1px dashed #f59e0b; /* Borde punteado oro sutil */
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.tasa-prima {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.prima-minima {
    font-size: 0.92rem;
    color: #475569;
    margin: 0;
    line-height: 1.4;
}

/* Estilos para el enlace oficial de Chubb */
.chubb-link-container {
    margin-top: 15px;
    text-align: left;
}

.chubb-sitio-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem !important;
    color: #475569 !important; /* Gris pizarra elegante */
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.chubb-sitio-link span {
    transition: transform 0.2s ease;
}

/* Efecto visual sutil al pasar el mouse */
.chubb-sitio-link:hover {
    color: #f59e0b !important; /* Cambia al tono oro corporativo de tu web */
}

.chubb-sitio-link:hover span {
    transform: translateX(3px); /* Desplaza la flecha suavemente a la derecha */
}


/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN TARIFARIO
   ======================================================== */

.tarifario-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff; /* Fondo blanco fluido */
}

/* Alerta de cabecera del tarifario */
.tarifario-alert {
    background-color: #fffbeb;
    border: 1px dashed #f59e0b;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #475569;
    text-align: center;
}
.tarifario-alert a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 700;
}

/* Grilla para las dos tablas informativas */
.grid-dos-columnas-tarifas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 20px;
}

.bloque-tarifas-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Línea de acento unificada */
}

.tarifa-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.tarifa-card-header h3 {
    font-size: 1.3rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}
.tarifa-card-header small {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}
.card-icon-tarifa { font-size: 1.5rem; }

/* Estilos de las tablas logísticas */
.tabla-logistica {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 0.95rem;
}
.tabla-logistica th {
    background-color: #f1f5f9;
    color: #0f172a;
    text-align: left;
    padding: 12px 15px;
    font-weight: 700;
    border-bottom: 2px solid #cbd5e1;
}
.tabla-logistica td {
    padding: 12px 15px;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
}
.precio-celda {
    font-weight: 700;
    color: #0f172a;
}

/* Cajas inferiores de avisos específicos (Urgentes e Iquitos) */
.urgentes-box, .iquitos-box {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid #cbd5e1;
}
.tag-urgente, .tag-aereo {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.tag-urgente { color: #dc2626; }
.tag-aereo { color: #0284c7; }

.urgentes-box p, .iquitos-box p {
    font-size: 0.88rem;
    color: #475569;
    margin: 0 0 6px 0;
}
.urgentes-precios {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}

/* Caja de Condiciones del Servicio */
.tarifario-condiciones-box {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 30px;
}
.tarifario-condiciones-box h4 {
    font-size: 1.1rem;
    color: #0f172a;
    margin: 0 0 20px 0;
    font-weight: 700;
}
.condiciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
.condiciones-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.condiciones-grid li {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ========================================================
   RESPONSIVE EN COMPUTADORAS (PC)
   ======================================================== */
@media (min-width: 992px) {
    .grid-dos-columnas-tarifas {
        grid-template-columns: 1fr 1fr; /* Tablas lado a lado en PC */
    }
    .condiciones-grid {
        grid-template-columns: 1fr 1fr; /* Lista de inclusiones en dos columnas */
    }
}

/* Corrección de color para el enlace en la caja de alerta */
.tarifario-alert a {
    color: #0f172a !important;          /* Gris pizarra profundo / Casi negro (Misma tipografía) */
    text-decoration: underline !important; /* Mantiene el subrayado sutil para indicar que es un link */
    font-weight: 700 !important;
    transition: color 0.2s ease !important; /* Suaviza el cambio de color al pasar el mouse */
}

/* Efecto sutil al pasar el cursor por encima */
.tarifario-alert a:hover {
    color: #f59e0b !important;          /* Cambia al oro/ámbar unificado de la marca */
    text-decoration: none !important;    /* Quita el subrayado momentáneamente para dar feedback visual */
}

/* ========================================================
   ESTILOS COMPLEMENTARIOS: CALCULADORA PESO VOLUMEN
   ======================================================== */

.calculadora-section {
    padding: 80px 0;
    background-color: #ffffff; /* Fondo blanco fluido */
}

/* Tarjeta del Formulario (Izquierda) */
.calculadora-formulario-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Línea de acento pizarra unificada */
}

.calc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.calc-card-header h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.calc-icon-tool { font-size: 1.5rem; }

.calc-instructions {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Grupos de campos de entrada con medidas */
.input-calc-group {
    margin-bottom: 20px;
}

.input-calc-group:last-child {
    margin-bottom: 0;
}

.input-calc-group label {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-with-unit {
    display: flex;
    position: relative;
    align-items: center;
}

.input-with-unit input {
    width: 100%;
    padding: 12px 60px 12px 15px; /* Espacio derecho para que el número no choque con 'cm' */
    font-size: 1.1rem;
    color: #0f172a;
    background-color: #f8f9fa;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    transition: all 0.2s ease;
    font-weight: 600;
}

/* Cambio de enfoque limpio al digitar */
.input-with-unit input:focus {
    background-color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

.unit-badge {
    position: absolute;
    right: 15px;
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 700;
    pointer-events: none; /* Evita que interfiera al hacer clic en el input */
}

/* Tarjeta de Visualización de Resultados (Derecha) */
.calculadora-resultado-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b;
    align-self: start;
}

.resultado-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.resultado-card-header h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.box-icon-tool { font-size: 1.5rem; }

/* Caja tridimensional destacada del número */
.display-resultado-box {
    background-color: #0f172a; /* Fondo oscuro idéntico a tus bloques KPI */
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 25px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resultado-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 5px;
}

.resultado-grande {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fbbf24; /* Color Oro corporativo para el número dinámico */
    line-height: 1;
}

.resultado-grande small {
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 600;
    margin-left: 5px;
}

/* Notas técnicas e informativas de la fórmula */
.calc-nota-tecnica h4 {
    font-size: 0.9rem;
    color: #0f172a;
    margin: 0 0 6px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.formula-texto {
    font-family: monospace;
    font-size: 1rem;
    color: #2563eb; /* Azul técnico sutil solo para la fórmula matemática */
    font-weight: 700;
    margin: 0;
}

.calc-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 20px 0;
}

.small-text-pizarra {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

/* Control de Imagen en la Sección Calculadora (Centrada de forma exacta) */
.calc-bloque-imagen {
    width: 100% !important;
    height: 180px !important; /* Mantiene la altura ideal compacta */
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 0 25px 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff !important; /* Cambiado a blanco puro para que se fusione invisiblemente con el fondo de la caja */
    
    /* CAMBIO CLAVE: Activamos Flexbox para centrar todo el contenido interno */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.img-calc-fluid {
    width: auto !important; /* Permite que la imagen mantenga su ancho original sin estirarse a los bordes */
    height: 100% !important; /* Ocupa el alto máximo disponible de forma proporcional */
    object-fit: contain !important;
    display: block !important;
}


/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN CÓDIGOS POSTALES
   ======================================================== */

.codigos-postales-section {
    padding: 80px 0;
    background-color: #ffffff; /* Fondo blanco consistente */
}

/* Tarjeta del Iframe (Izquierda) */
.codigos-frame-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Línea de acento unificada */
}

.frame-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.frame-card-header h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.frame-icon-tool { font-size: 1.5rem; }

.frame-instructions {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* Contenedor del IFrame Responsivo */
.iframe-postal-wrapper {
    width: 100% !important;
    height: 500px !important; /* Altura ideal fija para operar el buscador del MTC con comodidad */
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    background-color: #f8f9fa;
}

.iframe-postal-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
}

/* Tarjeta de Guía Lateral (Derecha) */
.codigos-guia-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b;
    align-self: start;
}

.guia-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.guia-card-header h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.info-icon-tool { font-size: 1.5rem; }

.guia-intro {
    font-size: 0.98rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

.codigos-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

.subtitulo-postal {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.consejo-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.consejo-item:last-child {
    margin-bottom: 0;
}

.check-icon-oro {
    color: #f59e0b; /* Dorado corporativo unificado */
    font-weight: bold;
    font-size: 1.1rem;
}

.consejo-item p {
    margin: 0;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

/* Caja de Soporte y Enlaces */
.soporte-postal-box {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid #cbd5e1;
}

.small-text-pizarra {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.link-postal-externo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem !important;
    color: #0f172a !important; /* Gris pizarra inicial */
    text-decoration: underline !important;
    font-weight: 700 !important;
    transition: color 0.2s ease !important;
}

.link-postal-externo span {
    transition: transform 0.2s ease;
}

.link-postal-externo:hover {
    color: #f59e0b !important; /* Brillo en Oro al pasar el mouse */
    text-decoration: none !important;
}

.link-postal-externo:hover span {
    transform: translateX(3px);
}

/* Ajustes finos responsivos */
@media (max-width: 992px) {
    .iframe-postal-wrapper {
        height: 420px !important; /* Altura compacta en celulares para facilitar el scroll global */
    }
}

/* ========================================================
   ESTILOS COMPLEMENTARIOS: SECCIÓN CONTÁCTENOS
   ======================================================== */

.contacto-main-section {
    padding: 80px 0;
    background-color: #ffffff; /* Consistencia del fondo blanco limpio */
}

/* Tarjeta del Formulario (Izquierda) */
.contacto-formulario-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b; /* Línea de acento unificada */
}

.contacto-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.contacto-card-header h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin: 0;
    font-weight: 700;
}

.contacto-icon-tool { font-size: 1.5rem; }

/* Estructura interna del formulario */
.form-logistica {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row-doble {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-form-group label {
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.input-form-group label .req {
    color: #dc2626; /* Asterisco rojo requerido */
}

.input-form-group input,
.input-form-group select,
.input-form-group textarea {
    padding: 12px 15px;
    font-size: 0.98rem;
    color: #0f172a;
    background-color: #f8f9fa;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.input-form-group input:focus,
.input-form-group select:focus,
.input-form-group textarea:focus {
    background-color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.05);
}

/* Caja aclaratoria interna */
.nota-formulario-aclaratoria {
    background-color: #f1f5f9;
    border-radius: 6px;
    padding: 15px 20px;
    border-left: 3px solid #64748b;
}

.nota-formulario-aclaratoria p {
    font-size: 0.88rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* Botón de Envió */
.btn-formulario-submit {
    background-color: #0f172a !important; /* Gris pizarra oscuro corporativo */
    color: #ffffff !important;
    border: none !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center;
}

.btn-formulario-submit:hover {
    background-color: #f59e0b !important; /* Brillo en oro al interactuar */
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2) !important;
}

/* Tarjeta de Canales de Información (Derecha) */
.contacto-canales-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02);
    border-top: 4px solid #1e293b;
    align-self: start;
}

.canal-item-contacto {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.canal-item-contacto:last-of-type {
    margin-bottom: 0;
}

.canal-icon-wrap {
    font-size: 1.4rem;
    line-height: 1;
    padding-top: 2px;
}

.canal-text-wrap h4 {
    font-size: 1rem;
    color: #0f172a;
    margin: 0 0 4px 0;
    font-weight: 700;
}

.canal-text-wrap p {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* Enlaces limpios sin azul de navegador */
.link-canal-contacto {
    color: #0f172a !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

.link-canal-contacto:hover {
    color: #f59e0b !important;
    text-decoration: none !important;
}

.contacto-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 30px 0 25px 0;
}

.mapa-ubicacion-header h4 {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

/* ========================================================
   MEDIA QUERY: AJUSTES EN COMPUTADORAS (PC)
   ======================================================== */
@media (min-width: 768px) {
    .form-row-doble {
        flex-direction: row; /* Inputs lado a lado en PC */
    }
}


/* ========================================================
   ESTILOS COMPLEMENTARIOS: LIBRO DE RECLAMACIONES VIRTUAL
   ======================================================== */

.reclamaciones-main-section {
    padding: 60px 0 80px 0;
    background-color: #ffffff;
}

/* Cabecera Técnica de Identificación Corporativa */
.libro-identificacion-empresa {
    background-color: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 40px;
    border-left: 4px solid #0f172a; /* Línea de acento gris pizarra unificada */
}

.libro-identificacion-empresa p {
    font-size: 0.92rem;
    color: #475569;
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.libro-identificacion-empresa p:last-child {
    margin-bottom: 0;
}

/* Formulario Legal y Agrupadores (Fieldsets) */
.form-libro-legal {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.libro-fieldset {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 30px !important;
    margin: 0 !important;
    background-color: #ffffff;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.01);
}

.libro-fieldset legend {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background-color: #ffffff;
    padding: 0 15px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grillas Internas del Formulario */
.form-row-triple {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

/* Controles de Radio Buttons Personalizados */
.radio-group-legal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.row-radios {
    gap: 18px;
}

.radio-label-custom {
    font-size: 0.95rem;
    color: #334155;
    font-weight: 500 !important;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.radio-label-custom input[type="radio"] {
    margin-top: 3px;
    accent-color: #0f172a; /* Color de activación alineado a la marca */
    transform: scale(1.1);
}

/* Caja de advertencia e instrucciones INDECOPI */
.nota-legal-indecopi {
    background-color: #fffbeb; /* Tono arena suave */
    border: 1px dashed #f59e0b; /* Borde segmentado oro sutil */
    border-radius: 8px;
    padding: 25px;
}

.nota-legal-indecopi p {
    font-size: 0.95rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.nota-legal-indecopi ul {
    margin: 0;
    padding-left: 20px;
}

.nota-legal-indecopi li {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 8px;
}

.nota-legal-indecopi li:last-child {
    margin-bottom: 0;
}

/* ========================================================
   MEDIA QUERIES: OPTIMIZACIÓN EN COMPUTADORAS (PC)
   ======================================================== */
@media (min-width: 768px) {
    .form-row-triple {
        flex-direction: row; /* 3 columnas perfectas en escritorio */
    }
    
    .form-row-triple .input-form-group:first-child {
        flex: 2; /* Le da más ancho proporcional a la caja de Nombres completos */
    }
}

/* Espaciado interno para dar aire y orden a cada campo */
.input-form-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 22px !important; /* SEPARACIÓN ENTRE FILAS: Espacio limpio para que respire cada bloque */
}

/* Evitamos que el último elemento de una fila duplique espaciado */
.form-row-triple .input-form-group,
.form-row-doble .input-form-group {
    margin-bottom: 0 !important; 
}

/* Separación específica para las filas compuestas en móviles o estructuras apiladas */
.form-row-doble, 
.form-row-triple {
    margin-bottom: 22px !important; /* Agrega espacio limpio debajo de los bloques agrupados */
}

/* Espacio milimétrico entre el texto de la etiqueta y su caja de texto */
.input-form-group label {
    font-size: 0.88rem !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important; /* SEPARACIÓN ETIQUETA-INPUT: Despega el texto del borde de la caja */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}





/* ========================================================
   SECCIÓN EVOLUCIÓN DE IDENTIDAD (HOME INDEX)
   ======================================================== */

.evolucion-identidad-section {
    padding: 80px 0 90px 0;
    background-color: #ffffff; /* Fondo blanco fluido */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Grilla horizontal de logotipos en PC, apilada en móvil */
.comparativa-logos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.logo-evolucion-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
}

/* Píldoras informativas encima de los logos */
.tag-evolucion-sm {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    display: inline-block;
}
.tag-inicio { background-color: #94a3b8; color: #ffffff; }
.tag-actual { background-color: #dc2626; color: #ffffff; } /* Rojo de la marca */

/* Contenedores proporcionales de imágenes */
.wrapper-logo-old, 
.wrapper-logo-new {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-logo-comp {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Evita cualquier deformación en las marcas */
}

/* Bloque de la flecha de transición */
.flecha-evolucion-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flecha-dinamica {
    font-size: 2.2rem;
    color: #dc2626; /* Tono rojo/óxido direccional */
    font-weight: bold;
    transform: rotate(90deg); /* Apunta hacia abajo por defecto en celulares */
}

/* Contenedor del Eslogan Principal */
.eslogan-identidad-content {
    margin-bottom: 60px;
}

.eslogan-identidad-content h2 {
    font-size: 2.6rem;
    color: #0f172a; /* Pizarra oscuro */
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -1px;
    margin: 0;
}

.texto-rojo-compromiso {
    color: #dc2626; /* Realce del compromiso en rojo */
}

/* Barra de Pilares Inferior */
.barra-pilares-identidad {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 en celulares */
    gap: 25px;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

.pilar-item-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #f8f9fa;
    padding: 12px 20px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.pilar-mini-icon {
    font-size: 1.3rem;
    line-height: 1;
}

.pilar-item-mini h5 {
    font-size: 0.9rem;
    color: #0f172a;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ========================================================
   MEDIA QUERY PARA COMPUTADORAS (PC)
   ======================================================== */
@media (min-width: 768px) {
    .comparativa-logos-container {
        flex-direction: row; /* Coloca los logos de lado a lado */
        gap: 50px;
    }

    .logo-evolucion-box {
        width: 35%;
    }

    .flecha-dinamica {
        transform: rotate(0deg); /* Vuelve a apuntar horizontalmente en PC */
        font-size: 2.5rem;
    }

    .eslogan-identidad-content h2 {
        font-size: 3.5rem; /* Eslogan de grandes dimensiones tipográficas */
    }

    .barra-pilares-identidad {
        grid-template-columns: repeat(4, 1fr); /* Línea horizontal perfecta de 4 columnas */
        gap: 20px;
    }
}

/* ========================================================
   BARRA DE PILARES DE CONFIANZA - RÉPLICA EXACTA IMAGEN
   ======================================================== */

.barra-pilares-identidad-exacta {
    display: flex !important;
    flex-direction: column !important; /* Apilado en celulares por espacio */
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    max-width: 900px !important;
    margin: 50px auto 0 auto !important;
    padding-top: 35px !important;
    border-top: 1px solid #e2e8f0 !important; /* Línea superior sutil */
}

/* Elemento Pilar Individual */
.pilar-item-exacto {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important; /* Separación exacta entre el icono y la palabra */
}

/* Icono Vectorial Rojo */
.pilar-svg-icon {
    width: 24px !important;
    height: 24px !important;
    color: #dc2626 !important; /* El color rojo vivo exacto de tu logotipo */
    flex-shrink: 0;
}

/* Texto de cada Pilar */
.pilar-item-exacto span {
    font-size: 0.88rem !important;
    color: #1e293b !important; /* Gris pizarra oscuro corporativo */
    font-weight: 700 !important;
    text-transform: uppercase !important; /* Todo en mayúsculas como la imagen */
    letter-spacing: 1px !important;      /* Espaciado elegante entre letras */
}

/* Línea divisoria vertical */
.pilar-divisor-linea {
    width: 100% !important;
    height: 1px !important;
    background-color: #cbd5e1 !important; /* Línea sutil en celular */
    max-width: 150px;
}

/* ========================================================
   MEDIA QUERY: ALINEACIÓN HORIZONTAL IDÉNTICA (PC)
   ======================================================== */
@media (min-width: 768px) {
    .barra-pilares-identidad-exacta {
        flex-direction: row !important; /* Línea recta horizontal perfecta */
        gap: 35px !important;          /* Espaciado generoso idéntico a la imagen */
    }

    /* Transformación de la línea divisoria a vertical en PC */
    .pilar-divisor-linea {
        width: 1px !important;
        height: 22px !important; /* Altura de la barrita divisoria '|' */
        background-color: #cbd5e1 !important; /* Color gris suave que no compite */
    }
}


/* ========================================================
   ESTILOS DE AJUSTE EXACTO: COMPARATIVA DE LOGOTIPOS
   ======================================================== */

.comparativa-logos-container-exacto {
    display: flex !important;
    flex-direction: column !important; /* Apilado limpio en celulares */
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-bottom: 50px !important;
    width: 100% !important;
}

.logo-evolucion-box-exacto {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 300px !important;
}

/* Forzamos a que ambas cajas de imágenes midan exactamente igual */
.wrapper-logo-homogeneo {
    width: 100% !important;
    height: 120px !important; /* Altura unificada estricta para igualar tamaños */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.img-logo-comp-exacta {
    max-width: 85% !important;  /* Equilibrio simétrico de escala */
    max-height: 85% !important;
    object-fit: contain !important; /* Mantiene la nitidez de las marcas sin estirarlas */
}

/* Contenedor central de la flecha vectorial */
.flecha-evolucion-box-exacta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 200px !important;
    height: 60px !important;
}

/* El elemento SVG se adapta de forma fluida y se centra solo horizontalmente */
.svg-flecha-degradada-dinamica {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ========================================================
   MEDIA QUERY: ALINEACIÓN HORIZONTAL HOMOGÉNEA (PC)
   ======================================================== */
@media (min-width: 768px) {
    .comparativa-logos-container-exacto {
        flex-direction: row !important; /* Fila recta horizontal perfecta */
        gap: 40px !important;          /* Espaciado elegante e idéntico */
        align-items: center !important; /* Centrado vertical estricto de los 3 bloques */
    }

    .logo-evolucion-box-exacto {
        width: 35% !important;
    }

    .flecha-evolucion-box-exacta {
        width: 20% !important;
        max-width: 220px !important;
        margin-top: 35px !important; /* Centra el eje del vector con la altura de los logotipos */
    }
}

/* ========================================================
   MEDIA QUERY: ALINEACIÓN HORIZONTAL HOMOGÉNEA (PC)
   ======================================================== */
@media (min-width: 768px) {
    .comparativa-logos-container-exacto {
        flex-direction: row !important; /* Coloca los elementos lado a lado */
        gap: 30px !important;           /* Espaciado de transición equilibrado */
        align-items: center !important;  /* Centrado vertical perfecto */
    }

    .logo-evolucion-box-exacto {
        width: 35% !important;
    }

    .flecha-evolucion-box-exacta {
        width: 25% !important;
        max-width: 220px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 45px !important; /* Compensa la altura de las etiquetas superiores para centrar la línea */
    }
}

/* ==========================================================================
   ESTILOS PARA LA SECCIÓN DE TOTALES IMPACTANTES (KPI CARDS)
   ========================================================================== */

.kpi-brand-card {
    height: 100%;
}

.kpi-card-inner {
    background: #ffffff; /* Fondo blanco para quitar la carga pesada */
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                border-color 0.3s ease;
    cursor: default;
}

/* Efecto Hover: Eleva sutilmente la tarjeta e ilumina el borde con el rojo de la marca */
.kpi-brand-card:hover .kpi-card-inner {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(168, 35, 42, 0.08);
    border-color: rgba(168, 35, 42, 0.3);
}

/* Caja de Icono en tono gris neutral suave */
.kpi-icon-box {
    width: 50px;
    height: 50px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.4rem;
    color: #6c757d;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.kpi-brand-card:hover .kpi-icon-box {
    background: rgba(168, 35, 42, 0.08);
    color: #a8232a; /* Muta al rojo de la empresa solo en hover */
}

/* Número a tamaño real equilibrado (Estilo dashboard ejecutivo) */
.kpi-counter-display {
    font-size: 2.4rem; /* Reducido para no verse tosco o gigante */
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: 0.3rem;
    letter-spacing: -0.5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Texto inferior en gris sutil */
.kpi-label-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #8a8d93;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0;
    transition: color 0.3s ease;
}

.kpi-brand-card:hover .kpi-label-title {
    color: #212529;
}