/* ==========================================================================
   TestimonialsSection — "Stories travelers send us long after they've gone
   home."

   Figma `Testimonials` (157:1553), leído en Dev Mode el 2026-09-10. Cada número
   lleva al lado el nodo de donde salió.

   Tercera confirmación del container: 362.66 x 3 + 28 x 2 = **1144 exactos**
   (157:1556). `Islands` llega con 3 x 364 + 2 x 26 y `Homes` con
   4 x 266.5 + 3 x 26, así que el modelo 1240/1144 está medido de tres formas
   independientes.
   ========================================================================== */

.tgl-testimonials {
    /* 120, y acá el archivo casi acierta solo: dice 119.435 arriba y 120 abajo
       (157:1553). Esos 0.565 de diferencia son redondeo del auto-layout, no una
       decisión — y 120 es el ritmo que ya usan `Islands`, `Step-by-step` y
       `Homes`. */
    padding-block: 7.5rem;
    background: var(--tgl-bg-primary);
}

.tgl-testimonials .tgl-testimonials__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.875rem;                    /* 62 — 157:1553 */
}

/* ── El título ────────────────────────────────────────────────────────── */

.tgl-testimonials .tgl-testimonials__title {
    margin: 0;
    font-family: var(--tgl-font-heading);
    /* 42 en el archivo (157:1555), y acá **NO se normaliza a 44**.

       Es la excepción a la regla que vengo aplicando, y tiene una razón medida:
       el título son dos líneas con un corte elegido ("...long after" /
       "they've gone home.") dentro de 760px. A 44px el texto crece un 4.8% y el
       corte se mueve. Los 2px de diferencia contra `Islands`/`Homes` no se ven;
       un título que corta en otro lado sí.

       Los otros dos números tampoco son los de esas secciones y siguen al 42:
       tracking -0.63/42 = -0.015em contra -0.02em, y lh 47.88/42 = 1.14 contra
       1.12. */
    font-size: 2.625rem;              /* 42 — 157:1555 */
    font-weight: 500;
    letter-spacing: -0.015em;         /* -0.63 / 42 */
    line-height: 1.14;                /* 47.88 / 42 */
    text-align: center;
    color: var(--tgl-heading-color);
    /* 760 (157:1554). Es el ancho que produce el corte de dos líneas del
       archivo; sin el tope el título se estira a 1144 y queda en una sola. */
    max-width: 47.5rem;
}

/* ── Las cards ────────────────────────────────────────────────────────── */

.tgl-testimonials .tgl-testimonials__grid {
    /* `!important`: el kit de Elementor emite `.elementor-kit-6 ul` con
       `list-style` y `padding`, algunas con `!important`. Sin esto son tres
       citas con bullet y 40px de sangría. */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    /* Grilla y no flex, aunque el archivo diga flex (157:1556): con `flex` y
       `w-[362.66px]` fijo las tres cards no se adaptan, y la del medio del
       diseño tiene una cita de cinco líneas contra cuatro de las otras dos.
       `1fr` cada una las hace iguales de ancho, y `align-items: stretch` —el
       default— iguales de alto, que es lo que el archivo dibuja a mano con
       alturas fijas de 185.86 y 175.19. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;                     /* 28 — 157:1556 */
    width: 100%;
}

.tgl-testimonials .tgl-testimonials__card {
    display: flex;
    flex-direction: column;
    padding: 2.5625rem 2.1875rem;     /* 41 / 35 — 157:1557 */
    /* Ver el bloque de `subgrid` más abajo: en un navegador sin subgrid esto
       queda como está y el pie se apoya en el piso de la card. */
    /* El archivo dice 0.06 acá, 0.08 en la línea interna y 0.10 en el divisor
       de la prensa: tres alfas del mismo ink-900 sobre la misma decisión de
       "hairline". Las tres van al token que ya existe. Ver DIVERGENCIA 5. */
    border: 1px solid var(--tgl-card-border);
    border-radius: 0.5rem;            /* 8 — 157:1557 */
    background: var(--tgl-bg-primary);
}

