/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-cyrillic-ext-400-normal.BQZuk6qB.woff2) format('woff2'), url(/_astro/inter-cyrillic-ext-400-normal.DQukG94-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-cyrillic-400-normal.obahsSVq.woff2) format('woff2'), url(/_astro/inter-cyrillic-400-normal.HOLc17fK.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-greek-ext-400-normal.DGGRlc-M.woff2) format('woff2'), url(/_astro/inter-greek-ext-400-normal.KugGGMne.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-greek-400-normal.B4URO6DV.woff2) format('woff2'), url(/_astro/inter-greek-400-normal.q2sYcFCs.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-vietnamese-400-normal.DMkecbls.woff2) format('woff2'), url(/_astro/inter-vietnamese-400-normal.Bbgyi5SW.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-ext-400-normal.C1nco2VV.woff2) format('woff2'), url(/_astro/inter-latin-ext-400-normal.77YHD8bZ.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/inter-latin-400-normal.C38fXH4l.woff2) format('woff2'), url(/_astro/inter-latin-400-normal.CyCys3Eg.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-cyrillic-ext-500-normal.B0yAr1jD.woff2) format('woff2'), url(/_astro/inter-cyrillic-ext-500-normal.BmqWE9Dz.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-cyrillic-500-normal.BasfLYem.woff2) format('woff2'), url(/_astro/inter-cyrillic-500-normal.CxZf_p3X.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-greek-ext-500-normal.C4iEst2y.woff2) format('woff2'), url(/_astro/inter-greek-ext-500-normal.2j5mBUwD.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-greek-500-normal.BIZE56-Y.woff2) format('woff2'), url(/_astro/inter-greek-500-normal.Xzm54t5V.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-vietnamese-500-normal.DOriooB6.woff2) format('woff2'), url(/_astro/inter-vietnamese-500-normal.mJboJaSs.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-latin-ext-500-normal.CV4jyFjo.woff2) format('woff2'), url(/_astro/inter-latin-ext-500-normal.BxGbmqWO.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/inter-latin-500-normal.Cerq10X2.woff2) format('woff2'), url(/_astro/inter-latin-500-normal.BL9OpVg8.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-cyrillic-ext-600-normal.Dfes3d0z.woff2) format('woff2'), url(/_astro/inter-cyrillic-ext-600-normal.Bcila6Z-.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-cyrillic-600-normal.CWCymEST.woff2) format('woff2'), url(/_astro/inter-cyrillic-600-normal.4D_pXhcN.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-greek-ext-600-normal.DRtmH8MT.woff2) format('woff2'), url(/_astro/inter-greek-ext-600-normal.B8X0CLgF.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-greek-600-normal.plRanbMR.woff2) format('woff2'), url(/_astro/inter-greek-600-normal.BZpKdvQh.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-vietnamese-600-normal.Cc8MFFhd.woff2) format('woff2'), url(/_astro/inter-vietnamese-600-normal.BuLX-rYi.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-ext-600-normal.D2bJ5OIk.woff2) format('woff2'), url(/_astro/inter-latin-ext-600-normal.CIVaiw4L.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/_astro/inter-latin-600-normal.LgqL8muc.woff2) format('woff2'), url(/_astro/inter-latin-600-normal.CiBQ2DWP.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-cyrillic-ext-700-normal.BjwYoWNd.woff2) format('woff2'), url(/_astro/inter-cyrillic-ext-700-normal.LO58E6JB.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-cyrillic-700-normal.CjBOestx.woff2) format('woff2'), url(/_astro/inter-cyrillic-700-normal.DrXBdSj3.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-greek-ext-700-normal.qfdV9bQt.woff2) format('woff2'), url(/_astro/inter-greek-ext-700-normal.BoQ6DsYi.woff) format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-greek-700-normal.C3JjAnD8.woff2) format('woff2'), url(/_astro/inter-greek-700-normal.BUv2fZ6O.woff) format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-vietnamese-700-normal.DlLaEgI2.woff2) format('woff2'), url(/_astro/inter-vietnamese-700-normal.BZaoP0fm.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-latin-ext-700-normal.Ca8adRJv.woff2) format('woff2'), url(/_astro/inter-latin-ext-700-normal.TidjK2hL.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/_astro/inter-latin-700-normal.Yt3aPRUw.woff2) format('woff2'), url(/_astro/inter-latin-700-normal.BLAVimhd.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ==========================================================================
   Breeze Lingo · tokens
   Único lugar donde vive el look. Ninguna sección puede llevar literales.
   Valores tomados verbatim del .fig; la columna «colapsa» documenta la
   unificación de escala acordada (§7 del contrato).
   ========================================================================== */

:root {
  /* ---- Marca -------------------------------------------------------- */
  --bz-brand: rgb(61, 217, 179);          /* 363 usos en el archivo */
  --bz-brand-hover: rgb(31, 142, 114);    /* estado del set de Botón */
  --bz-brand-press: rgb(20, 112, 91);
  --bz-brand-soft: rgb(212, 242, 232);    /* disabled / relleno suave */

  /* ---- Verde de acento (texto y detalles) --------------------------- */
  /* colapsa rgb(15,110,87) · rgb(18,165,117) · rgb(30,158,124) · rgb(44,193,156) */
  --bz-accent: rgb(15, 110, 87);

  /* ---- Tinta y texto ------------------------------------------------ */
  /* colapsa rgb(18,32,44) · rgb(26,35,50) · rgb(15,26,36) · rgb(22,24,29) · rgb(14,26,32) */
  --bz-ink: rgb(18, 32, 44);
  /* colapsa rgb(74,86,104) · rgb(74,85,104) · rgb(74,86,106) · rgb(86,96,114) · rgb(58,69,83) */
  --bz-text: rgb(74, 86, 104);
  /* colapsa rgb(136,148,168) · rgb(107,122,137) · rgb(138,141,151) · rgb(102,112,133) */
  --bz-muted: rgb(136, 148, 168);
  --bz-muted-ink: rgb(98, 110, 129);      /* aviso de contenido pendiente, ≈5,2:1 */
  --bz-ink-deep: rgb(15, 42, 34);         /* texto sobre menta */

  /* ---- Superficies -------------------------------------------------- */
  --bz-surface: rgb(255, 255, 255);
  --bz-bg: rgb(247, 250, 249);            /* los dos únicos fondos (§2) */
  --bz-mint-050: rgb(241, 248, 245);      /* fondo de tarjeta de la sección 06 */
  --bz-mint-100: rgb(232, 249, 243);
  --bz-mint-200: rgb(212, 242, 232);
  --bz-mint-250: rgb(182, 242, 221);      /* pastilla de icono, verbatim */
  --bz-mint-300: rgb(168, 235, 216);
  --bz-night: rgb(14, 26, 32);            /* secciones oscuras */
  --bz-night-2: rgb(11, 39, 33);          /* banda de Reconocimientos, inicio */
  --bz-night-3: rgb(5, 16, 18);           /* banda de Reconocimientos, fin */
  --bz-violet: rgb(124, 108, 232);        /* mancha lila del archivo */

  /* ---- Bordes ------------------------------------------------------- */
  /* colapsa rgb(233,238,243) · rgb(229,236,240) · rgb(232,237,240) · rgb(237,241,245) */
  --bz-border: rgb(233, 238, 243);

  /* ---- Semánticos --------------------------------------------------- */
  --bz-danger: rgb(239, 107, 86);
  --bz-danger-soft: rgb(255, 239, 237);   /* fondo de la píldora En vivo */
  --bz-danger-ink: rgb(197, 74, 55);      /* su texto, ≈4,6:1 sobre el fondo */
  --bz-live: rgb(255, 107, 97);           /* punto de estado en vivo, verbatim */
  /* Medallas del podio: los tres salen de la paleta, ninguno es nuevo.
     Oro = --bz-warning; plata = --bz-punto; bronce = --bz-warning al 45 %
     sobre blanco, el único derivado, y queda anotado en el LEEME (§7). */
  --bz-oro: var(--bz-warning);
  /* Canto y brillo de la moneda: los dos derivados de --bz-warning (§7) */
  --bz-oro-canto: color-mix(in srgb, var(--bz-warning) 70%, var(--bz-ink));
  --bz-oro-luz: color-mix(in srgb, var(--bz-warning) 45%, var(--bz-surface));
  --bz-plata: var(--bz-punto);
  --bz-bronce: color-mix(in srgb, var(--bz-warning) 45%, var(--bz-surface));
  --bz-warning: rgb(245, 166, 35);
  --bz-trust: rgb(0, 182, 122);           /* verde de Trustpilot */

  /* ---- Sobre fondo oscuro ------------------------------------------ */
  --bz-on-night: rgb(255, 255, 255);
  --bz-on-night-soft: rgba(255, 255, 255, 0.72);
  --bz-on-night-mute: rgba(255, 255, 255, 0.28);
  --bz-cristal-noche: rgba(255, 255, 255, 0.06); /* panel de cristal sobre oscuro */
  --bz-cristal-claro: rgba(255, 255, 255, 0.75); /* panel esmerilado sobre banda oscura */
  --bz-cristal-fila: rgba(255, 255, 255, 0.7);   /* sus filas */
  /* Pastilla de cristal: velo, filo y canto */
  --bz-cristal-alto: rgba(255, 255, 255, 0.55);
  --bz-cristal-bajo: rgba(255, 255, 255, 0.18);
  --bz-cristal-filo: rgba(255, 255, 255, 0.75);
  --bz-cristal-canto: color-mix(in srgb, var(--bz-accent) 18%, transparent);

  /* ---- Tipografía --------------------------------------------------- */
  --bz-font-title: "Poppins", "Poppins Local", system-ui, -apple-system, sans-serif;
  --bz-font-body: "Inter", "Inter Local", system-ui, -apple-system, sans-serif;

  --bz-weight-regular: 400;
  --bz-weight-medium: 500;
  --bz-weight-semibold: 600;
  --bz-weight-bold: 700;

  /* Una sola escala para todo el sitio. Los títulos con clamp(). */
  --bz-size-display: clamp(34px, 4.4vw, 56px);
  --bz-size-h1: clamp(30px, 3.6vw, 46px);
  --bz-size-h2: clamp(26px, 2.6vw, 34px);      /* titular de sección: 34 en el archivo */
  --bz-size-h2-lg: clamp(28px, 3.2vw, 40px);  /* titulares que sí van a 40 */
  --bz-size-h2-cta: clamp(28px, 3.4vw, 36px); /* titular del CTA final */
  --bz-size-h3: clamp(19px, 1.6vw, 22px);
  --bz-size-h3-lg: clamp(22px, 2.4vw, 28px);  /* titular de sección menor */
  --bz-size-h4: 18px;
  --bz-size-h4-sm: 17px;     /* título de tarjeta del archivo */
  --bz-size-lead: 17px;
  --bz-size-entrada: 16px;      /* entrada del CTA, verbatim del archivo */
  --bz-size-entrada-sm: 14px;   /* entrada de sección menor */
  --bz-size-body: 15px;
  --bz-size-sm: 13.5px;
  --bz-size-sm-plus: 13px;   /* rótulos del panel de ranking */
  --bz-size-xs: 12.5px;
  --bz-size-2xs: 11px;
  --bz-size-3xs: 9.5px;      /* rótulos minúsculos de panel */
  --bz-size-comilla: 70px;   /* la comilla decorativa de la cita */
  --bz-size-faq: 16.5px;     /* pregunta del acordeón */

  --bz-leading-tight: 1.14;
  --bz-leading-snug: 1.3;
  --bz-leading-normal: 1.55;
  --bz-leading-entrada: 1.5;
  --bz-leading-loose: 1.65;
  --bz-leading-comilla: 0.6;

  --bz-tracking-tight: -0.02em;
  --bz-tracking-wide: 0.06em;
  --bz-tracking-wider: 0.1em;

  /* Medida de párrafo en ch, no en px (§7) */
  --bz-measure: 56ch;
  --bz-measure-narrow: 46ch;
  --bz-measure-corto: 30ch;
  --bz-measure-lema: 26ch;   /* el lema del pie */
  --bz-measure-cta: 520px;   /* la entrada del CTA, verbatim del archivo */

  /* ---- Espaciado · base 4 px --------------------------------------- */
  --bz-space-1: 4px;
  --bz-space-2: 8px;
  --bz-space-3: 12px;
  --bz-space-4: 16px;
  --bz-space-5: 20px;
  --bz-space-6: 24px;
  --bz-space-7: 28px;
  --bz-space-8: 32px;
  --bz-space-10: 40px;
  --bz-space-12: 48px;
  --bz-space-14: 56px;
  --bz-space-16: 64px;
  --bz-space-20: 80px;
  --bz-space-24: 96px;

  /* Aire vertical de sección: se encoge en móvil sin media query */
  --bz-section-y: clamp(var(--bz-space-14), 7vw, var(--bz-space-24));

  /* ---- Contenedor -------------------------------------------------- */
  /* Alto de la cabecera: el hero sube por detrás justo esta medida */
  --bz-nav-alto: 84px;
  --bz-container: 1200px;
  --bz-container-estrecho: 880px;   /* columna de preguntas y textos largos */
  --bz-col-pie: 160px;              /* columna mínima del pie */
  --bz-col-practicar: 280px;        /* tarjeta de Más formas de practicar */
  --bz-col-boton: 140px;            /* botón del alta */
  --bz-col-nivel: 122px;            /* bloque de nivel actual */
  --bz-col-clase: 150px;            /* datos de la clase en vivo */
  --bz-col-hora: 44px;              /* hora en la agenda de comunidad */
  --bz-col-dato: 40px;              /* dato de métrica */
  --bz-gutter: clamp(var(--bz-space-4), 4vw, var(--bz-space-20));

  /* ---- Radios ------------------------------------------------------ */
  --bz-radius-sm: 8px;
  --bz-radius-md: 12px;          /* botones, según el set de Botón */
  --bz-radius-lg: 16px;
  --bz-radius-xl: 20px;
  --bz-radius-2xl: 24px;
  --bz-radius-3xl: 32px;
  --bz-radius-pill: 999px;
  --bz-radius-insignia: 18px;   /* tarjeta de insignia del archivo */
  --bz-radius-eyebrow: 13px;    /* píldora de sección del archivo */
  --bz-radius-badge-cta: 11px;  /* insignia Speak to Earn */
  --bz-radius-fila: 14px;       /* fila del ranking */
  --bz-radius-campo: 11px;      /* campo de formulario del archivo */
  --bz-radius-icono: 14px;      /* pastilla de icono de 54 px */
  --bz-radius-badge: 10px;      /* la imagen dentro de la insignia */
  --bz-radius-capsula: 75px;    /* mancha con forma de cápsula */
  --bz-radius-banda: clamp(28px, 3.2vw, 46px); /* radio 46 justo a 1440 */

  /* ---- Sombras ----------------------------------------------------- */
  --bz-shadow-sm: 0 2px 6px rgba(15, 38, 31, 0.08);
  --bz-shadow-md: 0 8px 24px rgba(15, 38, 31, 0.1);
  --bz-shadow-lg: 0 12px 32px rgba(15, 26, 38, 0.12);
  --bz-shadow-xl: 0 22px 48px rgba(15, 26, 38, 0.16);
  --bz-shadow-brand: 0 8px 20px rgba(61, 217, 179, 0.35);
  --bz-shadow-brand-hover: 0 10px 24px rgba(31, 142, 114, 0.38);
  --bz-shadow-insignia: 0 10px 26px rgba(0, 0, 0, 0.22);
  --bz-shadow-foto: 0 18px 44px rgba(0, 0, 0, 0.3);
  --bz-shadow-cristal: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 14px 36px rgba(0, 0, 0, 0.24);
  /* Proyección de los paneles del hero: como si salieran de la pantalla */
  --bz-panel-alto: 14px;
  --bz-panel-difuso: 34px;
  --bz-panel-sombra: color-mix(in srgb, var(--bz-ink) 18%, transparent);
  --bz-ring-claro: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  --bz-halo-menta: 0 0 60px 8px rgba(0, 251, 190, 0.42); /* halo del archivo */
  --bz-halo-marca: 0 0 44px rgba(61, 217, 179, 0.45);    /* halo de la cita destacada */
  --bz-halo-faq: 0 0 24px rgba(61, 217, 179, 0.5);       /* halo de la pregunta abierta */
  --bz-ring: inset 0 0 0 1px var(--bz-border);
  --bz-ring-frio: inset 0 0 0 1px rgb(229, 236, 240); /* filo de tarjeta de producto */
  --bz-ring-brand: inset 0 0 0 1.5px var(--bz-brand);

  /* ---- Curvas y duraciones ----------------------------------------- */
  --bz-ease: cubic-bezier(0.2, 0, 0, 1);            /* una sola familia */
  --bz-ease-bounce: cubic-bezier(0.5, 1.6, 0.4, 1); /* solo micro-momentos */
  /* El cometa acelera al salir y frena al llegar: una curva simétrica lo
     haría ver como un bloque a velocidad constante. */
  --bz-ease-viaje: cubic-bezier(0.45, 0.05, 0.25, 1);

  --bz-dur-press: 120ms;
  --bz-dur-hover: 120ms;
  --bz-dur-panel: 200ms;
  --bz-dur-modal: 320ms;
  --bz-dur-card: 400ms;
  --bz-dur-reveal: 600ms;
  --bz-reveal-stagger: 85ms;

  /* Bucles ambientales: ciclos largos y distintos entre sí, para que no se
     lea la repetición (§3). */
  --bz-dur-ambient-1: 26s;
  --bz-dur-ambient-2: 21s;
  --bz-dur-ambient-3: 34s;
  --bz-dur-aurora-1: 42s;   /* velos de la aurora: ciclos largos y distintos */
  --bz-dur-aurora-2: 56s;
  --bz-dur-aurora-3: 68s;
  --bz-dur-aurora-4: 84s;   /* la banda va aún más lenta que el panel */
  --bz-dur-brisa-1: 26s;    /* velos que cruzan el pie */
  --bz-dur-brisa-2: 34s;
  --bz-dur-brisa-3: 44s;
  --bz-dur-onda: 1s;        /* base de la onda de audio */
  --bz-dur-pulso: 2s;       /* punto de En vivo */
  --bz-dur-moneda: 3.2s;    /* giro de la moneda de Speak to Earn */
  --bz-dur-viaje: 5.2s;     /* recorrido de la luz del paso 1 al 3 */
  --bz-dur-ui: 7.5s;        /* ciclo de la UI animada de los pasos */
  --bz-dur-flota-1: 7s;
  --bz-dur-flota-2: 9s;
  --bz-dur-flota-3: 8s;
  --bz-delay-flota: 1s;

  /* ---- Desenfoque -------------------------------------------------- */
  --bz-blur-mancha: 16px;
  --bz-blur-cristal: 18px;
  --bz-blur-esmerilado: 24px;  /* panel del CTA */
  --bz-blur-vidrio: 6px;       /* pastilla de cristal del icono */
  --bz-blur-banda: 34px;   /* manchas grandes de una banda oscura */
  --bz-blur-aurora: 42px;     /* velos de luz tras el cristal */
  --bz-blur-aurora-xl: 90px;  /* los de la banda, mucho más difusos */
  --bz-blur-brisa: 56px;      /* nubes del pie */
  --bz-blur-halo: 10px;       /* halo del icono de practicar */

  /* ---- Desplazamientos de estado ----------------------------------- */
  --bz-lift: -6px;         /* hover de tarjeta */
  --bz-lift-corto: -3px;   /* hover de una insignia */
  --bz-lift-flota: -11px;  /* bucle de los paneles del hero */
  --bz-rise: 8px;          /* entrada corta de un panel */
  --bz-rise-reveal: 18px;  /* subida de la entrada al scroll */
  --bz-press: 0.98;        /* press de botón */
  --bz-zoom: 1.03;         /* hover de imagen */
  --bz-drift-scale: 1.08;  /* respiración de la mancha en su bucle */
  --bz-drift-x: 4%;
  --bz-drift-y: -3%;
  --bz-drift-rot: 6deg;
  --bz-onda-min: 0.3;      /* altura mínima de la barra de audio */
  --bz-onda-barra: 3px;    /* ancho de la barra: fija y estrecha, no elástica */
  --bz-onda-corta: 68px;   /* onda pequeña de la píldora Micro activo */

  /* ---- Tamaños de mancha y rótulo ---------------------------------- */
  --bz-mancha-size: 15rem;
  --bz-velo-size: 26rem;   /* lado del velo de la aurora */
  --bz-velo-op: 0.5;         /* su intensidad tras el cristal */
  --bz-velo-size-xl: 46rem;  /* velo de la banda */
  --bz-velo-op-banda: 0.32;  /* más tenue: debajo va texto */
  --bz-brisa-alto: 420px;    /* franja donde vive la brisa */
  --bz-moneda: 18px;             /* diámetro de la moneda */
  --bz-moneda-perspectiva: 60px; /* profundidad de su giro */
  --bz-panel-foto-w: 470px; /* ancho máximo de la foto del hero */
  --bz-rotulo-w: 6.5rem;
  --bz-rotulo-w-sm: 5.5rem;
  --bz-icono-caso: 54px;   /* pastilla de icono de la sección 05 */
  --bz-icono-practicar: 64px;
  --bz-circulo-1: 51px;    /* círculos dentro de la pastilla, verbatim */
  --bz-circulo-2: 46px;
  --bz-paso: 56px;         /* cuadrado del número de paso */
  --bz-rotulo-metrica: 78px;
  --bz-video-w: 175px;
  --bz-video-h: 115px;
  --bz-via: 4px;           /* grosor de la vía entre pasos */
  --bz-sable: 52px;        /* alto del cometa */
  --bz-halo-paso: 14px;    /* expansión del halo al llegar la luz */
  --bz-resplandor: 3px;    /* cuánto desborda el cometa a los lados */
  --bz-paso-perspectiva: 180px;
  --bz-paso-giro: 8deg;    /* inclinación de la cara del número */
  --bz-paso-alto: 4px;     /* grosor del canto inferior */
  --bz-paso-hundido: 2px;  /* cuánto se hunde al pasar la luz */
  --bz-cursor: 1.5px;      /* barra del cursor que escribe */
  --bz-halo-desborde: 10px;
  --bz-avatar: 52px;       /* cara de asistente en Speaking Room */
  --bz-tarjeta-cita: min(384px, 86vw);     /* ancho de la tarjeta de testimonio */
  --bz-punto: rgb(203, 216, 212);          /* punto inactivo del carrusel */
  --bz-circulo-verde: rgba(61, 217, 179, 0.35);
  --bz-circulo-menta: rgba(143, 232, 210, 0.5);
  --bz-riel: rgb(237, 241, 245);           /* riel de barra de progreso */
  --bz-via-color: color-mix(in srgb, var(--bz-brand) 34%, transparent);
  --bz-via-fuerte: color-mix(in srgb, var(--bz-brand) 62%, transparent);
  --bz-via-halo: color-mix(in srgb, var(--bz-brand) 50%, transparent);
  --bz-via-estela: color-mix(in srgb, var(--bz-brand) 28%, transparent);
  /* Relieve del número: todos derivados de --bz-accent (§7) */
  --bz-paso-luz: color-mix(in srgb, var(--bz-accent) 72%, var(--bz-brand));
  --bz-paso-sombra: color-mix(in srgb, var(--bz-accent) 78%, var(--bz-ink));
  --bz-paso-base: color-mix(in srgb, var(--bz-accent) 55%, var(--bz-ink));
  --bz-paso-brillo: color-mix(in srgb, var(--bz-brand) 45%, transparent);
  --bz-paso-canto: color-mix(in srgb, var(--bz-ink) 25%, transparent);
  --bz-paso-proyeccion: color-mix(in srgb, var(--bz-accent) 28%, transparent);
  --bz-cometa: color-mix(in srgb, var(--bz-mint-300) 90%, var(--bz-surface));
  --bz-estrella-media: 45%;                /* recorte de la estrella parcial */
  --bz-trazo: 2px;                         /* grosor del signo + / − */
  --bz-pulso-escala: 2.6;                  /* expansión del anillo que late */
  --bz-pulso-op: 0.65;                     /* su opacidad inicial */
  --bz-insignia: 108px;    /* lado de la tarjeta de insignia */
  --bz-insignia-sm: 88px;

  /* ---- Banda de Reconocimientos, verbatim del frame ---------------- */
  --bz-angulo-panel: 140deg;  /* panel oscuro de la sección 06 */
  --bz-angulo-banda: 105.267deg;
  --bz-stop-banda-1: 4.6%;
  --bz-stop-banda-2: 80.92%;

  /* ---- Foco -------------------------------------------------------- */
  --bz-foco-grosor: 3px;     /* anillo de foco (§11: 3-4 px) */
  --bz-focus-offset: 2px;

  /* ---- Objetivo táctil mínimo ------------------------------------- */
  --bz-tap: 44px;
}
/* ==========================================================================
   Breeze Lingo · base
   Reset, tipografía, contenedor, foco e infraestructura de reveal.
   Sin literales: todo sale de tokens.css.
   ========================================================================== */

/* ---- Fuentes auto-alojadas ---------------------------------------------
   PENDIENTE: falta que nos pasen Poppins e Inter en .woff2 (ver LEEME.md).
   Mientras no estén, el navegador cae a la pila de sistema, sin CDN.
   Aeonik sí está, pero en .ttf. Descomentar cuando lleguen los .woff2.

@font-face {
  font-family: "Inter Local";
  src: url("fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins Local";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bz-bg);
  color: var(--bz-ink);
  font-family: var(--bz-font-body);
  font-size: var(--bz-size-body);
  line-height: var(--bz-leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--bz-accent);
  text-decoration: none;
  transition: color var(--bz-dur-hover) var(--bz-ease);
}

a:hover {
  color: var(--bz-brand-hover);
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---- Foco visible: siempre, nunca outline:none a secas ----------------
   Va con outline, no con box-shadow: el anillo por sombra tiene la misma
   especificidad que cualquier .clase { box-shadow } de una sección, y como
   esas hojas se cargan después, lo borraban. Con outline no compite: queda
   garantizado en todas las secciones sin tocar ninguna. */
:focus-visible {
  outline: var(--bz-foco-grosor) solid var(--bz-brand);
  outline-offset: var(--bz-focus-offset);
}

/* Sobre fondo oscuro el verde de marca no destaca: se usa el blanco */
.cta :focus-visible,
.reconocimientos__banda :focus-visible,
.plataforma__item--evaluacion :focus-visible {
  outline-color: var(--bz-on-night);
}

/* ---- Contenedor: el color va en la sección, el ancho acá (§2) --------- */
.bz-section {
  width: 100%;
}

.bz-container {
  max-width: var(--bz-container);
  margin: 0 auto;
  padding-inline: var(--bz-gutter);
}

.bz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Entradas al hacer scroll ----------------------------------------
   Marcado con data-reveal. El JS añade .bz-reveal-armed para que el
   estado oculto solo exista si el JS corre: sin JS se ve todo.          */
[data-reveal].bz-reveal-armed {
  opacity: 0;
  transform: translateY(var(--bz-rise-reveal));
}

/* La entrada va SIEMPRE por animation, nunca por transition: la clase
   .bz-reveal-in es permanente, y un transition acá anularía el transition
   propio de cualquier sección revelada (el hover de una tarjeta, por
   ejemplo). Con animation eso no puede pasar en ninguna sección. */
[data-reveal].bz-reveal-in {
  opacity: 1;
  transform: none;
  animation: bz-entra var(--bz-dur-reveal) var(--bz-ease) both;
}

/* ---- Escalonado entre hermanos --------------------------------------
   Va por animation, no por transition-delay: el transition de la sección
   (hover de tarjeta, por ejemplo) lo pisaba por especificidad, y un
   delay en transition además se filtraba al hover. Con animation no hay
   colisión posible y el retardo solo afecta a la entrada.
   Los hermanos tienen que llevar data-reveal ellos mismos; el padre solo
   marca el grupo con data-reveal-stagger para que reveal.js los indexe. */
/* El escalonado solo aporta el retardo; la animación ya viene de arriba. */
[data-reveal-stagger] > [data-reveal].bz-reveal-in {
  animation-delay: calc(var(--bz-reveal-i, 0) * var(--bz-reveal-stagger));
}

@keyframes bz-entra {
  from {
    opacity: 0;
    transform: translateY(var(--bz-rise-reveal));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal],
  [data-reveal].bz-reveal-armed {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ==========================================================================
   Breeze Lingo · NAVBAR
   Prefijo .nav__*. Sin literales: todo desde tokens.css.
   backdrop-filter en .nav__barra: ningún ancestro lleva filter, transform ni
   will-change, así que el desenfoque de fondo funciona (§3).
   ========================================================================== */

/* Sin fondo propio: lo que se ve detrás de la pastilla es el de la sección
   que hay debajo, así el color del hero llega hasta arriba. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: var(--bz-space-4);
  padding-inline: var(--bz-gutter);
  background: transparent;
}

/* ---- Saltar al contenido: visible solo con teclado -------------------- */
.nav__salto {
  position: absolute;
  left: var(--bz-space-4);
  top: var(--bz-space-4);
  z-index: 70;
  padding: var(--bz-space-3) var(--bz-space-5);
  border-radius: var(--bz-radius-md);
  background: var(--bz-surface);
  box-shadow: var(--bz-shadow-md);
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-semibold);
  transform: translateY(calc(-100% - var(--bz-space-8)));
  transition: transform var(--bz-dur-panel) var(--bz-ease);
}

.nav__salto:focus-visible {
  transform: none;
}

/* ---- Pastilla -------------------------------------------------------- */
.nav__barra {
  position: relative;
  max-width: var(--bz-container);
  margin: 0 auto;
  min-height: var(--bz-space-16);
  padding: var(--bz-space-2) var(--bz-space-2) var(--bz-space-2) var(--bz-space-6);
  border-radius: var(--bz-radius-pill);
  background: color-mix(in srgb, var(--bz-surface) 94%, transparent);
  backdrop-filter: blur(var(--bz-blur-cristal));
  box-shadow: var(--bz-shadow-md);
  display: flex;
  align-items: center;
  gap: var(--bz-space-4);
}

.nav__logo {
  flex-shrink: 0;
  display: block;
}

.nav__logo img {
  height: auto;
  object-fit: contain;
}

/* ---- Enlaces: centrados en la pastilla ------------------------------- */
.nav__enlaces {
  display: none;
}

.nav__lista {
  display: flex;
  gap: clamp(var(--bz-space-3), 1.8vw, var(--bz-space-6));
}

.nav__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--bz-tap);
  padding-inline: var(--bz-space-1);
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-text);
  white-space: nowrap;
}

