/**
 * style.css - Hoja de Estilos Principal y Única para Telematik GPS
 * Versión: ELITE 5.2 FINAL
 *
 * --- ÍNDICE DE ESTILOS ---
 * 1. VARIABLES GLOBALES Y ESTILOS BASE
 * 2. ESTRUCTURA GENERAL
 * 3. ENCABEZADO Y NAVEGACIÓN
 * 4. PÁGINA DE INICIO (HOME)
 * 5. PÁGINAS INTERIORES (ABOUT, BENEFITS, PLANS, CONTACT, LEGAL)
 * 6. PIE DE PÁGINA (FOOTER)
 * 7. ANIMACIONES DE SCROLL
 * 8. ESTILOS PARA DISPOSITIVOS MÓVILES (RESPONSIVIDAD)
 */

/* ============================================= */
/* 1. VARIABLES GLOBALES Y ESTILOS BASE          */
/* ============================================= */
:root {
    /* --- Paleta de Colores --- */
    /* Modifica estos valores para cambiar los colores en todo el sitio. */
    --color-primary: #36458E;          /* Azul oscuro corporativo (para fondos, títulos, nav). */
    --color-secondary: #f37a23;       /* Naranja para botones de acción (CTA). */
    --color-accent: #ae53d8;           /* Violeta para acentos y enlaces activos. */
    --color-text-dark: #333333;       /* Color para texto principal, casi negro. */
    --color-text-light: #5f6c7b;      /* Color para texto secundario, gris azulado. */
    --color-background-light: #f8f9fa; /* Gris muy claro para fondos de sección. */
    --color-white: #ffffff;           /* Blanco puro. */
    --color-border: #e9ecef;          /* Color para bordes sutiles. */

    /* --- Tipografía --- */
    /* Cambia la familia de fuentes principal del sitio aquí. */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Reseteo Básico --- */
/* Esto asegura que todos los elementos se comporten igual en todos los navegadores. */
* {
    box-sizing: border-box; /* El padding y borde se incluyen en el ancho/alto total del elemento. */
    margin: 0;              /* Elimina todos los márgenes por defecto. */
    padding: 0;             /* Elimina todos los paddings por defecto. */
}

body {
    font-family: var(--font-main); /* FUENTE: Fuente principal del sitio. */
    color: var(--color-text-dark); /* COLOR: Color de texto por defecto. */
    background-color: var(--color-white); /* COLOR: Color de fondo general de la página. */
    line-height: 1.6;              /* TAMAÑO: Altura de línea para mejorar legibilidad. */
    -webkit-font-smoothing: antialiased; /* Renderizado de fuentes más suave en Chrome/Safari. */
    -moz-osx-font-smoothing: grayscale;  /* Renderizado de fuentes más suave en Firefox. */
}

/* ============================================= */
/* 2. ESTRUCTURA GENERAL                         */
/* ============================================= */

/* --- Contenedor Principal --- */
/* Limita el ancho del contenido y lo centra en la página. */
.container {
    max-width: 1200px; /* ANCHO: Ancho máximo del contenido principal. */
    width: 100%;       /* Ocupa el 100% del espacio disponible hasta el máximo. */
    margin-left: auto; /* Centra el contenedor. */
    margin-right: auto;/* Centra el contenedor. */
    padding-left: 20px;/* ESPACIADO: Espaciado lateral de seguridad. */
    padding-right: 20px;/* ESPACIADO: Espaciado lateral de seguridad. */
}

/* --- Título de Sección --- */
/* Usado para los títulos principales de cada sección (H2). */
.section-title {
    font-size: 2.1rem;               /* TAMAÑO: Tamaño de la fuente (ajuste del usuario). */
    color: var(--color-primary);     /* COLOR: Color del texto (azul oscuro). */
    text-align: center;              /* ALINEACIÓN: Centrado. */
    margin-bottom: 60px;             /* ESPACIADO: Margen inferior para dar espacio. */
}

/* ============================================= */
/* 3. ENCABEZADO Y NAVEGACIÓN                    */
/* ============================================= */

/* --- Contenedor Fijo del Encabezado --- */
.header-sticky-container {
    position: sticky; /* POSICIÓN: Fija en la parte superior. */
    top: 0;
    z-index: 1000;      /* CAPA: Se asegura que esté por encima de todo. */
    background-color: var(--color-white); /* COLOR: Fondo blanco. */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* SOMBRA: Sutil para dar profundidad. */
}

/* --- Barra Superior Blanca --- */
.top-bar {
    padding: 10px 0; /* ESPACIADO: Interno vertical. */
}

.top-bar .container {
    display: flex; /* LAYOUT: Activa Flexbox para alinear elementos en una línea. */
    justify-content: space-between; /* LAYOUT: Distribuye el espacio entre los elementos. */
    align-items: center; /* LAYOUT: Alinea verticalmente los elementos. */
}

.header-logo img {
    height: 70px; /* TAMAÑO: Altura del logo (ajuste del usuario). */
    display: block;
}

/* --- Título Central del Encabezado --- */
.header-center-title {
    color: var(--color-primary); /* COLOR: Color del texto (azul oscuro). */
    font-size: 1.3rem;           /* TAMAÑO: Tamaño de la fuente (ajuste del usuario). */
    font-weight: 700;            /* FUENTE: Grosor (negrita). */
    text-transform: uppercase;   /* ESTILO: Texto en mayúsculas. */
    padding: 0 15px;             /* ESPACIADO: Interno lateral. */
    text-align: center;          /* ALINEACIÓN: Centrado. */
}

.header-right-controls {
    display: flex; /* LAYOUT: Elementos en línea. */
    align-items: center;
}

/* --- Botón de Iniciar Sesión --- */
.btn-login {
    background-color: var(--color-secondary); /* COLOR: Fondo naranja. */
    color: var(--color-white);                /* COLOR: Texto blanco. */
    padding: 10px 25px;                       /* ESPACIADO: Interno del botón. */
    border-radius: 5px;                       /* BORDE: Redondeado. */
    font-weight: bold;                        /* FUENTE: Negrita. */
    text-decoration: none;                    /* ESTILO: Sin subrayado. */
    transition: background-color 0.3s ease;   /* ANIMACIÓN: Transición suave para el color. */
    white-space: nowrap;                      /* TEXTO: Evita que el texto se parta en dos líneas. */
}

.btn-login:hover {
    background-color: #d86a1d; /* COLOR: Naranja más oscuro al pasar el ratón. */
}

/* --- Selector de Idiomas HORIZONTAL --- */
.language-selector {
    display: flex; /* LAYOUT: Elementos en línea. */
    align-items: center;
    gap: 8px; /* ESPACIADO: Espacio entre idiomas. */
    margin-left: 30px; /* ESPACIADO: Espacio a la izquierda, separándolo del botón. */
    border-left: 1px solid var(--color-border); /* LÍNEA: Divisoria a la izquierda. */
    padding-left: 30px; /* ESPACIADO: A la izquierda de la línea. */
}

.language-selector a {
    color: var(--color-text-light); /* COLOR: Texto gris. */
    font-weight: bold;              /* FUENTE: Negrita. */
    text-decoration: none;
    font-size: 1rem;                /* TAMAÑO: Fuente. */
    transition: color 0.3s ease;    /* ANIMACIÓN: Suave para el color. */
}

.language-selector a.active {
    color: var(--color-accent); /* COLOR: Violeta para el idioma activo. */
}

/* --- Barra de Navegación Principal Azul --- */
.main-navigation {
    background-color: var(--color-primary); /* COLOR: Fondo azul oscuro. */
}

.main-navigation ul {
    list-style: none; /* Quita los puntos de la lista. */
    display: flex; /* LAYOUT: Elementos en línea. */
    justify-content: center; /* Centra los elementos de la navegación. */
    margin: 0;
    padding: 0;
}

.main-navigation ul li a {
    display: block;
    padding: 14px 25px;
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.main-navigation ul li a:hover {
    color: #cccccc; /* COLOR: Un blanco menos intenso en hover. */
}

.main-navigation ul li.active a {
    background-color: transparent !important;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
}


/* ============================================= */
/* 4. PÁGINA DE INICIO (HOME)                    */
/* ============================================= */

/* --- 4.1. Sección Héroe --- */

/* Contenedor principal de la sección. */
/* ALTURA INTENCIONAL: Se mantiene en 10vh según tus indicaciones. */
.hero-section {
    position: relative;                  /* POSICIÓN: Necesario para que la capa de superposición (.hero-overlay) se posicione correctamente. */
    height: 10vh;                        /* TAMAÑO: Altura del 10% de la ventana (tu ajuste). */
    min-height: 600px;                   /* TAMAÑO: Altura mínima para asegurar que se vea bien en pantallas grandes. */
    display: flex;                       /* LAYOUT: Activa Flexbox para centrar el contenido. */
    align-items: center;                 /* LAYOUT: Centra el contenido verticalmente. */
    justify-content: center;             /* LAYOUT: Centra el contenido horizontalmente. */
    text-align: center;                  /* ALINEACIÓN: Centra el texto dentro del contenedor. */
    color: var(--color-white);           /* COLOR: Texto blanco. */
    background-image: url(../images/home-solutions.webp); /* IMAGEN: de fondo. */
    background-size: cover;              /* IMAGEN: Cubre toda la sección sin deformarse. */
    background-position: center center;  /* IMAGEN: Centrada. */
    background-attachment: fixed;        /* EFECTO: Parallax, la imagen se queda fija al hacer scroll. */
    padding: 0 20px;                     /* ESPACIADO: Lateral de seguridad. */
}

/* Capa de superposición para mejorar contraste y legibilidad del texto. */
.hero-overlay {
    position: absolute;                  /* POSICIÓN: Se superpone a la imagen de fondo. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(21, 53, 99, 0.8), rgba(21, 53, 99, 0.5)); /* COLOR: Gradiente azul oscuro. */
}

/* Contenedor del texto del héroe. */
.hero-content {
    position: relative;                  /* POSICIÓN: Para que esté por encima del overlay. */
    z-index: 2;
    max-width: 950px;                    /* ANCHO: Máximo del texto. */
}

/* Título principal H1. */
.hero-content h1 {
    font-size: 3rem;                     /* TAMAÑO: Fuente del titular (tu ajuste). */
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* SOMBRA: Para que resalte. */
    line-height: 1.2;
}

/* Subtítulo del héroe. */
.hero-content .hero-subtitle {
    font-size: 1.5rem;                   /* TAMAÑO: Fuente del subtítulo. */
    font-weight: 300;
    opacity: 0.95;
}

/* --- CORRECCIÓN PARA CENTRADO PERFECTO DEL TÍTULO DEL HÉROE --- */
/* Esta regla se asegura de que el contenido dentro del héroe esté perfectamente centrado horizontalmente. */
.hero-section .container {
    display: flex;           /* LAYOUT: Convierte al .container en un contenedor flex. */
    justify-content: center; /* ALINEACIÓN: Centra a su hijo (.hero-content) horizontalmente. */
    align-items: center;     /* ALINEACIÓN: Centra a su hijo (.hero-content) verticalmente. */
    height: 100%;            /* TAMAÑO: Asegura que ocupe toda la altura de la sección para un centrado vertical perfecto. */
}

/* --- 4.2. Sección "Todo lo que necesitas" (3 Tarjetas con Iconos) --- */
.key-features-section {
    padding: 80px 20px; /* ESPACIADO: Interno de la sección. */
    background-color: var(--color-white);
}

.key-features-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* LAYOUT: Columnas responsivas. */
    gap: 35px;
    max-width: 1200px;
    margin: 0 auto;
}

.key-feature-card {
    background: var(--color-white);
    padding: 35px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07); /* SOMBRA: Suave. */
    transition: transform .3s ease, box-shadow .3s ease; /* ANIMACIÓN: Suave. */
}