/* Las tres cards comparten las filas, así el divisor del pie cae a la misma
   altura en las tres.

   **Por qué hace falta.** Con `flex: 1` en la cita el pie se apoya en el piso de
   la card, que es lo correcto mientras los tres pies midan lo mismo. No miden
   lo mismo: la línea "Stayed at …" tiene 232.66px de ancho útil (362.66 menos
   70 de padding, 46 del círculo y 14 de gap) y a 13.5px un nombre real como
   "Ocean Club Estates · Paradise Island" pide ~290. Envuelve en dos líneas, el
   pie pasa de 70 a 80.67, y el divisor de la card de nombre corto queda
   **10.67px más abajo** que el de sus vecinas. Medido en el harness: pies en
   552.61 / 541.94 / 541.94. Tres reglas horizontales a tres alturas distintas,
   una al lado de la otra, se leen como un error nuestro.

   Con 130 casas en el catálogo esto no es un caso borde: es el caso.

   **Por qué `subgrid` y no otra cosa.** No agrega ni saca nada del diseño —
   solo hace que las tres cards se pongan de acuerdo sobre dónde empieza cada
   banda, que es lo que el archivo dibuja a mano con alturas fijas. Truncar la
   línea del stay sería la otra salida y pierde justamente la isla, que es la
   mitad útil.

   **Colocación explícita** (`grid-row` en cada parte) y no auto-placement: una
   card con rating 0 no emite la fila de estrellas, y auto-colocada su cita
   caería en la fila 1 y el pie en la 2, desalineando esa card entera. Con las
   filas escritas, la 1 simplemente queda vacía en esa card.

   Sin soporte de `subgrid` la card sigue siendo el flex de arriba y el pie se
   apoya en el piso, que es lo que se venía sirviendo. */
@supports (grid-template-rows: subgrid) {

    @media (min-width: 1024px) {

        .tgl-testimonials .tgl-testimonials__grid {
            grid-template-rows: auto 1fr auto;
            /* Cicla la lista en las filas implícitas, así una segunda tanda de
               tres cards se alinea igual que la primera. */
            grid-auto-rows: auto 1fr auto;
            /* El 28 del archivo es **horizontal**: es el aire ENTRE cards
               (157:1556). En cuanto la grilla tiene filas, `gap` también las
               separa — y como cada card ocupa tres filas, esos 28 caen ADENTRO
               de cada card: dos gaps por card, +56px de alto y 28 de aire
               muerto entre las estrellas y la cita, y otros 28 arriba del
               divisor. Medido: la card pasó de 386.86 a 442.86.
               El ritmo vertical de la card ya lo dan los márgenes (21 abajo de
               las estrellas, 40 arriba del pie), así que acá el row-gap es 0. */
            column-gap: 1.75rem;
            row-gap: 0;
        }

        /* Y el aire entre DOS filas de cards, que el row-gap ya no da. Tres
           columnas, así que de la cuarta card en adelante es segunda fila. El
           diseño trae tres; esto existe porque el panel deja agregar más. */
        .tgl-testimonials .tgl-testimonials__card:nth-child(n + 4) {
            margin-top: 1.75rem;
        }

        .tgl-testimonials .tgl-testimonials__card {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
        }

        .tgl-testimonials .tgl-testimonials__stars  { grid-row: 1; }
        .tgl-testimonials .tgl-testimonials__quote  { grid-row: 2; }
        .tgl-testimonials .tgl-testimonials__author { grid-row: 3; }
    }
}

/* ── Las estrellas ── */

