/* ══════════════════════════════════════════════════════════════
   Alma Duo Concept — design system
   Tokens vindos do brand book. Não invente cor nova: use as
   variáveis. Raio quase zero, tracking largo e ouro em gradiente
   são as três assinaturas da marca.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Paleta base */
  --gold-500:#D4AF37; --champagne-100:#F2E6D3; --rose-200:#E7C9B6;
  --taupe-400:#B6A998; --black-900:#0D0D0D;

  --gold-100:#F6EBCB; --gold-300:#E3C86B; --gold-600:#B8952C; --gold-700:#9A7A22;
  --champagne-50:#FBF6EF; --champagne-200:#E8D9C3;
  --rose-100:#F4E4DA; --rose-300:#D9AF97;
  --taupe-200:#D8D0C6; --taupe-600:#8B8072;
  --black-800:#1A1A1A; --black-700:#262626; --black-600:#3A3A38; --white:#FFFFFF;

  --gradient-gold:linear-gradient(115deg,#9A7A22 0%,#D4AF37 22%,#F3DE9C 46%,#D4AF37 68%,#A6821F 100%);
  --gradient-gold-soft:linear-gradient(180deg,#E3C86B 0%,#D4AF37 100%);
  --gradient-silk:linear-gradient(135deg,#FBF6EF 0%,#F2E6D3 42%,#E8D9C3 70%,#FBF6EF 100%);

  /* Papéis semânticos */
  --bg-page:var(--champagne-50);
  --surface-card:var(--white);
  --surface-card-dark:var(--black-800);
  --surface-sunken:var(--champagne-100);
  --text-heading:var(--black-900);
  --text-body:var(--black-700);
  --text-muted:var(--taupe-600);
  --text-on-dark:var(--champagne-100);
  --text-muted-on-dark:var(--taupe-400);
  --border-hairline:rgba(13,13,13,.12);
  --border-gold:var(--gold-500);
  --border-gold-soft:rgba(212,175,55,.42);
  --border-on-dark:rgba(242,230,211,.18);
  --status-success:#6E7F5B; --status-warning:var(--gold-600);
  --status-error:#A5503F;   --status-info:var(--taupe-600);
  --focus-ring:rgba(212,175,55,.55);

  /* Tipografia */
  --font-serif:"Cormorant Garamond","Didot","Times New Roman",serif;
  --font-sans:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --size-display-xl:76px; --size-display-l:56px; --size-display-m:40px;
  --size-display-s:30px;  --size-title:22px;
  --size-body-l:17px; --size-body:15px; --size-body-s:13px;
  --size-label:12px;  --size-micro:10px;

  --tracking-display:.06em; --tracking-wordmark:.16em; --tracking-label:.24em;
  --tracking-eyebrow:.34em; --tracking-body:.01em;

  --type-hero:300 var(--size-display-xl)/1.08 var(--font-serif);
  --type-h1:400 var(--size-display-l)/1.08 var(--font-serif);
  --type-h2:400 var(--size-display-m)/1.25 var(--font-serif);
  --type-h3:500 var(--size-display-s)/1.25 var(--font-serif);
  --type-title:500 var(--size-title)/1.25 var(--font-serif);
  --type-body:300 var(--size-body)/1.7 var(--font-sans);
  --type-body-l:300 var(--size-body-l)/1.7 var(--font-sans);
  --type-body-s:300 var(--size-body-s)/1.4 var(--font-sans);
  --type-label:500 var(--size-label)/1.2 var(--font-sans);
  --type-eyebrow:400 var(--size-label)/1.2 var(--font-sans);

  /* Espaço */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --section-y:var(--space-9); --section-y-tight:var(--space-8);
  --container-max:1280px; --container-narrow:720px;
  --page-inset:clamp(20px,5vw,72px);
  --control-h-s:34px; --control-h:44px; --control-h-l:54px;
  --control-pad-x:var(--space-6);

  /* Forma */
  --radius-xs:2px; --radius-sm:3px; --radius-md:6px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(58,45,20,.06);
  --shadow-sm:0 2px 10px rgba(58,45,20,.07);
  --shadow-md:0 10px 30px rgba(58,45,20,.10);
  --shadow-lg:0 24px 60px rgba(13,13,13,.16);
  --shadow-gold-glow:0 0 0 1px rgba(212,175,55,.35),0 8px 24px rgba(212,175,55,.18);

  /* Movimento — seda: nada quica */
  --ease-silk:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-slow:520ms;
  --transition-base:all var(--dur-base) var(--ease-silk);
  --blur-veil:14px;
}

/* ── Base ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-page); color:var(--text-body);
  font:var(--type-body); letter-spacing:var(--tracking-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:var(--gold-700); text-decoration:none; transition:color var(--dur-base) var(--ease-silk)}
a:hover{color:var(--gold-600)}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}
.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}
[hidden]{display:none !important}

.container{max-width:var(--container-max); margin:0 auto; padding-inline:var(--page-inset)}
.container-narrow{max-width:var(--container-narrow); margin:0 auto; padding-inline:var(--page-inset)}
.section{padding-block:var(--section-y)}
.section-tight{padding-block:var(--section-y-tight)}
.dark{background:var(--black-900); color:var(--text-on-dark)}

/* ── Tipos utilitários ─────────────────────────────────────── */
.eyebrow{
  font:var(--type-eyebrow); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--gold-600);
}
.dark .eyebrow,.eyebrow.on-dark{color:var(--gold-300)}
.label{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-heading);
}
.dark .label{color:var(--champagne-100)}
.muted{color:var(--text-muted); font:var(--type-body-s)}
.h1{font:var(--type-h1); letter-spacing:var(--tracking-display); color:var(--text-heading)}
.h2{font:var(--type-h2); letter-spacing:var(--tracking-display); color:var(--text-heading)}
.h3{font:var(--type-h3); color:var(--text-heading)}
.dark .h1,.dark .h2,.dark .h3{color:var(--champagne-100)}
.pretty{text-wrap:pretty}

