/* ==========================================================================
   MACORTÉS GALLERY — v2 "Papel y Volcán"
   site-v2/styles.css — Kit (Frontend). Static, no build step.
   Table of contents:
     1. Tokens          6. Salas index band   11. Dock              16. Motion/reveal
     2. Reset/base      7. Sala band          12. Dialog (request)  17. Reduced motion
     3. Type            8. Room head/grid     13. Phrase interstitials
     4. Greca            9. Card              14. Artista/Como-comprar
     5. Header/Nav      10. Caricaturas dark  15. Contacto/Footer
   ========================================================================== */

/* ===== 1. TOKENS ===== */
:root{
  /* surfaces */
  --paper:      #F7F3EA;
  --paper-2:    #EFE9DC;
  --paper-3:    #E4DCCB;
  --paper-line: #D8CFBB;
  --paper-edge: #C6BAA1;

  --navy-900:   #0C1E33;
  --navy-800:   #132F4E;
  --navy-700:   #213E5A;

  /* brand + ink */
  --red:        #EB2E31;
  --navy:       #132F4E;
  --cyan:       #20B1DA;

  --gold:       #F3C364;
  --orange:     #FBAA32;
  --cyan-light: #41C2E2;
  --cyan-deep:  #0093B5;

  --red-deep:   #B81F24;
  --ink:        #132F4E;
  --ink-2:      #3B5570;
  --ink-3:      #5A6B7D;
  --ink-on-dark:#F7F3EA;

  /* sala territories */
  --sala-1: #EB2E31;  --sala-1-ink: #FFFFFF;
  --sala-2: #20B1DA;  --sala-2-ink: #132F4E;
  --sala-3: #F3C364;  --sala-3-ink: #132F4E;
  --sala-4: #132F4E;  --sala-4-ink: #F7F3EA;

  --sala: var(--red);
  --sala-ink: #FFFFFF;
  --sala-wash: color-mix(in oklab, var(--sala) 8%,  var(--paper));
  --sala-line: color-mix(in oklab, var(--sala) 45%, var(--paper-line));

  /* semantic + system */
  --ok:      #1E8A5F;
  --warn:    #B8760F;
  --danger:  #C42026;

  --line:        rgba(19,47,78,.12);
  --line-strong: rgba(19,47,78,.24);
  --backdrop:    rgba(12,30,51,.72);

  --shadow-card:  0 20px 40px -26px rgba(12,30,51,.45);
  --shadow-panel: 0 24px 48px -28px rgba(12,30,51,.35);
  --shadow-plaque:0 24px 60px -24px rgba(12,30,51,.55);
  --shadow-modal: 0 44px 90px -30px rgba(12,30,51,.60);
  --shadow-dock:  0 18px 44px -18px rgba(12,30,51,.55);

  /* type scale */
  --fs-hero-lema: clamp(1.15rem, 0.95rem + 0.85vw, 1.65rem);
  --fs-sala:      clamp(2.00rem, 1.10rem + 4.40vw, 4.50rem);
  --fs-room:      clamp(1.50rem, 0.95rem + 2.10vw, 2.75rem);
  --fs-sub:       clamp(1.15rem, 1.00rem + 0.65vw, 1.50rem);
  --fs-phrase:    clamp(1.45rem, 0.95rem + 2.30vw, 3.00rem);
  --fs-card:      clamp(1.00rem, 0.95rem + 0.30vw, 1.20rem);
  --fs-body:      1.0625rem;
  --fs-sm:        0.9375rem;
  --fs-label:     0.7500rem;
  --fs-micro:     0.6875rem;

  /* spacing */
  --gutter:   20px;
  --wrap:     1320px;
  --sec-pad:  clamp(3.25rem, 6vw, 6.5rem);
  --sala-pad: clamp(2.75rem, 4vw, 4.75rem);
  --grid-gap: clamp(1.00rem, 0.55rem + 1.4vw, 2.25rem);

  /* radii */
  --r-xs: 1px;  --r-sm: 2px;  --r: 3px;  --r-lg: 14px;  --r-pill: 999px;

  /* motion */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.55,.06,.68,.19);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);

  /* fonts */
  --font-display: 'Fraunces','Georgia','Times New Roman',serif;
  --font-ui:      'Epilogue','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-script:  'Yellowtail','Brush Script MT',cursive;

  /* the greca — the site's one ornament (§3) */
  --greca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Crect width='56' height='14' fill='%23F7F3EA'/%3E%3Crect x='0' y='0' width='14' height='14' fill='%23132F4E'/%3E%3Cpath d='M14 14a7 7 0 0 1 14 0z' fill='%23EB2E31'/%3E%3Cpath d='M35 0l7 7-7 7-7-7z' fill='%2320B1DA'/%3E%3Ccircle cx='49' cy='7' r='4' fill='%23F3C364'/%3E%3Crect x='0' y='12' width='56' height='2' fill='%23132F4E'/%3E%3C/svg%3E");
}
@media (min-width:760px){  :root{ --gutter: 40px; } }
@media (min-width:1200px){ :root{ --gutter: 64px; } }

/* ===== 2. RESET / BASE ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-ui); font-size:var(--fs-body); line-height:1.7;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3{ margin:0; }
.wrap{ width:min(100% - var(--gutter)*2, var(--wrap)); margin-inline:auto; }

.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;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000;
  background:var(--navy-800); color:var(--paper); padding:12px 18px;
  border-radius:var(--r-sm); font:600 var(--fs-label)/1 var(--font-ui);
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:1px; }
[data-surface="dark"] :focus-visible,
.dock:focus-visible,
#pedido :focus-visible{ outline-color:var(--gold); }

/* ===== 3. TYPE ===== */
h1,h2,h3,.display{
  font-family:var(--font-display); font-optical-sizing:auto;
  font-variation-settings:'SOFT' 40,'WONK' 1; font-weight:700; color:var(--ink);
}
.eyebrow{
  font:600 var(--fs-micro)/1 var(--font-ui); text-transform:uppercase;
  letter-spacing:.22em; color:var(--ink-3); white-space:normal;
}
.en-label{
  font:600 var(--fs-label)/1.3 var(--font-ui); text-transform:uppercase;
  letter-spacing:.18em; color:var(--ink-3);
}
.meta{ font:400 .82rem/1.55 var(--font-ui); color:var(--ink-3); }
.price{ font:600 .95rem/1 var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink); }
.price small{ font-weight:400; color:var(--ink-3); margin-inline-start:.35em; }
.rule-2{
  height:3px; width:180px;
  background:linear-gradient(90deg, var(--red-deep) 0 50%, var(--navy) 50% 100%);
}
.heading-safe{
  overflow-wrap:anywhere; hyphens:auto; text-wrap:balance;
}

