/* ═══════════════════════════════════════════════════════════════════
   THE ARCHIVE
   Paleta muestreada del folleto original de Imtiaz.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* color */
  --paper:      #E9E2D5;
  --paper-2:    #E1D9CA;
  --linen:      #D6CCB8;
  --ink:        #242222;
  --ink-2:      #4A4744;
  --slate:      #293234;
  --slate-2:    #1B2223;
  --slate-mid:  #475658;
  --sage:       #8B9F9E;
  --sage-pale:  #C2CFCD;
  --leather:    #22170D;

  /* Latón en tres grados. El acento de marca (#9C7C4A) solo da 3,02:1
     sobre papel: vale para filetes, fondos de botón y cifras grandes
     (≥24px, umbral 3:1), pero NUNCA para texto pequeño.
       --brass      #9C7C4A  papel 3.02 · lino 2.44   → filetes y fondos
       --brass-ink  #685231  papel 5.74 · lino 4.64   → texto sobre claro
       --brass-lt   #C0A276  pizarra 5.42             → texto sobre oscuro */
  --brass:      #9C7C4A;
  --brass-ink:  #685231;
  --brass-lt:   #C0A276;

  /* glass — tintes derivados de la paleta, nunca blanco puro */
  --glass-dark:   rgba(27, 34, 35, .52);
  --glass-light:  rgba(233, 226, 213, .62);
  --glass-hair:   rgba(255, 255, 255, .16);
  --glass-lift:   rgba(255, 255, 255, .10);
  --glass-blur:   blur(16px) saturate(1.15);

  /* tipografía */
  --f-display: "Cinzel", "Times New Roman", serif;
  --f-body:    "Literata", Georgia, serif;
  --f-ui:      "Archivo", -apple-system, "Segoe UI", sans-serif;

  --t-12: .75rem;  --t-14: .875rem; --t-16: 1rem;    --t-17: 1.0625rem;
  --t-18: 1.125rem; --t-21: 1.3125rem; --t-28: 1.75rem;
  --t-40: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-64: clamp(2.25rem, 6vw, 4rem);

  /* ritmo */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-6: 1.5rem; --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;
  --sp-24: 6rem;  --sp-32: 8rem;

  --wrap: 1180px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 400ms;

  /* dos curvas, dos gestos: trazar una regla y colocar una contra */
  --ease-rule: cubic-bezier(.65, 0, .35, 1);
  --ease-set:  cubic-bezier(.22, .61, .36, 1);
  --dur-rule: 520ms;
  --dur-set:  620ms;

  --nav-h: 76px;
  --z-sticky: 40; --z-nav: 60; --z-lb: 100;
}

/* ═══ DOCTRINA DE MOVIMIENTO ═══════════════════════════════════════
   Reglas auditables, no de gusto:
   1. Solo se mueven dos primitivas — la REGLA de latón de 1px que se
      traza, y la CONTRA del color de la sección que se retira. Nada
      rota, nada rebota, ningún easing hace overshoot, ninguna
      fotografía escala, nunca más de dos gestos a la vez.
   2. El estado en reposo del CSS base es SIEMPRE el estado final. Lo
      scroll-driven vive bajo doble puerta:
      @media (prefers-reduced-motion:no-preference){ @supports(...) }
      Así, sin soporte o con la preferencia activa, no se parsea nada
      y la página se ve entera. No hay nada que apagar.
   3. Prohibido `animation-timeline:none` para desactivar: devuelve la
      animación al reloj del documento y se reproduce igual.
   4. En #facts no se anima ni un dato. Solo filetes.
   ═══════════════════════════════════════════════════════════════════ */

/* ── reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x:hidden en body lo convierte en contenedor de scroll y
   rompe position:sticky EN SILENCIO. clip recorta sin ese efecto. */
html, body{ overflow-x:clip; }
@supports not (overflow:clip){ html, body{ overflow-x:hidden; } }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* el lightbox pone body{overflow:hidden}: sin gutter estable, la
     barra desaparece y toda la página se desplaza ~15px */
  scrollbar-gutter:stable;
  /* los anclajes caen bajo la nav fija si no se reserva su altura */
  scroll-padding-block-start:var(--nav-h);
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--t-17)/1.65 var(--f-body);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
:target{ scroll-margin-block-start:var(--nav-h); }
img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p,ul,ol{ margin:0; }
ul{ list-style:none; padding:0; }
table{ border-collapse:collapse; width:100%; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--sp-4); top:-100px; z-index:200;
  background:var(--ink); color:var(--paper); padding:.75rem 1.25rem;
  font:500 var(--t-14) var(--f-ui); text-decoration:none; border-radius:2px;
  transition:top 150ms var(--ease);
}
.skip:focus{ top:var(--sp-4); }

:focus-visible{
  outline:2px solid var(--brass-lt);
  outline-offset:3px;
  border-radius:2px;
}

/* ── tipografía base ───────────────────────────────────────────── */
.display{
  font:400 var(--t-40)/1.18 var(--f-display);
  letter-spacing:-.005em;
  text-wrap:balance;
}
.display--light{ color:#F2EDE3; }

.h3{
  font:500 var(--t-21)/1.3 var(--f-display);
  letter-spacing:.02em;
  margin:var(--sp-16) 0 var(--sp-6);
  padding-bottom:var(--sp-3);
  border-bottom:1px solid rgba(36,34,34,.16);
}

.kicker{
  font:600 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--slate-mid);
  margin-bottom:var(--sp-6);
}
.kicker--light{ color:rgba(242,237,227,.72); }

.lead{
  font:300 var(--t-21)/1.55 var(--f-body);
  max-width:60ch;
  margin-bottom:var(--sp-6);
}
.prose p{ max-width:62ch; margin-bottom:var(--sp-4); }
.prose p:last-child{ margin-bottom:0; }
.prose--light{ color:rgba(242,237,227,.86); }

.note{
  font:400 var(--t-12)/1.6 var(--f-ui);
  color:var(--slate-mid);
  max-width:70ch;
  margin-top:var(--sp-4);
}
.note--top{ margin-top:0; margin-bottom:var(--sp-4); }

/* ── layout ────────────────────────────────────────────────────── */
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
}
.wrap--narrow{ max-width:760px; }

.sec{ padding-block:var(--sp-24); position:relative; }
/* --shutter: la contra hereda el color de la PROPIA sección, así no se
   ve una tapa ajena retirándose sino cómo la página se despeja */
