/* ============================================================
   MAGNUS ODONTOLOGIA ESPECIALIZADA — v13 "Mundo Magnus"
   Direção: identidade oficial v2 dominante — plum profundo como
   fundo principal, ouro em anéis/círculos e caps rastreadas com
   separadores "·" (linguagem do flyer e do feed oficial).
   Paleta fornecida pelo operador:
   #591239 plum · #400D29 plum profundo · #A6859A mauve
   #BF8A49 ouro · #8C543F cobre
   Blocos:
   1. fontes            2. tokens             3. reset e base
   4. utilidades        5. tipografia         6. botoes
   7. masthead          8. hero (anel dourado) 9. ticker
   10. apresentacao     11. especialidades    12. estrutura (plum)
   13. reputacao        14. localizacao       15. chamada
   16. rodape           17. barra fixa mobile 18. reveals
   19. movimento reduzido                     20. responsivo
   ============================================================ */

/* 1. FONTES - auto-hospedadas em fonts/, nenhuma rede externa */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* 2. TOKENS - paleta oficial fornecida pelo operador */
:root {
  color-scheme: light;

  --deep: #400d29;               /* plum profundo: fundo dominante */
  --plum: #591239;               /* plum primário: painéis e brilhos */
  --on-dark: #f7efe9;            /* creme sobre plum (14:1) */
  --mauve: #a6859a;              /* texto de apoio sobre #400d29 (4,9:1) */
  --mauve-bright: #b29cac;       /* texto pequeno sobre #591239 (5,3:1) */
  --line-dark: rgba(166, 133, 154, 0.28);

  --bg: #f7efe9;                 /* creme do flyer: seções claras */
  --surface: #fffbf6;
  --blush: #f2e5da;              /* banda de reputação */
  --text: #33200f;
  --muted: #6d5844;

  --gold: #bf8a49;               /* ouro oficial: anéis, botões, detalhes */
  --gold-soft: rgba(191, 138, 73, 0.16);
  --copper: #8c543f;             /* cobre: texto ouro-legível sobre creme (5,4:1) */
  --plum-ink: #591239;           /* títulos sobre creme (11,8:1) */
  --link-cream: #6d2145;         /* links sobre creme (AA) */

  --line: rgba(51, 32, 15, 0.12);
  --line-strong: rgba(51, 32, 15, 0.22);

  --shadow-card: 0 1px 2px rgba(64, 13, 41, 0.08), 0 16px 40px -24px rgba(64, 13, 41, 0.4);
  --shadow-lift: 0 2px 4px rgba(64, 13, 41, 0.08), 0 22px 48px -22px rgba(64, 13, 41, 0.45);

  --radius: 22px;
  --wrap: 1160px;
  --masthead-h: 72px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. RESET E BASE */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

::selection { background: var(--gold); color: var(--deep); }

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

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #cbb2a0;
  border-radius: 8px;
  border: 2px solid var(--bg);
}
html { scrollbar-width: thin; scrollbar-color: #cbb2a0 var(--bg); }

[id] { scroll-margin-top: calc(var(--masthead-h) + 1rem); }

/* 4. UTILIDADES */
.wrap {
  width: min(100% - clamp(2.5rem, 6vw, 3rem), var(--wrap));
  margin-inline: auto;
}

/* grão de papel, discreto; camada removível */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--deep);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus-visible { transform: none; }

.nowrap { white-space: nowrap; }

/* rótulo editorial: fio ouro + caps rastreadas (linguagem do flyer) */
.label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--copper);
}

.label::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
}

/* sobre fundos escuros o rótulo vira ouro */
.sobre-escuro .label { color: var(--gold); }

/* 5. TIPOGRAFIA */
.headline,
.cta-headline,
.cta-tag,
.blocks-head h2,
.panel h2,
.estrutura-copy h2,
.endereco-card h2,
.stat-num {
  font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
}

.headline {
  margin-top: 1.4rem;
  font-size: clamp(2.35rem, 4vw + 0.6rem, 3.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

.hl { display: block; }

/* duas tintas do flyer: creme + ouro sobre o plum */
.hl-1 { color: var(--on-dark); }
.hl-2 { color: var(--gold); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.95rem 0.42rem 0.7rem;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: rgba(89, 18, 57, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mauve);
}

.kicker::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.support {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--mauve);
}

/* 6. BOTOES - pílulas (linguagem do flyer): ouro sobre escuro, plum sobre claro */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    color 0.25s var(--ease);
}