/* ===== 4. GRECA ===== */
.greca{ height:14px; width:100%; background-image:var(--greca); background-repeat:repeat-x; background-size:auto 14px; }
.greca--sm{ height:12px; background-size:auto 12px; }

/* ===== 5. HEADER / NAV ===== */
.hdr{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:200; height:84px;
  transition:height .22s var(--ease), background-color .22s var(--ease), border-color .22s var(--ease);
  background:transparent; border-bottom:1px solid transparent;
}
.hdr.is-stuck{ height:64px; background:var(--paper); border-bottom-color:var(--paper-line); }
.hdr__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
/* Header logo (client correction 2026-08-26): white script wordmark directly over the
   hero — no cream plaque; the colour mark takes over once the header goes paper. */
.hdr__logo{ display:inline-flex; align-items:center; }
.hdr .hdr__logo-white{ display:block; height:30px; width:auto;
  filter:drop-shadow(0 1px 6px rgba(11,20,32,.35)); }
/* Colour lockup is wide (270x162) — at 36px tall it read tiny once stuck
   (client correction 2026-08-26); 54px fills the 64px stuck header. */
/* regenerated from Macortes-Logo-Color.pdf with a tight viewBox — the old asset's
   padded page made the mark render tiny however tall the img was (correction #3) */
.hdr .hdr__logo-color{ display:none; height:40px; width:auto; }
.hdr.is-stuck .hdr__logo-white{ display:none; }
.hdr.is-stuck .hdr__logo-color{ display:block; }
/* the mobile menu sheet reuses .hdr__logo on a paper ground — keep its colour logo */
.menu-sheet .hdr__logo img{ height:40px; width:auto; }

.hdr__center{ display:none; }
@media (min-width:1080px){
  .hdr__center{ display:flex; align-items:center; gap:clamp(20px,2.6vw,40px); }
}
.hdr__sala{ position:relative; }
.hdr__sala-trigger{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 2px; min-height:44px; }
.hdr__sala-num{ font:700 .70rem/1 var(--font-display); letter-spacing:.06em; color:var(--sala-hue, var(--red)); }
.hdr__sala-word{ font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; color:var(--ink-on-dark); transition:color .22s var(--ease); position:relative; }
.hdr.is-stuck .hdr__sala-word{ color:var(--ink); }
.hdr__sala-word::after{
  content:''; position:absolute; left:0; bottom:-6px; height:3px; width:100%;
  background:var(--sala-hue, var(--red)); transform-origin:left; transform:scaleX(0);
  transition:transform .28s var(--ease-out);
}
.hdr__sala.is-current .hdr__sala-word::after{ transform:scaleX(1); }
.hdr__sala[data-sala="I"]  { --sala-hue: var(--red); }
.hdr__sala[data-sala="II"] { --sala-hue: var(--cyan-deep); }
.hdr__sala[data-sala="III"]{ --sala-hue: var(--warn); }
.hdr__sala[data-sala="IV"] { --sala-hue: var(--navy-700); }
.hdr.is-stuck .hdr__sala[data-sala="IV"]{ --sala-hue: var(--navy); }

.mega{
  position:absolute; inset-inline:0; top:100%; background:var(--paper);
  border-block-end:3px solid var(--sala-hue, var(--sala));
  box-shadow:var(--shadow-panel); padding:28px 0 32px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s;
}
.hdr__sala.is-open .mega{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.mega__grid{ display:flex; gap:clamp(16px,2vw,32px); flex-wrap:wrap; }
.mega__item{ display:flex; align-items:center; gap:14px; min-width:220px; flex:1 1 260px; padding:8px; border-radius:var(--r); }
.mega__item:hover, .mega__item:focus-visible{ background:var(--sala-wash); }
.mega__thumb{ width:72px; height:72px; border-radius:var(--r-xs); overflow:hidden; flex:none; background:var(--paper-2); }
.mega__thumb img{ width:100%; height:100%; object-fit:cover; }
.mega__text{ min-width:0; }
.mega__bullet{ display:inline-block; width:6px; height:6px; background:var(--sala); margin-inline-end:8px; vertical-align:middle; }
.mega__es{ font:600 1.05rem/1.25 var(--font-display); color:var(--ink); }
.mega__en{ display:block; font:500 .72rem/1.4 var(--font-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-block-start:2px; }
.mega__count{ margin-inline-start:auto; font:500 .8rem/1 var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); flex:none; }

.hdr__right{ display:flex; align-items:center; gap:14px; }
.lang-toggle{ position:relative; display:flex; height:44px; align-items:center; padding-inline:8px;
  /* navy scrim pill: cream-on-transparent is invisible where the hero photo is light —
     same scrim language as the hero's navy wedge; cleared in the stuck (paper) state */
  background:rgba(19,47,78,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-radius:999px; transition:background-color .22s var(--ease);
}
.hdr.is-stuck .lang-toggle{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.lang-toggle button{
  position:relative; z-index:1; padding:10px 10px; min-height:44px; min-width:36px;
  font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-on-dark); opacity:.78; transition:opacity .2s var(--ease), color .22s var(--ease);
}
.hdr.is-stuck .lang-toggle button{ color:var(--ink); opacity:.62; }
.hdr.is-stuck .lang-toggle button[aria-pressed="true"]{ opacity:1; }
.lang-toggle button[aria-pressed="true"]{ opacity:1; }
.lang-toggle__rule{
  position:absolute; bottom:6px; height:2px; width:20px; background:var(--red);
  transition:transform .22s var(--ease); left:10px; transform:translateX(0);
}
.lang-toggle[data-active="en"] .lang-toggle__rule{ transform:translateX(38px); }

.burger{ display:flex; width:44px; height:44px; align-items:center; justify-content:center;
  background:rgba(19,47,78,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border-radius:999px; transition:background-color .22s var(--ease);
}
.hdr.is-stuck .burger{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (min-width:1080px){ .burger{ display:none; } }
.burger span{ position:relative; width:22px; height:2px; background:var(--ink-on-dark); transition:background .22s var(--ease); }
.hdr.is-stuck .burger span{ background:var(--ink); }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:22px; height:2px; background:currentColor; }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }

/* menu sheet */
.menu-sheet{
  position:fixed; inset:0; z-index:300; background:var(--paper); overflow-y:auto;
  clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .38s var(--ease-out), visibility 0s linear .38s;
}
.menu-sheet.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .38s var(--ease-out); }
.menu-sheet__top{ display:flex; align-items:center; justify-content:space-between; padding-block:20px; }
.menu-sheet__close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.menu-sala{ border-bottom:1px solid var(--paper-line); }
.menu-sala__head{ width:100%; display:flex; align-items:center; gap:16px; padding-block:16px; text-align:left; }
.menu-sala__chip{ width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center;
  font:700 1rem var(--font-display); background:var(--sala); color:var(--sala-ink); flex:none; }
.menu-sala__word{ font:700 clamp(1.6rem,1.1rem + 2.6vw,2.4rem)/1.05 var(--font-display); color:var(--ink); flex:1; }
.menu-sala__chevron{ transition:transform .22s var(--ease); flex:none; }
.menu-sala.is-open .menu-sala__chevron{ transform:rotate(180deg); }
.menu-sala__list{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s var(--ease); overflow:hidden; }
.menu-sala.is-open .menu-sala__list{ grid-template-rows:1fr; }
.menu-sala__list-inner{ min-height:0; }
.menu-sala__list a{ display:flex; align-items:center; min-height:48px; font:500 1rem var(--font-ui); color:var(--ink-2);
  border-top:1px solid var(--paper-line); }
.menu-sheet__section{ padding-block:18px; border-bottom:1px solid var(--paper-line); }
.menu-sheet__section a{ display:block; min-height:44px; line-height:44px; font:600 .95rem var(--font-ui); color:var(--ink); }
.menu-sheet .socials{ padding-block:18px; }

/* ===== 6. HERO ===== */
.hero{
  position:relative; min-height:100svh; overflow:hidden; background:var(--paper);
  display:grid; align-items:center; isolation:isolate;
}
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: var(--hero-focus, 50% 22%); z-index:0;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(19,47,78,.90) 0%, rgba(19,47,78,.72) 34%, rgba(19,47,78,.16) 62%, rgba(19,47,78,0) 84%);
}
.hero__seat{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(12,30,51,.55) 100%); }
.hero > .greca{ position:absolute; inset-inline:0; bottom:0; z-index:4; }
.hero__body{ position:relative; z-index:5; padding-block:120px 140px; }
@media (max-width:899px){
  .hero{ align-items:end; --hero-focus: 50% 38%; }
  .hero__scrim{ background:linear-gradient(180deg, rgba(19,47,78,.30) 0%, rgba(19,47,78,.62) 46%, rgba(19,47,78,.90) 100%); }
  .hero__body{ padding-block:96px clamp(96px,18vh,160px); }
}
@media (min-width:900px) and (max-width:1023px){ .hero{ --hero-focus: 50% 30%; } }
@media (min-width:1024px){ .hero{ --hero-focus: 50% 22%; } }

