/* ══════════════════════════════════════
   S5 — CLIENTES / ISO
══════════════════════════════════════ */

/* ── Variables locales ── */
.lt-s5 {
    --ci-px:       clamp(3rem, 7vw, 8rem);
    --color-s5-bg: #060C18;
    /* Sin background — el color va solo en lt-section__inner */
}

.lt-s5 .lt-section__inner {
    /* background shorthand — color al final, evita que background-image
       sobreescriba background-color (misma regla que S4) */
    background:
        radial-gradient(circle at 0% 0%,    rgba(2, 87, 210, .28) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(57, 181, 74, .12) 0%, transparent 45%),
        var(--color-s5-bg);
    /* overflow: hidden removido — el fold-wrap es position:relative y
       el section padre ya tiene overflow:hidden de core.css.
       Tenerlo aquí también clipeaba el contenido durante la rotación. */
}

/* ── Grid perspectiva — capa de profundidad arquitectónica ──
   SVG inline como background-image en un pseudo-element.
   Dos conjuntos de líneas: horizontales (convergen al punto de fuga)
   y verticales (perspectiva lateral). z-index: 0, debajo de todo el contenido.
   Opacity total ~.045 — presente pero nunca distrae.
── */
.lt-s5 .lt-section__inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    /* SVG: viewBox 1440×900 — proporciones laptop estándar.
       Punto de fuga: 72% horizontal, 52% vertical (ligeramente derecha-centro).
       Líneas horizontales: 9 líneas que parten del borde izq/der y convergen al punto de fuga.
       Líneas verticales: 8 líneas que parten del borde inferior y convergen.
       Stroke: blanco .055 opacity — suficiente para dar profundidad sin contaminar. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='white' stroke-width='0.6' fill='none' opacity='0.055'%3E%3C!-- Líneas desde borde izquierdo al punto de fuga (1037,468) --%3E%3Cline x1='0' y1='0'   x2='1037' y2='468'/%3E%3Cline x1='0' y1='112' x2='1037' y2='468'/%3E%3Cline x1='0' y1='225' x2='1037' y2='468'/%3E%3Cline x1='0' y1='337' x2='1037' y2='468'/%3E%3Cline x1='0' y1='450' x2='1037' y2='468'/%3E%3Cline x1='0' y1='562' x2='1037' y2='468'/%3E%3Cline x1='0' y1='675' x2='1037' y2='468'/%3E%3Cline x1='0' y1='787' x2='1037' y2='468'/%3E%3Cline x1='0' y1='900' x2='1037' y2='468'/%3E%3C!-- Líneas desde borde derecho al punto de fuga --%3E%3Cline x1='1440' y1='0'   x2='1037' y2='468'/%3E%3Cline x1='1440' y1='112' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='225' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='337' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='450' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='562' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='675' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='787' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='900' x2='1037' y2='468'/%3E%3C!-- Líneas desde borde inferior al punto de fuga --%3E%3Cline x1='0'    y1='900' x2='1037' y2='468'/%3E%3Cline x1='180'  y1='900' x2='1037' y2='468'/%3E%3Cline x1='360'  y1='900' x2='1037' y2='468'/%3E%3Cline x1='540'  y1='900' x2='1037' y2='468'/%3E%3Cline x1='720'  y1='900' x2='1037' y2='468'/%3E%3Cline x1='900'  y1='900' x2='1037' y2='468'/%3E%3Cline x1='1080' y1='900' x2='1037' y2='468'/%3E%3Cline x1='1260' y1='900' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='900' x2='1037' y2='468'/%3E%3C!-- Líneas desde borde superior al punto de fuga --%3E%3Cline x1='0'    y1='0' x2='1037' y2='468'/%3E%3Cline x1='180'  y1='0' x2='1037' y2='468'/%3E%3Cline x1='360'  y1='0' x2='1037' y2='468'/%3E%3Cline x1='540'  y1='0' x2='1037' y2='468'/%3E%3Cline x1='720'  y1='0' x2='1037' y2='468'/%3E%3Cline x1='900'  y1='0' x2='1037' y2='468'/%3E%3Cline x1='1080' y1='0' x2='1037' y2='468'/%3E%3Cline x1='1260' y1='0' x2='1037' y2='468'/%3E%3Cline x1='1440' y1='0' x2='1037' y2='468'/%3E%3C!-- Punto de fuga — dot sutil --%3E%3Ccircle cx='1037' cy='468' r='2' fill='white' opacity='0.12'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;

    /* Fade en los bordes para que la malla no corte duro */
    -webkit-mask-image:
        radial-gradient(ellipse 85% 80% at 72% 52%, black 30%, transparent 80%);
    mask-image:
        radial-gradient(ellipse 85% 80% at 72% 52%, black 30%, transparent 80%);
}

