/* ═══════════════════════════════════════════════════════════════════
   DEMIN CONSCIENTE — Respirando Con-ciencia · Experiencias (PROTOTIPO 01)

   Capa ADITIVA sobre el sistema de la Biblioteca, no una identidad nueva:
     css/style-microclases.css         tokens, halo, reveal/breath, deck, .drawer
     css/style-microclases-portal.css  umbral, selector editorial, CTA pill, puerta
   Aquí vive solo lo que no existía: las 9 puertas con estado y la capa
   de microclase. La experiencia en sí (el player) vive en
   css/style-experiencia-motor.css.
   Tipografía (Design System V2, MASTER 2026-09-19): Bricolage Grotesque +
   DM Sans dentro de las experiencias. Bricolage no tiene itálica: lo que
   era itálica editorial pasa a DM Sans itálica (nunca itálica sintetizada).
   La capa de microclase restablece Playfair: la Biblioteca no cambia.

   MOVIMIENTO (Motion System V1): puerta elegida = REVEAL escalonado + el
   arco que se traza (MORPH). Todo bajo html.has-motion.
   ═══════════════════════════════════════════════════════════════════ */

body.exp { --exp-gutter: clamp(16px, 4vw, 64px); }
body.exp.is-playing { overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Iconos de línea, un solo trazo (DESIGN.md → Iconos). */
.exp-ctl svg, .exp-mcref__btn svg, .exp-state svg, .exp-mc__back svg {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.exp-state .fill { fill: currentColor; stroke: none; }

/* ─── Umbral ───────────────────────────────────────────────────── */
.exp-threshold h1 { max-width: 13ch; margin-inline: auto; text-wrap: balance; font-size: clamp(2.3rem, 6vw, 4.25rem); line-height: 1.08; }
.exp-threshold p { text-wrap: balance; }
.exp-access {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px;
  position: relative; margin-top: 22px; font-size: 15px; color: var(--ink-muted);
}
.exp-access[hidden] { display: none; }
.exp-access__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.exp-access__dots { display: inline-flex; gap: 7px; }
.exp-access__dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); }
.exp-access__dots i.is-on { background: var(--gold); }
/* Llavero (B8): una llave por experiencia del plan. */
.exp-access__frase { flex-basis: 100%; margin: 0; font-family: var(--font-sans); font-style: italic; font-size: 1.0625rem; color: #E3C988; }
.exp-access__llaves { display: inline-flex; gap: 6px; }
.exp-llave { display: inline-block; line-height: 0; color: #E3C988; }
.exp-llave svg { width: 26px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.exp-llave.is-usada svg circle { fill: currentColor; }
.exp-llave.is-usada { color: var(--gold); }
.exp-llave.is-reservada svg { stroke-dasharray: 2 2; }
.exp-llave.is-ida { color: var(--ink-quiet); opacity: 0.6; }
.exp-access__link { display: inline-flex; align-items: center; min-height: 44px; color: #E3C988; text-decoration: underline; text-decoration-color: rgba(201, 168, 76, 0.5); text-underline-offset: 0.3em; }
.exp-access__link:hover { text-decoration-color: currentColor; }
.exp-access__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
.xp-puerta__estado svg[viewBox="0 0 26 14"], .exp-fechas__llave svg { width: 22px; height: 12px; }
.exp-fechas__llave { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #E3C988; }
.exp-fechas__llave svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }

/* ─── Las nueve puertas ────────────────────────────────────────── */
.exp-layout {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px); align-items: start;
}
.exp-selector ol { list-style: none; margin: 0; padding: 0; }
.exp-selector li + li { border-top: 1px solid var(--rule); }
/* Núcleo (Introducción, solo ?presentar): va antes de las nueve y se separa con la
   regla fuerte y aire, sin etiqueta ni tarjeta — es la base, no una puerta más. */
.exp-selector li.exp-doors__nucleo + li { border-top-color: var(--rule-strong); margin-top: 16px; }
.exp-door {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 12px; width: 100%; min-height: 44px;
  padding: 18px 4px 18px 18px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink-muted);
}
.exp-door__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink-muted); }
.exp-door__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.exp-door__q { font-family: var(--font-editorial); font-size: 1.35rem; line-height: 1.3; text-wrap: balance; }
.exp-door__t { font-family: var(--font-editorial); font-style: italic; font-size: 1rem; color: var(--ink-muted); }
.exp-door__soon { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-muted); white-space: nowrap; align-self: center; }
/* Punto dorado del elegido: el mismo gesto que el selector de microclases. */
.exp-door::before {
  content: ""; position: absolute; left: 0; top: 28px; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--gold); transform: scale(0); opacity: 0;
}
.exp-door:hover .exp-door__q, .exp-door:focus-visible .exp-door__q { color: var(--cream); }
.exp-door:focus-visible { outline: 1px solid var(--rule-strong); outline-offset: 4px; }
.exp-door[aria-current="true"] { color: var(--cream); }
.exp-door[aria-current="true"] .exp-door__n { color: var(--gold); }
.exp-door[aria-current="true"]::before { transform: scale(1); opacity: 1; background: var(--gold); }