.hero__script{
  font-family:var(--font-script); font-weight:400; color:var(--gold);
  font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem); margin-block-end:-0.34em; opacity:0; transform:translateY(16px);
}
.hero__plaque{
  display:inline-block; background:var(--paper); border-radius:var(--r-sm);
  padding:clamp(18px,2.2vw,30px) clamp(22px,2.8vw,38px) clamp(22px,2.6vw,34px);
  border-bottom:4px solid var(--red); box-shadow:var(--shadow-plaque);
  opacity:0; transform:translateY(24px);
}
.hero__plaque img{ display:block; width:clamp(190px,24vw,320px); height:auto; }
.hero__role{
  font:600 var(--fs-label)/1.5 var(--font-ui); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(247,243,234,.92); margin-block-start:22px; opacity:0;
}
.hero__lema{
  font:italic 400 var(--fs-hero-lema)/1.34 var(--font-display); color:var(--ink-on-dark);
  max-width:26ch; margin-block-start:18px; opacity:0;
}
.hero__lema strong{ font-style:normal; font-weight:700; color:var(--gold); }
.hero__ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-block-start:30px; opacity:0; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase;
  padding:17px 30px; border-radius:var(--r-sm); transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn--primary{ background:var(--red); color:#fff; }
.btn--primary:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn--ghost{ border:1.5px solid rgba(247,243,234,.75); color:var(--ink-on-dark); background:transparent; }
.btn--ghost:hover{ background:var(--paper); color:var(--navy); border-color:var(--paper); }

.hero__rail{
  display:none; position:absolute; left:22px; bottom:60px; writing-mode:vertical-rl; transform:rotate(180deg);
  font:500 var(--fs-micro)/1 var(--font-ui); letter-spacing:.3em; color:rgba(247,243,234,.7); z-index:5;
}
@media (min-width:1200px){ .hero__rail{ display:block; } }
.hero__cue{ position:absolute; left:50%; bottom:44px; transform:translateX(-50%); z-index:5; width:1px; height:46px; background:rgba(247,243,234,.4); overflow:hidden; }
.hero__cue::after{ content:''; position:absolute; left:0; top:-14px; width:1px; height:14px; background:var(--gold); animation:cue 2.2s ease-in-out infinite; }
@keyframes cue{ 0%{ top:-14px; } 100%{ top:46px; } }

.hero__body.is-in .hero__script,
.hero__body.is-in .hero__plaque,
.hero__body.is-in .hero__role,
.hero__body.is-in .hero__lema,
.hero__body.is-in .hero__ctas{ opacity:1; transform:none; transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ===== SALAS INDEX BAND (§5.7) ===== */
.salas-index{ background:var(--paper); padding-block:clamp(3rem,5vw,5rem); }
.salas-index__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--grid-gap); }
@media (max-width:900px){ .salas-index__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .salas-index__grid{ grid-template-columns:1fr; } }
.salas-index__tile{ display:block; padding-block-end:20px; }
.salas-index__chip{
  width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center;
  font:700 1.35rem var(--font-display); transition:transform .26s var(--ease-pop);
}
.salas-index__tile:hover .salas-index__chip, .salas-index__tile:focus-visible .salas-index__chip{ transform:rotate(-3deg); }
.salas-index__word{ font:700 var(--fs-sub)/1.15 var(--font-display); color:var(--ink); margin-block-start:16px; }
.salas-index__en{ display:block; font:500 var(--fs-label)/1.4 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-block-start:4px; }
.salas-index__rooms{ font:400 .84rem/1.7 var(--font-ui); color:var(--ink-2); margin-block-start:14px; }
.salas-index__rooms span{ display:block; }
.salas-index__rule{ height:1px; background:var(--paper-line); margin-block-start:18px; position:relative; }
.salas-index__rule::after{ content:''; position:absolute; inset:0; height:3px; top:-1px; background:var(--sala-tile); transform-origin:left; transform:scaleX(0); transition:transform .3s var(--ease); }
.salas-index__tile:hover .salas-index__rule::after, .salas-index__tile:focus-visible .salas-index__rule::after{ transform:scaleX(1); }
.salas-index__tile:hover, .salas-index__tile:focus-visible{ transform:translateY(-3px); transition:transform .22s var(--ease); }