/* ── Ornamento: régua com estrela de 4 pontas ──────────────── */
.ornament{display:flex; align-items:center; gap:var(--space-3); width:220px}
.ornament.center{margin-inline:auto}
.ornament::before,.ornament::after{content:""; height:1px; flex:1}
.ornament::before{background:linear-gradient(90deg,transparent,var(--gold-500))}
.ornament::after{background:linear-gradient(90deg,var(--gold-500),transparent)}
.ornament > i{
  width:11px; height:11px; flex:0 0 auto; background:var(--gold-500);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.ornament.light::before{background:linear-gradient(90deg,transparent,rgba(242,230,211,.55))}
.ornament.light::after{background:linear-gradient(90deg,rgba(242,230,211,.55),transparent)}
.ornament.light > i{background:rgba(242,230,211,.55)}

/* ── Cabeçalho de seção ────────────────────────────────────── */
.heading{max-width:680px; margin-inline:auto; text-align:center}
.heading.left{max-width:520px; margin-inline:0; text-align:left}
.heading .ornament{margin-block:var(--space-4)}
.heading.left .ornament{width:140px; margin-inline:0}
.heading h2{font:var(--type-h2); letter-spacing:var(--tracking-display); color:var(--text-heading)}
.dark .heading h2{color:var(--champagne-100)}
.heading p{font:var(--type-body); color:var(--text-muted); margin-top:var(--space-4)}
.dark .heading p{color:var(--taupe-400)}

/* ── Botões ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  height:var(--control-h); padding-inline:var(--control-pad-x);
  border:1px solid transparent; border-radius:var(--radius-xs);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background-color var(--dur-base) var(--ease-silk),
             color var(--dur-base) var(--ease-silk),
             border-color var(--dur-base) var(--ease-silk),
             box-shadow var(--dur-base) var(--ease-silk),
             transform var(--dur-fast) var(--ease-silk);
}
/* Trava de segurança: com tracking de .24em um CTA longo passa de 360px e
   empurra a página inteira em telas de 375. O botao encolhe antes disso. */
.btn{max-width:100%}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.38; cursor:not-allowed}
.btn-sm{height:var(--control-h-s); padding-inline:var(--space-4); font-size:var(--size-micro)}
.btn-lg{height:var(--control-h-l); padding-inline:var(--space-7)}
.btn-block{width:100%}

.btn-primary{background:var(--black-900); color:var(--champagne-100); border-color:var(--black-900)}
.btn-primary:hover:not(:disabled){background:var(--black-700); border-color:var(--black-700); color:var(--champagne-100)}

.btn-gold{background:var(--gradient-gold); color:var(--black-900)}
.btn-gold:hover:not(:disabled){filter:brightness(1.06); box-shadow:var(--shadow-gold-glow); color:var(--black-900)}

.btn-secondary{background:transparent; color:var(--black-900); border-color:var(--black-900)}
.btn-secondary:hover:not(:disabled){background:var(--black-900); color:var(--champagne-100)}

.btn-outline-gold{background:transparent; color:var(--gold-600); border-color:var(--border-gold)}
.btn-outline-gold:hover:not(:disabled){background:rgba(212,175,55,.10); color:var(--gold-700)}

