/* Rage Room CT — estilos. Direção "pôster punk de rua" (01/10/2026).
   Mobile-first: o bloco base é a tela estreita; cada @media (min-width) só acrescenta.
   Tokens e contrastes documentados no SPEC.md § Design. Paleta fixa escura, de propósito.
   Regra de cor: o laranja é a ÚNICA cor de ação (botão, link). Rosa, verde-água e a fita
   amarela são identidade decorativa — nunca carregam ação. */

@font-face {
  font-family: "Anton";
  src: url("/assets/fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* superfícies */
  --bg: #121212;
  --bg-raised: #1E1B19;
  --bg-deep: #0B0B0B;     /* chamada final e rodapé */
  --papel: #F4EFEA;       /* moldura de foto colada, adesivo claro */

  /* texto */
  --fg: #F4EFEA;          /* 16.40:1 sobre --bg · 14.99:1 sobre --bg-raised */
  --fg-soft: #B8AEA5;     /*  8.60:1 sobre --bg ·  7.86:1 sobre --bg-raised */

  /* ação — só o laranja age */
  --accent: #FF5A1F;      /*  6.01:1 sobre --bg ·  5.49:1 sobre --bg-raised */
  --accent-ink: #121212;  /*  6.01:1 sobre --accent */
  --accent-hover: #FF6E38; /* --accent-ink sobre ele: 6.73:1 */
  --glow: rgb(255 90 31 / .35);

  /* identidade decorativa — do graffiti das fotos */
  --flame: #FFB020;       /* 10.24:1 sobre --bg; fita, etiqueta de preço, estrelas */
  --pink: #FF4D8D;        /*  5.98:1 sobre --bg; eyebrows e detalhes */
  --teal: #4ECDC4;        /*  9.68:1 sobre --bg; regra da casa e detalhes */
  --fita: repeating-linear-gradient(-45deg, var(--flame) 0 14px, #121212 14px 28px);

  --border: #2E2926;
  --border-strong: #7A6D64; /* 3.75:1 sobre --bg */
  --whatsapp: #25D366;      /* ícone --bg sobre ele: 9.45:1 */

  /* tipografia */
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: .875rem;  --text-base: 1rem;  --text-lg: 1.125rem;
  --text-xl: 1.5rem;   --text-2xl: 1.953rem;

  /* espaço — escala de 4px */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;

  --radius: 10px;
  --max: 72rem;
  --measure: 65ch;
  --nav-h: 4.5rem;
}

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

html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--text-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 3px solid var(--flame); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0 0 var(--space-4); text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
h1 { font-size: clamp(2.6rem, 10vw, 4.75rem); line-height: 1.04; }
h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; }
h3 { font-size: var(--text-lg); line-height: 1.3; }

.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--space-4); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); font-weight: 700; text-decoration: none;
}
.pular:focus { top: var(--space-4); }

.eyebrow, .rotulo {
  display: block; margin: 0 0 var(--space-2);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pink);
}
.rotulo { font-family: var(--font-body); color: var(--fg-soft); }

/* título-adesivo: palavras coladas tortas, como cartaz de rua */
.grito { line-height: 1.12; }
.adesivo {
  display: inline-block; padding: .04em .18em .1em;
  transform: rotate(-1.8deg);
  box-shadow: .14em .14em 0 rgb(0 0 0 / .55);
}
.adesivo-um { background: var(--accent); color: var(--accent-ink); }
.adesivo-dois { background: var(--papel); color: #121212; transform: rotate(1.1deg); margin-top: .14em; }

/* ------------------------------------------------------------------ botões */
.btn, .btn-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius); font-weight: 700; font-size: var(--text-base);
  text-decoration: none; line-height: 1.2; text-align: center;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgb(255 140 80 / .5), 0 6px 22px var(--glow);
}
.btn:hover { color: var(--accent-ink); background: var(--accent-hover); transform: translateY(-1px) rotate(-.5deg);
  box-shadow: 0 0 0 1px rgb(255 160 100 / .6), 0 8px 30px rgb(255 90 31 / .5); }
