/* ==========================================================================
   LANDING · Labryinto × Réveillon Carneiros 2026/27
   /labryinto/ (EN) e /labryinto/pt/ (PT)

   PONTE VISUAL: o hero fala a lingua do site do Labryinto (marrom #372515,
   verde-musgo, creme, dunas em camadas) porque o visitante chega de la e nao
   pode sentir salto. A partir da 2a secao a pagina assume o sistema do RC
   (areia, oliva, sunset, Amagro + SF Pro + mono).

   Auto-contido de proposito: NAO importa css/theme.css (98 KB do site inteiro,
   com nav/hero/filmstrip que colidiriam). Os tokens abaixo sao copia literal
   do rc-design-system/theme.css, que e a fonte canonica.

   Indice: 00 Fontes · 01 Tokens · 02 Base · 03 Tipografia · 04 Hero-ponte
           05 Secoes · 06 Botoes/barra · 07 Componentes · 08 Fotos e lightbox
           09 Formulario · 10 Rodape · 11 Grao/Reveal · 12 Responsivo
   ========================================================================== */

/* ============================ 00 · FONTES ================================= */
@font-face{ font-family:'Amagro'; src:url('../assets/fonts/Amagro-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'SF Pro Display'; src:url('../assets/fonts/SFProDisplay-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'SF Pro Display'; src:url('../assets/fonts/SFProDisplay-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'SF Pro Display'; src:url('../assets/fonts/SFProDisplay-Semibold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
/* Fallback metric-matched: o swap da Amagro nao desloca o titulo. */
@font-face{ font-family:'Amagro Fallback'; src:local('Georgia');
  size-adjust:109%; ascent-override:93%; descent-override:27%; line-gap-override:0%; }

/* ============================ 01 · TOKENS ================================= */
:root{
  /* — Sistema RC — */
  --sand:#EEE8E3; --sand-2:#E6DED5; --sand-card:#F5F1EC; --sand-sink:#E3DACE;
  --ink:#2A2A22; --ink-soft:#6A6658; --ink-faint:#9A9483;
  --olive:#6B7A44; --olive-dark:#3D4426; --olive-deep:#2C3119;
  --ocean:#005B7A; --ocean-deep:#06425A; --earth:#848547;
  --sunset:#E8B87F; --sunset-deep:#D49A52; --accent:#BE842E;
  --accent-ink:#9C6A1E;              /* o acento escurecido, p/ texto sobre areia */
  --cream:#F2EDE6; --cream-soft:rgba(242,237,230,0.74); --cream-dim:rgba(242,237,230,0.62);
  --line:rgba(42,42,34,0.16); --line-2:rgba(42,42,34,0.08); --line-cream:rgba(242,237,230,0.18);

  /* — Paleta do Labryinto (so hero e rodape usam) — */
  --lab-brown:#372515; --lab-brown-2:#2A1C10; --lab-green:#4C644A; --lab-cream:#ECE2CB;

  --font-display:'Amagro','Amagro Fallback','EB Garamond',Georgia,serif;
  --font-body:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;

  --fs-display:clamp(2.05rem,1.2rem + 3.2vw,3.7rem);
  --fs-h2:clamp(1.7rem,1rem + 2.2vw,2.9rem);
  --fs-h3:clamp(1.05rem,0.95rem + 0.5vw,1.32rem);
  --fs-lede:clamp(1.05rem,0.92rem + 0.6vw,1.4rem);
  --fs-body:clamp(0.95rem,0.88rem + 0.3vw,1.06rem);
  --fs-small:clamp(0.72rem,0.66rem + 0.2vw,0.82rem);
  --fs-stat:clamp(2.4rem,1.4rem + 4vw,4.4rem);

  --pad-x:clamp(1.3rem,5.5vw,7rem);
  --pad-y:clamp(3.6rem,9vh,7rem);
  --gap:clamp(1rem,2vw,2rem);
  --maxw:1240px;
  --r-control:6px;

  --ease:cubic-bezier(0.22,1,0.36,1);
  --d-quick:.32s; --d-soft:.55s; --d-breath:.9s;
  --shadow-card:inset 0 1px 0 rgba(255,255,255,0.62), 0 18px 40px -28px rgba(42,42,34,0.40);
  --shadow-photo:inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.30), 0 24px 46px -30px rgba(0,0,0,0.60);
  color-scheme:light; accent-color:var(--sunset-deep);
}

/* ============================ 02 · BASE ================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:70px}
body{ margin:0; background:var(--sand); color:var(--ink); font-family:var(--font-body);
  font-size:var(--fs-body); line-height:1.62; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden; }
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
::selection{background:var(--sunset); color:var(--olive-deep)}
.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{position:absolute; left:-9999px; top:0; z-index:2000}
.skip:focus{ left:1rem; top:1rem; padding:.7rem 1.1rem; background:var(--cream); color:var(--olive-deep);
  border-radius:var(--r-control); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none }
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x)}

/* ============================ 03 · TIPOGRAFIA =========================== */
h1,h2,h3{font-family:var(--font-display); font-weight:700; line-height:1.05; margin:0; letter-spacing:-0.01em}
p{margin:0}
.h2{font-size:var(--fs-h2); text-wrap:balance; margin-left:-0.012em}  /* compensacao optica da Amagro */
.h3{font-family:var(--font-body); font-weight:600; font-size:var(--fs-h3); line-height:1.3; letter-spacing:0}
.lede{font-size:var(--fs-lede); line-height:1.5; color:var(--ink-soft); max-width:62ch; text-wrap:pretty}
.lede b{color:var(--ink); font-weight:600}
.body{max-width:66ch; color:var(--ink-soft); text-wrap:pretty}
.eyebrow{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent-ink); display:inline-flex; align-items:center; gap:0.7rem; }
.eyebrow::before{content:""; width:24px; height:1px; background:currentColor; flex:none; opacity:.85}
.eyebrow + .h2{margin-top:1.1rem}
.mono{font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:0.14em;
  text-transform:uppercase; font-variant-numeric:tabular-nums; color:var(--ink-soft)}
.on-dark{color:var(--cream)}
.on-dark .lede,.on-dark .body{color:var(--cream-soft)}
.on-dark .lede b{color:var(--cream)}
.on-dark .eyebrow{color:var(--sunset)}
.on-dark .mono{color:var(--cream-dim)}
.lnk{text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:from-font;
  text-decoration-color:var(--accent); transition:color var(--d-quick) ease}
.lnk:hover{color:var(--accent-ink)}
.on-dark .lnk{text-decoration-color:var(--sunset)}
.on-dark .lnk:hover{color:var(--sunset)}

/* ============================ 04 · HERO-PONTE ============================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:calc(var(--pad-y) + 3rem) var(--pad-x) 0; background:var(--lab-brown); overflow:hidden }
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover }
.hero-veil{ position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(96% 64% at 50% 48%, rgba(42,28,16,0.60) 0%, rgba(42,28,16,0.28) 56%, rgba(42,28,16,0.52) 100%),
    linear-gradient(180deg, rgba(42,28,16,0.74) 0%, rgba(42,28,16,0.22) 26%, rgba(42,28,16,0.34) 68%, rgba(42,28,16,0.88) 100%) }
.hero-in{ position:relative; z-index:2; max-width:1000px; padding-bottom:clamp(4rem,10vh,7rem) }

.lockup{ display:flex; align-items:center; justify-content:center; gap:clamp(.9rem,2.4vw,1.6rem);
  margin-bottom:clamp(1.6rem,4vh,2.6rem) }
.lockup .ram{ width:clamp(40px,5vw,58px); height:clamp(41px,5.2vw,60px); color:var(--lab-cream);
  fill:currentColor; opacity:.92; flex:none }
.lockup .word{ height:clamp(13px,1.5vw,17px); width:auto; opacity:.92 }
.lockup .x{ font-family:var(--font-body); font-size:clamp(.8rem,1.1vw,1rem); color:var(--lab-cream);
  opacity:.5; font-style:normal }
.lockup .rc{ font-family:var(--font-mono); font-size:clamp(.56rem,.82vw,.68rem); letter-spacing:.26em;
  text-transform:uppercase; color:var(--lab-cream); opacity:.82; text-align:left; line-height:1.5 }

.hero h1{ font-size:var(--fs-display); color:var(--lab-cream); letter-spacing:0.03em;
  line-height:1.1; text-wrap:balance; margin-left:-0.012em; max-width:18ch; margin-inline:auto;
  text-shadow:0 2px 26px rgba(24,15,8,0.72) }
.hero .sub{ margin-top:clamp(1.1rem,2.6vh,1.7rem); text-shadow:0 1px 16px rgba(24,15,8,0.75);
  font-size:var(--fs-lede); line-height:1.5; color:rgba(236,226,203,0.9); max-width:46ch;
  margin-inline:auto; text-wrap:pretty }
.hero .meta{ margin-top:clamp(1.6rem,4vh,2.4rem); text-shadow:0 1px 12px rgba(24,15,8,0.8);
  font-family:var(--font-mono); font-size:clamp(.62rem,.78vw,.74rem); letter-spacing:.2em;
  text-transform:uppercase; color:rgba(236,226,203,0.82); font-variant-numeric:tabular-nums;
  text-wrap:balance }
.hero .cta-row{ margin-top:clamp(1.8rem,4.4vh,2.8rem); display:flex; flex-wrap:wrap;
  gap:.8rem; justify-content:center }
.hero-dunes{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; width:100%;
  height:clamp(90px,16vh,190px); display:block; pointer-events:none }

/* ============================ 05 · SECOES ================================ */
.s{ padding-block:var(--pad-y); position:relative }
.s-sand{ background:var(--sand); color:var(--ink) }
.s-sand-alt{ background:linear-gradient(170deg,var(--sand),var(--sand-2) 60%,var(--sand-sink)); color:var(--ink) }
.s-dark{ background:
    radial-gradient(90% 70% at 88% 100%, rgba(232,184,127,0.14) 0%, transparent 62%),
    radial-gradient(80% 60% at 8% 0%, rgba(6,66,90,0.42) 0%, transparent 60%),
    linear-gradient(160deg,var(--olive-dark) 0%,var(--olive-deep) 55%);
  color:var(--cream) }
.s-ocean{ background:linear-gradient(165deg,var(--ocean),var(--ocean-deep)); color:var(--cream) }
.s-head{ max-width:66ch }
.s-head .lede{ margin-top:1.2rem }

/* — Faixa de foto larga — */
.figwide{ margin-top:clamp(2rem,4.5vh,3.2rem) }
.figwide img{ width:100%; aspect-ratio:16/7; object-fit:cover; box-shadow:var(--shadow-photo) }
.figwide figcaption{ margin-top:.7rem; font-family:var(--font-mono); font-size:var(--fs-small);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft) }
.on-dark .figwide figcaption{ color:var(--cream-dim) }
@media (max-width:640px){ .figwide img{aspect-ratio:4/3} }

