:root{
  /* Sacados del propio local: travertino, pared crema, latón y el neón cálido. */
  --ink:#2A2420;
  --ink-soft:#5C5148;
  --nube:#F7F3EE;
  --travertino:#E4DACC;
  --oro:#B08D57;
  /* Un rosa de verdad, no el melocoton de antes: mas oscuro y con mas magenta.
     El limite por abajo lo pone el uso principal, que es texto sobre --ink; a
     #D3818A eso son 5,3:1, y --ink encima tambien 5,3:1, asi que sirve para las
     dos cosas. Bajarlo mas rompe el texto del rail. */
  --neon:#D3818A;
  --carta:#FFFCF7;

  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* Jost para los cuerpos de texto y para la carta de tratamientos: es la que se
     usó desde el principio. Se probó Newsreader, una serif, y no convenció.
     Los rótulos en mayúscula y los botones van en Instrument Sans. Para
     cambiarla, esta línea. */
  --texto:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --gut:clamp(1.25rem,4vw,4.5rem);
  --col:min(30rem,42vw);

  /* centro de la tarjeta dentro del plano final */
  --card-x:49.6%;
  --card-y:52.4%;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  background:var(--ink);
  color:var(--nube);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}

/* ---------- el plano ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
/* Las seis fotos del local, apiladas y fijas. Solo una está visible; al cambiar
   de parada se funde a la siguiente. Sustituyen al recorrido en vídeo: el local
   es UNA sala, y el paseo por cinco era una ficción del render. */
.lienzo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 900ms ease,filter 1200ms ease,transform 2600ms ease;
  will-change:opacity;
}
.lienzo.viva{opacity:1}
/* El encuadre de cada lienzo. Con `cover` sobre una pantalla apaisada lo unico
   que se elige es la banda VERTICAL de la foto, y en manicura la del medio caia
   justo en lo mas desordenado: las dos lamparas UV, el monton de revistas y los
   sellos EPAL de los palets. Al 26% se ve la pared de diplomas, la piedra, el
   flexo y la orquidea. Si se cambia la foto, este numero se vuelve a mirar.
   El 46% sale de mirar LA FRANJA que se ve de verdad, no la foto entera: con el
   panel tapando 832 de 1400, lo unico visible es el 40% derecho. Al 26% esa
   franja era media pared de diplomas; al 54% se llenaba de toallas enrolladas y
   trastos del estante bajo. Al 46% entra la piedra, la orquidea, la toalla rosa
   y la lampara UV, que es lo que hay que enseñar en esta sala. */
#lienzo1{object-position:50% 46%}

.veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,rgba(20,16,13,.72) 0%,rgba(20,16,13,.42) 34%,rgba(20,16,13,0) 62%),
    linear-gradient(to top,rgba(20,16,13,.6) 0%,rgba(20,16,13,0) 38%);
  transition:opacity 900ms ease;
}
body.at-carta .veil{opacity:.35}

/* ---------- raíl de salas ---------- */
.rail{
  position:fixed;right:calc(var(--gut) * .7);top:50%;transform:translateY(-50%);
  z-index:3;transition:opacity 500ms ease;
}
body.at-carta .rail{opacity:0;pointer-events:none}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;justify-items:end}
.rail button{
  all:unset;cursor:pointer;display:flex;flex-direction:row-reverse;align-items:center;gap:.6rem;
  font:500 .625rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,243,238,.55);transition:color 300ms ease;
  text-shadow:0 1px 10px rgba(20,16,13,.9);
}
.rail button::before{
  content:"";width:1.375rem;height:1px;background:currentColor;
  box-shadow:0 1px 6px rgba(20,16,13,.9);
  transition:width 320ms cubic-bezier(.22,.61,.24,1);
}
.rail button:hover,.rail button:focus-visible{color:var(--nube)}
.rail button:focus-visible{outline:1px solid var(--neon);outline-offset:6px}
.rail li[aria-current="true"] button{color:var(--neon)}
.rail li[aria-current="true"] button::before{width:2.75rem;background:var(--neon)}
.rail span{opacity:0;transform:translateX(.25rem);transition:opacity 280ms ease,transform 280ms ease}
.rail button:hover span,.rail button:focus-visible span,
.rail li[aria-current="true"] span{opacity:1;transform:none}

/* ---------- escenas ----------
   Cada sala ocupa un tramo largo: se para al llegar (el vídeo se queda en el
   primer fotograma de la sala) y el resto del tramo recorre despacio el paso
   a la siguiente. El snap es `proximity` para no secuestrar ese recorrido. */
#scroll{position:relative;z-index:2;scroll-snap-type:y proximity;overflow-y:auto;height:100svh}
.scene{scroll-snap-align:start;position:relative}
.scene__in{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(2rem,8vh,5rem) calc(var(--gut) + 7rem) clamp(2.5rem,8vh,6rem) var(--gut);
  /* El velo de la escena no basta: el plano puede ser claro justo detrás del
     texto y entonces no se lee nada. Cada bloque lleva el suyo, atado al texto
     y no al fondo, y se desvanece hacia la derecha para no cortar la imagen. */
  width:min(52rem,80%);max-width:none;
  background:linear-gradient(to right,
    rgba(20,16,13,.90) 0%,rgba(20,16,13,.76) 32%,
    rgba(20,16,13,.34) 68%,rgba(20,16,13,0) 100%);
  will-change:opacity;
}