.btn:active { transform: translateY(1px) scale(0.98); }

/* ouro: ação primária sobre fundos escuros */
.btn-solid {
  background: var(--gold);
  color: var(--deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 14px 28px -14px rgba(0, 0, 0, 0.55);
}

.btn-solid:hover {
  background: #cd9a55;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 3px rgba(0, 0, 0, 0.3),
    0 20px 38px -16px rgba(0, 0, 0, 0.6);
}

/* plum: ação primária sobre fundos claros */
.btn-plum {
  background: var(--plum);
  color: var(--on-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(64, 13, 41, 0.3),
    0 14px 28px -14px rgba(89, 18, 57, 0.65);
}

.btn-plum:hover {
  background: var(--deep);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 3px rgba(64, 13, 41, 0.3),
    0 20px 38px -16px rgba(89, 18, 57, 0.7);
}

.btn-plum:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(64, 13, 41, 0.3),
    0 8px 16px -10px rgba(89, 18, 57, 0.6);
}

/* contorno dourado sobre fundos escuros */
.btn-ghost-deep {
  border-color: rgba(191, 138, 73, 0.55);
  color: var(--gold);
  background: transparent;
}

.btn-ghost-deep:hover {
  border-color: var(--gold);
  background: rgba(191, 138, 73, 0.1);
  transform: translateY(-2px);
}

/* contorno plum sobre fundos claros */
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--plum-ink);
  background: transparent;
}

.btn-ghost:hover {
  border-color: rgba(89, 18, 57, 0.6);
  color: var(--deep);
  background: var(--surface);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 1rem 2.05rem;
  font-size: 1.05rem;
}

/* 7. MASTHEAD - barra escura fundida ao hero plum */
.masthead {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  background: rgba(64, 13, 41, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-dark);
}

@media (prefers-reduced-transparency: reduce) {
  .masthead { background: var(--deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
}

.brand-logo { height: 1.3rem; width: auto; }

.brand-sub {
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mauve);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.8rem);
}

.nav a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mauve);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.nav a:hover { color: var(--gold); }

/* 8. HERO - plum dominante, foto em anel dourado */
.hero {
  position: relative;
  overflow: clip;
  min-height: min(calc(100dvh - var(--masthead-h)), 46rem);
  display: flex;
  flex-direction: column;
  padding-top: var(--masthead-h);
  background:
    radial-gradient(60rem 44rem at 88% -10%, var(--plum), transparent 62%),
    radial-gradient(46rem 36rem at -14% 112%, rgba(140, 84, 63, 0.35), transparent 58%)
    var(--deep);
}

/* wordmark oco gigante em ouro, atrás do texto */
.hero-marc {
  position: absolute;
  left: -2rem;
  bottom: -1rem;
  z-index: 0;
  pointer-events: none;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(16rem, 32vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(191, 138, 73, 0.18);
  user-select: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  margin-block: auto;
  padding-block: clamp(2.25rem, 5vh, 3.5rem);
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.hero-micro {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  color: var(--mauve);
}

.hero-micro strong { color: var(--gold); font-weight: 700; }

/* foto no anel dourado: o gesto visual da marca (círculos do feed) */
.hero-foto {
  justify-self: end;
  text-align: center;
}

.ring-foto {
  position: relative;
  width: min(100%, 392px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--gold);
  padding: 0.7rem;
}

/* segundo anel, deslocado */
.ring-foto::before {
  content: "";
  position: absolute;
  inset: -0.9rem;
  border-radius: 50%;
  border: 1px solid rgba(191, 138, 73, 0.35);
}

.ring-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 50%;
}

.ring-caption {
  margin-top: 1.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mauve);
}

/* 9. TICKER - faixa técnica caps (TECNOLOGIA · EXPERIÊNCIA · CUIDADO) */
.ticker {
  background: var(--plum);
  border-block: 1px solid var(--line-dark);
  padding-block: 0.85rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}

.ticker-group {
  display: flex;
  flex: none;
}

