/* ==========================================================================
   IntroSection — "What we actually do"

   Figma `Section` (206:811), leído en Dev Mode el 2026-09-07. Todos los
   números de acá salen del archivo, no de una captura: esa distinción costó
   cuatro releases en el Hero esta misma semana.

   El ancho lo pone `.tgl-container` (1236 de contenido). No se repite acá.
   ========================================================================== */

.tgl-intro {
    background: var(--tgl-section-bg);
    /* 120 arriba y abajo (206:811). Fijo y no en vh: la sección no compite con
       la altura de la ventana, crece con su contenido. */
    padding-block: 7.5rem;
}

/* El ancho lo pone `.tgl-container` y esta sección NO lo pisa.

   Tuvo un override de 1236 hasta el 2026-09-08, porque el archivo la dibuja
   así: el copy arranca en x=342 y los tres InfoBlocks miden 412 cada uno. Pero
   1236 son exactamente 3 x 412 — la SUMA de las columnas, no un ancho elegido —
   y erra por 4px la guía de 1240 que el propio archivo usa en otras secciones.

   Medidas las cuatro secciones, el sistema quedó claro: `Islands` (157:1140) y
   `Homes` (157:1393) caen las dos en caja 1240 / contenido 1144, exacto y al
   pixel. Ésta y `Step-by-step` eran deriva de auto-layout, no una jerarquía.
   Tres containers que difieren menos del 8% no son tres niveles: son secciones
   que no alinean.

   Decisión del usuario, 2026-09-08: se normaliza a un solo container. Las
   columnas pasan de 412 a 381 y toda la página arranca en el mismo x. */
.tgl-intro .tgl-intro__inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;                        /* 64 — 206:811 */
}

/* ── Fila de arriba: copy + video ─────────────────────────────────────── */

.tgl-intro .tgl-intro__top {
    display: flex;
    /* `start` y no `stretch`: el copy mide 328 igual que el video en el diseño,
       pero eso es coincidencia de ESTE texto. Estirado, un copy más corto
       centraría verticalmente y dejaría de alinear con el título. */
    align-items: flex-start;
    gap: 4rem;                        /* 64 — 206:890 */
}

.tgl-intro .tgl-intro__copy {
    display: flex;
    flex-direction: column;
    gap: 2.625rem;                    /* 42 — 206:888 */
    /* 573 fijo, sin crecer: el ancho del lead es una decisión de tipografía
       (dónde cortan las líneas), no espacio sobrante que repartir. */
    flex: 0 0 35.8125rem;
    min-width: 0;
}

.tgl-intro .tgl-intro__head {
    display: flex;
    flex-direction: column;
    gap: 1rem;                        /* 16 — 206:813 */
}

.tgl-intro .tgl-intro__eyebrow {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-size: 0.75rem;               /* 12 — 206:815 */
    font-weight: 500;
    letter-spacing: 0.22em;           /* 2.64 / 12 */
    line-height: 1.55;                /* 18.6 / 12 */
    text-transform: uppercase;
    color: var(--tgl-eyebrow-color);
}

.tgl-intro .tgl-intro__title {
    margin: 0;
    font-family: var(--tgl-font-heading);
    font-size: 2.375rem;              /* 38 — 206:817 */
    font-weight: 400;
    letter-spacing: -0.02em;          /* -0.76 / 38 */
    line-height: 1.12;                /* 42.56 / 38 */
    color: var(--tgl-heading-color);
    /* 491 y no 573: en el archivo el h2 corta ANTES que el lead, a propósito.
       Dejarlo al ancho del contenedor le da tres líneas donde el diseño tiene
       dos — el mismo error que ya pasó con el h1 del Hero. */
    max-width: 30.6875rem;
}

.tgl-intro .tgl-intro__lead {
    margin: 0;
    font-family: var(--tgl-font-body);
    font-size: 1rem;                  /* 16 — 206:820 */
    line-height: 1.25;                /* 20 / 16 */
    color: var(--tgl-lead-color);
}

/* ── El video ─────────────────────────────────────────────────────────── */