.plate{
  align-self:flex-start;width:fit-content;
  font:500 .625rem/1 var(--body);letter-spacing:.34em;text-transform:uppercase;
  color:var(--travertino);
  padding:.55rem .9rem;margin-bottom:1.5rem;
  border:1px solid rgba(228,218,204,.34);
  background:rgba(20,16,13,.28);
  backdrop-filter:blur(3px);
}

.display{
  font-family:var(--display);font-weight:400;
  /* Atado tambien al alto: en una ventana baja el titulo de dos lineas se salia
     por arriba y se cortaba, porque el bloque se alinea abajo. */
  font-size:clamp(2rem,min(6.2vw,7.4vh),4.75rem);line-height:.96;
  margin:0;letter-spacing:-.01em;
}
.display span{display:block;font-style:italic;color:var(--neon)}

.role{
  margin:.9rem 0 0;font:500 .6875rem/1 var(--body);
  letter-spacing:.42em;text-transform:uppercase;color:var(--travertino);
}
.lede{
  font-family:var(--texto);
  margin:1.25rem 0 0;max-width:34ch;
  font-size:clamp(1.0625rem,min(1.35vw,2.45vh),1.3125rem);line-height:1.6;
  color:rgba(247,243,238,.95);
}

/* Cierra el hero: mismo cuerpo que el lede pero en el tono de acento, para que
   se lea como saludo y no como mas texto de servicios. */
.bienvenida{color:var(--neon)}

.hint{
  position:absolute;left:50%;bottom:clamp(1.5rem,4.5vh,3rem);transform:translateX(-50%);
  margin:0;text-align:center;z-index:1;
  font:500 .6875rem/1 var(--body);
  letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;
  /* Centrado cae sobre el travertino claro de la foto, donde el velo de abajo ya
     casi no llega: sin la sombra el rotulo se pierde. */
  color:var(--nube);text-shadow:0 1px 14px rgba(26,21,18,.9),0 0 3px rgba(26,21,18,.7);
  animation:breathe 3.4s ease-in-out infinite;
}
.hint::after{
  content:"";display:block;width:.55rem;height:.55rem;margin:.9rem auto 0;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

.facts{display:flex;flex-wrap:wrap;gap:2rem;margin:2rem 0 0}
.facts div{display:grid;gap:.35rem}
.facts dt{font:500 .5625rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(247,243,238,.5)}
.facts dd{margin:0;font-family:var(--display);font-size:1.5rem;color:var(--nube)}
.facts dd i{font:400 1.125rem/1 var(--body);font-style:normal;color:var(--travertino);margin-right:.1em}

.menu{list-style:none;margin:clamp(1rem,2.4vh,1.75rem) 0 0;padding:0;display:grid;gap:clamp(.45rem,1vh,.7rem);max-width:26rem}
/* La lista va en la serif del cuerpo de texto: es una carta de tratamientos, se
   lee, no se escanea como una tabla de interfaz.
   Rejilla en vez de flex por dos motivos: la descripcion cae en una segunda fila
   bajo el nombre sin descolocar el precio, y el boton de anadir se queda en su
   propia columna a la derecha, alineado en todas las filas. */
.menu li{
  display:grid;grid-template-columns:1fr auto auto;column-gap:1rem;align-items:baseline;
  padding-bottom:.7rem;border-bottom:1px solid rgba(228,218,204,.28);
  font-family:var(--texto);font-size:1.3125rem;
}
.menu .serv{grid-column:1}
/* Donde no se reserva (la academia) no hay `+`, y sin una linea que lo diga
   parece que falte algo. Va debajo de la lista, no dentro de ella. */
.menu__nota{
  margin:.9rem 0 0;max-width:38ch;
  font:400 .9375rem/1.5 var(--texto);color:rgba(247,243,238,.66);
}
.menu .precio{
  color:var(--travertino);font-size:1.1875rem;white-space:nowrap;opacity:.95;
  font-variant-numeric:lining-nums tabular-nums;
}
/* Anadir servicio. Es un objetivo pequeno, asi que la zona pulsable se estira
   con padding en vez de agrandar el circulo, que descuadraria la fila. */
.menu .mas{
  grid-column:3;grid-row:1;justify-self:end;align-self:center;
  cursor:pointer;width:1.75rem;height:1.75rem;padding:0;
  display:grid;place-items:center;
  font:400 1.125rem/1 var(--body);
  color:var(--travertino);background:transparent;
  border:1px solid rgba(228,218,204,.42);border-radius:50%;
  transition:background 200ms ease,color 200ms ease,border-color 200ms ease;
}
.menu .mas:hover{border-color:var(--nube);color:var(--nube)}
.menu .mas:focus-visible{outline:1px solid var(--neon);outline-offset:3px}
.menu li.elegido .mas{background:var(--nube);color:var(--ink);border-color:var(--nube)}
.menu li.elegido .serv{color:var(--nube)}
/* La descripcion va en la serif del cuerpo: se lee como texto y no le compite
   al nombre del servicio, que es lo que se escanea. */
.menu .desc{
  grid-column:1/2;margin-top:.2rem;
  font-family:var(--texto);font-size:1.125rem;line-height:1.5;
  color:rgba(247,243,238,.76);
}

/* ---------- cartas largas ----------
   Hasta ocho servicios con descripcion no caben en una columna dentro de una
   pantalla que no scrollea. Se reparten en dos y la sala se ensancha para
   darles sitio; el velo tambien, o la segunda columna cae sobre la pared clara
   del plano y deja de leerse. */
.scene--menu .scene__in{
  width:min(60rem,88%);
  background:linear-gradient(to right,
    rgba(20,16,13,.93) 0%,rgba(20,16,13,.89) 52%,
    rgba(20,16,13,.64) 80%,rgba(20,16,13,0) 100%);
}
.scene--menu .display{font-size:clamp(1.75rem,min(4.8vw,5.8vh),3.5rem)}
.scene--menu .lede{font-size:clamp(.875rem,min(1.05vw,1.95vh),1.0625rem);max-width:46ch}
.menu--larga{
  max-width:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.35rem,.9vh,.65rem) clamp(1.5rem,3vw,2.75rem);
}
/* OJO: TODAS las salas tienen mas de tres servicios, asi que todas llevan
   `menu--larga`. O sea que estos dos tamanos son los que se ven de verdad -- los
   de `.menu li` y `.menu .desc` de arriba no los usa nadie. Se estuvo subiendo
   la letra ahi arriba sin que cambiara nada en pantalla; el precio si crecia,
   porque `.precio` no lo pisa esta clase, y por eso parecia que solo subian los
   precios. Si hay que tocar el tamano de los servicios, es AQUI. */
