/* Las páginas de entradas de Play Jump Park (Kids y Jump): el marco de la página y los componentes del sistema
   Saltia que pintan sus piezas (T4c de `isla-y-landing-nueva.md` §4.12 del producto; `DECISIONES #762`).

   ⚠️ Es el ESTILO EN LÍNEA de los componentes React del diseño (`diseno/…/components/`), pasado a CLASES: el diseño
   pinta el `hover` y el `press` con estado de React, y en HTML estático son `:hover` y `:active`, que no pueden con
   un `style`. Cada regla repite las del componente en su mismo orden; se juzga con `scripts/banco-entradas.php` del
   producto contra el React, a 0 píxeles.
   ⚠️ La hoja de Saltia pinta `a` y `a:hover` (color y subrayado) con más peso que una clase sola: por eso los
   estados de botones y enlaces se declaran también con `:hover`, o el del elemento ganaría al pasar el puntero.
   ⚠️ Lo que el diseño decide MIDIENDO con JS (`VideoHero` apila por debajo de 720 px) va con `@container` sobre un
   solo DOM: dos copias ocultando una duplicarían el `<h1>` y los enlaces. */

/* ── El marco de la página (`paginas/kids.card.html` del diseño) ─────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-page)}
a{color:var(--text-link)}a:hover{color:var(--text-link-hover)}
.pj-pagina{display:flex;flex-direction:column;min-height:100vh}
/* La isla es la primera en el código (arriba en escritorio), pero en móvil va abajo con sticky+bottom, y sticky nunca
   baja un elemento que está al principio del flujo: se manda al final con `order` (`paginas/kids.card.html`). */
@media (max-width:899px){.pj-pagina>[data-jw-isla]>[data-situation]{order:99}}
/* La primera pantalla (zip del 27-09): arriba, la banda de la isla mide lo que mide montada (aire + `--island-h`), así
   que su SITIO la reserva desde el servidor. Sin esto, en la primera visita la isla llegaba y empujaba la cabecera 78px
   (el mockup no lo tiene: se pinta en el navegador, con la isla ya dentro). Montada, el sitio es `display: contents`. */
@media (min-width:900px){.pj-pagina>[data-jw-isla]:not([data-jw-isla-pagina]){flex:none;height:calc(max(var(--island-inset), env(safe-area-inset-top)) + var(--island-h))}}
/* ABAJO (móvil y tableta), la isla en reposo lleva su FRASE encima de la fila (Z6a del producto): 16 de aire + 28 de la
   frase + 46 de la fila = 90, lo que publica al montarse. Los tokens de Saltia dicen 62 (una fila, de antes de la Z6a): la
   cabecera se medía con 62, la isla publicaba 90 y la tarjeta entera saltaba ~45px (S3 de `seo.md` del producto, medido
   con `sonda-saltos-carga.mjs`: 0,028–0,030 de CLS en Kids y Jump). */
@media (max-width:899px){:root{--island-h:90px}}
/* LAS CARAS DE RESERVA (S3, «cero saltos»): mientras llegan las fuentes de la marca, el texto va en una del sistema
   AJUSTADA a su ancho (`size-adjust`), y al cambiar no se recoloca nada: sin ellas, la frase de la isla partía en dos
   líneas con Arial (la isla pasaba de 90 a 109 y volvía) y el titular, un 16 % más corto, crecía al llegar Archivo.
   Medido con los textos de la primera pantalla de las siete páginas a 100 px (sin el redondeo de los tamaños pequeños) y
   el tracking descontado, contra Arial (iPhone, Mac, Windows; Liberation Sans y Arimo tienen sus mismas anchuras) y
   Roboto (Android); con las caras, cada peso queda entre 0,99 y 1,01. Figtree contra Roboto ya mide 1,00: sin cara.
   ▶ La de 900 (los titulares) NO es la media: con 115,9 % el titular de la portada pasaba de 3 a 4 líneas al llegar
   Archivo. Los siete titulares a 360, 390 y 414 tienen las MISMAS líneas con las dos entre 117,5 y 119,5 % (Arial) y
   127,5 y 129,5 % (Roboto): el centro. Y la altura de la letra, la de cada marca (Figtree 0,95 + 0,25; Archivo 0,88 +
   0,21, medidas a 100 px), dividida por el ajuste, que también la escala. */
@font-face{font-family:"Figtree Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");font-weight:100 549;size-adjust:98.5%;ascent-override:96.4%;descent-override:25.4%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:550 649;size-adjust:94.2%;ascent-override:100.8%;descent-override:26.5%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:650 1000;size-adjust:95.5%;ascent-override:99.5%;descent-override:26.2%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:100 849;size-adjust:106.9%;ascent-override:82.3%;descent-override:19.6%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:850 1000;size-adjust:118.5%;ascent-override:74.3%;descent-override:17.7%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback R";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:100 849;size-adjust:113.9%;ascent-override:77.3%;descent-override:18.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback R";src:local("Roboto Black"),local("Roboto-Black");font-weight:850 1000;size-adjust:128.5%;ascent-override:68.5%;descent-override:16.3%;line-gap-override:0%}
:root{--font-display:"Archivo","Archivo Expanded","Archivo Fallback","Archivo Fallback R",system-ui,sans-serif;--font-ui:"Figtree","Figtree Fallback",system-ui,-apple-system,sans-serif}
.pj-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.pj-sec{padding:clamp(56px,7vw,104px) 0;scroll-margin-top:16px}
/* El FONDO SUAVE, en el cian de marca (el owner, 03-10, sobre el experimento «Fondo cian»: «A: --aqua-100»): lo que en
   Saltia es `--ink-050` pasa a `--aqua-100`, y el gris secundario a #59738a, el primero de su tono que llega a 4,5:1 sobre
   el cian (el de Saltia se queda en 4,31). Los mismos tokens que cambiaba el experimento, y solo en las SECCIONES: la isla
   del producto no estaba en él y sigue con los suyos; sobre tinta, `data-surface="ink"` dice los suyos. */
.pj-sec:not([data-surface="ink"]){--bg-subtle:var(--aqua-100);--band-subtle:var(--aqua-100);--notice-neutral-bg:var(--aqua-100);--control-bg-hover:var(--aqua-100);--skeleton-sheen:var(--aqua-100);--ink-500:#59738a;--text-muted:#59738a}
.pj-sec>.pj-wrap{display:grid;gap:var(--space-8)}
.pj-sec--top{padding:var(--hero-top) 0 0}
/* El HERO, más ancho que la retícula en escritorio (la L4 de `#876` del producto; el owner, en vivo: 1600 era «demasiado
   ancho», «a 1400 mejor»). Solo la tarjeta crece: su titular y su firma siguen alineados con la retícula (`.pj-vh__cuerpo`,
   `.pj-vh__firma`). */
.pj-sec--top>.pj-wrap{max-width:var(--pj-cabecera-ancho,1400px)}
.pj-sec--cierre{padding-bottom:clamp(56px,7vw,104px)}
.pj-sec--pie{padding:0 0 clamp(40px,5vw,72px)}
.pj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Button (`core/Button.jsx`) ──────────────────────────────────────────────────────────────────────────── */
/* ❗ PARTE su texto SOLO si no cabe (`#844` del producto, del owner, 29-09): el `Button` del diseño es de alto fijo y una
   línea, y «Réserver pour aujourd’hui» pide 302 px donde un móvil de 360 deja menos (la página se salía de lado). Así que:
   `white-space: normal` con `max-width: 100%` (su ancho es el de su texto, y solo parte cuando no cabe en su hueco),
   `flex-shrink: 0` (en una fila con otros, la fila baja entera como antes, porque el `nowrap` tampoco los dejaba encoger)
   y el alto de su talla como MÍNIMO, con aire arriba y abajo. Sin `line-height` propio: medido, uno movía las letras del
   botón que SÍ cabe. ▶ El de ANCHO COMPLETO sin iconos: su ancho es el de su hueco, así que su aire lateral es un MÁXIMO —su
   texto se lo come antes de partir, como con el `nowrap` de antes, y solo parte si no cabe en la píldora entera— (medido:
   «Voir les jours libres» cabía en una línea comiéndose el aire, y partirlo cambiaba lo que se veía bien). */
.pj-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:var(--fw-bold);letter-spacing:-0.01em;border:none;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;white-space:normal;max-width:100%;flex-shrink:0;text-wrap:balance;text-align:center;gap:9px;transition:var(--t-hover);transform:none;opacity:1}
.pj-btn:hover{text-decoration:none}
.pj-btn--full{display:flex;width:100%}
.pj-btn--sm{min-height:var(--control-sm);padding:8px 18px;font-size:var(--fs-body-sm);gap:8px;--pj-btn-aire:18px}
.pj-btn--md{min-height:var(--control-md);padding:8px 26px;font-size:var(--fs-body);gap:10px;--pj-btn-aire:26px}
.pj-btn--lg{min-height:var(--control-lg);padding:8px 32px;font-size:1.0625rem;gap:10px;--pj-btn-aire:32px}
.pj-btn--xl{min-height:var(--control-xl);padding:8px 40px;font-size:1.1875rem;gap:12px;--pj-btn-aire:40px}
.pj-btn--full>.pj-btn__texto:only-child{margin-inline:calc(var(--pj-btn-aire,26px) * -1)}
.pj-btn--primary,.pj-btn--primary:hover{background:var(--action-bg);color:var(--action-fg);box-shadow:var(--shadow-sm)}
.pj-btn--secondary,.pj-btn--secondary:hover{background:var(--control-selected-bg);color:var(--control-selected-fg)}
.pj-btn--outline,.pj-btn--outline:hover{background:transparent;color:var(--text-strong);box-shadow:inset 0 0 0 2px var(--control-border-strong)}
.pj-btn--ghost,.pj-btn--ghost:hover{background:transparent;color:var(--text-strong)}
.pj-btn--volt,.pj-btn--volt:hover{background:var(--volt-500);color:var(--ink-900)}
.pj-btn--inverse,.pj-btn--inverse:hover{background:var(--snow);color:var(--ink-900)}
.pj-btn--quiet,.pj-btn--quiet:hover{background:var(--action-quiet-bg);color:var(--action-quiet-fg);border:1px solid var(--action-quiet-border);white-space:normal}
.pj-btn--glass,.pj-btn--glass:hover{background:rgba(255,255,255,0.12);color:var(--snow);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3)}
.pj-btn:not(:disabled):hover{transform:translateY(var(--lift-hover))}
.pj-btn--primary:not(:disabled):hover{background:var(--action-bg-hover);box-shadow:var(--shadow-cta)}
.pj-btn--secondary:not(:disabled):hover{box-shadow:var(--shadow-md);filter:brightness(1.12)}
.pj-btn--outline:not(:disabled):hover{background:var(--control-selected-bg);color:var(--control-selected-fg)}
.pj-btn--ghost:not(:disabled):hover{background:var(--control-bg-hover)}
.pj-btn--volt:not(:disabled):hover{background:var(--volt-400);box-shadow:0 10px 24px -10px rgba(182,232,15,0.7)}
.pj-btn--inverse:not(:disabled):hover{background:var(--ink-100);box-shadow:var(--shadow-md)}
.pj-btn--quiet:not(:disabled):hover{background:var(--control-bg-hover)}
.pj-btn--glass:not(:disabled):hover{background:rgba(255,255,255,0.24)}
.pj-btn:not(:disabled):active{transform:scale(var(--scale-press))}
.pj-btn:disabled{cursor:not-allowed;opacity:0.42}
/* El movimiento (26-09): el primario LLEGA con el bote del sistema y un solo brillo, una vez (`movimiento.js` pone
   `--llega`); el icono de la derecha avanza 3px al pasar. `overflow:hidden` recorta el brillo al botón. */
.pj-btn{position:relative;overflow:hidden}
.pj-btn__derecha{display:inline-flex;transition:transform var(--dur-base) var(--ease-spring)}
.pj-btn:not(:disabled):hover .pj-btn__derecha{transform:translateX(3px)}
.pj-btn--llega{animation:pj-bote var(--dur-bote) linear both}
.pj-btn--llega::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,0.55) 50%,transparent 70%) no-repeat;background-size:60% 100%;animation:pj-sheen 900ms var(--ease-in-out) 520ms 1 both}

/* ── Link (`core/Link.jsx`) ──────────────────────────────────────────────────────────────────────────────── */
.pj-link{display:inline-flex;position:relative;align-items:center;padding:0;gap:7px;border:none;background:none;text-align:left;font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:1.4;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer;opacity:1;transition:var(--t-hover)}
.pj-link:hover{text-decoration-line:none;text-decoration-thickness:1.5px}
.pj-link--bloque{display:flex;justify-content:space-between;width:100%;min-height:44px;padding:10px 2px}
.pj-link--sm{font-size:var(--fs-caption)}
.pj-link--lg{font-size:var(--fs-body)}
.pj-link--default,.pj-link--default:hover{color:var(--text-link)}
.pj-link--quiet,.pj-link--quiet:hover{color:var(--text-muted)}
.pj-link--strong,.pj-link--strong:hover{color:var(--text-strong)}
.pj-link--inverse,.pj-link--inverse:hover{color:var(--snow)}
.pj-link--default:not(:disabled):is(:hover,:focus){color:var(--text-link-hover)}
.pj-link--quiet:not(:disabled):is(:hover,:focus){color:var(--text-strong)}
.pj-link--strong:not(:disabled):is(:hover,:focus){color:var(--text-link-hover)}
.pj-link--subrayado,.pj-link--subrayado:hover{text-decoration-line:underline}
/* ⚠️ El subrayado que aparece AL PASAR lleva el grosor `auto`, no el 1,5 px (medido en el diseño vivo): al encenderse
   el `hover`, React reescribe `style.textDecoration = "underline"`, ese atajo devuelve el grosor a su valor inicial y
   React no vuelve a poner el 1,5 px porque «no cambió». Lo que se ve en el diseño es `auto`, y es lo que se copia. */
