/* Lume v2 — tema WordPress. Port fiel de design-src/v2/prototipo/css/lume.css (prototipo congelado, 9.ª pasada, 17-sep-2026).
   Tokens medidos en goldustspa y corregidos a AA. Al final: fuentes self-hosted, cromo de páginas interiores, wizard, contacto, legales, 404. */
:root {
  /* Superficies (goldust, medidas) */
  --luz: 0;                  /* 8.ª pasada: 0 arriba (atardecer) → 1 abajo (pleno). Lo escribe el JS desde el scroll; todo fondo deriva de acá */
  --crema-0: #EDE3D6; --crema-1: #F7F3EC;   /* extremos del fondo (brief 17-sep) */
  --crema: color-mix(in oklab, var(--crema-0), var(--crema-1) calc(var(--luz) * 100%));   /* fondo: amanece con el scroll */
  --barra: #E8D5C6;          /* barra superior / bloques */
  --tarjeta-0: #F6EFE6; --tarjeta-1: #FDFBF7;
  --tarjeta: color-mix(in oklab, var(--tarjeta-0), var(--tarjeta-1) calc(var(--luz) * 100%));   /* blanco roto de tarjetas, un escalón sobre el fondo en los dos extremos */
  --ph: #EAD9CC;             /* bloque placeholder de medio */
  --hero-fallback: #6B4E3D;  /* fondo del héroe si faltan video y póster: blanco encima da 7,5:1 */

  /* Tinta. El #D0B09C de goldust da 1,78:1 y el #B98D74 del plan 2,60:1 sobre crema: no llegan.
     display: 3,26:1 → AA sólo para ≥ 24 px. texto: 4,75:1 crema / 5,09:1 tarjeta. barra: 4,77:1 sobre --barra. */
  --rosa-display: #9C765E;   /* display ≥ 24 px: 3,21:1 sobre --crema-0 y 3,67 sobre --crema-1 (8.ª: el #A67F67 daba 2,83 sobre #EDE3D6) */
  --rosa-titulo: #946E58;    /* títulos 24–40 px: 4,0:1 crema / 4,28 tarjeta (AA grande) */
  --rosa-texto: #845C42;     /* enlaces y botones chicos: 4,61:1 sobre --crema-0 / 5,29 sobre --crema-1 (8.ª: #8B6146 daba 4,25 sobre #EDE3D6) */
  --rosa-barra: #775341;     /* texto sobre --barra: 4,77:1 */
  --gris: #605E5B;           /* cuerpo: 5,10:1 sobre --crema-0 / 5,84 sobre --crema-1; 4,54 sobre barra */
  --gris-rotulo: #66625E;    /* rótulos 12 px: 4,77:1 sobre --crema-0 / 5,47 sobre --crema-1 (8.ª: #6F6A66 daba 4,21 sobre #EDE3D6) */
  --linea: rgba(96, 94, 91, .18);
  --velo-foto: rgba(232, 213, 198, .14);
  --blanco: #FFFFFF;

  /* Tipografía: Fraunces (SOFT 100 + opsz alto: terminales suaves como Pangaia)
     + Figtree (humanista geométrica, misma calidez que Open Sans con menos ancho). */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --fvs: 'opsz' 9, 'SOFT' 100;   /* opsz 9: ancho y de trazo parejo, lo más cerca de Pangaia; 144 es condensado y fino */
  --f-texto: 'Figtree', 'Open Sans', system-ui, sans-serif;

  /* Escala de espaciado */
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 7rem; --s-8: 10rem; --bloque: clamp(140px, 16cqw, 260px);
  --gutter: clamp(1.25rem, 4cqw, 4rem);
  --radio-foto: clamp(28px, 3.5cqw, 56px);   /* esquinas 40–60 px en goldust */
  --radio-card: 24px;

  /* Tiempos medidos */
  --t-puerta: 500ms;
  --t-menu: 900ms;
  --t-btn: 500ms;
  --t-faq: 200ms;
  --t-reveal: 600ms;
  --t-hover: 220ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* 5.ª pasada (16-sep): medidos en ilfalconiere.it / muselaserspa.com + plus propio */
  --t-scale: 1200ms;  --ease-scale: cubic-bezier(.2, .7, .2, 1);     /* ilfalconiere aux-scale-down */
  --t-luz-cubre: 600ms; --espera-luz: 400ms; --t-luz-out: 600ms;   /* 8.ª: transición de luz — el bloom cubre en 600 ms ease-in, la página nueva llega con el «L.» latiendo 400 ms y descubre en 600 */
  --luz-llegada: #F1E4D2;                                            /* luz cálida con la que llega la página nueva */
  --t-bloom: 500ms; --t-penumbra: 1500ms;                            /* 8.ª: encender la luz — bloom 500 ms, la penumbra funde en 1,5 s ease-out */
  --penumbra: rgba(38, 28, 20, .72);
  --brasa: #FFBE82;
  /* 9.ª pasada (17-sep): texto que se enciende (muse) e imagen que se revela (ilfalconiere), traducidos a la luz */
  --apagado: color-mix(in oklab, var(--rosa-display) 30%, var(--crema));   /* tinta apagada de la que arranca cada línea */
  --t-enciende: 450ms; --t-paso-texto: 900ms; --t-revela: 1400ms; --t-paso-img: 1100ms; --t-hover-luz: 600ms;
  --ease-luz: cubic-bezier(.2, .7, .2, 1);
  --f-calida: sepia(.22) saturate(.85) contrast(.95) brightness(1.03) blur(0);           /* gradación cálida de siempre, con blur(0) para que la lista de filtros interpole */
  --f-sobreexpuesta: sepia(.22) saturate(.8) contrast(.85) brightness(1.35) blur(6px);   /* estado de entrada: quemada y blanda */
  --f-hover-luz: sepia(.22) saturate(.85) contrast(.95) brightness(1.09) blur(0);        /* «le da la luz»: +6 % de brillo al pasar por una tarjeta */                                                  /* rgba(255,190,130): resplandor de la brasa, del halo y del indicador de fase sobre el héroe */
  --t-inclinada: 600ms;                                              /* muse rotate(-8deg) → 0 */
  --sombra-suave: 0 30px 60px rgba(96, 94, 91, .18);                 /* gris a 18 %: sombra que no ensucia la crema */
  --noche: #3C2618;                                                  /* mismo marrón del velo del héroe, opaco */
  --halo: rgba(255, 190, 130, .28);                                  /* luz cálida «Lume»: el mismo ámbar de la brasa, a 28 % en soft-light */
  --sticky-top: 140px;                                               /* muse img.sticky: 84 px de cabecera + 56 de aire */

  /* 6.ª pasada (16-sep): coreografía de entrada, héroe rotativo, zonas, galería, slider, desplegable — tiempos del video de referencias */
  --t-coreo: 450ms;   --paso-linea: 100ms; --paso-chip: 80ms;         /* muse: título línea a línea 450 ms, +100 por línea; chips +80 */
  --t-kb: 6000ms;     --ease-kb: cubic-bezier(.16, 1, .3, 1);          /* Ken Burns del héroe 1.08 → 1 en 6 s, ease-out largo */
  --t-clip: 1000ms;   --clip-cada: 9000ms;                            /* ilfalconiere: fundido cruzado 1 s cada 9 s */
  --t-zona: 500ms;                                                    /* muse our services: fundido cruzado del marco */
  --velo-ficha: rgba(60, 38, 24, .62);                                /* velo cálido de la ficha: --noche al 62 % abajo, 18 % arriba */
  --tarjeta-92: rgba(251, 248, 243, .92);                             /* tarjeta «Reservá tu turno» sobre el video */
}

/* ---------- Reseteo mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--crema); color: var(--gris); font: 400 16px/1.6 var(--f-texto); container-type: inline-size; isolation: isolate; }   /* isolate: la ventana (z −1) pinta sobre el fondo del body y debajo del contenido */
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--rosa-texto); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), 1360px); margin-inline: auto; min-width: 0; }
.cms { overflow-wrap: anywhere; }

/* ---------- Tipografía ---------- */
.display { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); line-height: 1.1; letter-spacing: .01em; color: var(--rosa-display); }
.display em, .display i { font-style: italic; font-weight: 300; }
.display--xxl { font-size: clamp(44px, 5.6cqw, 80px); }
.display--xl { font-size: clamp(40px, 4.5cqw, 64px); }
.display--l  { font-size: clamp(30px, 2.8cqw, 40px); color: var(--rosa-titulo); }
.display--m  { font-size: clamp(24px, 2.1cqw, 30px); color: var(--rosa-titulo); }
@media (min-width: 1600px) { .display--xl { font-size: 72px; } }
.rotulo { font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); }
.rotulo--claro { color: var(--blanco); }
p + p { margin-top: 1em; }
.lead { font-size: 18px; }
.medida, .card__text, .ficha__sec p:not(.ficha__lead), .pro__bio { max-width: 42ch; }

/* ---------- Placeholders de medios ---------- */
.ph { position: relative; overflow: hidden; background: var(--ph); aspect-ratio: var(--ar, 3/4); margin: 0; min-width: 0; }
.ph::after { content: attr(data-file); position: absolute; inset: auto 0 0 0; padding: 12px 16px; font: 500 12px/1.4 var(--f-texto); letter-spacing: .06em; color: var(--rosa-barra); text-align: center; overflow-wrap: anywhere; }
.ph img, .ph video, .hero__poster, .hero__media video { filter: sepia(.22) saturate(.85) contrast(.95) brightness(1.03); }
.ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph::before { content: ''; position: absolute; inset: 0; z-index: 2; background: var(--velo-foto); pointer-events: none; }
.ph--redonda { border-radius: 40px; }
.ph--arco { border-radius: 9999px 9999px 40px 40px; }