.key-feature-card:hover {
    transform: translateY(-3px) scale(1.05); /* EFECTO: Eleva y agranda la tarjeta. */
    box-shadow: 0 150px 450px rgba(0, 0, 0, 0.20); /* SOMBRA: Tu sombra personalizada. */
}

.key-feature-card .card-icon-wrapper {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    margin-bottom: 25px;
    background-color: #eaf2f8; /* COLOR: Círculo de fondo del icono. */
    border-radius: 50%;
}

.key-feature-card .card-icon {
    height: 105px; /* TAMAÑO: Tu tamaño de icono personalizado. */
    width: auto;
}

.key-feature-card h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 15px;
}

.key-feature-card p {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* --- 4.3. Sección Rejilla de Características (14 Tarjetas) --- */
.platform-features-section {
    padding: 80px 20px;
    background-color: var(--color-background-light); /* COLOR: Fondo gris claro. */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* LAYOUT: Columnas responsivas. */
    gap: 30px;
}

.feature-item-card {
    background-color: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08); /* SOMBRA: Suave. */
    overflow: hidden; /* Oculta lo que se salga de los bordes redondeados. */
    display: flex;
    flex-direction: column; /* LAYOUT: Alineación vertical. */
    transition: transform .3s ease, box-shadow .3s ease;
}