.ticker-group span {
  padding-inline: 1.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

@media (max-width: 880px) {
  .ticker-track { animation-duration: 24s; }
}

/* 10. APRESENTACAO */
.intro { padding-block: clamp(3rem, 7vh, 5rem) 0; }

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: stretch;
}

.panel {
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.25rem);
}

.panel-about {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.panel-about h2 {
  font-weight: 600;
  font-size: clamp(1.55rem, 1.2vw + 1.1rem, 2.1rem);
  line-height: 1.22;
  max-width: 24ch;
  color: var(--plum-ink);
}

.panel-about p {
  margin-top: 1.1rem;
  max-width: 58ch;
  line-height: 1.75;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.chips span {
  padding: 0.32rem 0.8rem;
  border: 1px solid rgba(140, 84, 63, 0.35);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
}

/* painel escuro: o contraste do feed oficial */
.panel-plum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(191, 138, 73, 0.18), transparent 55%)
    var(--plum);
  border: 1px solid var(--line-dark);
}

.linha-ouro {
  display: block;
  width: 64px;
  height: 2px;
  margin-bottom: 1.4rem;
  background: linear-gradient(90deg, var(--gold), rgba(191, 138, 73, 0.15));
}

.panel-plum h2 {
  font-weight: 600;
  font-size: clamp(1.32rem, 0.9vw + 1rem, 1.68rem);
  line-height: 1.28;
  color: var(--on-dark);
}

.panel-plum p {
  margin-top: 0.9rem;
  max-width: 44ch;
  line-height: 1.7;
  color: var(--mauve-bright);
}

/* 11. ESPECIALIDADES - cartões com círculo numerado (círculos do feed) */
.blocks { padding-block: clamp(4.5rem, 11vh, 7.5rem); }

.blocks-head h2 {
  font-weight: 600;
  font-size: clamp(1.8rem, 2.4vw + 0.5rem, 2.6rem);
  line-height: 1.15;
  max-width: 26ch;
  color: var(--plum-ink);
  margin-top: 0.7rem;
}

.blocks-intro {
  margin-top: 1rem;
  max-width: 56ch;
  color: var(--muted);
  line-height: 1.7;
}

.blocks-grid {
  margin-top: 2.75rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  inset-inline: clamp(1.75rem, 3vw, 2.5rem);
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(191, 138, 73, 0.1));
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

/* círculo numerado: plum com numeral ouro (Garamond) */
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--plum);
  border: 1px solid rgba(191, 138, 73, 0.5);
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--gold);
}

.card h3 {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.38rem;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--plum-ink);
}

.card p {
  margin-top: 0.75rem;
  max-width: 52ch;
  color: var(--muted);
  line-height: 1.7;
}

/* o cartão integrado recebe a lavagem plum */
.card-integrada {
  background:
    radial-gradient(120% 150% at 100% 0%, var(--gold-soft), transparent 55%)
    var(--surface);
}

/* 12. ESTRUTURA - seção escura plena (ritmo escuro do feed) */
.estrutura {
  background:
    radial-gradient(60rem 40rem at 110% 0%, rgba(89, 18, 57, 0.9), transparent 60%)
    var(--deep);
  padding-block: clamp(4.5rem, 11vh, 7.5rem);
}

.estrutura-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.estrutura-foto {
  text-align: center;
}

.estrutura-foto .ring-foto { margin-inline: auto; }

.estrutura-copy h2 {
  font-weight: 600;
  margin-top: 0.7rem;
  font-size: clamp(1.7rem, 2vw + 0.5rem, 2.3rem);
  line-height: 1.16;
  max-width: 22ch;
  color: var(--on-dark);
}

.estrutura-copy p {
  margin-top: 1.1rem;
  max-width: 46ch;
  color: var(--mauve);
  line-height: 1.75;
}

.estrutura-copy .chips { margin-top: 1.4rem; }

.estrutura-copy .chips span {
  border-color: var(--line-dark);
  color: var(--mauve-bright);
}

/* foto retangular com fio ouro */
.foto-card {
  margin-top: 1.8rem;
  border-radius: var(--radius);
  border: 1px solid rgba(191, 138, 73, 0.45);
  overflow: hidden;
}

.foto-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.foto-legenda {
  padding: 0.85rem 1.2rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mauve);
}

