/* ══════════════════════════════════════
   S1 — HERO
   Usa variables globales de :root (core.css)
   No las redefine aquí.
   Todos los selectores scopeados desde .lt-s1
   para evitar colisiones en WordPress.
══════════════════════════════════════ */

/* Hero wrapper — scale inicial, JS lo lleva a 1 */
.lt-s1 .hero {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: scale(1.35);
    transform-origin: center center;
    will-change: transform; /* JS remueve esto después del reveal — ver script.js */
}

/* ── Videos ── */
.lt-s1 .hero-videos {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    filter: blur(14px); /* estado inicial — JS anima a blur(0) en el reveal */
    will-change: filter;
}
/* Después del reveal, neutralizar blur CSS — JS ya lo limpió con filter:'' */
.lt-s1.lt-s1--revealed .hero-videos {
    filter: none;
    will-change: auto;
}
.lt-s1 .hero-vid {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Sin CSS transition — swap ocurre tapado por overlay negro */
    z-index: 0;
}
.lt-s1 .hero-vid.active { opacity: 1; z-index: 1; }

/* Overlay — gradiente solo desde abajo */
.lt-s1 .hero-videos::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.7) 100%),
        rgba(0,0,0,0.30);
}

/* ── Grain overlay — textura cinematográfica sobre el video ──
   SVG noise inline como base64 — zero JS, zero performance cost */
.lt-s1 .hero-videos::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: .045;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    background-repeat: repeat;
    mix-blend-mode: overlay;
}

/* Overlay negro — cubre el hero en estado inicial y durante transiciones entre slides */
.lt-s1 .hero-fade {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--color-black);
    opacity: 1;
    pointer-events: none;
}

/* ── Slider ── */
.lt-s1 .hero-slider {
    position: absolute;
    inset: 0;
    z-index: 3;
}
.lt-s1 .hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-block: 6rem clamp(2.5rem, 5vw, 6rem);
    padding-inline: clamp(2.5rem, 5vw, 6rem);
    pointer-events: none;
    visibility: hidden; /* oculto — JS activa .active */
}
.lt-s1 .hero-slide.active {
    pointer-events: auto;
    visibility: visible;
}

/* ── Texto ── */
.lt-s1 .hero-text {
    width: 100%;
    max-width: 950px;
}
.lt-s1 .hero-line {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    overflow: hidden;
    padding-top: 0.25em;
    margin-top: -0.25em;
}
.lt-s1 .hero-line h1,
.lt-s1 .hero-line h2,
.lt-s1 .hero-line p { will-change: transform, opacity; }

/* h1 (slide 1) y h2 (slides 2-4) comparten los mismos estilos visuales —
   h2 resetea el peso por defecto del navegador para mantener consistencia */
.lt-s1 .hero-text h1,
.lt-s1 .hero-text h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 3.5vw, 4.5rem);
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: .8rem;
    color: var(--color-white);
}
.lt-s1 .hero-text p {
    font-family: var(--font-body);
    font-size: clamp(.9rem, 1.05vw, 1.1rem);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-white);
    opacity: .55;
}

/* ── Label ── */
.lt-s1 .lb {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.3vw, 1.3rem);
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--color-green);
    line-height: 1;
    will-change: transform, opacity;
    clip-path: inset(0 100% 0 0); /* estado inicial — JS anima a inset(0 0% 0 0) */
    position: relative;
}
/* Después del reveal, la clase lt-s1--revealed neutraliza el clipPath CSS
   para que las transiciones normales entre slides no lo hereden */
.lt-s1.lt-s1--revealed .lb {
    clip-path: none;
}

/* ── Estado inicial antes de JS — revealTl los revela en init() ── */
.lt-s1 .hero-line h1,
.lt-s1 .hero-line h2,
.lt-s1 .hero-line p,
.lt-s1 .lb,
.lt-s1 .hero-cta { opacity: 0; }