.exp-state { display: inline-grid; place-items: center; width: 24px; height: 24px; align-self: center; }
.exp-state svg { width: 20px; height: 20px; }
.exp-state--available { color: var(--gold-soft); }
.exp-state--selected, .exp-state--reserved { color: var(--gold); }
.exp-state--lived { color: var(--cream); }
.exp-state--locked { color: var(--ink-quiet); }

/* ─── Puerta elegida ───────────────────────────────────────────── */
.exp-preview-col { position: sticky; top: 24px; min-width: 0; }
.exp-preview { position: relative; min-width: 0; }
.exp-preview__arch { position: relative; width: 64px; aspect-ratio: 2 / 3; color: var(--gold); margin-bottom: 28px; }
.exp-preview__arch svg { width: 100%; height: 100%; overflow: visible; }
.exp-preview__arch path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.exp-preview__arch span { position: absolute; left: 0; right: 0; bottom: 26%; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--gold); }
.exp-preview__title {
  font-family: var(--font-editorial); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.15; margin: 0; max-width: 16ch; text-wrap: balance;
}
.exp-preview__title:focus { outline: none; }
.exp-preview__terr { font-family: var(--font-editorial); font-style: italic; font-size: 1.25rem; color: var(--ink-muted); margin: 12px 0 0; }
.exp-preview__map { margin: 32px 0 0; }
.exp-preview__map div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-top: 1px solid var(--rule); }
.exp-preview__map div:last-child { border-bottom: 1px solid var(--rule); }
.exp-preview__map dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.exp-preview__map dd { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--cream); }
.exp-preview__state { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 15px; color: var(--ink-muted); }
.exp-preview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.exp-preview__link {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--cream);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 5px;
}
.exp-preview__link:hover, .exp-preview__link:focus-visible { text-decoration-color: var(--gold); }
.exp-preview__micro { width: 100%; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.exp-preview__soon { font-family: var(--font-editorial); font-style: italic; font-size: 1.2rem; color: var(--ink-muted); margin: 0; }

/* Próximas fechas de la puerta (Bloque 3): como mucho dos, cada una lleva a
   reservarla en registro.html. Misma gramática que el mapa de la puerta. */
.exp-fechas { width: 100%; margin-top: 8px; }
.exp-fechas__h { margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.exp-fechas__lista { list-style: none; margin: 0 0 8px; padding: 0; }
.exp-fechas__lista li { border-top: 1px solid var(--rule); }
.exp-fechas__lista li:last-child { border-bottom: 1px solid var(--rule); }
.exp-fechas__fecha { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-size: 1rem; color: var(--cream); text-decoration: none; }
a.exp-fechas__fecha:hover, a.exp-fechas__fecha:focus-visible { color: var(--gold); }
a.exp-fechas__fecha:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.exp-fechas__fecha.is-quieta { color: var(--ink-muted); }

/* PROTOTIPO (?demo): simulación de estados en este navegador. */
.exp-demo { margin-top: 40px; padding: 16px 18px; border: 1px dashed var(--rule-strong); border-radius: 10px; font-size: 13px; color: var(--ink-muted); }
.exp-demo__h { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); }
.exp-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.exp-demo__row > span { width: 56px; }
.exp-demo button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--cream); font: 13px var(--font-sans); cursor: pointer; }
.exp-demo button[aria-pressed="true"] { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.exp-demo__msg { margin: 10px 0 0; min-height: 1.4em; color: #F0B98A; }

/* ─── Móvil: la puerta elegida se abre en su lugar ─────────────── */
@media (max-width: 1099px) {
  .exp-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .exp-preview-col { position: static; }
  .exp-door { padding: 16px 0 16px 16px; grid-template-columns: 36px minmax(0, 1fr) auto; }
  .exp-door::before { top: 26px; }
  .exp-door__q { font-size: 1.2rem; }
  /* "En preparación" bajo el territorio: como columna propia apretaba la pregunta a 3 palabras por línea. */
  .exp-door__soon { grid-column: 2; justify-self: start; margin-top: 8px; }
  /* La fila ya muestra la pregunta y el territorio: aquí solo lo que suma. */
  .exp-selector .exp-preview { padding: 0 0 28px 52px; }
  .exp-selector .exp-preview__arch,
  .exp-selector .exp-preview__title,
  .exp-selector .exp-preview__terr { display: none; }
  .exp-selector .exp-preview__map { margin-top: 4px; }
  .exp-preview__map div { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 12px 0; }
}
@media (max-width: 600px) {
  .exp-selector .exp-preview { padding-left: 0; }
  .exp-preview__actions .mc-cta { width: 100%; }
}


/* ─── Tipografía de las experiencias (DS V2) ───────────────────── */
body.exp { --font-editorial: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; }
body.exp .mc-threshold h1 { font-weight: 500; letter-spacing: -0.03em; font-variation-settings: "opsz" 96; }
body.exp .mc-threshold p,
body.exp .exp-door__t,
body.exp .exp-preview__terr,
body.exp .exp-preview__soon { font-family: var(--font-sans); font-style: italic; }
body.exp .exp-door__q { letter-spacing: -0.01em; }
body.exp .exp-preview__title { font-weight: 500; letter-spacing: -0.025em; }
/* Texto de la puerta de acceso de la capa de microclase. */
.exp-quote { font-family: var(--font-sans); font-style: italic; font-size: clamp(1.15rem, 4vw, 1.5rem); line-height: 1.45; margin: 0; }
.exp-quote--quiet, .exp-text--quiet { color: var(--ink-muted); }
.exp-text { font-size: 15px; line-height: 1.55; margin: 16px 0 0; }
.exp-ctl { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule-strong); background: none; color: var(--cream); cursor: pointer; }
.exp-ctl svg { width: 20px; height: 20px; }
.exp-ctl:disabled { opacity: 0.32; cursor: default; }
.exp-ctl:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* ═══ CAPA DE MICROCLASE — la Biblioteca dentro de la experiencia ═══ */
.exp-mc {
  --font-editorial: 'Playfair Display', 'Didot', 'Bodoni 72', Georgia, serif; /* la Biblioteca no cambia */
  position: fixed; inset: 0; z-index: 40; overflow-y: auto;
  display: flex; flex-direction: column;
  background: #14120F; color: var(--cream);
}
.exp-mc[hidden] { display: none; }
.exp-mc:focus { outline: none; }
.exp-mc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) var(--exp-gutter) 0; }
.exp-mc__back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: none; color: var(--cream);
  font: 15px var(--font-sans); cursor: pointer;
}
.exp-mc__back svg { width: 18px; height: 18px; }
.exp-mc__kicker { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); text-align: right; }
.exp-mc__head { padding: 22px var(--exp-gutter) 0; max-width: 1200px; width: 100%; margin: 0 auto; }
.exp-mc__title { margin: 0; font-family: var(--font-editorial); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.2; }
.exp-mc__sub { margin: 6px 0 0; font-family: var(--font-editorial); font-style: italic; font-size: 1.1rem; color: var(--ink-muted); }
.exp-mc__body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px var(--exp-gutter) 24px; }
.exp-mc__body[hidden] { display: none; }
.exp-mc__frame {
  position: relative; width: min(100%, 1200px, calc((100svh - 250px) * 16 / 9)); aspect-ratio: 16 / 9;
  border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--dark);
}
.exp-mc__nav { display: flex; align-items: center; gap: 18px; margin-top: 16px; }
.exp-mc__count { min-width: 5ch; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-muted); }
.exp-mc__nav .exp-ctl--next, .exp-mc__next { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.exp-mc__rotate { display: none; margin: 14px 0 0; font-size: 13px; color: var(--ink-muted); text-align: center; }
@media (orientation: portrait) and (max-width: 700px) {
  .exp-mc__rotate { display: block; }
  .exp-mc__frame { width: 100%; }
}
.exp-mc__gate { padding: 40px var(--exp-gutter); max-width: 36rem; width: 100%; margin: 0 auto; }
.exp-mc__gate[hidden] { display: none; }
.exp-mc__gate .mc-cta { margin-top: 28px; text-decoration: none; }


/* ═══ MOVIMIENTO — todo bajo html.has-motion ════════════════════════ */
html.has-motion .exp-door::before { transition: transform 500ms var(--ease-reveal), opacity 500ms var(--ease-reveal); }
html.has-motion .exp-door, html.has-motion .exp-door__q { transition: color 300ms; }
html.has-motion .exp-preview.is-changing > * { animation: reveal 800ms var(--ease-reveal) backwards; }
html.has-motion .exp-preview.is-changing > :nth-child(2) { animation-delay: 80ms; }
html.has-motion .exp-preview.is-changing > :nth-child(3) { animation-delay: 160ms; }
html.has-motion .exp-preview.is-changing > :nth-child(4) { animation-delay: 240ms; }
html.has-motion .exp-preview.is-changing > :nth-child(n+5) { animation-delay: 320ms; }
html.has-motion .exp-preview.is-changing .exp-preview__arch path { animation: exp-draw 1400ms var(--ease-breath) backwards; }
@keyframes exp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.has-motion .exp-ctl, html.has-motion .exp-mcref__btn { transition: transform 200ms var(--ease-reveal), border-color 300ms; }
html.has-motion .exp-mcref__btn:hover { transform: scale(1.01); }
html.has-motion .exp-mc.is-open { animation: reveal 500ms var(--ease-reveal) backwards; }

/* ═══════════════════════════════════════════════════════════════════
   NUEVE UMBRALES — la vista de quien participa (2026-09-25)
   El catálogo deja de ser una lista con vista previa: son nueve arcos,
   hermanos de los portales del hub (css/style-hub.css). Al abrir uno, su
   SALA (<dialog>) se expande desde la puerta y cuenta lo que propone:
   «Llegas con» / «Te invita a» + fechas. La presentación NO está aquí
   (vista de facilitador: ?presentar).
   Móvil y < 1100: filas editoriales con un arco pequeño (como el hub).
   ≥ 1100: tres columnas de arcos altos que bajan escalonados.
   Entradas con animation-fill-mode: backwards (nunca both: fijaría el
   transform final y anularía :hover). Movimiento solo sin reduced motion.
   ═══════════════════════════════════════════════════════════════════ */
body.exp--galeria .exp-layout { display: none; }
.xp-umbrales[hidden] { display: none; }
.xp-umbrales { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; }
.xp-umbral + .xp-umbral { border-top: 1px solid var(--rule); }

.xp-puerta {
  position: relative; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 24px;
  align-items: center; column-gap: 20px; width: 100%; min-height: 44px;
  padding: 22px 4px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: var(--cream);
  -webkit-tap-highlight-color: transparent;
}
/* La puerta (B8): marco, luneta con el glifo, dos hojas, cerradura al centro
   y umbral. El grosor del trazo va en unidades del viewBox (--pd-sw) porque
   el trazado con pathLength no cierra con vector-effect: non-scaling-stroke. */
.xp-puerta__arco { position: relative; display: block; width: 3.5rem; }
.pd { display: block; width: 100%; height: auto; overflow: visible; color: var(--gold); --pd-sw: 1.8; transition: color 400ms var(--ease-reveal); }
.pd-trazo, .pd-h, .pd-t, .pd-p, .pd-umbral { fill: none; stroke: currentColor; stroke-width: var(--pd-sw); stroke-linecap: round; stroke-linejoin: round; }
.pd-trazo { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pd-h { fill: var(--dark); }
.pd-t { stroke-opacity: 0.45; }
.pd-p { stroke-width: calc(var(--pd-sw) * 1.4); }
.pd-umbral { stroke-opacity: 0.55; }
.pd-luz { fill: #E3C988; fill-opacity: 0; transition: fill-opacity 1200ms var(--ease-reveal) 300ms; }
.pd-cerradura { fill: currentColor; transition: opacity 400ms var(--ease-reveal); }
.pd-hoja { transform-box: view-box; transition: transform 1400ms var(--ease-reveal) 250ms; }
.pd-hoja--i { transform-origin: 14px 103px; }
.pd-hoja--d { transform-origin: 86px 103px; }
.xp-puerta__glifo { position: absolute; left: 50%; top: 24.4%; width: 40%; transform: translate(-50%, -50%); line-height: 0; }
.xp-puerta__glifo .xp-glifo { width: 100%; height: auto; aspect-ratio: 1; }
.xp-puerta__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gold); }

/* Estados (solo dibujo; el texto va en .xp-puerta__estado). */
.xp-puerta.is-cerrada .pd { color: rgba(201, 168, 76, 0.42); }
.xp-puerta.is-cerrada .pd-cerradura { fill: var(--ink-quiet); }
.xp-puerta.is-libre .pd-cerradura { fill: #E3C988; }
.xp-puerta.is-reservada .pd-cerradura, .xp-puerta.is-vivida .pd-cerradura { opacity: 0; }
.xp-puerta.is-vivida .pd { color: #E3C988; }
.xp-puerta.is-vivida .xp-glifo { color: var(--gold); }
/* Se abren cuando el umbral ya está en pantalla (.is-in): la hoja gira y entra luz. */
.xp-umbral.is-in .xp-puerta.is-reservada .pd-hoja--d { transform: scaleX(0.62) skewY(-6deg); }
.xp-umbral.is-in .xp-puerta.is-reservada .pd-luz:not(.pd-luz--luneta) { fill-opacity: 0.3; }
.xp-umbral.is-in .xp-puerta.is-vivida .pd-hoja--i { transform: scaleX(0.3) skewY(6deg); }
.xp-umbral.is-in .xp-puerta.is-vivida .pd-hoja--d { transform: scaleX(0.3) skewY(-6deg); }
.xp-umbral.is-in .xp-puerta.is-vivida .pd-luz { fill-opacity: 0.24; }
.xp-umbral.is-in .xp-puerta.is-vivida .pd-luz--luneta { fill-opacity: 0.14; }
.xp-puerta__estado.is-quieto { color: var(--ink-muted); }
.xp-puerta__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xp-puerta__q { font-family: var(--font-editorial); font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.22; text-wrap: balance; }
.xp-puerta__t { font-family: var(--font-sans); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--ink-muted); }
.xp-puerta__estado {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gold);
}
.xp-puerta__estado svg, .xp-sala__estado svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.xp-puerta__estado svg .fill, .xp-sala__estado svg .fill { fill: currentColor; stroke: none; }
.xp-puerta__flecha { width: 20px; height: 20px; fill: none; stroke: var(--ink-quiet); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--ease-reveal), stroke 400ms var(--ease-reveal); }