/* 13. REPUTACAO - banda clara com numerais plum e estrelas ouro */
.reputacao-banda {
  background: var(--blush);
  border-block: 1px solid var(--line);
  padding-block: clamp(3.5rem, 8vh, 5.5rem);
}

.reputacao-banda .label { justify-content: center; }
.reputacao-banda .label::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
}

.stats-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.stats-grid .stat + .stat { border-left: 1px solid var(--line-strong); }

.stat-num {
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  line-height: 1;
  color: var(--plum-ink);
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 20ch;
  line-height: 1.5;
}

.estrelas {
  display: flex;
  gap: 0.25rem;
  color: var(--gold);
}

.reputacao-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
}

.reputacao-micro {
  font-size: 0.8rem;
  color: var(--muted);
}

/* 14. LOCALIZACAO */
.localizacao { padding-block: clamp(4.5rem, 11vh, 7.5rem); }

.localizacao-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  align-items: stretch;
}

.mapa-frame {
  border-radius: var(--radius);
  border: 1px solid rgba(191, 138, 73, 0.45);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface);
  min-height: 360px;
}

.mapa-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
}

.endereco-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(191, 138, 73, 0.16), transparent 55%)
    var(--plum);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.endereco-card h2 {
  font-weight: 600;
  font-size: clamp(1.5rem, 1.6vw + 0.8rem, 2rem);
  line-height: 1.2;
  color: var(--on-dark);
}

.endereco-card address {
  margin-top: 1rem;
  font-style: normal;
  color: var(--mauve-bright);
  line-height: 1.7;
  max-width: 40ch;
}

.endereco-links {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.endereco-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  font-weight: 700;
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}

.endereco-links a:hover { color: #d8a866; }

.endereco-links .tel { font-size: 1.15rem; }

/* 15. CHAMADA - painel plum com tagline em itálico ouro */
.closing { padding-block: 0 clamp(2.5rem, 7vh, 5rem); }

.cta-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(120% 100% at 50% 0%, var(--plum), transparent 60%)
    var(--deep);
  border: 1px solid var(--line-dark);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.75rem, 5vw, 4rem);
  text-align: center;
  box-shadow: 0 34px 70px -42px rgba(64, 13, 41, 0.8);
}

.cta-panel :focus-visible { outline-color: var(--gold); }

/* anel dourado: eco dos círculos da marca */
.cta-ring {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 auto 1.75rem;
  border: 2px solid var(--gold);
  border-radius: 50%;
  position: relative;
}

.cta-ring::before {
  content: "";
  position: absolute;
  inset: -0.42rem;
  border-radius: 50%;
  border: 1px solid rgba(191, 138, 73, 0.4);
}

.cta-headline {
  margin-inline: auto;
  max-width: 22ch;
  color: var(--on-dark);
  font-weight: 500;
  font-size: clamp(1.85rem, 2.6vw + 0.6rem, 3rem);
  line-height: 1.16;
  text-wrap: balance;
}

/* a tagline oficial, em itálico ouro (gesto do flyer) */
.cta-tag {
  margin: 1.15rem auto 0;
  max-width: 34ch;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.4vw + 0.6rem, 1.45rem);
  color: var(--gold);
}

.cta-support {
  margin: 0.9rem auto 0;
  max-width: 44ch;
  color: var(--mauve);
  font-size: 1.02rem;
  line-height: 1.7;
}