/* ---------- Botones ---------- */
.pill { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.4em; border-radius: 9999px; border: 1px solid var(--rosa-display); background: rgba(255, 255, 255, .2); font-weight: 500; line-height: 1; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.pill:hover, .pill:focus-visible { background: rgba(255, 255, 255, 0); }
.pill--solid { background: var(--rosa-texto); color: var(--blanco); border-color: var(--rosa-texto); }
.pill--solid:hover, .pill--solid:focus-visible { background: var(--rosa-barra); border-color: var(--rosa-barra); }

/* «Reservar 60 min →»: etiqueta 16 px → 0 en 500 ms (goldust translate-x-4 → 0) */
.btn-arrow { display: inline-flex; align-items: center; gap: 12px; color: var(--rosa-texto); font-weight: 500; font-size: 14px; line-height: 1; }
.btn-arrow__circle { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.btn-arrow__label { translate: 16px 0; transition: translate var(--t-btn) var(--ease); }
.btn-arrow:hover .btn-arrow__label, .btn-arrow:focus-visible .btn-arrow__label { translate: 0 0; }
.btn-arrow:hover .btn-arrow__circle, .btn-arrow:focus-visible .btn-arrow__circle { background: var(--rosa-texto); color: var(--blanco); }
.btn-arrow--solid .btn-arrow__circle { background: var(--rosa-texto); color: var(--blanco); }
.btn-arrow--solid:hover .btn-arrow__circle { background: var(--rosa-barra); }

/* ---------- Puerta (8.ª pasada: encender la luz) ----------
   El sitio nace en penumbra (html.penumbra, lo pone el script del <head>): velo cálido oscuro fijo sobre todo, videos en póster, halo apagado,
   textos del héroe al 40 %. La puerta es transparente: monograma con brasa, una pastilla, una línea. Al clic el JS dispara el bloom desde el punto
   del clic (.luz), quita html.penumbra (el velo funde 1,5 s ease-out) y arranca los videos y la coreografía. Reduce: fundido plano 400 ms. */
.velo-noche { position: fixed; inset: 0; z-index: 58; background: var(--penumbra); opacity: 0; pointer-events: none; }
html.penumbra, html.penumbra body { overflow: hidden; height: 100%; }   /* con la puerta abierta no se scrollea (bug 17-sep: los efectos se veían debajo del velo) */
html.penumbra .velo-noche { opacity: 1; }
html.encendiendo .velo-noche { transition: opacity var(--t-penumbra) ease-out; }
html.penumbra .halo { opacity: 0; }
html.encendiendo .halo { transition: opacity var(--t-penumbra) ease-out; }
html.penumbra .hero__texto, html.penumbra .accesos { opacity: .4; }
html.encendiendo .hero__texto, html.encendiendo .accesos { transition: opacity var(--t-penumbra) ease-out; }
html.penumbra .hero__poster { animation-play-state: paused; }
.puerta { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; text-align: center; color: var(--crema-1); opacity: 1; transition: opacity 300ms var(--ease), visibility 0s 300ms; }
.puerta.is-leaving { opacity: 0; visibility: hidden; }
html:not(.penumbra):not(.encendiendo) .puerta { display: none; }   /* visitas siguientes: no existe ni un cuadro */
.puerta__logo { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 72px; line-height: 1; color: var(--crema-1); margin-bottom: var(--s-4); }
.puerta__logo .brasa { width: 11px; height: 11px; background: var(--brasa); }
.puerta .pill { color: var(--crema-1); border-color: rgba(247, 243, 236, .7); background: rgba(38, 28, 20, .3); }
.puerta .pill:hover, .puerta .pill:focus-visible { background: var(--crema-1); color: var(--rosa-barra); border-color: var(--crema-1); }
.puerta__nota { margin-top: var(--s-3); font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 243, 236, .85); }
html.gate-open { overflow: hidden; }

/* ---------- Cabecera ---------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; padding-inline: var(--gutter); color: var(--blanco); transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.header.is-solid, body.menu-open .header, .header--solida { background: var(--barra); color: var(--gris); }
.header:not(.is-solid):not(.header--solida) .pill { border-color: currentColor; }
body.menu-open .header .pill { border-color: var(--rosa-display); }
.header__izq { justify-self: start; }
.header__der { justify-self: end; display: flex; align-items: center; gap: var(--s-3); }
.logo { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 40px; line-height: 1; display: inline-flex; align-items: baseline; gap: 3px; }
/* 8.ª pasada — la brasa: el punto del «L.» late 4 s (scale 1 → 1.25, resplandor ámbar 14 px). El mismo punto va delante de cada rótulo de fase (late sólo el de la sección visible) */
.brasa { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa-display); translate: 0 -1px; box-shadow: 0 0 0 rgba(255, 190, 130, 0); animation: latir 4s ease-in-out infinite; }
@keyframes latir { 0%, 100% { scale: 1; box-shadow: 0 0 0 rgba(255, 190, 130, 0); } 50% { scale: 1.25; box-shadow: 0 0 14px rgba(255, 190, 130, .7); } }
.header:not(.is-solid):not(.header--solida) .brasa { background: var(--brasa); }   /* sobre el video del héroe el punto es ámbar; sobre crema, rosa (3,2:1) */
body.menu-open .header .brasa { background: var(--rosa-display); }
.header__centro { justify-self: center; position: relative; display: inline-flex; align-items: baseline; }
.header__fase { position: absolute; left: calc(100% + 12px); top: 50%; translate: 0 -50%; font: 500 11px/1 var(--f-texto); letter-spacing: .12em; color: var(--rosa-display); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity 300ms var(--ease); ;color:#7E5A44}
.header__fase.is-on { opacity: 1; }
.header:not(.is-solid):not(.header--solida) .header__fase { color: var(--brasa); }
.header.is-solid .header__fase, .header--solida .header__fase { color: #7E5A44; }   /* QA: sobre la barra sólida el rosa display daba 2,3–2,9; con #7E5A44 ≥ 4,5 */
.header__izq { display: flex; align-items: center; gap: var(--s-3); }
.nav-link { display: inline-block; font: 500 13px/1 var(--f-texto); letter-spacing: .04em; padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease); }
.nav-link:hover, .nav-link:focus-visible { border-color: currentColor; }
.header.is-solid .logo, body.menu-open .header .logo, .header--solida .logo { color: var(--rosa-titulo); }
.btn-menu { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; line-height: 1; }
.btn-menu__linea { width: 64px; height: 1px; background: currentColor; transform-origin: right center; transition: transform var(--t-hover) var(--ease); }
/* La línea se acorta con transform, no con width: si el botón cambiara de tamaño bajo el cursor, el hover entraría y saldría en bucle (bug 17-sep) */
.btn-menu:hover .btn-menu__linea, .btn-menu:focus-visible .btn-menu__linea { transform: scaleX(.625); }

/* ---------- Menú overlay (fundido ~900 ms) ---------- */
.menu { position: fixed; inset: 0; z-index: 40; background: var(--crema); color: var(--gris); display: grid; grid-template-rows: 1fr auto; padding: 84px var(--gutter) var(--s-4); opacity: 0; visibility: hidden; overflow-y: auto; }
/* Sin transición hasta la primera apertura: si no, cualquier recálculo inicial funde 1 → 0 y el menú se ve fantasma 900 ms (medido en ficha y catálogo). */
.menu.was-open { transition: opacity var(--t-menu) var(--ease), visibility 0s var(--t-menu); }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-menu) var(--ease), visibility 0s; }
.menu__centro { display: grid; place-items: center; align-content: center; gap: var(--s-4); }
.menu:focus { outline: none; }
.menu__arco { width: clamp(150px, 14cqw, 192px); aspect-ratio: 5/6; border-radius: 9999px 9999px 0 0; }
.menu__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .35em; max-width: 900px; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(30px, 3cqw, 44px); line-height: 1.3; color: var(--rosa-display); text-align: center; }
.menu__cats a { transition: opacity var(--t-hover) var(--ease); }
.menu__cats:hover a:not(:hover) { opacity: .6; }
.menu__cats .sep { color: var(--rosa-display); user-select: none; }
.menu__pie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s-3); font-size: 14px; }
.menu__links a { display: block; line-height: 1.75; }
.menu__links a:hover { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; }
.menu__social { text-align: center; }
.menu__social ul { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.menu__social li a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 600; transition: background var(--t-hover), color var(--t-hover); }
.menu__social li a:hover { background: var(--rosa-texto); color: var(--blanco); }

/* ---------- Héroe ---------- */
.hero { position: relative; min-height: 100svh; background: var(--hero-fallback); overflow: clip; isolation: isolate; }
.hero__media { position: absolute; inset: 0 0 -60px 0; z-index: -2; will-change: translate; }   /* 60 px extra: el parallax sube hasta −60 sin descubrir el fondo */
.hero__media video, .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.no-video video { display: none; }
.hero__poster { animation: zoom-lento 12s var(--ease) forwards; }
.hero__media video { z-index: 1; }
.hero.no-video video { display: none; }
@keyframes zoom-lento { from { scale: 1; } to { scale: 1.08; } }
.hero__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(60, 38, 24, .38), rgba(60, 38, 24, .10) 45%, rgba(60, 38, 24, .22)), var(--velo-foto); }
.hero__noche { position: absolute; inset: 0; z-index: -1; background: var(--noche); opacity: var(--noche-op, 0); pointer-events: none; }   /* 0 → .30 en 500 px de scroll: velo efectivo .25 → .55 */
.hero__ph { position: absolute; inset: auto 0 12px; text-align: center; font: 500 12px/1.4 var(--f-texto); letter-spacing: .06em; color: var(--blanco); opacity: .7; }
.hero.has-poster .hero__ph { display: none; }