/* ======================= 06 · BOTOES · BARRA FIXA ======================== */
.btn{ display:inline-block; font-size:.76rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:.95rem 1.9rem; border-radius:var(--r-control);
  text-decoration:none; text-align:center;
  transition:transform var(--d-quick) var(--ease), background var(--d-quick) ease, color var(--d-quick) ease, border-color var(--d-quick) ease }
.btn:active{transform:scale(0.97)}
.btn-big{ padding:1.1rem 2.4rem; font-size:.82rem }
.btn-solid{ background:var(--sunset-deep); color:var(--olive-deep) }
.btn-solid:hover{ background:var(--sunset) }
.btn-line{ border:1.5px solid rgba(236,226,203,0.6); color:var(--lab-cream) }
.btn-line:hover{ background:var(--lab-cream); color:var(--lab-brown); border-color:var(--lab-cream) }
.btn-line.ink{ border-color:var(--ink); color:var(--ink) }
.btn-line.ink:hover{ background:var(--ink); color:var(--sand) }
.btn-cream{ background:var(--cream); color:var(--ocean-deep) }
.btn-cream:hover{ background:#fff }
/* botao "fechado": o passe ainda nao abriu, entao ele nao pode parecer clicavel-de-compra */
.btn-ghost{ border:1px dashed rgba(242,237,230,0.45); color:var(--cream-dim); background:none }
.btn-ghost:hover{ border-color:var(--cream); color:var(--cream) }

.sticky{ position:fixed; left:0; right:0; top:0; z-index:1100; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.6rem clamp(1rem,4vw,2rem);
  background:linear-gradient(135deg,rgba(44,49,25,0.95),rgba(61,68,38,0.95));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateY(-100%); transition:transform var(--d-soft) var(--ease);
  box-shadow:0 10px 30px rgba(0,0,0,0.16) }
.sticky.on{ transform:none }
.sticky .who{ display:flex; align-items:center; gap:.7rem; min-width:0; flex:none }
.sticky .ram{ width:24px; height:25px; color:var(--cream); fill:currentColor; flex:none }
.sticky .txt{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cream-soft); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-variant-numeric:tabular-nums }
.sticky .btn{ padding:.62rem 1.2rem; font-size:.66rem; flex:none }