.sec--paper{ background:var(--paper); --shutter:var(--paper); }
.sec--linen{ background:var(--linen); --shutter:var(--linen); }
.sec--slate{ background:var(--slate); color:#F2EDE3; --shutter:var(--slate); }
.sec--slate .note{ color:rgba(242,237,227,.6); }

.lead-grid{ display:grid; gap:var(--sp-8); }
@media (min-width:900px){
  .lead-grid{ grid-template-columns:1.05fr 1fr; gap:var(--sp-16); align-items:start; }
}

/* ── botones ───────────────────────────────────────────────────── */
/* El atributo hidden lo pone la UA con display:none, pero cualquier
   regla de autor que declare display gana. .btn declara inline-flex, así
   que el botón de Zoom —que nace hidden y lo enciende el JS— se veía
   muerto en el primer pintado y para siempre si el JS no llega. */
[hidden]{ display:none !important; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.75rem 1.5rem;
  background:var(--brass); color:#1A1408;
  font:600 var(--t-14)/1 var(--f-ui);
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; border-radius:2px; cursor:pointer;
  transition:background 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover{ background:var(--brass-lt); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ min-height:40px; padding:.55rem 1.1rem; font-size:var(--t-12); }
.btn--lg{ min-height:52px; padding:1rem 2.25rem; }
.btn--full{ width:100%; min-height:52px; margin-top:var(--sp-2); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; }

.btn__spin{
  width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(26,20,8,.28); border-top-color:#1A1408;
  animation:spin 700ms linear infinite; display:none;
}
.is-loading .btn__spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── GLASS ─────────────────────────────────────────────────────────
   Solo sobre fotografía. Nunca sobre color plano.
   ─────────────────────────────────────────────────────────────── */
.glass{
  position:relative;
  border:1px solid var(--glass-hair);
  border-radius:3px;
  box-shadow:0 18px 48px rgba(15,20,20,.30);
}
.glass::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-lift) 22%,var(--glass-lift) 78%,transparent);
  pointer-events:none;
}
.glass--dark{ background:var(--glass-dark); color:#F2EDE3; }
.glass--light{ background:var(--glass-light); color:var(--ink); }

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass--dark, .glass--light{
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass--dark{ background:rgba(21,27,28,.90); }
  .glass--light{ background:rgba(233,226,213,.95); }
}

/* ── NAV ───────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  padding:var(--sp-3) 0;
  padding-top:max(var(--sp-3), env(safe-area-inset-top));
  transition:background 300ms var(--ease), border-color 300ms var(--ease);
  border-bottom:1px solid transparent;
}
/* la nav pasa por encima de secciones claras y oscuras: el tinte tiene
   que ser lo bastante opaco para que el texto claro mantenga 4,5:1
   también sobre el papel. Con .52 se quedaba en 3,49:1 */
.nav.is-stuck{
  background:rgba(20,26,27,.80);
  border-bottom-color:var(--glass-hair);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.is-stuck{ -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.is-stuck{ background:rgba(21,27,28,.95); }
}

.nav__in{
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
  display:flex; align-items:center; gap:var(--sp-6);
}
.nav__brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; flex-shrink:0;
}
.nav__logo{ width:86px; height:auto; }
.nav__div{ width:1px; height:20px; background:rgba(242,237,227,.30); }
.nav__proj{
  font:400 var(--t-14)/1 var(--f-display);
  letter-spacing:.16em; text-transform:uppercase; color:#F2EDE3;
  white-space:nowrap;
}
.nav__links{ display:none; gap:var(--sp-4); margin-inline:auto; }
.nav__links a{
  font:500 var(--t-12)/1 var(--f-ui);
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:rgba(242,237,227,.86); text-decoration:none;
  padding:.5rem 0; position:relative;
  transition:color 180ms var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brass-lt); transform:scaleX(0); transform-origin:left;
  transition:transform 220ms var(--ease);
}
.nav__links a:hover{ color:#F7F3EA; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__right{ display:flex; align-items:center; gap:var(--sp-3); margin-left:auto; }
@media (min-width:1180px){
  .nav__links{ display:flex; }
  .nav__right{ margin-left:0; }
}

/* selector de idioma */
.lang{ position:relative; }
.lang__btn{
  display:flex; align-items:center; gap:.35rem;
  min-height:40px; padding:.4rem .7rem;
  background:transparent; color:rgba(242,237,227,.88);
  border:1px solid rgba(242,237,227,.26); border-radius:2px; cursor:pointer;
  font:500 var(--t-12)/1 var(--f-ui); letter-spacing:.1em;
  transition:border-color 180ms var(--ease), color 180ms var(--ease);
}
.lang__btn:hover{ border-color:rgba(242,237,227,.55); color:#F7F3EA; }
.lang__menu{
  position:absolute; right:0; top:calc(100% + .4rem); min-width:150px;
  background:rgba(21,27,28,.95);
  border:1px solid var(--glass-hair); border-radius:3px;
  box-shadow:0 18px 40px rgba(10,14,14,.45);
  padding:.3rem; z-index:2;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lang__menu{ background:var(--glass-dark); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); }
}
.lang__menu button{
  display:block; width:100%; text-align:left;
  padding:.6rem .8rem; min-height:40px;
  background:transparent; border:0; cursor:pointer; border-radius:2px;
  color:rgba(242,237,227,.84);
  font:400 var(--t-14)/1 var(--f-ui);
  transition:background 150ms var(--ease), color 150ms var(--ease);
}
.lang__menu button:hover{ background:rgba(242,237,227,.10); color:#F7F3EA; }
.lang__menu button[aria-selected="true"]{ color:var(--brass-lt); }

/* ── HERO ──────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:var(--sp-32) 0 var(--sp-24);
  overflow:clip;
  isolation:isolate;
}
/* apilado positivo: los z-index negativos quedan tapados por el fondo
   del canvas y la sección se ve en blanco */
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(14,18,19,.74) 0%, rgba(14,18,19,.22) 28%, rgba(14,18,19,.34) 52%, rgba(14,18,19,.88) 100%);
}
.hero__in{
  position:relative; z-index:2;
  text-align:center; color:#F5F1E7;
  padding-inline:clamp(1.25rem,5vw,3rem);
  max-width:860px;
}
.hero__title{
  font:400 var(--t-64)/1.02 var(--f-display);
  letter-spacing:.10em; text-transform:uppercase;
  margin:0 0 var(--sp-3);
  text-shadow:0 2px 30px rgba(10,14,14,.45);
}
.hero__estd{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  font:500 var(--t-12)/1 var(--f-ui); letter-spacing:.24em; text-transform:uppercase;
  color:rgba(245,241,231,.72); margin-bottom:var(--sp-8);
}
.hero__estd em{
  font:400 var(--t-14)/1 var(--f-display);
  letter-spacing:.16em; font-style:normal; color:rgba(245,241,231,.92);
}
.hero__quote{
  font:300 italic clamp(1.0625rem,2.1vw,1.375rem)/1.55 var(--f-body);
  max-width:36ch; margin:0 auto var(--sp-12);
  color:rgba(245,241,231,.94);
  text-shadow:0 1px 18px rgba(10,14,14,.5);
}

.facts{
  display:grid; grid-template-columns:1fr; gap:0;
  max-width:640px; margin:0 auto var(--sp-8);
  padding:var(--sp-2);
}
.facts li{
  padding:var(--sp-4) var(--sp-3);
  display:flex; flex-direction:column; gap:.3rem;
}
.facts li + li{ border-top:1px solid rgba(255,255,255,.12); }
.facts__k{
  font:500 var(--t-12)/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(242,237,227,.66);
}
.facts__v{ font:400 var(--t-18)/1.2 var(--f-display); letter-spacing:.03em; color:#F5F1E7; }
@media (min-width:640px){
  .facts{ grid-template-columns:repeat(3,1fr); }
  .facts li + li{ border-top:0; border-left:1px solid rgba(255,255,255,.12); }
}

.hero__cue{
  position:absolute; z-index:2;
  left:50%; bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));
  translate:-50% 0; color:rgba(245,241,231,.65);
  padding:.5rem; min-width:44px; min-height:44px;
  display:grid; place-items:center;
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }

/* ── PROLOGUE ──────────────────────────────────────────────────── */
.prologue .display{ margin-bottom:var(--sp-8); }
.manifesto{
  display:grid; gap:var(--sp-3);
  border-top:1px solid rgba(36,34,34,.16); padding-top:var(--sp-6);
}
.manifesto li{
  font:300 var(--t-18)/1.4 var(--f-body);
  color:var(--ink-2);
  padding-left:var(--sp-6); position:relative;
}
.manifesto li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:14px; height:1px; background:var(--brass);
}

.plate{ margin:var(--sp-16) auto 0; padding-inline:clamp(1.25rem,5vw,3rem); }
.plate--wide{ max-width:900px; }
.plate img{ width:100%; box-shadow:0 24px 60px rgba(36,34,34,.20); }

/* ── duo / trio ────────────────────────────────────────────────── */
.duo, .trio{
  display:grid; gap:var(--sp-4);
  margin-top:var(--sp-16);
  padding-inline:clamp(1.25rem,5vw,3rem);
  max-width:var(--wrap); margin-inline:auto;
}
.duo--pad{ margin-bottom:var(--sp-24); }
@media (min-width:800px){ .duo{ grid-template-columns:1fr 1fr; gap:var(--sp-6); } }
@media (min-width:900px){ .trio{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6); } }

.duo__fig img, .trio__fig img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  box-shadow:0 16px 40px rgba(20,25,25,.22);
}
.duo__fig figcaption, .trio__fig figcaption{
  font:600 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate-mid); margin-top:var(--sp-3);
}
.sec--slate .duo__fig figcaption, .sec--slate .trio__fig figcaption{ color:rgba(242,237,227,.6); }