.menu--larga li{padding-bottom:.6rem;font-size:1.1875rem}
.menu--larga .desc{font-size:1.0625rem;line-height:1.45;margin-top:.2rem}

/* Sin sitio para dos columnas, la carta vuelve a una sola. */
@media (max-width:62rem){
  .menu--larga{grid-template-columns:1fr}
}

/* Los cursos llevan su "Incluye" debajo: es lo que los vende y lo que los
   distingue entre si (el de 450 es el unico que se lleva el maletin a casa).
   Hay que resetear lo heredado de .menu li, que es una rejilla con borde. */
.menu .incluye{
  grid-column:1/2;list-style:none;margin:.5rem 0 .15rem;padding:0;
  display:grid;gap:.22rem;
  font-family:var(--texto);font-size:.9375rem;line-height:1.45;
  color:rgba(247,243,238,.58);
}
.menu .incluye li{
  display:block;border:0;padding:0 0 0 .8rem;font-size:inherit;position:relative;
}
.menu .incluye li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:3px;height:3px;background:var(--oro);opacity:.85;
}
.menu .incluye b{font-weight:500;color:rgba(247,243,238,.82)}
.menu .curso .desc{margin-top:.25rem}

/* El kit no es un servicio mas, es una oferta: cruza las dos columnas y se
   marca con el laton de la casa. */
.menu .kit{
  grid-column:1/-1;margin-top:.4rem;padding:.7rem .9rem;
  border:1px solid rgba(176,141,87,.55);
  background:rgba(30,23,15,.62);
}
.menu .kit .precio{color:var(--oro);font-size:.9375rem}
.menu .kit .desc{color:rgba(247,243,238,.74)}

.add{
  align-self:flex-start;margin-top:clamp(1rem,2.6vh,1.75rem);cursor:pointer;
  font:500 .6875rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  /* relleno y no fantasma: un borde de 1px sobre una foto no se ve, y este es
     el unico boton de la escena. Tiene que pedir que lo pulsen. */
  color:var(--ink);background:var(--nube);
  border:1px solid var(--nube);padding:.95rem 1.6rem;
  box-shadow:0 10px 30px rgba(20,16,13,.35);
  transition:background 260ms ease,border-color 260ms ease,color 260ms ease,transform 260ms ease;
}
.add:hover{background:var(--neon);border-color:var(--neon);transform:translateY(-1px)}
.add:focus-visible{outline:1px solid var(--neon);outline-offset:4px}
.add[aria-pressed="true"]{background:var(--neon);border-color:var(--neon);color:var(--ink)}
.add[aria-pressed="true"]::before{content:"✓ ";}

/* ---------- la carta ---------- */
.carta-chip[hidden]{display:none}
body.at-carta .carta-chip{opacity:0;pointer-events:none}
.carta-chip{
  position:fixed;right:var(--gut);bottom:calc(var(--gut) * .8 + 4.6rem);z-index:4;
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;background:var(--carta);color:var(--ink);
  box-shadow:0 12px 34px rgba(20,16,13,.35);
  font:500 .625rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  animation:slip 420ms cubic-bezier(.22,.61,.24,1);
  transition:opacity 400ms ease;
}
@keyframes slip{from{opacity:0;transform:translateY(12px)}}
.carta-chip__count{
  display:grid;place-items:center;min-width:1.35rem;height:1.35rem;
  background:var(--ink);color:var(--carta);border-radius:50%;letter-spacing:0;
}

.scene--carta{
  height:100svh;scroll-snap-align:start;max-width:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vh,3rem) var(--gut);
}