.nav__enlace:hover {
  color: var(--bz-accent);
}

.nav__enlace--activo {
  color: var(--bz-accent);
  font-weight: var(--bz-weight-semibold);
}

/* ---- Acciones -------------------------------------------------------- */
.nav__acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--bz-space-5);
}

.nav__sesion {
  display: none;
  align-items: center;
  min-height: var(--bz-tap);
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-medium);
  color: var(--bz-text);
  white-space: nowrap;
}

.nav__sesion:hover {
  color: var(--bz-accent);
}

.nav__cta {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--bz-tap);
  padding-inline: var(--bz-space-6);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  color: var(--bz-ink-deep); /* §11: blanco sobre menta da 1,78:1 */
  font-size: var(--bz-size-sm);
  font-weight: var(--bz-weight-semibold);
  white-space: nowrap;
  box-shadow: var(--bz-shadow-brand);
  transition:
    background var(--bz-dur-hover) var(--bz-ease),
    box-shadow var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.nav__cta:hover {
  background: var(--bz-brand-hover);
  color: var(--bz-surface);
  box-shadow: var(--bz-shadow-brand-hover);
}

.nav__cta:active {
  background: var(--bz-brand-press);
  color: var(--bz-surface);
  transform: scale(var(--bz-press));
}

/* ---- Hamburguesa ----------------------------------------------------- */
.nav__hamburguesa {
  display: grid;
  place-items: center;
  width: var(--bz-tap);
  height: var(--bz-tap);
  border-radius: var(--bz-radius-pill);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  transition: background var(--bz-dur-hover) var(--bz-ease);
}