/* ── secciones a sangre con tarjeta glass ──────────────────────── */
.sec--bleed{
  padding:0; min-height:88svh;
  display:grid; place-items:center;
  position:relative; overflow:clip; isolation:isolate;
}
.bleed__bg{ position:absolute; inset:0; z-index:0; }
.bleed__bg img{ width:100%; height:100%; object-fit:cover; }
.sec--bleed::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,18,19,.42) 0%, rgba(14,18,19,.16) 38%, rgba(14,18,19,.70) 100%);
}
.sec--bleed .glass--dark{ background:rgba(20,26,27,.78); }
.bleed__card{
  position:relative; z-index:2;
  max-width:560px;
  margin:var(--sp-24) clamp(1.25rem,5vw,3rem);
  padding:var(--sp-8) clamp(1.5rem,4vw,2.5rem);
}
.bleed__card p{ margin-bottom:var(--sp-4); color:rgba(242,237,227,.88); }
.bleed__card p:last-child{ margin-bottom:0; }
.bleed__card .display{ margin-bottom:var(--sp-6); }
@media (min-width:900px){
  .bleed__card{ margin-inline:auto; justify-self:start; margin-left:clamp(2rem,9vw,7rem); }
  .sec--bleed-alt .bleed__card{ justify-self:end; margin-left:0; margin-right:clamp(2rem,9vw,7rem); }
}

/* ── distancias ────────────────────────────────────────────────── */
.dist{
  margin-top:var(--sp-16);
  border-top:1px solid rgba(36,34,34,.16);
}
.dist li{
  display:flex; align-items:baseline; gap:var(--sp-4);
  padding:var(--sp-3) 0;
  border-bottom:1px solid rgba(36,34,34,.10);
  font-size:var(--t-16);
}
.dist li span{ flex:0 1 auto; }
.dist li::after{
  content:""; flex:1 1 auto; height:0;
  border-bottom:1px dotted rgba(36,34,34,.28);
  transform:translateY(-.28em);
}
.dist li b{
  font:500 var(--t-14)/1 var(--f-ui);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em; white-space:nowrap; color:var(--slate-mid);
}
@media (min-width:760px){
  .dist{ columns:2; column-gap:var(--sp-16); }
  .dist li{ break-inside:avoid; }
}

/* ── habitaciones ──────────────────────────────────────────────── */
.rooms{ display:grid; gap:var(--sp-12); margin-top:var(--sp-16); }
@media (min-width:900px){ .rooms{ grid-template-columns:repeat(3,1fr); gap:var(--sp-8); } }
.rooms--dark{ padding-inline:clamp(1.25rem,5vw,3rem); }
.room img{ width:100%; aspect-ratio:3/4; object-fit:cover; box-shadow:0 16px 40px rgba(20,25,25,.24); }
.room h3{
  font:500 var(--t-21)/1.3 var(--f-display); letter-spacing:.02em;
  margin:var(--sp-6) 0 var(--sp-3);
}
.room p{ font-size:var(--t-16); color:var(--ink-2); }
.sec--slate .room p{ color:rgba(242,237,227,.80); }

/* ── precios ───────────────────────────────────────────────────── */
.prices{
  display:grid; gap:0;
  margin-top:var(--sp-12);
  border-top:1px solid rgba(36,34,34,.18);
}
.price{
  padding:var(--sp-6) 0;
  border-bottom:1px solid rgba(36,34,34,.12);
  display:flex; flex-direction:column; gap:.2rem;
}
.price--head .price__v{ color:var(--brass-ink); }
.price__v{
  font:400 var(--t-28)/1.1 var(--f-display);
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
}
.price__k{ font:400 var(--t-18)/1.3 var(--f-body); }
.price__s{ font:400 var(--t-12)/1.4 var(--f-ui); color:var(--slate-mid); }
@media (min-width:760px){
  .prices{ grid-template-columns:repeat(5,1fr); border-bottom:1px solid rgba(36,34,34,.12); }
  .price{ border-bottom:0; padding:var(--sp-8) var(--sp-4) var(--sp-8) 0; }
  .price + .price{ border-left:1px solid rgba(36,34,34,.12); padding-left:var(--sp-4); }
}

/* ── tablas ────────────────────────────────────────────────────── */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ min-width:460px; font-size:var(--t-14); font-family:var(--f-ui); }
.table th, .table td{
  text-align:left; padding:.7rem var(--sp-4) .7rem 0;
  border-bottom:1px solid rgba(36,34,34,.10);
  font-weight:400;
}
.table thead th{
  font:600 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate-mid);
  border-bottom-width:1px; border-bottom-color:rgba(36,34,34,.30);
}
.table tbody th{ font-weight:500; }
.table td{ font-variant-numeric:tabular-nums; }
.table tr.is-total th, .table tr.is-total td{
  border-top:1px solid rgba(36,34,34,.30);
  border-bottom:0; font-weight:600; color:var(--ink);
}
.table--sm{ min-width:400px; }

/* ── amenities ─────────────────────────────────────────────────── */
.amen{
  display:grid; gap:0;
  grid-template-columns:1fr;
  border-top:1px solid rgba(36,34,34,.16);
}
.amen li{
  padding:.7rem 0 .7rem var(--sp-6);
  border-bottom:1px solid rgba(36,34,34,.10);
  font-size:var(--t-16); position:relative;
}
.amen li::before{
  content:""; position:absolute; left:0; top:1.2em;
  width:9px; height:1px; background:var(--brass);
}
@media (min-width:640px){ .amen{ grid-template-columns:1fr 1fr; column-gap:var(--sp-12); } }
@media (min-width:960px){ .amen{ grid-template-columns:repeat(3,1fr); } }

/* ── planes de pago ────────────────────────────────────────────── */
.plans{ display:grid; gap:var(--sp-12); }
@media (min-width:900px){ .plans{ grid-template-columns:1fr 1fr; gap:var(--sp-8); } }
.plan__hd{ margin-bottom:var(--sp-4); }
.plan__hd h4{ font:500 var(--t-21)/1.3 var(--f-display); letter-spacing:.02em; }
.plan__split{
  font:400 var(--t-14)/1.5 var(--f-ui); color:var(--slate-mid); margin-top:var(--sp-2);
}
.plan__split b{ color:var(--brass-ink); font-weight:600; }

/* ── stats ─────────────────────────────────────────────────────── */
.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8) var(--sp-4);
  margin-top:var(--sp-16); padding-top:var(--sp-8);
  border-top:1px solid rgba(242,237,227,.20);
}
.stats li{ display:flex; flex-direction:column; gap:.3rem; }
.stats b{
  font:400 var(--t-28)/1.1 var(--f-display);
  letter-spacing:.02em; color:var(--brass-lt); font-variant-numeric:tabular-nums;
}
.stats span{
  font:500 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.16em; text-transform:uppercase; color:rgba(242,237,227,.62);
}
@media (min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }

/* ── galería ───────────────────────────────────────────────────── */
.grid{
  display:grid; gap:var(--sp-2);
  grid-template-columns:repeat(2,1fr);
  margin-top:var(--sp-12);
  padding-inline:clamp(1.25rem,5vw,3rem);
  max-width:1500px; margin-inline:auto;
}
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); gap:var(--sp-3); } }
@media (min-width:1200px){ .grid{ grid-template-columns:repeat(4,1fr); } }

.tile{
  position:relative; padding:0; border:0; background:none; cursor:pointer;
  overflow:hidden; display:block; line-height:0;
}
.tile img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 600ms var(--ease);
}
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(14,18,19,.55));
  opacity:0; transition:opacity 300ms var(--ease);
}
.tile__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:var(--sp-3);
  font:600 var(--t-12)/1.3 var(--f-ui);
  letter-spacing:.14em; text-transform:uppercase; color:#F5F1E7;
  text-align:left;
  opacity:0; transform:translateY(6px);
  transition:opacity 300ms var(--ease), transform 300ms var(--ease);
}
.tile:hover::after, .tile:focus-visible::after{ opacity:1; }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap{ opacity:1; transform:none; }

