/* ============================================================================
   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;

  /* Motivos decorativos (turfe): ferradura + linha de chegada quadriculada */
  --motif-shoe-brass:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 22 A35 35 0 1 0 70 22' fill='none' stroke='%23C79A3E' stroke-width='12' stroke-linecap='round'/%3E%3Cg fill='%23C79A3E'%3E%3Ccircle cx='24.5' cy='42' r='2.3'/%3E%3Ccircle cx='21.5' cy='58' r='2.3'/%3E%3Ccircle cx='24' cy='74' r='2.3'/%3E%3Ccircle cx='75.5' cy='42' r='2.3'/%3E%3Ccircle cx='78.5' cy='58' r='2.3'/%3E%3Ccircle cx='76' cy='74' r='2.3'/%3E%3C/g%3E%3C/svg%3E");
  --motif-shoe-wine:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30 22 A35 35 0 1 0 70 22' fill='none' stroke='%235C1122' stroke-width='12' stroke-linecap='round'/%3E%3Cg fill='%235C1122'%3E%3Ccircle cx='24.5' cy='42' r='2.3'/%3E%3Ccircle cx='21.5' cy='58' r='2.3'/%3E%3Ccircle cx='24' cy='74' r='2.3'/%3E%3Ccircle cx='75.5' cy='42' r='2.3'/%3E%3Ccircle cx='78.5' cy='58' r='2.3'/%3E%3Ccircle cx='76' cy='74' r='2.3'/%3E%3C/g%3E%3C/svg%3E");
  --motif-finish:repeating-conic-gradient(var(--parch) 0 25%, var(--espresso) 0 50%) 0 0/12px 12px;
}

/* ---------- 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);
  transition:transform .2s ease, background .2s ease;
}
.card__ico .icon{width:1.5rem;height:1.5rem}
.card--link:hover .card__ico{transform:translateY(-2px) rotate(-4deg); background:var(--wine-600)}

/* ---------- HERO --------------------------------------------------------- */
.hero{position:relative; background:var(--wine-700); color:var(--on-wine); overflow:hidden}
/* Camada de foto (corrida no Hipódromo da Madalena). Degrada para --wine-800 se ausente. */
.hero__bg{position:absolute; inset:0; z-index:0; background-color:var(--wine-800);
  background-image:image-set(
    url("/assets/img/hero-corrida.avif") type("image/avif"),
    url("/assets/img/hero-corrida.webp") type("image/webp"),
    url("/assets/img/hero-corrida.jpg") type("image/jpeg"));
  background-size:cover; background-position:center right; background-repeat:no-repeat}
.hero__bg::before{ /* scrim de legibilidade (escuro à esquerda, foto à direita) + aura quente */
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 80% 12%, rgba(199,154,62,.20), transparent 60%),
    linear-gradient(95deg, rgba(62,12,23,.94) 0%, rgba(62,12,23,.82) 44%, rgba(62,12,23,.46) 78%, rgba(62,12,23,.32) 100%),
    linear-gradient(160deg, rgba(123,31,43,.40), rgba(62,12,23,.64));
}
.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");
}
/* Marca-d'água de ferradura (motivo turfe) no hero */
.hero__bg span{
  position:absolute; left:-70px; bottom:-70px; width:min(400px,50vw); aspect-ratio:1; opacity:.1;
  background:no-repeat center/contain var(--motif-shoe-brass);
  animation:shoe-float 9s ease-in-out infinite;
}
@keyframes shoe-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(-2deg)}}
@media (prefers-reduced-motion:reduce){.hero__bg span{animation:none}}
/* Linha de chegada (bandeira quadriculada) na borda inferior do hero */
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:12px; z-index:1;
  background:var(--motif-finish); box-shadow:0 -1px 0 rgba(199,154,62,.5)}
.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 ----------------------------------------- */
/* Conteúdo só é escondido depois que o JS assume (classe .js, marcada no início
   de main.js). Sem JS — ou se o script falhar — nada fica invisível.
   A classe vem de um arquivo externo, não de script inline: a CSP segue sem
   'unsafe-inline' em script-src. */
