/* ===========================================================
   ME Variedades — folha de estilo institucional
   Tom: loja de variedades, alegre e organizado.
   Paleta: tinta #17203A · fundo #F4F7FB · cobalto #2F5BD8
           cobalto-esc #1E3E9C · sol #F6B93B · gelo #E7EEFA · linha #D8E2F0
   Tipos:  Sora (display) · Inter (texto) · IBM Plex Mono (dados)
   =========================================================== */

:root{
  --ink:#17203A;
  --ink-soft:#48526B;
  --bg:#F4F7FB;
  --paper:#FFFFFF;
  --cobalto:#2F5BD8;
  --cobalto-esc:#1E3E9C;
  --sol:#F6B93B;
  --gelo:#E7EEFA;
  --linha:#D8E2F0;
  --zap:#25D366;
  --zap-esc:#1EBE5A;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --display:'Sora', system-ui, sans-serif;
  --texto:'Inter', system-ui, sans-serif;
  --raio:12px;
  --larg:1060px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--texto);color:var(--ink);background:var(--bg);line-height:1.66;font-size:16.5px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--cobalto-esc)}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--cobalto);outline-offset:2px}
.container{max-width:var(--larg);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.topo{background:var(--paper);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:50}
.topo-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);letter-spacing:-.01em}
.marca:hover{text-decoration:none}
.marca .selo{width:32px;height:32px;flex:none}
.menu{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.menu a{color:var(--ink-soft);font-weight:500;font-size:.93rem;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--ink);text-decoration:none}
.menu a[aria-current="page"]{color:var(--cobalto);border-bottom-color:var(--sol)}
.menu .zap-topo{display:inline-flex;align-items:center;gap:7px;background:var(--zap);color:#fff;padding:8px 15px;border-radius:999px;font-weight:600;font-size:.86rem}
.menu .zap-topo:hover{background:var(--zap-esc);color:#fff;text-decoration:none}

/* ---------- hero ---------- */
.hero{background:var(--cobalto);color:#EAF1FF;padding:78px 0 70px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 100% 0%, rgba(246,185,59,.28), transparent 55%);pointer-events:none}
.hero .container{position:relative;z-index:1;max-width:760px}
.eyebrow{font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sol);margin-bottom:20px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.05rem,4.5vw,3.1rem);line-height:1.13;letter-spacing:-.015em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--sol)}
.hero p.lead{font-size:1.13rem;color:#CFDDFA;max-width:38em;margin-bottom:32px}
.acoes{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;padding:13px 26px;font-size:.96rem;border-radius:999px;transition:transform .15s ease,background .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{flex:none}
.btn-zap{background:var(--zap);color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.32)}
.btn-zap:hover{background:var(--zap-esc);color:#fff}
.btn-primario{background:var(--sol);color:#3A2A05}
.btn-primario:hover{background:#F3C863}
.btn-secundario{border:1.5px solid rgba(255,255,255,.42);color:#EAF1FF}
.btn-secundario:hover{border-color:var(--sol);color:#fff}

/* faixa destaque */
.faixa{background:var(--paper);border-bottom:1px solid var(--linha)}
.faixa .container{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.faixa-item{padding:26px 24px;border-right:1px solid var(--linha);display:flex;gap:14px;align-items:flex-start}
.faixa-item:last-child{border-right:none}
.faixa-item .bolha{width:40px;height:40px;border-radius:10px;background:var(--gelo);display:flex;align-items:center;justify-content:center;flex:none;color:var(--cobalto)}
.faixa-item h3{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:2px}
.faixa-item p{font-size:.88rem;color:var(--ink-soft)}

/* ---------- seções ---------- */
.secao{padding:74px 0}
.secao-alt{background:var(--gelo);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.titulo-secao{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.015em;margin-bottom:12px}
.sub-secao{color:var(--ink-soft);max-width:46em;margin-bottom:42px}

/* grade */
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px}
.cartao{background:var(--paper);border:1px solid var(--linha);border-radius:var(--raio);padding:28px 26px;transition:box-shadow .15s ease,transform .15s ease}
.secao-alt .cartao{background:var(--bg)}
.cartao:hover{box-shadow:0 10px 28px rgba(47,91,216,.10);transform:translateY(-2px)}
.cartao .icone{width:46px;height:46px;border-radius:12px;background:var(--gelo);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.secao-alt .cartao .icone{background:var(--paper)}
.cartao h3{font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:8px;letter-spacing:-.01em}
.cartao p{font-size:.95rem;color:var(--ink-soft)}

/* bloco whatsapp */
.zap-cta{background:linear-gradient(135deg,var(--cobalto-esc),#2F5BD8);color:#fff;border-radius:var(--raio);padding:40px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.zap-cta h3{font-family:var(--display);font-weight:700;font-size:1.45rem;margin-bottom:6px;color:#fff}
.zap-cta p{color:#D3E0FB;max-width:40em}

/* ficha */
.ficha{background:var(--paper);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.ficha dl{display:grid;grid-template-columns:210px 1fr}
.ficha dt,.ficha dd{padding:14px 22px;border-bottom:1px solid var(--linha);font-size:.95rem}
.ficha dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:var(--gelo)}
.ficha dd{font-weight:500}
.ficha dl > dt:nth-last-of-type(1),.ficha dl > dd:last-of-type{border-bottom:none}

.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* formulário */
.form-contato{display:grid;gap:16px}
.form-contato label{font-weight:600;font-size:.9rem;display:block;margin-bottom:6px}
.form-contato input,.form-contato textarea{width:100%;padding:12px 14px;border:1.5px solid var(--linha);border-radius:10px;font-family:var(--texto);font-size:.98rem;background:var(--paper);color:var(--ink)}
.form-contato input:hover,.form-contato textarea:hover{border-color:#BFD0EC}
.form-contato textarea{min-height:130px;resize:vertical}

/* mapa */
.mapa{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;aspect-ratio:16/9;background:var(--gelo)}
.mapa iframe{width:100%;height:100%;border:0;display:block}

/* FAQ */
.faq details{background:var(--paper);border:1px solid var(--linha);border-radius:12px;margin-bottom:12px;padding:0 24px}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:1rem;padding:18px 0;list-style:none;position:relative;padding-right:34px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:15px;font-size:1.4rem;color:var(--cobalto);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 18px;color:var(--ink-soft);font-size:.96rem}

/* páginas de texto */
.doc{max-width:760px}
.doc h1{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.02em;margin-bottom:8px}
.doc .atualizacao{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);margin-bottom:36px}
.doc h2{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:38px 0 12px;letter-spacing:-.01em}
.doc h3{font-family:var(--display);font-weight:600;font-size:1.08rem;margin:26px 0 10px}
.doc p{margin-bottom:14px;color:var(--ink-soft)}
.doc ul{margin:0 0 14px 22px;color:var(--ink-soft)}
.doc li{margin-bottom:6px}
.doc strong{color:var(--ink)}

/* ---------- rodapé ---------- */
.rodape{background:var(--ink);color:#B7C1DA;padding:58px 0 32px}
.rodape a{color:#F6B93B}
.rodape-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;margin-bottom:42px}
.rodape h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7E89A8;margin-bottom:16px;font-weight:500}
.rodape p,.rodape li{font-size:.92rem;line-height:1.85}
.rodape ul{list-style:none}
.dados-cadastrais{font-family:var(--mono);font-size:.82rem;line-height:2}
.rodape-zap{display:inline-flex;align-items:center;gap:9px;margin-top:6px;background:var(--zap);color:#fff;font-weight:600;padding:10px 18px;border-radius:999px;font-size:.9rem}
.rodape-zap:hover{background:var(--zap-esc);color:#fff;text-decoration:none}
.rodape-zap svg{flex:none}
.rodape-base{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.84rem;color:#7E89A8}

/* ---------- botão flutuante whatsapp ---------- */
.zap-flutuante{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:10px;background:var(--zap);color:#fff;padding:14px 20px 14px 16px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:.95rem;box-shadow:0 8px 26px rgba(37,211,102,.42);transition:transform .15s ease,box-shadow .15s ease}
.zap-flutuante:hover{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,.5)}
.zap-flutuante svg{flex:none}
.zap-flutuante .rotulo{white-space:nowrap}
@media (prefers-reduced-motion: no-preference){
  .zap-flutuante{animation:pulso 2.8s ease-in-out infinite}
  @keyframes pulso{0%,100%{box-shadow:0 8px 26px rgba(37,211,102,.42)}50%{box-shadow:0 8px 26px rgba(37,211,102,.42),0 0 0 12px rgba(37,211,102,.10)}}
}
@media (max-width:520px){
  .zap-flutuante{right:16px;bottom:16px;padding:14px}
  .zap-flutuante .rotulo{display:none}
}

/* ---------- responsivo ---------- */
@media (max-width:860px){
  .duas-colunas{grid-template-columns:1fr}
  .rodape-grid{grid-template-columns:1fr}
  .faixa .container{grid-template-columns:1fr}
  .faixa-item{border-right:none;border-bottom:1px solid var(--linha)}
  .faixa-item:last-child{border-bottom:none}
  .ficha dl{grid-template-columns:1fr}
  .ficha dt{border-bottom:none;padding-bottom:2px}
  .ficha dd{padding-top:4px}
  .zap-cta{padding:32px 26px}
  .menu .zap-topo{display:none}
}