/* ── lightbox ──────────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:var(--z-lb);
  background:rgba(12,16,16,.94);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lb{ background:rgba(12,16,16,.80); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
}
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:min(1100px,100%); max-height:100%; }
.lb__fig img{
  max-width:100%; max-height:78svh; width:auto; margin-inline:auto;
  object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lb__fig figcaption{
  margin-top:var(--sp-4); text-align:center;
  font:600 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.18em; text-transform:uppercase; color:rgba(245,241,231,.80);
}
.lb__close, .lb__nav{
  position:absolute; display:grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(245,241,231,.10); border:1px solid rgba(245,241,231,.22);
  color:#F5F1E7; cursor:pointer;
  transition:background 180ms var(--ease);
}
.lb__close:hover, .lb__nav:hover{ background:rgba(245,241,231,.22); }
.lb__close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lb__nav{ top:50%; translate:0 -50%; }
.lb__nav--prev{ left:clamp(.5rem,2vw,2rem); }
.lb__nav--next{ right:clamp(.5rem,2vw,2rem); }

/* ── CTA final ─────────────────────────────────────────────────── */
.sec--cta{
  position:relative; overflow:clip; isolation:isolate;
  padding-block:var(--sp-24);
}
.cta__bg{ position:absolute; inset:0; z-index:0; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.sec--cta::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,25,26,.86), rgba(20,25,26,.94));
}
.cta__in{
  position:relative; z-index:2;
  max-width:var(--wrap); margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,3rem);
  display:grid; gap:var(--sp-12); align-items:start;
}
@media (min-width:980px){
  .cta__in{ grid-template-columns:1fr 460px; gap:var(--sp-16); }
}
.cta__copy{ color:rgba(242,237,227,.88); }
.cta__copy .display{ margin-bottom:var(--sp-6); }
.cta__copy p{ max-width:52ch; margin-bottom:var(--sp-6); }
.cta__list{ display:grid; gap:var(--sp-3); border-top:1px solid rgba(242,237,227,.20); padding-top:var(--sp-6); }
.cta__list li{
  padding-left:var(--sp-6); position:relative;
  font:400 var(--t-16)/1.5 var(--f-body); color:rgba(242,237,227,.82);
}
.cta__list li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:12px; height:1px; background:var(--brass-lt);
}