.tgl-intro .tgl-intro__media {
    position: relative;
    display: block;
    flex: 0 0 37.4375rem;             /* 599 — 209:914 */
    /* `aspect-ratio` y no `height`: al apilarse en mobile manda el ancho y el
       alto tiene que seguirlo, o la imagen se deforma. */
    aspect-ratio: 599 / 328;
    overflow: hidden;
    border-radius: 0.625rem;          /* 10 — 206:889 */
    /* Reserva la caja antes de que cargue el poster. Sin esto la sección salta
       cuando la imagen aterriza, y eso es CLS.

       Oscuro y no gris claro: es el color que se ve en el hueco de un segundo
       entre el click y el primer fotograma, y contra una foto o un video
       cualquiera un gris claro se lee como "roto" mientras un oscuro se lee
       como "cargando". */
    background: var(--tgl-primitive-ink-900);
}

.tgl-intro .tgl-intro__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tgl-intro .tgl-intro__play {
    position: absolute;
    /* Centrado exacto: en el archivo el ícono está en (269, 133) sobre 599x328,
       o sea (599-62)/2 y (328-62)/2. Es el centro, no una posición. */
    top: 50%;
    left: 50%;
    width: 3.875rem;                  /* 62 — 209:916 */
    height: 3.875rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tgl-intro .tgl-intro__play svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tgl-intro .tgl-intro__media--video {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(14, 133, 149, 0.18);
}

/* Responde el POSTER, no el botón: el objetivo del click es toda la caja, así
   que la respuesta tiene que ser de toda la caja. Guardado tras
   `(hover: hover)` — sin la guarda WebKit deja el estado pegado al último
   elemento tocado, que es el bug que costó la v3.26.4. */
@media (hover: hover) {
    .tgl-intro .tgl-intro__media--video:hover img {
        filter: brightness(1.06);
    }
}

.tgl-intro .tgl-intro__media--video:active img {
    filter: brightness(0.94);
}

.tgl-intro .tgl-intro__media--video:focus-visible {
    outline: 2px solid var(--tgl-eyebrow-color);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .tgl-intro .tgl-intro__media--video img {
        transition: filter var(--tgl-transition-fast);
    }
}

/* El player reemplaza al poster en su lugar, con la misma caja.

   `object-fit: cover` arregla tres síntomas que eran uno solo. Un `<video>` NO
   rellena su caja: por defecto encaja el fotograma adentro, con barras. La caja
   mide 599x328 (1.826) y un video 16:9 es 1.778, así que quedaban dos franjas
   finas del fondo de la caja asomando — reportado como "no llega a tapar por
   completo el fondo gris". Y esas franjas, al no ser parte del fotograma,
   dejaban ver que las esquinas no seguían el radio.

   `border-radius: inherit` es cinturón sobre tirantes: el `overflow: hidden` del
   padre debería recortar igual, pero un elemento reemplazado no se recorta
   parejo en todos los motores, y cuesta una línea. */
.tgl-intro .tgl-intro__media video,
.tgl-intro .tgl-intro__media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    border-radius: inherit;
}

/* ── Los tres InfoBlocks ──────────────────────────────────────────────── */

.tgl-intro .tgl-intro__blocks {
    /* `!important` en el reset: el kit de Elementor emite `.elementor-kit-6 ol`
       con `list-style` y `padding`, y algunas de esas reglas llevan
       `!important`. Sin esto aparecen bullets y una sangría de 40px. */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    /* 3 x 412 = 1236, que es exactamente el contenedor. `1fr` lo reproduce sin
       clavar el número, así que sigue cerrando si el container cambia. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--tgl-section-divider);
    counter-reset: tgl-intro-block;
}

.tgl-intro .tgl-intro__block {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;                      /* 11.2 — 206:822 */
    /* 34 arriba, 35 derecha, 8 abajo (206:822). La primera columna NO lleva
       padding izquierdo: su borde es el del contenedor, y meterle 34 correría
       el "01." respecto del eyebrow de arriba. */
    padding: 2.125rem 2.1875rem 0.5rem 0;
    border-right: 1px solid var(--tgl-section-divider);
}

