/* ============================================================
   PRISMA · programas.css
   programas.html (tu momento en dos fases, cómo funcionan, los nueve,
   comparador, cierre) y las nueve páginas programas/<slug>/. Va DESPUÉS de css/main.css y css/relato.css (el kit
   compartido de Soluciones: capítulos, pantallas, cifras, carrusel,
   capas, tarjetas con '+', galería, comparador y barra local). Aquí solo
   lo propio y los ajustes del kit para estas páginas.

   Prefijos: pg- índice · pm- tu momento (hero en 3D y paneles, 2026-10-17) ·
   how- cómo funcionan · pf- la pregunta y el resultado (prog-06) ·
   pcf- comparador sin JS · pg-dlm/
   pg-wk/pg-cpict pictogramas del comparador (prog-09) · pp- página de
   programa · pp-br navegador del Portal (prog-03) · pp-dl mosaico de
   entregables (prog-10) · pp-stack resultados (prog-07) · phm "Estás aquí" ·
   pict pictogramas · xo-/x- entregables (SVG) · pt- recorrido (prog-01) ·
   pe- extensiones · pba- Brand & Media Analysis · g-/ga- glifos.

   Técnicas de Apple (2026-10-03, ver KIT-RELATO.md): T08 manifiesto (el
   resumen en carrusel, T03, salió de /programas el 2026-10-04: repetía el
   universo y "Cómo funcionan"), T01+T02 una idea por pantalla en doble capa, T04 cifras, T05
   resultado del selector en mosaico, T11 tarjetas con '+', T07 capas, T16
   comparador, T12 galería, T13 negro y carbón por capítulo.

   Movimiento (DESIGN.md): --ease-enter para entrar, --ease-ui para
   estados, lineal para lo que sigue al scroll. Ningún bucle: los glifos y
   los objetos hacen UNA pasada con .g-play (la pone js/programas.js al
   entrar en pantalla, al señalar o al encenderse su capa o diapositiva) y
   nunca con movimiento reducido; la órbita de extensiones y el universo se
   mueven con el scroll y quedan quietos cuando dejas de bajar.

   Hover: todo :hover va dentro de @media (hover: hover) and (pointer: fine).
   En el teléfono el toque deja el :hover pegado donde estuvo el dedo, y lo
   que se dibuja después ahí (el paso 2 del selector, una tarjeta) parecía
   señalado. El teclado tiene su :focus-visible; el toque, su :active.
   ============================================================ */

[id] { scroll-margin-top: 96px; }
.pp-page [id] { scroll-margin-top: 140px; }
.pg .muted, .pp .muted { color: var(--text-on-ink-2); }
/* Sin viudas: ningún párrafo termina con una palabra sola en la última
   línea ("…hasta / ahí.", "…empezar de / nuevo."). */
/* Con la propiedad larga (text-wrap-style): el atajo text-wrap también
   reponía text-wrap-mode y, con más especificidad, deshacía el nowrap de
   cualquier <p> de la página (las semanas del mosaico se partían "10– / 12"). */
.pg p, .pp p, .rl-sheet p { text-wrap-style: pretty; }

/* ---------- Migas ---------- */
.pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .86rem; color: var(--text-on-ink-2); }
.pp-crumbs a { transition: color .2s var(--ease-ui); padding-block: 4px; }
@media (hover: hover) and (pointer: fine) { .pp-crumbs a:hover { color: var(--orange); } }
.pp-crumbs [aria-current] { color: var(--text-on-ink); }
.pp-crumbs span[aria-hidden] { opacity: .5; }

/* ============================================================
   GLIFOS · el sistema de círculos de cada programa
   ============================================================ */
.glyph { display: block; width: 100%; height: auto; overflow: visible; }
.glyph * { vector-effect: non-scaling-stroke; }
.glyph circle, .glyph path, .glyph line { fill: none; stroke: none; }
.glyph .g-h { stroke: rgb(var(--fg-rgb) / .22); stroke-width: 1; }
.glyph .g-l { stroke: rgb(var(--fg-rgb) / .55); stroke-width: 1; }
.glyph .g-f { fill: rgb(var(--fg-rgb) / .05); }
.glyph .g-o { stroke: var(--orange); stroke-width: 1.3; }
.glyph .g-d { fill: var(--orange); }
.glyph .g-dash { stroke-dasharray: 3 4; }
.glyph--signal .g-h { fill: rgb(var(--fg-rgb) / .16); stroke: none; }
.glyph--signal line.g-h { stroke: rgb(var(--fg-rgb) / .22); }
.glyph .ga-comet { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; }
.glyph [class*="ga-"] { transform-box: view-box; transform-origin: 100px 100px; }
.glyph .ga-halo, .glyph .ga-w { transform-box: fill-box; transform-origin: center; }

/* Movimiento: UNA pasada por entrada, nunca un bucle (SPEC-APPLE: lo que se
   mueve responde al scroll o a una acción). .g-play la pone js/programas.js
   cuando el glifo llega a la pantalla (y la quita al salir: la próxima
   entrada vuelve a pasar) o al señalar una tarjeta o un círculo del
   universo. Cada pasada
   empieza y termina en el dibujo en reposo (los fotogramas 0 y 100 son el
   estado sin animar), así que nunca hay un salto. Va en .g-play y no en
   .is-live porque el kit pone .is-live a secciones enteras (capas,
   manifiesto) y desde ahí todo lo de adentro corría sin parar. */
@media (prefers-reduced-motion: no-preference) {
  .g-play .ga-r { animation: g-breathe 2.4s var(--ease-soft); }
  .g-play .ga-r2 { animation-delay: .12s; } .g-play .ga-r3 { animation-delay: .24s; } .g-play .ga-r4 { animation-delay: .36s; } .g-play .ga-r5 { animation-delay: .48s; }
  .g-play .ga-drift { animation: g-drift 3.2s var(--ease-soft); }
  .g-play .ga-t { animation: g-trail 2.2s var(--ease-soft); }
  .g-play .ga-t2 { animation-delay: .16s; } .g-play .ga-t3 { animation-delay: .32s; } .g-play .ga-t4 { animation-delay: .48s; }
  .g-play .ga-u { animation: g-rise 2.6s var(--ease-soft); }
  .g-play .ga-u2 { animation-delay: .12s; } .g-play .ga-u3 { animation-delay: .24s; } .g-play .ga-u4 { animation-delay: .36s; } .g-play .ga-u5 { animation-delay: .48s; }
  .g-play .ga-comet { animation: g-comet 2.6s var(--ease-soft) .2s; }
  .g-play .ga-halo { animation: g-halo 2s var(--ease-soft) 1.1s; }
  .g-play .ga-b { animation: g-blink 1.6s var(--ease-soft); animation-delay: calc(var(--j, 0) * .1s); }
  .g-play .ga-spin { animation: g-spin 4.8s var(--ease-soft); }
  .g-play .ga-spin--slow { animation-duration: 6.4s; }
  .g-play .ga-w { animation: g-wave 2.4s var(--ease-soft); }
  .g-play .ga-w2 { animation-delay: .45s; }
}
@keyframes g-breathe { 0%, 100% { transform: none; opacity: 1; } 45% { transform: scale(1.06); opacity: .5; } }
@keyframes g-drift { 0%, 100% { transform: none; } 50% { transform: translate(-9px, 7px); } }
@keyframes g-trail { 0%, 100% { opacity: 1; } 45% { opacity: .3; } }
@keyframes g-rise { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@keyframes g-comet { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes g-halo { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.2); opacity: .2; } }
@keyframes g-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* Una vuelta entera: termina donde empezó (orbit, lens y los anillos discontinuos). */
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-wave { 0% { transform: none; opacity: 1; } 55% { transform: scale(1.38); opacity: 0; } 56% { transform: scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }


/* ============================================================
   TU MOMENTO · FASE 1 (el hero, 2026-10-17)
   Una pantalla: qué es un programa (una frase), la pregunta y las seis
   situaciones del selector. A la derecha, la marca en 3D (js/marca-3d.js)
   cambia de estado con el momento señalado y su leyenda dice qué le pasa;
   en el teléfono va arriba, más baja. Sin JS: las opciones bajan a su
   panel y se ven con su frase de contexto. Reemplaza al hero con la
   constelación (pgc-) y al universo (pu-), en git hasta el 2026-10-17.
   ============================================================ */
.pm-hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--header-h, 72px) + clamp(12px, 2vh, 28px)) clamp(28px, 4vh, 56px); overflow: clip; }
.pm-hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pm-hero__art::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 48% at 76% 50%, rgb(var(--orange-rgb) / .1), transparent 70%); }
.pm-hero__canvas { position: absolute; top: 0; bottom: 0; left: 54%; width: 46%; height: 100%; display: block; }
.pm-hero__cap { position: absolute; left: 54%; right: var(--gutter); top: calc(50% + clamp(190px, 25vh, 270px)); max-width: none; font-size: .92rem; line-height: 1.5; text-align: center; color: var(--text-on-ink-2); text-wrap: balance; }
.pm-hero__cap b { font-weight: 500; color: var(--orange); }
.pm-hero__cap span { display: block; margin-top: 6px; color: var(--text-on-ink); }
.pm-hero__in { position: relative; z-index: 1; width: 100%; }
@media (min-width: 1000px) { .pm-hero__in { padding-right: 46%; } }
.pm-hero__in .crumbs { margin-bottom: clamp(12px, 2vh, 22px); }
.pm-hero__def { max-width: 46ch; font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); font-weight: 400; line-height: 1.3; letter-spacing: -0.012em; color: var(--text-on-ink-2); text-wrap: pretty; }
.pm-hero__def b { font-weight: 500; color: var(--text-on-ink); }
.pm-hero__why { margin-top: 12px; max-width: 56ch; font-size: clamp(.95rem, .9rem + .2vw, 1.02rem); line-height: 1.5; }
.pm-ask1 { margin-top: clamp(20px, 3.4vh, 36px); }
.pm-ask1 .rl-kicker { margin-bottom: 8px; }
.pm-hero__q { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.024em; color: var(--text-on-ink); text-wrap: balance; }
.pm-opts { display: grid; gap: 5px; margin-top: clamp(14px, 2.4vh, 22px); list-style: none; padding: 0; }
.pm-opt {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px;
  min-height: 46px; padding: 9px 16px 9px 14px; border-radius: 12px; border: 1px solid rgb(var(--fg-rgb) / .16);
  color: var(--text-on-ink); transition: border-color .25s var(--ease-ui), background-color .25s var(--ease-ui), transform .16s var(--ease-snap);
}
.pm-opt__n { font-size: .78rem; letter-spacing: .08em; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; transition: color .25s var(--ease-ui); }
.pm-opt__t { font-size: clamp(1rem, .95rem + .2vw, 1.1rem); font-weight: 500; letter-spacing: -0.006em; line-height: 1.3; }
.pm-opt__d { grid-column: 2 / -1; margin-top: 2px; font-size: .9rem; line-height: 1.4; color: var(--text-on-ink-2); }
/* Con JS y en escritorio la frase de contexto se lee en la leyenda del 3D al
   señalar la opción (la sigue oyendo el lector de pantalla); así las seis
   caben en una pantalla con la definición y la pregunta. */
@media (min-width: 1000px) { html:not(.no-js) .pm-opt__d { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.pm-opt__tag { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); transition: color .25s var(--ease-ui); }
.pm-opt__go { color: var(--orange); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease-ui), transform .3s var(--ease-snap); }
.pm-opt.is-demo { border-color: rgb(var(--fg-rgb) / .36); }
.pm-opt.is-demo .pm-opt__tag { color: var(--orange); }
.pm-opt.is-on { border-color: var(--orange); background: rgb(var(--orange-rgb) / .07); }
.pm-opt.is-on .pm-opt__n, .pm-opt.is-on .pm-opt__tag { color: var(--orange); }
.pm-opt.is-on .pm-opt__go { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .pm-opt:hover { border-color: rgb(var(--orange-rgb) / .7); background: rgb(var(--orange-rgb) / .04); }
  .pm-opt:hover .pm-opt__n, .pm-opt:hover .pm-opt__tag { color: var(--orange); }
  .pm-opt:hover .pm-opt__go { opacity: 1; transform: none; }
}
.pm-opt:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-color: rgb(var(--orange-rgb) / .8); }
.pm-opt:active { transform: scale(.99); }
.pm-hero__note { margin-top: 14px; max-width: 54ch; font-size: .88rem; line-height: 1.5; color: var(--text-on-ink-2); }
/* Portátiles bajos (1366×657, 1280×720): más compacto, para que las seis
   opciones entren en la primera pantalla con la definición y la pregunta. */