.nav__hamburguesa:hover {
  background: var(--bz-mint-300);
}

.nav__hamburguesa-icono {
  display: grid;
  place-items: center;
}

/* ---- Desplegable de móvil -------------------------------------------
   grid-template-rows de 0fr a 1fr: anima sin saber el alto (§4).        */
.nav__movil {
  max-width: var(--bz-container);
  margin: var(--bz-space-2) auto 0;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--bz-dur-modal) var(--bz-ease);
}

.nav__movil[hidden] {
  display: none;
}

.nav__movil[data-abierto] {
  grid-template-rows: 1fr;
}

.nav__movil-caja {
  overflow: hidden;
  border-radius: var(--bz-radius-2xl);
  background: var(--bz-surface);
  box-shadow: var(--bz-shadow-xl);
  opacity: 0;
  transition: opacity var(--bz-dur-panel) var(--bz-ease);
}

.nav__movil[data-abierto] .nav__movil-caja {
  opacity: 1;
}

.nav__movil-lista {
  padding: var(--bz-space-4) var(--bz-space-4) 0;
  display: grid;
  gap: var(--bz-space-1);
}

.nav__movil-enlace {
  display: flex;
  align-items: center;
  min-height: var(--bz-tap);
  padding-inline: var(--bz-space-4);
  border-radius: var(--bz-radius-lg);
  font-size: var(--bz-size-body);
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-ink);
  transition: background var(--bz-dur-hover) var(--bz-ease);
}