/* ===== 7. SALA BAND (§5.2) ===== */
.sala-band{
  background:var(--sala); position:relative; padding-block:var(--sala-pad); scroll-margin-top:84px;
}
.sala-band > .greca{ position:absolute; inset-inline:0; top:0; }
.sala-band__grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px); align-items:start; }
@media (max-width:700px){ .sala-band__grid{ grid-template-columns:1fr; } }
.sala-band__num{
  font:900 clamp(3.5rem,2rem + 5.4vw,7rem)/.8 var(--font-display); color:var(--sala-ink); opacity:.92;
  font-variation-settings:'SOFT' 20,'WONK' 0; max-width:12ch;
}
.sala-band__eyebrow{ font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.24em; text-transform:uppercase; color:var(--sala-ink); opacity:.72; }
.sala-band__word{ font:700 var(--fs-sala)/1.02 var(--font-display); letter-spacing:-.01em; color:var(--sala-ink);
  margin-block-start:10px; overflow-wrap:anywhere; hyphens:auto; text-wrap:balance; max-width:12ch; }
.sala-band__en{ display:block; font:500 clamp(.78rem,.7rem + .3vw,1rem)/1.4 var(--font-ui); letter-spacing:.18em; text-transform:uppercase;
  color:var(--sala-ink); opacity:.70; margin-block-start:8px; }
.sala-band__intro{ font:italic 400 var(--fs-sub)/1.4 var(--font-display); color:var(--sala-ink); opacity:.88; max-width:46ch; margin-block-start:20px; }
.sala-band__chips{ display:flex; flex-wrap:wrap; gap:10px; margin-block-start:24px; }
.room-chip{
  background:color-mix(in oklab, var(--sala-ink) 12%, transparent);
  border:1px solid color-mix(in oklab, var(--sala-ink) 34%, transparent); color:var(--sala-ink);
  font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.1em; padding:11px 16px;
  border-radius:var(--r-pill); min-height:40px; display:inline-flex; align-items:center;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.room-chip:hover{ background:var(--sala-ink); color:var(--sala); }

/* ===== 8. ROOM HEAD + GRID (§5.3, §5.5) ===== */
.room{ padding-block-start:var(--sec-pad); scroll-margin-top:84px; }
.room:last-of-type{ padding-block-end:var(--sec-pad); }
.room--odd{ background:var(--paper); }
.room--even{ background:var(--paper-2); }
.room__head{ padding-block-end:22px; }
.room__key{ height:3px; width:48px; background:var(--sala); transform-origin:left; transform:scaleX(0); transition:transform .52s var(--ease-out); }
.room__key.in{ transform:scaleX(1); }
.room__title{ font:700 var(--fs-room)/1.06 var(--font-display); color:var(--ink); margin-block-start:16px;
  overflow-wrap:anywhere; hyphens:auto; text-wrap:balance; max-width:18ch; }
.room__title-en{ font:600 var(--fs-label)/1.4 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin-block-start:8px; }
.room__rule{ height:1px; background:var(--paper-line); width:100%; margin-block-start:20px; }
.room__meta-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-block-start:14px; flex-wrap:wrap; }
.room__desc{ font:400 .82rem/1.55 var(--font-ui); color:var(--ink-3); }
.room__count{ font:500 .82rem/1 var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap; }
/* breathing room before the next sala separator (client correction round 5) */
.room__note{ margin-block-start:24px; margin-block-end:clamp(3rem, 7vh, 5rem); font-style:italic; }
.room__subhead{ display:flex; align-items:center; gap:12px; margin-block:32px 18px; }
.room__subhead .eyebrow{ border-inline-start:3px solid var(--cyan); padding-inline-start:10px; }
.room__subhead--him .eyebrow{ border-inline-start-color:var(--navy); }
.room__subhead-count{ font:500 .8rem var(--font-ui); color:var(--ink-3); font-variant-numeric:tabular-nums; }

.grid{ display:grid; gap:var(--grid-gap); margin-block-start:8px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-2c{ grid-template-columns:repeat(2,1fr); max-width:860px; margin-inline:auto; }
.grid-2wide{ grid-template-columns:repeat(2,1fr); }
.grid-2up{ grid-template-columns:repeat(2,1fr); max-width:940px; margin-inline:auto; }
@media (max-width:1399px){ .grid-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:1099px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:859px){ .grid-2wide{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:619px){
  .grid-4,.grid-3,.grid-2c,.grid-2wide{ grid-template-columns:repeat(2,1fr); }
  .grid-2up{ grid-template-columns:1fr; }
}
@media (max-width:479px){
  .grid-4:not(.keep-2),.grid-3:not(.keep-2){ grid-template-columns:1fr; }
}
.keep-2{ grid-template-columns:repeat(2,1fr) !important; }
@media (min-width:1400px){ .keep-2.grid-4{ grid-template-columns:repeat(4,1fr) !important; } }
@media (min-width:860px) and (max-width:1399px){ .keep-2.grid-4{ grid-template-columns:repeat(3,1fr) !important; } }

.pinturas-grid{ grid-template-columns:repeat(3,1fr); }
.pinturas-grid .card--feature{ grid-column:span 2; grid-row:span 2; }
@media (max-width:1099px){ .pinturas-grid{ grid-template-columns:repeat(2,1fr); } .pinturas-grid .card--feature{ grid-column:span 2; grid-row:auto; } }
@media (max-width:619px){ .pinturas-grid{ grid-template-columns:1fr; } .pinturas-grid .card--feature{ grid-column:auto; } }

.salon-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1099px){ .salon-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:619px){ .salon-grid{ grid-template-columns:1fr; } }
@media (min-width:1100px){
  .salon-grid .card:nth-child(3){ margin-block-start:2.5rem; }
  .salon-grid .card:nth-child(5){ margin-block-start:1.25rem; }
}
.card--wide-feature{ grid-column:1 / -1; }

/* ===== 9. CARD ===== */
.card{ position:relative; display:flex; flex-direction:column; }
.card__media{ position:relative; overflow:hidden; border-radius:var(--r-xs); background:var(--paper-2);
  aspect-ratio:var(--ratio,4/5); clip-path:inset(0 0 0 0); }
.card__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%); transition:transform .7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.04); }
.card__badge{ position:absolute; top:10px; left:10px; z-index:2; background:var(--paper); color:var(--ink);
  font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:var(--r-sm); }
.card__note{ position:absolute; top:10px; left:10px; z-index:2; background:var(--navy-800); color:var(--paper);
  font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.1em; padding:6px 10px; border-radius:var(--r-sm); }
.card:hover{ box-shadow:var(--shadow-card); transition:box-shadow .26s var(--ease); }
.card{ transition:transform .26s var(--ease); }
@media (hover:hover){ .card:hover{ transform:translateY(-3px); } }

.card__label{ padding-block-start:16px; flex:1; display:flex; flex-direction:column; }
.card__title{ font:700 var(--fs-card)/1.22 var(--font-display); color:var(--ink);
  overflow-wrap:anywhere; hyphens:auto; text-wrap:balance; max-width:18ch; }