.pj-link--al-pasar:not(:disabled):is(:hover,:focus){text-decoration-line:underline;text-decoration-thickness:auto}
.pj-link:disabled{cursor:not-allowed;opacity:0.42}
.pj-link__toque{position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.pj-link__cuerpo{display:inline-flex;align-items:center;gap:7px;min-width:0}
.pj-link__icono{display:inline-flex;flex-shrink:0}
.pj-link__texto{min-width:0}
.pj-link__cola{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;transform:none;transition:var(--t-hover)}
.pj-link--flecha:not(:disabled):is(:hover,:focus) .pj-link__cola{transform:translateX(3px)}

/* ── OfferTag (`marketing/OfferTag.jsx`): una sola cara, también sobre tinta ────────────────────────────────── */
.pj-oferta{display:inline-block;max-width:min(100%, 52ch);padding:5px 12px;border-radius:var(--r-md);background:var(--flare-100);color:var(--flare-700);font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:1.35;text-wrap:pretty}
/* Con su icono (el regalo, `#888`): delante del texto y a la altura de su primera línea. */
.pj-oferta--icono{display:inline-flex;align-items:flex-start;gap:6px;padding-left:10px}
.pj-oferta--icono svg{flex:0 0 auto;margin-top:1px}

/* ── RatingSummary (`marketing/RatingSummary.jsx`) ───────────────────────────────────────────────────────── */
.pj-rs{display:flex;align-items:center;gap:12px;min-width:0}
.pj-rs__nota{font-family:var(--font-display);font-weight:var(--fw-black);font-size:1.875rem;line-height:1;letter-spacing:var(--tracking-display);color:var(--text-strong);font-variant-numeric:tabular-nums}
.pj-rs--lg .pj-rs__nota{font-size:2.5rem}
.pj-rs--sm .pj-rs__nota{font-size:1.375rem}
/* La cifra y su estrella de Google, juntas (27-09): la estrella a ~0,8 de la cifra, centrada en ella. */
.pj-rs__cifra{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.pj-rs__estrella{display:block;flex-shrink:0;width:24px;height:24px}
.pj-rs--lg .pj-rs__estrella{width:30px;height:30px}
.pj-rs--sm .pj-rs__estrella{width:18px;height:18px}
.pj-rs__lado{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-rs__fuente{display:flex;align-items:center;gap:6px;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-strong)}
.pj-rs--sm .pj-rs__fuente{font-size:var(--fs-caption)}
.pj-rs__cuenta{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted)}
.pj-rs--ink .pj-rs__nota,.pj-rs--ink .pj-rs__fuente,.pj-rs--ink .pj-rs__cuenta{color:var(--snow)}
/* La «G» oficial de Google (26-09, el owner): el fichero de Google, sin recolorear. Sobre tinta, en su círculo blanco
   —la «G» es de colores y su azul se pierde sobre el azul de la tinta—; sobre claro, sola. */
.pj-rs__g{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pj-rs__g img{display:block;width:20px;height:20px}
.pj-rs--lg .pj-rs__g img{width:24px;height:24px}
.pj-rs--sm .pj-rs__g img{width:16px;height:16px}
.pj-rs--ink .pj-rs__g{width:32px;height:32px;border-radius:50%;background:#fff}
.pj-rs--ink.pj-rs--sm .pj-rs__g{width:26px;height:26px}

/* ── Sticker (`core/Sticker.jsx`, zip (6), 29-09): la pegatina, en dos sitios —las garantías y «Lo que incluye»— ─────
   El color por posición: cian, lima, magenta, amarillo. Su tamaño, `--pj-sticker` (40 por defecto); el icono, la mitad. */
.pj-sticker{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--pj-sticker, 40px);height:var(--pj-sticker, 40px);border-radius:var(--r-pill);background:var(--aqua-500);color:var(--ink-900)}
.pj-sticker svg{width:calc(var(--pj-sticker, 40px) / 2);height:calc(var(--pj-sticker, 40px) / 2)}
.pj-sticker--1{background:var(--volt-500)}
.pj-sticker--2{background:var(--berry-500)}
.pj-sticker--3{background:var(--sun-500)}

/* ── ReassuranceBand (`marketing/ReassuranceBand.jsx`, 26-09): la franja de garantías, en barra o en lista ────
   Una barra de ~80px en tarjeta blanca: tres pegatinas de 40px con los colores del logotipo, el titular a 16px en la
   voz de la cabecera y el detalle a 18rem como mucho. `data-layout` lo pone `entradas.js` midiendo la copia oculta
   (`.pj-rb__medida`); antes, y sin JavaScript, la suposición por el ancho de la ventana (desde 1100 px, barra).
   ▶ Sin sitio, LISTA ORDENADA en la misma tarjeta (zip (6), variante 4a; Z6d·2): un renglón por garantía con su filete,
   la pegatina de 36 arriba —a la altura del titular—, el titular llenando la línea (`pretty`; con `balance` partía en
   renglones cortos) y el detalle debajo; 14px arriba y abajo de cada renglón y 16 a los lados. Es la base; la barra, la
   variante (y la forma de la copia que se mide). */
.pj-rb{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;list-style:none;margin:0;padding:2px var(--space-4);background:var(--surface-card);border:var(--border-card);box-shadow:var(--shadow-xs);border-radius:var(--r-xl)}
.pj-rb__item{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;align-items:start;min-width:0;padding:14px 0;--pj-sticker:36px}
.pj-rb__item+.pj-rb__item{border-top:1px solid var(--border-subtle)}
.pj-rb__textos{display:grid;gap:3px;min-width:0}
.pj-rb__titular{font-family:var(--font-display);font-weight:800;font-size:1rem;line-height:1.22;letter-spacing:var(--tracking-heading);font-variation-settings:"wdth" 104;color:var(--text-strong);text-wrap:pretty}
.pj-rb__detalle{font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.45;color:var(--text-body);text-wrap:pretty}
.pj-rb[data-layout="row"]{flex-direction:row;align-items:center;justify-content:space-evenly;gap:16px;padding:var(--space-5)}
.pj-rb[data-layout="row"] .pj-rb__item,.pj-rb__medida .pj-rb__item{display:flex;align-items:center;gap:10px;padding:0;border-top:0;flex:none;--pj-sticker:40px}
.pj-rb[data-layout="row"] .pj-rb__textos,.pj-rb__medida .pj-rb__textos{gap:2px}
.pj-rb[data-layout="row"] .pj-rb__titular,.pj-rb__medida .pj-rb__titular{line-height:1.2;white-space:nowrap;text-wrap:balance}
.pj-rb[data-layout="row"] .pj-rb__detalle,.pj-rb__medida .pj-rb__detalle{line-height:1.4;max-width:18rem}
@media (min-width:1100px){
  .pj-rb:not([data-layout]){flex-direction:row;align-items:center;justify-content:space-evenly;gap:16px;padding:var(--space-5)}
  .pj-rb:not([data-layout]) .pj-rb__item{display:flex;align-items:center;gap:10px;padding:0;border-top:0;flex:none;--pj-sticker:40px}
  .pj-rb:not([data-layout]) .pj-rb__textos{gap:2px}
  .pj-rb:not([data-layout]) .pj-rb__titular{line-height:1.2;white-space:nowrap;text-wrap:balance}
  .pj-rb:not([data-layout]) .pj-rb__detalle{line-height:1.4;max-width:18rem}
}
.pj-rb__medida{position:absolute;top:0;left:0;display:flex;gap:16px;width:max-content;visibility:hidden;pointer-events:none}

/* ── VideoHero (`marketing/VideoHero.jsx`) ─────────────────────────────────────────────────────────────────
   Un solo DOM para sus dos formas. El diseño mide la TARJETA (`ResizeObserver`, < 720 px apila): aquí, el
   envoltorio es el contenedor que se consulta, y cada propiedad que cambia de una forma a otra vive SOLO en su
   bloque. LA FIRMA (zip (6), Z6d·1: logo · filete · la nota corta de Google) va UNA vez, en el medio: sobre la foto, el
   medio es la tarjeta entera; apilada, la franja de arriba. Su logo mide `--pj-firma-logo` (48, 44 compacta, 40 apilada). */
.pj-vh-caja{container:pj-vh / inline-size}
.pj-vh{position:relative;overflow:hidden;background:var(--ink-900);color:var(--snow);isolation:isolate}
/* La primera pantalla (zip del 27-09): las dos sondas con las que `cabecera.js` lee `100svh`, el margen, `--hero-screen` y
   `--fold-gap` en píxeles; lo cedido bajo la tarjeta (`.pj-vh-sigue`, en claro); y `hidden`, que manda sobre la clase. */
.pj-vh__sonda{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}
.pj-vh-caja [hidden]{display:none !important}
.pj-vh-sigue{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5);padding:var(--space-4) 4px 0;justify-content:flex-start}
/* La foto, SIN `will-change` (T7; el owner, 04-10: «al bajar y volver a subir, las esquinas cuadradas»): con él iba en
   su propia capa SIEMPRE y el radio de la tarjeta dejaba de recortarla —medido con `scripts/sonda-esquinas.mjs` del
   producto: con él, Cumpleaños sacaba una esquina cuadrada en 3 de 4 pasadas; sin él, las 40 esquinas de las cuatro
   cabeceras redondas en 4 de 4, también a media bajada con la foto ya movida—. No hace falta: al bajar,
   `movimiento.js` la mueve con `translate3d`, que ya la sube a su capa mientras se mueve, y arriba la suelta. */
.pj-vh__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* iOS (L5 del owner del 05-10, staging en un iPhone: «salía un botón de play en el vídeo y no cargaba al momento»): cuando no
   deja que un vídeo arranque solo —«bajo consumo», o aún sin datos con la red lenta— pinta SU botón de «play» encima. Sin
   controles a la vista no lo queremos nunca: se queda el póster, y `movimiento.js` lo vuelve a intentar al poder y al primer
   toque. En la cabecera y en los vídeos de sección (`.pj-mf__img`). */
video.pj-vh__foto::-webkit-media-controls,video.pj-vh__foto::-webkit-media-controls-start-playback-button,
video.pj-mf__img::-webkit-media-controls,video.pj-mf__img::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.pj-vh__velo{position:absolute;inset:0;z-index:1}
/* La firma: sin caja, encima de todo (el cuerpo, transparente, la cubre sobre la foto y su enlace tiene que tocarse). La nota
   nunca parte: antes cede el logo. El filete, de la tinta. */
.pj-vh__firma{position:absolute;z-index:3;display:flex;align-items:center;gap:var(--space-4);min-width:0}
.pj-vh__firma-logo{display:block;flex-shrink:0;height:var(--pj-firma-logo, 48px);width:auto;filter:drop-shadow(0 4px 12px rgba(9,46,74,0.35))}
/* El logotipo que lleva a Inicio (04-10): el enlace ocupa lo que el logotipo, y su foco se ve sobre el vídeo. */
.pj-vh__firma-enlace{display:block;flex-shrink:0;border-radius:var(--r-sm)}
.pj-vh__firma-enlace:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.pj-vh__firma-filete{flex-shrink:0;width:1px;align-self:stretch;margin:6px 0;background:var(--border-inverse)}
.pj-vh__firma .pj-rs{flex-shrink:0;white-space:nowrap}
.pj-vh__velo-firma{display:none}
.pj-vh__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-display-l);font-weight:var(--fw-black);line-height:var(--lh-display);letter-spacing:var(--tracking-display);font-variation-settings:"wdth" 108;color:var(--snow);text-wrap:balance}
@container pj-vh (width >= 720px){
  .pj-vh{display:flex;align-items:flex-end;min-height:var(--pj-vh-alto, var(--hero-screen));border-radius:var(--r-2xl)}
  .pj-vh__medio{position:absolute;inset:0}
  .pj-vh__velo{background:var(--scrim-video)}
  .pj-vh--velo-alto .pj-vh__velo{background:var(--scrim-hero)}
  .pj-vh--velo-centro .pj-vh__velo{background:var(--scrim-hero-center)}
  /* LA FIRMA, arriba a la izquierda y alineada con el borde del texto (zip (6)); el texto le deja su sitio con el aire de
     arriba: nunca se montan. Sustituye al logo de 64 px en el flujo (`#821`). */
  .pj-vh{--pj-firma-logo:48px}
  .pj-vh__firma{top:var(--space-8);left:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)))}
  .pj-vh__cuerpo{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:var(--gutter) var(--gutter) var(--space-12);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;align-self:stretch;text-align:left;gap:var(--space-5)}
  .pj-vh--con-firma .pj-vh__cuerpo{padding-top:calc(var(--space-8) + var(--pj-firma-logo) + var(--space-6))}
  .pj-vh__titulo{max-width:16ch}
  .pj-vh__texto{margin:0;max-width:46ch;font:var(--type-lead);color:var(--snow)}
  .pj-vh__precio{display:contents}
  .pj-vh__acciones{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;margin-top:var(--space-2);justify-content:flex-start}
  .pj-vh__extra{display:contents}
  /* La línea de [Hoy] (T6a, la portada): entre el precio y el botón, que entonces pierde su margen (`ctaGap`). */
  .pj-vh__hoy .pj-tl{max-width:72ch}
  .pj-vh--con-hoy .pj-vh__acciones{margin-top:0}
  /* COMPACTA (la pone `cabecera.js` con menos de 780px de tarjeta: portátiles de 1280–1536): un paso de la escala abajo. */
  .pj-vh--compacta .pj-vh__cuerpo{padding:var(--space-8) var(--gutter);gap:var(--space-4)}
  .pj-vh--compacta{--pj-firma-logo:44px}
  .pj-vh--compacta .pj-vh__firma{top:var(--space-6)}
  .pj-vh--compacta.pj-vh--con-firma .pj-vh__cuerpo{padding-top:calc(var(--space-6) + var(--pj-firma-logo) + var(--space-5))}
  .pj-vh--compacta .pj-vh__titulo{font-size:var(--fs-display-m);max-width:20ch}
  .pj-vh--compacta .pj-vh__texto{max-width:58ch}
  /* Compacta, el botón sin sus 8px de encima (como con [Hoy]): medido el 27-09 a 1280×560, la portada sin [Hoy] se pasaba
     4,4px de `--hero-screen` con el logotipo ya al mínimo, y la tarjeta acababa a 11,5px del borde y no a 16. */
  .pj-vh--compacta .pj-vh__acciones{margin-top:0}
}
@container pj-vh (width < 720px){
  .pj-vh{border-radius:var(--r-xl)}
  /* ▶ El VÍDEO detrás de TODA la tarjeta, también apilada (el owner, 27-09: «quiero que se vean los vídeos del hero»).
     El diseño lo deja en la franja de arriba y el texto sobre tinta entera (`--scrim-hero-stack`, al 100 %); aquí la
     franja sigue ocupando su sitio (la mide `cabecera.js`) y queda limpia, pero el vídeo —y su velo— se miden contra la
     tarjeta (`.pj-vh__medio` estático: su `.pj-vh__foto` se sitúa en `.pj-vh`), y el texto va sobre un velo que sube al
     80 % y acaba en el 86 %, como el de escritorio (82–90 %). Blanco sobre el píxel más claro del vídeo con un 80 % de
     tinta: ~7:1, por encima de AA. */
  .pj-vh__medio{position:static;height:max(220px, min(30vh, 84vw))}
  .pj-vh__velo{background:linear-gradient(180deg, rgba(9, 46, 74, 0.42) 0, rgba(9, 46, 74, 0) 64px)}
  /* LA FIRMA apilada, sobre la foto y fuera del flujo (su tamaño no mueve el texto). Con nota, el velo corto
     (`--scrim-firma`) da AA a la nota en blanco sobre cualquier fotograma, y el logo cede de 40 hasta 28 px en las tarjetas
     más estrechas (320–345): 164 px son la nota y sus huecos, 0,377 la proporción del logotipo. */
  .pj-vh{--pj-firma-logo:40px}
  .pj-vh__firma{top:18px;left:20px;right:20px;gap:var(--space-3);container-type:inline-size}
  .pj-vh--con-nota .pj-vh__firma-logo{height:clamp(28px, calc((100cqw - 164px) * 0.377), var(--pj-firma-logo))}
  .pj-vh__velo-firma{display:block;position:absolute;top:0;left:0;right:0;height:128px;z-index:1;background:var(--scrim-firma);pointer-events:none}
  .pj-vh__cuerpo{position:relative;z-index:2;margin-top:-100px;padding:0 20px 24px;display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;text-align:left;background:linear-gradient(180deg, rgba(9, 46, 74, 0.45) 0, rgba(9, 46, 74, 0.8) 64px, rgba(9, 46, 74, 0.86) 100%)}
  /* La rampa empieza 80px ANTES del texto: el titular arranca sobre un 45 % de tinta, como en el diseño (su velo daba
     ~0,46 a esa altura), y no sobre el vídeo limpio. */
  .pj-vh__cuerpo::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:80px;background:linear-gradient(180deg, rgba(9, 46, 74, 0), rgba(9, 46, 74, 0.45));pointer-events:none}
  /* Apilada, el titular un paso abajo (zip del 27-09): a `--fs-display-l` sacaba la tarjeta de la primera pantalla. */
  .pj-vh__titulo{max-width:none;font-size:var(--fs-display-m)}
  .pj-vh__texto{margin:0;font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.5;color:var(--snow);text-wrap:pretty}
  .pj-vh__precio{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);width:100%;margin-top:var(--space-1)}
  .pj-vh__acciones{display:grid;gap:14px;width:100%;justify-items:start;margin-top:var(--space-2)}
  .pj-vh__acciones .pj-btn{display:flex;width:100%}
  .pj-vh__extra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;justify-content:flex-start}
  .pj-vh__hoy{margin-top:var(--space-1)}
  .pj-vh--con-hoy .pj-vh__acciones{margin-top:0}
}
/* EL EXPERIMENTO B3 de la isla (Z6c del producto; `VideoHero.jsx` del zip (6)): con `<html data-isla-variante="b3">` y la
   isla abajo (por debajo de 900 px), la cabecera va SIN su botón —su acción es el botón grande de la isla— y la fila de la
   acción, si se queda sin nada, tampoco va. El texto se queda DENTRO, bajo el titular (el owner, 06-10, `#971`: el zip (6)
   lo sacaba debajo de la tarjeta); `cabecera.js` mide la tarjeta tal como queda. */
