:root{
  --pink:#FF3E8B;
  --yellow:#FFD400;
  --blue:#29ABE2;
  --green:#57C24B;
  --orange:#FF7A29;
  --purple:#8A4FE8;
  --red:#E5391E;
  --cream:#FFF7DF;
  --paper:#FFFBF0;
  --ink:#1A1410;
  --line: rgba(26,20,16,0.9);
  --font-mast:'Titan One', cursive;
  --font-head:'Baloo 2', sans-serif;
  --font-body:'Nunito', sans-serif;
  --font-hand:'Caveat', cursive;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  min-height:100vh;
}
.dots-bg{
  background-image: radial-gradient(rgba(26,20,16,0.10) 1.4px, transparent 1.4px);
  background-size: 13px 13px;
}
/* ---------- Browser chrome ---------- */
.browser{
  width:100%;
  background:var(--cream);
}
.top-newsletter-bar{
  background:var(--yellow); color:var(--ink); display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; padding:10px 40px 10px 20px; font-family:var(--font-head); font-weight:700;
  font-size:13px; border-bottom:3px solid var(--ink); position:relative; text-align:center;
}
.top-newsletter-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;}
.top-newsletter-form input{
  border:2px solid var(--ink); border-radius:20px; padding:6px 14px; font-family:var(--font-body);
  font-weight:700; font-size:12.5px; width:190px;
}
.top-newsletter-form button{
  font-family:var(--font-head); font-weight:800; font-size:12px; background:var(--ink); color:#fff;
  border:2px solid var(--ink); border-radius:20px; padding:7px 16px; cursor:pointer; transition:background .15s;
}
.top-newsletter-form button:hover{background:var(--red);}
.top-newsletter-close{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:none;
  color:var(--ink); font-weight:800; cursor:pointer; font-size:14px; width:24px; height:24px;
}
/* ---------- MASTHEAD ---------- */
.masthead{
  background: linear-gradient(180deg, var(--red), var(--red) 70%, #c62d16);
  position:relative; overflow:hidden;
  padding:26px 30px 18px;
  text-align:center;
  border-bottom:5px solid var(--ink);
}
.masthead .kicker{
  font-family:var(--font-head); font-weight:800; color:var(--yellow); letter-spacing:3px;
  font-size:13px; text-transform:uppercase; position:relative;
}
.masthead h1.mast-title{
  font-family:var(--font-mast); color:#fff; -webkit-text-stroke:3px var(--ink);
  font-size:64px; margin:4px 0 6px; letter-spacing:1px; position:relative;
  text-shadow:5px 5px 0 var(--ink);
}
.masthead .sub{
  font-family:var(--font-head); font-weight:600; font-style:italic; color:#FFE9C7; font-size:17px; letter-spacing:0.2px; position:relative;
}
.star{
  position:absolute; width:96px; height:96px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-head); font-weight:800; color:var(--red); font-size:10.5px; line-height:1.2;
  transform:rotate(-8deg); padding:8px 10px; box-sizing:border-box;
}
.star::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--yellow);
  border-radius:50%;
  border:2px solid var(--ink);
}
/* ---------- INDEX / SECTION TABS AT TOP ---------- */
.toc-bar{
  background:var(--ink); padding:14px 26px 16px; position:relative;
}
.toc-label{
  font-family:var(--font-head); font-weight:800; color:var(--yellow); font-size:12px;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; display:block;
}
.navlinks{display:flex; gap:10px; flex-wrap:wrap;}
.navlinks button{
  font-family:var(--font-head); font-weight:700; font-size:14px; cursor:pointer;
  border:2.5px solid var(--ink); border-radius:10px; padding:10px 16px;
  box-shadow:3px 3px 0 var(--ink); transition:transform .1s, background .15s;
  color:var(--ink); background:var(--cream);
}
.navlinks button:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); background:var(--yellow); border-color:var(--ink); color:var(--red);}
.navlinks button:active, .navlinks button.active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); background:var(--ink); color:var(--cream); border-color:var(--ink);}

/* ---------- Content area ---------- */
.content{
  min-height:calc(100vh - 260px); position:relative; background:var(--paper);
}
.page{display:none; padding:40px 44px 20px;}
.page.active{display:block;}