.carta,.gracias{
  width:min(38rem,100%);background:var(--carta);color:var(--ink);
  padding:clamp(1.5rem,3.5vw,2.75rem);
  box-shadow:0 40px 90px rgba(20,16,13,.5);
  opacity:0;transform:scale(.28) translateY(4vh);
  transition:opacity 900ms ease 500ms,transform 1200ms cubic-bezier(.22,.61,.24,1) 400ms;
  max-height:92svh;overflow-y:auto;
}
body.at-carta .carta,body.at-carta .gracias{opacity:1;transform:none}

.carta__head{text-align:center;padding-bottom:1.5rem;border-bottom:1px solid rgba(42,36,32,.16)}
.carta__brand{margin:0;font-family:var(--display);font-size:1.75rem;letter-spacing:.22em;text-transform:uppercase}
.carta__sub{margin:.4rem 0 0;font:500 .6875rem/1 var(--body);letter-spacing:.36em;text-transform:uppercase;color:var(--oro)}

.carta fieldset{border:0;margin:clamp(.9rem,2.4vh,1.75rem) 0 0;padding:0}
.carta legend,.carta label{
  font:500 .6875rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.carta legend{padding:0;margin-bottom:.9rem}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips__vacio{margin:0;font:400 .9375rem/1.5 var(--texto);color:rgba(92,81,72,.7)}
.chips button{
  cursor:pointer;font:500 .8125rem/1 var(--body);letter-spacing:.06em;
  padding:.72rem 1.05rem;background:transparent;color:var(--ink-soft);
  border:1px solid rgba(42,36,32,.22);
  transition:background 200ms ease,color 200ms ease,border-color 200ms ease;
}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--carta);border-color:var(--ink)}
.chips button:focus-visible{outline:1px solid var(--oro);outline-offset:3px}

.carta__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.75rem}
.carta__grid .wide{grid-column:1/-1}
.carta label{display:grid;gap:.5rem}
.carta input{
  font:400 1rem/1.4 var(--body);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(42,36,32,.28);
  padding:.5rem 0;letter-spacing:0;text-transform:none;
}
.carta input::placeholder{color:rgba(92,81,72,.42)}
.carta input:focus{outline:0;border-bottom-color:var(--oro)}
.carta input:focus-visible{border-bottom-width:2px}

/* ---------- cuando ----------
   El dia lo pide un <input type="date">: el calendario nativo ya da mes y ano,
   sale bien en movil y no hay que mantenerlo. Lo que no sabe hacer es cerrar los
   viernes ni conocer el horario, asi que eso lo pinta la lista de huecos, que se
   genera desde HORARIO en tour.js. */
.linea input[type="date"]{font:400 1.0625rem/1.35 var(--body);color:var(--tinta)}
.cuando{margin-top:clamp(.9rem,2.4vh,1.5rem)}
.cuando__horario{margin:0 0 .75rem;font:400 .9375rem/1.5 var(--texto);color:var(--ink-soft)}
.cuando__horario b{font-weight:500;color:var(--ink)}
.cuando__huecos{display:flex;flex-wrap:wrap;gap:.4rem}
.hueco{
  cursor:pointer;font:500 .8125rem/1 var(--body);font-variant-numeric:tabular-nums;
  padding:.6rem .8rem;background:transparent;color:var(--ink-soft);
  border:1px solid rgba(42,36,32,.22);
  transition:background 200ms ease,color 200ms ease,border-color 200ms ease;
}
.hueco:hover{border-color:var(--ink)}
.hueco[aria-pressed="true"]{background:var(--ink);color:var(--carta);border-color:var(--ink)}
.hueco:focus-visible{outline:1px solid var(--oro);outline-offset:3px}
/* Las horas cogidas se enseñan tachadas en vez de desaparecer: así se entiende
   por qué faltan, y de paso se ve que el estudio tiene trabajo. */