.xp-puerta:hover .pd, .xp-puerta:focus-visible .pd, .xp-puerta.is-present .pd { color: #E3C988; }
.xp-puerta:hover .xp-puerta__flecha, .xp-puerta:focus-visible .xp-puerta__flecha { stroke: var(--gold); transform: translateX(4px); }
.xp-puerta:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.xp-puerta:active { transform: scale(0.985); }

/* ─── Escritorio: arcos altos ─────────────────────────────────── */
@media (min-width: 1100px) {
  .xp-umbrales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; padding-bottom: 4rem; }
  .xp-umbral + .xp-umbral { border-top: 0; }
  .xp-umbral[data-pos="1"] { transform: translateY(2rem); }
  .xp-umbral[data-pos="2"] { transform: translateY(4rem); }
  .xp-puerta {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    padding: 8px 20px 24px; text-align: center; isolation: isolate;
    transition: transform 500ms var(--ease-reveal);
  }
  .xp-puerta:hover { transform: scale(1.02); }
  .xp-puerta:active { transform: scale(0.99); }
  /* La puerta mide ~180 px: el viewBox de 100 se agranda ×1.8, el trazo se compensa. */
  .xp-puerta__arco { width: 180px; margin-bottom: 22px; }
  .pd { --pd-sw: 0.72; }
  .xp-puerta__n { font-size: 12px; }
  .xp-puerta__cuerpo { align-items: center; gap: 10px; }
  .xp-puerta__q { font-size: clamp(1.4rem, 1.7vw, 1.75rem); max-width: 14ch; }
  .xp-puerta__t { max-width: 24ch; }
  .xp-puerta__flecha { margin-top: 18px; transform: rotate(90deg); }
  .xp-puerta:hover .xp-puerta__flecha, .xp-puerta:focus-visible .xp-puerta__flecha { transform: rotate(90deg) translateX(3px); }
}