@media (min-width: 1000px) and (max-height: 780px) {
  .pm-hero__def { font-size: 1.12rem; line-height: 1.28; }
  .pm-hero__why { margin-top: 8px; font-size: .9rem; }
  .pm-ask1 { margin-top: 16px; }
  .pm-hero__q { font-size: 1.65rem; }
  .pm-opts { gap: 4px; margin-top: 12px; }
  .pm-opt { min-height: 41px; padding: 6px 14px 6px 12px; }
  .pm-opt__t { font-size: .95rem; }
  .pm-hero__note { display: none; }
  .pm-hero__cap { top: calc(50% + 170px); font-size: .86rem; }
}
@media (max-width: 999px) {
  .pm-hero { display: block; min-height: 0; padding-top: var(--header-h, 72px); }
  .pm-hero__art { position: relative; height: 40svh; min-height: 250px; max-height: 420px; margin-bottom: 8px; }
  .pm-hero__art::before { background: radial-gradient(50% 60% at 50% 50%, rgb(var(--orange-rgb) / .1), transparent 70%); }
  .pm-hero__canvas { left: 0; width: 100%; }
  .pm-hero__cap { left: var(--gutter); right: var(--gutter); bottom: 0; max-width: none; text-align: left; font-size: .86rem; }
  .pm-hero__cap span { display: none; }
}
@media (max-width: 600px) {
  .pm-opt { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 12px 14px; }
  .pm-opt__tag, .pm-opt__go { display: none; }
}

/* ============================================================
   CÓMO FUNCIONAN (prog-04 + T01 + T02 + T04) · escena fija
   Con .is-scene (la pone js/programas.js en escritorio, con movimiento
   normal y pantallas de 640 px de alto o más) la sección mide dos
   pantallas y su contenido se queda pegado: el scroll mueve las fases
   (las piezas caen, se ordenan, aparecen los rótulos: --m de cada uno).
   Sin escena: el titular, el recorrido y los rótulos uno debajo del otro.
   ============================================================ */
.pg-how { padding-block: clamp(90px, 13vh, 150px) clamp(70px, 10vh, 120px); }
.pg-how .rl-title { max-width: 30ch; }
.pg-how .rl-lede { max-width: 40em; }
.pg-how .how__stage { margin-top: clamp(28px, 4.4vh, 48px); }
html.rl-js .pg-how.is-scene { height: 200svh; padding-block: 0; }
.pg-how.is-scene .pg-how__pin {
  position: sticky; top: 0; height: 100svh; display: grid; align-content: center;
  padding-top: calc(var(--rl-chrome, 0px) + 6px);
}
/* El pin es una rejilla: sin ancho, el .container se encogía a su texto y
   quedaba centrado (a 1440 empezaba en x = 145 y no en el margen de 72 de
   las demás secciones; la línea Hoy → Después perdía 150 px). */
.pg-how.is-scene .pg-how__pin > .container { width: 100%; }
.pg-how.is-scene .how__stage { height: clamp(220px, 27vh, 300px); margin-top: clamp(18px, 3vh, 36px); }
@media (max-height: 780px) {
  .pg-how.is-scene .how__stage { height: 190px; margin-top: 10px; }
  .pg-how.is-scene .rl-lede { margin-top: 12px; }
  .pg-how.is-scene .how__marks { padding-top: 14px; }
}
.how__marks { display: grid; gap: 22px; margin-top: clamp(26px, 4vh, 44px); padding-top: clamp(18px, 2.6vh, 26px); border-top: 1px solid var(--rl-line); }
.pg-how.is-scene .how__marks { margin-top: clamp(14px, 2.4vh, 28px); }
@media (min-width: 760px) { .how__marks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 56px); } }
.how__mark { opacity: var(--m, 1); transform: translateY(calc((1 - var(--m, 1)) * 18px)); }
.how__mk { display: block; font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-fg-2); }
.how__mv { display: block; margin-top: 10px; font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.35rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; color: var(--rl-fg); font-variant-numeric: tabular-nums; }
.how__mv small { font-size: .52em; font-weight: 400; letter-spacing: -0.01em; color: var(--rl-fg-2); }
.how__mark--hot .how__mv { color: var(--rl-hot-big, var(--orange)); }
.how__mark p { margin-top: 8px; font-size: .95rem; line-height: 1.45; color: var(--rl-fg-2); max-width: 30ch; }
.how__xcap { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap; font-size: .8rem; letter-spacing: 0; color: var(--text-on-ink-2); }
.pg .rl-fig__n small, .pp .rl-fig__n small { margin-left: .2em; }

/* ============================================================
   TU MOMENTO · FASE 2 (un panel por momento, 2026-10-17)
   Con JS solo se ve el panel elegido (.is-on); sin JS, los seis seguidos.
   En escritorio la situación se queda pegada a la izquierda mientras a la
   derecha bajan sus programas, cómo elegir entre ellos y la pregunta para
   afinar (las pantallas de la pregunta y el resultado son .pf-*, abajo).
   ============================================================ */
html:not(.no-js) .pm-panel:not(.is-on) { display: none; }
.pm-panel { padding-block: clamp(56px, 8vh, 96px) clamp(40px, 6vh, 72px); }
.pm-panel + .pm-panel { border-top: 1px solid var(--line-on-ink); }
.pm-panel__in { display: grid; gap: clamp(28px, 4vh, 44px); }
@media (min-width: 1100px) {
  .pm-panel__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 90px); align-items: start; }
  .pm-panel__head { position: sticky; top: calc(var(--rl-chrome, 0px) + 96px); }
}
.pm-panel__head .rl-title { max-width: 14ch; }
.pm-panel__head .rl-lede { max-width: 30em; }
.pm-panel__change { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; min-height: 40px; font-size: .95rem; color: var(--text-on-ink-2); transition: color .2s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .pm-panel__change:hover { color: var(--orange); } }
.pm-panel__body { display: grid; gap: clamp(30px, 4.6vh, 48px); min-width: 0; }
.pm-count { margin-bottom: 14px; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.pm-progs { display: grid; gap: 12px; }
@media (min-width: 760px) { .pm-progs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } }
.pm-prog {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r); background: var(--rl-surface); box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .06);
  transition: box-shadow .3s var(--ease-ui), opacity .3s var(--ease-ui);
}
.pm-prog__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pm-prog__g { width: 56px; flex: none; margin: -4px 0 0 -4px; }
.pm-prog__badge { display: none; padding: 6px 10px; border-radius: 999px; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.pm-prog.is-reco { box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / .7); }
.pm-prog.is-reco .pm-prog__badge { display: inline-block; background: var(--orange); color: var(--ink); }
.pm-prog.is-alt .pm-prog__badge { display: inline-block; border: 1px solid rgb(var(--fg-rgb) / .3); color: var(--text-on-ink-2); }
.pm-prog.is-dim { opacity: .55; }
.pm-prog__k { font-size: .78rem; letter-spacing: .08em; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; }
.pm-prog__name { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.8rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.018em; }
.pm-prog__solves { font-size: 1.02rem; line-height: 1.4; color: var(--text-on-ink); }
.pm-prog__facts { display: grid; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgb(var(--fg-rgb) / .1); }
.pm-prog__facts dt { margin-bottom: 3px; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pm-prog__facts dd { font-size: .93rem; line-height: 1.5; color: var(--text-on-ink-2); }
.pm-prog__facts dd b { font-weight: 500; color: var(--text-on-ink); }
.pm-prog__act { margin-top: auto; padding-top: 8px; }
.pm-pick { padding-top: 24px; border-top: 1px solid var(--line-on-ink); }
.pm-pick__t { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pm-pick__list { display: grid; gap: 10px; margin-top: 14px; }
.pm-pick__list li { font-size: clamp(1rem, .95rem + .2vw, 1.1rem); line-height: 1.5; color: var(--text-on-ink-2); text-wrap: pretty; }
.pm-pick__list b { font-weight: 500; color: var(--text-on-ink); }
.pm-ask { padding-top: 28px; border-top: 1px solid var(--line-on-ink); }
/* Sin JS: la pregunta con sus respuestas y a dónde lleva cada una */
.pm-tree { display: grid; gap: 12px; margin-top: 18px; }
.pm-tree ul { display: grid; gap: 10px; margin: 8px 0 0 14px; padding-left: 14px; border-left: 1px solid var(--line-on-ink); }
.pm-tree__a > p:first-child { font-size: .98rem; line-height: 1.45; color: var(--text-on-ink); }
.pm-tree__q { margin-top: 4px; font-size: .9rem; color: var(--orange); }
.pm-tree__r { margin-top: 3px; font-size: .9rem; color: var(--text-on-ink-2); }
.pm-tree__r a { color: var(--text-on-ink); text-decoration: underline; text-decoration-color: rgb(var(--fg-rgb) / .3); text-underline-offset: 3px; }
.pm-tree__an { margin-top: 18px; font-size: .95rem; color: var(--text-on-ink-2); }
.pm-tree__an a { color: var(--orange); }
/* Al elegir un momento, el panel sube escalonado */
.pm-panel.is-enter .pm-panel__head, .pm-panel.is-enter .pm-panel__body > * { animation: pf-in .6s var(--ease-enter) both; }
.pm-panel.is-enter .pm-panel__body > :nth-child(2) { animation-delay: .08s; }
.pm-panel.is-enter .pm-panel__body > :nth-child(3) { animation-delay: .16s; }

/* ============================================================
   CÓMO FUNCIONAN · de servicios sueltos a un recorrido
   ============================================================ */
.how__stage { position: relative; height: clamp(280px, 36vh, 340px); --ly: 46%; }
.how__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.how__base { stroke: rgb(var(--fg-rgb) / .12); stroke-width: 1; stroke-dasharray: 2 5; }
.how__line { stroke: var(--orange); stroke-width: 1.5; }
.how__branch { fill: none; stroke: rgb(var(--orange-rgb) / .55); stroke-width: 1; stroke-dasharray: 3 4; }
.how__end { position: absolute; top: var(--ly); display: grid; gap: 4px; max-width: 20ch; padding-top: 24px; font-size: .86rem; line-height: 1.3; color: var(--text-on-ink-2); }
.how__end b { font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink); }
.how__end::before { content: ''; position: absolute; top: -6px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgb(var(--fg-rgb) / .6); background: var(--ink); }
.how__end--a { left: 0; }
.how__end--a::before { left: 1px; }
.how__end--b { right: 0; text-align: right; max-width: 16ch; }
.how__end--b::before { right: 1px; border-color: var(--orange); background: var(--orange); }
.how__end--b b { color: var(--orange); }
.how__chip {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; font-size: .9rem; line-height: 1;
  border: 1px solid rgb(var(--fg-rgb) / .24); background: var(--ink); color: var(--text-on-ink-2);
  transition: border-color .4s var(--ease-ui), color .4s var(--ease-ui);
  will-change: transform;
}
.how__chip.is-set { border-color: rgb(var(--fg-rgb) / .55); color: var(--text-on-ink); }
.how__chip--extra { border-style: dashed; border-color: rgb(var(--orange-rgb) / .6); color: var(--orange); }
html.rl-js .how__stage:not(.is-ready) .how__chip { opacity: 0; }
/* Sin JS no hay recorrido que se ordene: los servicios en fila, entre "Hoy" y "Después" */
html:not(.rl-js) .how__stage { height: auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 26px 0 70px; border-top: 1px solid var(--line-on-ink); }
html:not(.rl-js) .how__svg { display: none; }
html:not(.rl-js) .how__chip { position: static; }
html:not(.rl-js) .how__xcap { position: static; transform: none; margin-left: 8px; }
html:not(.rl-js) .how__end { top: auto; bottom: 0; padding-top: 0; }
/* Recorrido vertical: lo decide js/programas.js según el ancho del propio
   escenario (.is-v), no la ventana. Con el corte por ventana a 699 px, entre
   700 y ~790 el JS ya apilaba las piezas en vertical mientras "Hoy" y
   "Después" seguían en horizontal, y las piezas tapaban "Hoy". En línea
   recta necesitan unos 920 px para no tocarse. */
.how__stage.is-v { height: 540px; }
.how__stage.is-v .how__end { top: 0; left: 28px; padding-top: 0; max-width: none; display: flex; gap: 8px; align-items: baseline; }
.how__stage.is-v .how__end--a::before { left: -27px; top: 2px; }
.how__stage.is-v .how__end--b { top: auto; bottom: 0; right: auto; text-align: left; }
.how__stage.is-v .how__end--b::before { right: auto; left: -27px; top: 2px; }
/* En vertical, "Lo sumamos sin perder la dirección." va debajo de su pieza y
   en dos renglones: encima tapaba "Experiencia" (a 390 px). */
.how__stage.is-v .how__xcap { left: 0; bottom: auto; top: calc(100% + 7px); transform: none; width: max-content; max-width: min(190px, var(--xcap-w, 190px)); white-space: normal; line-height: 1.3; }
/* --xcap-w (js/programas.js) es lo que queda entre la pieza y el borde del
   escenario. Y por si acaso, nada del escenario ensancha la página: overflow-x
   en clip (no es contenedor de scroll, así que la escena pegada sigue igual). */
.how__stage { overflow-x: clip; }


/* ============================================================
   LA PREGUNTA Y EL RESULTADO (prog-06, Apple Help Me Choose)
   Nacieron en encuentra-tu-programa.html (el selector en su página,
   2026-10-04); desde el 2026-10-17 se dibujan dentro del panel de cada
   momento (js/programas.js → momentos). Respuestas de una línea; el
   resultado, dos rutas (la primera con el botón) y el análisis en una línea.
   ============================================================ */
.pf-screen.is-enter { animation: pf-in .6s var(--ease-enter) both; }
@keyframes pf-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pf-k { font-size: .85rem; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; }
.pf-q { margin-top: 8px; max-width: 28ch; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-on-ink); text-wrap: balance; }
.pg [tabindex="-1"]:focus { outline: none; }
.pf-opts { display: grid; gap: 8px; margin-top: clamp(18px, 3vh, 30px); max-width: 820px; }
.pf-opt {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  min-height: 58px; padding: 13px 22px 13px 18px; border-radius: 14px; border: 1px solid rgb(var(--fg-rgb) / .18);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.35; color: var(--text-on-ink);
  transition: border-color .25s var(--ease-ui), background-color .25s var(--ease-ui), transform .16s var(--ease-snap);
}
.pf-opt__n { font-size: .8rem; letter-spacing: .08em; color: var(--text-on-ink-2); font-variant-numeric: tabular-nums; transition: color .25s var(--ease-ui); }
.pf-opt__t { font-weight: 500; letter-spacing: -0.006em; }
.pf-opt__go { grid-column: 3; color: var(--orange); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease-ui), transform .3s var(--ease-snap); }
@media (hover: hover) and (pointer: fine) {
  .pf-opt:hover { border-color: rgb(var(--orange-rgb) / .7); background: rgb(var(--orange-rgb) / .04); }
  .pf-opt:hover .pf-opt__n { color: var(--orange); }
  .pf-opt:hover .pf-opt__go { opacity: 1; transform: none; }
}
.pf-opt:focus-visible { border-color: rgb(var(--orange-rgb) / .8); outline: 2px solid var(--orange); outline-offset: 3px; }
.pf-opt:focus-visible .pf-opt__go { opacity: 1; transform: none; }
.pf-opt:active { transform: scale(.99); border-color: rgb(var(--orange-rgb) / .7); }
.pf-ctx { margin-top: clamp(18px, 3vh, 28px); font-size: .9rem; line-height: 1.55; color: var(--text-on-ink-2); max-width: 70ch; }
.pf-ctx b { font-weight: 400; color: var(--text-on-ink); }
.pf-res .pf-ctx { margin-top: 12px; }
/* El resultado: dos rutas, la primera con el botón; el análisis, en una línea */
.pf-routes { display: grid; gap: 12px; margin-top: clamp(22px, 3.6vh, 34px); }
@media (min-width: 760px) { .pf-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-route {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--r); background: var(--rl-surface); animation: pf-in .7s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .08s + .05s);
}
.pf-route--1 { box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / .6); }
.pf-route__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.pf-route__k { font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pf-route--1 .pf-route__k { color: var(--orange); }
.pf-route__g { width: 58px; flex: none; margin: -6px -6px 0 0; }
.pf-route__name { display: flex; align-items: baseline; gap: 10px; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.018em; }
.pf-route__name span { font-size: .55em; font-weight: 300; color: var(--orange); font-variant-numeric: tabular-nums; }
.pf-route__wk { font-size: .95rem; color: var(--text-on-ink-2); }
.pf-route__wk b { margin-right: 4px; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: var(--text-on-ink); font-variant-numeric: tabular-nums; }
.pf-route--1 .pf-route__wk b { color: var(--orange); }
.pf-route__t { font-size: clamp(1.02rem, .96rem + .25vw, 1.15rem); line-height: 1.35; color: var(--text-on-ink); text-wrap: pretty; }
.pf-route__t .pf-s { display: block; }
.pf-route .rl-fold__btn { font-size: .9rem; color: var(--text-on-ink-2); }
.pf-route .rl-fold__inner { font-size: .94rem; line-height: 1.55; color: var(--text-on-ink-2); }
.pf-route__dlk { margin-top: 12px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pf-route__dl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-route__dl li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1px solid rgb(var(--fg-rgb) / .16); font-size: .86rem; color: var(--text-on-ink); }
.pf-route__dl li > span { display: block; width: 20px; color: var(--text-on-ink); }
.pf-route__go { margin-top: auto; align-self: flex-start; }
.pf-route__go.btn { margin-top: auto; }
.pf-door {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 8px;
  margin-top: 12px; padding: 18px 22px; border-radius: var(--r); border: 1px dashed rgb(var(--orange-rgb) / .45);
  animation: pf-in .7s var(--ease-enter) both; animation-delay: .2s;
}
@media (min-width: 760px) { .pf-door { grid-template-columns: auto minmax(0, 1fr) auto; } }
.pf-door__icon { position: relative; width: 40px; height: 40px; }
.pf-door__icon i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgb(var(--orange-rgb) / .6); }
.pf-door__icon i + i { inset: 10px; border-style: solid; }
.pf-door__icon b { position: absolute; inset: 17px; border-radius: 50%; background: var(--orange); }
.pf-door__t { font-size: .95rem; line-height: 1.5; color: var(--text-on-ink-2); }
.pf-door__t b { font-weight: 500; color: var(--text-on-ink); }
.pf-door__k { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.pf-door__go { white-space: nowrap; }
@media (max-width: 759px) { .pf-door__go { grid-column: 1 / -1; } }
.pf-res__more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 20px; }
.pf-restart { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: .95rem; color: var(--text-on-ink-2); transition: color .2s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .pf-restart:hover { color: var(--orange); } }
@media (max-width: 600px) {
  .pf-opt { grid-template-columns: 26px minmax(0, 1fr); padding: 14px 16px 14px 14px; column-gap: 10px; }
  .pf-opt__go { display: none; }
}

