/* ============================================================
   EUNOIA SPA — tokens
   Paleta tomada del logo real (columna jónica dorada sobre crema)
   y de las fotos del local: madera clara, crema, dorado, tinta.
   El dorado #B08C4F no pasa AA como texto sobre crema (4.30:1),
   por eso el texto dorado usa #7E6230 (5.13:1) y el dorado claro
   queda solo para filetes, bordes e iconografía.
   ============================================================ */
:root{
  --cream:#F7F2EA; --paper:#FFFFFF; --sand:#EDE4D6; --sand-deep:#DFD2BE;
  --gold:#B08C4F;  --gold-deep:#7E6230; --gold-soft:#F1E7D5; --gold-lite:#D8BE8A;
  --ink:#26221D;   --ink-soft:#6E6558;  --night:#1C1917; --night-soft:#2A2622;
  --line:rgba(38,34,29,.13);
  /* botones: el dueño pidió los oscuros un poco más claros. Café tostado en
     vez de casi negro; con texto crema da 7.9:1 */
  --btn:#5B4733; --btn-h:#6E5840;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow:0 20px 46px -26px rgba(38,34,29,.42);

  --step:.42s cubic-bezier(.22,.9,.28,1);
  /* los estados de hover/press van a 200ms: a 420ms el botón se sentía
     blando. --step queda para reveals, la barra flotante y el zoom de fotos */
  --fast:.2s cubic-bezier(.22,.9,.28,1);
  --pad:clamp(20px,5vw,44px);
  --maxw:1180px;
  --navh:88px;
}
*,*::before,*::after{box-sizing:border-box}
/* sin esto, cualquier clase con display:flex/inline-flex gana sobre el
   atributo hidden y el elemento sigue visible (pasa con .btn y .bk__nav) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--navh)}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:300 17px/1.7 Jost,system-ui,-apple-system,"Segoe UI",sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* height:auto es obligatorio: el atributo height del HTML gana sobre
   aspect-ratio y descuadra el alto de todas las fotos */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; line-height:1.06;
  margin:0; letter-spacing:-.008em}
h1{font-size:clamp(44px,6.6vw,86px); font-weight:700; letter-spacing:-.018em}
h2{font-size:clamp(29px,4vw,46px)}
h3{font-size:clamp(18.5px,1.5vw,20.5px); line-height:1.22}
p{margin:0}
/* figure y blockquote traen margin:1em 40px por defecto del navegador y
   dejaban los carruseles arrancando 42px adentro, con la primera foto
   recortada y la flecha "anterior" siempre activa */
figure,blockquote,dl,dd{margin:0}
::selection{background:var(--gold-soft); color:var(--ink)}
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:3px}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--cream);
  padding:12px 18px; font-weight:500}
.skip:focus{left:0}
.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}

/* ---------- utilidades ---------- */
.tag{display:inline-flex; align-items:center; gap:10px; color:var(--gold-deep);
  font:500 12px/1 Jost,sans-serif; letter-spacing:.22em; text-transform:uppercase}
.tag::before{content:""; width:28px; height:1px; background:var(--gold); flex:none;
  transform-origin:left}
.lede{color:var(--ink-soft); font-size:clamp(15.5px,1.6vw,17px); max-width:60ch}
.ico{width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round}
em{font-style:italic; font-family:"Cormorant Garamond",Georgia,serif}
.only-lg{display:inline}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font:400 14px/1 Jost,sans-serif; letter-spacing:.09em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r-pill); border:1px solid var(--btn); background:var(--btn);
  color:var(--cream); text-decoration:none; min-height:50px; white-space:nowrap;
  transition:transform var(--fast), background var(--fast), color var(--fast), border-color var(--fast), box-shadow var(--fast)}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 26px -16px rgba(38,34,29,.7); background:var(--btn-h); border-color:var(--btn-h)}
.btn:active{transform:translateY(1px) scale(.985); transition-duration:.08s}
.btn--ghost{background:transparent; color:var(--ink); border-color:rgba(38,34,29,.35)}
.btn--ghost:hover{border-color:var(--btn); background:rgba(91,71,51,.06)}
.btn--gold{background:var(--gold); border-color:#9A7940; color:var(--ink)}
.btn--gold:hover{background:#BE9A5B; border-color:#9A7940}
.btn--light{background:var(--cream); border-color:var(--cream); color:var(--ink)}
.btn--light:hover{background:#fff; border-color:#fff}
/* sobre la foto del hero: contorno claro y relleno translúcido */
.btn--clear{background:rgba(247,242,234,.12); color:#fff; border-color:rgba(247,242,234,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.btn--clear:hover{background:rgba(247,242,234,.22); border-color:#fff}
.btn--sm{padding:11px 20px; min-height:44px; font-size:12.5px}
.btn[disabled]{opacity:.35; cursor:not-allowed; transform:none!important; box-shadow:none!important}

/* ---------- marca ---------- */
.mark{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.mark svg{width:44px; height:44px; flex:none}
.mark__t{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-size:26px;
  font-weight:600; letter-spacing:.2em; line-height:1; text-transform:uppercase}
.mark__s{display:block; font:400 9px/1 Jost,sans-serif; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:6px}

/* ---------- nav ---------- */
/* el nav va fijo y transparente encima de la foto del hero; recien se
   vuelve solido cuando el hero termina de pasar (clase .is-stuck) */
.nav{position:fixed; top:0; left:0; right:0; z-index:90; background:transparent;
  border-bottom:1px solid transparent;
  transition:background var(--step), border-color var(--step), box-shadow var(--step),
             backdrop-filter var(--step)}
.nav .mark__t{color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.45)}
.nav .mark__s{color:rgba(255,255,255,.72)}
.nav .nav__links a{color:rgba(255,255,255,.86); text-shadow:0 1px 12px rgba(0,0,0,.45)}
.nav .nav__links a:hover{color:#fff}
.nav .nav-cta .btn{background:rgba(247,242,234,.12); color:#fff; border-color:rgba(247,242,234,.62);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.nav .nav-cta .btn:hover{background:rgba(247,242,234,.22); border-color:#fff}

/* sin backdrop-filter: sobre un fijo de ancho completo Chrome pinta un
   manchón desenfocado de lo que pasa por detrás */
.nav.is-stuck{background:var(--cream); border-color:var(--line);
  box-shadow:0 10px 30px -26px rgba(38,34,29,.6)}
.nav.is-stuck .mark__t{color:var(--ink); text-shadow:none}
.nav.is-stuck .mark__s{color:var(--ink-soft)}
.nav.is-stuck .nav__links a{color:var(--ink-soft); text-shadow:none}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}
.nav.is-stuck .nav-cta .btn{background:var(--btn); color:var(--cream); border-color:var(--btn);
  -webkit-backdrop-filter:none; backdrop-filter:none}
.nav.is-stuck .nav-cta .btn:hover{background:var(--btn-h); border-color:var(--btn-h)}
.nav__in{display:flex; align-items:center; gap:22px; min-height:var(--navh)}
.nav__menu{margin-left:auto}
.nav__links{display:flex; gap:30px; list-style:none; padding:0; margin:0}
.nav__links a{text-decoration:none; font-size:15.5px; color:var(--ink-soft); position:relative;
  transition:color var(--fast)}
/* scaleX en vez de animar `right`: animar right dispara layout en cada hover */
.nav__links a::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--fast)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav-cta{margin-left:24px}

/* ---------- hero a pantalla completa ---------- */
.hero{position:relative; min-height:100svh; display:grid; place-items:center;
  text-align:center; overflow:hidden; isolation:isolate;
  padding:calc(var(--navh) + clamp(20px,3vh,40px)) 0 clamp(28px,5vh,60px)}
.hero__bg{position:absolute; inset:0; z-index:-2; background:var(--night)
  url("img/hero-recepcion.webp") 56% 58%/cover no-repeat; transform:scale(1.02)}
/* Ken Burns muy leve: la única animación continua del sitio, desactivada
   bajo prefers-reduced-motion */
.js .hero__bg{animation:ken 26s ease-in-out infinite alternate}
@keyframes ken{from{transform:scale(1.05)}to{transform:scale(1.16) translateY(-1.4%)}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,15,13,.76) 0%, rgba(18,15,13,.62) 42%, rgba(18,15,13,.88) 100%)}
.hero__in{display:flex; flex-direction:column; align-items:center; gap:20px; color:#fff;
  max-width:1020px}
.hero h1{color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.45)}
.hero h1 em{color:var(--gold-lite); font-weight:600}
.hero .lede{color:rgba(255,255,255,.9); max-width:56ch; text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px}
.hero__note{display:flex; align-items:center; gap:9px; margin-top:2px;
  font:400 12px/1 Jost,sans-serif; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.74)}
.hero__note svg{width:15px; height:15px; stroke:var(--gold-lite); fill:none; stroke-width:1.5}

/* ---------- secciones ---------- */
.sec{padding:clamp(52px,7vw,88px) 0}
.sec--paper{background:var(--paper)}
.sec--sand{background:var(--sand)}
.sec--night{background:var(--night); color:var(--cream)}
.sec--night .lede{color:rgba(247,242,234,.68)}
.sec--night .tag{color:var(--gold)}
.sec__head{max-width:62ch; margin-bottom:clamp(20px,2.6vw,32px)}
.sec__head h2{margin:14px 0 11px}
.sec__head--slim h2{margin-bottom:0}
.sec__head--mid{margin-inline:auto; text-align:center}
.sec__head--mid .tag{justify-content:center}
.sec__head--mid .lede{margin-inline:auto}

/* ---------- servicios ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,17px)}
.card{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 20px 18px; display:flex; flex-direction:column; gap:8px;
  transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast)}
.card__top{display:flex; align-items:center; gap:11px}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sand-deep)}
.card__ico{width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-soft); color:var(--gold-deep); flex:none}
.card__ico .ico{width:18px; height:18px}
.card p{color:var(--ink-soft); font-size:14px; line-height:1.58}

/* ---------- experiencia (oscura) ---------- */
.exp{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,3.6vw,52px); align-items:center}
/* la foto original es 361x640: a tamaño completo ocupaba casi todo el alto
   del viewport, así que la recortamos y le ponemos tope de ancho */
.exp__pic{max-width:370px}
.exp__pic img{border-radius:var(--r-lg); width:100%; aspect-ratio:1/1;
  object-fit:cover; object-position:50% 35%}
.exp h2{margin:14px 0 12px}
.list{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px}
.list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:rgba(247,242,234,.82)}
.list svg{width:17px; height:17px; margin-top:4px; flex:none; stroke:var(--gold); fill:none; stroke-width:1.4}