.nav__movil-enlace:hover {
  background: var(--bz-mint-100);
  color: var(--bz-accent);
}

.nav__movil-enlace--activo {
  color: var(--bz-accent);
}

.nav__movil-enlace--tenue {
  font-weight: var(--bz-weight-medium);
  color: var(--bz-text);
}

.nav__movil-cta {
  margin: var(--bz-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--bz-tap) + var(--bz-space-2));
  border-radius: var(--bz-radius-pill);
  background: var(--bz-brand);
  color: var(--bz-ink-deep);
  font-size: var(--bz-size-body);
  font-weight: var(--bz-weight-semibold);
  box-shadow: var(--bz-shadow-brand);
  transition:
    background var(--bz-dur-hover) var(--bz-ease),
    transform var(--bz-dur-press) var(--bz-ease);
}

.nav__movil-cta:hover {
  background: var(--bz-brand-hover);
  color: var(--bz-surface);
}

.nav__movil-cta:active {
  transform: scale(var(--bz-press));
}

/* ---- Cortes: ~880 / 640 / 420 -------------------------------------- */
@media (min-width: 880px) {
  .nav__hamburguesa {
    display: none;
  }

  .nav__enlaces {
    /* Centrado óptico en la pastilla, sin depender del ancho del logo */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
  }

  .nav__sesion,
  .nav__cta {
    display: inline-flex;
  }

  .nav__movil {
    display: none;
  }
}