/* ============================================================
   LOS NUEVE PROGRAMAS (T11) · mosaico del kit con el glifo de cada uno
   ============================================================ */
.pg-all__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: clamp(28px, 4.4vh, 48px); }
.pg-all__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 1rem; color: var(--rl-fg-2); }
.pg-tiles .rl-tile { min-height: clamp(220px, 20vw, 300px); }
.pg-tiles .rl-tile__t { max-width: 11ch; }
.pg-tiles .rl-tile:not(.rl-tile--wide):not(.rl-tile--full) .rl-tile__k { padding-right: clamp(80px, 7.6vw, 116px); }
.pg-tiles .rl-tile__s { max-width: 24ch; }
.pg-tile__g { position: absolute; z-index: -1; right: clamp(18px, 2vw, 30px); top: clamp(18px, 2vw, 30px); width: clamp(70px, 7vw, 104px); }
.pg-tiles .rl-tile--wide .pg-tile__g { width: clamp(104px, 11vw, 160px); }
.pg-tiles .rl-tile--full { min-height: clamp(200px, 17vw, 250px); }
.pg-tiles .rl-tile--full .pg-tile__g { top: 50%; right: clamp(80px, 9vw, 140px); width: clamp(120px, 13vw, 190px); transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) { .pg-tile:hover { background-color: var(--rl-surface-2); } }
@media (max-width: 599px) {
  .pg-tile__g { width: 64px; }
  .pg-tiles .rl-tile--wide .pg-tile__g, .pg-tiles .rl-tile--full .pg-tile__g { width: 76px; top: clamp(18px, 2vw, 30px); right: clamp(18px, 2vw, 30px); transform: none; }
  .pg-tiles .rl-tile__t { max-width: 13ch; }
}
/* La hoja del '+' (la abre js/relato.js): lo de la tarjeta y los botones */
.rl-sheet .pg-tile__es { font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
html:not(.rl-js) .pg-tile__es { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.rl-sheet .pg-tile__when { color: rgb(var(--fg-rgb) / .92); font-size: .98rem; }
.rl-sheet .pg-tile__act { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.rl-sheet .pp-plus__of { font-size: .86rem; letter-spacing: .02em; color: rgb(var(--fg-rgb) / .5); }

/* ============================================================
   COMPARAR (T16) · el comparador del kit en la página
   ============================================================ */
.pg-cmp__table, .pp-cmp__table { margin-top: clamp(28px, 5vh, 56px); }
.pg-cmp .rl-lede, .pp-cmp .rl-lede { max-width: 38em; }
/* prog-02 · "Estás aquí": el universo en miniatura junto al titular */
.pp-cmp__head { display: grid; gap: 10px 48px; align-items: end; }
.pp-cmp__txt .pg-cmp__bar { justify-content: flex-start; gap: 6px 28px; }
.pp-cmp__map { width: clamp(230px, 21vw, 300px); }
@media (min-width: 760px) { .pp-cmp__head { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 759px) { .pp-cmp__map { order: -1; } }
/* La columna del programa en el que estás no lleva "Ver programa": sin esto
   la rejilla repartía ese hueco entre sus filas, el selector crecía a 61 px
   (la flecha bajaba 8 px) y el nombre quedaba 18 px más abajo que los de
   los vecinos. */
.pp-cmp .rl-cmp__col, .pg-cmp .rl-cmp__col { align-content: start; }
.pp-cmp .rl-cmp__col.is-me .rl-cmp__sub { display: inline-flex; align-items: center; gap: 8px; color: var(--orange); }
.pp-cmp .rl-cmp__col.is-me .rl-cmp__sub::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.pp-cmp .rl-cmp.is-stuck .rl-cmp__col.is-me .rl-cmp__sub { display: inline-flex; margin-top: 8px; min-height: 38px; }
/* Filas algo más juntas que en /programas: aquí son tres programas vecinos */
@media (min-width: 760px) { .pp-cmp .rl-cmp .rl-cmp__row { padding-block: clamp(24px, 4vh, 42px); } }
.phm { display: block; width: 100%; height: auto; overflow: visible; }
.phm__o { fill: none; stroke: rgb(var(--fg-rgb) / .12); stroke-dasharray: 2 5; }
.phm__n circle { fill: rgb(var(--fg-rgb) / .02); stroke: rgb(var(--fg-rgb) / .18); stroke-width: 1; vector-effect: non-scaling-stroke; }
.phm__n text { font-size: 17px; letter-spacing: .04em; fill: rgb(var(--fg-rgb) / .38); font-variant-numeric: tabular-nums; }
.phm__n.is-near circle { stroke: var(--orange); fill: rgb(var(--orange-rgb) / .1); }
.phm__n.is-near text { fill: var(--text-on-ink); }
.phm__n.is-me circle { stroke: var(--orange); fill: var(--orange); }
.phm__n.is-me text { fill: var(--ink); font-weight: 500; }
.phm__l { stroke: rgb(var(--orange-rgb) / .8); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.phm__here { font-size: 21px; font-weight: 500; letter-spacing: .01em; fill: var(--orange); }
@media (max-width: 599px) { .pp-cmp__map { width: min(260px, 72vw); } }
/* El resumen en cifras, más compacto: tres filas de cifras a 68 px
   empujaban la primera fila de texto fuera de la pantalla. */
.pg-cmp .rl-cmp__sums, .pp-cmp .rl-cmp__sums { padding-block: clamp(20px, 3vh, 34px); }
.pg-cmp .rl-cmp__sumrow + .rl-cmp__sumrow, .pp-cmp .rl-cmp__sumrow + .rl-cmp__sumrow { margin-top: clamp(14px, 2vh, 22px); }
.pg-cmp .rl-cmp__fig b, .pp-cmp .rl-cmp__fig b { font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.5rem); }
.pg-cmp .rl-cmp__fig span, .pp-cmp .rl-cmp__fig span { margin-top: 4px; }
/* Filas con aire (el comparador de Apple respira): menos filas por
   pantalla y cada una se lee sola. */
@media (min-width: 760px) {
  .pg-cmp .rl-cmp__row, .pp-cmp .rl-cmp__row { padding-block: clamp(34px, 5.6vh, 58px); }
  .pg-cmp .rl-cmp__label, .pp-cmp .rl-cmp__label { margin-bottom: 18px; }
}
/* Iconos que el kit no trae (los pone js/programas.js en esas filas) */
.rl-cmp__label .pg-ico { width: 18px; height: 18px; color: var(--rl-fg); flex: none; }
.rl-cmp__cell { text-wrap: pretty; }
.rl-cmp__cell > span:only-child { max-width: 30ch; }

/* prog-09 · Pictogramas en vez de frases (js/programas.js → decorate) */
/* La barra de semanas: todas sobre la misma regla (la del más largo) */
.pg-wk { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; width: min(100%, 240px); margin-top: 14px; }
.pg-wk i { height: 8px; border-radius: 2px; background: rgb(var(--fg-rgb) / .08); }
.pg-wk i.is-on { background: var(--orange); }
.pg-wk i.is-opt { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / .75); }
/* Identidad, experiencia y canales: el pictograma encendido, o en parte */
/* Más grande en escritorio (como los pictogramas del comparador de Apple):
   la diferencia se ve por el dibujo antes de leer "Incluido" o "En parte". */
.pg-cpict { display: block; width: 46px; margin-bottom: 6px; color: var(--rl-fg); }
@media (min-width: 760px) { .pg-cpict { width: 60px; margin-bottom: 8px; } }
.rl-cmp__cell.is-part .pg-cpict { opacity: .5; }
.rl-cmp__cell.is-part .pg-cpict .pict { stroke-dasharray: 3 3; }
/* Qué te llevas: un pictograma por entregable; en gris, los que no trae */
.rl-cmp__cell .pg-dlm { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 4px; max-width: 340px; }
.pg-dlm__i { display: grid; justify-items: center; align-content: start; gap: 5px; width: 80px; transition: opacity .3s var(--ease-ui); }
.pg-dlm__p { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--rl-surface); color: var(--rl-fg); }
.pg-dlm__p .pict { width: 27px; }
.pg-dlm__n { font-size: .74rem; line-height: 1.25; color: var(--rl-fg); text-wrap: balance; }
.pg-dlm__i.is-off { opacity: .32; }
.pg-dlm__i.is-off .pict .p-o, .pg-dlm__i.is-off .pict .p-o.p-f { stroke: currentColor; fill: none; }
.pg-dlm__i.is-off .pict .p-o.p-f { fill: currentColor; }
.pg-dlm__i.is-off .pg-dlm__p { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .3); }
/* Ver en detalle (las dos filas de frase larga) y Solo diferencias */
.pg-cmpx .rl-cmp__row.is-detail { display: none; }
.pg-cmpx.is-detail-open .rl-cmp__row.is-detail { display: block; }
.pg-cmpx.is-diff .rl-cmp__row.is-same, .pg-cmpx.is-diff .rl-cmp__sumrow.is-same { display: none; }
.pg-cmpx.is-diff .rl-cmp__sumrow.is-same + .rl-cmp__sumrow { margin-top: 0; }
.pg-cmp__foot { display: flex; justify-content: center; padding-top: 18px; }
.pg-cmp__more { min-height: 44px; font-size: .95rem; }
.pg-cmp__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: clamp(10px, 1.1vw, 16px); }
.pg-cmp__bar .rl-lede { margin: 0; }
.pg-diff { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: .95rem; color: var(--rl-fg); cursor: pointer; user-select: none; }
.pg-diff[hidden] { display: none; }
.pg-diff input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pg-diff__sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: rgb(var(--fg-rgb) / .18); transition: background-color .25s var(--ease-ui); }
.pg-diff__sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--rl-fg); transition: transform .3s var(--ease-snap); }
.pg-diff input:checked + .pg-diff__sw { background: var(--orange); }
.pg-diff input:checked + .pg-diff__sw::after { transform: translateX(16px); background: var(--ink); }
.pg-diff input:focus-visible + .pg-diff__sw { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (max-width: 759px) {
  .pg-dlm__i { width: 74px; }
  .pg-dlm__p { width: 42px; height: 42px; }
  .pg-dlm__p .pict { width: 26px; }
  .pg-dlm__n { font-size: .68rem; }
}
/* Sin JS: una ficha por programa (el JS la cambia por las columnas) */
.pcf { display: grid; gap: 14px; }
@media (min-width: 900px) { .pcf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcf__card { padding: clamp(20px, 2.2vw, 30px); border-radius: var(--r); background: var(--rl-surface); }
.pcf__name { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em; }
.pcf__name a { color: inherit; }
.pcf__es { margin-top: 4px; font-size: .9rem; color: var(--rl-fg-2); }
.pcf__dl { display: grid; gap: 12px; margin-top: 18px; }
.pcf__dl dt { font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--rl-fg-2); }
.pcf__dl dd { margin-top: 3px; font-size: .95rem; line-height: 1.45; color: var(--rl-fg); }

/* ============================================================
   CIERRE · Brand & Media Analysis
   ============================================================ */
.pg-close { padding-block: clamp(90px, 14vh, 160px); }
.pg-close__grid { display: grid; gap: clamp(40px, 7vh, 64px); }
.pg-close .rl-title { max-width: 12ch; }
.pg-close .rl-lede { max-width: 32em; }
.pg-close .rl-actions .btn { margin-top: 0; }
.pg-close__aside { align-self: end; border-top: 1px solid var(--rl-line); padding-top: 26px; max-width: 540px; }
.pg-close__q { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--rl-fg); text-wrap: balance; }
.pg-close__who { margin-top: 14px; font-size: .98rem; color: var(--rl-fg-2); }
.pg-close__fold { margin-top: 10px; }
.pg-close__fold .rl-fold__btn { font-size: .95rem; color: var(--rl-fg-2); }
.pg-close__fold .rl-fold__inner p { max-width: 46ch; font-size: .98rem; line-height: 1.55; color: var(--rl-fg-2); }
.pg-close__fold .rl-fold__inner p + p { margin-top: 8px; }
.pg-close__line { margin-top: clamp(22px, 3.4vh, 34px); }
@media (min-width: 1000px) { .pg-close__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(40px, 7vw, 120px); align-items: end; } }