/* ---------- cifras (banda delgada) ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,32px); text-align:center}
.stat__n{font-family:"Cormorant Garamond",Georgia,serif; font-size:clamp(44px,5.6vw,64px);
  line-height:1; color:var(--gold-deep); font-weight:600; font-variant-numeric:tabular-nums}
.stat__l{margin-top:8px; font:400 11.5px/1.4 Jost,sans-serif; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft)}
.stat + .stat{border-left:1px solid var(--line)}

/* ---------- galería en bucle continuo ---------- */
/* ---------- galeria "hover reveal": la foto apuntada queda nitida y el
   resto se desenfoca y se atenua (patron Hover Reveal Cards) ---------- */
.reveal{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.2vw,16px)}
.rcard{position:relative; display:block; padding:0; border:0; background:var(--sand);
  border-radius:var(--r-md); overflow:hidden; cursor:pointer; color:inherit; font:inherit;
  text-align:left; height:clamp(168px,30vh,265px); isolation:isolate;
  transition:transform .5s cubic-bezier(.22,.9,.28,1), filter .5s ease, opacity .5s ease,
             box-shadow .5s cubic-bezier(.22,.9,.28,1)}
.rcard img{width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transition:transform .7s cubic-bezier(.22,.9,.28,1)}
.rcard__txt{position:absolute; inset:auto 0 0 0; padding:34px 16px 14px; z-index:2;
  background:linear-gradient(transparent, rgba(14,12,10,.86));
  transform:translateY(6px); opacity:.9;
  transition:transform .5s cubic-bezier(.22,.9,.28,1), opacity .5s ease}
.rcard__t{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:20px; line-height:1.1; color:#fff}
.rcard__s{display:block; margin-top:4px; font:400 11px/1 Jost,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-lite)}
/* solo se atenuan las que NO estan apuntadas */
.reveal:hover .rcard:not(:hover),
.reveal:focus-within .rcard:not(:focus-visible){
  filter:blur(5px) saturate(.65); opacity:.42; transform:scale(.97)}
.reveal .rcard:hover, .reveal .rcard:focus-visible{
  transform:scale(1.035); z-index:3; box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
.reveal .rcard:hover img, .reveal .rcard:focus-visible img{transform:scale(1.06)}
.reveal .rcard:hover .rcard__txt, .reveal .rcard:focus-visible .rcard__txt{
  transform:none; opacity:1}
/* en movil no hay hover: el toque marca la foto con .is-on */
.reveal.is-held .rcard:not(.is-on){filter:blur(5px) saturate(.65); opacity:.42; transform:scale(.97)}
.reveal.is-held .rcard.is-on{transform:scale(1.035); z-index:3;
  box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
.reveal.is-held .rcard.is-on .rcard__txt{transform:none; opacity:1}
.reveal__hint{margin-top:16px; font:400 11px/1 Jost,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft)}

/* ---------- carrusel de reseñas ---------- */
.car{position:relative}
.car__track{display:flex; gap:clamp(12px,1.5vw,17px); overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 8px; scrollbar-width:none}
.car__track::-webkit-scrollbar{display:none}
.car__nav{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
.car__nav button{width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background var(--fast), border-color var(--fast), color var(--fast)}
.car__nav button:hover:not([disabled]){background:var(--btn); border-color:var(--btn); color:var(--cream)}
.car__nav button[disabled]{opacity:.3; cursor:default}
.sec--night .car__nav button{border-color:rgba(247,242,234,.24); color:var(--cream)}
.sec--night .car__nav button:hover:not([disabled]){background:var(--cream); color:var(--ink)}
.quote{scroll-snap-align:start; flex:none; width:clamp(258px,27vw,330px); background:var(--night-soft);
  border:1px solid rgba(247,242,234,.11); border-radius:var(--r-md); padding:24px 24px 20px;
  display:flex; flex-direction:column; gap:12px}
.quote__stars{color:var(--gold); letter-spacing:.16em; font-size:13px}
.quote p{font-family:"Cormorant Garamond",Georgia,serif; font-size:19px; line-height:1.4;
  color:rgba(247,242,234,.92)}
.quote__who{margin-top:auto; padding-top:12px; border-top:1px solid rgba(247,242,234,.13);
  font-size:13px; color:rgba(247,242,234,.6); letter-spacing:.04em}

/* ---------- reservas ---------- */
/* minmax(0,...) es obligatorio: con `1fr` la columna del formulario no puede
   bajar de su ancho minimo, y las 14 fichas del calendario la estiraban hasta
   aplastar la tarjeta de la derecha a 48px, partiendo todo su texto */
.bk{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(20px,2.8vw,40px); align-items:start}
.bk__form{min-width:0}
.card-res{min-width:0}
.bk__form{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px)}
.steps{display:flex; gap:8px; list-style:none; padding:0; margin:0 0 18px; counter-reset:s}
.steps li{flex:1; counter-increment:s; font:400 10.5px/1.3 Jost,sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft); padding-top:10px; border-top:2px solid var(--line);
  transition:color var(--fast), border-color var(--fast)}
.steps li::before{content:"0" counter(s) " · "}
.steps li[aria-current]{color:var(--ink); border-color:var(--gold)}
.steps li.done{color:var(--gold-deep); border-color:var(--gold)}
fieldset{border:0; padding:0; margin:0; min-width:0}
legend{font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-size:24px;
  margin-bottom:3px; padding:0}
.fs__hint{display:block; color:var(--ink-soft); font-size:13.5px; margin-bottom:14px}
/* altura fija: antes el cuadro se encogía de 856px a 360px al elegir un
   servicio y pasar de paso, y la página pegaba un salto de medio viewport */
#bkBody{min-height:390px}
.opts{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt label{display:flex; gap:10px; align-items:center; cursor:pointer; padding:12px 13px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--cream); height:100%;
  transition:border-color var(--fast), background var(--fast), transform var(--fast)}
.opt label:hover{border-color:var(--sand-deep); transform:translateY(-1px)}
.opt input:checked + label{border-color:var(--gold); background:var(--gold-soft)}
.opt input:focus-visible + label{outline:2px solid var(--gold-deep); outline-offset:2px}
.opt__ico{color:var(--gold-deep); flex:none; display:grid; place-items:center}
.opt__ico .ico{width:18px; height:18px}
.opt__t{display:block; font-size:14px; line-height:1.25}

.cal{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 11px; scroll-snap-type:x mandatory;
  scrollbar-width:thin}
.cal button{scroll-snap-align:start; flex:none; width:62px; padding:8px 5px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--cream); color:inherit;
  font:inherit; font-size:12px; text-align:center;
  transition:border-color var(--fast), background var(--fast)}
.cal button:hover{border-color:var(--sand-deep)}
.cal button[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-soft)}
.d-dow{display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.d-num{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:21px; line-height:1.15}
.d-mon{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:7px; margin-top:2px}
.slots button{padding:10px 6px; min-height:44px; cursor:pointer; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--cream); color:inherit; font:inherit; font-size:14px;
  transition:border-color var(--fast), background var(--fast)}
.slots button:hover:not([disabled]){border-color:var(--sand-deep)}
.slots button[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-soft)}
.slots button[disabled]{opacity:.32; cursor:not-allowed; text-decoration:line-through}

.field{margin-bottom:11px}
.field label{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:5px}
.field input,.field textarea{width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--cream); font:inherit; font-size:16px; color:inherit;
  transition:border-color var(--fast), background var(--fast)}
.field input:focus,.field textarea:focus{border-color:var(--gold); background:var(--paper); outline:none}
.field textarea{resize:vertical; min-height:64px}
.field.is-bad input{border-color:#A33B2A; background:#FCF1EE}
.err{display:block; color:#8E3323; font-size:13px; margin-top:4px; min-height:1px}
.bk__nav{display:flex; gap:10px; margin-top:18px}
.bk__nav .btn{flex:1}
.anim-in{animation:slide .38s cubic-bezier(.22,.9,.28,1) both}
@keyframes slide{from{opacity:0; transform:translateX(14px)}to{opacity:1; transform:none}}

/* carnet */
.card-res{position:sticky; top:calc(var(--navh) + 16px); background:var(--night); color:var(--cream);
  border-radius:var(--r-lg); padding:24px 24px; overflow:hidden}
.card-res::after{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px;
  border:1px solid rgba(176,140,79,.28); border-radius:50%}
.card-res h3{color:var(--cream); font-size:23px; margin-bottom:3px}
.card-res .sub{font-size:12.5px; color:rgba(247,242,234,.55); letter-spacing:.05em}
.crows{margin:18px 0 0; display:grid; gap:1px; background:rgba(247,242,234,.12);
  border-radius:var(--r-sm); overflow:hidden}
.crow{display:flex; justify-content:space-between; gap:14px; background:var(--night);
  padding:10px 13px; font-size:13.5px}
.crow dt{color:rgba(247,242,234,.52); letter-spacing:.06em; margin:0}
.crow dd{margin:0; text-align:right; color:var(--cream)}
.crow dd.empty{color:rgba(247,242,234,.5); font-style:italic}  /* .3 daba 2.5:1 */
.bump{animation:bump .4s cubic-bezier(.22,.9,.28,1)}
@keyframes bump{0%{opacity:0; transform:translateY(-6px)}100%{opacity:1; transform:none}}
.code{margin-top:14px; padding:11px 13px; border:1px dashed rgba(176,140,79,.5);
  border-radius:var(--r-sm); display:flex; justify-content:space-between; align-items:center;
  font-size:13px}
.code b{font-family:"Cormorant Garamond",Georgia,serif; font-size:20px; letter-spacing:.12em;
  color:var(--gold); font-weight:600}
.ok{text-align:center; padding:2px 0}
.ok__ring{width:46px; height:46px; margin:0 auto 10px; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center; color:var(--gold-deep)}
.recap{margin:14px 0 14px; display:grid; gap:1px; background:var(--line); border-radius:var(--r-sm);
  overflow:hidden; text-align:left}
.recap .crow{background:var(--cream)}
.recap dt{color:var(--ink-soft)}
.recap dd{color:var(--ink)}

/* ---------- contacto ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.2vw,44px); align-items:start}
.info{display:grid; gap:18px}
.info h3{font-size:19px; margin-bottom:5px}
.info p, .info a{color:var(--ink-soft); font-size:15px; text-decoration:none}
.info p a{display:inline-block; padding-block:8px}   /* área táctil de 39px */
.info a:hover{color:var(--ink)}
.socials{display:flex; flex-wrap:wrap; gap:9px; margin-top:9px}
.social{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); text-decoration:none; font-size:13.5px; color:var(--ink);
  transition:border-color var(--fast), background var(--fast), transform var(--fast)}
.social:hover{border-color:var(--gold); background:var(--gold-soft); transform:translateY(-2px)}
.social svg{width:17px; height:17px}
.map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--sand)}
.map iframe{display:block; width:100%; height:320px; border:0; filter:grayscale(.35) contrast(1.02)}