/* — Menu de secoes (pedido do Labryinto, 20/08/2026) —
   Sao 12 itens numa barra so: o trilho rola na horizontal quando nao cabem,
   sem barra de rolagem visivel. O item da secao na tela ganha .on pelo JS. */
.sticky .snav{ flex:1 1 auto; min-width:0; display:flex; align-items:center;
  gap:clamp(.1rem,.9vw,.5rem); overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%) }
.sticky .snav::-webkit-scrollbar{ display:none }
.sticky .snav a{ flex:none; padding:.42rem .55rem; white-space:nowrap; text-decoration:none;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--cream-dim); border-bottom:1px solid transparent;
  transition:color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease) }
.sticky .snav a:hover,.sticky .snav a:focus-visible{ color:var(--cream) }
.sticky .snav a.on{ color:var(--sunset); border-bottom-color:var(--sunset) }

.sticky-end{ display:flex; align-items:center; gap:.7rem; flex:none }
.sticky .lang{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--cream-soft); padding:.42rem .5rem; text-decoration:none;
  border:1px solid rgba(242,237,230,0.28); transition:all var(--d-fast) var(--ease) }
.sticky .lang:hover,.sticky .lang:focus-visible{ color:var(--cream); border-color:var(--cream) }

/* a barra fixa cobre o topo: o alvo da ancora precisa parar abaixo dela */
[id]{ scroll-margin-top:60px }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

/* ============================ 07 · COMPONENTES =========================== */

/* — Regua de fatos — */
.facts{ margin-top:clamp(2.2rem,5vh,3.4rem); display:grid; gap:clamp(1.2rem,3vw,2rem);
  grid-template-columns:repeat(var(--fn,4),1fr); border-top:1px solid var(--line); padding-top:1.6rem }
#travessia .facts{ --fn:3 }
.on-dark .facts{ border-top-color:var(--line-cream) }
.facts .n{ font-family:var(--font-mono); font-size:var(--fs-stat); line-height:1;
  letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:500 }
.on-dark .facts .n{ color:var(--cream) }
.facts .l{ margin-top:.55rem; font-family:var(--font-mono); font-size:var(--fs-small);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); line-height:1.4 }
.on-dark .facts .l{ color:var(--cream-dim) }
@media (max-width:760px){ .facts{grid-template-columns:repeat(2,1fr)} }

/* — Os oito dias: um cartao por dia, com simbolo da noite e os DOIS horarios — */
.days{ margin-top:clamp(2.2rem,5vh,3.2rem); display:grid; gap:.5rem;
  grid-template-columns:repeat(8,1fr) }
.day{ background:var(--sand-card); border:1px solid var(--line-2); padding:.9rem .8rem 1rem;
  display:flex; flex-direction:column; gap:.6rem; min-height:186px }
.day.on{ border-color:rgba(190,132,46,.42); box-shadow:var(--shadow-card) }
/* data e simbolo na MESMA linha: o cartao encolhe e a marca vira detalhe */
.day .dd{ display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-variant-numeric:tabular-nums; padding-bottom:.55rem;
  border-bottom:1px solid var(--line-2); min-height:1.9rem }