.btn-contorno { color: var(--fg); border: 2px solid var(--accent); background: rgb(18 18 18 / .4); }
.btn-contorno:hover { color: var(--fg); background: rgb(255 90 31 / .14); }
.btn-sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-grande { min-height: 56px; padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); }
.acoes > * { flex: 1 1 100%; }
.acoes-centro { justify-content: center; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  transition: background-color .2s ease, box-shadow .2s ease;
}
.nav.stuck, .nav:has(.menu[open]) { background: rgb(18 18 18 / .94); box-shadow: 0 1px 0 var(--border); }
@supports (backdrop-filter: blur(8px)) {
  .nav.stuck { background: rgb(18 18 18 / .8); backdrop-filter: blur(8px); }
  .nav:has(.menu[open]) { background: rgb(11 11 11 / .97); }
}
.nav-in { display: flex; align-items: center; gap: var(--space-3); height: 100%; }
.marca { display: block; flex: none; margin-right: auto; }
.marca img { height: 52px; width: auto; }
.nav-links { display: none; }

/* menu móvel: <details>, sem JS obrigatório */
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 2px solid var(--border-strong); border-radius: var(--radius); color: var(--fg);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--accent); color: var(--accent); }
.menu-painel {
  position: fixed; left: 0; right: 0; top: var(--nav-h);
  display: grid; padding: var(--space-2) var(--space-4) var(--space-6);
  background: var(--bg-deep);
  border-bottom: 10px solid transparent; border-image: var(--fita) 10;
  box-shadow: 0 20px 40px rgb(0 0 0 / .5);
}
.menu-painel a {
  color: var(--fg); text-decoration: none;
  font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: .02em;
  padding: var(--space-3) 0; border-bottom: 1px solid var(--border);
}
.menu-painel a:hover { color: var(--accent); }
.menu-painel .btn { margin-top: var(--space-6); font-family: var(--font-body); border-bottom: 0; }

/* ------------------------------------------------------------------ letreiro rolante */
.letreiro {
  overflow: hidden; width: 104%; margin: -1.1rem -2% 0;
  background: var(--bg-deep); border-block: 1px solid var(--border);
  transform: rotate(-1.2deg); position: relative; z-index: 2;
  padding: var(--space-2) 0;
}
.letreiro-trilho { display: flex; width: max-content; }
.letreiro-trilho span {
  font-family: var(--font-display); text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.05rem, 3vw, 1.5rem); letter-spacing: .08em; color: var(--flame);
  padding-right: var(--space-4);
}

/* ------------------------------------------------------------------ hero */
.hero, .exp-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(100svh, 50rem);
  padding: calc(var(--nav-h) + var(--space-8)) 0 var(--space-12);
}
.exp-hero { min-height: min(82svh, 42rem); }
.hero-foto {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%;
}
.hero-veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(115deg, rgb(255 77 141 / .2), transparent 45%, rgb(78 205 196 / .16)),
    linear-gradient(180deg, rgb(18 18 18 / .6) 0%, rgb(18 18 18 / .3) 22%, rgb(18 18 18 / .8) 42%, rgb(18 18 18 / .94) 70%, var(--bg) 100%);
}
.hero-in, .exp-hero-in { position: relative; }
.hero h1 { margin-bottom: var(--space-6); }
.hero-sub { font-size: var(--text-lg); max-width: 34rem; color: var(--fg); }

/* canhoto de entrada: o preço com a regra dos itens no mesmo fôlego */
.ticket {
  display: inline-block; margin: 0;
  background: var(--bg-raised); border: 1px dashed var(--border-strong); border-radius: 4px;
  padding: var(--space-2) var(--space-4); color: var(--fg-soft);
  transform: rotate(-.6deg);
}
.ticket b {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl);
  color: var(--flame); letter-spacing: .02em;
}

/* ------------------------------------------------------------------ fatos */
.fatos { background: var(--bg); border-bottom: 1px solid var(--border); }
.fatos-in {
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4); padding-block: var(--space-8);
}
.fato b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1;
  transform: rotate(-1deg);
}
.fato:nth-child(4n+1) b { color: var(--accent); }
.fato:nth-child(4n+2) b { color: var(--pink); }
.fato:nth-child(4n+3) b { color: var(--teal); }
.fato:nth-child(4n+4) b { color: var(--flame); }
.fato span { display: block; margin-top: var(--space-1); color: var(--fg-soft); font-size: var(--text-sm); }