/* ---------- footer ---------- */
.foot{background:var(--night); color:rgba(247,242,234,.66); padding:44px 0 0;
  padding-bottom:calc(24px + 62px + env(safe-area-inset-bottom))}
.foot__in{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-start}
.foot .mark__t{color:var(--cream)}
.foot .mark__s{color:rgba(247,242,234,.5)}
.foot__links{display:flex; flex-wrap:wrap; gap:20px; list-style:none; padding:0; margin:0; font-size:14px}
.foot__links a{text-decoration:none; transition:color var(--fast); display:inline-block; padding-block:9px}
.foot__links a:hover{color:var(--cream)}
.foot__bot{margin-top:28px; padding-top:18px; border-top:1px solid rgba(247,242,234,.13);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px;
  color:rgba(247,242,234,.55)}   /* .44 daba 3.9:1, por debajo de AA */

/* ---------- barra flotante ---------- */
.float{position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:95; display:flex; gap:8px; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity var(--step), transform var(--step)}
.float.show{opacity:1; transform:none; pointer-events:auto}
.float .btn{flex:1; min-height:46px; padding:12px 14px; font-size:12.5px; letter-spacing:.08em;
  box-shadow:0 12px 30px -14px rgba(38,34,29,.7)}
@media (min-width:861px){.float{display:none}}

/* ---------- reveal on scroll ---------- */
.js .rv{opacity:0; transform:translateY(14px)}
.js .rv.in{opacity:1; transform:none;
  transition:opacity .58s ease-out, transform .58s cubic-bezier(.22,.9,.28,1)}
/* el filete dorado de cada etiqueta se dibuja al entrar la sección */
.js .rv .tag::before{transform:scaleX(0)}
.js .rv.in .tag::before{transform:scaleX(1);
  transition:transform .7s cubic-bezier(.22,.9,.28,1) .18s}

/* ============================================================
   Cada sección ocupa una pantalla completa en laptop, para que no
   haya que subir ni bajar dentro de una misma sección. Solo se
   activa si hay alto suficiente; por debajo vuelve al flujo normal.
   ============================================================ */
@media (min-width:1000px) and (min-height:700px){
  .sec--fit{min-height:100svh; display:flex; flex-direction:column; justify-content:center;
    padding-block:clamp(28px,4vh,56px)}
}
/* en laptops de 720px de alto, reservas se pasaba 28px de la pantalla */
@media (min-width:1000px) and (min-height:700px) and (max-height:800px){
  .sec--fit{padding-block:24px}
  .sec__head--slim{margin-bottom:20px}
  .bk__nav{margin-top:14px}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .exp,.bk,.contact{grid-template-columns:1fr}
  .exp__pic{max-width:380px; margin-inline:auto}
  /* static saca el contenedor de posicionamiento y el ::after decorativo se
     escapa del overflow:hidden, provocando scroll horizontal. relative no. */
  .card-res{position:relative}
  .grid3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  :root{--navh:68px}
  .nav-cta .btn{display:none}
  .nav__btn{display:grid}
  /* el sitio tiene cuatro páginas: escondiendo el menú como antes, en el
     celular no había forma de llegar a Nosotros, Servicios ni Contacto */
  .nav__menu{position:fixed; inset:var(--navh) 0 0 0; margin:0; background:var(--night);
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transition:opacity var(--step), transform var(--step), visibility var(--step)}
  .menu-open .nav__menu{opacity:1; visibility:visible; transform:none; pointer-events:auto}
  .menu-open{overflow:hidden}
  .menu-open .nav{background:var(--night); border-color:rgba(247,242,234,.14);
    -webkit-backdrop-filter:none; backdrop-filter:none}
  .menu-open .nav .mark__t{color:var(--cream); text-shadow:none}
  .menu-open .nav .mark__s{color:rgba(247,242,234,.5)}
  .menu-open .nav__btn{color:var(--cream)}
  .nav__links{flex-direction:column; gap:0; padding:14px var(--pad) 40px}
  .nav .nav__links a, .nav.is-stuck .nav__links a{
    display:block; padding:17px 0; font-size:21px; color:var(--cream); text-shadow:none;
    font-family:"Cormorant Garamond",Georgia,serif; letter-spacing:.01em;
    border-bottom:1px solid rgba(247,242,234,.12)}
  .nav__links a::after{display:none}
  .nav__links a[aria-current="page"]{color:var(--gold-lite)}
  .nav__cta-m{display:block; margin-top:26px}
  .nav__cta-m .btn{width:100%; background:var(--gold); border-color:#9A7940; color:var(--ink)}
  .mark svg{width:34px; height:34px}
  .mark__t{font-size:20px}
  .only-lg{display:none}
  .map iframe{height:270px}
  .hero__cta .btn{flex:1 1 0; min-width:0; padding-inline:14px}
}
@media (max-width:620px){
  .grid3{grid-template-columns:1fr}
  /* a 3 columnas las fotos quedaban en tiras de 105px de ancho */
  .reveal{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr; gap:0}
  .stat + .stat{border-left:0; border-top:1px solid var(--line); padding-top:18px; margin-top:18px}
  .foot__bot{flex-direction:column; gap:8px}
}
@media (max-width:430px){
  .opts{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
  .js .rv{opacity:1; transform:none}
  .js .rv .tag::before{transform:none}
  .js .hero__bg{animation:none}
  /* sin desenfoque ni escalado: la galería queda estática y legible */
  .reveal:hover .rcard:not(:hover),
  .reveal:focus-within .rcard:not(:focus-visible),
  .reveal.is-held .rcard:not(.is-on){filter:none; opacity:1; transform:none}
  .reveal .rcard:hover, .reveal .rcard:focus-visible,
  .reveal.is-held .rcard.is-on{transform:none}
  .rcard img{transition:none}
  .rcard__txt{transform:none; opacity:1}
}


/* ============================================================
   AÑADIDO AL PASAR DE UNA PÁGINA A CUATRO
   (Inicio · Nosotros · Servicios · Contacto)
   ============================================================ */

/* ---------- botón del menú en móvil ---------- */
.nav__btn{display:none; width:44px; height:44px; margin-left:14px; flex:none; padding:0;
  border:0; background:transparent; color:#fff; cursor:pointer; place-items:center;
  border-radius:50%; transition:background var(--fast)}
.nav.is-stuck .nav__btn{color:var(--ink)}
.nav__btn:hover{background:rgba(127,127,127,.14)}
.nav__btn span{display:block; width:20px; height:1.5px; background:currentColor; border-radius:2px;
  position:relative; transition:transform var(--fast), background var(--fast)}
.nav__btn span::before,.nav__btn span::after{content:""; position:absolute; left:0; width:20px;
  height:1.5px; background:currentColor; border-radius:2px;
  transition:transform var(--fast), top var(--fast)}
.nav__btn span::before{top:-6px}
.nav__btn span::after{top:6px}
.menu-open .nav__btn span{background:transparent}
.menu-open .nav__btn span::before{top:0; transform:rotate(45deg)}
.menu-open .nav__btn span::after{top:0; transform:rotate(-45deg)}
/* el enlace de la página en la que ya estás */
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__cta-m{display:none}

/* ---------- cabecera de las páginas interiores ----------
   Media pantalla en vez de completa: el contenido de la página tiene
   que asomar sin obligar a hacer scroll a ciegas. */
.phero{position:relative; display:grid; place-items:center; text-align:center; color:#fff;
  overflow:hidden; isolation:isolate; min-height:clamp(400px,56svh,540px);
  padding:calc(var(--navh) + clamp(32px,6vh,60px)) 0 clamp(32px,6vh,54px)}
.phero__bg{position:absolute; inset:0; z-index:-2; background:var(--night) center/cover no-repeat;
  transform:scale(1.04)}
.phero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(18,15,13,.74) 0%,rgba(18,15,13,.6) 45%,rgba(18,15,13,.86) 100%)}
.phero__in{display:flex; flex-direction:column; align-items:center; gap:18px; max-width:900px}
.phero h1{color:#fff; font-size:clamp(38px,5.4vw,70px); text-shadow:0 2px 26px rgba(0,0,0,.45)}
.phero h1 em{color:var(--gold-lite); font-weight:600}
.phero .lede{color:rgba(255,255,255,.9); max-width:56ch; text-shadow:0 1px 14px rgba(0,0,0,.5)}

/* ---------- bloque de dos columnas sobre fondo claro ---------- */
.duo{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(26px,3.6vw,54px); align-items:center}
.duo--flip .duo__pic{order:2}
.duo__pic{border-radius:var(--r-lg); overflow:hidden; background:var(--sand)}
.duo__pic img{width:100%; height:clamp(300px,46vh,440px); object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.9,.28,1)}
.duo__pic:hover img{transform:scale(1.045)}
.duo h2{margin:14px 0 12px}
.ticks{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px}
.ticks li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft)}
.ticks svg{width:17px; height:17px; margin-top:4px; flex:none; stroke:var(--gold-deep); fill:none;
  stroke-width:1.4}

/* ---------- misión y visión ---------- */
.mv{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); align-items:stretch}
.mv__card{background:var(--night-soft); border:1px solid rgba(247,242,234,.12);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,38px); position:relative; overflow:hidden}
.mv__card::after{content:""; position:absolute; right:-52px; bottom:-52px; width:180px; height:180px;
  border:1px solid rgba(176,140,79,.24); border-radius:50%}
.mv__card h3{font-size:clamp(24px,2.6vw,31px); color:var(--cream); margin:12px 0 12px}
.mv__card p{color:rgba(247,242,234,.8); font-size:16.5px; line-height:1.72}
.mv__card .tag{color:var(--gold)}

/* texto revelado palabra a palabra */
.wr-on .wr{display:inline-block; opacity:0; transform:translateY(.38em);
  transition:opacity .85s ease, transform .85s cubic-bezier(.22,.9,.28,1)}
.wr-on.wr-in .wr{opacity:1; transform:none}

/* ---------- cuatro tarjetas: 2 x 2 ----------
   Con .grid3 la cuarta se quedaba sola en la segunda fila, pegada a la
   izquierda y con dos huecos al lado. En dos columnas el bloque queda
   equilibrado y las tarjetas respiran más. */
.grid3--dos{grid-template-columns:repeat(2,1fr); max-width:940px; margin-inline:auto}
@media (max-width:700px){ .grid3--dos{grid-template-columns:1fr} }

/* ---------- equipo ---------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px)}
.tcard{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast)}
.tcard:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--sand-deep)}
.tcard__ph{aspect-ratio:4/5; display:grid; place-items:center; background:var(--gold-soft);
  /* sin el tope, tres retratos 4:5 estiraban la sección a 962 px y dejaba
     de caber en una pantalla de portátil */
  max-height:clamp(230px,32vh,330px)}
.tcard__ph svg{width:78px; height:78px; opacity:.72}
.tcard__ph img{width:100%; height:100%; object-fit:cover}
.tcard figcaption{padding:16px 18px 19px}
.tcard b{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-size:20px;
  font-weight:600; line-height:1.2}