.hueco--cogido{
  cursor:not-allowed;text-decoration:line-through;
  color:rgba(92,81,72,.42);border-color:rgba(42,36,32,.12);
  background:repeating-linear-gradient(-45deg,
    transparent 0 5px,rgba(42,36,32,.05) 5px 10px);
}
.hueco--cogido:hover{border-color:rgba(42,36,32,.12)}
.cuando__aviso:empty{display:none}
.cuando__aviso{margin:.7rem 0 0;font:400 .9375rem/1.5 var(--texto);color:#9C3B24}

.carta__error{margin:1.25rem 0 0;color:#9C3B24;font-size:.9375rem}
.carta__send{
  width:100%;margin-top:clamp(.9rem,2.4vh,1.75rem);cursor:pointer;
  font:500 .8125rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--carta);background:var(--ink);border:1px solid var(--ink);padding:clamp(.8rem,2.2vh,1.15rem);
  transition:background 240ms ease,color 240ms ease;
}
.carta__send:hover{background:var(--oro);border-color:var(--oro)}
.carta__send:focus-visible{outline:1px solid var(--oro);outline-offset:3px}
.carta__legal{margin:1rem 0 0;font-size:.875rem;color:var(--ink-soft);text-align:center}

.gracias{text-align:center}
.gracias .display{color:var(--ink)}
.gracias .display span{color:var(--oro)}
.gracias .lede{color:var(--ink-soft);margin-inline:auto}
.gracias .add{align-self:center;margin-inline:auto;border-color:rgba(42,36,32,.3);color:var(--ink)}
.gracias .add:hover{background:var(--ink);color:var(--carta)}

/* ---------- vertical / móvil ---------- */
@media (max-aspect-ratio:1/1){
  :root{--card-x:49.2%;--card-y:46.9%;--col:100%}
  body.at-carta .lienzo{transform:scale(1.9)}
  .rail{display:none}
  .scene__in{max-width:none;padding-right:var(--gut)}
  .veil{background:linear-gradient(to top,rgba(20,16,13,.9) 4%,rgba(20,16,13,.58) 44%,rgba(20,16,13,.12) 78%,rgba(20,16,13,0) 100%)}
  .carta__grid{grid-template-columns:1fr}
  .carta-chip{bottom:auto;top:calc(var(--gut) * .7)}
}

@media (prefers-reduced-motion:reduce){
  .lienzo,.carta,.gracias,.veil{transition-duration:1ms}
  .hint{animation:none}
}

/* ---------- la carta como tarjeta ----------
   Mismo diseno que tarjeta.py (el asset del plano macro): doble filete, marca
   en laton con relieve, filete con rombo y los campos escritos sobre renglones.
   Aqui se hace con CSS y no con el PNG: asi es accesible, responsive y el texto
   que escribe la clienta es texto de verdad, no una imagen. */
.carta{
  --papel:#EDE4DA; --tinta:#3A2F26; --laton:#A38873; --renglon:#C6B7A6; --marco:#BCA890;
  background:var(--papel);
  padding:clamp(1.75rem,4vw,2.75rem);
  box-shadow:inset 0 0 0 1px var(--marco), inset 0 0 0 4px var(--papel), inset 0 0 0 5px var(--renglon);
}
.carta__head{border-bottom:0;padding-bottom:clamp(.3rem,1vh,.75rem)}
.carta__brand{
  color:var(--laton);
  /* relieve: brillo arriba, sombra abajo. Es lo que hace leer metal grabado. */
  text-shadow:-1px -1px 0 rgba(201,177,149,.9), 1px 1px 0 rgba(110,85,64,.55);
}
.carta__rule{display:flex;align-items:center;justify-content:center;gap:.55rem;margin:clamp(.35rem,1.1vh,.7rem) 0 clamp(.3rem,.9vh,.55rem)}
.carta__rule::before,.carta__rule::after{content:"";width:clamp(2.5rem,9vw,4.5rem);height:1px;background:var(--marco)}
.carta__rule i{width:6px;height:6px;background:var(--laton);transform:rotate(45deg)}

.carta__lineas{margin-top:clamp(.9rem,2.4vh,1.75rem);display:grid;gap:clamp(.6rem,1.9vh,1.15rem)}
.linea{
  display:grid;grid-template-columns:minmax(5.5rem,9rem) 1fr;align-items:baseline;gap:.9rem;
}
.linea>span{text-align:right;white-space:nowrap}
.linea input{
  /* la letra manuscrita sale de la pila del sistema: sin fuente externa que
     cargar, y si el equipo no tiene ninguna cae en la cursiva generica */
  font:400 1.5rem/1.35 "Segoe Script","Bradley Hand","Brush Script MT","Snell Roundhand",cursive;
  color:var(--tinta);border-bottom:1px solid var(--renglon);padding:.1rem 0 .35rem;
}
.linea input::placeholder{
  font:500 .6875rem/1.9 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(92,81,72,.38);
}
.linea input:focus{border-bottom-color:var(--laton)}

/* Un `input` trae un ancho propio (unos 20 caracteres) y una celda de rejilla no
   encoge por debajo de su contenido, asi que la columna se quedaba en 350px
   dentro de una carta de 264 y le salia barra horizontal en el movil. `min-width:0`
   es lo que le da permiso a la celda para encoger. */
.carta__lineas,.linea{min-width:0}
.linea input{min-width:0;width:100%}

/* LAS ESCENAS CRECEN CON SU CONTENIDO, EN CUALQUIER ANCHO.

   La escena era un bloque de 100svh con el contenido anclado ABAJO, asi que lo
   que no cabia se perdia por arriba -- en manicura no se veia el primer
   tratamiento y la biografia empezaba a media frase. Empezo siendo cosa del
   movil, luego de las tablets, y con la letra de los servicios ya grande tambien
   se cortaba en 1400x820. A cada tamano de letra le tocaba mover el limite, que
   es senal de que el limite sobra: si el contenido no cabe, la escena crece y se
   baja, en el movil y en el ordenador.

   No se pierde nada por el camino. El `.scene__in` era `sticky` con `top:0`
   dentro de una `.scene` de la MISMA altura, o sea que no tenia margen para
   pegarse a ningun sitio: no hacia nada. Y la foto de fondo vive en `.stage`,
   que es `fixed`. El `scroll-snap-align` sigue enganchando al principio de cada
   escena. */
.scene__in{
  position:static;height:auto;min-height:100svh;
  justify-content:flex-start;overflow:visible;
}
/* Con `#scroll` delante para ganarle a `.hero,.scene,.scene--carta{height:100svh}`,
   que esta mas abajo en el fichero y con la misma especificidad ganaria ella. */
#scroll .scene,#scroll .scene--carta{height:auto;min-height:100svh}

@media (max-width:36rem){
  .linea{grid-template-columns:1fr;gap:.25rem}
  .linea>span{text-align:left}
  /* Con .42em, "NAIL ARTIST · ESTETICA" parte y el separador se queda colgando
     al final de la linea. Con menos espaciado cabe entero. */
  .role{letter-spacing:.26em}
}

/* ---------- hero ----------
   Antes se abria con la fachada desde la acera: un plano de calle, lento, que
   tardaba en decir a que huele el sitio. Ahora abre con la pared de esmaltes y
   con poco scroll ya estas dentro, en recepcion. */
.hero{
  position:relative;
  display:flex;align-items:flex-end;
  padding:0 var(--gut) clamp(4rem,12vh,9rem);
  background:#1A1512 center/cover no-repeat;
  /* La foto es clara y de alta clave: sin un velo fuerte abajo, el título en
     blanco no se lee. El degradado sube hasta el 78% y deja limpia la mano. */
  background-image:
    /* columna oscura a la izquierda: el titulo cae sobre travertino claro y sin
       esto el blanco no despega del fondo */
    linear-gradient(to right,rgba(26,21,18,.82) 0%,rgba(26,21,18,.58) 30%,rgba(26,21,18,.14) 52%,rgba(26,21,18,0) 66%),
    linear-gradient(to top,rgba(26,21,18,.88) 0%,rgba(26,21,18,.62) 24%,rgba(26,21,18,.18) 54%,rgba(26,21,18,0) 80%),
    url("media/hero.jpg");
}

@media (max-aspect-ratio:1/1){
  .hero{
    background-image:
      linear-gradient(to top,rgba(26,21,18,.93) 0%,rgba(26,21,18,.80) 26%,rgba(26,21,18,.32) 56%,rgba(26,21,18,0) 80%),
      url("media/hero-portrait.jpg");
  }
}

.hero__in{max-width:min(34rem,46vw);position:relative;z-index:1}
.hero .display{font-size:clamp(2.75rem,min(8.4vw,10vh),6.75rem)}
.hero .role{font-size:.8125rem;letter-spacing:.36em;margin-top:1.1rem}
.hero .lede{font-size:clamp(1.0625rem,min(1.6vw,2.9vh),1.5rem);max-width:28ch;margin-top:1.5rem}

/* ---------- Bea, foto real ---------- */
.retrato{margin:2rem 0 0;max-width:15rem}
.retrato img{width:100%;height:auto;display:block;border-radius:2px;box-shadow:0 24px 60px rgba(20,16,13,.55)}
.retrato figcaption{
  margin-top:.7rem;font:500 .5625rem/1 var(--body);letter-spacing:.28em;
  text-transform:uppercase;color:var(--oro);
}

/* ---------- el pasillo se difumina y aparece la tarjeta ----------
   Antes el video se iba con un zoom de x2.6 que daba un tiron. Ahora solo se
   desenfoca y se apaga, despacio, y la tarjeta entra recta y centrada encima. */
body.at-carta .lienzo{
  transform:scale(1.04);
  filter:blur(26px) brightness(.55) saturate(.8);
}
.scene--carta{display:flex}
.carta,.gracias{
  width:min(44rem,100%);margin-inline:auto;
  /* Todo atado al alto de ventana: en una pantalla baja la tarjeta sacaba barra
     de scroll interna, y una tarjeta con scroll deja de parecer una tarjeta. */
  padding:clamp(1.1rem,3vh,2.75rem) clamp(1.5rem,3.5vw,2.75rem);
  /* entra recta: sin el scale(.28) inicial la tarjeta no llega deformandose */
  transform:translateY(2.5vh);
  transition:opacity 1100ms ease 600ms,transform 1100ms cubic-bezier(.22,.61,.24,1) 600ms;
}


/* ---------- una pantalla por parada ----------
   El scroll ya no scrubea: cada seccion ocupa exactamente una pantalla y hace
   snap, asi que un desliz = una parada. El vídeo hace el viaje por su cuenta. */
#scroll{scroll-snap-type:y mandatory}
.hero,.scene,.scene--carta{height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
/* arrancan invisibles: las enciende marcar() al llegar a su parada */
.scene__in{opacity:0;transition:opacity 520ms ease}
body.en-hero .rail{opacity:0;pointer-events:none}


/* ---------- quien es Bea ----------
   El recorrido de fondo se apaga para que aqui mande la persona y no la sala,
   pero se queda en color: el blanco y negro apagaba tambien el local. Solo baja
   la luz, que es lo que hace legible el panel. */
body.en-bea .lienzo.viva{filter:brightness(.42) saturate(.9) blur(5px)}
body.en-bea .veil{opacity:.25}

/* "Quien soy" es el unico bloque con prosa larga de verdad, y a poco que la
   pantalla sea baja no cabe: medido en 1120x700 se salia 20px por arriba y otros
   20 por abajo, o sea que se perdia la primera linea y la ultima. Esta escena
   crece con su texto en vez de recortarlo, en cualquier ancho.
   No se pierde nada: la foto de fondo vive en `.stage`, que es `fixed`, asi que
   sigue quieta aunque el bloque deje de ser `sticky`. */
#scroll .scene--bea{height:auto;min-height:100svh}
.scene--bea .scene__in{position:static;height:auto;min-height:100svh}
/* Menos hueco a la derecha que las demas escenas: ahi solo esta el rail, que es
   estrecho, y esos 4rem se los queda el texto -- que es lo que decide el alto. */
#scroll .scene--bea .scene__in{width:min(92rem,96%);padding-right:calc(var(--gut) + 3rem)}

.scene--bea .scene__in{
  /* Sin el velo de escena: aqui el contraste ya lo pone el panel, y sumando los
     dos el plano de fondo se apagaba entero. */
  background:none;
  width:min(84rem,94%);max-width:none;padding-right:var(--gut);
  justify-content:center;
}
.bea{
  /* Los tres numeros de aqui salen de medir, no de gusto. En 1400x820 el bloque
     entero tiene que caber en una pantalla, y con la foto a 22rem y el texto
     cogiendo el resto entra justo (66..816 de 820). Subir la foto a 24rem son 31
     px de mas y ya no cabe. El retrato queda en 352x447, el doble de grande que
     los 178x223 que tenia. */
  display:grid;grid-template-columns:minmax(14rem,22rem) minmax(0,60rem);
  gap:clamp(1.5rem,3vw,2.5rem);align-items:center;
}
.bea__foto{margin:0}
.bea__foto img{
  width:100%;height:auto;display:block;
  filter:contrast(1.06);
  box-shadow:0 30px 70px rgba(20,16,13,.6);
}
.bea__texto{
  padding:clamp(2rem,3.4vw,3rem) clamp(2rem,3.6vw,3.25rem);
  background:rgba(20,16,13,.8);
  backdrop-filter:blur(14px) saturate(.6);
  border:1px solid rgba(247,243,238,.12);
}
.bea__texto .plate{margin-bottom:.9rem}
.bea__texto .lede{max-width:none}
.bea__texto .lede + .lede{margin-top:.7rem}
.bea__texto .facts{margin-top:1.4rem}
/* La biografia son cuatro parrafos y el panel vive dentro de una pantalla que no
   scrollea: el titulo cede tamano para que quepan sin recortar. */
.scene--bea .display{font-size:clamp(1.75rem,min(4vw,5vh),3.25rem);margin-bottom:.9rem}
.bea__texto strong{font-weight:500;color:var(--nube)}
/* En una ventana baja la biografia no cabe con el titulo grande delante, y el
   panel no puede scrollear por dentro sin robarle la rueda al tour. El nombre ya
   va en negrita en la primera linea, asi que el titulo es lo que cede. */
@media (max-height:50rem){
  .scene--bea .display{display:none}
  .bea__texto{padding:clamp(2.4rem,4.6vw,3.5rem) clamp(1.6rem,3.2vw,2.4rem)}
  .bea__texto .lede + .lede{margin-top:.8rem}
  .bea__texto .facts{margin-top:1.5rem}
}

@media (max-width:52rem){
  .bea{grid-template-columns:1fr;gap:1.25rem}
  .bea__foto{max-width:11rem}
}

/* LA FOTO DE BEA, DENTRO DEL CUADRO. En una columna estrecha la rejilla de dos
   columnas la dejaba en 176px de ancho (`max-width:11rem` de aqui arriba), que
   no era ni foto ni nada. En movil pasa a ser la cabecera del panel: mismo
   ancho, mismo fondo y mismo borde, sin el de abajo, y el texto sin el de
   arriba, asi que entre las dos cajas no se ve linea.

   El alto va FIJO, no `max-height`. Con `height:auto` y un maximo, el navegador
   no recorta: encoge tambien el ancho para no deformar la foto, y por eso salia
   un sello de 110px en medio del cuadro. Con un alto definido, `cover` recorta,
   que es lo que se buscaba. */
@media (max-width:52rem){
  .bea{grid-template-columns:1fr;gap:0}
  .bea__foto{
    max-width:none;
    background:rgba(20,16,13,.8);
    backdrop-filter:blur(14px) saturate(.6);
    border:1px solid rgba(247,243,238,.12);
    border-bottom:0;
    padding:clamp(1.25rem,4.5vw,1.75rem) clamp(1.6rem,3.2vw,2.4rem) 0;
  }
  /* Vertical, como la foto: se le da su propia proporcion (865x1098) en vez de
     una banda apaisada. El ancho se queda por debajo del panel y alineado a la
     izquierda, que es por donde entra el texto -- a ancho completo el retrato
     ocupaba media pantalla antes de empezar a leer. */
  .bea__foto img{
    width:min(58%,14rem);height:auto;aspect-ratio:865/1098;
    object-fit:cover;object-position:50% 22%;box-shadow:none;
  }
  .bea__texto{border-top:0;padding-top:clamp(1.25rem,4.5vw,1.75rem)}
}


/* ---------- móvil ----------
   Ya no hay vídeo del que prescindir, así que móvil y escritorio ven lo mismo.
   Lo único que cambia es el snap: en una pantalla pequeña, secuestrar el scroll
   para que cada gesto sea una parada molesta más de lo que aporta. */
@media (max-width:52rem){
  #scroll{scroll-snap-type:none}
  .hero,.scene,.scene--carta{scroll-snap-align:none;scroll-snap-stop:normal}
  .rail{display:none}
  .carta,.gracias{opacity:1;transform:none}
}

/* ---------- el asistente ----------
   El boton se queda en la esquina de abajo a la derecha, que es donde se busca
   un asistente. El contador de la carta comparte esquina, asi que sube el sobre
   el boton (4.6rem: el circulo mide 3.25 y quedan .75 de aire). */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ia-abrir{
  position:fixed;right:var(--gut);bottom:calc(var(--gut) * .8);z-index:6;
  width:3.25rem;height:3.25rem;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);background:var(--neon);border:0;border-radius:50%;
  box-shadow:0 12px 34px rgba(42,36,32,.45);
  transition:transform 240ms cubic-bezier(.22,.61,.24,1),background 240ms ease;
}
.ia-abrir svg{width:1.5rem;height:1.5rem}
.ia-abrir:hover{transform:translateY(-2px)}
.ia-abrir:focus-visible{outline:2px solid var(--nube);outline-offset:3px}
body.ia-abierta .ia-abrir{background:var(--ink);color:var(--carta)}
/* En la carta el rail y el contador se apagan; el asistente tambien sobra ahi,
   que es donde la clienta ya esta rellenando. */
body.at-carta .ia-abrir{opacity:0;pointer-events:none}

.ia[hidden]{display:none}
.ia{
  position:fixed;right:var(--gut);bottom:calc(var(--gut) * .8 + 4rem);z-index:7;
  width:min(23rem,calc(100vw - var(--gut) * 2));
  max-height:min(30rem,70svh);display:flex;flex-direction:column;
  background:var(--carta);color:var(--ink);
  box-shadow:0 26px 70px rgba(42,36,32,.5);
  animation:slip 300ms cubic-bezier(.22,.61,.24,1);
}
.ia__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem;border-bottom:1px solid rgba(42,36,32,.14);
}
.ia__titulo{
  margin:0;font:500 .625rem/1 var(--body);
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
}
.ia__cerrar{
  cursor:pointer;border:0;background:transparent;color:var(--ink-soft);
  font:400 1.35rem/1 var(--body);padding:0 .2rem;
}
.ia__cerrar:hover{color:var(--ink)}
.ia__hilo{
  flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.7rem;
}
.ia__msg{
  margin:0;max-width:90%;padding:.6rem .8rem;
  font:400 1rem/1.5 var(--texto);
}
.ia__msg--clienta{
  align-self:flex-end;background:var(--ink);color:var(--carta);
}
.ia__msg--asistente{
  align-self:flex-start;background:rgba(42,36,32,.06);color:var(--ink);
}
.ia__msg--esperando{opacity:.55;font-style:italic}
.ia__fichas{display:grid;gap:.4rem}
.ia__ficha{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  cursor:pointer;text-align:left;padding:.6rem .75rem;
  background:transparent;border:1px solid rgba(42,36,32,.22);
  transition:background 200ms ease,border-color 200ms ease;
}
.ia__ficha:hover{border-color:var(--ink)}
/* La ficha de algo que no se reserva: se lee, no se pulsa. */
/* La de info lleva tres cosas (nombre, precio y la nota), asi que pasa a rejilla:
   nombre y precio arriba, la nota debajo ocupando el ancho. */