/* En mobile/tablet portrait la malla no se muestra — innecesaria y consume recursos */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {
    .lt-s5 .lt-section__inner::before { display: none; }
    /* Task 4: Luz interna azul/navy — ambiente sin fondo negro puro */
    .lt-s5 .lt-section__inner {
        background: radial-gradient(ellipse 80% 60% at 50% 38%, rgba(2, 8, 60, .18) 0%, transparent 70%);
    }
}

/* ── Wrap ── */
.ci-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Spacing: amplio, moderno, con aire */
    padding: clamp(6.5rem, 12vh, 8.5rem) 0 clamp(4rem, 8vh, 6rem);
    overflow: hidden;
    z-index: 1;
}

/* ── Verde — CONFÍAN y CALIDAD ── */
.ci-green { color: var(--color-green); }

/* ── Ghost imagen de referencia de entidad ──
   Estático en esquina superior izquierda.
   Tamaño generoso, máscara que disuelve hacia abajo y derecha. ── */
.ci-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(460px, 54vw, 740px);
    height: clamp(340px, 58vh, 580px);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0;
    transition: opacity .65s ease;
}

.ci-ghost img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transform: scale(1.06);
    transition: transform .65s ease;

    /* Máscara: sólida arriba-izq, se disuelve hacia abajo y derecha */
    -webkit-mask-image:
        linear-gradient(to bottom, black 25%, rgba(0,0,0,.5) 60%, transparent 88%),
        linear-gradient(to right,  black 30%, rgba(0,0,0,.5) 65%, transparent 92%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to bottom, black 25%, rgba(0,0,0,.5) 60%, transparent 88%),
        linear-gradient(to right,  black 30%, rgba(0,0,0,.5) 65%, transparent 92%);
    mask-composite: intersect;

    /* Desaturado suave — presencia sin distraer */
    filter: grayscale(25%) brightness(.68) contrast(1.04);
}

.ci-ghost.is-visible img { transform: scale(1); }
.ci-ghost.is-visible     { opacity: 1; }

/* ── Shimmer en card activa (hover con reference) ── */
.ci-card.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent       30%,
        rgba(255,255,255,.55) 48%,
        rgba(255,255,255,.8)  50%,
        rgba(255,255,255,.55) 52%,
        transparent       70%
    );
    transform: translateX(-100%);
    animation: ci-card-shimmer .65s ease forwards;
    pointer-events: none;
    border-radius: 16px;
}

@keyframes ci-card-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(150%); }
}

/* ── Header — alineado a la derecha con --ci-px ── */
.ci-header {
    text-align: right;
    padding: 0 var(--ci-px);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.ci-header-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 8rem);
    line-height: .95;
    color: var(--color-white);
    letter-spacing: .02em;
}