@media (max-width: 420px) {
  .nav__barra {
    padding-left: var(--bz-space-4);
  }

  .nav__logo img {
    width: 104px;
  }
}
/* ==========================================================================
   Breeze Lingo · SECCIÓN 08 · Preguntas frecuentes
   Prefijo .faq__*. Sin literales: todo desde tokens.css.
   El panel anima con grid-template-rows de 0fr a 1fr: no hace falta saber
   el alto ni medirlo en JS (§4).
   ========================================================================== */

.faq {
  background: var(--bz-surface);
  padding-block: var(--bz-section-y);
}

/* Medida propia: una columna de preguntas no debe ocupar 1200 px */
.faq__caja {
  max-width: var(--bz-container-estrecho);
}

.faq__cabecera {
  text-align: center;
}

.faq__eyebrow {
  display: inline-block;
  padding: var(--bz-space-2) var(--bz-space-4);
  border-radius: var(--bz-radius-eyebrow);
  background: var(--bz-mint-100);
  color: var(--bz-accent);
  font-size: var(--bz-size-2xs);
  font-weight: var(--bz-weight-semibold);
  letter-spacing: var(--bz-tracking-wide);
  text-transform: uppercase;
}

.faq__titulo {
  margin-top: var(--bz-space-5);
  font-size: var(--bz-size-h2);
  line-height: var(--bz-leading-snug);
}

