/* ============================================================================
   JOCKEY CLUB DE PERNAMBUCO — styles.css
   Tema: burgundy + pergaminho + latão · "O templo do turfe brasileiro" (1859)
   Um único arquivo (1 request) organizado por seções.
   ========================================================================== */

/* ---------- FONTS (self-host, variable, latin) --------------------------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('/assets/fonts/playfair-latin.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- DESIGN TOKENS ------------------------------------------------ */
:root {
  /* Marca (ТЗ 4.1) */
  --wine-900:#3E0C17;
  --wine-800:#4B0E1C;
  --wine-700:#5C1122;   /* primary */
  --wine-600:#7A1F2B;   /* secondary */
  --wine-500:#8E2A38;
  --brass-600:#886618;  /* latão escuro p/ TEXTO sobre claro — AA 4.7:1 */
  --brass:   #C79A3E;   /* accent (sobre superfícies escuras/vinho) */
  --brass-300:#E0C583;
  --brass-100:#F1E4C4;
  --espresso:#2E2A24;   /* accent-2 */

  /* Superfícies (pergaminho) */
  --parch:  #F7F1E4;    /* bg */
  --parch-2:#FBF7EE;
  --parch-3:#EFE6D2;
  --line:   #E2D6BC;    /* hairline sobre pergaminho */
  --line-strong:#D3C29E;

  /* Texto */
  --ink:    #2E2A24;
  --ink-soft:#5A5347;
  --ink-mute:#6B6252;   /* AA 5.3:1 sobre pergaminho (texto secundário) */
  --on-wine:#F3E7D6;
  --on-wine-mute:#C9A9A9;

  /* Estados */
  --ok:#2F7D4F; --warn:#B26A17; --danger:#9C2A2A; --info:#5C1122;

  /* Tipografia */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-base:1rem;

  /* Espaço (8px) */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  /* Raio / sombra */
  --r-sm:4px; --r:8px; --r-lg:14px;
  --sh-1:0 1px 2px rgba(46,42,36,.08), 0 1px 1px rgba(46,42,36,.06);
  --sh-2:0 6px 18px rgba(46,42,36,.10), 0 2px 6px rgba(46,42,36,.07);
  --sh-3:0 18px 44px rgba(46,42,36,.16);
  --sh-wine:0 14px 40px rgba(62,12,23,.34);

  --wrap:1200px;
  --header-h:76px;
}

/* ---------- RESET / BASE ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* atributo hidden vence classes de componente (modais, menu, to-top) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:var(--sans); font-size:var(--fs-base); line-height:1.65;
  color:var(--ink); background:var(--parch);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--serif); line-height:1.12; color:var(--wine-700); margin:0 0 .5em; font-weight:700}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0 0 1rem}
a{color:var(--wine-600); text-decoration:none}
a:hover{color:var(--brass-600)}
ul,ol{margin:0 0 1rem; padding-left:1.2rem}
strong{color:var(--ink)}
hr{border:0; border-top:1px solid var(--line); margin:var(--s6) 0}
:focus-visible{outline:3px solid var(--brass); outline-offset:2px; border-radius:2px}
.icon{width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.18em}

.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200; background:var(--wine-700);
  color:var(--on-wine); padding:.6rem 1rem; border-radius:var(--r); transition:top .2s;
}
.skip-link:focus{top:8px; color:var(--on-wine)}

/* ---------- LAYOUT ------------------------------------------------------- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s5)}
.section{padding-block:var(--s8)}
.section--tight{padding-block:var(--s7)}
.section--parch-2{background:var(--parch-2)}
.section--wine{background:var(--wine-700); color:var(--on-wine)}
.section--wine h1,.section--wine h2,.section--wine h3{color:var(--brass-100)}
.grid{display:grid; gap:var(--s5)}
.muted{color:var(--ink-mute)}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.flow>*+*{margin-top:var(--s4)}

/* Cabeçalho de seção — motivo "plaqueta gravada" (SIGNATURE #1/#3) */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--sans);
  font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass-600); margin-bottom:.6rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--brass); opacity:.8}
.section-head{max-width:62ch; margin-bottom:var(--s6)}
.section-head.center{margin-inline:auto}
.accent{color:var(--brass-600)}          /* palavra-acento em latão (SIGNATURE #3) */
.section--wine .accent{color:var(--brass)}

/* Moldura de rublo duplo em latão (SIGNATURE #1) */
.brass-frame{position:relative; border:1px solid var(--brass); border-radius:var(--r)}
.brass-frame::after{
  content:""; position:absolute; inset:4px; border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
  border-radius:calc(var(--r) - 3px); pointer-events:none;
}
.rule-brass{height:0; border-top:1px solid var(--brass); position:relative}
.rule-brass::after{content:""; position:absolute; left:0; right:0; top:3px; border-top:1px solid color-mix(in srgb,var(--brass) 45%,transparent)}

/* ---------- BOTÕES ------------------------------------------------------- */
.btn{
  --btn-bg:var(--wine-700); --btn-fg:#fff; --btn-bd:var(--wine-700);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem; line-height:1;
  padding:.85rem 1.4rem; border-radius:var(--r); cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration:none;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-2); color:var(--btn-fg)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[disabled]{opacity:.45; cursor:not-allowed; filter:grayscale(.35)}