/* ============================================================
   PÁGINA DE PROGRAMA · HERO (el nombre, su frase y la pieza)
   15 a 30 palabras: la introducción y la franja de datos pasaron a la
   pantalla siguiente (T04, cifras grandes).
   ============================================================ */
.pp-hero { position: relative; overflow: clip; min-height: min(92svh, 900px); display: grid; align-content: end; padding: calc(90px + 6vh) 0 clamp(56px, 9vh, 110px); }
.pp-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 56% at 82% 38%, rgb(var(--orange-rgb) / .13), transparent 66%),
    radial-gradient(50% 50% at 0% 0%, rgb(var(--tangerine-rgb) / .08), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 65%, transparent 100%);
}
.pp-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.pp-hero__text { position: relative; z-index: 2; }
.pp-hero__es { margin-top: clamp(24px, 4vh, 40px); }
.pp-hero__title { font-size: inherit; }
.pp-hero__name { display: block; margin-top: 12px; font-weight: 200; font-size: clamp(2.9rem, 7.2vw, 7.2rem); line-height: .96; letter-spacing: -0.045em; color: var(--text-on-ink); }
.pp-hero__phrase { display: block; margin-top: clamp(18px, 3vh, 30px); font-size: var(--fs-hero); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; max-width: 17ch; }
/* Una oración por renglón (el generador las separa y amarra con espacio
   duro las palabras que no deben quedar solas). Con GSAP la frase espera
   oculta a que js/programas.js la parta; si ese JS no llega, se muestra
   sola a los 2,5 s. pretty y no balance: balance repartía "funcionando"
   solo en un renglón del teléfono. */
.pp-hero__s { display: block; text-wrap: pretty; }
html.anim [data-pp-phrase]:not(.is-set) { opacity: 0; animation: pp-phrase-show 0s 2.5s forwards; }
@keyframes pp-phrase-show { to { opacity: 1; } }
.pp-hero__actions { margin-top: clamp(28px, 5vh, 48px); }
/* Teléfono y tableta: la pieza vive arriba a la derecha, en la franja de
   las migas y el kicker; más abajo cruzaba el nombre ("Brand Intellige|nce"). */
.pp-hero__art { position: absolute; z-index: 1; top: -40px; right: -4%; width: min(34vw, 220px); opacity: .55; pointer-events: none; }
@media (min-width: 960px) {
  .pp-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .66fr); column-gap: clamp(30px, 4vw, 70px); align-items: end; }
  .pp-hero__text { grid-column: 1; grid-row: 1; }
  .pp-hero__art { position: relative; grid-column: 2; grid-row: 1; top: auto; right: auto; width: 100%; max-width: 500px; justify-self: end; align-self: center; opacity: 1; }
}
@media (min-width: 960px) and (max-height: 820px) { .pp-hero__art { max-width: 420px; } }

/* ---------- Barra local del programa (rl-nav del kit con su glifo) ---------- */
.pp-lnav .rl-nav__id::before { display: none; }
.pp-lnav__g { width: 26px; flex: none; }
.pp-lnav__dur { font-size: .82rem; font-weight: 400; color: var(--text-on-ink-2); }
@media (max-width: 1180px) { .pp-lnav__dur { display: none; } }

/* ============================================================
   EL PROGRAMA EN CIFRAS (T04 + T02)
   ============================================================ */
/* Titular a la escala de historia (68 px): "<Programa>, en cifras." cabe
   en dos renglones con todos los nombres (el más largo, Digital
   Performance). Para quién es va en el sobretítulo. */
.pp-figs .rl-title { max-width: 18ch; }
.pp-figs__lede { max-width: 34em; }
.pp-figs__row { margin-top: clamp(36px, 6vh, 72px); }
.pp-figs .rl-fig__line { max-width: 30ch; }

/* ============================================================
   ¿ESTE PROGRAMA ES PARA TI? · frases que se encienden y se acumulan
   ============================================================ */
.pp-fit__grid { display: grid; gap: clamp(28px, 5vh, 48px); }
.pp-fit__hint { max-width: 26em; }
.pp-fit__count { display: none; margin-top: clamp(26px, 5vh, 52px); font-weight: 200; font-size: clamp(2.8rem, 4.6vw, 4.4rem); line-height: 1; letter-spacing: -0.03em; color: rgb(var(--fg-rgb) / .3); font-variant-numeric: tabular-nums; }
.pp-fit__count span { color: var(--orange); }
@media (min-width: 960px) { .js-fit .pp-fit__count { display: block; } }
.pp-fit__list { border-top: 1px solid var(--rl-line); }
.pp-fit__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 10px; padding: clamp(24px, 4.6vh, 46px) 0; border-bottom: 1px solid var(--rl-line); }
.pp-fit__n { padding-top: .55em; font-size: .78rem; letter-spacing: .1em; color: var(--orange); transition: opacity .5s var(--ease-ui); }
.pp-fit__item p { font-size: clamp(1.35rem, 2.35vw, 2.2rem); line-height: 1.22; letter-spacing: -0.018em; color: var(--text-on-ink); transition: color .7s var(--ease-ui); text-wrap: pretty; }
.js-fit .pp-fit__item:not(.is-on) p { color: rgb(var(--fg-rgb) / .3); }
.js-fit .pp-fit__item:not(.is-on) .pp-fit__n { opacity: .4; }
@media (min-width: 960px) {
  .pp-fit__grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: clamp(40px, 6vw, 110px); }
  .pp-fit__head { position: sticky; top: calc(var(--rl-chrome, 0px) + 40px); align-self: start; }
}

/* ============================================================
   QUÉ VAS A CONSEGUIR (prog-07 + prog-08) · los resultados se apilan
   como capas de la marca. Cada tarjeta se pega un poco más abajo que la
   anterior y la siguiente pasa por encima (js/programas.js la achica un
   poco al taparla: --s, --b). A la izquierda, pegado, el glifo del
   programa se llena una capa por resultado (--lit). Sin JS o con
   movimiento reducido: una lista quieta, con todo a la vista.
   ============================================================ */