/* ── CTA secundario: agendar llamada ───────────────────────────── */
.cta__alt{
  margin-top:var(--sp-8); padding-top:var(--sp-6);
  border-top:1px solid rgba(242,237,227,.20);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
  font:400 var(--t-16)/1.5 var(--f-body); color:rgba(242,237,227,.72);
}
.cta__alt a{
  display:inline-flex; align-items:center; gap:.4rem;
  font:600 var(--t-14)/1 var(--f-ui);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass-lt); text-decoration:none;
  padding:.4rem 0; border-bottom:1px solid rgba(192,162,118,.45);
  transition:border-color 180ms var(--ease), color 180ms var(--ease);
}
.cta__alt a:hover{ color:#DCC091; border-bottom-color:#DCC091; }
.cta__alt a svg{ transition:transform 220ms var(--ease); }
.cta__alt a:hover svg{ transform:translate(2px,-2px); }

/* ── tarjeta del formulario (Tally) ────────────────────────────── */
.formcard{
  padding:clamp(1.5rem,4vw,2.25rem);
  /* más opaca que el glass estándar: Tally pinta su texto en oscuro
     y tiene que leerse pase lo que pase sobre la foto de fondo */
  background:rgba(236,230,219,.93);
  color:var(--ink);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .formcard{ background:rgba(236,230,219,.86); }
}
.formcard__t{
  font:500 var(--t-21)/1.25 var(--f-display); letter-spacing:.02em; color:var(--ink);
}
.formcard__s{
  font:300 var(--t-16)/1.5 var(--f-body); color:var(--ink-2);
  margin-top:var(--sp-2); max-width:38ch;
}
.tally{
  margin-top:var(--sp-6);
  min-height:420px;              /* reserva de espacio: sin salto al cargar */
}
.tally iframe{ display:block; width:100%; border:0; }
.formcard__ns{
  margin-top:var(--sp-4); font:400 var(--t-14)/1.6 var(--f-ui); color:var(--ink-2);
}
.formcard__ns a{ color:var(--brass-ink); }
.formcard__fine{
  margin-top:var(--sp-6); padding-top:var(--sp-4);
  border-top:1px solid rgba(36,34,34,.14);
  font:400 var(--t-12)/1.55 var(--f-ui); color:var(--slate-mid);
}

/* ── footer ────────────────────────────────────────────────────── */
.foot{
  background:var(--slate-2); color:rgba(242,237,227,.78);
  padding-block:var(--sp-16) var(--sp-8);
  padding-bottom:calc(var(--sp-8) + env(safe-area-inset-bottom));
}
.foot__top{
  display:grid; gap:var(--sp-6); align-items:center;
  padding-bottom:var(--sp-8); border-bottom:1px solid rgba(242,237,227,.16);
}
.foot__logo{ width:150px; height:auto; }
.foot__claim{
  font:300 italic var(--t-18)/1.5 var(--f-body); color:rgba(242,237,227,.72);
}
@media (min-width:760px){
  .foot__top{ grid-template-columns:auto 1fr; gap:var(--sp-12); }
  .foot__claim{ text-align:right; }
}
.foot__cols{
  display:grid; gap:var(--sp-8); margin-top:var(--sp-8);
  grid-template-columns:1fr;
}
@media (min-width:560px){ .foot__cols{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .foot__cols{ grid-template-columns:repeat(4,1fr); } }
.foot__cols h3{
  font:600 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,237,227,.55); margin-bottom:var(--sp-3);
}
.foot__cols p{ font:400 var(--t-14)/1.7 var(--f-ui); }
.foot__cols a{ text-decoration:none; border-bottom:1px solid rgba(242,237,227,.28); }
.foot__cols a:hover{ border-bottom-color:var(--brass-lt); color:var(--brass-lt); }
.foot__legal{
  margin-top:var(--sp-12); padding-top:var(--sp-6);
  border-top:1px solid rgba(242,237,227,.16);
  font:400 var(--t-12)/1.65 var(--f-ui); color:rgba(242,237,227,.52);
  max-width:100ch;
}
.foot__copy{
  margin-top:var(--sp-6);
  font:400 var(--t-12)/1.5 var(--f-ui); color:rgba(242,237,227,.56);
}

/* ── sticky CTA (móvil) ────────────────────────────────────────── */
.sticky{
  position:fixed; z-index:var(--z-sticky);
  left:var(--sp-3); right:var(--sp-3);
  bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  transform:translateY(160%);
  transition:transform 380ms var(--ease);
}
.sticky.is-on{ transform:none; }
.sticky__txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.sticky__txt b{
  font:400 var(--t-16)/1.2 var(--f-display); letter-spacing:.03em; color:#F5F1E7;
  font-variant-numeric:tabular-nums;
}
.sticky__txt span{
  font:500 var(--t-12)/1.2 var(--f-ui); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(242,237,227,.62);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (min-width:1040px){ .sticky{ display:none; } }

/* ── reveal ────────────────────────────────────────────────────── */
[data-rev]{
  opacity:0; transform:translateY(10px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay:var(--d, 0ms);
}
[data-rev].is-in{ opacity:1; transform:none; }

/* ── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-rev]{ opacity:1 !important; transform:none !important; }
  .hero__cue{ animation:none; }
}

@supports not (overflow:clip){
  .hero, .sec--bleed, .sec--cta{ overflow:hidden; }
}

/* ═══════════════════════════════════════════════════════════════════
   CAPA EDITORIAL Y DE MOVIMIENTO
   Todo lo scroll-driven vive bajo la DOBLE PUERTA:
     @media (prefers-reduced-motion:no-preference){ @supports(...) }
   El estado en reposo del CSS base es siempre el estado FINAL, así que
   sin soporte o con la preferencia activa la página se ve entera y no
   hay nada que apagar. No usar animation-timeline:none para desactivar:
   devuelve la animación al reloj del documento y se reproduce igual.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · MICRO-TIPOGRAFÍA ──────────────────────────────────────────
   El 90% de la página es papel y letra. Coste de runtime cero, CLS
   cero, y funciona idéntico con el movimiento desactivado. */

.prose p, .lead, .bleed__card p, .cta__copy p, .room p, .formcard__s{
  text-wrap:pretty;                 /* sin viudas ni huérfanas */
  hanging-punctuation:first last;   /* degrada a nada donde no exista */
}

/* cifras: de estilo antiguo en prosa, tabulares en cualquier dato */
.prose, .lead{ font-variant-numeric:oldstyle-num; }
.table, .price__v, .stats b, .dist li b,
.sticky__txt b, .facts__v{ font-variant-numeric:tabular-nums; }

/* las cadenas FR/ES/PT son un 15-25% más largas que las inglesas:
   sin partición abren ríos en móvil */
:lang(fr), :lang(es), :lang(pt){ hyphens:auto; }

/* versal capitular: solo desde 900px, solo en el primer párrafo de
   prosa de capítulo, y solo si el texto abre con letra — la clase
   .has-cap la pone el JS, porque «¿» o unas comillas latinas
   arrastrarían la puntuación dentro del ::first-letter */
@media (min-width:900px){
  .prose > p.has-cap:first-of-type::first-letter{
    float:left;
    font:400 3.1em/.78 var(--f-display);
    padding:.02em .1em 0 0;
    color:var(--brass-ink);
  }
  .sec--slate .prose > p.has-cap:first-of-type::first-letter{
    color:var(--brass-lt);
  }
}

/* ── 2 · LAS DOS PRIMITIVAS ────────────────────────────────────────
   Solo se mueven estas dos cosas en toda la web. */
@keyframes drawV  { from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes drawH  { from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@keyframes shelve { from{ transform:scaleY(1) } to{ transform:scaleY(0) } }
@keyframes folio  { from{ transform:translateY(6%); opacity:0 }
                    to  { transform:none; opacity:inherit } }
@keyframes leader { from{ transform:translateY(-.28em) scaleX(0) }
                    to  { transform:translateY(-.28em) scaleX(1) } }

/* ── 5 · FOLIO ROMANO Y REGLA DE APERTURA ──────────────────────────
   Devuelve la estructura de nueve capítulos del folleto impreso: es lo
   que impide que quince bloques se lean como quince bloques. */
.sec[data-ch]{ position:relative; }
.sec[data-ch] > .wrap{ position:relative; z-index:1; }

.ch__num{
  position:absolute; z-index:0;
  top:clamp(1rem,4vw,3rem);
  right:clamp(-.25rem,-1vw,0px);
  font:400 clamp(6rem,16vw,14rem)/.78 var(--f-display);
  letter-spacing:.04em;
  color:var(--brass); opacity:.07;
  pointer-events:none; user-select:none;
}
.sec--slate .ch__num{ color:var(--brass-lt); opacity:.10; }
.sec--bleed .ch__num{ color:var(--brass-lt); opacity:.16; z-index:2; }

/* en las secciones a sangre el ::after ya lo ocupa el degradado, así
   que ahí la regla la inyecta el JS como <i class="ch-rule"> */
.sec--paper[data-ch]::after,
.sec--linen[data-ch]::after,
.sec--slate[data-ch]::after{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:currentColor; opacity:.18;
  transform:scaleX(1); transform-origin:0 50%;
}
.ch-rule{
  position:absolute; inset:0 0 auto 0; height:1px; z-index:2;
  background:var(--brass-lt); opacity:.5;
  transform:scaleX(1); transform-origin:0 50%;
}

/* ── 6 · LA CONTRA EN LAS FIGURAS ──────────────────────────────────
   Las ~30 fotografías dejan de deslizarse hacia arriba: una contra del
   color EXACTO de su sección se retira y las descubre. El contenedor
   es el <picture> y no la <figure>, para no tapar el pie ni recortar
   la sombra de .plate img. */
.plate picture,
.duo__fig picture,
.trio__fig picture,
.room figure picture{ position:relative; display:block; }

.plate picture::after,
.duo__fig picture::after,
.trio__fig picture::after,
.room figure picture::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--shutter, var(--paper));
  transform:scaleY(0); transform-origin:50% 0;   /* base = retirada */
}

/* ── 7 · MANIFIESTO Y AMENIDADES ───────────────────────────────────
   El guion de latón se traza y la línea se despeja de izquierda a
   derecha, pero NUNCA en scrub reversible: se dispara una sola vez con
   IntersectionObserver y se queda. Un comprador vuelve arriba para
   releer un dato, no para ver deshacerse un efecto. */
.manifesto li::before,
.amen li::before{ transform:scaleX(1); transform-origin:0 50%; }
.js .manifesto li .ln,
.js .amen li .ln{ display:inline-block; }

/* ── 8 · RITMO ESTÁTICO DE .rooms Y EL ÍNDICE DE DISTANCIAS ────────
   subgrid alinea las BASES de las imágenes y no los fondos de los
   <article>: sin él, ES y PT desalinean las tres tarjetas porque su
   texto ocupa una línea más que el inglés. */
@media (min-width:900px){
  .rooms{ grid-template-rows:auto auto auto; align-items:end; }
  .room{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
  .room figure{ margin:0; align-self:end; }
  .room:nth-child(1) img{ aspect-ratio:3/4; }
  .room:nth-child(2) img{ aspect-ratio:5/7; }
  .room:nth-child(3) img{ aspect-ratio:2/3; }
}
@supports not (grid-template-rows: subgrid){
  @media (min-width:900px){
    .room{ display:block; }
    .room img{ aspect-ratio:3/4; }
  }
}
.rooms{ position:relative; }
.rooms::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:1px;
  background:var(--brass); opacity:.5;
  transform:scaleX(1); transform-origin:0 50%;
}
.dist li::after{ transform:translateY(-.28em) scaleX(1); transform-origin:0 50%; }

/* ── 9 · #facts: SOLO FILETES ──────────────────────────────────────
   En la página de los hechos se traza el filete, que no transporta
   información, y nada más. */
@media (min-width:760px){
  .price{ position:relative; }
  .price + .price{ border-left:0; padding-left:var(--sp-4); }
  .price + .price::before{
    content:""; position:absolute; inset:0 auto 0 0; width:1px;
    background:rgba(36,34,34,.12);
    transform:scaleY(1); transform-origin:50% 0;
  }
}
.table thead th{ position:relative; border-bottom-color:transparent; }
.table thead th::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:1px;
  background:rgba(36,34,34,.30);
  transform:scaleX(1); transform-origin:0 50%;
}
.stats{ position:relative; border-top-color:transparent; }
.stats::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:rgba(242,237,227,.20);
  transform:scaleX(1); transform-origin:0 50%;
}

/* GUARDA NORMATIVA — no tocar. Ningún dato se oculta ni un frame:
   nada de clip-path sobre .price__v, nada de translate sobre .stats b,
   ningún retardo escalonado en <tr>, y contador ascendente vetado a
   perpetuidad. La credibilidad depende de que aquí nada actúe. */
#facts .price__v, #facts .price__k, #facts .price__s,
#facts .table td, #facts .table th,
.stats b, .stats span, .facts__v, .sticky__txt b{
  opacity:1 !important;
  clip-path:none !important;
  animation:none !important;
}
#facts .table tbody tr{ transition:none !important; }

/* ══ LA DOBLE PUERTA ══════════════════════════════════════════════
   Fuera de aquí no existe ni un solo estado inicial oculto. Si se
   cuela uno, hay texto invisible permanente con reduced-motion o en
   navegadores sin scroll-driven animations. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* capítulo: regla de apertura y folio */
    .sec--paper[data-ch]::after,
    .sec--linen[data-ch]::after,
    .sec--slate[data-ch]::after,
    .ch-rule{
      transform:scaleX(0);
      animation:drawH linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 12%;
    }
    .ch__num{
      animation:folio linear both;
      animation-timeline:view(block);
      animation-range:cover 0% cover 40%;
    }

    /* figuras */
    .plate picture::after,
    .duo__fig picture::after,
    .trio__fig picture::after,
    .room figure picture::after{
      transform:scaleY(1);
      animation:shelve var(--ease-set) both;
      animation-timeline:view(block);
      animation-range:entry 18% cover 14%;
    }
    .plate picture::after{ animation-range:entry 24% cover 26%; }

    /* filetes */
    .rooms::after{
      transform:scaleX(0);
      animation:drawH linear both;
      animation-timeline:view(block);
      animation-range:entry 20% entry 55%;
    }
    .dist li::after{
      transform:translateY(-.28em) scaleX(0);
      animation:leader linear both;
      animation-timeline:view(block);
      animation-range:entry 12% entry 52%;
    }
    .price + .price::before{
      transform:scaleY(0);
      animation:drawV linear both;
      animation-timeline:view(block);
      animation-range:entry 10% entry 45%;
    }
    .table thead th::after,
    .stats::before{
      transform:scaleX(0);
      animation:drawH linear both;
      animation-timeline:view(block);
      animation-range:entry 12% entry 50%;
    }
  }
}