.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}
/* Parceiros — logos em plaquetas claras (logos coloridos não leem sobre o vinho) */
.site-footer__partners{padding-top:var(--s5); margin-top:var(--s5); border-top:1px solid rgba(199,154,62,.25)}
.site-footer__partners h4{margin-bottom:var(--s4)}
.partner-logos{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s4); align-items:stretch}
.partner-logos li{display:block; width:132px}
.partner-logo{display:flex; align-items:center; justify-content:center; width:100%; height:82px; padding:.7rem 1rem; background:#fff;
  border:1px solid var(--brass-300); border-radius:var(--r); box-shadow:var(--sh-1);
  transition:transform .2s ease, box-shadow .25s ease, border-color .2s}
.partner-logo img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; filter:saturate(.96)}
.partner-logo:hover{transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--brass)}
@media (max-width:520px){.partner-logos{gap:var(--s3)} .partner-logos li{width:calc(50% - .375rem)} .partner-logo{height:74px}}

.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}

/* ---------- CONFIRMAÇÃO DE IDADE (18+) -----------------------------------
   Painel ancorado no rodapé da janela, NÃO um scrim de tela cheia: o conteúdo
   institucional e o rodapé com CNPJ, endereço e jogo responsável continuam
   visíveis e roláveis enquanto a confirmação não é dada (ТЗ 4.4).            */
.age-gate{position:fixed; left:0; right:0; bottom:0; z-index:200; padding:var(--s4);
  max-height:min(46vh,300px); overflow:auto;
  background:linear-gradient(180deg, rgba(62,12,23,.92), rgba(46,42,36,.97));
  border-top:2px solid var(--brass); box-shadow:0 -12px 40px rgba(46,42,36,.35);
  animation:agfade .3s ease}
@keyframes agfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.age-gate{animation:none}}
.age-gate__box{position:relative; z-index:1; background:var(--parch-2); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6); width:min(720px,100%); margin-inline:auto; text-align:center; box-shadow:var(--sh-3)}
.age-gate__mark{width:74px; height:74px; margin:0 auto var(--s3); color:var(--brass)}
.age-gate__mark .seal-img{filter:brightness(1.05)}
.age-gate__box .badge--18{margin-bottom:var(--s3)}
.age-gate__box h2{color:var(--wine-700); margin-bottom:var(--s3)}
.age-gate__lead{color:var(--ink-soft); font-size:1rem; margin-bottom:var(--s5)}
.age-gate__actions{display:grid; gap:.7rem; margin-bottom:var(--s4)}
.age-gate__deny{display:flex; align-items:flex-start; gap:.5rem; text-align:left; font-size:.9rem;
  color:var(--espresso); background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); border-radius:var(--r); padding:var(--s4); margin-bottom:var(--s4)}
.age-gate__deny .icon{color:var(--warn); flex:0 0 auto; margin-top:.15rem}
.age-gate__fine{font-size:.8rem; margin:0}
@media (max-width:480px){.age-gate__box{padding:var(--s6) var(--s5)}}

/* ---------- 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{position:relative; display:flex; flex-direction:column; overflow:hidden; padding:0}
/* Banner-foto no topo do card (degrada para --wine-800 se a foto faltar) */
.race-card__thumb{position:relative; min-height:150px; display:flex; align-items:flex-start;
  justify-content:space-between; gap:.5rem; padding:.7rem; background-color:var(--wine-800);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:transform .3s ease}
.race-card__thumb::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(46,10,20,.55), transparent 42%, rgba(46,10,20,.12))}
.race-card__thumb::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:var(--motif-finish); opacity:.92}
.race-card__thumb .badge,.race-card__thumb .pareo-num{position:relative; z-index:1}
.race-card__thumb .badge--wine{background:var(--wine-700); color:#fff; border:1.5px solid var(--brass)}
.card--link:hover .race-card__thumb{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.card--link:hover .race-card__thumb{transform:none}}
.race-thumb--1{background-image:image-set(url("/assets/img/race-1.avif") type("image/avif"),url("/assets/img/race-1.webp") type("image/webp"),url("/assets/img/race-1.jpg") type("image/jpeg"))}
.race-thumb--2{background-image:image-set(url("/assets/img/race-2.avif") type("image/avif"),url("/assets/img/race-2.webp") type("image/webp"),url("/assets/img/race-2.jpg") type("image/jpeg"))}
.race-thumb--3{background-image:image-set(url("/assets/img/race-3.avif") type("image/avif"),url("/assets/img/race-3.webp") type("image/webp"),url("/assets/img/race-3.jpg") type("image/jpeg"))}
.race-card__body{display:flex; flex-direction:column; gap:.5rem; padding:var(--s5); flex:1}
.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{position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s6); align-items:center;
  padding:var(--s7); border-radius:var(--r-lg); overflow:hidden;
  background:
    linear-gradient(120deg, rgba(62,12,23,.92) 0%, rgba(92,17,34,.80) 52%, rgba(46,42,36,.90) 100%),
    var(--wine-800) image-set(
      url("/assets/img/gp-finish.avif") type("image/avif"),
      url("/assets/img/gp-finish.webp") type("image/webp"),
      url("/assets/img/gp-finish.jpg") type("image/jpeg")) center/cover no-repeat}