/* Accesos bajo el héroe */
.accesos { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 48px; padding: 0 var(--gutter) var(--s-5); color: var(--blanco); opacity: var(--accesos-op, 1); translate: 0 calc(var(--accesos-y, 0) * -1px); }
.accesos a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease); }
.accesos a:hover { border-color: currentColor; }
.accesos:hover a:not(:hover) { opacity: .6; }
/* 8.ª pasada: rótulo «01 Llegás» + título del héroe abajo a la izquierda; se despiden con los accesos (mismas variables del rAF) */
.hero__texto { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 168px; z-index: 1; color: var(--blanco); opacity: var(--accesos-op, 1); translate: 0 calc(var(--accesos-y, 0) * -1px); }
.hero__title { margin-top: var(--s-3); max-width: 12ch; font-size: clamp(44px, 6.4cqw, 96px); color: var(--blanco); overflow-wrap: anywhere; }
.hero__texto .rotulo__fase { color: var(--blanco); }
.hero__texto .brasa { background: var(--brasa); }
.rotulo--fase { display: inline-flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.rotulo__fase { color: var(--rosa-texto); font-variant-numeric: tabular-nums; }
.rotulo__sep { opacity: .5; }
.rotulo .brasa { width: 6px; height: 6px; translate: 0 0; animation: none; }
[data-fase].is-luz .rotulo .brasa { animation: latir 4s ease-in-out infinite; }

/* ---------- Secciones ---------- */
.sec { padding-block: var(--bloque); }
.sec--tight { padding-block: clamp(3rem, 5cqw, 5rem); }
.sec--barra { background: var(--barra); }
.sec--barra .display--xl, .sec--barra .display--xxl { color: var(--rosa-barra); }
.centro { text-align: center; }
.medida { max-width: 62ch; margin-inline: auto; }

/* Bienvenida + fotos flotantes con parallax */
.bienvenida { position: relative; padding-top: 280px; padding-bottom: 0; }
.bienvenida__slide { overflow: clip; padding-block: 4px; }   /* las líneas se deslizan ±384 px; lo que sale del viewport se recorta a propósito */
.bienvenida__title { text-align: center; }
.slide-line { display: block; width: 100%; line-height: 1.15; will-change: transform; white-space: nowrap; }
.flotantes { position: relative; height: 620px; margin-top: 300px; }
.flot video { pointer-events: none; }
.flot { position: absolute; }
.flot--1 { left: 6%; top: 40px; width: 300px; height: 400px; aspect-ratio: auto; }
.flot--2 { left: 50%; translate: -50% 0; top: 0; width: 420px; height: 560px; aspect-ratio: auto; z-index: 1; }
.flot--3 { right: 8%; top: 380px; width: 260px; height: 340px; aspect-ratio: auto; z-index: 2; }  /* asoma 100 px por debajo del bloque */

/* Manifiesto coloreado */
.manifiesto { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(26px, 3cqw, 44px); line-height: 1.3; letter-spacing: .01em; color: var(--rosa-display); max-width: 30ch; }
.manifiesto .w { opacity: .35; }
.manifiesto__cabeza { display: grid; grid-template-columns: 1fr 3fr; gap: var(--s-4); }


.card { background: var(--tarjeta); border-radius: var(--radio-card); text-align: center; min-width: 0; }
.card__body { padding: 40px; display: grid; gap: var(--s-2); justify-items: center; }
.card__title { font-family: var(--f-display); font-style: italic; font-weight: 300; font-variation-settings: var(--fvs); font-size: 30px; line-height: 1.15; color: var(--rosa-titulo); overflow-wrap: anywhere; }
.card__title a:hover { color: var(--rosa-texto); }
.card__meta { font-size: 14px; color: var(--gris); }
.card__meta span { margin-inline: 4px; }
.card__text { font-size: 15px; max-width: 34ch; }
.card--media .card__foto { border-radius: var(--radio-card) var(--radio-card) 0 0; }
.card--foto { text-align: left; }
.card--foto .card__body { justify-items: start; }
.card--foto .card__title { font-style: normal; }
.card__foto { border-radius: var(--radio-card) var(--radio-card) 0 0; }

/* Before / after */
.ba { position: relative; --corte: 50%; border-radius: var(--radio-foto); overflow: clip; aspect-ratio: 4/3; background: var(--ph); isolation: isolate; }
.ba__capa { position: absolute; inset: 0; }
.ba__capa .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.ba__capa--antes { clip-path: inset(0 calc(100% - var(--corte)) 0 0); z-index: 2; }
.ba__capa .ph::after { text-align: left; }
.ba__linea { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; background: var(--blanco); translate: -1px 0; z-index: 3; pointer-events: none; }
.ba__linea::after { content: '↔'; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; background: var(--blanco); color: var(--rosa-texto); display: grid; place-items: center; font-size: 18px; }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; }
.ba input[type=range]:focus-visible + .ba__linea { outline: 2px solid var(--rosa-texto); }
.ba__tag { position: absolute; top: 16px; z-index: 3; padding: 6px 12px; border-radius: 9999px; background: rgba(251, 248, 243, .92); color: var(--rosa-barra); font: 500 12px/1.4 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.ba__tag--antes { left: 16px; }
.ba__tag--despues { right: 16px; }
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6); align-items: center; }
.ba__toggle { margin-top: var(--s-3); }

/* Nuestra firma (video vertical 272×360 + frase) */
.firma { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.firma__video { width: 272px; height: 360px; aspect-ratio: auto; }
.firma__frase { margin-top: var(--s-2); max-width: 20ch; }
.firma__cta { margin-top: var(--s-4); }

/* Equipo */
.equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.pro { background: var(--tarjeta); border-radius: var(--radio-card); padding: var(--s-3); display: grid; gap: 6px; min-width: 0; }
.pro__foto { border-radius: 40px; margin-bottom: var(--s-2); }
.pro__nombre { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 28px; line-height: 1.1; color: var(--rosa-titulo); }
.pro__rol { font-size: 13px; letter-spacing: .04em; color: var(--gris-rotulo); font-weight: 500; }
.pro__bio { font-size: 15px; }
.pros-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); gap: var(--s-3); margin-top: var(--s-2); }
.pro--mini .pro__nombre { font-size: 22px; }

/* FAQ (abre en 200 ms) */
.faq { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__h { font: inherit; }
.faq__q { display: grid; grid-template-columns: 2.5em 1fr auto; align-items: center; gap: var(--s-2); width: 100%; padding: 18px 0; text-align: left; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 22px; line-height: 1.25; color: var(--rosa-titulo); transition: color var(--t-hover) var(--ease); }
.faq__q:hover { color: var(--rosa-texto); }
.faq__num { font: 500 12px/1 var(--f-texto); letter-spacing: .08em; }
.faq__txt { overflow-wrap: anywhere; }
.faq__ico { width: 12px; height: 12px; position: relative; }
.faq__ico::before, .faq__ico::after { content: ''; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor; translate: 0 -.5px; transition: rotate var(--t-faq) var(--ease); }
.faq__ico::after { rotate: 90deg; }
.faq__item.is-open .faq__ico::after { rotate: 0deg; }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-faq) var(--ease); }
.faq__a { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s var(--t-faq); }
.faq__a p { padding: 0 0 20px 2.5em; max-width: 60ch; }
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a { visibility: visible; transition-delay: 0s; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-6); align-items: start; }
.faq__video { --ar: 4/5; width: min(100%, 300px); position: sticky; top: var(--sticky-top); }

/* Los espacios (5.ª pasada, muse img.sticky; vuelve en la 8.ª en lugar de la galería horizontal): video fijo a 140 px + lista numerada, ítem activo en rosa */
.espacios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.espacios__foto { --ar: 4/3; position: sticky; top: var(--sticky-top); }
.espacios__lista { display: grid; gap: var(--s-5); margin-top: var(--s-5); counter-reset: esp; }
.espacios__lista li { display: grid; grid-template-columns: 2.5em 1fr; column-gap: 0; row-gap: 10px; align-items: baseline; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(24px, 2.4cqw, 34px); line-height: 1.2; color: var(--gris-rotulo); transition: color 400ms var(--ease), opacity 400ms var(--ease); opacity: .45; }
.espacios__lista li::before { counter-increment: esp; content: counter(esp, decimal-leading-zero); font: 500 12px/1 var(--f-texto); letter-spacing: .12em; color: var(--gris-rotulo); }
.espacios__lista li p { grid-column: 2; font: 400 15px/1.6 var(--f-texto); color: var(--gris); max-width: 38ch; margin: 0; }
.espacios__lista li.is-active { color: var(--rosa-display); opacity: 1; }
html:not(.espacios-ready) .espacios__lista li { color: var(--rosa-titulo); opacity: 1; }   /* sin observer (o reduce): lista completa en tinta */
.faq-grid #faq-home { margin-top: var(--s-4); }
.faq__nota { margin-top: var(--s-4); font-size: 15px; max-width: 42ch; }
.faq__nota a { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; }

/* Reservá con nosotras + boletín */
.reserva { text-align: center; }
.reserva__title { margin-bottom: var(--s-2); }
.reserva__linea { width: 220px; height: 1px; background: var(--rosa-display); margin: var(--s-4) auto; opacity: .6; }
.reserva__datos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); font-size: 15px; }
.reserva__datos a:hover { text-decoration: underline; text-underline-offset: 3px; }
.boletin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-5); align-items: center; padding-block: var(--s-6); border-top: 1px solid var(--linea); }
.boletin__title { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(22px, 2.2cqw, 30px); line-height: 1.3; color: var(--rosa-titulo); }
.boletin__title em { font-style: italic; }
.boletin__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label { font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); }
.campo input { width: 100%; min-width: 0; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--rosa-display); background: transparent; color: var(--gris); transition: border-color var(--t-hover); }
.campo input:focus { outline: none; border-bottom-color: var(--rosa-barra); }
.campo input::placeholder { color: rgba(96, 94, 91, .55); }
.boletin__form .pill { grid-column: 1 / -1; justify-self: start; }