.btn:disabled:hover,.btn[disabled]:hover{transform:none; box-shadow:none}
.btn--accent{--btn-bg:var(--brass); --btn-fg:var(--espresso); --btn-bd:var(--brass-600); box-shadow:var(--sh-1)}
.btn--accent:hover{--btn-bg:var(--brass-300)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--wine-700); --btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bg:var(--parch-3); --btn-fg:var(--wine-700)}
.btn--on-wine{--btn-bg:transparent; --btn-fg:var(--on-wine); --btn-bd:color-mix(in srgb,var(--brass) 60%,transparent)}
.btn--on-wine:hover{--btn-bg:rgba(255,255,255,.08); --btn-fg:#fff}
.btn--lg{padding:1rem 1.7rem; font-size:1.05rem}
.btn--block{width:100%}

/* ---------- BADGES / PILLS ---------------------------------------------- */
.badge{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700;
  padding:.28rem .6rem; border-radius:999px; letter-spacing:.02em;
}
.badge--18{background:var(--wine-700); color:#fff; border:1.5px solid var(--brass)}
.badge--brass{background:var(--brass-100); color:var(--brass-600); border:1px solid var(--brass-300)}
.badge--wine{background:color-mix(in srgb,var(--wine-700) 12%,transparent); color:var(--wine-700)}
.badge--live{background:#fff; color:var(--danger); border:1px solid #E7C3C3}
.badge--live .dot{width:8px; height:8px; border-radius:50%; background:var(--danger); animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.badge--live .dot{animation:none}}

/* Medalhão numérico de páreo em latão (SIGNATURE #4) */
.pareo-num{
  display:inline-grid; place-items:center; align-self:center; flex:0 0 auto;
  width:2rem; height:2rem; aspect-ratio:1;
  font-family:var(--sans); font-weight:800; font-size:.9rem; color:var(--wine-900);
  background:radial-gradient(circle at 50% 35%, var(--brass-300), var(--brass) 60%, var(--brass-600) 100%);
  border-radius:50%; border:1.5px solid var(--brass-600);
  box-shadow:0 1px 2px rgba(46,42,36,.22);
  font-variant-numeric:tabular-nums; line-height:1;
}

/* ---------- CARDS -------------------------------------------------------- */
.card{
  background:var(--parch-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); box-shadow:var(--sh-1); transition:transform .2s ease, box-shadow .25s ease, border-color .2s;
}
.card--link:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--brass-300)}
.card--wine{background:linear-gradient(160deg,var(--wine-700),var(--wine-900)); color:var(--on-wine); border-color:var(--wine-800)}
.card--wine h1,.card--wine h2,.card--wine h3{color:var(--brass-100)}
/* strong herda --ink (escuro); sobre superfícies vinho isso fica ilegível */
.site-footer strong,.card--wine strong,.section--wine strong,.hero strong,.mobile-nav strong{color:var(--brass-100)}
.card__ico{
  display:grid; place-items:center; width:3rem; height:3rem; border-radius:var(--r);
  background:var(--wine-700); color:var(--brass-100); margin-bottom:var(--s3);
}
.card__ico .icon{width:1.5rem;height:1.5rem}

/* ---------- HERO --------------------------------------------------------- */
.hero{position:relative; background:var(--wine-700); color:var(--on-wine); overflow:hidden}
.hero__bg{position:absolute; inset:0; z-index:0}
.hero__bg::before{ /* aura sutil de pergaminho quente */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 78% 12%, rgba(199,154,62,.22), transparent 60%),
    radial-gradient(50% 60% at 8% 90%, rgba(123,31,43,.55), transparent 60%),
    linear-gradient(160deg,var(--wine-600),var(--wine-900));
}
.hero__grain{ /* grão fino de arquivo */
  position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner{position:relative; z-index:1; padding-block:clamp(var(--s7),8vw,var(--s9)); max-width:60ch}
.hero__ribbon{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);
  padding:.34rem .8rem; border-radius:999px; margin-bottom:var(--s5);
}
.hero h1{color:#fff; margin-bottom:var(--s4)}
.hero h1 .accent{color:var(--brass)}
.hero__lead{font-size:1.18rem; color:var(--on-wine); max-width:52ch; margin-bottom:var(--s6)}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center}
.hero__note{display:flex; align-items:center; gap:.5rem; margin-top:var(--s5); font-size:.85rem; color:var(--on-wine-mute)}

/* Selo heráldico desenhado em CSS/SVG (SIGNATURE #2) — usado no hero */
.seal{position:relative; z-index:1; width:min(300px,42vw); aspect-ratio:1; margin-inline:auto}
/* Selo (imagem PNG/webp/avif transparente) — preenche o contêiner */
.seal-svg{display:block; width:100%; height:100%; line-height:0}
.seal-img{display:block; width:100%; height:100%; object-fit:contain}

/* ---------- TABELAS (programa/resultados) -------------------------------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--parch-2)}
table.data{width:100%; border-collapse:collapse; min-width:640px}
table.data th,table.data td{padding:.8rem 1rem; text-align:left; border-bottom:1px solid var(--line)}
table.data thead th{
  background:var(--wine-700); color:var(--brass-100); font-family:var(--sans);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
}
table.data tbody tr:hover{background:var(--parch-3)}
table.data tbody tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums}

/* ---------- FORMS -------------------------------------------------------- */
.field{margin-bottom:var(--s4)}
.field > label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:var(--ink)}
.control{
  width:100%; font:inherit; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-strong); border-radius:var(--r); padding:.7rem .85rem;
  transition:border-color .15s, box-shadow .15s;
}
.control:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px color-mix(in srgb,var(--brass) 30%,transparent)}
.control::placeholder{color:var(--ink-mute)}
.field__hint{font-size:.82rem; color:var(--ink-mute); margin-top:.3rem}
.field__error{font-size:.82rem; color:var(--danger); margin-top:.3rem; display:none}
.field.is-invalid .control{border-color:var(--danger)}
.field.is-invalid .field__error{display:block}
.checkbox{display:flex; align-items:flex-start; gap:.6rem; font-size:.9rem; line-height:1.45}
.checkbox input{margin-top:.2rem; width:1.05rem; height:1.05rem; accent-color:var(--wine-700)}