.feature-item-card:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 120px 450px rgba(0, 0, 0, 0.20); /* SOMBRA: Tu sombra personalizada. */
}

.feature-item-card .card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* IMAGEN: Cubre el espacio sin deformarse. */
    display: block;
}

.feature-item-card .card-content {
    padding: 30px;
    flex-grow: 1; /* Si las tarjetas tienen alturas diferentes, esto empuja el contenido para que se alineen. */
}

.feature-item-card h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 0 0 10px;
}

.feature-item-card p {
    font-size: 1rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0;
}

/* --- 4.4. Sección Llamada a la Acción (CTA) --- */
.cta-section {
    background-color: var(--color-primary); /* COLOR: Fondo azul oscuro. */
    color: var(--color-white);
    text-align: center;
    padding: 70px 20px;
}

.cta-section h2 {
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 30px;
}

.btn-cta {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 5px 20px; /* ESPACIADO: Tu ajuste personalizado. */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform .3s ease, background-color .3s ease;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

.btn-cta:hover {
    transform: translateY(-3px) scale(1.05); /* EFECTO: Eleva y agranda el botón. */
    background-color: #d86a1d;
}

/* ============================================= */
/* 5. PIE DE PÁGINA (FOOTER)                     */
/* ============================================= */
.main-footer{background-color:var(--color-background-light);color:var(--color-text-light);padding:60px 20px 20px;border-top:4px solid var(--color-accent)}.footer-main-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;margin-bottom:40px}.footer-column h4{color:var(--color-primary);font-size:1.2rem;margin-bottom:20px;font-weight:600}.footer-logo{max-width:200px;margin-bottom:20px}.footer-column p{margin-bottom:15px;line-height:1.7}.links-column ul{list-style:none;padding:0;margin:0}.links-column ul li{margin-bottom:12px}.links-column ul li a{color:var(--color-text-light);text-decoration:none;transition:color .3s ease}.links-column ul li a:hover{color:var(--color-secondary)}.contact-column p{margin:0 0 10px}.footer-social{margin-top:20px;display:flex;gap:15px}.footer-social img{height:32px;opacity:.7;transition:opacity .3s ease,transform .3s ease}.footer-social img:hover{opacity:1;transform:scale(1.1)}.footer-bottom-bar{text-align:center;padding-top:30px;margin-top:30px;border-top:1px solid var(--color-border);color:#6c757d;font-size:.9rem}

/* ============================================= */
/* 6. ANIMACIONES DE SCROLL                      */
/* ============================================= */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .8s ease-out,transform .8s ease-out}.animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}