@media (max-width: 899.98px){
  :root[data-isla-variante="b3"] .pj-vh__acciones [data-isla-cta]{display:none}
  :root[data-isla-variante="b3"] .pj-vh__acciones:not(:has(> :not([data-isla-cta]))){display:none}
}

/* ── BookingCTA (`marketing/BookingCTA.jsx`) ─────────────────────────────────────────────────────────────── */
.pj-bcta{display:flex;flex-direction:column;gap:12px;min-width:0;align-items:flex-start;text-align:left}
.pj-bcta--ancho{align-items:stretch}
.pj-bcta--centro{align-items:center;text-align:center}
.pj-bcta__pie{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.pj-bcta--centro .pj-bcta__pie{align-items:center}
.pj-bcta__desde{font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.pj-bcta--ink .pj-bcta__desde{color:var(--snow)}
.pj-bcta__nota{font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.5;color:var(--text-muted);max-width:44ch;text-wrap:pretty}
.pj-bcta--ink .pj-bcta__nota{color:var(--text-inverse-muted)}

/* ── CTABand (`marketing/CTABand.jsx`): el tono de tinta, centrado ───────────────────────────────────────── */
.pj-cta{background:var(--band-ink);color:var(--snow);border-radius:var(--r-2xl);padding:var(--space-12) var(--space-8)}
.pj-cta__caja{max-width:var(--container);margin:0 auto}
.pj-cta__fila{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--space-8);text-align:center;flex-wrap:wrap}
.pj-cta__texto{display:flex;flex-direction:column;gap:var(--space-3);max-width:44ch;align-items:center}
.pj-cta__plazo{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--r-pill);background:var(--volt-500);color:var(--ink-900);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold)}
.pj-cta__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-display-m);font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-variation-settings:"wdth" 106;color:var(--snow);text-wrap:balance}
.pj-cta__lead{margin:0;font:var(--type-lead);font-size:var(--fs-body);color:rgba(255,255,255,0.8)}
.pj-cta__prueba{margin-top:var(--space-2)}
.pj-cta__solo{display:flex;flex-direction:column;gap:10px;align-items:center}
.pj-cta__botones{display:flex;gap:12px;flex-wrap:wrap}
.pj-cta__nota{font-family:var(--font-ui);font-size:var(--fs-caption);color:rgba(255,255,255,0.8)}
.pj-cta__contacto{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,0.18);display:flex;flex-direction:column;gap:7px;font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:rgba(255,255,255,0.8);text-align:center;align-items:center}
/* La portada (T6a): las garantías plegadas bajo el botón; los planes como enlaces bajo un filete; y entonces el camino
   asistido, pegado a ellos y sin su filete. */
.pj-cta__garantias{max-width:46rem;margin:var(--space-5) auto 0}
.pj-cta__planes{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,0.18);display:flex;flex-direction:column;align-items:center;gap:4px}
.pj-cta__planes-pregunta{font-family:var(--font-ui);font-size:var(--fs-body-sm);color:rgba(255,255,255,0.8)}
.pj-cta__planes-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--space-6)}
.pj-cta__plan{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--snow);text-decoration:none;text-underline-offset:3px;white-space:nowrap}
.pj-cta__plan:hover{color:var(--snow);text-decoration:underline}
.pj-cta__plan b{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold)}
.pj-cta__plan-precio{font-family:var(--font-ui);font-size:var(--fs-body-sm);color:rgba(255,255,255,0.8)}
.pj-cta__plan-precio s{margin-right:5px}
.pj-cta__plan-flecha{display:inline-flex;transition:var(--t-hover)}
.pj-cta__plan:hover .pj-cta__plan-flecha{transform:translateX(2px)}
.pj-cta__contacto--pegado{margin-top:var(--space-5);padding-top:0;border-top:0}

/* ── OpeningHours (`content/OpeningHours.jsx`) ───────────────────────────────────────────────────────────── */
.pj-oh{display:grid}
.pj-oh__hoy{margin:0 0 14px;display:flex;align-items:flex-start;gap:12px;font-family:var(--font-ui);font-size:clamp(1.125rem, 1rem + 0.5vw, var(--fs-lead));font-weight:var(--fw-semibold);line-height:1.4;color:var(--text-strong);text-wrap:pretty}
/* Sin punto delante desde el zip (7) («Lo vivo, sin punto», 11-10): lo vivo lo dicen sus palabras, en su color. */
.pj-oh__vivo{display:block;color:var(--success-600)}
/* La línea de [Hoy] en PEQUEÑO (`today-line` `sm`, la cabecera de la portada, T6a): la parte viva en la misma línea. */
.pj-tl{margin:0;display:flex;align-items:flex-start;gap:10px;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-strong);text-wrap:pretty}
.pj-tl__vivo{color:var(--success-600)}
.pj-tl--ink{color:var(--snow)}
.pj-tl--ink .pj-tl__vivo{color:var(--volt-500)}
.pj-tl .pj-oh__hn{font-weight:var(--fw-medium)}
.pj-oh__lista{margin:0;display:grid}
.pj-oh__fila{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:12px 0;border-top:1px solid var(--border-subtle)}
.pj-oh__fila:last-child{border-bottom:1px solid var(--border-subtle)}
.pj-oh__dia{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.35;font-weight:var(--fw-regular);color:var(--text-body)}
.pj-oh__horas{margin:0 0 0 auto;white-space:nowrap;text-align:right;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.35;font-weight:var(--fw-regular);color:var(--text-body)}
.pj-oh__fila--hoy .pj-oh__dia{font-weight:var(--fw-semibold);color:var(--text-strong)}
.pj-oh__fila--hoy .pj-oh__horas,.pj-oh__fila--cerrada .pj-oh__horas{font-weight:var(--fw-semibold);color:var(--text-strong)}
.pj-oh__h{white-space:nowrap}
.pj-oh__hn{font-family:var(--font-mono);font-weight:var(--fw-regular)}
.pj-oh__hoy .pj-oh__hn,.pj-oh__fila--hoy .pj-oh__hn{font-weight:var(--fw-medium)}
.pj-oh__chapa{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--bg-brand-soft);color:var(--aqua-700);font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em}
.pj-oh__nota{margin:11px 0 0;font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.5;color:var(--text-muted)}
.pj-oh--ink .pj-oh__fila{border-top-color:rgba(255,255,255,0.16)}
.pj-oh--ink .pj-oh__fila:last-child{border-bottom-color:rgba(255,255,255,0.16)}
.pj-oh--ink .pj-oh__dia,.pj-oh--ink .pj-oh__horas,.pj-oh--ink .pj-oh__nota{color:var(--text-inverse-muted)}
.pj-oh--ink .pj-oh__hoy,.pj-oh--ink .pj-oh__fila--hoy .pj-oh__dia,.pj-oh--ink .pj-oh__fila--hoy .pj-oh__horas,.pj-oh--ink .pj-oh__fila--cerrada .pj-oh__horas{color:var(--snow)}
.pj-oh--ink .pj-oh__vivo{color:var(--volt-500)}
.pj-oh--ink .pj-oh__chapa{background:rgba(255,255,255,0.14);color:var(--snow)}

/* `edges: false` (zip (6), el pie): sin filete ni aire por fuera, para empezar en la línea de sus vecinos. */
.pj-oh--sin-filos .pj-oh__fila:first-child{padding-top:0;border-top:0}
.pj-oh--sin-filos .pj-oh__fila:last-child{padding-bottom:0;border-bottom:0}

/* ── SiteFooter (`navigation/SiteFooter.jsx`, rehecho en el zip (6); Z6f): dos zonas y un solo filete ──────────────────
   Se mide la TARJETA, no la ventana (el diseño, con su `ResizeObserver`): la caja de fuera es el contenedor —uno no puede
   consultarse a sí mismo—. Los cortes del diseño son de su ancho ÚTIL (la tarjeta sin su aire); aquí, pasados a ancho de
   tarjeta: el aire, 48 desde 900 px y 40 desde 600 (32 × 24 por debajo); la ficha, en tres desde 840 y en dos desde 742;
   la firma, en una fila desde 1076 y a media desde 720. Lo de abajo es el MÓVIL; cada corte añade lo suyo.
   El paso de 44 px entre renglones apilados: 44 − 21 (15 px × 1,4) = 23 y 44 − 18 (13 px × 1,4) = 26. */
.pj-pie-caja{container:pj-pie / inline-size}
.pj-pie{background:var(--bg-subtle);color:var(--text-body);box-shadow:var(--edge-subtle);border-radius:var(--r-2xl);padding:var(--space-8) var(--space-6)}
/* La ficha: rótulo · 12 · dato · 20 · acción, en cada bloque. El horario se estira (justifica día y franja). */
.pj-pie__ficha{display:flex;flex-direction:column;gap:var(--space-8)}
.pj-pie__ficha-lado{display:contents}
.pj-pie__bloque{display:flex;flex-direction:column;align-items:flex-start;flex:0 0 auto;min-width:0}
.pj-pie__bloque--horario{align-items:stretch}
/* Los cortes del diseño se midieron con SU dirección; la de verdad puede ser más larga: si en fila no cabe, encoge «dónde»
   (su texto parte renglón) y no se sale el contacto. El horario y el teléfono no se parten. */
.pj-pie__bloque--donde{flex-shrink:1}
.pj-pie__rotulo{margin:0;font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--text-muted)}
.pj-pie__direccion{margin-top:var(--space-3);font-style:normal;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body)}
.pj-pie__direccion span{display:block}
.pj-pie__apunte{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:var(--lh-body);font-weight:var(--fw-semibold);color:var(--text-strong)}
.pj-pie__horario{margin-top:var(--space-3);max-width:26rem}
.pj-pie__telefono{margin-top:var(--space-3);font-family:var(--font-display);font-size:var(--fs-lead);font-weight:var(--fw-bold);line-height:1.15;letter-spacing:var(--tracking-heading);white-space:nowrap}
.pj-pie__accion{margin-top:var(--space-5);white-space:nowrap}
.pj-pie__dato{margin-top:var(--space-3);white-space:nowrap}
.pj-pie__filete{height:var(--bw-hair);background:var(--border-subtle);margin:var(--space-8) 0}
/* La firma, en el móvil: el logotipo, las páginas y la letra pequeña en dos columnas, y el copyright al final. */
.pj-pie__firma{display:flex;flex-direction:column}
.pj-pie__logo{display:inline-flex;align-self:flex-start;justify-self:start}
.pj-pie__logo img{display:block;width:auto;height:40px}
.pj-pie__firma > * + .pj-pie__nav{margin-top:var(--space-5)}
.pj-pie__firma > * + .pj-pie__letra{margin-top:var(--space-8)}
.pj-pie__firma > * + .pj-pie__copyright{margin-top:26px}
.pj-pie__nav{min-width:0}
.pj-pie__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:23px var(--space-4)}
.pj-pie__lista--peque{gap:26px var(--space-4)}
.pj-pie__lista li{min-width:0}
.pj-pie__letra{display:grid;gap:26px}
.pj-pie__lado{display:contents}
.pj-pie__pago,.pj-pie__idioma,.pj-pie__copyright{margin:0;font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.4;color:var(--text-muted)}
.pj-pie__pago,.pj-pie__idioma{display:inline-flex;align-items:center;justify-self:start;gap:7px;white-space:nowrap}
/* El idioma ELEGIBLE (`#888` del producto): un desplegable de enlaces que abre hacia ARRIBA (es lo último de la página);
   el toque, de 44 px; abierto, la flecha gira. Sin JavaScript también funciona (`<details>`). */
.pj-pie__idioma-menu{position:relative;justify-self:start}
.pj-pie__idioma-menu > summary{list-style:none;cursor:pointer;min-height:44px;color:var(--text-body)}
.pj-pie__idioma-menu > summary::-webkit-details-marker{display:none}
.pj-pie__idioma-menu > summary:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px;border-radius:var(--r-sm)}
.pj-pie__idioma-menu > summary svg:last-child{transition:transform var(--dur-base) var(--ease-out)}
.pj-pie__idioma-menu:not([open]) > summary svg:last-child{transform:rotate(180deg)}
.pj-pie__idiomas{position:absolute;bottom:calc(100% + 4px);left:0;z-index:5;margin:0;padding:6px;list-style:none;display:grid;gap:2px;min-width:168px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-md)}
.pj-pie__idiomas a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong);text-decoration:none}
.pj-pie__idiomas a:hover,.pj-pie__idiomas a:focus-visible{background:var(--bg-subtle)}
.pj-pie__idiomas a[aria-current]{color:var(--text-muted)}
/* Volteado (`entradas.js`): sin sitio a la derecha de la tarjeta, se ancla por la derecha. */
.pj-pie__idiomas--derecha{left:auto;right:0}
/* Las formas de pago con sus logotipos oficiales (`#786`): discretas, sin chapa, a la misma altura ÓPTICA (un logotipo
   ancho y los círculos de Mastercard se ven iguales con alturas distintas; las del producto, `isla/ui/marcas.js`). Tal
   cual: son marcas ajenas, sin opacidad ni filtros. */