/* Marquee 80 px */
.marquee { position: relative; overflow: clip; padding-block: var(--s-4); border-top: 1px solid var(--linea); }
.marquee__track { display: flex; width: max-content; white-space: nowrap; font-family: var(--f-display); font-style: italic; font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(48px, 5.5cqw, 80px); line-height: 1.1; color: var(--rosa-display); }
.marquee__track span { padding-inline: .35em; }
.marquee__track .sep { font-style: normal; font-size: .5em; vertical-align: middle; }
.marquee__pause { position: absolute; right: var(--gutter); bottom: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); border-bottom: 1px solid currentColor; }
.marquee__pause:hover { color: var(--rosa-texto); }

/* Pie */
.pie { padding: var(--s-5) 0 var(--s-4); font-size: 14px; }
.pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.pie__nav a:hover { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); font-size: 12px; color: var(--gris); border-top: 1px solid var(--linea); padding-top: var(--s-3); }
.pie__legal a:hover { text-decoration: underline; }

/* ---------- Catálogo ---------- */
.cat-hero { padding-top: calc(84px + var(--s-6)); padding-bottom: var(--s-5); }
.cat-hero__title { font-size: clamp(56px, 12.4cqw, 178px); font-weight: 300; line-height: .95; letter-spacing: 0; overflow-wrap: anywhere; }
.cat-hero__sub { margin-top: var(--s-4); max-width: 46ch; font-size: 18px; }
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-5); }
.filtros button { padding: .6em 1.2em; border: 1px solid var(--rosa-display); border-radius: 9999px; color: var(--gris); font-weight: 500; font-size: 14px; line-height: 1; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover), opacity 300ms var(--ease), translate 300ms var(--ease); }   /* opacity/translate: entrada escalonada de la 6.ª pasada (esta regla gana a [data-chips] > *) */
.filtros button:hover { background: var(--barra); border-color: var(--barra); color: var(--rosa-barra); }
.filtros button.is-on { background: var(--rosa-texto); border-color: var(--rosa-texto); color: var(--blanco); }
.filtros__cuenta { margin-left: auto; font-size: 13px; color: var(--gris-rotulo); }
.catalogo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-4) var(--s-7); }
.catalogo .card { transition: opacity 400ms var(--ease), box-shadow var(--t-hover) var(--ease), translate var(--t-hover) var(--ease); }
.catalogo .card.is-dim { opacity: .22; pointer-events: none; }

/* ---------- Ficha ---------- */
/* 6.ª pasada (muse página de servicio): video a sangre 100 svh, título a la izquierda, tarjeta «Reservá tu turno» a la derecha */
.ficha__hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 360px); gap: var(--s-5); align-items: end; padding: calc(84px + var(--s-6)) var(--gutter) var(--s-6); color: var(--blanco); background: var(--hero-fallback); overflow: clip; isolation: isolate; }
.ficha__foto { position: absolute; inset: 0; aspect-ratio: auto; z-index: -2; background: var(--ph); }
.ficha__foto::after { color: var(--blanco); opacity: .8; top: 100px; bottom: auto; }
.ficha__hero .rotulo--claro { color: var(--blanco); }
.ficha__hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--velo-ficha), rgba(60, 38, 24, .18) 60%), var(--velo-foto); }
.ficha__hero-text { min-width: 0; }   /* minmax(0,1fr)+min-width:0: sin esto «Descontracturantes» dictaba 426 px a 390 y el ajuste de título medía un ancho inflado */
.ficha__title { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: min(clamp(44px, 8cqw, 120px), var(--fs-palabra, 120px)); line-height: 1; letter-spacing: 0; color: var(--blanco); max-width: min(100%, 1000px); overflow-wrap: normal; word-break: keep-all; hyphens: none; margin-top: var(--s-2); }
.ficha__body { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-7); max-width: 72ch; }
.ficha__sec { display: grid; gap: var(--s-2); }
.ficha__lead { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(24px, 2.4cqw, 34px); line-height: 1.3; color: var(--rosa-display); }
.ficha__precio { background: var(--tarjeta); border-radius: var(--radio-card); padding: var(--s-4); }
.ficha__precio-num { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(36px, 4cqw, 56px); line-height: 1; color: var(--rosa-display); }
.ficha__precio-dur { font-size: .45em; font-style: italic; }
.ficha__nota { font-size: 15px; }
.ficha__nota--chica { font-size: 12px; opacity: .8; }
.siguiente { display: grid; gap: 6px; padding: var(--s-4); border: 1px solid var(--rosa-display); border-radius: var(--radio-card); transition: background var(--t-hover), color var(--t-hover); }
.siguiente:hover { background: var(--barra); }
.siguiente__nombre { font-family: var(--f-display); font-style: italic; font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(28px, 3cqw, 44px); line-height: 1.1; color: var(--rosa-display); overflow-wrap: anywhere; }
.siguiente__meta { font-size: 14px; color: var(--gris); }

/* ---------- Palabras que caen (goldust: −70 px → 0, 900 ms, 60 ms por palabra) y párrafos que funden ---------- */
.w-drop { display: inline-block; }
/* 9.ª pasada — texto que se enciende: cada línea arranca apagada (tinta al 30 %, blur 4, +10 px, .6) y se enciende en 450 ms; línea 2 +100, línea 3 +200
   (--d en ms lo escribe initWords midiendo el top de cada palabra; en títulos de una sola línea escalona por palabra, 60 ms). Un paso de luz (.paso-texto: clon del
   título con background-clip:text, aria-hidden) lo recorre una vez de −120 % a 120 % en 900 ms desde los 250 ms y termina fuera del texto. */
[data-words], [data-lineas] { position: relative; }
html.words-ready [data-words] .w-drop { color: var(--apagado); filter: blur(4px); translate: 0 10px; opacity: .6; transition: color var(--t-enciende) var(--ease-luz), filter var(--t-enciende) var(--ease-luz), translate var(--t-enciende) var(--ease-luz), opacity var(--t-enciende) var(--ease-luz); transition-delay: calc(var(--d, 0) * 1ms); }
html.words-ready [data-words].is-in .w-drop { color: inherit; filter: blur(0); translate: 0 0; opacity: 1; }
.paso-texto { position: absolute; inset: 0; pointer-events: none; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, transparent 40%, rgba(255, 232, 196, .9) 50%, transparent 60%); background-size: 220% 100%; background-repeat: no-repeat; background-position: -120% 0; }
@keyframes paso-texto { from { background-position: -120% 0; } to { background-position: 120% 0; } }
html.words-ready [data-words].is-in .paso-texto, html.coreo-ready [data-coreo].is-in [data-lineas] .paso-texto { animation: paso-texto var(--t-paso-texto) var(--ease-luz) 250ms forwards; }
html.words-ready .paragraph-anim { opacity: 0; transition: opacity 1s var(--ease); }
html.words-ready .paragraph-anim.is-in { opacity: 1; }

/* ---------- Revelados (visibles por defecto; el JS habilita la animación) ---------- */
html.reveal-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }


/* ============ 5.ª pasada (16-sep): despedida del héroe, scale-down, rótulos laterales, foto inclinada, cortina, halo, pastilla ============ */

/* Foto inclinada (muse rotate(-8deg); acá −6°): vuelve a 0 en 600 ms al hover. rotate es su propia propiedad: no pelea con translate del parallax */
.flot--inclinada { rotate: -6deg; box-shadow: var(--sombra-suave); transition: rotate var(--t-inclinada) var(--ease); }
.flot--inclinada:hover { rotate: 0deg; }

/* Revelado scale-down (ilfalconiere aux-scale-down): 1.12 → 1 + 0 → 1, 1,2 s, una vez, al 15 %. Va en el img/video interior; el contenedor conserva el parallax.
   Failsafe: sólo se apaga la opacidad cuando el JS marca html.scale-ready, y el barrido de rescate cubre lo que ya pasó. */
/* 9.ª pasada — imagen que se revela (reemplaza al scale-down): entra sobreexpuesta y blanda (brightness 1.35, contrast .85, saturate .8, blur 6, scale 1.06, opacity 0)
   y se revela en 1.400 ms hasta la gradación cálida de siempre. Un paso de luz diagonal (.paso-luz, span que agrega initScale; soft-light) la cruza una vez en 1.100 ms
   desde los 300 ms. Al hover de tarjeta, brightness 1.03 → 1.09 en 600 ms («le da la luz»). El video sigue reproduciendo debajo. */
html.scale-ready [data-scale] > img, html.scale-ready [data-scale] > video { filter: var(--f-sobreexpuesta); scale: 1.06; opacity: 0; transition: filter var(--t-revela) var(--ease-luz), scale var(--t-revela) var(--ease-luz), opacity var(--t-revela) var(--ease-luz); }
html.scale-ready [data-scale].is-scaled > img, html.scale-ready [data-scale].is-scaled > video { filter: var(--f-calida); scale: 1; opacity: 1; }
.paso-luz { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; border-radius: inherit; background-image: linear-gradient(115deg, transparent 35%, rgba(255, 236, 206, .55) 50%, transparent 65%); background-size: 240% 100%; background-repeat: no-repeat; background-position: -120% 0; }
@keyframes paso-luz { from { background-position: -120% 0; } to { background-position: 120% 0; } }
html.scale-ready [data-scale].is-scaled > .paso-luz { animation: paso-luz var(--t-paso-img) var(--ease-luz) 300ms forwards; }
html.scale-ready .card:hover .card__foto.is-scaled > img, html.scale-ready .card:hover .card__foto.is-scaled > video { filter: var(--f-hover-luz); transition: filter var(--t-hover-luz) var(--ease-luz); }