.tcard small{display:block; margin-top:5px; font:400 11px/1.4 Jost,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep)}

/* ---------- coverflow 3D de la galería ----------
   La foto del centro queda plana y grande y las de los lados giran hacia
   atrás sobre el eje Y. Es el efecto "coverflow" de Swiper resuelto con
   transform 3D y ~40 líneas de JS, sin instalar ninguna librería. */
/* El recorte va en .cf y NO en .cf__stage: cualquier overflow distinto de
   visible sobre un elemento con transform-style:preserve-3d lo aplana y el
   coverflow se queda plano. Con los márgenes negativos las tarjetas de los
   extremos se cortan en el borde de la pantalla, que es donde toca. */
.cf{position:relative; perspective:1500px; overflow:hidden;
  margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)}
.cf__stage{position:relative; height:clamp(300px,44vh,430px); transform-style:preserve-3d}
.cf__item{position:absolute; left:50%; top:50%; margin:0; padding:0; border:0; cursor:pointer;
  width:clamp(186px,23vw,282px); aspect-ratio:3/4; background:var(--sand);
  border-radius:var(--r-md); overflow:hidden; will-change:transform, opacity;
  box-shadow:0 30px 60px -32px rgba(38,34,29,.7);
  transform:translate(-50%,-50%);
  transition:transform .62s cubic-bezier(.22,.9,.28,1), opacity .62s ease,
             box-shadow .62s cubic-bezier(.22,.9,.28,1)}
.cf__item img{width:100%; height:100%; object-fit:cover; object-position:50% 42%}
/* las de los lados se oscurecen para que la del centro mande */
.cf__item::after{content:""; position:absolute; inset:0; background:rgba(20,17,14,.4);
  opacity:1; transition:opacity .62s ease}
.cf__item.is-act{box-shadow:0 46px 84px -34px rgba(38,34,29,.78); cursor:default}
.cf__item.is-act::after{opacity:0}
.cf__cap{margin-top:clamp(20px,2.4vw,28px); text-align:center; min-height:64px}
.cf__cap b{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(23px,2.6vw,30px); line-height:1.15}
.cf__cap span{display:block; margin-top:6px; font:400 11px/1 Jost,sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-deep)}
.cf__nav{display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.6vw,20px);
  margin-top:16px}
.cf__arw{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); flex:none;
  background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center;
  transition:background var(--fast), border-color var(--fast), color var(--fast)}
.cf__arw:hover:not([disabled]){background:var(--btn); border-color:var(--btn); color:var(--cream)}
.cf__arw[disabled]{opacity:.3; cursor:default}
.cf__dots{display:flex; gap:8px}
.cf__dot{width:8px; height:8px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:var(--sand-deep); transition:background var(--fast), transform var(--fast)}
.cf__dot[aria-current="true"]{background:var(--gold-deep); transform:scale(1.45)}

/* ---------- servicios explicados uno a uno ---------- */
.svc{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px,3.4vw,52px); align-items:center}
.svc + .svc{margin-top:clamp(46px,6.4vw,86px)}
.svc:nth-child(even) .svc__pic{order:2}
.svc__pic{border-radius:var(--r-lg); overflow:hidden; background:var(--sand)}
.svc__pic img{width:100%; height:clamp(272px,40vh,392px); object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.9,.28,1)}
.svc__pic:hover img{transform:scale(1.05)}
.svc__num{font-family:"Cormorant Garamond",Georgia,serif; font-size:15px; font-weight:600;
  letter-spacing:.26em; color:var(--gold-deep)}
.svc h2{font-size:clamp(27px,3.2vw,40px); margin:8px 0 11px}
.svc .ticks{margin-bottom:24px}
.svc__cta{display:flex; flex-wrap:wrap; gap:11px}

/* ---------- preguntas frecuentes ---------- */
/* Una sola columna centrada: en dos columnas las fichas quedaban a
   distinta altura y el bloque se veía desparejo. Una lista de preguntas
   se lee mejor en columna aunque pase de una pantalla de alto. */
.faq{display:grid; gap:10px; max-width:820px; margin-inline:auto}
.faq summary{padding:17px 0}
.faq details{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0 clamp(16px,2vw,24px)}
.faq summary{cursor:pointer; list-style:none; padding:19px 0; font-size:17px;
  display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; width:10px; height:10px; flex:none;
  border-right:1.5px solid var(--gold-deep); border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(45deg) translateY(-3px); transition:transform var(--fast)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq p{padding:0 0 20px; color:var(--ink-soft); font-size:15.5px; max-width:70ch}

/* ---------- franja final de llamada a la acción ---------- */
.band{text-align:center}
.band h2{color:var(--cream); margin:14px 0 12px}
.band .lede{margin-inline:auto}
.band__cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px}
.band .tag{justify-content:center}

/* ---------- cómo llegar (contacto) ---------- */
.steps-go{list-style:none; padding:0; margin:0; display:grid; gap:14px; counter-reset:g}
.steps-go li{counter-increment:g; display:grid; grid-template-columns:38px 1fr; gap:15px;
  align-items:start; font-size:15.5px; color:var(--ink-soft)}
.steps-go li::before{content:"0" counter(g); display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; border:1px solid var(--gold); color:var(--gold-deep);
  font:600 13px/1 "Cormorant Garamond",Georgia,serif; letter-spacing:.1em}
.map--tall iframe{height:clamp(340px,52vh,470px)}

/* ---------- responsive de lo nuevo ---------- */
@media (max-width:1000px){
  .svc,.duo,.mv{grid-template-columns:1fr}
  .svc:nth-child(even) .svc__pic, .duo--flip .duo__pic{order:0}
}
@media (max-width:860px){
  .cf__stage{height:clamp(280px,46vh,360px)}
  .team{grid-template-columns:repeat(2,1fr)}
  /* estas dos van acá y no sólo en el media query de más arriba: este
     bloque se carga después y, si no, `display:none` del estado de
     escritorio ganaba y el botón del menú no aparecía nunca en móvil */
  /* el menú pasa a position:fixed y sale del flujo, así que sin este
     margin el botón se quedaba pegado al logo en vez de ir a la derecha */
  .nav__btn{display:grid; margin-left:auto}
  .nav__cta-m{display:block}
}
@media (max-width:560px){
  /* a una sola columna las tres tarjetas del equipo estiraban la sección
     1 400 px; en dos columnas caben en dos filas y se recorre mucho menos */
  .team{gap:10px}
  .tcard figcaption{padding:12px 13px 14px}
  .tcard b{font-size:17px}
  .svc__pic img,.duo__pic img{height:clamp(240px,44vh,320px)}
}
@media (prefers-reduced-motion:reduce){
  .wr-on .wr{opacity:1; transform:none}
  .cf__item{transition:none}
  .duo__pic:hover img,.svc__pic:hover img{transform:none}
}


/* ============================================================
   SEGUNDA VUELTA — Inicio con menos texto, opiniones en marquesina
   y servicios con movimiento ligado al scroll
   ============================================================ */

/* ---------- el coverflow ahora también lleva a una página ----------
   En Inicio las tarjetas son los tratamientos: la del centro es un
   enlace a su bloque en servicios.html y las de los lados sólo se
   traen al centro (el JS bloquea la navegación mientras no estén
   activas, para que un toque en el borde no te saque de la página). */
.cf__item{text-decoration:none; color:inherit; display:block}
.cf__cap b{display:block; font-family:"Cormorant Garamond",Georgia,serif; font-weight:600;
  font-size:clamp(23px,2.6vw,30px); line-height:1.15}
.cf__link{display:inline-flex; align-items:center; gap:9px; margin-top:12px; text-decoration:none;
  font:400 12.5px/1 Jost,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); border-bottom:1px solid rgba(176,140,79,.45); padding-bottom:6px;
  transition:color var(--fast), border-color var(--fast), gap var(--fast)}
.cf__link:hover{color:var(--ink); border-color:var(--ink); gap:13px}
.cf__link .ico{width:16px; height:16px}
.sec--night .cf__link{color:var(--gold-lite); border-color:rgba(216,190,138,.45)}
.sec--night .cf__link:hover{color:var(--cream); border-color:var(--cream)}
.cf__cap{min-height:112px}

/* ---------- opiniones en marquesina ----------
   Dos filas que corren en sentidos opuestos, sin fin y sin librerías:
   cada fila lleva el juego de reseñas dos veces y la animación la
   desplaza exactamente un juego, así que el salto no se ve. Se
   detiene al pasar el cursor y al enfocar con el teclado. */
.mq{--mq-gap:clamp(12px,1.5vw,17px);
  display:grid; gap:var(--mq-gap); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
/* min-width:0 es obligatorio: como hijo de un grid vale `auto`, así que
   la fila imponía su ancho de contenido al contenedor y la página entera
   se iba 660 px de lado en el móvil */
.mq__row{display:flex; gap:var(--mq-gap); width:max-content; min-width:0;
  animation:mq var(--mq-dur,58s) linear infinite; will-change:transform}
.mq__row--rev{animation-direction:reverse}
.mq:hover .mq__row, .mq:focus-within .mq__row{animation-play-state:paused}
@keyframes mq{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--mq-gap) / 2))}
}
/* la ficha de reseña: la misma que usaba el carrusel, más el monograma */
.mq .quote{scroll-snap-align:none}
.quote__by{display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:14px;
  border-top:1px solid rgba(247,242,234,.13)}
.quote__av{width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(176,140,79,.55); color:var(--gold-lite); background:rgba(176,140,79,.1);
  font-family:"Cormorant Garamond",Georgia,serif; font-size:17px; font-weight:600; line-height:1}
.quote__by b{display:block; font:500 13.5px/1.2 Jost,sans-serif; color:rgba(247,242,234,.92);
  letter-spacing:.02em}
.quote__by small{display:block; margin-top:3px; font:400 11px/1 Jost,sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}

/* ---------- barra de progreso de lectura ----------
   El filete dorado de arriba que se llena a medida que bajas. */
.prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:99; pointer-events:none;
  background:transparent}
.prog span{display:block; height:100%; width:100%; transform:scaleX(0); background:var(--gold);
  transform-origin:left; box-shadow:0 0 12px rgba(176,140,79,.55)}

/* ---------- servicios: movimiento ligado al scroll ----------
   La foto se desplaza más despacio que la página (parallax) y detrás
   del bloque flota el número del tratamiento. El recorte de la foto
   necesita que la imagen sea más alta que su marco, si no el
   desplazamiento deja una franja vacía arriba o abajo. */
.svc{position:relative}
.svc__pic{position:relative}
.svc__pic img{will-change:transform}
.js .svc__pic img[data-parallax]{height:calc(clamp(272px,40vh,392px) + 68px);
  margin-top:-34px}