/* el latch del manifiesto y las amenidades es IntersectionObserver
   puro, así que funciona en todas partes; el estado inicial cuelga de
   html.js y por eso sin JS el texto sale entero */
@media (prefers-reduced-motion: no-preference){
  .js .manifesto li::before,
  .js .amen li::before{
    transform:scaleX(0);
    transition:transform 260ms var(--ease-rule) var(--d,0ms);
  }
  .js .manifesto li.is-read::before,
  .js .amen li.is-read::before{ transform:scaleX(1); }

  .js .manifesto li .ln,
  .js .amen li .ln{
    clip-path:inset(0 100% 0 0);
    transition:clip-path 420ms var(--ease-rule) calc(var(--d,0ms) + 70ms);
  }
  /* el sobrebarrido de -.12em evita que se corten acentos y cursivas */
  .js .manifesto li.is-read .ln,
  .js .amen li.is-read .ln{ clip-path:inset(0 -.12em 0 0); }
}

/* ── RENDIMIENTO ───────────────────────────────────────────────────
   backdrop-filter obliga al compositor a releer el fondo y aplicar una
   gaussiana de dos pasadas en cada frame en que ese fondo cambia. En
   móvil, con la nav a lo ancho y una tarjeta glass de 560px, eso solo
   ya se come buena parte del presupuesto de 16,6ms. */
@media (max-width:900px), (prefers-reduced-transparency: reduce){
  .nav.is-stuck, .glass--dark, .glass--light, .lb{
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .nav.is-stuck{ background:rgba(20,26,27,.95); }
  .glass--dark{ background:rgba(21,27,28,.92); }
  .glass--light{ background:rgba(233,226,213,.96); }
  .formcard{ background:rgba(236,230,219,.96); }
  .lb{ background:rgba(12,16,16,.94); }
}

/* las 38 teselas fuera de pantalla no gastan layout ni pintura */
.tile{ content-visibility:auto; contain-intrinsic-size:auto 320px; }

/* alto contraste de Windows: si por lo que sea una contra no llega a
   retirarse, no puede quedarse como caja opaca tapando una foto */
@media (forced-colors: active){
  .plate picture::after, .duo__fig picture::after,
  .trio__fig picture::after, .room figure picture::after{ display:none; }
  .js .manifesto li .ln, .js .amen li .ln{ clip-path:none !important; }
}

/* ═══ LA BALDA VACÍA — única escena anclada de la web ══════════════
   BASE (sin JS, sin soporte, con reduced-motion): la fotografía entera
   de la coronación, su frase y su pie. Ni carril, ni hueco, ni pérdida.
   ═══════════════════════════════════════════════════════════════════ */
.elev{ position:relative; margin-block:var(--sp-16); }
.elev__stage{ position:relative; display:grid; place-items:center;
              padding-inline:clamp(1.25rem,5vw,3rem); }
.elev__frame{
  position:relative; overflow:clip; margin:0;
  width:min(92vw,1080px); aspect-ratio:6/5;
  --cols:4; --rows:3; --ex:1; --ey:1;      /* los reescribe el JS */
  box-shadow:0 24px 60px rgba(12,16,16,.35);
}
.elev__plate, .elev__plate img{ display:block; width:100%; height:100%; }
/* recorte a la CORONACIÓN: es la zona casi frontal del render y la que
   está literalmente vacía. No se calca la fachada en tres cuartos. */
.elev__plate img{ object-fit:cover; object-position:50% 8%; }

.elev__line{
  margin-top:var(--sp-6); max-width:34ch; text-align:center;
  font:400 clamp(1.05rem,2vw,1.5rem)/1.35 var(--f-display);
  letter-spacing:.03em; color:var(--brass-lt);
}
.elev__cap{
  margin-top:var(--sp-3); text-align:center;
  font:600 var(--t-12)/1.4 var(--f-ui);
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(242,237,227,.55);
}

/* capas que solo existen si el JS ha construido la escena */
.elev__inset, .elev__mesh, .elev__cells{ display:none; }
.elev.is-built .elev__inset,
.elev.is-built .elev__mesh,
.elev.is-built .elev__cells{ display:block; }

/* la celda vacía, situada sin JS a partir de --ex/--ey */
.elev__inset{
  position:absolute; z-index:0; overflow:clip;
  left:calc(var(--ex) / var(--cols) * 100%);
  top: calc(var(--ey) / var(--rows) * 100%);
  width:calc(100% / var(--cols));
  height:calc(100% / var(--rows));
}
.elev__inset img{ width:100%; height:100%; object-fit:cover; }

.elev__mesh, .elev__cells{ position:absolute; inset:0; }
.elev__mesh{ z-index:3; }
.elev__cells{
  z-index:2; display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
}
.cell{ position:relative; }
/* la línea de balda va en un pseudo NO transformado: un box-shadow
   sobre .cell__sh se escalaría con él y no llegaría a verse nunca */
.cell::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:rgba(156,124,74,.55); z-index:1;
}
.cell__sh{
  position:absolute; inset:0; background:var(--linen);
  transform:scaleY(0); transform-origin:50% 0;      /* base = retirada */
}
.elev__mesh .rl{ opacity:.5; }

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .elev{
      height:220svh; margin-block:0;
      view-timeline-name:--elev; view-timeline-axis:block;
    }
    .elev__stage{
      position:sticky; top:0; height:100svh;
      align-content:center; overflow:clip;
      padding-top:var(--nav-h);          /* la nav fija ocupa la franja */
    }

    /* la retícula se traza: 0% → 20% */
    .elev__mesh .rl--v{
      transform:scaleY(0); animation:drawV var(--ease-rule) both;
      animation-timeline:--elev;
      animation-range:contain calc(var(--i)*2%) contain calc(11% + var(--i)*2%);
    }
    .elev__mesh .rl--h{
      transform:scaleX(0); animation:drawH var(--ease-rule) both;
      animation-timeline:--elev;
      animation-range:contain calc(var(--i)*2%) contain calc(11% + var(--i)*2%);
    }
    /* las celdas se llenan en orden de lectura: 22% → 68% */
    .cell__sh{
      transform:scaleY(1);
      animation:shelve var(--ease-set) both;
      animation-timeline:--elev;
      animation-range:contain calc(22% + var(--i)*3.4%)
                      contain calc(34% + var(--i)*3.4%);
    }
    /* la balda vacía se abre al final. Una celda vacía para siempre no
       es un concepto, es un bug percibido. */
    .cell--empty .cell__sh{ animation-range:contain 72% contain 84%; }
    /* los parteluces existen en la foto: la malla baja, no desaparece */
    .elev__mesh{
      animation:meshOut linear both;
      animation-timeline:--elev;
      animation-range:contain 74% contain 86%;
    }
    @keyframes meshOut{ from{ opacity:1 } to{ opacity:.3 } }
  }
  @media (max-width:700px){
    @supports (animation-timeline: view()){ .elev{ height:150svh; } }
  }
}

/* camino sin scroll-driven: mismo estado final, sin anclaje */
.elev.is-static .cell__sh{
  transform:scaleY(1);
  transition:transform var(--dur-set) var(--ease-set);
  transition-delay:calc(min(var(--i), 11) * 55ms);
}
.elev.is-static.is-in .cell__sh{ transform:scaleY(0); }
.elev.is-static.is-in .cell--empty .cell__sh{ transition-delay:1300ms; }

@media (prefers-reduced-motion: reduce){
  .elev.is-static .cell__sh{ transform:scaleY(0); transition:none; }
}
@media (forced-colors: active){
  .cell__sh, .elev__mesh{ display:none; }
}

/* aviso de independencia: el más pequeño de la página, pero legible.
   .52 sobre pizarra-2 da 4,74:1 — pasa AA */