.ia__ficha--info{
  display:grid;grid-template-columns:1fr auto;
  cursor:default;border-style:dashed;opacity:.9;
}
.ia__ficha--info:hover{border-color:rgba(42,36,32,.2)}
.ia__ficha-nota{
  grid-column:1/-1;margin-top:.15rem;
  font:400 .8125rem/1.35 var(--texto);color:var(--ink-soft);
}
.ia__ficha:focus-visible{outline:1px solid var(--oro);outline-offset:2px}
.ia__ficha.puesta{background:var(--ink);border-color:var(--ink);cursor:default}
.ia__ficha.puesta .ia__ficha-nombre,.ia__ficha.puesta .ia__ficha-precio{color:var(--carta)}
.ia__ficha-nombre{font:400 1rem/1.3 var(--texto);color:var(--ink)}
.ia__ficha-precio{
  font:500 .75rem/1 var(--body);color:var(--ink-soft);white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}
.ia__pie{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid rgba(42,36,32,.14)}
.ia__campo{flex:1}
.ia__pie input{
  width:100%;font:400 1rem/1.4 var(--texto);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(42,36,32,.28);
  padding:.4rem 0;
}
.ia__pie input:focus{outline:0;border-bottom-color:var(--oro)}
.ia__pie button{
  cursor:pointer;width:2.25rem;border:0;background:var(--ink);color:var(--carta);
  font:400 1.1rem/1 var(--body);
}
.ia__pie button:disabled{opacity:.4;cursor:wait}
.ia__nota{
  margin:0;padding:0 1rem .9rem;
  font:400 .8125rem/1.45 var(--texto);color:rgba(92,81,72,.75);
}

@media (max-width:36rem){
  .ia{right:0;left:0;bottom:0;width:100%;max-height:80svh}
}