.svc__ghost{position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:700; line-height:.8;
  font-size:clamp(120px,17vw,230px); color:var(--sand-deep); opacity:.36;
  /* va del lado de la FOTO, no del texto: detrás del texto restaba
     contraste justo donde hay que leer, y la foto lo tapa casi entero
     (z-index 0) dejando asomar sólo la parte que sobresale */
  top:-7%; left:-1%; will-change:transform}
.svc:nth-child(even) .svc__ghost{left:auto; right:-1%}
/* el número queda fuera: si entra en esta regla deja de ser absolute y se
   cuela como una fila más de la cuadrícula */
.svc > *:not(.svc__ghost){position:relative; z-index:1}
@media (max-width:1000px){
  /* en una columna la foto va arriba: el número asoma por encima de ella */
  .svc__ghost{font-size:clamp(90px,24vw,140px); top:-5%; left:auto; right:-2%; opacity:.3}
  .svc:nth-child(even) .svc__ghost{left:auto; right:-2%}
}

/* ---------- reducción de movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .mq__row{animation:none; width:auto}
  .js .svc__pic img[data-parallax]{height:clamp(272px,40vh,392px); margin-top:0}
  .svc__ghost{display:none}
  .prog{display:none}
}


/* ============================================================
   TERCERA VUELTA — cambios pedidos por el dueño (25/09/2026)
   Inglés por defecto con selector de idioma, tratamientos en
   "stack spread", experiencia a foto completa, reservas sin hora,
   preguntas por categorías, Nosotros rehecho y CTA con foto.
   ============================================================ */

/* ---------- selector de idioma ---------- */
.lang{display:inline-flex; gap:2px; padding:3px; margin-left:16px; flex:none;
  border:1px solid rgba(247,242,234,.5); border-radius:var(--r-pill);
  font:500 11.5px/1 Jost,sans-serif; letter-spacing:.12em}
.lang a{display:grid; place-items:center; min-width:36px; min-height:32px; padding:0 8px;
  border-radius:var(--r-pill); text-decoration:none; color:rgba(255,255,255,.82);
  transition:background var(--fast), color var(--fast)}
.lang a:hover{color:#fff; background:rgba(247,242,234,.12)}
.lang a[aria-current="true"]{background:rgba(247,242,234,.2); color:#fff}
.nav.is-stuck .lang{border-color:var(--line)}
.nav.is-stuck .lang a{color:var(--ink-soft)}
.nav.is-stuck .lang a:hover{color:var(--ink); background:rgba(91,71,51,.07)}
.nav.is-stuck .lang a[aria-current="true"]{background:var(--btn); color:var(--cream)}

/* ---------- hero: la dirección en lugar del horario ---------- */
a.hero__note{text-decoration:none; transition:color var(--fast)}
a.hero__note:hover{color:#fff}
a.hero__note:hover span{text-decoration:underline; text-underline-offset:4px}

/* ---------- tratamientos: stack spread ----------
   Copiado del bloque "Maestros del balayage" de Sandré: las fotos
   arrancan apiladas y giradas en el centro y, al bajar, se abren
   hacia los bordes y dejan ver el titular. El escenario va pegado
   (sticky) y la sección mide 3,3 pantallas para dar recorrido. */
.spread{position:relative; height:330vh; background:var(--cream)}
.spread__stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.spread__copy{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 24px;
  pointer-events:none; will-change:opacity,transform}
.spread__copy .tag{justify-content:center}
.spread__copy h2{font-size:clamp(40px,5vw,68px); font-weight:500; margin:16px 0 14px}
.spread__copy h2 em{display:block; color:var(--gold-deep)}
.spread__copy .lede{max-width:40ch; margin-inline:auto; color:var(--ink-soft)}
.spread__copy .btn{margin-top:24px; pointer-events:auto}
.spread__cards{position:absolute; inset:0; z-index:10; pointer-events:none}
.carta{position:absolute; left:50%; top:50%; display:block; overflow:hidden; pointer-events:auto;
  border-radius:16px; background:var(--sand-deep); color:#fff; text-decoration:none;
  box-shadow:0 22px 44px -24px rgba(38,34,29,.55); will-change:transform}
.carta img{width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,.9,.28,1)}
.carta:hover img{transform:scale(1.06)}
/* el nombre del tratamiento aparece recién cuando las fotos se abrieron */
.carta__t{position:absolute; inset:auto 0 0; padding:30px 12px 11px;
  background:linear-gradient(transparent, rgba(20,17,14,.8));
  font:500 11px/1.3 Jost,sans-serif; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transition:opacity .3s ease}
.spread.is-open .carta__t{opacity:1}
.spread__hint{position:absolute; left:0; right:0; bottom:3vh; z-index:20; display:flex;
  flex-direction:column; align-items:center; gap:6px; pointer-events:none;
  font:500 11px/1 Jost,sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.spread__hint svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  animation:rebote 1.6s cubic-bezier(.22,.9,.28,1) infinite}
@keyframes rebote{50%{transform:translateY(4px)}}
@media (max-width:900px){
  .spread{height:280vh}
  /* las fotos miden ~95 px de ancho: nombre en minúsculas y con guionado,
     si no "descontracturante" se sale de la tarjeta */
  .carta__t{padding:24px 8px 8px; font-size:11px; letter-spacing:.02em; text-transform:none;
    font-weight:500; -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere}
}
@media (max-width:900px) and (max-height:700px){ .spread__copy .lede{display:none} }

/* ---------- la experiencia: foto a sangre + recuadro de texto ---------- */
.xp{position:relative; isolation:isolate; overflow:hidden; background:var(--night); color:var(--cream);
  display:flex; align-items:center; min-height:min(100svh,880px);
  padding-block:clamp(56px,8vh,96px)}
.xp__img{position:absolute; inset:0; z-index:-2}
.xp__img img{width:100%; height:100%; object-fit:cover; object-position:32% 50%}
.xp::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,15,13,0) 28%, rgba(18,15,13,.45) 58%, rgba(18,15,13,.78) 100%)}
.xp__in{display:flex; justify-content:flex-end}
.xp__box{width:min(100%,500px); background:rgba(28,25,23,.9); border:1px solid rgba(176,140,79,.34);
  border-radius:var(--r-lg); padding:clamp(28px,3.4vw,44px)}
.xp__box h2{color:var(--cream); font-weight:500; margin:14px 0 14px}
.xp__box .lede{color:rgba(247,242,234,.74)}
.xp__box .lede + .lede{margin-top:10px}
.xp__box .tag{color:var(--gold)}

/* ---------- CTA con foto de fondo ---------- */
.cta-img{position:relative; isolation:isolate; overflow:hidden; background:var(--night); color:#fff;
  text-align:center; padding:clamp(84px,14vh,140px) 0}
.cta-img__bg{position:absolute; inset:0; z-index:-2; background:var(--night) center/cover no-repeat;
  transform:scale(1.04)}
.cta-img::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%, rgba(18,15,13,.62), rgba(18,15,13,.86) 75%)}
.tag--mid{justify-content:center}
.tag--mid::after{content:""; width:28px; height:1px; background:var(--gold); flex:none}
.cta-img .tag{color:var(--gold-lite)}
.cta-img h2{color:#fff; font-size:clamp(42px,5.4vw,72px); font-weight:500; margin-top:16px;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cta-img h2 em{display:block; color:var(--gold-lite)}
.cta-img .lede{color:rgba(255,255,255,.86); margin:16px auto 0; max-width:46ch}
.cta-img__info{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 0; margin-top:22px;
  font-size:14.5px; color:rgba(255,255,255,.84)}
.cta-img__info span{display:inline-flex; align-items:center; gap:9px; padding:0 22px}
.cta-img__info span + span{border-left:1px solid rgba(255,255,255,.26)}
.cta-img__info svg{width:17px; height:17px; flex:none; fill:none; stroke:var(--gold-lite); stroke-width:1.4}
.cta-img .band__cta{margin-top:30px}

/* ---------- CTA partido (contacto): foto a la izquierda, texto a la derecha ---------- */
.cta-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); overflow:hidden;
  border-radius:var(--r-lg); background:var(--night); color:var(--cream)}
.cta-split__pic{min-height:300px; position:relative; overflow:hidden}
.cta-split__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.9,.28,1)}
.cta-split:hover .cta-split__pic img{transform:scale(1.04)}
.cta-split__txt{padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start}
.cta-split__txt .tag{color:var(--gold)}
.cta-split__txt h2{color:var(--cream); font-weight:500; margin:14px 0 10px}
.cta-split__txt .lede{color:rgba(247,242,234,.72)}
.cta-split__txt .btn{margin-top:22px}

/* ---------- preguntas por categorías ---------- */
.faq2{display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,1fr); gap:clamp(16px,2.4vw,30px);
  max-width:1080px; margin-inline:auto; align-items:start}
.faq2__tabs{display:grid; gap:6px}
.faq2__tab{display:flex; align-items:center; gap:14px; width:100%; min-height:54px; padding:0 16px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); color:var(--ink);
  font:500 12px/1 Jost,sans-serif; letter-spacing:.2em; text-transform:uppercase; cursor:pointer;
  text-align:left; transition:background var(--fast), color var(--fast), border-color var(--fast)}
.faq2__tab .ico{width:20px; height:20px; color:var(--gold-deep); transition:color var(--fast)}
.faq2__tab::after{content:""; margin-left:auto; width:7px; height:7px; flex:none;
  border-right:1.4px solid currentColor; border-top:1.4px solid currentColor; transform:rotate(45deg); opacity:.6}
.faq2__tab:hover{border-color:var(--sand-deep); background:var(--cream)}
.faq2__tab[aria-selected="true"]{background:var(--btn); border-color:var(--btn); color:var(--cream)}
.faq2__tab[aria-selected="true"] .ico{color:var(--gold-lite)}
.faq2__panel{display:grid; gap:10px}
.faq2__panel.entra details{animation:faqIn .36s cubic-bezier(.22,.9,.28,1) both}
.faq2__panel.entra details:nth-child(2){animation-delay:.04s}
.faq2__panel.entra details:nth-child(3){animation-delay:.08s}
@keyframes faqIn{from{opacity:0; transform:translate3d(0,8px,0)}to{opacity:1; transform:none}}
.faq2 details{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  padding:0 clamp(16px,2vw,22px); transition:border-color var(--fast)}
.faq2 details[open]{border-color:var(--sand-deep)}
.faq2 summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 0; font-family:"Cormorant Garamond",Georgia,serif; font-size:21px; font-weight:600;
  line-height:1.25}
.faq2 summary::-webkit-details-marker{display:none}
.faq2 summary::after{content:"+"; width:30px; height:30px; flex:none; border-radius:50%; display:grid;
  place-items:center; background:var(--gold-soft); color:var(--gold-deep); font:300 21px/1 Jost,sans-serif;
  transition:transform var(--fast), background var(--fast)}
