/* ==========================================================================
   ProcessSection — "Four steps to the good life"

   Figma `Step-by-step` (206:2), leído en Dev Mode el 2026-09-08. Cada número
   lleva al lado el nodo del que salió.

   EL ANCHO LO PONE `.tgl-container`, y esta sección no lo pisa.

   El archivo la dibuja más angosta —container 1120 en x=400, 32 de padding,
   1056 de contenido— pero esos 1056 son exactamente 4 cards de 249 con gaps de
   20: la SUMA de las cards, no un ancho elegido. Medidas las cuatro secciones:

       Islands        caja 1240, contenido 1144   <- exacto
       Homes          caja 1240, contenido 1144   <- exacto, idéntico
       Intro          contenido 1236 (3 x 412)    <- 4px de la guía
       Step-by-step   contenido 1056 (4 x 249)    <- ésta

   Dos secciones caen al pixel en 1240/1144: ése es el sistema, y las otras dos
   eran deriva de auto-layout. Tres containers que difieren menos del 8% no son
   tres niveles de jerarquía — son secciones que no alinean entre sí.

   Decisión del usuario, 2026-09-08: un solo container. Las cards pasan de 249 a
   271, que además les da aire — con 199px de texto estaban apretadas.
   ========================================================================== */

.tgl-process {
    padding-block: 7.5rem;            /* 120 — 206:189 */
}

.tgl-process .tgl-process__inner {
    display: flex;
    flex-direction: column;
    /* 56: del encabezado (termina en 204.6) al bloque de pasos (260.6). */
    gap: 3.5rem;
}

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

.tgl-process .tgl-process__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;                        /* 16.01 — 206:190 */
    text-align: center;
}