/* ======================================================= */
/* 7. ESTILOS PARA DISPOSITIVOS MÓVILES (RESPONSIVIDAD)    */
/* ======================================================= */
@media (max-width: 992px) {
    
    /* --- Ajustes del Encabezado para Móvil --- */
    .top-bar .container {
        flex-wrap: wrap; 
        justify-content: center;
        row-gap: 15px; 
    }

    .header-center-title {
        display: block; 
        width: 100%; 
        order: 1; 
        text-align: center; 
        font-size: 1rem; 
        margin-bottom: 10px; 
    }

    .header-logo {
        order: 2; 
        margin-right: auto; 
    }
    .header-right-controls {
        order: 2; 
    }
    
    .language-selector {
        width: 100%; 
        order: 3; 
        justify-content: center; 
        padding: 10px 0 0 0; 
        border: none; 
        margin-left: 0; 
        gap: 20px; 
    }
    
    .main-navigation ul {
        justify-content: flex-start;
        overflow-x: auto; 
        white-space: nowrap; 
    }

    /* --- Ajustes Generales para Móvil --- */
    .hero-content h1 { font-size: 2.5rem; }
    .section-title { font-size: 2.2rem; }
    .key-features-section, .platform-features-section, .cta-section { padding: 60px 20px; }
    .features-grid, .key-features-container { grid-template-columns: 1fr; }
}

/* ============================================= */
/* 8. PÁGINA SOBRE NOSOTROS (ABOUT)              */
/* ============================================= */

/* --- Cabecera de Página --- */
/* Este es un estilo general que se puede reutilizar para los títulos
   principales de todas las páginas interiores (Sobre Nosotros, Beneficios, etc.). */
.page-header {
    padding: 60px 20px;          /* ESPACIADO: Interno vertical y horizontal. */
    text-align: center;          /* ALINEACIÓN: Centra el título. */
    background-color: var(--color-background-light); /* COLOR: Fondo gris claro para un contraste suave. */
    border-bottom: 1px solid var(--color-border); /* BORDE: Línea inferior sutil para dar separación. */
}

.page-header h1 {
    font-size: 2.8rem;           /* TAMAÑO: de la fuente del título principal de la página. */
    color: var(--color-primary); /* COLOR: Azul oscuro corporativo. */
}

/* --- Contenedor principal del contenido de la página --- */
/* Proporciona el espaciado vertical principal para todo el contenido de la página. */
.page-content {
    padding-top: 80px;           /* ESPACIADO: Superior para separar de la cabecera. */
    padding-bottom: 80px;        /* ESPACIADO: Inferior para separar del pie de página. */
}

/* --- Sección de Texto e Imagen Alternados --- */
/* Estilo reutilizable para un bloque que contiene texto en una columna e imagen en la otra. */
.text-image-section {
    display: grid;               /* LAYOUT: Usa Grid para alinear texto e imagen en columnas. */
    grid-template-columns: 1fr 1fr; /* LAYOUT: Dos columnas de igual tamaño. */
    gap: 60px;                   /* ESPACIADO: Espacio entre la columna de texto y la de imagen. */
    align-items: center;         /* ALINEACIÓN: Vertical de los elementos. */
    margin-bottom: 80px;         /* ESPACIADO: Margen inferior para separar secciones. */
}

/* --- Modificador para invertir el orden de las columnas --- */
/* Añadiendo la clase .reverse al HTML, la columna de texto pasa a la derecha. */
.text-image-section.reverse .text-content {
    order: 2; /* ORDEN: Pone el bloque de texto en la segunda posición (a la derecha). */
}
.text-image-section.reverse .image-content {
    order: 1; /* ORDEN: Pone el bloque de la imagen en la primera posición (a la izquierda). */
}

/* --- Contenido de Texto de la Sección --- */
.text-content h2 {
    font-size: 2.2rem;           /* TAMAÑO: del subtítulo de la sección (ej. "Nuestra Trayectoria"). */
    color: var(--color-primary); /* COLOR: Azul oscuro. */
    margin-bottom: 20px;         /* ESPACIADO: Inferior. */
}
.text-content p {
    font-size: 1.1rem;           /* TAMAÑO: del párrafo. */
    color: var(--color-text-light); /* COLOR: Gris azulado para buena legibilidad. */
    line-height: 1.7;            /* TAMAÑO: Altura de línea para que el texto respire. */
}
.text-content p:not(:last-child) {
    margin-bottom: 15px;         /* ESPACIADO: Entre párrafos dentro de la misma sección. */
}

/* --- Contenido de Imagen de la Sección --- */
.image-content img {
    width: 100%;                 /* IMAGEN: Ocupa todo el ancho de su columna. */
    height: auto;                /* IMAGEN: Mantiene la proporción para no deformarse. */
    border-radius: 8px;          /* BORDE: Redondeado para un look más suave. */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* SOMBRA: Suave para dar profundidad y destacar la imagen. */
}