.faq2 summary:hover::after{background:var(--sand-deep)}
.faq2 details[open] summary::after{transform:rotate(45deg)}
.faq2 details p{padding:0 0 18px; color:var(--ink-soft); font-size:15.5px; max-width:62ch}
/* la respuesta entra con un fundido corto en vez de aparecer de golpe */
.faq2 details[open] p{animation:faqP .28s cubic-bezier(.22,.9,.28,1) both}
@keyframes faqP{from{opacity:0; transform:translate3d(0,-4px,0)}to{opacity:1; transform:none}}
.faq2__more{grid-column:1/-1; display:flex; align-items:center; gap:clamp(14px,2vw,24px); flex-wrap:wrap;
  margin-top:clamp(8px,1.6vw,16px); padding:18px clamp(18px,2.6vw,30px); border-radius:var(--r-lg);
  background:var(--sand-deep)}
.faq2__more > svg{width:40px; height:40px; flex:none; fill:none; stroke:var(--gold-deep); stroke-width:1.2}
.faq2__more div{flex:1; min-width:200px; padding-left:clamp(14px,2vw,24px); border-left:1px solid rgba(38,34,29,.2)}
.faq2__more h3{font-size:clamp(23px,2.2vw,28px); font-weight:500}
.faq2__more p{font-size:14.5px; color:var(--ink-soft)}

/* ---------- Nosotros: apertura partida (foto | texto) ---------- */
.nav-solid .nav{background:var(--cream); border-color:var(--line)}
.ab{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); min-height:100svh;
  padding-top:var(--navh); background:var(--cream)}
.ab__pic{position:relative; overflow:hidden; background:var(--sand)}
.ab__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.ab__txt{padding:clamp(18px,3vh,40px) clamp(24px,5.4vw,84px); display:flex; flex-direction:column; line-height:1.6;
  justify-content:center}
.ab h1{font-size:clamp(40px,4vw,56px); font-weight:500; margin:12px 0 14px; letter-spacing:-.012em}
.ab h1 em{display:block; color:var(--gold-deep); font-weight:500}
.ab__txt > p{color:var(--ink-soft); max-width:56ch}
.ab__txt > p + p{margin-top:10px}
.ab__mean{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); max-width:56ch}
.ab__mean h2{font:500 12.5px/1 Jost,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:10px}
.ab__mean p{color:var(--ink-soft)}
.ab__mean p + p{margin-top:8px}
.ab__mean b{font-weight:500; color:var(--ink)}
.ab__facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line); max-width:600px}
.ab__fact{text-align:center; padding:0 12px}
.ab__fact + .ab__fact{border-left:1px solid var(--line)}
.ab__fact svg{width:26px; height:26px; fill:none; stroke:var(--gold-deep); stroke-width:1.3; margin:0 auto}
.ab__fact b{display:block; margin-top:8px; font:600 19px/1.15 "Cormorant Garamond",Georgia,serif}
.ab__fact small{display:block; margin-top:5px; font:400 10.5px/1.35 Jost,sans-serif; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft)}

/* ---------- Nosotros: el equipo en una sola foto ---------- */
.team1{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(22px,3.4vh,40px) clamp(26px,4vw,64px);
  align-items:center}
.team1 h2{font-size:clamp(34px,4.2vw,54px); font-weight:500; margin:14px 0 16px}
.team1 h2 em{color:var(--gold-deep)}
.team1 .lede + .lede{margin-top:12px}
.team1__pic{border-radius:var(--r-lg); overflow:hidden; background:var(--sand)}
.team1__pic img{width:100%; aspect-ratio:16/11; max-height:min(52vh,460px); object-fit:cover;
  object-position:50% 40%; transition:transform 1s cubic-bezier(.22,.9,.28,1)}
.team1__pic:hover img{transform:scale(1.035)}
.team1__facts{grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  padding-top:clamp(18px,3vh,28px); border-top:1px solid var(--line)}
.team1__fact{text-align:center; padding:0 clamp(12px,2vw,28px)}
.team1__fact + .team1__fact{border-left:1px solid var(--line)}
.team1__ico{width:58px; height:58px; margin:0 auto 12px; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center; color:var(--gold-deep)}
.team1__ico .ico{width:26px; height:26px}
.team1__fact b{display:block; font:500 12px/1.3 Jost,sans-serif; letter-spacing:.2em; text-transform:uppercase}
.team1__fact p{margin-top:6px; font-size:15px; color:var(--ink-soft)}

/* ---------- Nosotros: misión y visión sobre foto ---------- */
.mv2{position:relative; isolation:isolate; overflow:hidden; background:var(--night); color:var(--cream)}
.mv2__bg{position:absolute; inset:0; z-index:-2; background:var(--night) center/cover no-repeat}
.mv2::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(18,15,13,.93) 0%, rgba(18,15,13,.84) 55%, rgba(18,15,13,.66) 100%)}
.mv2 .tag{color:var(--gold)}
.mv2 h2{color:var(--cream); font-size:clamp(42px,5.2vw,68px); font-weight:500; margin-top:14px}
.mv2__sub{margin-top:10px; font:400 12.5px/1.4 Jost,sans-serif; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(247,242,234,.72)}
.mv2__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(24px,4vh,40px); max-width:980px}
.mv2__card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 20px; align-content:start;
  background:rgba(28,25,23,.78); border:1px solid rgba(176,140,79,.3); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,36px)}
.mv2__ico{width:66px; height:66px; border-radius:50%; border:1px solid var(--gold); display:grid;
  place-items:center; color:var(--gold); grid-row:span 2}
.mv2__ico .ico{width:30px; height:30px; stroke-width:1.1}
.mv2__card small{font:500 11px/1.3 Jost,sans-serif; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(247,242,234,.66); align-self:end}
.mv2__card h3{font-size:clamp(23px,2.3vw,28px); font-weight:500; color:var(--cream); margin-top:6px}
.mv2__card p{grid-column:1/-1; margin-top:18px; padding-top:18px; border-top:1px solid rgba(176,140,79,.3);
  color:rgba(247,242,234,.8); font-size:15.5px; line-height:1.7}

/* ---------- Nosotros: el espacio en 3 x 2 con pie ---------- */
.space__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(20px,4vw,64px);
  align-items:end; margin-bottom:clamp(20px,3.4vh,34px)}
.space__head h2{font-size:clamp(38px,4.6vw,60px); font-weight:500; margin-top:14px}
.space__head h2 em{color:var(--gold-deep)}
.space__sub{margin-top:10px; font:400 12px/1.6 Jost,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); max-width:48ch}
.space__intro{border-left:1px solid var(--line); padding-left:clamp(18px,2.4vw,32px); color:var(--ink-soft)}
.space__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vh,26px) clamp(12px,1.6vw,22px)}
.space__pic{border-radius:16px; overflow:hidden; background:var(--sand-deep)}
.space__pic img{width:100%; aspect-ratio:16/10; max-height:min(25vh,230px); object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.9,.28,1)}
.space__item:hover .space__pic img{transform:scale(1.05)}
.space__cap{display:grid; grid-template-columns:20px minmax(0,1fr); gap:3px 11px; margin-top:12px}
.space__cap svg{width:20px; height:20px; fill:none; stroke:var(--gold-deep); stroke-width:1.3; grid-row:span 2}
.space__cap b{font:500 11.5px/1.3 Jost,sans-serif; letter-spacing:.18em; text-transform:uppercase}
.space__cap span{font-size:14px; line-height:1.45; color:var(--ink-soft)}

/* ---------- Nosotros: nuestra esencia ---------- */
.ess__head{text-align:center; max-width:760px; margin:0 auto clamp(22px,3.6vh,38px)}
.ess__head .tag{justify-content:center}
.ess__head h2{font-size:clamp(40px,5vw,64px); font-weight:500; margin-top:14px}
.ess__head h2 em{color:var(--gold-deep)}
.ess__sub{margin-top:10px; font:400 12px/1.6 Jost,sans-serif; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft)}
.ess__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px);
  max-width:1000px; margin-inline:auto}
.ess__card{display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 20px; align-items:start;
  padding:clamp(22px,2.6vw,30px); background:var(--cream); border:1px solid var(--line);
  border-radius:16px; transition:transform var(--fast), box-shadow var(--fast), border-color var(--fast)}
.ess__card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--sand-deep)}
.ess__ico{width:62px; height:62px; border-radius:50%; background:var(--gold-soft); color:var(--gold-deep);
  display:grid; place-items:center}
.ess__ico .ico{width:27px; height:27px}
.ess__card h3{font-size:clamp(21px,1.9vw,24px); font-weight:600; margin:4px 0 8px}
.ess__card p{font-size:15px; line-height:1.6; color:var(--ink-soft)}

/* ---------- Contacto: datos | mapa ---------- */
.ct2{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(22px,3.4vw,48px);
  align-items:stretch}
.ct2__list{display:grid; align-content:start}
.ct2__row{display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px; padding:16px 0;
  border-bottom:1px solid var(--line)}
.ct2__row:first-child{padding-top:0}
.ct2__row:last-child{border-bottom:0}
.ct2__ico{width:52px; height:52px; border-radius:50%; background:var(--gold-soft); color:var(--gold-deep);
  display:grid; place-items:center}
.ct2__ico .ico{width:23px; height:23px}
.ct2__row small{display:block; font:500 11px/1.3 Jost,sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep)}
.ct2__row b{display:block; margin-top:5px; font:600 23px/1.2 "Cormorant Garamond",Georgia,serif}
.ct2__row b a{text-decoration:none}
.ct2__row b a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.ct2__row div > span{display:block; margin-top:3px; font-size:14.5px; color:var(--ink-soft)}
.ct2__row .btn{margin-top:12px}
.ct2__row .socials{margin-top:10px}
.ct2__map{display:flex; flex-direction:column; gap:14px}
.ct2__map .map{flex:1; min-height:360px}
.ct2__map .map iframe{height:100%; min-height:360px}
.ct2__map .btn{align-self:center}