.card__phrase{ font:italic 400 .85rem/1.4 var(--font-display); color:var(--ink-2); margin-block-start:6px; }
.card__meta{ font:400 .82rem/1.55 var(--font-ui); color:var(--ink-3); margin-block-start:6px; }
.card__note-chip{ display:inline-block; font:500 .72rem var(--font-ui); letter-spacing:.08em; text-transform:uppercase;
  color:var(--sala); margin-block-end:4px; }
.card__sizes{ font:400 .78rem/1.5 var(--font-ui); color:var(--ink-3); margin-block-start:4px; }
.card__price{ font:600 .95rem/1 var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink); margin-block-start:10px; }
.card__price small{ font-weight:400; color:var(--ink-3); margin-inline-start:.35em; }

.card__colors{ display:flex; align-items:center; gap:10px; margin-block-start:12px; flex-wrap:wrap; }
.color-dot{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; }
.color-dot__swatch{ width:22px; height:22px; border-radius:50%; background:var(--dc); border:1px solid var(--paper-edge); }
.color-dot[aria-pressed="true"] .color-dot__swatch{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--navy); }
.card__color-label{ font:500 .78rem var(--font-ui); color:var(--ink-3); }

.card__cta{
  display:block; width:100%; min-height:44px; margin-block:14px 0;
  background:transparent; border:1.5px solid rgba(19,47,78,.24); border-radius:var(--r-sm);
  padding:13px 14px; font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); cursor:pointer; text-align:center; position:relative;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.card__cta:hover{ border-color:var(--sala); background:var(--sala-wash); }
.card__cta[aria-pressed="true"]{ background:var(--navy-800); border-color:var(--navy-800); color:var(--paper); }
.card__cta .check{ display:inline-block; width:14px; height:14px; margin-inline-end:6px; vertical-align:-2px; }
.card__cta .check path{ stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .32s var(--ease-out); }
.card__cta[aria-pressed="true"] .check path{ stroke-dashoffset:0; }

/* option popover */
.optpop{
  position:absolute; z-index:60; inset-inline:0; bottom:calc(100% + 8px);
  background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--r);
  box-shadow:var(--shadow-panel); padding:16px;
  opacity:0; transform:translateY(6px); visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s linear .22s;
}
.optpop.is-open{ opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto; transition:opacity .22s var(--ease-out), transform .22s var(--ease-out); }
.optpop__group{ margin-block-end:12px; }
.optpop__label{ display:block; font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-block-end:8px; }
.optpop__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:9px 14px; border:1.5px solid var(--paper-line); border-radius:var(--r-sm);
  font:600 .8rem var(--font-ui); color:var(--ink-2); min-height:44px; display:inline-flex; align-items:center;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip[aria-pressed="true"]{ background:var(--navy-800); color:var(--paper); border-color:var(--navy-800); }