.pj-pie__marcas{display:flex;flex-wrap:wrap;align-items:center;justify-self:start;gap:8px 16px;margin:0;padding:0;list-style:none}
.pj-pie__marca{display:block;width:auto;height:14px}
.pj-pie__marca--bizum{height:15px}
.pj-pie__marca--visa{height:12px}
.pj-pie__marca--mastercard{height:20px}
@container pj-pie (width >= 600px){
  .pj-pie{padding:var(--space-10)}
  .pj-pie__filete{margin:var(--space-10) 0}
}
/* A media anchura: el logotipo con el copyright y las páginas debajo; en fila, sin partir un enlace. */
@container pj-pie (width >= 720px){
  .pj-pie__firma{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:"logo copy" "nav nav" "letra letra";align-items:center;gap:var(--space-6) var(--space-10)}
  .pj-pie__firma > :is(.pj-pie__nav, .pj-pie__letra, .pj-pie__copyright){margin-top:0}
  .pj-pie__logo{grid-area:logo}
  .pj-pie__logo img{height:44px}
  .pj-pie__nav{grid-area:nav}
  .pj-pie__copyright{grid-area:copy;justify-self:end;white-space:nowrap}
  .pj-pie__lista{display:flex;flex-wrap:wrap;align-items:center;gap:23px var(--space-6)}
  .pj-pie__lista--peque{gap:26px var(--space-5)}
  .pj-pie__lista .pj-link{white-space:nowrap}
  .pj-pie__letra{grid-area:letra;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px var(--space-8)}
  .pj-pie__lado{display:flex;flex-wrap:wrap;align-items:center;gap:26px var(--space-5)}
}
/* La ficha en dos: dónde · el horario con el contacto debajo. */
@container pj-pie (width >= 742px){
  .pj-pie__ficha{flex-direction:row;justify-content:space-between;align-items:flex-start}
  .pj-pie__ficha-lado{display:flex;flex-direction:column;gap:var(--space-8);flex:0 0 auto}
  .pj-pie__horario{max-width:none}
}
@container pj-pie (width >= 840px){
  .pj-pie__ficha-lado{display:contents}
}
@container pj-pie (width >= 900px){
  .pj-pie{padding:var(--space-12)}
}
/* La firma en una fila: logotipo, páginas y copyright. */
@container pj-pie (width >= 1076px){
  .pj-pie__firma{grid-template-columns:auto minmax(0, 1fr) auto;grid-template-areas:"logo nav copy" "letra letra letra"}
  .pj-pie__firma--sin-logo{grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"nav copy" "letra letra"}
  .pj-pie__logo img{height:48px}
}

/* ── SectionHeader (`content/SectionHeader.jsx`) ─────────────────────────────────────────────────────────── */
.pj-sh{display:flex;align-items:flex-end;justify-content:space-between;flex-direction:row;gap:var(--space-6);margin-bottom:var(--space-10);text-align:left}
.pj-sh--centro{align-items:center;flex-direction:column;text-align:center}
.pj-sh__texto{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start;min-width:0}
.pj-sh--centro .pj-sh__texto{align-items:center}
.pj-sh__sobre{font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--ink-500)}
.pj-sh__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-display-m);font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-variation-settings:"wdth" 104;color:var(--text-strong);text-wrap:balance;max-width:18em}
.pj-sh__desc{margin:0;font:var(--type-lead);color:var(--text-body)}

/* ── Accordion (`content/Accordion.jsx`): abrir y cerrar, con `publico/instancia/js/entradas.js` ─────────── */
.pj-acc{display:grid;gap:10px}
.pj-acc--columnas{gap:10px var(--space-6);align-items:start}
.pj-acc__grupo{display:grid;gap:10px;align-content:start;min-width:0}
.pj-acc__fila{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:none;transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);overflow:hidden}
.pj-acc__fila[data-abierta]{border-color:var(--control-border-strong)}
.pj-acc__h{margin:0;font:inherit}
.pj-acc__boton{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:60px;padding:var(--space-4) var(--space-5);background:transparent;border:none;cursor:pointer;text-align:left;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:normal;color:var(--text-strong)}
.pj-acc__texto{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--space-4)}
.pj-acc__pregunta{flex:1 1 11rem;min-width:0}
.pj-acc__pista{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-body-sm);font-weight:400;white-space:nowrap;color:var(--text-body);transition:opacity var(--dur-fast) var(--ease-out)}
/* Abierta, la respuesta corta se apaga (ya está debajo, entera) y el texto entra 60ms después, cuando hay sitio (26-09). */
.pj-acc__fila[data-abierta] .pj-acc__pista{opacity:0}
.pj-acc__chev{transform:none;transition:transform var(--dur-slow) var(--ease-spring)}
.pj-acc__fila[data-abierta] .pj-acc__chev{transform:rotate(180deg)}
.pj-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.pj-acc__fila[data-abierta] .pj-acc__panel{grid-template-rows:1fr}
.pj-acc__recorte{min-height:0;overflow:hidden}
.pj-acc__respuesta{padding:0 var(--space-5) var(--space-5);padding-left:var(--space-5);font:var(--type-body);color:var(--text-body);max-width:72ch;opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.pj-acc__fila[data-abierta] .pj-acc__respuesta{opacity:1;transform:none;transition-delay:60ms}

/* ── MediaFrame (`content/MediaFrame.jsx`), en su forma de imagen ────────────────────────────────────────── */
.pj-mf{display:flex;flex-direction:column;gap:var(--space-3);margin:0}
.pj-mf__marco{position:relative;overflow:hidden;background:var(--ink-800);box-shadow:var(--shadow-md)}
.pj-mf__marco--plano{box-shadow:none}
.pj-mf__img{width:100%;height:100%;object-fit:cover}
.pj-mf__pie{font-family:var(--font-ui);font-size:var(--fs-caption);color:var(--text-muted)}
.pj-mf--fill{height:100%;min-height:0}
.pj-mf--fill>.pj-mf__marco{flex:1 1 auto;min-height:0}

/* ── ParkLocation (`content/ParkLocation.jsx`): el panel en cristal sobre el mapa o, estrecho, debajo en tinta ── */
.pj-pl-caja{container:pj-pl / inline-size}
.pj-pl{position:relative;display:block;gap:10px;min-width:0}
.pj-pl__panel{display:grid;gap:13px;padding:16px 18px;border-radius:var(--r-lg)}
@container pj-pl (width >= 560px){
  .pj-pl__panel{position:absolute;left:14px;right:14px;bottom:14px;background:var(--surface-glass-ink);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);border:1px solid var(--surface-glass-ink-border);box-shadow:var(--shadow-island)}
}
@container pj-pl (width < 560px){
  .pj-pl{display:grid}
  .pj-pl__panel{background:var(--ink-900)}
}
/* Sin mapa (material que aún no hay): solo el panel, en tinta, a cualquier ancho; nunca un hueco de «pendiente». */
.pj-pl--sin-mapa{display:grid}
.pj-pl--sin-mapa .pj-pl__panel{position:static;background:var(--ink-900);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.pj-pl__mapa{display:block;color:inherit;text-decoration:none;cursor:pointer}
/* El mapa de Google (owner, 25-09): el MISMO marco que la foto (`media-frame`: tinta, sombra, radio y proporción). */
.pj-pl__marco{position:relative;overflow:hidden;background:var(--ink-800);box-shadow:var(--shadow-md);border-radius:var(--r-xl);aspect-ratio:var(--ar-wide)}
.pj-pl__iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.pj-pl__marco[data-cargado] .pj-pl__iframe{display:block}
.pj-pl__marco[data-cargado] .pj-pl__consent{display:none}
/* Sin consentimiento de «mapas»: el hueco, con lo que es y su botón; arriba, fuera del sitio del panel. */
.pj-pl__consent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px 24px;text-align:center;color:var(--snow)}
.pj-pl__consent > *{flex-shrink:0}
.pj-pl__consent-titulo{margin:2px 0 0;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--snow)}
.pj-pl__consent-nota{margin:0 0 6px;max-width:52ch;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-inverse-muted);text-wrap:pretty}
/* Con el panel encima (≥ 560 px), el hueco usa lo que queda por encima de él. */
@container pj-pl (width >= 560px){.pj-pl__consent{justify-content:flex-start;padding-top:22px;padding-bottom:0}}
.pj-pl__direccion{margin:0;font-style:normal;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.4;color:var(--snow);text-wrap:pretty}
.pj-pl__fila{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pj-pl__parking{display:inline-flex;align-items:flex-start;gap:7px;min-height:32px;box-sizing:border-box;padding:6px 12px 6px 11px;border-radius:16px;background:rgba(255,255,255,0.14);color:var(--snow);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:1.35;text-wrap:pretty}
.pj-pl__parking > span{flex-shrink:0;margin-top:2.5px}

/* ── Pieza 6 (`paginas/entradas/pieza-6.jsx`: su `<style>` inyectado, tal cual) ────────────────────────────── */
.pj-donde{display:grid;gap:var(--space-8);scroll-margin-top:92px}
.pj-donde__cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-10);align-items:start}
.pj-donde__cols>*{min-width:0}
.pj-donde__info{display:grid;gap:var(--space-6)}
.pj-donde__cafe{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--font-ui);font-size:var(--fs-body);line-height:1.45;color:var(--text-body);text-wrap:pretty}
.pj-donde__cafe>span:first-child{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--bg-brand-soft);color:var(--aqua-700)}
.pj-donde__cafe b{font-weight:var(--fw-bold);color:var(--text-strong)}
.pj-donde__caja{display:grid;gap:var(--space-5);align-content:start;padding:var(--pad-card-lg);background:var(--surface-card);border:var(--border-card);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.pj-donde__sobre{font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--ink-500)}
@media (max-width:880px){.pj-donde__cols{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}}
@media (max-width:640px){.pj-donde__caja{padding:var(--space-5)}}

/* ── ReviewPanel (`marketing/ReviewPanel.jsx`) con sus voces: las opiniones que el parque publica en la página ──── */
.pj-rp-caja{container:pj-rp / inline-size}
.pj-rp__voces{display:grid;grid-template-columns:repeat(var(--pj-rp-cols, 3), minmax(0,1fr));gap:var(--space-5);align-items:stretch}
.pj-rp__voz{display:flex;min-width:0}
/* Con una reseña abierta («Ver más»), la fila deja de estirar: crece solo esa, y las demás guardan la altura común
   que `entradas.js` les fija antes de abrir. */
.pj-rp__voces--abierta{align-items:start}
.pj-rp__voz>.pj-rc{flex:1}
/* El gris suave va SIEMPRE con su filo (`--edge-subtle`, zip (6), Z6d·4): solo da 1,04:1 con el blanco y al sol desaparece. */
.pj-rp{display:grid;gap:var(--space-8);min-width:0;padding:var(--space-10);background:var(--bg-subtle);box-shadow:var(--edge-subtle);border-radius:var(--r-2xl)}
.pj-rp__cabeza{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:center}
.pj-rp__lado{min-width:0}
.pj-rp__titulo{margin:0 0 8px;font:var(--type-h3);font-size:1.375rem;color:var(--text-strong);text-wrap:balance}
.pj-rp__texto{margin:0;max-width:46ch;font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty}
.pj-rp__nota{display:grid;gap:9px;justify-items:start;padding-left:var(--space-8);border-left:1px solid var(--border-subtle)}
/* El logotipo de Google, la insignia de la nota (26-09): el fichero de Google, a 24px de alto y su ancho en proporción. */
.pj-rp__google{display:block;height:24px;width:auto}
@container pj-rp (width < 820px){
  .pj-rp{gap:var(--space-6);padding:var(--space-6)}
  .pj-rp__cabeza{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .pj-rp__nota{padding-left:0;border-left:none}
  /* Estrecho, las voces en una fila que se desliza, con la siguiente asomando (el 84 % del diseño). */
  .pj-rp__voces{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--space-4);margin:0 calc(var(--space-6) * -1);padding:0 var(--space-6) 4px;scrollbar-width:none}
  .pj-rp__voz{flex:0 0 84%;scroll-snap-align:start}
}

/* ── ReviewCard (`marketing/ReviewCard.jsx`, tamaño `sm`): la reseña de una persona concreta ─────────────────── */
.pj-rc{display:flex;flex-direction:column;gap:11px;margin:0;padding:var(--space-5);background:var(--surface-card);border:var(--border-card);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);color:var(--text-body)}
.pj-rc__quien{display:flex;align-items:center;gap:11px;min-width:0}
/* La «G» de Google en la esquina de la tarjeta, solo en las copiadas de la ficha (26-09): de dónde es esta reseña. */
.pj-rc__g{display:block;flex-shrink:0;width:18px;height:18px;margin-left:auto;align-self:flex-start}
.pj-rc__cara{width:34px;height:34px;flex-shrink:0;border-radius:50%;object-fit:cover}
.pj-rc__cara--inicial{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-muted);font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-caption);color:var(--ink-900)}
.pj-rc__nombre-fecha{display:flex;flex-direction:column;min-width:0}
.pj-rc__nombre{font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);color:var(--text-strong)}
.pj-rc__fecha{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted)}
.pj-rc__estrellas{display:flex;gap:2px}
.pj-rc__texto{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty}
/* El texto, a 5 líneas (el owner, 26-09): la clase la pone `entradas.js` solo si sobra, y «Ver más» la quita. */
.pj-rc__cuerpo{display:grid;gap:4px;justify-items:start}
.pj-rc__texto--recorte{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.pj-rc__mas[hidden]{display:none}
.pj-rc__fotos{display:flex;flex-wrap:wrap;gap:6px}
.pj-rc__foto{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;line-height:0;cursor:zoom-in}
.pj-rc__foto img{width:58px;height:58px;object-fit:cover;display:block;border-radius:var(--r-sm);transition:transform var(--dur-base) var(--ease-out)}
.pj-rc__foto:is(:hover,:focus-visible) img{transform:scale(1.06)}
.pj-rc__mas-fotos{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(9,46,74,0.55);color:var(--snow);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);line-height:1}
.pj-rc__enlace{margin-top:auto;padding-top:2px}

/* ── El visor de las fotos de una reseña (`photo-viewer`): el lenguaje del de las atracciones ─────────────────── */
.pj-fv{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding:var(--space-6);background:rgba(6,28,46,0.94);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);animation:pj-fade-in var(--dur-base) var(--ease-out) both}
.pj-fv[hidden],.pj-fv__lado[hidden]{display:none}
.pj-fv__escena{position:relative;margin:0;min-width:0;display:flex;justify-content:center}
.pj-fv__foto{display:block;max-width:min(86vw, 1100px);max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);background:var(--ink-900)}
.pj-fv__cerrar{position:absolute;top:12px;right:12px}
.pj-fv__pie{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:40px 16px 14px;border-radius:0 0 var(--r-xl) var(--r-xl);background:linear-gradient(0deg, rgba(9,46,74,0.85), rgba(9,46,74,0));color:var(--snow);font-family:var(--font-ui);font-size:var(--fs-body-sm);pointer-events:none}
.pj-fv__autor{font-weight:var(--fw-bold)}
@media (max-width: 640px){
  .pj-fv{padding:0}
  /* Con el dedo se pasa deslizando, como en el de las atracciones. Doble clase: `.pj-cv__redondo` va después. */
  .pj-fv .pj-fv__lado{display:none}
  .pj-fv__foto{max-width:100vw;max-height:100dvh;border-radius:0}
  .pj-fv__pie{border-radius:0}
}