/* --- Sección de Filosofía (Misión y Visión) --- */
.philosophy-section {
    padding: 60px 0; /* ESPACIADO: Interno vertical para darle su propio espacio. */
    text-align: center; /* ALINEACIÓN: Centra el título "Nuestra Filosofía". */
}

.philosophy-grid {
    display: grid;               /* LAYOUT: Grid para las dos tarjetas de Misión y Visión. */
    grid-template-columns: 1fr 1fr; /* LAYOUT: Dos columnas iguales. */
    gap: 35px;                   /* ESPACIADO: Espacio entre las dos tarjetas. */
    text-align: left;            /* ALINEACIÓN: El texto dentro de las tarjetas se alinea a la izquierda. */
    margin-top: 40px;            /* ESPACIADO: Superior, para separarlo del título de la sección. */
}

/* --- Tarjeta Individual de Misión/Visión --- */
.philosophy-card {
    padding: 35px;               /* ESPACIADO: Interno de la tarjeta. */
    background-color: var(--color-background-light); /* COLOR: Fondo gris claro. */
    border-left: 5px solid var(--color-secondary); /* BORDE: Lateral naranja para un toque de diseño distintivo. */
    border-radius: 0 8px 8px 0;  /* BORDE: Redondeado solo en las esquinas derechas. */
}

.philosophy-card h3 {
    font-size: 1.8rem;           /* TAMAÑO: del título (ej. "Misión"). */
    color: var(--color-primary); /* COLOR: Azul oscuro. */
    margin-bottom: 15px;         /* ESPACIADO: Inferior. */
}


/* ============================================= */
/* 7. PÁGINA DE BENEFICIOS (BENEFITS)            */
/* ============================================= */

/* --- Rejilla de los 15 Beneficios Clave (Diseño Fiel a la Referencia) --- */
/* Contenedor principal para las 15 tarjetas de beneficios. */
.benefits-grid {
    display: grid;                          /* LAYOUT: Activa Grid para un diseño de columnas ordenado. */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* LAYOUT: Columnas responsivas. Cada columna tendrá un mínimo de 350px y se ajustarán automáticamente. */
    gap: 25px;                              /* ESPACIADO: Espacio entre las tarjetas de beneficios. */
    margin-top: 60px;                       /* ESPACIADO: Margen superior para separarlo del título de la sección. */
}

/* --- Tarjeta Individual de Beneficio --- */
.benefit-item-card {
    background-color: var(--color-white);   /* COLOR: Fondo blanco. */
    padding: 20px 25px;                     /* ESPACIADO: Interno de la tarjeta. */
    border-radius: 8px;                     /* BORDE: Redondeado. */
    border-left: 5px solid var(--color-secondary); /* BORDE: Lateral naranja, como en la imagen de referencia. */
    box-shadow: 0 5px 25px rgba(0,0,0,0.05); /* SOMBRA: Suave para un efecto flotante ligero. */
    display: flex;                          /* LAYOUT: Activa Flexbox para alinear el icono y el texto. */
    align-items: flex-start;                /* ALINEACIÓN: Vertical en la parte superior. */
    gap: 15px;                              /* ESPACIADO: Entre el icono (emoji) y el bloque de texto. */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ANIMACIÓN: Suaviza el efecto al pasar el ratón. */
}

.benefit-item-card:hover {
    transform: translateY(-5px);            /* EFECTO: Eleva la tarjeta 5px. */
    box-shadow: 0 8px 25px rgba(0,0,0,0.08); /* SOMBRA: Se hace un poco más pronunciada. */
}

/* --- Icono (Emoji) del Beneficio --- */
.benefit-icon {
    font-size: 1.6rem;                      /* TAMAÑO: del emoji. */
    line-height: 1;                         /* Ajuste para que no añada altura extra. */
    margin-top: 5px;                        /* Alineación vertical fina del emoji para que quede perfecto con el título. */
}

/* Contenedor del texto (título y descripción) del beneficio. */
.benefit-text-content {
    display: flex;                          /* LAYOUT: Flex para control vertical. */
    flex-direction: column;                 /* LAYOUT: Apila título y descripción. */
}

/* --- Título del Beneficio --- */
.benefit-title {
    font-size: 1.1rem;                      /* TAMAÑO: de la fuente. */
    font-weight: 600;                       /* FUENTE: Seminegrita. */
    color: var(--color-primary);            /* COLOR: Azul oscuro. */
    margin-bottom: 5px;                     /* ESPACIADO: Inferior, para separar de la descripción. */
}

/* --- Descripción del Beneficio --- */
.benefit-desc {
    font-size: 0.95rem;                     /* TAMAÑO: de la fuente. */
    color: var(--color-text-light);         /* COLOR: Gris azulado. */
    line-height: 1.5;                       /* TAMAÑO: Altura de línea. */
}

/* --- Sección "Cómo Funciona" (Timeline/Zigzag Corregida) --- */
.how-it-works-section {
    padding: 80px 0;                        /* ESPACIADO: Interno vertical. */
    margin-top: 80px;                       /* ESPACIADO: Superior, para separar de la sección anterior. */
    background-color: var(--color-background-light); /* COLOR: Fondo gris claro. */
    position: relative;                     /* POSICIÓN: Necesario para la línea decorativa (ahora oculta). */
}

