/* CONSULTORIO v7 · registro de la masterclass de Mey Fonseca · 27-oct-2026
   Mundo: de noche, en su consultorio. La página es un recorrido lento por primeros planos
   del mismo cuarto con la misma luz. Toda la materia (cuarto, papel, libreta, tablero, taza,
   ventana, sillón) es fotografía de Codex en assets/placas; el código pone solo texto, formulario,
   botones y la luz que se mueve. Colores y letras: manual de marca v4 de Mey. */

@font-face { font-family: "Literata"; src: url("fonts/Literata-normal-latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/Literata-italic-latin.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/HankenGrotesk-normal-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --noche: #14243B;
  --noche-hondo: #0C1726;
  --marfil: #F3EFE4;
  --papel: #FBF8F1;
  --oro: #B57A2E;
  --oro-claro: #CEAA60;
  --oro-tinta: #965614;
  --pizarra: #4A5670;
  --tinta-clara: #E9E1CF;     /* marfil apagado para texto largo sobre la noche */
  --tinta-papel: #2A2A33;
  --serif: "Literata", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --franja: 28px;
  --suave: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #5a4a33 var(--noche-hondo); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--noche-hondo); color: var(--tinta-clara); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; text-wrap: balance; color: var(--marfil); }
p { margin: 0; }
strong { font-weight: 650; color: var(--marfil); }
::selection { background: var(--oro-claro); color: var(--noche); }
:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- franja de vista previa ---------- */
.franja { height: var(--franja); display: flex; align-items: center; justify-content: center; padding: 0 12px; background: #070E18; color: #D9CFBA; font: 500 11px/1.3 var(--sans); letter-spacing: 0; text-align: center; white-space: nowrap; overflow: hidden; }

/* ---------- botón dorado (el de la maqueta, texto oscuro) ---------- */
.boton {
  --b-alto: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--b-alto); padding: 0 1.6em; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 19px/1 var(--serif); letter-spacing: .005em; color: var(--noche); text-decoration: none;
  background: linear-gradient(180deg, #E2C67F 0%, #CFAB5E 48%, #B98F45 100%);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, .7), inset 0 -1px 0 rgba(0, 0, 0, .45), 0 8px 18px -8px rgba(0, 0, 0, .75);
  transition: filter .25s var(--suave), transform .25s var(--suave), box-shadow .25s var(--suave);
}
.boton svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .3s var(--suave); }
.boton:hover { filter: brightness(1.06) saturate(1.05); }
.boton:hover svg { transform: translateX(3px); }
.boton:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 246, 214, .5), 0 4px 10px -6px rgba(0, 0, 0, .8); }
.boton:focus-visible { outline: 3px solid var(--marfil); outline-offset: 4px; }

/* =====================================================================
   PRIMERA PANTALLA · el consultorio de noche
   El «escenario» guarda la proporción de su foto y la cubre como object-fit: cover,
   así la lámpara, la ventana y el portarretrato quedan en su sitio a cualquier ancho.
   ===================================================================== */
.inicio { position: relative; overflow: hidden; isolation: isolate; background: var(--noche-hondo); }
.escenario {
  position: absolute; left: 0; top: var(--st-top, 0px); z-index: -1;
  width: var(--sw); aspect-ratio: var(--st-ar); transform: translateX(var(--st-dx, 0px));
  container-type: inline-size;
}
.escenario > picture, .escenario > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* su foto real, en el portarretrato del cuarto, con la luz de la lámpara */
.portarretrato {
  position: absolute; left: var(--f-x); top: var(--f-y); width: var(--f-w); height: var(--f-h);
  overflow: hidden; clip-path: var(--f-clip, none);
}
.portarretrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: sepia(.28) saturate(.92) brightness(.86) contrast(1.02); }
.portarretrato::after { /* luz cálida desde la lámpara y sombra del paspartú */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--f-luz, 100deg), rgba(255, 190, 110, .32), rgba(255, 190, 110, 0) 55%, rgba(0, 0, 0, .22));
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35);
  mix-blend-mode: soft-light;
}
/* lluvia que corre por la ventana: placa de gotas sobre negro, en modo «screen» */
.lluvia {
  position: absolute; left: var(--w-x); top: var(--w-y); width: var(--w-w); height: var(--w-h);
  background-image: image-set(url("assets/web/lluvia-400.webp") 1x, url("assets/web/lluvia-800.webp") 2x);
  background-size: 100% auto; background-repeat: repeat-y; mix-blend-mode: screen; opacity: .5;
  animation: lluvia 42s linear infinite; pointer-events: none;
}
@keyframes lluvia { from { background-position: 0 0; } to { background-position: 0 calc(var(--w-w) * 1.5); } }
/* la lámpara se enciende: el cuarto sube de la penumbra y el cono de luz respira una vez */
.penumbra { position: absolute; inset: 0; background: #050a12; opacity: 0; pointer-events: none; }
.cono {
  position: absolute; left: var(--l-x); top: var(--l-y); width: var(--l-r); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 214, 150, .55), rgba(255, 190, 110, .18) 45%, rgba(255, 180, 90, 0) 100%);
  mix-blend-mode: screen; opacity: .85; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .penumbra { animation: encender-cuarto 2.4s .35s var(--suave) both; }
  .js .cono { animation: encender-lampara 2.4s .35s steps(1, end) both, respirar 2.2s 2.75s var(--suave) both; }
  .js .portarretrato img { animation: encender-foto 2.4s .35s var(--suave) both; }
}
@keyframes encender-cuarto { 0% { opacity: .78; } 14% { opacity: .78; } 18% { opacity: .42; } 22% { opacity: .66; } 100% { opacity: 0; } }
@keyframes encender-lampara { 0% { opacity: 0; } 15% { opacity: .9; } 19% { opacity: .2; } 23% { opacity: .85; } }
@keyframes respirar { 0% { opacity: .85; } 45% { opacity: 1; } 100% { opacity: .85; } }
@keyframes encender-foto { 0% { filter: sepia(.4) brightness(.35); } 100% { filter: sepia(.28) saturate(.92) brightness(.86) contrast(1.02); } }
@media (prefers-reduced-motion: reduce) { .lluvia { animation: none; } }

