/* =========================================================
   LOTÉRICA BELTRÃO — style.css (revisado)
   Organização:
   1) Tokens / Variáveis
   2) Reset & Base
   3) Layout / Containers / Grids
   4) Header, Navegação e Hamburger
   5) Banner / Hero
   6) Botões
   7) Cards (Vitrine) + Temas
   8) Carrossel (Desktop) e Mobile em Lista
   9) Seções especiais (Como funciona / Sobre nós)
   10) Modal da Galeria
   11) WhatsApp Float + Banner de horário
   12) Age Dialog
   13) Utilidades
   ========================================================= */

/* ========== 1) TOKENS ========== */
:root{
  --brand-1:#adc2f6;
  --brand-1-soft:#d6dfff;
  --brand-2:#7fa5fb;
  --brand-2-soft:#93b4ff;
  --ink:#0f172a;
  --muted:#334155;
  --bg:#f8fafc;
  --white:#fff;
  --primary-500:#10b981;
  --primary-600:#059669;
  --primary-700:#047857;

  --radius:14px;
  --radius-sm:10px;

  --border:#e2e8f0;
  --shadow-1:0 6px 20px rgba(2,6,23,.08);
  --shadow-2:0 10px 25px rgba(2,6,23,.08);
  --shadow-3:0 24px 80px rgba(0,0,0,.35);

  /* Cores por modalidade */
  --mega:#209869;
  --quina:#260085;
  --loto:#930089;
}

/* ========== 2) RESET & BASE ========== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background-color:var(--white);
  color:#113486; /* sua cor predominante */
  line-height:1.6;
  position:relative;
  min-height:100vh;
}
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3{ color:var(--ink); margin-top:0; }
h2{ text-align:center; margin-bottom:1rem; }

/* ========== 3) LAYOUT / CONTAINERS / GRIDS ========== */
.container{
  width:min(1120px, 92%);
  margin:auto;
  padding:2rem 0;
}

/* Grades antigas (mantidas para compatibilidade) */
.grid.planos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  align-items:stretch;
}
@media (max-width:900px){
  .grid.planos{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .grid.planos{ grid-template-columns:1fr; }
}

.grid.outros{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content:center;
  gap:1.5rem;
  align-items:stretch;
}
@media (max-width:900px){
  .grid.outros{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:600px){
  .grid.outros{ grid-template-columns:1fr; }
}

/* ========== 4) HEADER / NAV / HAMBURGER ========== */
.site-header{
  background:#5fc391;
  color:var(--white);
  padding:0.5rem 0;
  position:sticky;
  top:0;
  z-index:100;
  overflow:hidden;
  isolation:isolate;
}
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, #4aa876 0%, #4aa876 35%, #5fc391 35%, #5fc391 100%);
  pointer-events:none;
  z-index:0;
}
.site-header .menu{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:min(1120px, 92%);
  margin:auto;
  position:relative;
  z-index:1;
  isolation:isolate;
}
.site-header .menu::before{ display:none; }
.site-header .menu strong{
  position:relative;
  z-index:1;
}
#logotipo{
  height:40px;
  width:auto;
  vertical-align:middle;
  margin-right:8px;
  object-fit:contain;
  max-width:100%;
}
@media (max-width:600px){
  #logotipo{ height:32px; margin-right:6px; }
}
nav{
  display:flex;
  gap:1rem;
}
nav a{
  color:var(--white);
  text-decoration:none;
  font-weight:bold;
  transition:opacity .3s;
}
nav a:hover{ opacity:.85; }

/* Hamburger básico (controla nav#nav-menu) */
.hamburger{
  display:none;
  width:40px; height:40px;
  border:0; background:transparent; cursor:pointer;
  position:relative; z-index:1001;
}
.hamburger span{
  position:absolute; left:8px; right:8px; height:3px;
  background:#fff; border-radius:3px;
  transition:transform .25s, opacity .2s, top .25s;
}
.hamburger span:nth-child(1){ top:11px; }
.hamburger span:nth-child(2){ top:18px; }
.hamburger span:nth-child(3){ top:25px; }
.hamburger.is-open span:nth-child(1){ top:18px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:18px; transform:rotate(-45deg); }