.foot__indep{
  margin-top:var(--sp-4);
  font:400 11px/1.6 var(--f-ui);
  color:rgba(242,237,227,.52);
  max-width:104ch;
}

/* ═══ CTA TEMPRANO · captura básica ════════════════════════════════
   Sobre lino, que es color plano: aquí la superficie es SÓLIDA. El
   glass solo vive sobre fotografía. */
.cta-early__in{ display:grid; gap:var(--sp-12); align-items:start; }
@media (min-width:980px){
  .cta-early__in{ grid-template-columns:1fr 440px; gap:var(--sp-16); }
}
.cta-early__copy .lead{ margin-bottom:var(--sp-8); }
.cta__list--ink{ border-top-color:rgba(36,34,34,.18); }
.cta__list--ink li{ color:var(--ink-2); }
.cta__list--ink li::before{ background:var(--brass); }

.formcard--solid{
  background:var(--paper);
  border:1px solid rgba(36,34,34,.14);
  border-radius:3px;
  box-shadow:0 18px 44px rgba(36,34,34,.12);
  color:var(--ink);
}
.formcard--solid::before{ display:none; }

/* ═══ CTA FINAL · el asesor ════════════════════════════════════════ */
.cta__in--single{ grid-template-columns:1fr; }
@media (min-width:980px){
  .cta__in--single{ grid-template-columns:minmax(0,760px); justify-content:center; }
}
.cta__act{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-6);
  margin-top:var(--sp-8);
}
.cta__alt--flush{ margin-top:0; padding-top:0; border-top:0; }
.cta__fine{
  margin-top:var(--sp-6);
  font:400 var(--t-12)/1.55 var(--f-ui);
  color:rgba(242,237,227,.55);
}

/* ═══════════════════════════════════════════════════════════════════
   MATERIA — port a vanilla de cinco ideas de React Bits
   React Bits es un catálogo de componentes de React; aquí no hay
   React ni compilador, así que no se instala: se leen las ideas que
   aguantan esta marca y se reescriben a mano. Tres de las cinco no
   se mueven en absoluto, y la única reactiva la provoca la mano del
   visitante, no el scroll.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   1 · FIBRA — grano de papel y urdimbre de lino
   Portado de Noise/Dither. NO es un efecto: es superficie. Cero
   peticiones, cero JS, cero fotogramas, ~700 B. Idéntica con
   prefers-reduced-motion activo, así que NO lleva doble puerta: no
   hay absolutamente nada que apagar. Esa es la prueba de que no es
   una animación.
   Pegar al final de css/style.css.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* FIBRA (papel crema). Tres detalles deciden si funciona o si canta:
     · stitchTiles='stitch' cose la turbulencia por los bordes de la
       tesela. Sin él aparece una retícula de 168px visible en TODA la
       página: es el fallo clásico de este truco.
     · feColorMatrix saturate 0 — feTurbulence emite ruido RGB; sin
       desaturar, el crema se llena de confeti de color que se lee
       exactamente como un JPEG mal comprimido.
     · el alfa va HORNEADO en el opacity del <rect>, nunca en un
       opacity de CSS ni en un mix-blend-mode: así el compositor hace
       un source-over normal, no se crea capa ni contexto de
       apilamiento, y no chocamos con el veto sobre blend modes.
     En el data-URI, la almohadilla de url(#f) va escapada como %23 y
     el signo de 100% como %25, o el CSS corta la cadena. */
  --grain-fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='168' height='168' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E");

  /* TELA (lino). La anisotropía en X/Y de baseFrequency='0.42 0.86'
     produce literalmente urdimbre y trama: es el tejido de la tapa
     del folleto, no un ruido genérico. numOctaves 2 y tesela de 150. */
  --grain-weave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23w)' opacity='0.05'/%3E%3C/svg%3E");
}

/* OJO: hay que declarar `background-color`, NO el atajo `background`.
   El atajo resetea background-image a none y el grano no llegaría a
   pintarse nunca. Estas reglas van DESPUÉS de las líneas 187-189 y
   1290, así que ganan por orden de cascada sin editarlas.

   PROHIBIDO background-attachment:fixed: anula el composited scroll y
   obliga a repintar el viewport entero en cada frame en móvil, que es
   justo lo que esta hoja evita en todas partes. Así la tesela viaja
   con la sección y el compositor la cachea.

   El tamaño va en px CSS, no en dppx: en pantallas 2x/3x el grano se
   vuelve más suave en vez de más fino, que es lo correcto — la fibra
   del papel no mide un píxel físico. Tesela impar-ish (168, no 160)
   para evitar muaré con el escalado de DPR. Nunca background-repeat:round. */
body{
  background-color:var(--paper);
  background-image:var(--grain-fibre);
  background-size:168px 168px;
}
.sec--paper,
.formcard--solid{
  background-color:var(--paper);
  background-image:var(--grain-fibre);
  background-size:168px 168px;
}
.sec--linen{
  background-color:var(--linen);
  background-image:var(--grain-weave);
  background-size:150px 150px;
}

/* El grano baja medio punto el contraste percibido del filete de
   apertura de capítulo. Se compensa gratis. */
.sec--paper[data-ch]::after,
.sec--linen[data-ch]::after{ opacity:.22; }

/* ── PIZARRA: pendiente de validación ────────────────────────────
   En campo oscuro el grano deja de leerse como tela de tapa y empieza
   a leerse como ruido de sensor de móvil. Descomentar SOLO después de
   verlo en un OLED real; si hay la más mínima duda, se queda como
   está y la fibra vive solo en papel y lino.
.sec--slate{
  background-color:var(--slate);
  background-image:var(--grain-weave);
  background-size:150px 150px;
}
   ──────────────────────────────────────────────────────────────── */

/* Guardas. En impresión el grano solo ensucia el tóner; en alto
   contraste de Windows el fondo lo sustituye el sistema. */
@media print{
  body, .sec--paper, .sec--linen, .formcard--solid{ background-image:none; }
}
@media (forced-colors:active){
  body, .sec--paper, .sec--linen, .formcard--solid{ background-image:none; }
}
/* ═══════════════════════════════════════════════════════════════════
   2 · LÁMINA ENCOLADA
   Se conserva la premisa de Tilted Card / Glare Hover / Spotlight Card
   —la imagen es un objeto con espesor— y se tira lo que traen de
   serie: el seguimiento del cursor y la inclinación 3D.

   Diagnóstico verificable en el archivo:
     css/style.css:436  .plate img       box-shadow:0 24px 60px rgba(36,34,34,.20)
     css/style.css:451  .duo/.trio img   box-shadow:0 16px 40px rgba(20,25,25,.22)
     css/style.css:518  .room img        box-shadow:0 16px 40px rgba(20,25,25,.24)
   Un desenfoque de 60px a 24px de offset sitúa el objeto a unos 15 cm
   sobre la página: eso es la elevación 8 de Material Design, el
   vocabulario exacto del template SaaS del que el cliente dice querer
   escapar. Es, con bastante probabilidad, lo que su ojo está leyendo
   como «no cumple estándares».

   Una lámina encolada no flota: está pegada. Y pinta MENOS área que
   un blur de 60px, así que en gama media es más barata, no más cara.
   Cero runtime, cero CLS, cero fotogramas.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --plate-ink:
    0 0 0 1px rgba(36,34,34,.10),        /* canto del papel fotográfico: spread 1, blur 0 */
    0 1px 1px rgba(36,34,34,.16),        /* contacto: la lámina toca la página          */
    0 6px 14px -6px rgba(36,34,34,.18);  /* ambiente corto, radio negativo: no se derrama */

  /* sobre pizarra una sombra al 16% sencillamente NO EXISTE: hay que
     subir el alfa o el canto desaparece y la foto vuelve a flotar */
  --plate-slate:
    0 0 0 1px rgba(10,14,14,.45),
    0 1px 2px rgba(10,14,14,.42),
    0 8px 18px -8px rgba(10,14,14,.30);
}

.plate img,
.duo__fig img,
.trio__fig img,
.room img{ box-shadow:var(--plate-ink); }

.sec--slate .plate img,
.sec--slate .duo__fig img,
.sec--slate .trio__fig img,
.sec--slate .room img{ box-shadow:var(--plate-slate); }