/* ---------- texto de la primera pantalla ---------- */
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { width: 40px; height: auto; }
.marca p { display: grid; gap: 2px; font: 600 12.5px/1 var(--serif); letter-spacing: .26em; text-transform: uppercase; color: #E2B96E; }
.marca p span { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: #D8B06A; }
.estrella { display: none; }
.cuando { margin: 0; }
.cuando .kicker { font: 500 15px/1.45 var(--sans); color: var(--marfil); }
.cuando .kicker::before, .cuando .kicker::after { content: ""; height: 1px; width: 22px; background: var(--oro-claro); flex: none; display: none; }
.cuando .dato { display: flex; align-items: center; gap: 10px; font: 500 17px/1.36 var(--serif); color: var(--marfil); }
.cuando .dato svg { width: 19px; height: 19px; color: var(--oro-claro); flex: none; }
.cuando .sep { display: none; color: var(--oro-claro); }
.titulo { font-weight: 800; font-size: 40px; line-height: 1.02; letter-spacing: -.02em; color: #F6EEDC; text-shadow: 0 2px 18px rgba(5, 10, 20, .45); }
.titulo span { display: block; }
.filete { display: block; width: 72px; height: 2px; background: linear-gradient(90deg, var(--oro-claro), var(--oro)); border-radius: 2px; }
.bajada { font-size: 15.5px; line-height: 1.45; color: #EEE7D8; text-shadow: 0 1px 10px rgba(5, 10, 20, .6); max-width: 34em; }

/* ---------- la hoja de papel: el formulario ---------- */
.hoja {
  position: relative; color: var(--tinta-papel);
  transform: perspective(var(--hoja-p, 1100px)) rotateX(var(--hoja-x, 7deg)); transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.hoja::before { /* el papel: placa de Codex, estirada a la hoja */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px;
  background: image-set(url("assets/web/hoja-papel-700.webp") 1x, url("assets/web/hoja-papel-1400.webp") 2x) center / 100% 100% no-repeat, var(--papel);
}
.hoja form { display: grid; gap: 8px; padding: 14px 14px 14px; }
.campo { position: relative; }
.campo input {
  display: block; width: 100%; height: 46px; padding: 16px 12px 4px 42px; margin: 0;
  font: 500 16px/1.2 var(--sans); color: var(--noche); caret-color: var(--oro-tinta);
  background: rgba(255, 252, 244, .55); border: 1.5px solid #B7A584; border-radius: 10px; appearance: none;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.campo input:hover { border-color: #9B8762; }
.campo input:focus { outline: none; border-color: var(--noche); background: rgba(255, 253, 248, .9); box-shadow: 0 0 0 3px rgba(20, 36, 59, .22); }
.campo input:user-invalid { border-color: #9A3B1E; }
.campo label {
  position: absolute; left: 42px; top: 50%; transform: translateY(-50%); transform-origin: 0 50%;
  font: 400 15.5px/1 var(--sans); color: #4F4738; pointer-events: none; white-space: nowrap; max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis;
  transition: transform .22s var(--suave), color .22s;
}
.campo input:focus + label, .campo input:not(:placeholder-shown) + label { transform: translateY(-122%) scale(.74); color: var(--noche); }
.campo svg { position: absolute; left: 13px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: #5E5240; pointer-events: none; }
.casilla { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; padding: 2px 2px 0; font: 400 15px/1.32 var(--sans); color: #3B4357; cursor: pointer; }
.casilla input { appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid #8C7A58; border-radius: 6px; background: rgba(255, 252, 244, .7); display: grid; place-content: center; cursor: pointer; }
.casilla input::before { content: ""; width: 12px; height: 12px; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%); background: var(--noche); transform: scale(0); transition: transform .15s var(--suave); }
.casilla input:checked { background: #EFD9A4; border-color: var(--noche); }
.casilla input:checked::before { transform: scale(1); }
.casilla input:focus-visible { outline: 3px solid var(--noche); outline-offset: 2px; }
.hoja .boton { width: 100%; margin-top: 4px; }
.aviso-zoom { font-size: 15px; line-height: 1.4; color: #EDE5D3; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }

/* ---------- teléfono (vertical, angosto): flujo, el botón cabe sin bajar ---------- */
.inicio { --st-ar: 941 / 1672; --hh: max(calc(100svh - var(--franja)), 790px); --sw: max(100vw, calc((var(--hh) + 60px) * .5628)); --st-top: -60px; --st-dx: calc((100vw - var(--sw)) * .08); min-height: var(--hh);
  /* posiciones en la foto vertical (escena-telefono): portarretrato, ventana y lámpara */
  --f-x: 68.97%; --f-y: 16.57%; --f-w: 6.7%; --f-h: 7.18%; --f-clip: polygon(0 9%, 100% 0, 100% 98%, 0 100%); --f-luz: 260deg;
  --w-x: 85.2%; --w-y: 1.8%; --w-w: 14.8%; --w-h: 41.4%;
  --l-x: 9.5%; --l-y: 32.5%; --l-r: 62%; }
.capa { position: relative; display: flex; flex-direction: column; padding: 14px 20px 18px; min-height: var(--hh); }
.capa .marca { margin-bottom: 10px; }
.capa .cuando { display: block; margin-bottom: 12px; max-width: 24em; text-shadow: 0 1px 8px rgba(5, 10, 20, .7); }
.capa .titulo { margin-bottom: 8px; }
.capa .filete { margin-bottom: 11px; }
.capa .bajada { margin-bottom: 14px; }
.capa .hoja { margin: 4px 4px 0; --hoja-x: 11deg; }
.capa .aviso-zoom { margin-top: 14px; }
.campo--largo input { height: 58px; }
.campo--largo label { white-space: normal; line-height: 1.22; text-overflow: clip; }
.campo--largo input:focus + label, .campo--largo input:not(:placeholder-shown) + label { white-space: nowrap; transform: translateY(-150%) scale(.74); }

/* ---------- vertical grande (tableta, y la medida de la maqueta 1024 × 1536) ----------
   aquí la página se arma sobre las cajas medidas de la maqueta (layout.css de Impeccable) */
@media (orientation: portrait) and (min-width: 600px) {
  .inicio { --hh: 150vw; --sw: 100vw; --st-top: -11.9vw; --st-dx: 0px; min-height: 0; height: 150vw;
    --r-hoja-x: 3.910%; --r-hoja-y: 64.450%; --r-hoja-w: 90.820%; --r-hoja-h: 30.600%;
    --r-logo-x: 35.940%; --r-logo-y: 1.040%; --r-logo-w: 14.060%;
    --r-marca-nombre-y: 9.240%;
    --r-estrella-y: 12.370%;
    --r-kicker-x: 18.160%; --r-kicker-y: 14.910%; --r-kicker-w: 47.660%;
    --r-fecha-x: 19.140%; --r-fecha-y: 17.190%;
    --r-hora-y: 19.790%;
    --r-titulo-x: 19.730%; --r-titulo-y: 23.440%; --r-titulo-w: 50%;
    --r-filete-x: 20.900%; --r-filete-y: 39.260%; --r-filete-w: 10.160%;
    --r-bajada-x: 21.290%; --r-bajada-y: 41.670%; --r-bajada-w: 42.380%; }
  .capa { position: absolute; inset: 0; padding: 0; min-height: 0; display: block; }
  .capa > * { position: absolute; margin: 0 !important; }
  .marca { left: 0; right: 0; top: var(--r-logo-y); flex-direction: column; gap: .9vw; }
  .marca img { width: var(--r-logo-w); }
  .marca p { justify-items: center; font-size: 2.25vw; gap: .7vw; letter-spacing: .2em; }
  .marca p span { font-size: max(11px, 1.15vw); letter-spacing: .36em; }
  .estrella { display: block; left: 41.4%; top: var(--r-estrella-y); width: 9%; color: var(--oro-claro); }
  .capa .cuando { left: 11%; top: var(--r-kicker-y); width: 57%; max-width: none; display: grid; gap: .55vw; }
  .cuando .kicker { display: flex; align-items: center; gap: 10px; justify-content: center; font: 600 1.5vw/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .6vw; }
  .cuando .kicker::before, .cuando .kicker::after { display: block; width: 3vw; }
  .cuando .sep { display: none; }
  .cuando .dato { display: flex; align-items: center; padding-left: 8.1vw; font: 500 2.75vw/1.35 var(--serif); gap: 2.4vw; }
  .cuando .dato svg { display: block; }
  .cuando .dato svg { width: 3.2vw; height: 3.2vw; }
  .titulo { left: var(--r-titulo-x); top: var(--r-titulo-y); width: var(--r-titulo-w); font-size: 7.81vw; line-height: 1.0; }
  .filete { left: var(--r-filete-x); top: var(--r-filete-y); width: var(--r-filete-w); height: .35vw; }
  .bajada { left: var(--r-bajada-x); top: var(--r-bajada-y); width: var(--r-bajada-w); font-size: 2.54vw; line-height: 1.27; }
  .hoja { left: var(--r-hoja-x); top: var(--r-hoja-y); width: var(--r-hoja-w); height: var(--r-hoja-h); --hoja-x: 17deg; --hoja-p: 760px; }
  .hoja form { gap: .8vw; padding: 3.6vw 14vw 2.6vw; }
  .campo input { height: 5.5vw; min-height: 44px; font-size: 2.1vw; padding-left: 6vw; border-radius: 1vw; }
  .campo label { left: 6vw; font-size: 2.15vw; }
  .campo svg { left: 2vw; width: 2.6vw; height: 2.6vw; }
  .casilla { font-size: 1.75vw; grid-template-columns: 2.8vw 1fr; gap: 1.4vw; }
  .casilla input { width: 2.8vw; height: 2.8vw; min-width: 24px; min-height: 24px; }
  .hoja .boton { --b-alto: 8.2vw; font-size: 3.6vw; margin-top: .6vw; }
  .aviso-zoom { left: 10%; right: 10%; top: 96.2%; text-align: center; font-size: 1.75vw; }
}

/* ---------- horizontal (computadora, tableta acostada): la maqueta de escritorio ---------- */
@media (orientation: landscape) and (min-width: 820px) {
  .inicio { --st-ar: 1536 / 1024;
    --hh: min(calc(100svh - var(--franja) - 7.5rem), calc(100vw / 1.5 * .86));
    --sw: max(100vw, calc(var(--hh) / .875 * 1.5));
    --sh: calc(var(--sw) / 1.5);
    --st-top: min(0px, calc(var(--hh) - var(--sh) * .875)); --st-dx: calc((100vw - var(--sw)) / 2);
    height: var(--hh); min-height: 560px;
    --f-x: 8.1%; --f-y: 40.75%; --f-w: 4.05%; --f-h: 8.1%; --f-clip: polygon(0 0, 100% 1.5%, 100% 99%, 0 100%); --f-luz: 135deg;
    --w-x: 63.1%; --w-y: 0%; --w-w: 25.8%; --w-h: 55.6%;
    --l-x: 7.6%; --l-y: 30.2%; --l-r: 36%; }
  /* la capa de texto y la tarjeta usan las mismas coordenadas que la foto */
  .capa { position: absolute; left: 50%; top: var(--st-top); width: var(--sw); aspect-ratio: 1536 / 1024; transform: translateX(-50%); padding: 0; min-height: 0; display: block; container-type: inline-size; }
  .capa > * { position: absolute; margin: 0 !important; }
  .marca { left: 14%; top: calc(1.6% - var(--st-top)); gap: .8cqw; }
  .marca img { width: 4.4cqw; }
  .marca p { font-size: 1.25cqw; gap: .55cqw; letter-spacing: .2em; }
  .marca p span { font-size: max(11px, .62cqw); letter-spacing: .3em; }
  .titulo { left: 14.2%; top: calc(10.4% - var(--st-top)); width: 50cqw; font-size: 4.9cqw; line-height: 1.04; }
  .titulo span { display: inline; }
  .titulo br.br-esc { display: inline; }
  @media (max-width: 1240px) { .titulo { font-size: 4.3cqw; } }
  .filete { left: 14.6%; top: calc(27.9% - var(--st-top)); width: 8.6cqw; height: .2cqw; }
  .capa .cuando { left: 14.6%; top: calc(29.8% - var(--st-top)); width: 34cqw; max-width: none; display: flex; flex-wrap: wrap; white-space: nowrap; align-items: center; gap: .2cqw .55cqw; }
  .capa .cuando .kicker { order: 0; flex-basis: 100%; }
  .capa .cuando .kicker + .sep { display: none; }
  .capa .cuando .icono-cal { order: 1; }
  .capa .cuando .dato { order: 2; display: inline; }
  .capa .cuando .dato + .sep { order: 3; }
  .capa .cuando .dato:last-child { order: 4; }
  .cuando .kicker, .cuando .dato { font: 500 1.24cqw/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--marfil); gap: 0; }
  .cuando .kicker::before, .cuando .kicker::after { display: none; }
  .cuando .dato svg { display: none; }
  .cuando .sep { display: inline; color: var(--oro-claro); }
  .capa .cuando .icono-cal { display: block; width: 1.9cqw; height: 1.9cqw; color: var(--oro-claro); margin-right: .5cqw; }
  .bajada::before { content: ""; position: absolute; inset: -2.4cqw -3.6cqw; z-index: -1; background: radial-gradient(closest-side, rgba(8, 14, 24, .82), rgba(8, 14, 24, .5) 60%, rgba(8, 14, 24, 0)); }
  .bajada { left: 14.6%; top: calc(38.6% - var(--st-top)); width: 27cqw; font-size: max(15px, 1.12cqw); line-height: 1.5; }
  .hoja { left: 47.4%; bottom: 25.8%; width: 32.8cqw; min-width: 380px; --hoja-x: 0deg; filter: drop-shadow(0 1.6cqw 1.4cqw rgba(0, 0, 0, .5)) drop-shadow(0 .2cqw .3cqw rgba(0, 0, 0, .35)); }
  .hoja form { gap: .6cqw; padding: 1.9cqw 1.9cqw 1.6cqw; }
  .campo input { height: max(44px, 2.95cqw); font-size: max(15px, 1.05cqw); padding-left: max(38px, 2.6cqw); }
  .campo label { left: max(38px, 2.6cqw); font-size: max(15px, 1.05cqw); }
  .campo svg { left: .9cqw; width: max(17px, 1.2cqw); height: max(17px, 1.2cqw); }
  .casilla { font-size: max(14px, .88cqw); grid-template-columns: max(22px, 1.4cqw) 1fr; }
  .casilla input { width: max(22px, 1.4cqw); height: max(22px, 1.4cqw); }
  .hoja .boton { --b-alto: max(48px, 3.4cqw); font-size: max(17px, 1.5cqw); }
  /* el frente del portatarjetas va delante de la tarjeta: es la misma foto, recortada */
  .atril { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; clip-path: polygon(46.1% 73.3%, 81.6% 73.3%, 81.6% 82%, 46.1% 82%); }
  .atril img { width: 100%; height: 100%; object-fit: cover; }
  .aviso-zoom { left: 47.4%; top: 81.6%; width: 32.8cqw; min-width: 380px; text-align: center; font-size: max(13px, .88cqw); line-height: 1.35; }
}
.atril { display: none; }
.cuando .icono-cal { display: none; }
.br-esc { display: none; }

/* =====================================================================
   EL RECORRIDO · primeros planos del mismo cuarto
   ===================================================================== */
.plano { position: relative; overflow: hidden; isolation: isolate; }
.plano .foto { position: relative; container-type: inline-size; }
.plano .foto img { width: 100%; height: 100%; object-fit: cover; }
.plano .foto > picture { position: absolute; inset: 0; }
.plano .foto > picture img { position: absolute; inset: 0; }
.titular { display: none; }
.libreta .foto > picture.fondo { display: none; }
.libreta .lamina { position: absolute; inset: 0; container-type: inline-size; }
.libreta .lamina > picture { position: absolute; inset: 0; }
.libreta .lamina > picture img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .deriva { animation: deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes deriva { from { transform: scale(1.07) translateY(-1.5%); } to { transform: scale(1) translateY(1.5%); } }
  }
}
.texto { padding: 0 20px; }
.texto > * + * { margin-top: 14px; }
.texto h2 { font-size: 29px; line-height: 1.12; letter-spacing: -.01em; }
.texto p { font-size: 16px; line-height: 1.6; max-width: 36em; }
.texto .grande { font: 500 20px/1.4 var(--serif); color: var(--marfil); }
.cita { margin: 0; font: italic 500 22px/1.32 var(--serif); color: var(--marfil); }
.cita .comilla { color: var(--oro-claro); }

.cita-corta { font-size: 21px; }
.cta { padding: 26px 20px 0; display: grid; justify-items: start; gap: 12px; }
.texto .cta { padding-left: 0; padding-right: 0; }

/* --- 1 · la libreta: «Esta masterclass es para ti si…» --- */
.libreta { background: var(--noche-hondo); padding-top: 4px; }
.libreta .foto { width: max(100vw, 520px); margin-left: 50%; transform: translateX(-50%); aspect-ratio: 941 / 1672; }
.libreta .pagina {
  position: absolute; left: 51.6%; top: 52.3%; width: 57%; transform: translate(-50%, -50%) rotate(-8.6deg);
  color: var(--noche); font-size: max(15px, 2.9cqw);
}
.libreta h2 { color: var(--noche); font-size: max(25px, 5.2cqw); line-height: 1.08; padding-bottom: .55em; margin-bottom: .7em; border-bottom: 2px solid var(--oro); width: fit-content; }
.libreta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .62em; }
.libreta li { display: grid; grid-template-columns: 1.35em 1fr; gap: .55em; line-height: 1.34; color: #1F2A3F; }
.libreta li::before { content: ""; width: 1.2em; height: 1.2em; margin-top: .05em; border-radius: 50%; background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23FBF8F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }

/* --- 2 · la lámpara contra el panel: «Ya sabes…» --- */
.sabes { background: var(--noche); padding: 46px 0 40px; }
.sabes .foto { margin: 26px 0 26px; height: 430px; }
.sabes .foto img { object-position: 84% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 86%, transparent 100%); }
.sabes .cita-lampara { position: absolute; left: 20px; right: 34%; top: 50%; transform: translateY(-50%); font-size: max(23px, 6.3cqw); line-height: 1.22; }
.sabes .cita-lampara + .estrella-cita { position: absolute; left: 20px; bottom: 16%; width: 120px; color: var(--oro-claro); display: block; }

/* --- 3 · el tablero: «Te vas con tres cosas claras» --- */
.tablero { background: var(--noche-hondo); padding: 46px 0 46px; }
.tablero > .texto { margin-bottom: 18px; }
.tablero .foto { width: max(100vw, 480px); margin-left: 50%; transform: translateX(-50%); aspect-ratio: 941 / 1672; }
.tablero .foto > picture img { position: absolute; inset: 0; }
.tablero ol { list-style: none; margin: 0; padding: 0; counter-reset: cosa; }
.tablero li { position: absolute; left: 22.6%; width: 55.8%; height: 18.4%; padding: 6.8cqw 3.2cqw 2.4cqw; display: grid; grid-template-columns: auto 1fr; gap: 2.6cqw; align-items: start; color: #22293A; font-size: max(15px, 3.1cqw); line-height: 1.3; counter-increment: cosa; }
.tablero li:nth-child(1) { top: 15.6%; }
.tablero li:nth-child(2) { top: 39%; }
.tablero li:nth-child(3) { top: 62.6%; }
.tablero li::before { content: counter(cosa); font: 600 max(34px, 8cqw)/.9 var(--serif); color: var(--oro-tinta); }
.tablero li strong { color: var(--noche); font-weight: 700; }
.tablero .despues { margin-top: 22px; }

/* --- 4 · la taza de té: «No eres la única…» --- */
.unica { background: var(--noche-hondo); padding: 0 0 46px; }
.unica .foto { aspect-ratio: 16 / 11; }
.unica .foto img { object-position: 38% 50%; }
.unica .foto::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(180deg, rgba(12, 23, 38, 0), var(--noche-hondo)); }
.unica .texto { margin-top: -54px; position: relative; }
.unica .cifra { font: 600 21px/1.35 var(--serif); color: var(--marfil); }
.unica .cifra b { font-weight: 700; color: #E9C77F; }

/* --- 5 · su foto en el cuadro de la pared: «Quién te acompaña…» --- */
.acompana { background: var(--noche); padding: 0 0 46px; }
.acompana .foto { aspect-ratio: 1122 / 1402; }
.acompana .cuadro { position: absolute; left: 30.5%; top: 14.85%; width: 40.55%; height: 32.45%; overflow: hidden; }
.acompana .cuadro img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: sepia(.22) saturate(.94) brightness(.95); }
.acompana .cuadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(255, 196, 120, .38), rgba(255, 196, 120, 0) 55%, rgba(0, 0, 0, .2)); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .3); mix-blend-mode: soft-light; }
.acompana .foto::after { content: ""; position: absolute; inset: auto 0 0; height: 28%; background: linear-gradient(180deg, rgba(20, 36, 59, 0), var(--noche)); }
.acompana .texto { margin-top: -40px; position: relative; }

/* --- 6 · cuándo y dónde: la hoja con las horas --- */
.horario { background: var(--noche-hondo); padding: 46px 0 46px; }
.horario .hoja-horas { position: relative; margin: 20px 14px 0; padding: 22px 18px 20px; color: var(--tinta-papel); transform: rotate(-.6deg); filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .5)); }
.horario .hoja-horas::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 3px; background: image-set(url("assets/web/hoja-papel-700.webp") 1x, url("assets/web/hoja-papel-1400.webp") 2x) center / 100% 100% no-repeat, var(--papel); }
.hoja-horas p { font-size: 16px; line-height: 1.55; color: #2C3243; }
.hoja-horas p strong { color: var(--noche); }
.hoja-horas table { width: 100%; border-collapse: collapse; margin: 16px 0 18px; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hoja-horas caption { text-align: left; }
.hoja-horas th, .hoja-horas td { text-align: left; vertical-align: top; padding: 9px 0; border-top: 1px solid rgba(150, 86, 20, .35); color: #2C3243; }
.hoja-horas thead th { border-top: 0; padding-top: 0; font: 600 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-tinta); }
.hoja-horas td:first-child, .hoja-horas th:first-child { width: 36%; padding-right: 14px; font: 600 16px/1.4 var(--serif); color: var(--noche); }
.hoja-horas thead th:first-child { font: 600 12px/1.2 var(--sans); color: var(--oro-tinta); }
.hoja-horas p + p { margin-top: 10px; }

/* --- 7 · la ventana: preguntas --- */
.preguntas { background: var(--noche); padding: 0 0 46px; }
.preguntas .foto { height: 300px; }
.preguntas .foto img { object-position: 50% 42%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.preguntas .texto { margin-top: -30px; position: relative; }
.faq { margin-top: 18px; border-top: 1px solid rgba(206, 170, 96, .35); }
.faq details { border-bottom: 1px solid rgba(206, 170, 96, .35); }
.faq summary { display: grid; grid-template-columns: 1fr 22px; gap: 12px; align-items: center; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; font: 600 18px/1.3 var(--serif); color: var(--marfil); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 4v14M4 11h14' stroke='%23CEAA60' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--tinta-clara); }
.faq summary:hover { color: #FFF8E8; }

/* --- 8 · el sillón: «Reserva tu lugar» --- */
.reserva { background: var(--noche-hondo); padding: 0 0 40px; }
.reserva .foto { aspect-ratio: 4 / 3; }
.reserva .foto img { object-position: 62% 50%; }
.reserva .foto::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, rgba(12, 23, 38, 0), var(--noche-hondo)); }
.reserva .texto { margin-top: -60px; position: relative; }
.reserva .cierre { font: italic 500 24px/1.25 var(--serif); color: var(--marfil); }
.pie { padding: 34px 20px 40px; border-top: 1px solid rgba(206, 170, 96, .25); text-align: center; font-size: 14px; color: #B9B1A1; background: var(--noche-hondo); }
.pie p + p { margin-top: 8px; }
.pie .falta { color: #B9B1A1; }

/* ---------- escritorio: el recorrido a lo ancho ---------- */
@media (min-width: 900px) {
  .texto { padding: 0; }
  .texto h2 { font-size: clamp(34px, 3vw, 46px); }
  .texto p { font-size: 18px; }
  .cita { font-size: clamp(26px, 2.2vw, 34px); }
  .cta { padding: 34px 0 0; justify-items: center; }
  .boton { font-size: 21px; --b-alto: 58px; padding: 0 2em; }

  .libreta { display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; background: var(--marfil); padding: 0; }
  .libreta .foto { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; transform: none; aspect-ratio: auto; height: min(1240px, 180vh); }
  .libreta .foto > picture.fondo { display: block; position: absolute; inset: 0; overflow: hidden; }
  .libreta .foto > picture.fondo img { filter: blur(26px) brightness(.62) saturate(1.1); transform: scale(1.12); }
  .libreta .foto > .lamina { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 941 / 1672; transform: translateX(-50%); container-type: inline-size; box-shadow: 0 0 80px 30px rgba(10, 6, 2, .35); }
  .libreta .foto > .lamina img { width: 100%; height: 100%; object-fit: cover; }
  .libreta .pagina { font-size: 2.85cqw; }
  .libreta .pagina h2 { display: none; }
  .libreta .titular { grid-column: 1 / -1; grid-row: 1; height: 150px; display: grid; place-items: center; align-content: center; gap: 14px; }
  .titular .estrella-sola { width: 300px; color: var(--oro); }
  .titular .h2-banda { font: 600 clamp(36px, 3.2vw, 50px)/1.1 var(--serif); color: var(--noche); }

  .sabes { padding: 0; display: grid; grid-template-columns: 1fr minmax(0, 560px) minmax(0, 560px) 1fr; column-gap: 64px; }
  .sabes .foto { grid-column: 1 / -1; grid-row: 1; margin: 0; height: min(78vh, 720px); }
  .sabes .foto img { object-position: 70% 50%; -webkit-mask-image: none; mask-image: none; }
  .sabes .cita-lampara { left: max(6vw, calc(50% - 560px)); right: auto; width: min(44vw, 640px); font-size: clamp(34px, 3.4vw, 54px); }
  .sabes .cita-lampara + .estrella-cita { left: max(6vw, calc(50% - 560px)); bottom: 22%; width: 160px; }
  .sabes .antes { grid-column: 2; grid-row: 2; padding: 64px 0 72px; }
  .sabes .despues { grid-column: 3; grid-row: 2; padding: 64px 0 72px; }
  .sabes .antes h2 { font-size: clamp(34px, 3vw, 46px); }

  .tablero { padding: 0; }
  .tablero > .texto:not(.despues) { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 34%; display: grid; place-content: center; text-align: center; margin: 0; pointer-events: none; }
  .tablero > .texto:not(.despues) h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .7); font-size: clamp(36px, 3.3vw, 52px); }
  .tablero .foto { width: 100%; margin: 0; transform: none; aspect-ratio: 1536 / 1024; max-height: 100vh; }
  .tablero li { width: 24.2%; height: 25.8%; padding: 4.6cqw 1.6cqw 1.2cqw; gap: 1.2cqw; font-size: clamp(15px, 1.3cqw, 20px); top: 36% !important; }
  .tablero li:nth-child(1) { left: 11.9%; }
  .tablero li:nth-child(2) { left: 38.6%; }
  .tablero li:nth-child(3) { left: 64.2%; }
  .tablero li::before { font-size: 3.6cqw; }
  .tablero .despues { position: absolute; left: 0; right: 0; bottom: 6%; z-index: 2; margin: 0; padding: 0 20px; display: grid; justify-items: center; gap: 18px; text-align: center; }
  .tablero .despues p { color: var(--marfil); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); font-size: 18px; }
  .tablero .despues .cta { padding: 0; }

  .unica, .acompana, .preguntas, .reserva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 0; }
  .unica .foto, .acompana .foto, .preguntas .foto, .reserva .foto { height: 100%; min-height: 640px; aspect-ratio: auto; }
  .unica .texto, .acompana .texto, .preguntas .texto, .reserva .texto { margin: 0; padding: 72px max(56px, 6vw); max-width: 720px; }
  .unica .foto::after, .acompana .foto::after, .reserva .foto::after { display: none; }
  .acompana .foto { order: 2; aspect-ratio: 1122 / 1402; height: auto; min-height: 0; }
  .acompana .texto { justify-self: end; }
  .preguntas { align-items: start; }
  .preguntas .foto { position: sticky; top: 0; height: 100vh; }
  .preguntas .foto img { -webkit-mask-image: none; mask-image: none; }
  .preguntas .texto { padding-top: 96px; padding-bottom: 96px; }
  .reserva { grid-template-columns: 1fr; }
  .reserva .foto { grid-row: 1; grid-column: 1; height: min(92vh, 820px); min-height: 560px; }
  .reserva .foto img { object-position: 50% 50%; }
  .reserva .texto { grid-row: 1; grid-column: 1; align-self: center; max-width: min(46vw, 640px); margin-left: max(6vw, calc(50% - 600px)); padding: 0; }

  .horario { display: grid; grid-template-columns: 1fr minmax(0, 520px) minmax(0, 620px) 1fr; column-gap: 64px; align-items: start; padding: 110px 0; background: var(--noche-hondo) image-set(url("assets/web/escena-escritorio-960.webp") 1x, url("assets/web/escena-escritorio-1536.webp") 2x) 50% 92% / cover no-repeat; position: relative; }
  .horario::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 23, 38, .92) 0%, rgba(12, 23, 38, .78) 45%, rgba(12, 23, 38, .35) 100%); z-index: -1; }
  .horario > .texto { grid-column: 2; position: sticky; top: 80px; }
  .horario .hoja-horas { grid-column: 3; margin: 0; padding: 34px 36px 30px; }
  .pie { font-size: 15px; }
}