/* --- Subtítulo de la Sección del Proceso --- */
/* Para el texto "Te mostramos el viaje de los datos...". */
.section-subtitle {
    font-size: 1.2rem;                      /* TAMAÑO: de la fuente. */
    color: var(--color-text-light);         /* COLOR: Gris azulado. */
    text-align: center;                     /* ALINEACIÓN: Centrado. */
    max-width: 800px;                       /* ANCHO: Máximo para que no sea muy largo. */
    margin: -40px auto 60px auto;           /* ALINEACIÓN: Centrado y con margen vertical. */
}

/* --- Contenedor de todos los Pasos --- */
.steps-container {
    position: relative;                     /* Posición de referencia para la línea vertical (ahora oculta). */
}

/* --- Línea Vertical del Timeline: ELIMINADA --- */
/* Como pediste, la línea vertical no se muestra. */
.steps-container::before {
    display: none;
}

/* --- Bloque de cada Paso --- */
.step-block {
    display: grid;                          /* LAYOUT: Usa Grid para un control preciso de las columnas. */
    grid-template-columns: 1fr 1fr;         /* LAYOUT: Dos columnas de igual tamaño para imagen y texto. */
    gap: 80px;                              /* ESPACIADO: Espacio amplio entre la imagen y el texto. */
    align-items: center;                    /* ALINEACIÓN: Vertical. */
    margin-bottom: 60px;                    /* ESPACIADO: Entre cada paso. */
}

/* --- Círculo del Número del Paso: ELIMINADO --- */
.step-number {
    display: none;
}

/* --- Texto de cada Paso --- */
.step-text h3 {
    font-size: 2rem;                        /* TAMAÑO: del título del paso. */
    color: var(--color-primary);            /* COLOR: Azul oscuro. */
    margin-bottom: 15px;                    /* ESPACIADO: Inferior. */
}

/* --- Diseño Zigzag --- */
/* Para los pasos pares (2 y 4), invertimos el orden de las columnas. */
.step-block:nth-child(even) .step-image {
    order: 2; /* ORDEN: Pone la imagen en la segunda columna (derecha). */
}
.step-block:nth-child(even) .step-text {
    order: 1; /* ORDEN: Pone el texto en la primera columna (izquierda). */
    text-align: right; /* ALINEACIÓN: del texto. */
}

/* Para los pasos impares (1 y 3), el texto se alinea a la izquierda. */
.step-block:nth-child(odd) .step-text {
    text-align: left; /* ALINEACIÓN: del texto. */
}

/* ============================================= */
/* 9. PÁGINA DE PLANES Y GPS (PLANS)             */
/* ============================================= */

/* --- Sección de la Tabla de Precios --- */
.pricing-section {
    padding: 80px 20px;                     /* ESPACIADO: Interno vertical y horizontal de la sección. */
    background-color: var(--color-background-light); /* COLOR: Fondo gris claro. */
}

/* Contenedor de las tarjetas de precios. */
.pricing-table-container {
    display: grid;                          /* LAYOUT: Usa Grid para alinear las tarjetas en columnas. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* LAYOUT: Columnas responsivas, cada una con un mínimo de 320px. */
    gap: 30px;                              /* ESPACIADO: Espacio entre las tarjetas. */
    align-items: center;                    /* ALINEACIÓN: Vertical de las tarjetas. */
    margin-top: 60px;                       /* ESPACIADO: Superior para separar del título de la sección. */
}

/* --- Tarjeta de Precio Individual --- */
.pricing-card {
    background-color: var(--color-white);   /* COLOR: Fondo blanco. */
    border: 1px solid var(--color-border);  /* BORDE: Sutil y claro. */
    border-radius: 12px;                    /* BORDE: Redondeado para un look moderno. */
    padding: 40px 30px;                     /* ESPACIADO: Interno de la tarjeta. */
    text-align: center;                     /* ALINEACIÓN: Centrada. */
    transition: all 0.3s ease;              /* ANIMACIÓN: Suave para todos los efectos. */
    display: flex;                          /* LAYOUT: Flex para alinear contenido verticalmente. */
    flex-direction: column;                 /* LAYOUT: Dirección vertical. */
    height: 100%;                           /* TAMAÑO: Asegura que todas las tarjetas tengan la misma altura. */
}

/* Estilo para la tarjeta destacada ("Más Popular"). */
.pricing-card.highlighted {
    border-width: 3px;                      /* BORDE: Más grueso para destacar. */
    border-color: var(--color-primary);     /* COLOR: Borde azul oscuro. */
    transform: scale(1.05);                 /* EFECTO: Ligeramente más grande que las demás. */
    position: relative;                     /* POSICIÓN: Necesario para la etiqueta "Más Popular". */
}