/* Rótulos que se deslizan (ilfalconiere aux-scroll-container 250 → 25 px; acá +120 → 0, 40 en ≤ 768). El JS escribe --sx en px desde el mismo rAF del parallax */
[data-slide-x] { translate: var(--sx, 0) 0; will-change: translate; width: fit-content; max-width: 100%; }   /* fit-content: un <p> a ancho completo desplazado +120 px sumaba 120 px al scrollWidth */
.centro [data-slide-x] { margin-inline: auto; }

/* Halo de luz cálida: sigue al puntero (lerp .12) sobre el héroe y los videos de sección. soft-light: aclara sin lavar; debajo del texto */
.halo { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), var(--halo), transparent 38%); }
.hero > .halo { z-index: -1; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); }   /* sobre velo y noche, debajo de accesos (z 1); enmascarado abajo: con el halo encima, el blanco de 12 px de los accesos bajaba a 4,38:1 (5,01 sin halo) */
.ph > .halo { border-radius: inherit; }

/* 8.ª pasada — la luz (.luz, la crea el JS): una sola capa fija para (a) el bloom de la puerta, (b) el bloom corto de 600 ms de las visitas siguientes
   y (c) la transición entre páginas. El bloom es un radial-gradient con núcleo sólido al 55 % del radio y borde en degradado; el JS calcula el radio final
   (--bd) para que el núcleo llegue a la esquina más lejana del punto del clic. Llegada: la página nueva nace cubierta (html.luz-cubre, script del <head>), el «L.» late 400 ms y descubre en 600. */
.luz { position: fixed; inset: 0; z-index: 70; overflow: clip; display: grid; place-items: center; pointer-events: none; }
/* el radio del bloom es una propiedad registrada (@property) que transiciona: se repinta un gradiente de viewport por cuadro en vez de escalar una capa de 3–6 k px
   (medido: la capa escalada tardaba ~1 s en llegar a 1 por el raster de la textura; con --r el bloom cubre en los 500/600 ms del token) */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.luz__bloom { position: absolute; inset: 0; --r: 0px; background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), var(--luz-color, var(--luz-llegada)) 0, var(--luz-color, var(--luz-llegada)) calc(var(--r) * .55), transparent var(--r)); }
.luz.is-cubre { pointer-events: auto; }
.luz.is-cubre .luz__bloom { --r: var(--bd, 300vmax); transition: --r var(--t-bloom-in, var(--t-luz-cubre)) ease-in; }
.luz.is-funde .luz__bloom { opacity: 0; transition: opacity var(--t-bloom-out, 1000ms) ease-out; }   /* puerta: el bloom se disuelve mientras la penumbra funde */
.luz.is-corto .luz__bloom { transition: none; }
.luz.is-corto.is-funde .luz__bloom { transition: opacity var(--t-bloom-out, 600ms) ease-out; }
.luz__logo { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 48px; line-height: 1; color: var(--rosa-display); opacity: 0; }
.luz.is-quieta { background: var(--luz-llegada); pointer-events: auto; }
.luz.is-quieta .luz__logo { opacity: 1; }
.luz.is-baja { background: var(--luz-llegada); opacity: 0; transition: opacity var(--t-luz-out) var(--ease); }
.luz.is-baja .luz__logo { opacity: 1; }
html.luz-cubre::after { content: ''; position: fixed; inset: 0; z-index: 70; background: var(--luz-llegada); }   /* tapa desde el primer cuadro; el JS la reemplaza por .luz.is-quieta */

/* 8.ª pasada — luz de ventana: tres gradientes grandes y difusos a −18° que se desplazan 6 % en 40 s, soft-light .6. Va DETRÁS del contenido (z −1 dentro del
   body aislado) para no tocar la tinta del texto: la luz cae sobre el fondo, no sobre las letras. Sobre fotos y videos sigue la gradación cálida de siempre. */
.ventana { position: fixed; inset: -12%; z-index: -1; pointer-events: none; mix-blend-mode: soft-light; opacity: .6; rotate: -18deg; will-change: translate;
  background: radial-gradient(ellipse 34% 48% at 22% 18%, rgba(255, 214, 170, .55), transparent 70%),
              radial-gradient(ellipse 30% 42% at 70% 40%, rgba(255, 236, 210, .35), transparent 70%),
              radial-gradient(ellipse 40% 36% at 45% 85%, rgba(255, 214, 170, .30), transparent 70%);
  animation: ventana 40s ease-in-out infinite alternate; }
@keyframes ventana { from { translate: -3% -3%; } to { translate: 3% 3%; } }
/* grano fino sobre todo: ruido SVG (feTurbulence .9, 1 octava) en multiply a .045 */
.grano { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .045; mix-blend-mode: multiply; background-size: 240px 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

/* Pastilla «Reservá» contextual: el sufijo se escribe con desorden de letras (200 ms, ·—) al pasar por una tarjeta o en la ficha */
.pill--ctx { white-space: nowrap; }
.pill__ctx:empty { display: none; }
.pill__ctx { font-variant-numeric: tabular-nums; }

/* ============ 6.ª pasada (16-sep): coreografía de entrada, héroe rotativo, cifras, zonas, galería horizontal, slider, desplegable, ficha con formulario ============ */

/* Coreografía de entrada (muse + ilfalconiere). Failsafe: sólo se apaga bajo html.coreo-ready (lo pone el JS) y todo se enciende por temporizador, no por observer.
   Header: monograma 0 → pastilla 100 → menú 200 ms, fundido 300. Héroe: media 1.08 → 1 en 6 s; título línea a línea; accesos/chips escalonados 80 ms tras el título. */
/* El estado inicial va SIN transición (si no, al poner html.coreo-ready el medio viajaba 1 → 1.08 y el header fundía a 0 a la vista); la transición vive en el estado de llegada. */
html.coreo-ready .header__izq, html.coreo-ready .header__centro, html.coreo-ready .header__der { opacity: 0; }
html.coreo-ready.coreo-in .header__centro { opacity: 1; transition: opacity 300ms var(--ease); }
html.coreo-ready.coreo-in .header__izq { opacity: 1; transition: opacity 300ms var(--ease) 100ms; }
html.coreo-ready.coreo-in .header__der { opacity: 1; transition: opacity 300ms var(--ease) 200ms; }
html.coreo-ready .hero__media { scale: 1.08; }
html.coreo-ready .ficha__foto > img, html.coreo-ready .ficha__foto > video { scale: 1.08; filter: var(--f-sobreexpuesta); opacity: 0; }   /* 9.ª: entra sobreexpuesta; el Ken Burns de 6 s sigue */
html.coreo-ready [data-coreo].is-in .hero__media { scale: 1; transition: scale var(--t-kb) var(--ease-kb); }
html.coreo-ready [data-coreo].is-in .ficha__foto > img, html.coreo-ready [data-coreo].is-in .ficha__foto > video { scale: 1; filter: var(--f-calida); opacity: 1; transition: scale var(--t-kb) var(--ease-kb), filter var(--t-revela) var(--ease-luz), opacity var(--t-revela) var(--ease-luz); }
/* título línea a línea: cada palabra lleva --l (índice de línea, lo mide el JS); de casi crema (.15 + 12 px) a su color en 450 ms, +100 ms por línea */
.w-line { display: inline-block; }
html.coreo-ready [data-coreo] [data-lineas] .w-line { color: var(--apagado); filter: blur(4px); opacity: .6; translate: 0 10px; }   /* 9.ª: mismo encendido que los títulos de sección */
html.coreo-ready [data-coreo].is-in [data-lineas] .w-line { color: inherit; filter: blur(0); opacity: 1; translate: 0 0; transition: color var(--t-coreo) var(--ease-luz), filter var(--t-coreo) var(--ease-luz), opacity var(--t-coreo) var(--ease-luz), translate var(--t-coreo) var(--ease-luz); transition-delay: calc(var(--l, 0) * var(--paso-linea)); }
/* accesos / chips / tarjeta de reserva: por variables para no pisar el hover que atenúa a los hermanos (.accesos:hover a:not(:hover)) */
[data-coreo] { --chips-base: 300ms; }                       /* home: no hay título, los accesos siguen al header */
.ficha__hero, .cat-hero { --chips-base: 650ms; }            /* 450 de la línea 1 + 100 de la línea 2 + 100 de aire */
.accesos a { transition: border-color var(--t-hover) var(--ease), opacity 300ms var(--ease), translate 300ms var(--ease); }
[data-chips] > *, .reserva-card { transition: opacity 300ms var(--ease), translate 300ms var(--ease), background var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
/* el delay va DESPUÉS de cualquier shorthand transition (el shorthand lo resetea a 0; medido: los accesos entraban todos juntos) */
.accesos a, [data-chips] > *, .filtros[data-chips] button, .reserva-card { opacity: var(--coreo-op, 1); translate: 0 var(--coreo-y, 0px); transition-delay: var(--coreo-delay, 0s); }
html.coreo-ready [data-coreo] .accesos a, html.coreo-ready [data-coreo] [data-chips] > *, html.coreo-ready [data-coreo] .reserva-card { --coreo-op: 0; --coreo-y: 8px; --coreo-delay: calc(var(--chips-base) + var(--i, 0) * var(--paso-chip)); }
html.coreo-ready [data-coreo].is-in .accesos a, html.coreo-ready [data-coreo].is-in [data-chips] > *, html.coreo-ready [data-coreo].is-in .reserva-card { --coreo-op: 1; --coreo-y: 0px; }
html.coreo-ready [data-coreo].is-in.is-done .accesos a, html.coreo-ready [data-coreo].is-in.is-done [data-chips] > *, html.coreo-ready [data-coreo].is-in.is-done .reserva-card { --coreo-delay: 0s; }   /* terminada la entrada, el hover responde sin retardo */
.reserva-card { --i: 2; }

/* Héroe que rota clips (ilfalconiere): dos <video> superpuestos, el de adelante a 1, fundido cruzado 1 s. El halo, el velo y la noche siguen encima */
.hero__clip { opacity: 0; transition: opacity var(--t-clip) linear; }
.hero__clip.is-front { opacity: 1; }
.hero.no-video .hero__clip { display: none; }

/* Elegí por zona (muse our services): marco 4:5 radio 40 con tres medios apilados; el activo a 1, fundido cruzado 500 ms; enlaces serif 56 con flecha que corre 8 px */
.zonas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-6); align-items: center; }
.zonas__marco { --ar: 4/5; width: min(100%, 480px); }
.zonas__medio { opacity: 0; transition: opacity var(--t-zona) var(--ease); }
.zonas__medio.is-on { opacity: 1; }
.zonas__lista { display: grid; margin-top: var(--s-3); }
.zona { display: grid; gap: 8px; padding: var(--s-3) 0; border-top: 1px solid var(--linea); min-width: 0; transition: opacity var(--t-zona) var(--ease); }
.zona:last-child { border-bottom: 1px solid var(--linea); }
.zona__nombre { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(36px, 3.9cqw, 56px); line-height: 1.1; color: var(--rosa-display); display: flex; align-items: center; gap: .3em; }
.zona__flecha { display: inline-block; font-size: .7em; translate: 0 0; transition: translate var(--t-zona) var(--ease); }
.zona.is-on .zona__flecha { translate: 8px 0; }
.zona__desc { font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); }
.zonas__lista.is-hover .zona:not(.is-on) { opacity: .5; }   /* sólo mientras hay puntero o foco en la lista: en reposo los tres enlaces quedan a tinta plena */