.cta-actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* 16. RODAPE - plum profundo */
.footer {
  background: var(--deep);
  border-top: 1px solid var(--line-dark);
  padding-block: 3.5rem 2.5rem;
  color: var(--mauve);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.footer-row > * { max-width: 100%; }

.footer-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.footer-lockup img { width: min(62vw, 216px); height: auto; }

.footer-lockup .brand-sub {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
}

.footer-note {
  margin-top: 1rem;
  max-width: 44ch;
  font-size: 0.95rem;
  line-height: 1.65;
}

.footer-meta h3 {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-meta address {
  margin-top: 0.9rem;
  font-style: normal;
  line-height: 1.7;
  max-width: 44ch;
}

.footer-meta nav {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-meta nav a {
  width: fit-content;
  font-weight: 700;
  color: var(--on-dark);
  text-decoration-color: rgba(166, 133, 154, 0.4);
  text-underline-offset: 3px;
}

.footer-meta nav a:hover { color: var(--gold); }

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* 17. BARRA FIXA MOBILE */
.barra-fixa { display: none; }

/* 18. REVEALS */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

html.js .kicker { transition-delay: 0s; }
html.js .hl-1 { transition-delay: 0.06s; }
html.js .hl-2 { transition-delay: 0.12s; }
html.js .support { transition-delay: 0.18s; }
html.js .hero-actions { transition-delay: 0.24s; }
html.js .hero-micro { transition-delay: 0.3s; }
html.js .hero-foto { transition-delay: 0.18s; }

html.js .intro-grid .panel:nth-child(2) { transition-delay: 0.12s; }
html.js .blocks-grid .card:nth-child(2) { transition-delay: 0.08s; }
html.js .blocks-grid .card:nth-child(3) { transition-delay: 0.14s; }
html.js .blocks-grid .card:nth-child(4) { transition-delay: 0.2s; }

/* 19. MOVIMENTO REDUZIDO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* faixa técnica: bloco estático completo (1 grupo) */
  .ticker-track { animation: none; width: 100%; flex-wrap: wrap; }
  .ticker-group:nth-child(n+2) { display: none; }
  .ticker-group { flex-wrap: wrap; }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card:hover { transform: none; }
}

/* 20. RESPONSIVO */
@media (max-width: 1100px) {
  .hero-marc { display: none; }
}

@media (max-width: 1020px) {
  .nav { display: none; }
  .hero { min-height: min(calc(100dvh - var(--masthead-h)), 44rem); }
  .ring-foto { width: min(100%, 350px); }
}

@media (max-width: 880px) {
  .hero { min-height: 0; }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    padding-block: clamp(1.25rem, 3vh, 2rem);
  }

  .hero-actions { margin-top: 1.5rem; }

  .hero-foto { justify-self: center; }
  .ring-foto { width: min(78%, 330px); }

  .intro-grid,
  .estrutura-grid,
  .localizacao-grid { grid-template-columns: 1fr; }

  .estrutura-grid { gap: 2.5rem; }

  .stats-grid { grid-template-columns: 1fr; gap: 2rem; }

  .stats-grid .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--line-strong);
    padding-top: 2rem;
  }

  .mapa-frame { min-height: 300px; }
  .mapa-frame iframe { min-height: 300px; }
}

/* barra fixa só existe abaixo de 768px */
@media (max-width: 767px) {
  .barra-fixa {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem clamp(0.9rem, 3vw, 1.25rem) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(64, 13, 41, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-dark);
  }

  .barra-fixa .btn { flex: 1; padding: 0.75rem 1rem; font-size: 0.92rem; }
  .barra-fixa .btn-ghost { border-color: var(--line-dark); color: var(--on-dark); }

  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .blocks-grid { grid-template-columns: 1fr; }

  .brand-sub { display: none; }
  .brand { align-items: flex-start; }
  .brand-logo { height: 1.2rem; }

  .cta-actions .btn,
  .hero-actions .btn { flex: 1 1 auto; }

  .btn-lg { width: 100%; }
}

@media (max-width: 480px) {
  .wrap {
    width: min(100% - 1.5rem, var(--wrap));
  }

  /* o CTA do header some: a barra fixa cobre a conversão */
  .masthead .btn { display: none; }

  .headline {
    font-size: clamp(1.72rem, 8vw, 2.3rem);
    line-height: 1.14;
    margin-top: 1rem;
    overflow-wrap: break-word;
  }

  .support {
    font-size: 1rem;
    line-height: 1.55;
    margin-top: 1rem;
    max-width: 100%;
  }

  .kicker {
    font-size: 0.68rem;
    padding: 0.35rem 0.65rem;
    max-width: 100%;
  }

  .ring-foto { width: min(88%, 310px); }

  .cta-panel {
    border-radius: var(--radius);
    padding: 2.5rem 1.25rem;
  }

  .stat-num { font-size: clamp(3rem, 16vw, 4rem); }
}

@media (max-width: 360px) {
  .wrap {
    width: min(100% - 1rem, var(--wrap));
  }

  .headline { font-size: 1.62rem; }

  .brand-logo { height: 1.05rem; }

  .hero-actions { flex-direction: column; align-items: stretch; }

  .reputacao-actions { flex-direction: column; align-items: stretch; }
}