/* ------------------------------------------------------------------ seções */
.secao { padding-block: var(--space-12); }
.secao:nth-of-type(even) { background: var(--bg-raised); }
.secao-cab { margin-bottom: var(--space-8); max-width: 48rem; }

/* a regra que desfaz o equívoco 30/60 — ninguém escolhe duração, o grupo decide */
.regra {
  max-width: 46rem; margin: var(--space-4) 0 0;
  background: var(--bg); border-left: 6px solid var(--teal);
  padding: var(--space-4) var(--space-6); transform: rotate(-.4deg);
  color: var(--fg);
}
.secao:nth-of-type(odd) .regra { background: var(--bg-raised); }
.regra b {
  display: block; color: var(--teal); text-transform: uppercase;
  letter-spacing: .1em; font-size: var(--text-sm); margin-bottom: var(--space-1);
}

/* o que é */
.sobre-in { display: grid; gap: var(--space-8); align-items: center; }
.sobre-txt p { max-width: var(--measure); color: var(--fg-soft); }
.citacao {
  font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15;
  color: var(--fg) !important; margin-top: var(--space-6); transform: rotate(-.6deg);
}
.citacao::first-letter { color: var(--accent); }

/* foto colada: moldura de papel + fita no topo */
.sobre-foto {
  margin: 0; position: relative;
  background: var(--papel); padding: 10px 10px 40px; border-radius: 2px;
  transform: rotate(-1.4deg); box-shadow: 8px 10px 0 rgb(0 0 0 / .45);
}
.sobre-foto::before {
  content: ""; position: absolute; top: -13px; left: 50%; translate: -50% 0;
  width: 110px; height: 26px; background: rgb(244 239 234 / .22);
  transform: rotate(-2.5deg);
}
.sobre-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* cartões de experiência */
.cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-raised); border-radius: var(--radius); overflow: hidden;
  border-left: 6px solid var(--faixa, var(--accent));
  box-shadow: 0 0 0 1px var(--border);
  transition: transform .15s ease, box-shadow .15s ease;
}
.secao:nth-of-type(even) .card { background: var(--bg); }
.card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 0 0 1px var(--border-strong), 0 10px 30px rgb(0 0 0 / .4); }
.card-foto { overflow: hidden; }
.card-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, center); }
.card-corpo { display: flex; flex-direction: column; flex: 1; padding: var(--space-6); }
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl);
  letter-spacing: .01em; margin-bottom: var(--space-2); }
.card-link { color: var(--fg); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--flame); outline-offset: 3px; }
.card-corpo > p { color: var(--fg-soft); }
.card-fatos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.card-fatos li, .exp-fatos li {
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: 999px; color: var(--fg);
}
.card-preco { margin-top: auto; margin-bottom: var(--space-2); color: var(--fg-soft); font-size: var(--text-sm); }
.card-nota { margin: 0 0 var(--space-3); color: var(--fg-soft); font-size: var(--text-sm); }
.card-ir { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); font-weight: 700; }

/* etiqueta de preço: adesivo amarelo torto */
.etiqueta {
  display: inline-block; background: var(--flame); color: #121212;
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl);
  letter-spacing: .02em; padding: .04em .32em .1em;
  transform: rotate(-1.4deg); box-shadow: 2px 2px 0 rgb(0 0 0 / .5);
  margin-right: var(--space-1);
}