.optpop__colors{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.optpop__qty{ display:flex; align-items:center; gap:12px; margin-block:12px; }
.qty-btn{ width:36px; height:36px; display:grid; place-items:center; border:1.5px solid var(--paper-line); border-radius:var(--r-sm); min-width:44px; min-height:44px; }
.qty-out{ min-width:2ch; text-align:center; font:600 1rem var(--font-ui); font-variant-numeric:tabular-nums; }
.optpop__select{ width:100%; background:var(--paper-3); border:0; border-bottom:2px solid var(--paper-line); border-radius:var(--r-sm) var(--r-sm) 0 0; padding:12px; min-height:44px; }
.optpop__submit{
  width:100%; min-height:44px; background:var(--red); color:#fff; border-radius:var(--r-sm);
  font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; margin-block-start:6px;
}
.optpop__submit:hover{ background:var(--red-deep); }

/* ===== 10. CARICATURAS — the one dark room (§5.4) ===== */
#caricaturas{ background:var(--navy-900); color:var(--ink-on-dark); padding-block:var(--sec-pad); }
#caricaturas .room__title{ color:var(--ink-on-dark); }
#caricaturas .room__title-en,
#caricaturas .room__desc,
#caricaturas .room__count{ color:rgba(247,243,234,.62); }
#caricaturas .room__rule{ background:rgba(247,243,234,.16); }
#caricaturas .card__media{ background:rgba(247,243,234,.05); }
#caricaturas .card{ border-radius:var(--r-xs); }
#caricaturas .card__title{ color:var(--ink-on-dark); }
#caricaturas .card__meta,
#caricaturas .card__price small{ color:rgba(247,243,234,.62); }
#caricaturas .card__price{ color:var(--ink-on-dark); }
#caricaturas .card__cta{ border-color:rgba(247,243,234,.40); color:var(--ink-on-dark); }
#caricaturas .card__cta:hover{ background:rgba(247,243,234,.10); border-color:var(--red); }
#caricaturas .card__cta[aria-pressed="true"]{ background:var(--paper); color:var(--navy); }

/* ===== 11. DOCK (§8.3) ===== */
.dock{
  position:fixed; z-index:180; display:none; align-items:center; gap:14px; height:56px; padding:0 22px 0 18px;
  background:var(--navy-800); color:var(--paper); border-radius:var(--r-pill);
  box-shadow:var(--shadow-dock); cursor:pointer; border:0;
  inset-block-end:28px; inset-inline-end:28px;
  opacity:0; transform:translateY(14px);
}
.dock.is-visible{ display:flex; }
.dock.is-in{ opacity:1; transform:translateY(0); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.dock__count{ width:26px; height:26px; border-radius:50%; background:var(--red); display:grid; place-items:center;
  font:700 .82rem/1 var(--font-ui); font-variant-numeric:tabular-nums; color:#fff; flex:none; }
.dock__label{ font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.dock__sub{ color:rgba(247,243,234,.7); font:400 .8rem/1 var(--font-ui); padding-inline-start:14px; border-inline-start:1px solid rgba(247,243,234,.22); white-space:nowrap; }
.dock__review{ display:none; }
@media (max-width:1079px){
  .dock{ inset-block-end:0; inset-inline:0; width:100%; height:62px; border-radius:0; padding-inline:18px;
    padding-block-end:env(safe-area-inset-bottom); justify-content:space-between; }
  .dock__sub{ flex:1; }
  .dock__review{ display:inline; margin-inline-start:auto; font:600 var(--fs-label)/1 var(--font-ui);
    letter-spacing:.08em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
  body.has-dock{ padding-block-end:62px; }
}
@keyframes dockpulse{ 0%{ transform:scale(1);} 40%{ transform:scale(1.22);} 100%{ transform:scale(1);} }
.dock__count.is-pulsing{ animation:dockpulse .34s var(--ease-pop); }

/* Thank-you toast — shown on the page after closing a sent encargo */
.thanks-toast{
  position:fixed; z-index:320; inset-inline:0; inset-block-end:28px;
  margin-inline:auto; width:max-content; max-width:min(100vw - 32px, 480px);
  display:flex; align-items:center; gap:12px; padding:14px 22px;
  background:var(--navy-800); color:var(--ink-on-dark);
  border:1px solid rgba(247,243,234,.18); border-radius:var(--r-pill);
  box-shadow:var(--shadow-dock);
  font:500 .9rem/1.45 var(--font-ui);
  opacity:0; transform:translateY(14px); pointer-events:none; visibility:hidden;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility 0s .35s;
}
.thanks-toast.is-in{ opacity:1; transform:translateY(0); visibility:visible; transition-delay:0s; }
.thanks-toast__check{ flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); color:var(--gold); display:grid; place-items:center; }
.thanks-toast__check svg{ width:13px; height:13px; }
@media (max-width:1079px){
  .thanks-toast{ inset-block-end:calc(20px + env(safe-area-inset-bottom)); }
}

/* ===== 12. DIALOG — request sheet (§8.4) ===== */
#pedido{
  width:min(680px, 100% - 32px); max-height:88svh; padding:0; border:0;
  border-radius:var(--r); background:var(--paper); color:var(--ink);
  box-shadow:var(--shadow-modal); overflow:hidden; margin:auto;
  opacity:0; transform:translateY(12px) scale(.985);
}
#pedido[open]{ opacity:1; transform:none; transition:opacity .32s var(--ease-out), transform .32s var(--ease-out); }
#pedido::backdrop{ background:var(--backdrop); backdrop-filter:blur(8px); }
@media (max-width:899px){
  #pedido{ margin-block-start:auto; width:100%; max-width:none; max-height:92svh; border-radius:var(--r-lg) var(--r-lg) 0 0;
    transform:translateY(100%); }
  #pedido[open]{ transform:none; transition:opacity .34s var(--ease-out), transform .34s var(--ease-out); }
}
.sheet{ display:flex; flex-direction:column; max-height:88svh; }
@media (max-width:899px){ .sheet{ max-height:92svh; } }
.sheet__graber{ display:none; }
@media (max-width:899px){ .sheet__graber{ display:block; width:40px; height:4px; background:var(--paper-line); border-radius:2px; margin:10px auto 0; } }
.sheet__header{ position:relative; flex:none; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--paper-line); min-height:68px; }
.sheet__header-eyebrow{ font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }
.sheet__header-title{ font:700 1.35rem var(--font-display); color:var(--ink); margin-block-start:4px; }
.sheet__clear{ font:600 var(--fs-label) var(--font-ui); color:var(--ink-3); text-decoration:underline; }
.sheet__close{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex:none; }

.stepper{ display:flex; align-items:center; gap:8px; padding:14px 20px; border-bottom:1px solid var(--paper-line); flex:none; }
.stepper__step{ display:flex; align-items:center; gap:8px; flex:1; }
.stepper__dot{ width:10px; height:10px; border-radius:50%; background:var(--paper-line); flex:none; transition:background .2s var(--ease); }
.stepper__step.is-current .stepper__dot{ background:var(--red); box-shadow:0 0 0 3px color-mix(in oklab, var(--red) 25%, transparent); }
.stepper__step.is-done .stepper__dot{ background:var(--red); }
.stepper__rail{ height:2px; flex:1; background:var(--paper-line); position:relative; }
.stepper__step.is-done .stepper__rail{ background:var(--red); }
.stepper__label{ font:600 .72rem var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.stepper__step.is-current .stepper__label{ color:var(--ink); }

.sheet__body{ flex:1; overflow-y:auto; padding:20px; }
.sheet__step{ display:none; }
.sheet__step.is-active{ display:block; }

.sheet__footer{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px;
  border-top:1px solid var(--paper-line); background:var(--paper); }
.sheet__back{ font:600 .82rem var(--font-ui); color:var(--ink-3); min-height:44px; }
.sheet__running{ font:600 .95rem var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink); }
.sheet__primary{ min-height:44px; background:var(--red); color:#fff; padding:13px 24px; border-radius:var(--r-sm);
  font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; }
.sheet__primary:hover{ background:var(--red-deep); }
.sheet__primary:disabled{ opacity:.4; cursor:not-allowed; }

/* step 1: lines */
.sala-group{ margin-block-end:22px; }
.sala-group__head{ display:flex; align-items:center; gap:10px; margin-block-end:10px; }
.sala-group__chip{ width:22px; height:22px; border-radius:var(--r-sm); display:grid; place-items:center; font:700 .7rem var(--font-display); flex:none; }
.sala-group__name{ font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.line{
  display:grid; grid-template-columns:64px 1fr auto auto 32px; gap:14px; align-items:center;
  padding-block:14px; border-block-end:1px solid var(--paper-line); overflow:hidden;
}
.line__thumb{ width:64px; height:64px; object-fit:cover; border-radius:var(--r-xs); border:1px solid var(--paper-line); }
.line__name{ font:600 1rem var(--font-display); color:var(--ink); overflow-wrap:anywhere; }
.line__opts{ font:400 .78rem var(--font-ui); color:var(--ink-3); margin-block-start:2px; }
.line__stepper{ display:flex; align-items:center; gap:8px; }
.line__price{ font:600 .9rem var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.line__remove{ width:32px; height:32px; display:grid; place-items:center; color:var(--ink-3); border-radius:50%; }
.line__remove:hover{ color:var(--danger); }
.line.is-removing{ height:0 !important; opacity:0; padding-block:0; margin:0; border:0; transition:height .24s var(--ease-in), opacity .24s var(--ease-in), padding .24s var(--ease-in); }

.addmore{ display:block; width:100%; text-align:center; min-height:44px; padding:14px; margin-block-start:14px;
  border:1.5px dashed var(--paper-edge); border-radius:var(--r-sm); color:var(--ink-2);
  font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; }
.addmore:hover{ background:var(--paper-2); }

.subtotal-row{ display:flex; justify-content:space-between; align-items:baseline; margin-block-start:18px; font:600 1rem var(--font-ui); font-variant-numeric:tabular-nums; }
.subtotal-note{ margin-block-start:8px; }

.empty-state{ text-align:center; padding-block:40px; }
.empty-state__rule{ width:120px; height:12px; background-image:var(--greca); background-repeat:repeat-x; background-size:auto 12px; margin:0 auto 20px; }
.empty-state__title{ font:600 1.15rem var(--font-display); color:var(--ink); }
.empty-state__body{ font:400 .88rem var(--font-ui); color:var(--ink-3); margin-block:8px 18px; }

/* step 2: form fields */
.field{ margin-block-end:16px; }
.field label{ display:block; margin-block-end:7px; font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.field input,.field select,.field textarea{
  width:100%; background:var(--paper-3); border:0; border-bottom:2px solid var(--paper-line);
  border-radius:var(--r-sm) var(--r-sm) 0 0; padding:13px 12px; font:400 1rem/1.3 var(--font-ui);
  color:var(--ink); min-height:44px;
}
.field textarea{ min-height:76px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color:var(--red); outline:2px solid var(--cyan); outline-offset:2px; }
.field.has-error input,.field.has-error select{ border-bottom-color:var(--danger); }
.field__error{ display:none; margin-block-start:6px; font:600 var(--fs-label)/1.4 var(--font-ui); color:var(--danger); }
.field.has-error .field__error{ display:block; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
.field-heading{ font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin-block:20px 14px; padding-block-start:16px; border-top:1px solid var(--paper-line); }

/* step 3: receipt + bank + notice + gate */
.receipt{ background:var(--paper-3); border-radius:var(--r); padding:18px; }
.receipt-sala{ font:600 var(--fs-micro)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-block:14px 8px; }
.receipt-sala:first-child{ margin-block-start:0; }
.receipt-row{ display:flex; justify-content:space-between; gap:12px; padding-block:8px; border-block-end:1px solid var(--paper-line);
  font:400 .88rem var(--font-ui); font-variant-numeric:tabular-nums; }
.receipt-row.total{ font-weight:700; font-size:1rem; border-bottom:0; }
.receipt-row .ship-note{ display:block; font:400 .74rem var(--font-ui); color:var(--ink-3); margin-block-start:2px; }
.receipt-tax-note{ margin-block-start:10px; }

.bank-panel{ background:var(--paper-3); border:1px solid var(--paper-line); border-top:3px solid var(--navy); border-radius:var(--r); padding:18px; margin-block-start:20px; }
.bank-panel__heading{ margin-block-end:12px; }
.bank-panel__warning{ background:var(--paper-2); border-inline-start:3px solid var(--warn); padding:12px 14px; margin-block-end:14px; font:400 .82rem/1.5 var(--font-ui); color:var(--ink-2); }
.bank-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:10px; border-block-end:1px solid var(--paper-line); }
.bank-row .k{ font:600 .74rem var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); flex:none; }
.bank-row .v{ font:italic 400 .88rem var(--font-ui); color:var(--ink-3); border-bottom:1px dashed var(--paper-edge); flex:1; text-align:right; padding-inline-end:10px; }
.copy-btn{ font:600 .72rem var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--paper-line); border-radius:var(--r-sm); padding:8px 10px; min-height:36px; }
.copy-btn:hover{ border-color:var(--navy); }

.payment-notice{ background:var(--paper-2); border-inline-start:3px solid var(--warn); padding:16px 18px; margin-block-start:20px; display:flex; gap:12px; }
.payment-notice__seal{ flex:none; color:var(--warn); }
.payment-notice p{ font:400 var(--fs-sm)/1.55 var(--font-ui); color:var(--ink); }

.gate{ display:flex; align-items:flex-start; gap:12px; margin-block-start:18px; }
.gate input{ width:22px; height:22px; margin-block-start:2px; flex:none; accent-color:var(--red); }
.gate label{ font:400 .88rem/1.5 var(--font-ui); color:var(--ink-2); }

/* step 4: done */
.done{ text-align:center; padding-block:10px; }
.done__check{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; border:1px solid var(--ok); display:grid; place-items:center; position:relative; }
.done__check svg{ width:28px; height:28px; }
.done__check path{ stroke-dasharray:40; stroke-dashoffset:40; animation:checkdraw .52s var(--ease-out) .1s forwards; }
@keyframes checkdraw{ to{ stroke-dashoffset:0; } }
.done__title{ font:700 1.35rem var(--font-display); color:var(--ink); }
.done__body{ font:400 .9rem/1.6 var(--font-ui); color:var(--ink-2); margin-block:10px 20px; max-width:44ch; margin-inline:auto; }
.fallback{ text-align:left; background:var(--paper-3); border-radius:var(--r); padding:16px; margin-block-start:10px; }
.fallback__q{ font:600 .9rem var(--font-ui); color:var(--ink); margin-block-end:8px; }
.fallback textarea{ width:100%; min-height:120px; background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--r-sm); padding:10px; font:400 .82rem/1.5 var(--font-ui); color:var(--ink-2); }
.fallback__email{ display:inline-block; margin-block-start:10px; font:700 1.05rem var(--font-display); color:var(--red-deep); }
.done__actions{ display:flex; gap:12px; justify-content:center; margin-block-start:20px; flex-wrap:wrap; }
.btn-secondary{ min-height:44px; padding:12px 20px; border:1.5px solid var(--paper-line); border-radius:var(--r-sm); font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.btn-secondary:hover{ border-color:var(--navy); }

.discard-confirm{ display:none; position:absolute; inset:0; z-index:40; background:var(--paper); padding:24px; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; }
.discard-confirm.is-open{ display:flex; }
.discard-confirm__actions{ display:flex; gap:12px; }

/* ===== 13. PHRASE INTERSTITIALS (§9.1) ===== */
/* Centered, never clipped (client correction 2026-08-26): no overflow:hidden, no
   side-alignment — the quote sits centered with the rule above it. */
.phrase-band{ background:var(--paper); padding-block:clamp(4.5rem,11vh,9rem); }
.phrase-band__inner{ max-width:min(34ch, 92%); margin-inline:auto; text-align:center; }
.phrase-band--right .phrase-band__inner{ margin-inline:auto; text-align:center; }
.phrase-band__rule{ height:3px; width:64px; background:var(--red); margin:0 auto 20px; }
.phrase-band--right .phrase-band__rule{ background:var(--navy); margin-inline:auto; }
.phrase-band__text{ font:italic 400 var(--fs-phrase)/1.28 var(--font-display); color:var(--ink); }
.phrase-band__text strong{ font-weight:700; color:var(--red-deep); font-style:italic; }
.phrase-band__en{ font:400 var(--fs-sm)/1.5 var(--font-ui); color:var(--ink-3); margin-block-start:14px; display:none; }
html[data-lang="en"] .phrase-band__en{ display:block; }
.phrase-band__attr{ margin-block-start:16px; }

/* ===== 14. ARTISTA / COMO-COMPRAR (§9.2, §9.3) ===== */
#artista{ background:var(--paper); padding-block:var(--sec-pad); }
.artista__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:start; }
@media (max-width:900px){ .artista__grid{ grid-template-columns:1fr; } }
.artista__plaque{ padding:14px; background:var(--paper); border:1px solid var(--paper-line); box-shadow:var(--shadow-card); position:relative; }
.artista__plaque::after{ content:''; position:absolute; inset:10px; border:1px solid var(--paper-edge); pointer-events:none; }
.artista__portrait{ aspect-ratio:4/5; overflow:hidden; }
/* The portrait source is a logo+photo composite; right-align the crop so Angélica's
   face is never cut (client correction round 3). */
.artista__portrait img{ width:100%; height:100%; object-fit:cover; object-position:100% 50%; }
.artista__caption{ margin-block-start:10px; }
.artista__name{ font:700 var(--fs-room)/1.1 var(--font-display); color:var(--ink); margin-block-start:14px; }
.artista__rule{ margin-block:16px; }
.artista__place{ margin-block-end:16px; }
.artista__bio p{ font:400 var(--fs-body)/1.7 var(--font-ui); color:var(--ink-2); max-width:58ch; margin-block-end:14px; }
.timeline{ margin-block-start:32px; }
.timeline__rail{ position:relative; height:2px; background:var(--paper-line); margin-block-end:14px; transform-origin:left; }
.timeline__row{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.timeline__node{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; flex:1; min-width:80px; }
.timeline__square{ width:8px; height:8px; background:var(--red); margin-block-start:-19px; }
.timeline__year{ font:600 .82rem var(--font-ui); font-variant-numeric:tabular-nums; color:var(--ink); }
.timeline__label{ font:600 var(--fs-micro)/1.3 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:760px){
  .timeline__row{ flex-direction:column; align-items:flex-start; }
  .timeline__rail{ display:none; }
  .timeline__node{ flex-direction:row; text-align:left; width:100%; }
  .timeline__square{ margin-block-start:0; }
}
.artista__emblem{ display:flex; align-items:center; gap:14px; margin-block-start:28px; }
.artista__emblem img{ width:96px; height:auto; }
.artista__emblem span{ font:italic 400 .9rem var(--font-ui); color:var(--ink-2); }
.artista__signature{ font-family:var(--font-script); font-size:44px; color:var(--ink); transform:rotate(-2deg); margin-block-start:30px; }
.artista__sig-rule{ height:1px; background:var(--paper-edge); width:60%; margin-block-start:6px; }
.socials{ display:flex; flex-wrap:wrap; gap:18px; margin-block-start:24px; }
.socials a{ font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); position:relative; padding-block:4px; }
.socials a::after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--red-deep); transform-origin:left; transform:scaleX(0); transition:transform .22s var(--ease); }
.socials a:hover{ color:var(--red-deep); }
.socials a:hover::after{ transform:scaleX(1); }
.socials a[aria-disabled="true"]{ cursor:default; opacity:.55; }