/* Faixa de chegada quadriculada no topo do destaque do GP */
.gp-spotlight::before{content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:var(--motif-finish); opacity:.9}
.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 — faixa vinho com marca-d'água de ferradura */
.section--wine{position:relative; overflow:hidden}
.section--wine::after{content:""; position:absolute; right:-60px; bottom:-80px; width:min(320px,38vw); aspect-ratio:1;
  background:no-repeat center/contain var(--motif-shoe-brass); opacity:.08; pointer-events:none; z-index:0}
.section--wine .wrap{position:relative; z-index:1}
.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}
/* Foto de arquivo emoldurada (degrada para --wine-800 se ausente) */
.heritage__photo{margin:0; min-height:340px; border-radius:var(--r-lg); background-color:var(--wine-800);
  background-image:image-set(
    url("/assets/img/heritage.avif") type("image/avif"),
    url("/assets/img/heritage.webp") type("image/webp"),
    url("/assets/img/heritage.jpg") type("image/jpeg"));
  background-size:cover; background-position:center}
@media (max-width:760px){.heritage{grid-template-columns:1fr} .heritage__photo{min-height:220px}}

/* Faixa de atmosfera (foto full-width com texto) */
.atmo-band{position:relative; overflow:hidden; background-color:var(--wine-800); color:var(--on-wine);
  background-image:image-set(
    url("/assets/img/atmosfera.avif") type("image/avif"),
    url("/assets/img/atmosfera.webp") type("image/webp"),
    url("/assets/img/atmosfera.jpg") type("image/jpeg"));
  background-size:cover; background-position:center; background-attachment:fixed}
.atmo-band::before{content:""; position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(46,10,20,.92) 0%, rgba(62,12,23,.74) 52%, rgba(62,12,23,.5) 100%)}
.atmo-band__inner{position:relative; z-index:1; padding-block:clamp(var(--s7),7vw,var(--s9)); max-width:60ch}
.atmo-band .eyebrow{color:var(--brass)}
.atmo-band h2{color:#fff; margin-bottom:var(--s3)}
.atmo-band h2 .accent{color:var(--brass)}
.atmo-band p{color:var(--on-wine); max-width:52ch}
.atmo-band__cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:var(--s5)}
@media (prefers-reduced-motion:reduce){.atmo-band{background-attachment:scroll}}
@media (max-width:820px){.atmo-band{background-attachment:scroll}}

/* ---------- 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, construtor de pule
   ========================================================================== */
/* Page-hero com camada de foto (turfe). Degrada para --wine-800 se a foto faltar. */
.pagehero{position:relative; background-color:var(--wine-800); color:var(--on-wine); padding-block:var(--s7); overflow:hidden}
.pagehero::before{content:""; position:absolute; inset:0; z-index:0;
  background:image-set(
    url("/assets/img/pagehero-turfe.avif") type("image/avif"),
    url("/assets/img/pagehero-turfe.webp") type("image/webp"),
    url("/assets/img/pagehero-turfe.jpg") type("image/jpeg")) center/cover no-repeat}
.pagehero::after{content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, rgba(62,12,23,.90) 0%, rgba(92,17,34,.82) 55%, rgba(62,12,23,.88) 100%)}
.pagehero > .wrap{position:relative; z-index:1}
/* Foto de arquivo específica na página História */
.page-historia .pagehero::before{background-image:image-set(
    url("/assets/img/historia-arquivo.avif") type("image/avif"),
    url("/assets/img/historia-arquivo.webp") type("image/webp"),
    url("/assets/img/historia-arquivo.jpg") type("image/jpeg"))}
