/* ==========================================================================
   GELO SKIMÓ — Design System
   ========================================================================== */

:root{
  --bg:            #07070d;
  --bg-soft:       #0d0e1a;
  --bg-elevated:   #14152a;
  --blue:          #2e2f92;
  --blue-light:    #5457d6;
  --blue-pale:     #9ea0f0;
  --ice:           #8dd7f7;
  --ice-pale:      #d7f1fc;
  --red:           #ed1c23;
  --red-light:     #ff4b52;
  --white:         #f7f8ff;

  --flavor-coco:      #1fa9e0;
  --flavor-maca:       #5fbf3e;
  --flavor-melancia:   #e8384a;
  --flavor-maracuja:   #f0ac2e;
  --flavor-morango:    #e31c4d;

  --font-display: "Fredoka", "Baloo 2", sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", sans-serif;

  --container: min(1240px, 92vw);
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 40px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
}
body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
::selection{ background: var(--red); color:#fff; }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #07070d;
}
::-webkit-scrollbar-thumb {
  background: rgba(141, 215, 247, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ice);
}

/* grain overlay for premium texture */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 3;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{ width: var(--container); margin-inline:auto; }

.text-outline{
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ice);
  text-stroke: 1.5px var(--ice);
}
.text-outline--light{ -webkit-text-stroke-color: #fff; }

.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 1rem;
}
.section-eyebrow::before{
  content:""; width:24px; height:2px; background: var(--red); display:inline-block; border-radius:2px;
}
.section-eyebrow--light{ color: var(--ice-pale); }