#como-comprar{ background:var(--paper-2); padding-block:var(--sec-pad); }
.steps4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; margin-block-start:40px; }
@media (max-width:860px){ .steps4{ grid-template-columns:1fr; gap:28px; } }
.steps4__item{ position:relative; padding-inline-start:0; }
.steps4__num{ font:900 var(--fs-sub) var(--font-display); color:var(--paper-edge); }
.steps4__title{ font:600 1rem var(--font-ui); color:var(--ink); margin-block:6px; }
.steps4__body{ font:400 var(--fs-sm)/1.5 var(--font-ui); color:var(--ink-2); }
.policies4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-block-start:56px; }
@media (max-width:860px){ .policies4{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .policies4{ grid-template-columns:1fr; } }
.policy-card{ background:var(--paper); border:1px solid var(--paper-line); border-radius:var(--r); padding:22px; }
.policy-card svg{ color:var(--sala-3); margin-block-end:12px; }
.policy-card__title{ font:600 1rem var(--font-ui); color:var(--ink); margin-block-end:6px; }
.policy-card__body{ font:400 .85rem/1.5 var(--font-ui); color:var(--ink-2); }

.joyeria-notice{ background:var(--paper-3); border-inline-start:4px solid var(--sala-3); padding:20px 24px; margin-block-end:32px; }
.joyeria-notice p{ font:400 var(--fs-sm)/1.5 var(--font-ui); }
.joyeria-notice p:first-child{ color:var(--ink); }
.joyeria-notice p:last-child{ color:var(--ink-3); margin-block-start:8px; }

/* ===== 15. CONTACTO / FOOTER (§9.5) ===== */
#contacto{ background:var(--paper); padding-block:var(--sec-pad); text-align:center; }
.contacto__email{ display:inline-block; max-width:100%; font:700 var(--fs-room)/1.1 var(--font-display); color:var(--ink); margin-block:14px; position:relative; overflow-wrap:anywhere; }
.contacto__email::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--red-deep); transition:width .26s var(--ease); }
.contacto__email:hover::after{ width:100%; }
#contacto .socials{ justify-content:center; margin-block-start:22px; }