@media (max-width:900px){
  .hamburger{ display:block; }
  /* Menu colapsável simples */
  #nav-menu{
    position:absolute;
    top:56px; right:0;
    background:rgba(47, 145, 95, .85);
    display:none;
    flex-direction:column;
    width:200px;
    padding:1rem;
    border-radius:0 0 0 10px;
    backdrop-filter: blur(2px);
  }
  #nav-menu.open{ display:flex; }
}

/* ========== 5) HERO ========== */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:clamp(560px, 92vh, 500px);
  padding:clamp(3rem, 8vw, 5rem) 1.5rem;
  color:var(--white);
  background:
    radial-gradient(135% 120% at 20% 16%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 78% 12%, rgba(188,239,212,.5) 0%, rgba(188,239,212,0) 58%),
    linear-gradient(160deg,
      #d7f4e7 0%,
      #a6e3c5 30%,
      #5fc391 65%,
      #2d915f 100%
    );
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-20% -25% -18% -25%;
  background:
    radial-gradient(70% 78% at 22% 26%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(65% 75% at 76% 78%, rgba(24,112,72,.38) 0%, rgba(24,112,72,0) 75%),
    radial-gradient(55% 60% at 84% 32%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 68%),
    radial-gradient(80% 70% at 32% 86%, rgba(11,78,48,.34) 0%, rgba(11,78,48,0) 70%),
    radial-gradient(90% 90% at 0% 105%, rgba(23,102,64,.5) 0%, rgba(23,102,64,0) 65%);
  filter: blur(16px);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}

@media (max-width:380px){
  .hero {min-height: clamp(560px, 92vh, 820px);}
}
/* Overlay suave para reforçar o degradê sem os elementos de trevo */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 120% at 20% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(140% 140% at 80% 80%, rgba(15,72,44,.25) 0%, rgba(15,72,44,0) 70%);
  mix-blend-mode:soft-light;
  opacity:.8;
  pointer-events:none;
  z-index:2;
}