.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 -------------------------------------------------- */
.pule-builder{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) */
.pule-builder__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){
  .pule-builder{grid-template-columns:1fr}
  .pule-builder__slip{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:90; padding:0}
  .pule-builder__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)}
  .pule-builder__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)}}

/* ============================================================================
   ADIÇÕES: faixa superior, avisos, novos blocos institucionais, área da conta
   ========================================================================== */

/* ---------- Utilitário de acessibilidade -------------------------------- */
.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}

/* ---------- FAIXA SUPERIOR (18+ / aviso legal) --------------------------- */
.topo-aviso{background:var(--wine-900); color:var(--on-wine); font-size:.82rem; border-bottom:1px solid var(--brass-600)}
.topo-aviso__row{display:flex; align-items:center; gap:.7rem; padding-block:.45rem; flex-wrap:wrap}
.topo-aviso p{margin:0; color:var(--on-wine)}
.topo-aviso a{color:var(--brass-300); text-decoration:underline}
.topo-aviso a:hover{color:#fff}
.topo-aviso .badge--18{background:var(--brass); color:var(--espresso); border-color:var(--brass-300)}
@media (max-width:520px){.topo-aviso{font-size:.75rem}}

/* ---------- MENSAGENS (flash) ------------------------------------------- */
.flashes{margin-top:var(--s5)}
.flash{display:flex; align-items:flex-start; gap:.6rem; padding:.85rem 1rem; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--parch-2); margin-bottom:.7rem; font-size:.94rem}
.flash .icon{flex:0 0 auto; margin-top:.15rem}
.flash--ok{border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); color:#1c5a37}
.flash--ok .icon{color:var(--ok)}
.flash--erro{border-color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); color:#7a2020}
.flash--erro .icon{color:var(--danger)}
.flash--demo{border-color:var(--brass); background:var(--brass-100); color:var(--espresso)}
.flash--demo .icon{color:var(--brass-600)}
.flash--demo a{word-break:break-all}

/* ---------- AVISO DE DADOS DEMONSTRATIVOS -------------------------------- */
.aviso-demo{display:flex; align-items:flex-start; gap:.7rem; padding:var(--s4);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); border-left-width:4px;
  background:color-mix(in srgb,var(--warn) 10%,transparent); border-radius:var(--r);
  margin-bottom:var(--s5); font-size:.9rem; color:var(--espresso)}
.aviso-demo .icon{color:var(--warn); flex:0 0 auto; width:22px; height:22px; margin-top:.1rem}

/* Notice em variante de alerta */
.notice{border:1px solid var(--line)}
.notice--alerta{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.notice--alerta .icon{color:var(--warn)}

/* ---------- RODAPÉ (nova estrutura) -------------------------------------- */
.site-footer__brandrow{display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:center;
  padding-bottom:var(--s6); border-bottom:1px solid rgba(199,154,62,.25)}
.site-footer__brandrow .site-footer__blurb{margin-top:0}
.site-footer__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6); padding-block:var(--s6)}
.site-footer__col ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.9rem}
.site-footer__data{color:var(--on-wine-mute); line-height:1.5}
.site-footer__data li{color:var(--on-wine-mute)}
.site-footer__data strong{color:var(--brass-100)}
.muted-on-wine{color:var(--on-wine-mute)}
.pendente{color:var(--brass-300); border-bottom:1px dashed var(--brass-300); cursor:help}
.site-footer__quick{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; padding-block:var(--s4);
  border-top:1px solid rgba(199,154,62,.25); font-size:.86rem}
.site-footer__avisos{display:flex; align-items:flex-start; gap:.8rem; padding:var(--s4) var(--s5);
  margin-top:var(--s5); border:1px solid var(--brass-600); border-radius:var(--r-lg); background:rgba(0,0,0,.22)}
.site-footer__avisos p{margin:0; color:var(--brass-100); font-weight:600; font-size:.92rem}
.site-footer__operador{margin:var(--s4) 0 0; font-size:.84rem; color:var(--on-wine-mute)}
@media (max-width:1024px){.site-footer__cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .site-footer__cols{grid-template-columns:1fr; gap:var(--s5)}
  .site-footer__brandrow{grid-template-columns:1fr}
}