/* ---------- HELPERS DE COR ---------------------------------------------- */
.text-ok{color:var(--ok)} .text-danger{color:var(--danger)} .text-brass{color:var(--brass-600)}

/* ---------- ANIM: scroll-reveal ----------------------------------------- */
/* Só escondemos se o JS estiver ativo (classe .js) — sem JS, conteúdo visível. */
.js [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js [data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1; transform:none; transition:none}}

/* ---------- RESPONSIVO --------------------------------------------------- */
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .cols-3,.cols-2{grid-template-columns:1fr}
  .cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){.cols-4{grid-template-columns:1fr}}

/* ============================================================================
   COMPONENTES DE CHROME (header, nav, footer, cookie) + HOME
   ========================================================================== */

/* ---------- LOGO --------------------------------------------------------- */
.logo{display:inline-flex; align-items:center; gap:.7rem; text-decoration:none}
.logo__name{max-width:15ch}   /* mantém o wordmark em 2 linhas controladas, sem esmagar */
.logo__mark{width:44px; height:44px; flex:0 0 auto; color:var(--brass); display:block}
.logo__mark .seal-svg{width:100%; height:100%}
.logo__text{display:flex; flex-direction:column; line-height:1}
.logo__name{font-family:var(--serif); font-weight:700; font-size:1.16rem; color:var(--wine-700); letter-spacing:.01em}
.logo__amp{font-style:italic; font-weight:500; color:var(--brass-600)}
.logo__sub{font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); margin-top:.28rem}
.logo--light .logo__name{color:#fff}
.logo--light .logo__sub{color:var(--on-wine-mute)}
.logo--light .logo__amp{color:var(--brass)}

/* ---------- HEADER ------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:100; background:var(--parch-2);
  border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(199,154,62,.35)}
.site-header::after{content:""; display:block; height:2px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.site-header > .wrap{max-width:1340px}   /* header pode ser mais largo que o conteúdo */
.site-header__row{display:flex; align-items:center; gap:var(--s4); min-height:var(--header-h)}
.site-header[data-shrunk] .site-header__row{min-height:60px}
.site-header[data-shrunk] .logo__sub{display:none}

.mainnav{margin-left:auto}
.mainnav ul{display:flex; gap:.3rem; list-style:none; margin:0; padding:0}
.mainnav a{display:inline-block; padding:.55rem .8rem; border-radius:var(--r); font-weight:600;
  font-size:.94rem; color:var(--ink-soft); position:relative; white-space:nowrap}
.mainnav a:hover{color:var(--wine-700); background:var(--parch-3)}
.mainnav a.is-active{color:var(--wine-700)}
.mainnav a.is-active::after{content:""; position:absolute; left:.8rem; right:.8rem; bottom:.28rem;
  height:2px; background:var(--brass)}

.site-header__actions{display:flex; align-items:center; gap:.55rem}
.iconbtn{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r);
  background:transparent; border:1px solid transparent; color:var(--wine-700); cursor:pointer}
.iconbtn:hover{background:var(--parch-3); border-color:var(--line)}
.iconbtn .icon{width:20px; height:20px}
.iconbtn--rg{color:var(--wine-600)}
.btn--sm{padding:.5rem .8rem; font-size:.88rem}
.auth-guest,.auth-user{display:flex; align-items:center; gap:.5rem}
.hbalance{display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--wine-700);
  background:var(--brass-100); border:1px solid var(--brass-300); padding:.45rem .7rem; border-radius:var(--r)}
.burger{display:none}

.header-search{border-top:1px solid var(--line); background:var(--parch-2)}
.header-search__form{display:flex; align-items:center; gap:.6rem; padding-block:var(--s3)}
.header-search__form .icon{color:var(--ink-mute); width:20px; height:20px}
.header-search__form .control{flex:1}

/* Menu mobile */
.mobile-nav{position:fixed; inset:0; z-index:150}
.mobile-nav__scrim{position:absolute; inset:0; background:rgba(46,42,36,.55); border:0; cursor:pointer}
.mobile-nav__panel{position:absolute; top:0; right:0; height:100%; width:min(88vw,340px);
  background:linear-gradient(160deg,var(--wine-700),var(--wine-900)); color:var(--on-wine);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4);
  box-shadow:var(--sh-wine); animation:slidein .28s ease}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.mobile-nav__panel{animation:none}}
.mobile-nav__head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.mobile-nav__head .iconbtn{color:var(--on-wine); border-color:transparent}
.mobile-nav__head .iconbtn:hover{background:rgba(255,255,255,.1)}
.mobile-nav nav ul{list-style:none; margin:0; padding:0}
.mobile-nav nav a{display:flex; align-items:center; justify-content:space-between;
  padding:.9rem .2rem; color:var(--on-wine); border-bottom:1px solid rgba(199,154,62,.22); font-weight:600}
.mobile-nav nav a.is-active{color:var(--brass)}
.mobile-nav nav a .icon{color:var(--brass); width:18px; height:18px}
.mobile-nav__cta{margin-top:auto; display:grid; gap:.6rem}

/* ---------- FOOTER ------------------------------------------------------- */
.site-footer{background:var(--wine-900); color:var(--on-wine); padding-block:var(--s8) var(--s6); margin-top:var(--s8)}
.site-footer a{color:var(--on-wine)}
.site-footer a:hover{color:var(--brass-300)}
.site-footer h4{color:var(--brass-100); font-size:1rem; margin-bottom:.9rem}
.site-footer__top{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--s6); padding-bottom:var(--s6)}
.site-footer__blurb{color:var(--on-wine-mute); font-size:.92rem; max-width:40ch; margin-top:var(--s4)}
.site-footer__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.92rem}
.linklike{background:none; border:0; color:var(--on-wine); cursor:pointer; font:inherit; padding:0; text-align:left}
.linklike:hover{color:var(--brass-300)}