.hero-clovers{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.hero-clovers .clover{
  position:absolute;
  display:block;
  background:url("images/clover.svg") no-repeat center/contain;
  filter:drop-shadow(0 10px 22px rgba(15,72,44,.22));
  opacity:.7;
}

.hero-clovers .clover:nth-child(1){
  width:150px;
  height:150px;
  top:6%;
  left:4%;
  transform:rotate(-8deg);
}

.hero-clovers .clover:nth-child(2){
  width:120px;
  height:120px;
  top:10%;
  right:6%;
  transform:rotate(18deg);
  opacity:.6;
}

.hero-clovers .clover:nth-child(3){
  width:140px;
  height:140px;
  bottom:14%;
  left:6%;
  transform:rotate(10deg);
}

.hero-clovers .clover:nth-child(4){
  width:110px;
  height:110px;
  bottom:10%;
  right:8%;
  transform:rotate(-14deg);
  opacity:.65;
}

.hero-clovers .clover:nth-child(5){
  width:150px;
  height:150px;
  top:50%;
  right:-40px;
  transform:translateY(-50%) rotate(6deg);
  opacity:.5;
}

.hero-content{
  position:relative;
  z-index:3;
  width:min(720px, 92%);
  display:grid;
  gap:1.25rem;
  justify-items:center;
  text-align:center;
}
.hero h1{
  font-size:clamp(2.2rem, 4vw + .5rem, 3.5rem);
  line-height:1.1;
  margin:0;
  justify-self:center;
  text-align:center;
}
.hero p{
  margin:0;
  font-size:clamp(1rem, 1.6vw + .7rem, 1.25rem);
  color:rgba(255,255,255,.85);
}
.hero-badge{
  position:absolute;
  top:clamp(1.5rem, 6vw, 3rem);
  left:50%;
  transform:translateX(-50%) scale(.88);
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.5rem;
  padding:.9rem 2.25rem;
  background:var(--white);
  border:2px solid rgba(15,23,42,.1);
  border-radius:999px;
  backdrop-filter:blur(6px);
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
  font-size:.98rem;
  color:var(--ink);
  box-shadow:0 18px 40px rgba(15,24,66,.15);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.hero-badge:hover,
.hero-badge:focus-visible{
  background:#10b981;
  color:var(--white);
  border-color:#10b981;
  box-shadow:0 18px 40px rgba(16,185,129,.35);
  transform:translateX(-50%) scale(1.02);
}
.hero-cta{
  justify-self:center;
  background:var(--white);
  color:var(--brand-2);
  border-radius:999px;
  padding:.95rem 2.5rem;
  box-shadow:0 20px 45px rgba(15,24,66,.25);
}
.hero-cta:hover{
  transform:translateY(-3px);
}
.hero-cta:focus-visible{
  outline:3px solid rgba(255,255,255,.6);
  outline-offset:4px;
}

/* ========== 6) BOTÕES ========== */
.btn{
  background:#fff;
  color:#000;
  padding:.8rem 1.2rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  display:inline-block;
  transition:transform .2s, filter .3s;
}
.btn:hover{ transform:scale(1.05); filter:brightness(.98); }

/* ========== 7) CARDS (VITRINE) + TEMAS ========== */
.card-vitrine{
  --cv-head-bg:var(--cv-head, #7c3aed);
  --cv-head-color:#fff;
  --cv-body-bg:#fff;
  --cv-body-color:var(--ink);
  --cv-cta-bg:#fff;
  --cv-cta-color:var(--ink);
  --cv-cta-border:var(--cv-head-bg);
  --cv-cta-hover-bg:var(--cv-cta-border);
  --cv-cta-hover-color:#fff;

  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  border-radius:8px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card-vitrine > *{
  width:100%;
}
.card-vitrine:hover,
.card-vitrine:focus-within{
  transform:scale(1.03);
  box-shadow:var(--shadow-2);
}
.cv-head{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .9rem; font-weight:800; font-size:1rem;
  background:var(--cv-head-bg);
  color:var(--cv-head-color);
}
.cv-body{
  flex:1;
  padding:.9rem .9rem 1rem;
  background:var(--cv-body-bg);
  color:var(--cv-body-color);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.card-especial .cv-body{ gap:.45rem; }
.cv-titulo{ line-height:1.2; }
.cv-premio{ font-size:1.35rem; font-weight:900; color:var(--cv-cta-border); }
.cv-sub{ color:#64748b; margin-top:.15rem; }
.cv-result-title{ margin-top:.65rem; font-weight:700; color:var(--cv-cta-border); }
.cv-dezenas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.35rem;
  margin-top:.35rem;
}
.cv-dezena{
  --size:2.05rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size);
  height:var(--size);
  border-radius:999px;
  background:var(--cv-dezena-bg, var(--cv-cta-border));
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.01em;
}
.cv-dezena--placeholder{
  background:color-mix(in srgb, var(--cv-cta-border) 14%, white);
  color:#475569;
}
.cv-legenda{
  margin:0;
  font-size:.95rem;
  color:#475569;
}
.cv-linhas>div{ margin:.25rem 0; }
.cv-detalhes{
  display:inline-block; margin:.4rem 0 0; font-size:.85rem;
  padding:.15rem .45rem; border-radius:6px; text-decoration:none; font-weight:800;
  color:var(--cv-cta-border);
  background: color-mix(in srgb, var(--cv-cta-border) 12%, white);
}
.cv-detalhes:hover{ filter:brightness(.95); }
.cv-preco{ margin:.6rem 0 .4rem; font-weight:900; font-size:1.4rem; color:var(--ink); }
.cv-qty{ display:flex; align-items:center; justify-content:center; gap:.4rem; margin:.2rem 0 .6rem; }
.cv-qty input{
  width:64px; text-align:center; padding:.4rem .2rem;
  border:1px solid var(--border); border-radius:10px; font-weight:800;
}
.cv-qty button{
  width:36px; height:36px; border:0; border-radius:10px; cursor:pointer; font-weight:900;
  background: color-mix(in srgb, var(--cv-cta-border) 18%, white);
  color: var(--cv-cta-border);
}
.cv-qty button:hover{ filter:brightness(.95); }
.cv-info{ color:#475569; font-size:.92rem; display:grid; gap:.15rem; }

/* CTA colado na base */
.cv-cta{
  display:grid; place-items:center;
  width:100%; padding:1rem 1.25rem; margin:0;
  text-align:center; text-decoration:none; font-weight:800;
  background:var(--cv-cta-bg);
  color:var(--cv-cta-color);
  border:0;
  border-radius:0 0 8px 8px;
  box-shadow:inset 0 0 0 2px var(--cv-cta-border);
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cv-cta:hover,
.cv-cta:focus-visible{
  background:var(--cv-cta-hover-bg);
  color:var(--cv-cta-hover-color);
  box-shadow:inset 0 0 0 2px var(--cv-cta-border);
}
.cv-cta:focus-visible{
  outline:3px solid rgba(91,141,248,.35);
  outline-offset:3px;
}

.cv-cta-group{
  display:flex;
  width:100%;
  gap:0;
}
.cv-cta-group .btn{
  flex:1;
  margin:0;
  border-radius:0;
  display:grid;
  place-items:center;
  padding:1rem 1.25rem;
  font-weight:800;
  text-decoration:none;
  transition:background-color .25s ease, color .25s ease, filter .25s ease, box-shadow .25s ease;
}
.cv-cta-group .btn:first-child{
  border-radius:0 0 0 8px;
}
.cv-cta-group .btn:last-child{
  border-radius:0 0 8px 0;
}
.cv-cta-group .btn:hover{
  transform:none;
}
.cv-cta-group .btn:focus-visible{
  outline:3px solid rgba(91,141,248,.35);
  outline-offset:2px;
}

/* Temas por modalidade */
.card-vitrine.tema-mega{ --cv-head:var(--mega); }
.card-vitrine.tema-quina{ --cv-head:var(--quina); }
.card-vitrine.tema-lotofacil{ --cv-head:var(--loto); }

/* Ajustes individuais para cada card */
.card-mega-virada{
  --cv-head-bg:var(--mega);
  --cv-body-bg:#fff;
  --cv-body-color:var(--ink);
  --cv-cta-border:var(--mega);
}
.cv-head-mega-virada{
  --cv-head-bg:var(--mega);
  --cv-head-color:#fff;
}
.cv-body-mega-virada{
  --cv-body-bg:linear-gradient(180deg, rgba(32,152,105,.04) 0%, rgba(32,152,105,0) 85%);
  background:
    var(--cv-body-bg),
    url("images/clover.svg") center/140px no-repeat;
}
.cv-body-mega-virada .cv-fireworks{
  position:relative;
  width:100%;
  max-width:220px;
  margin:.25rem auto .85rem;
  display:flex;
  justify-content:center;
}
.cv-body-mega-virada .cv-fireworks img{
  display:block;
}
.cv-body-mega-virada .cv-firework-main{
  width:120px;
  max-width:60%;
}
.cv-body-mega-virada .cv-firework-secondary{
  width:68px;
  position:absolute;
  bottom:-14px;
  right:10%;
}
.cv-cta-mega-virada-comprar{
  background:var(--mega);
  color:#fff;
  box-shadow:inset 0 0 0 2px var(--mega);
}
.cv-cta-mega-virada-comprar:hover,
.cv-cta-mega-virada-comprar:focus-visible{
  filter:brightness(.95);
}
.cv-cta-mega-virada-cotas{
  background:#fff;
  color:var(--mega);
  box-shadow:inset 0 0 0 2px var(--mega);
}
.cv-cta-mega-virada-cotas:hover,
.cv-cta-mega-virada-cotas:focus-visible{
  background: color-mix(in srgb, var(--mega) 12%, white);
  filter:none;
}

.card-lotofacil{
  --cv-head-bg:var(--loto);
  --cv-body-bg:color-mix(in srgb, var(--loto) 6%, white);
  --cv-body-color:var(--ink);
  --cv-cta-border:var(--loto);
}
.cv-head-lotofacil{
  --cv-head-bg:var(--loto);
}
.cv-body-lotofacil{
  --cv-body-bg:color-mix(in srgb, var(--loto) 6%, white);
}
.card-mega{
  --cv-head-bg:var(--mega);
  --cv-body-bg:#fff;
  --cv-body-color:var(--ink);
  --cv-cta-border:var(--mega);
}
.cv-head-mega{
  --cv-head-bg:var(--mega);
}
.cv-body-mega{
  --cv-body-bg:#fff;
}
.card-quina{
  --cv-head-bg:var(--quina);
  --cv-body-bg:color-mix(in srgb, var(--quina) 7%, white);
  --cv-body-color:var(--ink);
  --cv-cta-border:var(--quina);
}
.cv-head-quina{
  --cv-head-bg:var(--quina);
}
.cv-body-quina{
  --cv-body-bg:color-mix(in srgb, var(--quina) 7%, white);
}

.cv-cta-lotofacil-reservar{
  background:var(--loto);
  color:#fff;
  box-shadow:inset 0 0 0 2px var(--loto);
}
.cv-cta-lotofacil-reservar:hover,
.cv-cta-lotofacil-reservar:focus-visible{
  filter:brightness(.95);
}
.cv-cta-lotofacil-cotas{
  background:#fff;
  color:var(--loto);
  box-shadow:inset 0 0 0 2px var(--loto);
}
.cv-cta-lotofacil-cotas:hover,
.cv-cta-lotofacil-cotas:focus-visible{
  background:color-mix(in srgb, var(--loto) 12%, white);
  filter:none;
}

.cv-cta-mega-reservar{
  background:var(--mega);
  color:#fff;
  box-shadow:inset 0 0 0 2px var(--mega);
}
.cv-cta-mega-reservar:hover,
.cv-cta-mega-reservar:focus-visible{
  filter:brightness(.95);
}
.cv-cta-mega-cotas{
  background:#fff;
  color:var(--mega);
  box-shadow:inset 0 0 0 2px var(--mega);
}
.cv-cta-mega-cotas:hover,
.cv-cta-mega-cotas:focus-visible{
  background:color-mix(in srgb, var(--mega) 12%, white);
  filter:none;
}

.cv-cta-quina-reservar{
  background:var(--quina);
  color:#fff;
  box-shadow:inset 0 0 0 2px var(--quina);
}
.cv-cta-quina-reservar:hover,
.cv-cta-quina-reservar:focus-visible{
  filter:brightness(.95);
}
.cv-cta-quina-cotas{
  background:#fff;
  color:var(--quina);
  box-shadow:inset 0 0 0 2px var(--quina);
}
.cv-cta-quina-cotas:hover,
.cv-cta-quina-cotas:focus-visible{
  background:color-mix(in srgb, var(--quina) 12%, white);
  filter:none;
}

@media (max-width:380px){
  .cv-premio{ font-size:1.2rem; }
  .cv-preco{ font-size:1.2rem; }
}

@media (max-width:600px){
  .card-vitrine{
    min-height:clamp(420px, 72vh, 480px);
  }

  .card-vitrine .cv-body{
    padding-bottom:1.4rem;
  }
}

/* ========== 8) LISTA DE BOLÕES ========== */
.boloes{
  width:100%;
  margin:2rem 0;
}
.boloes-destaque{
  display:flex;
  justify-content:center;
  margin:0 auto clamp(1.5rem, 4vw, 2.5rem);
}
.boloes-destaque .card-vitrine{
  max-width:420px;
  flex:1 1 360px;
}
.boloes-grid{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(1rem, 3vw, 1.5rem);
  flex-wrap:wrap;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  background:#b6e9d6;
  width:100%;
  border-radius:0;
}
.boloes-grid .card-vitrine{
  flex:1 1 280px;
  max-width:320px;
}
@media (max-width:768px){
  .boloes-destaque{
    padding-inline:clamp(.5rem, 4vw, 1.5rem);
  }
  .boloes-destaque .card-vitrine{
    max-width:100%;
    min-height: 300px;
  }
  .boloes-grid{
    flex-direction:column;
    align-items:center;
  }
  .boloes-grid .card-vitrine{
    max-width:360px;
    width:100%;
    min-height: 340px;
  }
}

/* ========== 9) SEÇÕES ESPECIAIS ========== */
#como-funciona{
  width:100%;
  background:#ffffff;
  display:flex;
  justify-content:center;
  align-items: center;
  color:var(--ink);
  padding:clamp(2rem, 3.5rem) 0;
  padding-bottom: 20px;
  padding-top: 5px;
}
.como-funciona-wrapper{
  width:min(1120px, 92%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:clamp(1.5rem, 3vw, 2.25rem);
}
.como-funciona-heading{
  margin:0;
  font-size:clamp(1.25rem, 2vw, 1.6rem);
  font-weight:600;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink);
  position:relative;
  display:inline-block;
  padding-bottom:.25rem;
  align-self:flex-start;
  text-align:left;
}
.como-funciona-heading::after{
  content:"";
  position:absolute;
  left:0;
  transform:none;
  bottom:0;
  width:100%;
  height:4px;
  border-radius:999px;
  background:var(--primary-600);
  box-shadow:0 2px 10px rgba(16,185,129,.35);
}
.como-funciona-etapas{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1rem, 3vw, 2rem);
  padding:0;
  margin:0;
  list-style:none;
  width:100%;
}
.como-funciona-item{
  background:#ffffff;
  border-radius:18px;
  padding:clamp(1.4rem, 3vw, 1.8rem);
  box-shadow:var(--shadow-2), inset 0 0 0 1px rgba(148,163,184,.25);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  align-items:flex-start;
  text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
}
.como-funciona-item:hover,
.como-funciona-item:focus-within{
  transform:translateY(-6px);
  box-shadow:var(--shadow-3), inset 0 0 0 1px rgba(14,165,233,.35);
}
.como-funciona-icone{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(16,185,129,.18), rgba(14,165,233,.18));
  color:var(--primary-700);
}
.como-funciona-icone svg{
  width:34px;
  height:34px;
}
.como-funciona-item h3{
  margin:0;
  font-size:clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}

@media (max-width: 1024px){
  .como-funciona-etapas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .como-funciona-etapas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Sobre nós */
#contato{
  position:relative;
  margin-top:1rem;
  background:#b6e9d6;
  box-shadow:0 18px 48px rgba(4,120,87,.18);
  overflow:hidden;
}
#contato .sobre-nos-wrapper{
  position:relative;
  padding-block:clamp(2rem, 5vw, 3.5rem);
  text-align:left;
  color:var(--ink);
}
.sobre-nos-header{
  display:flex;
  justify-content:flex-start;
}
#contato .sobre-nos-titulo{
  margin:0;
  font-size:clamp(1.25rem, 2vw, 1.6rem);
  font-weight:600;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink);
  position:relative;
  display:inline-block;
  padding-bottom:.25rem;
  text-align:left;
}
#contato .sobre-nos-titulo::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:4px;
  border-radius:999px;
  background:var(--primary-600);
  box-shadow:0 2px 10px rgba(16,185,129,.35);
}
#contato .sobre-nos-conteudo{
  margin-top:1.2rem;
  text-align:left;
}
#contato .sobre-nos-conteudo p{
  max-width:100%;
  margin:.9rem 0 0;
  font-size:clamp(1rem, 1.1vw, 1.08rem);
  line-height:1.85;
  color:color-mix(in srgb, var(--ink) 70%, white 30%);
  text-align:justify;
}
.badge-oficial{
  display:block; width:fit-content; margin:.6rem 0 1rem;
  padding:.3rem .6rem; font-size:.78rem; font-weight:800;
  color:#0b1220; background:#eef2ff; border:1px solid rgba(150,179,241,.55);
  border-radius:999px; box-shadow:0 2px 6px rgba(91,141,248,.15);
  transition:all .3s ease; cursor:pointer;
}
.badge-oficial:hover{
  background:linear-gradient(90deg, var(--brand-1), var(--brand-2));
  color:#fff; border-color:transparent; transform:scale(1.05);
  box-shadow:0 4px 12px rgba(91,141,248,.35);
}
@media (max-width:480px){
  #contato{ border-radius:0; }
}