/* ── Carrusel ── */
.ci-carousel {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    flex-shrink: 0;
    padding: clamp(.6rem, 1.2vh, 1.2rem) 0;
    /* Guard selección al drag */
    user-select: none;
    -webkit-user-select: none;
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.ci-carousel:active { cursor: grabbing; }

.ci-row {
    display: flex;
    gap: clamp(.8rem, 1.5vw, 1.5rem);
    will-change: transform;
    /* Guard selección al drag */
    user-select: none;
    -webkit-user-select: none;
}

/* ── Cards ── */
.ci-card {
    flex: 0 0 clamp(200px, 16vw, 300px);
    aspect-ratio: 4 / 3;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    box-shadow:
        0 8px 40px rgba(0, 0, 0, .28),
        0 2px 8px rgba(0, 0, 0, .14);
    transition: box-shadow .35s ease, transform .35s ease;
}

@media (hover: hover) {
    .ci-card:hover {
        box-shadow:
            0 8px 40px rgba(0, 0, 0, .28),
            0 2px 8px rgba(0, 0, 0, .14),
            0 0 0 1.5px rgba(57, 181, 74, .35),
            0 0 22px rgba(57, 181, 74, .18);
        transform: translateY(-3px) scale(1.015);
    }
}

.ci-card img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    pointer-events: none;
    display: block;
    user-select: none;
    -webkit-user-select: none;
}

/* Logos pequeños por default — lt-client10 a lt-client18 */
.ci-card[data-client="10"] img,
.ci-card[data-client="11"] img,
.ci-card[data-client="12"] img,
.ci-card[data-client="13"] img,
.ci-card[data-client="14"] img,
.ci-card[data-client="15"] img,
.ci-card[data-client="16"] img,
.ci-card[data-client="17"] img,
.ci-card[data-client="18"] img {
    width: 88%;
    height: 88%;
}

/* ── Divider ── */
.ci-divider-wrap {
    width: 100%;
    height: clamp(44px, 7vh, 72px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ci-divider-bar {
    position: absolute;
    inset: 0;
    background: var(--color-white);
    transform: scaleX(0);
    transform-origin: center;
    will-change: transform;
    overflow: hidden;
}

/* Shimmer que corre por la barra una vez que expande */
.ci-divider-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent          0%,
        rgba(255,255,255,.55) 45%,
        rgba(255,255,255,.9)  50%,
        rgba(255,255,255,.55) 55%,
        transparent          100%
    );
    transform: translateX(-100%);
    animation: ci-shimmer 2.8s ease-in-out infinite;
    animation-delay: 1.8s;
}

@keyframes ci-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.ci-divider-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-divider-text {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    color: var(--color-navy); /* Navy para texto sobre barra blanca */
    letter-spacing: .1em;
    position: absolute;
    opacity: 0;
    white-space: nowrap;
}

/* ── Footer — Mayor balance (50/50 visual con el header) ── */
.ci-footer {
    width: 100%;
    padding: clamp(2.5rem, 4vh, 4rem) var(--ci-px) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.ci-cert-title {
    font-family: var(--font-display);
    /* Mismo tamaño que .ci-header-title — coherencia visual total */
    font-size: clamp(3.5rem, 6vw, 8rem);
    line-height: .85;
    color: var(--color-white);
}

.ci-cert-grid {
    display: flex;
    gap: clamp(2rem, 3vw, 3.5rem);
    align-items: center;
}

.ci-cert-item {
    width: clamp(180px, 15vw, 250px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transform: scale(.8) translateY(20px);
    will-change: transform, opacity;
}

/* Float loop — se activa después de la entrada vía clase JS */
.ci-cert-item.is-floating {
    animation: ci-float 3.8s ease-in-out infinite;
}
.ci-cert-item:nth-child(2).is-floating { animation-delay: .55s; }
.ci-cert-item:nth-child(3).is-floating { animation-delay: 1.1s; }

@keyframes ci-float {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-7px); }
}

.ci-cert-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: .92;
    user-select: none;
    -webkit-user-select: none;
}

/* Watermark número de fondo — solo visible en mobile vía media query */
.ci-watermark { display: none; }

/* Línea verde bajo el título del header — solo mobile, animada por JS */
.ci-header-line { display: none; }

/* Reveal clip-path */
.ci-fade-up {
    clip-path: inset(-15px 0 100% 0); /* negativo arriba — da espacio para tildes y diacríticos */
    will-change: clip-path;
}

/* ── Partículas flotantes — creadas y animadas por JS (solo desktop) ── */
.ci-particle {
    position: absolute;
    border-radius: 50%;
    background: var(--color-white);
    pointer-events: none;
    z-index: 0;
}