/* Tarjeta «Reservá tu turno» sobre el video de la ficha (muse): #FBF8F3 al 92 %, radio 24, 360 px; al enviar muestra «Listo, te escribimos hoy» */
.reserva-card { width: min(100%, 360px); justify-self: end; background: var(--tarjeta-92); color: var(--gris); border-radius: 24px; padding: 28px; display: grid; gap: var(--s-2); min-width: 0; }
.reserva-card__title { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 26px; line-height: 1.1; color: var(--rosa-titulo); margin-bottom: 4px; }
.reserva-card .campo input { min-height: 44px; -webkit-appearance: none; appearance: none; border-radius: 0; color-scheme: light; }
.reserva-card .pill { justify-self: start; margin-top: var(--s-1); }
.reserva-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { display: inline-block; font: 500 12px/1 var(--f-texto); letter-spacing: .06em; padding: 8px 12px; border-radius: 9999px; border: 1px solid var(--rosa-display); color: var(--rosa-barra); }
.reserva-card__ok { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 24px; line-height: 1.2; color: var(--rosa-titulo); }
.reserva-card__ok small { display: block; margin-top: 8px; font: 400 14px/1.5 var(--f-texto); color: var(--gris); }

/* Responsive de la 6.ª pasada */
@media (max-width: 1100px) {
  .zona__nombre { font-size: clamp(32px, 4.6cqw, 48px); }
}
@media (max-width: 900px) {
  .nav-link { display: none; }
  .zonas { grid-template-columns: 1fr; gap: var(--s-4); }
  .zonas__marco { width: min(100%, 360px); }
  .ficha__hero { grid-template-columns: 1fr; padding-top: calc(68px + var(--s-6)); }
  .reserva-card { justify-self: start; }
}
/* ---------- Responsive (lo justo para verlo en 390) ---------- */
@media (max-width: 900px) {
  .header { height: 68px; }
  .header .pill { padding: .6em 1em; font-size: 14px; }
  .btn-menu__linea { width: 28px; }
  .logo { font-size: 32px; }
  .menu { padding-top: 68px; }
  .menu__pie { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .menu__links a { display: inline-block; margin-inline: 8px; }
  .menu__cats { gap: 0 .3em; }
  .accesos { gap: 8px 24px; padding-bottom: var(--s-4); }
  .flot--inclinada { rotate: -4deg; }
  .espacios__foto, .faq__video { position: relative; width: 100%; --ar: 4/3; }   /* relative, no static: .ph necesita ser contenedor del video absoluto (static lo mandaba al viewport: 413 px de scrollWidth a 390) */
  .pill__ctx { display: none; }
  .bienvenida { padding-top: 120px; }
  .flotantes { height: auto; margin-top: var(--s-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .flot { position: static; width: auto; height: auto; translate: 0 0; --ar: 3/4; aspect-ratio: var(--ar); }
  .flot--2 { grid-column: 1 / -1; --ar: 4/3; }
  .slide-line { white-space: normal; }
  .firma { grid-template-columns: 1fr; }
  .firma__video { width: min(272px, 100%); }
  .card__body { padding: 28px; }
  .card__title { font-size: 26px; }
  .manifiesto__cabeza { grid-template-columns: 1fr; gap: var(--s-2); }
  .ba-grid, .espacios, .faq-grid, .boletin { grid-template-columns: 1fr; gap: var(--s-4); }
  .espacios__lista { gap: var(--s-4); }
  .hero__texto { bottom: 150px; }
  .equipo { grid-template-columns: 1fr; }
  .boletin__form { grid-template-columns: 1fr; }
  .catalogo { grid-template-columns: 1fr; }
  .filtros__cuenta { margin-left: 0; width: 100%; }
  .ficha__hero-text { padding-top: var(--s-7); }
  .marquee__pause { position: static; display: inline-block; margin: var(--s-2) var(--gutter) 0; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Reduced motion: apaga video, parallax, coloreado, marquee, revelados ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .hero__poster { animation: none; }
  .slide-line { transform: none !important; }
  html.words-ready [data-words] .w-drop, html.words-ready .paragraph-anim { opacity: 1; transform: none; transition: none; color: inherit; filter: none; translate: 0 0; }
  .paso-texto, .paso-luz { display: none; }   /* 9.ª: sin pasos de luz; los medios aparecen con su gradación, sin filtros de entrada */
  html.coreo-ready .ficha__foto > img, html.coreo-ready .ficha__foto > video { filter: var(--f-calida); opacity: 1; }
  html.scale-ready .card:hover .card__foto.is-scaled > img, html.scale-ready .card:hover .card__foto.is-scaled > video { filter: var(--f-calida); }
  [data-parallax] { translate: 0 0 !important; }
  .manifiesto .w { opacity: 1 !important; }
  html.reveal-ready [data-reveal] { opacity: 1; transform: none; }
  html.scale-ready [data-scale] > img, html.scale-ready [data-scale] > video { scale: 1; opacity: 1; transition: none; filter: var(--f-calida); }
  [data-slide-x] { translate: 0 0 !important; }
  .flot--inclinada { rotate: 0deg; }
  .hero__media { translate: 0 0 !important; }
  .hero__noche { opacity: 0 !important; }
  .accesos { opacity: 1 !important; translate: 0 0 !important; }
  .halo { --lx: 50%; --ly: 50%; }
  /* 6.ª pasada: sin coreografía (todo visible), sin rotación de clips (sólo el primero, en póster) */
  html.coreo-ready .header__izq, html.coreo-ready .header__centro, html.coreo-ready .header__der { opacity: 1; translate: 0 0; transition: none; }
  html.coreo-ready .hero__media, html.coreo-ready .ficha__foto > img, html.coreo-ready .ficha__foto > video { scale: 1; transition: none; }
  html.coreo-ready [data-coreo] [data-lineas] .w-line { opacity: 1; translate: 0 0; transition: none; color: inherit; filter: none; }
  .accesos a, [data-chips] > *, .reserva-card { --coreo-op: 1; --coreo-y: 0px; --coreo-delay: 0s; }
  .hero__clip:not(.is-front) { display: none; }
  .zona.is-on .zona__flecha { translate: 0 0; }
  /* 8.ª pasada: sin bloom (fundidos planos: puerta 400 ms, transición 250 ms), ventana quieta, brasa quieta. --luz (color ligado al scroll) se mantiene: no es movimiento */
  .velo-noche, html.encendiendo .velo-noche { transition: opacity 400ms linear !important; }
  html.encendiendo .halo, html.encendiendo .hero__texto, html.encendiendo .accesos { transition: opacity 400ms linear !important; }
  .luz { opacity: 0; transition: opacity 250ms linear !important; }
  .luz .luz__bloom { display: none; }
  .luz.is-cubre, .luz.is-quieta { opacity: 1; background: var(--luz-llegada); }
  .luz.is-baja { opacity: 0; }
  .ventana { animation: none; }
  .brasa { animation: none !important; box-shadow: 0 0 10px rgba(255, 190, 130, .5); }
}

/* ---------- 7.ª pasada (16-sep, elegido por Alex sobre variantes-horizontal.html): «Los favoritos» y los testimonios como pistas horizontales ligadas al scroll ----------
   Motor .vh: sección alta + panel sticky 100 vh + pista max-content trasladada −X (initPistas en lume.js, un solo rAF). El alto de la sección lo escribe el JS
   desde el ancho real de la pista (100 vh + dist / vel): 1 px de scroll = 1 px de pista, y si el cliente suma tarjetas el ritmo no cambia.
   vh a propósito: bandas a pantalla completa, manda el viewport. Lo que depende del contenedor va en cqw. */
:root {
  --vh-op-lejos: .7;                /* cinta: tarjetas fuera del centro */
  --vh-escala-centro: 1.06;         /* cinta: la tarjeta que cruza el centro */
  --t-vh: 300ms;                    /* cambio de estado discreto (tarjeta al centro) */
}
.vh { position: relative; }
.vh__fijo { position: sticky; top: 0; height: 100vh; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding-top: calc(84px + var(--s-4)); }
.vh__cabeza { padding-bottom: var(--s-3); position: relative; z-index: 3; }
.vh__cuerpo { position: relative; min-height: 0; min-width: 0; }
.vh__pista { display: flex; align-items: center; width: max-content; will-change: translate; }
.vh__pista > * { flex: 0 0 auto; min-width: 0; }

/* Los favoritos: título fijo a la izquierda (30 cqw, crema con fundido) y dos filas de 4 tarjetas que pasan por detrás; la de abajo a 1,35× (arranca más lejos y termina alineada) */
.fav-h__cuerpo { display: grid; align-items: center; }
.fav-h__titulo { position: absolute; inset: 0 auto 0 0; z-index: 2; width: 30cqw; display: grid; align-content: center; padding-right: var(--s-4); background: linear-gradient(to right, var(--crema) 82%, transparent); }   /* transparent: el fondo ahora varía con --luz */
.fav-h__titulo .wrap { margin: 0; width: auto; padding-left: var(--gutter); }
.fav-h__titulo .display { font-size: clamp(44px, 5cqw, 72px); }
.fav-h__filas { display: grid; gap: var(--s-3); }
.fav-h__fila { display: flex; gap: var(--s-4); width: max-content; padding-left: var(--x0, 0px); will-change: translate; }
.fav-h__fila > * { flex: 0 0 auto; }
.fav-h .card { width: clamp(220px, 20cqw, 300px); text-align: left; transition: box-shadow var(--t-hover) var(--ease); }
.fav-h .card.is-centro { box-shadow: var(--sombra-suave); }
.fav-h .card__body { padding: 18px 20px 20px; gap: 6px; justify-items: start; }
.fav-h .card__title { font-size: 22px; font-style: normal; }
.fav-h .card__meta { font-size: 13px; }
.fav-h .card__body .rotulo { font-size: 11px; }

/* Testimonios en cinta: 6 tarjetas de 420 px; la del centro escala 1,06 y pasa a --tarjeta; las otras a .7 sobre --barra; «n / 6» abajo a la derecha */
.cinta__cuerpo { display: grid; align-items: center; }
.cinta__pista { gap: var(--s-4); padding-inline: var(--x0, var(--gutter)); }
.testi-c { width: min(420px, 80cqw); display: grid; gap: var(--s-3); padding: 36px 36px 32px; border-radius: var(--radio-card); background: var(--barra); color: var(--gris); opacity: var(--vh-op-lejos); scale: 1; transition: scale var(--t-vh) var(--ease), background var(--t-vh) var(--ease), opacity var(--t-vh) var(--ease); }
.testi-c.is-centro { background: var(--tarjeta); opacity: 1; scale: var(--vh-escala-centro); }
.testi-c__estrellas { font-size: 12px; letter-spacing: .3em; color: var(--rosa-texto); }
.testi-c__cita { font-family: var(--f-display); font-style: italic; font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(22px, 1.9cqw, 27px); line-height: 1.3; color: var(--rosa-barra); overflow-wrap: anywhere; }   /* --rosa-barra: 4,77:1 sobre --barra y 5,4 sobre --tarjeta */
.testi-c__cita em { font-style: normal; }
.testi-c__quien { display: grid; gap: 2px; font-size: 14px; }
.testi-c__quien b { font-weight: 500; color: var(--gris); }
.testi-c__quien span { font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: #5B5652; }   /* QA: 4,25 → ≥ 4,5 sobre la tarjeta rosa */
.cinta__ind { position: absolute; right: var(--gutter); bottom: var(--s-4); font: 500 12px/1 var(--f-texto); letter-spacing: .12em; color: var(--gris-rotulo); font-variant-numeric: tabular-nums; z-index: 3; }

/* ≤ 768: scroll horizontal nativo con snap; la sección deja de fijarse y el JS no escribe translate ni alturas */
@media (max-width: 768px) {
  .vh { height: auto !important; padding-block: var(--bloque); }
  .vh__fijo { position: static; height: auto; overflow: visible; padding-top: 0; display: block; }
  .vh__cuerpo { display: block; }
  .vh__pista, .fav-h__fila { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0 var(--gutter) var(--s-2); -webkit-overflow-scrolling: touch; translate: 0 0 !important; }
  .vh__pista > *, .fav-h__fila > * { scroll-snap-align: start; }
  .cinta__ind { display: none; }
  .fav-h__titulo { position: static; width: auto; background: none; padding: 0 0 var(--s-3); }
  .fav-h .card { width: min(72vw, 300px); }
  .cinta__pista { padding-inline: var(--gutter) !important; gap: var(--s-2); }
  .testi-c { width: min(80vw, 360px); padding: 28px; opacity: 1; scale: 1; }
  .testi-c.is-centro { scale: 1; }
}
/* Reduce: grilla estática, sin translate ni alturas */
@media (prefers-reduced-motion: reduce) {
  .vh { height: auto !important; padding-block: var(--bloque); }
  .vh__fijo { position: static; height: auto; overflow: visible; padding-top: 0; display: block; }
  .vh__cuerpo { display: block; }
  .vh__pista, .fav-h__fila { display: grid; width: auto; gap: var(--s-3); padding: 0 var(--gutter); translate: 0 0 !important; }
  .cinta__ind { display: none; }
  .fav-h__titulo { position: static; width: auto; background: none; padding: 0 0 var(--s-3); }
  .fav-h__fila { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: var(--gutter) !important; }
  .fav-h .card { width: auto; }
  .cinta__pista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testi-c { width: auto; opacity: 1; scale: 1 !important; background: var(--tarjeta); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1100px) { .fav-h__fila, .cinta__pista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) and (max-width: 768px) { .fav-h__fila, .cinta__pista { grid-template-columns: 1fr; } }

/* =====================================================================================================================
   Tema WordPress — lo que no existía en el prototipo. Todo sale de los tokens de arriba.
   ===================================================================================================================== */

/* ---------- Fuentes self-hosted (contrato 8: assets/fonts/, woff2 variables, OFL). Una sola fuente de verdad: este @font-face; nada de Google Fonts. ---------- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-stretch: normal; font-display: swap; src: url('../fonts/fraunces-variable.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/fraunces-italic-variable.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../fonts/figtree-variable.woff2') format('woff2'); }

/* ---------- Accesibilidad: salto al contenido (visible sólo con foco) ---------- */
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 70; padding: 10px 16px; background: var(--rosa-texto); color: var(--blanco); border-radius: 9999px; font-weight: 500; transition: top var(--t-hover) var(--ease); }
.skip-link:focus-visible { top: 12px; }

/* ---------- Páginas interiores (reservar, sobre, contacto, gracias, legales, 404): cabecera de página sobre crema ---------- */
.pagina { padding-top: calc(84px + var(--s-6)); padding-bottom: var(--s-7); }
.pagina__cabeza { max-width: 60ch; margin-bottom: var(--s-6); }
.pagina__cabeza .rotulo { margin-bottom: var(--s-3); }
.pagina__cabeza .lead { margin-top: var(--s-3); color: var(--gris); max-width: 46ch; }
.pagina__title { font-size: clamp(40px, 6cqw, 96px); line-height: 1; letter-spacing: 0; overflow-wrap: anywhere; }
.pagina--centro .pagina__cabeza { margin-inline: auto; text-align: center; }
.pagina--centro .pagina__cabeza .lead { margin-inline: auto; }
.crumbs { font-size: 13px; color: var(--gris-rotulo); margin-bottom: var(--s-3); }
.crumbs a:hover { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span { margin-inline: .4em; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Legales / index / page.php: texto largo del CMS con la jerarquía del tema */
.cms-body { max-width: 68ch; }
.cms-body h2, .cms-body h3 { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); color: var(--rosa-titulo); line-height: 1.15; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.cms-body h2 { font-size: clamp(26px, 2.4cqw, 34px); }
.cms-body h3 { font-size: clamp(22px, 2cqw, 26px); }
.cms-body p, .cms-body ul, .cms-body ol { margin-bottom: 1em; }
.cms-body ul, .cms-body ol { padding-left: 1.4em; }
.cms-body ul { list-style: disc; } .cms-body ol { list-style: decimal; }
.cms-body a { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; }
.cms-body blockquote { margin: var(--s-4) 0; padding-left: var(--s-3); border-left: 2px solid var(--rosa-display); font-family: var(--f-display); font-style: italic; font-size: 20px; color: var(--rosa-titulo); }
.cms-body img { border-radius: var(--radio-card); }

/* ---------- Botón del wizard/contacto (reservar.js escribe «Confirmando…» con .spinner dentro): misma pastilla sólida del tema ---------- */
.lume-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8em 1.6em; border-radius: 9999px; border: 1px solid var(--rosa-texto); background: var(--rosa-texto); color: var(--blanco); font-weight: 500; line-height: 1; cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease); }
.lume-btn:hover, .lume-btn:focus-visible { background: var(--rosa-barra); border-color: var(--rosa-barra); color: var(--blanco); }
.lume-btn:disabled { opacity: .45; cursor: not-allowed; }
.lume-btn--ghost { background: rgba(255, 255, 255, .2); color: var(--rosa-texto); border-color: var(--rosa-display); }
.lume-btn--ghost:hover, .lume-btn--ghost:focus-visible { background: var(--barra); border-color: var(--barra); color: var(--rosa-barra); }
.lume-btn--block { width: 100%; }
.lume-btn--sm { padding: .6em 1.2em; font-size: 14px; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: var(--blanco); border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { rotate: 360deg; } }

/* ---------- Wizard de reserva (marcado y reservar.js intactos; sólo la piel) ---------- */
.reservar-wrap { max-width: 980px; margin-inline: auto; }
.wizard { background: var(--tarjeta); border-radius: var(--radio-card); padding: clamp(24px, 4cqw, 56px); min-width: 0; }
.wizard__progress { margin-bottom: var(--s-3); }
.wizard__steps { display: flex; margin-bottom: 14px; }
.wizard__step-lbl { flex: 1; min-width: 0; position: relative; padding-top: 38px; text-align: center; font: 500 12px/1.4 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-rotulo); transition: color var(--t-hover) var(--ease); }
.wizard__step-lbl::before { content: ''; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid var(--rosa-display); transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.wizard__step-lbl::after { content: attr(data-n); position: absolute; top: 0; left: 50%; translate: -50% 0; width: 30px; height: 30px; display: grid; place-items: center; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 15px; letter-spacing: 0; color: var(--rosa-display); transition: color var(--t-hover) var(--ease); }
.wizard__step-lbl.is-active { color: var(--rosa-barra); }
.wizard__step-lbl.is-active::before, .wizard__step-lbl.is-done::before { background: var(--rosa-texto); border-color: var(--rosa-texto); }
.wizard__step-lbl.is-active::after, .wizard__step-lbl.is-done::after { color: var(--blanco); }
.wizard__step-lbl.is-done::after { content: '✓'; font-family: var(--f-texto); font-size: 13px; }
.wizard__track { position: relative; height: 2px; margin-inline: 8px; background: var(--linea); border-radius: 2px; }
.wizard__track-fill { position: absolute; inset: 0 auto 0 0; width: 0; height: 100%; background: var(--rosa-texto); border-radius: 2px; transition: width 400ms var(--ease); }
.step-hint { color: var(--gris-rotulo); font-size: 15px; }
.wizard__panel { display: none; }
.wizard__panel.is-active { display: block; animation: paso-entra 350ms var(--ease); }
@keyframes paso-entra { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.wizard__panel h2 { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(28px, 2.8cqw, 38px); line-height: 1.1; color: var(--rosa-display); margin-bottom: 6px; }
.wizard__panel > .step-hint { margin-bottom: var(--s-4); }
.wizard__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--linea); }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.option-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 24px; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--linea); border-radius: 18px; background: rgba(255, 255, 255, .35); cursor: pointer; min-width: 0; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.option-card:hover { border-color: var(--rosa-display); }
.option-card input { position: absolute; opacity: 0; pointer-events: none; }
.option-card:has(input:focus-visible) { outline: 2px solid var(--rosa-texto); outline-offset: 3px; }
.option-card:has(input:checked) { border-color: var(--rosa-texto); background: var(--blanco); }
.option-card__media { display: block; width: 72px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--ph); }
.option-card__media img, .option-card__media video { width: 100%; height: 100%; object-fit: cover; filter: var(--f-calida); }
.option-card__body { display: grid; gap: 3px; min-width: 0; }
.option-card__body b { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 20px; line-height: 1.15; color: var(--rosa-titulo); overflow-wrap: anywhere; }
.option-card__body span { font-size: 13px; color: var(--gris-rotulo); }
.option-card__check { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rosa-display); border-radius: 50%; color: transparent; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.option-card input:checked ~ .option-card__check { background: var(--rosa-texto); border-color: var(--rosa-texto); color: var(--blanco); }
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.prof-card { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--linea); border-radius: 18px; background: rgba(255, 255, 255, .35); cursor: pointer; min-width: 0; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.prof-card:hover { border-color: var(--rosa-display); }
.prof-card input { position: absolute; opacity: 0; pointer-events: none; }
.prof-card:has(input:focus-visible) { outline: 2px solid var(--rosa-texto); outline-offset: 3px; }
.prof-card:has(input:checked) { border-color: var(--rosa-texto); background: var(--blanco); }
.prof-card img, .prof-card .avatar-fallback { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--barra); color: var(--rosa-barra); font-family: var(--f-display); font-size: 18px; filter: var(--f-calida); }
.prof-card > span:last-child { display: grid; gap: 2px; min-width: 0; }
.prof-card b { font-weight: 500; color: var(--rosa-barra); overflow-wrap: anywhere; }
.prof-card span span { font-size: 13px; color: var(--gris-rotulo); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-4); }
.date-field label, .slots-field > span, .prof-field > span, .form-field label { display: block; font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); margin-bottom: 8px; }
.form-field label .req { color: var(--rosa-texto); }
.date-field input, .form-field input, .form-field textarea, .form-field select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--rosa-display); border-radius: 0; background: transparent; color: var(--gris); font: inherit; -webkit-appearance: none; appearance: none; color-scheme: light; transition: border-color var(--t-hover) var(--ease); }
.form-field textarea { min-height: 120px; resize: vertical; }
.date-field input:focus, .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-bottom-color: var(--rosa-barra); }
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(96, 94, 91, .55); }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.slot-btn { padding: .7em .5em; border: 1px solid var(--rosa-display); border-radius: 9999px; background: transparent; color: var(--gris); font-size: 14px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.slot-btn:hover:not(:disabled) { background: var(--barra); border-color: var(--barra); color: var(--rosa-barra); }
.slot-btn[aria-pressed="true"] { background: var(--rosa-texto); border-color: var(--rosa-texto); color: var(--blanco); }
.slot-btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.slots-empty { font-size: 14px; color: var(--gris-rotulo); }
.skeleton { position: relative; overflow: hidden; background: var(--barra); border-radius: 9999px; }
.skeleton::after { content: ''; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: brillo 1.3s infinite; }
.sk-slot { height: 40px; }
@keyframes brillo { to { translate: 100% 0; } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.form-field { min-width: 0; }
.form-field.col-2 { grid-column: 1 / -1; }
.form-field .err-msg { display: none; margin-top: 6px; font-size: 13px; color: #9B3F2E; }
.form-field.has-error input, .form-field.has-error textarea { border-bottom-color: #9B3F2E; }
.form-field.has-error .err-msg { display: block; }
.summary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px var(--s-4); margin: 0; }
.summary dt { font: 500 12px/1.6 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); }
.summary dd { margin: 0; color: var(--gris); overflow-wrap: anywhere; }
.summary dd.price { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 28px; line-height: 1; color: var(--rosa-display); }
.form-alert { display: none; margin-bottom: var(--s-3); padding: 14px 18px; border: 1px solid rgba(155, 63, 46, .35); border-radius: 12px; background: rgba(155, 63, 46, .06); color: #7A3223; font-size: 15px; }
.form-alert.is-visible { display: block; }
.reserva-ok, .contact-ok { max-width: 560px; margin-inline: auto; text-align: center; padding: var(--s-5) var(--s-4); }
.reserva-ok__ic, .contact-ok .ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--s-3); border-radius: 50%; background: var(--barra); color: var(--rosa-barra); }
.reserva-ok h2, .contact-ok h3 { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: clamp(28px, 2.8cqw, 38px); line-height: 1.1; color: var(--rosa-display); margin-bottom: 10px; }
.reserva-ok p, .contact-ok p { color: var(--gris); margin-bottom: var(--s-4); }
.empty-state { padding: var(--s-4); border: 1px dashed var(--rosa-display); border-radius: 18px; text-align: center; }
.empty-state h3 { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 24px; color: var(--rosa-titulo); margin-bottom: 6px; }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: start; }
.contacto__datos { display: grid; gap: var(--s-4); }
.contacto__datos b { display: block; font: 500 12px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--gris-rotulo); margin-bottom: 6px; }
.contacto__datos p { color: var(--gris); }
.contacto__datos a:not(.pill) { color: var(--rosa-texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) var(--ease); }
.contacto__datos a:not(.pill):hover, .contacto__datos a:not(.pill):focus-visible { text-decoration-color: currentColor; }
.contacto__form { background: var(--tarjeta); border-radius: var(--radio-card); padding: clamp(24px, 3cqw, 40px); min-width: 0; }
.contacto__form .lume-btn { margin-top: var(--s-3); }