footer{ background:var(--navy-900); color:var(--ink-on-dark); padding-block-start:var(--sec-pad); }
.footer__grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; padding-block-end:48px; }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr; gap:36px; } }
/* white wordmark straight on the navy footer — no cream plaque (client correction round 4) */
.footer__logo-plaque{ display:inline-block; }
.footer__logo-plaque img{ width:200px; height:auto; display:block; }
.footer__script{ font-family:var(--font-script); color:var(--gold); font-size:1.6rem; margin-block:14px 2px; }
.footer__lema{ font:italic 400 var(--fs-sm)/1.5 var(--font-display); color:rgba(247,243,234,.82); max-width:32ch; }
.footer__heading{ font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:rgba(247,243,234,.55); margin-block-end:16px; }
.footer__sala{ margin-block-end:16px; }
.footer__sala-name{ font:600 .85rem var(--font-ui); color:var(--ink-on-dark); margin-block-end:6px; }
.footer__room-list{ display:flex; flex-direction:column; gap:6px; }
.footer__room-list a{ font:400 var(--fs-label)/1.4 var(--font-ui); color:rgba(247,243,234,.68); }
.footer__room-list a:hover{ color:var(--gold); }
.footer__info a{ display:block; font:400 .88rem var(--font-ui); color:rgba(247,243,234,.75); margin-block-end:10px; }
.footer__info a:hover{ color:var(--gold); }
.footer__social a{ display:block; font:600 var(--fs-label)/1 var(--font-ui); letter-spacing:.06em; text-transform:uppercase; color:rgba(247,243,234,.68); margin-block-end:12px; }
.footer .greca{ opacity:.9; }
.footer__bottom{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:20px; font:400 var(--fs-micro)/1.4 var(--font-ui); color:rgba(247,243,234,.6); }

/* ===== 16. MOTION / REVEAL ===== */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .62s var(--ease), transform .62s var(--ease); }

/* ===== 17. REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal,.card__media,.hero__body *,.room__key{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero__cue{ display:none; }
}

/* ===== utility ===== */
.center-max{ max-width:760px; margin-inline:auto; }