/* ==========================================================================
   ComparisonSection — "A once-a-year trip is too important to leave to luck."

   Figma `Section` (206:145), leído en Dev Mode el 2026-09-10.

   Este frame **no está escalado**: sus números son redondos (120, 56, 44, 34,
   24, 22, 17, 12), al revés que el de contacto, que venía a 80/81. Se
   implementa literal.

   DOS DIVERGENCIAS, las dos anotadas donde ocurren:

   1. **Lato no entra.** El archivo usa Lato para el lead y los ítems. El
      sistema tiene tres familias y este proyecto ya rechazó una cuarta dos
      veces —JetBrains Mono en el eyebrow del FAQ, Inter en el marcador— por la
      misma razón: son ~90KB más de woff2 en la página del LCP para un texto
      que Open Sans resuelve igual. Va la familia de cuerpo.

   2. **El ritmo de los ítems se unifica.** El archivo separa 46px en la card
      clara y 40 en la oscura, y les da alturas distintas (220 contra 255.8).
      Puestas una al lado de la otra en una grilla, las alturas se igualan
      solas y dos ritmos distintos se notan. Va 16 de gap, que es el valor
      explícito del frame `List` (206:172).
   ========================================================================== */

.tgl-comparison {
    padding-block: 7.5rem;                     /* 120 — 206:145, el ritmo de todas las secciones */
    background: #fff;
    font-family: var(--tgl-font-body, system-ui, sans-serif);
}

.tgl-comparison .tgl-comparison__inner {
    max-width: var(--tgl-container, 71.5rem);
    margin-inline: auto;
    padding-inline: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;                               /* 56 — 206:145 */
}

/* ── Encabezado ───────────────────────────────────────────────────────── */

.tgl-comparison .tgl-comparison__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.0625rem;                            /* 17.165 del archivo, redondeado */
    text-align: center;
}

