/* =========================================================
   MARAM BEACH GARDEN — sistema visual
   Um dia no Maram: da areia clara ao verde da noite.
   ========================================================= */

:root{
  color-scheme: dark;

  --night:      #0C1F1B;
  --night-2:    #102A24;
  --club:       #071614;
  --sea:        #0F3C3A;
  --sea-deep:   #072A2C;
  --sand:       #EDE6D8;
  --sand-2:     #E3DAC8;
  --foam:       #F7F3EA;
  --ink:        #16241F;
  --ink-soft:   #4C5C53;
  --sal:        #A9BDB2;
  --sol:        #E4A24A;
  --neon:       #57D97E;   /* o verde das luzes na mata, do acervo da casa */
  --sol-soft:   #F2D8A8;
  --sol-deep:   #B8722C;

  --display: "Hoefler Text", Baskerville, "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Nunito Sans", "Segoe UI", Roboto, system-ui, sans-serif;

  --step--2: clamp(.68rem, .66rem + .1vw, .74rem);
  --step--1: clamp(.78rem, .74rem + .18vw, .86rem);
  --step-0:  clamp(1rem, .96rem + .25vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.12rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.3rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
  --step-4:  clamp(3rem, 2rem + 6vw, 7rem);

  --measure: 62ch;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --bandpad: clamp(4.5rem, 10vw, 9rem);
  --radius: 4px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
img,svg{ max-width:100%; display:block; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 2px; }

/* ---------- primitivas ---------- */
.wrap{ width:100%; max-width: 1180px; margin-inline:auto; padding-inline: var(--pad); }
.band{ padding-block: var(--bandpad); }
.stack{ display:grid; gap: 1.1rem; align-content:start; }
.stack-lg{ display:grid; gap: clamp(2rem,4vw,3.25rem); }
p{ max-width: var(--measure); margin:0; }

.eyebrow{
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--sol-deep);
  display:flex; align-items:center; gap:.75rem;
  margin:0;
}
.eyebrow::after{
  content:""; height:1px; flex:1 1 auto; max-width:5rem;
  background: currentColor; opacity:.45;
}
.h2{
  font-family: var(--display);
  font-size: var(--step-3);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin:0;
}
.h3{
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.2;
  font-weight: 400;
  margin:0;
  text-wrap: balance;
}
.lede{
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 36ch;
  color: var(--ink-soft);
  margin:0;
}
.lede-sm{ font-size: var(--step-0); max-width: 42ch; }

.head-row{
  display:grid; gap: clamp(1.25rem,3vw,3rem);
  grid-template-columns: 1fr;
  align-items:end;
}
@media (min-width: 860px){
  .head-row{ grid-template-columns: 1.1fr .9fr; }
}

.list{
  margin:0; padding:0; list-style:none;
  display:grid; gap:.55rem;
  font-size: var(--step--1);
  letter-spacing:.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.list li{ display:flex; gap:.65rem; align-items:baseline; }
.list li::before{ content:"—"; color: var(--sol); flex:none; }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family: var(--sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing:.14em;
  font-weight: 600;
  text-decoration:none;
  padding: .95em 1.7em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-sm{ padding: .7em 1.25em; font-size: var(--step--2); }
.btn-block{ width:100%; }
.btn-sol{ background: var(--sol); color:#23180A; }
.btn-sol:hover{ background: var(--sol-soft); transform: translateY(-2px); }
.btn-ink{ background: var(--ink); color: var(--sand); }
.btn-ink:hover{ background: var(--sea); transform: translateY(-2px); }
.btn-line{ border-color: currentColor; background: transparent; color: inherit; }
.btn-line:hover{ border-color: var(--sol); color: var(--sol); transform: translateY(-2px); }
.btn-ghost{ border-color: rgba(247,243,234,.6); color: inherit; background: transparent; }
.btn-ghost:hover{ background: var(--sand); color: var(--night); border-color: var(--sand); transform: translateY(-2px); }
.actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

.link-cta{
  justify-self:start;
  font-size: var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  text-decoration:none;
  color: var(--sol-deep);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition: color .2s ease;
}
.link-cta:hover{ color: var(--ink); }

/* ---------- faixas escuras ---------- */
.on-dark{ color: var(--sand); }
.on-dark .eyebrow{ color: var(--sol); }
.on-dark .lede, .on-dark p{ color: var(--sal); }
.on-dark .list{ color: var(--sal); }
.on-dark .link-cta{ color: var(--sol); }
.on-dark .link-cta:hover{ color: var(--sand); }

.band-sand{ background: var(--sand); }
.band-sand-2{ background: var(--sand-2); }
.band-sea{ background: var(--sea-deep); }
.band-night{ background: var(--night); }
.band-club{ background: linear-gradient(180deg, #071614 0%, #0B231F 55%, #071614 100%); }
.band-sunset{ background: linear-gradient(168deg, #7C4A2A 0%, #A8703A 38%, #5C3B2A 74%, #24211D 100%); }
.rule-top{ border-top: 1px solid rgba(22,36,31,.12); }

/* ---------- cabeçalho ---------- */
.site-head{
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.1rem var(--pad);
  color: var(--sand);
  transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease;
}
.site-head[data-pinned="true"]{
  background: rgba(10,26,22,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-block:.7rem;
  box-shadow: 0 1px 0 rgba(237,230,216,.12);
}
.mark{
  font-family: var(--display);
  font-size: 1.28rem;
  letter-spacing:.03em;
  text-decoration:none;
  line-height:1;
}
.mark small{
  display:block;
  font-family: var(--sans);
  font-size:.58rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  opacity:.72;
  margin-top:.3rem;
}
.nav{ display:none; gap: clamp(1rem,2.2vw,1.9rem); align-items:center; }
.nav a{
  font-size: var(--step--1);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  opacity:.85;
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}
.nav a:hover{ opacity:1; border-bottom-color: var(--sol); }
.head-cta{ display:none; }
@media (min-width: 900px){ .nav{ display:flex; } .head-cta{ display:inline-flex; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height: 100svh;
  display:grid; align-items:end;
  isolation:isolate; overflow:hidden;
  background: linear-gradient(#071E22 0%, #0C2F31 34%, #1E4A42 58%, #6E5C36 82%, #A8703A 100%);
  color: var(--sand);
}
.hero-scene{ position:absolute; inset:0; z-index:-1; }
.hero-scene svg{ position:absolute; bottom:0; left:0; width:100%; height:100%; }
/* Foto do acervo: entra por cima da cena vetorial. */
.hero-foto{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity:.85;
}
.hero-foto ~ .sun{ opacity:.35; }
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(7,22,20,.55) 0%, rgba(7,22,20,.05) 38%, rgba(7,22,20,.72) 100%);
  pointer-events:none;
}
.sun{
  position:absolute;
  left:50%; bottom:22%;
  width: clamp(120px, 17vw, 230px); aspect-ratio:1;
  margin-left: clamp(-115px,-8.5vw,-60px);
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #FFE6B0 0%, #F2B75C 46%, rgba(228,162,74,0) 71%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform: translate3d(-6%, 2%, 0) scale(.98); }
  to  { transform: translate3d(6%, -3%, 0) scale(1.03); }
}
.hero-inner{
  position:relative;
  padding-block: clamp(5rem,12vh,9rem) clamp(3rem,9vh,5.5rem);
  display:grid; gap: clamp(1.5rem,3vw,2.25rem);
}
.hero-eyebrow{
  font-size: var(--step--1);
  text-transform:uppercase; letter-spacing:.28em; font-weight:600;
  color: var(--sol-soft);
  margin:0;
}
.hero h1{
  font-family: var(--display);
  font-weight:400;
  font-size: var(--step-4);
  line-height:.92;
  letter-spacing:-.025em;
  margin:0;
}
.hero h1 em{
  display:block;
  font-style:normal;
  font-family: var(--sans);
  font-size: clamp(.72rem, .5rem + 1.1vw, 1.15rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:500;
  margin-top: clamp(.7rem,1.6vw,1.1rem);
  padding-left:.4em;
  color: var(--sol-soft);
}
.hero .lede{ color: rgba(247,243,234,.9); max-width: 40ch; }
.hero-foot{
  border-top:1px solid rgba(247,243,234,.22);
  padding-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:baseline; justify-content:space-between;
}
.hero-foot .meta{
  font-size: var(--step--1);
  letter-spacing:.14em; text-transform:uppercase;
  color: rgba(247,243,234,.72);
  margin:0;
}

/* ---------- arco do dia ---------- */
.arc{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center;
  font-size: var(--step--1);
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--ink-soft);
  margin:0; padding:0; list-style:none;
}
.arc li{ display:flex; align-items:center; gap:.7rem; }
.arc li::before{
  content:""; width:.45rem; height:.45rem; border-radius:50%;
  background: var(--sol); opacity:.45;
}

/* ---------- grids ---------- */
.split{ display:grid; gap: clamp(2rem,5vw,4.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width: 860px){ .split{ grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }
@media (min-width: 860px){ .split-form{ grid-template-columns: minmax(0,1fr) minmax(0,.8fr); } }

.cards{ display:grid; gap: clamp(1.25rem,2.5vw,2rem); grid-template-columns:1fr; }
@media (min-width: 780px){ .cards{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 780px){ .cards-3{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 640px){ .cards-4{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px){ .cards-4{ grid-template-columns: repeat(4,1fr); } }

.card{
  display:grid; gap:.85rem; align-content:start;
  padding: clamp(1.5rem,3vw,2.25rem);
  border-radius: var(--radius);
  background: var(--foam);
  border:1px solid rgba(22,36,31,.1);
}
.card p{ font-size: var(--step-0); color: var(--ink-soft); }
.on-dark .card{ background: rgba(247,243,234,.05); border-color: rgba(247,243,234,.16); }

/* ---------- agenda (a revista) ---------- */
.rail{
  display:grid; gap: 1.25rem;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(78vw, 300px), 1fr);
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail > *{ scroll-snap-align: start; }
@media (min-width: 1000px){
  .rail{ grid-auto-flow: row; grid-template-columns: repeat(4,1fr); overflow: visible; }
}
.event{
  display:grid; gap:.8rem; align-content:start;
  padding: 1.5rem;
  background: var(--foam);
  border:1px solid rgba(22,36,31,.1);
  border-top: 2px solid var(--sol);
  border-radius: var(--radius);
}
.event p{ font-size: var(--step--1); color: var(--ink-soft); }
.event-date{
  font-size: var(--step--1);
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:600;
  color: var(--sol-deep) !important;
  font-variant-numeric: tabular-nums;
}
.price-row{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; }
.price{
  font-size: var(--step--1);
  letter-spacing:.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin:0;
}
.price b{ color: var(--ink); font-weight:600; }
.on-dark .price{ color: var(--sal); }
.on-dark .price b{ color: var(--sand); }
.chip{
  display:inline-flex; align-items:center;
  font-size: var(--step--2);
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:.35em .8em;
  border-radius:999px;
  background: rgba(22,36,31,.08);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.chip-sol{ background: rgba(228,162,74,.22); color: var(--sol-deep); }

/* ---------- figura de largura cheia ---------- */
.figura{ margin:0; display:grid; gap:.75rem; }
.figura img{
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.figura figcaption{
  font-size: var(--step--1);
  letter-spacing:.06em;
  color: var(--ink-soft);
}
.on-dark .figura figcaption{ color: var(--sal); }

/* ---------- tira de três ---------- */
.tira{ display:grid; gap:.6rem; grid-template-columns: repeat(3,1fr); }
.tira img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform .5s ease;
}
.tira img:hover{ transform: scale(1.02); }

/* ---------- mosaico do acervo ---------- */
.mosaico{
  display:grid; gap:.6rem;
  grid-template-columns: repeat(2,1fr);
}
@media (min-width: 720px){ .mosaico{ grid-template-columns: repeat(4,1fr); } }
.mosaico img{
  width:100%; height:100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  filter: saturate(1.04);
  transition: transform .5s ease, filter .5s ease;
}
.mosaico img:hover{ transform: scale(1.02); filter: saturate(1.15) brightness(1.06); }
@media (min-width: 720px){
  .mosaico img:first-child{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* ---------- Aura Wellness ---------- */
.band-aura{
  background: linear-gradient(172deg, #123A3C 0%, #16493F 45%, #0C2A26 100%);
}
.ritual{
  display:grid; gap:0; margin:0; padding:0; list-style:none;
  grid-template-columns:1fr;
  counter-reset: passo;
}
@media (min-width: 820px){ .ritual{ grid-template-columns: repeat(3,1fr); } }
.ritual-passo{
  display:grid; gap:.6rem; align-content:start;
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-top:1px solid rgba(247,243,234,.24);
}
@media (min-width: 820px){
  .ritual-passo{ padding-right: 2.5rem; }
}
.ritual-passo .h3{ color: var(--sand); }
.ritual-hora{
  font-size: var(--step--1);
  letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  margin:0;
}

/* ---------- quem somos: as camadas ---------- */
.estrutura{
  display:grid; gap: clamp(1rem,2vw,1.5rem); margin:0; padding:0; list-style:none;
  grid-template-columns:1fr;
}
@media (min-width: 700px){ .estrutura{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1060px){ .estrutura{ grid-template-columns: repeat(3,1fr); } }
.camada{
  display:grid; gap:.45rem; align-content:start;
  padding: 1.5rem;
  background: var(--foam);
  border:1px solid rgba(22,36,31,.1);
  border-top:2px solid rgba(22,36,31,.2);
  border-radius: var(--radius);
}
.camada-centro{ border-top-color: var(--sol); background:#FBF8F1; }
.camada-tag{
  font-size: var(--step--2);
  letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color: var(--sol-deep) !important;
  margin:0;
}
.camada p{ font-size: var(--step--1); color: var(--ink-soft); }
.camada a{ color: var(--sol-deep); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- experiências ---------- */
.feature{ display:grid; gap: clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; }
@media (min-width: 880px){ .feature{ grid-template-columns: repeat(2,1fr); } }
.feature-item{
  display:grid; gap:.9rem; align-content:start;
  padding-top:1.5rem;
  border-top:1px solid rgba(247,243,234,.28);
}
.feature-item .kicker{
  font-size: var(--step--1);
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--sol-soft) !important;
  margin:0;
}
.feature-item .h3{ font-size: var(--step-2); }

/* ---------- club ---------- */
.perks{
  display:grid; gap:0; margin:0; padding:0; list-style:none;
  grid-template-columns:1fr;
  border-top:1px solid rgba(247,243,234,.18);
}
@media (min-width: 700px){ .perks{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1020px){ .perks{ grid-template-columns: repeat(3,1fr); } }
.perk{
  display:grid; gap:.4rem; align-content:start;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-bottom:1px solid rgba(247,243,234,.18);
}
@media (min-width: 700px){ .perk{ padding-right: 2.5rem; } }
.perk-tag{
  font-size: var(--step--1);
  letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  margin:0;
}
.perk-txt{ font-size: var(--step-0); color: var(--sal) !important; }

.plans{ display:grid; gap: clamp(1rem,2vw,1.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width: 880px){ .plans{ grid-template-columns: repeat(3,1fr); } }
.plan{
  display:grid; gap:1.1rem; align-content:start;
  padding: clamp(1.6rem,3vw,2.25rem);
  border:1px solid rgba(247,243,234,.2);
  border-radius: var(--radius);
  background: rgba(247,243,234,.04);
}
.plan-featured{
  border-color: var(--sol);
  background: rgba(228,162,74,.08);
}
.plan-flag{
  font-size: var(--step--2);
  letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color: var(--sol) !important;
  margin:0;
}
.plan-name{
  font-family: var(--display);
  font-size: var(--step-2);
  line-height:1;
  color: var(--sand) !important;
  margin:0;
}
.plan-price{
  font-family: var(--display);
  font-size: clamp(2.4rem,5vw,3.2rem);
  line-height:1;
  color: var(--sand) !important;
  margin:0;
  font-variant-numeric: tabular-nums;
  display:flex; align-items:baseline; gap:.2rem;
}
.plan-price span{ font-size:.4em; letter-spacing:.05em; opacity:.7; }
.plan-price small{
  font-family: var(--sans);
  font-size:.26em; letter-spacing:.14em; text-transform:uppercase;
  opacity:.7; margin-left:.2rem;
}
.nota{
  font-size: var(--step--1);
  line-height:1.55;
  padding-left: 1rem;
  border-left: 2px solid var(--sol);
}
.nota a{ color: var(--sol); text-decoration:none; border-bottom:1px solid currentColor; }

.fineprint{
  font-size: var(--step--1);
  letter-spacing:.06em;
  color: var(--sal) !important;
  margin:0;
}
.fineprint a{ color: var(--sol); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- loja ---------- */
.product{
  display:grid; gap:.7rem; align-content:start;
  padding: 1.5rem;
  background: var(--foam);
  border:1px solid rgba(22,36,31,.1);
  border-radius: var(--radius);
}
.product p{ font-size: var(--step--1); color: var(--ink-soft); }
.product .price{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .7rem; font-size: var(--step-0); }

/* ---------- formulário ---------- */
.form{
  display:grid; gap:1rem;
  padding: clamp(1.5rem,3vw,2.25rem);
  background: rgba(247,243,234,.05);
  border:1px solid rgba(247,243,234,.18);
  border-radius: var(--radius);
}
.field{ display:grid; gap:.4rem; }
.field label{
  font-size: var(--step--1);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--sal);
}
.field input{
  font-family: var(--sans);
  font-size: var(--step-0);
  color: var(--sand);
  background: rgba(7,22,20,.5);
  border:1px solid rgba(247,243,234,.24);
  border-radius: 3px;
  padding:.8em .9em;
  width:100%;
}
.field input:focus-visible{ border-color: var(--sol); }
.check{
  display:flex; gap:.7rem; align-items:flex-start;
  font-size: var(--step--1);
  color: var(--sal);
  line-height:1.45;
}
.check input{ margin-top:.35em; accent-color: var(--sol); flex:none; }
.form-msg{
  font-size: var(--step--1);
  letter-spacing:.06em;
  min-height:1.2em;
  margin:0;
  color: var(--sol) !important;
}
.form-msg[data-state="erro"]{ color: #F0A08A !important; }

/* ---------- modal de reserva rápida ---------- */
.modal-mask{
  position:fixed; inset:0; background:rgba(7,22,20,.72);
  display:flex; align-items:center; justify-content:center;
  padding: var(--pad); z-index:90; opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.modal-mask.on{ opacity:1; pointer-events:auto; }
.modal-box{
  width:100%; max-width: 28rem; background: var(--night-2);
  border:1px solid rgba(247,243,234,.18); border-radius: var(--radius);
  padding: clamp(1.5rem,3vw,2.25rem);
  max-height: 90vh; overflow-y:auto; color: var(--sand);
}
.modal-box .h3{ color: var(--foam); margin-bottom:.35rem; }
.modal-box .sub{ font-size: var(--step--1); color: var(--sal); margin-bottom:1.1rem; }
.modal-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.modal-close{
  background:none; border:none; color: var(--sal);
  font-size: var(--step-1); cursor:pointer; line-height:1; padding:.2em .3em; flex:none;
}
.modal-close:hover{ color: var(--sol); }
.modal-box .field select{
  font-family: var(--sans); font-size: var(--step-0); color: var(--sand);
  background: rgba(7,22,20,.5); border:1px solid rgba(247,243,234,.24);
  border-radius:3px; padding:.8em .9em; width:100%;
}

/* ---------- contato ---------- */
.contact-grid{ display:grid; gap: clamp(2rem,4vw,3.5rem); grid-template-columns:1fr; }
@media (min-width: 820px){ .contact-grid{ grid-template-columns: 1.1fr .9fr; } }
.dl{ display:grid; gap:1.4rem; margin:0; }
.dl dt{
  font-size: var(--step--1);
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--sol);
  margin-bottom:.3rem;
}
.dl dd{ margin:0; font-size: var(--step-0); color: var(--sand); }
.dl dd a{ text-decoration:none; border-bottom:1px solid rgba(237,230,216,.35); padding-bottom:1px; }
.dl dd a:hover{ border-bottom-color: var(--sol); }

/* ---------- rodapé ---------- */
.site-foot{
  background:#08150F;
  color: var(--sal);
  padding-block:2.5rem;
  font-size: var(--step--1);
}
.foot-inner{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; }
.foot-inner p{ margin:0; letter-spacing:.08em; }
.foot-inner a{ color: var(--sol); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* =========================================================
   ÁREA DO SÓCIO (club.html)
   ========================================================= */
.socio{ background: var(--night); color: var(--sand); min-height:100vh; }
.socio p{ color: var(--sal); }

.socio-head{
  position: sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1rem var(--pad);
  background: rgba(7,22,20,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(247,243,234,.14);
}
.socio-main{ padding-block: clamp(2rem,5vw,3.5rem) clamp(4rem,8vw,6rem); display:grid; gap: clamp(2rem,4vw,3rem); }

/* carteirinha */
.carteira{
  display:grid; gap: clamp(1.25rem,3vw,2rem);
  grid-template-columns:1fr;
  padding: clamp(1.5rem,3.5vw,2.5rem);
  border-radius: 6px;
  border:1px solid rgba(228,162,74,.4);
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(228,162,74,.22) 0%, rgba(228,162,74,0) 55%),
    linear-gradient(150deg, #0E2A25 0%, #071614 100%);
}
@media (min-width: 780px){
  .carteira{ grid-template-columns: 1.3fr .7fr; align-items:center; }
}
.carteira-id{ display:grid; gap:.5rem; align-content:center; }
.carteira-nome{
  font-family: var(--display);
  font-size: var(--step-3);
  line-height:1.02;
  color: var(--sand) !important;
  margin:0;
}
.carteira-plano{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size: var(--step--1);
  letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  margin:0;
}
.carteira-plano::before{
  content:""; width:.5rem; height:.5rem; border-radius:50%;
  background: var(--sol);
}
.carteira-meta{
  display:grid; gap:.9rem;
  padding-left: clamp(0rem,2vw,1.5rem);
  border-left:1px solid rgba(247,243,234,.16);
}
@media (max-width: 779px){
  .carteira-meta{ border-left:0; border-top:1px solid rgba(247,243,234,.16); padding-left:0; padding-top:1.25rem; }
}
.meta-item{ display:grid; gap:.15rem; }
.meta-item dt{
  font-size: var(--step--2);
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--sal);
}
.meta-item dd{
  margin:0;
  font-size: var(--step-0);
  font-weight:600;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
  letter-spacing:.08em;
}

/* métricas */
.stats{ display:grid; gap:1rem; grid-template-columns: repeat(2,1fr); }
@media (min-width: 880px){ .stats{ grid-template-columns: repeat(4,1fr); } }
.stat{
  display:grid; gap:.35rem; align-content:start;
  padding: 1.25rem;
  border:1px solid rgba(247,243,234,.16);
  border-radius: var(--radius);
  background: rgba(247,243,234,.04);
}
.stat-label{
  font-size: var(--step--2);
  letter-spacing:.18em; text-transform:uppercase;
  color: var(--sal) !important;
  margin:0;
}
.stat-value{
  font-family: var(--display);
  font-size: clamp(1.8rem,3.5vw,2.4rem);
  line-height:1;
  color: var(--sand) !important;
  margin:0;
  font-variant-numeric: tabular-nums;
}
.stat-note{ font-size: var(--step--2); color: var(--sal) !important; margin:0; }

/* seções do painel */
.painel{ display:grid; gap:1.25rem; }
.painel-head{ display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:baseline; justify-content:space-between; }
.painel-head h2{
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight:400;
  margin:0;
  color: var(--sand);
}

/* linhas (reservas, benefícios, agenda) */
.rows{ display:grid; gap:.6rem; margin:0; padding:0; list-style:none; }
.row{
  display:grid; gap:.6rem 1.25rem;
  grid-template-columns:1fr;
  align-items:center;
  padding: 1.1rem 1.25rem;
  border:1px solid rgba(247,243,234,.14);
  border-left:2px solid rgba(247,243,234,.28);
  border-radius: var(--radius);
  background: rgba(247,243,234,.03);
}
@media (min-width: 760px){
  .row{ grid-template-columns: 8.5rem minmax(0,1fr) auto auto; }
}
.row[data-destino="altamare"]{ border-left-color: var(--sol); }
.row-when{
  font-size: var(--step--1);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  font-variant-numeric: tabular-nums;
  margin:0;
}
.row-what{ display:grid; gap:.2rem; }
.row-what strong{ font-weight:600; color: var(--sand); font-size: var(--step-0); }
.row-what span{ font-size: var(--step--1); color: var(--sal); }
.row-price{
  font-size: var(--step-0);
  color: var(--sand) !important;
  font-variant-numeric: tabular-nums;
  margin:0;
}
.row-price s{ color: var(--sal); font-size: var(--step--1); margin-right:.4rem; }

.status{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size: var(--step--2);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.35em .8em;
  border-radius:999px;
  white-space: nowrap;
}
.status::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background: currentColor; }
.status-ok{ background: rgba(126,178,132,.16); color:#9CCBA2; }
.status-espera{ background: rgba(228,162,74,.18); color: var(--sol); }
.status-usado{ background: rgba(247,243,234,.08); color: var(--sal); }

/* benefícios ativos */
.beneficios{ display:grid; gap:.6rem; grid-template-columns:1fr; margin:0; padding:0; list-style:none; }
@media (min-width: 700px){ .beneficios{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px){ .beneficios{ grid-template-columns: repeat(3,1fr); } }
.beneficio{
  display:grid; gap:.3rem; align-content:start;
  padding: 1.1rem 1.25rem;
  border:1px solid rgba(247,243,234,.14);
  border-radius: var(--radius);
  background: rgba(247,243,234,.03);
}
.beneficio h3{
  font-size: var(--step--1);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--sol);
  margin:0;
}
.beneficio p{ font-size: var(--step--1); margin:0; }
.beneficio-valor{ color: var(--sand) !important; font-weight:600; font-variant-numeric: tabular-nums; }

/* =========================================================
   REVISTA (revista.html) — as reportagens
   ========================================================= */
.materia{ display:grid; gap: clamp(1.25rem,2.5vw,2rem); align-content:start; }
.materia-texto{ display:grid; gap:.9rem; align-content:start; }
.materia-texto .h2,
.materia-texto .h3{ color: var(--sand); }
.materia-texto .h3{ font-size: var(--step-2); }

.editoria{
  font-size: var(--step--1);
  letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  margin:0;
}

.materia-capa{ padding-block: clamp(1rem,3vw,2rem); }
@media (min-width: 900px){
  .materia-capa{ grid-template-columns: 1.1fr .9fr; align-items:center; gap: clamp(2rem,4vw,3.5rem); }
}

.materias{ display:grid; gap: clamp(2rem,4vw,3rem); grid-template-columns:1fr; }
@media (min-width: 820px){ .materias{ grid-template-columns: repeat(2,1fr); } }

/* espaço reservado para as fotos que vêm do acervo */
.foto{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border:1px dashed rgba(247,243,234,.28);
  background:
    radial-gradient(90% 130% at 25% 15%, rgba(228,162,74,.16) 0%, rgba(228,162,74,0) 60%),
    linear-gradient(150deg, #10322B 0%, #071614 100%);
  overflow:hidden;
}
.foto-capa{ aspect-ratio: 3 / 2; }
.foto-nota{
  font-size: var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--sal);
  text-align:center;
  padding: 0 1.5rem;
  max-width: 26ch;
}
.foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.foto:has(img){ border-style:solid; }
.foto:has(img) .foto-nota{ display:none; }

/* =========================================================
   LOJA (loja.html) — e-commerce do Maram e da Virada
   ========================================================= */
.loja-layout{ display:grid; gap: clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width: 1000px){ .loja-layout{ grid-template-columns: minmax(0,1fr) 22rem; } }

.produtos{ display:grid; gap: clamp(1rem,2vw,1.5rem); grid-template-columns:1fr; }
@media (min-width: 620px){ .produtos{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1240px){ .produtos{ grid-template-columns: repeat(3,1fr); } }

.produto-card{
  display:grid; align-content:start;
  border:1px solid rgba(247,243,234,.16);
  border-radius: var(--radius);
  background: rgba(247,243,234,.03);
  overflow:hidden;
}
.produto-capa{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #10322B 0%, #071614 100%);
}
.produto-card[data-marca="virada"] .produto-capa{
  background: linear-gradient(150deg, #4A2E1E 0%, #1A1512 100%);
}
.produto-card[data-marca="altamare"] .produto-capa{
  background: linear-gradient(150deg, #143A3E 0%, #0A1F22 100%);
}
.safra{
  display:inline-flex; align-items:center;
  margin-left:.6rem;
  font-size: var(--step--2);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:.2em .65em;
  border-radius:999px;
  background: rgba(228,162,74,.16);
  color: var(--sol);
}
.produto-capa > span:first-child{
  font-family: var(--display);
  font-size: clamp(3rem,7vw,4.5rem);
  line-height:1;
  color: rgba(228,162,74,.35);
}
.produto-marca{
  position:absolute; top:.75rem; left:.75rem;
  font-size: var(--step--2);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--sand);
  background: rgba(7,22,20,.65);
  padding:.3em .75em;
  border-radius:999px;
}
.produto-corpo{ display:grid; gap:.6rem; padding: 1.25rem; }
.produto-cat{
  font-size: var(--step--2);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  margin:0;
}
.produto-corpo .h3{ color: var(--sand); font-size: var(--step-1); }
.produto-desc{ font-size: var(--step--1); color: var(--sal) !important; }
.produto-opcoes{ display:flex; flex-wrap:wrap; gap:.6rem; }
.opcao{ display:grid; gap:.25rem; flex:1 1 7rem; }
.opcao span{
  font-size: var(--step--2);
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--sal);
}
.opcao select{
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--sand);
  background: rgba(7,22,20,.5);
  border:1px solid rgba(247,243,234,.24);
  border-radius:3px;
  padding:.5em .6em;
  width:100%;
}

/* carrinho */
.carrinho{
  display:grid; gap:1rem;
  padding: clamp(1.25rem,2.5vw,1.75rem);
  border:1px solid rgba(228,162,74,.35);
  border-radius: var(--radius);
  background: rgba(228,162,74,.05);
}
@media (min-width: 1000px){ .carrinho{ position: sticky; top: 5.5rem; } }
.carrinho .painel-head h2{ font-size: var(--step-1); }
.carrinho .form{ background:transparent; border:0; padding:0; }

.itens-carrinho{ display:grid; gap:.5rem; margin:0; padding:0; list-style:none; }
.item-carrinho{
  display:grid; gap:.4rem .75rem;
  grid-template-columns: minmax(0,1fr) auto;
  align-items:center;
  padding:.75rem 0;
  border-bottom:1px solid rgba(247,243,234,.12);
}
.item-quem{ display:grid; gap:.1rem; grid-column:1 / -1; }
.item-quem strong{ font-size: var(--step--1); color: var(--sand); font-weight:600; }
.item-quem span{ font-size: var(--step--2); color: var(--sal); letter-spacing:.06em; }
.item-qtd{ display:flex; align-items:center; gap:.5rem; }
.item-qtd button{
  width:1.75rem; height:1.75rem;
  display:grid; place-items:center;
  font-size:1rem; line-height:1;
  color: var(--sand);
  background: rgba(7,22,20,.5);
  border:1px solid rgba(247,243,234,.24);
  border-radius:50%;
  cursor:pointer;
}
.item-qtd button:hover{ border-color: var(--sol); color: var(--sol); }
.item-qtd span{ font-size: var(--step--1); font-variant-numeric: tabular-nums; min-width:1.2rem; text-align:center; }
.item-preco{
  font-size: var(--step--1); font-weight:600;
  color: var(--sand) !important;
  font-variant-numeric: tabular-nums;
  margin:0; text-align:right;
}

.resumo{ display:grid; gap:.35rem; }
.resumo-linha, .resumo-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size: var(--step--1);
  color: var(--sal) !important;
  margin:0;
  font-variant-numeric: tabular-nums;
}
.resumo-linha s{ color: var(--sal); }
.resumo-economia b{ color: var(--sol); }
.resumo-dica b{ color: var(--sol); }
.resumo-total{
  padding-top:.6rem;
  border-top:1px solid rgba(247,243,234,.2);
  font-size: var(--step-0);
}
.resumo-total b{ font-family: var(--display); font-size: var(--step-2); color: var(--sand); }

.field-botao{ align-content:end; }

/* ---------- página do evento ---------- */
.evento-topo{ display:grid; gap:1rem; padding-block: clamp(1rem,3vw,2rem) 0; }
.evento-topo .h2{ color: var(--sand); }
.evento-topo .lede{ max-width: 44ch; }
.row[data-estado="em breve"]{ opacity:.6; }

/* =========================================================
   RECEPÇÃO (recepcao.html) — tela de operação
   ========================================================= */
.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;
}
.head-data{
  font-size: var(--step--1);
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--sal) !important;
  margin:0;
}
.stats-5{ grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px){ .stats-5{ grid-template-columns: repeat(5,1fr); } }
.stat-destaque{ border-color: rgba(228,162,74,.55); background: rgba(228,162,74,.08); }
.stat-destaque .stat-value{ color: var(--sol) !important; }

.operacao-duo{ display:grid; gap: clamp(1.5rem,3vw,2.5rem); grid-template-columns:1fr; align-items:start; }
@media (min-width: 1000px){ .operacao-duo{ grid-template-columns: 1.05fr .95fr; } }

.field-busca{ min-width: min(100%, 20rem); }
.field-busca input{ font-size: var(--step--1); }

.form-linha{ gap:.75rem; }
.campos-3{ display:grid; gap:.75rem; grid-template-columns: repeat(3,1fr); }
.field select{
  font-family: var(--sans);
  font-size: var(--step-0);
  color: var(--sand);
  background: rgba(7,22,20,.5);
  border:1px solid rgba(247,243,234,.24);
  border-radius:3px;
  padding:.8em .9em;
  width:100%;
}

.reserva{
  display:grid; gap:.6rem 1.25rem;
  grid-template-columns:1fr;
  align-items:center;
  padding: 1rem 1.15rem;
  border:1px solid rgba(247,243,234,.14);
  border-left:2px solid rgba(247,243,234,.28);
  border-radius: var(--radius);
  background: rgba(247,243,234,.03);
}
@media (min-width: 720px){
  .reserva{ grid-template-columns: 4rem minmax(0,1fr) auto auto; }
}
.reserva[data-estado="chegou"]{ border-left-color:#7EB284; }
.reserva[data-estado="faltou"]{ opacity:.55; }
.reserva[data-estado="chamado"]{ border-left-color: var(--sol); }
.reserva-hora{
  font-size: var(--step-0);
  font-weight:600;
  letter-spacing:.06em;
  color: var(--sol) !important;
  font-variant-numeric: tabular-nums;
  margin:0;
}
.reserva-quem{ display:grid; gap:.15rem; }
.reserva-quem strong{ font-weight:600; color: var(--sand); font-size: var(--step-0); }
.reserva-quem span{ font-size: var(--step--1); color: var(--sal); }
.reserva-acoes{ display:flex; flex-wrap:wrap; gap:.5rem; }

.selo-vip{
  display:inline-flex; align-items:center;
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:.2em .6em;
  border-radius:999px;
  background: rgba(228,162,74,.2);
  color: var(--sol);
  margin-left:.4rem;
}

.cadastros{ display:grid; gap:.4rem; margin:0; padding:0; list-style:none; }
.cadastro{
  display:grid; gap:.1rem;
  padding:.75rem 1rem;
  border-left:2px solid var(--sol);
  background: rgba(247,243,234,.03);
  border-radius:0 var(--radius) var(--radius) 0;
}
.cadastro strong{ font-size: var(--step--1); color: var(--sand); font-weight:600; }
.cadastro span{ font-size: var(--step--2); color: var(--sal); letter-spacing:.06em; }

.vazio{
  padding:1rem 1.15rem;
  font-size: var(--step--1);
  color: var(--sal);
  border:1px dashed rgba(247,243,234,.2);
  border-radius: var(--radius);
}

/* =========================================================
   MARAM SESSIONS (sets.html)
   ========================================================= */
.sessions-topo{ padding-block: clamp(1rem,3vw,2.5rem) 0; }
.sessions-topo .lede{ max-width: 46ch; }

.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filtro{
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--sal);
  background: transparent;
  border:1px solid rgba(247,243,234,.22);
  border-radius:999px;
  padding:.55em 1.1em;
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.filtro:hover{ color: var(--sand); border-color: rgba(247,243,234,.5); }
.filtro[aria-pressed="true"]{
  color:#23180A; background: var(--sol); border-color: var(--sol);
}

.sets{ display:grid; gap: clamp(1rem,2.5vw,1.75rem); grid-template-columns:1fr; }
@media (min-width: 720px){ .sets{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1080px){ .sets{ grid-template-columns: repeat(3,1fr); } }
.sets:empty{ display:none; }

.set{
  display:grid; gap:0; align-content:start;
  border:1px solid rgba(247,243,234,.16);
  border-radius: var(--radius);
  background: rgba(247,243,234,.03);
  overflow:hidden;
}
.set-capa{
  position:relative;
  display:grid; place-items:center;
  aspect-ratio: 16 / 9;
  width:100%;
  border:0; cursor:pointer;
  background:
    radial-gradient(80% 110% at 75% 25%, rgba(87,217,126,.3) 0%, rgba(87,217,126,0) 62%),
    radial-gradient(90% 120% at 25% 80%, rgba(228,162,74,.22) 0%, rgba(228,162,74,0) 60%),
    linear-gradient(150deg, #10322B 0%, #071614 100%);
  transition: filter .3s ease;
}
.set-capa:hover{ filter: brightness(1.18); }
.set-play{
  width: 3.4rem; height: 3.4rem;
  border-radius:50%;
  background: var(--sol);
  display:grid; place-items:center;
  transition: transform .3s ease;
}
.set-play::after{
  content:"";
  width:0; height:0;
  border-left: .95rem solid #23180A;
  border-top: .58rem solid transparent;
  border-bottom: .58rem solid transparent;
  margin-left:.28rem;
}
.set-capa:hover .set-play{ transform: scale(1.08); }
.set-plataforma{
  position:absolute; top:.85rem; right:.85rem;
  font-size: var(--step--2);
  letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  color: var(--sand);
  background: rgba(7,22,20,.7);
  padding:.35em .8em;
  border-radius:999px;
}
.set-player{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  display:block;
}
.set[data-plataforma="spotify"] .set-player,
.set[data-plataforma="soundcloud"] .set-player{ aspect-ratio: auto; height: 232px; }

.set-corpo{ display:grid; gap:.35rem; padding: 1.25rem; }
.set-artista{
  font-size: var(--step--1);
  letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color: var(--sol) !important;
  margin:0;
}
.set-corpo .h3{ color: var(--sand); }
.set-meta{
  font-size: var(--step--1);
  color: var(--sal);
  font-variant-numeric: tabular-nums;
}
.set-remover{
  justify-self:start;
  margin-top:.4rem;
  font-family: var(--sans);
  font-size: var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--sal);
  background:transparent; border:0; padding:0;
  border-bottom:1px solid currentColor;
  cursor:pointer;
}
.set-remover:hover{ color:#F0A08A; }

.previa{
  font-size: var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
  min-height:1.1em;
  margin:0;
  color: var(--sal);
}
.previa[data-state="ok"]{ color: var(--sol); }
.previa[data-state="erro"]{ color:#F0A08A; }

.aviso{
  display:grid; gap:.5rem;
  padding: 1.25rem 1.5rem;
  border:1px dashed rgba(228,162,74,.5);
  border-radius: var(--radius);
  background: rgba(228,162,74,.06);
}
.aviso p{ font-size: var(--step--1); }
.aviso strong{ color: var(--sol); letter-spacing:.14em; text-transform:uppercase; font-size: var(--step--2); }