.tgl-process .tgl-process__eyebrow {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-size: 0.75rem;               /* 12 — 206:192 */
    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-process .tgl-process__title {
    margin: 0;
    /* DIVERGENCIA: este h2 va en **Outfit**, no en Raleway. El de `Islands`
       (157:1143) es Raleway Medium con EXACTAMENTE el mismo cuerpo, tracking e
       interlineado —44 / -0.88 / 49.28— y otra familia y otro peso. Dos h2 de
       sección que se ven casi iguales y no lo son. No se unifica en silencio:
       va a la lista de divergencias con las otras. */
    font-family: var(--tgl-font-display);
    font-size: 2.75rem;               /* 44 — 206:194 */
    font-weight: 400;
    letter-spacing: -0.02em;          /* -0.88 / 44 */
    line-height: 1.12;                /* 49.28 / 44 */
    color: var(--tgl-heading-color);
}

/* ── Pasos, cita y CTA ────────────────────────────────────────────────── */

.tgl-process .tgl-process__body {
    display: flex;
    flex-direction: column;
    /* 28: pasos -> cita (299 a 327) y cita -> CTA (453 a 481). */
    gap: 1.75rem;
}

.tgl-process .tgl-process__steps {
    /* `!important`: el kit de Elementor emite `.elementor-kit-6 ol` con
       `list-style` y `padding`, algunas con `!important`. Sin esto son cuatro
       cards con bullet y 40px de sangría. */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    /* 249 x 4 + 20 x 3 = 1056, que es el contenido exacto. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;                     /* 20 — 269 menos 249 (206:207) */
}

.tgl-process .tgl-process__step {
    display: flex;
    flex-direction: column;
    gap: 0.575rem;                    /* 9.2 — 206:197 */
    padding: 1.8125rem 1.5625rem;     /* 29 / 25 — 206:197 */
    /* El archivo le da 70.83 de padding abajo a la primera card, y eso NO es
       una decisión: es el auto-layout rellenando hasta los 299 fijos del frame.
       Acá lo hace la grilla —todas las cards toman el alto de la más alta— así
       que abajo va el mismo 29 que arriba. */
    background: var(--tgl-primitive-white);
    border: 1px solid var(--tgl-section-divider);
    border-radius: 0.75rem;           /* 12 — 206:197 */
}

/* El número lo pone el renderer, no un contador CSS.

   Fue un contador hasta el 2026-09-08, y por una buena razón: derivado del
   orden, no podía quedar en "1 3" si alguien borraba el paso del medio. Lo que
   cambió es que ahora el label se puede sobrescribir por paso —el usuario quería
   poder poner letras— y a un contador no se le puede pedir que diga "A".

   El argumento original se mantiene igual: `ProcessHtml` lo deriva del índice
   del array, no de algo que alguien tipea. Lo inseguro nunca fue el markup, fue
   que el número fuera CONTENIDO escrito a mano. */
.tgl-process .tgl-process__badge {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;                   /* 28 — 206:198 */
    height: 1.75rem;
    border-radius: 999px;
    background: var(--tgl-primitive-teal-500);
    color: var(--tgl-primitive-white);
    font-family: var(--tgl-font-display);
    font-size: 0.8125rem;             /* 13 — 206:199 */
    font-weight: 400;
    line-height: 1.55;                /* 20.15 / 13 */
}

/* ── La card destacada ────────────────────────────────────────────────── */

/* El diseño la pinta oscura con el badge naranja (206:227). Es una OPCIÓN por
   paso y no un `:last-child`: lo que la hace especial no es estar última, es ser
   el remate de la secuencia — y en cuanto la sección se reuse, eso puede caer en
   cualquier posición. */
.tgl-process .tgl-process__step--featured {
    background: var(--tgl-primitive-ink-teal-900);
    border-color: var(--tgl-primitive-ink-teal-900);
}

.tgl-process .tgl-process__step--featured .tgl-process__badge {
    background: var(--tgl-primitive-orange-badge);
    /* Tinta oscura sobre el naranja, no blanco (206:229): a 13px el blanco
       sobre #f5834a no llega al contraste que sí da este. */
    color: var(--tgl-primitive-ink-800);
}

.tgl-process .tgl-process__step--featured .tgl-process__step-title {
    color: var(--tgl-primitive-sand-50);          /* 206:231 */
}

.tgl-process .tgl-process__step--featured .tgl-process__step-body {
    color: rgba(243, 239, 231, 0.72);             /* 206:233 */
}

/* El link del cuerpo hereda el color, así que sobre oscuro se resuelve solo —
   pero el subrayado necesita seguir viéndose. */
.tgl-process .tgl-process__step--featured .tgl-process__step-body a {
    color: var(--tgl-primitive-sand-50);
}

.tgl-process .tgl-process__step-title {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-size: 1.1875rem;             /* 19 — 206:201 */
    font-weight: 400;
    letter-spacing: -0.02em;          /* -0.38 / 19 */
    line-height: 1.25;                /* 23.75 / 19 */
    color: var(--tgl-heading-color);
    padding-top: 0.48rem;             /* 7.675 — 206:200 */
}

.tgl-process .tgl-process__step-body {
    /* DESVIACIÓN DECIDIDA: el archivo pone este cuerpo en **Lato** (206:203),
       la cuarta familia del diseño. El plan §2.11 ya resolvió embarcar TRES
       —Raleway, Outfit, Open Sans— por decisión del usuario, así que Lato mapea
       a la familia de cuerpo. No es un descuido: está decidido y anotado. */
    font-family: var(--tgl-font-body);
    font-size: 0.90625rem;            /* 14.5 — 206:203 */
    line-height: 1.55;                /* 22.48 / 14.5 */
    color: var(--tgl-muted-color);
}

.tgl-process .tgl-process__step-body p { margin: 0 0 0.75em; }
.tgl-process .tgl-process__step-body p:last-child { margin-bottom: 0; }

/* El diseño subraya "this form" dentro de la frase (206:203). El link hereda el
   color del cuerpo en vez de pintarse de teal: es una palabra adentro de un
   párrafo, no un botón, y el subrayado ya dice que es clickeable. */
.tgl-process .tgl-process__step-body a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* ── La cita ──────────────────────────────────────────────────────────── */

.tgl-process .tgl-process__quote {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1.75rem;                     /* 28 — 206:785 */
    padding-block: 2.1875rem;         /* 35 — 206:785 */
    /* 0.25, no el 0.14 del resto de los divisores del rediseño (206:785). Es
       más marcado a propósito: acá las líneas ENCIERRAN la cita en vez de
       separar columnas. */
    border-block: 1px solid rgba(31, 29, 26, 0.25);
}

.tgl-process .tgl-process__avatar {
    flex: none;
    display: block;
    width: 3.5rem;                    /* 56 — 206:786 */
    height: 3.5rem;
    overflow: hidden;
    border-radius: 999px;
}

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

.tgl-process .tgl-process__quote-text {
    /* `blockquote` trae margen del user agent, y a veces borde del kit. */
    margin: 0;
    padding: 0;
    border: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--tgl-font-display);
    font-size: 1.625rem;              /* 26 — 206:788 */
    /* 300. Hasta el 2026-09-08 esto se clampeaba a 400, porque el `@font-face`
       de Outfit declaraba `400 700`; el eje estaba en el archivo y solo hacía
       falta ampliar el rango. Ver la nota en `tgl-fonts.css`. */
    font-weight: 300;
    line-height: 1.55;                /* 40.3 / 26 */
    color: var(--tgl-heading-color);
}

.tgl-process .tgl-process__quote-by {
    flex: none;
    display: flex;
    flex-direction: column;
    text-align: right;
    font-family: var(--tgl-font-display);
    font-size: 0.6875rem;             /* 11 — 206:790 */
    font-weight: 400;
    letter-spacing: 0.18em;           /* 1.98 / 11 */
    line-height: 1.8;                 /* 19.8 / 11 */
    text-transform: uppercase;
    color: var(--tgl-muted-color);
}

/* ── El CTA ───────────────────────────────────────────────────────────── */

/* El botón en sí es `.tgl-cta`, compartido con `Islands`: los dos nodos
   (206:240 y 206:895) son el mismo botón. Acá solo se centra. */
.tgl-process .tgl-process__foot {
    display: flex;
    justify-content: center;
}

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

@media (max-width: 1023px) {

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

    /* El `padding-inline` no se toca acá: lo pone `.tgl-container`, que ya lo
       achica en mobile por su cuenta. Pisarlo desde la sección volvería a
       partir el sistema en dos lugares. */
    .tgl-process .tgl-process__inner {
        gap: var(--tgl-space-10);
    }

    .tgl-process .tgl-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tgl-process .tgl-process__title { font-size: 2rem; }

    /* La cita se apila: a 1023 un texto de 26px entre un avatar y una firma
       queda en una columna de dos palabras por línea. */
    .tgl-process .tgl-process__quote {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--tgl-space-4);
    }

    .tgl-process .tgl-process__quote-by { text-align: left; }
}

@media (max-width: 767px) {

    .tgl-process .tgl-process__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .tgl-process .tgl-process__quote-text { font-size: 1.25rem; }
}