.day.on .dd{ color:var(--accent-ink) }
.day .dbody{ display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; flex:1 }
.day .mark{ width:19px; height:19px; flex:none; opacity:.85;
  /* o SVG e branco na origem: este filtro o traz pro oliva da marca */
  filter:brightness(0) saturate(100%) invert(38%) sepia(18%) saturate(760%) hue-rotate(35deg) brightness(94%) contrast(88%) }
.day .dn{ font-family:var(--font-display); font-size:clamp(1rem,.85rem + .5vw,1.35rem);
  line-height:1.1; color:var(--ink) }
.day .dn-off{ font-family:var(--font-body); font-size:.82rem; font-weight:500; color:var(--ink-faint);
  line-height:1.3 }
.day .dh{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums }
.day .dm{ font-size:.72rem; line-height:1.35; color:var(--ink-soft); padding-top:.6rem;
  border-top:1px solid var(--line-2) }
.day .dm i{ font-style:normal; font-family:var(--font-mono); font-size:.64rem; color:var(--ink-faint);
  font-variant-numeric:tabular-nums }
.day .dm-off{ color:var(--ink-faint) }
.days-foot{ margin-top:1rem }
@media (max-width:1000px){ .days{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){ .days{grid-template-columns:repeat(2,1fr)} .day{min-height:164px} }

/* — Destaque editorial — */
.hl{ margin-top:clamp(1.8rem,4vh,2.6rem); padding:1.3rem 1.5rem;
  background:color-mix(in srgb, var(--ocean) 8%, transparent); border-left:3px solid var(--ocean) }
.hl p{ font-family:var(--font-display); font-size:clamp(1.15rem,.9rem + 1vw,1.6rem); line-height:1.25 }
.on-dark .hl{ background:rgba(242,237,230,0.07); border-left-color:var(--sunset) }
.note{ margin-top:1.4rem; padding-left:1rem; border-left:2px solid var(--accent);
  color:var(--ink-soft); max-width:62ch; font-size:.95rem }
.on-dark .note{ border-left-color:var(--sunset); color:var(--cream-soft) }

/* — As cinco noites: cartao largo, foto grande (no thumb o palco sumia) — */
.nights{ margin-top:clamp(2rem,4.5vh,3rem); display:flex; flex-direction:column; gap:clamp(1rem,2.4vw,1.8rem) }
.night{ display:grid; grid-template-columns:minmax(0,46%) 1fr; gap:clamp(1.2rem,3vw,2.6rem);
  align-items:center; background:var(--sand-card); border:1px solid var(--line-2);
  padding:clamp(1rem,1.8vw,1.4rem) }
.night-ph{ min-width:0 }
.night-tx{ min-width:0; padding-right:clamp(0rem,1.5vw,1.5rem) }
.night .mark{ width:34px; height:34px; margin-bottom:.7rem; opacity:.92;
  filter:brightness(0) saturate(100%) invert(38%) sepia(18%) saturate(760%) hue-rotate(35deg) brightness(94%) contrast(88%) }
.night .nm{ font-size:clamp(1.6rem,1.1rem + 1.8vw,2.6rem); line-height:1 }
.night .ds{ margin-top:.6rem; color:var(--ink-soft); font-size:1.02rem; max-width:34ch }
.night-when{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line-2);
  display:flex; gap:1.4rem; font-family:var(--font-mono); font-size:var(--fs-small);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
  font-variant-numeric:tabular-nums }
@media (max-width:820px){
  .night{ grid-template-columns:1fr; gap:1rem }
  .night-tx{ padding-right:0 }
}

/* — Os espacos: quem entra e o que se paga, escrito por extenso — */
.venues{ margin-top:clamp(2rem,4.5vh,3rem); display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr)) }
.venue{ background:var(--sand-card); border:1px solid var(--line-2);
  padding:clamp(1.2rem,2.4vw,1.6rem); display:flex; flex-direction:column }
.venue .h3{ color:var(--ink) }
.venue-h{ margin-top:.5rem; font-family:var(--font-mono); font-size:1.02rem; letter-spacing:.04em;
  color:var(--accent-ink); font-variant-numeric:tabular-nums }
.venue dl{ margin:1.1rem 0 0; display:grid; gap:.3rem }
.venue dt{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.7rem }
.venue dd{ margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.5 }
.venue dd.yes{ color:var(--ink) }
.venue dd.yes::before{ content:"✓ "; color:var(--olive) }
/* o cartao das noites e o que importa: e onde o Labryinto Stage fica */
.venue-key{ box-shadow:var(--shadow-card); border-color:rgba(190,132,46,.42) }
.venue-key .venue-h{ font-size:1.14rem }
/* variante escura, caso a secao volte pro oliva */
.on-dark .venue{ background:rgba(242,237,230,0.06); border-color:var(--line-cream) }
.on-dark .venue .h3{ color:var(--cream) }
.on-dark .venue-h{ color:var(--sunset) }
.on-dark .venue dt{ color:var(--cream-dim) }
.on-dark .venue dd{ color:var(--cream-soft) }
.on-dark .venue dd.yes{ color:var(--cream) }
.on-dark .venue dd.yes::before{ color:var(--sunset) }