.section-title{
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
}
.section-title--center{ text-align:center; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap: 1rem; }
.preloader__logo{ transform: rotate(-90deg); }
.preloader__ring{ stroke: var(--blue-light); stroke-dasharray: 502; stroke-dashoffset: 502; stroke-linecap: round; }
.preloader__word{
  font-family: var(--font-display); font-size: 1.6rem; letter-spacing:.3em;
  color:#fff; opacity:.9;
}
.preloader__pct{ font-size:.8rem; color: var(--ice); letter-spacing:.1em; }
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor{
  position: fixed; top:0; left:0; z-index: 998;
  pointer-events:none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor__dot{ width:6px; height:6px; border-radius:50%; background:#fff; position:absolute; top:0; left:0; transform:translate(-50%,-50%); }
.cursor__ring{
  width:36px; height:36px; border-radius:50%; border:1.5px solid #fff;
  position:absolute; top:0; left:0; transform:translate(-50%,-50%);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s;
}
.cursor.is-link .cursor__ring{ width:64px; height:64px; opacity:.6; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--red), var(--ice));
  z-index: 997;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.1rem 0;
  transition: padding .4s var(--ease-out), background .4s, box-shadow .4s, transform .5s var(--ease-out);
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.nav.is-scrolled{
  padding: .6rem 0;
  background: rgba(7,7,13,.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,.6);
}
.nav.is-hidden{ transform: translateY(-110%); }
.nav__inner{
  width: var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__brand{ display:flex; align-items:center; }
.nav__brand-logo{ height:auto; width: clamp(150px, 16vw, 210px); }
.nav__links{ display:flex; gap:2.1rem; margin-inline:auto; }
.nav__links a{
  position:relative; font-size:.95rem; font-weight:500; opacity:.85;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover::after{ transform: scaleX(1); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav__burger span{ width:22px; height:2px; background:#fff; border-radius:2px; }
.nav__mobile{
  position:fixed; inset:0; top:0; background: var(--bg-soft); z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform: translateY(-100%); transition: transform .5s var(--ease-out);
  font-size:1.4rem; font-family: var(--font-display);
}
.nav__mobile.is-open{ transform: translateY(0); }
.nav__mobile{ overflow-y: auto; padding: 2rem 1.5rem; }

/* 8 nav links no longer fit in one row below ~1240px — hand off to the burger
   menu earlier than the general tablet breakpoint to avoid overlapping the CTA. */
@media (max-width: 1240px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .btn--nav{ display:none; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  padding: .95rem 1.7rem; border-radius: 100px;
  font-family: var(--font-display); font-weight:500; font-size:.98rem;
  border:none; overflow:hidden; isolation:isolate;
}
.btn--primary{ background: var(--red); color:#fff; }
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, var(--red-light), var(--red));
  opacity:0; transition: opacity .35s;
}
.btn--primary:hover::before{ opacity:1; }
.btn--ghost{ background: rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.btn--ghost:hover{ background: rgba(255,255,255,.12); }
.btn--large{ padding: 1.2rem 2.4rem; font-size: 1.1rem; }
.btn--pill{ background: var(--ice); color: var(--bg); padding:.7rem 1.4rem; font-size:.9rem; }
.btn--nav{ display:inline-flex; }
.btn svg{ transition: transform .3s var(--ease-out); }
.btn:hover svg{ transform: translateX(4px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 8rem 1.5rem 4rem;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(46,47,146,.55), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(141,215,247,.12), transparent 60%),
    linear-gradient(180deg, #07070d 0%, #090a16 60%, #07070d 100%);
}
.hero__snow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__glow{ position:absolute; border-radius:50%; filter: blur(80px); z-index:0; pointer-events:none; }
.hero__glow--1{ width:420px; height:420px; background: rgba(46,47,146,.45); top:-10%; left:-8%; }
.hero__glow--2{ width:360px; height:360px; background: rgba(237,28,35,.18); bottom:-5%; right:-5%; }

.ice-cube{ position:absolute; z-index:1; perspective: 600px; opacity:.85; }
.ice-cube span{
  display:block; width:56px; height:56px; border-radius:12px;
  background: linear-gradient(135deg, rgba(141,215,247,.5), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 40px -10px rgba(46,47,146,.5), inset 0 0 20px rgba(255,255,255,.25);
}
.ice-cube--1{ top:18%; left:8%; }
.ice-cube--2{ top:65%; left:14%; }
.ice-cube--3{ top:22%; right:10%; }
.ice-cube--4{ top:60%; right:16%; }
.ice-cube--2 span, .ice-cube--4 span{ width:38px; height:38px; border-radius:9px; }

.hero__inner{ position:relative; z-index:2; max-width: 780px; display:flex; flex-direction:column; align-items:center; }
.hero__eyebrow{
  font-family: var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  font-size:.8rem; color: var(--ice); margin-bottom:1.4rem;
}
.hero__title{ font-size: clamp(3rem, 9vw, 6.4rem); line-height:.98; letter-spacing:-.02em; }
.hero__title-line{ display:block; overflow:hidden; color:#fff; }
.hero__title-line--accent{ color: var(--ice); }
.hero__subtitle{
  margin-top:1.6rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(247,248,255,.75);
  max-width: 560px; font-weight:400;
}
.hero__subtitle strong{ color:#fff; font-weight:700; }
.hero__cta{ margin-top: 2.4rem; display:flex; gap: 1rem; flex-wrap:wrap; justify-content:center; }

.hero__logo-wrap{ margin-top: 3.5rem; width: min(560px, 90vw); }
.hero__logo{ width:100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

.hero__scroll{
  position:fixed; bottom: 2rem; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.55);
  z-index:50;
}
.hero__scroll-line{ width:1px; height:40px; background: rgba(255,255,255,.2); overflow:hidden; }
.hero__scroll-line i{ display:block; width:100%; height:14px; background: var(--ice); animation: scrollDrip 1.8s ease-in-out infinite; }
@keyframes scrollDrip{ 0%{ transform: translateY(-100%);} 100%{ transform: translateY(140px);} }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  position:relative; z-index:2;
  background: var(--red);
  transform: rotate(-1.2deg) scale(1.02);
  overflow:hidden;
  padding: 1.1rem 0;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.marquee__track{
  display:flex; width:max-content; white-space:nowrap; will-change: transform;
}
.marquee__track span{
  font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 2rem);
  color:#fff; padding: 0 1.2rem; letter-spacing:.04em;
}
.marquee__track i{ font-style:normal; color: rgba(255,255,255,.55); padding: 0 .4rem; }

/* ==========================================================================
   ABOUT / PRODUTO
   ========================================================================== */
.about{ padding: 8rem 0 7rem; background: var(--bg); position:relative; }
.about__inner{
  width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items:center;
}
.about__media-frame{
  position:relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(141,215,247,.35), transparent 55%),
    linear-gradient(160deg, var(--blue) 0%, #14152a 70%);
  border: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:flex-end; justify-content:flex-start; padding: 1.6rem;
  overflow:hidden;
}
.about__media-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:1; border-radius: var(--radius-lg); transition: transform .6s var(--ease-out);
}
.about__media-frame:hover .about__media-img{ transform: scale(1.06); }
.about__media-frame::before{
  content:""; position:absolute; width:220px; height:220px; right:-4rem; top:-3rem;
  border-radius:50%; border: 30px solid rgba(255,255,255,.06); z-index:2; pointer-events:none;
}
.about__media-frame::after{
  content:""; position:absolute; width:140px; height:140px; left:-2.5rem; bottom:-3rem;
  border-radius:50%; background: radial-gradient(circle, rgba(141,215,247,.25), transparent 70%); z-index:2; pointer-events:none;
}
.about__media-frame .float-cube{
  position:absolute; width:64px; height:64px; border-radius:16px;
  background: linear-gradient(135deg, rgba(141,215,247,.55), rgba(255,255,255,.15));
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px); z-index:3;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.4), inset 0 0 20px rgba(255,255,255,.25);
}
.about__media-frame .float-cube--a{ top: 18%; right: 14%; animation: floatSlow 4.5s ease-in-out infinite; }
.about__media-frame .float-cube--b{ width:38px; height:38px; border-radius:10px; bottom: 22%; right: 30%; animation: floatSlow 4.5s ease-in-out infinite 1.1s; }
@keyframes floatSlow{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-16px) rotate(6deg); } }
.about__badge{
  position:relative; z-index:3;
  background: rgba(7,7,13,.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2);
  padding: .7rem 1.2rem; border-radius: 100px;
  font-family: var(--font-display); font-size:.95rem; color: var(--ice);
}
.about__text{ margin-top:1.4rem; color: rgba(247,248,255,.72); font-size:1.05rem; max-width: 46ch; }
.about__eco-badge{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.6rem;
  background: rgba(141,215,247,.08); border:1px solid rgba(141,215,247,.25);
  padding: .8rem 1.3rem; border-radius:100px; max-width: 46ch;
}
.about__eco-icon{ font-size:1.3rem; flex:none; }
.about__eco-badge span:last-child{ font-size:.88rem; color: rgba(247,248,255,.8); line-height:1.4; }
.about__eco-badge strong{ color: var(--ice); }
.about__stats{ display:flex; gap: 2.4rem; margin-top: 2.6rem; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat__num, .stat__suffix{ font-family: var(--font-display); font-size:2.6rem; color:#fff; display:inline-block; }
.stat__suffix{ font-size:1.6rem; color: var(--ice); }
.stat__label{ font-size:.85rem; color: rgba(247,248,255,.55); margin-top:.3rem; }

/* ==========================================================================
   SABORES
   ========================================================================== */
.flavors{ padding: 6rem 0 8rem; background: var(--bg-soft); position:relative; }
.flavors__head{ text-align:center; width: var(--container); margin-inline:auto; margin-bottom: 3rem; }
.flavors__head .section-eyebrow{ justify-content:center; }
.flavors__showcase{
  width: min(1100px, 92vw); margin: 0 auto 4.5rem;
}
.flavors__showcase img{ width:100%; }

.flavor-grid{
  width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem;
}
.flavor-card{
  position:relative;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-soft));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 2rem 1.4rem;
  text-align:center;
  transform-style: preserve-3d;
  transition: border-color .4s;
  will-change: transform;
}
.flavor-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; z-index:-1;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--flavor-color) 35%, transparent), transparent 70%);
  opacity:0; transition: opacity .4s;
}
.flavor-card:hover{ border-color: color-mix(in srgb, var(--flavor-color) 60%, transparent); }
.flavor-card:hover::before{ opacity:1; }
.flavor-card__media{
  width:100%; height: 160px; margin-bottom: 1.2rem;
  display:flex; align-items:center; justify-content:center;
  position:relative; border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--flavor-color) 20%, transparent), transparent 75%);
}
.flavor-card__img{
  max-width: 100%; max-height: 150px; object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.55));
  transition: transform .5s var(--ease-out);
}
.flavor-card:hover .flavor-card__img{ transform: translateY(-8px) scale(1.08); }
.flavor-card h3{ font-size:1.25rem; color:#fff; margin-bottom:.5rem; }
.flavor-card p{ font-size:.88rem; color: rgba(247,248,255,.6); min-height:2.6em; }
.flavor-card__tag{
  display:inline-block; margin-top:1.1rem; font-size:.72rem; letter-spacing:.06em;
  color: var(--flavor-color); border:1px solid color-mix(in srgb, var(--flavor-color) 45%, transparent);
  padding:.35rem .8rem; border-radius:100px;
}

/* ==========================================================================
   CUBOS DE GELO
   ========================================================================== */
.cubes{ padding: 7rem 0; background: var(--bg); }
.cubes__inner{ width: var(--container); margin-inline:auto; }
.cubes__head{ max-width: 640px; }
.cubes__text{ margin-top:1.2rem; color: rgba(247,248,255,.68); font-size:1.05rem; }

.cube-grid{
  margin-top: 3rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.cube-card{
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-soft));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.6rem;
  text-align:center;
  opacity:0; transform: translateY(50px);
  will-change: transform;
}
.cube-card__media{
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 50%, rgba(141,215,247,.12), transparent 70%);
  overflow: hidden;
  padding: .5rem;
}
.cube-card__img{
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.6));
  transition: transform .4s var(--ease-out);
}
.cube-card:hover .cube-card__img{
  transform: scale(1.08) translateY(-4px);
}
.cube-card h3{ font-size:1.6rem; color: var(--ice); margin-bottom:.5rem; }
.cube-card p{ font-size:.88rem; color: rgba(247,248,255,.6); }