/* ══════════════════════════════════════
   RESPONSIVE — nuevo sistema de 3 criterios
   Desktop: ≥1200px + landscape + ≥500px alto
   Mobile/tablet portrait: todo lo demás
══════════════════════════════════════ */

/* ══════════════════════════════════════
   MOBILE + TABLET — flujo natural sin viewport forzado
   S5 fluye en el documento, altura según contenido.
   Fondo transparente — body negro visible.
══════════════════════════════════════ */
@media not all and (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) {

    .lt-s5 {
        --ci-px: clamp(1.25rem, 4vw, 3rem);
        height: auto;
        min-height: 0;
        border-top: 1px solid rgba(255, 255, 255, .06);
    }

    .lt-s5 .lt-section__inner {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
        background: transparent;
    }

    .ci-ghost { display: none; }

    .ci-wrap {
        padding: clamp(3rem, 7vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem);
        height: auto;
        justify-content: flex-start;
        gap: clamp(1.6rem, 3.5vw, 2.5rem);
    }

    /* ── Header — centrado, más impacto visual ── */
    .ci-header {
        text-align: center;
        padding: 0 var(--ci-px);
    }
    .ci-header-title {
        font-size: clamp(3.5rem, 11vw, 6rem);
        line-height: .88;
        letter-spacing: .01em;
    }

    /* ── Carrusel ── */
    .ci-card { flex: 0 0 clamp(155px, 27vw, 280px); }

    /* ── Divider — separador visible con texto alternante ── */
    .ci-divider-wrap {
        height: clamp(48px, 8vh, 64px);
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        background: rgba(255, 255, 255, .018);
    }
    .ci-divider-bar  { display: none; }
    .ci-divider-text {
        font-size: clamp(.78rem, 2.8vw, 1.05rem);
        color: rgba(255, 255, 255, .52);
        letter-spacing: .2em;
    }

    /* ── Footer ISO — centrado, compacto ── */
    .ci-footer {
        flex-direction: column;
        align-items: center;
        gap: clamp(1rem, 2.2vw, 1.6rem);
        padding: clamp(1.2rem, 3vw, 2rem) var(--ci-px) clamp(0.5rem, 2vw, 1rem);
        text-align: center;
    }
    .ci-cert-title {
        font-size: clamp(2.8rem, 10vw, 5rem);
        line-height: .9;
        text-align: center;
    }
    .ci-cert-grid {
        justify-content: center;
        gap: clamp(1.2rem, 3.5vw, 2rem);
    }
    /* Task 5: cert-items empiezan ocultos — JS anima entrada */
    .ci-cert-item  {
        width: clamp(85px, 21vw, 150px);
        padding: 0;
        opacity: 0;
        transform: translateY(0);   /* reset scale del desktop */
    }

    /* Task 5: fade-up inicial por JS — sin !important para que GSAP override */
    .ci-fade-up { clip-path: none; }

    /* Task 5: Línea verde bajo título del header */
    .ci-header-line {
        display: block;
        width: 0;
        height: 2px;
        background: var(--color-green);
        border-radius: 2px;
        margin: .65rem auto 0;
        box-shadow: 0 0 8px rgba(57, 181, 74, .5);
    }

    /* Task 6: ISO cert strip — badges de credencial */
    .ci-cert-grid {
        border: 1px solid rgba(255, 255, 255, .06);
        background: rgba(255, 255, 255, .02);
        border-radius: 12px;
        padding: 1rem;
    }

    /* Task 5: Watermark +25 detrás del carrusel */
    .ci-watermark {
        display: block;
        position: absolute;
        font-family: var(--font-display);
        font-size: clamp(7rem, 32vw, 14rem);
        font-weight: 400;
        color: rgba(255, 255, 255, .022);
        letter-spacing: -.04em;
        pointer-events: none;
        z-index: 0;
        left: 50%;
        top: 44%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
        user-select: none;
    }
}

/* ── Phone landscape: ≤499px alto ──
   Sin cambio de layout — mismo diseño que tablet landscape.
   Solo compresión de padding, tipografía y alturas. */