/* — Chips quadrados (nunca bubbles) — */
.chips{ margin-top:clamp(1.2rem,2.6vh,1.8rem); display:flex; flex-wrap:wrap; gap:.5rem }
.chip{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5rem .8rem; border:1px solid var(--line); color:var(--ink-soft) }
.on-dark .chip{ border-color:var(--line-cream); color:var(--cream-soft) }

/* — Linhas chave/valor — */
.rows{ margin-top:clamp(1.6rem,3.5vh,2.4rem); border-top:1px solid var(--line) }
.on-dark .rows{ border-top-color:var(--line-cream) }
.rw{ display:grid; grid-template-columns:minmax(130px,24%) 1fr; gap:clamp(.8rem,2.4vw,2rem);
  padding:.95rem 0; border-bottom:1px solid var(--line-2) }
.on-dark .rw{ border-bottom-color:rgba(242,237,230,0.10) }
.rw .k{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft) }
.on-dark .rw .k{ color:var(--cream-dim) }
.rw .v{ color:var(--ink-soft) }
.on-dark .rw .v{ color:var(--cream-soft) }
.rw .v b{ color:var(--ink); font-weight:600 }
.on-dark .rw .v b{ color:var(--cream) }
@media (max-width:640px){ .rw{grid-template-columns:1fr; gap:.25rem} }

/* — Passos numerados (logistica) — */
.steps{ margin-top:clamp(2rem,4.5vh,3rem); display:grid; gap:clamp(1.6rem,3.4vw,2.6rem) }
.step{ background:var(--sand-card); border:1px solid var(--line-2); padding:clamp(1.3rem,3vw,2.2rem) }
.step-n{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-ink) }
.step .h3{ margin-top:.5rem }
.step .body{ margin-top:.9rem }
.step .rows{ margin-top:1.2rem }
.nrows{ margin:1rem 0 0; padding:0; list-style:none; counter-reset:n; display:grid; gap:.2rem }
.nrows li{ position:relative; padding:.85rem 0 .85rem 2.6rem; border-bottom:1px solid var(--line-2);
  color:var(--ink-soft) }
.nrows li b{ color:var(--ink); font-weight:600 }
.nrows li::before{ counter-increment:n; content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:.95rem; font-family:var(--font-mono); font-size:.7rem;
  color:var(--accent-ink); letter-spacing:.1em }

/* — Grade de cards — */
.cards{ margin-top:clamp(2rem,4.5vh,3rem); display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.card{ background:var(--sand-card); box-shadow:var(--shadow-card); padding:clamp(1.4rem,3vw,2rem);
  display:flex; flex-direction:column }
.card .tg{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-ink) }
.card h3{ margin-top:.7rem; font-size:clamp(1.2rem,1rem + .7vw,1.6rem) }
.card p{ margin-top:.7rem; color:var(--ink-soft); font-size:.98rem }
.card .go{ margin-top:auto; padding-top:1.4rem }

/* — Placas dos passes: aberto x fechado tem que ser visivel de longe — */
.plates{ margin-top:clamp(2rem,4.5vh,3rem); display:grid; gap:var(--gap);
  grid-template-columns:repeat(4,1fr) }
.plate{ padding:clamp(1.3rem,2.6vw,1.8rem); display:flex; flex-direction:column }
.plate.open{ background:rgba(242,237,230,0.12); border:1px solid rgba(242,237,230,0.34) }
.plate.locked{ background:rgba(242,237,230,0.04); border:1px dashed rgba(242,237,230,0.22) }
.plate .hd{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  border-bottom:1px solid var(--line-cream); padding-bottom:.8rem }
.plate h3{ font-size:clamp(1.1rem,.95rem + .5vw,1.4rem); color:var(--cream) }
.plate.locked h3{ color:var(--cream-soft) }
.plate .st{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap; padding:.25rem .5rem; border-radius:3px }
.plate.open .st{ color:var(--ocean-deep); background:#F2D6AE }
.plate.locked .st{ color:var(--cream-dim); border:1px solid rgba(242,237,230,0.28) }
.plate p{ margin-top:.9rem; color:var(--cream-soft); font-size:.96rem }
.plate.locked p{ color:var(--cream-dim) }
/* margin-top:auto no .ft alinha a linha do Wellness em TODOS os cartoes, e o
   botao fica sempre na mesma altura, mesmo com descricoes de tamanhos diferentes */
.plate .ft{ margin-top:auto; padding-top:1.2rem; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim) }
.plate .act{ padding-top:1.1rem }
.plate .act .btn{ display:block; width:100%; padding:.85rem 1rem; font-size:.7rem }
@media (max-width:1000px){ .plates{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .plates{grid-template-columns:1fr} }

/* — Linha do tempo das edicoes — */
.eds{ margin-top:clamp(2rem,4.5vh,3rem); display:grid; gap:.55rem;
  grid-template-columns:repeat(3,1fr) }
.ed{ padding:.85rem 1rem; border:1px solid var(--line); display:flex; flex-direction:column; gap:.25rem }
.ed .y{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; color:var(--ink-soft);
  font-variant-numeric:tabular-nums }
.ed .t{ font-family:var(--font-display); font-size:clamp(.95rem,.85rem + .35vw,1.2rem); line-height:1.15 }
.ed.now{ background:var(--sand-card); border-color:var(--accent) }
.ed.now .y{ color:var(--accent-ink) }
@media (max-width:760px){ .eds{grid-template-columns:repeat(2,1fr)} }
@media (max-width:420px){ .eds{grid-template-columns:1fr} }

/* — Duas colunas incluso/a parte — */
.split{ margin-top:clamp(2rem,4.5vh,3rem); display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:1fr 1fr }
@media (max-width:760px){ .split{grid-template-columns:1fr} }
.blk .bh{ font-family:var(--font-mono); font-size:var(--fs-small); letter-spacing:.18em;
  text-transform:uppercase; padding-bottom:.7rem; border-bottom:1px solid var(--line-cream) }
.blk.yes .bh{ color:#F2D6AE }
.blk.no .bh{ color:var(--cream-dim) }
.blk ul{ list-style:none; margin:0; padding:0 }
.blk li{ position:relative; padding:.75rem 0 .75rem 1.4rem; color:var(--cream-soft);
  border-bottom:1px solid rgba(242,237,230,0.10); font-size:.98rem }
.blk li::before{ content:""; position:absolute; left:0; top:1.35rem; width:.7rem; height:1px;
  background:currentColor; opacity:.5 }

/* — FAQ — claro por padrao; a variante escura vem de .on-dark — */
.faq{ margin-top:clamp(2rem,4.5vh,3rem); border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{ list-style:none; cursor:pointer; padding:1.1rem 2.4rem 1.1rem 0; position:relative;
  font-family:var(--font-body); font-weight:600; font-size:1.02rem; color:var(--ink) }
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--accent-ink) }
.faq summary::after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); color:var(--accent-ink); font-size:1.1rem }
.faq details[open] summary::after{ content:"–" }
.faq .ans{ padding:0 0 1.2rem; color:var(--ink-soft); max-width:70ch }
.faq .ans p + p{ margin-top:.7rem }
.on-dark .faq, .on-dark .faq details{ border-color:var(--line-cream) }
.on-dark .faq summary{ color:var(--cream) }
.on-dark .faq summary::after{ color:var(--sunset) }
.on-dark .faq .ans{ color:var(--cream-soft) }