/* ─── Aparecer: el arco se traza, el texto llega ───────────────── */
@media (prefers-reduced-motion: no-preference) {
  .xp-umbral:not(.is-in) .xp-puerta { opacity: 0; }
  .xp-umbral.is-in .xp-puerta { animation: xpLlega 900ms var(--ease-reveal) backwards; animation-delay: calc(var(--i) % 3 * 120ms); }
  .xp-umbral.is-in .pd-trazo { animation: xpTrazo 1600ms var(--ease-reveal) backwards; animation-delay: calc(var(--i) % 3 * 120ms + 150ms); }
  .xp-umbral.is-in .pd-hoja, .xp-umbral.is-in .pd-umbral, .xp-umbral.is-in .pd-cerradura { animation: xpPuertaLlega 900ms var(--ease-reveal) backwards; animation-delay: calc(var(--i) % 3 * 120ms + 700ms); }
}
@keyframes xpLlega { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } }
@keyframes xpTrazo { from { stroke-dashoffset: 1; } }
@keyframes xpPuertaLlega { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pd, .pd-luz, .pd-hoja, .pd-cerradura { transition: none; }
}
@keyframes xpLatido { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ═══ LA SALA ════════════════════════════════════════════════════ */
.xp-sala {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--dark); color: var(--cream);
}
.xp-sala::backdrop { background: rgba(28, 26, 24, 0.9); }
.xp-sala[open] {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: start; justify-items: center; gap: 28px;
  padding: clamp(72px, 10vh, 112px) var(--exp-gutter) 64px;
}
.xp-sala__x {
  position: fixed; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 50%;
  background: rgba(28, 26, 24, 0.8); color: var(--cream); cursor: pointer;
  transition: border-color 300ms, color 300ms;
}
.xp-sala__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.xp-sala__x:hover, .xp-sala__x:focus-visible { border-color: var(--gold); color: var(--gold); }
.xp-sala__x:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.xp-sala__umbral { position: relative; display: grid; place-items: center; width: clamp(120px, 22vw, 168px); aspect-ratio: 2 / 3; }
.xp-sala__halo { position: absolute; left: 50%; top: 40%; width: 230%; transform: translate(-50%, -50%); overflow: visible; }
.xp-sala__halo circle { fill: none; stroke: var(--rule); stroke-width: 0.6; }
.xp-sala__arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-sala__arco path { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 1; }
.xp-sala__glifo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 14%; }
.xp-sala__glifo .xp-glifo { width: clamp(52px, 9vw, 72px); height: auto; aspect-ratio: 1; }
.xp-sala__n { position: relative; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--gold); }