/* sintomas (ficha de diagnóstico) */
.sintomas { list-style: none; display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.sintoma {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: var(--bg); border-radius: var(--radius); padding: var(--space-6);
  box-shadow: 0 0 0 1px var(--border);
  transform: rotate(-.5deg);
}
.secao:nth-of-type(odd) .sintoma { background: var(--bg-raised); }
.sintoma:nth-child(even) { transform: rotate(.5deg); }
.checa {
  flex: none; width: 2.25rem; height: 2.25rem; margin-top: .1rem;
  display: grid; place-items: center;
  border: 3px solid var(--border-strong); border-radius: 4px;
}
.sintoma:nth-child(4n+1) .checa { color: var(--accent); }
.sintoma:nth-child(4n+2) .checa { color: var(--pink); }
.sintoma:nth-child(4n+3) .checa { color: var(--teal); }
.sintoma:nth-child(4n+4) .checa { color: var(--flame); }
.sintoma h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); margin-bottom: var(--space-1); }
.sintoma p { color: var(--fg-soft); margin-bottom: var(--space-2); }
.sintoma a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; min-height: 44px; }

/* como funciona */
.como-in { display: grid; gap: var(--space-12); }
.passos { list-style: none; counter-reset: passo; display: grid; gap: var(--space-6); }
.passos li { counter-increment: passo; position: relative; padding-left: 3.75rem; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: -.15rem;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--text-xl); color: var(--accent-ink);
  background: var(--accent); border-radius: 50% 44% 52% 46% / 48% 54% 44% 52%;
  transform: rotate(-4deg); box-shadow: 0 0 16px var(--glow);
}
.passos li:nth-child(even)::before { transform: rotate(5deg); border-radius: 46% 52% 44% 54% / 52% 44% 56% 46%; }
.passos h3 { margin-bottom: var(--space-1); }
.passos p { color: var(--fg-soft); margin: 0; }

/* cardápio da destruição: quadro de bar, preços com pontilhado */
.itens {
  align-self: start; position: relative;
  background: var(--bg-deep); border: 2px dashed var(--border-strong);
  border-radius: var(--radius); padding: var(--space-6);
  transform: rotate(.5deg);
}
.itens::before {
  content: ""; position: absolute; top: -13px; left: 50%; translate: -50% 0;
  width: 110px; height: 26px; background: rgb(244 239 234 / .18);
  transform: rotate(2deg);
}
.itens h3, .itens h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); letter-spacing: .01em; margin-bottom: var(--space-2); }
.itens > p { color: var(--fg-soft); }
.itens table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.itens th, .itens td { padding: var(--space-2) 0; border-bottom: 1px dashed var(--border-strong); text-align: left; }
.itens thead th { font-size: var(--text-sm); color: var(--fg-soft); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-bottom-style: solid; }
.itens tbody th { font-weight: 500; }
.itens td { text-align: right; color: var(--flame); font-weight: 700; white-space: nowrap; }
.itens thead th:last-child { text-align: right; }
.itens-rodape { margin: 0; font-size: var(--text-sm); color: var(--fg-soft); }

/* perguntas */
.perguntas-in { display: grid; gap: var(--space-8); }
.perguntas-in > div > p { color: var(--fg-soft); }
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.secao:nth-of-type(odd) .faq details, .exp-sec .faq details { background: var(--bg-raised); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--space-4) 3rem var(--space-4) var(--space-4); font-weight: 600; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: var(--space-4); top: 50%; translate: 0 -50%;
  font-family: var(--font-body); font-size: 1.75rem; font-weight: 400; color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] { border-color: var(--border-strong); }
.faq details p { padding: 0 var(--space-4) var(--space-4); margin: 0; color: var(--fg-soft); max-width: var(--measure); }

/* depoimentos: bilhetes colados com fita */
.relatos-cab { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); align-items: end; }
.relatos-cab h2 { margin: 0; }
.placar { display: flex; align-items: center; gap: var(--space-4); margin: 0; }
.placar > b { font-family: var(--font-display); font-weight: 400; font-size: 3.5rem; line-height: 1; color: var(--fg); }
.placar > span { display: grid; color: var(--fg-soft); font-size: var(--text-sm); }
.estrelas { color: var(--flame); letter-spacing: .12em; font-size: var(--text-lg); }
.relatos-lista { list-style: none; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.relato figure {
  margin: 0; height: 100%; position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--bg); border-radius: 3px; padding: var(--space-8) var(--space-6) var(--space-6);
  transform: rotate(-.8deg); box-shadow: 4px 5px 0 rgb(0 0 0 / .4);
}
.relato:nth-child(even) figure { transform: rotate(.7deg); }
.relato figure::before {
  content: ""; position: absolute; top: -11px; left: 50%; translate: -50% 0;
  width: 92px; height: 24px; background: rgb(244 239 234 / .18);
  transform: rotate(-2deg);
}
.relato blockquote { margin: 0; flex: 1; }
.relato blockquote p { margin: 0; }
.relato figcaption { color: var(--fg-soft); font-weight: 600; font-size: var(--text-sm); }