/* Punto verde que pulsa — dot estático en ::before, anillo en ::after */
.lt-s1 .lb::before {
    content: '';
    width: 6px; height: 6px;
    display: inline-block;
    background: var(--color-green);
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.7;
}
.lt-s1 .lb::after {
    content: '';
    position: absolute;
    width: 6px; height: 6px;
    left: 0;
    top: 50%;
    border-radius: 50%;
    background: var(--color-green);
    will-change: transform, opacity;
    animation: lbPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lbPulse {
    0%, 70%, 100% { transform: translateY(-50%) scale(1);   opacity: 0.5; }
    35%            { transform: translateY(-50%) scale(2.7); opacity: 0; }
}

/* ── Word swap ── */
.lt-s1 .word-swap {
    display: inline-grid;
    position: relative;
    color: var(--color-green);
    overflow: hidden;
    vertical-align: bottom;
    align-items: end;
    background: transparent;
    padding-top: 0.25em;
}
.lt-s1 .word-swap b {
    grid-area: 1/1;
    white-space: nowrap;
    transition: transform .6s cubic-bezier(.86,0,.07,1), opacity .6s ease;
}
/* Reset instantáneo sin transición al cambiar slide */
.lt-s1 .word-swap.no-transition b { transition: none; }

/* nth-child justificado: son exactamente 2 <b> controlados por el HTML
   de esta sección — ningún wrapper de WP puede insertarse entre ellos */
.lt-s1 .word-swap b:nth-child(1) { transform: translateY(0);    opacity: 1; }
.lt-s1 .word-swap b:nth-child(2) { transform: translateY(100%); opacity: 0; }
.lt-s1 .word-swap.swapped b:nth-child(1) { transform: translateY(-100%); opacity: 0; }
.lt-s1 .word-swap.swapped b:nth-child(2) { transform: translateY(0);     opacity: 1; }

/* ── CTA ── */
.lt-s1 .hero-cta { will-change: transform, opacity; }

.lt-s1 .cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--font-body);
    font-size: .88rem;
    font-weight: 600;
    padding: .95rem 2rem;
    border: 1.5px solid var(--color-green);
    color: var(--color-white);
    border-radius: 8px;
    margin-top: 2rem;
    position: relative;
    white-space: nowrap; /* evita que el texto se parta en iPad landscape */
    /* Sin overflow:hidden — causa corte del ::before en iOS Safari */
    transition: color .35s ease;
}
/* Fill verde desde izquierda al hover */
.lt-s1 .cta-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px; /* ligeramente menor que el btn para no sobresalir */
    background: var(--color-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s cubic-bezier(.86,0,.07,1);
    z-index: 0;
}
.lt-s1 .cta-btn:hover::before { transform: scaleX(1); }
.lt-s1 .cta-btn:hover { color: var(--color-black); }
.lt-s1 .cta-btn span,
.lt-s1 .cta-btn i { position: relative; z-index: 1; }
.lt-s1 .cta-arrow {
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
    transition: transform .35s cubic-bezier(.86,0,.07,1);
}
.lt-s1 .cta-btn:hover .cta-arrow { transform: translateX(4px); }