.site-footer__reg{padding:var(--s5); border-radius:var(--r-lg); background:rgba(0,0,0,.18)}
.site-footer__reg .badge--18{margin-bottom:.6rem}
.site-footer__reg-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s5)}
.site-footer__reg p{color:var(--on-wine-mute); font-size:.88rem; margin:0}
.site-footer__reg h4{margin-bottom:.4rem}
.site-footer__bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem;
  padding-top:var(--s5); margin-top:var(--s5); border-top:1px solid rgba(199,154,62,.25); font-size:.85rem}
.site-footer__bottom p{margin:0}
.site-footer__bottom .muted{color:var(--on-wine-mute)}
@media (max-width:820px){.site-footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer__top{grid-template-columns:1fr; gap:var(--s5)}}

/* ---------- COOKIE ------------------------------------------------------- */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:160; background:var(--parch-2);
  border-top:2px solid var(--brass); box-shadow:0 -8px 30px rgba(46,42,36,.18)}
.cookie-banner__row{display:flex; align-items:center; gap:var(--s5); padding-block:var(--s4); flex-wrap:wrap}
.cookie-banner__text{display:flex; gap:.7rem; flex:1 1 340px}
.cookie-banner__text .icon{color:var(--brass-600); width:26px; height:26px; flex:0 0 auto}
.cookie-banner__text p{margin:0; font-size:.9rem}
.cookie-banner__actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-left:auto}

.cookie-modal{position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:var(--s4)}
.cookie-modal__scrim{position:absolute; inset:0; background:rgba(46,42,36,.55); border:0}
.cookie-modal__box{position:relative; z-index:1; background:var(--parch-2); border-radius:var(--r-lg);
  padding:var(--s5); width:min(560px,100%); max-height:88vh; overflow:auto; box-shadow:var(--sh-3)}
.cookie-modal__head{display:flex; align-items:center; justify-content:space-between}
.cookie-modal__head h3{margin:0}
.cookie-cat{border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); margin-block:var(--s3)}
.cookie-cat__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.3rem}
.cookie-cat__head label:first-child{font-weight:700; color:var(--ink)}
.cookie-cat p{margin:0; font-size:.86rem}
.cookie-modal__foot{display:flex; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; margin-top:var(--s4)}
.switch{position:relative; display:inline-block; width:46px; height:26px; flex:0 0 auto}
.switch input{opacity:0; width:0; height:0; position:absolute}
.switch span{position:absolute; inset:0; background:var(--line-strong); border-radius:999px; cursor:pointer; transition:.2s}
.switch span::before{content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:var(--sh-1)}
.switch input:checked+span{background:var(--wine-600)}
.switch input:checked+span::before{transform:translateX(20px)}
.switch input:focus-visible+span{outline:3px solid var(--brass); outline-offset:2px}

/* ---------- TO-TOP ------------------------------------------------------- */
.to-top{position:fixed; right:1.2rem; bottom:1.2rem; z-index:120; width:46px; height:46px;
  border-radius:50%; border:1.5px solid var(--brass-600); background:var(--wine-700); color:var(--brass-100);
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--sh-2); transition:transform .2s, opacity .3s}
.to-top:hover{transform:translateY(-3px)}

/* ---------- HOME: HERO --------------------------------------------------- */
.hero__layout{display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center}
.hero .seal{color:var(--brass)}
.hero .seal-img{filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
@media (max-width:900px){
  .hero__layout{grid-template-columns:1fr}
  .hero .seal{display:none}
}

/* Próximas corridas */
.next-races{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.race-card{display:flex; flex-direction:column; gap:.5rem}
.race-card__top{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.race-card__date{font-family:var(--serif); font-size:1.15rem; color:var(--wine-700); font-weight:700}
.race-card__meta{display:flex; gap:.4rem; flex-wrap:wrap; font-size:.82rem; color:var(--ink-mute)}
.countdown{display:inline-flex; gap:.35rem; font-variant-numeric:tabular-nums; font-weight:700; color:var(--wine-700)}
.countdown b{background:var(--wine-700); color:var(--brass-100); padding:.2rem .4rem; border-radius:var(--r-sm); min-width:2.1ch; text-align:center}

/* GP spotlight */
.gp-spotlight{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); align-items:center;
  padding:var(--s7); border-radius:var(--r-lg); overflow:hidden}
.gp-spotlight .gp-badge{display:block; width:130px; height:130px; margin-inline:auto; color:var(--brass)}
/* selo dourado sobre superfícies vinho muito escuras: realça o brilho */
.gp-spotlight .gp-badge .seal-img,
.site-footer .logo__mark .seal-img,
.mobile-nav .logo__mark .seal-img{filter:brightness(1.5) saturate(1.05)}
.gp-spotlight__facts{display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s4)}
.gp-fact{display:flex; flex-direction:column}
.gp-fact b{font-family:var(--serif); font-size:1.5rem; color:var(--brass)}
.gp-fact span{font-size:.8rem; color:var(--on-wine-mute); text-transform:uppercase; letter-spacing:.08em}
@media (max-width:760px){.gp-spotlight{grid-template-columns:1fr; padding:var(--s5)} .gp-spotlight__art{display:none}}

/* Product tiles */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.tile{display:flex; gap:var(--s3); align-items:flex-start}
.tile h3{margin-bottom:.2rem; font-size:1.15rem}
.tile p{margin:0; font-size:.9rem; color:var(--ink-soft)}
.tile__arrow{margin-left:auto; color:var(--brass-600); transition:transform .2s}
.card--link:hover .tile__arrow{transform:translateX(4px)}
@media (max-width:820px){.tiles,.next-races{grid-template-columns:1fr}}

/* Resultados recentes */
.result-row{display:flex; align-items:center; gap:var(--s4); padding:.7rem 0; border-bottom:1px solid var(--line)}
.result-row:last-child{border-bottom:0}
.result-row__win{font-weight:700; color:var(--wine-700)}
.result-row__rateio{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ok); font-weight:700}