.tgl-intro .tgl-intro__block + .tgl-intro__block {
    padding-left: 2.125rem;           /* 34 — el aire después del divisor */
}

/* La tercera no lleva divisor: ahí termina el contenido. */
.tgl-intro .tgl-intro__block:last-child {
    border-right: 0;
    padding-right: 2.125rem;          /* 34 — 206:866 */
}

/* El número sale de un contador y no del markup: derivado del orden del DOM,
   no escrito a mano, así que no puede quedar en "01. 03." el día que alguien
   borre el bloque del medio. `decimal-leading-zero` da el `01` del diseño. */
.tgl-intro .tgl-intro__block::before {
    counter-increment: tgl-intro-block;
    content: counter(tgl-intro-block, decimal-leading-zero) ".";
    font-family: var(--tgl-font-display);
    font-size: 0.6875rem;             /* 11 — 206:839 */
    font-weight: 400;
    letter-spacing: 0.2em;            /* 2.2 / 11 */
    line-height: 1.5455;              /* 17 / 11 */
    color: var(--tgl-muted-color);
    padding-top: 0.6125rem;           /* 9.8 — 206:838 */
}

.tgl-intro .tgl-intro__block-title {
    margin: 0;
    /* DIVERGENCIA: este h3 va en **Open Sans**, no en Raleway (206:841). El
       plan §2.11 asigna Raleway a los headings y acá el archivo usa la familia
       de cuerpo. No se "corrige" en silencio: es una decisión de la diseñadora
       y borrarla nos deja sin saber si era intencional. Va a la misma lista que
       DIVERGENCIA 3 y 4. */
    font-family: var(--tgl-font-body);
    font-size: 1.375rem;              /* 22 — 206:841 */
    font-weight: 400;
    letter-spacing: -0.02em;          /* -0.44 / 22 */
    line-height: 1.12;                /* 24.64 / 22 */
    color: var(--tgl-heading-color);
    padding-top: 0.175rem;            /* 2.8 — 206:840 */
}

.tgl-intro .tgl-intro__block-body {
    margin: 0;
    font-family: var(--tgl-font-body);
    font-size: 0.9375rem;             /* 15 — 206:843 */
    line-height: 1.3333;              /* 20 / 15 */
    color: var(--tgl-muted-color);
    /* 295.8 (206:842). Más angosto que su columna a propósito: el archivo
       corta estas líneas antes que el borde. */
    max-width: 18.4875rem;
}

/* ==========================================================================
   Mobile — 80% del tráfico
   ========================================================================== */

@media (max-width: 1023px) {

    .tgl-intro {
        padding-block: var(--tgl-space-12);
    }

    .tgl-intro .tgl-intro__inner {
        gap: var(--tgl-space-10);
    }

    /* El video pasa ARRIBA del copy: en una columna, una caja de 328 de alto
       metida entre el título y el lead los separa demasiado para leerlos como
       una sola idea. */
    .tgl-intro .tgl-intro__top {
        flex-direction: column-reverse;
        gap: var(--tgl-space-8);
    }

    .tgl-intro .tgl-intro__copy,
    .tgl-intro .tgl-intro__media {
        flex: 0 0 auto;
        width: 100%;
    }

    .tgl-intro .tgl-intro__copy { gap: var(--tgl-space-5); }

    .tgl-intro .tgl-intro__title {
        font-size: 1.75rem;
        max-width: none;
    }

    /* Los divisores pasan a horizontales: en columna, un `border-right` no
       separa nada. */
    .tgl-intro .tgl-intro__blocks {
        grid-template-columns: minmax(0, 1fr);
        border-top: 0;
    }

    .tgl-intro .tgl-intro__block {
        padding: var(--tgl-space-6) 0;
        border-right: 0;
        border-top: 1px solid var(--tgl-section-divider);
    }

    .tgl-intro .tgl-intro__block + .tgl-intro__block { padding-left: 0; }

    .tgl-intro .tgl-intro__block:last-child { padding-right: 0; }

    .tgl-intro .tgl-intro__block-body { max-width: none; }
}