.tgl-testimonials .tgl-testimonials__stars {
    margin: 0 0 1.3125rem;            /* 21 — el pb-20 + 1 de 157:1558/1559 */
    font-family: var(--tgl-font-body);
    font-size: 0.875rem;              /* 14 — 157:1560 */
    /* 3px de tracking a 14px. Es mucho, y es a propósito: separa los cinco
       glifos para que se lean como una fila y no como una palabra. */
    letter-spacing: 0.214em;          /* 3 / 14 */
    line-height: 1;
    /* #fa8b50, que **ya existía**: es el naranja del CTA "Plan a trip"
       (304:2744). Mismo hex exacto, así que no hay un cuarto naranja. */
    color: var(--tgl-stars-color);
}

/* Las estrellas que faltan cuando el rating es menor que cinco. El diseño
   muestra cinco llenas en las tres cards, así que esto no se ve hoy — existe
   porque el rating es un campo, y un 4 tiene que leerse como 4 y no como una
   fila más corta. */
.tgl-testimonials .tgl-testimonials__stars-empty {
    opacity: 0.28;
}

/* ── La cita ── */

.tgl-testimonials .tgl-testimonials__quote {
    /* `blockquote` trae 40px de margen a cada lado del UA, y el kit de
       Elementor le suma su propio estilo de cita —borde a la izquierda y
       cursiva en algunos temas—. Reset explícito. */
    margin: 0;
    padding: 0;
    border: 0;
    /* Empuja el pie al piso de la card, que es lo que iguala la línea del autor
       en las tres cuando una cita tiene cinco líneas y otra cuatro. */
    flex: 1;
    font-style: normal;
}

.tgl-testimonials .tgl-testimonials__quote p {
    margin: 0;
    font-family: var(--tgl-font-heading);
    /* Raleway Regular a 19px (157:1563). Es la misma familia del nombre de las
       cards de casa, no la del cuerpo: una cita es voz, no párrafo. */
    font-size: 1.1875rem;             /* 19 */
    font-weight: 400;
    line-height: 1.55;                /* 29.45 / 19 */
    color: var(--tgl-quote-color);
}

/* ── El autor ── */

.tgl-testimonials .tgl-testimonials__author {
    display: flex;
    align-items: center;
    gap: 0.875rem;                    /* 14 — 157:1564 */
    margin-top: 2.5rem;               /* 40.7 — el pb del bloque de la cita */
    padding-top: 1.4375rem;           /* 23 — 157:1564 */
    border-top: 1px solid var(--tgl-card-border);
}

.tgl-testimonials .tgl-testimonials__avatar {
    /* `flex: none` es lo que evita que el círculo se achate cuando el nombre de
       la casa es largo — "Stayed at Cable Beach House · Nassau" envuelve en dos
       líneas y sin esto el avatar cede ancho. */
    flex: none;
    display: block;
    overflow: hidden;
    width: 2.875rem;                  /* 46 — 157:1565 */
    height: 2.875rem;
    border-radius: 50%;
}

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

/* El placeholder del diseño, que es lo que el archivo dibuja en las tres cards:
   un círculo de arena, sin foto. El gradiente del archivo son cuatro stops que
   repiten dos tonos cada 9.22% —un patrón de rayas que el auto-layout serializa
   así— y se simplifica a los dos tonos en 135deg: a 46px de diámetro las rayas
   no se distinguen, y el día que haya fotos reales esto no se ve más. */
.tgl-testimonials .tgl-testimonials__avatar--blank {
    background: linear-gradient(135deg, var(--tgl-avatar-from), var(--tgl-avatar-to));
}

.tgl-testimonials .tgl-testimonials__who {
    display: flex;
    flex-direction: column;
    /* `min-width: 0` para que un nombre largo pueda envolver en vez de
       desbordar la card: sin esto un item flex no baja de su ancho de
       contenido. */
    min-width: 0;
}

.tgl-testimonials .tgl-testimonials__name {
    font-family: var(--tgl-font-body);
    font-size: 0.84375rem;            /* 13.5 — 157:1567 */
    font-weight: 700;
    line-height: 1.4;                 /* 18.9 / 13.5 */
    color: var(--tgl-heading-color);
}