/* Dupla alinhada (Resultados recentes + Como funciona a pule) */
.home-duo{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s6); row-gap:var(--s5); align-items:stretch}
.home-duo .section-head{margin-bottom:0; align-self:start}
.home-duo .card{display:flex; flex-direction:column; height:100%}
.home-duo__cta{margin-top:auto; margin-bottom:0; padding-top:var(--s4)}
@media (max-width:820px){.home-duo{grid-template-columns:1fr}}

/* Trust row */
.trust-row{display:flex; flex-wrap:wrap; gap:var(--s5); align-items:center; justify-content:center}
.trust-item{display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--ink-soft)}
.trust-item .icon{color:var(--brass-600); width:22px; height:22px}
/* trust-row sobre faixa vinho: texto/ícone claros (AA) */
.section--wine .trust-item{color:var(--on-wine)}
.section--wine .trust-item .icon{color:var(--brass)}

/* Heritage strip */
.heritage{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center}
.heritage__quote{font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); font-style:italic;
  color:var(--brass-100); line-height:1.3}
@media (max-width:760px){.heritage{grid-template-columns:1fr}}

/* ---------- HEADER RESPONSIVO ------------------------------------------- */
@media (max-width:1320px){
  .mainnav{display:none}          /* nav colapsa no burger — libera espaço p/ conta */
  .burger{display:grid}
}
@media (max-width:768px){
  /* tablet/mobile: ações de conta vão para o menu off-canvas */
  .site-header__actions .auth-guest,
  .site-header__actions .auth-user{display:none}
}
@media (max-width:560px){
  .site-header__actions [data-search-toggle],
  .site-header__actions .iconbtn--rg{display:none}
  .logo__sub{display:none}
  .logo__name{font-size:1rem}
  .hero__cta .btn{flex:1 1 auto}
}
@media (max-width:380px){
  .logo__name{font-size:.92rem}
  .logo__mark{width:38px; height:38px}
}

/* ============================================================================
   PÁGINAS INTERNAS: page-hero, filtros, programa, bet builder
   ========================================================================== */
.pagehero{background:linear-gradient(160deg,var(--wine-700),var(--wine-900)); color:var(--on-wine); padding-block:var(--s7)}
.pagehero .eyebrow{color:var(--brass)}
.pagehero h1{color:#fff; margin-bottom:.4rem}
.pagehero h1 .accent{color:var(--brass)}
.pagehero__lead{color:var(--on-wine-mute); max-width:62ch; margin:0}

.pareo-num--sm{width:1.6rem; height:1.6rem; font-size:.82rem; border-width:1px}

/* Filtros / chips */
.filters{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:var(--s5)}
.filter-chip{display:inline-flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.55rem .9rem; border:1.5px solid var(--line-strong); border-radius:var(--r); background:var(--parch-2);
  cursor:pointer; color:var(--ink); text-decoration:none; transition:border-color .15s, background .15s, transform .15s}
.filter-chip:hover{border-color:var(--brass-300); transform:translateY(-1px); color:var(--ink)}
.filter-chip.is-on{background:var(--wine-700); border-color:var(--wine-700); color:#fff}
.filter-chip.is-on .filter-chip__day{color:var(--brass-100)}
.filter-chip__day{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute)}
.filter-chip__date{font-weight:700; font-variant-numeric:tabular-nums}

.searchnote{background:var(--brass-100); border:1px solid var(--brass-300); border-radius:var(--r);
  padding:.6rem .9rem; font-size:.9rem; display:flex; align-items:center; gap:.5rem; margin-bottom:var(--s5)}

/* Programa: cabeçalho da reunião */
.reuniao-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5)}
.reuniao-head .muted{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap}

/* Páreo (bloco) */
.pareo{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--parch-2); padding:var(--s5); margin-bottom:var(--s5); box-shadow:var(--sh-1)}
.pareo__head{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap}
.pareo__head h3{color:var(--wine-700)}
.pareo__head .btn{margin-left:auto}
.pareo__head .muted{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:.85rem}
.pareo__empty{display:flex; align-items:center; gap:.5rem; padding:var(--s3) 0}

/* ---------- BET BUILDER -------------------------------------------------- */
.betbuilder{display:grid; grid-template-columns:1fr 360px; gap:var(--s6); align-items:start}
.bb-step{margin-bottom:var(--s6)}
.bb-step__label{display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.2rem;
  color:var(--wine-700); font-weight:700; margin-bottom:var(--s4)}