/* ---------- responsive de la tercera vuelta ---------- */
@media (max-width:1000px){
  .ab{grid-template-columns:1fr; min-height:0}
  .ab__pic{aspect-ratio:4/3; max-height:56svh}
  .team1,.space__head,.ct2{grid-template-columns:1fr}
  .mv2__grid{grid-template-columns:1fr}
  .space__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .space__intro{border-left:0; padding-left:0}
  .faq2{grid-template-columns:minmax(0,1fr)}
  /* en una columna las categorías pasan a una fila de fichas que se desliza */
  .faq2__tabs{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px;
    margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad)}
  .faq2__tabs::-webkit-scrollbar{display:none}
  .faq2__tab{width:auto; flex:none; min-height:46px; border-radius:var(--r-pill); padding:0 16px; gap:9px}
  .faq2__tab::after{display:none}
}
@media (max-width:900px){
  .xp{display:block; min-height:0; padding:0}
  .xp__img{position:relative; aspect-ratio:4/3}
  .xp::after{display:none}
  .xp__in{display:block; margin-top:-48px; padding-bottom:clamp(40px,8vw,64px)}
  .xp__box{width:100%; background:var(--night-soft)}
  .cta-split{grid-template-columns:minmax(0,1fr)}
  .cta-split__txt .btn{white-space:normal; text-align:center}
  .cta-split__pic{min-height:0; aspect-ratio:16/9}
}
@media (max-width:860px){
  /* en móvil el selector de idioma se queda en la barra, junto al menú;
     para que entren logo + idioma + menú en 375 px se compacta todo */
  .nav__in{gap:8px}
  .lang{margin-left:auto; padding:2px}
  .lang a{min-width:30px; min-height:30px; padding:0 6px; font-size:11px}
  .nav__btn{margin-left:2px}
  .mark{gap:9px}
  .mark__s{letter-spacing:.2em}
  .nav-cta{display:none}
  .menu-open .lang{border-color:rgba(247,242,234,.3)}
  .menu-open .lang a{color:rgba(247,242,234,.8)}
  .menu-open .lang a[aria-current="true"]{background:rgba(247,242,234,.18); color:var(--cream)}
}
@media (max-width:620px){
  .space__grid{grid-template-columns:1fr}
  .space__pic img{max-height:none}
  .ess__grid{grid-template-columns:1fr}
  .ess__card{gap:0 16px}
  .ess__ico{width:52px; height:52px}
  .ab__facts{grid-template-columns:1fr; gap:14px}
  .ab__fact{display:grid; grid-template-columns:28px 1fr; gap:2px 14px; text-align:left; padding:0}
  .ab__fact + .ab__fact{border-left:0; border-top:1px solid var(--line); padding-top:14px}
  .ab__fact svg{grid-row:span 2; margin:2px 0 0}
  .ab__fact b{margin-top:0}
  .team1__facts{grid-template-columns:1fr; gap:18px}
  .team1__fact + .team1__fact{border-left:0; border-top:1px solid var(--line); padding-top:18px}
  .cta-img__info{flex-direction:column; align-items:center; gap:10px}
  .cta-img__info span + span{border-left:0}
  .mv2__card{grid-template-columns:1fr}
  .mv2__ico{grid-row:auto; margin-bottom:14px; width:56px; height:56px}
}
@media (prefers-reduced-motion:reduce){
  .spread{height:auto}
  .spread__stage{position:relative; height:auto; padding:clamp(56px,8vw,88px) 0}
  .spread__copy{position:relative; inset:auto; opacity:1!important; transform:none!important;
    visibility:visible!important; margin-bottom:36px}
  .spread__cards{position:relative; inset:auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px; width:min(1180px,100% - 2*var(--pad)); margin:0 auto}
  .carta{position:relative; left:auto; top:auto; transform:none!important; width:auto!important;
    height:auto!important; aspect-ratio:4/5}
  .carta__t{opacity:1}
  .carta:hover img,.team1__pic:hover img,.space__item:hover .space__pic img,
  .cta-split:hover .cta-split__pic img{transform:none}
  .spread__hint{display:none}
  .faq2__panel.entra details,.faq2 details[open] p{animation:none}
  .ess__card:hover{transform:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:700px){
  .spread__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   CUARTA VUELTA (04/10/2026): hero a la izquierda con la foto
   nueva de la recepción, titular de tratamientos y menú móvil.
   ============================================================ */

/* ---------- hero: texto a la izquierda, recepción a la derecha ----------
   La foto es apaisada (4:3): en escritorio entra entera a lo ancho y el
   mostrador queda a la derecha del texto; el degradado oscurece sólo el
   lado del texto para que la recepción se vea limpia. */
@keyframes ken{from{transform:scale(1.02)}to{transform:scale(1.07)}}
.hero{place-items:center stretch; text-align:left}
.hero::after{background:
  linear-gradient(90deg, rgba(18,15,13,.9) 0%, rgba(18,15,13,.72) 34%, rgba(18,15,13,.18) 64%, rgba(18,15,13,.1) 100%),
  linear-gradient(180deg, rgba(18,15,13,.55) 0%, rgba(18,15,13,0) 22%, rgba(18,15,13,0) 72%, rgba(18,15,13,.6) 100%)}
.hero__in{align-items:flex-start; gap:0; max-width:var(--maxw)}
.hero__in > *{max-width:600px}
.hero__eyebrow{display:inline-flex; align-items:center; gap:16px; margin-bottom:20px;
  font:500 12.5px/1 Jost,sans-serif; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-lite)}
.hero__eyebrow::before,.hero__eyebrow::after{content:""; width:38px; height:1px; background:currentColor; opacity:.7}
.hero h1{font-size:clamp(46px,5.8vw,84px); font-weight:700; line-height:.96; letter-spacing:.005em;
  text-transform:uppercase; max-width:none}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{color:var(--gold-lite); font-weight:600}
.hero .lede{margin-top:24px; max-width:48ch; font-size:clamp(16px,1.35vw,18.5px); line-height:1.6}
.hero__feats{display:flex; list-style:none; margin:30px 0 0; padding:0}
.hero__feats li{display:flex; align-items:center; gap:13px; padding:0 22px}
.hero__feats li:first-child{padding-left:0}
.hero__feats li + li{border-left:1px solid rgba(247,242,234,.24)}
.hero__feats svg{width:30px; height:30px; flex:none; fill:none; stroke:var(--gold-lite); stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round}
.hero__feats span{display:flex; flex-direction:column; gap:5px; font:300 13.5px/1.2 Jost,sans-serif;
  color:rgba(255,255,255,.82)}
.hero__feats b{font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#fff}
.hero__cta{justify-content:flex-start; gap:14px; margin-top:34px}
.hero__cta .btn{min-height:56px; padding:16px 30px; letter-spacing:.16em}
.hero__cta .btn--gold{background:linear-gradient(180deg,#C29E62,#A9874D); border-color:#C9A86B}
.hero__cta .btn--gold:hover{background:linear-gradient(180deg,#CCA86C,#B08C4F)}
.hero__cta .btn--clear{background:rgba(18,15,13,.42); border-color:rgba(247,242,234,.5)}
.hero__cta .btn--clear:hover{background:rgba(18,15,13,.6); border-color:#fff}
.hero__arr{width:20px; height:20px; margin-left:6px; transition:transform var(--fast)}
.hero__cta .btn:hover .hero__arr{transform:translateX(4px)}
.hero__info{display:flex; flex-wrap:wrap; align-items:center; gap:10px 0; margin-top:26px;
  font:400 14.5px/1.3 Jost,sans-serif; color:rgba(255,255,255,.84)}
.hero__info > *{display:inline-flex; align-items:center; gap:10px; padding:0 20px; text-decoration:none;
  color:inherit; transition:color var(--fast)}
.hero__info > :first-child{padding-left:0}
.hero__info > * + *{border-left:1px solid rgba(247,242,234,.3)}
.hero__info a:hover{color:#fff}
.hero__info svg{width:18px; height:18px; flex:none; fill:none; stroke:var(--gold-lite); stroke-width:1.5}


/* en escritorio la foto (4:3) va anclada a la derecha a todo el alto y se
   funde con el fondo por la izquierda: así el letrero y el mostrador quedan
   enteros y centrados en el lado libre, sin que el titular los tape */
@media (min-width:861px){
  .hero{background:var(--night)}
  .hero__bg{left:auto; width:auto; aspect-ratio:4/3; background-position:center; transform-origin:70% 50%;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 34%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 34%)}
  .hero::after{background:
    linear-gradient(90deg, rgba(18,15,13,.82) 0%, rgba(18,15,13,.55) 36%, rgba(18,15,13,.08) 62%, rgba(18,15,13,0) 100%),
    linear-gradient(180deg, rgba(18,15,13,.5) 0%, rgba(18,15,13,0) 20%, rgba(18,15,13,0) 76%, rgba(18,15,13,.55) 100%)}
}
@media (max-width:860px){
  /* en vertical la foto se recorta a lo ancho: se ancla al mostrador */
  .hero__bg{background-position:57% 50%}
  .hero{place-items:end stretch; padding-bottom:clamp(30px,5vh,48px)}
  .hero::after{background:linear-gradient(180deg, rgba(18,15,13,.6) 0%, rgba(18,15,13,.25) 26%,
    rgba(18,15,13,.62) 52%, rgba(18,15,13,.92) 100%)}
  .hero__eyebrow{font-size:11px; letter-spacing:.3em; gap:12px; margin-bottom:16px}
  .hero__eyebrow::before{display:none}
  .hero__eyebrow::after{width:28px}
  .hero h1{font-size:clamp(40px,11.4vw,58px)}
  .hero .lede{margin-top:16px; font-size:15.5px}
  .hero__feats{margin-top:22px; width:100%}
  .hero__feats li{flex:1 1 0; min-width:0; flex-direction:column; align-items:flex-start; gap:9px; padding:0 12px}
  .hero__feats svg{width:26px; height:26px}
  .hero__feats span{font-size:12.5px}
  .hero__feats b{font-size:10.5px; letter-spacing:.16em}
  .hero__cta{width:100%; margin-top:24px; gap:10px}
  .hero__cta .btn{min-height:52px; padding:14px 12px; letter-spacing:.1em; font-size:13px}
  .hero__arr{display:none}
  .hero__info{margin-top:20px; font-size:13px; flex-direction:column; align-items:flex-start; gap:8px}
  .hero__info > *{padding:0}
  .hero__info > * + *{border-left:0}
}
@media (max-width:860px) and (max-height:700px){
  .hero__feats{display:none}
}

/* ---------- tratamientos: el titular nuevo es más largo ---------- */
.spread__copy h2{font-size:clamp(34px,4.1vw,58px); max-width:15ch; line-height:1.04}
.spread__copy .lede{max-width:44ch}
@media (max-width:900px){
  .spread__copy h2{font-size:clamp(28px,8vw,40px); max-width:16ch}
  .spread__copy .lede{font-size:15px}
}

/* ---------- menú móvil ----------
   Antes heredaba los estilos de los enlaces: el botón salía en
   Cormorant, alineado a la izquierda y con el subrayado del resto.
   Ahora: enlaces numerados, CTA abajo y datos del local. Todo bajo
   #nav para ganarle a las reglas viejas sin depender del orden. */
@media (max-width:860px){
  #nav .nav__menu{display:flex; flex-direction:column; overflow-x:hidden;
    background:radial-gradient(90% 55% at 100% 0%, rgba(176,140,79,.17), transparent 70%), var(--night)}
  #nav .nav__links{counter-reset:m; flex:1 0 auto; display:flex; flex-direction:column;
    padding:clamp(14px,3vh,30px) var(--pad) calc(26px + env(safe-area-inset-bottom)); position:relative; z-index:1}
  #nav .nav__links > li:not(.nav__cta-m) > a{display:flex; align-items:center; gap:18px;
    padding:clamp(14px,2.3vh,19px) 2px; border-bottom:1px solid rgba(247,242,234,.1);
    font:500 clamp(28px,8.2vw,34px)/1.05 "Cormorant Garamond",Georgia,serif; letter-spacing:.01em;
    color:var(--cream); text-shadow:none}
  #nav .nav__links > li:not(.nav__cta-m) > a::before{counter-increment:m; content:counter(m,decimal-leading-zero);
    font:500 11px/1 Jost,sans-serif; letter-spacing:.18em; color:var(--gold); min-width:22px}
  #nav .nav__links > li:not(.nav__cta-m) > a::after{display:block; content:""; position:static; margin-left:auto;
    width:9px; height:9px; border:solid var(--gold); border-width:1px 1px 0 0; background:none;
    transform:rotate(45deg); opacity:.7}
  #nav .nav__links > li > a[aria-current="page"]{color:var(--gold-lite)}
  #nav .nav__links > li > a[aria-current="page"]::before{color:var(--gold-lite)}

  #nav .nav__cta-m{display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:30px}
  #nav .nav__cta-m .btn{display:flex; width:100%; min-height:54px; padding:0 20px; justify-content:center;
    text-align:center; font:500 13px/1 Jost,sans-serif; letter-spacing:.18em;
    text-transform:uppercase; text-shadow:none}
  #nav .nav__cta-m .btn .ico{width:19px; height:19px; stroke-width:1.4}
  #nav .nav__cta-m .btn--gold{background:linear-gradient(180deg,#C29E62,#A9874D); border:1px solid #C9A86B; color:var(--ink)}
  #nav .nav__cta-m .btn--clear{background:transparent; border:1px solid rgba(247,242,234,.4); color:var(--cream);
    -webkit-backdrop-filter:none; backdrop-filter:none}
  #nav .nav__info{display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:14px;
    font:300 13.5px/1.3 Jost,sans-serif; color:rgba(247,242,234,.66)}
  #nav .nav__info span{display:inline-flex; align-items:center; gap:9px}
  #nav .nav__info svg{width:15px; height:15px; fill:none; stroke:var(--gold); stroke-width:1.5}
  #nav .nav__soc{display:flex; justify-content:center; gap:12px; margin-top:4px}
  #nav .nav__soc a{display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
    border:1px solid rgba(247,242,234,.22); color:var(--cream); transition:border-color var(--fast), color var(--fast)}
  #nav .nav__soc a:hover{border-color:var(--gold); color:var(--gold-lite)}
  #nav .nav__soc svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4}
  /* la columna del logo, enorme y casi transparente, como marca de agua */
  .nav__mark{position:absolute; right:-70px; top:16%; width:270px; height:270px; opacity:.06;
    pointer-events:none; z-index:0}

  /* entrada escalonada de los enlaces al abrir */
  #nav .nav__links > li{opacity:0; transform:translateY(12px);
    transition:opacity .38s ease, transform .5s cubic-bezier(.22,.9,.28,1)}
  .menu-open #nav .nav__links > li{opacity:1; transform:none}
  .menu-open #nav .nav__links > li:nth-child(2){transition-delay:.04s}
  .menu-open #nav .nav__links > li:nth-child(3){transition-delay:.08s}
  .menu-open #nav .nav__links > li:nth-child(4){transition-delay:.12s}
  .menu-open #nav .nav__links > li:nth-child(5){transition-delay:.18s}

  /* con el menú abierto la barra flotante tapaba el pie del menú */
  .menu-open .float{opacity:0; visibility:hidden; pointer-events:none}
}
@media (min-width:861px){ .nav__mark{display:none} }
@media (prefers-reduced-motion:reduce){
  #nav .nav__links > li{opacity:1; transform:none; transition:none}
}
/* laptops bajos (1366x768, 1280x720): el hero entero tiene que caber */
@media (min-width:861px) and (max-height:780px){
  .hero h1{font-size:clamp(44px,4.9vw,66px)}
  .hero__eyebrow{margin-bottom:14px}
  .hero .lede{margin-top:16px}
  .hero__feats{margin-top:20px}
  .hero__cta{margin-top:22px}
  .hero__cta .btn{min-height:52px}
  .hero__info{margin-top:16px}
}
@media (max-width:860px){
  .hero__cta .btn{letter-spacing:.06em; gap:8px}
  .hero__cta .btn--gold{flex:1.45 1 0}
}
@media (max-width:430px){
  .hero__cta .btn{font-size:12.5px; padding-inline:10px}
  .hero__cta .btn .ico{width:18px; height:18px}
}
.spread__copy h2{max-width:18ch; text-wrap:balance}
@media (max-width:900px){ .spread__copy h2{max-width:21ch} }