.btn-ghost{background:transparent; color:var(--text-body)}
.btn-ghost:hover:not(:disabled){color:var(--gold-600)}

.btn-on-dark{background:transparent; color:var(--champagne-100); border-color:var(--border-on-dark)}
.btn-on-dark:hover:not(:disabled){border-color:var(--gold-500); color:var(--gold-300)}

/* ── Botão de ícone ────────────────────────────────────────── */
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:var(--radius-pill);
  background:transparent; color:var(--text-body); cursor:pointer;
  transition:var(--transition-base);
}
.icon-btn:hover:not(:disabled){color:var(--gold-600)}
.icon-btn-sm{width:30px; height:30px}
.icon-btn-lg{width:46px; height:46px}
.icon-btn-outline{background:var(--white); color:var(--black-900); border-color:var(--border-hairline)}
.icon-btn-on-dark{color:var(--champagne-100); border-color:var(--border-on-dark)}
.icon-btn svg{width:17px; height:17px}
.icon-btn-sm svg{width:15px; height:15px}
.icon-btn-lg svg{width:21px; height:21px}
.icon{width:18px; height:18px; flex:0 0 auto; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

/* ── Cartão ────────────────────────────────────────────────── */
.card{
  border-radius:var(--radius-sm); padding:var(--space-6);
  background:var(--surface-card); border:1px solid var(--border-hairline);
  transition:var(--transition-base);
}
.card-raised{border-color:transparent; box-shadow:var(--shadow-sm)}
.card-gold{border-color:var(--border-gold-soft)}
.card-sunken{background:var(--surface-sunken); border-color:transparent}
.card-dark{background:var(--surface-card-dark); border-color:var(--border-on-dark); color:var(--text-on-dark)}

/* ── Badge e Tag ───────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; height:24px; padding-inline:10px;
  font:var(--type-label); font-size:var(--size-micro);
  letter-spacing:var(--tracking-label); text-transform:uppercase;
  border-radius:var(--radius-xs); background:var(--black-900); color:var(--champagne-100);
}
.badge-gold{background:var(--gradient-gold-soft); color:var(--black-900)}
.badge-soft{background:var(--surface-sunken); color:var(--text-body)}
.badge-success{background:rgba(110,127,91,.15); color:var(--status-success)}
.badge-error{background:rgba(165,80,63,.15); color:var(--status-error)}

.tag{
  display:inline-flex; align-items:center; height:32px; padding-inline:var(--space-4);
  font:var(--type-label); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--border-hairline); border-radius:var(--radius-pill);
  background:transparent; color:var(--text-body); cursor:pointer;
  transition:var(--transition-base);
}
.tag:hover{border-color:var(--border-gold-soft); color:var(--gold-700)}
.tag[aria-pressed="true"]{background:var(--black-900); border-color:var(--black-900); color:var(--champagne-100)}

/* ── Formulários ───────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:8px}
.field > span{
  font:var(--type-label); font-size:10px; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
}
.input,.select,.textarea{
  width:100%; height:var(--control-h); padding-inline:var(--space-4);
  background:var(--white); color:var(--text-body); font:var(--type-body);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xs);
  transition:border-color var(--dur-base) var(--ease-silk), box-shadow var(--dur-base) var(--ease-silk);
}
.textarea{height:auto; min-height:96px; padding-block:var(--space-3); resize:vertical; line-height:1.6}
.input:hover,.select:hover,.textarea:hover{border-color:var(--taupe-400)}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px var(--focus-ring);
}
.input::placeholder,.textarea::placeholder{color:var(--taupe-400)}
.input[aria-invalid="true"]{border-color:var(--status-error)}
.select{
  appearance:none; padding-right:var(--space-6); cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--taupe-600) 50%),
                   linear-gradient(135deg,var(--taupe-600) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.field-error{font:var(--type-body-s); color:var(--status-error)}
/* Aviso abaixo de um campo: neutro enquanto busca, vermelho no erro,
   verde quando deu certo. */
.campo-aviso{font:var(--type-body-s); color:var(--text-muted)}
.campo-aviso.erro{color:var(--status-error)}
.campo-aviso.ok{color:var(--status-success)}

.check,.radio{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font:var(--type-body); color:var(--text-body); user-select:none;
}
.check input,.radio input{
  appearance:none; width:17px; height:17px; margin:0; flex:0 0 auto; cursor:pointer;
  border:1px solid var(--taupe-400); background:var(--white);
  transition:var(--transition-base);
}
.check input{border-radius:var(--radius-xs)}
.radio input{border-radius:var(--radius-pill)}
.check input:checked{background:var(--black-900); border-color:var(--black-900)}
.check input:checked::after{
  content:""; display:block; width:5px; height:9px; margin:1px auto 0;
  border:solid var(--gold-300); border-width:0 1.5px 1.5px 0; transform:rotate(42deg);
}
.radio input:checked{border-color:var(--gold-500); border-width:1px}
.radio input:checked::after{
  content:""; display:block; width:7px; height:7px; margin:4px auto; border-radius:50%;
  background:var(--gradient-gold-soft);
}

.stepper{
  display:inline-flex; align-items:center; height:var(--control-h);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xs); background:var(--white);
}
.stepper button{
  width:38px; height:100%; border:none; background:none; cursor:pointer;
  color:var(--text-body); font-size:16px; line-height:1; transition:var(--transition-base);
}
.stepper button:hover:not(:disabled){color:var(--gold-600)}
.stepper button:disabled{opacity:.3; cursor:not-allowed}
.stepper span{min-width:30px; text-align:center; font:var(--type-body); color:var(--text-heading)}