/* ---------- la pared del consultorio detrás del texto (placa lampara-panel, la parte del panel liso) ---------- */
.sabes, .unica, .acompana, .preguntas {
  background: linear-gradient(rgba(12, 22, 38, .3), rgba(12, 22, 38, .3)), image-set(url("assets/web/panel-pared-380.webp") 1x, url("assets/web/panel-pared-760.webp") 2x) 50% 50% / cover no-repeat, var(--noche);
}
.unica .foto::after { background: linear-gradient(180deg, rgba(14, 26, 44, 0), rgba(14, 26, 44, .92)); }
.acompana .foto::after { background: linear-gradient(180deg, rgba(14, 26, 44, 0), rgba(14, 26, 44, .92)); }
/* teléfono: el título de las tres cosas va sobre el marco del tablero */
@media (max-width: 899px) {
  .tablero { padding-top: 0; }
  .tablero > .texto:not(.despues) { position: absolute; z-index: 2; left: 0; right: 0; top: calc(max(100vw, 480px) * 1.777 * .079); margin: 0; text-align: center; padding: 0 16%; }
  .tablero > .texto:not(.despues) h2 { font-size: 25px; text-shadow: 0 2px 12px rgba(0, 0, 0, .75); }
  .tablero > .foto { margin-top: 0; }
  .tablero .despues { padding-top: 22px; margin-top: 0; }
}
/* ---------- versión publicada (30-oct) ---------- */
/* Las habitaciones de la 3 en «Esta masterclass es para ti si…» (Mey: «Los espacios de habitación de la 3 en partes
   relacionadas al cansancio y reacciones»). Van en lugar del círculo dorado de cada punto. */