.xp-sala__cuerpo { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 640px; text-align: center; }
.xp-sala__q { margin: 0; font-family: var(--font-editorial); font-weight: 400; font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.xp-sala__q:focus { outline: none; }
.xp-sala__t { margin: 0; font-family: var(--font-sans); font-style: italic; font-size: 1.125rem; color: var(--ink-muted); }
.xp-sala__mapa { display: grid; gap: 0; width: 100%; margin: 18px 0 0; text-align: left; }
.xp-sala__mapa > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; border-top: 1px solid var(--rule); }
.xp-sala__mapa > div:last-child { border-bottom: 1px solid var(--rule); }
.xp-sala__mapa dt { font-family: var(--font-sans); font-size: 14px; color: var(--gold); }
.xp-sala__mapa dd { margin: 0; font-family: var(--font-editorial); font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.4; text-wrap: pretty; }
@media (min-width: 720px) {
  .xp-sala__mapa > div { grid-template-columns: 9rem minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
.xp-sala__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; text-align: left; }
.xp-sala__estado { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; color: var(--cream); }
.xp-sala__estado svg { color: var(--gold); }
.xp-sala__volver {
  min-height: 44px; margin-top: 8px; padding: 10px 4px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 5px;
}
.xp-sala__volver:hover, .xp-sala__volver:focus-visible { color: var(--cream); text-decoration-color: var(--gold); }
.xp-sala__volver:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  /* Se abre desde la puerta: un círculo que crece desde ella. */
  .xp-sala[open]:not(.is-cerrando) { animation: xpSalaAbre 800ms var(--ease-reveal) backwards; }
  .xp-sala[open]:not(.is-cerrando) .xp-sala__arco path { animation: xpTrazo 1500ms var(--ease-reveal) 250ms backwards; }
  .xp-sala[open]:not(.is-cerrando) [style*="--k"] { animation: xpLlega 850ms var(--ease-reveal) backwards; animation-delay: calc(450ms + var(--k) * 110ms); }
  .xp-sala[open] .xp-sala__halo { animation: xpHalo var(--t-breath) var(--ease-breath) infinite; transform-origin: 50% 50%; }
  .xp-sala.is-cerrando { animation: xpSalaCierra 420ms var(--ease-reveal) forwards; }
}
@keyframes xpSalaAbre { from { clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); } to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } }
@keyframes xpSalaCierra { to { opacity: 0; filter: blur(4px); } }
@keyframes xpHalo { 0%, 100% { transform: translate(-50%, -50%) scale(0.96); } 50% { transform: translate(-50%, -50%) scale(1); } }