.tgl-comparison .tgl-comparison__title {
    margin: 0;
    /* Outfit, no Raleway, y NO se normaliza. El plan tenía abierta la pregunta
       de si el heading de `Step-by-step` (206:194) en Outfit era deriva de una
       capa retipeada; éste tiene las métricas EXACTAMENTE iguales —44 /
       -0.88 / 49.28— en otra sección independiente. Dos coincidencias exactas
       ya no parecen un accidente. Queda como está y suma a esa pregunta. */
    font-family: var(--tgl-font-display, system-ui, sans-serif);
    font-weight: 400;
    font-size: var(--tgl-text-h2, 2.75rem);    /* 44 — 206:148 */
    line-height: 1.12;                         /* 49.28/44 */
    letter-spacing: var(--tgl-tracking-heading, -0.02em);  /* -0.88/44 */
    color: var(--tgl-heading-color, #1f1d1a);
}

.tgl-comparison .tgl-comparison__lead {
    margin: 0;
    max-width: 41.75rem;                       /* 668 — 206:150 */
    font-size: 1.0625rem;                      /* 17 — 206:150 */
    line-height: 1.55;                         /* 26.35/17 */
    color: var(--tgl-muted-color, #6b655c);
}

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

.tgl-comparison .tgl-comparison__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;                               /* 24 — 206:152 */
}

.tgl-comparison .tgl-comparison__card {
    padding: 2.125rem;                         /* 34 — 206:153 */
    border-radius: 12px;                       /* 206:153 */
}

.tgl-comparison .tgl-comparison__card--without {
    background: var(--tgl-comparison-muted-bg, rgba(31, 29, 26, .05));
}

.tgl-comparison .tgl-comparison__card--with {
    background: var(--tgl-comparison-card-bg, #0d3138);
}

.tgl-comparison .tgl-comparison__label {
    margin: 0 0 1.375rem;                      /* 22 — 206:153 */
    font-family: var(--tgl-font-display, system-ui, sans-serif);
    font-weight: 400;
    font-size: var(--tgl-text-eyebrow, .75rem);  /* 12 — 206:155 */
    line-height: 1.12;                         /* 13.44/12 */
    letter-spacing: .2em;                      /* 2.4/12 */
    text-transform: uppercase;
}

.tgl-comparison .tgl-comparison__card--without .tgl-comparison__label {
    color: var(--tgl-comparison-muted-label, #8a8175);
}

.tgl-comparison .tgl-comparison__card--with .tgl-comparison__label {
    color: var(--tgl-comparison-card-label, #6ecad4);
}

.tgl-comparison .tgl-comparison__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;                                 /* 16 — 206:172 */
}

.tgl-comparison .tgl-comparison__list li {
    display: grid;
    /* La columna del glifo mide 20 en el archivo (206:158) y el texto arranca
       a 34, así que el hueco es 14. */
    grid-template-columns: 20px minmax(0, 1fr);
    gap: .875rem;                              /* 14 — 206:157 */
    font-size: 1.0625rem;                      /* 17 — 206:160 */
    line-height: 1.4;                          /* 23.8/17 */
}

/* El glifo va en `::before` y no en el texto: un lector de pantalla tiene que
   anunciar tres ítems, no "signo de multiplicación, un alquiler genérico…".
   Lo que los glifos significan lo dice el heading de cada columna. */
.tgl-comparison .tgl-comparison__list li::before {
    font-family: var(--tgl-font-display, system-ui, sans-serif);
    line-height: inherit;
}

.tgl-comparison .tgl-comparison__card--without .tgl-comparison__list li {
    color: var(--tgl-muted-color, #6b655c);
}

.tgl-comparison .tgl-comparison__card--without .tgl-comparison__list li::before {
    content: "\2715";                          /* ✕ — 206:159 */
    color: var(--tgl-comparison-cross, #a49c8f);
}

.tgl-comparison .tgl-comparison__card--with .tgl-comparison__list li {
    color: var(--tgl-comparison-card-text, #f3efe7);
}

.tgl-comparison .tgl-comparison__card--with .tgl-comparison__list li::before {
    content: "\25C6";                          /* ◆ — 206:175 */
    color: var(--tgl-comparison-diamond, #fa8b50);
}

/* ── El cierre ────────────────────────────────────────────────────────── */

.tgl-comparison .tgl-comparison__closing {
    margin: 0;
    text-align: center;
    font-family: var(--tgl-font-display, system-ui, sans-serif);
    font-size: 1.25rem;                        /* 20 — 206:186 */
    line-height: 1.55;                         /* 31/20 */
    color: var(--tgl-heading-color, #1f1d1a);
}

.tgl-comparison .tgl-comparison__link {
    color: var(--tgl-comparison-link, #0e8595);
    text-decoration: none;
    /* El archivo dibuja el subrayado como un borde al 40% (206:187), separado
       del texto. `text-decoration-color` diría casi lo mismo con menos markup,
       pero pegado a las letras. */
    border-bottom: 1px solid color-mix(in srgb, var(--tgl-comparison-link, #0e8595) 40%, transparent);
    padding-bottom: .125rem;
}

.tgl-comparison .tgl-comparison__link:hover,
.tgl-comparison .tgl-comparison__link:focus-visible {
    border-bottom-color: currentColor;
}

/* ── Ancho ────────────────────────────────────────────────────────────── */

@media (min-width: 48rem) {

    .tgl-comparison .tgl-comparison__grid {
        /* Dos columnas iguales: 516 + 24 + 516 = 1056 en el archivo (206:152). */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

@media (max-width: 47.9375rem) {

    .tgl-comparison {
        padding-block: var(--tgl-space-12, 4rem);
    }

    .tgl-comparison .tgl-comparison__title {
        font-size: 2rem;                       /* 32 — el mismo escalón que toman Testimonials, FAQ y Contacto */
    }

    .tgl-comparison .tgl-comparison__card {
        padding: 1.5rem 1.25rem;
    }

    .tgl-comparison .tgl-comparison__closing {
        font-size: 1.0625rem;
    }
}