/* ── Abas ──────────────────────────────────────────────────── */
.tabs{display:flex; gap:var(--space-6); border-bottom:1px solid var(--border-hairline)}
/* Em telas estreitas a fila de abas não cabe: aperta o vão e, se ainda assim
   passar, deixa rolar na horizontal em vez de empurrar a página inteira. */
@media (max-width:560px){
  .tabs{gap:var(--space-4); overflow-x:auto; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto; white-space:nowrap}
}
.tabs button{
  background:none; border:none; cursor:pointer; padding:0 0 var(--space-3);
  font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-muted); border-bottom:1px solid transparent; margin-bottom:-1px;
  transition:var(--transition-base);
}
.tabs button:hover{color:var(--gold-600)}
.tabs button[aria-selected="true"]{color:var(--text-heading); border-bottom-color:var(--gold-500)}

/* ── Preço ─────────────────────────────────────────────────── */
.price{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap}
.price b{font:var(--type-title); font-weight:500; letter-spacing:.02em; color:var(--text-heading)}
.price-lg b{font-size:30px}
.price s{font:var(--type-body-s); color:var(--text-muted)}
.price-parcelas{font:var(--type-body-s); color:var(--text-muted); margin-top:6px}
.dark .price b{color:var(--gold-300)}

/* ── Cartão de produto ─────────────────────────────────────── */
.produto{display:block; cursor:pointer; color:inherit}
.produto:hover{color:inherit}
.produto-foto{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--surface-sunken);
}
.produto-foto img{width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-silk)}
.produto:hover .produto-foto img{transform:scale(1.04)}
.produto-foto .badge{position:absolute; top:var(--space-3); left:var(--space-3)}
.produto-esgotado{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(251,246,239,.72); font:var(--type-label);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--black-900);
}
.produto-info{padding-top:var(--space-4)}
.produto-info .col{
  font:var(--type-eyebrow); font-size:var(--size-micro);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--text-muted);
}
.produto-info h3{font:var(--type-title); font-size:18px; letter-spacing:.02em; margin:6px 0 0; color:var(--text-heading)}
.produto-info .price{margin-top:var(--space-2)}
.produto-info .price b{font-size:15px; font-family:var(--font-sans); font-weight:300}

/* ── Grades ────────────────────────────────────────────────── */
.grid{display:grid; gap:var(--space-6)}
/* min-width:auto é o padrão do item de grid e é a causa clássica de rolagem
   lateral: o conteúdo empurra a coluna para além da largura disponível. */
.grid > *{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ── Toast ─────────────────────────────────────────────────── */
.toast-area{position:fixed; right:24px; bottom:24px; z-index:70;
  display:flex; flex-direction:column; gap:10px; pointer-events:none}
.toast{
  pointer-events:auto; display:flex; gap:var(--space-4); align-items:flex-start;
  min-width:280px; max-width:380px; padding:var(--space-4) var(--space-5);
  background:var(--white); border:1px solid var(--border-hairline);
  border-left:2px solid var(--gold-500); border-radius:var(--radius-xs);
  box-shadow:var(--shadow-md); animation:toast-in var(--dur-base) var(--ease-silk);
}
.toast.erro{border-left-color:var(--status-error)}
.toast strong{font:var(--type-label); letter-spacing:.1em; text-transform:uppercase; color:var(--text-heading)}
.toast p{font:var(--type-body-s); color:var(--text-muted); margin-top:4px}
@keyframes toast-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ── Diálogo ───────────────────────────────────────────────── */
.dialog{
  border:none; padding:0; background:transparent; max-width:min(520px,calc(100vw - 32px));
}
.dialog::backdrop{background:rgba(13,13,13,.62); backdrop-filter:blur(4px)}
.dialog-body{
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm); padding:var(--space-7); box-shadow:var(--shadow-lg);
}
.dialog-body h3{font:var(--type-h3); color:var(--text-heading); margin-top:var(--space-2)}