/* ─── Glifos (js/experiencias/glifos.js) ──────────────────────────
   Trazo de 1.3px real (non-scaling-stroke: aquí no hay trazado por
   pathLength, así que no rompe nada). Dorado apagado en reposo; dorado
   pleno cuando la puerta está presente o con foco. Un gesto por glifo,
   solo transform/opacity, solo en la puerta presente o en la sala. */
.xp-glifo { display: block; width: 30px; height: 30px; overflow: visible; color: rgba(201, 168, 76, 0.72); transition: color 500ms var(--ease-reveal); }
.xp-glifo * { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.xp-glifo .g-fill, .xp-glifo .g-fill * { fill: currentColor; stroke: none; }
.xp-glifo .g-arriba, .xp-glifo .g-abajo { opacity: 0.55; }
.xp-glifo .g-rostro { opacity: 0.3; }
.xp-glifo .g-luz { opacity: 0.5; }
.xp-glifo .g-hilo { opacity: 0.35; stroke-dasharray: 1.5 2.5; }
.xp-glifo * { transform-box: view-box; }
.xp-puerta:hover .xp-glifo, .xp-puerta:focus-visible .xp-glifo, .xp-puerta.is-present .xp-glifo, .xp-glifo.is-vivo { color: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .xp-puerta.is-present .xp-glifo *, .xp-puerta:hover .xp-glifo *, .xp-glifo.is-vivo * { animation-duration: var(--t-breath); animation-timing-function: var(--ease-breath); animation-iteration-count: infinite; }
  .xp-puerta.is-present .g-luz, .xp-puerta:hover .g-luz, .is-vivo .g-luz { animation-name: gLuz; }
  .xp-puerta.is-present .g-arriba, .xp-puerta:hover .g-arriba, .is-vivo .g-arriba { animation-name: gArriba; transform-origin: 24px 20px; }
  .xp-puerta.is-present .g-abajo, .xp-puerta:hover .g-abajo, .is-vivo .g-abajo { animation-name: gAbajo; transform-origin: 24px 41px; }
  .xp-puerta.is-present .g-hilo, .xp-puerta:hover .g-hilo, .is-vivo .g-hilo { animation-name: gHilo; }
  .xp-puerta.is-present .g-espiral, .xp-puerta:hover .g-espiral, .is-vivo .g-espiral { animation-name: gEspiral; transform-origin: 24px 24px; }
  .xp-puerta.is-present .g-llama, .xp-puerta:hover .g-llama, .is-vivo .g-llama { animation-name: gLlama; transform-origin: 24px 42px; }
  .xp-puerta.is-present .g-nucleo, .xp-puerta:hover .g-nucleo, .is-vivo .g-nucleo { animation-name: gNucleo; transform-origin: 24px 42px; }
  .xp-puerta.is-present .g-fuera, .xp-puerta:hover .g-fuera, .is-vivo .g-fuera { animation-name: gFuera; }
  .xp-puerta.is-present .g-onda, .xp-puerta:hover .g-onda, .is-vivo .g-onda { animation-name: gOnda; }
  .g-o2 { animation-delay: 400ms; } .g-o3 { animation-delay: 800ms; }
  .xp-puerta.is-present .g-peq, .xp-puerta:hover .g-peq, .is-vivo .g-peq { animation-name: gPeq; }
  /* La gota cae una vez y se queda: no se repite. */
  .xp-puerta.is-present .g-gota, .xp-puerta:hover .g-gota, .is-vivo .g-gota { animation: gGota 1400ms var(--ease-reveal) 1 backwards; }
  .xp-puerta.is-present .g-eco, .xp-puerta:hover .g-eco, .is-vivo .g-eco { animation: gEco 1400ms var(--ease-reveal) 1 backwards; transform-origin: 24px 42px; }
  .xp-puerta.is-present .g-mascara, .xp-puerta:hover .g-mascara, .is-vivo .g-mascara { animation-name: gMascara; transform-origin: 24px 36px; }
}
@keyframes gLuz { 0%, 100% { transform: translateX(-3px); opacity: 0; } 40%, 60% { opacity: 0.8; } 50% { transform: translateX(6px); } }
@keyframes gArriba { 0% { transform: scaleY(1); } 80%, 100% { transform: scaleY(0.25); } }
@keyframes gAbajo { 0% { transform: scaleY(0.3); } 80%, 100% { transform: scaleY(1); } }
@keyframes gHilo { 0%, 100% { opacity: 0; } 15%, 75% { opacity: 0.6; } }
@keyframes gEspiral { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-140deg) scale(0.9); } }
@keyframes gLlama { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.1) scaleX(0.96); } 75% { transform: scaleY(0.94); } }
@keyframes gNucleo { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes gFuera { 0%, 15% { transform: translate(0, 0); } 55%, 80% { transform: translate(-8.2px, 8.2px); } 100% { transform: translate(0, 0); } }
@keyframes gOnda { 0%, 100% { opacity: 0.15; } 40% { opacity: 1; } }
@keyframes gPeq { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3.5px, -3.5px); } }
@keyframes gGota { from { transform: translateY(-7px); opacity: 0; } }
@keyframes gEco { 0%, 55% { transform: scaleX(0.2); opacity: 0; } }
@keyframes gMascara { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, 2px) rotate(14deg); } }

