/**
 * ESTILO: Animações (animations.css)
 * Card effects (steam, shimmer)
 * Reveal (fade-in on scroll)
 * Staggered cards, price counter
 * Reduced motion, pressionar
 * Accessibility focus styles
 * Scrollbar customização
 */
/* ====================== UTILITIES: CARD EFFECTS ====================== */
.card-img::before{
  content:"";position:absolute;inset:0;z-index:2;
  opacity:0;transition:opacity .5s;pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 26%, transparent 52%);
}
.card-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(28,22,20,.2) 100%),
    linear-gradient(90deg,transparent 0%,rgba(240,231,218,.06) 50%,transparent 100%);
  background-size:100% 100%,200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  pointer-events:none;
  transition:opacity .4s ease;
}
.card-img:has(img.img-loaded)::after,.card-img.shimmer-done::after{animation:none;background:linear-gradient(to bottom,rgba(0,0,0,0) 60%,rgba(28,22,20,.2) 100%)}
.card:hover .card-img::before{
  opacity:1;
  animation: steamRise 2.6s ease-in-out infinite;
}
@keyframes steamRise{
  0%{background-position:0 100%;opacity:.3}
  50%{background-position:0 60%;opacity:.55}
  100%{background-position:0 100%;opacity:.3}
}

/* ====================== UTILITIES: REFERENCE FIELD PULSE ====================== */
#fRef:placeholder-shown{
  border-color:rgba(200,151,63,.55);
  background:linear-gradient(0deg,rgba(200,151,63,.04),rgba(200,151,63,.04));
}
@keyframes refPulse{
  0%,100%{transform:translateX(0);border-color:rgba(200,151,63,.55)}
  25%{transform:translateX(-3px);border-color:var(--yellow)}
  75%{transform:translateX(3px);border-color:var(--yellow2)}
}
#fRef.ref-pulse{animation:refPulse .5s ease 3}

/* ====================== UTILITIES: CITY SHAKE ====================== */
@keyframes cityShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
  90%{transform:translateX(2px)}
}
.city-shake{
  animation:cityShake .5s ease;
  border-color:var(--red)!important;
  box-shadow:0 0 0 4px rgba(198,40,40,.18)!important;
}

/* ====================== ANIMATIONS: REVEAL ====================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.visible{opacity:1;transform:none}

/* ====================== ANIMATIONS: STAGGERED CARDS ====================== */
.card-stagger{opacity:1;transform:none}
.card-stagger.card-visible{
  opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}

/* ====================== ANIMATIONS: CARD REVEAL ====================== */
@keyframes cardReveal{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}
/* Cards start invisible only when JS successfully adds .js-reveal to body.
   If JS fails, cards remain visible (no inline opacity:0 dependency). */
.js-reveal .card{opacity:0;transition:none}
.card.card-revealed{animation:cardReveal .5s cubic-bezier(.22,.61,.36,1) both}

/* Failsafe: if IntersectionObserver or JS delays, show cards after 2.5s */
@keyframes forceVisible{to{opacity:1;transform:none}}
.js-reveal .card{animation:forceVisible 0s 2.5s forwards}

/* ====================== ANIMATIONS: STAGGERED FADE-UP ====================== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-up{animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) both}
.fade-up-d1{animation-delay:.1s}
.fade-up-d2{animation-delay:.2s}
.fade-up-d3{animation-delay:.3s}
.fade-up-d4{animation-delay:.4s}
.fade-up-d5{animation-delay:.5s}
.fade-up-d6{animation-delay:.6s}

/* ====================== ANIMATIONS: BUTTON MICRO-PRESS ====================== */
@keyframes microPress{
  0%{transform:scale(1)}
  50%{transform:scale(.94)}
  100%{transform:scale(1)}
}
.btn-press:active{animation:microPress .15s ease-out}

