/* =================================================================
   HOJA DE ESTILOS PARA PÁGINAS DE SERVICIOS
   ================================================================= */

/* --- ANIMACIÓN DE TRANSICIÓN (Derecha a Izquierda) --- */
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.page-transicion {
    animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- 1. CONFIGURACIÓN GENERAL --- */
.page-servicio {
    /* CORRECCIÓN: Bajamos de 140px a 100px para pegar el contenido más a la barra */
    padding-top: 100px;
    background-color: #000000;
    min-height: 100vh;
}

/* --- 2. ESTRUCTURA DE LA SECCIÓN (GRILLA) --- */
.svc-section {
    padding: 40px 5%;
    /* Menos padding arriba para aprovechar el espacio */
    color: var(--text-muted);
}

.svc-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Le da un poquito más de ancho al texto que a la foto */
    gap: 70px;
    align-items: start;
    /* Alinea los bloques desde arriba */
}

/* --- 3. TEXTOS Y ESTRUCTURA DE CAJAS --- */
.svc-title {
    font-family: var(--font-tech);
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* Una sutil línea a la izquierda para "agrupar" los párrafos */
.svc-description-box {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    margin-bottom: 40px;
}

.svc-paragraph {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.svc-paragraph strong {
    color: var(--accent-ia);
    font-weight: 600;
}

/* Caja de filtros con un fondo súper sutil */
.svc-filters-box {
    background: linear-gradient(to right, rgba(91, 192, 235, 0.03), transparent);
    padding: 25px 20px;
    border-radius: 8px;
    border-left: 2px solid var(--accent-ia);
}

.svc-subtitle {
    color: #ffffff;
    font-size: 1.1rem;
    margin: 0 0 20px 0;
    font-weight: 600;
}

/* --- 4. LA LISTA DE FILTROS --- */
.svc-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.svc-list li {
    position: relative;
    padding-left: 20px;
    font-size: 1rem;
    color: #cccccc;
}

.svc-list li::before {
    content: "❯";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-ia);
    font-size: 0.8rem;
}

.svc-highlight-text {
    color: #ffffff;
    font-size: 0.95rem;
    font-style: italic;
    margin-top: 25px;
    opacity: 0.8;
}

/* --- 5. BLOQUE VISUAL (Imagen + Frase Integradas) --- */
.svc-visual-block {
    position: relative;
    width: 100%;
}

.svc-image-card {
    background-color: #080808;
    border: 1px solid rgba(91, 192, 235, 0.15);
    /* Borde Cyan muy oscuro */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.svc-image-card img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Separa la foto del texto */
}

.svc-image-caption {
    padding: 25px 30px;
    font-family: var(--font-tech);
    font-size: 1.2rem;
    color: var(--accent-ia);
    text-align: center;
    line-height: 1.4;
    font-weight: 600;
}

/* --- 6. RESPONSIVE MÓVIL --- */

/* 1. TABLETS Y PANTALLAS MEDIANAS (Mantenemos tu lógica original optimizada) */
@media (max-width: 992px) {
    .svc-container {
        grid-template-columns: 1fr;
        /* Apilamiento natural correcto */
        gap: 40px;
        width: 100%;
        /* Asegura que el grid no exceda el ancho disponible */
        box-sizing: border-box;
        /* Previene que paddings sumen ancho extra */
    }

    .svc-title {
        /* Tipografía fluida: se adapta al ancho de pantalla, mínimo 1.8rem, máximo 2.5rem */
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        line-height: 1.2;
        /* Evita que los títulos de 2+ líneas se superpongan */
    }
}

/* 2. CELULARES (< 768px) - Reglas específicas solicitadas */
@media (max-width: 768px) {
    .svc-container {
        gap: 25px;
        /* Reducimos el espacio vertical para no generar tanto "scroll vacío" */
        padding: 0 15px;
        /* Márgenes laterales seguros para que el contenido no toque los bordes del teléfono */
    }

    .svc-title {
        font-size: 1.6rem;
        /* Tamaño estable para celulares */
        word-wrap: break-word;
        /* Previene que una palabra técnica muy larga rompa el ancho de la pantalla */
        hyphens: auto;
    }

    /* PROTECCIÓN DE IMÁGENES DENTRO DEL CONTENEDOR */
    .svc-container img {
        max-width: 100%;
        /* La imagen nunca será más ancha que su contenedor padre */
        height: auto !important;
        /* Mantiene la proporción estricta (aspect-ratio), anula alturas fijas previas */
        display: block;
        /* Elimina el margen fantasma inferior clásico de las imágenes inline */
        border-radius: 8px;
        /* (Opcional) Mantiene consistencia estética si tus imágenes tienen bordes */
    }

    /* PROTECCIÓN DE TEXTOS Y PÁRRAFOS */
    .svc-container p {
        font-size: 1rem;
        /* Normalización del texto base para lectura cómoda */
        line-height: 1.5;
        /* Espaciado ideal para la fatiga visual en pantallas pequeñas */
        margin-bottom: 15px;
    }
}

/* --- DISEÑO DEL TIMELINE (Vectores Centrados y Animables) --- */
.svc-timeline-wrapper {
    padding: 40px;
    background: radial-gradient(circle at 50% 50%, rgba(91, 192, 235, 0.05) 0%, transparent 100%);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    /* Mayor margen para darle aire a la línea conectora */
    margin-bottom: 40px;

    /* PREPARACIÓN PARA LA ANIMACIÓN (Arrancan invisibles y caídos) */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

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

/* Tiempos */
.timeline-time {
    font-family: var(--font-tech);
    color: var(--text-muted);
    font-size: 1.1rem;
    min-width: 60px;
    padding-top: 5px;
    text-align: right;
}

/* Nodos (Círculos) - Tienen flex-shrink 0 para no deformarse */
.timeline-node {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #111;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 2;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* LA LÍNEA CONECTORA (Ahora nace perfecto del centro del nodo) */
.timeline-node::after {
    content: "";
    position: absolute;
    top: 22px;
    /* Arranca justo debajo del borde del círculo */
    left: 50%;
    transform: translateX(-50%);
    /* Centrado matemático perfecto */
    width: 2px;

    /* PREPARACIÓN ANIMACIÓN DE LA LÍNEA (Arranca en 0 de alto) */
    height: 0;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: -1;
    transition: height 0.4s ease;
}

/* El último nodo no proyecta línea hacia abajo */
.timeline-item:last-child .timeline-node::after {
    display: none;
}

/* Textos del Timeline */
.timeline-content {
    padding-top: 3px;
}

.timeline-content h5 {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0 0 5px 0;
    font-weight: 600;
}

.timeline-content span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- ESTADOS DEL TIMELINE Y COLORES --- */
.timeline-item.completed .timeline-node {
    background-color: var(--accent-ia);
    border-color: var(--accent-ia);
}

.timeline-item.completed .timeline-node svg {
    width: 14px;
    height: 14px;
    color: #000;
}

.timeline-item.completed .timeline-node::after {
    background-color: var(--accent-ia);
    /* La línea se pinta porque ya pasó */
}

.timeline-item.active .timeline-node {
    border-color: var(--accent-ia);
    background-color: #000;
}

.timeline-item.active .timeline-content h5 {
    color: var(--accent-ia);
}

.timeline-item.pending .timeline-node {
    background-color: #000;
}

.timeline-item.pending .timeline-content h5 {
    color: #666;
}

.node-pulse {
    width: 10px;
    height: 10px;
    background-color: var(--accent-ia);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-ia);
    animation: timeline-pulse 1.5s infinite;
}

@keyframes timeline-pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
}

/* =================================================================
   LA MAGIA DE LA ANIMACIÓN (Se activa cuando JS pone la clase .is-visible)
   ================================================================= */

/* 1. Aparecen los ítems en cascada */
.svc-timeline-wrapper.is-visible .timeline-item {
    opacity: 1;
    transform: translateY(0);
}

.svc-timeline-wrapper.is-visible .timeline-item:nth-child(1) {
    transition-delay: 0.1s;
}

.svc-timeline-wrapper.is-visible .timeline-item:nth-child(2) {
    transition-delay: 0.5s;
}

.svc-timeline-wrapper.is-visible .timeline-item:nth-child(3) {
    transition-delay: 0.9s;
}

/* 2. La línea crece simulando el recorrido */
.svc-timeline-wrapper.is-visible .timeline-item:nth-child(1) .timeline-node::after {
    height: 50px;
    /* Estira la línea hasta tocar el siguiente nodo */
    transition-delay: 0.3s;
}

.svc-timeline-wrapper.is-visible .timeline-item:nth-child(2) .timeline-node::after {
    height: 50px;
    transition-delay: 0.7s;
}

/* =================================================================
   AJUSTES DE ALINEACIÓN Y ANCLAJE VISUAL (SECCIÓN 2)
   ================================================================= */

/* Centrar verticalmente los bloques para que la caja no quede volando */
.svc-align-center {
    align-items: center !important;
}

/* Reducimos la brecha y le damos un anclaje para que "abrace" el texto */
.svc-visual-anchored {
    position: relative;
    margin-left: -30px;
    /* Empujamos la caja un poco hacia la izquierda */
}

/* El conector visual hiper sutil (una rayita) que une el texto con la caja */
.svc-visual-anchored::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -40px;
    width: 40px;
    height: 1px;
    background-color: var(--accent-ia);
    opacity: 0.4;
    z-index: 0;
}

/* =================================================================
   AJUSTES DE ANCLAJE VISUAL (TABLET Y MÓVIL)
   ================================================================= */

/* 1. TABLET (< 992px): Desarmamos el anclaje lateral (layout apilado) */
@media (max-width: 992px) {
    .svc-visual-anchored {
        margin-left: 0;
        margin-top: 30px;
        width: 100%;
        /* [NUEVO] Previene que el elemento flote o desborde al perder su anclaje */
    }

    .svc-visual-anchored::before {
        display: none;
        /* Correcto: eliminamos líneas o anclas de escritorio */
    }
}

/* 2. MÓVIL (< 768px): Ajuste fino de espaciado */
@media (max-width: 768px) {
    .svc-visual-anchored {
        margin-top: 20px;
        /* [NUEVO] Reducimos el salto visual para pantallas pequeñas */
    }
}

/* =================================================================
   CORRECCIÓN DEL CENTRADO DEL PUNTO PULSANTE (TIMELINE)
   ================================================================= */

.timeline-item.active .timeline-node {
    position: relative;
    /* [NUEVO] Flexbox defensivo por si el nodo tiene contenido interno, ayuda a estabilizar la caja */
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-pulse {
    position: absolute;
    top: 50%;
    left: 50%;

    /* REEMPLAZO DEL TRUCO MATEMÁTICO:
       Usamos transform. Al trasladar el -50% del propio eje X e Y del elemento, 
       queda clavado en el centro sin importar si mide 10px, 20px o 100vw.
       Es GPU-acelerado (mejor rendimiento en celular) y 100% adaptable. */
    transform: translate(-50%, -50%);

    width: 10px;
    height: 10px;
    background-color: var(--accent-ia);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-ia);

    /* Mantengo tu animación original, pero sugiero revisar que los keyframes 
       (timeline-pulse) no usen márgenes tampoco para escalar, sino transform: scale() */
    animation: timeline-pulse 1.5s infinite;
}

/* =================================================================
   SECCIÓN 3: PANELES TEMPORALES (PIXEL PERFECT & ANTI-LAG)
   ================================================================= */

/* --- ESTRUCTURA DE LA GRILLA --- */
.shift-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* --- DISEÑO DE LA TARJETA --- */
.shift-card {
    position: relative;
    height: 460px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);

    /* OPTIMIZACIÓN DE RENDIMIENTO: Aceleración por hardware */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Fuerza a usar la GPU */

    /* Estado inicial para la animación de scroll */
    opacity: 0;
    transform: translateY(40px) translateZ(0);

    /* Transición más limpia para el hover */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

/* Efecto Hover optimizado */
.shift-card:hover {
    border-color: var(--accent-ia);
    transform: translateY(-8px) translateZ(0) !important;
    box-shadow: 0 15px 30px rgba(91, 192, 235, 0.15);
}

/* --- IMAGEN DE FONDO --- */
.shift-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* Sacamos el filtro saturate por ahora, suele ser el más pesado en móviles */
    filter: brightness(0.4);

    /* OPTIMIZACIÓN: Solo animamos transform y filter */
    will-change: transform, filter;
    transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
}

.shift-card:hover .shift-bg-image {
    filter: brightness(0.6);
    transform: scale(1.05);
}

/* --- CONTENIDO INTERNO ESTRICTO --- */
.shift-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    /* Evita parpadeos en webkit */
    -webkit-font-smoothing: antialiased;
}

/* Títulos, descripciones y separador con márgenes matemáticos */
.shift-title {
    font-family: var(--font-tech);
    color: #ffffff;
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 0 0 10px 0;
}

.shift-desc {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.shift-divider {
    width: 40px;
    height: 2px;
    background-color: var(--accent-ia);
    margin: 0 0 20px 0;
}

/* Lista interna */
.shift-mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shift-mini-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
}

.shift-mini-list li:last-child {
    margin-bottom: 0;
}

.shift-mini-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    background-color: var(--accent-ia);
    border-radius: 50%;
}

/* --- FRASE DE CIERRE (Puro Minimalismo) --- */
.svc-outro-quote {
    margin-top: 80px;
    font-family: var(--font-tech);
    font-size: 1.8rem;
    color: #ffffff;
    line-height: 1.4;
    border-left: 3px solid var(--accent-ia);
    padding-left: 30px;
}

.svc-outro-quote span {
    color: var(--accent-ia);
}

@media (max-width: 768px) {
    .svc-outro-quote {
        font-size: 1.3rem;
        padding-left: 20px;
        margin-top: 50px;
    }
}