.pp-out { padding-block: clamp(84px, 12vh, 140px) clamp(64px, 9vh, 110px); }
.pp-out__grid { display: grid; gap: clamp(24px, 4vh, 40px); }
.pp-out__lede { margin-top: 14px; max-width: 26em; font-size: var(--fs-lead); line-height: 1.5; color: var(--rl-fg-2); }
.pp-out__g { display: none; }
.pp-stack { display: grid; gap: 14px; }
.pp-stack__card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: clamp(220px, 30vh, 300px); padding: clamp(22px, 2.6vw, 38px);
  border-radius: var(--r); background: var(--rl-surface);
  box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .06);
  transform-origin: 50% 0; transform: scale(var(--s, 1)); filter: brightness(var(--b, 1));
}
.pp-stack__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.pp-stack__n { font-weight: 200; font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -0.04em; color: var(--rl-fg); font-variant-numeric: tabular-nums; }
.pp-stack__n small { font-size: .32em; font-weight: 400; letter-spacing: .08em; color: var(--rl-fg-2); vertical-align: .9em; margin-left: .2em; }
.pp-stack__g { width: clamp(58px, 5.4vw, 84px); flex: none; }
.pp-stack__t { margin-top: auto; max-width: 22ch; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.15rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; color: var(--rl-fg); text-wrap: balance; }
.pp-stack__fold .rl-fold__btn { font-size: .92rem; color: var(--rl-fg-2); }
.pp-stack__fold .rl-fold__inner p { max-width: 46ch; font-size: .98rem; line-height: 1.55; color: var(--rl-fg-2); }
@media (min-width: 960px) {
  .pp-out__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(40px, 6vw, 110px); align-items: start; }
  .pp-out__head { position: sticky; top: calc(var(--rl-chrome, 0px) + 44px); }
  .pp-out__g { display: block; width: clamp(150px, 15vw, 230px); margin-top: clamp(30px, 6vh, 64px); }
}
/* La pila: con JS y movimiento normal cada tarjeta se pega (escalonada) */
html.rl-anim .pp-stack { gap: 0; }
html.rl-anim .pp-stack__item { position: sticky; top: calc(var(--rl-chrome, 0px) + 28px + var(--i) * 16px); padding-bottom: 22px; }
html.rl-anim .pp-stack__card { box-shadow: inset 0 0 0 1px rgb(var(--fg-rgb) / .07), 0 -18px 40px -22px rgb(0 0 0 / .85); }
@media (max-width: 959px) {
  html.rl-anim .pp-stack__item { top: calc(var(--rl-chrome, 0px) + 16px + var(--i) * 12px); }
}

/* ============================================================
   EL GLIFO POR CAPAS (prog-08) · js/programas.js reparte las piezas de
   cada glifo en capas (--l, del centro hacia afuera) y el contenedor dice
   hasta cuál se ve (--lit). Lo apagado queda como un fantasma. Va en
   stroke/fill-opacity, no en opacity: así no choca con las pasadas
   (.g-play) que animan la opacidad. Sin JS no hay --l: el glifo entero.
   ============================================================ */
.glyph [data-l] {
  --lo: clamp(.12, calc((var(--lit, 99) - var(--l)) * 2.4 + 1), 1);
  stroke-opacity: var(--lo); fill-opacity: var(--lo);
  transition: stroke-opacity .6s var(--ease-ui), fill-opacity .6s var(--ease-ui);
}
.pp-trav .glyph [data-l] { transition: none; }

/* ---------- El glifo que viaja (prog-08) ----------
   Una sola pieza fija que se posa en cada parada ([data-trav-slot]: el
   hero, "¿Es para ti?", "Qué vas a conseguir", el logo del Brand Portal y
   la barra local) y vuela entre ellas por una curva (MotionPathPlugin).
   Mientras está activa, las paradas esconden su copia. Solo en escritorio
   y con movimiento normal (js/programas.js pone html.pp-trav-on). */
.pp-trav { position: fixed; left: 0; top: 0; z-index: 65; width: 100px; height: 100px; pointer-events: none; transform-origin: 0 0; will-change: transform; visibility: hidden; }
.pp-trav .glyph { width: 100%; height: 100%; }
html.pp-trav-on .pp-trav { visibility: visible; }
html.pp-trav-on [data-trav-slot] > .glyph { visibility: hidden; }
/* Cuando no hay vuelo posible (una punta fuera de la pantalla) el glifo
   aparece en su parada nueva con un fundido, a la par del navegador del
   Portal (que entra en .7 s con .12 s de espera). */
@keyframes pp-trav-in { from { opacity: 0; } }
.pp-trav.is-fade { animation: pp-trav-in .7s var(--ease-enter) .12s both; }
/* La barra local sin hueco: mientras el glifo está en otra parada, su
   sitio muestra el mismo glifo apagado (--lit: 0, solo el centro encendido,
   como en "¿Es para ti?"); se apaga cuando el glifo vuelve a posarse ahí.
   Antes quedaban unos 26 px vacíos a la izquierda del nombre. */
html.pp-trav-on .pp-lnav__g > .glyph { visibility: visible; opacity: 0; transition: opacity .4s var(--ease-ui); }
html.pp-trav-on .pp-lnav__g.is-away > .glyph { --lit: 0; opacity: 1; }

/* ---------- ¿Es para ti?: la parada chica (solo el centro, la idea) ---------- */
.pp-fit__mark { display: none; }
.pp-fit__g { width: 76px; flex: none; }
@media (min-width: 960px) {
  .pp-fit__mark { display: flex; align-items: center; gap: 26px; margin-top: clamp(26px, 5vh, 52px); }
  .pp-fit__mark .pp-fit__count { margin-top: 0; }
}

/* ============================================================
   PICTOGRAMAS (prog-10 · prog-09) · un símbolo por tipo de entregable
   ============================================================ */