/* ============ 07b · SECAO FULL-FRAME (noites e espacos do dia) ============
   Mesmo componente do #anoite e do #wellness do site: foto sangrando atras,
   lista na frente, troca sozinha. Aqui em versao propria e auto-contida. */
.feat{ position:relative; min-height:92svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--olive-deep); padding-block:clamp(2.4rem,6vh,4rem) }
.feat-bg{ position:absolute; inset:0; z-index:0 }
.feat-layer{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.04);
  transition:opacity 1.1s var(--ease), transform 6s linear }
.feat-layer.is-on{ opacity:1; transform:scale(1) }
/* o veu escurece so o que precisa: a faixa do texto embaixo e a coluna da
   esquerda. O miolo da foto fica limpo, senao o full-frame perde a razao de ser */
.feat-veil{ position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(22,25,12,0.52) 0%, rgba(22,25,12,0.06) 26%, rgba(22,25,12,0.46) 56%, rgba(22,25,12,0.92) 100%),
    linear-gradient(90deg, rgba(22,25,12,0.56) 0%, rgba(22,25,12,0.04) 60%) }
.feat-in{ position:relative; z-index:2; width:100%; color:var(--cream) }
/* fotos de dia (Mouton, Villa, Wellness) sao claras e comem o texto branco:
   esta variante escurece mais a faixa de baixo e a coluna da esquerda */
.feat[data-tone="day"] .feat-veil{
  background:
    linear-gradient(180deg, rgba(22,25,12,0.44) 0%, rgba(22,25,12,0.10) 20%, rgba(22,25,12,0.62) 50%, rgba(22,25,12,0.95) 100%),
    linear-gradient(90deg, rgba(22,25,12,0.72) 0%, rgba(22,25,12,0.10) 62%) }
.feat[data-tone="day"] .feat-item:not(.is-on){ opacity:.78 }
.feat-in .eyebrow{ color:var(--sunset) }
.feat-in .lede{ color:var(--cream-soft) }
.feat-in .h2{ color:var(--cream); text-shadow:0 2px 26px rgba(18,20,10,.75) }
.feat-in .lede{ text-shadow:0 1px 16px rgba(18,20,10,.8) }
.fi-name,.fi-desc,.fi-meta{ text-shadow:0 1px 14px rgba(18,20,10,.75) }

.feat-list{ list-style:none; margin:clamp(2rem,5vh,3.4rem) 0 0; padding:0; display:grid;
  gap:clamp(.5rem,1.2vw,1rem); grid-template-columns:repeat(var(--n,5),1fr) }
.feat-item{ position:relative; padding:1.1rem .2rem 0; border-top:1px solid rgba(242,237,230,.26);
  cursor:pointer; transition:opacity var(--d-quick) ease }
.feat-item:not(.is-on){ opacity:.62 }
.feat-item:hover{ opacity:1 }
.fi-head{ display:flex; align-items:center; gap:.6rem }
.fi-head .mark{ width:22px; height:22px; flex:none;
  /* o SVG e branco na origem; aqui ele fica creme */
  filter:brightness(0) invert(94%) sepia(8%) saturate(180%) hue-rotate(2deg) }
.fi-name{ font-family:var(--font-display); font-size:clamp(1.15rem,.9rem + .9vw,1.9rem);
  line-height:1.05; color:var(--cream) }
.fi-desc{ display:block; margin-top:.5rem; font-size:.92rem; line-height:1.45;
  color:var(--cream-soft); max-width:34ch; max-height:0; opacity:0; overflow:hidden;
  transition:max-height var(--d-soft) var(--ease), opacity var(--d-soft) ease }