/* ── ProofList (`marketing/ProofList.jsx`): la lista de cuidados y, si hay, su foto ────────────────────────── */
.pj-prl{list-style:none;margin:0;padding:0;display:grid;align-content:start;min-width:0}
.pj-prl__item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;align-items:start;padding:20px 0;border-top:1px solid var(--border-subtle)}
.pj-prl__item--primero{padding:4px 0 20px;border-top:none}
.pj-prl__item--tras-premio{border-top:none}
/* El premio, en LIMA (el owner, 03-10, «Premio: Lima»): con el fondo suave en cian, el cian del premio se confundía con él. */
.pj-prl__item--premio{margin-top:10px;padding:var(--space-6);border-radius:var(--r-xl);background:var(--volt-100);border-top:none}
.pj-prl__item--premio.pj-prl__item--primero{margin-top:0}
.pj-prl__circulo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--bg-brand-soft);color:var(--aqua-700)}
.pj-prl__item--premio .pj-prl__circulo{background:var(--snow)}
.pj-prl__cuerpo{display:grid;gap:6px;min-width:0;padding-top:8px}
.pj-prl__item--premio .pj-prl__cuerpo{padding-top:4px}
.pj-prl__titulo{margin:0;font-family:var(--font-display);font-size:1.25rem;font-weight:var(--fw-black);line-height:1.15;letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-prl__item--premio .pj-prl__titulo{font-size:1.625rem}
.pj-prl__texto{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body);max-width:52ch;text-wrap:pretty}
.pj-prl__item--premio .pj-prl__texto{font-size:var(--fs-body);color:var(--text-strong)}
/* La prueba: cada dato en su chapa (`ProofChip`, zip (6), Z6d·3), que bajan de fila si no caben; o la página que se lee. */
.pj-prl__pruebas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.pj-prl__pruebas--datos{margin-top:6px}
/* ── ProofChip (`marketing/ProofChip.jsx`, zip (6)): la chapa de `Tag` —gris suave con su filo, 36px, píldora—; la nota en
   tinta de texto. Si la nota baja de renglón, el radio de 20 la deja en rectángulo redondeado y no en óvalo. */
.pj-pc{display:inline-flex;flex-wrap:wrap;align-items:baseline;align-content:center;column-gap:8px;row-gap:2px;min-height:36px;max-width:100%;box-sizing:border-box;padding:7px 14px;border-radius:var(--r-lg);background:var(--bg-subtle);box-shadow:var(--edge-subtle)}
.pj-pc__dato{font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);line-height:1.35;font-variant-numeric:tabular-nums;color:var(--text-strong);white-space:nowrap}
.pj-pc__dato.pj-num{font-family:var(--font-mono)}
.pj-pc__nota{min-width:0;font-family:var(--font-mono);font-size:var(--fs-caption);line-height:1.35;color:var(--text-body)}
.pj-prl-caja{container:pj-prl / inline-size}
.pj-prl-media{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-12);align-items:stretch;min-width:0}
@container pj-prl (width < 760px){
  .pj-prl-media{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .pj-prl-media .pj-mf__marco{aspect-ratio:16 / 9}
}
@container pj-prl (width >= 760px){
  .pj-prl-media .pj-mf{height:100%;min-height:320px}
  .pj-prl-media .pj-mf__marco{aspect-ratio:auto;flex:1 1 auto;min-height:0}
}

/* ── ClipTile (`content/ClipTile.jsx`), en su forma de foto: la tarjeta se levanta al pasar ────────────────── */
.pj-ct{margin:0;min-width:0}
.pj-ct__marco{position:relative;aspect-ratio:var(--ar-story);overflow:hidden;border-radius:var(--r-lg);background:var(--ink-800);box-shadow:var(--shadow-sm);transform:none;transition:var(--t-card)}
.pj-ct__marco:hover{box-shadow:var(--shadow-lg);transform:translateY(var(--lift-card))}
.pj-ct__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-ct__abrir{position:absolute;inset:0;width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}
/* El «play» de un plano CON vídeo: el círculo de cristal del diseño, que crece un poco al pasar. Sin vídeo no se pinta. */
.pj-ct__play{position:absolute;left:50%;top:46%;transform:translate(-50%, -50%);display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,0.22);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);border:1px solid rgba(255,255,255,0.4);color:var(--snow);transition:transform var(--dur-base) var(--ease-out)}
.pj-ct__play>*{margin-left:3px}
.pj-ct__marco:hover .pj-ct__play{transform:translate(-50%, -50%) scale(1.06)}
.pj-ct__pie{display:grid;gap:4px;margin-top:12px}
.pj-ct__nombre{font-family:var(--font-display);font-weight:var(--fw-black);font-size:1.125rem;line-height:1.15;letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-ct__linea{font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-body);text-wrap:pretty}
/* Sin línea (la portada): el nombre dentro, sobre un velo solo abajo (el plano se ve limpio), y la zona en su píldora. */
.pj-ct__velo{position:absolute;inset:0;background:linear-gradient(180deg, rgba(9, 46, 74, 0) 45%, rgba(9, 46, 74, 0.82) 100%);pointer-events:none}
.pj-ct__zona{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--snow);color:var(--ink-900);font-family:var(--font-ui);font-size:var(--fs-caption);font-weight:var(--fw-black);pointer-events:none}
.pj-ct__pie--dentro{position:absolute;left:12px;right:12px;bottom:12px;margin:0;pointer-events:none}
.pj-ct__pie--dentro .pj-ct__nombre{display:block;font-size:1.0625rem;color:var(--snow)}

/* ── ClipList (`content/ClipList.jsx`), en su forma de foto: la fila se sombrea al pasar ──────────────────── */
.pj-cl{display:grid;gap:4px var(--space-6);list-style:none;margin:0;padding:0}
.pj-cl__item{min-width:0}
.pj-cl__boton{display:flex;align-items:center;gap:14px;width:100%;min-height:88px;padding:8px;border:none;border-radius:var(--r-lg);background:transparent;text-align:left;cursor:pointer;transition:var(--t-hover)}
.pj-cl__boton:hover{background:var(--bg-subtle)}
.pj-cl__mini{position:relative;flex-shrink:0;width:54px;aspect-ratio:3 / 4;overflow:hidden;border-radius:var(--r-md);background:var(--ink-800)}
.pj-cl__mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-cl__play{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.45);color:var(--snow);transition:transform var(--dur-base) var(--ease-out)}
.pj-cl__play>*{margin-left:2px}
.pj-cl__boton:hover .pj-cl__play{transform:translate(-50%, -50%) scale(1.08)}
.pj-cl__texto{display:grid;gap:3px;min-width:0}
.pj-cl__nombre{font-family:var(--font-display);font-weight:var(--fw-black);font-size:1.0625rem;line-height:1.15;letter-spacing:var(--tracking-heading);color:var(--text-strong)}
.pj-cl__linea{font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-body);text-wrap:pretty}

/* ── ClipViewer (`content/ClipViewer.jsx`): el esqueleto oculto que abre `entradas.js` ──────────────────────
   Por debajo de 640 px de VENTANA, a pantalla entera y sin flechas: el diseño lo decide con `matchMedia`, no midiendo
   el contenedor, y por eso aquí es `@media`. */
.pj-cv{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;gap:var(--space-6);background:rgba(6,28,46,0.94);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);animation:pj-fade-in var(--dur-base) var(--ease-out) both}
.pj-cv[hidden]{display:none}
.pj-cv__redondo{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,0.28);background:rgba(9,46,74,0.5);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);color:var(--snow);cursor:pointer}
.pj-cv__escena{position:relative;overflow:hidden;background:var(--ink-900);aspect-ratio:9 / 16;height:min(90vh, 860px);width:auto;border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.pj-cv__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-cv__foto[hidden],.pj-cv__video[hidden],.pj-cv__pausa[hidden]{display:none}
.pj-cv__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer}
.pj-cv__pausa{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.22);border:1px solid rgba(255,255,255,0.4);color:var(--snow);pointer-events:none}
.pj-cv__pausa>*{margin-left:3px}
.pj-cv__arriba{position:absolute;left:0;right:0;top:0;padding:14px 14px 28px;display:grid;gap:12px;background:linear-gradient(180deg, rgba(9,46,74,0.6), rgba(9,46,74,0))}
.pj-cv__progreso{display:flex;gap:4px}
.pj-cv__marca{flex:1;height:14px;padding:5px 0;border:none;background:transparent;cursor:pointer}
.pj-cv__marca>span{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,0.32)}
.pj-cv__marca--vista>span{background:var(--snow)}
.pj-cv__fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pj-cv__abajo{position:absolute;left:0;right:0;bottom:0;padding:64px 18px 18px;display:grid;gap:14px;background:linear-gradient(0deg, rgba(9,46,74,0.9) 30%, rgba(9,46,74,0))}
.pj-cv__nombre{font-family:var(--font-display);font-weight:var(--fw-black);font-size:1.5rem;line-height:1.1;letter-spacing:var(--tracking-heading);color:var(--snow);text-wrap:balance}
.pj-cv__linea{margin-top:-6px;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.45;color:var(--snow);text-wrap:pretty}
.pj-cv__nota{margin-top:-4px;text-align:center;font-family:var(--font-ui);font-size:var(--fs-caption);color:rgba(255,255,255,0.84)}
@media (max-width:640px){
  .pj-cv__lado{display:none}
  .pj-cv__escena{aspect-ratio:auto;height:100dvh;width:100vw;border-radius:0;box-shadow:none}
  .pj-cv__arriba{padding:max(12px, env(safe-area-inset-top)) 12px 28px}
  .pj-cv__abajo{padding:56px 16px max(16px, env(safe-area-inset-bottom))}
}

/* ── RateTable (`marketing/RateTable.jsx`) ───────────────────────────────────────────────────────────────── */
.pj-rt{display:grid;gap:14px;justify-items:start;min-width:0;width:100%}
.pj-rt__tabla{width:100%;border-collapse:collapse;table-layout:fixed}
.pj-rt__cabeza{padding:0 14px 10px 0;text-align:left;vertical-align:bottom;font:var(--type-overline);color:var(--text-muted)}
.pj-rt--md .pj-rt__cabeza{padding:0 12px 10px 0}
.pj-rt__col{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.pj-rt__punto{display:inline-block;width:7px;height:7px;margin-right:8px;vertical-align:0.1em;border-radius:var(--r-pill);background:var(--sun-500)}
.pj-rt__hoy{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--volt-500);color:var(--ink-900);font-family:var(--font-ui);font-size:var(--fs-caption);font-weight:var(--fw-bold);line-height:1;white-space:nowrap}
.pj-rt__fila{border-top:1px solid var(--border-subtle)}
.pj-rt__fila:last-child{border-bottom:1px solid var(--border-subtle)}
.pj-rt__celda{padding:14px 14px 14px 0;text-align:left;vertical-align:top}
.pj-rt--md .pj-rt__celda{padding:12px 12px 12px 0}
.pj-rt__duracion{font-weight:normal}
.pj-rt__rotulo{display:block;font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.3;color:var(--text-strong)}
.pj-rt__nota{display:block;margin-top:3px;font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.4;color:var(--text-muted);text-wrap:pretty}
.pj-rt__precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.pj-rt__cifra{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(1.5rem, 1.1rem + 1vw, 1.875rem);line-height:1;letter-spacing:var(--tracking-display);font-variation-settings:"wdth" 104;color:var(--text-strong);white-space:nowrap}
.pj-rt--md .pj-rt__cifra{font-size:1.375rem}
.pj-rt__antes{font-family:var(--font-mono);font-size:var(--fs-body-sm);color:var(--text-muted);white-space:nowrap}
.pj-rt--md .pj-rt__antes{font-size:var(--fs-caption)}
.pj-rt__sin{font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.4;color:var(--text-muted);text-wrap:pretty}
.pj-rt__especial{margin:0;display:flex;align-items:flex-start;gap:9px;max-width:62ch;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.pj-rt__lado{display:inline-flex;align-items:center;height:1.5em;flex-shrink:0}
.pj-rt__marca{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:var(--r-pill);background:var(--sun-500)}
/* Lo elegido en la calculadora (`active` del diseño; T6c·6 de Colegios): la fila de su tramo en gris y, con día, su celda
   marcada. Lo pone la calculadora del producto (`data-jw-activo`); la escalera de otra duración, `hidden`. */
.pj-rt[hidden]{display:none}
.pj-rt__fila[data-jw-tramo]{transition:var(--t-hover)}
.pj-rt__fila[data-jw-activo]{background:var(--bg-subtle)}
.pj-rt__fila[data-jw-activo] .pj-rt__duracion{padding-left:14px}
.pj-rt--md .pj-rt__fila[data-jw-activo] .pj-rt__duracion{padding-left:12px}
.pj-rt__celda[data-jw-activo] .pj-rt__precio{width:fit-content;margin:-4px 0 -4px -10px;padding:4px 10px;border-radius:var(--r-sm);background:var(--bg-brand-soft);box-shadow:inset 0 0 0 1.5px var(--aqua-500)}

/* ── Las páginas de APOYO (T6d, Visítanos): lo que el diseño añadió a sus piezas ─────────────────────────────────────── */
/* AnswerRow (`content/AnswerRow.jsx`): el titular a la izquierda y el detalle a la derecha; por su propio ancho, hasta
   880 px uno debajo de otro. */
.pj-ar{container:pj-ar / inline-size;scroll-margin-top:92px;min-width:0}
.pj-ar__rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start}
@container pj-ar (width > 880px){.pj-ar__rejilla{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8) var(--space-16)}}
.pj-ar__cabeza{min-width:0}
.pj-ar__cuerpo{display:grid;gap:var(--space-8);min-width:0}
.pj-ar__textos{display:grid;gap:var(--space-4);max-width:60ch}
.pj-ar__p{margin:0;font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty}
/* RuleGrid y RuleCard (`content/RuleGrid.jsx`, `RuleCard.jsx`): N columnas o una, por su propio ancho —el chip encima
   mientras cada tarjeta mide de 330 a 450 px; al lado, desde 450 o en una columna—. */