/* ---------- AGE GATE: bloco de dados obrigatórios ------------------------ */
.age-gate__legal{margin:var(--s4) 0; padding:var(--s4); border-radius:var(--r);
  background:var(--parch-3); font-size:.78rem; color:var(--ink-soft); text-align:left; display:grid; gap:.3rem}
.age-gate__legal a{color:var(--wine-600); text-decoration:underline}
.age-gate__actions{display:grid; gap:.7rem; margin-bottom:var(--s4)}

/* ---------- COOKIES: rótulos --------------------------------------------- */
.cookie-cat__nome{font-weight:700; color:var(--ink)}
.cookie-banner__actions .btn{flex:1 1 auto; text-align:center}

/* ---------- BLOCO DE TEXTO SEO ------------------------------------------ */
.texto-seo__corpo{max-width:74ch; font-size:1.02rem}
.texto-seo__corpo a{text-decoration:underline; text-underline-offset:2px}

/* ---------- BLOCO DE LEGALIDADE + FAQ ----------------------------------- */
.legalidade-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-bottom:var(--s7)}
.legalidade-card p{font-size:.92rem; color:var(--ink-soft); margin:0}
@media (max-width:860px){.legalidade-grid{grid-template-columns:1fr}}

.faq{max-width:74ch}
.faq__titulo{margin-bottom:var(--s4)}
.faq__item{border:1px solid var(--line); border-radius:var(--r); background:var(--parch-2); margin-bottom:.6rem}
.faq__item summary{display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  padding:.9rem 1.1rem; font-weight:600; color:var(--wine-700); list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary .icon{flex:0 0 auto; color:var(--brass-600); transition:transform .2s}
.faq__item[open] summary .icon{transform:rotate(180deg)}
.faq__item summary:hover{background:var(--parch-3)}
.faq__resposta{padding:0 1.1rem 1rem; color:var(--ink-soft); font-size:.95rem}
.faq__mais{margin-top:var(--s4); font-size:.9rem}

/* ---------- LISTAS AUXILIARES ------------------------------------------- */
.lista-limpa{list-style:none; margin:0 0 var(--s4); padding:0; display:grid; gap:.55rem; font-size:.94rem}
.lista-limpa li{display:flex; align-items:flex-start; gap:.5rem}
.lista-limpa .icon{flex:0 0 auto; color:var(--brass-600); margin-top:.18rem}
.lista-duas{grid-template-columns:1fr 1fr; column-gap:var(--s5)}
@media (max-width:760px){.lista-duas{grid-template-columns:1fr}}
.lista-passos{padding-left:1.1rem; display:grid; gap:.7rem; font-size:.94rem}
.passos-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4)}
.passos-grid .pareo-num{margin-bottom:.6rem}
.passos-grid h3{font-size:1.05rem}
.passos-grid p{font-size:.88rem; margin:0}
@media (max-width:960px){.passos-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.passos-grid{grid-template-columns:1fr}}

/* Tabela "chave -> valor" enxuta */
table.data--simples{min-width:0}
table.data--simples th[scope="row"]{background:transparent; color:var(--ink-mute); font-family:var(--sans);
  font-weight:600; text-transform:none; letter-spacing:0; font-size:.9rem}

/* ---------- CADASTRO: declarações --------------------------------------- */
.declaracoes{border:1px solid var(--line-strong); border-radius:var(--r); padding:var(--s4);
  margin-block:var(--s5); background:var(--parch-3)}
.declaracoes legend{font-weight:700; color:var(--wine-700); padding-inline:.4rem; font-size:.92rem}
.declaracoes .field.checkbox{margin-bottom:.9rem}
.declaracoes__detalhe{margin:-.4rem 0 1rem 1.65rem; font-size:.86rem}
.declaracoes__detalhe summary{cursor:pointer; color:var(--wine-600); display:flex; align-items:center; gap:.3rem}
.declaracoes__detalhe summary .icon{width:16px; height:16px}
.declaracoes__detalhe ul{margin:.5rem 0 0; padding-left:1.1rem; color:var(--ink-soft)}
.field.checkbox.is-invalid label{color:var(--danger)}
.field.checkbox .field__error{flex-basis:100%}