.pict { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pict * { vector-effect: non-scaling-stroke; }
.pict .p-f { fill: currentColor; stroke: none; }
.pict .p-o { stroke: var(--orange); }
.pict .p-o.p-f { fill: var(--orange); stroke: none; }
.pict .p-dim { opacity: .45; }
.pict .p-dash { stroke-dasharray: 2 3; }
.pict .p-txt { font-family: var(--f-text); font-size: 17px; font-weight: 300; letter-spacing: -.02em; fill: currentColor; stroke: none; }

/* ============================================================
   QUÉ TE LLEVAS (T07 + prog-03 + prog-10 + T11)
   A la izquierda, la lista de entregables en mosaico (pictograma, nombre
   y dónde vive en el Prisma Brand Portal; el Portal, la pieza grande). A
   la derecha, el objeto quieto se abre en capas (T07) y, cuando la
   primera capa se enciende, la capa activa se abre en el navegador del
   Portal (.is-br): la dirección cambia, un cursor toca su pestaña y la
   lista marca lo recorrido (.is-cur, .is-done). La línea de cada
   entregable sale siempre en el mismo sitio, debajo del navegador.
   ============================================================ */
.pp-take__lede { margin-top: 14px; max-width: 26em; font-size: var(--fs-lead); line-height: 1.5; color: var(--rl-fg-2); }
.pp-take .rl-layers__obj { aspect-ratio: 3 / 2; width: min(86%, 540px); }
.pp-take .rl-layers__stage { --rl-gap: min(5vw, 58px, calc(40svh / var(--rl-n, 5))); }
.pp-layer .xo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* El mosaico de entregables */
.pp-dls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: clamp(20px, 3.2vh, 34px); }
.pp-dl__li { display: grid; }
.pp-dl__li--main { grid-column: 1 / -1; }
.pp-take .pp-dl.rl-tile {
  min-height: 0; padding: 13px 50px 13px 13px; border-radius: 14px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "p k" "p t" "p w"; column-gap: 12px; row-gap: 1px; align-content: center; align-items: center;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color .3s var(--ease-ui), box-shadow .35s var(--ease-ui);
}
.pp-dl__pict { grid-area: p; position: relative; align-self: center; width: 34px; color: rgb(var(--fg-rgb) / .72); transition: color .3s var(--ease-ui); }
.pp-take .pp-dl .rl-tile__k { grid-area: k; font-size: .68rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.pp-take .pp-dl .rl-tile__t { grid-area: t; margin-top: 0; max-width: none; font-size: .98rem; line-height: 1.22; letter-spacing: -0.006em; text-wrap: pretty; }
.pp-dl__where { grid-area: w; min-width: 0; font-size: .72rem; letter-spacing: .01em; color: rgb(var(--fg-rgb) / .44); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-dl__line { display: none; }
.pp-take .pp-dl .rl-tile__more { top: 0; bottom: 0; right: 8px; margin-block: auto; width: 34px; height: 34px; }
.pp-take .pp-dl .rl-tile__more svg { width: 13px; height: 13px; }
.pp-dl__li--main .pp-dl.rl-tile { grid-template-columns: 50px minmax(0, 1fr); padding: 18px 56px 18px 16px; column-gap: 16px; }
.pp-dl__li--main .pp-dl__pict { width: 50px; color: rgb(var(--fg-rgb) / .9); }
.pp-take .pp-dl__li--main .rl-tile__t { font-size: 1.18rem; }
.pp-dl__check {
  position: absolute; right: -6px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 3px var(--rl-surface); transform: scale(0); transition: transform .35s var(--ease-snap);
}
.pp-dl__check::after { content: ''; position: absolute; left: 5.5px; top: 3.5px; width: 4px; height: 7.5px; border: solid var(--ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.pp-dl.is-done .pp-dl__check { transform: scale(1); }
.pp-dl.is-cur { background: var(--rl-surface-2); box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / .6); }
.pp-dl.is-cur .pp-dl__pict { color: var(--rl-fg); }
.pp-dl.is-cur .pp-dl__check { box-shadow: 0 0 0 3px var(--rl-surface-2); }
/* Sin JS no hay hoja: cada pieza muestra su maqueta y su texto entero. */
html:not(.rl-js) .pp-take .pp-dl.rl-tile { grid-template-areas: "p k" "p t" "p w" "d d"; padding: 16px; }
html:not(.rl-js) .pp-dl .rl-tile__detail { grid-area: d; margin-top: 12px; font-size: .95rem; }
.pp-dl__mock { margin-bottom: 14px; border-radius: 10px; overflow: hidden; background: #111112; border: 1px solid rgb(var(--fg-rgb) / .1); }
.pp-dl__mock .xo { width: 100%; height: auto; }
.rl-sheet .pp-dl__mock { margin-bottom: 18px; }
/* Con movimiento reducido (JS sin escena): la pieza dice su línea */
html.rl-js .pp-take:not(.is-live) .pp-dl.rl-tile { grid-template-areas: "p k" "p t" "p w" "p l"; }
html.rl-js .pp-take:not(.is-live) .pp-dl__line { display: block; grid-area: l; margin-top: 6px; font-size: .9rem; line-height: 1.45; color: var(--rl-fg-2); }
html.rl-js .pp-take:not(.is-live) .pp-dl.rl-tile { align-content: start; }
html.rl-js .pp-take:not(.is-live) .pp-dl__pict { align-self: start; margin-top: 4px; }
/* Las notas del kit repetirían lo que ya dice cada pieza */
.pp-take:not(.is-live) .rl-layers__notes { display: none; }
@media (min-width: 1100px) {
  .pp-take .rl-layers__pin { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; column-gap: clamp(32px, 4vw, 72px); }
  .pp-take__head { grid-column: 1; grid-row: 1; }
  .pp-take .pp-dls { grid-column: 1; grid-row: 2; align-self: start; }
  .pp-take .rl-layers__body { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__pin { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; padding-bottom: 30px; }
  /* Sin escena (movimiento reducido o sin JS) cada pieza dice su línea: la
     lista se lleva el ancho. En 4/12 sus dos columnas medían 200 px y cada
     línea caía en ocho renglones de dos palabras. */
  .pp-take:not(.is-live) .rl-layers__pin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
@media (max-width: 1099px) {
  .pp-take .pp-dls { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .pp-take .pp-dls::-webkit-scrollbar { display: none; }
  .pp-take .pp-dl__li { flex: none; width: min(240px, 64vw); }
  .pp-take .pp-dl__li--main .pp-dl.rl-tile { grid-template-columns: 34px minmax(0, 1fr); padding: 13px 50px 13px 13px; column-gap: 12px; }
  .pp-take .pp-dl__li--main .pp-dl__pict { width: 34px; }
  .pp-take .pp-dl__li--main .rl-tile__t { font-size: .98rem; }
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__pin { grid-template-rows: auto auto 1fr; }
  html.rl-anim .pp-take.rl-layers.is-live .pp-take__lede { display: none; }
  html.rl-js .pp-take:not(.is-live) .pp-dls { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; }
  html.rl-js .pp-take:not(.is-live) .pp-dl__li { width: auto; }
  html:not(.rl-js) .pp-take .pp-dls { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin-inline: 0; padding: 0; }
  html:not(.rl-js) .pp-take .pp-dl__li { width: auto; }
}

/* En escritorio la escena se queda pegada: la columna de la izquierda
   (titular y mosaico) tiene que caber en la pantalla, también con 7
   entregables y en pantallas bajas. */
@media (min-width: 1100px) and (max-width: 1399px) { .pp-take__head .rl-title { font-size: var(--rl-fs-title-m); } }
@media (min-width: 1100px) and (max-height: 820px) {
  html.rl-anim .pp-take.is-live .pp-take__lede { display: none; }
  html.rl-anim .pp-take.is-live .pp-dls { margin-top: 14px; gap: 6px; }
  html.rl-anim .pp-take.is-live .pp-dl.rl-tile { padding-block: 9px; }
  html.rl-anim .pp-take.is-live .pp-dl__li--main .pp-dl.rl-tile { padding-block: 12px; }
}

/* ---------- La escena (con JS y movimiento normal) ---------- */
/* Más corta que la del kit: el navegador explica cada pieza de una vez. */
html.rl-anim .pp-take.rl-layers.is-live { height: calc(100svh + var(--rl-n, 5) * 42svh + 20svh); }
@media (min-width: 960px) { html.rl-anim .pp-take.is-live .rl-layers__stage { height: calc(100% - var(--cap-h, 92px)); } }
/* La capa encendida se abre en el navegador: el objeto se aparta abajo a
   la izquierda, más chico y tenue (sigue marcando la capa activa). */
.pp-take.is-live .rl-layers__obj { transition: translate .9s var(--ease-enter), scale .9s var(--ease-enter), opacity .6s var(--ease-ui); }
.pp-take.is-live.is-br .rl-layers__obj { translate: -34% 30%; scale: .5; opacity: .55; }
/* La línea de cada entregable: siempre debajo del navegador, alineada a la izquierda */
@media (min-width: 960px) {
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__notes { inset: auto 0 0 0; height: var(--cap-h, 92px); }
  /* Arriba, no abajo: el nombre de cada pieza cae siempre en el mismo
     renglón (pegada abajo, una línea corta bajaba el nombre 25 px y la
     siguiente lo volvía a subir). */
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__note,
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__note.is-left,
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__note.is-right {
    top: 0; bottom: auto; left: 0; right: auto; width: min(680px, 100%); text-align: left; transform: translateY(10px);
  }
  html.rl-anim .pp-take.rl-layers.is-live .rl-layers__note.is-on { transform: none; }
}
/* En el teléfono las notas comparten una celda con el alto de la más larga:
   sin esto, la línea de una nota corta bajaba al fondo de la celda, lejos de
   su nombre ("Brand Voice" … 50 px … "La base verbal de la marca."). */
html.rl-anim .pp-take.rl-layers.is-live .rl-layers__note { align-content: start; }
.pp-take .rl-layers__note b::after { content: ' / ' attr(data-of); color: var(--rl-fg-2); font-weight: 400; }
.pp-take .rl-layers__note b:not([data-of])::after { content: none; }

/* ---------- prog-03 · El navegador del Prisma Brand Portal ---------- */
.pp-br { display: none; }
.pp-take.is-live .pp-br {
  display: block; position: absolute; z-index: 2; right: 0; top: 0; width: min(96%, 780px);
  border-radius: 14px; overflow: hidden; background: #111112; border: 1px solid rgb(var(--fg-rgb) / .14);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(0 0 0 / .4);
  opacity: 0; transform: translateY(22px) scale(.965); transform-origin: 70% 20%;
  transition: opacity .5s var(--ease-exit), transform .6s var(--ease-exit), visibility 0s .6s; visibility: hidden;
}
.pp-take.is-live.is-br .pp-br { opacity: 1; transform: none; visibility: visible; transition: opacity .7s var(--ease-enter) .12s, transform .9s var(--ease-enter) .12s, visibility 0s; }
.pp-br__bar { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #19191b; border-bottom: 1px solid rgb(var(--fg-rgb) / .07); }
.pp-br__dots { display: flex; gap: 6px; flex: none; }
.pp-br__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--fg-rgb) / .16); }
.pp-br__url { display: flex; align-items: center; gap: 8px; min-width: 0; height: 24px; margin-inline: auto; padding: 0 14px 0 8px; border-radius: 999px; background: #0b0b0c; font-size: 12px; line-height: 1; color: rgb(var(--fg-rgb) / .5); white-space: nowrap; overflow: hidden; }
.pp-br__logo { width: 16px; height: 16px; flex: none; }
.pp-br__path { color: rgb(var(--fg-rgb) / .95); }
.pp-br__path.is-type { animation: pp-url .45s var(--ease-enter); }
@keyframes pp-url { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.pp-br__tabs { display: flex; gap: 2px; padding: 6px 10px; background: #141415; border-bottom: 1px solid rgb(var(--fg-rgb) / .07); overflow: hidden; }
.pp-br__tab { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 11.5px; color: rgb(var(--fg-rgb) / .46); transition: background-color .3s var(--ease-ui), color .3s var(--ease-ui); }
.pp-br__tab .pict { width: 15px; }
.pp-br__tab.is-done { color: rgb(var(--fg-rgb) / .72); }
.pp-br__tab.is-on { background: rgb(var(--fg-rgb) / .09); color: rgb(var(--fg-rgb) / .96); }
.pp-br__view { position: relative; aspect-ratio: 456 / 268; background: #111112; }
.pp-br__page { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease-ui); }
.pp-br__page.is-on { opacity: 1; }
.pp-br__page .xo { width: 100%; height: 100%; }
.xo.xo--bare { overflow: hidden; }   /* gana a .xo { overflow: visible } (más abajo): el "Aa" de Guidelines salía sobre la barra */
.pp-br__toast {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  padding: 9px 14px 9px 11px; border-radius: 10px; background: #202023; border: 1px solid rgb(var(--fg-rgb) / .12); box-shadow: 0 16px 30px -12px rgb(0 0 0 / .8);
  font-size: 12px; line-height: 1.25; color: rgb(var(--fg-rgb) / .92); opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease-exit), transform .4s var(--ease-exit);
}
.pp-br__toast svg { grid-row: span 2; width: 18px; height: 18px; color: var(--orange); }
.pp-br__toast small { font-size: 10.5px; color: rgb(var(--fg-rgb) / .5); }
.pp-br.is-dl .pp-br__toast { opacity: 1; transform: none; transition: opacity .4s var(--ease-enter), transform .5s var(--ease-enter); }
/* Al descargar, la fila marcada es la del archivo que toca el cursor
   (logotipo-principal.svg): la pasada por las filas seguía su camino y el
   aviso de descarga salía con la cuarta fila encendida. */
.pp-br.is-dl .xa-row { animation: none; transform: none; }
.pp-br__cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 20px; height: 20px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease-ui); filter: drop-shadow(0 2px 3px rgb(0 0 0 / .55)); }
.pp-br__cursor svg { display: block; width: 100%; height: 100%; }
.pp-br.has-cursor .pp-br__cursor { opacity: 1; }
.pp-br__cursor::before { content: ''; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--orange); opacity: 0; transform: scale(.4); }
.pp-br__cursor.is-click::before { animation: pp-click .5s var(--ease-enter); }
@keyframes pp-click { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
@media (min-width: 960px) {
  .pp-take.is-live .pp-br { top: 1%; }
}
@media (max-width: 959px) {
  .pp-take.is-live .pp-br { position: relative; top: auto; right: auto; width: 100%; margin-inline: auto; max-width: 560px; }
  .pp-take.is-live .rl-layers__stage { display: grid; place-items: center; }
  .pp-take.is-live .rl-layers__stage > * { grid-area: 1 / 1; }
  .pp-take.is-live.is-br .rl-layers__obj { translate: 0 0; scale: .6; opacity: 0; }
  .pp-br__tabs { display: none; }
  .pp-br__url { font-size: 11px; }
  .pp-br__dots { display: none; }
}

/* ---------- Objetos (SVG) ---------- */
.xo { display: block; overflow: visible; }
.xo text { font-family: var(--f-text); }
.xo .x-win { fill: #111112; stroke: rgb(var(--fg-rgb) / .14); }
.xo .x-bar { fill: #19191b; }
.xo .x-pill { fill: #0b0b0c; }
.xo .x-url { font-size: 8.5px; fill: rgb(var(--fg-rgb) / .5); letter-spacing: .01em; }
.xo .x-s2 { fill: #18181a; }
.xo .x-s3 { fill: #26262a; }
.xo .x-s4 { fill: #1d1d20; }
.xo .x-card { fill: #161618; stroke: rgb(var(--fg-rgb) / .12); }
.xo .x-card--back { fill: #111112; }
.xo .x-phone { fill: #0e0e0f; stroke: rgb(var(--fg-rgb) / .22); }
.xo .x-ln { stroke: rgb(var(--fg-rgb) / .1); stroke-width: 1; fill: none; }
.xo .x-ln2 { stroke: rgb(var(--fg-rgb) / .3); stroke-width: 1; fill: none; }
.xo .g-dash { stroke-dasharray: 3 4; }
.xo .x-sk { fill: rgb(var(--fg-rgb) / .13); }
.xo .x-or { fill: var(--orange); }
.xo .x-or-60 { fill: rgb(var(--orange-rgb) / .55); }
.xo .x-or-soft { fill: rgb(var(--orange-rgb) / .08); }
.xo .x-ors { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.xo .x-ors2 { fill: none; stroke: var(--orange); stroke-width: 3; }
.xo .x-or-ln { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; }
.xo .x-or-ln2 { fill: none; stroke: var(--orange); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.xo .x-or-ring { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.xo .x-mid { fill: #6c6c73; }
.xo .x-mid-ln { fill: none; stroke: rgb(var(--fg-rgb) / .42); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.xo .x-mid-ring { fill: none; stroke: rgb(var(--fg-rgb) / .45); stroke-width: 1.5; }
.xo .x-lt { fill: rgb(var(--fg-rgb) / .85); }
.xo .x-lt-ln { fill: none; stroke: rgb(var(--fg-rgb) / .7); stroke-width: 1.5; }
.xo .x-t { font-size: 10px; font-weight: 500; fill: rgb(var(--fg-rgb) / .88); }
.xo .x-tm { font-size: 9px; fill: rgb(var(--fg-rgb) / .5); }
.xo .x-k { font-size: 8px; font-weight: 500; letter-spacing: .14em; fill: var(--orange); }
.xo .x-h { font-size: 17px; font-weight: 500; letter-spacing: -.01em; fill: rgb(var(--fg-rgb) / .92); }
.xo .x-nav { font-size: 9.5px; fill: rgb(var(--fg-rgb) / .55); }
.xo .x-hl { fill: rgb(var(--fg-rgb) / .075); }
.xo .x-big { font-size: 31px; font-weight: 500; letter-spacing: -.025em; fill: rgb(var(--fg-rgb) / .92); }
.xo .x-aa { font-size: 64px; font-weight: 200; letter-spacing: -.03em; fill: rgb(var(--fg-rgb) / .9); }
.xo .x-aa2 { font-size: 22px; font-weight: 300; fill: var(--orange); }
.xo .x-num { font-size: 10px; fill: rgb(var(--fg-rgb) / .45); }
.xo .x-num-or { font-size: 10px; fill: var(--orange); font-weight: 500; }
.xo .x-badge { fill: #26262a; }
.xo .x-badge-t { font-size: 6.8px; font-weight: 500; letter-spacing: .05em; fill: rgb(var(--fg-rgb) / .75); }
.xo .x-dl { fill: none; stroke: rgb(var(--fg-rgb) / .38); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.xo .x-knob { fill: var(--orange); stroke: #161618; stroke-width: 3; }
.xo .x-pill2 { fill: rgb(var(--fg-rgb) / .1); }
.xo .x-pill3 { fill: none; stroke: rgb(var(--fg-rgb) / .2); stroke-dasharray: 3 3; }
.xo .x-pill4 { fill: rgb(var(--fg-rgb) / .14); stroke: rgb(var(--fg-rgb) / .32); }
.xo .x-ring { fill: none; stroke: rgb(var(--fg-rgb) / .3); }
.xo .x-photo { stroke: rgb(var(--fg-rgb) / .08); }
.xo .x-sun { fill: rgb(var(--orange-rgb) / .85); }
.xo .x-hz { stroke: rgb(var(--fg-rgb) / .22); }
.xo .x-obj { fill: #2c2c30; }
.xo .x-hill { fill: rgb(var(--shadow-rgb) / .42); }
.xo .x-crop { fill: none; stroke: var(--orange); stroke-width: 1.5; }
.xo .x-tag { fill: rgb(var(--ink-rgb) / .8); stroke: rgb(var(--fg-rgb) / .22); }
.xo .x-tag-t { font-size: 8.5px; fill: rgb(var(--fg-rgb) / .85); }
.xo .x-tag2 { fill: #26262a; stroke: rgb(var(--fg-rgb) / .2); }
.xo .x-curve { fill: none; stroke: rgb(var(--fg-rgb) / .62); stroke-width: 1.6; }
.xo .x-comet { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 4 96; stroke-dashoffset: 100; opacity: 0; }
.xo .x-dot { fill: rgb(var(--fg-rgb) / .7); }
.xo .x-dot2 { fill: rgb(var(--fg-rgb) / .34); }
.xo .x-chip { fill: none; stroke: rgb(var(--fg-rgb) / .26); }
.xo .x-chip-t { font-size: 8.5px; fill: rgb(var(--fg-rgb) / .7); }
.xo .x-chip-t2 { font-size: 10px; fill: rgb(var(--fg-rgb) / .85); }
.xo .x-chip-or { fill: rgb(var(--orange-rgb) / .1); stroke: var(--orange); }
.xo .x-chip-tor { font-size: 10px; font-weight: 500; fill: var(--orange); }
.xo .x-bar1 { fill: rgb(var(--fg-rgb) / .14); }
.xo .x-bar2 { fill: rgb(var(--fg-rgb) / .26); }
.xo .x-bar-dash { fill: none; stroke: var(--orange); stroke-dasharray: 4 3; }
.xo .x-ink { fill: var(--ink); }
.xo .x-ink2 { fill: #161618; }
.xo .x-box { fill: none; stroke: rgb(var(--fg-rgb) / .35); }
.xo .x-check { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xo .x-area { fill: rgb(var(--orange-rgb) / .1); }
.xo .x-tipbox { fill: #26262a; }
.xo .x-con { fill: none; stroke: rgb(var(--fg-rgb) / .3); stroke-width: 1.2; }
.xo .x-op { font-size: 16px; font-weight: 300; fill: rgb(var(--fg-rgb) / .5); }
.xo .x-tog { fill: rgb(var(--fg-rgb) / .12); }
.xo .x-tog--on { fill: rgb(var(--orange-rgb) / .85); }
.xo .x-tog-k { fill: rgb(var(--fg-rgb) / .95); }
.xo .x-guide { stroke: rgb(var(--orange-rgb) / .2); stroke-dasharray: 2 4; }
.xo .x-zone { fill: rgb(var(--orange-rgb) / .08); stroke: rgb(var(--orange-rgb) / .6); stroke-dasharray: 4 4; }
.xo .x-sheen { fill: rgb(var(--fg-rgb) / .07); }
.xo .x-grid { fill: rgb(var(--orange-rgb) / .04); stroke: rgb(var(--orange-rgb) / .2); }
.xo .x-sb { fill: rgb(var(--fg-rgb) / .3); }
.xo [class*="xa-"] { transform-box: fill-box; transform-origin: center; }
.xo .xa-grow, .xo .xa-progress, .xo .xa-fill { transform-origin: left center; }
.xo .xa-bar { transform-origin: center bottom; }

/* Una pasada cada vez que el objeto se enciende (.g-play): en "Qué te
   llevas", la capa activa, que cambia con el scroll (js/programas.js la
   sigue con data-rl-step). Lo que antes iba en bucle (el portal que baja, la
   fila marcada, la foto que respira, el cometa) ahora va y vuelve una sola
   vez y termina en reposo; lo que solo entraba (barras, trazos, piezas)
   sigue igual. Se apaga al salir, así que la capa vuelve a contarlo si
   vuelves a ella. */
@media (prefers-reduced-motion: no-preference) {
  .g-play .xa-hl { animation: xo-steps6 8s var(--ease-enter); }
  .g-play .xa-row { animation: xo-steps6r 8s var(--ease-enter); }
  .g-play .xa-idx { animation: xo-steps5 4s var(--ease-soft) 2 alternate; }
  .g-play .xa-scroll { animation: xo-scroll 4s var(--ease-soft) 2 alternate; }
  .g-play .xa-thumb { animation: xo-thumb 4s var(--ease-soft) 2 alternate; }
  .g-play .xa-bar { animation: xo-grow-y 1s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .08s + .2s); }
  .g-play .xa-knob { animation: xo-knob 1.4s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .16s + .2s); }
  .g-play .xa-fill { animation: xo-grow-x 1.4s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .16s + .2s); }
  .g-play .xa-bob { animation: xo-bob 2.4s var(--ease-soft) 2 alternate; }
  .g-play .xa-bob--2 { animation-delay: .5s; }
  .g-play .xa-tile { animation: xo-pop .7s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .07s + .15s); }
  .g-play .xa-draw { stroke-dasharray: 100; animation: xo-draw 1.6s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .22s + .15s); }
  .g-play .xa-ken { animation: xo-ken 3.2s var(--ease-soft) 2 alternate; animation-delay: calc(var(--i, 0) * .25s); }
  .g-play .xa-comet { animation: xo-comet 2.8s var(--ease-soft) 1.2s; }
  .g-play .xa-pulse { animation: xo-pulse 2.2s var(--ease-soft) 2 1.6s; }
  .g-play .xa-settle { animation: xo-settle 1.5s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .07s + .1s); }
  .g-play .xa-grow { animation: xo-grow-x 1.1s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .09s + .15s); }
  .g-play .xa-check { stroke-dasharray: 100; animation: xo-draw .6s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .38s + .4s); }
  .g-play .xa-progress { animation: xo-grow-x 2.3s var(--ease-enter) both .4s; }
  .g-play .xa-fade { animation: xo-fade 1.4s var(--ease-ui) both .3s; }
  .g-play .xa-tip { animation: xo-tip 6s var(--ease-soft) 1.4s; }
  .g-play .xa-pop { animation: xo-pop .7s var(--ease-enter) both; animation-delay: calc(var(--i, 0) * .09s + .2s); }
  .g-play .xa-emerge { animation: xo-emerge 1.5s var(--ease-enter) both .2s; }
  .g-play .xa-name { animation: xo-fade .6s var(--ease-ui) both; animation-delay: calc(var(--i, 0) * .06s); }
  .g-play .xa-sheen { animation: xo-sheen 3.4s var(--ease-soft) .8s; }
}
@keyframes xo-steps6 { 0%, 12% { transform: translateY(0); } 16.6%, 28% { transform: translateY(24px); } 33.3%, 45% { transform: translateY(48px); } 50%, 62% { transform: translateY(72px); } 66.6%, 78% { transform: translateY(96px); } 83.3%, 95% { transform: translateY(-24px); } 100% { transform: translateY(0); } }
@keyframes xo-steps6r { 0%, 12% { transform: translateY(0); } 16.6%, 28% { transform: translateY(36px); } 33.3%, 45% { transform: translateY(72px); } 50%, 62% { transform: translateY(108px); } 66.6%, 78% { transform: translateY(144px); } 83.3%, 95% { transform: translateY(180px); } 100% { transform: translateY(0); } }
@keyframes xo-steps5 { 0%, 10% { transform: translateY(0); } 25%, 35% { transform: translateY(24px); } 50%, 60% { transform: translateY(48px); } 72%, 82% { transform: translateY(72px); } 95%, 100% { transform: translateY(96px); } }
@keyframes xo-scroll { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(-412px); } }
@keyframes xo-thumb { 0%, 6% { transform: translateY(0); } 94%, 100% { transform: translateY(196px); } }
@keyframes xo-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes xo-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes xo-knob { from { transform: translateX(var(--dx, 0)); } to { transform: none; } }
@keyframes xo-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes xo-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes xo-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes xo-ken { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes xo-comet { 0% { stroke-dashoffset: 100; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes xo-pulse { 0%, 100% { transform: none; opacity: 1; } 50% { transform: scale(1.22); opacity: .35; } }
@keyframes xo-settle { from { transform: translate(var(--dx, 0), var(--dy, 0)); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes xo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xo-tip { 0%, 100% { transform: none; } 38% { transform: translateX(-120px); } 76% { transform: translateX(50px); } }
@keyframes xo-emerge { from { transform: translateX(-170px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes xo-sheen { 0% { transform: none; opacity: 1; } 12% { transform: translateX(-30px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateX(150px); opacity: 0; } 71% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ============================================================
   EL PROGRAMA, SEMANA A SEMANA (prog-01) · hoja de ruta (Linear Plan)
   Arriba las semanas (un rombo por reunión semanal); una fila por etapa
   con su barra sobre las semanas que ocupa y un rombo al cerrarla; al
   final, el hito de cierre. La línea de la semana (--pt-p) avanza con el
   scroll, las barras se llenan a su paso y, en escritorio, el plano llega
   inclinado y se endereza (--tilt, lineal). En el teléfono, el nombre va
   encima de su barra.
   ============================================================ */
.pt__lede { max-width: 36em; }
.pt-road { --lab: 0px; position: relative; margin-top: clamp(40px, 7vh, 72px); margin-bottom: 56px; perspective: 1700px; }
.pt-road__plane { position: relative; transform-origin: 50% 0; transform: rotateX(calc(var(--tilt, 0) * 1deg)); }
.pt-axis { position: relative; height: 58px; margin-left: var(--lab); }
.pt-axis__rail { position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: var(--line-on-ink); }
.pt-axis__rail i { display: block; height: 100%; background: var(--orange); transform-origin: left; transform: scaleX(var(--pt-p, 0)); }
.pt-ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--weeks), minmax(0, 1fr)); }
.pt-tick { position: relative; }
.pt-tick__m { position: absolute; left: 50%; top: 15px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); border: 1px solid rgb(var(--fg-rgb) / .4); background: var(--ink); transition: background-color .3s var(--ease-ui), border-color .3s var(--ease-ui); }
.pt-tick.is-on .pt-tick__m { background: var(--orange); border-color: var(--orange); }
.pt-tick--opt .pt-tick__m { border-style: dashed; }
.pt-tick--opt.is-on .pt-tick__m { background: var(--ink); border-color: var(--orange); }
.pt-tick__l { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); font-size: .72rem; color: var(--text-on-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-tick__l--m { left: 6px; transform: none; letter-spacing: .04em; }
.pt-axis__opt { position: absolute; top: -20px; right: 0; left: calc(var(--min) / var(--weeks) * 100%); text-align: center; font-size: .7rem; letter-spacing: .06em; color: var(--text-on-ink-2); border-top: 1px dashed rgb(var(--fg-rgb) / .3); padding-top: 4px; }
.pt-stages { position: relative; display: grid; border-top: 1px solid var(--line-on-ink); }
.pt-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line-on-ink); }
.pt-stage__label { padding: 16px 0 8px; }
.pt-stage__n { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.pt-stage__t { margin-top: 6px; font-size: clamp(1.02rem, 1.25vw, 1.2rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 26ch; text-wrap: balance; }
.pt-stage__d { margin-top: 6px; color: var(--text-on-ink-2); font-size: .95rem; max-width: 40ch; }
.pt-stage__track {
  position: relative; min-height: 46px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--weeks) - 1px), rgb(var(--fg-rgb) / .055) calc(100% / var(--weeks) - 1px) calc(100% / var(--weeks)));
}
.pt-stage__bar {
  position: absolute; top: 50%; height: 22px; margin-top: -11px; overflow: hidden;
  left: calc(var(--from) / var(--weeks) * 100% + 3px); width: calc(var(--span) / var(--weeks) * 100% - 12px);
  border-radius: 6px; background: rgb(var(--orange-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--orange-rgb) / .42);
}
.pt-stage__bar i { position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(var(--f, 1)); }
.pt-stage__ms {
  position: absolute; top: 50%; left: calc((var(--from) + var(--span)) / var(--weeks) * 100% - 6px); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  transform: rotate(45deg); border: 1px solid rgb(var(--fg-rgb) / .55); background: var(--ink); transition: background-color .35s var(--ease-ui), border-color .35s var(--ease-ui);
}
.pt-stage.is-done .pt-stage__ms { background: var(--orange); border-color: var(--orange); }
.pt-stage__ms--end { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-color: var(--orange); }
.pt-road__end { position: absolute; right: 0; top: 100%; display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .86rem; color: var(--text-on-ink-2); }
.pt-road__end b { margin-right: 8px; font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.pt-road__dia { width: 12px; height: 12px; transform: rotate(45deg); background: var(--orange); }
.pt-road__now { position: absolute; top: 6px; bottom: 0; left: calc(var(--lab) + (100% - var(--lab)) * var(--pt-p, 0)); width: 1px; pointer-events: none; background: linear-gradient(180deg, transparent, rgb(var(--orange-rgb) / .9) 10%, rgb(var(--orange-rgb) / .9) 92%, transparent); opacity: 0; transition: opacity .4s var(--ease-ui); }
/* La píldora acompaña a la línea sin salirse del plano: al empezar va a su
   derecha, a mitad de camino centrada y al terminar a su izquierda
   (translateX de 0 a -100 % con --pt-p). Centrada siempre, al final asomaba
   media píldora por la derecha y en el teléfono la página se ensanchaba
   hasta 411 px (y con movimiento reducido, --pt-p = 1, desde el principio). */
.pt-road__now b { position: absolute; top: -26px; left: 0; transform: translateX(calc(var(--pt-p, 0) * -100%)); padding: 3px 9px; border-radius: 999px; border: 1px solid rgb(var(--orange-rgb) / .8); background: var(--ink-2, #141415); font-size: .7rem; font-weight: 500; letter-spacing: .04em; color: var(--orange); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pt-road.is-scrub .pt-road__now { opacity: 1; }
.pt-axis__opt { transition: color .3s var(--ease-ui); }
.pt-road.is-optnear .pt-axis__opt { color: transparent; }
.pt-road.is-opt .pt-road__now b { border-style: dashed; }
/* En el teléfono el tramo opcional mide unos 50 a 70 px: el rótulo en dos
   renglones pisaba la fila de rombos. En una línea, más chico y alineado a la
   derecha. Con flex y flex-end, lo que no cabe asoma hacia la izquierda (sobre
   el riel); con text-align el texto desbordaba por la derecha y ensanchaba la
   página (terminaba en x = 404 a 390 px). */
@media (max-width: 599px) { .pt-axis__opt { display: flex; justify-content: flex-end; white-space: nowrap; font-size: .62rem; letter-spacing: .04em; } }
/* Red de seguridad: nada de la hoja de ruta ensancha la página. En la sección
   (de borde a borde) y no en el plano, para no recortar la inclinación del
   escritorio; overflow-y sigue visible para la píldora de arriba. */
.pt { overflow-x: clip; }
/* El nombre de la etapa es el botón de su '+' (plegable del kit). En línea,
   para que el '+' quede pegado a la última palabra; el relleno vertical
   agranda la zona del dedo sin sumar aire. Sin JS el texto ya está abierto. */
.pt-stage__btn { display: inline; padding: 10px 0; text-align: left; letter-spacing: inherit; line-height: inherit; transition: color .2s var(--ease-ui); }
.pt-stage__btn i { position: relative; display: inline-block; vertical-align: -4px; margin-left: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rl-field, rgb(var(--fg-rgb) / .36)); transition: border-color .2s var(--ease-ui), background-color .2s var(--ease-ui); }
.pt-stage__btn i::before, .pt-stage__btn i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -.75px 0 0 -4.5px; background: currentColor; transition: transform .3s var(--ease-snap); }
.pt-stage__btn i::after { transform: rotate(90deg); }
.pt-stage__btn[aria-expanded="true"] i { border-color: var(--orange); }
.pt-stage__btn[aria-expanded="true"] i::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .pt-stage__btn:hover { color: var(--orange); } .pt-stage__btn:hover i { border-color: var(--orange); } }
.pt-stage__btn:active i { background-color: rgb(var(--orange-rgb) / .14); }
html:not(.rl-js) .pt-stage__btn { pointer-events: none; }
html:not(.rl-js) .pt-stage__btn i { display: none; }
/* Con el scroll: la etapa que la línea todavía no alcanzó espera atenuada */
.pt-road.is-scrub .pt-stage__label :is(.pt-stage__t, .pt-stage__d) { transition: opacity .5s var(--ease-ui); }
.pt-road.is-scrub .pt-stage:not(.is-on) .pt-stage__label :is(.pt-stage__t, .pt-stage__d) { opacity: .38; }
.pt-road.is-scrub .pt-stage:not(.is-on):has([aria-expanded="true"]) .pt-stage__label :is(.pt-stage__t, .pt-stage__d) { opacity: 1; }
.pt-legend { display: flex; align-items: center; gap: 12px; margin-top: clamp(18px, 3vh, 30px); font-size: .9rem; color: var(--text-on-ink-2); }
.pt-legend__mark { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--orange); background: rgb(var(--orange-rgb) / .25); flex: none; }
@media (min-width: 900px) {
  .pt-road { --lab: clamp(220px, 21vw, 300px); }
  .pt-stage { grid-template-columns: var(--lab) minmax(0, 1fr); align-items: stretch; }
  .pt-stage__label { padding: 18px 24px 18px 0; }
  .pt-stage__track { min-height: 82px; }
  .pt-stage__bar { height: 26px; margin-top: -13px; }
}

/* ============================================================
   PUEDES LLEVARLO MÁS LEJOS · módulos alrededor del programa base
   ============================================================ */
.pe__grid { display: grid; gap: clamp(28px, 5vh, 48px); }
.pe__lead { margin-top: 18px; max-width: 38ch; }
.pe-orbit { position: relative; display: grid; justify-items: center; gap: 22px; }
.pe-orbit__lines { display: none; }
.pe-core {
  position: relative; width: min(220px, 62vw); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 6px; padding: 18px;
  border: 1px solid var(--orange);
  background: radial-gradient(circle at 50% 38%, rgb(var(--orange-rgb) / .16), rgb(var(--orange-rgb) / .03) 70%);
}
.pe-core__k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.pe-core__n { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; }
.pe-core__d { font-size: .84rem; color: var(--text-on-ink-2); }
.pe-mods { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; }
.pe-mods::before { content: ''; position: absolute; left: 50%; top: -22px; height: 22px; width: 1px; background: rgb(var(--orange-rgb) / .5); }
.pe-mod { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgb(var(--fg-rgb) / .24); background: var(--ink); font-size: .92rem; line-height: 1.25; transition: border-color .3s var(--ease-ui); }
.pe-mod__plus { color: var(--orange); font-weight: 300; font-size: 1.1rem; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .pe-mod:hover { border-color: rgb(var(--orange-rgb) / .7); } }
@media (min-width: 960px) {
  .pe__grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: center; column-gap: clamp(30px, 4vw, 80px); }
}
/* La órbita necesita unos 640 px de ancho para que los módulos de nombre
   largo ("Chatbot y soluciones de atención con Dezik Labs") giren sin tapar
   el programa base: por debajo de 1180 px van apilados bajo él
   (js/programas.js usa el mismo corte). */
@media (min-width: 1180px) {
  .pe-orbit { display: block; aspect-ratio: 1.5; --rx: 40%; --ry: 40%; }
  .pe-orbit__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .pe-orbit__lines line { stroke: rgb(var(--orange-rgb) / .35); stroke-width: 1; stroke-dasharray: 2 4; }
  .pe-orbit__lines ellipse { fill: none; stroke: rgb(var(--fg-rgb) / .08); }
  .pe-core { position: absolute; left: 50%; top: 50%; width: 34%; transform: translate(-50%, -50%); }
  .pe-mods { position: absolute; inset: 0; display: block; }
  .pe-mods::before { display: none; }
  .pe-mod {
    --a: calc(360deg / var(--n) * var(--i) - 90deg + var(--o, 0deg));
    position: absolute; left: calc(50% + cos(var(--a)) * var(--rx)); top: calc(50% + sin(var(--a)) * var(--ry));
    transform: translate(-50%, -50%);
    /* Ancho propio (no el que queda hasta el borde): un módulo cerca del
       borde derecho se encogía y "Gráfica de espacios" salía en tres
       líneas. Los nombres largos parten en dos, equilibrados. */
    width: max-content; max-width: 17.5rem; white-space: normal; text-wrap: balance; text-align: left;
  }
}

/* ============================================================
   BRAND & MEDIA ANALYSIS · la puerta, no un décimo programa
   ============================================================ */
/* Aire de una pausa entre el comparador (zona de decisión, hasta 150
   palabras) y la puerta: con el hueco de una sección normal las dos cabían
   enteras en la misma pantalla y sumaban unas 160 palabras. */
/* Menos aire que antes (26vh, hasta 250 px): debajo de "Ver en detalle"
   quedaba una franja negra de casi 300 px que se leía como un hueco. */
.pba-wrap { padding-top: clamp(80px, 16vh, 168px); }
.pba { display: grid; gap: 22px; padding: clamp(24px, 3.4vw, 46px); border-radius: var(--r); border: 1px dashed rgb(var(--orange-rgb) / .5); }
.pba__door { display: flex; align-items: center; gap: 18px; }
.pba__rings { position: relative; width: 104px; aspect-ratio: 1; flex: none; }
.pba__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgb(var(--orange-rgb) / .55); }
.pba__ring--2 { inset: 24%; border-style: solid; border-color: rgb(var(--fg-rgb) / .3); }
.pba__dot { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--orange); }
.pba__weeks { display: grid; font-weight: 200; font-size: 2.6rem; line-height: .9; letter-spacing: -0.03em; color: var(--text-on-ink); }
.pba__weeks small { margin-top: 8px; font-size: .72rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pba__k { font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.pba__t { margin-top: 10px; font-size: var(--fs-h2); max-width: 20ch; }
.pba__d { margin-top: 12px; color: var(--text-on-ink-2); max-width: 58ch; }
.pba__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.pba__name { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-ink-2); }
.pba__fold { margin-top: 8px; }
.pba__fold .rl-fold__btn { font-size: .92rem; color: var(--text-on-ink-2); }
.pba__fold .rl-fold__inner p { max-width: 58ch; font-size: .96rem; line-height: 1.55; color: var(--text-on-ink-2); }
/* Dos semanas que terminan en una recomendación (aquí y en el cierre de
   /programas): la línea se dibuja al llegar a la pantalla (.is-live). */
.pba__line { display: flex; align-items: center; gap: 10px; max-width: 440px; margin-top: 20px; font-size: .78rem; color: var(--text-on-ink-2); }
.pba__line i { flex: 1 1 auto; min-width: 18px; height: 1px; background: linear-gradient(90deg, rgb(var(--fg-rgb) / .35), rgb(var(--orange-rgb) / .85)); transform-origin: left; transition: transform .9s var(--ease-enter); }
.pba__line i + span { transition: opacity .5s var(--ease-ui) .35s; }
.pba__wk { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgb(var(--fg-rgb) / .3); font-size: .74rem; color: var(--text-on-ink); font-variant-numeric: tabular-nums; }
.pba__rec { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 32px; padding: 0 13px; border-radius: 999px; background: rgb(var(--orange-rgb) / .12); font-size: .82rem; color: var(--orange); white-space: nowrap; }
.pba__rec b { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
html.rl-anim .pba__line:not(.is-live) i { transform: scaleX(0); }
html.rl-anim .pba__line:not(.is-live) i + span { opacity: .25; }
.pba__q { display: none; }
/* El anillo discontinuo da una vuelta al llegar a la pantalla (.g-play en
   .pba__rings, js/programas.js), no gira sin fin. */
@media (prefers-reduced-motion: no-preference) {
  .g-play .pba__ring { animation: g-spin 6s var(--ease-soft) .2s; }
}
@media (min-width: 960px) {
  .pba { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: clamp(28px, 4vw, 64px); }
  .pba__door { flex-direction: column; gap: 14px; align-items: center; text-align: center; padding-top: 4px; }
}
@media (min-width: 1180px) {
  .pba { grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr); }
  .pba__q {
    /* La cita y su pie juntos, al medio de la columna: con space-between el
       pie quedaba 240 px debajo de la cita, suelto al fondo de la caja. */
    display: flex; flex-direction: column; justify-content: center; gap: 14px; align-self: stretch;
    padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line-on-ink);
  }
  .pba__q p { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--text-on-ink); text-wrap: balance; text-indent: -0.42em; }
  .pba__qm { color: var(--orange); }
  .pba__q footer { font-size: .86rem; color: var(--text-on-ink-2); }
}


/* ============================================================
   EL RECORRIDO y LAS EXTENSIONES · cabeceras con la escala del kit
   ============================================================ */
.pe__lead { max-width: 30em; }

/* ============================================================
   TAMBIÉN PODRÍAS ESTAR BUSCANDO (T12) · la galería del kit con el glifo
   de cada programa en el marco, en negrita el nombre y una frase
   ============================================================ */
.pp-more .rl-gal__frame {
  aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 42%, rgb(var(--fg-rgb) / .05), transparent 72%), var(--rl-surface);
  transition: background-color .35s var(--ease-ui);
}
.pp-more__glyph { width: 50%; transition: transform .8s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .pp-more__link:hover .pp-more__glyph { transform: scale(1.04); } }
.pp-more__num { position: absolute; left: 20px; top: 18px; font-size: .8rem; letter-spacing: .12em; color: var(--orange); font-variant-numeric: tabular-nums; }
.pp-more__dur { position: absolute; left: 20px; bottom: 18px; font-size: .86rem; color: var(--rl-fg-2); }
.pp-more__all { margin-top: clamp(20px, 3vh, 30px); }
.pp-more .rl-gal__item { width: clamp(230px, 22vw, 330px); }

/* ============================================================
   CTA de la página de programa
   ============================================================ */
.pp-cta .cta__title { max-width: 15ch; }

/* ============================================================
   Movimiento reducido: todo quieto y en su sitio
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pf-screen.is-enter, .pf-route, .pf-door, .pm-panel.is-enter .pm-panel__head, .pm-panel.is-enter .pm-panel__body > * { animation: none; }
  .pm-opt, .pm-prog { transition: none; }
}