/* local */
.local-in { display: grid; gap: var(--space-8); }
.local-end { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--fg); }
.local-end svg { flex: none; margin-top: .2rem; color: var(--accent); }
.horario {
  align-self: start; background: var(--bg-raised); border-radius: var(--radius); padding: var(--space-6);
  border-left: 6px solid var(--flame); transform: rotate(.4deg);
}
.secao:nth-of-type(even) .horario { background: var(--bg); }
.horario h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); letter-spacing: .01em; }
.horario dl { margin: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.horario dl div { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px dashed var(--border-strong); padding-bottom: var(--space-2); }
.horario dt { color: var(--fg-soft); }
.horario dd { margin: 0; font-weight: 700; text-align: right; }
.horario > p { color: var(--fg-soft); margin-bottom: var(--space-2); }
.horario a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; word-break: break-all; }

/* chamada final */
.cta-final {
  text-align: center; padding-block: var(--space-16);
  background:
    radial-gradient(60% 120% at 50% 100%, rgb(255 90 31 / .22), transparent 70%),
    var(--bg-deep);
  border-top: 12px solid transparent; border-image: var(--fita) 12;
}
.cta-final h2 { margin-bottom: var(--space-6); }

/* ------------------------------------------------------------------ rodapé */
.rodape {
  background: var(--bg-deep); padding-block: var(--space-12) var(--space-8); font-size: var(--text-sm);
  border-top: 12px solid transparent; border-image: var(--fita) 12;
}
.rodape-top { display: grid; gap: var(--space-8); }
.rodape-marca img { width: 7rem; height: auto; }
.rodape-col ul { list-style: none; display: grid; gap: 0; }
.rodape-col li { display: flex; gap: var(--space-2); align-items: center; color: var(--fg-soft); min-height: 44px; }
.rodape-col li svg { flex: none; color: var(--accent); }
.rodape-col a { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.rodape-col a:hover { color: var(--accent-hover); text-decoration: underline; }
.rodape-bot { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); color: var(--fg-soft); }
.rodape-bot p { max-width: var(--measure); margin-bottom: var(--space-2); }

/* botão flutuante do WhatsApp */
.fab {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--whatsapp); color: var(--bg); box-shadow: 0 6px 20px rgb(0 0 0 / .45);
  transition: transform .15s ease;
}
.fab svg { width: 30px; height: 30px; }
.fab:hover { color: var(--bg); transform: scale(1.06) rotate(-4deg); }

/* ------------------------------------------------------------- página de experiência */
.trilha { font-size: var(--text-sm); color: var(--fg-soft); margin-bottom: var(--space-4); }
.trilha a { color: var(--fg); display: inline-block; padding-block: var(--space-3); }
.exp-fatos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.exp-fatos li { background: rgb(18 18 18 / .55); }
.exp-preco { margin: 0 0 var(--space-1); color: var(--fg); }
.exp-preco-nota, .exp-nota { color: var(--fg-soft); font-size: var(--text-sm); margin: 0; max-width: 34rem; }
.exp-preco-nota { margin-bottom: var(--space-2); }

.exp-corpo { padding-block: var(--space-12); display: grid; gap: var(--space-12); }
.exp-sec h2 { font-size: clamp(1.6rem, 4.4vw, 2.2rem); }
.exp-texto p { max-width: var(--measure); font-size: var(--text-lg); }
.exp-valores { display: grid; gap: var(--space-8); align-items: start; }
.lista-check { list-style: none; display: grid; gap: var(--space-3); max-width: var(--measure); }
.lista-check li { display: flex; gap: var(--space-3); align-items: flex-start; }
.lista-check svg { flex: none; margin-top: .2rem; color: var(--accent); }

