/*
Theme Name: Mosh Conveniência
Theme URI: https://moshconveniencia.com.br
Author: Mosh Conveniência
Description: Tema oficial da Mosh Conveniência — Salto/SP. Landing page com seções de hero, produtos, promoções, horário, instagram, localização e gates de idade/cookie.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: mosh
*/

/* === Tokens === */
:root{
  --bg:#fafaf7; --fg:#1b1d23; --card:#ffffff; --muted:#f1f0eb; --muted-fg:#6b6f7a;
  --border:#e7e6e0; --neon:#e53935; --neon-fg:#ffffff; --secondary:#f1f0eb;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* === Layout helpers === */
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.section{padding:5rem 1.25rem}
.section.bg-card{background:var(--card)}
.section.bg-muted{background:var(--muted)}
.section.bg-white{background:#fff}
.text-center{text-align:center}
h2.section-title{font-size:1.75rem;font-weight:800;text-align:center;margin:0 0 .5rem}
@media(min-width:768px){h2.section-title{font-size:2rem}}
.section-sub{text-align:center;color:var(--muted-fg);font-size:.875rem;margin:0 0 2.5rem}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:.75rem 2rem;font-weight:600;font-size:.875rem;transition:all .2s;cursor:pointer;border:0}
.btn-neon{background:var(--neon);color:var(--neon-fg);box-shadow:0 4px 14px rgba(229,57,53,.3)}
.btn-neon:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(229,57,53,.4)}
.btn-yellow{background:#facc15;color:#000}
.btn-black{background:#000;color:#facc15}
.btn-outline{border:1.5px solid currentColor;background:transparent}
.btn-outline:hover{background:var(--fg);color:var(--bg)}

/* === Header === */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;max-width:1200px;margin:0 auto}
.site-header .logo img{height:32px;width:auto}
.site-nav{display:none;gap:1.5rem}
.site-nav a{font-size:.875rem;font-weight:500;color:var(--muted-fg)}
.site-nav a:hover{color:var(--fg)}
.nav-toggle{background:none;border:0;color:var(--fg);cursor:pointer}
@media(min-width:768px){.site-nav{display:flex}.nav-toggle{display:none}}
.mobile-nav{display:none;border-top:1px solid var(--border);background:var(--card);padding:.5rem 1.25rem 1rem}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:.75rem 0;font-size:.875rem;color:var(--muted-fg)}

/* === Hero === */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:0}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .overlay{position:absolute;inset:0;background:rgba(27,29,35,.6)}
.hero .inner{position:relative;z-index:2;max-width:760px;padding:0 1rem;text-align:center;color:#fff}
.hero .kicker{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;margin:0}
.hero h1{font-size:2rem;font-weight:800;line-height:1.1;margin:1rem 0}
@media(min-width:768px){.hero h1{font-size:3.5rem}}
.hero p.lead{max-width:520px;margin:1rem auto;color:rgba(255,255,255,.85)}
.hero .actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* === Opening hours === */
.hours-card{max-width:760px;margin:0 auto;background:var(--card);border-radius:24px;padding:2rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.hours-card .icon{width:64px;height:64px;border-radius:16px;background:rgba(229,57,53,.1);color:var(--neon);display:grid;place-items:center;font-size:28px}
.hours-card .big{font-size:2rem;font-weight:800;color:var(--neon);margin:0}
.hours-card .time{font-size:1.125rem;font-weight:600;margin:0}
.hours-card .desc{color:var(--muted-fg);font-size:.875rem;max-width:480px;margin:0}

/* === Banner carousel === */
.carousel{position:relative;overflow:hidden;border-radius:16px;max-width:1100px;margin:0 auto}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel-track img{width:100%;flex-shrink:0;aspect-ratio:5/2;object-fit:cover}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:0;border-radius:9999px;padding:.5rem;cursor:pointer;backdrop-filter:blur(4px)}
.carousel-btn.prev{left:.75rem}.carousel-btn.next{right:.75rem}
.carousel-dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem}
.carousel-dots button{height:8px;width:8px;border-radius:9999px;border:0;background:rgba(255,255,255,.6);cursor:pointer}
.carousel-dots button.active{width:24px;background:var(--neon)}