.bb-hint{font-family:var(--sans); font-size:.85rem; font-weight:400; color:var(--ink-mute)}
.bb-hint--flash{color:var(--danger); animation:hintflash .4s ease}
@keyframes hintflash{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.bb-pareos{display:grid; gap:.6rem}
.bb-pareo{display:flex; align-items:center; gap:.8rem; text-align:left; padding:.7rem .9rem;
  border:1.5px solid var(--line-strong); border-radius:var(--r); background:var(--parch-2); cursor:pointer; transition:.15s}
.bb-pareo:hover:not(.is-disabled){border-color:var(--brass-300); transform:translateX(2px)}
.bb-pareo.is-on{border-color:var(--wine-700); box-shadow:inset 3px 0 0 var(--brass)}
.bb-pareo.is-disabled{opacity:.5; cursor:not-allowed}
.bb-pareo__t{display:flex; flex-direction:column; line-height:1.3}
.bb-pareo__t small{color:var(--ink-mute); font-size:.8rem}

.bb-types{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem}
.bb-type{display:flex; flex-direction:column; gap:.25rem; align-items:flex-start; text-align:left;
  padding:.9rem; border:1.5px solid var(--line-strong); border-radius:var(--r); background:var(--parch-2); cursor:pointer; transition:.15s}
.bb-type:hover{border-color:var(--brass-300)}
.bb-type.is-on{border-color:var(--wine-700); background:#fff; box-shadow:var(--sh-1)}
.bb-type strong{font-family:var(--serif); font-size:1.05rem; color:var(--wine-700)}
.bb-type span:not(.badge){font-size:.8rem; color:var(--ink-soft)}
.bb-type .badge{margin-top:.2rem}
@media (max-width:560px){.bb-types{grid-template-columns:1fr 1fr}}

.bb-runners{display:grid; gap:.5rem}
.bb-runner{display:flex; align-items:center; gap:.8rem; text-align:left; padding:.6rem .8rem;
  border:1.5px solid var(--line-strong); border-radius:var(--r); background:var(--parch-2); cursor:pointer; transition:.15s; position:relative}
.bb-runner:hover{border-color:var(--brass-300)}
.bb-runner.is-sel{border-color:var(--wine-700); background:#fff; box-shadow:inset 3px 0 0 var(--brass)}
.bb-runner__info{display:flex; flex-direction:column; line-height:1.25}
.bb-runner__info small{color:var(--ink-mute); font-size:.8rem}
.bb-runner__odd{margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; color:var(--wine-700);
  background:var(--brass-100); border:1px solid var(--brass-300); padding:.2rem .5rem; border-radius:var(--r-sm)}
.bb-runner__pos{background:var(--wine-700); color:var(--brass-100); font-size:.72rem; font-weight:700; padding:.15rem .4rem; border-radius:999px}
.bb-runner__check{width:1.4rem; text-align:center; color:var(--ok); font-weight:700}

.bb-stake{display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap}
.bb-stake__input{display:flex; align-items:center; gap:.4rem; border:1.5px solid var(--line-strong); border-radius:var(--r); padding:.2rem .7rem; background:#fff; font-weight:700; color:var(--wine-700)}
.bb-stake__input .control{border:0; padding:.5rem 0; width:120px; font-size:1.2rem; font-weight:700}
.bb-stake__input .control:focus{box-shadow:none}
.bb-stake__quick{display:flex; gap:.4rem; flex-wrap:wrap}
.chip-money{padding:.5rem .8rem; border:1.5px solid var(--line-strong); border-radius:var(--r); background:var(--parch-2); cursor:pointer; font-weight:600; color:var(--ink); transition:.15s}
.chip-money:hover{border-color:var(--brass); background:var(--brass-100)}

/* Slip (pule) */
.betbuilder__slip{position:sticky; top:calc(var(--header-h) + 12px)}
.slip{background:var(--parch-2); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-2)}
.slip__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s3)}
.slip__head h3{color:var(--wine-700); display:flex; align-items:center; gap:.4rem}
.linklike--dark{color:var(--wine-600)}
.slip__body{min-height:60px; border-top:1px solid var(--line); padding-top:var(--s3)}
.slip__empty{display:flex; align-items:flex-start; gap:.5rem; font-size:.88rem}
.slip-pareo{display:flex; flex-direction:column; margin-bottom:.6rem}
.slip-pareo small{color:var(--ink-mute); font-size:.8rem}
.slip-picks{list-style:none; margin:0 0 .5rem; padding:0; display:grid; gap:.4rem}
.slip-picks li{display:flex; align-items:center; gap:.5rem; font-size:.92rem}
.slip-pos{background:var(--wine-700); color:var(--brass-100); font-size:.7rem; font-weight:700; padding:.1rem .35rem; border-radius:999px}
.slip-warn{color:var(--warn); font-size:.82rem; margin:.3rem 0 0}
.slip__totals{margin:var(--s3) 0; padding:var(--s3) 0; border-top:1px solid var(--line); display:grid; gap:.4rem}
.slip__totals div{display:flex; justify-content:space-between; align-items:baseline}
.slip__totals dt{color:var(--ink-mute); font-size:.9rem; margin:0}
.slip__totals dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
.slip__ret dd{color:var(--ok); font-size:1.15rem}
.slip__ret dt{color:var(--wine-700); font-weight:700}
.slip__disc{font-size:.78rem; margin:.4rem 0 var(--s3)}
.slip__login{font-size:.82rem; margin:.6rem 0 0}

/* Modal do bilhete */
.ticket-modal{position:fixed; inset:0; z-index:170; display:grid; place-items:center; padding:var(--s4)}
.ticket-modal__box{position:relative; z-index:1; background:var(--parch-2); border-radius:var(--r-lg); padding:var(--s6); width:min(460px,100%); box-shadow:var(--sh-3)}
.ticket-modal__close{position:absolute; top:.7rem; right:.7rem}
.ticket-check{display:inline-block; color:var(--ok)}
.ticket-check .icon{width:52px; height:52px}
.ticket-id{text-align:center; font-family:var(--serif); font-size:1.3rem; color:var(--wine-700); background:var(--brass-100);
  border:1px dashed var(--brass-600); border-radius:var(--r); padding:.6rem; margin:var(--s4) 0}
.ticket-modal__foot{display:flex; gap:.6rem; justify-content:center; margin-top:var(--s4); flex-wrap:wrap}

@media (max-width:960px){
  .betbuilder{grid-template-columns:1fr}
  .betbuilder__slip{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:90; padding:0}
  .betbuilder__slip .slip{border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:60vh; overflow:auto; box-shadow:0 -10px 30px rgba(46,42,36,.2)}
  .betbuilder__main{padding-bottom:220px}
}

/* ---------- RESULTADOS --------------------------------------------------- */
.result-block__head{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap}
.result-block__head .btn{margin-left:auto}
table.data tr.is-winner{background:color-mix(in srgb,var(--brass-100) 60%,transparent)}
table.data tr.is-winner td:first-child{box-shadow:inset 3px 0 0 var(--brass)}
table.data tr.is-winner .icon{color:var(--brass-600); vertical-align:-.2em; width:1rem; height:1rem}
.place{display:inline-grid; place-items:center; min-width:2rem; height:1.7rem; padding:0 .4rem; border-radius:999px;
  font-weight:700; font-size:.82rem; background:var(--parch-3); color:var(--ink-soft)}
.place--1{background:var(--brass); color:var(--espresso)}
.place--2{background:#D8D8D8; color:#333}
.place--3{background:#E4B98C; color:#5a3a1a}

/* ---------- RATEIOS ------------------------------------------------------ */
.notice{display:flex; align-items:flex-start; gap:.7rem; padding:var(--s4); border-radius:var(--r); background:var(--parch-2)}
.notice .icon{color:var(--brass-600); flex:0 0 auto; width:22px; height:22px}
.rateio-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.8rem; margin-top:var(--s4)}
.rateio-cell{display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:var(--s4);
  border:1px solid var(--line); border-radius:var(--r); background:var(--parch-2); text-align:center}
.rateio-cell__tipo{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); font-weight:700}
.rateio-cell__val{font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--ok)}
.rateio-cell__unit{font-size:.72rem; color:var(--ink-mute)}