/* ---- La lista -------------------------------------------------------- */
.faq__lista {
  margin-top: var(--bz-space-10);
  display: grid;
  gap: var(--bz-space-3);
}

.faq__item {
  border-radius: var(--bz-radius-lg);
  background: var(--bz-surface);
  box-shadow: var(--bz-ring);
  transition: box-shadow var(--bz-dur-panel) var(--bz-ease);
}

.faq__item:hover {
  box-shadow: inset 0 0 0 1px var(--bz-mint-300);
}

/* El abierto lleva anillo de marca y su halo, como en el archivo */
.faq__item:has(> .faq__pregunta-marco > [aria-expanded="true"]) {
  box-shadow: var(--bz-ring-brand), var(--bz-halo-faq);
}

/* ---- La pregunta ----------------------------------------------------- */
.faq__pregunta-marco {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq__pregunta {
  width: 100%;
  min-height: var(--bz-tap);
  display: flex;
  align-items: center;
  gap: var(--bz-space-4);
  padding: var(--bz-space-4) var(--bz-space-5);
  text-align: left;
}

.faq__pregunta-texto {
  flex: 1;
  min-width: 0;
  font-family: var(--bz-font-title);
  font-weight: var(--bz-weight-semibold);
  font-size: var(--bz-size-faq);
  line-height: var(--bz-leading-snug);
  color: var(--bz-ink);
}

/* ---- El signo: dos trazos, el vertical gira a horizontal ------------- */
.faq__signo {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--bz-space-8);
  height: var(--bz-space-8);
  border-radius: var(--bz-radius-sm);
  background: var(--bz-bg);
  transition: background var(--bz-dur-panel) var(--bz-ease);
}