/* ====================== ANIMATIONS: SHIMMER LOADING ====================== */
@keyframes shimmerLoad{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.shimmer-loading{
  background:linear-gradient(90deg,
    rgba(21,101,168,.05) 25%,
    rgba(93,173,226,.12) 50%,
    rgba(21,101,168,.05) 75%)!important;
  background-size:200% 100%!important;
  animation:shimmerLoad 1.5s ease-in-out infinite!important;
}

/* ====================== ANIMATIONS: SECTION TRANSITIONS ====================== */
@keyframes sectionSlideIn{
  from{opacity:0;transform:translateY(32px)}
  to{opacity:1;transform:translateY(0)}
}
.section-animate{
  animation:sectionSlideIn .7s cubic-bezier(.22,.61,.36,1) both;
}

/* ====================== ANIMATIONS: COUNTER ROLL-UP ====================== */
@keyframes counterRoll{
  0%{opacity:0;transform:translateY(12px)}
  60%{opacity:1;transform:translateY(-2px)}
  100%{opacity:1;transform:translateY(0)}
}
.counter-animate{
  animation:counterRoll .8s cubic-bezier(.22,.61,.36,1) both;
}

/* ====================== ANIMATIONS: GLOW PULSE ====================== */
@keyframes glowPulse{
  0%,100%{box-shadow:0 0 15px rgba(26,188,156,.2),0 4px 15px rgba(0,0,0,.3)}
  50%{box-shadow:0 0 30px rgba(26,188,156,.35),0 4px 20px rgba(0,0,0,.3)}
}
.glow-animate{animation:glowPulse 2.5s ease-in-out infinite}

/* ====================== ANIMATIONS: FLOAT GENTLE ====================== */
@keyframes floatGentle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.float-animate{animation:floatGentle 4s ease-in-out infinite}

/* ====================== ANIMATIONS: PRICE COUNTER ====================== */
@keyframes priceCount{
  0%{opacity:.5;transform:translateY(-5px)}
  100%{opacity:1;transform:translateY(0)}
}
.price-animate{animation:priceCount .3s ease}

/* ====================== RESPONSIVE ====================== */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card,.soc-btn{transition:none}
  .card-stagger{opacity:1;transform:none;transition:none}
  .js-reveal .card{opacity:1}
  .card.card-revealed{animation:none;opacity:1;transform:none}
  .card-img img,.ci-img{opacity:1;transition:none}
  .card:hover .card-img img{transform:none}
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  .skeleton::after{animation:none}
  .card-img::after{animation:none}
  .card-img::before{animation:none;opacity:0}
  .badge-red{animation:none}
}

/* ====================== UTILITIES: PRESSIONAR ====================== */
.send-btn:active,
.comment-submit:active,
.share-btn:active,
.cart-btn:active,
.add-btn:active,
.tab:active{transform:scale(.95);transition:transform .1s ease-out}
.send-btn,
.comment-submit,
.share-btn,
.cart-btn,
.add-btn{transition:transform .2s ease,box-shadow .3s ease,background .3s ease}

/* ====================== ACCESSIBILITY ====================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tab:focus-visible,
.pay-opt:focus-visible,
[onclick]:focus-visible{
  outline:3px solid var(--yellow2);
  outline-offset:2px;
  border-radius:8px;
}
::selection{background:var(--red);color:#fff}
::-moz-selection{background:var(--red);color:#fff}

/* ====================== UTILITIES: SCROLLBAR ====================== */
*{scrollbar-width:thin;scrollbar-color:var(--red) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--red);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--red2);background-clip:content-box}