/* Etiqueta "Más Popular". */
.popular-tag {
    position: absolute;                     /* POSICIÓN: Absoluta respecto a la tarjeta. */
    top: -18px;                             /* Se posiciona por arriba del borde de la tarjeta. */
    left: 50%;                              /* Se centra horizontalmente. */
    transform: translateX(-50%);            /* Ajuste fino para el centrado horizontal. */
    background-color: var(--color-primary); /* COLOR: Fondo azul. */
    color: var(--color-white);              /* COLOR: Texto blanco. */
    padding: 5px 20px;                      /* ESPACIADO: Interno. */
    border-radius: 20px;                    /* BORDE: Redondeado. */
    font-size: 0.9rem;                      /* TAMAÑO: Fuente. */
    font-weight: bold;                      /* FUENTE: Negrita. */
}

/* Título de la tarjeta (H3). */
.pricing-card h3 {
    font-size: 1.8rem;                      /* TAMAÑO: Fuente del nombre del plan. */
    color: var(--color-primary);            /* COLOR: Texto azul oscuro. */
    margin-bottom: 10px;                    /* ESPACIADO: Inferior. */
}

/* Descripción corta de la tarjeta. */
.pricing-card .card-description {
    color: var(--color-text-light);         /* COLOR: Texto gris azulado. */
    min-height: 50px;                       /* TAMAÑO: Altura mínima para alinear tarjetas con descripciones de diferente longitud. */
}

/* Contenedor del precio. */
.card-price {
    margin: 25px 0;                         /* ESPACIADO: Vertical. */
    padding: 25px 0;                        /* ESPACIADO: Interno vertical. */
    border-top: 1px solid var(--color-border); /* LÍNEA: Divisoria superior. */
    border-bottom: 1px solid var(--color-border);/* LÍNEA: Divisoria inferior. */
}

/* Monto del precio. */
.price-amount {
    font-size: 3.2rem;                       /* TAMAÑO: Fuente grande para el precio. */
    font-weight: 700;                        /* FUENTE: Grosor (negrita). */
    color: var(--color-text-dark);           /* COLOR: Texto casi negro. */
}

/* Periodo del precio (ej. "/ mes"). */
.price-period {
    font-size: 1rem;                         /* TAMAÑO: Fuente. */
    color: var(--color-text-light);          /* COLOR: Texto gris azulado. */
}

/* Lista de características principales (GPS, SIM, Contrato). */
.main-features-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}
.main-features-list li {
    margin-bottom: 12px;
    font-weight: 500;
}

/* Lista de funcionalidades de la plataforma. */
.plan-feature-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
    text-align: left;
    flex-grow: 1;                           /* LAYOUT: Empuja el botón de registro hacia abajo, alineando todos los botones. */
}
.plan-feature-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.plan-feature-list .icon {
    font-weight: bold;
    font-size: 1.2rem;
}
.plan-feature-list .icon-yes {
    color: #28a745;                         /* COLOR: Verde para check (✓). */
}
.plan-feature-list .icon-no {
    color: #dc3545;                         /* COLOR: Rojo para cruz (✗). */
}

/* Contenedor del botón de registro. */
.card-footer {
    margin-top: 30px;                       /* ESPACIADO: Superior para separar del listado. */
}

/* --- Sección de Dispositivos GPS --- */
.devices-section {
    padding: 80px 20px;                     /* ESPACIADO: Interno de la sección. */
}

.device-showcase {
    display: grid;                          /* LAYOUT: Grid para alinear imagen y texto. */
    grid-template-columns: 1fr 1.5fr;       /* LAYOUT: La columna de texto es 1.5 veces más ancha que la de la imagen. */
    gap: 60px;                              /* ESPACIADO: Entre columnas. */
    align-items: flex-start;                /* ALINEACIÓN: Vertical. */
}
.device-showcase:not(:last-child) {
    margin-bottom: 80px;                    /* ESPACIADO: entre los dos dispositivos. */
}

/* Modificador para invertir el orden. */
.device-showcase.reverse {
    grid-template-columns: 1.5fr 1fr;
}
.device-showcase.reverse .device-image {
    order: 2; /* ORDEN: Pone la imagen a la derecha. */
}

/* Detalles del dispositivo (texto). */
.device-details h2 {
    font-size: 2.2rem;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 20px;
}
.device-details h3 {
    font-size: 1.5rem;
    color: var(--color-text-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border); /* LÍNEA: Divisoria. */
}

/* Lista de ventajas del dispositivo. */
.device-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}
.device-features-list li {
    margin-bottom: 12px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}
.device-features-list .icon-check {
    color: var(--color-secondary);          /* COLOR: Icono de check en naranja. */
    font-size: 1.5rem;
}

/* Caja de precio del dispositivo. */
.device-price-box {
    background-color: var(--color-background-light);
    border-radius: 8px;
    padding: 25px;
    margin-top: 30px;
    border-left: 5px solid var(--color-primary); /* BORDE: lateral azul. */
}
.device-price-box h4 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    color: var(--color-text-dark);
}
.device-price-tag {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
}
.device-price-box p {
    margin: 10px 0 0 0;
    color: var(--color-text-light);
    font-style: italic;
}

/* ======================================================= */
/* 11. PÁGINA DE CONTACTO (CONTACT) - DISEÑO ELITE FINAL    */
/* ======================================================= */