h1,h2,h3{font-family:var(--font-head); font-weight:800; margin:0 0 8px; color:var(--ink);}
.eyebrow{font-family:var(--font-head); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--pink); display:inline-block; margin-bottom:6px; font-weight:800;}
p{line-height:1.65; color:#3c2f22; font-weight:600;}

/* ---------- Reusable magazine bits ---------- */
.card{
  background:#fff; border:3px solid var(--ink); border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);
  position:relative;
}
.sticker{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  border:2.5px solid var(--ink); border-radius:50%; font-family:var(--font-head); font-weight:800;
  width:74px; height:74px; font-size:12px; line-height:1.1; transform:rotate(-9deg);
}
.sticker.yellow{background:var(--yellow);}
.sticker.blue{background:var(--blue); color:#fff;}
.sticker.green{background:var(--green); color:#fff;}
.sticker.pink{background:var(--pink); color:#fff;}
.btn{
  font-family:var(--font-head); font-weight:800; cursor:pointer;
  padding:12px 24px; border-radius:12px; font-size:14.5px; display:inline-block;
  border:2.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink);}
.btn-primary{background:var(--yellow); color:var(--ink);}
.btn-ghost{background:#fff; color:var(--ink);}
.pill{
  border:2.5px solid var(--ink); border-radius:20px; padding:7px 15px; font-size:13px;
  background:#fff; cursor:pointer; font-family:var(--font-head); font-weight:700;
}
.pill.active-pill{background:var(--purple); color:#fff;}
.photo-block{
  border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-hand); color:rgba(0,0,0,0.35); font-size:15px; overflow:hidden;
  border-bottom:3px solid var(--ink);
}
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:44px 0 18px;}
.section-title h2{position:relative; display:inline-block;}
.section-title h2::after{
  content:""; position:absolute; left:0; bottom:-6px; width:60%; height:8px; background:var(--yellow); z-index:-1;
}
.section-title a{font-family:var(--font-head); font-weight:700; font-style:italic; color:var(--pink); font-size:14px; text-decoration:none; cursor:pointer;}
.section-title a:hover{text-decoration:underline;}

/* Espaçamento maior entre os blocos da Home */
#page-home .hero{margin-bottom:90px; margin-top:90px;}
#page-home .section-title{margin:64px 0 22px;}
#page-home .section-title:first-of-type{margin-top:0;}
#page-home .banner-hero{margin-bottom:70px;}
#page-home .spin-block{margin:56px 0 90px;}
#page-home .recipe-grid{margin-bottom:8px;}
#page-home .news-ticker{margin:56px 0;}
#page-home .club-band{margin:56px 0;}
#page-home .coming-soon-box{margin-top:16px !important; margin-bottom:56px !important;}
#page-home .partners-marquee{margin:10px 0 56px;}
hr.dashed{border:none; border-top:3px dashed var(--ink); margin:34px 0; opacity:0.3;}
.sticky-note{
  background:var(--yellow); padding:16px 18px; border-radius:4px; transform:rotate(-2deg); border:2.5px solid var(--ink);
  box-shadow:5px 6px 0 var(--ink); font-family:var(--font-hand); font-size:20px; color:#5c4a12; font-weight:700;
}
.sticky-label{font-family:var(--font-head); text-transform:uppercase; font-size:12px; letter-spacing:1.5px; margin-bottom:6px; opacity:0.7; font-weight:800;}
.sticky-note p{margin:0;}
.stripe-divider{
  height:14px; background:repeating-linear-gradient(45deg, var(--pink) 0 14px, var(--yellow) 14px 28px, var(--blue) 28px 42px, var(--green) 42px 56px);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); margin:34px -44px;
}
footer.site-footer{
  background:var(--ink); color:var(--cream); padding:30px 44px; margin:70px -44px -20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:13px;
}
footer.site-footer a{color:var(--cream); text-decoration:none; opacity:0.85;}
footer.site-footer a:hover{opacity:1;}
.foot-col h4{font-family:var(--font-head); color:var(--yellow); margin-bottom:10px; font-size:13px; letter-spacing:1px; text-transform:uppercase;}
.foot-col div{margin-bottom:6px; font-weight:700; cursor:pointer; transition:opacity .15s;}
.foot-col div:hover{opacity:0.7; text-decoration:underline;}

.spin-block{
  background:var(--ink); color:#fff; border-radius:18px; padding:30px 34px; border:3px solid var(--ink);
  box-shadow:6px 8px 0 rgba(0,0,0,0.15); display:grid; grid-template-columns:1.3fr 1fr; gap:26px;
  align-items:center; margin:38px 0;
}
.spin-block .tag{background:var(--yellow); color:var(--ink);}
.spin-tag-big{font-size:20px; padding:14px 30px; border-radius:999px; font-weight:800; letter-spacing:.2px; display:inline-block; animation:spin-tag-pop 2.6s ease-in-out infinite;}
@keyframes spin-tag-pop{0%,100%{transform:scale(1) rotate(-1deg);}50%{transform:scale(1.06) rotate(1deg);}}
.spin-dyn-hl{background:linear-gradient(90deg,var(--yellow),#ff9d4d,var(--yellow)); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:spin-dyn-shine 2.4s linear infinite;}
@keyframes spin-dyn-shine{0%{background-position:0% 0;}100%{background-position:200% 0;}}
.spin-block p{color:#D8D2C8;}
.spin-widget{background:var(--paper); border:3px solid var(--ink); border-radius:16px; padding:20px; text-align:center;}
.spin-display{
  font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--ink);
  min-height:46px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; line-height:1.3;
}
.spin-display.spinning{color:var(--red);}
.spin-display.landed{
  animation:spin-pop .35s cubic-bezier(.34,1.56,.64,1);
  color:var(--ink); background:var(--yellow); border-radius:10px; padding:6px 10px; border:2px solid var(--ink);
  cursor:pointer; transition:transform .1s;
}
.spin-display.landed:hover{transform:translate(-1px,-1px);}
@keyframes spin-pop{
  0%{ transform:scale(0.85); }
  60%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}

.rating-widget{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:14px;
  border-top:2px dashed rgba(0,0,0,0.15); font-size:13px; font-weight:700; color:var(--ink);
}
.rating-avg{font-family:var(--font-head); font-weight:800; font-size:14px;}
.rating-count{font-weight:600; opacity:0.6; font-size:12px;}
.rating-sep{opacity:0.3;}
.rating-stars{display:inline-flex; gap:2px;}
.star-btn{font-size:19px; color:rgba(0,0,0,0.25); cursor:pointer; transition:transform .1s, color .1s; user-select:none;}
.star-btn:hover{transform:scale(1.15);}
.star-btn.active{color:#f5b301; text-shadow:none;}
.rating-thanks{color:var(--green); font-weight:800; font-size:12.5px;}

.portion-calc{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.portion-control{display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--ink);}
.portion-control button{
  width:26px; height:26px; border-radius:7px; border:2px solid var(--ink); background:var(--yellow);
  font-weight:800; cursor:pointer; font-size:14px; line-height:1;
}
.portion-control span#portion-count{font-family:var(--font-head); font-weight:800; min-width:14px; text-align:center;}

/* ---------- RECEITA COMPLETA (conteúdo aprofundado) ---------- */
.recipe-intro p{margin-bottom:14px;}
.quick-info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0 30px;}
.quick-info-card{
  background:var(--paper); border:2.5px solid var(--ink); border-radius:12px; padding:12px 10px;
  text-align:center; box-shadow:3px 3px 0 var(--ink);
}
.quick-info-card .qi-label{font-size:10px; text-transform:uppercase; letter-spacing:0.5px; font-weight:800; opacity:0.6; margin-bottom:4px;}
.quick-info-card .qi-value{font-family:var(--font-head); font-weight:800; font-size:14px;}
.otto-tips-list{list-style:none; padding:0; margin:0;}
.otto-tips-list li{
  display:flex; gap:12px; padding:12px 0; border-bottom:2px dashed rgba(0,0,0,0.15); font-weight:600; font-size:14.5px;
}
.otto-tips-list li .tip-num{
  font-family:var(--font-head); font-weight:800; color:#fff; background:var(--red); width:26px; height:26px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px;
}
.sub-table{width:100%; border-collapse:collapse; margin:14px 0 26px;}
.sub-table th, .sub-table td{padding:10px 12px; text-align:left; font-size:13.5px; border-bottom:2px dashed rgba(0,0,0,0.15);}
.sub-table th{font-family:var(--font-head); font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:0.5px; background:var(--cream);}
.variation-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0 26px;}
.variation-card{background:var(--paper); border:2.5px solid var(--ink); border-radius:12px; padding:14px 16px; box-shadow:3px 3px 0 var(--ink);}
.variation-card h4{margin:0 0 6px; font-size:14px;}
.variation-card p{margin:0; font-size:12.5px;}
.storage-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:14px 0 26px;}
.storage-item{background:var(--cream); border-radius:10px; padding:12px 14px;}
.storage-item b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;}
.pairing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 26px;}
.pairing-card{text-align:center; background:var(--paper); border:2px solid var(--ink); border-radius:10px; padding:10px;}
.fun-facts-list{padding-left:20px; margin:14px 0 26px;}
.fun-facts-list li{margin-bottom:8px; font-size:14px;}
.mistakes-list{list-style:none; padding:0; margin:14px 0 26px;}
.mistakes-list li{padding:12px 0; border-bottom:2px dashed rgba(0,0,0,0.15); font-size:14px;}
.mistakes-list b{color:var(--red);}
.faq-item{border-bottom:2px dashed rgba(0,0,0,0.15); padding:12px 0;}
.faq-item h4{margin:0 0 4px; font-size:14px;}
.faq-item p{margin:0; font-size:13.5px;}
.seo-panel{
  background:var(--ink); color:#fff; border-radius:14px; padding:18px 20px; margin:30px 0; font-size:12px;
}
.seo-panel summary{cursor:pointer; font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--yellow);}
.seo-panel dl{margin:12px 0 0; display:grid; grid-template-columns:150px 1fr; gap:6px 12px;}
.seo-panel dt{opacity:0.6; text-transform:uppercase; letter-spacing:0.5px; font-size:10px; font-weight:800;}
.seo-panel dd{margin:0;}