/* === Categories === */
.cats{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:1100px;margin:0 auto}
.cat{flex:0 0 calc(50% - .5rem);background:var(--card);border-radius:16px;padding:1.5rem;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.cat:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cat .ic{width:56px;height:56px;border-radius:12px;background:var(--muted);display:grid;place-items:center;font-size:24px}
.cat .name{font-size:.75rem;font-weight:600}
.cat .age{font-size:10px;color:var(--muted-fg)}
@media(min-width:640px){.cat{flex:0 0 calc(33.333% - .75rem)}}
@media(min-width:768px){.cat{flex:0 0 calc(25% - .75rem)}}
@media(min-width:1024px){.cat{flex:0 0 calc(14.2857% - .858rem)}}
.cats-note{margin-top:1.5rem;text-align:center;font-size:.75rem;color:var(--muted-fg)}
.cats-actions{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* === Highlight (combos) === */
.highlight{max-width:720px;margin:0 auto;text-align:center}
.highlight .badge{display:inline-block;background:rgba(229,57,53,.1);color:var(--neon);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:.35rem 1rem;border-radius:9999px}
.combos{display:none;margin-top:2rem;gap:1rem;grid-template-columns:1fr}
.combos.open{display:grid}
@media(min-width:640px){.combos{grid-template-columns:1fr 1fr}}
.combo{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem;text-align:left}
.combo h3{font-size:.875rem;font-weight:700;margin:0}
.combo p{margin:.25rem 0 0;font-size:.75rem;color:var(--muted-fg)}

/* === Instagram === */
.insta-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2.5rem;max-width:1100px;margin-left:auto;margin-right:auto}
@media(min-width:640px){.insta-grid{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.insta-grid{grid-template-columns:1fr 1fr 1fr}}
.insta-grid a{display:block;aspect-ratio:1;overflow:hidden;border-radius:16px}
.insta-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.insta-grid a:hover img{transform:scale(1.05)}

/* === Location === */
.loc-grid{display:grid;gap:2rem;grid-template-columns:1fr;max-width:1100px;margin:0 auto}
@media(min-width:768px){.loc-grid{grid-template-columns:1fr 1fr}}
.loc-map{border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.loc-map iframe{display:block;width:100%;height:320px;border:0}
.loc-info{display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.loc-row{display:flex;gap:1rem;align-items:flex-start}
.loc-row .ic{width:48px;height:48px;flex-shrink:0;border-radius:12px;background:rgba(229,57,53,.1);color:var(--neon);display:grid;place-items:center}
.loc-row h3{margin:0;font-size:.875rem;font-weight:700}
.loc-row p{margin:.25rem 0 0;font-size:.875rem;color:var(--muted-fg)}
.loc-row p.hl{color:var(--neon);font-weight:800;font-size:1.125rem}

/* === Footer === */
.site-footer{background:var(--fg);color:#fff;padding:3rem 1.25rem}
.site-footer .row{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;align-items:center;text-align:center}
@media(min-width:768px){.site-footer .row{flex-direction:row;justify-content:space-between;text-align:left}}
.site-footer img.logo{height:64px;width:auto;filter:brightness(0) invert(1)}
.site-footer .addr{font-size:.875rem;color:rgba(255,255,255,.8)}
.site-footer .small{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:.25rem}
.site-footer .links{display:flex;gap:1.25rem;align-items:center}
.site-footer .links a{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.6)}
.site-footer .links a:hover{color:#fff}
.site-footer .bottom{max-width:1100px;margin:2rem auto 0;border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;text-align:center}
.site-footer .bottom p{font-size:.75rem;color:rgba(255,255,255,.4);margin:0}
.site-footer .bottom a{font-size:.75rem;color:rgba(255,255,255,.6);margin-top:.5rem;display:inline-block}

/* === WhatsApp floating === */
.whatsapp-fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:40;width:56px;height:56px;border-radius:9999px;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(37,211,102,.4)}

/* === Cookie / Age gate === */
.cookie{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:60;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.15);display:none;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center}
.cookie.show{display:flex}
.cookie p{margin:0;font-size:.875rem;color:var(--muted-fg);flex:1;min-width:240px}
@media(min-width:768px){.cookie{left:auto;right:1.5rem;max-width:480px}}

.age-gate{position:fixed;inset:0;z-index:100;background:rgba(27,29,35,.95);display:flex;align-items:center;justify-content:center;padding:1rem}
.age-gate .box{background:var(--card);border-radius:24px;padding:2.5rem;max-width:420px;text-align:center}
.age-gate h2{margin:0 0 .75rem}
.age-gate p{color:var(--muted-fg);font-size:.875rem;margin:0 0 1.5rem}
.age-gate .row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* === Simple page (em-breve, privacidade) === */
.simple-page{min-height:60vh;padding:8rem 1.25rem 5rem;max-width:760px;margin:0 auto}
.simple-page h1{font-size:2rem;font-weight:800;margin:0 0 1rem;text-align:center}
.simple-page p{color:var(--muted-fg);line-height:1.6}