/* --- Título Principal Sobre la Imagen de Fondo --- */
/* Este estilo se aplica al H1 "Ponte en Contacto con Nosotros". */
.section-title-on-bg {
    font-size: 2rem;               /* TAMAÑO: Grande para impacto, pero ajustado para elegancia. */
    color: var(--color-primary);     /* COLOR (CORREGIDO): Texto azul oscuro para máximo contraste. */
    text-align: center;              /* ALINEACIÓN: Centrado. */
    margin-bottom: 20px;             /* ESPACIADO (CORREGIDO): Reducido para un layout más compacto. */
    text-shadow: none;               /* SOMBRA: Eliminada como pediste. */
    position: relative;              /* POSICIÓN (NUEVO): Necesario para controlar la capa. */
    z-index: 2;                      /* CAPA (NUEVO): Lo trae al frente, por encima del overlay. */
}

/* --- Contenedor principal con imagen de fondo --- */
.contact-section-wrapper {
    position: relative;                  /* POSICIÓN: Necesario para la capa de superposición (overlay). */
    padding: 60px 20px;                  /* ESPACIADO (CORREGIDO): Reducido para que la sección sea más compacta. */
    background-image: url('../images/contact-background.webp'); /* IMAGEN: de fondo. */
    background-size: cover;              /* IMAGEN: Cubre todo el espacio. */
    background-position: center;         /* IMAGEN: Centrada. */
    background-attachment: fixed;        /* EFECTO: Parallax. */
}

/* --- Capa semitransparente sobre la imagen de fondo --- */
.contact-section-wrapper::before {
    content: '';                         /* Requerido para que el pseudo-elemento se muestre. */
    position: absolute;                  /* POSICIÓN: Se superpone a la imagen de fondo. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 249, 250, 0.5); /* COLOR (CORREGIDO): Opacidad del 85% para más legibilidad. */
    z-index: 1;                          /* CAPA: Se posiciona entre el fondo y el contenido. */
}

/* --- Contenedor del layout de dos columnas --- */
.contact-layout {
    position: relative;                  /* POSICIÓN: Para que esté por encima del overlay. */
    z-index: 2;
    display: grid;                       /* LAYOUT: Usa Grid para las dos columnas. */
    grid-template-columns: 1fr 1fr;    /* LAYOUT: El formulario es más ancho que la info. */
    gap: 40px;                           /* ESPACIADO (CORREGIDO): Reducido entre columnas. */
    align-items: flex-start;             /* ALINEACIÓN: Vertical. */
}

/* --- Estilo común para las "Tarjetas Flotantes" --- */
.contact-form-container, .contact-info-container {
    background-color: var(--color-white); /* COLOR: Fondo blanco. */
    padding: 20px;                       /* ESPACIADO (CORREGIDO): Reducido para compactar. */
    border-radius: 5px;                  /* BORDE: Redondeado. */
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); /* SOMBRA: Suave para efecto flotante. */
}

/* --- Título dentro del Formulario --- */
.contact-form-container h2 {
    font-size: 1.5rem;                   /* TAMAÑO (CORREGIDO): Más compacto. */
    color: var(--color-primary);
    margin-bottom: 20px;
}

/* --- Grupo de Formulario (Label + Input) --- */
.form-group {
    margin-bottom: 4px;                 /* ESPACIADO: Menos espacio entre cada campo. */
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* --- Estilos para los Campos de Entrada y Textarea --- */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;                        /* ancho del campo del texto en formulario */
    padding: 8px;                       /* ESPACIADO (CORREGIDO): Campos menos altos. */
    border: 1px solid #ccc;
    border-radius: 2.2px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al hacer foco en un campo. */
.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(54, 69, 142, 0.25);
}

/* Checkbox para solicitar demo. */
.form-group-checkbox {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Botón de Enviar (CORREGIDO) --- */
.btn-submit {
    padding: 10px 230px;                  /* ESPACIADO: Reestablecemos el tamaño del botón. */
	
}

/* --- Columna de Información de Contacto --- */
.contact-info-container h3 {
    font-size: 1.5rem;                   /* TAMAÑO: Título más pequeño. */
    margin-bottom: 10px;
}
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;                 /* ESPACIADO: Reducido. */
}
.contact-info-item .icon {
    width: 29px;
    height: 29px;
    margin-top: 3px;
}
.contact-info-item span, .contact-info-item a {
    font-size: 0.8rem;                     /* TAMAÑO: Texto ligeramente más pequeño. */
}

/* --- Campo Honeypot (trampa para bots) --- */
/* Siempre debe estar oculto para los usuarios humanos. */
.honeypot {
    display: none !important;            /* OCULTAR (CORREGIDO): Se asegura de que sea invisible. */
}

/* --- ESTILOS PARA EL ESTADO DE CARGA DEL BOTÓN --- */
.btn-submit { position: relative; overflow: hidden; }
.btn-submit .btn-text { transition: opacity 0.3s ease; }
.btn-submit .spinner { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: var(--color-white); border-radius: 50%; animation: spin 1s linear infinite; opacity: 0; transition: opacity 0.3s ease; }
.btn-submit.is-loading .btn-text { opacity: 0; }
.btn-submit.is-loading .spinner { opacity: 1; }
.btn-submit.is-loading { pointer-events: none; background-color: #2c3870; }
@keyframes spin { to { transform: rotate(360deg); } }