.faq__signo::before,
.faq__signo::after {
  content: "";
  position: absolute;
  border-radius: var(--bz-radius-pill);
  background: var(--bz-text);
  transition:
    transform var(--bz-dur-panel) var(--bz-ease),
    background var(--bz-dur-panel) var(--bz-ease);
}

.faq__signo::before {
  width: var(--bz-space-3);
  height: var(--bz-trazo);
}

.faq__signo::after {
  width: var(--bz-trazo);
  height: var(--bz-space-3);
}

[aria-expanded="true"] .faq__signo {
  background: var(--bz-mint-100);
}

[aria-expanded="true"] .faq__signo::before,
[aria-expanded="true"] .faq__signo::after {
  background: var(--bz-accent);
}

/* Abierto: el trazo vertical gira y queda solo el guion */
[aria-expanded="true"] .faq__signo::after {
  transform: rotate(90deg);
}

/* ---- El panel: anima sin conocer su alto ---------------------------- */
.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--bz-dur-modal) var(--bz-ease);
}

/* Solo el JS puede cerrar: sin JS todas las respuestas quedan visibles */
.faq__panel[data-cerrado] {
  grid-template-rows: 0fr;
}

.faq__respuesta {
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--bz-dur-panel) var(--bz-ease);
}

.faq__panel[data-cerrado] .faq__respuesta {
  opacity: 0;
}