.pj-rg{container:pj-rg / inline-size;display:grid;gap:var(--space-8);scroll-margin-top:92px;min-width:0}
.pj-rg__rejilla{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);align-items:stretch;max-width:var(--container-narrow);min-width:0}
@container pj-rg (width >= 680px){.pj-rg--2 .pj-rg__rejilla{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.pj-rg--2 .pj-rgc{flex-direction:column}}
@container pj-rg (width >= 920px){.pj-rg--2 .pj-rgc{flex-direction:row}}
@container pj-rg (width >= 1030px){.pj-rg--3 .pj-rg__rejilla{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.pj-rg--3 .pj-rgc{flex-direction:column}}
@container pj-rg (width >= 1390px){.pj-rg--3 .pj-rgc{flex-direction:row}}
.pj-rgc{position:relative;overflow:hidden;display:flex;flex-direction:row;gap:var(--space-4);padding:var(--pad-card);background:var(--surface-card);border:var(--border-card);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.pj-rgc--must{--rgc-color:var(--ink-900);--rgc-suave:var(--ink-100)}
.pj-rgc--safety{--rgc-color:var(--aqua-700);--rgc-suave:var(--aqua-100)}
.pj-rgc--forbidden{--rgc-color:var(--danger-600);--rgc-suave:var(--danger-100);padding:calc(var(--pad-card) + 4px) var(--pad-card) var(--pad-card)}
.pj-rgc--info{--rgc-color:var(--flare-700);--rgc-suave:var(--flare-100)}
.pj-rgc__raya{position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(135deg,var(--danger-500) 0 9px,var(--ink-900) 9px 18px)}
.pj-rgc__chip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-md);background:var(--rgc-suave);color:var(--rgc-color)}
.pj-rgc__cuerpo{display:flex;flex-direction:column;gap:6px;min-width:0}
.pj-rgc__cabeza{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pj-rgc__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);letter-spacing:var(--tracking-heading);color:var(--text-strong)}
.pj-rgc__nivel{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--rgc-suave);color:var(--rgc-color);font-family:var(--font-ui);font-size:var(--fs-overline);font-weight:var(--fw-black);letter-spacing:0.04em}
.pj-rgc__texto{margin:0;font:var(--type-body);font-size:var(--fs-body-sm);color:var(--text-body);text-wrap:pretty}
.pj-rgc__oferta{display:block;margin-bottom:8px}
/* El dato que se busca, en negrita, dentro de un texto en partes (`components/partes.php`). */
.pj-partes__b{font-weight:var(--fw-bold);color:var(--text-strong)}
/* OpeningHours `lg` (donde el horario es la respuesta), su nota de la tarifa especial y [Fechas especiales]. */
.pj-oh--lg .pj-oh__fila{padding:16px 0}
.pj-oh--lg .pj-oh__dia{font-size:clamp(1rem, 0.94rem + 0.3vw, 1.125rem)}
.pj-oh--lg .pj-oh__horas{font-size:clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem)}
.pj-oh--lg .pj-oh__chapa{height:22px;font-size:12px}
.pj-oh__especial{margin:14px 0 0;display:flex;align-items:flex-start;gap:9px;max-width:62ch;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.pj-oh__lado{display:inline-flex;align-items:center;height:1.5em;flex-shrink:0}
.pj-oh__marca{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:var(--r-pill);background:var(--sun-500)}
.pj-oh__fechas{display:grid;gap:8px;margin-top:20px}
.pj-oh--lg .pj-oh__fechas{margin-top:28px}
.pj-oh__fechas-titulo{margin:0;font:var(--type-overline);letter-spacing:var(--tracking-overline);color:var(--ink-500)}
/* [Hoy] grande en TINTA (la cabecera de Visítanos): lo vivo, lima sobre tinta. */
.pj-oh__hoy--ink{color:var(--snow)}
.pj-oh__hoy--ink .pj-oh__vivo{color:var(--volt-500)}
.pj-vh__hoy-grande .pj-oh__hoy{margin:0}
@container pj-vh (width >= 720px){.pj-vh__hoy-grande{margin-top:-4px}.pj-vh__hoy-grande .pj-oh__hoy{max-width:72ch}}
/* «Cómo llegar» de la cabecera: apilada, a su ancho (no a todo el ancho, como el primario): el diseño no lo lleva `full`. */
@container pj-vh (width < 720px){.pj-vh__acciones .pj-vh__ruta{display:inline-flex;width:auto}}
/* ParkLocation `lg` (donde la ubicación es la respuesta): el mapa más apaisado y una tarjeta de cristal abajo a la
   izquierda, como mucho el 38 %; por debajo de 960 px, el panel baja, en tinta, con el botón a todo el ancho. */
.pj-pl--lg .pj-pl__marco{border-radius:var(--r-2xl)}
.pj-pl--lg .pj-pl__panel{gap:16px;padding:22px 24px}
.pj-pl--lg .pj-pl__direccion{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);letter-spacing:var(--tracking-heading);line-height:1.3}
.pj-pl__aparcar{margin:0;display:flex;align-items:flex-start;gap:12px;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.45;color:var(--snow);text-wrap:pretty}
.pj-pl__aparcar-icono{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.14);color:var(--aqua-400)}
.pj-pl__aparcar-texto{padding-top:5px}
.pj-pl__boton{display:flex;margin-top:2px}
@container pj-pl (width >= 960px){
  .pj-pl--lg .pj-pl__marco{aspect-ratio:var(--ar-hero)}
  .pj-pl--lg .pj-pl__panel{left:24px;right:auto;bottom:24px;width:min(400px, 38%);box-sizing:border-box}
}
@container pj-pl (width < 960px){
  .pj-pl--lg{display:grid}
  .pj-pl--lg .pj-pl__panel{position:static;background:var(--ink-900);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pj-pl--lg .pj-pl__boton .pj-btn{width:100%}
  .pj-pl--lg .pj-pl__consent{justify-content:center;padding:20px 24px}
}
/* CTABand sin primario (`primary = false`): el camino asistido sube al sitio del botón, sin filete. */
.pj-cta__contacto--arriba{margin-top:0;padding-top:0;border-top:0}

/* ── NORMAS (T6e): lo que el diseño añadió a sus piezas ─────────────────────────────────────────────────────────────── */
/* RuleGrid con GRUPOS por momento, sobre gris (`tone="subtle"`, con el titular dentro): su aire por ancho —12/24/40 px de
   lado y 32/40/48 de alto—; dos columnas desde 740 px (el chip encima) y el chip al lado desde 980; por debajo, una (los
   cortes del diseño con ese aire, `RG_ROW` 450 y `RG_STACK` 330). Un grupo a lo ancho, siempre con el chip al lado. */
.pj-rg__caja{display:grid;gap:var(--space-8);min-width:0}
.pj-rg--suave .pj-rg__caja{padding:32px 12px;background:var(--bg-subtle);box-shadow:var(--edge-subtle);border-radius:var(--r-2xl)}
@container pj-rg (width >= 708px){.pj-rg--suave .pj-rg__caja{padding:40px 24px}}
@container pj-rg (width >= 1020px){.pj-rg--suave .pj-rg__caja{padding:48px 40px}}
.pj-rg__grupos{display:grid;gap:var(--space-10);min-width:0}
@container pj-rg (width >= 740px){.pj-rg__grupos--dos{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) 32px;align-items:start}.pj-rg__grupos--dos .pj-rg__columna .pj-rgc{flex-direction:column}}
@container pj-rg (width >= 980px){.pj-rg__grupos--dos .pj-rg__columna .pj-rgc{flex-direction:row}}
.pj-rg__columna{display:grid;gap:var(--space-10);align-content:start;min-width:0}
.pj-rg__ancho{grid-column:1 / -1;min-width:0}
.pj-rg__grupo{display:grid;gap:var(--space-4);align-content:start;min-width:0}
.pj-rg__grupo-titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-rg__lista{display:grid;gap:var(--space-4)}
/* WaiverSheet (`feedback/WaiverSheet.jsx` sobre `Modal`, `md`): un `<dialog>` nativo con la cara del modal del diseño. */
@keyframes pj-pop{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}
.pj-ws__abrir,.pj-se-enlace{justify-self:start}
.pj-ws{width:min(560px, calc(100% - 2 * var(--space-6)));max-width:560px;max-height:calc(100% - 2 * var(--space-6));padding:0;border:0;border-radius:var(--r-xl);background:var(--surface-card);box-shadow:var(--shadow-lg);color:var(--text-body)}
.pj-ws::backdrop{background:rgba(9,46,74,0.55);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil)}
.pj-ws[open]{animation:pj-pop var(--dur-base) var(--ease-spring) both}
@media (prefers-reduced-motion: reduce){.pj-ws[open]{animation:none}}
.pj-ws__caja{display:flex;flex-direction:column;max-height:inherit}
.pj-ws__cabeza{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}
.pj-ws__titulos{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pj-ws__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-black);letter-spacing:var(--tracking-heading);color:var(--text-strong)}
.pj-ws__version{margin:0;font:var(--type-body);font-size:var(--fs-body-sm);color:var(--text-muted)}
.pj-ws__x{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-muted);cursor:pointer}
.pj-ws__x:hover,.pj-ws__x:focus-visible{background:var(--bg-subtle);color:var(--text-strong)}
.pj-ws__texto{padding:0 var(--space-6);overflow:auto;font:var(--type-body);color:var(--text-body)}
.pj-ws__h{margin:var(--space-4) 0 var(--space-2);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--text-strong)}
.pj-ws__h:first-child{margin-top:0}
.pj-ws__p{margin:0 0 var(--space-3);font-size:var(--fs-body-sm);line-height:1.6;text-wrap:pretty}
.pj-ws__pie{display:flex;justify-content:flex-end;gap:10px;padding:var(--space-6);margin-top:var(--space-2)}

/* ── Documento: LAS LEGALES (T6h del producto, `#844`, del owner; sin mockup) ─────────────────────────────────────────
   Una página de texto sobria, con las piezas del sistema: el titular, cuándo cambió, el texto a la medida de lectura
   (`--container-narrow`) y sus apartados. Arriba deja el sitio de la isla, que en escritorio flota encima. */
.pj-sec--doc{padding:clamp(96px,10vw,136px) 0 clamp(24px,4vw,48px)}
.pj-doc{max-width:var(--container-narrow)}
.pj-doc__cabeza{display:grid;gap:var(--space-3);margin-bottom:var(--space-8)}
.pj-doc__titulo{margin:0;font-family:var(--font-display);font-size:clamp(var(--fs-h2),5vw,var(--fs-h1));font-weight:var(--fw-black);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-doc__fecha{margin:0;font:var(--type-body);font-size:var(--fs-body-sm);color:var(--text-muted)}
.pj-doc__h{margin:var(--space-8) 0 var(--space-3);font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-doc__p{margin:0 0 var(--space-4);font:var(--type-body);line-height:1.65;color:var(--text-body);text-wrap:pretty}
/* El LISTADO de la política de cookies (`politica-de-cookies.md` del producto): una tarjeta por cookie, la tarjeta del
   sistema (la de `.pj-rb`: superficie, borde, sombra y radio). Sus datos, rótulo y valor en dos columnas; a lo estrecho,
   uno debajo de otro. El nombre de una cookie propia es largo y sin espacios: se parte por donde haga falta. */
.pj-doc__cookies{display:grid;gap:var(--space-3);margin:0 0 var(--space-8);padding:0;list-style:none}
.pj-doc__cookie{display:grid;gap:var(--space-3);padding:var(--space-5);background:var(--surface-card);border:var(--border-card);box-shadow:var(--shadow-xs);border-radius:var(--r-xl)}
.pj-doc__cookie-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-3)}
.pj-doc__cookie-nombre{margin:0;min-width:0;font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1.35;color:var(--text-strong);overflow-wrap:anywhere}
.pj-doc__cookie-cat{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);background:var(--bg-subtle);font-family:var(--font-ui);font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--text-body)}
.pj-doc__cookie-datos{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:var(--space-2) var(--space-4);margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5}
.pj-doc__cookie-datos dt{color:var(--text-muted)}
.pj-doc__cookie-datos dd{margin:0;color:var(--text-body)}
@media (max-width:520px){.pj-doc__cookie-datos{grid-template-columns:minmax(0,1fr);gap:2px}.pj-doc__cookie-datos dd{margin-bottom:var(--space-2)}}

/* ── StepList (`content/StepList.jsx`), variante de camino ───────────────────────────────────────────────── */
.pj-sl{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.pj-sl__paso{display:flex;gap:16px;position:relative;padding-bottom:26px}
.pj-sl__paso--ultimo{padding-bottom:0}
.pj-sl__via{position:absolute;top:48px;bottom:0;left:24px;width:2px;transform:translateX(-50%);background:var(--ink-300);overflow:hidden}
/* El camino ligado al scroll (26-09, `movimiento.js`): el raíl se llena al leer y cada paso se enciende —con el pop— al
   llegar la línea; sin alcanzar, solo el aro. Sin JavaScript, todos encendidos y sin relleno (como antes). */
.pj-sl__relleno{display:none;position:absolute;inset:0;background:var(--ink-900);transform-origin:top center;transform:scaleY(0)}
.pj-sl--ligado .pj-sl__relleno{display:block}
.pj-sl--ligado .pj-sl__paso:not([data-on]) .pj-sl__num{box-sizing:border-box;background:var(--snow);border:2px solid var(--ink-300);color:var(--text-muted)}
.pj-sl--ligado .pj-sl__paso[data-on] .pj-sl__num{animation:pj-chip-pop 420ms var(--ease-spring) both}
.pj-sl__nodo{position:relative;flex-shrink:0;width:48px;height:48px;display:flex;justify-content:center}
.pj-sl__num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-pill);z-index:1;background:var(--ink-900);color:var(--snow);font-family:var(--font-display);font-size:1.375rem;font-weight:var(--fw-black);letter-spacing:var(--tracking-display)}
.pj-sl__texto{display:flex;flex-direction:column;gap:5px;min-width:0;padding-top:9px;padding-bottom:4px}
.pj-sl__paso--ultimo .pj-sl__texto{padding-bottom:0}
.pj-sl__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-bold);letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:pretty}
.pj-sl__detalle{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body);max-width:46ch;text-wrap:pretty}
.pj-sl__pista{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted)}

/* ── InfoCallout (`content/InfoCallout.jsx`): un tono, sus tokens `--notice-<tono>-*` ────────────────────────── */
.pj-ic{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5);background:var(--ic-bg);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--ic-borde)}
.pj-ic--info{--ic-bg:var(--notice-info-bg);--ic-borde:var(--notice-info-border);--ic-fg:var(--notice-info-fg)}
.pj-ic--warn{--ic-bg:var(--notice-warn-bg);--ic-borde:var(--notice-warn-border);--ic-fg:var(--notice-warn-fg)}
.pj-ic--danger{--ic-bg:var(--notice-danger-bg);--ic-borde:var(--notice-danger-border);--ic-fg:var(--notice-danger-fg);padding:calc(var(--space-5) + 4px) var(--space-5) var(--space-5)}
.pj-ic--success{--ic-bg:var(--notice-success-bg);--ic-borde:var(--notice-success-border);--ic-fg:var(--notice-success-fg)}
.pj-ic--neutral{--ic-bg:var(--notice-neutral-bg);--ic-borde:var(--notice-neutral-border);--ic-fg:var(--notice-neutral-fg)}
.pj-ic--sm{gap:10px;padding:12px 14px;border-radius:var(--r-md)}
.pj-ic__franja{position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(135deg,var(--danger-500) 0 9px,var(--ink-900) 9px 18px)}
.pj-ic__icono{color:var(--ic-fg);display:flex;flex:0 0 auto;margin-top:1px}
.pj-ic__cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.pj-ic__titulo{font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);line-height:1.35;color:var(--ic-fg)}
.pj-ic--sm .pj-ic__titulo{font-size:var(--fs-body-sm);color:var(--text-strong)}
.pj-ic__texto{font:var(--type-body);font-size:var(--fs-body-sm);line-height:1.5;color:var(--notice-text);text-wrap:pretty}