/* ---------- pie: Instagram y TikTok como íconos ----------
   Sobre el fondo oscuro del pie: el hover redefine fondo, borde y color
   (si no, un fondo claro deja el ícono invisible) */
.foot__soc{display:flex; gap:10px; align-items:center}
.foot__links .foot__soc a{display:grid; place-items:center; width:40px; height:40px; padding:0;
  border-radius:50%; border:1px solid rgba(247,242,234,.24); color:rgba(247,242,234,.8);
  transition:border-color var(--fast), color var(--fast), background var(--fast)}
.foot .foot__links .foot__soc a:hover{background:rgba(247,242,234,.08); border-color:var(--gold); color:var(--gold-lite)}
.foot__soc svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4}

/* ---------- servicios: el mini hero con el texto de "Nuestras experiencias" ---------- */
.phero .hero__eyebrow{margin-bottom:0}
.phero h1{max-width:18ch; text-wrap:balance}
.phero h1 em{display:block}
@media (max-width:860px){
  .phero h1{font-size:clamp(32px,9vw,44px)}
  .phero .hero__eyebrow::before{display:block}
}
/* servicios: "Precios y preguntas" no entra al lado de "Reservar" a 375 px */
@media (max-width:480px){
  .phero .hero__cta{flex-direction:column; width:100%; max-width:340px}
  .phero .hero__cta .btn{flex:none; width:100%}
}
/* contacto: el sillón nuevo es vertical; en la franja apaisada del móvil
   se encuadra el respaldo y la mesa, no sólo el asiento */
.cta-split__pic img{object-position:50% 42%}
@media (max-width:900px){ .cta-split__pic{aspect-ratio:4/3} }
@media (min-width:861px){ .phero h1{max-width:24ch} }

/* ---------- pantallas bajas (laptops de ~650-760 px útiles) ----------
   Misión y visión, el espacio, Nosotros y el equipo se pasaban de la
   pantalla: se compacta el aire y la tipografía para que cada sección
   entre en un solo marco */
@media (min-width:1001px) and (max-height:780px){
  .mv2.sec--fit,.sec--fit#equipo,.sec--fit#espacio,.sec--fit#esencia{padding-block:clamp(18px,3vh,28px)}
  .mv2 h2{font-size:clamp(34px,3.6vw,48px); margin-top:8px}
  .mv2__sub{margin-top:6px}
  .mv2__grid{margin-top:18px; gap:18px}
  .mv2__card{padding:20px 26px}
  .mv2__ico{width:52px; height:52px}
  .mv2__ico .ico{width:24px; height:24px}
  .mv2__card h3{font-size:clamp(20px,1.8vw,24px)}
  .mv2__card p{margin-top:12px; padding-top:12px; font-size:14.5px; line-height:1.6}
  .space__head{margin-bottom:16px}
  .space__head h2{font-size:clamp(32px,3.4vw,46px); margin-top:8px}
  .space__pic img{max-height:min(19vh,190px)}
  .space__cap{margin-top:8px}
  .space__grid{row-gap:14px}
  .ab h1{font-size:clamp(34px,3.4vw,46px); margin:8px 0 10px}
  .ab__mean,.ab__facts{margin-top:12px; padding-top:12px}
  .team1 h2{font-size:clamp(30px,3.4vw,44px); margin:10px 0 12px}
  .team1__pic img{max-height:min(46vh,420px)}
}

/* ---------- Nosotros: la foto del pasillo entra completa ----------
   La columna de la foto mide exactamente 3:4 del alto disponible, así que
   la imagen (960x1280) no se recorta en ningún alto de pantalla */
@media (min-width:1001px){
  .ab{grid-template-columns:min(50vw, calc((100svh - var(--navh)) * .75)) minmax(0,1fr)}
  .ab__pic img{object-position:50% 50%}
}
@media (max-width:1000px){
  .ab__pic{aspect-ratio:3/4; max-height:none}
}
/* la experiencia: la foto nueva va a la izquierda y se funde con el fondo */
.xp__img img{object-position:0% 50%}
@media (max-width:900px){ .xp__img img{object-position:50% 30%} }

/* ---------- franja final del inicio con la recepción ----------
   Igual que el hero: texto a la izquierda y la foto anclada a la derecha,
   fundida con el fondo, para que el logo iluminado se vea entero y
   el titular no lo tape */
@media (min-width:861px){
  .cta-img--rec{text-align:left}
  .cta-img--rec .cta-img__bg{left:auto; width:auto; aspect-ratio:4/3; transform:none;
    background-size:cover; background-position:center !important;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 36%);
            mask-image:linear-gradient(90deg, transparent 0%, #000 36%)}
  .cta-img--rec::after{background:linear-gradient(90deg, rgba(18,15,13,.86) 0%, rgba(18,15,13,.6) 38%, rgba(18,15,13,.1) 64%, rgba(18,15,13,0) 100%)}
  .cta-img--rec .wrap > *{max-width:660px}
  .cta-img--rec .tag--mid{justify-content:flex-start}
  .cta-img--rec .tag--mid::after{display:none}
  .cta-img--rec .lede{margin-inline:0}
  .cta-img--rec .cta-img__info{justify-content:flex-start}
  .cta-img--rec .cta-img__info span:first-child{padding-left:0}
  .cta-img--rec .band__cta{justify-content:flex-start}
}
/* en el celular la foto va como bloque arriba y el texto debajo,
   así el logo se ve entero y no queda detrás del titular */
@media (max-width:860px){
  .cta-img--rec{padding-top:calc(clamp(240px,68vw,320px) + 34px)}
  .cta-img--rec .cta-img__bg{bottom:auto; height:clamp(240px,68vw,320px); transform:none;
    background-size:cover; background-position:56% 34% !important}
  .cta-img--rec::after{background:linear-gradient(180deg, rgba(18,15,13,0) 0, rgba(18,15,13,0) clamp(170px,50vw,240px),
    var(--night) clamp(240px,68vw,320px))}
}