.faq__respuesta p {
  padding: 0 var(--bz-space-5) var(--bz-space-5);
  font-size: var(--bz-size-body);
  line-height: var(--bz-leading-loose);
  color: var(--bz-text);
}

/* Marca visible de que el texto no es la respuesta real (§9) */
.faq__pendiente {
  font-weight: var(--bz-weight-semibold);
  color: var(--bz-muted-ink);
}

/* ---- Pie ------------------------------------------------------------- */
.faq__ayuda {
  margin-top: var(--bz-space-8);
  text-align: center;
  font-size: var(--bz-size-body);
  color: var(--bz-text);
}

.faq__enlace {
  font-weight: var(--bz-weight-semibold);
  text-decoration: underline;
  text-underline-offset: var(--bz-space-1);
}

/* ---- Cortes: ~1000 / 640 / 420 -------------------------------------- */
@media (max-width: 640px) {
  .faq__pregunta {
    padding: var(--bz-space-4);
  }

  .faq__respuesta p {
    padding: 0 var(--bz-space-4) var(--bz-space-4);
  }
}
/* ==========================================================================
   Breeze Lingo · FOOTER (Fondo blanco limpio exacto a la guía Figma)
   ========================================================================== */

.pie {
  position: relative;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  padding-top: 64px;
  padding-bottom: 32px;
}

/* ── Layout principal: 2 columnas (marca izq · nav der) ── */
.pie__principal {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 48px;
}

/* ── Columna izquierda: Logo + lema ── */
.pie__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  max-width: 220px;
}

.pie__logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.pie__lema {
  margin-top: 10px;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
}

/* ── Columnas de enlaces (4 columnas) — a la derecha ── */
.pie__cuerpo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.pie__titulo {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 14px;
}

.pie__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie__enlace {
  font-size: 0.85rem;
  color: #6b7280;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pie__enlace:hover {
  color: #10b981;
}

/* ── Base Footer ── */
.pie__base {
  padding-top: 24px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pie__copy {
  font-size: 0.8rem;
  color: #9ca3af;
}

.pie__idioma {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pie__lengua {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
}

.pie__lengua--activa {
  background: #ecfdf5;
  color: #10b981;
}

/* ── Responsivo ── */
@media (max-width: 900px) {
  .pie__principal {
    flex-direction: column;
    gap: 40px;
  }

  .pie__marca {
    max-width: 100%;
  }

  .pie__cuerpo {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}

@media (max-width: 500px) {
  .pie__cuerpo {
    grid-template-columns: 1fr;
  }

  .pie__base {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}