/* ---------- ÁREA DA CONTA ------------------------------------------------ */
.conta-saldo .muted:last-child{font-size:.78rem}
.conta-tabs{gap:.2rem}
a.conta-tab{text-decoration:none}
a.conta-tab:hover{color:var(--wine-700)}
.conta-tab--exit{margin-left:auto; padding:0; background:none}
.conta-tab--exit button{display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border:0;
  background:transparent; cursor:pointer; font:inherit; font-weight:600; color:var(--wine-600);
  border-radius:var(--r) var(--r) 0 0}
.conta-tab--exit button:hover{background:var(--parch-3)}
.conta-cards{margin-top:var(--s5)}
.conta-kpi{display:flex; flex-direction:column; gap:.3rem}
.conta-kpi__rot{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); font-weight:700}
.conta-kpi__val{font-family:var(--serif); font-size:1.8rem; color:var(--wine-700); line-height:1.1}
.conta-kpi .muted{font-size:.85rem}
.conta-status{list-style:none; margin:.3rem 0 0; padding:0; display:grid; gap:.45rem; font-size:.9rem}
.conta-status li{display:flex; align-items:flex-start; gap:.45rem}
.conta-status .icon{flex:0 0 auto; color:var(--brass-600); margin-top:.15rem; width:18px; height:18px}
.conta-acoes{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:var(--s5)}
.card--perigo{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.card--pendentes{border-color:var(--brass); margin-top:var(--s5)}
.lista-pendentes{list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:.7rem}
.lista-pendentes li{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem .9rem; border:1px solid var(--line); border-radius:var(--r); background:var(--parch-3); font-size:.92rem}
.filtro-periodo{display:flex; gap:.7rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--s5)}
.filtro-periodo .field{margin-bottom:0}
.filtro-periodo .control{width:auto}
.kyc-status{padding:.6rem .9rem; border-radius:var(--r); background:var(--parch-3); font-size:.94rem}
.kyc-status--ok{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.kyc-status--warn{background:color-mix(in srgb,var(--warn) 12%,transparent)}
.kyc-status--danger{background:color-mix(in srgb,var(--danger) 10%,transparent)}
.dados-cadastrais li{font-size:.9rem}

/* ---------- BET BUILDER: ajustes ---------------------------------------- */
a.bb-pareo{text-decoration:none; color:var(--ink)}
a.bb-pareo:hover{color:var(--ink)}
.bb-nota{font-size:.85rem; margin-top:.6rem; display:flex; align-items:center; gap:.4rem}
.badge--sim{background:var(--brass-100); color:#6E520F; border:1px solid var(--brass-300)}
.badge--sim .icon{width:14px; height:14px}
.slip__login{display:flex; align-items:flex-start; gap:.4rem}

/* ---------- JOGO RESPONSÁVEL -------------------------------------------- */
.rg-card p{font-size:.9rem; color:var(--ink-soft)}
.rg-card .btn{margin-top:.6rem}
.rg-teste__lista{list-style:none; margin:0 0 var(--s5); padding:0; display:grid; gap:.9rem; counter-reset:rgq}
.rg-teste__item{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  padding:.8rem .9rem; border:1px solid var(--line); border-radius:var(--r); background:var(--parch-3)}
.rg-teste__pergunta{margin:0; font-size:.94rem; flex:1 1 320px}
.rg-teste__pergunta::before{counter-increment:rgq; content:counter(rgq) ". "; font-weight:700; color:var(--brass-600)}
.rg-teste__opcoes{display:flex; gap:1rem; font-size:.9rem}
.rg-teste__opcoes label{display:inline-flex; align-items:center; gap:.35rem; cursor:pointer}
.rg-teste__opcoes input{accent-color:var(--wine-700); width:1.05rem; height:1.05rem}
.rg-teste__resultado{margin-top:var(--s5); padding:var(--s5); border-radius:var(--r); border:1px solid var(--line-strong)}
.rg-teste__resultado h3{margin-bottom:.4rem}
.rg-res__pontos{font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 .3rem}
.rg-res__acoes{display:flex; gap:.5rem; flex-wrap:wrap; margin:var(--s4) 0 .4rem}
.rg-res__nota{font-size:.82rem; margin:0}
.rg-res--ok{background:color-mix(in srgb,var(--ok) 10%,transparent); border-color:var(--ok)}
.rg-res--atencao{background:color-mix(in srgb,var(--brass) 16%,transparent); border-color:var(--brass-600)}
.rg-res--risco{background:color-mix(in srgb,var(--warn) 12%,transparent); border-color:var(--warn)}
.rg-res--alto{background:color-mix(in srgb,var(--danger) 10%,transparent); border-color:var(--danger)}

/* ---------- LEGAL: versão na barra lateral ------------------------------ */
.legal__versao{font-size:.8rem; margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--line)}
.legal__section table.data{margin-block:var(--s4)}
.legal__section .notice{margin-block:var(--s4)}
.legal__section code{background:var(--parch-3); padding:.1rem .35rem; border-radius:var(--r-sm); font-size:.9em}
.legal__section ol{padding-left:1.2rem}
.legal__section ol li{margin-bottom:.4rem}

/* ---------- CONTRASTE: links sobre superfícies escuras ------------------
   O <a> global usa --wine-600 (vinho escuro). Herdado dentro do page-hero,
   do hero, das faixas vinho e dos cards vinho, ele fica escuro-sobre-escuro
   e some. Nesses contextos o link passa a latão claro e sublinhado.        */
.pagehero a:not(.btn),
.hero a:not(.btn),
.atmo-band a:not(.btn),
.section--wine a:not(.btn),
.card--wine a:not(.btn),
.gp-spotlight a:not(.btn){color:var(--brass-300); text-decoration:underline; text-underline-offset:2px}
.pagehero a:not(.btn):hover,
.hero a:not(.btn):hover,
.atmo-band a:not(.btn):hover,
.section--wine a:not(.btn):hover,
.card--wine a:not(.btn):hover,
.gp-spotlight a:not(.btn):hover{color:#fff}

/* ---------- CONTRASTE: correções pontuais (AA) --------------------------
   1) <strong> herda --ink (escuro). Dentro do page-hero, que é vinho, isso
      resultava em escuro sobre escuro — o mesmo problema já tratado para o
      rodapé e as faixas vinho, mas o page-hero havia ficado de fora.
   2) .pendente ([PREENCHER]) foi desenhado para o rodapé escuro; em cards
      claros o latão-300 não tinha contraste. Agora o padrão é escuro e o
      rodapé recebe a variante clara.
   3) .badge--brass ficava em 4,2:1 sobre --brass-100. Escurecido para ~5,8:1.  */
.pagehero strong,
.atmo-band strong,
.gp-spotlight strong{color:var(--brass-100)}

.pendente{color:#8A5210; border-bottom:1px dashed currentColor; cursor:help}
.site-footer .pendente,
.card--wine .pendente,
.section--wine .pendente{color:var(--brass-300)}

.badge--brass{color:#6E520F}

/* ---------- CABEÇALHO NO ESTADO LOGADO ---------------------------------
   Logado, a barra ganha saldo, atalho de apostas, depósito e conta. Em telas
   médias isso não cabe junto com a navegação principal: o saldo quebrava em
   duas linhas e o último botão passava da margem. Aqui a navegação recolhe
   antes, indo para o menu off-canvas.                                       */
.hbalance{white-space:nowrap}
.site-header__actions{flex-wrap:nowrap}
@media (max-width:1500px){
  .site-header--auth .mainnav{display:none}
  .site-header--auth .burger{display:grid}
}

/* No mobile a pule vira uma barra fixa no rodapé; o botão "voltar ao topo"
   ficava por cima do "Confirmar aposta". Na página de apostas ele sai de cena. */
@media (max-width:960px){
  .page-apostas .to-top{display:none}
}

/* ---------- ALERTA DE REALIDADE (reality check) -------------------------- */
.reality-check{position:fixed; inset:0; z-index:180; display:grid; place-items:center; padding:var(--s4);
  background:rgba(46,42,36,.62); overflow:auto}
.reality-check__box{position:relative; background:var(--parch-2); border-radius:var(--r-lg);
  padding:var(--s6); width:min(520px,100%); box-shadow:var(--sh-3); text-align:center}
.reality-check__box .card__ico{margin-inline:auto}
.reality-check__dados{display:grid; gap:.1rem; margin:var(--s5) 0; text-align:left}
.reality-check__dados div{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.55rem 0; border-bottom:1px solid var(--line)}
.reality-check__dados dt{margin:0; color:var(--ink-mute); font-size:.92rem}
.reality-check__dados dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
.reality-check__saldo{border-bottom:0 !important}
.reality-check__saldo dt{color:var(--wine-700) !important; font-weight:700}
.reality-check__saldo dd{font-size:1.2rem}
.reality-check__acoes{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:var(--s4)}

/* Reserva espaço no fim da página enquanto o painel de idade está visível,
   para que a última faixa do rodapé não fique escondida atrás dele.
   :has() cobre o caso sem JavaScript; a classe é o reforço de main.js. */
body:has(.age-gate),
body.com-agegate{padding-bottom:calc(min(46vh,300px) + var(--s6))}
/* Barra compacta: texto à esquerda, ações à direita. A duplicação dos dados do
   clube saiu daqui de propósito — agora o rodapé real fica acessível. */
.age-gate__box{display:flex; align-items:center; gap:var(--s5); text-align:left}
.age-gate__texto{flex:1 1 420px}
.age-gate__box .badge--18{margin-bottom:.4rem}
.age-gate__box h2{font-size:1.25rem; margin-bottom:.3rem}
.age-gate__lead{font-size:.9rem; color:var(--ink-soft); margin-bottom:.4rem}
.age-gate__fine{font-size:.8rem; margin:0}
.age-gate__actions{display:grid; gap:.6rem; flex:0 0 auto; min-width:260px; margin:0}
@media (max-width:820px){
  .age-gate__box{flex-direction:column; align-items:stretch; text-align:center}
  .age-gate__actions{min-width:0}
}

/* ---------- OVERFLOW HORIZONTAL EM GRIDS ---------------------------------
   Item de grid tem min-width:auto, que equivale ao min-content do conteúdo.
   Como `table.data` tem min-width:640px, esse mínimo vazava para fora da coluna
   e empurrava a página inteira — o .table-wrap com overflow-x:auto não segurava,
   porque quem define a largura mínima é o item de grid, não ele.
   Efeito visível: rolagem horizontal nas páginas legais e nos cards da conta
   em telas estreitas. Zerar o mínimo devolve o controle ao .table-wrap.        */
.grid > *,
.legal > *,
.home-duo > *,
.pule-builder > *,
.auth-grid > *{min-width:0}
.legal{grid-template-columns:250px minmax(0,1fr)}
@media (max-width:860px){.legal{grid-template-columns:minmax(0,1fr)}}
.table-wrap{max-width:100%}

/* Tabelas "chave -> valor" (contatos, encarregado) ficam dentro de cards e não
   têm .table-wrap. Sem quebra de palavra, e-mails e endereços longos empurravam
   a página em telas estreitas. */
table.data--simples{width:100%; table-layout:fixed}
table.data--simples th,
table.data--simples td{overflow-wrap:anywhere; word-break:break-word; padding:.6rem .5rem}
table.data--simples th[scope="row"]{width:40%}
@media (max-width:420px){
  table.data--simples,
  table.data--simples tbody,
  table.data--simples tr{display:block; width:100%}
  table.data--simples th[scope="row"],
  table.data--simples td{display:block; width:auto; border-bottom:0; padding:.15rem 0}
  table.data--simples tr{padding:.5rem 0; border-bottom:1px solid var(--line)}
}

/* .auth-note misturava texto solto e link dentro de um container flex: cada
   trecho virava um item de flex que não quebra linha, e em telas de 320px a
   linha estourava a viewport. Texto corrido resolve e mantém o selo alinhado. */
.auth-note{display:block}
.auth-note .badge{margin-right:.4rem; vertical-align:middle}

/* Mesma armadilha do .auth-note nas listas com ícone: texto solto, <strong> e
   <a> viravam itens de flex independentes, que não quebram linha entre si. O
   ícone passa a "pendurar" fora do fluxo e o texto volta a ser texto corrido. */
.lista-limpa li,
.conta-status li{display:block; overflow-wrap:anywhere}
/* O recuo só existe quando há ícone para ocupá-lo. */
.lista-limpa li:has(> .icon),
.conta-status li:has(> .icon){position:relative; padding-left:1.6rem}
.lista-limpa li > .icon,
.conta-status li > .icon{position:absolute; left:0; top:.3em; margin:0}