/* ====================== FULL-VIEWPORT RESPONSIVE SHELL ====================== */
html body{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border-left:0!important;
  border-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

html body .hero,
html body .status-bar,
html body .trust-badges,
html body .tabs,
html body .footer,
html body .sticky-cta{
  width:100%!important;
  max-width:none!important;
}

/* The old photo carousel was never the intended animated hero media. */
html body .hero-carousel{
  display:none!important;
}

/* Open customer-facing overlays as real screens instead of 480px sheets. */
html body .overlay,
html body .product-modal,
html body .policy-overlay,
html body .pedidos-overlay,
html body .pix-modal-overlay{
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  inset:0!important;
  align-items:stretch!important;
}
html body .drawer,
html body .pm-content,
html body .policy-modal,
html body .pedidos-panel,
html body .pix-modal{
  width:100vw!important;
  max-width:none!important;
  height:100dvh!important;
  max-height:none!important;
  min-height:100dvh!important;
  margin:0!important;
  border-radius:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
html body .drawer,
html body .pm-body,
html body .policy-modal,
html body .pedidos-panel,
html body .pix-modal{
  padding-left:max(1rem,env(safe-area-inset-left))!important;
  padding-right:max(1rem,env(safe-area-inset-right))!important;
  padding-bottom:max(1.25rem,env(safe-area-inset-bottom))!important;
}
html body .drawer-head,
html body .pedidos-head,
html body .policy-modal h2{
  top:0!important;
  padding-top:max(.75rem,env(safe-area-inset-top))!important;
}
html body .lgpd-banner{
  width:100%!important;
  max-width:none!important;
}

/* Mobile: comfortable edge padding and consistent touch targets. */
@media (max-width:767px){
  html body .hero-top-content{
    padding-left:1rem!important;
    padding-right:1rem!important;
    align-items:center!important;
    text-align:center!important;
  }
  html body #heroLogoWrap{
    width:min(78vw,320px)!important;
    height:min(78vw,320px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .hero-sub{
    width:min(100%,34rem)!important;
    max-width:34rem!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .hero-gif-square{
    width:min(calc(100% - 2rem),440px)!important;
    max-width:440px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .btn-ig,
  html body .hero-cta-btn,
  html body .btn-delivery{
    min-height:48px!important;
  }
  html body .btn-ig{
    width:min(100%,22rem)!important;
    padding:.8rem 1.2rem!important;
  }
  html body .section,
  html body .faq-section,
  html body .newsletter-section,
  html body .delivery-map-section,
  html body .order-history,
  html body .recent-section,
  html body .satisfaction-section,
  html body .testimonials-section{
    width:calc(100% - 1rem)!important;
    margin-left:.5rem!important;
    margin-right:.5rem!important;
  }
}

/* Desktop: one centered composition. No asymmetric two-column scale conflict. */
@media (min-width:768px){
  html body{
    font-size:1rem!important;
  }
  html body .hero.hero-redesigned{
    min-height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:clamp(.9rem,2vw,1.5rem)!important;
    padding:clamp(2rem,4vw,4rem) clamp(1.5rem,5vw,5rem) 2.5rem!important;
    text-align:center!important;
  }
  html body .hero-top-content{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    width:min(100%,820px)!important;
    max-width:820px!important;
    margin:0 auto!important;
    padding:0!important;
  }
  html body #heroLogoWrap{
    width:clamp(220px,20vw,320px)!important;
    height:clamp(220px,20vw,320px)!important;
    margin:0 auto .35rem!important;
  }
  html body .hero-sub{
    width:min(100%,720px)!important;
    max-width:720px!important;
    margin:.15rem auto 0!important;
    font-size:clamp(.98rem,1.25vw,1.12rem)!important;
    line-height:1.62!important;
    text-align:center!important;
  }
  html body .hero-stars,
  html body .hero-proof{
    justify-content:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  html body .hero-top-content .btn-ig{
    min-width:230px!important;
    min-height:50px!important;
    margin:1rem auto 0!important;
    padding:.85rem 1.6rem!important;
    font-size:.95rem!important;
  }
  html body .hero-gif-square{
    width:clamp(360px,42vw,600px)!important;
    max-width:600px!important;
    aspect-ratio:1/1!important;
    height:auto!important;
    margin:0 auto!important;
    border-radius:24px!important;
  }
  html body .hero-gif-square video,
  html body .hero-gif-square img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    display:block!important;
  }
  html body .delivery-apps-section{
    width:min(100%,700px)!important;
    max-width:700px!important;
    margin:.25rem auto 0!important;
  }
  html body .delivery-apps-btns{
    justify-content:center!important;
  }
  html body .hero-cta-btn{
    min-width:240px!important;
    min-height:50px!important;
    margin:.25rem auto 0!important;
  }
  html body .section,
  html body .popular-section,
  html body .faq-section,
  html body .newsletter-section,
  html body .delivery-map-section,
  html body .order-history,
  html body .recent-section,
  html body .satisfaction-section,
  html body .testimonials-section{
    width:min(1180px,calc(100% - 3rem))!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .tabs{
    justify-content:center!important;
    padding-left:max(1.5rem,calc((100vw - 1180px)/2))!important;
    padding-right:max(1.5rem,calc((100vw - 1180px)/2))!important;
  }
  html body .tab{
    flex:0 1 240px!important;
    min-width:140px!important;
  }
  html body .status-bar,
  html body .trust-badges{
    justify-content:center!important;
    padding-left:clamp(1.5rem,6vw,6rem)!important;
    padding-right:clamp(1.5rem,6vw,6rem)!important;
  }
  html body .footer{
    border-radius:0!important;
    padding-left:clamp(1.5rem,6vw,6rem)!important;
    padding-right:clamp(1.5rem,6vw,6rem)!important;
  }
  html body .cart-btn{
    width:auto!important;
    min-width:320px!important;
    max-width:min(520px,calc(100vw - 2rem))!important;
  }
  html body .drawer > *,
  html body .pm-body > *,
  html body .policy-modal > *,
  html body .pedidos-panel > *,
  html body .pix-modal > *{
    max-width:920px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .pm-gallery{
    height:min(52dvh,560px)!important;
  }
}