/* ========== 10) MODAL DA GALERIA ========== */
.gallery-modal{
  display:none; position:fixed; z-index:2000; inset:0;
  background:rgba(0,0,0,.85);
  align-items:center; justify-content:center;
}
.gallery-modal img{
  max-width:90%; max-height:80%; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,.6);
  transition:opacity .2s ease;
}
.gallery-modal .gallery-loader{
  display:none;
  position:absolute;
  inset:0;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  color:#f8fafc;
  font-weight:600;
  font-size:1.1rem;
  background:linear-gradient(135deg, rgba(15,118,110,.35), rgba(15,118,110,.15));
  backdrop-filter:blur(4px);
}
.gallery-modal .gallery-loader::after{
  content:"";
  display:block;
  width:42px;
  height:42px;
  margin:.85rem auto 0;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#34d399;
  animation:gallery-spin 1s linear infinite;
}
.gallery-modal.is-loading .gallery-loader,
.gallery-modal.has-error .gallery-loader{
  display:flex;
  flex-direction:column;
}
.gallery-modal.is-loading img,
.gallery-modal.has-error img{
  opacity:0;
  pointer-events:none;
}
.gallery-modal.has-error .gallery-loader{
  background:linear-gradient(135deg, rgba(248,113,113,.35), rgba(248,113,113,.15));
}
.gallery-modal.has-error .gallery-loader::after{
  border-color:rgba(255,255,255,.35);
  border-top-color:rgba(255,255,255,.35);
  animation:none;
}
.gallery-modal .close{
  position:absolute; top:20px; right:30px; font-size:2rem; color:#fff; cursor:pointer;
}
.gallery-modal .prev,
.gallery-modal .next{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2.5rem; font-weight:bold; color:#fff; cursor:pointer; padding:10px; user-select:none;
}
.gallery-modal .prev{ left:20px; }
.gallery-modal .next{ right:20px; }
.gallery-modal .prev:hover,
.gallery-modal .next:hover,
.gallery-modal .close:hover{ color:var(--brand-1); }
.gallery-modal.is-loading .prev,
.gallery-modal.is-loading .next{
  opacity:.3;
  pointer-events:none;
}
.gallery-modal.has-error .prev,
.gallery-modal.has-error .next{
  opacity:.3;
  pointer-events:none;
}