/* ─── Próxima fecha y eco de «Llegas con» ─────────────────────────── */
.xp-puerta__proxima { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--gold); }
.xp-puerta__eco { display: none; }
@media (min-width: 1100px) {
  /* Aparece al pasar el cursor o con foco: la persona se reconoce antes
     de abrir. Crece con grid-rows 0fr→1fr, sin empujar de golpe. */
  .xp-puerta__eco { display: grid; grid-template-rows: 0fr; max-width: 26ch; opacity: 0; transition: grid-template-rows 500ms var(--ease-reveal), opacity 500ms var(--ease-reveal); }
  .xp-puerta__eco > span { overflow: hidden; font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--cream); }
  .xp-puerta:hover .xp-puerta__eco, .xp-puerta:focus-visible .xp-puerta__eco { grid-template-rows: 1fr; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) { .xp-puerta__eco { transition: none; } }

/* ── Capas y gotas (Diego, 2026-10-10) ─────────────────────────
   Las 9 experiencias en tres capas del vaso (Superficie · Raíz · Profundidad).
   Cada experiencia es un vaso; el agua cuenta el estado. Los tokens son gotas. */
.xp-capa { display: grid; justify-items: center; gap: 6px; padding: 40px 0 16px; text-align: center; list-style: none; }
.xp-capa:first-child { padding-top: 8px; }
.xp-capa__vaso { width: 34px; height: 42px; margin-bottom: 4px; overflow: visible; }
.xp-capa__vaso path { fill: none; stroke: #E3C988; stroke-width: 1.3; stroke-linejoin: round; }
.xp-capa__vaso polygon { fill: rgba(201, 168, 76, 0.12); }
.xp-capa__vaso polygon.is-on { fill: rgba(227, 201, 136, 0.7); }
.xp-capa__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.xp-capa__t { font-family: var(--font-editorial); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; }
.xp-capa__lede { max-width: 36ch; margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--ink-muted); }
.xp-capa + .xp-umbral { border-top: 0; }
.pd-borde { fill: none; stroke: currentColor; stroke-width: var(--pd-sw); stroke-linecap: round; stroke-opacity: 0.55; }
.pd-agua { fill: #E3C988; fill-opacity: 0.06; transition: fill-opacity 1200ms var(--ease-reveal) 300ms; }
.pd-sup { fill: none; stroke: currentColor; stroke-width: var(--pd-sw); stroke-opacity: 0.45; }
.pd-gota { fill: #E3C988; opacity: 0; transform-box: view-box; transform-origin: 50px 10px; transition: opacity 600ms var(--ease-reveal), transform 1400ms var(--ease-reveal); }
.xp-puerta__glifo { top: 69%; }
.xp-puerta.is-cerrada .pd-agua { fill-opacity: 0.03; }
.xp-puerta.is-libre .pd-agua { fill-opacity: 0.12; }
.xp-umbral.is-in .xp-puerta.is-reservada .pd-agua { fill-opacity: 0.32; }
.xp-umbral.is-in .xp-puerta.is-vivida .pd-agua { fill-opacity: 0.2; }
.xp-umbral.is-in .xp-puerta.is-vivida .pd-gota { opacity: 1; transform: translateY(-4px); }
.exp-llave svg.gota { width: 12px; height: 16px; }
.exp-llave svg.gota path { fill: none; stroke: currentColor; stroke-width: 1.2; }
.exp-llave.is-usada svg.gota path { fill: currentColor; }
.xp-puerta__estado svg.gota, .exp-fechas__llave svg.gota { width: 11px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; }
@media (min-width: 1100px) {
  .xp-capa { grid-column: 1 / -1; padding: 24px 0 0; }
  .xp-umbrales { row-gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .pd-agua, .pd-gota { transition: none; } }

/* ═══ El vaso de vidrio con agua (Diego, 2026-10-10) ═══════════════
   Mismo vaso que El vaso de todos y las landings (js/vaso/agua.js, montado
   por js/experiencias/vasos.js). Sin WebGL o con reduced motion queda su SVG. */
.vaso-agua { position: relative; width: 100%; aspect-ratio: 3 / 4; }
.vaso-agua__svg, .vaso-agua__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vaso-agua__svg-agua { transition: y 1.6s var(--ease-reveal); }
.vaso-agua__lienzo { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
.vaso-agua.is-gl .vaso-agua__lienzo { opacity: 1; }
.vaso-agua.is-gl .vaso-agua__svg { opacity: 0; transition: opacity 900ms var(--ease-reveal); }
.xp-vaso { display: block; width: 100%; aspect-ratio: 3 / 4; pointer-events: none; }
.xp-puerta__arco { width: 4.5rem; }
.xp-puerta__arco .xp-puerta__glifo { top: 60%; width: 34%; z-index: 1; }
.xp-puerta__glifo .xp-glifo { color: #F2EDE4; }
.xp-puerta.is-cerrada .xp-vaso { opacity: 0.9; }
.xp-puerta.is-vivida .xp-vaso { filter: brightness(1.15) saturate(0.7); }
.xp-puerta .xp-vaso { transition: opacity 400ms var(--ease-reveal), filter 400ms var(--ease-reveal); }
@media (min-width: 1100px) {
  .xp-puerta__arco { width: 170px; margin-bottom: 14px; }
}
.xp-sala__vaso { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; }
.xp-sala__umbral .xp-sala__glifo { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); margin: 0; z-index: 1; }
.xp-sala__umbral .xp-sala__glifo .xp-glifo { width: clamp(40px, 7vw, 56px); color: #F2EDE4; }
.xp-sala__umbral .xp-sala__n { color: #F2EDE4; }