.cubes__footer{
  margin-top: 3rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 1.6rem;
}
.cubes__audience{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cubes__audience span{
  font-size:.82rem; letter-spacing:.03em; color: var(--ice);
  border:1px solid rgba(141,215,247,.35); background: rgba(141,215,247,.08);
  padding:.5rem 1.1rem; border-radius:100px;
}

/* ==========================================================================
   USES
   ========================================================================== */
.uses{ padding: 7rem 0; background: var(--bg); }
.uses__inner{ width: var(--container); margin-inline:auto; }
.uses__grid{
  margin-top: 3rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1.4rem;
}
.use-card{
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.6rem;
  transition: transform .4s var(--ease-out), background .4s;
}
.use-card:hover{ transform: translateY(-8px); background: var(--blue); }
.use-card__num{ font-family: var(--font-display); font-size:.85rem; color: var(--red); margin-bottom:1.2rem; }
.use-card h3{ font-size:1.15rem; color:#fff; margin-bottom:.6rem; }
.use-card p{ font-size:.9rem; color: rgba(247,248,255,.6); }

/* ==========================================================================
   EQUIP BAND / COMODATO & MANUTENÇÃO
   ========================================================================== */
.equip-band{
  position:relative; padding: 7rem 0 6rem; text-align:center; overflow:hidden;
  background: linear-gradient(160deg, #0d3a52 0%, #0d2035 55%, var(--bg) 100%);
}
.equip-band__frost{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(46,47,146,.3), transparent 65%);
  pointer-events:none;
}
.equip-band__inner{ position:relative; width: var(--container); margin-inline:auto; }
.equip-band__title{ font-size: clamp(2rem, 4.6vw, 3.4rem); color:#fff; margin-top:.5rem; }
.equip-band__text{
  max-width: 56ch; margin: 1.5rem auto 2rem; color: rgba(255,255,255,.75); font-size:1.05rem;
}
.equip-band__features{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.9rem;
  margin-bottom: 2.4rem;
}
.equip-band__features span{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  padding:.6rem 1.2rem; border-radius:100px; font-size:.88rem; color: rgba(247,248,255,.85);
}

/* ==========================================================================
   CTA BAND / REVENDA
   ========================================================================== */
.cta-band{
  position:relative; padding: 7rem 0; text-align:left; overflow:hidden;
  background: linear-gradient(160deg, var(--bg-elevated) 0%, #121438 60%, var(--bg-soft) 100%);
  border-top: 1px solid rgba(141,215,247,.15);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cta-band__frost{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(141,215,247,.2), transparent 65%);
  pointer-events:none;
}
.cta-band__inner{
  position:relative; width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items:center;
}
.cta-band__content{ text-align:left; }
.cta-band__title{ font-size: clamp(2rem, 4vw, 3.2rem); color:#fff; margin-top:.5rem; line-height: 1.15; }
.cta-band__text{
  max-width: 48ch; margin: 1.2rem 0 2rem; color: rgba(255,255,255,.78); font-size:1.05rem;
}
.cta-band__features{
  display:flex; flex-direction:column; gap:.75rem; margin-bottom: 2.2rem;
}
.cta-band__features span{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding:.55rem 1.1rem; border-radius:100px; font-size:.88rem; color: rgba(247,248,255,.9);
  width: fit-content;
}
.cta-band__media{ display:flex; justify-content:center; }
.revenda__banner-frame{
  position:relative; width: min(340px, 100%); aspect-ratio: 9/16;
  border-radius: var(--radius-md); border: 1px solid rgba(141,215,247,.25);
  box-shadow: 0 20px 50px rgba(0,0,0,.6); overflow:hidden;
  background: rgba(13,14,26,.8);
  transition: transform .5s var(--ease-out);
}
.revenda__banner-frame:hover{
  transform: translateY(-8px) scale(1.02);
  border-color: var(--ice);
}
.revenda__banner-img{ width:100%; height:100%; object-fit:cover; }
.revenda__badge{
  position:absolute; top: 1rem; right: 1rem;
  background: rgba(7,7,13,.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); color: var(--ice);
  font-family: var(--font-display); font-size:.78rem; letter-spacing:.08em;
  text-transform: uppercase; padding: .35rem .8rem; border-radius: 100px;
}

@media (max-width: 980px){
  .cta-band__inner{ grid-template-columns: 1fr; gap: 3rem; text-align:center; }
  .cta-band__content{ text-align:center; }
  .cta-band__features{ align-items:center; }
  .cta-band__text{ margin-inline:auto; }
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */
.testimonials{ padding: 7rem 0; background: var(--bg-soft); }
.testimonials__inner{ width: var(--container); margin-inline:auto; text-align:center; }
.testimonials .section-eyebrow{ justify-content:center; }
.testimonial-grid{
  margin-top: 3rem; display:grid; grid-template-columns: repeat(3, 1fr); gap:1.4rem;
  text-align:left;
}
.testimonial-card{
  background: var(--bg-elevated); border:1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md); padding: 1.8rem;
  transition: transform .4s var(--ease-out), border-color .4s;
}
.testimonial-card:hover{ transform: translateY(-6px); border-color: rgba(141,215,247,.3); }
.testimonial-card__stars{ color: var(--flavor-maracuja); letter-spacing:.15em; margin-bottom:.9rem; font-size:.95rem; }
.testimonial-card p{ font-size:.88rem; line-height:1.55; color: rgba(247,248,255,.78); margin-bottom:1.1rem; }
.testimonial-card__author{ font-family: var(--font-display); font-size:.82rem; color: var(--ice); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--bg); padding: 4.5rem 0 2rem; }
.footer__inner{
  width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand-logo{ height: 46px; width:auto; }
.footer__brand p{ font-family: var(--font-body); font-size:.85rem; color: rgba(247,248,255,.5); margin-top:.8rem; max-width:26ch; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ice); margin-bottom:.3rem; }
.footer__col a, .footer__col span{ font-size:.92rem; color: rgba(247,248,255,.7); }
.footer__col a:hover{ color:#fff; }
.footer__hours{ color: var(--ice) !important; font-weight:600; }
.footer__bottom{
  width: var(--container); margin-inline:auto; padding-top: 1.6rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.8rem; color: rgba(247,248,255,.45);
}
.footer__top{ background:none; border:1px solid rgba(255,255,255,.15); color:#fff; padding:.5rem 1rem; border-radius:100px; font-size:.8rem; }
.footer__top:hover{ background: rgba(255,255,255,.08); }

/* ==========================================================================
   REVEAL UTILITIES (GSAP hooks — base hidden state)
   ========================================================================== */
[data-reveal], .hero-reveal{ opacity:0; transform: translateY(36px); }
[data-reveal-media]{ opacity:0; transform: scale(.92); }
.use-card{ opacity:0; transform: translateY(50px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .about__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .about__media-frame{ aspect-ratio: 16/9; }
  .flavor-grid{ grid-template-columns: repeat(2, 1fr); }
  .cube-grid{ grid-template-columns: repeat(2, 1fr); }
  .uses__grid{ grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__inner{ grid-template-columns: 1fr 1fr; }
  .ice-cube--3, .ice-cube--4{ display:none; }
}
@media (max-width: 560px){
  .flavor-grid{ grid-template-columns: 1fr 1fr; }
  .flavor-card p{ min-height:0; }
  .footer__inner{ grid-template-columns: 1fr; }
  .hero__cta{ flex-direction:column; width:100%; }
  .hero__cta .btn{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   HARMONIZAÇÃO NOS CARDS DE SABOR
   ========================================================================== */
.flavor-card__pairing{
  margin-top: auto; padding: .4rem .6rem;
  background: rgba(255,255,255,.06); border-radius: 8px;
  font-size: .75rem; color: rgba(247,248,255,.85);
  display: flex; align-items: center; gap: .4rem;
  border: 1px solid rgba(255,255,255,.08);
}
.flavor-card__pairing span{ font-size: .9rem; }

/* ==========================================================================
   CALCULADORA DE GELO
   ========================================================================== */
.calculator{ padding: 6rem 0; background: var(--bg-soft); position: relative; }
.calculator__inner{ width: var(--container); margin-inline: auto; }
.calculator__subtitle{ max-width: 60ch; margin: 1rem auto 0; color: rgba(247,248,255,.7); text-align: center; }
.calculator__card{
  margin-top: 3rem; background: var(--bg-elevated);
  border: 1px solid rgba(141,215,247,.15); border-radius: var(--radius-lg);
  padding: 2.5rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}
.calc-group{ display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.6rem; }
.calc-group:last-child{ margin-bottom: 0; }
.calc-label-row{ display: flex; justify-content: space-between; align-items: center; }
.calc-label-row label, .calc-group label{ font-family: var(--font-display); font-size: 1rem; color: var(--white); }
.calc-badge-val{
  background: var(--blue-pale); color: var(--bg);
  padding: .2rem .7rem; border-radius: 100px; font-weight: 700; font-size: .85rem;
}
.calc-slider{
  accent-color: var(--ice); height: 6px; background: rgba(255,255,255,.1);
  border-radius: 10px; cursor: pointer; width: 100%;
}
.calc-presets{ display: flex; gap: .5rem; flex-wrap: wrap; }
.calc-btn{
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: rgba(247,248,255,.8); padding: .55rem .9rem; border-radius: var(--radius-sm);
  font-size: .82rem; font-family: var(--font-body); font-weight: 500; cursor: pointer;
  transition: all .3s ease;
}
.calc-btn:hover, .calc-btn.active{
  background: var(--blue); border-color: var(--ice); color: #fff;
}
.calculator__result{
  background: rgba(7,7,13,.6); border: 1px solid rgba(141,215,247,.2);
  border-radius: var(--radius-md); padding: 1.8rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.calc-result-header{
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 1rem; margin-bottom: 1.2rem;
}
.calc-result-header h3{ font-family: var(--font-display); font-size: 1.1rem; color: var(--ice); }
.calc-result-tag{
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--flavor-maca); background: rgba(95,191,62,.15); padding: .2rem .6rem; border-radius: 100px;
}
.calc-result-grid{ display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.2rem; }
.calc-result-item{
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.04); padding: .9rem 1.2rem; border-radius: var(--radius-sm);
}
.calc-result-icon{ font-size: 1.8rem; }
.calc-result-info{ display: flex; flex-direction: column; }
.calc-result-val{ font-family: var(--font-display); font-size: 1.35rem; color: #fff; }
.calc-result-desc{ font-size: .82rem; color: rgba(247,248,255,.65); }
.calc-result-desc strong{ color: var(--ice); }
.calc-note{ font-size: .78rem; color: rgba(247,248,255,.55); margin-bottom: 1.2rem; line-height: 1.4; }
.btn--full{ width: 100%; justify-content: center; }

/* ==========================================================================
   BOTÃO FLUTUANTE DE WHATSAPP
   ========================================================================== */
.whatsapp-float{
  position: fixed; bottom: 25px; right: 25px; z-index: 99;
  background: #25d366; color: #fff; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 25px rgba(37,211,102,.45);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .4s;
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
  text-decoration: none;
}
.whatsapp-float.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.whatsapp-float:hover{ transform: scale(1.1); }
.whatsapp-float::before{
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.5); animation: waPulse 2s infinite;
}
@keyframes waPulse{
  0%{ transform: scale(1); opacity: .8; }
  100%{ transform: scale(1.4); opacity: 0; }
}
.whatsapp-float__tooltip{
  position: absolute; right: 70px; background: rgba(13,14,26,.95);
  border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: .78rem;
  font-family: var(--font-body); padding: .4rem .8rem; border-radius: 8px;
  white-space: nowrap; opacity: 0; transform: translateX(10px); pointer-events: none;
  transition: all .3s ease;
}
.whatsapp-float:hover .whatsapp-float__tooltip{ opacity: 1; transform: translateX(0); }

@media (max-width: 860px){
  .calculator__card{ grid-template-columns: 1fr; gap: 2rem; padding: 1.8rem; }
}

/* ==========================================================================
   BOTÃO DE RECEITA DE DRINK NOS CARDS DE SABOR
   ========================================================================== */
.flavor-card__actions{
  margin-top: 1rem; width: 100%;
  display: flex; flex-direction: column; gap: .6rem; align-items: center;
}
.btn-recipe{
  background: rgba(141,215,247,.12); border: 1px solid rgba(141,215,247,.3);
  color: #fff; font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  padding: .45rem .9rem; border-radius: 100px; cursor: pointer;
  transition: all .3s ease; width: 100%;
}
.btn-recipe:hover{
  background: var(--blue); border-color: var(--ice); transform: translateY(-2px);
}

/* ==========================================================================
   ÁREA DE ATENDIMENTO / SEO LOCAL
   ========================================================================== */
.delivery{ padding: 7rem 0; background: var(--bg); position: relative; }
.delivery__inner{ width: var(--container); margin-inline: auto; }
.delivery__subtitle{ max-width: 60ch; margin: 1rem auto 0; color: rgba(247,248,255,.7); text-align: center; }
.delivery__grid{ margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.delivery-card{
  background: var(--bg-elevated); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md); padding: 2rem; position: relative;
  display: flex; flex-direction: column; gap: .8rem;
  transition: transform .4s var(--ease-out), border-color .4s;
}
.delivery-card:hover{ transform: translateY(-6px); border-color: rgba(141,215,247,.3); }
.delivery-card__icon{ font-size: 2.2rem; }
.delivery-card h3{ font-family: var(--font-display); font-size: 1.3rem; color: #fff; }
.delivery-card__badge{
  display: inline-block; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ice); background: rgba(141,215,247,.12);
  padding: .25rem .7rem; border-radius: 100px; width: fit-content;
}
.delivery-card p{ font-size: .9rem; color: rgba(247,248,255,.7); line-height: 1.5; }
.delivery-chips{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.delivery-chips span{
  font-size: .75rem; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); color: rgba(247,248,255,.8);
  padding: .25rem .6rem; border-radius: 6px;
}
.delivery__trust{
  margin-top: 3.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  background: rgba(13,14,26,.7); border: 1px solid rgba(141,215,247,.15);
  border-radius: var(--radius-md); padding: 1.8rem 2.2rem;
}
.trust-item{ display: flex; align-items: center; gap: 1rem; }
.trust-icon{ font-size: 1.8rem; }
.trust-item h4{ font-family: var(--font-display); font-size: 1rem; color: #fff; margin-bottom: .2rem; }
.trust-item p{ font-size: .82rem; color: rgba(247,248,255,.65); }

/* ==========================================================================
   FORMULÁRIO B2B / PARCERIA
   ========================================================================== */
.partner-form{
  padding: 7rem 0;
  background: linear-gradient(160deg, #090a18 0%, var(--bg-elevated) 100%);
  position: relative;
}
.partner-form__inner{ width: var(--container); margin-inline: auto; }
.partner-form__subtitle{ max-width: 54ch; margin: 1rem auto 0; color: rgba(247,248,255,.7); text-align: center; }
.b2b-form{
  margin: 3.5rem auto 0; max-width: 820px;
  background: rgba(7,7,13,.75); border: 1px solid rgba(141,215,247,.2);
  border-radius: var(--radius-lg); padding: 2.8rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.b2b-form__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.form-group{ display: flex; flex-direction: column; gap: .5rem; }
.form-group--full{ grid-column: 1 / -1; }
.form-group label{ font-family: var(--font-display); font-size: .9rem; color: rgba(247,248,255,.9); }
.form-group input, .form-group select{
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); padding: .8rem 1rem; color: #fff;
  font-family: var(--font-body); font-size: .95rem; transition: border-color .3s, background .3s;
}
.form-group input:focus, .form-group select:focus{
  outline: none; border-color: var(--ice); background: rgba(255,255,255,.08);
}
.form-group select option{ background: #0d0e1a; color: #fff; }

/* ==========================================================================
   PERGUNTAS FREQUENTES (FAQ)
   ========================================================================== */
.faq{ padding: 7rem 0; background: var(--bg-soft); position: relative; }
.faq__inner{ width: var(--container); margin-inline: auto; }
.faq-accordion{ margin: 3.5rem auto 0; max-width: 820px; display: flex; flex-direction: column; gap: 1.2rem; }
.faq-item{
  background: var(--bg-elevated); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md); overflow: hidden; transition: border-color .3s;
}
.faq-item[open]{ border-color: rgba(141,215,247,.3); }
.faq-question{
  padding: 1.4rem 1.8rem; font-family: var(--font-display); font-size: 1.05rem;
  color: #fff; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; user-select: none; list-style: none;
}
.faq-question::-webkit-details-marker{ display: none; }
.faq-icon{ font-size: 1.4rem; color: var(--ice); transition: transform .3s ease; }
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-answer{
  padding: 0 1.8rem 1.6rem; color: rgba(247,248,255,.75);
  font-size: .95rem; line-height: 1.6; border-top: 1px solid rgba(255,255,255,.05); padding-top: 1rem;
}

/* ==========================================================================
   MODAL DE RECEITAS
   ========================================================================== */
.recipe-modal{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.recipe-modal.is-open{ opacity: 1; visibility: visible; }
.recipe-modal__overlay{
  position: absolute; inset: 0; background: rgba(7,7,13,.85); backdrop-filter: blur(12px);
}
.recipe-modal__card{
  position: relative; z-index: 2; width: min(680px, 100%);
  background: var(--bg-elevated); border: 1px solid rgba(141,215,247,.3);
  border-radius: var(--radius-lg); padding: 2.5rem;
  box-shadow: 0 25px 60px rgba(0,0,0,.7);
  transform: scale(.92) translateY(20px); transition: transform .35s var(--ease-out);
}
.recipe-modal.is-open .recipe-modal__card{ transform: scale(1) translateY(0); }
.recipe-modal__close{
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #fff; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; transition: background .3s;
}
.recipe-modal__close:hover{ background: rgba(255,255,255,.2); }
.recipe-modal__badge{
  display: inline-block; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ice); background: rgba(141,215,247,.12);
  padding: .25rem .8rem; border-radius: 100px; margin-bottom: .6rem;
}
.recipe-modal__title{ font-size: 1.8rem; color: #fff; margin-bottom: .4rem; }
.recipe-modal__desc{ font-size: .95rem; color: rgba(247,248,255,.7); margin-bottom: 1.8rem; }
.recipe-modal__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin-bottom: 2rem; }
.recipe-modal__col h4{ font-size: .95rem; color: var(--ice); margin-bottom: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.recipe-modal__col ul, .recipe-modal__col ol{
  padding-left: 1.2rem; margin: 0; color: rgba(247,248,255,.85); font-size: .88rem;
  display: flex; flex-direction: column; gap: .5rem;
}

/* ==========================================================================
   REFATORAÇÃO COMPLETA DE RESPONSIVIDADE MOBILE
   ========================================================================== */
@media (max-width: 860px){
  .calculator__card{ grid-template-columns: 1fr; gap: 2rem; padding: 1.8rem; }
  .delivery__grid, .delivery__trust{ grid-template-columns: 1fr; gap: 1.2rem; }
  .b2b-form__grid{ grid-template-columns: 1fr; }
  .recipe-modal__grid{ grid-template-columns: 1fr; gap: 1.2rem; }
  .b2b-form, .recipe-modal__card{ padding: 1.8rem; }
}

@media (max-width: 650px){
  .hero{ padding: 7rem 0 3.5rem; }
  .hero__title{ font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .hero__subtitle{ font-size: 0.95rem; margin-top: 1rem; }

  .about, .flavors, .calculator, .uses, .equip-band, .delivery, .partner-form, .faq, .testimonials{
    padding: 4rem 0;
  }

  .flavor-grid{ grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .flavor-card{ padding: 1.4rem 0.8rem; }
  .flavor-card h3{ font-size: 1.2rem; }
  .flavor-card p{ font-size: 0.8rem; line-height: 1.3; }
  .flavor-card__pairing{ font-size: 0.7rem; padding: 0.35rem 0.45rem; flex-wrap: wrap; }
  .btn-recipe{ font-size: 0.75rem; padding: 0.4rem 0.6rem; }

  .cube-grid{ grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .cube-card{ padding: 1.4rem 0.9rem; }
  .cube-card h3{ font-size: 1.3rem; }

  .testimonial-grid{ grid-template-columns: 1fr; gap: 1rem; }

  .cubes__footer{ flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
  .cubes__audience{ justify-content: center; }

  .delivery-card{ padding: 1.4rem; }
  .trust-item{ flex-direction: row; text-align: left; }

  .b2b-form{ padding: 1.5rem 1.2rem; margin-top: 2rem; }
  .form-group input, .form-group select{ padding: 0.7rem 0.8rem; font-size: 0.9rem; }

  .faq-question{ padding: 1.1rem 1.2rem; font-size: 0.95rem; }
  .faq-answer{ padding: 0 1.2rem 1.2rem; font-size: 0.88rem; }

  .recipe-modal{ padding: 1rem; }
  .recipe-modal__card{
    padding: 1.6rem 1.2rem;
    max-height: 85vh;
    overflow-y: auto;
  }
  .recipe-modal__title{ font-size: 1.4rem; }
  .recipe-modal__desc{ font-size: 0.88rem; margin-bottom: 1.2rem; }

  .whatsapp-float{ bottom: 18px; right: 18px; width: 54px; height: 54px; }
  .whatsapp-float svg{ width: 26px; height: 26px; }
}

@media (max-width: 400px){
  .flavor-grid{ grid-template-columns: 1fr; }
  .cube-grid{ grid-template-columns: 1fr; }
}