/* ── Pieza 3 (`paginas/entradas/pieza-3.jsx`: su `<style>` inyectado). Con la calculadora (T4d), la tabla va encima
   y la retícula lleva las preguntas (`main`), el total (`side`) y lo secundario (`more`); las preguntas y el total
   los pinta el PRODUCTO donde la pieza le deja sitio (`data-jw-calculadora`, `data-jw-calculadora-lado`) ── */
.pj-p3{display:grid;gap:var(--space-6);scroll-margin-top:92px}
.pj-p3__rejilla{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:34px;align-items:start;grid-template-areas:'main side' 'more side';row-gap:22px}
.pj-p3__rejilla--solo{grid-template-areas:'main side'}
.pj-p3__rejilla>*{min-width:0}
.pj-p3__precios{display:grid;gap:var(--space-8)}
.pj-p3>.pj-p3__precios{max-width:calc(100% - 434px)}
.pj-p3__como{display:grid;gap:var(--space-5);align-content:start}
.pj-p3__h3{margin:0;font:var(--type-h3);font-size:1.25rem;color:var(--text-strong)}
.pj-p3__regla{display:flex;align-items:flex-start;gap:16px;margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.pj-p3__regla>span:first-child{display:flex;justify-content:center;flex-shrink:0;width:48px;padding-top:1px;color:var(--aqua-600)}
.pj-p3__main,.pj-p3__more{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.pj-p3__main{grid-area:main}.pj-p3__more{grid-area:more}
.pj-p3__lado{grid-area:side;position:sticky;top:92px;display:grid;gap:16px}
/* «Te lo guardamos» abierto bajo el botón (N3c del producto, `#992`): la columna pegada pasaba del alto de la pantalla y su
   final no se podía ver. Mientras está abierto, se desplaza por dentro, y la tarjeta se trae a la vista entera. */
.pj-p3__lado:has(#jw-plan){max-height:calc(100vh - 108px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:980px){.pj-p3__rejilla{grid-template-columns:minmax(0,1fr);grid-template-areas:'main' 'side' 'more';row-gap:var(--space-8)}.pj-p3__rejilla--solo{grid-template-areas:'main' 'side'}.pj-p3__lado{position:static}.pj-p3>.pj-p3__precios{max-width:none}}
/* ── Pieza 4 (`paginas/entradas/pieza-4.jsx`: su `<style>` inyectado, tal cual) ────────────────────────────── */
.pj-zona{display:grid;gap:var(--space-8);scroll-margin-top:92px;container-type:inline-size}
.pj-zona__top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8) var(--space-5)}
.pj-zona__top>*{min-width:0}
@container (max-width:760px){.pj-zona__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) 12px}}

/* ── Pieza 5 (`paginas/entradas/pieza-5.jsx`) ────────────────────────────────────────────────────────────── */
.pj-tranquilidad{display:grid;gap:var(--space-10);scroll-margin-top:92px}

/* ── Pieza 7 (`paginas/entradas/pieza-7.jsx`) ────────────────────────────────────────────────────────────── */
.pj-dudas{display:grid;gap:var(--space-8);scroll-margin-top:92px}

/* ── Piezas 1 y 2 (`paginas/entradas/piezas-1-2.jsx`) ────────────────────────────────────────────────────── */
.pj-cabecera{display:grid;gap:var(--space-6)}

/* ── PriceTag (`marketing/PriceTag.jsx`; T6a, la portada) ────────────────────────────────────────────────── */
.pj-pt{display:flex;flex-direction:column;align-items:flex-start;gap:0;--pj-pt-num:1.75rem;--pj-pt-lado:var(--fs-body-sm);--pj-pt-fg:var(--text-strong);--pj-pt-suave:var(--text-muted)}
.pj-pt--con-oferta{gap:10px}
.pj-pt--apilada:not(.pj-pt--con-oferta){gap:6px}
.pj-pt--centro{align-items:center}
.pj-pt--sm{--pj-pt-num:1.25rem;--pj-pt-lado:var(--fs-caption)}
.pj-pt--lg{--pj-pt-num:2.5rem;--pj-pt-lado:var(--fs-body)}
.pj-pt--xl{--pj-pt-num:clamp(2.75rem, 5vw, 3.75rem);--pj-pt-lado:var(--fs-lead)}
.pj-pt--ink{--pj-pt-fg:var(--snow);--pj-pt-suave:var(--snow)}
.pj-pt__cifra{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.pj-pt--apilada .pj-pt__cifra{flex-wrap:nowrap;white-space:nowrap}
.pj-pt__pila{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pj-pt--centro .pj-pt__pila{align-items:center}
.pj-pt__lado{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--pj-pt-lado);color:var(--pj-pt-suave)}
.pj-pt__antes{font-family:var(--font-mono);font-size:var(--pj-pt-lado);color:var(--pj-pt-suave)}
.pj-pt__precio{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--pj-pt-num);line-height:1;letter-spacing:var(--tracking-display);color:var(--pj-pt-fg);font-variation-settings:"wdth" 104}
.pj-pt__unidad{font-family:var(--font-ui);font-weight:var(--fw-medium);font-size:var(--pj-pt-lado);color:var(--pj-pt-suave)}
.pj-pt__unidad--sola{line-height:1.2}

/* ── PlanDoor (`marketing/PlanDoor.jsx`; T6a, la portada): tarjeta; por debajo de 900px, fila ─────────────── */
.pj-pd{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;height:100%;box-sizing:border-box;padding:0;text-align:left;font:inherit;text-decoration:none;color:inherit;cursor:pointer;background:var(--surface-card);border:var(--border-card);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--t-card)}
/* Al pasar, la tarjeta se levanta y nada se subraya (el mockup): el `a:hover` general del sistema subrayaba y teñía todo
   el texto de dentro (el owner, 27-09). */
.pj-pd:hover{box-shadow:var(--shadow-lg);transform:translateY(var(--lift-card));text-decoration:none;color:inherit}
.pj-pd__media{position:relative;aspect-ratio:var(--ar-card);background:var(--ink-800);overflow:hidden}
.pj-pd__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.pj-pd:hover .pj-pd__foto{transform:scale(1.04)}
.pj-pd__hueco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;background:repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, rgba(255,255,255,0) 12px 24px), var(--ink-800);color:rgba(255,255,255,0.6);font-family:var(--font-mono);font-size:var(--fs-caption);line-height:1.5}
.pj-pd__tag{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:var(--r-pill);background:var(--ink-900);color:var(--snow);font-family:var(--font-ui);font-size:var(--fs-caption);font-weight:var(--fw-black);letter-spacing:0.01em;white-space:nowrap}
.pj-pd__flecha{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--snow);color:var(--ink-900);box-shadow:var(--shadow-sm);transition:var(--t-hover)}
.pj-pd__flecha>*{transition:var(--t-hover)}
.pj-pd:hover .pj-pd__flecha{background:var(--ink-900);color:var(--snow)}
.pj-pd:hover .pj-pd__flecha>*{transform:translateX(2px)}
.pj-pd__cuerpo{display:flex;flex-direction:column;gap:10px;padding:var(--pad-card);min-width:0}
.pj-pd__titulo{margin:0;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(1.1875rem, 1.75vw, var(--fs-h3));line-height:1.15;letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-pd__texto{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty}
.pj-pd__precio{margin-top:auto;padding-top:8px}
@media (max-width:899px){
    .pj-pd{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);grid-template-rows:none}
    .pj-pd__media{aspect-ratio:auto;min-height:100%}
    .pj-pd__tag{left:10px;top:10px;height:26px;padding:0 10px}
    .pj-pd__flecha{right:10px;bottom:10px;width:32px;height:32px}
    /* `<x-lucide>` envuelve el SVG en una `<span>` con su tamaño EN LÍNEA (la trampa de la T4 con el parking). */
    .pj-pd__flecha>span{width:16px !important;height:16px !important}
    .pj-pd__cuerpo{gap:7px;padding:15px 15px 15px 16px}
    .pj-pd__titulo{font-size:1.125rem}
    .pj-pd__precio{padding-top:4px}
    .pj-pd .pj-pt{--pj-pt-num:1.25rem;--pj-pt-lado:var(--fs-caption)}
}

/* ── ReassuranceStrip (`marketing/ReassuranceStrip.jsx`; T6a, la portada): las columnas, del componente ─────── */
.pj-rs2{display:grid;gap:18px 28px;list-style:none;margin:0;padding:0;background:transparent;justify-items:stretch}
.pj-rs2--centro{justify-items:center}
.pj-rs2--ink{padding:var(--space-6);background:var(--surface-card-ink);border-radius:var(--r-lg)}
.pj-rs2__item{display:flex;align-items:flex-start;gap:11px;min-width:0}
.pj-rs2__icono{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:calc(var(--fs-body-sm) * 1.45);color:var(--aqua-600)}
.pj-rs2--ink .pj-rs2__icono{color:var(--volt-500)}
.pj-rs2__texto{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-strong);text-wrap:pretty}
.pj-rs2__par{display:grid;gap:3px;min-width:0}
.pj-rs2__titulo{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-strong)}
.pj-rs2__detalle{font-family:var(--font-ui);font-weight:var(--fw-regular);font-size:var(--fs-caption);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.pj-rs2--ink .pj-rs2__texto,.pj-rs2--ink .pj-rs2__titulo{color:var(--snow)}
.pj-rs2--ink .pj-rs2__detalle{color:var(--text-inverse-muted)}
/* Plegable (el cierre de la portada): el titular es el `<summary>`, con su flecha, y el detalle se abre debajo. Sin
   fondo ni relleno propio: va dentro de la franja. El `::before` lleva la zona de toque a 44px sin mover nada, como el
   `span` del diseño. Un `<details>` no se lleva bien con `grid`: el hueco del detalle es su margen. */
.pj-rs2--plegable{padding:0;background:transparent;gap:12px 24px}
details.pj-rs2__par{display:block}
.pj-rs2__abrir{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;text-align:left;border-radius:4px}
.pj-rs2__abrir::-webkit-details-marker{display:none}
.pj-rs2__abrir::before{content:"";position:absolute;left:-32px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
.pj-rs2__abrir:focus-visible{outline:none;box-shadow:var(--ring)}
.pj-rs2__flecha{display:inline-flex;opacity:.72;transition:transform var(--dur-base) var(--ease-out)}
details[open]>.pj-rs2__abrir .pj-rs2__flecha{transform:rotate(180deg)}
details.pj-rs2__par>.pj-rs2__detalle{display:block;margin-top:4px;animation:pj-fade-in var(--dur-base) var(--ease-out) both}

/* ── PromoSplit (`marketing/PromoSplit.jsx`; T6a, piezas 4 y 5 de la portada): por debajo de 860px, una columna ── */
.pj-ps{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;gap:var(--space-12, 48px);padding:0;background:transparent;border-radius:0}
.pj-ps--reves{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.pj-ps--suave{padding:var(--space-8);background:var(--bg-subtle);box-shadow:var(--edge-subtle);border-radius:var(--r-2xl)}
.pj-ps__media{order:0;min-width:0;display:grid}
.pj-ps--reves .pj-ps__media{order:2}
.pj-ps__texto{order:1;display:grid;gap:var(--space-5);justify-items:start;align-content:center;min-width:0}
.pj-ps--suave:not(.pj-ps--reves) .pj-ps__texto{padding-right:var(--space-4)}
.pj-ps--suave.pj-ps--reves .pj-ps__texto{padding-left:var(--space-4)}
.pj-ps__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-display-m);font-weight:var(--fw-black);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-variation-settings:"wdth" 104;color:var(--text-strong);text-wrap:balance;max-width:16ch}
.pj-ps__lead{margin:0;font:var(--type-lead);color:var(--text-body);max-width:40ch;text-wrap:pretty}
.pj-ps__incluye{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px}
.pj-ps__incluye li{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.pj-ps__icono{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bg-brand-soft);color:var(--aqua-700);flex-shrink:0}
.pj-ps--suave .pj-ps__icono{background:var(--snow)}
.pj-ps__regalos{display:grid;gap:8px;justify-items:start}
.pj-ps__regalo{margin:0;display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 7px;border-radius:var(--r-pill);background:var(--volt-100);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);line-height:1.35;color:var(--ink-900);text-wrap:pretty}
.pj-ps__regalo-icono{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--volt-500);color:var(--ink-900);flex-shrink:0}
.pj-ps__precio{display:grid;gap:10px;justify-items:start}
.pj-ps__accion{margin-top:var(--space-1)}
@media (max-width:860px){
    .pj-ps,.pj-ps--reves{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
    .pj-ps--suave{padding:var(--space-5)}
    .pj-ps--reves .pj-ps__media{order:0}
    .pj-ps--suave .pj-ps__texto{padding-left:0;padding-right:0}
}

/* ── ZoneExplorer y sus pestañas (`marketing/ZoneExplorer.jsx`, `navigation/SegmentedTabs.jsx`; T6a) ─────────
   Estrecho o ancho, por el CONTENEDOR (740px, la medida del diseño). */
.pj-ze{display:grid;gap:var(--space-5);container-type:inline-size}
.pj-ze__marco-pestanas{justify-self:start;position:relative}
/* La copia oculta de la fila de pestañas (`#844` del producto): su ancho natural EN FILA, que mide `entradas.js`. Va dentro
   de una caja de tamaño CERO que la recorta: posicionada y suelta, su ancho contaba para el desplazamiento de la página
   aunque no se viera (medido: la página seguía saliéndose a 360). Dos clases para ganar a la regla estrecha de
   `.pj-ze__pestanas` (rejilla a lo ancho), que la estiraría. */
.pj-ze__medidor{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none}
.pj-ze__pestanas.pj-ze__medida{display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;width:max-content}
.pj-ze__pestanas{display:inline-grid;grid-auto-flow:column;grid-auto-columns:auto;gap:4px;padding:5px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:var(--r-pill)}
.pj-ze__pestana{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border:none;border-radius:var(--r-pill);background:transparent;color:var(--text-body);font-family:var(--font-ui);font-size:var(--fs-body);font-weight:var(--fw-bold);cursor:pointer;transition:var(--t-hover);box-shadow:none;white-space:nowrap}
.pj-ze__pestana[aria-selected="true"]{background:var(--ink-900);color:var(--snow);box-shadow:var(--shadow-sm)}
.pj-ze__pestana:focus-visible{outline:none;box-shadow:var(--ring)}
.pj-ze__pista{font-family:var(--font-mono);font-size:var(--fs-overline);opacity:0.66}
.pj-ze__panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch;background:var(--surface-card);border:var(--border-card);border-radius:var(--r-2xl);box-shadow:var(--shadow-xs);overflow:hidden;animation:pj-fade-in var(--dur-base) var(--ease-out) both}
.pj-ze__panel[hidden]{display:none}
.pj-ze__media{position:relative;display:grid;min-height:100%}
.pj-ze__media .pj-mf__marco{aspect-ratio:var(--ar-card)}
.pj-ze__ver{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 6px;border:1px solid var(--surface-glass-ink-border);border-radius:var(--r-pill);background:var(--surface-glass-ink);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil);color:var(--snow);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);cursor:pointer;box-shadow:var(--shadow-md);transition:var(--t-hover)}
.pj-ze__ver:hover{transform:translateY(-1px)}
.pj-ze__ver-icono{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--snow);color:var(--ink-900)}
.pj-ze__ver-icono>*{margin-left:2px}
.pj-ze__cuerpo{display:grid;gap:var(--space-5);align-content:start;padding:var(--space-8)}
.pj-ze__cabeza{display:grid;gap:8px}
.pj-ze__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-black);line-height:1.1;letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:balance}
.pj-ze__texto{margin:0;font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);max-width:46ch;text-wrap:pretty}
.pj-ze__atracciones{display:grid;gap:10px}
.pj-ze__cuenta{font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);color:var(--text-strong)}
.pj-ze__lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pj-ze__lista li{display:inline-flex;align-items:center;height:34px;padding:0 13px;border-radius:var(--r-pill);background:var(--bg-subtle);font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong);white-space:nowrap}
.pj-ze__pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--border-subtle);margin-top:auto}
@container (max-width:740px){
    .pj-ze__marco-pestanas{justify-self:stretch}
    .pj-ze__pestanas{display:grid;grid-auto-columns:1fr}
    /* ❗ Aquí, en estrecho: si las pestañas NO CABEN en su fila, la edad baja debajo del nombre en cada una (`#844` del
       producto, del owner, 29-09): «Kids 4–7 años · Jump desde 8 años» pide 348 px y a 360 hay 320. Lo decide `entradas.js`
       MIDIENDO la copia oculta de la fila (`data-layout`), como la franja de garantías: la anchura que hace falta cambia con
       el idioma, así que ninguna cifra fija acierta. Si caben, como siempre. */
    .pj-ze__pestanas[data-layout="apiladas"]{grid-auto-columns:minmax(0,1fr)}
    .pj-ze__pestanas[data-layout="apiladas"] .pj-ze__pestana{flex-direction:column;gap:2px;height:auto;min-height:52px;padding:7px 12px}
    .pj-ze__panel{grid-template-columns:minmax(0,1fr)}
    .pj-ze__media{min-height:0}
    .pj-ze__media .pj-mf__marco{aspect-ratio:var(--ar-wide)}
    .pj-ze__cuerpo{padding:var(--space-5)}
}