/* --- ANIMACIÓN SCROLL (Súper suave y optimizada) --- */
.shift-grid-wrapper.is-visible .shift-card {
    opacity: 1;
    /* translateZ(0) al final mantiene la aceleración activa */
    transform: translateY(0) translateZ(0);
    /* Agregamos la transición ACÁ para que solo ocurra cuando la clase se activa, evitando lag extra */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* Retrasos escalonados */
.shift-grid-wrapper.is-visible .shift-card:nth-child(1) {
    transition-delay: 0.1s;
}

.shift-grid-wrapper.is-visible .shift-card:nth-child(2) {
    transition-delay: 0.25s;
}

.shift-grid-wrapper.is-visible .shift-card:nth-child(3) {
    transition-delay: 0.4s;
}


/* =================================================================
   RESPONSIVE MÓVIL: TARJETAS SHIFT (< 768px)
   ================================================================= */
@media (max-width: 768px) {
    .shift-card {
        height: auto;
        min-height: 380px;
        /* Excelente: da una base uniforme pero permite crecer si hay mucho texto */
        width: 100%;
        /* [NUEVO] Evita que la tarjeta supere el ancho de la pantalla */
        box-sizing: border-box;

        /* [NUEVO] Flexbox defensivo: estructura el interior de la tarjeta */
        display: flex;
        flex-direction: column;
    }

    .shift-content {
        /* [MODIFICADO] Reducimos levemente el padding vertical (de 30 a 25) para no robar espacio vital de lectura en pantallas pequeñas */
        padding: 25px 15px;
        box-sizing: border-box;
        flex-grow: 1;
        /* [NUEVO] Si la tarjeta es más alta, el contenido se distribuye de forma natural y no queda pegado arriba */
    }

    .shift-title {
        font-size: 1.5rem;
        /* Tamaño adecuado y legible */
        line-height: 1.3;
        /* [NUEVO] Previene que los títulos largos de 2 o 3 líneas colapsen sobre sí mismos */
        margin-bottom: 15px;
        /* [NUEVO] Separación jerárquica clara con el texto que le siga */
        overflow-wrap: break-word;
        /* [NUEVO] Si hay una palabra muy larga, la corta en lugar de romper el ancho de la tarjeta */
    }
}

/* =================================================================
   SECCIÓN 4: INTELIGENCIA ARTIFICIAL Y RESULTADOS
   ================================================================= */

/* Fondo sutil violeta radial que tiñe esta parte de la página */
.svc-ai-section {
    position: relative;
    background: radial-gradient(circle at 80% 30%, rgba(138, 43, 226, 0.05) 0%, transparent 60%);
    padding-top: 80px;
    padding-bottom: 80px;
}

/* --- VARIANTES VIOLETAS (Para sobrescribir el Cyan temporalmente) --- */
.svc-tag-purple {
    display: inline-block;
    font-family: var(--font-tech);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #b975ff;
    /* Violeta claro */
    border: 1px solid rgba(185, 117, 255, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.svc-border-purple {
    border-left-color: #8a2be2;
}

.svc-list-purple li::before {
    color: #8a2be2;
}

.svc-quote-purple {
    border-left-color: #8a2be2;
    margin-top: 40px;
    font-size: 1.5rem;
}

.svc-quote-purple span {
    color: #b975ff;
}

/* --- DISEÑO DE LA IMAGEN DE IA (Efecto Zoom Brusco) --- */
.svc-ai-image-wrapper {
    position: relative;
    width: 100%;
    /* CAMBIO 1: Mucho más grande (antes 450px) */
    max-width: 650px;
    margin: 0 auto;
    border-radius: 16px;
    /* CAMBIO 2: Es fundamental para que el zoom no se salga de la caja */
    overflow: hidden;

    /* Animación de aparición suave solo en opacidad */
    opacity: 0;
    transition: opacity 0.8s ease;

    /* Sombra potente para que se despegue del fondo */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.svc-ai-image-wrapper.is-visible {
    opacity: 1;
    /* Eliminamos el scale de entrada para que no compita con el efecto del mouse */
}

.svc-ai-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    /* CAMBIO 3: Sin borde */
    border: none;

    /* ESTADO INICIAL: Zoom extremo (se ve solo un detalle borroso) */
    transform: scale(2.5);
    /* TRANSICIÓN BRUSCA: Súper rápida (0.25s) y con frenado seco */
    transition: transform 0.25s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* AL PASAR EL MOUSE POR EL CONTENEDOR: La imagen se aleja de golpe a su tamaño normal */
.svc-ai-image-wrapper:hover .svc-ai-img {
    transform: scale(1);
}

/* El Aura Violeta Pulsante */
.svc-ai-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    background-color: #8a2be2;
    filter: blur(80px);
    opacity: 0.25;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: pulse-aura 4s infinite alternate;
}

@keyframes pulse-aura {
    0% {
        opacity: 0.15;
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* --- SUB-SECCIÓN: RESULTADOS REALES (Píldoras) --- */
.svc-results-wrapper {
    margin-top: 120px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 80px;

    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

.svc-results-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

.svc-results-header .svc-title {
    justify-content: center;
}

/* La Grilla de Píldoras */
.svc-pills-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 0 auto;
}

.svc-pill {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    padding: 12px 24px;
    border-radius: 30px;
    /* Forma de píldora redondeada */
    font-family: var(--font-body);
    font-size: 1.05rem;
    transition: all 0.3s ease;
    cursor: default;
}

.svc-pill:hover {
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

/* La píldora destacada final (Más ganancias) */
.svc-pill.highlight-pill {
    background-color: rgba(91, 192, 235, 0.1);
    border-color: var(--accent-ia);
    color: var(--accent-ia);
    font-weight: 600;
}

.svc-results-footer {
    margin-top: 50px;
    text-align: center;
}

.svc-quote-center {
    border-left: none;
    padding-left: 0;
    text-align: center;
    font-size: 2rem;
    margin-top: 20px;
}

/* =================================================================
   RESPONSIVE MÓVIL: INTEGRACIÓN IA (< 768px)
   ================================================================= */
@media (max-width: 768px) {
    .svc-ai-section {
        /* Cambiamos a margin para empujar la caja entera hacia abajo */
        margin-top: 130px !important;
        padding-top: 20px;
        /* Un poco de aire extra interno */
        box-sizing: border-box;
    }

    .svc-pills-grid {
        gap: 10px;
        /* [NUEVO] Flexbox defensivo: si tienes muchas "pills", esto asegura 
           que bajen al siguiente renglón en lugar de comprimirse o generar scroll horizontal. */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        /* Alineación central estética para móviles */
    }

    .svc-pill {
        font-size: 0.95rem;
        padding: 10px 20px;
        /* [NUEVO] Protegemos la estructura de la píldora */
        white-space: nowrap;
        /* Evita que el texto de una etiqueta se parta en dos renglones */
        border-radius: 50px;
        /* (Opcional) Asegura que mantengan su forma redondeada */
    }

    .svc-quote-center {
        font-size: 1.5rem;
        /* El tamaño es correcto */
        /* [NUEVO] Mejoramos la lectura en celular */
        line-height: 1.4;
        /* Espaciado vital para frases largas en pantallas estrechas */
        text-align: center;
        padding: 0 15px;
        /* Evita que el texto toque los bordes físicos del teléfono */
        overflow-wrap: break-word;
    }
}

/* =================================================================
   SECCIÓN 5: ECOSISTEMA BENTO GRID & MOCKUPS CSS (PERFECTOS)
   ================================================================= */

/* --- ESTRUCTURA BENTO --- */
.svc-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

.svc-bento-grid.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.bento-card {
    background-color: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.bento-card:hover {
    border-color: rgba(91, 192, 235, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
}

/* --- ÁREA VISUAL (Mockups) --- */
.bento-visual {
    height: 240px;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.03), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- ÁREA DE TEXTO (Tipografía Minimalista) --- */
.bento-content {
    padding: 35px 35px 45px 35px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.bento-title {
    font-family: var(--font-tech);
    color: #ffffff;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.bento-desc {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* Lista limpia y profesional */
.bento-list {
    list-style: none;
    padding: 20px 0 0 0;
    margin: auto 0 0 0;
    /* La empuja hacia abajo si sobra espacio */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bento-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    color: #eeeeee;
    font-size: 0.95rem;
    font-weight: 500;
}

.bento-list li:last-child {
    margin-bottom: 0;
}

.bento-list li::before {
    content: "❯";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-ia);
    font-size: 0.75rem;
}

/* --- MOCKUP 1: PANEL SEMÁFORO (CON DATOS) --- */
.ui-status-list {
    width: 100%;
    max-width: 260px;
}

.ui-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ui-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ui-dot.green {
    background-color: #00e676;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
}

.ui-dot.yellow {
    background-color: #ffea00;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.5);
}

.ui-dot.red {
    background-color: #ff1744;
    box-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
}

/* La pista y el relleno de la barra de progreso */
.ui-track {
    flex-grow: 1;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.ui-fill {
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 5px currentColor;
}

/* Texto centrado verticalmente y con ancho fijo para no desalinearse */
.ui-text {
    font-family: var(--font-tech);
    font-size: 0.8rem;
    color: #888;
    width: 65px;
    text-align: right;
    white-space: nowrap;
}

/* --- MOCKUP 2: DIAGRAMA DE NODOS (SVG Puro) --- */
.ui-perfect-svg {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

/* --- MOCKUP 3: TICKET DE REGISTRO --- */
.ui-log-ticket {
    background-color: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    width: 85%;
    max-width: 260px;
    padding: 25px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
}

.ui-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-tech);
    font-size: 0.9rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ticket-id {
    color: #fff;
    font-weight: bold;
}

.ticket-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-ia);
    font-size: 0.8rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-ia);
    border-radius: 50%;
}

.ui-log-times {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.time-block {
    display: flex;
    flex-direction: column;
}

.time-block span {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-weight: bold;
}

.time-block {
    font-family: var(--font-tech);
    font-size: 1.4rem;
    color: #fff;
}

.time-arrow {
    color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
}

.ui-log-alert {
    font-family: var(--font-tech);
    font-size: 0.85rem;
    color: #ff1744;
    background-color: rgba(255, 23, 68, 0.1);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

/* --- MOCKUP 4: DASHBOARD AUTOMATIZADO (CON DATOS) --- */
.ui-mini-dash {
    width: 90%;
    max-width: 260px;
    height: 140px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Filtros ahora parecen botones reales */
.ui-dash-filters {
    display: flex;
    gap: 8px;
}

.filter {
    font-family: var(--font-tech);
    font-size: 0.65rem;
    color: #666;
    padding: 3px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: default;
}

.filter.active {
    background-color: rgba(91, 192, 235, 0.1);
    color: var(--accent-ia);
    border: 1px solid rgba(91, 192, 235, 0.3);
}

/* Gráfico con números proyectados arriba */
.ui-dash-chart {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0;
    margin-top: 15px;
}

.ui-bar {
    position: relative;
    width: 22%;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px 3px 0 0;
    transition: height 1s ease;
}

.ui-bar.accent {
    background-color: var(--accent-ia);
    box-shadow: 0 0 15px rgba(91, 192, 235, 0.3);
}

/* El truco mágico: ::before lee el atributo data-val del HTML y lo dibuja arriba */
.ui-bar::before {
    content: attr(data-val);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-tech);
    font-size: 0.75rem;
    color: #888;
}

.ui-bar.accent::before {
    color: var(--accent-ia);
    font-weight: bold;
}

/* =================================================================
   RESPONSIVE MÓVIL Y TABLET: BENTO GRID
   ================================================================= */

/* 1. TABLETS Y PANTALLAS MEDIANAS (< 992px) */
@media (max-width: 992px) {
    .svc-bento-grid {
        grid-template-columns: 1fr;
        /* Correcto: apilamos todo en una columna */
        gap: 30px;
        /* [NUEVO] Aseguramos separación entre tarjetas al apilarse */
    }

    .bento-visual {
        /* Cambiamos la altura estricta por un mínimo, permitiendo que crezca si es necesario */
        min-height: 200px;
        height: auto;
    }
}

/* 2. CELULARES (< 768px) - Interacción perfecta de texto e imagen */
@media (max-width: 768px) {
    .svc-bento-grid {
        gap: 20px;
        /* Reducimos el espacio vertical para agilizar el scroll */
        padding: 0 15px;
        /* Margen de seguridad lateral */
    }

    /* ELIMINAMOS LA ALTURA FIJA PARA LAS IMÁGENES/VISUALES */
    .bento-visual {
        width: 100%;
        height: auto !important;
        /* Anulamos cualquier altura estricta previa */

        /* En lugar de 'height', usamos 'aspect-ratio'. 
           Esto mantiene la proporción de la caja (ej: panorámica 16:9) sin importar 
           si el celular es ancho o angosto. ¡Magia pura para imágenes! */
        aspect-ratio: 16 / 9;

        overflow: hidden;
        /* Evita que la imagen se salga de los bordes redondeados */
        border-radius: 8px;
        /* Estética Bento */
        position: relative;
        /* Por si tienes íconos o etiquetas flotando adentro */
    }

    /* PROTECCIÓN DE LA IMAGEN INTERNA */
    .bento-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Hace que la imagen llene el espacio sin deformarse ni estirarse */
        display: block;
    }

    /* PROTECCIÓN DE LAS CAJAS DE TEXTO (Asumiendo que tienes un contenedor de texto, ej. .bento-content) */
    .svc-bento-grid>div {
        /* Flexbox permite que la caja crezca automáticamente según la cantidad de texto */
        display: flex;
        flex-direction: column;
        height: auto;
        /* Las tarjetas dictan su propia altura según su contenido */
    }

    /* Evita que textos largos (como URLs o términos técnicos) rompan la grilla */
    .svc-bento-grid h3,
    .svc-bento-grid p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* =================================================================
   SECCIÓN FINAL: MANIFIESTO (Hero Overlay Inmersivo - Más Luz)
   ================================================================= */

.svc-outro-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    margin-top: 100px;

    /* CONFIGURACIÓN DE LA IMAGEN DE FONDO */
    background-image: url('../img/fabrica.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* EL DEGRADADO MÁGICO (CORREGIDO: MÁS LUZ) */
.svc-outro-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* CAMBIO CLAVE: El negro sólido baja al 15% y la parte superior es mucho más transparente (0.1) */
    background: linear-gradient(to top, #000000 15%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
}

/* --- CONTENIDO DE TEXTO --- */
.svc-outro-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 100px 20px;

    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.svc-outro-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.svc-title-large {
    font-family: var(--font-tech);
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.1;
}

.svc-paragraph-large {
    font-family: var(--font-body);
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    /* Un poco más blanco para ganar contraste */
    line-height: 1.6;
    margin-bottom: 60px;
}

.svc-paragraph-large strong {
    color: #fff;
    font-weight: 700;
}

/* --- BLOQUE DE TRANSFORMACIÓN (Pasás de -> A) --- */
.svc-transformation-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 70px;
}

.trans-item {
    display: flex;
    flex-direction: column;
    font-family: var(--font-tech);
}

.trans-item span {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* El estado "viejo" */
.trans-item.before {
    color: rgba(255, 255, 255, 0.5);
    /* Un poco más visible ahora */
    text-decoration: line-through;
    font-size: 1.5rem;
}

.trans-item.before span {
    color: rgba(255, 255, 255, 0.4);
}

/* El estado "nuevo" */
.trans-item.after {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(91, 192, 235, 0.3);
    /* Brillo Cyan más sutil */
}

.trans-item.after span {
    color: var(--accent-ia);
}

.trans-arrow {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

/* --- FRASE FINAL (CORREGIDO: MINIMALISTA BLANCO) --- */
.svc-final-quote {
    font-family: var(--font-tech);
    /* Tipografía técnica recta */
    font-size: 1.6rem;
    color: #ffffff;
    /* Blanco puro */
    font-weight: 400;
    /* Peso normal, sin negrita extra */
    letter-spacing: 1px;
    margin-top: 30px;
    /* Eliminamos itálicas, posición relativa y las líneas decorativas */
}

/* Aseguramos que no aparezcan las líneas decorativas anteriores */
.svc-final-quote::before,
.svc-final-quote::after {
    display: none;
}


/* =================================================================
   RESPONSIVE MÓVIL: OUTRO HERO Y TRANSFORMACIÓN (< 768px)
   ================================================================= */
@media (max-width: 768px) {
    .svc-outro-hero {
        /* [SOLUCIÓN DE SALTOS VISUALES] 
           Usamos 'dvh' (dynamic viewport height) en navegadores modernos para evitar 
           que el div salte cuando la barra del navegador desaparece. Dejamos vh como fallback. */
        min-height: 70vh;
        min-height: 70dvh;
        height: auto;
        /* Permite crecer naturalmente si el texto es muy largo */
        padding: 60px 20px;
        /* [NUEVO] Padding lateral vital para que el contenido no toque los bordes */
        box-sizing: border-box;
    }

    .svc-transformation-block {
        display: flex;
        /* Aseguramos el contexto flex */
        flex-direction: column;
        align-items: center;
        /* [NUEVO] Centra los bloques y la flecha en la columna */
        text-align: center;
        /* Mejora la lectura en celular para este tipo de bloques */
        gap: 20px;
        width: 100%;
        /* Prevención de desborde */
    }

    .trans-arrow {
        transform: rotate(90deg);
        font-size: 2rem;
        margin: 10px 0;
        /* [NUEVO] Le da a la flecha un poco de aire extra arriba y abajo */
        display: flex;
        justify-content: center;
    }

    /* [NUEVO] Reglas agrupadas para proteger los textos de la transformación */
    .trans-item.before,
    .trans-item.after {
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: break-word;
        /* Evita desbordes por palabras largas */
        padding: 0 10px;
    }

    .trans-item.before {
        font-size: 1.2rem;
        line-height: 1.4;
        /* [NUEVO] Interlineado cómodo */
    }

    .trans-item.after {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .svc-final-quote {
        font-size: 1.3rem;
        line-height: 1.5;
        /* [NUEVO] Las citas suelen ser largas, necesitan buen interlineado */
        margin-top: 30px;
        /* [NUEVO] Separación jerárquica clara con el bloque superior */
        padding: 0 15px;
        /* Margen de seguridad */
        overflow-wrap: break-word;
    }
}

/* =================================================================
   =================================================================
   PÁGINA: MANEJO DE CAJAS
   =================================================================
   ================================================================= */

/* --- 1. HERO INMERSIVO (Pantalla Completa) --- */
.cajas-hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;

    /* FONDO: Tu imagen cajas.webp */
    background-image: url('../img/cajas.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Parallax sutil */

    /* Le sacamos el padding superior que trae .page-servicio por defecto porque este es un hero distinto */
    margin-top: -100px;
}

/* El degradado oscuro sobre la imagen azul para permitir lectura perfecta */
.cajas-hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Un degradado diagonal que deja pasar un poco más de luz arriba a la derecha */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

/* --- CONTENIDO DEL HERO (Ajuste de espacios) --- */
.cajas-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;

    /* Tu padding aquí es perfecto porque el 130px de abajo actúa como "escudo" 
       para que el texto crezca sin chocar jamás con el indicador de scroll. */
    padding: 100px 20px 130px 20px;

    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.cajas-hero-content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* REGLA DE SEGURIDAD: Si la pantalla es muy bajita (ej: notebooks pequeñas) */
@media (max-height: 800px) {
    .cajas-hero-content {
        padding-top: 80px;
        /* CORRECCIÓN 3: Mantenemos un padding generoso abajo incluso en pantallas chicas
           para proteger el espacio del indicador de scroll. */
        padding-bottom: 120px;
    }

    .cajas-hero-title {
        font-size: clamp(2rem, 4vw, 3.5rem);
        margin-bottom: 20px;
    }

    .cajas-hero-text {
        font-size: 1rem;
        margin-bottom: 25px;
    }
}

/* La etiqueta Cyan arriba del título */
.svc-tag-cyan {
    display: inline-block;
    font-family: var(--font-tech);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-ia);
    border: 1px solid rgba(91, 192, 235, 0.3);
    padding: 6px 16px;
    border-radius: 30px;

    /* CORRECCIÓN: Agregamos margen superior para despegarlo de la barra */
    margin-top: 50px;

    margin-bottom: 30px;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Título Gigante */
.cajas-hero-title {
    font-family: var(--font-tech);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 35px;
    letter-spacing: -1px;
}

/* Textos descriptivos */
.cajas-hero-text {
    font-family: var(--font-body);
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto 40px auto;
}

.cajas-hero-text p {
    margin-bottom: 20px;
}

/* Remate destacado */
.cajas-hero-highlight {
    font-family: var(--font-tech);
    font-size: 1.4rem;
    color: #ffffff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
    display: inline-block;
}

.cajas-hero-highlight span {
    color: var(--accent-ia);
}

/* --- INDICADOR DE SCROLL ANIMADO --- */
.cajas-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.scroll-text {
    font-family: var(--font-tech);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
}

/* La línea que cae sola */
.scroll-line {
    width: 2px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.scroll-line::before {
    content: "";
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--accent-ia);
    animation: scroll-drop 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes scroll-drop {
    0% {
        top: -50%;
    }

    100% {
        top: 100%;
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .cajas-hero-title {
        font-size: 2.2rem;
    }

    .cajas-hero-text {
        font-size: 1rem;
    }

    .cajas-hero-highlight {
        font-size: 1.2rem;
        padding: 15px 0;
    }
}

/* ==========================================
   ESTILOS: CARACTERÍSTICAS DEL SISTEMA
   ========================================== */

.sistema-features {
    width: 100%;
    padding: 80px 20px;
    /* Padding lateral vital para que no toque los bordes en celular */
    background-color: #0d0d0d;
    /* Ajusta al fondo oscuro de tu web */
    color: #ffffff;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Seguro anti-desbordes horizontales */
}

.feature-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
    /* Espacio grande entre un bloque y otro */
}

/* Fila de contenido: Grid de 2 columnas para PC */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Textos */
.feature-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-title {
    font-family: var(--font-tech, sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    /* Achica en móvil, agranda en PC */
    line-height: 1.2;
    color: var(--accent-ia, #5BC0EB);
    /* Tu color Cyan */
    margin-bottom: 10px;
}

.feature-text p {
    font-family: var(--font-body, sans-serif);
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.feature-list {
    margin: 10px 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.8;
}

.feature-list li::marker {
    color: var(--accent-ia, #5BC0EB);
    /* Viñetas color cyan */
}

.feature-highlight {
    font-weight: bold;
    color: #ffffff !important;
    border-left: 4px solid var(--accent-ia, #5BC0EB);
    padding-left: 15px;
    margin-top: 15px !important;
}

/* Contenedor de los vectores */
.feature-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El truco mágico para que los vectores nunca rompan la pantalla */
.vector-fluido {
    width: 100%;
    height: auto;
    max-width: 500px;
    /* Tamaño máximo en PC para que no quede gigante */
    display: block;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .feature-container {
        gap: 70px;
    }

    /* En celulares, pasamos a 1 sola columna y el vector va abajo del texto */
    .feature-row,
    .feature-row.reverse {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: left;
    }

    /* Reducimos un poco el tamaño de letra general para ganar espacio */
    .feature-text p,
    .feature-list {
        font-size: 1rem;
    }
}

/* ==========================================
   ESTILOS: CARACTERÍSTICAS DEL SISTEMA
   ========================================== */

.sistema-features {
    width: 100%;
    padding: 80px 20px;
    background-color: #0d0d0d;
    color: #ffffff;
    box-sizing: border-box;
    overflow-x: hidden;
}

.feature-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Fila de contenido: Grid de 2 columnas para PC (Texto Izq, Imagen Der) */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Textos */
.feature-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-title {
    font-family: var(--font-tech, sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--accent-ia, #5BC0EB);
    margin-bottom: 10px;
}

.feature-text p {
    font-family: var(--font-body, sans-serif);
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.feature-list {
    margin: 10px 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.8;
}

.feature-list li::marker {
    color: var(--accent-ia, #5BC0EB);
}

.feature-highlight {
    font-weight: bold;
    color: #ffffff !important;
    border-left: 4px solid var(--accent-ia, #5BC0EB);
    padding-left: 15px;
    margin-top: 15px !important;
}

/* Contenedor de los vectores */
.feature-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El truco mágico para que los vectores nunca rompan la pantalla */
.vector-fluido {
    width: 100%;
    height: auto;
    max-width: 500px;
    display: block;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .feature-container {
        gap: 70px;
    }

    /* En celulares, pasamos a 1 sola columna (Texto arriba, imagen abajo) */
    .feature-row {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: left;
    }

    /* Reducimos un poco el tamaño de letra general para ganar espacio */
    .feature-text p,
    .feature-list {
        font-size: 1rem;
    }
}

/* ==========================================
   ESTILOS: CARACTERÍSTICAS DEL SISTEMA
   ========================================== */

.sistema-features {
    width: 100%;
    padding: 80px 20px;
    background-color: #0d0d0d;
    color: #ffffff;
    box-sizing: border-box;
    overflow-x: hidden;
}

.feature-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Fila de contenido: Grid de 2 columnas para PC (Texto Izq, Imagen Der) */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Textos */
.feature-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-title {
    font-family: var(--font-tech, sans-serif);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.2;
    color: var(--accent-ia, #5BC0EB);
    margin-bottom: 10px;
}

.feature-text p {
    font-family: var(--font-body, sans-serif);
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.feature-list {
    margin: 10px 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.8;
}

.feature-list li::marker {
    color: var(--accent-ia, #5BC0EB);
}

.feature-highlight {
    font-weight: bold;
    color: #ffffff !important;
    border-left: 4px solid var(--accent-ia, #5BC0EB);
    padding-left: 15px;
    margin-top: 15px !important;
}

.feature-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vector-fluido {
    width: 100%;
    height: auto;
    max-width: 500px;
    display: block;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .feature-container {
        gap: 70px;
    }

    .feature-row {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: left;
    }

    .feature-text p,
    .feature-list {
        font-size: 1rem;
    }
}

/* =========================================
   INTEGRACIÓN IA - HERO FINAL (Layout Flex y Nuevo CTA)
   ========================================= */

.page-transicion {
    opacity: 0;
    animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ia-hero-section {
    position: relative;
    height: 100vh;
    /* Altura fija de pantalla */
    width: 100%;
    overflow: hidden;
    /* Usamos padding para compensar el header fijo y dar aire abajo */
    padding-top: 70px;
    padding-bottom: 30px;
    box-sizing: border-box;
    /* Importante para que el padding no sume altura */
}

/* --- Capas de Fondo (Sin cambios, solo repasando) --- */
.ia-bg-animated {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url('../img/ia.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    transition: transform 0.1s ease-out;
    transform: scale(1.05);
}

.ia-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%);
}

/* --- CONTENIDO FLEXIBLE (La solución al problema de espacio) --- */
.ia-content-left {
    position: relative;
    z-index: 5;
    max-width: 600px;
    /* Un poco más angosto para asegurar lectura */
    margin-left: 5%;
    height: 100%;
    /* Ocupa toda la altura disponible dentro del section */

    /* FLEXBOX MÁGICO */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centra verticalmente todo el bloque */
}

/* Márgenes reducidos para ahorrar espacio vertical */
.ia-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.2rem, 4vw, 4rem);
    /* Tipografía adaptable */
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.text-purple-glow {
    color: #C77DFF;
    text-shadow: 0 0 20px rgba(157, 78, 221, 0.4);
    background-clip: text;
    -webkit-background-clip: text;
}

.ia-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    color: #A0AAB9;
    margin-bottom: 2rem;
    /* Margen reducido */
}

.ia-stacked-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Espacio entre bloques reducido */
}

.ia-text-block p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #b0b8c4;
    margin-bottom: 0.5rem;
}

.ia-consequences {
    border-left: 2px solid #9D4EDD;
    padding-left: 1.5rem;
    background: linear-gradient(90deg, rgba(157, 78, 221, 0.05) 0%, transparent 100%);
    padding-top: 8px;
    padding-bottom: 8px;
}

.consequence-title {
    color: #C77DFF;
    letter-spacing: 2px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.consequence-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.consequence-list li {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.consequence-list li span {
    color: #C77DFF;
    font-weight: 700;
}

/* --- NUEVO DISEÑO DEL CTA (Minimalista en línea) --- */
.ia-hero-footer {
    margin-top: 2rem;
    /* Margen superior reducido */
}

.ia-conclusion {
    font-family: 'Manrope', sans-serif;
    font-size: 1.2rem;
    color: #A0AAB9;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.btn-clic-inline {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #C77DFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    /* Línea invisible por defecto */
    transition: all 0.3s ease;
}

.btn-clic-inline:hover {
    border-bottom-color: #C77DFF;
    /* Aparece la línea al pasar el mouse */
    text-shadow: 0 0 15px rgba(157, 78, 221, 0.6);
}

.arrow-inline-icon {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-clic-inline:hover .arrow-inline-icon {
    transform: translate(3px, -3px);
    /* Pequeño movimiento diagonal al hover */
}

/* Responsive: Ajustes finales para pantallas muy chicas */
@media (max-width: 900px) {
    .ia-content-left {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .ia-main-title {
        font-size: 2.5rem;
    }

    .ia-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .ia-stacked-content {
        gap: 1rem;
    }

    .ia-hero-footer {
        margin-top: 1.5rem;
    }
}

/* =========================================
   SECCIÓN 2: EL PROBLEMA (Falta de Sistema)
   ========================================= */

.ia-problem-section {
    background-color: var(--bg-primary);
    /* Cambiamos el 0 por un 5% para forzar el margen lateral en toda la sección */
    padding: 100px 5%;
    position: relative;
    border-top: 1px solid rgba(157, 78, 221, 0.1);
    box-sizing: border-box;
    /* Asegura que el padding no rompa el ancho total */
}

/* Y para asegurarnos de que en celulares también tenga buen margen, 
   agregá/reemplazá esto en tu bloque de @media (max-width: 900px) al final de este bloque */
@media (max-width: 900px) {
    .ia-problem-section {
        padding: 80px 8%;
        /* Más margen lateral en pantallas chicas */
    }

    .ia-problem-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .ia-timeline-wrapper {
        padding: 2rem 1.5rem;
    }
}

/* Un brillo de fondo muy suave para integrar el violeta */
.ia-problem-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: radial-gradient(circle at right center, rgba(157, 78, 221, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.ia-problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

/* --- TEXTOS (Columna Izquierda) --- */
.ia-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.2;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.ia-body-p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #A0AAB9;
    margin-bottom: 1rem;
}

.ia-body-p strong {
    color: #ffffff;
    font-weight: 600;
}

.ia-simple-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2.5rem 0;
    border-left: 2px solid rgba(157, 78, 221, 0.3);
    padding-left: 1.5rem;
}

.ia-simple-list li {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    color: #cfcfcf;
    margin-bottom: 0.5rem;
}

.ia-simple-list li::before {
    content: '→';
    color: #C77DFF;
    margin-right: 10px;
    font-family: 'Outfit', sans-serif;
}

.ia-problem-conclusion {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.text-muted {
    font-family: 'Outfit', sans-serif;
    color: #A0AAB9;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.highlight-big {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #C77DFF;
    text-shadow: 0 0 15px rgba(157, 78, 221, 0.4);
}

/* --- LÍNEA DE TIEMPO (Columna Derecha) --- */
.ia-timeline-wrapper {
    background: rgba(15, 10, 20, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.15);
    border-radius: 16px;
    padding: 3rem;
}

.ia-timeline {
    border-left: 2px solid rgba(157, 78, 221, 0.3);
    margin-left: 10px;
    padding-left: 30px;
}

.timeline-step {
    position: relative;
    margin-bottom: 2.5rem;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

/* Los puntitos de la línea */
.step-dot {
    position: absolute;
    left: -37px;
    /* Alineado exacto con el borde izquierdo */
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: var(--bg-primary);
    border: 2px solid #9D4EDD;
    border-radius: 50%;
}

.step-content h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.step-content p {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    color: #A0AAB9;
    line-height: 1.5;
}

/* Paso final: El retraso resaltado */
.step-delay {
    margin-top: 3rem;
    padding-top: 1.5rem;
}

.dot-glow {
    background-color: #C77DFF;
    box-shadow: 0 0 15px #C77DFF;
    border-color: #C77DFF;
}

.text-purple-light {
    color: #C77DFF !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .ia-problem-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .ia-timeline-wrapper {
        padding: 2rem 1.5rem;
    }
}

/* =========================================
   SECCIÓN 3: CASO REAL (Eclipse Animado)
   ========================================= */

.ia-case-study-section {
    position: relative;
    padding: 120px 5%;
    min-height: 90vh;
    /* Altura considerable para impacto */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    background-color: #000;
    /* Fondo base por si tarda la imagen */
}

/* --- CAPAS DE FONDO ANIMADAS --- */
.eclipse-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Asegurate de que la imagen eclipse.webp esté en tu carpeta img */
    background-image: url('../img/eclipse.webp');
    background-position: center center;
    background-size: cover;
    z-index: 1;
    /* Estado inicial: brillo normal */
    filter: brightness(1) contrast(1);
    transition: filter 4s ease-in-out;
    /* Transición muy lenta y suave */
}

.eclipse-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* Capa negra pura */
    opacity: 0.85;
    /* Estado inicial: muy oscuro, casi apagado */
    z-index: 2;
    transition: opacity 4s ease-in-out;
    /* Se desvanece suavemente */
}

/* --- ESTADO ACTIVADO (Brillante) --- */
/* Esta clase se agrega con JS después de unos segundos */
.ia-case-study-section.is-bright .eclipse-bg-layer {
    /* Aumentamos brillo y contraste para que "irradie" */
    filter: brightness(1.3) contrast(1.2) saturate(1.1);
    transform: scale(1.02);
    /* Un zoom imperceptible para dar vida */
    transition: all 4s ease-in-out;
}

.ia-case-study-section.is-bright .eclipse-overlay-layer {
    opacity: 0.5;
    /* Desaparece la capa oscura */
}


/* --- CONTENIDO CENTRADO --- */
.ia-centered-content {
    position: relative;
    z-index: 5;
    max-width: 800px;
}

.ia-case-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2.5rem;
    /* Sombra mucho más fuerte y doble para despegarlo del fondo */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.7);
}

.ia-case-body p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #b0b8c4;
    margin-bottom: 1.5rem;
    font-weight: 400;
    /* Un poquito más de cuerpo */
    /* Sombra negra detrás de los párrafos */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.highlight-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem !important;
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
}

/* Caja de Impacto (Menos de 24hs) */
.solution-impact-box {
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(157, 78, 221, 0.1);
    /* Fondo violeta muy sutil */
    border: 1px solid rgba(157, 78, 221, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 600px;
}

.solution-impact-box p {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    color: #cfcfcf;
}

.impact-time {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: #C77DFF;
    text-shadow: 0 0 25px rgba(157, 78, 221, 0.6);
    margin: 0;
}

/* --- GRILLA DE RESULTADOS --- */
.ia-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columnas en PC */
    gap: 1.5rem;
    margin-top: 4rem;
}

.result-item {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.result-item:hover {
    transform: translateY(-5px);
    border-color: #C77DFF;
}

/* Borrá .result-check y agregá esto: */
.result-check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    /* Evita que el ícono se achique si el texto es largo */
    margin-bottom: 5px;
    /* Separación sutil si está arriba del texto */
}

.result-highlight {
    background: rgba(157, 78, 221, 0.2);
    /* Resaltamos el último */
    border-color: rgba(157, 78, 221, 0.4);
}

/* Responsive */
@media (max-width: 900px) {
    .ia-results-grid {
        grid-template-columns: 1fr 1fr;
        /* 2x2 en tablets/móviles grandes */
    }
}

@media (max-width: 500px) {
    .ia-results-grid {
        grid-template-columns: 1fr;
        /* 1 columna en móviles chicos */
        gap: 1rem;
    }

    .result-item {
        flex-direction: row;
        justify-content: flex-start;
        padding: 1rem;
    }
}

/* =========================================
   SECCIÓN 4: VENTAJA COMPETITIVA (Sticky Scroll Premium)
   ========================================= */

.ia-sticky-section {
    position: relative;
    background-color: var(--bg-primary);
}

/* --- EL TÍTULO ESTÁTICO DE FONDO --- */
.ia-sticky-background {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

.ia-huge-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: 0.85;
    font-weight: 800;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.text-outline {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);
    /* Borde un poco más fino y elegante */
}

/* --- LAS TARJETAS (Hacen scroll) --- */
.ia-cards-scroller {
    position: relative;
    z-index: 2;
    padding-top: 80vh;
    padding-bottom: 20vh;
    display: flex;
    flex-direction: column;
    gap: 5vh;
    /* MUCHO MÁS JUNTAS */
}

/* Posicionamiento en Zig-Zag */
.ia-square-card:nth-child(odd) {
    align-self: flex-start;
    margin-left: 8%;
}

.ia-square-card:nth-child(even) {
    align-self: flex-end;
    margin-right: 8%;
}

/* Diseño base del Cuadrado (Gigantes) */
.ia-square-card {
    width: 600px;
    /* MUCHO MÁS GRANDES */
    aspect-ratio: 1 / 1;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: crosshair;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}

/* Los 4 Colores Requeridos */
.card-violet {
    background-color: #9D4EDD;
    color: #ffffff;
}

.card-white {
    background-color: #ffffff;
    color: #000000;
}

.card-blue {
    background-color: #0077B6;
    color: #ffffff;
}

.card-lightblue {
    background-color: #5BC0EB;
    color: #000000;
}

/* --- DISEÑOS MULTINACIONALES ÚNICOS PARA CADA CAJA --- */
.card-line-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Violeta: Anillos topográficos concéntricos */
.card-violet .card-line-pattern {
    background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 20px, rgba(255, 255, 255, 0.1) 21px, rgba(255, 255, 255, 0.1) 22px),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 40%);
}

/* 2. Blanca: Grilla arquitectónica y escaneo cónico */
.card-white .card-line-pattern {
    background-image: conic-gradient(from 90deg at 40% 40%, transparent 90deg, rgba(0, 0, 0, 0.05) 90deg 180deg, transparent 180deg),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 20px);
}

/* 3. Azul: Nodos y conexiones de datos */
.card-blue .card-line-pattern {
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.2) 2px, transparent 3px),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.2) 4px, transparent 5px),
        linear-gradient(135deg, transparent 48%, rgba(255, 255, 255, 0.1) 49%, rgba(255, 255, 255, 0.1) 51%, transparent 52%);
    background-size: 60px 60px, 90px 90px, 100% 100%;
}

/* 4. Celeste: Geometría dura (Bauhaus tech) */
.card-lightblue .card-line-pattern {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 50%, transparent 50%),
        linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%),
        radial-gradient(circle at 50% 50%, transparent 25%, rgba(0, 0, 0, 0.05) 26%, transparent 27%);
    background-size: 40px 40px, 40px 40px, 120px 120px;
}

/* --- TÍTULOS Y TEXTOS --- */
.card-hook {
    position: relative;
    z-index: 10;
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    /* Título más grande */
    font-weight: 800;
    text-align: center;
    padding: 0 30px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Texto Oculto (Glassmorphism para contraste perfecto) */
.card-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
    z-index: 20;
    /* Efecto cristal: oscurece un poco y desenfoca lo que está justo detrás del texto */
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card-reveal p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    /* Más grande para acompañar la caja de 600px */
    line-height: 1.6;
    font-weight: 500;
    margin: 0;
    color: #ffffff;
    /* Blanco siempre para lectura fácil */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* --- MAGIA AL PASAR EL MOUSE (Desenfoque fluido y real) --- */
.ia-square-card:hover .card-line-pattern {
    /* Desenfoque profundo real, sin reventar los colores */
    filter: blur(25px);
    transform: scale(1.2) rotate(5deg);
    /* Movimiento líquido suave */
}

.ia-square-card:hover {
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    /* Salta hacia adelante */
    transform: translateY(-10px);
    /* Se levanta sutilmente */
}

.ia-square-card:hover .card-hook {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(15px);
    /* Se disuelve */
}

.ia-square-card:hover .card-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* ===============================
   MOBILE FIXED FALLBACK
================================ */

@media (max-width: 768px) {

    .ia-sticky-background {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 100svh;

        z-index: 1;

        opacity: 0;
        pointer-events: none;

        transition: opacity 0.3s ease;
    }

    .ia-sticky-background.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Espacio para que el contenido no tape */
    .ia-sticky-section {
        padding-top: 100svh;
    }
}

/* ===============================
   MOBILE CARD FULL VIEW FIX
================================ */

@media (max-width: 768px) {

    .ia-square-card {

        /* Tamaño basado en pantalla real */
        width: min(90vw, 90svh);

        /* Altura máxima segura */
        max-height: 80svh;

        aspect-ratio: 1 / 1;

        /* Evita overflow interno */
        overflow: hidden;
    }

    /* Ajuste interno del contenido */
    .card-hook {
        font-size: clamp(1.6rem, 5vw, 2rem);
        padding: 0 1rem;
        line-height: 1.2;
    }

    .card-reveal {
        padding: 1.5rem;
    }

    .card-reveal p {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem);
        line-height: 1.45;

        max-height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Scroll interno suave si el texto es largo */
    .card-reveal p::-webkit-scrollbar {
        width: 4px;
    }

    .card-reveal p::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
    }
}



/* =========================================
   SECCIÓN 5: NARRATIVA DE AUTOMATIZACIÓN (Editorial Tech)
   ========================================= */

.ia-narrative-section {
    background-color: var(--bg-primary);
    /* Márgenes blindados: 150px arriba/abajo y 5% a los lados siempre */
    padding: 150px 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.narrative-wrapper {
    position: relative;
    max-width: 900px;
    /* Ancho máximo de lectura para que no sea un renglón infinito */
    margin: 0 auto;
    /* Centra el bloque en pantallas grandes */
    padding-left: 4rem;
    /* Espacio para la línea de color */
}

/* --- LA LÍNEA NARRATIVA (El hilo conductor con la paleta) --- */
.narrative-thread {
    position: absolute;
    top: 10px;
    left: 0;
    bottom: 10px;
    width: 3px;
    /* El gradiente con los 4 colores de las tarjetas */
    background: linear-gradient(to bottom, #9D4EDD 0%, #0077B6 40%, #5BC0EB 70%, #ffffff 100%);
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.3);
    /* Brillo sutil */
}

/* --- LOS BLOQUES DE TEXTO --- */
.narrative-block {
    margin-bottom: 6rem;
}

.narrative-block:last-child {
    margin-bottom: 0;
}

/* Títulos */
.narrative-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 2.5rem;
}

/* Colores de acento para los títulos (La misma paleta) */
.color-violet {
    color: #9D4EDD;
}

.color-blue {
    color: #0077B6;
}

.color-lightblue {
    color: #5BC0EB;
}

/* Contenido / Párrafos */
.narrative-content p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    line-height: 1.8;
    /* Interlineado alto para lectura súper limpia */
    color: #A0AAB9;
    margin-bottom: 1.8rem;
    font-weight: 400;
}

.narrative-content p:last-child {
    margin-bottom: 0;
}

/* Destacados en el texto */
.narrative-content strong {
    color: #ffffff;
    font-weight: 600;
}

.text-highlight {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Conclusión final (Blanco brillante para cerrar) */
.narrative-conclusion {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.5rem !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .narrative-wrapper {
        padding-left: 2.5rem;
        /* Achica un poco el margen izquierdo en celulares */
    }

    .narrative-content p {
        font-size: 1.15rem;
        /* Párrafos un poco más chicos */
    }

    .narrative-block {
        margin-bottom: 4rem;
    }
}

/* =========================================
   SECCIÓN 6: PORTALES INMERSIVOS (Sólido y Minimalista)
   ========================================= */

#ia-immersive-portals {
    position: relative;
    background: var(--bg-primary);
}

/* --- CONFIGURACIÓN GENERAL DE LOS PORTALES --- */
.portal-stage {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);

    /* MÁRGENES BLINDADOS */
    padding: 0 8%;
    box-sizing: border-box;
}

/* --- FONDOS SÓLIDOS (Sin degradados ni luces) --- */

/* Escenario 1: Cerebro (Violeta ultra profundo, casi negro) */
.stage-brain {
    background-color: #0d0714;
}

/* Escenario 2: Foco (Azul noche puro) */
.stage-focus {
    background-color: #061022;
}

/* Escenario 3: Crecimiento (Negro con un levísimo tinte cyan) */
.stage-growth {
    background-color: #041116;
}

/* --- ESTILOS DEL CONTENIDO (Limpio y sin sombras) --- */
.portal-content {
    position: relative;
    z-index: 5;
    max-width: 650px;
    padding: 4rem 0;
}

/* Posicionamiento dinámico */
.content-left {
    margin-right: auto;
}

.content-right {
    margin-left: auto;
    text-align: right;
}

.content-center {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
}

/* Tipografía Multinacional (Sin text-shadow) */
.portal-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.1;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 2rem;
    letter-spacing: -1.5px;
    text-transform: uppercase;
}

.portal-huge-title {
    font-size: clamp(4rem, 8vw, 7rem);
}

.portal-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #A0AAB9;
    /* Gris plata elegante para mejor lectura */
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.text-center-constrained {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}

/* Acentos de color limpios (Mismos nombres de clase, pero ahora son colores sólidos) */
.text-purple-glow {
    color: #9D4EDD;
}

.text-blue-glow {
    color: #0077B6;
}

.text-lightblue-glow {
    color: #5BC0EB;
}

.highlight-violet {
    color: #9D4EDD;
    font-weight: 700;
}

.highlight-blue {
    color: #0077B6;
    font-weight: 700;
}


/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 900px) {
    .portal-stage {
        min-height: auto;
        padding: 100px 8%;
        /* Respetamos el margen del 8% en celulares */
    }

    .portal-title {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .portal-text {
        font-size: 1.2rem;
    }

    .content-right {
        text-align: left;
        margin-left: 0;
    }
}

/* =========================================
   SECCIÓN 7: GRAN CIERRE (Imagen Intacta & Caída 1x1)
   ========================================= */

.ia-finale-section {
    position: relative;
    padding: 150px 8%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #ffffff;
}

/* --- FONDOS (Imagen 100% visible) --- */
.humania-bg {
    position: absolute;
    top: 0;
    right: 0;
    /* La anclamos a la derecha */
    width: 60%;
    /* Solo ocupa la parte derecha, así no se mezcla con el texto */
    height: 100%;
    background-image: url('../img/humania.webp');
    background-position: center right;
    background-size: contain;
    /* Garantiza que se vea entera, sin cortes */
    background-repeat: no-repeat;
    z-index: 1;
}

.humania-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* CORRECCIÓN: El blanco muere rápido en el 40%. La imagen queda 100% libre de opacidad. */
    background: linear-gradient(90deg, #ffffff 35%, rgba(255, 255, 255, 0.8) 45%, transparent 55%);
}

/* --- ESTRUCTURA GRID --- */
.finale-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    width: 100%;
}

/* --- COLUMNA IZQUIERDA (Texto) --- */
.finale-content {
    max-width: 600px;
}

.finale-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.05;
    font-weight: 800;
    color: #111111;
    letter-spacing: -2px;
    margin-bottom: 2.5rem;
}

.text-gradient-dark {
    background: linear-gradient(90deg, #5a189a, #0077b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.finale-body p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.finale-punchline {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 3px solid #111111;
}

.finale-punchline h3 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: #111111;
    letter-spacing: -1px;
}

/* --- COLUMNA DERECHA (Palabras Posicionadas Arriba) --- */
.keywords-static-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Las empuja hacia arriba */
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    margin-top: -10px;
    /* Fuerza el bloque más arriba en la pantalla */
}

.keyword-block {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(3.5rem, 6vw, 6rem);
    /* Apenas más chicas para que caigan limpias */
    font-weight: 900;
    line-height: 0.9;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin: 0;
    transform-origin: left bottom;
    /* Para que al caer giren desde la base */
}

.keyword-accent {
    color: #9D4EDD;
}

/* --- LA ANIMACIÓN (Caída 1 por 1) --- */
.keywords-static-wrapper.is-visible .word-drop {
    /* Animación más seca y pesada, como algo sólido cayendo */
    animation: dropOneByOne 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

/* Tiempos de caída exactos (Termina una, cae la otra) */
.word-1 {
    animation-delay: 0.5s !important;
}

/* PROGRESO cae primero */
.word-2 {
    animation-delay: 1.5s !important;
}

/* FUTURO cae un segundo después */
.word-3 {
    animation-delay: 2.5s !important;
}

/* EVOLUCIÓN cae al final */

@keyframes dropOneByOne {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 2;
    }

    /* Toman impulso hacia arriba */
    100% {
        transform: translateY(120vh) rotate(15deg);
        opacity: 0;
    }

    /* Caen de la pantalla girando */
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .finale-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* En celulares el blanco tiene que cubrir más porque el texto pasa a estar arriba de la foto */
    .humania-overlay {
        background: linear-gradient(180deg, #ffffff 55%, rgba(255, 255, 255, 0) 100%);
    }

    .humania-bg {
        width: 100%;
        background-position: bottom center;
    }

    .keywords-static-wrapper {
        margin-top: 0;
    }

    .keyword-block {
        font-size: 3.5rem;
    }
}

/* =================================================================
   PÁGINA: TRAZABILIDAD DE PRODUCCIÓN
   ================================================================= */

/* --- 1. HERO SECTION (Perfect Split Screen Hero) --- */
.tz-hero-split {
    display: grid;
    grid-template-columns: 55% 45%;

    /* MAGIA HERO: Ocupa exactamente el 100% de la pantalla visible */
    height: 100vh;
    /* Fallback para navegadores viejos */
    height: 100dvh;
    /* Dynamic Viewport Height: ignora la barra de direcciones del celular */

    background-color: #000000;
    overflow: hidden;
    /* Evita que haya un scroll accidental en este bloque en PC */
}

/* --- COLUMNA IZQUIERDA (Texto perfectamente centrado) --- */
.tz-split-content {
    display: flex;
    align-items: center;
    /* Centra el bloque de texto verticalmente de forma matemática */
    /* Padding: Compensamos arriba la altura de tu barra de navegación (aprox 100px) */
    padding: 100px 10% 40px 12%;
    background-color: #000000;
    height: 100%;
    box-sizing: border-box;
}

.tz-content-inner {
    max-width: 650px;
    width: 100%;
    /* Asegura que no colapse */
}

/* Etiqueta superior técnica */
.tz-badge {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #000000;
    background-color: var(--accent-ia, #5BC0EB);
    padding: 6px 15px;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    /* Reducido un poquito para que entre perfecto */
}

/* Título (Usa clamp para auto-ajustarse sin romper la caja) */
.tz-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4.2rem);
    line-height: 1.05;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-bottom: 2rem;
}

.text-solid-accent {
    color: var(--accent-ia, #5BC0EB);
}

/* Párrafos principales */
.tz-hero-text-block {
    margin-bottom: 2.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
}

.tz-hero-text-block p {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.25rem);
    /* Autoajuste de texto */
    line-height: 1.6;
    color: #A0AAB9;
    margin-bottom: 1.2rem;
    font-weight: 400;
}

.tz-hero-text-block p:last-child {
    margin-bottom: 0;
}

/* Conclusión final */
.tz-hero-footer {
    background-color: rgba(255, 255, 255, 0.03);
    padding: 20px 25px;
    border-left: 2px solid var(--accent-ia, #5BC0EB);
}

.tz-hero-footer strong {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 0.5rem;
}

.tz-hero-footer p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #888888;
    margin: 0;
}

/* --- COLUMNA DERECHA (Imagen a sangre) --- */
.tz-split-image {
    position: relative;
    width: 100%;
    height: 100%;
}

.tz-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/industria.webp');
    background-position: center;
    background-size: cover;
    filter: grayscale(20%) contrast(1.1);
}

/* Línea divisoria arquitectónica */
.tz-split-divider {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 4px;
    background-color: var(--accent-ia, #5BC0EB);
}

/* --- RESPONSIVE MÓVIL ESTRICTO --- */
@media (max-width: 1024px) {
    .tz-hero-split {
        grid-template-columns: 1fr;
        /* En celulares, cambiamos de height estricto a min-height.
           Esto garantiza que la pantalla inicial se llene, pero si el texto
           es muy largo, el usuario puede scrollear sin que se corte nada. */
        height: auto;
        min-height: 100dvh;
        overflow: visible;
        /* Liberamos el scroll en móvil */
    }

    .tz-split-content {
        /* Damos un alto mínimo para que el texto ocupe gran parte de la pantalla inicial */
        min-height: 60dvh;
        padding: 140px 6% 60px 6%;
    }

    .tz-split-image {
        /* La imagen ocupará el resto de la pantalla, o un mínimo de 400px */
        min-height: 40dvh;
        height: 400px;
    }

    .tz-split-divider {
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        /* Línea horizontal para móvil */
    }

    .tz-hero-title {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }
}

/* =================================================================
   SECCIÓN 2: CONTROL EN TIEMPO REAL (Blueprint Cards)
   ================================================================= */

.tz-control-section {
    background-color: #000000;
    padding: 120px 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Línea divisoria sólida */
}

/* --- CABECERA DE SECCIÓN --- */
.tz-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 5rem auto;
}

.tz-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.1;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

.tz-section-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 1.2rem;
    color: #A0AAB9;
    line-height: 1.6;
}

/* --- GRILLA DE TARJETAS --- */
.tz-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- LA TARJETA BASE --- */
.tz-wire-card {
    position: relative;
    height: 480px;
    background-color: #080808;
    /* Fondo negro sólido */
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    cursor: crosshair;
    /* Cursor técnico */
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.tz-wire-card:hover {
    border-color: var(--accent-ia, #5BC0EB);
    transform: translateY(-5px);
    /* Pequeño levante sólido, sin sombras */
}

/* --- EL ARTE CSS (Las figuras de líneas) --- */
.tz-wire-figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #050505;
    transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Cuando hacés hover, la zona del arte se achica para dar lugar al texto */
.tz-wire-card:hover .tz-wire-figure {
    height: 30%;
    border-bottom-color: var(--accent-ia, #5BC0EB);
}

/* Elementos comunes del arte */
.wire-ring,
.wire-square,
.wire-node,
.wire-line,
.wire-path {
    position: absolute;
    box-sizing: border-box;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Arte 1: Radar */
.art-radar .ring-1 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.art-radar .ring-2 {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--accent-ia, #5BC0EB);
}

.art-radar .line-h {
    width: 160px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

.tz-wire-card:hover .art-radar .ring-1 {
    transform: scale(1.2) rotate(45deg);
    border-color: rgba(91, 192, 235, 0.3);
}

.tz-wire-card:hover .art-radar .ring-2 {
    transform: scale(0.5);
    border-width: 2px;
}

/* Arte 2: Cubo Isométrico */
.art-cube .sq-1 {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translate(-15px, -15px);
}

.art-cube .sq-2 {
    width: 80px;
    height: 80px;
    border: 1px solid var(--accent-ia, #5BC0EB);
    transform: translate(15px, 15px);
}

.art-cube .line-diag {
    width: 42px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(45deg);
}

.tz-wire-card:hover .art-cube .sq-1 {
    transform: translate(-25px, -25px) rotate(90deg);
}

.tz-wire-card:hover .art-cube .sq-2 {
    transform: translate(25px, 25px) rotate(-90deg);
    border-color: #ffffff;
}

/* Arte 3: Nodos de Flujo */
.art-flow .wire-node {
    width: 12px;
    height: 12px;
    background-color: #000;
    border: 2px solid var(--accent-ia, #5BC0EB);
}

.art-flow .node-a {
    transform: translate(-50px, -30px);
}

.art-flow .node-b {
    transform: translate(0, 0);
}

.art-flow .node-c {
    transform: translate(50px, 30px);
}

.art-flow .wire-path {
    width: 120px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
}

.tz-wire-card:hover .art-flow .node-a {
    transform: translate(-60px, 0);
    border-radius: 50%;
}

.tz-wire-card:hover .art-flow .node-c {
    transform: translate(60px, 0);
    border-radius: 50%;
}

.tz-wire-card:hover .art-flow .wire-path {
    transform: rotate(0deg);
    background-color: var(--accent-ia, #5BC0EB);
}


/* --- CONTENIDO INICIAL (Frente) --- */
.tz-card-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.tz-card-hook {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 10px;
}

.tz-card-sub {
    font-family: 'Manrope', sans-serif;
    color: var(--accent-ia, #5BC0EB);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

/* Al hacer hover, el frente se esconde hacia arriba */
.tz-wire-card:hover .tz-card-front {
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
}

/* --- CONTENIDO REVELADO (Dorso) --- */
.tz-card-back {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    padding: 30px;
    background-color: #080808;
    /* Cubre el frente */
    transform: translateY(100%);
    /* Escondido abajo */
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.tz-wire-card:hover .tz-card-back {
    transform: translateY(0);
    opacity: 1;
}

.tz-card-back p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #A0AAB9;
    margin-bottom: 0;
}

.tz-card-back strong {
    color: #ffffff;
}

/* Lista técnica adentro del hover */
.tz-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.tz-card-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
}

.tz-card-list li::before {
    content: "■";
    /* Cuadrado técnico en vez de viñeta redonda */
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--accent-ia, #5BC0EB);
    font-size: 0.8rem;
}

/* Separador sólido interno */
.tz-card-divider {
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 1rem 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .tz-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tz-wire-card {
        height: 420px;
    }
}

/* =================================================================
   SECCIÓN 2: CONTROL EN TIEMPO REAL (Industrial & Rústico)
   ================================================================= */

.tz-control-section {
    background-color: #000000;
    padding: 120px 5%;
    border-top: none;
    /* Borde más rudo */
}

/* --- CABECERA --- */
.tz-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 5rem auto;
}

.tz-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.1;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

.tz-section-subtitle {
    font-family: 'Manrope', sans-serif;
    font-size: 1.2rem;
    color: #A0AAB9;
    line-height: 1.6;
}

/* --- GRILLA --- */
.tz-cards-grid {
    display: grid;
    /* Tarjetas más anchas */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 3rem;
    max-width: 1300px;
    margin: 0 auto;
}

/* --- TARJETA INDUSTRIAL (Heavy Card) --- */
.tz-heavy-card {
    position: relative;
    height: 550px;
    /* Tarjetas más altas y espaciosas */
    background-color: #0a0a0c;
    /* Borde sólido y rústico */
    border: 2px solid #1f1f1f;
    /* CORTE INDUSTRIAL: Bisela las esquinas superior izquierda e inferior derecha */
    clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
    overflow: hidden;
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.tz-heavy-card:hover {
    border-color: var(--accent-ia, #5BC0EB);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
}

/* Fondo vivo: Cuadrícula de plano que panea lentamente */
.tz-blueprint-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: 0;
    /* Da vida sin hover */
    animation: panGrid 40s linear infinite;
}

@keyframes panGrid {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-30px, -30px);
    }
}

/* --- ARTE CSS (Organizado y sin solapamientos) --- */
.tz-art-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #1f1f1f;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
}

.tz-heavy-card:hover .tz-art-container {
    height: 35%;
    border-bottom-color: var(--accent-ia, #5BC0EB);
}

/* Arte 1: Radar Pesado */
.art-heavy-radar {
    position: relative;
    width: 140px;
    height: 140px;
}

.hr-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
}

.hr-1 {
    width: 140px;
    height: 140px;
}

.hr-2 {
    width: 60px;
    height: 60px;
    border: 2px solid var(--accent-ia, #5BC0EB);
}

.hr-crosshair {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.15);
}

.hr-v {
    width: 2px;
    height: 100%;
    top: 0;
    left: calc(50% - 1px);
}

.hr-h {
    width: 100%;
    height: 2px;
    left: 0;
    top: calc(50% - 1px);
}

.tz-heavy-card:hover .hr-1 {
    width: 160px;
    height: 160px;
    transform: translate(-50%, -50%) rotate(90deg);
    border-color: rgba(91, 192, 235, 0.4);
}

.tz-heavy-card:hover .hr-2 {
    width: 80px;
    height: 80px;
}

/* Arte 2: Retícula de Calibración */
.art-heavy-frame {
    position: relative;
    width: 120px;
    height: 120px;
    transition: all 0.5s ease;
}

.hf-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.5s ease;
}

.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.top-right {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.bottom-left {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.hf-target {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 2px solid var(--accent-ia, #5BC0EB);
    transition: all 0.5s ease;
}

.tz-heavy-card:hover .art-heavy-frame {
    width: 150px;
    height: 150px;
}

.tz-heavy-card:hover .hf-corner {
    border-color: var(--accent-ia, #5BC0EB);
}

.tz-heavy-card:hover .hf-target {
    width: 10px;
    height: 10px;
    background-color: var(--accent-ia, #5BC0EB);
}

/* Arte 3: Escáner de Datos (Código de barras industrial) */
.art-heavy-scanner {
    position: relative;
    width: 100px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hs-bar {
    width: 15px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.b1 {
    height: 100%;
}

.b2 {
    height: 60%;
}

.b3 {
    height: 80%;
}

.b4 {
    height: 40%;
}

.hs-laser {
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 3px;
    background-color: transparent;
    box-shadow: none;
    transition: all 0.5s ease;
}

.tz-heavy-card:hover .hs-bar {
    background-color: rgba(255, 255, 255, 0.5);
}

.tz-heavy-card:hover .hs-laser {
    background-color: var(--accent-ia, #5BC0EB);
    box-shadow: 0 0 15px var(--accent-ia, #5BC0EB);
    animation: scanData 1s infinite alternate linear;
}

@keyframes scanData {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}


/* --- FRENTE (Estado Inicial) --- */
.tz-card-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 35px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.tz-card-badge {
    display: inline-block;
    padding: 4px 10px;
    background-color: #1a1a1a;
    color: #666;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
    width: fit-content;
    border: 1px solid #333;
}

.tz-card-hook {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;
}

.tz-card-sub {
    font-family: 'Manrope', sans-serif;
    color: var(--accent-ia, #5BC0EB);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.tz-heavy-card:hover .tz-card-front {
    transform: translateY(-30px);
    opacity: 0;
    pointer-events: none;
}


/* --- DORSO (Contenido Revelado) --- */
.tz-card-back {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65%;
    padding: 35px;
    z-index: 3;
    background-color: #0a0a0c;
    border-top: 2px solid #1f1f1f;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}

.tz-heavy-card:hover .tz-card-back {
    transform: translateY(0);
    opacity: 1;
    border-top-color: var(--accent-ia, #5BC0EB);
}

.tz-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.tz-card-list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
}

.tz-card-list li::before {
    content: "►";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--accent-ia, #5BC0EB);
    font-size: 0.9rem;
}

.tz-card-divider {
    width: 40px;
    height: 3px;
    background-color: #333;
    margin: 1.5rem 0;
}

.tz-card-back p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #A0AAB9;
    margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .tz-cards-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .tz-heavy-card {
        height: 480px;
    }
}

/* =================================================================
   SECCIÓN 3: CONTROL DETALLADO (Reverse Split Screen)
   ================================================================= */

.tz-reverse-split {
    display: grid;
    grid-template-columns: 45% 55%;

    /* CORRECCIÓN IMAGEN CUADRADA: 
       Sacamos el 100vh para que la sección no sea exageradamente alta.
       Esto evita que la imagen cuadrada sufra un zoom destructivo. */
    min-height: 70vh;
    height: auto;

    background-color: #000000;
    overflow: hidden;
    border-top: none;
}

/* --- COLUMNA IZQUIERDA (Imagen Autoparte) --- */
.tz-image-col {
    position: relative;
    width: 100%;
    height: 100%;
}

.tz-bg-autoparte {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/autoparte.webp');
    /* CORRECCIÓN: Al ser cuadrada, la centramos por completo para el mejor encuadre */
    background-position: center center;
    background-size: cover;
    filter: grayscale(15%) contrast(1.1);
}

.tz-split-divider-right {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 4px;
    background-color: var(--accent-ia, #5BC0EB);
}

/* --- COLUMNA DERECHA (Texto) --- */
.tz-text-col {
    display: flex;
    align-items: center;
    padding: 100px 10% 100px 12%;
    background-color: #000000;
    height: 100%;
    box-sizing: border-box;
}

/* CORRECCIÓN TÍTULO: Le damos más aire específicamente a esta sección */
.tz-reverse-split .tz-hero-title {
    line-height: 1.15;
    /* Más separación entre renglones */
    letter-spacing: -0.5px;
    /* Letras menos apretadas */
}

/* --- ANIMACIÓN DE LA CAJA INFERIOR (De Derecha a Izquierda) --- */
.tz-reverse-split .tz-hero-footer {
    /* Estado inicial: invisible y corrida 80px hacia la derecha */
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cuando el script JS detecta la sección, dispara la animación con un leve retraso */
.tz-content-inner.is-visible .tz-hero-footer {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.35s;
    /* Entra unas milésimas después que el texto principal, dando efecto cascada */
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .tz-reverse-split {
        display: flex;
        flex-direction: column-reverse;
        min-height: auto;
    }

    .tz-text-col {
        padding: 80px 6% 80px 6%;
    }

    .tz-image-col {
        min-height: 400px;
        height: 50vw;
        /* En celular mantiene una proporción rectangular razonable */
    }

    .tz-split-divider-right {
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: 4px;
    }
}

/* =================================================================
   SECCIÓN 5: ESCALABILIDAD (Terminal de Expansión)
   ================================================================= */

.tz-adapt-section {
    background-color: #000000;
    padding: 120px 5%;
    border-top: none;
}

.tz-adapt-grid {
    display: grid;
    /* Retomamos el patrón original: Texto 50%, Tarjeta 50% */
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- TEXTO IZQUIERDO (Reutiliza la base de tu diseño) --- */
.tz-adapt-content {
    max-width: 650px;
}

/* --- TARJETA PREMIUM (Terminal Interactiva) --- */
.tz-adapt-terminal {
    position: relative;
    background-color: #050505;
    border: 2px solid #1f1f1f;
    height: 500px;
    display: flex;
    flex-direction: column;
    /* Corte industrial sutil en una sola esquina para diferenciarla */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    cursor: crosshair;
}

.tz-adapt-terminal:hover {
    border-color: var(--accent-ia, #5BC0EB);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    transform: translateY(-5px);
}

/* Topbar de la terminal */
.tz-term-topbar {
    height: 40px;
    background-color: #0a0a0c;
    border-bottom: 2px solid #1f1f1f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    transition: border-color 0.4s ease;
}

.tz-adapt-terminal:hover .tz-term-topbar {
    border-bottom-color: var(--accent-ia, #5BC0EB);
}

.tz-term-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #333;
    border-radius: 50%;
    margin-right: 5px;
    transition: background-color 0.4s;
}

.tz-adapt-terminal:hover .tz-term-dots span:nth-child(1) {
    background-color: var(--accent-ia, #5BC0EB);
}

.tz-term-status {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    color: #666;
    letter-spacing: 2px;
    transition: color 0.4s;
}

.tz-adapt-terminal:hover .tz-term-status {
    color: var(--accent-ia, #5BC0EB);
}

/* Lienzo de animación */
.tz-term-canvas {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
}

/* Cuadrícula de fondo */
.tz-term-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
}

/* Mensaje central en reposo */
.tz-center-msg {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: #555;
    letter-spacing: 4px;
    font-weight: 700;
    transition: opacity 0.3s ease;
}

.tz-adapt-terminal:hover .tz-center-msg {
    opacity: 0;
}

/* --- LOS NODOS (Cajitas de proceso) --- */
.tz-node {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Arrancan todos apilados en el centro exacto */
    transform: translate(-50%, -50%);
    width: 130px;
    padding: 12px 0;
    background-color: #000;
    border: 2px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tz-node-icon {
    color: #555;
    font-size: 1.2rem;
    margin-bottom: 5px;
    transition: color 0.4s;
}

.tz-node-text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.85rem;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
    transition: color 0.4s;
}

/* Ocultamos los nodos 2, 3 y 4 en estado de reposo */
.tz-node-2,
.tz-node-3,
.tz-node-4 {
    opacity: 0;
    pointer-events: none;
}

/* ESTADO HOVER: LA EXPANSIÓN (Acá está la magia matemática) */
/* El nodo 1 va arriba a la izquierda */
.tz-adapt-terminal:hover .tz-node-1 {
    transform: translate(-160px, -120px);
    border-color: var(--accent-ia, #5BC0EB);
}

/* El nodo 2 aparece arriba a la derecha */
.tz-adapt-terminal:hover .tz-node-2 {
    opacity: 1;
    transform: translate(30px, -120px);
    border-color: var(--accent-ia, #5BC0EB);
    transition-delay: 0.1s;
}

/* El nodo 3 aparece abajo a la derecha */
.tz-adapt-terminal:hover .tz-node-3 {
    opacity: 1;
    transform: translate(30px, 80px);
    border-color: var(--accent-ia, #5BC0EB);
    transition-delay: 0.2s;
}

/* El nodo 4 aparece abajo a la izquierda */
.tz-adapt-terminal:hover .tz-node-4 {
    opacity: 1;
    transform: translate(-160px, 80px);
    border-color: var(--accent-ia, #5BC0EB);
    transition-delay: 0.3s;
}

.tz-adapt-terminal:hover .tz-node-icon {
    color: var(--accent-ia, #5BC0EB);
}

.tz-adapt-terminal:hover .tz-node-text {
    color: #fff;
}

/* --- LÍNEAS DE CONEXIÓN QUE SE DIBUJAN SOLAS --- */
.tz-line {
    position: absolute;
    background-color: rgba(91, 192, 235, 0.3);
    z-index: 1;
}

/* Línea de 1 a 2 (Top) */
.tz-line-top {
    top: calc(50% - 120px);
    left: calc(50% - 95px);
    height: 2px;
    width: 0;
    transition: width 0.6s ease 0.2s;
}

/* Línea de 2 a 3 (Right) */
.tz-line-right {
    top: calc(50% - 95px);
    left: calc(50% + 95px);
    width: 2px;
    height: 0;
    transition: height 0.6s ease 0.4s;
}

/* Línea de 3 a 4 (Bottom) */
.tz-line-bottom {
    top: calc(50% + 80px);
    right: calc(50% - 95px);
    height: 2px;
    width: 0;
    transition: width 0.6s ease 0.6s;
}

/* En hover, las líneas se extienden para conectar los nodos */
.tz-adapt-terminal:hover .tz-line-top {
    width: 190px;
}

.tz-adapt-terminal:hover .tz-line-right {
    height: 175px;
}

.tz-adapt-terminal:hover .tz-line-bottom {
    width: 190px;
}

/* Paquetitos de datos viajando por las líneas */
.tz-data-packet {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
    opacity: 0;
}

.tz-adapt-terminal:hover .tz-line-top .tz-data-packet {
    opacity: 1;
    animation: travelX 2s infinite linear 0.8s;
}

.tz-adapt-terminal:hover .tz-line-right .tz-data-packet {
    opacity: 1;
    animation: travelY 2s infinite linear 1s;
}

.tz-adapt-terminal:hover .tz-line-bottom .tz-data-packet {
    opacity: 1;
    animation: travelXRev 2s infinite linear 1.2s;
}

@keyframes travelX {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}

@keyframes travelY {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

@keyframes travelXRev {
    0% {
        right: 0;
    }

    100% {
        right: 100%;
    }
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .tz-adapt-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .tz-adapt-terminal {
        height: 400px;
        /* Un poco más chica en celular */
    }

    /* Achicamos la expansión matemática para que no se salga de la pantalla en móviles */
    .tz-adapt-terminal:hover .tz-node-1 {
        transform: translate(-120px, -100px);
    }

    .tz-adapt-terminal:hover .tz-node-2 {
        transform: translate(10px, -100px);
    }

    .tz-adapt-terminal:hover .tz-node-3 {
        transform: translate(10px, 60px);
    }

    .tz-adapt-terminal:hover .tz-node-4 {
        transform: translate(-120px, 60px);
    }

    .tz-line-top {
        top: calc(50% - 100px);
        left: calc(50% - 55px);
    }

    .tz-line-right {
        top: calc(50% - 75px);
        left: calc(50% + 75px);
    }

    .tz-line-bottom {
        top: calc(50% + 60px);
        right: calc(50% - 55px);
    }

    .tz-adapt-terminal:hover .tz-line-top {
        width: 130px;
    }

    .tz-adapt-terminal:hover .tz-line-right {
        height: 135px;
    }

    .tz-adapt-terminal:hover .tz-line-bottom {
        width: 130px;
    }

    .tz-node {
        width: 100px;
        padding: 8px 0;
    }

    .tz-node-text {
        font-size: 0.7rem;
    }
}

/* =================================================================
   SECCIÓN 6: CIERRE (Alineado a la Izquierda, Limpio y Animado)
   ================================================================= */

.tz-outro-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* Al sacar el justify-content: center, el contenido respeta el margen izquierdo de la grilla */
    padding: 100px 5%;
    border-top: none;
    overflow: hidden;
}

/* --- EL FONDO ANIMADO --- */
.tz-outro-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.tz-outro-bg {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-image: url('../img/sustentabilidad.webp');
    background-position: center bottom;
    background-size: cover;
    filter: none;
    animation: natureBreathe 20s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes natureBreathe {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.25) translate(-4%, -5%);
    }
}

/* --- TEXTO FLOTANTE (Alineación Izquierda, Sin Sombras) --- */
.tz-outro-grid {
    position: relative;
    z-index: 5;
    width: 100%;
    /* Toma todo el ancho del container-limit para empezar desde la izquierda */
}

.tz-outro-content {
    max-width: 850px;
    text-align: left;
    /* Letras alineadas a la izquierda */
}

.tz-outro-content .tz-hero-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.1;
}

.tz-outro-content p {
    color: #ffffff;
    font-weight: 500;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* --- FRASE DE CIERRE (Animación Lenta y Emocional) --- */
.tz-outro-quote {
    margin-top: 5rem;

    /* Estado inicial: invisible y un poco más abajo */
    opacity: 0;
    transform: translateY(40px);
    /* Transición muy suave y lenta de 1.5 segundos */
    transition: opacity 1.5s ease, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cuando hacés scroll y el JS detecta la frase, se dispara esto: */
.tz-outro-quote.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
    /* Espera medio segundo a que termines de leer el párrafo de arriba */
}

.tz-outro-quote p {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--accent-ia, #5BC0EB);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0;

    /* Le agregamos una barra lateral sutil para anclarla al margen izquierdo */
    border-left: 4px solid var(--accent-ia, #5BC0EB);
    padding-left: 20px;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 768px) {
    .tz-outro-section {
        padding: 80px 5%;
    }

    .tz-outro-content .tz-hero-title {
        font-size: 2.2rem;
    }

    .tz-outro-quote {
        margin-top: 3.5rem;
    }

    .tz-outro-quote p {
        font-size: 1.5rem;
        padding-left: 15px;
    }
}


/* =================================================================
   14. SECCIÓN: INFORMACIÓN PARA DECISIONES (DASHBOARD TRAZABILIDAD)
   ================================================================= */
.tz-data-section {
    background-color: var(--bg-primary);
    padding: 120px 5%;
    border-top: none;
}

.tz-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* --- TABLERO DERECHO (CONSOLA) --- */
.tz-data-board {
    background-color: #050505;
    border: 2px solid #1f1f1f;
    clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
    padding: 50px 40px;
    position: relative;
    transition: border-color 0.4s ease;
}

.tz-data-board:hover {
    border-color: #333333;
}

/* Cabecera del tablero */
.tz-board-header {
    font-family: 'Outfit', sans-serif;
    color: #888888;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 15px;
}

.tz-blinking-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-ia, #5BC0EB);
    border-radius: 50%;
    animation: blinkData 1.5s infinite;
}

@keyframes blinkData {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 8px var(--accent-ia, #5BC0EB);
    }

    50% {
        opacity: 0.2;
        box-shadow: none;
    }
}

/* --- FILAS INTERACTIVAS (HOVER) --- */
.tz-data-row {
    border-bottom: 1px solid #1f1f1f;
    padding: 25px 0;
    cursor: crosshair;
}

.tz-data-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tz-row-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tz-row-id {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    color: #222222;
    font-size: 1.8rem;
    transition: color 0.3s ease;
}

.tz-data-row:hover .tz-row-id {
    color: var(--accent-ia, #5BC0EB);
}

.tz-row-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tz-data-row:hover .tz-row-title {
    transform: translateX(10px);
}

/* --- CONTENIDO EXPANDIBLE --- */
.tz-row-reveal {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, margin-top 0.3s ease;
}

.tz-data-row:hover .tz-row-reveal {
    max-height: 180px;
    opacity: 1;
    margin-top: 15px;
}

.tz-bar-track {
    width: 100%;
    height: 3px;
    background-color: #1a1a1a;
    margin: 15px 0 20px 0;
    position: relative;
}

.tz-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--accent-ia, #5BC0EB);
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s;
}

.tz-data-row:hover .tz-bar-fill {
    width: var(--fill-width);
    box-shadow: 0 0 10px rgba(91, 192, 235, 0.5);
}

.tz-row-reveal p {
    font-family: 'Manrope', sans-serif;
    color: #A0AAB9;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* --- RESPONSIVE MÓVIL (DASHBOARD) --- */
@media (max-width: 1024px) {
    .tz-data-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .tz-data-board {
        padding: 40px 25px;
    }

    .tz-row-title {
        font-size: 1.3rem;
    }
}

/* =================================================================
   16. PÁGINA OPERATIVA: MANIFIESTO (REVERSE ZOOM)
   ================================================================= */

/* La sección es alta para que tengas recorrido de scroll */
.op-zoom-section {
    position: relative;
    height: 250dvh;
    /* dvh evita los saltos de la barra del navegador */
    background-color: var(--bg-primary);
}

/* El contenedor anclado a la pantalla */

.op-sticky-zoom {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100dvh;
    /* dvh en lugar de vh */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 5%;
}

/* --- NUEVO DISEÑO DEL TÍTULO VANGUARDISTA --- */
.op-zoom-title {
    position: absolute;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(4rem, 16vw, 15rem);
    /* Dinámico: gigante en PC, adaptable en móvil */
    font-weight: 900;
    color: #ffffff;
    /* Blanco sólido, sin contornos huecos */
    text-transform: uppercase;
    letter-spacing: -3px;
    /* Letras más juntas para impacto corporativo */
    margin: 0;
    line-height: 1;
    z-index: 10;
    will-change: transform;
    text-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    /* Sombra para que flote sobre el texto que aparece */
}

/* --- CONTENEDOR DEL TEXTO NARRATIVO --- */
.op-zoom-content {
    max-width: 850px;
    /* Ancho de lectura ideal, nunca toca los bordes */
    width: 100%;
    margin: 0 auto;
    opacity: 0;
    /* Oculto de arranque, el JS lo hace aparecer */
    z-index: 5;
    padding-top: 20vh;
    /* Espacio para que el título descanse arriba */
    text-align: center;
    will-change: opacity, transform;
}

.op-paragraph {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: #A0AAB9;
    /* Gris elegante */
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Línea sutil para separar la conclusión */
.op-separator-line {
    width: 60px;
    height: 2px;
    background-color: var(--accent-ia);
    margin: 3rem auto;
}

/* Párrafo final (El "Punchline") */
.op-paragraph-strong {
    font-family: 'Manrope', sans-serif;
    color: #ffffff;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    /* Un poco más grande */
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* =================================================================
   RESPONSIVE MÓVIL: OPERATIVA (PRIORIDAD LEGIBILIDAD)
   ================================================================= */
@media (max-width: 768px) {

    /* 1. Quitamos la altura gigante de scroll */
    .op-zoom-section {
        height: auto !important;
        padding: 60px 0;
    }

    /* 2. Matamos el "Sticky" para que sea un bloque normal */
    .op-sticky-zoom {
        position: relative !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0 20px;
    }

    /* 3. Título en flujo normal (Deja de aplastar al texto) */
    .op-zoom-title {
        position: relative !important;
        font-size: clamp(2.5rem, 12vw, 3.5rem) !important;
        /* Tamaño lógico */
        transform: none !important;
        /* Anula el movimiento JS */
        margin-bottom: 30px !important;
        text-align: center;
        text-shadow: none !important;
    }

    /* 4. Texto 100% visible, sin esperas */
    .op-zoom-content {
        position: relative !important;
        opacity: 1 !important;
        /* Siempre visible */
        transform: none !important;
        /* Sin levitación */
        padding-top: 0 !important;
        width: 100%;
    }

    /* 5. Colores más brillantes para que no se vea tenue */
    .op-paragraph {
        font-size: 1rem !important;
        color: #E2E8F0 !important;
        /* Un gris casi blanco, mucho más legible */
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    .op-paragraph-strong {
        font-size: 1.15rem !important;
        color: #ffffff !important;
    }
}

/* =================================================================
   17. PÁGINA OPERATIVA: ANTICIPACIÓN (VANGUARDIA MINIMALISTA)
   ================================================================= */

.op-anticipation-section {
    position: relative;
    background-color: var(--bg-primary);
    /* Negro puro */
    /* MÁRGENES GENEROSOS: 150px arriba/abajo, 8% a los costados para que respire */
    padding: 150px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* --- FONDO: EL HAZ DE CLARIDAD --- */
/* Un degradado inmenso que se mueve lento como una sombra de luz */
.op-light-sweep-bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(91, 192, 235, 0.03) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
    animation: slowSweep 15s ease-in-out infinite alternate;
}

@keyframes slowSweep {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(10%, 10%) scale(1.2);
    }
}

/* Línea de progresión hacia el futuro (Minimalista) */
.op-vertical-timeline {
    position: absolute;
    top: 0;
    left: 10%;
    /* Línea sutil en el lado izquierdo */
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    z-index: 2;
}

.op-timeline-glow {
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 150px;
    background: linear-gradient(to bottom, transparent, var(--accent-ia), transparent);
    animation: timelineDrop 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes timelineDrop {
    0% {
        transform: translateY(-150px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateY(1500px);
        opacity: 0;
    }
}

/* --- CONTENIDO (GRILLA ASIMÉTRICA Y LIMPIA) --- */
.op-ant-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    /* Limitamos el ancho para que no se estire demasiado en monitores gigantes */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* Columna derecha un poco más ancha */
    gap: 100px;
    /* Mucho aire entre el título y el texto */
    align-items: start;
}

/* Columna Izquierda */
.op-ant-title {
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    line-height: 1.1;
    margin-bottom: 20px;
}

/* Columna Derecha */
.op-ant-lead {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: #ffffff;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 40px;
}

.op-divider-clean {
    width: 40px;
    height: 2px;
    background-color: var(--accent-ia);
    margin-bottom: 40px;
}

.op-body-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    color: #A0AAB9;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 700px;
    /* Evita que el texto sea infinitamente largo y canse la vista */
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .op-anticipation-section {
        padding: 100px 6%;
        /* En tablet/celular mantenemos el 6% de margen seguro */
    }

    .op-ant-grid {
        grid-template-columns: 1fr;
        /* Una sola columna */
        gap: 60px;
    }

    .op-vertical-timeline {
        left: 6%;
        /* Acompañamos el margen */
    }
}

/* =================================================================
   18. SECCIÓN QUIÉNES SOMOS: HERO PROPÓSITO (VANGUARDIA Y LÍNEAS)
   ================================================================= */

.qs-purpose-section {
    position: relative;
    background: radial-gradient(circle at top right, #0e1e38 0%, #050a12 100%);
    min-height: 85vh;
    padding: 180px 8% 120px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* LUZ AMBIENTAL (Suave, sin bordes) */
.qs-ambient-glow {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(91, 192, 235, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* --- ESTRUCTURA ARQUITECTÓNICA DE LÍNEAS (Chau puntos) --- */
.qs-hero-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 1. Líneas Verticales y Horizontales (El Plano Estructural) */
.layer-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Usamos CSS para dibujar líneas exactas de 1px */
    background-image:
        /* Línea Vertical Izquierda (Ancla el texto y le da marco) */
        linear-gradient(to right, transparent 15%, rgba(91, 192, 235, 0.15) 15%, rgba(91, 192, 235, 0.15) calc(15% + 1px), transparent calc(15% + 1px)),
        /* Línea Vertical Derecha (Cierra el encuadre lejos) */
        linear-gradient(to right, transparent 88%, rgba(255, 255, 255, 0.05) 88%, rgba(255, 255, 255, 0.05) calc(88% + 1px), transparent calc(88% + 1px)),
        /* Línea Horizontal Superior (Techo sutil) */
        linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.05) calc(20% + 1px), transparent calc(20% + 1px));
}

/* 2. Círculo de profundidad (Para romper un poco tanta recta) */
.layer-circle {
    position: absolute;
    top: -15vh;
    right: -10vw;
    width: 70vw;
    height: 70vw;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

/* 3. La Línea Principal Inferior (Base del diseño) */
.layer-line {
    position: absolute;
    bottom: 25%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(91, 192, 235, 0.3) 15%, rgba(91, 192, 235, 0.05) 80%, transparent 100%);
}

/* 4. El Nodo Técnico (Donde se cruzan la línea inferior y la vertical) */
.layer-line::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 15%;
    /* Alineado exactamente con la línea vertical izquierda */
    width: 7px;
    height: 7px;
    border: 1px solid var(--accent-ia);
    /* Color Cyan */
    background-color: #050a12;
    transform: translateX(-3px);
}

/* --- CONTENEDOR DE LECTURA --- */
.qs-content-wrapper {
    position: relative;
    z-index: 5;
    max-width: 950px;
    width: 100%;
}

/* --- CABECERA --- */
.qs-header {
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.qs-header::before {
    content: 'ADN CORPORATIVO';
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: var(--accent-ia);
    font-weight: 600;
    margin-bottom: 20px;
}

.qs-accent-line {
    width: 80px;
    height: 3px;
    background-color: var(--accent-ia);
    margin-bottom: 20px;
    border-radius: 2px;
}

.qs-title {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: clamp(3.5rem, 6vw, 5rem);
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 0;
    line-height: 1.05;
}

/* --- CUERPO DEL TEXTO --- */
.qs-body {
    border-left: 2px solid;
    border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent) 1 100%;
    padding-left: 40px;
    margin-left: 5px;
}

.qs-lead {
    font-family: var(--font-body);
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    color: #ffffff;
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 30px;
}

.qs-text {
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    color: #cbd5e1;
    line-height: 1.8;
    font-weight: 300;
    margin: 0;
}

/* --- RESPONSIVE MÓVIL (CORREGIDO Y BLINDADO) --- */
@media (max-width: 768px) {

    /* 1. Ajuste de espaciado general */
    .qs-purpose-section {
        padding: 100px 6% 80px 6%;
        /* Reducimos paddings gigantes para no dejar tanto vacío */
        min-height: auto;
    }

    /* 2. Limpieza de elementos decorativos que rompen el ancho del celular */
    .layer-grid {
        /* Dejamos solo la línea superior sutil, sin líneas laterales que amontonen el texto */
        background-image: linear-gradient(to bottom, transparent 15%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.05) calc(15% + 1px), transparent calc(15% + 1px));
    }

    .layer-circle,
    .layer-line {
        /* Apagamos el círculo y la línea inferior cruzada. 
           En PC dan profundidad, en celular generan scroll horizontal indeseado y chocan con el texto. */
        display: none !important;
    }

    /* 3. Textos, espaciados y legibilidad */
    .qs-header {
        margin-bottom: 30px;
    }

    .qs-header::before {
        letter-spacing: 2px;
        /* Reducimos de 4px a 2px para que no desborde en pantallas muy angostas */
        font-size: 0.8rem;
        margin-bottom: 15px;
    }

    .qs-title {
        font-size: clamp(2.2rem, 9vw, 3rem);
        /* Escala fluido según el ancho del celular */
        line-height: 1.15;
        word-wrap: break-word;
        /* Previene cortes de palabras largas */
    }

    /* 4. Estructura de lectura (Cuerpo del texto) */
    .qs-body {
        border-left: none;
        /* Quitamos la línea lateral como tenías previsto */
        padding-left: 0;
        margin-left: 0;
    }

    .qs-lead {
        font-size: 1.15rem;
        /* Tamaño súper cómodo para lectura móvil */
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .qs-text {
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* =================================================================
   19. SECCIÓN QUIÉNES SOMOS: HISTORIA Y TARJETA INTERACTIVA
   ================================================================= */

.qs-who-section {
    position: relative;
    background-color: #0a1526;
    padding: 120px 8%;
    overflow: hidden;
}

/* --- GRILLA ASIMÉTRICA --- */
.qs-who-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}

/* --- COLUMNA DE TEXTO --- */
.qs-who-title {
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: #ffffff;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.qs-who-p {
    font-family: var(--font-body);
    font-size: clamp(1.15rem, 1.5vw, 1.3rem);
    color: #cbd5e1;
    line-height: 1.8;
    font-weight: 300;
    margin-bottom: 25px;
}

.qs-divider-clean {
    width: 60px;
    height: 2px;
    background-color: var(--accent-ia);
    margin: 40px 0;
}

.qs-who-p-strong {
    font-family: var(--font-body);
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    color: #ffffff;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* --- ENMARCADO ARQUITECTÓNICO (FONDO) --- */
.qs-card-frame-wrapper {
    position: relative;
    width: 100%;
    z-index: 5;
}

/* 1. Trama de puntos asomando por abajo a la derecha */
.qs-frame-dots {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 70%;
    height: 70%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 20px 20px;
    z-index: 0;
    border-radius: 6px;
    transition: all 0.8s ease;
}

/* 2. Marco de línea sutil asomando por arriba a la izquierda */
.qs-frame-lines {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(91, 192, 235, 0.3);
    /* Cyan apagado */
    border-radius: 6px;
    z-index: 0;
    transition: all 0.8s ease;
}

/* Movimiento del marco al hacer hover */
.qs-card-frame-wrapper:hover .qs-frame-lines {
    top: -10px;
    left: -10px;
    border-color: rgba(91, 192, 235, 0.6);
}

.qs-card-frame-wrapper:hover .qs-frame-dots {
    bottom: -20px;
    right: -20px;
}

/* --- LA TARJETA EN SÍ --- */
.qs-interactive-card {
    position: relative;
    z-index: 2;
    /* Fundamental para tapar los fondos */
    width: 100%;
    aspect-ratio: 4 / 5;
    /* Formato retrato vertical */
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #0a1526;
    /* Color de fondo por si la imagen tarda en cargar */
}

/* Imagen de fondo */
.qs-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
}

/* Contenedor del texto invisible */
.qs-card-keywords {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Todo centrado */
    gap: 25px;
    padding: 40px;
    pointer-events: none;
    /* Para que el mouse no se trabe al pasar por las letras */
}

/* Diseño de las palabras */
.qs-kw-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    font-weight: 300;
    /* Letra ultra fina */
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;

    /* Estado inicial: invisible, bajado y desenfocado */
    opacity: 0;
    transform: translateY(15px);
    filter: blur(4px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- MAGIA AL HOVER (Fluidez absoluta) --- */
.qs-interactive-card:hover .qs-card-bg {
    filter: blur(10px) brightness(0.35);
    transform: scale(1.05);
}

.qs-interactive-card:hover .qs-kw-text {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Entrada en cascada */
.qs-interactive-card:hover .kw-1 {
    transition-delay: 0.1s;
}

.qs-interactive-card:hover .kw-2 {
    transition-delay: 0.2s;
}

.qs-interactive-card:hover .kw-3 {
    transition-delay: 0.3s;
}

.qs-interactive-card:hover .kw-4 {
    transition-delay: 0.4s;
}

.qs-interactive-card:hover .kw-5 {
    transition-delay: 0.5s;
}

/* =================================================================
   RESPONSIVE MÓVIL: QUIÉNES SOMOS (CORREGIDO)
   ================================================================= */
@media (max-width: 900px) {

    /* 1. Reducimos el padding gigante de PC */
    .qs-who-section {
        padding: 80px 6%;
    }

    /* 2. LA CLAVE: Pasar de 2 columnas a 1 columna apilada */
    .qs-who-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        /* Separación cómoda entre el texto y la foto */
    }

    /* 3. Textos centrados y ajustados para lectura móvil */
    .qs-who-title {
        font-size: clamp(2.2rem, 8vw, 2.8rem);
        text-align: center;
        margin-bottom: 20px;
        word-wrap: break-word;
        /* Evita que el título rompa la pantalla */
    }

    .qs-who-p {
        font-size: 1.1rem;
        /* Apenas más chico para mejor lectura */
        text-align: center;
    }

    .qs-who-p-strong {
        font-size: 1.25rem;
        text-align: center;
    }

    .qs-divider-clean {
        margin: 30px auto;
        /* Centramos la línea separadora */
    }

    /* 4. La Tarjeta / Foto (Ahora sí se va a ver grande e imponente) */
    .qs-card-frame-wrapper {
        width: 90%;
        /* Le damos un pequeño margen para que los marcos no toquen el borde de la pantalla */
        max-width: 450px;
        margin: 0 auto;
        /* La centramos en la pantalla */
    }

    .qs-interactive-card {
        aspect-ratio: 4 / 5;
        /* Mantenemos el formato retrato original que es mucho más elegante que el cuadrado (1/1) */
    }

    /* 5. Marcos decorativos (Ajustados para no generar scroll horizontal) */
    .qs-frame-dots {
        bottom: -15px;
        right: -15px;
        background-size: 15px 15px;
    }

    .qs-frame-lines {
        top: -10px;
        left: -10px;
    }

    /* 6. Textos ocultos de la foto (Al tocarla con el dedo aparecerán) */
    .qs-kw-text {
        font-size: 1rem;
        letter-spacing: 3px;
    }
}

/* =================================================================
   20. SECCIÓN QUIÉNES SOMOS: DIFERENCIAL (LINE ART CORPORATIVO)
   ================================================================= */

.qs-diff-section {
    position: relative;
    background-color: #0a1526;
    /* Continuidad perfecta con el fondo de arriba */
    padding: 120px 8%;
    overflow: hidden;
}

/* Grilla Asimétrica (Ahora el dibujo tiene más espacio) */
.qs-diff-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* 1.2 para el dibujo, 1 para el texto */
    gap: 80px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
}

/* --- GRÁFICO VECTORIAL (EL DIBUJO ESTILO ACCENTURE) --- */
.qs-diff-graphic {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qs-line-art-svg {
    width: 100%;
    max-width: 700px;
    /* ¡Mucho más grande y con más impacto! */
    height: auto;
    animation: gentleFloat 6s ease-in-out infinite alternate;
}

/* Animaciones de las piezas sólidas internas */
.float-fast {
    animation: floatParts 4s ease-in-out infinite alternate;
}

.float-slow {
    animation: floatParts 7s ease-in-out infinite alternate-reverse;
}

@keyframes gentleFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15px);
    }
}

@keyframes floatParts {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-10px) rotate(3deg);
    }
}

/* --- COLUMNA DE TEXTO (Hereda la tipografía de la tarjeta) --- */
/* (Reutilizamos las clases qs-who-title, qs-who-p, etc., así que el texto ya tiene estilo) */

/* =================================================================
   RESPONSIVE MÓVIL: EL DIFERENCIAL (GRÁFICO Y TEXTO)
   ================================================================= */
@media (max-width: 900px) {

    /* 1. Mantenemos la consistencia de márgenes con la sección de arriba */
    .qs-diff-section {
        padding: 80px 6%;
    }

    /* 2. Pasamos a 1 columna y unificamos la separación */
    .qs-diff-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        /* Usamos 50px igual que en la tarjeta anterior para mantener el mismo ritmo visual */
    }

    /* 3. El Gráfico Vectorial */
    .qs-diff-graphic {
        order: -1;
        /* Excelente decisión: en móvil el dibujo va arriba del texto */
        width: 100%;
        max-width: 380px;
        /* Reducimos a 380px para garantizar que tenga "aire" a los costados y no se sienta apretado */
        margin: 0 auto;
    }

    /* 4. Suavizamos la animación para celulares */
    .qs-line-art-svg {
        /* Al hacerla un poco más lenta (8s en vez de 6s) evitamos que el celular gaste batería de más y el efecto se siente más premium y menos "nervioso" en una pantalla chica */
        animation: gentleFloat 8s ease-in-out infinite alternate;
    }
}

/* =================================================================
   21. SECCIÓN QUIÉNES SOMOS: MERCADO (ESTÁTICA E IMPONENTE)
   ================================================================= */

.qs-market-section {
    position: relative;
    /* MISMO FONDO QUE LA SECCIÓN ANTERIOR PARA PAZ VISUAL */
    background-color: #0a1526;
    padding: 150px 8%;
    /* Aumentamos padding vertical para dar más aire */
    overflow: hidden;
}

/* Grilla (Ahora el gráfico tiene más peso visual) */
.qs-market-grid {
    display: grid;
    /* 1fr para texto, 1.2fr para el gráfico (más grande) */
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    /* Mucho aire entre columnas */
    align-items: center;
    max-width: 1400px;
    /* Aumentamos el ancho máximo de la grilla */
    margin: 0 auto;
}

/* --- COLUMNA DEL GRÁFICO (DIBUJO ESTÁTICO) --- */
.qs-market-graphic {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qs-market-svg-static {
    width: 100%;
    /* MUCHO MÁS GRANDE Y PRESENTE */
    max-width: 700px;
    height: auto;
    /* SIN ANIMACIONES DE MOVIMIENTO */
    display: block;
}

/* =================================================================
   RESPONSIVE MÓVIL: EL MERCADO (DIBUJO AL COSTADO)
   ================================================================= */
@media (max-width: 900px) {
    .qs-market-section {
        padding: 80px 4%;
        /* Achicamos los márgenes laterales al 4% para ganar espacio vital de pantalla */
    }

    .qs-market-grid {
        /* MAGIA: Mantenemos las dos columnas. 
           1.5fr para el texto (tiene más peso) y 1fr para el gráfico (se adapta al resto) */
        grid-template-columns: 1.5fr 1fr;
        gap: 15px;
        /* Los acercamos bastante porque la pantalla es angosta */
        align-items: center;
    }

    .qs-market-graphic {
        order: 0;
        /* Anulamos el order:-1 para que se quede a la derecha como en PC */
        width: 100%;
        justify-content: flex-end;
        /* Lo recostamos hacia la derecha */
        margin: 0;
    }

    .qs-market-svg-static {
        max-width: 140px;
        /* Tamaño máximo para que no ahogue al texto */
        width: 100%;
    }

    /* --- PARCHE DE TEXTO SOLO PARA ESTA SECCIÓN EN MÓVIL --- */
    /* Como el texto ahora tiene solo la mitad de la pantalla, achicamos la fuente */
    .qs-market-grid .qs-who-title {
        font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important;
        /* Más chico para que no se corte */
        text-align: left !important;
        /* Forzamos a la izquierda para que no choque con el dibujo */
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
    }

    .qs-market-grid .qs-who-p,
    .qs-market-grid .qs-who-p-strong {
        font-size: 0.95rem !important;
        /* Letra legible pero compacta */
        text-align: left !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }

    .qs-market-grid .qs-divider-clean {
        margin: 20px 0 !important;
        /* Achicamos y alineamos a la izquierda el separador */
    }
}


/* =================================================================
   22. SECCIÓN QUIÉNES SOMOS: COMPROMISO (MONOLITO ARQUITECTÓNICO)
   ================================================================= */

.qs-comm-section {
    position: relative;
    background-color: #0a1526;
    /* Continuidad del lienzo azul profundo */
    padding: 150px 8%;
    overflow: hidden;
}

/* Grilla de 3 Columnas (Texto - Imagen - Texto) */
.qs-comm-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Los lados se adaptan, el centro es fijo */
    gap: 80px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- COLUMNA CENTRAL: EL CORTE (LA IMAGEN) --- */
.qs-comm-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qs-cutaway-frame {
    position: relative;
    padding: 15px;
    /* Espacio para que respiren las esquinas técnicas */
}

/* Esquinas que simulan un visor o plano de arquitectura */
.qs-frame-corner {
    position: absolute;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.5s ease;
}

.top-left {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.bottom-right {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* La Imagen Pilar */
.qs-cutaway-img {
    width: clamp(200px, 15vw, 280px);
    /* Delgada y estilizada */
    height: clamp(500px, 60vh, 700px);
    /* Muy alta */
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    /* Efecto inicial "Plano Técnico": Oscura, monocromática azulada */
    filter: sepia(100%) hue-rotate(180deg) brightness(0.3) contrast(1.2);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: crosshair;
}

/* --- INTERACCIÓN AL PASAR EL MOUSE --- */
/* 1. La imagen revela la realidad (color natural) y se acerca */
.qs-cutaway-frame:hover .qs-cutaway-img {
    filter: sepia(0%) hue-rotate(0deg) brightness(0.8) contrast(1.1);
    transform: scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* 2. Las esquinas técnicas se expanden sutilmente */
.qs-cutaway-frame:hover .top-left {
    top: -5px;
    left: -5px;
    border-color: var(--accent-ia);
}

.qs-cutaway-frame:hover .bottom-right {
    bottom: -5px;
    right: -5px;
    border-color: var(--accent-ia);
}

/* --- TEXTOS (Heredan el estilo pulcro de antes) --- */
.qs-comm-left {
    padding-right: 20px;
}

.qs-comm-right {
    padding-left: 20px;
}

/* =================================================================
   RESPONSIVE MÓVIL: COMPROMISO (IMAGEN PANORÁMICA ARRIBA)
   ================================================================= */
@media (max-width: 900px) {

    /* 1. Mantenemos el ritmo de márgenes de toda la página */
    .qs-comm-section {
        padding: 80px 6%;
    }

    /* 2. Pasamos a 1 columna apilada */
    .qs-comm-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        /* Mismo aire que en las secciones anteriores */
    }

    /* 3. La columna central (Imagen) pasa a ser el encabezado */
    .qs-comm-center {
        order: -1;
        width: 100%;
    }

    /* Ajustamos el marco para que no desborde */
    .qs-cutaway-frame {
        width: 100%;
        max-width: 500px;
        /* Tope máximo para que no quede grotesca en tablets */
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* 4. Transformación de la Imagen (De Pilar a Panorámica) */
    .qs-cutaway-img {
        width: 100% !important;
        /* Mata el clamp() restrictivo de la PC */
        min-width: 0 !important;
        /* Elimina el riesgo de scroll horizontal */
        height: auto !important;
        aspect-ratio: 4 / 3;
        /* Le damos una proporción rectangular perfecta para celulares */
    }

    /* 5. Limpiamos los paddings laterales del texto que solo servían en PC */
    .qs-comm-left,
    .qs-comm-right {
        padding: 0;
        /* Como usamos las clases qs-who-title de las secciones anteriores, 
           el texto ya se va a centrar automáticamente de forma prolija. */
    }
}

/* =================================================================
   23. SECCIÓN QUIÉNES SOMOS: EL GRAN CIERRE (PUNTO MEDIO EDITORIAL)
   ================================================================= */

.qs-finale-section {
    position: relative;
    padding: 150px 8%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #000000;
}

/* --- FONDOS --- */
.ba-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: url('../img/buenosaires.webp');
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.ba-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Al sacar la caja de texto, estiramos un poco más el fundido oscuro 
       para que las letras de la derecha se lean perfecto sobre la ciudad */
    background: linear-gradient(90deg, #000000 45%, rgba(0, 0, 0, 0.85) 65%, transparent 85%);
}

/* --- ESTRUCTURA GRID --- */
.finale-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
    width: 100%;
}

/* --- COLUMNA IZQUIERDA (Visión) --- */
.finale-content {
    max-width: 600px;
}

/* TÍTULO EN MAYÚSCULAS Y CON PRESENCIA */
.finale-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    /* Mayúsculas forzadas */
    letter-spacing: 2px;
    /* Separación elegante */
    margin-bottom: 2.5rem;
}

.finale-body p {
    font-family: 'Manrope', sans-serif;
    font-size: 1.3rem;
    line-height: 1.7;
    color: #000000;
    /* Negro puro y sólido */
    margin-bottom: 1.5rem;
    font-weight: 700;
    /* Lo subimos de 600 a 700 para que tenga más "cuerpo" y contraste mejor */
    opacity: 1;
    /* Blindaje extra por si alguna otra regla te lo estaba haciendo transparente */
}

.finale-punchline {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.finale-punchline h3 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 400;
    color: #ffffff;
    line-height: 1.5;
    margin-bottom: 10px;
}

/* --- COLUMNA DERECHA (Texto libre, sin caja) --- */
.letter-reveal-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    /* CHAU CAJA: Fondo transparente, sin blur, cero borde */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border: none;
}

.letter-block {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    /* Peso 300: Muy fino y elegante para que no se vea "básico" */
    font-weight: 300;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
}

.letter-divider {
    width: 40px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 20px 0;
    opacity: 0;
}

/* Promesa */
.letter-promise {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    font-weight: 300;
    color: #cbd5e1;
    line-height: 1.6;
}

/* El Gran Remate (Fino y sereno) */
.letter-final {
    font-family: 'Manrope', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: #ffffff;
    margin-top: 15px;
}

/* --- LA ANIMACIÓN --- */
.js-scroll-reveal.is-visible .letter-block,
.js-scroll-reveal.is-visible .letter-divider {
    animation: revealLetter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.line-1 {
    animation-delay: 0.2s !important;
}

.line-2 {
    animation-delay: 0.8s !important;
}

.line-3 {
    animation-delay: 1.4s !important;
}

.letter-divider {
    animation-delay: 2.0s !important;
}

.line-4 {
    animation-delay: 2.4s !important;
}

.line-5 {
    animation-delay: 3.5s !important;
}

@keyframes revealLetter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================================================================
   RESPONSIVE: TABLETS Y CELULARES (TEXTOS SOBRE IMAGEN)
   ================================================================= */

/* --- TABLETS (Hasta 1024px) --- */
@media (max-width: 1024px) {
    .finale-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    /* La foto cubre toda la sección, pero la enfocamos en la parte de abajo */
    .ba-bg {
        width: 100%;
        height: 100%;
        top: 0;
        background-position: bottom center;
        background-size: cover;
    }

    /* Degradado de arriba (negro puro) hacia abajo (transparente) */
    .ba-overlay {
        background: linear-gradient(180deg, #000000 20%, rgba(0, 0, 0, 0.85) 60%, rgba(0, 0, 0, 0.3) 100%);
    }
}

/* --- CELULARES (Hasta 768px) --- */
@media (max-width: 768px) {

    /* 1. Ajuste de sección general */
    .qs-finale-section {
        padding: 80px 6% 80px 6%;
        min-height: 100vh;
        /* Le damos altura mínima para que haya recorrido de scroll */
    }

    /* 2. Textos Izquierda (Título y Párrafos iniciales) */
    .finale-title {
        font-size: clamp(2.2rem, 8vw, 2.8rem);
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    .finale-body p {
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
        color: #cbd5e1 !important;
        /* Gris claro para que resalte en el fondo oscuro */
        font-weight: 400;
    }

    .finale-punchline {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }

    .finale-punchline h3 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    /* 3. COLUMNA DERECHA (Las frases que caen sobre la imagen) */
    .letter-reveal-wrapper {
        margin-top: 3rem;
        /* Las separamos bien del texto superior */
        gap: 1.2rem;
        /* Espaciado ordenado y rítmico entre las frases */
    }

    /* Achicamos apenas las frases animadas para que entren las 5 holgadas en la pantalla del celu */
    .letter-block {
        font-size: clamp(1.2rem, 5vw, 1.5rem);
        line-height: 1.4;
    }

    /* Ajustes finos para la promesa y el remate */
    .letter-promise {
        font-size: 1.05rem;
        margin-top: 10px;
        /* Lo separamos un poco de la línea divisoria */
    }

    .letter-final {
        font-size: 1.15rem;
        font-weight: 600;
        /* Le damos más peso a la última frase para darle fuerza al cierre */
        color: #ffffff;
    }
}


/* =================================================================
   18. PÁGINA OPERATIVA: DASHBOARDS (NEGRO PURO E INTERACTIVO)
   ================================================================= */

.op-dash-section {
    position: relative;
    background-color: #000000;
    /* NEGRO ABSOLUTO */
    padding: 150px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Grilla (Homologada con Anticipación) */
.op-dash-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: center;
}

/* Título 100% Mayúsculas */
.op-dash-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.8rem);
    color: #ffffff;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    text-transform: uppercase;
    /* Forzado a mayúsculas */
    margin-bottom: 25px;
}

/* Textos heredados de anticipación */
.op-ant-lead {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: #ffffff;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 40px;
}

.op-divider-clean {
    width: 40px;
    height: 2px;
    background-color: var(--accent-ia);
    margin-bottom: 40px;
}

.op-body-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1.15rem;
    color: #A0AAB9;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 700px;
}

/* --- COLUMNA VISUAL: DASHBOARD INTERACTIVO --- */
.op-dash-visual-col {
    position: relative;
    width: 100%;
    padding: 20px 0;
}

/* Cristal oscuro */
.dash-glass-board {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}

/* --- LÓGICA DE PESTAÑAS (TABS CSS) --- */
.dash-radio {
    display: none;
}

.dash-tabs-menu {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.dash-tab {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.dash-tab:hover {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.03);
}

/* Activación de Pestañas */
#tab-ventas:checked~.dash-tabs-menu label[for="tab-ventas"] {
    color: var(--accent-ia);
    background: rgba(91, 192, 235, 0.1);
}

#tab-prod:checked~.dash-tabs-menu label[for="tab-prod"] {
    color: #9D4EDD;
    background: rgba(157, 78, 221, 0.1);
}

#tab-log:checked~.dash-tabs-menu label[for="tab-log"] {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

/* Mostrar contenido correspondiente */
.dash-panel {
    display: none;
}

#tab-ventas:checked~.panel-ventas {
    display: block;
    animation: dashFadeIn 0.5s ease forwards;
}

#tab-prod:checked~.panel-prod {
    display: block;
    animation: dashFadeIn 0.5s ease forwards;
}

#tab-log:checked~.panel-log {
    display: block;
    animation: dashFadeIn 0.5s ease forwards;
}

@keyframes dashFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- WIDGETS INTERNOS --- */
.dash-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.dash-widget {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 25px;
}

.w-header {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.w-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.w-bars {
    grid-column: 2 / 3;
}

.w-small {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Gráfico Circular */
.w-chart-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.w-circle-inner {
    width: 110px;
    height: 110px;
    background-color: #03060a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.w-circle-inner span {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    color: #fff;
    font-weight: 700;
}

/* Gráfico de Barras Animadas */
.bar-container {
    display: flex;
    gap: 10px;
    height: 60px;
    align-items: flex-end;
}

.bar-col {
    flex: 1;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.bar-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 2px;
    transform-origin: bottom;
    animation: barGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes barGrow {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(1);
    }
}

/* Métricas de texto */
.w-metric {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
}

.w-sub {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    color: #64748b;
    margin-top: 5px;
}

/* Colores Dinámicos (Ventas, Prod, Logística) */
.cyan-chart {
    background: conic-gradient(var(--accent-ia) 0% 68%, rgba(255, 255, 255, 0.05) 68% 100%);
}

.purple-chart {
    background: conic-gradient(#9D4EDD 0% 94%, rgba(255, 255, 255, 0.05) 94% 100%);
}

.white-chart {
    background: conic-gradient(#ffffff 0% 89%, rgba(255, 255, 255, 0.05) 89% 100%);
}

.cyan-fill {
    background-color: var(--accent-ia);
}

.purple-fill {
    background-color: #9D4EDD;
}

.white-fill {
    background-color: #ffffff;
}

.highlight-cyan {
    color: var(--accent-ia);
}

.highlight-purple {
    color: #9D4EDD;
}

.highlight-white {
    color: #ffffff;
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .op-dash-section {
        padding: 100px 6%;
    }

    .op-dash-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .dash-widget-grid {
        grid-template-columns: 1fr;
    }

    .w-large,
    .w-bars,
    .w-small {
        grid-column: 1 / 2;
    }

    .dash-tabs-menu {
        justify-content: center;
    }
}

/* =================================================================
   19. PÁGINA OPERATIVA: ORGANIGRAMA Y ROLES (JERARQUÍA CSS)
   ================================================================= */

.op-org-section {
    position: relative;
    /* Fondo que sale del negro puro hacia un azul corporativo abisal */
    background-color: #050a12;
    padding: 150px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Grilla Asimétrica (Gráfico a la izq, texto a la der) */
.op-org-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    /* 1.1fr para el gráfico, 1fr para el texto */
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: center;
}

/* --- COLUMNA VISUAL: EL ORGANIGRAMA VECTORIAL --- */
.op-org-visual-col {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.org-structure-svg {
    width: 100%;
    max-width: 500px;
    /* Tamaño ideal para que respire */
    height: auto;
    /* Leve flotación general del diagrama */
    animation: orgFloatGeneral 6s ease-in-out infinite alternate;
}

/* Animaciones del Diagrama */
.org-node-pulse-slow {
    transform-origin: 250px 80px;
    animation: orgPulse 4s infinite alternate;
}

.org-node-pulse-fast {
    transform-origin: 180px 380px;
    animation: orgPulse 2s infinite alternate;
}

.org-spin-bg {
    transform-origin: 250px 250px;
    animation: orgSpin 40s linear infinite;
}

/* El efecto de datos fluyendo por la línea Cyan */
.org-data-flow {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: orgFlowData 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes orgFloatGeneral {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-15px);
    }
}

@keyframes orgPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(157, 78, 221, 0.6));
    }
}

@keyframes orgSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes orgFlowData {
    0% {
        stroke-dashoffset: 600;
        opacity: 1;
    }

    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* --- COLUMNA DE TEXTO --- */
/* (Reutiliza las clases op-dash-title, op-ant-lead, etc. definidas en la sección anterior, 
   así que ya tiene el título en MAYÚSCULAS y las tipografías perfectas) */


/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .op-org-grid {
        gap: 60px;
    }
}

@media (max-width: 900px) {
    .op-org-section {
        padding: 100px 6%;
    }

    .op-org-grid {
        grid-template-columns: 1fr;
        /* Apilado en celulares */
        gap: 50px;
    }

    .op-org-visual-col {
        order: -1;
        /* El gráfico va arriba en pantallas chicas */
        max-width: 400px;
        margin: 0 auto;
    }
}

/* =================================================================
   20. PÁGINA OPERATIVA: CAPITAL HUMANO (ECUALIZADOR FLUIDO)
   ================================================================= */

.op-human-section {
    position: relative;
    /* Un azul noche casi negro, súper premium y elegante */
    background-color: #02060f;
    padding: 150px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Grilla */
.op-human-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
    align-items: center;
}

/* --- COLUMNA VISUAL: GRÁFICO DE EQUILIBRIO --- */
.op-human-visual-col {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.human-balance-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}

/* --- ANIMACIONES DE OPTIMIZACIÓN (100% FLUIDAS SIN CORTES) --- */
/* Aumentamos el tiempo a 8s para que el movimiento sea súper relajante */
.balance-group-1 {
    animation: seekBalance1 8s ease-in-out infinite;
}

.balance-group-2 {
    animation: seekBalance2 8s ease-in-out infinite;
}

.balance-group-3 {
    animation: seekBalance3 8s ease-in-out infinite;
}

/* Movimiento de péndulo suave: Empieza en 0, se descontrola, y vuelve a 0 perfecto */
@keyframes seekBalance1 {

    0%,
    100% {
        transform: translateX(0);
    }

    /* Reposo perfecto (Inicio y fin) */
    15% {
        transform: translateX(-35px);
    }

    /* Desvío fuerte a la izq */
    35% {
        transform: translateX(25px);
    }

    /* Desvío medio a la der */
    55% {
        transform: translateX(-10px);
    }

    /* Desvío suave a la izq */
    75%,
    90% {
        transform: translateX(0);
    }

    /* Se clava en el centro y hace una pausa */
}

@keyframes seekBalance2 {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(40px);
    }

    35% {
        transform: translateX(-20px);
    }

    55% {
        transform: translateX(15px);
    }

    75%,
    90% {
        transform: translateX(0);
    }
}

@keyframes seekBalance3 {

    0%,
    100% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-25px);
    }

    35% {
        transform: translateX(35px);
    }

    55% {
        transform: translateX(-15px);
    }

    75%,
    90% {
        transform: translateX(0);
    }
}

/* El nodo central humano y su aura de luz */
.human-core {
    animation: coreGlow 8s ease-in-out infinite;
}

.human-aura {
    animation: auraPulse 8s ease-out infinite;
    transform-origin: 250px 250px;
    /* Centro exacto del nodo en el SVG */
}

/* La luz brilla JUSTO cuando todo llega al centro (80%) */
@keyframes coreGlow {

    0%,
    65%,
    95%,
    100% {
        filter: drop-shadow(0 0 0 rgba(91, 192, 235, 0));
    }

    80% {
        filter: drop-shadow(0 0 25px rgba(91, 192, 235, 1));
    }

    /* Brillo máximo */
}

@keyframes auraPulse {

    0%,
    70% {
        transform: scale(1);
        opacity: 0;
    }

    75% {
        opacity: 0.8;
    }

    /* Aparece justo al estabilizarse */
    95%,
    100% {
        transform: scale(2.2);
        opacity: 0;
    }

    /* Se expande y desaparece suavemente */
}

/* Hilo conductor flotante */
.connecting-thread {
    animation: threadFloat 5s ease-in-out infinite alternate;
}

@keyframes threadFloat {
    0% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(4px);
    }
}

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .op-human-grid {
        gap: 60px;
    }
}

@media (max-width: 900px) {
    .op-human-section {
        padding: 100px 6%;
    }

    .op-human-grid {
        grid-template-columns: 1fr;
        /* Apilado */
        gap: 50px;
    }

    .op-human-visual-col {
        max-width: 400px;
        margin: 0 auto;
    }
}

/* =================================================================
   21. PÁGINA OPERATIVA: RENDIMIENTO (PERSONAS + DATOS)
   ================================================================= */

.op-perf-section {
    position: relative;
    background-color: #040812;
    /* Base ultra oscura y limpia */
    padding: 150px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Grilla (Invertida: Visual Izquierda, Texto Derecha) */
.op-perf-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    /* Le damos un poco más de aire al gráfico */
    grid-template-columns: 1.1fr 1fr;
    gap: 100px;
    align-items: center;
}

/* --- COLUMNA VISUAL: GRÁFICO SVG --- */
.op-perf-visual-col {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Lo alineamos un poco hacia el centro-izquierda */
    align-items: center;
}

.perf-data-svg {
    width: 100%;
    max-width: 480px;
    height: auto;
}

/* Animaciones de Flotación para cada Perfil (Desfasadas para que sea natural) */
.p-float-1 {
    animation: perfFloat 6s ease-in-out infinite alternate;
}

.p-float-2 {
    animation: perfFloat 7s ease-in-out infinite alternate-reverse;
}

.p-float-3 {
    animation: perfFloat 5s ease-in-out infinite alternate;
}

@keyframes perfFloat {
    0% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(5px);
    }
}

/* Animaciones de los Anillos de Progreso (Efecto Dashboard) */
/* Calculo del stroke-dasharray para r=45 -> 2 * PI * 45 = 282 approx */
.ring-anim-1 {
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    /* Empieza vacío */
    animation: fillRing1 3s cubic-bezier(0.25, 1, 0.5, 1) forwards infinite alternate;
}

.ring-anim-2 {
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    animation: fillRing2 3.5s cubic-bezier(0.25, 1, 0.5, 1) forwards infinite alternate;
}

.ring-anim-3 {
    stroke-dasharray: 282;
    stroke-dashoffset: 282;
    animation: fillRing3 4s cubic-bezier(0.25, 1, 0.5, 1) forwards infinite alternate;
}

/* Llenado dinámico: simula distintos niveles de rendimiento */
@keyframes fillRing1 {

    0%,
    20% {
        stroke-dashoffset: 282;
    }

    80%,
    100% {
        stroke-dashoffset: 42;
    }

    /* Se llena al ~85% */
}

@keyframes fillRing2 {

    0%,
    20% {
        stroke-dashoffset: 282;
    }

    80%,
    100% {
        stroke-dashoffset: 14;
    }

    /* Se llena al ~95% */
}

@keyframes fillRing3 {

    0%,
    20% {
        stroke-dashoffset: 282;
    }

    80%,
    100% {
        stroke-dashoffset: 98;
    }

    /* Se llena al ~65% */
}

/* Textos heredados de secciones anteriores (op-dash-title, op-ant-lead, etc.) */

/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .op-perf-grid {
        gap: 60px;
    }
}

@media (max-width: 900px) {
    .op-perf-section {
        padding: 100px 6%;
    }

    .op-perf-grid {
        grid-template-columns: 1fr;
        /* Se apila en 1 columna */
        gap: 60px;
    }

    .op-perf-visual-col {
        order: -1;
        /* El gráfico siempre pasa arriba en celular */
        justify-content: center;
        max-width: 350px;
        margin: 0 auto;
    }
}

/* =================================================================
   22. PÁGINA OPERATIVA: SOPORTE HR (ARTWORK VANGUARDISTA)
   ================================================================= */

.op-support-section {
    position: relative;
    /* Azul corporativo abisal, muy serio e institucional */
    background-color: #03060a;
    padding: 150px 8%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Grilla Asimétrica */
.op-support-grid {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    /* 1fr para texto, 1.2fr para el artwork (protagonismo visual) */
    grid-template-columns: 1fr 1.2fr;
    gap: 100px;
    align-items: center;
}

/* --- COLUMNA VISUAL: EL ARTWORK "ACCENTURE STYLE" --- */
.op-support-visual-col {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.artwork-accenture-svg {
    width: 100%;
    max-width: 550px;
    /* Tamaño generoso */
    height: auto;
}

/* Animaciones de la Matriz de Talento */
.art-matrix-group {
    /* Levitación orgánica general */
    animation: matrixFloat 8s ease-in-out infinite alternate;
}

.art-node-top {
    transform-origin: 300px 120px;
    animation: nodePulse 5s infinite;
}

.art-node-left {
    transform-origin: 150px 270px;
    animation: nodePulse 6s infinite 1s;
}

.art-node-right {
    transform-origin: 450px 270px;
    animation: nodePulse 6s infinite 2s;
}

@keyframes matrixFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

@keyframes nodePulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.05);
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    }
}

/* --- TEXTO (Hereda estilos anteriores) --- */


/* =================================================================
   23. PÁGINA OPERATIVA: CIERRE EMOCIONAL (FOTO AJEDREZ & CARTA)
   ================================================================= */

.op-closure-section {
    position: relative;
    /* CONFIGURACIÓN DE LA FOTO webp DE FONDO */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Le sumamos un desenfoque y oscurecimiento para asegurar lectura */
    backdrop-filter: blur(8px) brightness(0.6);
    -webkit-backdrop-filter: blur(8px) brightness(0.6);

    padding: 200px 8% 280px 8%;
    /* Mucho aire vertical para impacto dramático */
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* Capa de oscurecimiento manual para navegadores viejos y fundido a negro */
.op-closure-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente que oscurece la foto y funde a negro al final */
    background: linear-gradient(180deg, rgba(3, 6, 10, 0.7) 0%, rgba(3, 6, 10, 0.9) 70%, #000000 100%);
    z-index: 1;
}

.op-letter-wrapper {
    position: relative;
    z-index: 5;
    /* Por encima de la foto y el overlay */
    max-width: 850px;
    width: 100%;
    text-align: center;
    /* Alineación central para impacto emocional */
}

/* Estilo "Carta Escrita": Limpia, fina y humana */
.op-letter-paragraph {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    color: #e2e8f0;
    /* Un blanco roto cálido, no puro */
    font-weight: 300;
    /* Ultra fino */
    line-height: 1.9;
    /* Interlineado muy generoso para paz visual */
    margin-bottom: 25px;
    letter-spacing: 0.2px;
}

/* El último párrafo tiene una separación dramática */
.op-letter-paragraph:last-child {
    margin-bottom: 0;
    margin-top: 50px;
}


/* --- RESPONSIVE MÓVIL --- */
@media (max-width: 1024px) {
    .op-support-grid {
        gap: 60px;
    }
}

@media (max-width: 900px) {
    .op-support-section {
        padding: 100px 6%;
    }

    .op-support-grid {
        grid-template-columns: 1fr;
        /* Apilado */
        gap: 50px;
    }

    .op-support-visual-col {
        order: -1;
        /* Gráfico arriba en celular */
        max-width: 450px;
        margin: 0 auto;
    }

    .op-closure-section {
        padding: 140px 6% 200px 6%;
    }

    .op-letter-paragraph {
        font-size: 1.15rem;
        line-height: 1.8;
    }
}