/* galeria: fotos reveladas e coladas tortas */
.galeria { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.galeria img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px;
  border: 8px solid var(--papel); border-bottom-width: 26px;
  transform: rotate(-1deg); box-shadow: 4px 5px 0 rgb(0 0 0 / .4);
}
.galeria img:nth-child(even) { transform: rotate(1.1deg); }

.nota {
  background: var(--bg-raised); border-left: 6px solid var(--flame);
  border-radius: var(--radius); padding: var(--space-6); max-width: 48rem;
}
.nota h2 { font-family: var(--font-body); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.nota p { margin: 0; color: var(--fg); }
.onde .local-end { color: var(--fg-soft); }

/* 404 */
.simples { min-height: 75svh; display: flex; align-items: center; padding: calc(var(--nav-h) + var(--space-12)) 0 var(--space-12); }
.simples p { color: var(--fg-soft); max-width: 34rem; }
.simples h1 { font-size: clamp(2.2rem, 8vw, 4rem); }

/* ------------------------------------------------------------------ movimento */
@keyframes rolar { to { transform: translateX(-50%); } }
@keyframes chacoalha {
  15% { transform: rotate(-1.6deg) scale(1.03); }
  35% { transform: rotate(1.4deg) scale(1.05); }
  55% { transform: rotate(-1deg) scale(1.05); }
  75% { transform: rotate(.7deg) scale(1.03); }
  100% { transform: rotate(0) scale(1.03); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .letreiro-trilho { animation: rolar 28s linear infinite; }
  .card:hover .card-foto img, .card:focus-within .card-foto img { animation: chacoalha .5s ease both; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
  .card:hover, .btn:hover, .fab:hover { transform: none; }
}

/* ------------------------------------------------------------------ breakpoints */
@media (min-width: 480px) {
  .shell { padding-inline: var(--space-6); }
  .acoes > * { flex: 0 0 auto; }
  .fatos-in { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  :root { --nav-h: 5.25rem; }
  .marca img { height: 64px; }
  .secao { padding-block: var(--space-16); }
  .sobre-in { grid-template-columns: 1.1fr 1fr; gap: var(--space-12); }
  .sintomas { grid-template-columns: 1fr 1fr; }
  .como-in { grid-template-columns: 1.3fr 1fr; }
  .perguntas-in { grid-template-columns: 1fr 1.6fr; gap: var(--space-12); }
  .perguntas-in > div { position: sticky; top: calc(var(--nav-h) + var(--space-6)); align-self: start; }
  .relatos-cab { grid-template-columns: 1fr auto; }
  .local-in { grid-template-columns: 1.4fr 1fr; gap: var(--space-12); }
  .rodape-top { grid-template-columns: auto repeat(3, 1fr); }
  .exp-valores:has(.itens) { grid-template-columns: 1.2fr 1fr; }
  .hero-foto { object-position: center 40%; }
  .hero-veu {
    background:
      linear-gradient(115deg, rgb(255 77 141 / .18), transparent 50%, rgb(78 205 196 / .14)),
      linear-gradient(90deg, rgb(18 18 18 / .9) 0%, rgb(18 18 18 / .6) 45%, rgb(18 18 18 / .15) 75%),
      linear-gradient(180deg, rgb(18 18 18 / .5) 0%, transparent 25%, transparent 70%, var(--bg) 100%);
  }
  .hero-in, .exp-hero-in { max-width: var(--max); }
  .hero-in > *, .exp-hero-in > * { max-width: 38rem; }
}

@media (min-width: 1024px) {
  .nav-links { display: flex; gap: var(--space-6); margin-left: auto; }
  .nav-links a { color: var(--fg); text-decoration: none; font-weight: 600; padding-block: var(--space-3); }
  .nav-links a:hover { color: var(--accent); }
  .marca { margin-right: 0; }
  .nav .btn-sm { margin-left: var(--space-2); }
  .menu { display: none; }
  .hero { align-items: center; }
}