.tgl-testimonials .tgl-testimonials__stay {
    font-family: var(--tgl-font-body);
    font-size: 0.84375rem;            /* 13.5 */
    font-weight: 400;
    line-height: 1.4;
    color: var(--tgl-byline-color);
}

/* ── La banda de prensa ───────────────────────────────────────────────── */

.tgl-testimonials .tgl-testimonials__press {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;                      /* 24 — 157:1590 */
    width: 100%;
    padding-top: 2.9375rem;           /* 47 — 157:1590 */
    border-top: 1px solid var(--tgl-card-border);
}

.tgl-testimonials .tgl-testimonials__press-label {
    margin: 0;
    font-family: var(--tgl-font-body);
    font-size: 0.6875rem;             /* 11 — 157:1592 */
    font-weight: 600;
    letter-spacing: 0.2em;            /* 2.2 / 11 */
    line-height: normal;
    text-transform: uppercase;
    /* El archivo dice #a29a8d y esto es `--tgl-meta-color` (#9a9186): 8 puntos
       de diferencia, del lado equivocado de "se ve", y el mismo rol de texto
       terciario. Unificado. Ver DIVERGENCIA 4. */
    color: var(--tgl-meta-color);
}

.tgl-testimonials .tgl-testimonials__press-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* El archivo dice `0px 47.7px` — row-gap 0. A 1144 los cuatro títulos no
       envuelven nunca, así que ese 0 no se ve; en cuanto envuelven quedan dos
       filas pegadas. 47.7 en columna, 20 en fila. */
    gap: 1.25rem 2.98125rem;          /* 20 / 47.7 — 157:1593 */
}

.tgl-testimonials .tgl-testimonials__press-list li {
    font-family: var(--tgl-font-heading);
    /* Raleway Medium a 19px con 1.14 de tracking (157:1595). Los nombres de las
       publicaciones son TEXTO y no logos, y eso es una decisión del archivo que
       conviene respetar: cuatro logos en cuatro formatos distintos se ven peor
       que cuatro nombres en la misma tipografía. */
    font-size: 1.1875rem;             /* 19 */
    font-weight: 500;
    letter-spacing: 0.06em;           /* 1.14 / 19 */
    line-height: normal;
    text-align: center;
    color: var(--tgl-byline-color);
}

/* Solo para el lector de pantalla: el "5 out of 5 stars" de la fila de
   estrellas. Los glifos van `aria-hidden`, porque cinco estrellas anunciadas
   una por una son "estrella estrella estrella estrella estrella". */
.tgl-testimonials .tgl-testimonials__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

@media (max-width: 1023px) {

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

    .tgl-testimonials .tgl-testimonials__inner { gap: var(--tgl-space-10); }

    /* Una sola columna, y directo. Dos columnas dejarían una card sola en la
       segunda fila —son tres— y una cita de 19px en media columna de tablet
       queda en ocho líneas. */
    .tgl-testimonials .tgl-testimonials__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tgl-testimonials .tgl-testimonials__title {
        font-size: 2rem;
        /* El tope de 760 existe para forzar el corte de dos líneas a 42px. A
           32px en una columna angosta ya no hace más que estorbar. */
        max-width: none;
    }
}

@media (max-width: 599px) {

    .tgl-testimonials .tgl-testimonials__card {
        padding: var(--tgl-space-6) var(--tgl-space-5);
    }

    .tgl-testimonials .tgl-testimonials__quote p {
        font-size: 1.0625rem;         /* 17 */
    }

    /* Los cuatro títulos de prensa en 335px son tres o cuatro filas. Con el gap
       de columna en 20 entran dos por fila, que es una banda de dos renglones
       en vez de cuatro. */
    .tgl-testimonials .tgl-testimonials__press-list {
        gap: var(--tgl-space-3) var(--tgl-space-5);
    }

    .tgl-testimonials .tgl-testimonials__press-list li {
        font-size: 1rem;
    }
}