.libreta ul.con-cuarto { gap: .8em; }
.libreta ul.con-cuarto li { grid-template-columns: 3.3em 1fr; gap: .7em; align-items: center; }
.libreta ul.con-cuarto li::before { display: none; }
.libreta .cuarto { width: 3.3em; height: 3.3em; object-fit: cover; border-radius: .35em; box-shadow: 0 2px 8px rgba(20, 36, 59, .35); }
/* La sala por la ventana queda a la derecha de la frase de Mey, no debajo (en el teléfono la frase ocupa el 66 % de la izquierda). */
.sabes .foto img { object-position: 40% 50%; }
@media (min-width: 900px) { .sabes .foto img { object-position: 70% 50%; } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avisoform { display: none; margin: 2px 0 4px; color: #F6D9A8; font: 600 15px/1.4 var(--sans); }
.boton[disabled] { opacity: .7; cursor: wait; }


/* =====================================================================
   v2 · 8-nov-2026 · FONDO MARFIL (manual de Mey v5, que es la ley: DEC-20261028-1154)
   R39: el marfil #F3EFE4 es el fondo principal de las páginas. R37: el azul noche queda para la portada
   (primera pantalla), las citas y las piezas de autoridad («Quién te acompaña»). §9: «Azul noche, marfil y
   dorado, con tres colores como máximo por pieza» (R35): no entran el azul raíz ni la pizarra; el texto de
   apoyo es el mismo azul noche, más suave. R45 y R46: sobre marfil, el dorado que se lee es el oro tinta.
   Las fotos del consultorio y de las habitaciones que escogió Mey el 27-oct siguen todas: donde una foto
   oscura era fondo de sección, ahora va enmarcada o fundida a marfil.
   Este bloque va al final de estilos.css (lo agrega armar-registro-v2.py) y gana por orden.
   ===================================================================== */
:root { --texto-2: rgba(20, 36, 59, .84); --raya: rgba(150, 86, 20, .32); color-scheme: light; }
html { scrollbar-color: var(--oro-tinta) var(--marfil); }
body { background: var(--marfil); color: var(--noche); }
::selection { background: var(--noche); color: var(--marfil); }
:focus-visible { outline-color: var(--noche); }

/* ---------- ajustes del manual que la v1 no tenía (los mismos que ya lleva la venta v4) ---------- */
.titulo { font-weight: 600; }                     /* R50 y R55: Literata 600 sobre azul noche (iba en 800) */
.marca img { display: none; }                     /* R71: el perfil del logo no va solo; el logo completo va en el pie */
.marca p { font: 600 19px/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: var(--marfil); }   /* R57 */
.marca p span { font: 500 13px/1.2 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--oro-claro); }
.filete { width: 64px; }                          /* R77 */
.estrella, .estrella-cita { display: none !important; }   /* R80: una sola estrella por pieza (queda la del titular) */
strong { font-weight: 500; }                      /* R51: Hanken 400 y 500 */
.cita { font-style: normal; font-weight: 400; }   /* R50 y R54: citas en Literata 400 sobre marfil */
.avisoform { color: var(--noche); font-weight: 500; }   /* el aviso de error va sobre el papel: en azul noche, legible */
.tablero li strong { font-weight: 500; }          /* R51 */
.unica .cifra b { font-weight: 600; }             /* R50: Literata hasta 600 */
.libreta h2 { font-weight: 500; }                 /* R54: título sobre claro en 500 */
.reserva .cierre { font-weight: 400; }            /* R50: la cursiva de Literata va en 400 */

/* ---------- botones sobre claro: azul noche con letra marfil (R38/R44: el oro claro es para botones sobre azul noche) ---------- */
.boton { font-family: var(--sans); font-weight: 500; color: var(--marfil); background: var(--noche);
  box-shadow: inset 0 1px 0 rgba(243, 239, 228, .14), 0 10px 22px -12px rgba(20, 36, 59, .7); }
.boton svg { color: var(--oro-claro); }
.boton:hover { filter: none; background: #1d3352; }
.boton:focus-visible { outline: 3px solid var(--oro-tinta); outline-offset: 4px; }

/* ---------- texto sobre marfil ---------- */
h1, h2, h3 { color: var(--noche); }
strong { color: var(--noche); }
.texto h2 { font-weight: 500; }                   /* R54: títulos sobre marfil en 500 */
.texto p, .faq details p { color: var(--texto-2); }
.texto .grande, .cita, .reserva .cierre { color: var(--noche); }
.cita .comilla { color: var(--oro-tinta); }
.cita .fuente { display: block; margin-top: 10px; font: 500 14px/1.4 var(--sans); font-style: normal; letter-spacing: 0; color: var(--oro-tinta); }   /* R79, R86 */
.sabes .foto .cita .fuente { color: var(--oro-claro); font-size: 15px; }

/* ---------- lo que sigue en azul noche: la portada, la cita de la sala y «Quién te acompaña» (R37) ---------- */
.inicio h1, .acompana h2 { color: var(--marfil); }
.acompana .texto p { color: var(--tinta-clara); }
.acompana .texto .grande, .sabes .foto .cita, .acompana strong { color: var(--marfil); }
.sabes .foto .cita .comilla { color: var(--oro-claro); }
.acompana .texto h2 { font-weight: 600; }         /* R55 */
.inicio :focus-visible, .acompana :focus-visible { outline-color: var(--oro-claro); }
.hoja .boton svg { color: var(--oro-claro); }

/* --- 1 · la libreta: la foto fundida a marfil arriba y abajo --- */
.libreta { background: var(--marfil); padding: 28px 0 8px; }
.libreta .foto { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 90%, transparent 100%); }
.libreta h2 { border-bottom: 0; padding-bottom: 0; }
.libreta h2::after { content: ""; display: block; width: 64px; height: 2px; margin-top: .45em; background: var(--oro); }

/* --- 2 · «Ya sabes…»: el texto en marfil; la sala por la ventana queda como franja de cita en azul noche --- */
.sabes { background: var(--marfil); padding: 52px 0 44px; }
.sabes .foto { background: var(--noche); }
.sabes .foto img { -webkit-mask-image: none; mask-image: none; }

/* --- 3 · el tablero: el título sale de la foto y va sobre marfil; la foto, fundida arriba y abajo --- */
.tablero { background: var(--marfil); }
.tablero .foto { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.tablero > .texto:not(.despues) h2 { text-shadow: none; color: var(--noche); }
.tablero .despues p { text-shadow: none; }

/* --- 4 · el té: la foto se funde a marfil y el texto queda debajo --- */
.unica { background: var(--marfil); }
.unica .foto::after { background: linear-gradient(180deg, rgba(243, 239, 228, 0), var(--marfil)); }
.unica .texto { margin-top: -28px; }
.unica .cifra { color: var(--noche); }
.unica .cifra b { color: var(--oro-tinta); }

/* --- 6 · el horario: la hoja de papel sobre marfil --- */
.horario { background: var(--marfil); }
.horario .hoja-horas { filter: drop-shadow(0 14px 22px rgba(20, 36, 59, .16)) drop-shadow(0 2px 3px rgba(20, 36, 59, .1)); }
.hoja-horas p, .hoja-horas th, .hoja-horas td { color: var(--texto-2); }

/* --- 7 · la ventana con lluvia: la foto se funde a marfil y las preguntas quedan sobre marfil --- */
.preguntas { background: var(--marfil); }
.faq { border-top-color: var(--raya); }
.faq details { border-bottom-color: var(--raya); }
.faq summary { color: var(--noche); font-weight: 500; }
.faq summary:hover { color: var(--oro-tinta); }
.faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M11 4v14M4 11h14' stroke='%23965614' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --- 8 · el sillón: la foto se funde a marfil y el texto queda debajo --- */
.reserva { background: var(--marfil); }
.reserva .foto::after { background: linear-gradient(180deg, rgba(243, 239, 228, 0), var(--marfil)); }
.reserva .texto { margin-top: -30px; }

/* --- pie sobre marfil, con el logo oficial (R60, R63, R66, R67) --- */
.pie { background: var(--marfil); color: var(--texto-2); border-top: 1px solid var(--raya); }
.pie img { width: 180px; height: auto; margin: 0 auto 45px; }

/* ---------- teléfono ---------- */
@media (max-width: 899px) {
  /* el título no se monta sobre la parte fundida de la foto: queda sobre marfil liso */
  .unica .texto { margin-top: -6px; }
  .preguntas .texto { margin-top: 6px; }
  .preguntas .foto img { -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }
  .reserva .foto::after { height: 46%; }
  .reserva .texto { margin-top: -4px; }
  .tablero { padding-top: 48px; }
  .tablero > .texto:not(.despues) { position: static; padding: 0 20px; margin-bottom: 14px; text-align: left; }
  .tablero > .texto:not(.despues) h2 { font-size: 29px; }
}

/* ---------- computadora ---------- */
@media (min-width: 900px) {
  .libreta { padding: 0 0 72px; }
  .libreta .foto { -webkit-mask-image: none; mask-image: none; }
  .libreta .foto > picture.fondo { display: none; }
  .libreta .foto > .lamina { border-radius: 8px; overflow: hidden; box-shadow: 0 34px 60px -26px rgba(20, 36, 59, .55), 0 4px 10px rgba(20, 36, 59, .12); }
  .titular .h2-banda { font-weight: 500; }

  .sabes .antes, .sabes .despues { padding: 72px 0 80px; }

  .tablero { padding: 96px 0 88px; }
  .tablero > .texto:not(.despues) { position: static; height: auto; display: block; text-align: center; margin: 0 auto 40px; padding: 0 20px; }
  .tablero .foto { -webkit-mask-image: none; mask-image: none; width: min(1200px, calc(100% - 96px)); margin: 0 auto; max-height: none; border-radius: 8px; overflow: hidden; box-shadow: 0 34px 60px -28px rgba(20, 36, 59, .55); }
  .tablero .despues { position: static; margin: 40px auto 0; }
  .tablero .despues p { color: var(--texto-2); }

  .unica .foto { -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
  .preguntas .foto img { -webkit-mask-image: linear-gradient(90deg, #000 74%, transparent); mask-image: linear-gradient(90deg, #000 74%, transparent); }

  .reserva { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reserva .foto { grid-column: 2; grid-row: 1; height: min(86vh, 760px); min-height: 560px; -webkit-mask-image: linear-gradient(270deg, #000 72%, transparent); mask-image: linear-gradient(270deg, #000 72%, transparent); }
  .reserva .texto { grid-column: 1; grid-row: 1; justify-self: end; max-width: 640px; margin: 0; padding: 72px max(56px, 6vw); }

  .horario { background: var(--marfil); }
  .horario::before { display: none; }
}


/* ===== v3 · 8-nov-2026 15:40 · arreglos de la revisión independiente (REVISION-MANUAL-PAGINAS-CARRITO-MEY-2026-11-08.md) ===== */
/* R55: sobre azul noche, las citas van en 500 (la de la sala y las de «Quién te acompaña») */
.sabes .foto .cita, .cita-lampara, .acompana .cita { font-weight: 500; }
/* R51: Hanken en 400 y 500 (650 solo en rótulos): «Hora» y «Dónde» */
.hoja-horas thead th, .hoja-horas thead th:first-child { font-weight: 500; }
/* La foto que deriva no se sale de su marco: sin raya oscura sobre los títulos ni barrita al borde (teléfono) */
.plano .foto { overflow: hidden; }
@media (max-width: 899px) { .unica .texto, .reserva .texto { margin-top: 10px; } }   /* el título empieza debajo de la foto, no encima */
/* R37/R34: los fondos azul noche sin foto encima, en el código de su paleta */
.inicio, .cincuenta, .cierre-sala { background-color: var(--noche); }