@media (orientation: landscape) and (max-height: 499px) {
    .ci-header-line  { display: none; }
    .lt-s5 .lt-section__inner { min-height: 0 !important; }
    .ci-wrap         { padding: 2.5rem 0 2rem; gap: 1rem; }
    .ci-header-title { font-size: clamp(1.4rem, 4.5vw, 2rem); }
    .ci-card         { flex: 0 0 clamp(105px, 18vw, 160px); }
    .ci-divider-wrap { height: 36px; }
    .ci-cert-title   { font-size: clamp(1.4rem, 4.5vw, 2.2rem); }
    .ci-cert-item    { width: clamp(58px, 11vw, 85px); }
}

/* ── Desktop grande — MacBook Pro, FHD externo, 2K ── */
@media (min-width: 1440px) {
    .lt-s5           { --ci-px: clamp(5rem, 7vw, 9rem); }
    .ci-wrap         { padding: clamp(7rem, 9vh, 10rem) 0 clamp(5rem, 7vh, 8rem); }
    .ci-header-title { font-size: clamp(7rem, 8vw, 10rem); line-height: 0.9; }
    .ci-cert-title   { font-size: clamp(7rem, 8vw, 10rem); line-height: 0.88; }
    .ci-card         { flex: 0 0 clamp(260px, 16vw, 320px); }
    .ci-cert-item    { width: clamp(220px, 14vw, 270px); }
    .ci-divider-text { font-size: clamp(1.8rem, 2.5vw, 2.8rem); }
}

/* ── Desktop laptop media — MacBook Air M2 (1470×956), Surface 1368×912, FHD ──
   Comprimir moderadamente. Solo desktop (cumple 3 criterios) + altura ≤1080px.
   MacBook Air 1470×956: min(10vh=96px, 6.5vw=96px) = 96px ≈ 6rem ✅
   FHD 1920×1080:        min(10vh=108px, 6.5vw=125px) = 108px ≈ 6.75rem ✅ */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) and (max-height: 1080px) and (min-height: 781px) {
    .lt-s5 { --ci-px: clamp(3rem, 6vw, 7rem); }

    .ci-wrap {
        padding: clamp(5rem, 8vh, 7rem) 0 clamp(3rem, 5vh, 5rem);
        gap: 0;
    }

    .ci-header-title {
        font-size: min(10vh, 6.5vw);
        line-height: .92;
    }
    .ci-cert-title {
        font-size: min(10vh, 6.5vw);
        line-height: .85;
    }

    .ci-card      { flex: 0 0 clamp(210px, 15vw, 280px); }
    .ci-cert-item { width: clamp(140px, 11vw, 185px); }

    .ci-divider-wrap { height: clamp(44px, 6vh, 64px); }
    .ci-divider-text { font-size: clamp(1.4rem, 2.2vw, 2.2rem); }

    .ci-footer { padding-top: clamp(1.5rem, 3vh, 3rem); }
}

/* ── Desktop laptop corta — 1280×720, 1366×768, 1536×864 ──
   Solo desktop (cumple 3 criterios) + altura ≤780px.
   En 1280×720: min(8vh=58px, 5.5vw=70px) = 58px ≈ 3.6rem ✅ */
@media (min-width: 1200px) and (orientation: landscape) and (min-height: 500px) and (max-height: 780px) {
    .lt-s5 { --ci-px: clamp(2.5rem, 5vw, 5rem); }

    .ci-wrap {
        padding: clamp(4.5rem, 8vh, 6rem) 0 clamp(2rem, 3vh, 3rem);
        gap: 0;
    }

    .ci-header-title {
        font-size: min(8vh, 5.5vw);
        line-height: .90;
    }
    .ci-cert-title {
        font-size: min(8vh, 5.5vw);
        line-height: .85;
    }

    .ci-card      { flex: 0 0 clamp(160px, 14vw, 230px); }
    .ci-cert-item { width: clamp(90px, 8.5vw, 140px); }

    .ci-divider-wrap { height: clamp(32px, 5vh, 48px); }
    .ci-divider-text { font-size: clamp(1.1rem, 2vw, 1.6rem); }

    .ci-footer { padding-top: clamp(1rem, 2vh, 2rem); }
}