@keyframes gallery-spin{
  0%{ transform:rotate(0deg); }
  100%{ transform:rotate(360deg); }
}

/* ========== 11) WHATSAPP FLOAT + BANNER DE HORÁRIO ========== */
#store-banner{
  background:#00e6a8;
  color:#000;
  text-align:center;
  padding:.25rem .75rem;
  font-size:.85rem;
  line-height:1.2;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1100;
}
body.store-banner-visible .site-header{
  top:2.2rem;
}
.whatsapp-float{
  position:fixed; width:60px; height:60px; bottom:20px; right:20px;
  background-color:var(--brand-1);
  border-radius:50%; box-shadow:2px 2px 8px rgba(0,0,0,.3);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:transform .2s ease-in-out;
  animation:pulse 1.5s infinite;
}
.whatsapp-float img{ width:35px; height:35px; }
.whatsapp-float:hover{ background-color:#1ebe5c; transform:scale(1.1); }

/* Tooltip (apenas hover devices) */
.whatsapp-float::after{
  content:"Deseja participar do nosso grupo de bolões diários?";
  position:absolute; right:70px;
  background:#0f172a; color:#fff;
  padding:6px 10px; border-radius:6px; font-size:.85rem; white-space:nowrap;
  opacity:0; transition:opacity .3s;
}
@media (hover:hover){
  .whatsapp-float:hover::after{ opacity:1; }
}

@keyframes pulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ transform:scale(1.06); box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ========== 12) AGE DIALOG ========== */
#age-dialog{
  border:none; border-radius:var(--radius); padding:1.6rem;
  width:min(92vw, 420px);
  background:rgb(150, 179, 241);
  color:#fff; box-shadow:var(--shadow-3);
}
#age-dialog h2{ margin:0 0 .6rem; font-size:1.25rem; color:#000; }
#age-dialog p{ margin:0 0 1rem; color:#000; }
#age-dialog .age-actions{ display:flex; gap:.6rem; justify-content:flex-end; }
#age-dialog button{
  padding:.6rem 1rem; border:0; border-radius:10px; font-weight:700; cursor:pointer;
}
#age-dialog #btn-yes{ background:#22c55e; color:#fff; }
#age-dialog #btn-no{ background:#ef4444; color:#fff; }
#age-dialog #btn-yes:hover{ background:#16a34a; }
#age-dialog #btn-no:hover{ background:#dc2626; }
#age-dialog::backdrop{ background:rgba(32,39,53,.84); }
#age-dialog :is(button):focus-visible{
  outline:3px solid var(--brand-1); outline-offset:2px;
  box-shadow:0 0 0 3px rgba(150,179,241,.25);
}