.feat-item.is-on .fi-desc{ max-height:12em; opacity:1 }
.fi-meta{ display:block; margin-top:.6rem; font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cream-dim);
  font-variant-numeric:tabular-nums }
.fi-prog{ position:absolute; left:0; top:-1px; height:1px; width:var(--prog,0%);
  background:var(--sunset); transition:width .1s linear }
.feat-foot{ margin-top:clamp(1.2rem,3vh,2rem); color:var(--cream-dim) }
@media (max-width:900px){
  .feat{ min-height:auto; padding-block:clamp(3rem,8vh,5rem) }
  .feat-list{ grid-template-columns:1fr; gap:0 }
  .feat-item{ padding:1rem .2rem }
  .feat-item:not(.is-on){ opacity:.72 }
  .feat-item.is-on{ background:rgba(242,237,230,.06) }
}
@media (prefers-reduced-motion:reduce){
  .feat-layer{ transition:none; transform:none }
  .feat-item .fi-desc{ transition:none }
}

/* ==================== 08 · FOTOS CLICAVEIS · LIGHTBOX ==================== */
/* .ph-zoom e um BOTAO (teclado e leitor de tela precisam), estilizado como foto. */
.ph-zoom{ position:relative; display:block; width:100%; padding:0; overflow:hidden;
  box-shadow:var(--shadow-photo); cursor:zoom-in; background:none; border:0 }
.ph-zoom img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--d-breath) var(--ease) }
.ph-zoom:hover img{ transform:scale(1.035) }
.ph-zoom::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(transparent 52%, rgba(20,23,10,.72)) }
.ph-zoom .lb{ position:absolute; left:.75rem; bottom:.6rem; z-index:2; text-align:left;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); text-shadow:0 1px 8px rgba(0,0,0,.7) }
/* a lupa: sinal de que da pra abrir */
.ph-zoom .zi{ position:absolute; right:.6rem; top:.6rem; z-index:2; width:26px; height:26px;
  border:1px solid rgba(242,237,230,.55); border-radius:50%; opacity:0;
  transition:opacity var(--d-quick) ease }
.ph-zoom .zi::before,.ph-zoom .zi::after{ content:""; position:absolute; background:var(--cream) }
.ph-zoom .zi::before{ left:7px; top:12px; width:11px; height:1px }
.ph-zoom .zi::after{ left:12px; top:7px; width:1px; height:11px }
.ph-zoom:hover .zi,.ph-zoom:focus-visible .zi{ opacity:1 }

/* galeria do destino */
.gal{ margin-top:clamp(1.8rem,4vh,2.8rem); display:grid; gap:clamp(.5rem,1.2vw,.9rem);
  grid-template-columns:repeat(3,1fr) }
.gal .ph-zoom img{ aspect-ratio:4/3 }
.gal-3{ grid-template-columns:repeat(3,1fr) }
.gal-hint{ margin-top:.9rem; opacity:.85 }
@media (max-width:700px){ .gal,.gal-3{grid-template-columns:repeat(2,1fr)} }

/* mosaico do palco (3 fotos) */
.mosaic{ margin-top:clamp(1.8rem,4vh,2.8rem); display:grid; gap:clamp(.6rem,1.4vw,1rem);
  grid-template-columns:repeat(3,1fr) }
.mosaic .ph-zoom img{ aspect-ratio:4/3 }
@media (max-width:700px){ .mosaic{grid-template-columns:repeat(2,1fr)} }

/* foto da noite dentro do cartao */
.night-ph .ph-zoom img{ aspect-ratio:3/2 }

.lbx{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center; justify-content:center;
  background:rgba(24,15,8,.94); padding:clamp(1rem,4vw,3rem) }
.lbx[hidden]{ display:none }
.lbx-fig{ margin:0; max-width:min(1200px,92vw); display:flex; flex-direction:column; gap:.9rem }
.lbx-fig img{ max-width:100%; max-height:78vh; width:auto; object-fit:contain;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9) }
.lbx-fig figcaption{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lab-cream); opacity:.8; text-align:center }
.lbx-close{ position:absolute; top:clamp(.8rem,2vw,1.6rem); right:clamp(.8rem,2vw,1.6rem);
  width:46px; height:46px; font-size:1.8rem; line-height:1; color:var(--lab-cream); opacity:.75;
  border-radius:50% }
.lbx-close:hover{ opacity:1; background:rgba(242,237,230,.1) }
.lbx-nav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px;
  font-size:2rem; line-height:1; color:var(--lab-cream); opacity:.6; border-radius:50% }
.lbx-nav:hover{ opacity:1; background:rgba(242,237,230,.1) }
.lbx-prev{ left:clamp(.4rem,2vw,2rem) } .lbx-next{ right:clamp(.4rem,2vw,2rem) }
@media (max-width:560px){ .lbx-nav{ top:auto; bottom:.6rem; transform:none } }

/* ============================ 09 · FORMULARIO ============================ */
.news{ margin-top:clamp(2.6rem,6vh,4rem); display:grid; gap:clamp(1.2rem,3vw,2.6rem);
  grid-template-columns:1fr 1fr; align-items:center; background:var(--sand-card);
  border:1px solid var(--line-2); padding:clamp(1.4rem,3.4vw,2.4rem) }