/* ---------- AO VIVO ------------------------------------------------------ */
.live{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--parch-2); padding:var(--s5); box-shadow:var(--sh-1)}
.live__head{display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5)}
.live__head h2{color:var(--wine-700)}
.live__clock{margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-variant-numeric:tabular-nums;
  font-weight:700; color:var(--wine-700); background:#fff; border:1px solid var(--line-strong); padding:.4rem .7rem; border-radius:var(--r)}

.track{position:relative; background:linear-gradient(180deg,#6b3320,#7a3b25); border-radius:var(--r); padding:var(--s4) var(--s4) var(--s4) 0; overflow:hidden}
.track::before{content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,transparent,transparent 78px,rgba(255,255,255,.06) 78px,rgba(255,255,255,.06) 80px); pointer-events:none}
.track__finish{position:absolute; top:0; bottom:0; right:12px; width:6px;
  background:repeating-linear-gradient(180deg,#fff,#fff 8px,#2E2A24 8px,#2E2A24 16px); z-index:2}
.track__finish span{position:absolute; top:-2px; right:8px; font-size:.62rem; letter-spacing:.1em; color:#F3E7D6; writing-mode:vertical-rl; text-transform:uppercase}
.lane{position:relative; display:grid; grid-template-columns:200px 1fr; align-items:center; gap:.6rem; padding:.28rem 0}
.lane__label{display:flex; align-items:center; gap:.4rem; color:#F3E7D6; font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lane__strip{position:relative; height:22px; border-radius:999px; background:rgba(0,0,0,.18)}
.runner{position:absolute; top:50%; transform:translateY(-50%); left:calc(0% - 12px); width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%; background:var(--brass); color:var(--espresso);
  border:1.5px solid var(--brass-600); transition:left .1s linear; z-index:1}
.runner .icon{width:14px; height:14px}
.lane.is-leader .runner{background:#fff; box-shadow:0 0 0 3px rgba(199,154,62,.6)}
.lane.is-leader .lane__label{color:#fff}
@media (prefers-reduced-motion:reduce){.runner{transition:none}}
@media (max-width:560px){.lane{grid-template-columns:120px 1fr} .lane__label{font-size:.72rem}}

.live__controls{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:var(--s5)}
.live__board{margin-top:var(--s6)}
.live__board h3{color:var(--wine-700)}
.live-board{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.live-board li{display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--r); background:var(--parch-2); transition:.2s}
.live-board li.is-first{border-color:var(--brass); background:var(--brass-100)}
.live-board__pos{font-weight:700; color:var(--wine-700); min-width:2ch}
.live-board__name{font-weight:600}
.live-board__st{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink-mute); font-size:.85rem}
.live-board__trophy{margin-left:.3rem}
.live.is-finished .track{outline:2px solid var(--brass)}

/* ============================================================================
   FORMS (auth/contato), CONTA, HISTÓRIA, LEGAL
   ========================================================================== */
.pagehero--slim{padding-block:var(--s6)}

/* Auth / formulários */
.auth-wrap{padding-block:var(--s8)}
.auth-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:center}
.auth-grid--login{align-items:start}
.auth-aside h1{margin-top:.3rem}
.auth-benefits{list-style:none; margin:var(--s4) 0; padding:0; display:grid; gap:.6rem}
.auth-benefits li{display:flex; align-items:flex-start; gap:.5rem}
.auth-benefits .icon{color:var(--ok); flex:0 0 auto; margin-top:.15rem}
.auth-note{display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:var(--ink-soft); margin-top:var(--s4)}
.auth-card{background:var(--parch-2); border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-2)}
.auth-card h2{color:var(--wine-700); margin-bottom:var(--s4)}
.auth-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:var(--s4); font-size:.9rem}
.auth-alt{text-align:center; margin:var(--s4) 0 0}
.pwmeter{margin-top:.4rem}
.pwmeter>span{display:block; height:6px; width:0; background:var(--danger); border-radius:999px; transition:width .25s, background .25s}
.pwmeter[data-level="2"]>span{background:var(--warn)}
.pwmeter[data-level="3"]>span{background:#9AA83B}
.pwmeter[data-level="4"]>span{background:var(--ok)}
.pwmeter>b{font-size:.78rem; font-weight:600}
.form-success{background:color-mix(in srgb,var(--ok) 14%,transparent); border:1px solid var(--ok); color:#1c5a37;
  padding:.8rem 1rem; border-radius:var(--r); margin-bottom:var(--s4); font-weight:600}
@media (max-width:820px){.auth-grid{grid-template-columns:1fr; gap:var(--s5)}}

/* Contato */
.contact-line{display:flex; align-items:center; gap:.5rem; margin:.5rem 0}
.contact-line .icon{color:var(--brass-600); flex:0 0 auto}

/* Conta */
.conta-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
.conta-head h1{color:#fff}.conta-head .accent{color:var(--brass)}
.conta-saldo{display:flex; flex-direction:column; text-align:right}
.conta-saldo .muted{color:var(--on-wine-mute); font-size:.82rem}
.conta-saldo strong{font-family:var(--serif); font-size:2rem; color:var(--brass)}
.conta-tabs{display:flex; gap:.4rem; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:var(--s5); padding-bottom:.2rem}
.conta-tab{display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border:0; background:transparent;
  cursor:pointer; font:inherit; font-weight:600; color:var(--ink-soft); border-radius:var(--r) var(--r) 0 0; position:relative}
.conta-tab .icon{width:18px; height:18px}
.conta-tab:hover{color:var(--wine-700); background:var(--parch-3)}
.conta-tab.is-on{color:var(--wine-700)}
.conta-tab.is-on::after{content:""; position:absolute; left:.5rem; right:.5rem; bottom:-1px; height:2px; background:var(--brass)}
.conta-tab--exit{margin-left:auto; color:var(--wine-600)}
.conta-panel{display:none}
.conta-panel.is-on{display:block; animation:fadein .3s ease}
@keyframes fadein{from{opacity:0; transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.conta-panel.is-on{animation:none}}
.perfil-list{display:grid; gap:0; margin:var(--s3) 0}
.perfil-list div{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line)}
.perfil-list dt{color:var(--ink-mute); margin:0}.perfil-list dd{margin:0; font-weight:600}
.toast{position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,140%); z-index:200;
  background:var(--wine-700); color:#fff; padding:.8rem 1.2rem; border-radius:var(--r); box-shadow:var(--sh-3);
  border:1px solid var(--brass); font-weight:600; transition:transform .3s ease; max-width:90vw}
.toast.is-show{transform:translate(-50%,0)}
@media (max-width:640px){.conta-tabs{overflow-x:auto} .grid.cols-3{grid-template-columns:1fr}}

/* História — timeline */
.timeline{list-style:none; margin:0; padding:0; max-width:820px; margin-inline:auto; position:relative}
.timeline::before{content:""; position:absolute; left:120px; top:8px; bottom:8px; width:2px; background:var(--line-strong)}
.timeline__item{display:grid; grid-template-columns:120px 1fr; gap:var(--s5); padding-bottom:var(--s5); position:relative}
.timeline__year{font-family:var(--serif); font-weight:700; color:var(--wine-700); text-align:right; padding-right:1.4rem; position:relative}
.timeline__year::after{content:""; position:absolute; right:-6px; top:.35rem; width:12px; height:12px; border-radius:50%; background:var(--brass); border:2px solid var(--parch-2); box-shadow:0 0 0 2px var(--brass)}
.timeline__card{background:var(--parch-2); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4); box-shadow:var(--sh-1)}
.timeline__card strong{color:var(--wine-700); display:block; margin-bottom:.2rem}
@media (max-width:600px){
  .timeline::before{left:8px}
  .timeline__item{grid-template-columns:1fr; gap:.4rem; padding-left:32px}
  .timeline__year{text-align:left; padding-right:0}
  .timeline__year::after{left:-28px; right:auto}
}

/* Legal */
.legal{display:grid; grid-template-columns:250px 1fr; gap:var(--s7); align-items:start}
.legal__toc{position:sticky; top:calc(var(--header-h) + 16px)}
.legal__toc-title{font-weight:700; color:var(--wine-700); margin-bottom:.6rem; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase}
.legal__toc ol{list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:.35rem}
.legal__toc a{display:block; font-size:.9rem; color:var(--ink-soft); padding:.25rem 0 .25rem .7rem; border-left:2px solid var(--line)}
.legal__toc a:hover{color:var(--wine-700); border-color:var(--brass)}
.legal__badge{font-size:.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:.5rem; padding-top:var(--s3); border-top:1px solid var(--line)}
.legal__body{max-width:72ch}
.legal__intro{font-size:1.05rem; color:var(--ink-soft); border-left:3px solid var(--brass); padding-left:var(--s4); margin-bottom:var(--s6)}
.legal-alert{background:color-mix(in srgb,var(--warn) 12%,transparent); border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); border-left-width:3px; padding:var(--s4); border-radius:var(--r); color:var(--espresso)}
.legal__section{margin-bottom:var(--s6); scroll-margin-top:calc(var(--header-h) + 16px)}
.legal__section h2{display:flex; align-items:center; gap:.6rem; font-size:1.4rem}
.legal__num{display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; flex:0 0 auto; font-family:var(--sans);
  font-size:.9rem; font-weight:700; color:var(--espresso); background:var(--brass-100); border:1px solid var(--brass-300); border-radius:50%}
.legal__section ul{padding-left:1.2rem}
.legal__section li{margin-bottom:.4rem}
.legal__foot{border-top:1px solid var(--line); padding-top:var(--s4); margin-top:var(--s6); font-size:.9rem}
@media (max-width:860px){.legal{grid-template-columns:1fr} .legal__toc{position:static; border-bottom:1px solid var(--line); padding-bottom:var(--s4)}}