/* ========== 13) UTILIDADES ========== */
/* Âncoras não ficarem escondidas sob o header fixo */
section[id]{ scroll-margin-top:80px; }

/* Footer */
.site-footer{
  background:var(--primary-700);
  color:var(--white);
  padding:2.5rem 0 0;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  align-items:flex-start;
}

.footer-top{
  width:min(1120px, 92%);
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  gap:2.5rem;
  justify-content:flex-start;
}

.footer-column{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-right: 170px;
}

.footer-address{
  font-style:normal;
  font-size:1rem;
  line-height:1.6;
  max-width:360px;
  gap:.35rem;
}

.footer-title{
  font-size:1.15rem;
  font-weight:600;
}

.footer-bottom{
  width:min(1120px, 92%);
  margin:0 auto;
  text-align:center;
  font-size:.92rem;
  padding-top:1rem;
  position:relative;
}

.footer-bottom::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 50%, transparent 100%);
  opacity:.4;
}

.footer-social-icons{
  display:flex;
  gap:1rem;
  align-items:center;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:rgba(255,255,255,.12);
  transition:background-color .2s ease, transform .2s ease;
}

.footer-social-link svg{
  width:20px;
  height:20px;
  fill:currentColor;
  color:var(--white);
}

.footer-social-link:focus-visible,
.footer-social-link:hover{
  background-color:rgba(255,255,255,.25);
  transform:translateY(-2px);
}

@media (max-width:640px){
  .site-footer{
    padding:2rem 1.25rem 1.25rem;
    gap:1.25rem;
  }

  .footer-top{
    width:100%;
    margin:0;
    gap:1.75rem;
  }

  .footer-bottom{
    width:100%;
    margin:0;
  }

  .footer-address{
    font-size:.95rem;
  }
}