/* ---------- HOME ---------- */
.hero{position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:30px; align-items:center; padding-bottom:14px;}
.hero h1{font-size:42px; line-height:1.05; margin-bottom:14px;}
.hero h1 span{color:var(--yellow); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:0 0 1px var(--ink);}
.hero-visual{
  height:290px; border-radius:18px; position:relative; transform:rotate(2deg); border:3px solid var(--ink);
  box-shadow:6px 8px 0 var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.hero-visual-inner{width:100%; height:100%; border-radius:15px; overflow:hidden;}
.hero-visual img{width:100%; height:100%; object-fit:cover; object-position:center 15%; display:block;}
.badge-float{
  position:absolute; background:var(--pink); color:#fff; border-radius:50%; width:88px; height:88px; border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-head); font-size:11px; font-weight:800;
  box-shadow:4px 5px 0 var(--ink); transform:rotate(-8deg); top:-18px; right:14px; line-height:1.15;
}
.recipe-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.recipe-card{padding:0 0 14px;}
.recipe-card .photo-block{height:150px; margin-bottom:12px;}
.recipe-card h3{font-size:16px; margin:0 12px 4px;}
.recipe-card .meta{font-size:12px; color:#8a7a63; margin:0 12px; font-weight:700;}
.rank-num{
  font-family:var(--font-mast); font-size:30px; color:var(--yellow); -webkit-text-stroke:2px var(--ink);
  position:absolute; top:6px; left:8px; z-index:2;
}
.video-feature{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;}
.play-block{
  height:270px; border-radius:16px; background:linear-gradient(135deg,var(--purple),#3a1a60);
  display:flex; align-items:center; justify-content:center; position:relative; border:3px solid var(--ink); box-shadow:5px 6px 0 var(--ink);
}
.play-btn{
  width:64px; height:64px; border-radius:50%; background:var(--yellow); color:var(--ink); border:2.5px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer;
}
.news-ticker{
  background:var(--ink); color:#fff; border-radius:14px; padding:14px 22px; display:flex; gap:24px;
  align-items:center; font-size:13.5px; overflow:hidden; margin:38px 0; border:3px solid var(--ink); box-shadow:5px 6px 0 var(--ink); font-weight:700;
}
.news-ticker b{font-family:var(--font-head); background:#fff; color:var(--ink); padding:4px 10px; border-radius:14px; font-size:11px;}
.club-band{
  background:var(--red); color:#fff; border-radius:18px; padding:36px 38px; border:3px solid var(--ink); box-shadow:6px 8px 0 var(--ink);
  display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:start; margin:38px 0; position:relative;
}
.club-band h2{color:var(--yellow);}
.club-band p{color:#FFE9C7;}
.club-band.featured{
  padding:44px 46px; box-shadow:9px 11px 0 var(--ink); position:relative; border-width:4px;
}
.club-band-badge{
  position:absolute; top:-16px; left:34px; background:var(--yellow); color:var(--ink);
  font-family:var(--font-head); font-weight:800; font-size:11.5px; letter-spacing:1px;
  padding:6px 16px; border-radius:20px; border:2.5px solid var(--ink); text-transform:uppercase;
}
.club-band.featured h2{font-size:32px;}
.club-band form{display:flex; gap:10px; flex-wrap:wrap;}
.club-band input{
  border-radius:30px; border:2.5px solid var(--ink); padding:12px 20px; font-family:var(--font-body);
  font-weight:700; font-size:14px; min-width:200px; outline:none; box-sizing:border-box;
}
.club-band input:focus{border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,212,0,0.3);}
.club-band button{border-radius:30px;}

.club-benefits{list-style:none; padding:0; margin:16px 0 20px; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px;}
.club-benefits li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:#FFE9C7; font-weight:700;}
.club-benefits li::before{content:"✓"; color:var(--yellow); font-weight:900; font-size:15px; flex-shrink:0;}
.club-social-proof{font-size:12.5px; color:#FFD9BE; margin:0 0 10px;}

.club-mini{
  background:var(--red); color:#fff; border-radius:16px; padding:26px 30px; border:3px solid var(--ink); box-shadow:5px 6px 0 var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:20px; margin:40px 0 10px; flex-wrap:wrap;
}
.club-mini h3{color:var(--yellow); margin:0 0 4px; font-size:19px;}
.club-mini p{color:#FFE9C7; margin:0; font-size:13px;}
.club-mini form{display:flex; gap:8px; flex-wrap:wrap;}
.club-mini input{border-radius:30px; border:2.5px solid var(--ink); padding:10px 16px; font-family:var(--font-body); font-weight:700; font-size:13px; min-width:180px;}

/* ---------- RECEITAS listing ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.searchbar{
  display:flex; align-items:center; border:2.5px solid var(--ink); border-radius:30px; padding:10px 20px; margin-bottom:26px; background:#fff;
}
.searchbar input{border:none; outline:none; font-family:var(--font-body); font-weight:700; font-size:15px; flex:1; background:transparent;}
.masonry{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:170px; gap:18px;}
.masonry .card{grid-row: span 1; overflow:hidden; display:flex; flex-direction:column;}
.masonry .card.big{grid-row: span 2;}
.masonry .photo-block{flex:1; border-radius:9px 9px 0 0;}
.masonry .cap{padding:14px 18px 16px; font-size:13.5px; font-family:var(--font-head); font-weight:800;}
.vid-badge{
  position:absolute; top:8px; right:8px; background:var(--red); color:#fff; border-radius:20px; border:2px solid var(--ink);
  font-size:10px; padding:3px 8px; font-family:var(--font-head); z-index:2;
}

/* ---------- Banner hero (foto real + texto) ---------- */
.banner-hero{
  display:grid; grid-template-columns:2.6fr 0.55fr; gap:20px; align-items:start; padding:16px;
}
.banner-text{padding:6px 30px 20px; display:flex; flex-direction:column; justify-content:flex-start;}
.banner-title{font-family:var(--font-head); font-weight:800; font-size:40px; line-height:0.95; margin:2px 0 6px; color:var(--ink);}
.banner-sub{font-family:var(--font-head); font-weight:700; font-size:18px; margin:0 0 10px;}
.banner-desc{font-size:14.5px; max-width:380px; margin:0 0 16px;}
.banner-btns{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.banner-foot{display:flex; align-items:center; gap:14px;}
.banner-hand{font-family:var(--font-hand); font-size:16px; line-height:1.15; color:var(--ink); font-weight:700;}
.banner-photo{
  position:relative; width:100%; aspect-ratio:1/1; flex-shrink:0;
  border-radius:12px; border:3px solid var(--ink);
}
.banner-photo-inner{width:100%; height:100%; border-radius:9px; overflow:hidden;}
.banner-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.banner-badge{position:absolute; top:-6px; right:-6px; width:46px; height:46px; font-size:6.5px;}
@media (max-width:820px){
  .banner-hero{grid-template-columns:1fr;}
  .banner-photo{width:100%; height:auto; aspect-ratio:1/1;}
  .spin-block{grid-template-columns:1fr;}
}

.cat-sticker{
  position:absolute; z-index:3; top:10px; left:10px; font-family:var(--font-head); font-weight:800;
  font-size:10px; padding:4px 10px; border-radius:8px; border:2px solid var(--ink); transform:rotate(-4deg);
  box-shadow:2px 3px 0 var(--ink); color:#fff;
}
.cat-carnes{background:var(--red);}
.cat-favoritas{background:var(--purple);}
.cat-rapidas{background:var(--blue);}
.cat-lanches{background:var(--orange); color:var(--ink);}
.cat-doces{background:var(--pink);}
.cat-massas{background:var(--yellow); color:var(--ink);}
.cat-frutosdomar{background:var(--green);}
.cat-bebidas{background:#2E7A6C;}
.cat-programas{background:var(--purple);}
.cat-youtube{background:var(--red);}
.cat-series{background:var(--blue);}
.cat-shorts{background:var(--pink);}
.cat-playlists{background:var(--yellow); color:var(--ink);}

/* ---------- RECEITA detail ---------- */
.rec-hero{display:grid; grid-template-columns:1.2fr 0.8fr; gap:30px; align-items:start;}
.rec-hero .photo-block{height:310px; border-radius:14px; border:3px solid var(--ink);}
.meta-stamps{display:flex; gap:14px; margin:16px 0 6px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:34px;}
.ingr-list{list-style:none; padding:0; margin:0;}
.ingr-list li{padding:10px 0; border-bottom:2px dashed var(--ink); border-opacity:0.2; display:flex; gap:10px; align-items:center; font-size:14.5px; font-weight:700;}
.ingr-list li::before{content:"✓"; color:var(--green); font-weight:900; font-size:16px;}
.steps{list-style:none; padding:0; margin:0; counter-reset:step;}
.steps li{counter-increment:step; padding:14px 0 14px 44px; position:relative; border-bottom:2px dashed rgba(26,20,16,0.2); font-size:14.5px; font-weight:700;}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:10px; width:28px; height:28px; border-radius:50%; border:2px solid var(--ink);
  background:var(--yellow); color:var(--ink); font-family:var(--font-head); font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- BLOG ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.blog-card .photo-block{height:150px;}
.tag{
  font-size:10.5px; font-family:var(--font-head); font-weight:800; background:var(--green); color:#fff;
  padding:4px 10px; border-radius:12px; display:inline-block; margin-bottom:8px; border:2px solid var(--ink);
}

/* ---------- VÍDEOS ---------- */
.vid-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.vid-card .photo-block{height:158px; background:linear-gradient(135deg,var(--purple),#3a1a60); color:#fff;}
.duration{position:absolute; bottom:8px; right:8px; background:var(--ink); color:#fff; font-size:10.5px; padding:2px 7px; border-radius:4px; z-index:2;}

/* ---------- NEWSLETTER (página) ---------- */
.newsletter-hero-card{
  background:var(--ink); color:#fff; border-radius:18px; padding:34px 38px; border:3px solid var(--ink);
  box-shadow:6px 8px 0 rgba(0,0,0,0.15); display:grid; grid-template-columns:1.3fr 1fr; gap:30px;
  align-items:center; margin:30px 0 40px;
}
.newsletter-hero-card .tag{background:var(--yellow); color:var(--ink);}
.newsletter-hero-card h2{color:#fff;}
.newsletter-hero-card p{color:#D8D2C8;}
.newsletter-benefits{list-style:none; padding:0; margin:0;}
.newsletter-benefits li{
  padding:8px 0 8px 26px; position:relative; font-size:13.5px; font-weight:700; color:#fff;
  border-bottom:1px dashed rgba(255,255,255,0.15);
}
.newsletter-benefits li::before{content:"✓"; position:absolute; left:0; color:var(--yellow); font-weight:900;}
.newsletter-hero-form{background:var(--paper); border:3px solid var(--ink); border-radius:14px; padding:20px; color:var(--ink);}
.newsletter-hero-form form{margin-top:10px;}
.newsletter-hero-form input{
  width:100%; box-sizing:border-box; border:2.5px solid var(--ink); border-radius:10px; padding:11px 14px;
  font-family:var(--font-body); font-weight:700; font-size:14px; outline:none;
}
.newsletter-hero-hint{font-size:11.5px; text-align:center; margin-top:12px; opacity:0.6; font-weight:700;}
.newsletter-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:16px 0 36px;}
.newsletter-item{
  background:var(--paper); border:2.5px solid var(--ink); border-radius:14px; padding:18px 20px;
  box-shadow:3px 4px 0 var(--ink);
}
.newsletter-item .ni-icon{font-size:24px; display:block; margin-bottom:8px;}
.newsletter-item h4{margin:0 0 4px; font-size:14px;}
.newsletter-item p{margin:0; font-size:12.5px;}

@media (max-width:820px){
  .newsletter-hero-card{grid-template-columns:1fr;}
  .newsletter-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- JOGOS ---------- */
#page-jogos > .eyebrow, #page-jogos > h1, #page-jogos > p{text-align:center;}
#page-jogos > p{margin-left:auto; margin-right:auto;}
#games-filters{justify-content:center;}
.game-panel{margin-top:22px; display:flex; justify-content:center; text-align:center;}
.game-panel .game-card{margin:0 auto;}
#page-jogos .club-mini{margin-left:auto; margin-right:auto;}
.game-card{
  background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:30px;
  box-shadow:6px 8px 0 var(--ink); max-width:680px; width:100%; text-align:left;
}
.game-progress{
  font-family:var(--font-head); font-weight:800; font-size:12.5px; letter-spacing:0.5px;
  color:var(--ink); opacity:0.6; text-transform:uppercase; margin-bottom:18px;
}
.quiz-question{font-family:var(--font-head); font-weight:800; font-size:20px; margin:0 0 20px; color:var(--ink);}
.quiz-options{display:flex; flex-direction:column; gap:10px;}
.quiz-opt{
  text-align:left; font-family:var(--font-body); font-weight:700; font-size:14.5px;
  padding:13px 18px; border-radius:12px; border:2.5px solid var(--ink); background:#fff;
  cursor:pointer; box-shadow:2.5px 2.5px 0 var(--ink); transition:transform .1s;
}
.quiz-opt:hover{transform:translate(-1px,-1px); box-shadow:3.5px 3.5px 0 var(--ink);}
.quiz-opt.correct{background:var(--green); color:#fff;}
.quiz-opt.wrong{background:var(--red); color:#fff;}
.quiz-opt:disabled{cursor:default; transform:none;}
.quiz-next-btn{margin-top:20px;}
.quiz-result h2{font-size:26px; margin-bottom:6px;}
.quiz-result p{margin-bottom:20px;}

.memory-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:420px; margin:0 auto; justify-content:center;}
#game-memoria .game-card{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px;}
#game-memoria .game-card > .btn{align-self:center;}
#game-memoria .phase-complete{width:100%;}
.memory-card{
  aspect-ratio:1; border-radius:12px; border:2.5px solid var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:28px;
  background:var(--purple); box-shadow:3px 3px 0 var(--ink); transition:transform .12s;
  user-select:none;
}
.memory-card:hover{transform:translate(-1px,-1px);}
.memory-card.flipped{background:#fff;}
.memory-card.matched{background:var(--green); opacity:0.55; cursor:default;}

.phase-complete{text-align:center; padding:26px 10px;}
.phase-complete h3{font-size:20px; margin-bottom:6px;}
.phase-complete p{margin-bottom:16px;}

.mito-statement{
  font-family:var(--font-head); font-weight:800; font-size:19px; margin:0 0 22px; color:var(--ink); line-height:1.35;
}
.mito-options{display:flex; gap:14px; flex-wrap:wrap;}
.mito-opt{
  flex:1; min-width:140px; text-align:center; font-family:var(--font-head); font-weight:800; font-size:15px;
  padding:16px 12px; border-radius:12px; border:2.5px solid var(--ink); background:#fff;
  cursor:pointer; box-shadow:2.5px 2.5px 0 var(--ink); transition:transform .1s;
}
.mito-opt:hover{transform:translate(-1px,-1px); box-shadow:3.5px 3.5px 0 var(--ink);}
.mito-opt:disabled{cursor:default; transform:none;}
.mito-opt.correct{background:var(--green); color:#fff;}
.mito-opt.wrong{background:var(--red); color:#fff;}
.mito-explanation{
  margin-top:16px; padding:12px 16px; background:var(--cream); border:2px dashed var(--ink);
  border-radius:10px; font-size:13px; color:var(--ink); font-weight:600;
}

.plate-title{font-family:var(--font-head); font-weight:800; font-size:19px; margin:0 0 18px; color:var(--ink);}
.plate-opt-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.plate-opt{
  display:flex; align-items:center; gap:10px; text-align:left; font-family:var(--font-body); font-weight:700; font-size:14px;
  padding:14px 16px; border-radius:12px; border:2.5px solid var(--ink); background:#fff;
  cursor:pointer; box-shadow:2.5px 2.5px 0 var(--ink); transition:transform .1s;
}
.plate-opt:hover{transform:translate(-1px,-1px); box-shadow:3.5px 3.5px 0 var(--ink);}
.plate-opt .plate-opt-emoji{font-size:22px;}
.plate-opt.selected{background:var(--yellow); border-color:var(--ink);}
.plate-next-btn{margin-top:20px;}

.plate-result{text-align:center;}
.plate-result-badge{
  display:inline-block; background:var(--red); color:#fff; font-family:var(--font-head); font-weight:800;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:5px 14px; border-radius:14px;
  border:2px solid var(--ink); margin-bottom:12px;
}
.plate-result h2{font-size:23px; margin:0 0 6px; line-height:1.25;}
.plate-result-spice{font-size:20px; margin-bottom:14px;}
.plate-result p{margin:0 0 18px;}
.plate-product{
  display:flex; align-items:center; gap:14px; background:var(--paper); border:2.5px solid var(--ink);
  border-radius:14px; padding:14px 16px; margin:0 auto 20px; max-width:340px; text-align:left;
}
.plate-product-swatch{width:52px; height:52px; border-radius:10px; border:2px solid var(--ink); flex-shrink:0;}
.plate-product h4{margin:0 0 3px; font-size:14px; font-family:var(--font-head); font-weight:800;}
.plate-product p{margin:0; font-size:12.5px; color:rgba(0,0,0,0.6); font-weight:700;}

/* ---------- LOJA ---------- */
.coming-soon-box{
  background:var(--paper); border:3px solid var(--ink); border-radius:20px; padding:50px 40px;
  text-align:center; box-shadow:7px 8px 0 var(--ink); max-width:560px; margin:30px auto 40px;
}
.coming-soon-emoji{font-size:40px; display:block; margin-bottom:14px;}
.coming-soon-box h2{font-family:var(--font-mast); font-size:32px; margin:0 0 12px;}
.coming-soon-box p{max-width:420px; margin:0 auto 24px;}
.coming-soon-form{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.coming-soon-form input{
  flex:1; min-width:200px; border:2.5px solid var(--ink); border-radius:30px; padding:12px 18px;
  font-family:var(--font-body); font-weight:700; font-size:14px; outline:none;
}
.coming-soon-form input:focus{border-color:var(--red);}
.shop-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.shop-card{position:relative;}
.add-to-cart-btn{
  width:calc(100% - 24px); margin:0 12px 12px; font-family:var(--font-head); font-weight:800; font-size:12.5px;
  padding:9px; border-radius:9px; border:2.5px solid var(--ink); background:var(--yellow); color:var(--ink);
  cursor:pointer; box-shadow:2.5px 2.5px 0 var(--ink); transition:transform .1s;
}
.add-to-cart-btn:hover{transform:translate(-1px,-1px); box-shadow:3.5px 3.5px 0 var(--ink);}
.add-to-cart-btn:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink);}
.add-to-cart-btn.added{background:var(--green); color:#fff;}

/* ---------- CARRINHO ---------- */
.cart-fab{
  position:fixed; bottom:26px; right:26px; z-index:500;
  background:var(--red); color:#fff; border:3px solid var(--ink); border-radius:50%;
  width:62px; height:62px; display:flex; align-items:center; justify-content:center;
  font-size:26px; cursor:pointer; box-shadow:4px 5px 0 var(--ink); transition:transform .1s;
}
.cart-fab:hover{transform:translate(-1px,-2px); box-shadow:5px 7px 0 var(--ink);}
.cart-fab:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.cart-badge{
  position:absolute; top:-6px; right:-6px; background:var(--yellow); color:var(--ink);
  border:2px solid var(--ink); border-radius:50%; min-width:24px; height:24px; padding:0 4px;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:12px;
}
.cart-overlay{
  position:fixed; inset:0; background:rgba(26,20,16,0.6); z-index:900;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.cart-overlay.show{opacity:1; pointer-events:auto;}
.cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:380px; max-width:92vw;
  background:var(--paper); border-left:3px solid var(--ink);
  transform:translateX(100%); transition:transform .3s ease; z-index:901;
  display:flex; flex-direction:column;
}
.cart-overlay.show .cart-drawer{transform:translateX(0);}
.cart-header{
  padding:20px 22px 16px; border-bottom:3px solid var(--ink); display:flex; align-items:center; justify-content:space-between;
  background:var(--ink); color:#fff;
}
.cart-header h3{color:#fff; margin:0; font-size:19px;}
.cart-close{
  width:32px; height:32px; border-radius:50%; border:2px solid #fff; background:transparent; color:#fff;
  font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cart-close:hover{background:rgba(255,255,255,0.15);}
.cart-items{flex:1; overflow-y:auto; padding:16px 20px;}
.cart-empty{text-align:center; padding:50px 10px; color:rgba(0,0,0,0.5); font-family:var(--font-hand); font-size:16px;}
.cart-item{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:2px dashed rgba(0,0,0,0.15);}
.cart-item-swatch{width:48px; height:48px; border-radius:10px; border:2px solid var(--ink); flex-shrink:0;}
.cart-item-info{flex:1; min-width:0;}
.cart-item-info h4{margin:0 0 2px; font-size:13.5px; font-family:var(--font-head); font-weight:800; color:var(--ink);}
.cart-item-price{font-size:12.5px; color:rgba(0,0,0,0.6); font-weight:700;}
.cart-item-qty{display:flex; align-items:center; gap:6px;}
.cart-item-qty button{
  width:24px; height:24px; border-radius:6px; border:2px solid var(--ink); background:#fff;
  font-weight:800; cursor:pointer; font-size:13px; line-height:1;
}
.cart-item-remove{background:none; border:none; color:var(--red); font-weight:800; cursor:pointer; font-size:12px; margin-top:4px; padding:0;}
.cart-footer{padding:18px 20px 22px; border-top:3px solid var(--ink);}
.cart-subtotal{display:flex; justify-content:space-between; font-family:var(--font-head); font-weight:800; font-size:16px; margin-bottom:14px; color:var(--ink);}
.cart-checkout-btn{width:100%; text-align:center;}
.shop-card .photo-block{height:150px;}
.price-tag{
  position:absolute; top:-12px; right:-12px; background:var(--yellow); color:var(--ink); border:2.5px solid var(--ink);
  font-family:var(--font-head); font-weight:800; font-size:13px; padding:6px 10px; border-radius:50%;
  transform:rotate(8deg); box-shadow:3px 4px 0 var(--ink); z-index:2;
}

/* ---------- NOTÍCIAS ---------- */
.press-row{display:flex; gap:30px; flex-wrap:wrap; align-items:center; opacity:0.75; margin:14px 0 28px; font-family:var(--font-head); font-weight:800; font-size:14px;}
.news-list{display:flex; flex-direction:column; gap:0;}
.news-item{display:grid; grid-template-columns:110px 1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:2px dashed rgba(26,20,16,0.25);}
.news-item .date{font-family:var(--font-hand); font-size:19px; color:var(--pink); font-weight:700;}
.investor-box{
  margin-top:38px; border:3px dashed var(--blue); border-radius:16px; padding:26px 30px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; background:rgba(41,171,226,0.06);
}

/* ---------- SOBRE ---------- */
.timeline{display:flex; gap:24px; overflow-x:auto; padding:20px 4px 30px;}

.partners-marquee{
  overflow:hidden; position:relative; margin:6px 0 34px; padding:4px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.partners-track{
  display:flex; gap:22px; width:max-content;
  animation: partners-scroll 26s linear infinite;
}
.partners-marquee:hover .partners-track{animation-play-state: paused;}
.partner-logo{
  display:flex; align-items:center; gap:10px; background:var(--paper);
  border:2.5px solid var(--ink); border-radius:14px; padding:12px 22px;
  box-shadow:3px 3px 0 var(--ink); white-space:nowrap;
  font-family:var(--font-head); font-weight:800; font-size:14px; color:var(--ink);
}
.partner-logo .plogo-dot{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; flex-shrink:0;
}
@keyframes partners-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.tl-item{min-width:190px; background:#fff; border-radius:12px; border:3px solid var(--ink); padding:16px; position:relative; box-shadow:4px 5px 0 var(--ink);}
.tl-item .yr{font-family:var(--font-mast); color:var(--red); font-size:22px;}
.sobre-hero{display:flex; gap:48px; align-items:center; justify-content:space-between; margin:14px auto 34px; flex-wrap:wrap; max-width:1180px; width:100%;}
@keyframes sobre-soft-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(1.5deg); }
}
@keyframes sobre-slow-zoom{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.07); }
}
.sobre-hero-photo{
  border-radius:20px; overflow:hidden; border:3px solid var(--ink); box-shadow:6px 8px 0 var(--ink);
  width:min(38%, 400px); aspect-ratio:4/5; height:auto; flex:0 0 auto;
  animation:sobre-soft-float 8s ease-in-out infinite;
  will-change:transform;
}
.sobre-hero-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  animation:sobre-slow-zoom 12s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .sobre-hero-photo, .sobre-hero-photo img{ animation:none; }
}
.sobre-hero-text{flex:1 1 420px; min-width:260px;}
.sobre-hero-text p{max-width:none !important; font-size:16.5px; line-height:1.75;}
@media (max-width:820px){
  .sobre-hero{flex-direction:column;}
  .sobre-hero-photo{width:min(70%, 260px); margin:0 auto;}
}
.traits{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0;}
.trait{background:var(--pink); color:#fff; padding:8px 16px; border-radius:20px; font-family:var(--font-head); font-weight:800; font-size:13px; transform:rotate(-2deg); border:2px solid var(--ink);}
.trait:nth-child(2n){background:var(--yellow); color:var(--ink); transform:rotate(2deg);}
.trait:nth-child(3n){background:var(--blue); color:#fff; transform:rotate(-1deg);}

/* ---------- CONTATO ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.social-list a{
  display:flex; justify-content:space-between; padding:14px 0; border-bottom:2px dashed rgba(26,20,16,0.25);
  text-decoration:none; color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:15px;
}
.social-icon{
  width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  border:2.5px solid var(--ink); color:#fff; flex-shrink:0;
}
.form-mock label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#8a7a63; margin:14px 0 5px; font-weight:800;}
.form-mock input, .form-mock select, .form-mock textarea{
  width:100%; border:none; border-bottom:2.5px solid var(--ink); background:transparent; padding:8px 2px; font-family:var(--font-body); font-weight:700; font-size:14.5px; outline:none;
}

/* ---------- MINHA CONTA ---------- */
.nav-account-btn{background:var(--ink); color:#fff; border-color:var(--ink);}
.account-card{
  background:var(--paper); border:3px solid var(--ink); border-radius:18px; padding:30px 32px;
  box-shadow:6px 8px 0 var(--ink); max-width:420px;
}
.account-tabs{display:flex; gap:8px; margin-bottom:20px;}
.account-tab{
  flex:1; font-family:var(--font-head); font-weight:800; font-size:13.5px; padding:10px; border-radius:10px;
  border:2.5px solid var(--ink); background:var(--cream); color:var(--ink); cursor:pointer;
}
.account-tab.active{background:var(--red); color:#fff;}
.account-card label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:1px; color:#8a7a63; margin:14px 0 5px; font-weight:800;}
.account-card input{
  width:100%; border:2.5px solid var(--ink); border-radius:10px; background:#fff; padding:10px 12px;
  font-family:var(--font-body); font-weight:700; font-size:14px; outline:none; box-sizing:border-box;
}
.account-card input:focus{border-color:var(--red);}
.account-error{color:var(--red); font-size:12.5px; font-weight:700; margin-top:10px; min-height:16px;}
.account-hint{font-size:12.5px; font-weight:600; color:var(--ink); margin-top:16px; text-align:center;}
.account-hint a{color:var(--red); font-weight:800; cursor:pointer; text-decoration:underline;}

.account-profile-header{
  display:flex; align-items:center; gap:16px; background:var(--ink); color:#fff; border-radius:16px;
  padding:22px 26px; border:3px solid var(--ink); box-shadow:5px 6px 0 rgba(0,0,0,0.15); margin-bottom:10px; flex-wrap:wrap;
}
.account-avatar{
  width:56px; height:56px; border-radius:50%; background:var(--yellow); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:24px;
  border:3px solid #fff; flex-shrink:0;
}
.account-empty{
  background:var(--cream); border:2px dashed var(--ink); border-radius:12px; padding:20px; text-align:center;
  font-size:13.5px; font-weight:700; color:var(--ink);
}
.saved-recipe-remove{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; border:2px solid var(--ink);
  background:#fff; cursor:pointer; font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
  z-index:2;
}

/* ---------- SALVAR RECEITA + COMENTÁRIOS (receita) ---------- */
.save-recipe-btn{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:800; font-size:13px;
  padding:9px 16px; border-radius:20px; border:2.5px solid var(--ink); background:#fff; color:var(--ink);
  cursor:pointer; box-shadow:2.5px 2.5px 0 var(--ink); margin-top:14px;
}
.save-recipe-btn.saved{background:var(--red); color:#fff;}
.comments-section{margin-top:10px;}
.comment-form{display:flex; gap:10px; margin-bottom:20px;}
.comment-form input{
  flex:1; border:2.5px solid var(--ink); border-radius:20px; padding:10px 16px; font-family:var(--font-body);
  font-weight:700; font-size:13.5px; outline:none;
}
.comment-login-hint{
  background:var(--cream); border:2px dashed var(--ink); border-radius:12px; padding:14px 18px;
  font-size:13px; font-weight:700; margin-bottom:20px;
}
.comment-login-hint a{color:var(--red); cursor:pointer; text-decoration:underline;}
.comment-item{display:flex; gap:12px; padding:14px 0; border-bottom:2px dashed rgba(0,0,0,0.15);}
.comment-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--purple); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:15px;
}
.comment-body h4{margin:0 0 2px; font-size:13.5px; font-family:var(--font-head); font-weight:800;}
.comment-body p{margin:0; font-size:13.5px;}
.comment-empty{font-size:13px; opacity:0.6; font-weight:600;}

@media (max-width:820px){
  .hero, .video-feature, .two-col, .rec-hero, .club-band, .contact-grid{grid-template-columns:1fr;}
  .recipe-grid, .masonry, .blog-grid, .vid-grid, .shop-grid{grid-template-columns:repeat(2,1fr);}
  .navlinks{overflow-x:auto; flex-wrap:nowrap;}
  .masthead h1.mast-title{font-size:40px;}
}
/* ---------- NEWSLETTER POPUP ---------- */
.newsletter-overlay{
  position:fixed; inset:0; background:rgba(26,20,16,0.72); z-index:999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.newsletter-overlay.show{opacity:1; pointer-events:auto;}
.newsletter-card{
  background:var(--paper); border:3px solid var(--ink); border-radius:20px;
  box-shadow:8px 8px 0 var(--ink); max-width:420px; width:100%;
  padding:30px 28px 26px; position:relative; text-align:center;
  transform:translateY(14px) scale(0.97); transition:transform .25s ease;
}
.newsletter-overlay.show .newsletter-card{transform:translateY(0) scale(1);}
.newsletter-close{
  position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--ink); background:var(--cream); color:var(--ink); font-size:16px;
  font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center;
  line-height:1;
}
.newsletter-close:hover{background:var(--yellow);}
.newsletter-tag{
  font-family:var(--font-head); font-weight:800; background:var(--red); color:#fff;
  padding:5px 12px; border-radius:12px; display:inline-block; font-size:11px;
  letter-spacing:1px; text-transform:uppercase; border:2px solid var(--ink); margin-bottom:12px;
}
.newsletter-card h2{
  font-family:var(--font-mast); font-size:30px; color:var(--ink); margin:0 0 8px; line-height:1.05;
}
.newsletter-card p{
  font-family:var(--font-body); font-size:14.5px; color:var(--ink); opacity:0.85; margin:0 0 20px; line-height:1.4;
}
.newsletter-form{display:flex; flex-direction:column; gap:10px;}
.newsletter-form input{
  font-family:var(--font-body); font-size:14px; padding:12px 14px; border-radius:10px;
  border:2.5px solid var(--ink); outline:none;
}
.newsletter-form input:focus{border-color:var(--red);}
.newsletter-form button{
  font-family:var(--font-head); font-weight:800; font-size:15px; letter-spacing:0.4px;
  padding:13px; border-radius:10px; border:2.5px solid var(--ink); cursor:pointer;
  background:var(--yellow); color:var(--ink); box-shadow:3px 3px 0 var(--ink); transition:transform .1s;
}
.newsletter-form button:hover{transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink);}
.newsletter-form button:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink);}
.newsletter-fineprint{font-size:11px; color:var(--ink); opacity:0.55; margin-top:12px;}
.newsletter-success{display:none; font-family:var(--font-head); font-weight:700; color:var(--ink);}
.newsletter-success.show{display:block;}

/* Fotos nos cards de notícias */
.news-photo{background-size:cover; background-position:center; position:relative; color:transparent;}
.news-photo span{position:absolute; left:8px; bottom:8px; background:var(--ink); color:#fff; font-family:var(--font-body,inherit); font-size:10px; font-weight:700; letter-spacing:.08em; padding:4px 8px; border-radius:99px;}


.spin-display.landed{padding:12px 16px;}
.spin-result{display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;}
.spin-result-title{font-family:var(--font-head); font-weight:800; font-size:16px; line-height:1.35; text-align:center; letter-spacing:0.2px;}
.spin-result-sub{font-family:var(--font-body); font-weight:700; font-size:12.5px; line-height:1.4; text-align:center; opacity:0.75;}

/* ===== Padrão visual das imagens de receita (identidade única) ===== */
.otto-shot{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background-repeat:no-repeat; background-size:cover; background-position:center;
}
.otto-shot img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center center !important;
  padding:0 !important;
  filter:none !important;
}
.rec-hero .otto-shot img{padding:0 !important; object-fit:cover !important;}
.otto-shot.otto-full img{padding:0 !important; object-fit:cover !important; filter:none !important;}

/* ===== Player de vídeo (facade YouTube, sem bloqueio) ===== */
.yt-facade{position:relative; width:100%; height:100%; cursor:pointer; overflow:hidden; background:#000;}
.yt-facade img{width:100%; height:100%; object-fit:cover; display:block;}
.yt-facade .yt-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:52px; border-radius:14px; background:var(--red);
  border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  display:flex; align-items:center; justify-content:center; transition:transform .12s;
}
.yt-facade .yt-play::after{content:""; border-left:18px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; margin-left:4px;}
.yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);}
.yt-facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

.photo-block iframe, .banner-photo-inner iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.photo-block, .banner-photo-inner{position:relative;}

/* ================================================================
   RESPONSIVIDADE GLOBAL (mobile-first fixes)
   Regras reutilizáveis: corrigem a CAUSA do overflow horizontal
   (min-width automático de itens de grid/flex, larguras fixas,
   paddings/margens negativas) sem alterar o design do desktop.
   ================================================================ */

/* 1. Nada pode ultrapassar a viewport */
html, body{ max-width:100%; }
img, video, iframe, svg, canvas, table{ max-width:100%; }
img, video{ height:auto; }
.otto-shot img, .yt-facade img, .hero-visual img, .banner-photo img,
.photo-block img, .sobre-hero-photo img{ height:100%; }

/* 2. Itens de grid/flex podem encolher (causa nº1 de overflow) */
.recipe-grid, .masonry, .blog-grid, .vid-grid, .shop-grid,
.newsletter-grid, .quick-info-grid, .variation-grid, .storage-grid,
.pairing-grid, .hero, .video-feature, .two-col, .rec-hero,
.club-band, .contact-grid, .spin-block, .newsletter-hero-card,
.banner-hero{ grid-auto-flow:row; }
.recipe-grid > *, .masonry > *, .blog-grid > *, .vid-grid > *, .shop-grid > *,
.newsletter-grid > *, .quick-info-grid > *, .variation-grid > *, .storage-grid > *,
.pairing-grid > *, .hero > *, .video-feature > *, .two-col > *, .rec-hero > *,
.club-band > *, .contact-grid > *, .spin-block > *, .newsletter-hero-card > *,
.banner-hero > *{ min-width:0; }
.filters > *, .navlinks > *, .traits > *, .meta-stamps > *, .banner-btns > *{ max-width:100%; }

/* 3. Campos de formulário nunca com largura intrínseca fixa */
input, select, textarea, button{ max-width:100%; }
.searchbar{ width:100%; }
.searchbar input{ min-width:0; width:100%; }
.form-mock input, .form-mock select, .form-mock textarea{ min-width:0; box-sizing:border-box; }
.club-band input, .club-mini input, .top-newsletter-form input{ min-width:0; flex:1 1 160px; box-sizing:border-box; }

/* 4. Palavras longas não estouram containers */
h1, h2, h3, h4, p, li, .cap, .banner-desc, .spin-result-title{ overflow-wrap:break-word; }

/* ---------- TABLET ---------- */
@media (max-width:1024px){
  .masonry{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .vid-grid, .recipe-grid, .blog-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .quick-info-grid, .pairing-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .variation-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .seo-panel dl{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .recipe-grid, .masonry, .blog-grid, .vid-grid, .shop-grid,
  .newsletter-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero, .video-feature, .two-col, .rec-hero, .club-band,
  .contact-grid, .spin-block, .newsletter-hero-card, .banner-hero{ grid-template-columns:minmax(0,1fr); }
  .masonry{ grid-auto-rows:auto; }
  .masonry .card, .masonry .card.big{ grid-row:span 1; }
  .masonry .photo-block{ height:150px; flex:0 0 auto; }
}

/* ---------- CELULAR ---------- */
@media (max-width:640px){
  /* padding da página + blocos que usam margem negativa igual ao padding */
  .page{ padding:24px 16px 16px; }
  .stripe-divider{ margin-left:-16px; margin-right:-16px; }
  footer.site-footer{ margin:48px -16px -16px; padding:26px 16px; }
  .masthead{ padding:20px 16px 14px; }
  .toc-bar{ padding:12px 0 14px; }
  .content{ min-height:auto; }

  /* tipografia */
  .masthead h1.mast-title{ font-size:clamp(30px, 11vw, 44px); text-shadow:3px 3px 0 var(--ink); -webkit-text-stroke-width:2px; }
  .masthead .sub{ font-size:14px; }
  .masthead .kicker{ font-size:11px; letter-spacing:2px; }
  .hero h1{ font-size:clamp(26px, 8.5vw, 36px); }
  .banner-title{ font-size:28px; }
  .club-band.featured h2{ font-size:24px; }
  h2{ font-size:22px; }
  .quiz-question{ font-size:17px; }
  .spin-tag-big{ font-size:16px; padding:12px 22px; }

  /* navegação: rolagem horizontal controlada apenas na barra */
  .navlinks{
    overflow-x:auto; flex-wrap:nowrap; padding:2px 16px 8px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar{ display:none; }
  .navlinks button{ flex:0 0 auto; scroll-snap-align:start; min-height:44px; padding:11px 14px; }
  .toc-label{ padding:0 16px; }

  /* filtros: quebram linha e continuam tocáveis */
  .filters{ gap:8px; margin-bottom:18px; }
  .pill{ min-height:44px; display:inline-flex; align-items:center; padding:10px 14px; }

  /* área de toque confortável */
  .btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; width:auto; }
  .navlinks button, .btn, .pill, .top-newsletter-form button,
  .club-band button, .newsletter-form button, .form-mock button,
  .quiz-options button, .portion-control button{ min-height:44px; }
  .portion-control button{ min-width:44px; }
  .newsletter-close, .top-newsletter-close{ width:40px; height:40px; }
  .social-list a{ min-height:48px; align-items:center; }

  /* grids em 1 coluna */
  .recipe-grid, .masonry, .blog-grid, .vid-grid, .shop-grid,
  .newsletter-grid, .variation-grid, .storage-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .quick-info-grid, .pairing-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .masonry .photo-block, .blog-card .photo-block, .vid-card .photo-block,
  .recipe-card .photo-block{ height:190px; }
  .rec-hero .photo-block{ height:230px; }

  /* blocos e espaçamentos */
  .spin-block, .club-band, .newsletter-hero-card{ padding:22px 18px; }
  .club-band.featured{ padding:26px 20px; }
  .club-band-badge{ left:18px; }
  .spin-widget{ padding:16px; }
  .news-ticker{ padding:12px 14px; gap:12px; flex-wrap:wrap; }
  .banner-text{ padding:6px 0 14px; }
  .banner-hero{ padding:16px; }
  .hero-visual{ height:230px; transform:none; }
  .badge-float{ width:70px; height:70px; font-size:9.5px; right:8px; top:-12px; }
  .sticker{ width:62px; height:62px; font-size:11px; }
  .meta-stamps{ gap:10px; flex-wrap:wrap; }
  .section-title{ margin:32px 0 14px; gap:10px; flex-wrap:wrap; }
  #page-home .hero{ margin-top:28px; margin-bottom:44px; }
  #page-home .section-title{ margin:36px 0 16px; }
  #page-home .banner-hero{ margin-bottom:36px; }
  #page-home .spin-block{ margin:32px 0 44px; }
  #page-home .news-ticker, #page-home .club-band{ margin:32px 0; }
  #page-home .partners-marquee{ margin:8px 0 32px; }
  hr.dashed{ margin:24px 0; }
  .sticky-note{ transform:rotate(-1deg); }
  .game-card{ padding:20px 16px; }
  .timeline{ gap:14px; padding:16px 2px 22px; }
  .tl-item{ min-width:76vw; }
  .partner-logo{ padding:10px 16px; font-size:13px; }
  .sobre-hero{ gap:24px; margin-bottom:24px; }
  .sobre-hero-photo{ width:min(86%, 320px); }
  .two-col{ gap:22px; }
  .seo-panel dl{ grid-template-columns:1fr; }
  .newsletter-hero-card{ margin:20px 0 28px; }
  .rating-widget{ gap:8px; }
  .star-btn{ font-size:24px; padding:2px; }
}

@media (max-width:380px){
  .page{ padding:20px 12px 14px; }
  .stripe-divider{ margin-left:-12px; margin-right:-12px; }
  footer.site-footer{ margin:44px -12px -14px; padding:24px 12px; }
  .navlinks{ padding:2px 12px 8px; }
  .toc-label{ padding:0 12px; }
  .quick-info-grid, .pairing-grid{ grid-template-columns:minmax(0,1fr); }
  .top-newsletter-bar{ padding:10px 34px 10px 12px; font-size:12px; }
}

/* 5. Formulários de inscrição: empilham e ocupam a largura no celular */
@media (max-width:640px){
  .club-band form, .club-mini form, .coming-soon-form,
  .top-newsletter-form, .page form{
    display:flex; flex-wrap:wrap; width:100%; max-width:100%; box-sizing:border-box;
  }
  .club-band form, .club-mini form, .coming-soon-form{ flex-direction:column; align-items:stretch; }
  .club-band form input, .club-mini form input, .coming-soon-form input,
  .top-newsletter-form input{ width:100% !important; flex:1 1 100% !important; box-sizing:border-box; }
  .club-band form .btn, .club-mini form .btn, .coming-soon-form .btn{ width:100%; }
  .form-mock{ display:block; }
}

/* 6. Overrides de estilos inline que quebram no celular */
@media (max-width:640px){
  .banner-hero{ grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
  .banner-hero .banner-photo{ height:200px !important; }
  .banner-hero .banner-text{ padding:0 !important; }
  .top-newsletter-bar{ padding:34px 16px 12px; }
  .top-newsletter-close{ top:8px; transform:none; right:10px; }
}

/* ---------- TOAST DE CONFIRMAÇÃO ---------- */
.otto-toast-host{
  position:fixed; z-index:9999; left:50%; bottom:24px; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px; align-items:center;
  width:min(420px, calc(100vw - 24px)); pointer-events:none;
}
.otto-toast{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--green); color:#fff;
  border:2.5px solid var(--ink); border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);
  font-family:var(--font-head); font-weight:800; font-size:15px; line-height:1.25;
  padding:14px 18px;
  opacity:0; transform:translateY(14px); transition:opacity .25s ease, transform .25s ease;
}
.otto-toast.show{opacity:1; transform:translateY(0);}
.otto-toast-yellow{background:var(--yellow); color:var(--ink);}
.otto-toast-icon{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--ink); background:var(--yellow); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.otto-toast-text{min-width:0;}
@media (max-width:640px){
  .otto-toast-host{bottom:16px; width:calc(100vw - 20px);}
  .otto-toast{font-size:14px; padding:12px 14px; box-shadow:4px 4px 0 var(--ink);}
}

/* ---------- AJUSTES FINAIS MOBILE ---------- */
@media (max-width:640px){
  /* formulário de contato: volta a empilhar label/campo (a regra .page form o transformava em flex) */
  .page form.form-mock{ display:block; }
  .form-mock h3{ margin-bottom:6px; }

  /* redes & parcerias: nome e handle em duas linhas limpas */
  .social-list a{
    flex-direction:column; align-items:flex-start; gap:6px;
    padding:14px 0; word-break:break-word;
  }
  .social-list a > span{ max-width:100%; }
  .social-list a > span:last-child{ padding-left:44px; font-size:14px; opacity:.85; }
}