/* ══════════════════════════════════════
   NAV LATERAL
   Vive en .lt-section__inner — FUERA del
   .hero para no ser afectado por
   overflow:hidden ni scale(1.35)
══════════════════════════════════════ */
.lt-s1 .hero-nav {
    position: absolute;
    right: clamp(1.5rem, 2.8vw, 3.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
}

/* SVG línea conectora — detrás de los dots */
.lt-s1 .hero-nav-line {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Punto por slide */
.lt-s1 .hero-nav-dot {
    position: relative;
    z-index: 1;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    cursor: pointer;
    transition: background .3s ease, transform .3s ease;
    flex-shrink: 0;
}
.lt-s1 .hero-nav-dot.active {
    background: var(--color-green);
    transform: scale(1.4);
}
.lt-s1 .hero-nav-dot:hover { background: rgba(255,255,255,.6); }

/* ── Scroll hint — clip-path reveal en loop ──
   Lado izquierdo centrado verticalmente — simétrico a hero-nav (derecha).
   Evita solapamiento con el texto del hero (max-width:950px desde la izquierda)
   y con el FAB WhatsApp (bottom-right). */
.lt-s1 .hero-scroll {
    position: absolute;
    left: clamp(1.5rem, 2.8vw, 3.5rem);
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    opacity: 0; /* JS lo revela */
    pointer-events: none;
    will-change: opacity;
}
.lt-s1 .hero-scroll span {
    font-family: var(--font-body);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-white);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    /* Clip-path reveal: texto emerge de abajo hacia arriba en loop */
    animation: scrollTextReveal 3s ease-in-out infinite;
}

/* Línea debajo del texto — se extiende y se retrae */
.lt-s1 .hero-scroll::after {
    content: '';
    width: 1px; height: 36px;
    background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
    animation: scrollLine 3s ease-in-out infinite;
    transform-origin: top center;
}
@keyframes scrollTextReveal {
    0%        { clip-path: inset(100% 0 0 0); opacity: 0; }
    20%, 70%  { clip-path: inset(0% 0 0 0);   opacity: 1; }
    90%, 100% { clip-path: inset(0% 0 100% 0); opacity: 0; }
}
@keyframes scrollLine {
    0%        { transform: scaleY(0); opacity: 0; transform-origin: top; }
    20%       { transform: scaleY(1); opacity: 1; transform-origin: top; }
    70%       { transform: scaleY(1); opacity: 1; transform-origin: bottom; }
    90%, 100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
}

/* ══════════════════════════════════════
   RESPONSIVE
   Sistema de 3 criterios — proyecto Level Tech:

   DESKTOP: (min-width: 1200px) and (orientation: landscape) and (min-height: 500px)
   MOBILE:  negación del bloque anterior (todo lo demás)

   Cubre correctamente:
   ┌─────────────────────────────┬─────────┐
   │ iPhone portrait             │ mobile  │
   │ iPhone landscape (≤499px h) │ mobile  │
   │ iPad Mini portrait 768×1024 │ mobile  │
   │ iPad Mini landscape 1024×768│ desktop │
   │ iPad Pro portrait           │ mobile  │
   │ iPad Pro landscape          │ desktop │
   │ Surface/laptop 914px CSS    │ desktop │
   │ 1920×1080 desktop           │ desktop │
   └─────────────────────────────┴─────────┘

   Tipografía: clamp() puro — sin breakpoints para fuentes.
   Scroll hint: solo desktop, lo maneja la regla base (.hero-scroll).
══════════════════════════════════════ */

/* ── MOBILE — todo lo que NO es desktop ──
   Incluye: portrait de cualquier ancho, landscape con < 500px alto,
   y tablets portrait (iPad Mini/Air/Pro en vertical).            */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

    .lt-s1 .hero-slide {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding-block: 4.5rem 5.5rem;
        padding-inline: clamp(1rem, 4vw, 1.5rem);
    }
    .lt-s1 .hero-text { max-width: 100%; }

    /* Tipografía mobile — fórmula lineal 375px → 768px */
    .lt-s1 .hero-text h1,
    .lt-s1 .hero-text h2 { font-size: clamp(1.9rem, 8vw, 3rem); }
    .lt-s1 .hero-text p  { font-size: clamp(.8rem, 2.4vw, .92rem); }
    .lt-s1 .lb           { font-size: clamp(.78rem, 2vw, .88rem); margin-bottom: 1rem; }

    .lt-s1 .cta-btn {
        margin-top: 1.2rem;
        font-size: .82rem;
        padding: .8rem 1.5rem;
    }

    /* Nav — horizontal, centrado, abajo */
    .lt-s1 .hero-nav {
        right: auto;
        top: auto;
        bottom: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 1.4rem;
    }

    /* Línea SVG — horizontal en mobile/portrait */
    .lt-s1 .hero-nav-line {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 2px;
    }

    .lt-s1 .hero-nav-dot { width: 7px; height: 7px; }
    .lt-s1 .hero-scroll  { display: none; }
}

/* ── Pantallas muy cortas (landscape phone) — solo ajuste de altura ── */
@media (max-height: 499px) {
    .lt-s1 .hero-slide {
        padding-block: 3.5rem 1.2rem;
    }
    .lt-s1 .hero-text h1,
    .lt-s1 .hero-text h2 { font-size: clamp(1.4rem, 5vw, 2.2rem); }
    .lt-s1 .hero-text p  { font-size: .78rem; line-height: 1.5; }
    .lt-s1 .lb           { font-size: .75rem; margin-bottom: .6rem; }
    .lt-s1 .cta-btn      { margin-top: .7rem; padding: .65rem 1.2rem; }
}