/* NO SE TOCA .elev__frame (css/style.css:1167, 0 24px 60px rgba(12,16,16,.35)).
   Eso no es una lámina, es una ESCENA: la única anclada de la web, y
   su elevación es lo que la separa de la página. Dejarla como está es
   parte del efecto, no un descuido.

   NADA DE ROTACIONES ni de transform 3D sobre estas imágenes: además
   de la doctrina, cualquier transform crea contexto propio y rompería
   el subgrid de .room (css/style.css:990), que existe precisamente
   porque en ES y PT el texto ocupa una línea más que en inglés. */

/* ── OPCIONAL · passe-partout, solo si dirección de arte lo pide ──
   El cartón de montaje alrededor de la lámina principal. Solo en
   .plate: en .duo/.trio/.room cambia el modelo de caja de un
   aspect-ratio 3/4 con object-fit:cover y toca la alineación por
   subgrid, por un detalle que a ese tamaño nadie ve.
.plate img{
  border:10px solid var(--paper-2);
  outline:1px solid rgba(156,124,74,.34);
  outline-offset:-10px;
}
   ──────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════
   3 · LA CARTELA (Star Border / Glare Hover, portados)
   Aquí no se añade un efecto: se cierra una contradicción viva del
   código y se arregla un defecto real de venta.

   css/style.css:649  .tile:hover img{ transform:scale(1.045) }
   Es la ÚNICA fotografía que escala en toda la web —regla 1 de la
   doctrina— y la propia hoja ya la desactiva en el bloque de
   reduced-motion (css/style.css:857). Es decir: el archivo sabe desde
   el primer día que ese gesto está mal.
   ═══════════════════════════════════════════════════════════════════ */

/* Neutralización por cascada, para poder pegar sin editar nada.
   Lo limpio es BORRAR las líneas 649 y 857 y el transition de la 633;
   mientras tanto, estas dos hacen el trabajo. */
.tile img{ transition:none; }
.tile:hover img,
.tile:focus-visible img{ transform:none; }

/* La primitiva de la casa, aplicada por primera vez donde la provoca
   la mano del visitante y no el scroll. transform sobre un pseudo de
   1px es compositable: cero repintado de la imagen y cero
   re-rasterizado del recorte 4/5 en 38 teselas con content-visibility.
   z-index:2 es obligatorio o el filete queda por debajo del scrim de
   .tile::after. */
.tile::before{
  content:""; position:absolute; inset:auto 0 0 0;
  height:1px; z-index:2; pointer-events:none;
  background:var(--brass-lt);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 220ms var(--ease-rule);
}
.tile:hover::before,
.tile:focus-visible::before{ transform:scaleX(1); }

/* La cartela arranca 60ms DESPUÉS del filete y su desplazamiento baja
   de 6px a 4px: dos movimientos simultáneos se leen como dos gestos;
   escalonados, como uno solo. Es lo que exige la doctrina. */
.tile__cap{
  transform:translateY(4px);
  transition:opacity 300ms var(--ease) 60ms,
             transform 300ms var(--ease) 60ms;
}

/* ── EL REGALO, y la razón real para hacerlo ahora ────────────────
   Hoy .tile__cap vive a opacity:0 y solo se revela en :hover
   (css/style.css:641-650). En táctil —de donde llega la mayoría del
   tráfico de esta landing— hay 38 fotografías SIN NINGÚN PIE VISIBLE:
   el comprador está mirando fotos sin saber qué son. Eso no es un
   efecto pendiente, es un defecto de accesibilidad y de conversión.
   Un hover que arregla la versión sin hover se aprueba solo. */
@media (hover:none){
  .tile::after{ opacity:1; }                    /* el degradado sostiene el contraste */
  .tile__cap{ opacity:1; transform:none; }
  .tile::before{ transform:scaleX(1); }
}

/* reduced-motion: la regla global *,*::before{transition-duration:.001ms}
   ya vigente (css/style.css:846) hace el filete instantáneo. Nada de
   lo que se LEE depende del movimiento: el pie existe como texto y
   como aria-label del <button>. */
/* ═══════════════════════════════════════════════════════════════════
   4 · EL PLIEGO QUE PASA — la mitad CSS
   Se acompaña del bloque JS «lightbox: decode antes del swap». Sin
   ese JS esta regla no hace nada: la clase .is-fresh la pone él.

   DELIBERADAMENTE SIN document.startViewTransition. Un
   view-transition-name sobre el <img> no evita la instantánea de raíz
   (habría que neutralizar ::view-transition-old/new(root) o se
   disuelve la página entera), rasteriza el viewport dos veces y
   congela la interacción durante la transición, justo en la clase de
   dispositivo que estamos protegiendo. Una opacidad sobre el propio
   <img> da el mismo resultado por una décima parte del coste y
   funciona en todos los navegadores.
   ═══════════════════════════════════════════════════════════════════ */

@keyframes plateIn{ from{ opacity:0 } to{ opacity:1 } }

/* El estado en reposo es el estado final: opacity 1. Si esta regla no
   se parsea —reduced-motion— la lámina cambia de golpe, pero SIN el
   fotograma en blanco, que es donde está el 80% de la mejora. */
@media (prefers-reduced-motion:no-preference){
  #lbImg.is-fresh{ animation:plateIn 180ms var(--ease-set) both; }
}

/* mientras se decodifica la siguiente lámina, las flechas dicen que
   están trabajando sin mover nada: solo el cursor */
.lb[aria-busy="true"] .lb__nav{ cursor:progress; }
/* ═══════════════════════════════════════════════════════════════════
   5 · MARCA DE IMPRESOR (Circular Text, portado sin el motor)
   El componente original rota el anillo en bucle. Aquí se queda
   quieto, porque un sello impreso no da vueltas: está estampado. Esa
   es toda la portación — se conserva el texto sobre arco y se elimina
   el motor.
   El SVG lo inyecta el bloque JS «colofón». Una sola instancia.
   ═══════════════════════════════════════════════════════════════════ */

.colophon{
  position:relative;
  width:104px; height:104px;
  justify-self:center;
  color:var(--brass-lt);      /* el SVG pinta con currentColor: var() en
                                 atributos de presentación no es fiable
                                 en Safari, así que el color entra por CSS */
  pointer-events:none;
  user-select:none;
}
.colophon svg{ display:block; width:100%; height:100%; }

/* el símbolo de marca que la agencia YA tiene. Esto es lo que separa
   una marca de impresor de una pegatina: el sello no inventa
   ornamento, monta la marca existente. */
.colophon__mark{
  position:absolute; left:50%; top:50%;
  width:38px; height:auto;
  transform:translate(-50%,-50%);
  opacity:.88;
}

/* .foot__top pasa de `auto 1fr` a `auto 1fr auto` (css/style.css:781):
   sin la tercera columna el colofón cae a una fila nueva. */
@media (min-width:760px){
  .foot__top{ grid-template-columns:auto 1fr auto; }
  .colophon{ justify-self:end; }
}

@media print{ .colophon{ display:none; } }
@media (forced-colors:active){ .colophon{ color:CanvasText; } }

/* Acción secundaria sobre foto: contorno de latón, no relleno. Un solo
   CTA primario por pantalla; este acompaña, no compite. */
.btn--ghost{
  background:transparent;
  color:var(--brass-lt);
  border-color:rgba(192,162,118,.55);
}
.btn--ghost:hover{
  background:rgba(192,162,118,.12);
  border-color:var(--brass-lt);
  color:#DCC091;
}
.btn--ghost:active{ background:rgba(192,162,118,.18); }

/* Botón de solo icono para la barra fija. 44×44 reales, que es el
   mínimo táctil: el SVG mide 19px pero el área de toque no. */
.sticky__act{ display:flex; align-items:center; gap:var(--sp-2); }
.btn--icon{
  width:44px; min-width:44px; height:44px; min-height:44px;
  padding:0; flex-shrink:0;
  background:transparent;
  color:var(--brass-lt);
  border-color:rgba(192,162,118,.5);
}
.btn--icon:hover{
  background:rgba(192,162,118,.14);
  border-color:var(--brass-lt);
  color:#DCC091;
}