/* ---------- Sobre Lume ---------- */
.sobre__historia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: center; }
.sobre__historia .ph { --ar: 4/5; }
.sobre__valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--bloque); }
.valor { display: grid; gap: 10px; align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--linea); }
.valor h3 { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--fvs); font-size: 26px; line-height: 1.15; color: var(--rosa-titulo); }
.valor p { color: var(--gris); max-width: 36ch; }
.sobre__equipo { margin-top: var(--bloque); }
.sobre__equipo .centro { margin-bottom: var(--s-5); }
.sobre__cta { margin-top: var(--bloque); }

/* ---------- 404 y gracias ---------- */
.error404 .pagina__title { font-size: clamp(56px, 10cqw, 160px); }
.error404 .pagina__cabeza { max-width: none; }
.error404 .lead { max-width: 42ch; }

/* ---------- Responsive de lo nuevo ---------- */
@media (max-width: 900px) {
  .pagina { padding-top: calc(68px + var(--s-5)); }
  .contacto, .sobre__historia, .sobre__valores, .field-row, .form-grid, .option-grid { grid-template-columns: 1fr; }
  .contacto { gap: var(--s-5); }
  .wizard__step-lbl { font-size: 10px; letter-spacing: .04em; }
  .wizard__nav { flex-wrap: wrap; }
  .summary dl { grid-template-columns: 1fr; gap: 4px; }
  .summary dt { margin-top: 12px; }
}
@media (max-width: 480px) {
  .wizard__step-lbl { font-size: 0; }   /* 320–480: sólo el círculo numerado; el texto del paso lo dice #stepCounter */
  .wizard__nav .lume-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard__panel.is-active { animation: none; }
  .skeleton::after, .spinner { animation: none; }
}
/* márgenes que en el prototipo iban en style="" (reserva de la home) */
.reserva__cta { margin-top: 2rem; }
.reserva__datos { margin-top: 2.5rem; }
/* la tarjeta rápida de la ficha muestra el error del servidor sin romper la grilla */
.reserva-card__err { font-size: 13px; color: #7A3223; }
.reserva-card__err[hidden] { display: none; }