:root { color-scheme: light; }
  * { box-sizing: border-box; }
  body { margin: 0; padding: 0; }
  img { max-width: 100%; }
  [hidden] { display: none !important; }


  /* ============================================================
     Tipografías incrustadas · SIL Open Font License 1.1
     Figtree (Erik Kennedy) · Parisienne (Astigmatic)
     Van dentro del archivo: no se pide nada a ningún servidor,
     funcionan sin conexión y todo el mundo ve la misma web.
     Para sustituirlas, se cambia la cadena base64 de cada bloque.
     ============================================================ */
  @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("fuentes/figtree-1.woff2") format('woff2');
    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; }
  @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url("fuentes/figtree-2.woff2") format('woff2');
    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; }
  @font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fuentes/parisienne-1.woff2") format('woff2');
    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; }
  @font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fuentes/parisienne-2.woff2") format('woff2');
    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; }


  :root {
    /* ---- paleta v4 ----------------------------------------------------
       Los mismos seis colores de la marca, afinados para que el texto se
       lea de verdad: el morado y el plomo bajan de tono, los pasteles
       suben un punto de saturación y la acción pasa de salmón a frambuesa
       (blanco sobre ella: 5,1 de contraste; antes, 3,3 — por debajo de lo
       que exige la norma). El papel deja el blanco puro por un crema
       templado, para que las tarjetas blancas se lean como tarjetas. */
    --celeste: #C9E6EB; --beige: #E9D9C4; --amarillo: #FCEFBE;
    --plomo: #45434D; --morado: #4C3D66; --accion: #C6394C;
    --moradito: #DED6EE; --papel: #FFFFFF;
    /* el morado casi negro de los encabezados a sangre, ahora con nombre */
    --tinta: #241A38; --morado-2: #6A5890;
    --sans: "Figtree", "Proxima Nova", "Avenir Next", system-ui, sans-serif;
    --script: "Parisienne", "Savoye LET", "Snell Roundhand", cursive;
    --bg: #FBF8F4; --ink: var(--plomo); --ink-soft: #615E6A; --rule: #E6DCD0; --acento: var(--morado);
    /* ---- relieve: un solo sistema de sombras, tres niveles ---- */
    --s1: 0 1px 2px rgba(36,26,56,0.05), 0 1px 3px rgba(36,26,56,0.04);
    --s2: 0 2px 6px rgba(36,26,56,0.06), 0 10px 24px rgba(36,26,56,0.09);
    --s3: 0 4px 12px rgba(36,26,56,0.08), 0 20px 48px rgba(36,26,56,0.12);
  }
  /* La web es un diseño claro: cada banda fija su propio fondo pastel y su
     texto en plomo. El tema oscuro que había antes solo cambiaba las
     variables generales, así que dejaba texto claro sobre celeste y sobre
     beige — ilegible. Se queda en claro, que es como está dibujada. */

  body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  [id] { scroll-margin-top: 5.5rem; }
  .band { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 5vw, 2rem); }
  .inner { max-width: 70rem; margin: 0 auto; }
  .narrow { max-width: 46rem; }

  h1, h2, h3 { text-wrap: balance; }
  h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
  h2 { font-size: clamp(1.85rem, 4.3vw, 2.9rem); line-height: 1.18; font-weight: 500; letter-spacing: -0.018em; }
  h3 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; }
  .scr { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink);
    font-size: 1.45em; line-height: 0.85; display: inline-block;
    background: linear-gradient(transparent 16%, var(--hl, var(--amarillo)) 16%, var(--hl, var(--amarillo)) 88%, transparent 88%);
    padding: 0 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  h1 .scr { font-size: 1.34em; }
  h2 .scr { font-size: 1.42em; }
  .eyebrow { font-size: clamp(0.92rem, 1.9vw, 1.15rem); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--acento); margin-bottom: 1rem; display: block; }
  p { max-width: 64ch; }
  .lede { font-size: clamp(1.05rem, 2vw, 1.26rem); color: var(--ink-soft); }
  .sec { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-bottom: 0.5rem; }

  .cta { display: inline-block; background: var(--accion); color: #FFF; padding: 0.95rem 1.8rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem; text-decoration: none; border: 0; cursor: pointer; font-family: var(--sans); }
  .cta:hover { background: var(--morado); }
  .cta.ghost { background: transparent; color: inherit; border: 1.5px solid currentColor; }
  .cta.ghost:hover { background: var(--accion); color: #FFF; border-color: var(--accion); }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; }

  .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
  /* (el menú ya no cambia de color con el tema del sistema: la web es clara) */
  .nav-in { max-width: 74rem; margin: 0 auto; padding: 0.6rem clamp(1.2rem, 5vw, 2rem); display: flex; align-items: center; gap: 1.2rem; }
  .nav-nom { text-decoration: none; color: var(--ink); margin-right: auto; }
  .nav-nom b { display: block; font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; }
  .nav-nom span { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3; }
  .tabs { display: none; list-style: none; padding: 0; margin: 0; gap: 0.3rem; align-items: center; }
  @media (min-width: 62rem) { .tabs { display: flex; } }
  .tabs > li { position: relative; }
  .tab { background: none; border: 0; font-family: var(--sans); font-size: 0.86rem; color: var(--ink); padding: 0.5rem 0.75rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; }
  .tab:hover { background: var(--beige); }
  .tab[aria-current="page"] { background: var(--morado); color: #FFF; font-weight: 700; }
  .drop { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 12rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 16px; padding: 0.4rem; display: none; box-shadow: 0 10px 30px rgba(86,84,93,0.14); }
  .drop.abierto { display: block; }
  .drop button { display: block; width: 100%; text-align: left; background: none; border: 0; font-family: var(--sans); font-size: 0.86rem; color: var(--ink); padding: 0.55rem 0.8rem; border-radius: 10px; cursor: pointer; }
  .drop button:hover { background: var(--beige); }
  .menu-movil { display: inline-flex; }
  @media (min-width: 62rem) { .menu-movil { display: none; } }
  .movil-panel { display: none; border-top: 1px solid var(--rule); padding: 0.6rem clamp(1.2rem, 5vw, 2rem) 1rem; }
  .movil-panel.abierto { display: block; }
  .movil-panel button { display: block; width: 100%; text-align: left; background: none; border: 0; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
  .page { display: none; }
  .page.activa { display: block; }

  .hero { position: relative; isolation: isolate; overflow: hidden; background: var(--papel); color: var(--plomo);
    min-height: min(100svh - 4.4rem, 44rem); display: flex; flex-direction: column; justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem); padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 5vw, 2rem); }
  .hero .foto { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 78% 26%; opacity: 0.95; }
  @media (max-width: 52rem) { .hero .foto { background-position: 72% 22%; } }
  .hero .velo { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0.9) 100%),
                linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 48%, transparent 76%); }
  .hero-top, .hero-mid { max-width: 70rem; margin: 0 auto; width: 100%; }
  .hero-mid { display: grid; gap: 1.1rem; }
  .hero h1 { max-width: 18ch; }
  .principio { font-size: clamp(1.2rem, 2.5vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .principio s { text-decoration: line-through; text-decoration-thickness: 0.09em; opacity: 0.42; }
  .principio em { font-style: normal; color: var(--acento); }
  .hero .acts { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; }
  .entreno { max-width: 50rem; }
  .intro-e { font-size: clamp(1.05rem, 1.9vw, 1.28rem); font-weight: 700; margin-bottom: 0.7rem; }
  .checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: clamp(1rem, 1.9vw, 1.2rem); color: var(--ink); line-height: 1.35; }
  .checks li { display: flex; align-items: baseline; gap: 0.6rem; }
  .checks li::before { content: "✓"; color: var(--accion); font-weight: 700; flex: none; }

  .pasa { --hl: var(--amarillo); }
  .pasa .intro { font-size: clamp(1.65rem, 3.9vw, 2.6rem); font-weight: 500; letter-spacing: -0.018em; line-height: 1.25; max-width: 44ch; text-wrap: balance; }
  .frases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: 2.2rem; }
  @media (min-width: 46rem) { .frases { grid-template-columns: repeat(4, 1fr); gap: 0.8rem; } }
  .fr { background: var(--beige); border-radius: 16px; padding: 1.15rem 1.2rem; font-size: clamp(0.92rem, 1.5vw, 1.02rem); line-height: 1.3; font-weight: 700; display: flex; flex-direction: column; gap: 0.7rem; min-height: 5.6rem; transition: transform 0.18s ease; }
  .fr:hover { transform: translateY(-4px); }
  @media (prefers-reduced-motion: reduce) { .fr:hover { transform: none; } }
  .fr::before { content: "✕"; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accion); color: #FFF; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .pasa .cierra { margin-top: 1.6rem; font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: none; }

  .empezar { background: var(--amarillo); color: var(--plomo); --hl: var(--celeste); }
  .empezar .eyebrow { color: var(--plomo); }
  .puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; margin-top: 2.5rem; }
  .puerta { background: #FFF; border-radius: 20px; color: var(--plomo); padding: 1.8rem 1.6rem; text-decoration: none; display: flex; flex-direction: column; gap: 0.45rem; transition: transform 0.15s ease; border: 0; cursor: pointer; font-family: var(--sans); text-align: left; }
  .puerta:hover { transform: translateY(-4px); }
  .puerta .q { font-size: 1.12rem; font-weight: 700; line-height: 1.2; }
  .puerta .m { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accion); font-weight: 700; }

  .unoauno .caja { display: grid; gap: 1.6rem; background: var(--morado); color: #FFF; border-radius: 28px; padding: clamp(1.8rem, 4vw, 3rem); }
  @media (min-width: 50rem) { .unoauno .caja { grid-template-columns: 1.35fr 0.65fr; align-items: center; } }
  .unoauno .caja .eyebrow { color: var(--amarillo); }
  .unoauno .nom { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.025em; line-height: 1.02; }
  .unoauno .det { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9rem; }
  .unoauno .precio { font-weight: 700; font-size: 1.35rem; color: var(--amarillo); }
  .unoauno .nota-p { font-size: 0.8rem; color: rgba(255,255,255,0.86); line-height: 1.45; }

  .carrusel-cab { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .carrusel-cab .flechas { margin-left: auto; display: flex; gap: 0.5rem; }
  .flecha { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--plomo); background: transparent; color: var(--plomo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .flecha:hover { background: var(--plomo); color: #FFF; }
  .flecha[disabled] { opacity: 0.3; cursor: default; }
  .carrusel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.4rem 0.2rem 1rem; margin-top: 1.8rem; scrollbar-width: none; }
  .carrusel::-webkit-scrollbar { display: none; }
  .mini { flex: 0 0 min(19rem, 82vw); scroll-snap-align: start; background: #FFF; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; text-align: left; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); color: var(--plomo); transition: transform 0.16s ease; }
  .mini:hover { transform: translateY(-4px); }
  .mini .img { aspect-ratio: 1/1; background-color: var(--c, var(--celeste)); background-size: cover; background-position: center; }
  .mini .cuerpo { padding: 1.2rem 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
  .mini .chip { align-self: flex-start; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; background: var(--morado); color: #FFF; padding: 0.28rem 0.7rem; border-radius: 999px; }
  .mini .t { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .mini .donde { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.35; }
  .mini .pie { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; border-top: 1px solid var(--rule); }
  .mini .precio { font-weight: 700; font-size: 0.95rem; }
  .mini .ver { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .cuenta-atras { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accion); }

  .crisis .cols { background: var(--beige); border-radius: 28px; padding: clamp(1.8rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr; gap: 2.2rem; align-items: center; --hl: var(--celeste); }
  @media (min-width: 50rem) { .crisis .cols { grid-template-columns: 1.05fr 0.95fr; } }
  .crisis .big { font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 500; letter-spacing: -0.018em; line-height: 1.2; max-width: 22ch; }
  .crisis p.txt { margin-top: 1.5rem; font-size: clamp(1.05rem, 2vw, 1.25rem); }
  .crisis .repite { margin-top: 1.8rem; border-left: 4px solid var(--accion); padding-left: 1.2rem; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; line-height: 1.25; }
  .img-crisis { border-radius: 24px; aspect-ratio: 4/3; background-size: cover; background-position: 60% 25%; }

  .separa { margin: 3rem 0 2.4rem; border-top: 1px solid var(--rule); }
  .benes-t { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 500; letter-spacing: -0.018em; line-height: 1.25; margin: 0 0 1.8rem; --hl: var(--celeste); }
  .benes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 42rem) { .benes-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 68rem) { .benes-grid { grid-template-columns: repeat(4, 1fr); } }
  .bene { background: var(--amarillo); border-radius: 20px; padding: 1.5rem 1.4rem; display: grid; gap: 0.4rem; align-content: start; }
  .bene .bn { font-family: var(--script); font-size: 2.1rem; line-height: 0.7; color: var(--accion); }
  .bene .bt { font-size: 1.12rem; font-weight: 700; margin-top: 0.3rem; }
  .bene .bd { font-size: 0.9rem; line-height: 1.45; }

  .filtros { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
  .filtro-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
  .filtro-fila .k { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-right: 0.4rem; }
  .chipf { border: 1.5px solid var(--rule); background: transparent; color: var(--ink); font-family: var(--sans); font-size: 0.84rem; padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; }
  .chipf:hover { border-color: var(--morado); }
  .chipf[aria-pressed="true"] { background: var(--morado); color: #FFF; border-color: var(--morado); font-weight: 700; }

  .filo { background: var(--morado); color: #FFF; text-align: center; }
  .filo .yo { font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; }
  .filo .yo .scr { font-size: 1.15em; color: var(--amarillo); background: none; padding: 0; }
  .filo p { margin: 2rem auto 0; color: rgba(255,255,255,0.85); font-size: clamp(1.05rem, 2vw, 1.3rem); }
  .filo .eyebrow { color: var(--celeste); }

  .circulo-wrap { display: flex; justify-content: center; margin-top: 2.8rem; }
  .circulo { position: relative; width: min(30rem, 88vw); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
  .anillo { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, var(--celeste) 0 33.333%, var(--amarillo) 33.333% 66.666%, var(--moradito) 66.666% 100%); -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 55.5%); mask: radial-gradient(circle, transparent 0 55%, #000 55.5%); }
  .centro { position: relative; width: 55%; aspect-ratio: 1; border-radius: 50%; background: var(--morado); color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.4rem; gap: 0.5rem; }
  .centro .c-w { font-family: var(--script); font-size: clamp(2rem, 6vw, 3.1rem); line-height: 0.9; }
  .centro .c-d { font-size: clamp(0.68rem, 1.5vw, 0.82rem); line-height: 1.4; opacity: 0.85; max-width: 22ch; }
  .et { position: absolute; font-size: clamp(0.78rem, 1.8vw, 1rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plomo); }
  .et-1 { top: 7%; left: 50%; transform: translateX(-50%); }
  .et-2 { bottom: 17%; right: 5%; }
  .et-3 { bottom: 17%; left: 5%; }
  .pasos { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
  @media (min-width: 46rem) { .pasos { grid-template-columns: repeat(3, 1fr); } }
  .paso { background: var(--c); border-radius: 20px; color: var(--plomo); padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 0.55rem; }
  .paso .t { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
  .paso .q { font-size: 0.98rem; font-style: italic; }
  .paso .d { font-size: 0.88rem; line-height: 1.5; opacity: 0.82; }
  .ciclo-3 { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin-top: 2rem; }
  @media (min-width: 44rem) { .ciclo-3 { grid-template-columns: repeat(3, 1fr); } }
  .ci { background: var(--c); border-radius: 16px; padding: 1.2rem 1.3rem; display: grid; gap: 0.35rem; }
  .ci .cw { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
  .ci .cq { font-size: 0.92rem; line-height: 1.4; }

  .colab { background: var(--celeste); color: var(--plomo); --hl: #FFF; }
  .colab .eyebrow { color: var(--plomo); }
  .ruta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
  .hito { background: #FFF; border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
  .hito .n { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .hito .t { font-size: 1.05rem; font-weight: 700; }
  .hito .d { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }

  .ciencia { background: var(--celeste); color: var(--plomo); --hl: #FFF; }
  .ciencia .eyebrow { color: var(--plomo); }
  .capas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
  .capa { background: #FFF; border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
  .capa .t { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
  .capa .d { font-size: 0.9rem; line-height: 1.5; }

  .honesto { --hl: var(--moradito); }
  .honesto ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; margin-top: 2rem; }
  .honesto li { padding-left: 1.1rem; position: relative; font-size: 0.98rem; }
  .honesto li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 3px; height: 1.05em; border-radius: 2px; background: var(--accion); }
  .avisolegal { margin-top: 2.5rem; background: var(--beige); border-radius: 18px; padding: 1.5rem 1.6rem; font-size: 0.92rem; }

  .sobre { background: var(--moradito); color: var(--plomo); --hl: var(--amarillo); }
  .sobre .eyebrow { color: var(--plomo); }
  .sobre .cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
  @media (min-width: 50rem) { .sobre .cols { grid-template-columns: 1.15fr 0.85fr; } }
  .sobre .preg { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
  .sobre p { margin-top: 1.2rem; font-size: 1rem; }
  .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.6rem; margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(86,84,93,0.25); }
  .cifra .n { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: var(--morado); }
  .cifra .t { font-size: 0.82rem; margin-top: 0.25rem; line-height: 1.35; }
  .retrato { aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: 24px; }

  .emp-hero { background: var(--celeste); color: var(--plomo); --hl: #FFF; }
  .lead-claim { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 500; line-height: 1.3; max-width: 34ch; }
  .lead-logo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(86,84,93,0.25); }
  .lead-logo .lg { font-size: clamp(2.4rem, 6.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.9; }
  .lead-logo .lg-full { font-size: clamp(0.95rem, 2vw, 1.35rem); font-weight: 700; color: var(--morado); }
  .lead-sub { font-size: 1rem; line-height: 1.5; max-width: 62ch; margin-top: 1rem; }
  .sintomas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
  .sintomas span { background: var(--beige); border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; }
  .sintomas span::before { content: "✕"; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accion); color: #FFF; font-size: 0.55rem; display: flex; align-items: center; justify-content: center; }
  .rueda-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 2.5rem; }
  .rueda { position: relative; width: min(40rem, 92vw); aspect-ratio: 1; display: none; }
  @media (min-width: 52rem) { .rueda { display: block; } }
  .rueda-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--morado); color: #FFF; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; }
  .rueda-centro span { font-size: clamp(0.9rem, 1.8vw, 1.1rem); font-weight: 700; line-height: 1.25; }
  .terreno { position: absolute; transform: translate(-50%, -50%); width: 10.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--c); color: var(--plomo); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1rem; gap: 0.25rem; }
  .terreno .tt { font-size: 0.98rem; font-weight: 700; line-height: 1.1; }
  .terreno .td { font-size: 0.72rem; line-height: 1.3; opacity: 0.78; }
  .rueda-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; margin-top: 2.5rem; }
  @media (min-width: 52rem) { .rueda-lista { display: none; } }
  .rueda-lista div { background: var(--c); border-radius: 16px; padding: 1rem 1.1rem; display: grid; gap: 0.2rem; }
  .rueda-lista .tt { font-size: 1rem; font-weight: 700; }
  .rueda-lista .td { font-size: 0.85rem; opacity: 0.8; }
  .checks-lead { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; max-width: 60rem; }
  @media (min-width: 54rem) { .checks-lead { grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; } }
  .checks-lead li { padding-left: 2.4rem; position: relative; font-size: 0.96rem; line-height: 1.5; }
  .checks-lead li b { display: block; font-size: 1.08rem; margin-bottom: 0.15rem; }
  .checks-lead li::before { content: "✓"; position: absolute; left: 0; top: 0.05em; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accion); color: #FFF; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .ruta7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin-top: 2.5rem; }
  .r7 { background: #FFF; border-radius: 16px; padding: 1.1rem; display: grid; gap: 0.25rem; align-content: start; border: 1px solid var(--rule); }
  .r7 .n { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--morado); color: #FFF; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .r7 .t { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 0.3rem; }
  .r7 .d { font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); }
  .exps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
  .exp { background: #FFF; border-radius: 20px; padding: 1.5rem 1.4rem; text-decoration: none; color: var(--plomo); display: grid; gap: 0.4rem; align-content: start; border: 0; cursor: pointer; font-family: var(--sans); text-align: left; }
  .exp:hover { transform: translateY(-4px); }
  .exp .t { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
  .exp .d { font-size: 0.88rem; line-height: 1.45; }
  .exp .m { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); margin-top: 0.3rem; }

  .lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.92rem; }
  .lista li { padding-left: 0.95rem; position: relative; }
  .lista li::before { content: "·"; position: absolute; left: 0; color: var(--accion); font-weight: 700; }
  .lista.check li::before { content: "✓"; font-size: 0.8em; }
  .modos { display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 1.2rem; }
  @media (min-width: 44rem) { .modos { grid-template-columns: repeat(3, 1fr); } }
  .modo { border: 1px solid var(--rule); border-radius: 14px; padding: 0.85rem 0.95rem; display: grid; gap: 0.15rem; }
  .modo.destacado { border-color: var(--accion); border-width: 2px; }
  .modo .mt { font-size: 0.9rem; font-weight: 700; }
  .modo .md { font-size: 0.78rem; color: var(--ink-soft); }
  .modo .mp { font-size: 0.88rem; font-weight: 700; color: var(--morado); margin-top: 0.2rem; }

  .flota { border-radius: 999px; position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 60; display: inline-flex; align-items: center; gap: 0.6rem; background: var(--accion); color: #FFF; padding: 0.85rem 1.2rem; text-decoration: none; font-weight: 700; font-size: 0.88rem; box-shadow: 0 6px 24px rgba(86,84,93,0.3); }
  .flota:hover { background: var(--morado); }
  .flota svg { width: 18px; height: 18px; flex: none; }
  .flota .txt { display: none; }
  @media (min-width: 40rem) { .flota .txt { display: inline; } }
  .arriba { position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: calc(clamp(1rem, 3vw, 1.8rem) + 3.6rem); z-index: 60; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg); color: var(--ink); display: none; align-items: center; justify-content: center; cursor: pointer; }
  .arriba.visible { display: flex; }
  .arriba:hover { background: var(--morado); color: #FFF; }

  footer { background: var(--plomo); color: #FFF; }
  footer a, footer button { color: #FFF; }
  .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem; }
  .foot-grid h4 { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.5; margin-bottom: 0.7rem; }
  .foot-grid ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; }
  .foot-grid button { background: none; border: 0; font-family: var(--sans); font-size: 0.88rem; padding: 0; cursor: pointer; text-align: left; }
  .foot-grid button:hover { text-decoration: underline; }
  .legal { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.76rem; opacity: 0.55; max-width: 72ch; }

  /* ---- índice de programas ---- */
  .grid-prog { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.2rem; margin-top: 2.5rem; }
  .tarjeta-prog { background: var(--c); border: 0; border-radius: 22px; overflow: hidden; padding: 0; cursor: pointer; font-family: var(--sans); color: var(--plomo); text-align: left; display: flex; flex-direction: column; transition: transform 0.16s ease; }
  .tarjeta-prog:hover { transform: translateY(-5px); }
  @media (prefers-reduced-motion: reduce) { .tarjeta-prog:hover { transform: none; } }
  .tarjeta-prog.oculta { display: none; }
  .tarjeta-prog.destacada-lanza { outline: 3px solid var(--accion); outline-offset: 3px; }
  .tarjeta-prog.destacada-lanza .tp-chip::after { content: " · abre 14 sept"; }
  .tp-img { aspect-ratio: 4/5; background-size: cover; background-position: center; background-color: rgba(86,84,93,0.08); }
  .tp-img.vacia { background-size: cover; display: flex; align-items: center; justify-content: center; }
  .tp-img.vacia span { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
  .tp-cuerpo { padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
  .tp-chip { align-self: flex-start; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; background: var(--morado); color: #FFF; padding: 0.25rem 0.65rem; border-radius: 999px; margin-bottom: 0.35rem; }
  .tp-sub { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .tp-nom { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
  .tp-gancho { font-size: 0.88rem; line-height: 1.4; opacity: 0.82; margin-top: 0.25rem; }
  .tp-ver { margin-top: auto; padding-top: 0.9rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }

  /* ---- página de programa ---- */
  .volver { background: none; border: 0; font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--plomo); cursor: pointer; padding: 0 0 1.4rem; }
  .volver:hover { color: var(--accion); }
  .prog-hero { background: var(--c); color: var(--plomo); }
  .ph-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
  @media (min-width: 52rem) { .ph-grid { grid-template-columns: 1.1fr 0.9fr; } }
  .ph-chip { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; opacity: 0.65; }
  .ph-sub { display: block; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--accion); margin: 0.9rem 0 0.35rem; }
  .ph-nom { font-size: clamp(2rem, 5.2vw, 3.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
  .ph-gancho { font-size: clamp(1.1rem, 2.3vw, 1.45rem); font-weight: 500; line-height: 1.3; margin-top: 0.9rem; max-width: 32ch; }
  .ph-triada { font-family: var(--script); font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.1; color: var(--morado); margin: 1rem 0 1.6rem; }
  .ph-img { aspect-ratio: 4/5; border-radius: 24px; background-size: cover; background-position: center; background-color: rgba(86,84,93,0.1); }
  .ph-img.vacia { background-size: cover; display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(86,84,93,0.35); }
  .ph-img.vacia span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; text-align: center; padding: 1rem; }

  .porque-lista { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.8rem; }
  .porque-lista li { background: #FFF; border-radius: 16px; padding: 1.1rem 1.2rem; font-size: 0.98rem; font-weight: 700; line-height: 1.3; display: flex; align-items: flex-start; gap: 0.75rem; }
  .porque-lista li::before { content: "✕"; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--accion); color: #FFF; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 0.1rem; }

  .entrenar-txt { font-size: clamp(1.1rem, 2.2vw, 1.35rem); line-height: 1.5; max-width: 62ch; margin-top: 0.4rem; }
  .fases { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
  @media (min-width: 50rem) { .fases { grid-template-columns: repeat(3, 1fr); } }
  .fase { background: var(--c); border-radius: 20px; padding: 1.6rem 1.5rem; display: grid; gap: 0.6rem; align-content: start; }
  .fase .f-t { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .fase .f-q { font-size: 1rem; font-style: italic; line-height: 1.35; margin: 0; }
  .fase .lista { margin-top: 0.3rem; }

  .lista-obt { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.7rem 1.6rem; }
  .lista-obt li { padding-left: 2rem; position: relative; font-size: 1rem; font-weight: 700; line-height: 1.35; }
  .lista-obt li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--morado); color: #FFF; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; }
  .observamos { margin-top: 2.2rem; background: #FFF; border-radius: 20px; padding: 1.5rem 1.6rem; }

  .antes-despues { display: grid; gap: 0.8rem; margin-top: 2.2rem; }
  .ad { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; background: rgba(255,255,255,0.1); border-radius: 18px; padding: 1.2rem 1.4rem; }
  @media (max-width: 44rem) { .ad { grid-template-columns: 1fr; gap: 0.5rem; text-align: center; } }
  .a-antes { font-size: 1rem; opacity: 0.6; line-height: 1.35; }
  .a-flecha { color: var(--amarillo); font-size: 1.3rem; font-weight: 700; }
  .a-despues { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }

  .dos-col { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  @media (min-width: 52rem) { .dos-col { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
  .incluye-caja { background: var(--beige); border-radius: 20px; padding: 1.6rem; }
  .incluye-caja .lista li { font-size: 0.98rem; padding-left: 1.4rem; margin-bottom: 0.2rem; }
  .dato-extra { font-size: 0.9rem; margin-top: 1rem; opacity: 0.8; max-width: none; }

  .cierre-prog { text-align: center; }
  .frase-cierre { font-family: var(--script); font-size: clamp(1.9rem, 4.8vw, 3.2rem); line-height: 1.15; color: var(--morado); margin: 0 auto 1.8rem; max-width: 20ch; }

  .relacionados { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
  .rel { background: #FFF; border: 0; border-radius: 16px; padding: 1.1rem 1.2rem; cursor: pointer; font-family: var(--sans); color: var(--plomo); text-align: left; display: grid; gap: 0.25rem; }
  .rel:hover { background: var(--morado); color: #FFF; }
  .rel .rn { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .rel:hover .rn { color: var(--amarillo); }
  .rel .rt { font-size: 1.02rem; font-weight: 700; line-height: 1.2; }

  .eco { background: var(--morado); color: #FFF; text-align: center; }
  .eco .tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 2.5rem 0; }
  .eco .tres div { background: rgba(255,255,255,0.1); border-radius: 18px; padding: 1.4rem; }
  .eco .tres .en { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.04em; display: block; }
  .eco .tres .ed { font-size: 0.92rem; opacity: 0.85; margin-top: 0.2rem; display: block; }
  .eco .ciclo-linea { font-family: var(--script); font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--amarillo); margin: 1.5rem auto 0.8rem; }
  .drop { min-width: 17rem; max-height: 70vh; overflow-y: auto; }
  .drop-sec { display: block; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--accion); padding: 0.7rem 0.8rem 0.3rem; }
  .drop-sec:first-child { padding-top: 0.3rem; }
  .drop button { text-transform: capitalize; }
  .drop .todos { font-weight: 700; border-bottom: 1px solid var(--rule); margin-bottom: 0.2rem; padding-bottom: 0.6rem; }


  /* ---- landing de lanzamiento ---- */
  .specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; font-size: 0.84rem; color: var(--ink-soft); }
  .specs b { color: var(--ink); font-weight: 700; }
  .promesa-caja { background: #FFF; border-left: 5px solid var(--accion); border-radius: 0 20px 20px 0; padding: clamp(1.8rem, 4vw, 2.8rem); }
  .promesa-caja .big { font-size: clamp(2rem, 5.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 1rem; }
  .reveal { background: var(--plomo); color: #FFF; }
  .reveal .tachado { font-size: clamp(1.4rem, 3.4vw, 2rem); opacity: 0.5; text-decoration: line-through; margin-bottom: 0.5rem; }
  .reveal .revelado { font-family: var(--script); font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; color: var(--amarillo); margin-bottom: 1.4rem; }
  .reveal p { color: rgba(255,255,255,0.85); }
  .ab { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 46rem) { .ab { grid-template-columns: 1fr 1fr; } }
  .ab > div { background: #FFF; border-radius: 20px; padding: 1.6rem 1.5rem; }
  .ab .ab-head { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.9rem; }
  .ab .a .ab-head { color: var(--ink-soft); }
  .ab .b .ab-head { color: var(--accion); }
  .ab h3 { font-size: 1.35rem; margin-bottom: 0.8rem; }
  .ab ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
  .ab li { font-size: 0.92rem; line-height: 1.4; padding-left: 0.95rem; position: relative; color: var(--ink-soft); }
  .ab li::before { content: "·"; position: absolute; left: 0.15rem; color: var(--accion); font-weight: 700; }
  .cuatro { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; margin-top: 1.8rem; }
  .cuatro > div { background: #FFF; border-radius: 18px; padding: 1.3rem 1.4rem; }
  .cuatro .label { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accion); font-weight: 700; margin-bottom: 0.5rem; }
  .cuatro .frase { font-size: 1.05rem; line-height: 1.3; font-weight: 700; margin: 0; }
  .pilares3 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 50rem) { .pilares3 { grid-template-columns: repeat(3, 1fr); } }
  .pil { background: var(--c); border-radius: 20px; padding: 1.6rem 1.5rem; display: grid; gap: 0.5rem; align-content: start; }
  .pil .pn { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .pil h3 { font-size: 1.25rem; }
  .pil .cita { font-family: var(--script); font-size: 1.35rem; line-height: 1.15; margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid rgba(86,84,93,0.2); color: var(--morado); }
  .etapas { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 52rem) { .etapas { grid-template-columns: repeat(3, 1fr); } }
  .etapa { background: #FFF; border-radius: 20px; padding: 1.6rem 1.5rem; display: grid; gap: 0.7rem; align-content: start; }
  .etapa .en { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .etapa h3 { font-size: 1.5rem; }
  .etapa .obj { font-size: 0.95rem; color: var(--ink-soft); }
  .voces { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .voz { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; background: var(--amarillo); color: var(--plomo); padding: 0.25rem 0.6rem; border-radius: 999px; }
  .etapa .como { font-size: 0.88rem; line-height: 1.45; padding-top: 0.7rem; border-top: 1px solid var(--rule); }
  .tabla-p { overflow-x: auto; border-radius: 18px; border: 1px solid var(--rule); background: #FFF; margin-top: 1.6rem; }
  .tabla-p table { border-collapse: collapse; width: 100%; min-width: 30rem; }
  .tabla-p th, .tabla-p td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
  .tabla-p th { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
  .tabla-p tbody tr:last-child td { border-bottom: 0; }
  .tabla-p tr.destacada td { background: var(--amarillo); font-weight: 700; }
  .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .remate-l { font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 700; line-height: 1.25; border-left: 4px solid var(--accion); padding-left: 1.2rem; margin-top: 1.8rem; max-width: 42ch; }
  .incluye-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.8rem; margin-top: 2rem; }
  .inc { background: #FFF; border-radius: 18px; padding: 1.2rem 1.3rem; }
  .inc strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; }
  .inc span { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.45; }
  .garantias3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 2rem; }
  .gar { background: #FFF; border: 2px solid var(--morado); border-radius: 20px; padding: 1.5rem; display: grid; gap: 0.6rem; }
  .gar .gn { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .gar .gt { font-size: 1.08rem; line-height: 1.35; font-weight: 700; }
  .no-prom { background: var(--beige); border-radius: 20px; padding: 1.8rem; margin-top: 2rem; }
  .no-prom ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; margin-top: 1rem; }
  .no-prom li { padding-left: 1.3rem; position: relative; font-size: 0.98rem; line-height: 1.45; }
  .no-prom li::before { content: "—"; position: absolute; left: 0; color: var(--accion); font-weight: 700; }
  .urg { display: grid; gap: 1rem; margin-top: 1.6rem; }
  .urg div { background: #FFF; border-radius: 18px; padding: 1.3rem 1.4rem; font-size: 1rem; line-height: 1.5; }


  /* ---- viaje A → B ---- */
  .ruta-ab { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
  @media (min-width: 56rem) { .ruta-ab { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; } }
  .hito-v { background: #FFF; border-radius: 18px; padding: 1.4rem 1.3rem; display: grid; gap: 0.4rem; align-content: start; }
  .hito-v .hv-n { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .hito-v .hv-t { font-size: 1.15rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
  .hito-v .hv-d { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
  .hito-v.punto { background: var(--plomo); color: #FFF; }
  .hito-v.punto .hv-d { color: rgba(255,255,255,0.8); }
  .hito-v.punto.b { background: var(--morado); }
  .hito-v.punto.b .hv-n { color: var(--amarillo); }
  .flecha-v { display: flex; align-items: center; justify-content: center; color: var(--accion); font-size: 1.5rem; font-weight: 700; }
  @media (max-width: 56rem) { .flecha-v { transform: rotate(90deg); padding: 0.2rem 0; } }

  .sintomas-a { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.7rem; margin-top: 2rem; }
  .sintomas-a li { list-style: none; background: #FFF; border-radius: 14px; padding: 0.95rem 1.1rem; font-size: 0.95rem; line-height: 1.35; display: flex; align-items: flex-start; gap: 0.7rem; }
  .sintomas-a li::before { content: "✕"; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--accion); color: #FFF; font-size: 0.58rem; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 0.12rem; }
  .libertades { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.7rem; margin-top: 2rem; list-style: none; padding: 0; }
  .libertades li { padding-left: 2rem; position: relative; font-size: 1rem; font-weight: 700; line-height: 1.35; }
  .libertades li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--amarillo); color: var(--plomo); font-size: 0.68rem; display: flex; align-items: center; justify-content: center; }
  .def-libertad { background: rgba(255,255,255,0.12); border-radius: 20px; padding: 1.6rem 1.7rem; margin-top: 2rem; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.35; font-weight: 700; max-width: 46ch; }


  /* ---- fichas de datos de la portada ---- */
  .datos-hero { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 1.8rem; }
  @media (min-width: 44rem) { .datos-hero { grid-template-columns: repeat(5, 1fr); } }
  .dh { background: #FFF; border-radius: 14px; padding: 0.9rem 0.95rem; display: grid; gap: 0.15rem; }
  .dh .dv { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
  .dh .dk { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
  .dh.destaca { background: var(--accion); }
  .dh.destaca .dv { color: #FFF; }
  .dh.destaca .dk { color: rgba(255,255,255,0.85); }

  /* ---- franja del cómplice ---- */
  .franja { background: var(--plomo); color: #FFF; }
  .franja .tri { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 50rem) { .franja .tri { grid-template-columns: repeat(3, 1fr); } }
  .franja .tri > div { background: rgba(255,255,255,0.1); border-radius: 18px; padding: 1.4rem 1.5rem; }
  .franja .lb { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--amarillo); margin-bottom: 0.6rem; }
  .franja .fr2 { font-size: 1.15rem; line-height: 1.3; font-weight: 700; margin: 0; }

  /* ---- incluye desplegable ---- */
  .inc-lista { display: grid; gap: 0.5rem; margin-top: 2rem; }
  .inc-item { background: #FFF; border-radius: 14px; }
  .inc-item summary { cursor: pointer; list-style: none; padding: 0.95rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; font-size: 1rem; font-weight: 700; line-height: 1.3; }
  .inc-item summary::-webkit-details-marker { display: none; }
  .inc-item summary::before { content: "✓"; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--morado); color: #FFF; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; }
  .inc-item summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1; color: var(--accion); font-weight: 700; }
  .inc-item[open] summary::after { content: "−"; }
  .inc-item p { margin: 0; padding: 0 1.2rem 1.1rem 3.4rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }

  /* ---- precio simple ---- */
  .precio-caja { background: var(--morado); color: #FFF; border-radius: 24px; padding: clamp(1.8rem, 4vw, 2.8rem); display: grid; gap: 0.7rem; max-width: 44rem; margin-top: 2rem; }
  .precio-caja .pk { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--amarillo); }
  .precio-caja .tach { font-size: 1.3rem; opacity: 0.55; text-decoration: line-through; }
  .precio-caja .pv { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; }
  .precio-caja .pd { font-size: 1.05rem; color: rgba(255,255,255,0.88); }
  .precio-caja .pn { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 0.4rem; }
  .segui-caja { background: #FFF; border-radius: 20px; padding: 1.5rem 1.6rem; margin-top: 1rem; max-width: 44rem; display: grid; gap: 0.4rem; }
  .segui-caja .sk { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .segui-caja .sv { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }


  /* ---- portada del programa ---- */
  .datos-hero { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1.4rem; max-width: 34rem; }
  @media (min-width: 44rem) { .datos-hero { grid-template-columns: repeat(4, 1fr); } }
  .dh { background: #FFF; border-radius: 12px; padding: 0.65rem 0.75rem; display: grid; gap: 0.05rem; }
  .dh .dv { font-size: 0.98rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
  .dh .dk { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
  .dh.destaca { background: var(--accion); }
  .dh.destaca .dv, .dh.destaca .dk { color: #FFF; }

  /* ---- por qué se llama así ---- */
  .nombre-sec { background: var(--beige); color: var(--plomo); text-align: center; }
  .nombre-sec .inner { max-width: 52rem; }
  .nombre-sec .tach2 { font-size: clamp(1.3rem, 3vw, 1.8rem); opacity: 0.5; text-decoration: line-through; margin: 0 auto 0.4rem; }
  .nombre-sec .real { font-family: var(--script); font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.05; color: var(--morado); margin: 0 auto 1.2rem; max-width: 20ch; }
  .nombre-sec p { margin-left: auto; margin-right: auto; }
  .glow-t { font-size: clamp(1.5rem, 3.6vw, 2.3rem); font-weight: 700; letter-spacing: -0.025em; margin-top: 2.2rem; }
  .glow-no { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.2rem auto; }
  .glow-no span { background: #FFF; border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.95rem; font-weight: 700; text-decoration: line-through; opacity: 0.65; }
  .glow-si { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.3; max-width: 32ch; margin: 0 auto; }
  .compasiva { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(86,84,93,0.25); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.5; max-width: 52ch; }
  .compasiva b { color: var(--morado); }

  /* ---- punto A en plomo ---- */
  .punto-a { background: var(--plomo); color: #FFF; }
  .punto-a .sintomas-a li { background: rgba(255,255,255,0.1); color: #FFF; }

  /* ---- transversales ---- */
  .transversal { margin-top: 1.4rem; background: var(--morado); color: #FFF; border-radius: 20px; padding: 1.6rem 1.7rem; display: grid; gap: 1rem; }
  .transversal .tv-cab { display: flex; align-items: center; gap: 0.9rem; }
  .transversal .tv-k { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--amarillo); white-space: nowrap; }
  .transversal .tv-linea { flex: 1; height: 2px; background: linear-gradient(90deg, var(--amarillo), rgba(255,255,255,0.25)); position: relative; }
  .transversal .tv-linea::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 9px solid rgba(255,255,255,0.35); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .tv-dos { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 46rem) { .tv-dos { grid-template-columns: 1fr 1fr; } }
  .tv-dos > div { background: rgba(255,255,255,0.1); border-radius: 14px; padding: 1.1rem 1.2rem; }
  .tv-dos .tvn { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; }
  .tv-dos .tvd { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.85); }


  /* ---- nombre en morado ---- */
  .nombre-sec { background: var(--morado); color: #FFF; text-align: center; }
  .nombre-sec .inner { max-width: 50rem; }
  .nombre-sec .tach2 { font-size: clamp(1.3rem, 3vw, 1.8rem); opacity: 0.45; text-decoration: line-through; margin: 0 auto 0.5rem; }
  .nombre-sec .real { font-family: var(--script); font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.05; color: var(--amarillo); margin: 0 auto 1.2rem; max-width: 22ch; }
  .nombre-sec .chico { font-size: 0.98rem; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 auto; max-width: 54ch; }

  /* ---- glow up en beige ---- */
  .glow-sec { background: var(--beige); color: var(--plomo); text-align: center; }
  .glow-sec .inner { max-width: 52rem; }
  .glow-t { font-size: clamp(1.7rem, 4.4vw, 2.8rem); font-weight: 700; letter-spacing: -0.03em; color: var(--accion); line-height: 1.15; }
  .glow-no { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.4rem auto; }
  .glow-no span { background: #FFF; border-radius: 999px; padding: 0.45rem 1.1rem; font-size: 0.95rem; font-weight: 700; text-decoration: line-through; opacity: 0.6; }
  .glow-si { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 700; line-height: 1.35; max-width: 36ch; margin: 0 auto; }
  .glow-si b { color: var(--morado); }
  .elegiste { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid rgba(86,84,93,0.25); }
  .elegiste .l1 { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 700; line-height: 1.3; max-width: none; margin: 0 auto; }
  .elegiste .l2 { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.5; margin: 0.9rem auto 0; max-width: 50ch; }

  /* ---- por qué sigues ahí ---- */
  .franja { background: #6B6975; color: #FFF; text-align: center; }
  .franja .inner { max-width: 60rem; }
  .franja .tri { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  @media (min-width: 50rem) { .franja .tri { grid-template-columns: repeat(3, 1fr); } }
  .franja .tri > div { background: rgba(255,255,255,0.12); border-radius: 18px; padding: 1.4rem 1.5rem; }
  .franja .lb { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--amarillo); margin-bottom: 0.6rem; }
  .franja .fr2 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; margin: 0 auto; }

  .cierra-b { text-align: center; font-size: clamp(1.05rem, 2.2vw, 1.3rem); font-weight: 700; margin: 2.2rem auto 0; max-width: none; color: rgba(255,255,255,0.92); }

  /* ---- membresía ---- */
  .memb { background: var(--amarillo); border-radius: 22px; padding: clamp(1.6rem, 3.5vw, 2.4rem); margin-top: 2rem; display: grid; gap: 0.6rem; }
  .memb .mk { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .memb .mt { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  .memb .mp { font-size: 0.98rem; line-height: 1.5; }
  .memb .aviso-memb { background: #FFF; border-radius: 14px; padding: 0.9rem 1.1rem; font-size: 0.92rem; margin-top: 0.4rem; }
  .memb .aviso-memb b { color: var(--morado); }


  /* ---- bloques personas / empresas ---- */
  .bloque-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1.2rem; padding-bottom: 1rem; border-bottom: 3px solid var(--plomo); margin-top: 3.5rem; }
  .bloque-cab .bt { font-size: clamp(1.8rem, 4.2vw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
  .bloque-cab .bd { font-size: 0.98rem; color: var(--ink-soft); margin-right: auto; }
  .bloque-cab .bn { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; background: var(--morado); color: #FFF; padding: 0.3rem 0.8rem; border-radius: 999px; }

  .lead-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
  .lc { background: var(--celeste); border-radius: 20px; padding: 1.5rem 1.4rem; display: grid; gap: 0.4rem; align-content: start; }
  .lc .lk { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .lc .ln { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .lc .ld { font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }

  .modalidad { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; }
  @media (min-width: 46rem) { .modalidad { grid-template-columns: 1fr 1fr; } }
  .mod { background: #FFF; border: 2px solid var(--morado); border-radius: 20px; padding: 1.4rem 1.5rem; display: grid; gap: 0.35rem; }
  .mod .mn { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; }
  .mod .md2 { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }

  .servicio { background: var(--c, var(--beige)); border-radius: 24px; padding: clamp(1.6rem, 3.5vw, 2.6rem); margin-top: 1.8rem; }
  .servicio .sk2 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .servicio h3 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin: 0.4rem 0 0.7rem; letter-spacing: -0.025em; }
  .servicio p { max-width: 60ch; }
  .serv-grid { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: start; margin-top: 1.4rem; }
  @media (min-width: 52rem) { .serv-grid { grid-template-columns: 1.25fr 0.75fr; } }
  .cert-caja { background: #FFF; border-radius: 18px; padding: 1.1rem; display: grid; gap: 0.7rem; }
  .cert-img { border-radius: 12px; background-size: cover; background-position: top center; aspect-ratio: 3/4; border: 1px solid var(--rule); }
  .cert-caja .cc { font-size: 0.86rem; line-height: 1.45; }
  .cert-caja .cc b { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accion); margin-bottom: 0.25rem; }
  .lineas-ia { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.4rem; }
  @media (min-width: 46rem) { .lineas-ia { grid-template-columns: 1fr 1fr; } }
  .lia { background: #FFF; border-radius: 18px; padding: 1.4rem 1.5rem; display: grid; gap: 0.35rem; }
  .lia .ln2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; }
  .lia .ld2 { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }




  /* ============ V3 · componentes nuevos ============ */

  .sesiones { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: 2.2rem; }
  @media (min-width: 52rem) { .sesiones { grid-template-columns: repeat(2, 1fr); } }
  .ses { background: #FFF; border: 1px solid var(--rule); border-radius: 18px; padding: 1.25rem 1.35rem; display: grid; gap: 0.3rem; align-content: start; }
  .ses .sn { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .ses .st { font-size: 1.05rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
  .ses .sd { font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }
  .ses .sq { font-family: var(--script); font-size: 1.55rem; line-height: 1.05; color: var(--morado); margin-top: 0.45rem; }

  .dest { font-size: clamp(1.3rem, 3vw, 1.95rem); font-weight: 700; line-height: 1.28; letter-spacing: -0.022em; max-width: 30ch; margin-top: 1.7rem; text-wrap: balance; }
  .dest.centro { margin-left: auto; margin-right: auto; text-align: center; max-width: 34ch; }
  .versos { display: grid; gap: 0.45rem; margin-top: 1.6rem; font-size: clamp(1.05rem, 2.1vw, 1.3rem); line-height: 1.3; }
  .versos span { display: block; }

  .info-prog { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.5rem 0 1.9rem; }
  .info-prog span { background: #FFF; border-radius: 999px; padding: 0.52rem 1.15rem; font-size: 0.92rem; font-weight: 700; }
  .info-prog span.pend { background: transparent; border: 1.5px dashed rgba(86,84,93,0.42); color: var(--ink-soft); font-weight: 500; }
  .info-prog span.libre { background: var(--accion); color: #FFF; }

  .marcas { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.6rem; }
  @media (min-width: 58rem) { .marcas { grid-template-columns: repeat(3, 1fr); } }
  .mb { background: var(--c); border-radius: 26px; padding: clamp(1.6rem, 3vw, 2.1rem); display: flex; flex-direction: column; gap: 0.6rem; color: var(--plomo); }
  .mb .mb-n { font-size: clamp(1.9rem, 4.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; }
  .mb .mb-c { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
  .mb .mb-d { font-size: 0.92rem; line-height: 1.5; }
  .mb .mb-k { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); margin-top: 0.7rem; }
  .mb .mb-l { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.28rem; font-size: 0.92rem; }
  .mb .mb-l li { padding-left: 0.9rem; position: relative; }
  .mb .mb-l li::before { content: "·"; position: absolute; left: 0; color: var(--accion); font-weight: 700; }
  .mb .insignia { background: rgba(255,255,255,0.62); border-radius: 16px; padding: 0.9rem 1rem; margin-top: auto; display: grid; gap: 0.1rem; }
  .mb .insignia .ik { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .mb .insignia .it { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
  .mb .insignia .id { font-size: 0.82rem; line-height: 1.35; }
  .mb .cta { align-self: flex-start; margin-top: 1rem; }

  .fuentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
  .fte { background: #FFF; border: 1px solid var(--rule); border-radius: 20px; padding: 1.6rem 1.5rem; display: grid; gap: 0.55rem; align-content: start; }
  .fte .ft { font-size: 1.08rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
  .fte .fd { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
  .fte .fc { font-size: 0.98rem; font-weight: 700; line-height: 1.35; padding-top: 0.8rem; border-top: 1px solid var(--rule); }
  .fte .cautela { font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); font-style: italic; }

  .trio { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.3rem; }
  @media (min-width: 50rem) { .trio { grid-template-columns: repeat(3, 1fr); } }
  .tr { background: #FFF; border-radius: 20px; padding: 1.55rem 1.5rem; display: grid; gap: 0.45rem; align-content: start; }
  .tr .trt { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .tr .trn { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .tr .trd { font-size: 0.92rem; line-height: 1.5; }
  .tr .trq { font-size: 0.95rem; font-weight: 700; line-height: 1.35; padding-top: 0.7rem; border-top: 1px solid var(--rule); }
  .trio.sobre-oscuro .tr { background: rgba(255,255,255,0.1); color: #FFF; }
  .trio.sobre-oscuro .tr .trq { border-top-color: rgba(255,255,255,0.22); }

  /* cuatro por fila: los cuatro de arriba son el punto de partida, los cuatro de abajo lo que quieres */
  .lentes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-top: 2rem; list-style: none; padding: 0; }
  @media (min-width: 34rem) { .lentes { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .lentes { grid-template-columns: repeat(4, 1fr); } }
  .lentes li { background: var(--beige); border-radius: 16px; padding: 1.05rem 1.2rem;
               font-size: clamp(0.95rem, 1.6vw, 1.02rem); font-weight: 700; line-height: 1.3;
               display: flex; align-items: flex-start; gap: 0.75rem; }
  /* señal de advertencia, con el rosa de acción de la marca */
  .lentes li::before { content: "!"; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
                       background: var(--accion); color: #FFF; font-size: 0.82rem; font-weight: 700;
                       display: flex; align-items: center; justify-content: center; margin-top: 0.02rem; }

  .exp-hero { background: var(--c); color: var(--plomo); }
  .exp-datos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; align-items: center; }
  .exp-datos span { background: #FFF; border-radius: 999px; padding: 0.45rem 1.05rem; font-size: 0.86rem; font-weight: 700; }
  .cols-lista { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  @media (min-width: 50rem) { .cols-lista { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
  .cols-lista h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
  .cols-lista .lista { font-size: 1rem; gap: 0.45rem; }
  .formatos { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.8rem; }
  @media (min-width: 46rem) { .formatos { grid-template-columns: 1fr auto 1fr; align-items: center; } }
  .fmt { background: #FFF; border: 2px solid var(--morado); border-radius: 20px; padding: 1.5rem 1.6rem; text-align: center; }
  .fmt .fk { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accion); display: block; }
  .fmt .fn { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.25rem; display: block; }
  .fmt-o { text-align: center; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }

  .pendiente { background: rgba(255,255,255,0.7); border-radius: 16px; padding: 1rem 1.2rem; font-size: 0.9rem; line-height: 1.45; margin-top: 1.4rem; max-width: 46rem; }
  .pendiente b { color: var(--morado); }

  .proxi { display: inline-block; background: var(--morado); color: #FFF; border-radius: 999px; padding: 0.42rem 0.95rem; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }

  .bloque-cab.crea { border-bottom-color: var(--accion); }
  .bloque-cab.equi { border-bottom-color: var(--morado); }

  .fuente-caja { background: var(--morado); color: #FFF; border-radius: 26px; padding: clamp(1.8rem, 4vw, 2.8rem); margin-top: 0.5rem; }
  .fuente-caja .fk2 { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--amarillo); }
  .fuente-caja h3 { margin: 0.5rem 0 0.8rem; }
  .fuente-caja p { color: rgba(255,255,255,0.86); }
  .fuente-caja .horario { display: inline-block; background: var(--amarillo); color: var(--plomo); border-radius: 999px; padding: 0.5rem 1.2rem; font-size: 0.92rem; font-weight: 700; margin-top: 1.2rem; }
  .fuente-caja .cta { margin-top: 1.6rem; }
  .recibes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.8rem; margin-top: 1.8rem; }
  .recibes div { background: rgba(255,255,255,0.1); border-radius: 16px; padding: 1.1rem 1.2rem; }
  .recibes .rt2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.2rem; display: block; }
  .recibes .rd2 { font-size: 0.86rem; line-height: 1.45; color: rgba(255,255,255,0.82); display: block; }

  .mod .tp-ver { margin-top: 0.6rem; }
  .drop { min-width: 18rem; }
  .drop .todos { text-transform: none; }
  .hero .versos { color: var(--plomo); }

  /* correcciones de cascada */
  .exp-datos span.proxi { background: var(--morado); color: #FFF; padding: 0.42rem 0.95rem; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; }
  .exp-hero .volver { display: block; }
  .exp-hero .ph-chip { display: block; }
  .exp-hero .ph-gancho { margin-top: 0.7rem; }

  /* sección aparte · Diseña tu entrenamiento */
  .aparte { background: var(--amarillo); }
  .caja-aparte { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
  @media (min-width: 52rem) { .caja-aparte { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; } }
  .aparte .remate-l { border-left-color: var(--morado); }
  .ap-img { aspect-ratio: 4/3; border-radius: 24px; background-size: cover; background-position: top center; background-color: rgba(86,84,93,0.08); }
  .bloque-cab.dis { border-bottom-color: var(--morado); }

  /* carrusel de programas de la portada */
  .progs-cab { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
  .progs-cab > div:first-child { margin-right: auto; }
  .progs-flechas { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.6rem; }
  @media (max-width: 40rem) { .progs-flechas { display: flex; } }

  .progs-home { overflow: hidden; margin-top: 2.2rem; padding: 0.4rem 0; --dur: 70s; }
  .pista { display: flex; gap: 1.1rem; width: max-content; padding: 0 clamp(1.2rem, 5vw, 2rem);
           animation: correr var(--dur) linear infinite; will-change: transform; }
  .progs-home:hover .pista,
  .progs-home:focus-within .pista,
  .progs-home.quieta .pista { animation-play-state: paused; }
  @keyframes correr { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.55rem)); } }
  .pista .tarjeta-prog { flex: 0 0 17rem; max-width: 78vw; }
  .pista .tarjeta-prog.oculta { display: flex; }
  @media (prefers-reduced-motion: reduce) {
    .pista { animation: none; }
    .progs-home { overflow-x: auto; scrollbar-width: none; }
    .progs-home::-webkit-scrollbar { display: none; }
  }
  .progs-home.manual { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
  .progs-home.manual::-webkit-scrollbar { display: none; }
  .progs-home.manual .pista { animation: none; width: max-content; }

  /* portada: apertura larga sobre la foto */
  /* el texto se alinea con el logo del menú, pero no pasa de 40rem de ancho */
  .hero-mid { max-width: 70rem; margin: 0 auto; }
  .hero-mid > * { max-width: 40rem; }
  .hero .versos { font-size: clamp(1rem, 1.9vw, 1.18rem); gap: 0.3rem; margin-top: 1.2rem; }
  .hero p { font-size: clamp(0.98rem, 1.7vw, 1.1rem); max-width: 38rem; margin: 0; }
  .hero .principio { font-size: clamp(1.1rem, 2vw, 1.38rem); max-width: 44rem; line-height: 1.45; }
  .empieza-hoy { font-family: var(--script); font-size: clamp(2rem, 4.6vw, 3rem) !important;
                 line-height: 0.95; color: var(--morado); margin: 0.2rem 0 0 !important; }
  /* con tanto texto encima, la foto necesita más velo del lado del texto */
  .hero .velo { background:
      linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.45) 55%, rgba(255,255,255,0.88) 100%),
      linear-gradient(90deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 42%, rgba(255,255,255,0.35) 68%, transparent 84%); }
  @media (max-width: 52rem) {
    .hero .velo { background:
      linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.88) 38%, rgba(255,255,255,0.95) 100%); }
  }

  /* lo que pierdes */
  .pierdes { background: var(--morado); color: #FFF; }
  .pierdes h2 { max-width: 20ch; }
  .pierdes .versos { color: rgba(255,255,255,0.9); margin-top: 1.8rem; }
  .pierdes .versos span { padding-left: 1.3rem; position: relative; }
  .pierdes .versos span::before { content: "—"; position: absolute; left: 0; color: var(--amarillo); font-weight: 700; }

  /* portada nueva: la foto manda, el texto va en blanco sobre el lado morado */
  .hero { color: #FFF; background-color: #2A2140;
          min-height: min(100svh - 4.4rem, 40rem);
          padding-top: clamp(1.4rem, 2.4vw, 2rem); padding-bottom: clamp(1.4rem, 2.4vw, 2rem); }
  .hero-mid { gap: 0.85rem; }
  .hero .foto { background-position: center; opacity: 1; }
  @media (max-width: 52rem) { .hero .foto { background-position: 70% 16%; } }
  .hero .velo { background:
      linear-gradient(90deg, rgba(38,28,58,0.93) 0%, rgba(38,28,58,0.80) 32%,
                             rgba(38,28,58,0.34) 56%, rgba(38,28,58,0) 74%),
      linear-gradient(180deg, rgba(38,28,58,0.42) 0%, rgba(38,28,58,0) 26%); }
  @media (max-width: 52rem) {
    .hero .velo { background:
      linear-gradient(180deg, rgba(38,28,58,0.50) 0%, rgba(38,28,58,0.84) 42%, rgba(38,28,58,0.93) 100%); }
  }
  .hero h1, .hero .versos, .hero .principio { color: #FFF; }
  .hero p { color: rgba(255,255,255,0.88); }
  /* 'se entrena' en la letra corrida de la marca */
  .hero .principio em { font-family: inherit; font-style: normal; font-weight: 700;
                        font-size: 1em; line-height: inherit; letter-spacing: inherit;
                        color: var(--amarillo); white-space: nowrap; }
  .hero .empieza-hoy { color: var(--amarillo) !important; }
  /* sobre fondo oscuro el resalte va macizo: si no, los trazos que se salen de la franja
     quedan en blanco sobre el morado y parecen un rayón */
  .hero .scr { color: var(--plomo); background: var(--amarillo); padding: 0.02em 0.16em 0.06em;
               border-radius: 3px; }
  .hero .cta.ghost { color: #FFF; border-color: rgba(255,255,255,0.65); }
  .hero .cta.ghost:hover { border-color: var(--accion); }

  /* franja de evidencia, justo debajo de la portada */
  .franja-ev { background: var(--plomo); color: #FFF; padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
  .ev-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; }
  @media (min-width: 46rem) { .ev-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
  .ev-dato { display: grid; gap: 0.15rem; }
  .ev-dato .evn { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; color: var(--amarillo); font-variant-numeric: tabular-nums; }
  .ev-dato .evt { font-size: 0.86rem; line-height: 1.35; color: rgba(255,255,255,0.78); max-width: 20ch; }
  .ev-txt p { font-size: 0.92rem; line-height: 1.5; color: rgba(255,255,255,0.82); margin: 0; max-width: 34ch; }
  .ev-link { color: var(--amarillo); font-weight: 700; padding: 0.4rem 0 0; font-size: 0.82rem; }
  .ev-link:hover { background: none; text-decoration: underline; }

  /* quién soy, en la portada */
  .quien { background: var(--moradito); color: var(--plomo); --hl: var(--amarillo); }
  .quien .eyebrow { color: var(--plomo); }
  .quien .cols { display: grid; grid-template-columns: 1fr; gap: 2.4rem; align-items: center; }
  @media (min-width: 50rem) { .quien .cols { grid-template-columns: 1.15fr 0.85fr; } }
  .quien p { margin-top: 1rem; }
  .quien .retrato { aspect-ratio: 4/5; }

  /* titular de la portada: dos pesos, el grande en amarillo y con la misma tipografía */
  .h-portada { display: grid; gap: 0.1rem; letter-spacing: normal; }
  .h-portada .h-peq { display: block; font-size: clamp(1.9rem, 4.4vw, 3.2rem); font-weight: 500;
                      letter-spacing: -0.022em; line-height: 1.06; color: #FFF; }
  .h-portada .h-gra { display: block; font-size: clamp(2.8rem, 6.6vw, 4.8rem); font-weight: 700;
                      letter-spacing: -0.042em; line-height: 0.98; color: var(--amarillo); }

  /* las cuatro relaciones, en una sola línea */
  /* las cuatro relaciones: rejilla de 2x2 con las barras alineadas en columna */
  .rel-bloque { display: grid; grid-template-columns: auto auto; justify-content: start;
                column-gap: clamp(1.3rem, 3.2vw, 2.6rem); row-gap: 0.12rem;
                margin-top: -1.5rem; font-size: clamp(1.3rem, 2.9vw, 1.9rem); font-weight: 700;
                line-height: 1.25; color: #FFF; }
  .rel-bloque > span { display: inline-flex; align-items: center; gap: 0.45em; }
  .rel-bloque i.pto { width: 0.3em; height: 0.3em; border-radius: 50%; background: var(--amarillo);
                      display: inline-block; flex: none; }
  @media (max-width: 34rem) {
    .rel-bloque { grid-template-columns: 1fr; row-gap: 0.08rem; }
  }
  .hero .metas { margin-top: -0.15rem !important; line-height: 1.62; }
  .hero .principio { margin-top: 0.65rem !important; }

  /* con un titular amarillo tan grande, el resto del amarillo estorba */
  .hero .empieza-hoy { color: var(--amarillo) !important; }

  /* banderas de la franja */
  .banderas { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-self: end; }
  @media (max-width: 46rem) { .banderas { justify-self: start; } }
  .bnd { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 700; color: rgba(255,255,255,0.9); }
  .bnd svg { width: clamp(2.4rem, 3.6vw, 3.2rem); height: auto; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.22); display: block; }

  /* botón grande, el único de la portada */
  .cta.grande { font-size: 1.05rem; padding: 1.15rem 2.4rem; }
  .hero .acts { margin-top: 1.1rem; justify-content: center; }

  /* lo que pierdes, dentro de "¿Dónde estás hoy?" */
  .pierdes-bloque { margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
  .pierdes-bloque h3 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -0.028em; line-height: 1.12; }
  .pierdes-4 { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid;
               grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  @media (min-width: 62rem) { .pierdes-4 { grid-template-columns: repeat(4, 1fr); } }
  .pierdes-4 li { background: var(--plomo); color: #FFF; border-radius: 18px; padding: 1.4rem 1.3rem;
                  font-size: clamp(0.98rem, 1.7vw, 1.08rem); font-weight: 700; line-height: 1.3;
                  display: flex; flex-direction: column; gap: 0.9rem; min-height: 7.4rem; }
  .pierdes-4 li::before { content: "✕"; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
                  background: var(--accion); color: #FFF; font-size: 0.7rem; font-weight: 700;
                  display: flex; align-items: center; justify-content: center; }

  /* las tres marcas dejan el beige */
  .empezar { background: var(--bg); }

  /* barra de cierre del método */
  .barra-tesis { background: var(--morado); color: #FFF; text-align: center;
                 padding-top: clamp(2.6rem, 5vw, 4rem); padding-bottom: clamp(2.6rem, 5vw, 4rem); }
  .tesis { font-size: clamp(1.5rem, 3.8vw, 2.6rem); font-weight: 500; line-height: 1.22;
           letter-spacing: -0.025em; margin: 0 auto; max-width: 28ch; }
  .tesis span { font-weight: 700; color: var(--amarillo); }

  /* remate de cada movimiento en Método */
  .paso .q { font-size: 0.93rem; font-style: normal; font-weight: 700; line-height: 1.4;
             padding-top: 0.75rem; margin-top: 0.35rem; border-top: 1px solid rgba(86,84,93,0.22); }

  /* el nombre del entrenamiento, en mayúsculas como "5 SESIONES" */
  .tp-nom { text-transform: uppercase; font-size: clamp(1rem, 1.7vw, 1.1rem);
            letter-spacing: 0.012em; line-height: 1.2; }

  /* barra ploma más delgada, con el rótulo al costado del número */
  .franja-ev { padding-top: clamp(1.3rem, 2.4vw, 1.9rem); padding-bottom: clamp(1.3rem, 2.4vw, 1.9rem); }
  .ev-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  @media (min-width: 46rem) { .ev-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
  .ev-dato { display: flex; align-items: center; gap: 0.8rem; }
  .ev-dato .evn { font-size: clamp(2.3rem, 4.8vw, 3.3rem); }
  .ev-dato .evt { font-size: clamp(0.95rem, 1.6vw, 1.1rem); line-height: 1.18; max-width: none; }
  .banderas { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; justify-self: auto; }
  .bnd svg { width: 1.55rem; }

  /* "¿Qué quieres entrenar?" con fondo propio para que no se mezcle */
  .empezar { background: var(--amarillo); }
  .empezar .eyebrow { color: var(--morado); }
  .tres-lineas { display: grid; gap: 0.5rem; margin-top: 1.4rem; }
  .tres-lineas p { font-size: clamp(1.05rem, 2vw, 1.26rem); margin: 0; max-width: none; }
  .por-eso { font-size: clamp(1.1rem, 2.1vw, 1.35rem); font-weight: 700; margin-top: 1.5rem; max-width: 40ch; }

  /* fichas de marca centradas */
  .mb { text-align: center; align-items: center; }
  .mb .mb-d { max-width: 30ch; }
  .mb .insignia { width: 100%; }
  .mb .cta { align-self: center; }

  /* el botón de la portada, centrado en la página */
  .hero .acts { max-width: none; }

  /* barra de datos: cada grupo centrado en su tercio */
  .ev-dato { justify-content: center; }
  @media (max-width: 46rem) { .ev-dato { justify-content: flex-start; } }

  /* amarillo más bajito para "¿Qué quieres entrenar?" */
  /* con CREA en amarillo, su ficha necesita fondo blanco para separarse */
  .empezar { background: var(--bg); }
  .por-eso { font-size: clamp(1.05rem, 2vw, 1.26rem); font-weight: 700; margin: 0; max-width: none; }

  /* barra de la tesis: dos renglones justos y más delgada */
  .barra-tesis { padding-top: clamp(2rem, 3.4vw, 2.8rem); padding-bottom: clamp(2rem, 3.4vw, 2.8rem); }
  .tesis { max-width: none; font-size: clamp(1.4rem, 3.2vw, 2.25rem); line-height: 1.24; }

  /* cierre */
  .cierre-grande { max-width: 24ch; }

  /* La Fuente en la portada: texto y el directo, a dos columnas */
  .fuente-dos { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: center; }
  @media (min-width: 52rem) { .fuente-dos { grid-template-columns: 1.02fr 0.98fr; gap: 2.6rem; } }
  .fc-txt { display: block; }
  .fc-img { border-radius: 18px; background-size: cover; background-position: center 32%;
            aspect-ratio: 4/5; background-color: rgba(255,255,255,0.12); }
  .fc-actos { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }

  /* ---- menú desplegable grande, estilo panel ---- */
  .nav-in { position: relative; }
  .tabs > li.con-mega { position: static; }
  .drop.mega { left: 0; right: 0; min-width: 0; max-width: none; max-height: none; overflow: visible;
               top: calc(100% + 0.55rem); padding: 0; border-radius: 22px;
               box-shadow: 0 18px 48px rgba(86,84,93,0.18); overflow: hidden; }
  .mega-in { display: grid; grid-template-columns: 16rem 1fr 18rem; align-items: stretch; }
  @media (max-width: 74rem) { .mega-in { grid-template-columns: 14rem 1fr 15rem; } }

  .mega-rail { display: flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 0.9rem;
               border-right: 1px solid var(--rule); }
  .drop .mrail { display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
           background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 0.92rem;
           font-weight: 700; color: var(--ink); padding: 0.7rem 0.8rem; border-radius: 12px;
           text-transform: none; line-height: 1.2; }
  .drop .mrail:hover { background: var(--beige); }
  .drop .mrail.activa { background: var(--moradito); }
  .drop .mrail .mi { flex: none; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; }
  .drop .mrail .mi svg { width: 1.5rem; height: 1.5rem; fill: var(--morado); opacity: 0.85; }
  /* círculos translúcidos, como los de tu logo: así se ve que se superponen */
  .drop .mrail .mi svg circle { fill-opacity: 0.6; }
  .drop .mrail.activa .mi svg circle { fill-opacity: 0.75; }
  .drop .mrail.activa .mi svg { fill: var(--accion); opacity: 1; }
  .drop .mrail .ch { margin-left: auto; color: var(--ink-soft); font-size: 1.1rem; line-height: 1; }
  .drop .mrail.activa .ch { color: var(--accion); }

  .mega-lista { padding: 1.1rem 1.4rem; }
  .mfam { display: none; flex-direction: column; gap: 0.1rem; }
  .mfam.activa { display: flex; }
  .mfam-k { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
            color: var(--accion); padding: 0.3rem 0.7rem 0.6rem; }
  .drop .mfam button { display: block; width: 100%; text-align: left; background: none; border: 0;
                 font-family: var(--sans); font-size: 0.92rem; color: var(--ink); padding: 0.55rem 0.7rem;
                 border-radius: 10px; cursor: pointer; text-transform: none; }
  .drop .mfam button:hover { background: var(--beige); }
  .drop .mfam .ver-todos { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--rule);
                     border-radius: 0; font-weight: 700; color: var(--morado); }
  .drop .mfam .ver-todos:hover { background: none; text-decoration: underline; }

  .mega-promo { background: var(--celeste); padding: 1.5rem 1.4rem; display: flex; flex-direction: column;
                gap: 0.5rem; justify-content: center; color: var(--plomo); }
  .mega-promo .mp-t { font-size: 1.12rem; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; }
  .mega-promo .mp-d { font-size: 0.85rem; line-height: 1.45; }
  .mega-promo .cta { align-self: flex-start; margin-top: 0.6rem; padding: 0.7rem 1.3rem; font-size: 0.84rem; }

  /* la pestaña abierta se ve activa aunque no sea la página actual */
  .tab[aria-expanded="true"] { background: var(--beige); }
  .tab[aria-current="page"][aria-expanded="true"] { background: var(--morado); color: #FFF; }
  .tab[aria-current="page"]:hover { background: var(--morado); }

  /* "¿Te sientes estancado?" abre la caja, centrado */
  .crisis .big.centrado { text-align: center; max-width: none; margin: 0 auto 0.4rem; }

  /* ---- portada de cada landing, a sangre ---- */
  .prog-portada { position: relative; isolation: isolate; overflow: hidden; text-align: center;
                  min-height: min(100svh - 4.4rem, 33rem); display: flex; flex-direction: column;
                  justify-content: center; color: #FFF; background-color: #2A2140;
                  background-size: cover; background-position: center 32%;
                  padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
  .prog-portada::after { content: ""; position: absolute; inset: 0; z-index: -1;
                  background: linear-gradient(180deg, rgba(36,26,56,0.62) 0%, rgba(36,26,56,0.74) 48%,
                                                      rgba(36,26,56,0.88) 100%); }
  .prog-portada > .inner { position: relative; z-index: 1; max-width: 52rem; }
  .prog-portada .volver { color: rgba(255,255,255,0.85); display: block; text-align: left;
                          margin-bottom: 1.6rem; padding-bottom: 0; }
  .prog-portada .volver:hover { color: var(--amarillo); }
  .prog-portada .ph-chip { display: block; opacity: 0.8; color: var(--celeste); }
  .prog-portada .ph-sub { color: var(--amarillo); margin: 0.7rem 0 0.5rem; }
  .prog-portada .ph-nom { color: #FFF; max-width: 20ch; margin: 0 auto; }
  .prog-portada .ph-gancho { color: rgba(255,255,255,0.9); max-width: 40ch; margin: 1.1rem auto 0; }
  .prog-portada .ph-triada { color: var(--amarillo); margin: 1.2rem auto 1.6rem; }
  .prog-portada .info-prog { justify-content: center; margin: 1.4rem auto 1.8rem; }
  .prog-portada .info-prog span { background: rgba(255,255,255,0.16); color: #FFF; }
  .prog-portada .info-prog span.pend { background: transparent; border-color: rgba(255,255,255,0.4);
                                       color: rgba(255,255,255,0.78); }
  .prog-portada .info-prog span.libre { background: var(--accion); color: #FFF; }
  /* las apaisadas van centradas; las verticales piden subir el encuadre */
  .prog-portada[class*="himg-"] { background-position: center center; }
  /* las dos que no tienen foto se quedan en morado liso */
  .prog-portada.vacia { background-color: var(--morado); }
  .prog-portada.vacia::after { background: linear-gradient(180deg, rgba(36,26,56,0.1), rgba(36,26,56,0.35)); }

  /* ---- cuerpo de la landing ---- */
  .intro-prog { background: var(--bg); }
  .ip-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  @media (min-width: 56rem) { .ip-grid { grid-template-columns: 1.25fr 0.75fr; gap: 3rem; } }
  .ip-txt > :first-child { margin-top: 0; }
  .ip-txt h2 { margin-top: 0.2rem; }
  .ip-txt h2 + p { margin-top: 1.3rem; }

  /* ficha de la oferta, pegada al scroll */
  .ficha { background: var(--beige); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2rem);
           display: grid; gap: 0.5rem; align-content: start; }
  @media (min-width: 56rem) { .ficha { position: sticky; top: 6rem; } }
  .ficha .fi-k { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
                 font-weight: 700; color: var(--accion); }
  .ficha .fi-n { font-size: clamp(1.4rem, 2.8vw, 1.85rem); letter-spacing: -0.03em; line-height: 1.1;
                 margin: 0.2rem 0 0.6rem; }
  .ficha .fi-p { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.03em;
                 color: var(--morado); font-variant-numeric: tabular-nums; }
  .ficha .fi-cta { margin-top: 0.9rem; text-align: center; }
  .ficha .fi-datos { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem;
                     padding-top: 1rem; border-top: 1px solid rgba(86,84,93,0.2); }
  .ficha .fi-datos span { background: #FFF; border-radius: 999px; padding: 0.4rem 0.9rem;
                          font-size: 0.8rem; font-weight: 700; }

  /* banda de señales */
  .senales-band { background: var(--beige); }
  .senales { display: grid; grid-template-columns: 1fr; gap: 1.2rem 1.6rem; margin-top: 2rem; }
  @media (min-width: 44rem) { .senales { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 66rem) { .senales { grid-template-columns: repeat(4, 1fr); } }
  .sen { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; }
  .sen .sen-i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accion);
                color: #FFF; font-size: 0.78rem; font-weight: 700; display: flex;
                align-items: center; justify-content: center; margin-top: 0.05rem; }
  .sen .sen-t { font-size: 0.98rem; font-weight: 700; line-height: 1.35; }

  /* temario desplegable */
  .temario { display: grid; gap: 0.5rem; margin-top: 2rem; max-width: 56rem; }
  .tem-item { background: #FFF; border: 1px solid var(--rule); border-radius: 14px; }
  .tem-item summary { cursor: pointer; list-style: none; padding: 1rem 1.2rem;
                      display: flex; align-items: baseline; gap: 0.9rem; }
  .tem-item summary::-webkit-details-marker { display: none; }
  .tem-item summary::after { content: "+"; margin-left: auto; font-size: 1.35rem; line-height: 1;
                             color: var(--accion); font-weight: 700; align-self: center; }
  .tem-item[open] summary::after { content: "−"; }
  .tem-item .tn { flex: none; font-size: 0.78rem; font-weight: 700; color: var(--accion);
                  font-variant-numeric: tabular-nums; min-width: 1.4rem; }
  .tem-item .tt { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
  .tem-item p { margin: 0; padding: 0 3rem 1.1rem 3.3rem; font-size: 0.93rem; line-height: 1.55;
                color: var(--ink-soft); max-width: none; }
  .tem-item .tq { font-family: var(--script); font-size: 1.5rem; line-height: 1.1;
                  color: var(--morado); padding-top: 0.2rem; }
  .tem-item.plano { padding: 1rem 1.2rem; display: flex; align-items: baseline; gap: 0.9rem; }

  /* ---- primer paso: prediagnóstico, sesión exploratoria y cuaderno ---- */
  .primer-paso { background: var(--moradito); color: var(--plomo); --hl: #FFF; }
  .primer-paso .eyebrow { color: var(--morado); }
  .pasos3 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
  @media (min-width: 52rem) { .pasos3 { grid-template-columns: repeat(3, 1fr); } }
  .pasos3.una { grid-template-columns: 1fr; max-width: 40rem; }
  .p3 { background: #FFF; border-radius: 20px; padding: 1.6rem 1.5rem; display: flex;
        flex-direction: column; gap: 0.45rem; }
  .p3.destacada { border: 2px solid var(--accion); }
  .p3 .p3-k { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
              font-weight: 700; color: var(--accion); }
  .p3 .p3-t { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .p3 .p3-d { font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
  .p3 .cta { align-self: flex-start; margin-top: auto; padding-top: 0.8rem; padding-bottom: 0.8rem;
             font-size: 0.85rem; }
  .p3 .cta.ghost { color: var(--morado); border-color: var(--morado); }
  .p3 .cta.ghost:hover { background: var(--morado); color: #FFF; border-color: var(--morado); }
  .p3 > .cta { margin-top: 1.2rem; }

  /* ---- extras dentro de la ficha ---- */
  .fi-extras { display: grid; gap: 0.6rem; margin-top: 1.2rem; padding-top: 1.2rem;
               border-top: 1px solid rgba(86,84,93,0.2); }
  .fx { background: #FFF; border-radius: 14px; padding: 0.95rem 1.1rem; display: grid; gap: 0.2rem; }
  .fx .fx-k { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
              font-weight: 700; color: var(--accion); }
  .fx .fx-t { font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
  .fx .fx-d { font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft); }
  .fx .fx-a { font-size: 0.8rem; font-weight: 700; color: var(--morado); text-decoration: none;
              margin-top: 0.35rem; }
  .fx .fx-a:hover { text-decoration: underline; }

  /* el cuaderno, con la carátula del programa */
  .fx.cuaderno { grid-template-columns: 4.6rem 1fr; gap: 0.9rem; align-items: start;
                 border: 2px solid var(--accion); }
  .fx.cuaderno .fx-img { border-radius: 9px; aspect-ratio: 3/4; background-size: cover;
                         background-position: center; background-color: var(--moradito);
                         box-shadow: 0 3px 10px rgba(86,84,93,0.22); }
  .fx.cuaderno .fx-img.sinfoto { background-color: var(--morado); }
  .fx-cuerpo { display: grid; gap: 0.2rem; }
  .fx .fx-p { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--morado);
              margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
  .fx .fx-cta { margin-top: 0.5rem; justify-self: start; padding: 0.55rem 1.1rem; font-size: 0.78rem; }

  /* cita destacada de la landing */
  .cita-p { margin: 1.4rem 0 1.3rem; padding: 0 0 0 1.3rem; border-left: 4px solid var(--accion);
            font-size: clamp(1.1rem, 2.1vw, 1.32rem); line-height: 1.45; font-weight: 700;
            max-width: 46ch; }

  /* las preguntas que abre el entrenamiento */
  .preguntas { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 0.55rem; }
  .preguntas li { padding-left: 1.7rem; position: relative; font-size: 1.02rem; line-height: 1.4;
                  font-weight: 700; }
  .preguntas li::before { content: "?"; position: absolute; left: 0; top: 0.02em;
                  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--moradito);
                  color: var(--morado); font-size: 0.72rem; font-weight: 700;
                  display: flex; align-items: center; justify-content: center; }

  /* "lo que vas a entrenar", ya dentro de la columna de texto */
  .entrenar-col { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
  .senales.vertical { grid-template-columns: 1fr !important; gap: 0.75rem; margin-top: 1.2rem; }

  /* remate morado centrado */
  .remate-final { text-align: center; }
  .remate-final .inner { max-width: 44rem; }
  .remate-final p { margin-left: auto; margin-right: auto; }
  .eyebrow.centro { text-align: center; }

  /* el cuaderno: precio de lanzamiento y la nota de gratuidad */
  .fx .fx-p em { display: block; font-family: var(--sans); font-style: normal; font-size: 0.6rem;
                 letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
                 color: var(--ink-soft); margin-top: 0.15rem; }
  .fx-gratis { display: block; margin-top: 0.6rem; font-size: 0.78rem; font-weight: 700;
               line-height: 1.35; color: var(--morado); }
  .fx-gratis::before { content: "✓ "; color: var(--accion); }

  /* ---- Empresas: paleta corporativa, sin el rosa de acción ---- */
  /* redefinir la variable basta: todo lo que la use cambia de golpe */
  .corp { --accion: #5B4B78; }
  .corp .cta { background: var(--morado); }
  .corp .cta:hover { background: var(--plomo); }
  .corp .cta.ghost { background: transparent; color: var(--morado); border-color: var(--morado); }
  .corp .cta.ghost:hover { background: var(--plomo); color: #FFF; border-color: var(--plomo); }
  /* sobre los fondos oscuros el morado no se ve: ahí manda el amarillo */
  .corp .prog-portada .cta { background: var(--amarillo); color: var(--plomo); }
  .corp .prog-portada .cta:hover { background: #FFF; }
  .corp .prog-portada .info-prog span.libre { background: var(--amarillo); color: var(--plomo); }
  .corp .prog-portada .ph-chip { color: var(--celeste); }
  .corp .cierre-prog .cta, .corp .remate-final .cta { background: var(--amarillo); color: var(--plomo); }
  .corp .cierre-prog .cta:hover, .corp .remate-final .cta:hover { background: #FFF; }
  /* estructura más sobria: el destacado del cuaderno pierde el borde chillón */
  .corp .fx.cuaderno { border-color: var(--morado); }
  .corp .p3.destacada { border-color: var(--morado); }

  /* ¿cómo sé si estoy negociando mi valor? */
  .negociando { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
  .negociando h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.15;
                   margin-bottom: 0.9rem; }
  .frases-q { list-style: none; padding: 0; margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .frases-q li { background: var(--beige); border-radius: 999px; padding: 0.5rem 1.05rem;
                 font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
  .preg-q { margin-top: 1.7rem !important; font-size: clamp(1.08rem, 2.2vw, 1.32rem);
            font-weight: 700; color: var(--morado); line-height: 1.3; }

  /* remate morado: dos frases, los datos y el botón, todo en una banda */
  /* banda apretada: el rótulo arriba, la frase larga en una línea y la fuerte en dos */
  .remate-final { padding-top: clamp(2rem, 3.4vw, 2.6rem); padding-bottom: clamp(2rem, 3.4vw, 2.6rem); }
  .remate-final .inner { max-width: 68rem; }
  .remate-final .rf-k { font-size: clamp(0.78rem, 1.4vw, 0.92rem); letter-spacing: 0.2em;
                        text-transform: uppercase; font-weight: 700; color: var(--celeste);
                        margin: 0 auto 0.9rem; text-align: center; max-width: none; line-height: 1.2; }
  .remate-final .rf-1 { color: rgba(255,255,255,0.86); margin: 0 auto; max-width: none;
                        font-size: clamp(0.95rem, 1.45vw, 1.05rem); line-height: 1.5; }
  .remate-final .rf-2 { color: #FFF; margin: 0.9rem auto 0; max-width: 56ch;
                        font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: 700;
                        letter-spacing: -0.022em; line-height: 1.3; text-wrap: balance; }
  .remate-final .info-prog { margin: 1.5rem auto 1.3rem; }
  .remate-final .info-prog span { background: rgba(255,255,255,0.16); color: #FFF; }
  .remate-final .info-prog span.libre { background: var(--amarillo); color: var(--plomo); }

  /* preguntas que titulan una sección, en morado */
  .que-es { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
  .que-es .eyebrow { margin-bottom: 0.9rem; }
  .porque-cierre { font-size: clamp(1rem, 1.9vw, 1.15rem); line-height: 1.5; margin: -0.6rem auto 1.6rem;
                   max-width: 42ch; }

  /* precio con tachado de lanzamiento */
  .ficha .fi-p s { font-size: 0.62em; opacity: 0.5; font-weight: 500; margin-right: 0.35rem; }
  .ficha .fi-p em { display: block; font-style: normal; font-size: 0.42em; letter-spacing: 0.16em;
                    text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-top: 0.2rem; }

  /* ---- el panel de Empresas va oscuro, para separarlo de Programas ---- */
  #drop-emp { background: #2A2140; border-color: rgba(255,255,255,0.16);
              box-shadow: 0 16px 42px rgba(26,18,44,0.4); }
  #drop-emp .mega-rail { border-right-color: rgba(255,255,255,0.14); }
  #drop-emp .mrail { color: rgba(255,255,255,0.82); }
  #drop-emp .mrail:hover { background: rgba(255,255,255,0.08); color: #FFF; }
  #drop-emp .mrail.activa { background: rgba(255,255,255,0.13); color: #FFF; }
  #drop-emp .mrail .mi svg { fill: var(--celeste); opacity: 0.9; }
  #drop-emp .mrail.activa .mi svg { fill: var(--amarillo); opacity: 1; }
  #drop-emp .mrail .mi svg circle, #drop-emp .mrail .mi svg rect { fill-opacity: 1; }
  #drop-emp .mrail .ch { color: rgba(255,255,255,0.5); }
  #drop-emp .mrail.activa .ch { color: var(--amarillo); }
  #drop-emp .mfam-k { color: var(--celeste); }
  #drop-emp .mfam button { color: rgba(255,255,255,0.88); }
  #drop-emp .mfam button:hover { background: rgba(255,255,255,0.1); color: #FFF; }
  #drop-emp .mfam .ver-todos { border-top-color: rgba(255,255,255,0.16); color: var(--amarillo); }
  #drop-emp .mega-promo { background: rgba(255,255,255,0.08); color: #FFF; }
  #drop-emp .mega-promo .mp-d { color: rgba(255,255,255,0.8); }
  #drop-emp .mega-promo .cta { background: var(--amarillo); color: var(--plomo); }
  #drop-emp .mega-promo .cta:hover { background: #FFF; }

  /* ---- aparición al bajar ----
     Solo se activa si el guion arranca y solo en lo que queda fuera de pantalla:
     lo que ya se ve al cargar nunca se esconde. */
  @media (prefers-reduced-motion: no-preference) {
    html.anim [data-rev] { opacity: 0; transform: translateY(20px);
                           transition: opacity 0.6s cubic-bezier(.22,.61,.36,1),
                                       transform 0.6s cubic-bezier(.22,.61,.36,1); }
    html.anim [data-rev].dentro { opacity: 1; transform: none; }
    html.anim [data-rev].ya { transition: none; opacity: 1; transform: none; }
  }

  /* la salida de la landing, alineada con el logo del menú */
  .prog-portada { position: relative; }
  .prog-portada > .volver { position: absolute; top: clamp(1.1rem, 2.2vw, 1.7rem);
                            left: 50%; transform: translateX(-50%);
                            width: min(74rem, 100% - 2 * clamp(1.2rem, 5vw, 2rem));
                            text-align: left; margin: 0; padding: 0; z-index: 3; }

  /* el botón del cierre, separado del titular y algo más discreto */
  .remate-final .cta { margin-top: 2.2rem; }
  .remate-final .info-prog + .cta { margin-top: 0; }
  .remate-final .cta.grande { font-size: 0.95rem; padding: 1rem 2.1rem; }

  /* el nombre de la marca en el menú, con su oficio más visible */
  .nav-nom span { font-weight: 700; color: var(--morado); opacity: 0.9; font-size: 0.66rem; }

  /* botón de menú en móvil: tres rayas */
  .menu-movil { background: none; border: 0; cursor: pointer; padding: 0.5rem; margin-left: auto;
                display: inline-flex; align-items: center; justify-content: center; }
  @media (min-width: 62rem) { .menu-movil { display: none; } }
  .menu-movil .rayas { display: grid; gap: 4px; width: 1.4rem; }
  .menu-movil .rayas i { display: block; height: 2px; border-radius: 2px; background: var(--ink);
                         transition: transform 0.22s ease, opacity 0.18s ease; }
  .menu-movil[aria-expanded="true"] .rayas i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-movil[aria-expanded="true"] .rayas i:nth-child(2) { opacity: 0; }
  .menu-movil[aria-expanded="true"] .rayas i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Contacto, el último del menú, marcado como acción */
  .tab-contacto { border: 1.5px solid var(--morado); color: var(--morado); font-weight: 700; }
  .tab-contacto:hover { background: var(--morado); color: #FFF; }

  /* la sesión exploratoria es la puerta gratuita: se marca */
  .fx.exploratoria { border: 2px solid var(--morado); background: var(--moradito); }
  .fx.exploratoria .fx-k { color: var(--morado); }
  .fx.exploratoria .fx-t { font-size: 1.02rem; line-height: 1.25; }
  .fx.exploratoria .fx-d { color: var(--plomo); opacity: 0.85; }
  .fx.exploratoria .fx-cta { background: var(--morado); margin-top: 0.7rem; }
  .fx.exploratoria .fx-cta:hover { background: var(--plomo); }
  .corp .fx.exploratoria { background: #FFF; }

  /* ---- bonos ---- */
  .bonos { background: var(--bg); }
  .bonos-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
  @media (min-width: 44rem) { .bonos-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 68rem) { .bonos-grid { grid-template-columns: repeat(4, 1fr); } }
  .bono { background: var(--moradito); border-radius: 20px; padding: 1.6rem 1.5rem;
          display: flex; flex-direction: column; gap: 0.45rem; }
  .bono .bn-k { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
                font-weight: 700; color: var(--accion); }
  .bono .bn-t { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
  .bono .bn-d { font-size: 0.92rem; line-height: 1.5; }
  .bono .bn-q { font-size: 0.9rem; font-weight: 700; line-height: 1.4; color: var(--morado);
                margin-top: auto; padding-top: 0.9rem; border-top: 1px solid rgba(86,84,93,0.2); }
  .bonos-aviso { margin-top: 1.4rem; font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }

  /* el SOS manda sobre los demás */
  .bono.destacado { background: var(--morado); color: #FFF; }
  .bono.destacado .bn-k { color: var(--amarillo); }
  .bono.destacado .bn-q { color: var(--amarillo); border-top-color: rgba(255,255,255,0.22); }

  /* resultados de LEAD */
  .resultados { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.2rem; }
  @media (min-width: 52rem) { .resultados { grid-template-columns: repeat(3, 1fr); } }
  .res { background: var(--celeste); border-radius: 22px; padding: 1.8rem 1.6rem;
         display: flex; flex-direction: column; gap: 0.5rem; }
  .res .res-n { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.04em;
                line-height: 0.9; color: var(--morado); opacity: 0.35; font-variant-numeric: tabular-nums; }
  .res .res-t { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
                margin-top: 0.3rem; }
  .res .res-d { font-size: 0.93rem; line-height: 1.5; }

  /* resultados en columna, dentro de una landing */
  .resultados.col { grid-template-columns: 1fr !important; gap: 0.7rem; margin-top: 1.2rem; }
  .res.chico { padding: 1.1rem 1.3rem; gap: 0.25rem; }
  .res.chico .res-n { font-size: 1.05rem; opacity: 0.55; }
  .res.chico .res-t { font-size: 1.05rem; margin-top: 0; }
  .res.chico .res-d { font-size: 0.88rem; }
  .corp .res { background: var(--celeste); }

  /* el resultado, dentro del cierre morado */
  .remate-final .rf-t { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; letter-spacing: -0.035em;
                        line-height: 1; color: #FFF; margin: 0.3rem auto 0.9rem; }

  /* cuando el cierre solo lleva datos y botón, la banda se estrecha */
  .remate-final:not(:has(.rf-2)) { padding-top: clamp(1.8rem, 3vw, 2.4rem);
                                   padding-bottom: clamp(1.8rem, 3vw, 2.4rem); }
  .remate-final:not(:has(.rf-2)) .info-prog { margin-top: 1rem; }

  /* ============ V4 · afinado de diseño ============
     Tres cosas, y en este orden:
       1. La letra. Antes se pedían Proxima Nova y Savoye LET sin servirlas:
          funcionaba en el ordenador de quien las tiene instaladas y en
          ningún otro. Ahora Figtree y Parisienne van dentro del archivo,
          así que la web se ve igual en todas partes y sin conexión.
       2. El contraste. Los botones, los rótulos pequeños y el texto
          secundario cumplen la norma (AA). El color de acción bajó de
          salmón a frambuesa para poder llevar blanco encima.
       3. El relieve. Las tarjetas blancas se apoyan sobre papel crema y
          llevan todas la misma sombra: un sistema, no una sombra suelta.
     Como el resto del bloque, lo de aquí pisa a lo de arriba. */

  /* ---- 1 · la letra corrida -------------------------------------------
     Parisienne tiene la altura de equis baja y las colas largas. El bloque
     de resalte estaba medido para Savoye y dejaba media palabra fuera:
     se baja el techo, se sube el suelo y se ensancha el respiro lateral. */
  /* display:inline y no inline-block, que es como estaba. Un inline-block es
     una caja atómica: box-decoration-break no le afecta, así que cuando la
     frase se partía en dos renglones —cosa que en el móvil pasa— el resalte
     salía como un rectangulón detrás de las dos líneas en vez de ceñirse a
     cada una. Se veía en Membresía y en Fuentes. En inline, cada trozo lleva
     su propia franja, que es lo que se quería desde el principio. */
  .scr { display: inline; font-size: 1.62em; line-height: 1.05; padding: 0 0.16em 0.04em;
         background: linear-gradient(transparent 30%, var(--hl, var(--amarillo)) 30%,
                                     var(--hl, var(--amarillo)) 88%, transparent 88%); }
  h1 .scr { font-size: 1.5em; }
  h2 .scr { font-size: 1.58em; }
  /* sobre fondo oscuro sigue macizo, pero centrado en la caja nueva */
  .hero .scr { padding: 0.04em 0.18em 0.08em; border-radius: 4px; }

  /* ---- 2 · superficies ------------------------------------------------
     El papel es crema, no blanco. Eso deja que la tarjeta blanca sea una
     tarjeta: ya no hace falta un filete para que se note dónde empieza. */
  .nav { background: rgba(251,248,244,0.92); }
  .hero, .prog-portada, #drop-emp { background-color: var(--tinta); }

  /* una sola sombra para todo lo que es una tarjeta */
  .ses, .fte, .tr, .hito, .capa, .exp, .r7, .inc, .gar, .p3, .fx, .mini,
  .puerta, .etapa, .lia, .mod, .fmt, .observamos, .segui-caja, .cert-caja,
  .tem-item, .inc-item, .hito-v, .tabla-p, .ab > div, .cuatro > div,
  .urg div, .porque-lista li, .sintomas-a li, .dh, .tarjeta-prog, .rel,
  .memb, .incluye-caja, .no-prom, .avisolegal, .bono, .res, .lc, .mb,
  .pil, .fase, .paso, .ci, .bene, .fr, .lentes li, .pierdes-4 li,
  .precio-caja, .fuente-caja, .promesa-caja, .transversal, .servicio {
    box-shadow: var(--s1);
  }
  /* lo que se levanta al pasar por encima, se levanta de verdad */
  .mini, .puerta, .exp, .tarjeta-prog, .rel, .fr {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .mini:hover, .puerta:hover, .exp:hover, .tarjeta-prog:hover, .fr:hover { box-shadow: var(--s2); }
  .rel:hover { box-shadow: var(--s2); }
  .drop { box-shadow: var(--s3); }
  @media (prefers-reduced-motion: reduce) {
    .mini, .puerta, .exp, .tarjeta-prog, .rel, .fr { transition: none; }
  }

  /* ---- 3 · contraste --------------------------------------------------
     El frambuesa lleva blanco encima sin problema, pero en rótulo de 10 px
     sobre un pastel se queda corto. Para esos casos hay un tono más hondo:
     misma familia, legible sobre los cuatro fondos de las marcas. */
  :root { --accion-t: #A52A3C; }
  .ficha .fi-k, .tarjeta-prog .tp-sub, .tarjeta-prog .tp-ver,
  .mb .mb-k, .mb .insignia .ik, .bono .bn-k, .lc .lk, .pil .pn,
  .servicio .sk2, .memb .mk, .no-prom li::before, .lista li::before,
  .ab li::before, .mb .mb-l li::before, .honesto li::before {
    color: var(--accion-t);
  }
  .honesto li::before { background: var(--accion-t); }
  /* los tres rótulos del círculo del método iban en plomo sobre el morado:
     prácticamente invisibles (1,04 de contraste). */
  .filo .et { color: #FFF; }

  /* ---- 4 · la portada pide una acción --------------------------------- */
  .hero .acts { justify-content: flex-start; margin-top: 1.5rem; gap: 0.8rem; }
  .hero .acts .cta { box-shadow: 0 6px 20px rgba(36,26,56,0.35); }
  .hero .cta.ghost { box-shadow: none; backdrop-filter: blur(2px); }

  /* ---- 5 · remates ---------------------------------------------------- */
  /* el desplegable y el acordeón deben avisar de que se pulsan */
  .tem-item summary:hover, .inc-item summary:hover { background: rgba(76,61,102,0.05); border-radius: 14px; }
  summary:focus-visible { outline: 2px solid var(--accion); outline-offset: 2px; }
  /* sobre los fondos oscuros el anillo de foco necesita su propio color */
  .hero a:focus-visible, .hero button:focus-visible,
  .prog-portada a:focus-visible, .prog-portada button:focus-visible,
  .remate-final a:focus-visible, .remate-final button:focus-visible,
  footer a:focus-visible, footer button:focus-visible { outline-color: var(--amarillo); }
  /* el nombre de la marca no debe partirse en dos renglones en el móvil */
  .nav-nom span { white-space: nowrap; }
  @media (max-width: 26rem) { .nav-nom span { font-size: 0.6rem; letter-spacing: 0.06em; } }
  /* el botón flotante se apoya mejor con la sombra del sistema */
  .flota { box-shadow: var(--s2); }
  .arriba { background: var(--papel); box-shadow: var(--s1); }

  /* ---- 6 · la banda gris del "por qué sigues ahí" -----------------------
     Iba en un gris suelto (#6B6975) que no salía de la paleta. Ahora es un
     escalón del plomo: el mismo color, un punto más claro. */
  .franja { background: #575461; }

  /* ---- 7 · Empresas, otra vez sin fucsia --------------------------------
     La regla es de la casa: las páginas .corp cambian --accion por morado.
     Como el morado bajó de tono, aquí se apunta a la variable en vez de
     repetir el hexadecimal, y el tono hondo de los rótulos va con ella. */
  .corp { --accion: var(--morado); --accion-t: var(--morado); }

  /* ---- 8 · que no se quede una coma sola en el renglón ------------------
     La letra corrida ocupa más que la de palo seco, y con 30ch la frase
     partía justo detrás del resalte: la coma abría el segundo renglón.
     Cuatro sitios en toda la web, y con 34ch entran todos. */
  .dest { max-width: 34ch; }
  .dest.centro { max-width: 36ch; }

  /* ---- 9 · los dos botones de la portada, en el móvil ------------------
     Uno al lado del otro quedan de anchos distintos y el bloque se ve
     descuadrado. Debajo de 30rem van uno sobre otro y a todo el ancho. */
  @media (max-width: 30rem) {
    .hero .acts { flex-direction: column; align-items: stretch; }
    .hero .acts .cta { text-align: center; }
  }

  /* ============ V5 · móvil ============
     Medido en un móvil de 390 px, con el dedo y no con el ratón, y con la
     red a 4G lento. Tres cosas: que el carrusel se pueda pasar, que se
     pueda acertar a los botones, y que los rótulos se lean. */

  /* ---- 1 · el carrusel de la portada se pasa con el dedo ----------------
     Estaba en overflow:hidden y solo se soltaba al pulsar una flecha: en un
     móvil eso significa que no se puede pasar de ninguna manera. Con el
     dedo, la cinta se arrastra y se queda donde la sueltas. La animación
     sobra: nadie quiere perseguir una tarjeta en movimiento. Y las catorce
     duplicadas solo servían para que la cinta diera la vuelta sin corte. */
  @media (pointer: coarse) {
    /* 'proximity' y no 'mandatory': con catorce tarjetas de 272 px en una
       ventana de 351, el último punto de anclaje (3765 px) cae más allá del
       tope de desplazamiento (3686), así que 'mandatory' rebotaría a la
       penúltima y la última no se dejaría ver entera. */
    .progs-home { overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none;
                  scroll-snap-type: x proximity;
                  scroll-padding-left: clamp(1.2rem, 5vw, 2rem); }
    .progs-home::-webkit-scrollbar { display: none; }
    .progs-home .pista { animation: none; width: max-content; }
    .progs-home .pista .tarjeta-prog { scroll-snap-align: start; }
    .progs-home .pista .tarjeta-prog[aria-hidden="true"] { display: none; }
  }

  /* ---- 2 · zonas de toque ----------------------------------------------
     Apple pide 44 px de lado, Google 48. El botón del menú medía 38x30 y
     los enlaces del pie 17 px de alto: con el pulgar se falla más de lo que
     se acierta. Se agrandan solo en pantallas de dedo; con ratón no hace
     falta y el pie se pondría innecesariamente largo. */
  @media (pointer: coarse) {
    .menu-movil { min-width: 2.75rem; min-height: 2.75rem; padding: 0.6rem; }
    .nav-nom { padding: 0.4rem 0; }
    .movil-panel button { min-height: 2.75rem; }
    .foot-grid ul { gap: 0; }
    .foot-grid ul button { min-height: 2.75rem; width: 100%; padding: 0.4rem 0;
                           display: flex; align-items: center; }
    .drop button, .drop .mrail { min-height: 2.75rem; }
    .chipf { min-height: 2.75rem; }
    .flecha { width: 2.75rem; height: 2.75rem; }
    .tem-item summary, .inc-item summary { min-height: 3rem; }
    /* el destello azul del navegador al tocar no es de la marca */
    a, button, summary { -webkit-tap-highlight-color: rgba(76,61,102,0.12); }
    /* los botones chicos de la ficha y los fantasma se quedaban en 33-38 px */
    .cta { min-height: 2.75rem; display: inline-flex; align-items: center;
           justify-content: center; }
    /* «← Todos los programas» medía 16 px de alto: es la única salida de la
       landing y está sobre una foto, así que conviene no fallarla.
       De paso deja de ocupar todo el ancho: era una franja invisible de lado
       a lado que devolvía al índice si tocabas cerca del borde. Ahora se
       ciñe al texto y sigue alineada con el logo del menú. */
    .volver { padding: 0.9rem 0; }
    .prog-portada > .volver,
    .exp-hero .volver { padding: 0.9rem 0.9rem 0.9rem 0; }
    .prog-portada > .volver {
      left: max(clamp(1.2rem, 5vw, 2rem), calc((100vw - 74rem) / 2 + clamp(1.2rem, 5vw, 2rem)));
      transform: none; width: auto; margin: 0;
    }
    .nav-nom { padding: 0.55rem 0; }
  }

  /* ---- 3 · los rótulos diminutos ---------------------------------------
     Van en versalita y con mucho espaciado. A 9,3 px en una pantalla de mano
     no se leen, y algunos llevan información que importa: «GRATIS · CUPOS
     LIMITADOS», «PRECIO DE LANZAMIENTO», «5 SESIONES». Suben a ~11,7 px y
     se les recorta el espaciado para que no crezcan de ancho ni se partan. */
  @media (max-width: 46rem) {
    .tp-chip, .tp-sub, .tp-ver, .ph-chip, .proxi, .mfam-k, .sec,
    .ficha .fi-k, .fx .fx-k, .mb .insignia .ik, .mb .mb-k,
    .fuente-caja .fk2, .fmt .fk, .bloque-cab .bn, .hito .n,
    .exp .m, .puerta .m, .bono .bn-k, .lc .lk, .pil .pn,
    .servicio .sk2, .memb .mk, .gar .gn, .etapa .en, .franja .lb,
    .dh .dk, .ses .sn, .tr .trt, .rel .rn, .capa .t, .p3 .p3-k,
    .segui-caja .sk, .precio-caja .pk, .ab .ab-head, .cuatro .label,
    .mini .chip, .mini .ver, .hito-v .hv-n, .tem-item .tn, .voz,
    .foot-grid h4, .filtro-fila .k, .ph-sub, .r7 .t, .exp-datos span.proxi {
      font-size: 0.73rem; letter-spacing: 0.1em;
    }
    /* estos dos son texto corrido, no rótulo: solo el tamaño */
    .centro .c-d, .legal { font-size: 0.78rem; letter-spacing: normal; }
  }

  /* ---- 4 · la página en la que estás, marcada también en el móvil ------- */
  .movil-panel button[aria-current="page"] { color: var(--morado); font-weight: 700; }
  .movil-panel button[aria-current="page"]::before { content: "· "; }

  /* ---- 5 · pantallas de 320 px -----------------------------------------
     En un iPhone SE, en un Android chico o en cualquier móvil con la
     pantalla partida, quince de las veintiséis páginas se iban de ancho: la
     web se arrastraba de lado, que es de los defectos que más cantan.
     Dos causas, las dos de rejilla:
       · una celda de rejilla no encoge por debajo de su palabra más larga
         («expandiéndote» ya mide más que media pantalla de 320), y las
         rejillas de dos columnas no daban de sí;
       · en las landings, esa misma regla empujaba la columna de texto y la
         ficha cuatro píxeles por fuera de su contenedor.
     Medido: por debajo de 352 px rompe; de 360 para arriba, no. */
  .ip-grid > *, .serv-grid > *, .dos-col > *, .cols-lista > *,
  .caja-aparte > *, .fuente-dos > *, .quien .cols > *, .sobre .cols > *,
  .crisis .cols > *, .ph-grid > *, .ev-grid > *,
  .frases > *, .lentes > *, .pierdes-4 > *, .datos-hero > *,
  .benes-grid > *, .bonos-grid > *, .senales > *, .sintomas-a > *,
  .marcas > *, .trio > *, .pasos > *, .ciclo-3 > *, .pilares3 > *,
  .etapas > *, .fases > *, .modalidad > *, .lineas-ia > *, .tv-dos > *,
  .resultados > *, .formatos > *, .ab > *, .pasos3 > * { min-width: 0; }
  /* Y que la palabra larga se parta en vez de abrir la página. Ojo: hace
     falta «anywhere» y no «break-word» —solo el primero cuenta para el
     tamaño mínimo de una celda de rejilla, que es justo lo que aquí falla. */
  .frases > *, .lentes > *, .pierdes-4 > *, .datos-hero > * { overflow-wrap: anywhere; }
  body { overflow-wrap: break-word; }
  /* con dos columnas de menos de 150 px no se lee nada: una sola */
  @media (max-width: 22rem) {
    .frases, .lentes, .pierdes-4, .datos-hero { grid-template-columns: 1fr; }
  }

  /* ---- 6 · el enlace para saltar al contenido ---------------------------
     Invisible hasta que se llega a él con el tabulador. Quien navega con
     teclado o con lector de pantalla no debería pasar por las entradas del
     menú en cada una de las 26 páginas. */
  .saltar { position: absolute; left: 0.75rem; top: -4rem; z-index: 100;
            background: var(--morado); color: #FFF; padding: 0.75rem 1.2rem;
            border-radius: 0 0 12px 12px; font-weight: 700; font-size: 0.9rem;
            text-decoration: none; transition: top 0.18s ease; }
  .saltar:focus { top: 0; }
  /* al cambiar de página el foco se lleva al contenido, pero sin dibujar el
     recuadro: el aviso es para el lector de pantalla, no un adorno */
  main:focus { outline: none; }

  /* ---- 7 · iconos dibujados, no emoji ----------------------------------
     Había cuatro emoji haciendo de iconos (🔔 💌 🤍 💡) y el favicon era un
     corazón de emoji. Un emoji lo dibuja el sistema operativo: cambia de
     forma y de color en cada teléfono, no se puede teñir con el color de la
     marca y se nota de lejos que nadie lo eligió. Estos son de trazo, del
     mismo grosor, y toman el color del texto que tienen al lado. */
  .ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em;
         margin-right: 0.45rem; stroke: currentColor; fill: none;
         stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  /* el palote de las listas de señales: mismo trazo, y ya no es una letra
     que cada tipografía dibuja a su manera y descentrada */
  .sen .sen-i svg { width: 0.78rem; height: 0.78rem; stroke: currentColor; fill: none;
                    stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
  /* las flechas del menú, del carrusel y del «volver arriba» también eran
     caracteres sueltos (▾ ← → ↑ ›): cada tipografía los dibuja de un tamaño
     y una altura distintos, y nunca quedan centrados en su botón */
  .caret { width: 0.72em; height: 0.72em; flex: none; margin-left: 0.1em;
           vertical-align: -0.06em; opacity: 0.75; }
  .flecha svg { width: 1.05rem; height: 1.05rem; }
  .arriba svg { width: 1.05rem; height: 1.05rem; }
  .drop .mrail .ch svg { width: 0.95rem; height: 0.95rem; display: block; }
  .drop .mrail .ch { display: flex; align-items: center; }

  /* ============ V6 · que la primera pantalla cuadre ============
     Las alturas a sangre estaban con un tope fijo —40rem la portada, 33rem
     las de programa— y con el menú dado por supuesto en 4,4rem cuando mide
     3,4. Resultado: en un 1920x1080 sobraban 95 px de blanco por debajo de
     la franja de datos; en un 1080p al 125 %, la franja se salía de la
     pantalla; y en un 2560x1440 la portada quedaba como una tira fina.

     Ahora el menú y la franja se miden de verdad (el guion los escribe en
     --menu y --franja) y la altura sale de restar. Son min-height, así que
     si el texto no cabe la sección crece: nunca recorta. */

  /* portada: la franja de datos queda justo en el pie de la pantalla */
  .hero { min-height: calc(100svh - var(--menu, 3.4rem) - var(--franja, 7rem)); }

  /* portadas de programa: casi toda la pantalla, dejando asomar un dedo de
     la sección siguiente para que se vea que hay que bajar */
  .prog-portada { min-height: calc(100svh - var(--menu, 3.4rem) - 3.5rem); }

  /* ---- ventanas bajas: portátiles de 1366 y 1080p al 125 % --------------
     El contenido de la portada medía 608 px pasara lo que pasara, así que en
     un portátil de 1366x768 —que deja unos 620 px de ventana— los botones
     caían por debajo del pliegue: la acción principal no se veía sin bajar.
     Por debajo de 770 px de alto, la portada se aprieta. No se quita nada:
     se recorta el aire y se bajan un punto los cuerpos de letra. */
  @media (max-height: 770px) {
    .hero { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    .hero-mid { gap: 0.55rem; }
    .h-portada .h-peq { font-size: clamp(1.7rem, 4.4vw, 2.45rem); }
    .h-portada .h-gra { font-size: clamp(2.3rem, 6.6vw, 3.55rem); }
    .rel-bloque { font-size: clamp(1.15rem, 2.9vw, 1.45rem); margin-top: -1.1rem; }
    .hero .metas { line-height: 1.5; }
    .hero .principio { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.38;
                       margin-top: 0.5rem !important; }
    .hero .acts { margin-top: 0.95rem; }
    .hero .cta.grande { font-size: 0.95rem; padding: 0.9rem 1.9rem; }
  }

  /* ============ V7 · romper el ritmo de las landings ============
     Las dieciséis eran idénticas: portada centrada sobre foto oscurecida,
     texto a la izquierda con la ficha pegada a la derecha, banda de color,
     cierre morado centrado. Sirve para la primera; para la decimosexta
     cansa, y es lo que hace que se note la plantilla.

     Aquí hay tres juegos de variantes —portada, cuerpo y cierre— que se
     combinan. La familia (CREA, Equilibrados, LEAD) sigue mandando en el
     color, que es lo que debe seguir siendo constante: hay que saber en qué
     familia estás. Lo que cambia es la composición, y cambia de una página
     a la siguiente dentro de cada familia.

     Todas las variantes se apoyan en la misma foto y el mismo marcado: solo
     se añade una clase a la sección. */

  /* ---- portada A · el texto a un lado, la foto respira al otro ---------
     La foto deja de estar sepultada bajo un velo parejo: el morado pesa
     donde va el texto y se levanta donde está ella. */
  .prog-portada.pv-lado { text-align: left; background-position: 74% center; }
  .prog-portada.pv-lado::after {
    background: linear-gradient(97deg, rgba(36,26,56,0.95) 0%, rgba(36,26,56,0.90) 30%,
                                       rgba(36,26,56,0.58) 52%, rgba(36,26,56,0.14) 74%,
                                       rgba(36,26,56,0.05) 100%); }
  .prog-portada.pv-lado > .inner { max-width: 74rem; width: 100%; }
  .prog-portada.pv-lado .ph-nom,
  .prog-portada.pv-lado .ph-gancho,
  .prog-portada.pv-lado .ph-triada { margin-left: 0; margin-right: 0; max-width: 21ch; }
  .prog-portada.pv-lado .ph-gancho { max-width: 34ch; }
  .prog-portada.pv-lado .info-prog { justify-content: flex-start; margin-left: 0; margin-right: 0; }

  /* ---- portada B · campo de color y foto, partidos -------------------- */
  .prog-portada.pv-partida { text-align: left; background-position: 78% center; }
  .prog-portada.pv-partida::after {
    background: linear-gradient(90deg, var(--tinta) 0%, var(--tinta) 40%,
                                       rgba(36,26,56,0.55) 54%, rgba(36,26,56,0) 68%); }
  .prog-portada.pv-partida > .inner { max-width: 74rem; width: 100%; }
  .prog-portada.pv-partida .inner > *:not(.volver) { max-width: 26rem; margin-left: 0; margin-right: 0; }
  .prog-portada.pv-partida .ph-nom { max-width: 15ch; }
  .prog-portada.pv-partida .info-prog { justify-content: flex-start; }

  /* ---- portada C · el texto arriba en color, la foto asoma abajo ------ */
  .prog-portada.pv-baja { justify-content: flex-start; background-position: center 78%;
                          min-height: min(100svh - 4.4rem, 38rem); text-align: left; }
  .prog-portada.pv-baja::after {
    background: linear-gradient(180deg, var(--tinta) 0%, var(--tinta) 45%,
                                        rgba(36,26,56,0.76) 61%, rgba(36,26,56,0.30) 80%,
                                        rgba(36,26,56,0.44) 100%); }
  .prog-portada.pv-baja > .inner { max-width: 74rem; width: 100%; padding-top: 2.6rem; }
  .prog-portada.pv-baja .ph-nom,
  .prog-portada.pv-baja .ph-gancho,
  .prog-portada.pv-baja .ph-triada { margin-left: 0; margin-right: 0; max-width: 24ch; }
  .prog-portada.pv-baja .info-prog { justify-content: flex-start; }

  /* en el móvil las tres se comportan igual: el velo vuelve a ser vertical,
     porque a lo ancho no hay sitio para poner el texto a un lado */
  @media (max-width: 52rem) {
    .prog-portada.pv-lado, .prog-portada.pv-partida, .prog-portada.pv-baja {
      text-align: center; background-position: center 30%; justify-content: center; }
    .prog-portada.pv-lado::after, .prog-portada.pv-partida::after, .prog-portada.pv-baja::after {
      background: linear-gradient(180deg, rgba(36,26,56,0.60) 0%, rgba(36,26,56,0.74) 48%,
                                          rgba(36,26,56,0.90) 100%); }
    .prog-portada.pv-lado .ph-nom, .prog-portada.pv-partida .ph-nom, .prog-portada.pv-baja .ph-nom,
    .prog-portada.pv-lado .ph-gancho, .prog-portada.pv-partida .ph-gancho, .prog-portada.pv-baja .ph-gancho,
    .prog-portada.pv-lado .ph-triada, .prog-portada.pv-partida .ph-triada, .prog-portada.pv-baja .ph-triada,
    .prog-portada.pv-partida .inner > *:not(.volver) { margin-left: auto; margin-right: auto; }
    .prog-portada.pv-lado .info-prog, .prog-portada.pv-partida .info-prog,
    .prog-portada.pv-baja .info-prog { justify-content: center; }
    .prog-portada.pv-baja > .inner { padding-top: 0; }
  }

  /* ---- cuerpo A · la ficha al otro lado -------------------------------
     Solo en escritorio: en el móvil la columna es una sola y el texto tiene
     que ir siempre primero, antes que el precio. */
  @media (min-width: 56rem) {
    .intro-prog.cv-espejo .ip-grid { grid-template-columns: 0.78fr 1.22fr; }
    .intro-prog.cv-espejo .ip-txt { order: 2; }
    .intro-prog.cv-espejo .ficha  { order: 1; }
  }

  /* ---- cuerpo B · sin columna lateral ---------------------------------
     Para las que no son «compra esto»: La Fuente es gratis, Diseña tu
     entrenamiento se cotiza y el In-house también. Ahí la tarjeta pegada al
     scroll sobra, así que el texto corre a un ancho cómodo y la oferta pasa
     a ser una banda ancha debajo. */
  .intro-prog.cv-ancha .ip-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .intro-prog.cv-ancha .ip-txt { max-width: 46rem; }
  .intro-prog.cv-ancha .ficha { position: static; top: auto; }
  @media (min-width: 56rem) {
    /* dos columnas solo si hay extras que poner al lado; si no —La Fuente no
       tiene ninguno— la ficha se queda estrecha en vez de estirarse a lo
       ancho con media banda vacía */
    .intro-prog.cv-ancha .ficha:has(.fi-extras) {
                                  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
                                  column-gap: 2.4rem; align-content: start; }
    .intro-prog.cv-ancha .ficha:has(.fi-extras) > :not(.fi-extras) { grid-column: 1; }
    .intro-prog.cv-ancha .ficha:has(.fi-extras) .fi-extras { grid-column: 2; grid-row: 1 / 6;
                                             margin-top: 0; padding-top: 0; border-top: 0;
                                             grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
                                             align-content: start; }
    .intro-prog.cv-ancha .ficha:not(:has(.fi-extras)) { max-width: 34rem; }
  }

  /* ---- cierre A · alineado a la izquierda, con la acción al costado ---- */
  .remate-final.rf-izq { text-align: left; }
  .remate-final.rf-izq .inner { max-width: 68rem; }
  .remate-final.rf-izq .rf-k,
  .remate-final.rf-izq .rf-1,
  .remate-final.rf-izq .rf-2 { text-align: left; margin-left: 0; margin-right: 0; }
  .remate-final.rf-izq .rf-2 { max-width: 26ch; }
  .remate-final.rf-izq .info-prog { justify-content: flex-start; margin-left: 0; margin-right: 0; }
  /* Se probó a dos columnas, con la frase a un lado y la acción al otro, y
     se rompía: no todas las bandas traen las mismas piezas —unas tienen
     frase larga, otras no— y donde faltaba una quedaba un hueco. Alinear a
     la izquierda y ponerle un filete ya distingue de sobra, y aguanta
     cualquier combinación. */
  .remate-final.rf-izq .inner { border-left: 3px solid var(--amarillo);
                                padding-left: clamp(1.2rem, 3vw, 2.4rem); }
  .remate-final.rf-izq .rf-k { margin-bottom: 0.7rem; }
  .remate-final.rf-izq .info-prog { margin: 1.3rem 0 0; }
  .remate-final.rf-izq .cta { margin-top: 1.3rem; }
  /* El centrado de estos chips venía en un style= dentro del HTML, repetido
     dieciséis veces, y desde ahí no había forma de cambiarlo por página.
     Ahora manda la hoja de estilos, que es donde se puede variar. */
  .remate-final .info-prog { justify-content: center; }

  /* ---- cierre B · la foto del programa detrás del morado ---------------
     La misma foto de la portada, apagada, para que el cierre no sea otra
     mancha de color plana. El degradado va por encima y deja el texto con
     el mismo contraste que si fuera liso. */
  .remate-final.rf-foto { position: relative; isolation: isolate; overflow: hidden;
                          background-color: var(--morado);
                          background-size: cover; background-position: center 38%; }
  .remate-final.rf-foto::before { content: ""; position: absolute; inset: 0; z-index: -1;
                          background: linear-gradient(180deg, rgba(76,61,102,0.93) 0%,
                                                              rgba(36,26,56,0.95) 100%); }
  .remate-final.rf-foto > .inner { position: relative; z-index: 1; }

  /* Fotos (archivos en /fotos) */
  .hero .foto { background-image: url("fotos/hero-foto.webp"); }
  .foto-sobre { background-image: url("fotos/foto-sobre.webp"); }
  .img-crisis { background-image: url("fotos/img-crisis.webp"); }
    .pimg-01 { background-image: url("fotos/pimg-01.webp"); }
  .pimg-02 { background-image: url("fotos/pimg-02.webp"); }
  .pimg-03 { background-image: url("fotos/pimg-03.webp"); }
  .pimg-04 { background-image: url("fotos/pimg-04.webp"); }
  .pimg-05 { background-image: url("fotos/pimg-05.webp"); }
  .pimg-06 { background-image: url("fotos/pimg-06.webp"); }
  .pimg-07 { background-image: url("fotos/pimg-07.webp"); }
  .pimg-08 { background-image: url("fotos/pimg-08.webp"); }
  .pimg-09 { background-image: url("fotos/pimg-09.webp"); }
  .pimg-10 { background-image: url("fotos/pimg-10.webp"); }
  .pimg-11 { background-image: url("fotos/pimg-11.webp"); }
  .pimg-12 { background-image: url("fotos/pimg-12.webp"); }
  .pimg-13 { background-image: url("fotos/pimg-13.webp"); }
  .himg-01 { background-image: url("fotos/himg-01.webp"); }
  .himg-02 { background-image: url("fotos/himg-02.webp"); }
  .himg-03 { background-image: url("fotos/himg-03.webp"); }
  .himg-05 { background-image: url("fotos/himg-05.webp"); }
  .himg-06 { background-image: url("fotos/himg-06.webp"); }
  .himg-07 { background-image: url("fotos/himg-07.webp"); }
  .himg-08 { background-image: url("fotos/himg-08.webp"); }
  .himg-09 { background-image: url("fotos/himg-09.webp"); }
  .himg-11 { background-image: url("fotos/himg-11.webp"); }
  .himg-12 { background-image: url("fotos/himg-12.webp"); }
  .himg-13 { background-image: url("fotos/himg-13.webp"); }
  .himg-14 { background-image: url("fotos/himg-14.webp"); }
  .himg-dis { background-image: url("fotos/himg-dis.webp"); }
  .pimg-dis { background-image: url("fotos/pimg-dis.webp"); }


  /* ---------- Método: mapa en cuadros (movimientos · dimensiones · base) ---------- */
  .mapa-metodo { text-align: center; }
  .mapa-metodo h2 { margin: 0 auto; }
  .mm { margin: 2.6rem auto 0; max-width: 62rem; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mm-rotulo { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin: 0 auto 0.7rem; max-width: none; }
  .mm-mov, .mm-fila { display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
  @media (min-width: 44rem) { .mm-mov, .mm-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mm-t { display: block; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
  .mm-d { display: block; font-size: 0.93rem; line-height: 1.45; margin-top: 0.4rem; }
  .mm-caja { background: var(--c); color: var(--plomo); border-radius: 18px; padding: 1.5rem 1.2rem; min-height: 13rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .mm-caja .mm-t { font-size: 1.5rem; }
  .mm-n { width: 2rem; height: 2rem; border-radius: 50%; background: var(--morado); color: #FFF; font-weight: 700; font-size: 0.9rem; display: grid; place-items: center; margin-bottom: 0.6rem; }
  .mm-dim { background: var(--morado); color: #FFF; border-radius: 18px; padding: 1.3rem 1rem 1rem; }
  .mm-dim .mm-rotulo { color: var(--amarillo); }
  .mm-dim .mm-fila > div { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 1rem; }
  .mm-base { background: var(--beige); color: var(--plomo); border-radius: 18px; padding: 1.3rem 1rem 1rem; }
  .mm-base .mm-rotulo { color: var(--plomo); }
  .mm-base .mm-fila > div { background: rgba(255,255,255,0.55); border-radius: 12px; padding: 1rem; }
  .mm-link { background: none; border: 0; padding: 0; margin-top: 0.4rem; font: inherit; font-weight: 700; color: var(--morado); text-decoration: underline; cursor: pointer; display: block; margin-left: auto; margin-right: auto; }

  /* ---------- Método: ajustes 23 sep ---------- */
  .sobre .preg.titulo-rosa { color: var(--accion); font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-top: 0.2rem; }
  @media (min-width: 50rem) {
    .sobre-metodo .cols { align-items: stretch; }
    .sobre-metodo .retrato { aspect-ratio: auto; height: 100%; min-height: 30rem; }
  }
  .por-que .pq-titulo { font-size: clamp(1.6rem, 3vw, 2.35rem); max-width: none; }
  @media (min-width: 62rem) { .por-que .pq-titulo { white-space: nowrap; } }
  .pq-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 3.5rem; margin-top: 1.6rem; }
  @media (min-width: 50rem) { .pq-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pq-cols p { max-width: none; }
  .pq-cols > div > p:first-child { margin-top: 0; }

  /* ---------- La Fuente: lo que recibes a la derecha ---------- */
  .fu-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; align-items: start; }
  @media (min-width: 56rem) { .fu-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; } }
  .fu-izq .ficha { position: static; margin-top: 2.2rem; }
  .fu-hora { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
  .fu-hora .nw { white-space: nowrap; }
  .fu-lista { grid-template-columns: minmax(0, 1fr); margin-top: 1rem; }
  .fu-lista .inc { background: var(--amarillo); }

  /* ---------- Portada: que no se corte la frente ---------- */
  .hero .foto { background-position: 72% 0%; }
  @media (max-width: 52rem) { .hero .foto { background-position: 70% 0%; } }

  /* ---------- Franja gris de números más delgada: se ve más foto ---------- */
  .franja-ev { padding-top: clamp(0.9rem, 1.5vw, 1.15rem); padding-bottom: clamp(0.9rem, 1.5vw, 1.15rem); }

  /* ---------- Diseña tu entrenamiento: certificados en abanico ---------- */
  .cert-abanico { margin: 0; display: grid; justify-items: center; gap: 0.6rem; }
  .cert-abanico .hojas { position: relative; width: min(100%, 25rem); aspect-ratio: 1 / 0.92; }
  .cert-abanico .hoja { position: absolute; top: 4%; width: 62%; height: auto; border-radius: 6px;
    background: #FFF; box-shadow: var(--s2); border: 1px solid var(--rule); }
  .cert-abanico .h1 { left: 6%; transform: rotate(-9deg); transform-origin: bottom center; }
  .cert-abanico .h2 { right: 6%; transform: rotate(7deg); transform-origin: bottom center; }
  .cert-abanico figcaption { font-size: 0.86rem; color: var(--ink-soft); text-align: center; max-width: 26rem; line-height: 1.45; }
  @media (min-width: 56rem) {
    #page-disena .intro-prog .ip-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; }
    #page-disena .intro-prog .ficha { grid-column: 1 / -1; }
  }

  /* botón "Reservar ahora" del cuadro morado: justo al texto y centrado */
  .fx.exploratoria .fx-cta { justify-self: center; align-self: center; white-space: nowrap; padding: 0.6rem 1.5rem; margin-top: 0.9rem; height: auto; }

  /* ---------- Diseña: lo que incluye (sin precio aparte) ---------- */
  .fx.incluye-dis { border: 2px solid var(--accion); background: #FFF; }
  .fx.incluye-dis .fx-k { color: var(--accion); }
  .inc-dis { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
  .inc-dis li { position: relative; padding-left: 1.5rem; }
  .inc-dis li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accion); font-weight: 700; }
  .inc-dis b { display: block; font-size: 0.95rem; line-height: 1.3; }
  .inc-dis span { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); margin-top: 0.15rem; }

  /* ---------- Inicio: "estancado" en letra normal, morado ---------- */
  .crisis .estancado { color: var(--morado); font-weight: 700; }

  /* ---------- Pop-up: llamada de claridad ---------- */
  .pop-fondo { position: fixed; inset: 0; z-index: 200; background: rgba(36,26,56,0.55); backdrop-filter: blur(3px);
    display: grid; place-items: center; padding: 1rem; }
  .pop-fondo[hidden] { display: none; }
  .pop { position: relative; width: min(100%, 28rem); background: var(--bg); color: var(--plomo); border-radius: 24px;
    padding: clamp(1.6rem, 5vw, 2.3rem); text-align: center; box-shadow: var(--s3); border-top: 6px solid var(--accion);
    animation: pop-entra 0.35s ease-out; }
  @keyframes pop-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .pop { animation: none; } }
  .pop-x { position: absolute; top: 0.6rem; right: 0.7rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0;
    background: transparent; color: var(--plomo); font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .pop-x:hover { background: var(--beige); }
  .pop-k { display: block; padding: 0 2rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accion); }
  .pop-t { font-size: clamp(1.5rem, 5vw, 1.95rem); font-weight: 700; line-height: 1.15; margin: 0.6rem auto 0; color: var(--morado); }
  .pop-d { margin: 0.9rem auto 0; font-size: 0.95rem; color: var(--ink-soft); }
  .pop-precio { display: grid; gap: 0.2rem; margin: 1.3rem auto 0; padding: 0.9rem 1rem; background: var(--amarillo); border-radius: 16px; }
  .pp-real { font-size: 0.95rem; color: var(--ink-soft); }
  .pp-real s { text-decoration-thickness: 2px; text-decoration-color: var(--accion); }
  .pp-lanza { font-size: 1.1rem; font-weight: 700; }
  .pp-lanza b { font-size: 1.6rem; color: var(--accion); }
  .pop-cta { margin-top: 1.3rem; }
  .pop:focus { outline: none; }

  /* ============================================================
     SIN LETRA CURSIVA (23 sep)
     Treicy prefiere la letra normal: todo lo que iba en Parisienne pasa a
     Figtree. Los resaltes (.scr) conservan su fondo amarillo.
     ============================================================ */
  :root { --script: var(--sans); }
  .scr, h1 .scr, h2 .scr, .hero .scr {
    font-family: var(--sans); font-size: 1em; font-weight: inherit; line-height: inherit;
    letter-spacing: inherit; padding: 0 0.2em; border-radius: 4px;
    background: linear-gradient(transparent 10%, var(--hl, var(--amarillo)) 10%,
                                var(--hl, var(--amarillo)) 94%, transparent 94%); }
  .hero .scr { background: var(--amarillo); }
  .ph-triada { font-size: clamp(1.05rem, 1.9vw, 1.3rem); font-weight: 600; line-height: 1.35; }
  .frase-cierre { font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; }
  .eco .ciclo-linea { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; }
  .reveal .revelado { font-size: clamp(1.7rem, 4.5vw, 2.8rem); font-weight: 700; letter-spacing: -0.02em; }
  .pil .cita { font-size: 1.02rem; font-weight: 600; line-height: 1.35; }
  .nombre-sec .real { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
  .ses .sq { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
  .empieza-hoy { font-size: clamp(1.4rem, 3vw, 2rem) !important; font-weight: 700; }
  .tem-item .tq { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
  .bene .bn { font-size: 1.6rem; font-weight: 700; line-height: 1; }