/* ── Marca ─────────────────────────────────────────────────
   Três travas, cada uma para um fundo. Nunca redesenhar o símbolo,
   nunca recompor a assinatura, nunca trocar a versão pelo fundo errado:
   · logo-vertical    texto PRETO  → só em fundo claro (topo, login)
   · logo-horizontal  texto BRANCO → só em fundo escuro (rodapé)
   · simbolo          ouro puro    → serve nos dois
   Os arquivos originais, sem corte, estão em assets/marca/. */
.marca-topo{display:flex; align-items:center}
.marca-topo img{height:68px; width:auto}

.marca-rodape{height:58px; width:auto; margin-left:-2px}

.marca-login{height:132px; width:auto; margin:0 auto}

.marca-painel{display:flex; align-items:center; gap:var(--space-3)}
.marca-painel img{height:34px; width:auto}
.marca-painel span{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-heading);
}

/* Peça sem foto: o símbolo da casa sobre o gradiente de seda. */
.sem-foto{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--gradient-silk);
}
.sem-foto img{width:38%; max-width:120px; height:auto; opacity:.42}

/* ── Cabeçalho do site ─────────────────────────────────────── */
.anuncio{
  background:var(--black-900); color:var(--champagne-100); text-align:center;
  padding:10px 16px; font:var(--type-body-s); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}
.topo{
  position:sticky; top:0; z-index:30;
  background:rgba(251,246,239,.86); backdrop-filter:blur(var(--blur-veil));
  border-bottom:1px solid var(--border-hairline);
}
.topo-inner{
  height:84px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav{display:flex; gap:var(--space-6)}
.nav a{
  font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--text-body); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:var(--transition-base);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-600); border-bottom-color:var(--gold-500)}
.topo-acoes{display:flex; align-items:center; gap:6px}
.sacola-wrap{position:relative; display:inline-flex}
.sacola-count{
  position:absolute; top:-2px; right:-2px; min-width:17px; height:17px; padding-inline:4px;
  border-radius:var(--radius-pill); background:var(--gradient-gold-soft); color:var(--black-900);
  font-size:10px; display:flex; align-items:center; justify-content:center; letter-spacing:.04em;
}
.menu-btn{display:none}

/* Menu móvel */
.menu-mobile{
  display:none; border-top:1px solid var(--border-hairline);
  background:var(--champagne-50); padding:var(--space-5) 0;
}
.menu-mobile.aberto{display:block}
.menu-mobile .container{display:flex; flex-direction:column; gap:var(--space-4)}
.menu-mobile a{
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-body);
}

/* ── Trilha de navegação ───────────────────────────────────── */
.trilha{
  font:var(--type-body-s); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.trilha a{color:var(--text-muted)}
.trilha a:hover{color:var(--gold-600)}

/* ── Rodapé ────────────────────────────────────────────────── */
.rodape{background:var(--black-900); color:var(--text-on-dark); padding:var(--space-9) 0 var(--space-6)}
.rodape-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-7)}
.rodape h4{
  font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--gold-300); margin-bottom:var(--space-4);
}
.rodape-col{display:flex; flex-direction:column; gap:10px}
.rodape-col a,.rodape p{font:var(--type-body-s); color:var(--taupe-400)}
.rodape-col a:hover{color:var(--gold-300)}
.rodape-fim{
  display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  font:var(--type-body-s); font-size:11px; color:var(--taupe-600);
  letter-spacing:.1em; text-transform:uppercase;
}

/* ── Responsivo ────────────────────────────────────────────── */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .rodape-grid{grid-template-columns:1fr 1fr; gap:var(--space-6)}
}
@media (max-width:860px){
  :root{
    --size-display-xl:44px; --size-display-l:36px; --size-display-m:29px;
    --size-display-s:24px; --section-y:var(--space-8);
  }
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .topo-inner{height:68px}
  .marca-topo img{height:50px}
  .marca-rodape{height:46px}
}
@media (max-width:560px){
  .grid-2{grid-template-columns:1fr}
  .rodape-grid{grid-template-columns:1fr}
  .toast-area{left:16px; right:16px; bottom:16px}
  .toast{min-width:0; max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}