@media (max-width:760px){ .news{grid-template-columns:1fr} }
.news-form{ display:flex; flex-wrap:wrap; gap:.6rem }
.news-form input[type=email]{ flex:1 1 220px; min-width:0; padding:.9rem 1rem;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  font:inherit; border-radius:var(--r-control) }
.news-form input[type=email]::placeholder{ color:var(--ink-faint) }
.news-form input[type=email]:focus{ outline:2px solid var(--accent); outline-offset:2px }
.news-note{ margin-top:.8rem; font-size:var(--fs-small); color:var(--ink-soft) }
.news-note.news-ok{ color:var(--olive) }
.news-note.news-err{ color:#A8442B }

/* ============================ 10 · RODAPE ================================ */
.foot{ background:var(--lab-brown-2); color:var(--lab-cream); padding-block:clamp(3rem,7vh,5rem) }
.foot .bye{ font-family:var(--font-display); font-size:clamp(1.6rem,1rem + 2.4vw,2.8rem);
  line-height:1.1; color:var(--lab-cream); margin-bottom:clamp(2rem,5vh,3.4rem);
  letter-spacing:.01em; margin-left:-0.012em }
.foot .fin{ display:grid; gap:clamp(1.6rem,4vw,3rem); grid-template-columns:1.2fr 1fr }
@media (max-width:760px){ .foot .fin{grid-template-columns:1fr} }
.foot .tag{ margin-top:1rem; color:rgba(236,226,203,0.7); max-width:40ch; font-size:.98rem }
.foot .go{ margin-top:1.6rem }
.foot .lks{ display:grid; gap:.75rem; align-content:start }
.foot .lk{ display:grid; grid-template-columns:minmax(90px,32%) 1fr; gap:1rem; align-items:baseline;
  padding-bottom:.7rem; border-bottom:1px solid rgba(236,226,203,0.14) }
.foot .lk .k{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(236,226,203,0.62) }
.foot .lk .v{ font-size:.95rem; word-break:break-word }
.foot .lk .v a{ text-decoration:underline; text-underline-offset:.22em;
  text-decoration-color:rgba(236,226,203,0.45) }
.foot .lk .v a:hover{ text-decoration-color:var(--lab-cream) }
.foot .end{ margin-top:clamp(2.2rem,5vh,3.4rem); padding-top:1.2rem;
  border-top:1px solid rgba(236,226,203,0.14); display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(236,226,203,0.6) }

/* ================== 11 · GRAO · PROGRESSO · REVEAL ======================= */
.grain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.scrollbar{ position:fixed; top:0; left:0; height:2px; width:0; z-index:1200;
  background:linear-gradient(90deg,var(--ocean-deep),var(--ocean) 55%,var(--sunset)); transition:width .1s linear }
.reveal{ opacity:0; transform:translateY(22px); filter:blur(5px);
  transition:opacity var(--d-breath) var(--ease), transform var(--d-breath) var(--ease), filter var(--d-breath) var(--ease) }
.reveal.in{ opacity:1; transform:none; filter:none }
.reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; filter:none; transition:none}
  .ph-zoom:hover img{transform:none}
  .btn:active{transform:none}
  .sticky{transition:none}
}

/* ============================ 12 · RESPONSIVO ============================ */
@media (max-width:900px){
  /* o botao de compra vira so o essencial pra sobrar largura pro menu */
  .sticky .btn{ padding:.6rem .85rem }
}
@media (max-width:640px){
  .hero{ min-height:92svh; padding-top:calc(var(--pad-y) + 1rem) }
  .hero .cta-row .btn{ width:100% }
  .sticky .txt{ display:none }
  .sticky{ gap:.5rem; padding-inline:.7rem }
  .sticky .who{ display:none }          /* o carneiro cede lugar ao menu */
  .venue{ padding:1.1rem }
}
@media print{
  .sticky,.grain,.scrollbar,.hero-dunes,.lbx{display:none !important}
  .reveal{opacity:1; transform:none; filter:none}
}

/* ══ banner de consentimento (EEA/UK/CH) ══════════════════════════════════════
   Copia fiel do bloco do theme.css — esta pagina NAO carrega o theme, e sem
   isto o banner que o analytics.js injeta sai sem estilo nenhum. As variaveis
   usadas aqui ja existem no :root acima. Mexeu no theme? Espelhe aqui. */
.rc-consent{ position:fixed; left:0; right:0; bottom:0; z-index:3000; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:1rem;
  padding:0.9rem clamp(1rem,4vw,2rem); background:var(--olive-deep); color:var(--cream);
  border-top:1px solid color-mix(in srgb,var(--cream) 22%, transparent) }
.rc-consent p{ margin:0; font-size:0.85rem; line-height:1.45; max-width:64ch }
.rc-consent div{ display:flex; gap:0.6rem; flex-shrink:0 }
.rc-consent button{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.6rem 1.1rem; border:1px solid color-mix(in srgb,var(--cream) 45%, transparent);
  color:var(--cream); background:none; transition:background .25s var(--ease), color .25s var(--ease) }
.rc-consent button:hover{ background:color-mix(in srgb,var(--cream) 14%, transparent) }
.rc-consent button.on{ background:var(--sunset); border-color:var(--sunset); color:var(--olive-deep) }
.rc-consent button.on:hover{ background:var(--sunset-deep); border-color:var(--sunset-deep) }
@media (max-width:560px){ .rc-consent{ flex-direction:column; align-items:flex-start } .rc-consent div{ width:100% } .rc-consent button{ flex:1 } }