/* ── T6b, Cumpleaños: las piezas nuevas del sistema ─────────────────────────────────────────────────────────── */
/* El final del camino (`step-list` con `end`): su icono sobre lima, donde acaba. */
.pj-sl__paso--fin .pj-sl__num{background:var(--volt-500);color:var(--ink-900)}

/* MomentCard (`content/MomentCard.jsx`): sin movimiento al pasar (no se toca). */
.pj-mc{display:grid;gap:var(--space-4);align-content:start;min-width:0}
.pj-mc--lead{gap:var(--space-5)}
.pj-mc--fill{height:100%;grid-template-rows:1fr auto;align-content:stretch}
.pj-mc__texto{min-width:0}
.pj-mc__verbo{margin:0 0 7px;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(1.375rem, 2.1vw, 1.625rem);line-height:1.05;letter-spacing:var(--tracking-display);color:var(--text-strong);text-wrap:pretty}
.pj-mc--lead .pj-mc__verbo{font-size:clamp(1.75rem, 3.2vw, 2.375rem)}
.pj-mc__linea{margin:0;font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);max-width:34ch;text-wrap:pretty}
.pj-mc--lead .pj-mc__linea{font-size:var(--fs-lead);max-width:38ch}
/* Sin imagen (material que falta, `#761`·3): el momento en su tarjeta, sin marco vacío. */
.pj-mc--sin-imagen{padding:var(--space-6);background:var(--bg-subtle);border-radius:var(--r-xl)}

/* IncludedList (`content/IncludedList.jsx`, cara del zip (6), 6a: Z6e): lo principal con su pegatina grande, las cosas con
   la suya en una rejilla SIN huérfana y el regalo en su caja lima. Las columnas que valen para `n` cosas las pone el
   servidor (`--c2`, `--c3`, `--c4`); la que cabe, su ancho: 200 px por cosa y 22 de hueco (422, 644 y 866). */
.pj-il{container:pj-il / inline-size;display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.pj-il__titulo{margin:0;font:var(--type-h3);font-size:1.25rem;color:var(--text-strong)}
.pj-il__lead{display:flex;align-items:center;gap:14px;padding-bottom:var(--space-5);border-bottom:1px solid var(--border-subtle);--pj-sticker:48px}
.pj-il__lead-texto{display:flex;flex-direction:column;gap:5px;min-width:0}
.pj-il__lead-nombre{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.25rem;line-height:1.2;letter-spacing:var(--tracking-heading);color:var(--text-strong);text-wrap:pretty}
.pj-il__lead-nota{font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.pj-il__lista{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 22px;list-style:none;margin:0;padding:0}
@container pj-il (width >= 422px){.pj-il__lista--c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pj-il (width >= 644px){.pj-il__lista--c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container pj-il (width >= 866px){.pj-il__lista--c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pj-il__item{display:flex;align-items:center;gap:12px;min-width:0}
.pj-il__texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.pj-il__nombre{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-body);line-height:1.35;color:var(--text-strong);text-wrap:pretty}
.pj-il__nota{font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.45;color:var(--text-muted)}
.pj-il__regalo{display:flex;align-items:center;gap:12px;min-width:0;margin-top:6px;padding:14px 16px 14px 14px;background:var(--volt-100);border-radius:var(--r-lg)}
.pj-il__regalo-icono{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border-radius:var(--r-pill);background:var(--volt-500);color:var(--ink-900)}
.pj-il__regalo-nombre{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.45;color:var(--ink-900);text-wrap:pretty}
.pj-il__regalo-nota{font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.45;color:var(--text-body)}

/* AfterBookingPanel (`marketing/AfterBookingPanel.jsx`, cara del zip (6), 6a: Z6e): el titular sin icono, los caminos uno
   debajo de otro, los iconos en cian y la invitación a un toque. El relleno, por su ancho: lo mide la caja de fuera (un
   contenedor no se consulta a sí mismo); 602 = los 600 de ancho útil del diseño más el borde. */
.pj-abp-caja{container:pj-abp / inline-size;min-width:0}
.pj-abp{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5);background:var(--surface-card);border:var(--border-card);border-radius:var(--r-xl);min-width:0}
@container pj-abp (width >= 602px){.pj-abp{padding:var(--space-6) var(--space-8)}}
.pj-abp__cabeza{display:grid;gap:6px;min-width:0}
.pj-abp__titulo{margin:0;font:var(--type-h3);font-size:1.25rem;color:var(--text-strong);text-wrap:balance}
.pj-abp__intro{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;color:var(--text-body);max-width:62ch;text-wrap:pretty}
.pj-abp__bloques{display:grid;gap:var(--space-6);min-width:0}
.pj-abp__bloque{display:flex;flex-direction:column;gap:12px;min-width:0}
.pj-abp__bloque-cabeza{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pj-abp__bloque-titulo{font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:var(--fs-body);color:var(--text-strong)}
.pj-abp__chapa{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);background:var(--ink-100);color:var(--text-body);font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-caption)}
.pj-abp__puntos{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0;min-width:0}
.pj-abp__punto{display:flex;align-items:flex-start;gap:11px;min-width:0}
.pj-abp__punto-icono{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border-radius:var(--r-pill);background:var(--bg-brand-soft);color:var(--aqua-700)}
.pj-abp__punto-texto{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px}
/* La invitación, a un toque: su miniatura de WhatsApp y «Ver la invitación» (el patrón de la propuesta de Colegios, con
   su icono: se abre aquí, no fuera). */
.pj-abp__toque{display:flex;align-items:center;gap:14px;width:fit-content;max-width:100%;min-height:44px;margin:2px 0 0;padding:6px 14px 6px 6px;border:var(--border-card);border-radius:var(--r-lg);background:var(--snow);cursor:pointer;font:inherit;text-align:left;transition:var(--t-hover)}
.pj-abp__toque:hover{border-color:var(--border-strong)}
.pj-abp__toque:focus-visible{outline:none;box-shadow:var(--ring)}
.pj-abp__toque-mini{display:block;width:96px;flex-shrink:0}
.pj-abp__toque-texto{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);color:var(--text-link)}
.pj-abp__invitacion{max-width:400px;margin:0 auto}
.pj-abp__punto-nombre{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:1.45;color:var(--text-strong);text-wrap:pretty}
.pj-abp__punto-nota{font-family:var(--font-ui);font-size:var(--fs-caption);line-height:1.45;color:var(--text-muted);text-wrap:pretty}
.pj-abp__pie{display:flex;align-items:flex-start;gap:9px;margin:0;padding-top:var(--space-4);border-top:1px solid var(--border-subtle);font-family:var(--font-ui);font-size:var(--fs-body-sm);line-height:1.5;font-weight:var(--fw-semibold);color:var(--text-strong);text-wrap:pretty}
.pj-abp__pie-icono{display:inline-flex;flex-shrink:0;margin-top:2px;color:var(--aqua-700)}

/* Modal (`feedback/Modal.jsx`; `components/modal.blade.php`): la ventana centrada sobre el velo desenfocado, que entra con
   el muelle corto. Un `<dialog>` nativo: su `::backdrop` es el velo y el clic que cae fuera de la caja lo recibe el propio
   diálogo (sin relleno ni borde: la caja es él). La X, de 36 como el `IconButton sm` del diseño, toca a 44. */
.pj-modal{width:min(100% - 2 * var(--space-6), 560px);max-width:none;max-height:calc(100% - 2 * var(--space-6));margin:auto;padding:0;border:0;border-radius:var(--r-xl);background:var(--surface-card);box-shadow:var(--shadow-lg);color:var(--text-body);overflow:auto;overscroll-behavior:contain}
.pj-modal--sm{width:min(100% - 2 * var(--space-6), 420px)}
.pj-modal--lg{width:min(100% - 2 * var(--space-6), 760px)}
.pj-modal[open]{animation:pj-pop var(--dur-base) var(--ease-spring) both}
.pj-modal::backdrop{background:rgba(9,46,74,0.55);-webkit-backdrop-filter:var(--blur-veil);backdrop-filter:var(--blur-veil)}
.pj-modal__cabeza{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-6) var(--space-6) var(--space-4)}
.pj-modal__titulos{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pj-modal__titulo{margin:0;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-black);letter-spacing:var(--tracking-heading);color:var(--text-strong)}
.pj-modal__subtitulo{margin:0;font:var(--type-body);font-size:var(--fs-body-sm);color:var(--text-muted);text-wrap:pretty}
.pj-modal__cerrar{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-strong);cursor:pointer;transition:var(--t-hover)}
.pj-modal__cerrar::after{content:"";position:absolute;inset:-4px}
.pj-modal__cerrar:hover{transform:translateY(var(--lift-hover))}
.pj-modal__cerrar:focus-visible{outline:none;box-shadow:var(--ring)}
.pj-modal__cuerpo{padding:0 var(--space-6) var(--space-6);font:var(--type-body);color:var(--text-body)}

/* StepsPanel (`content/StepsPanel.jsx`): la acción al lado, apoyada abajo; bajo 860px de su ancho, debajo. */
.pj-sp-caja{container:pj-sp / inline-size;min-width:0}
.pj-sp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-items:end;min-width:0;padding:var(--space-8);background:var(--bg-subtle);box-shadow:var(--edge-subtle);border-radius:var(--r-xl)}
.pj-sp--con-accion{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.pj-sp__camino{min-width:0}
.pj-sp__titulo{margin:0 0 var(--space-6);font:var(--type-h3);font-size:var(--fs-h4);color:var(--text-strong)}
.pj-sp__accion{min-width:0;padding:var(--space-6);background:var(--snow);border:var(--border-card);border-radius:var(--r-lg)}
@container pj-sp (width < 860px){
    .pj-sp,.pj-sp--con-accion{grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding:var(--space-6)}
}

/* NextDays (`content/NextDays.jsx`): como las casillas de horas; una columna antes que cortar una fecha. */
.pj-nd{display:grid;gap:10px;min-width:0;container-type:inline-size}
.pj-nd__titulo{margin:0;font-family:var(--font-ui);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--text-strong)}
.pj-nd__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--pj-nd-cols, 2), minmax(0,1fr));gap:10px}
@container (width < 370px){.pj-nd__lista{grid-template-columns:minmax(0,1fr)}}
.pj-nd__dia{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:56px;padding:12px;box-sizing:border-box;background:var(--snow);border:1px solid var(--border-subtle);border-radius:var(--r-md);color:var(--text-strong);text-decoration:none;white-space:nowrap;transition:var(--t-card)}
.pj-nd__dia:hover,.pj-nd__dia:focus-visible{color:var(--text-strong);text-decoration:none;border-color:var(--ink-900);transform:translateY(var(--lift-hover));box-shadow:var(--shadow-sm)}
.pj-nd__fecha{display:inline-flex;align-items:center;gap:8px;min-width:0}
.pj-nd__fecha b{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-body);letter-spacing:var(--tracking-heading);font-variant-numeric:tabular-nums}
.pj-nd__punto{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--sun-500)}
.pj-nd__flecha{display:flex;flex-shrink:0;color:var(--ink-400);transition:var(--t-hover)}
.pj-nd__dia:hover .pj-nd__flecha,.pj-nd__dia:focus-visible .pj-nd__flecha{color:var(--ink-900);transform:translateX(2px)}

/* ── Entre páginas (T7; el owner, 04-10: «el hero sale primero sin background y sin texto, y al segundo se carga el
   background») ────────────────────────────────────────────────────────────────────────────────────────────────────
   Medido con `scripts/sonda-recarga.mjs` del producto, de la portada a Kids: Saltia funde la página que se va en
   `--dur-fast` y la que llega DESPUÉS (con `--dur-fast` de retraso) → entre las dos, fotogramas en BLANCO; y la foto, con
   su nombre de transición, viajaba 480 ms desde su puerta POR ENCIMA de la página nueva: sin tarjeta, sin esquinas y
   tapando el texto. Aquí, las dos páginas se funden A LA VEZ (ningún fotograma en blanco) y ninguna foto viaja (fuera su
   nombre de la puerta y de la cabecera). La isla se queda: su grupo (`isla`) no se toca. Saltia es generada: va aquí. */
::view-transition-old(root),::view-transition-new(root){animation-delay:0s;animation-duration:var(--dur-base)}