/* =====================================================================
   PEDIDOZAP — style.css
   Tema SORVETERIA: claro, cremoso, alegre e moderno. Mobile-first.

   >>> TROQUE AS CORES PRINCIPAIS NAS VARIÁVEIS ABAIXO <<<
   ===================================================================== */

:root{
  /* ======================= CORES PRINCIPAIS ======================= */
  --creme:        #FFF8F0;   /* fundo geral creme/baunilha        */
  --rosa:         #FFE3EC;   /* seção rosa-chiclete suave         */
  --menta-suave:  #DFF7EE;   /* seção menta suave                 */
  --lilas:        #EEE6FF;   /* seção lilás suave                 */

  --morango:      #FF5C8A;   /* destaque principal (botões, links)*/
  --morango-dark: #E63F72;
  --morango-soft: rgba(255,92,138,.16);

  --chocolate:    #5A3A2E;   /* textos e títulos                  */
  --chocolate-2:  #7A5A4A;   /* textos secundários                */
  --muted:        #96786A;   /* textos suaves                     */

  --menta:        #3CCFA1;   /* destaque secundário               */
  --baunilha:     #FFE9A8;   /* detalhes quentes                  */
  --whats:        #25D366;   /* SOMENTE botões de pedido          */
  --whats-dark:   #1da851;

  --card:         #FFFFFF;
  --border:       rgba(90,58,46,.12);
  --border-strong:rgba(90,58,46,.22);

  --grad:         linear-gradient(135deg, var(--morango) 0%, #FF9DBB 55%, var(--menta) 130%);
  --grad-soft:    linear-gradient(135deg, rgba(255,92,138,.14), rgba(60,207,161,.14));

  /* ======================= LAYOUT / SOMBRAS ======================= */
  --maxw:         100%;      /* ocupa toda a largura; ajuste se quiser limitar */
  --radius:       24px;
  --radius-sm:    16px;
  --radius-lg:    32px;
  --header-h:     70px;

  --shadow:       0 18px 40px rgba(90,58,46,.14);
  --shadow-soft:  0 10px 24px rgba(90,58,46,.10);
  --shadow-pink:  0 14px 34px rgba(255,92,138,.32);

  --ff-body:      'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-head:      'Fredoka', 'Nunito', system-ui, sans-serif;
}

/* ============================ RESET ============================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--creme);
  color:var(--chocolate);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--ff-head);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--chocolate);
}

h1{ font-size:clamp(2rem, 7vw, 3.5rem); font-weight:700; }
h2{ font-size:clamp(1.6rem, 5vw, 2.5rem); font-weight:600; }
h3{ font-size:clamp(1.15rem, 3.5vw, 1.4rem); font-weight:600; }

p{ margin:0 0 1rem; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
strong{ font-weight:800; }

:focus-visible{
  outline:3px solid var(--morango);
  outline-offset:3px;
  border-radius:10px;
}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(18px, 4vw, 90px);
}
.container--narrow{ max-width:820px; }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Acessibilidade: pular para o conteúdo */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--morango);
  color:#fff;
  padding:10px 16px;
  border-radius:0 0 12px 0;
  z-index:200;
  font-weight:800;
}
.skip-link:focus{ left:0; }

/* ============================ BOTÕES ============================ */
.btn{
  --btn-bg:#fff;
  --btn-fg:var(--chocolate);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:13px 24px;
  border:none;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:800;
  font-size:.98rem;
  font-family:var(--ff-head);
  letter-spacing:.01em;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  text-align:center;
  white-space:nowrap;
  box-shadow:var(--shadow-soft);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .25s ease, filter .2s ease, background .25s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px) scale(.99); }

.btn--primary{
  background:linear-gradient(135deg, var(--morango), #FF86AC);
  color:#fff;
  box-shadow:var(--shadow-pink);
}
.btn--primary::after{            /* brilho que passa (shine) */
  content:"";
  position:absolute;
  top:0; left:-70%;
  width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.btn--primary:hover::after{ left:130%; }
.btn--primary:hover{
  box-shadow:0 20px 42px rgba(255,92,138,.5);
  filter:brightness(1.03);
}
.btn--primary::before{           /* gota que pinga no hover */
  content:"";
  position:absolute;
  left:50%; bottom:-7px;
  width:13px; height:16px;
  background:var(--morango);
  border-radius:50% 50% 45% 45% / 55% 55% 45% 45%;
  transform:translateX(-50%) scale(0);
  transition:transform .25s ease;
}
.btn--primary:hover::before{ transform:translateX(-50%) scale(1); }

.btn--ghost{
  background:#fff;
  border:2px solid var(--border-strong);
  color:var(--chocolate);
}
.btn--ghost:hover{
  border-color:var(--morango);
  color:var(--morango-dark);
  box-shadow:0 12px 26px rgba(255,92,138,.2);
}

/* Botão de pedido no WhatsApp (verde apenas aqui) */
.btn--zap{
  background:var(--whats);
  color:#fff;
  box-shadow:0 12px 30px rgba(37,211,102,.38);
}
.btn--zap:hover{ background:var(--whats-dark); box-shadow:0 18px 40px rgba(37,211,102,.5); }

.btn--sm{ padding:10px 16px; font-size:.88rem; }
.btn--lg{ padding:16px 30px; font-size:1.06rem; }
.btn--block{ width:100%; }

/* ============================ HEADER ============================ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  z-index:100;
  display:flex;
  align-items:center;
  background:rgba(255,248,240,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.94);
  border-bottom-color:var(--border);
  box-shadow:0 10px 30px rgba(90,58,46,.10);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--ff-head);
  font-weight:700;
  font-size:1.15rem;
  letter-spacing:.02em;
}
.logo__mark{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, var(--morango), var(--baunilha));
  font-size:1.2rem;
  box-shadow:0 8px 20px rgba(255,92,138,.3);
}
.logo__text{ white-space:nowrap; }

.nav{
  display:flex;
  align-items:center;
  gap:26px;
}
.nav a{
  font-size:.96rem;
  color:var(--chocolate-2);
  font-weight:700;
  transition:color .2s ease;
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:3px;
  border-radius:3px;
  background:var(--morango);
  transition:width .25s ease;
}
.nav a:hover{ color:var(--morango-dark); }
.nav a:hover::after{ width:100%; }

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  background:#fff;
  border:2px solid var(--border);
  cursor:pointer;
  padding:0;
  position:relative;
}
.hamburger span{
  position:absolute;
  left:11px; right:11px;
  height:3px;
  border-radius:3px;
  background:var(--chocolate);
  transition:transform .3s ease, opacity .25s ease, top .3s ease;
}
.hamburger span:nth-child(1){ top:15px; }
.hamburger span:nth-child(2){ top:21px; }
.hamburger span:nth-child(3){ top:27px; }
.hamburger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ============================ HERO ============================ */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + 48px);
  padding-bottom:10px;
  overflow:hidden;
}
.hero__glow{
  position:absolute;
  width:min(620px, 100vw);
  height:min(620px, 100vw);
  right:-180px; top:-160px;
  background:radial-gradient(circle, rgba(255,92,138,.20), transparent 66%);
  filter:blur(8px);
  pointer-events:none;
}
/* Granulados/confetes discretos no fundo */
.hero__sprinkles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.75;
  background-image:
    radial-gradient(circle, rgba(255,92,138,.45) 2.5px, transparent 3px),
    radial-gradient(circle, rgba(60,207,161,.45) 2.5px, transparent 3px),
    radial-gradient(circle, rgba(255,201,88,.75) 3px, transparent 3.5px),
    radial-gradient(circle, rgba(182,156,255,.45) 2.5px, transparent 3px);
  background-size: 150px 150px, 200px 200px, 250px 250px, 170px 170px;
  background-position: 10px 20px, 60px 90px, 120px 30px, 30px 140px;
}
.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  align-items:center;
}
.hero__copy h1{ margin-bottom:.42em; }
.lead{
  font-size:clamp(1rem, 3.6vw, 1.18rem);
  color:var(--chocolate-2);
  max-width:56ch;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:9px 16px;
  border-radius:999px;
  background:#fff;
  border:2px solid var(--rosa);
  font-size:.85rem;
  font-weight:800;
  color:var(--chocolate);
  margin-bottom:20px;
  box-shadow:var(--shadow-soft);
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:26px 0 22px;
}
.hero__checks{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  color:var(--chocolate-2);
  font-size:.92rem;
  font-weight:700;
}

/* ---- Mockup de celular + ilustração ---- */
.hero__mock{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:440px;
}
.hero__icecream{
  position:absolute;
  width:180px;
  left:0; bottom:12px;
  z-index:0;
  filter:drop-shadow(0 22px 26px rgba(90,58,46,.18));
  animation:floatSlow 7s ease-in-out infinite;
}
.floatie{
  position:absolute;
  width:30px; height:30px;
  border-radius:50%;
  z-index:1;
  box-shadow:0 8px 16px rgba(90,58,46,.2), inset 0 -5px 8px rgba(0,0,0,.12);
  animation:floatSlow 6s ease-in-out infinite;
}
.floatie--1{ background:#FF5C8A; top:6%; right:8%; }
.floatie--2{ background:#3CCFA1; top:38%; right:0; width:22px; height:22px; animation-delay:.8s; }
.floatie--3{ background:#FFE9A8; bottom:12%; right:16%; width:26px; height:26px; animation-delay:1.4s; }

@keyframes floatSlow{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(2deg); }
}

.phone{
  position:relative;
  z-index:2;
  width:100%;
  max-width:320px;
}
.phone--float{ animation:float 6s ease-in-out infinite; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-16px); }
}
.phone__frame{
  position:relative;
  background:linear-gradient(160deg, #FFFFFF, #FDE9F0);
  border:3px solid #fff;
  border-radius:44px;
  padding:12px;
  box-shadow:var(--shadow), 0 0 0 1px rgba(90,58,46,.06);
}
.phone__notch{
  position:absolute;
  top:18px; left:50%;
  transform:translateX(-50%);
  width:110px; height:22px;
  background:#FDE9F0;
  border-radius:0 0 16px 16px;
  z-index:3;
}
.phone__screen{
  position:relative;
  background:linear-gradient(180deg, #FFFDFA, #FFF6F9);
  border-radius:34px;
  padding:30px 14px 14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:520px;
}
.phone__screen::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:150px;
  background:linear-gradient(180deg, var(--phone-accent-soft, rgba(255,92,138,.16)), transparent);
  pointer-events:none;
}

/* Mini cardápio do hero */
.mini-shop{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.mini-shop__logo{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--grad-soft);
  border:1px solid var(--border);
  font-size:1.3rem;
}
.mini-shop__info{ display:flex; flex-direction:column; line-height:1.25; }
.mini-shop__info strong{ font-size:.95rem; }
.mini-shop__info span{ font-size:.72rem; color:var(--muted); }
.mini-chips{ display:flex; gap:8px; position:relative; z-index:1; }
.mini-chips span{
  font-size:.72rem;
  padding:6px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--chocolate-2);
  white-space:nowrap;
  font-weight:700;
}
.mini-chips .is-active{
  background:var(--morango);
  color:#fff;
  border-color:transparent;
}
.mini-product{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  position:relative;
  z-index:1;
  box-shadow:0 4px 14px rgba(90,58,46,.06);
}
.mini-product__emoji{ font-size:1.5rem; }
.mini-product__body{ display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.3; }
.mini-product__body strong{ font-size:.82rem; }
.mini-product__body small{ font-size:.68rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-product__body b{ font-size:.82rem; color:var(--morango-dark); margin-top:2px; }
.mini-plus{
  width:28px; height:28px;
  flex:0 0 28px;
  display:grid; place-items:center;
  border-radius:10px;
  background:var(--morango);
  color:#fff;
  font-weight:800;
  font-size:1rem;
}
.mini-cart{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg, var(--morango), #FF86AC);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  padding:12px 16px;
  border-radius:16px;
  position:relative;
  z-index:1;
  box-shadow:0 12px 26px rgba(255,92,138,.32);
}

/* ============================ DIVISOR DERRETIDO ============================ */
.melt-divider{
  position:relative;
  z-index:1;
  line-height:0;
  margin-top:-1px;
  margin-bottom:-2px;
  pointer-events:none;
}
.melt-divider svg{
  width:100%;
  height:90px;
  display:block;
}

/* ============================ STATS ============================ */
.stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-top:48px;
  padding:24px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:2px solid var(--rosa);
  box-shadow:var(--shadow-soft);
}
.stats li{ text-align:center; padding:8px 4px; }
.stats strong{
  display:block;
  font-family:var(--ff-head);
  font-size:clamp(1.3rem, 5vw, 1.9rem);
  color:var(--morango-dark);
}
.stats span{ font-size:.8rem; color:var(--chocolate-2); font-weight:700; }

/* ============================ NICHOS / VITRINE ============================ */
.bg-rosa{ background:linear-gradient(180deg, var(--rosa), #FFEFF4); }
.bg-menta{ background:linear-gradient(180deg, var(--menta-suave), #EDFBF6); }
.bg-lilas{ background:linear-gradient(180deg, var(--lilas), #F5F0FF); }

.niches{ padding:56px 0 44px; }
.niches__title{
  text-align:center;
  color:var(--chocolate-2);
  font-family:var(--ff-head);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:24px;
}
.niches__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
/* Cuba de sorvete colorida */
.tub{
  position:relative;
  padding:32px 10px 16px;
  border-radius:16px 16px 24px 24px;
  background:#fff;
  border:2px solid rgba(90,58,46,.10);
  text-align:center;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(90,58,46,.08);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .25s ease;
}
.tub::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:28px;
  background:var(--flavor, var(--morango));
  border-radius:0 0 45% 45% / 0 0 100% 100%;
}
.tub__emoji{ position:relative; display:block; font-size:1.55rem; margin-bottom:2px; }
.tub__name{ position:relative; font-weight:800; font-size:.82rem; color:var(--chocolate); }
.tub:hover{
  transform:translateY(-5px) rotate(-1.5deg);
  box-shadow:0 18px 30px rgba(90,58,46,.16);
}

/* ============================ SEÇÕES ============================ */
.section{ padding:76px 0; }
.section__head{
  text-align:center;
  max-width:720px;
  margin:0 auto 44px;
}
.eyebrow{
  display:inline-block;
  font-family:var(--ff-head);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--morango-dark);
  background:#fff;
  padding:6px 14px;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
  margin-bottom:14px;
}
.section__sub{ color:var(--chocolate-2); }

/* ============================ DEMO ============================ */
.demo-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 14px;
  margin-bottom:30px;
  scrollbar-width:none;
}
.demo-tabs::-webkit-scrollbar{ display:none; }
.demo-tab{
  --tab:var(--morango);
  flex:0 0 auto;
  padding:11px 18px;
  border-radius:999px;
  background:#fff;
  border:2px solid var(--border);
  color:var(--chocolate-2);
  font-weight:800;
  font-size:.9rem;
  cursor:pointer;
  transition:transform .2s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.demo-tab[data-niche="sorveteria"]{ --tab:#FF5C8A; }
.demo-tab[data-niche="acai"]{ --tab:#8B5CF6; }
.demo-tab[data-niche="hamburgueria"]{ --tab:#F97316; }
.demo-tab[data-niche="pizzaria"]{ --tab:#EF4444; }
.demo-tab:hover{ transform:translateY(-2px); border-color:var(--tab); }
.demo-tab.is-active{
  background:var(--tab);
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 26px color-mix(in srgb, var(--tab) 40%, transparent);
}
.demo__layout{
  display:grid;
  grid-template-columns:1fr;
  gap:38px;
  align-items:start;
}
.demo__phone{ display:flex; justify-content:center; }
.demo__hint{
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
  margin-top:14px;
}
#demoPhone{ max-width:340px; }

/* App dentro do celular */
.phone__screen--app{
  min-height:580px;
  padding:26px 12px 84px;
  gap:10px;
  overflow-y:auto;
  scrollbar-width:none;
  --phone-accent-soft:rgba(255,92,138,.18);
}
.phone__screen--app::-webkit-scrollbar{ display:none; }
.shop{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.shop__logo{
  width:42px; height:42px;
  flex:0 0 42px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--phone-accent-soft);
  border:1px solid var(--border);
  font-size:1.35rem;
}
.shop__info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1; }
.shop__info strong{ font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shop__info span{ font-size:.72rem; color:var(--muted); }
.shop__info span::before{
  content:"";
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--menta);
  margin-right:5px;
  vertical-align:middle;
  box-shadow:0 0 8px var(--menta);
}
/* Ícone de carrinho no topo do app */
.shop__cart{
  position:relative;
  flex:0 0 40px;
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--phone-accent, var(--morango));
  color:#fff;
  font-size:1.15rem;
  border:none;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(255,92,138,.28);
  transition:transform .18s ease;
}
.shop__cart:hover{ transform:scale(1.06); }
.shop__cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:20px; height:20px;
  padding:0 4px;
  display:grid; place-items:center;
  border-radius:999px;
  background:#fff;
  color:var(--morango-dark);
  border:2px solid var(--phone-accent, var(--morango));
  font-size:.68rem;
  font-weight:800;
}

.cats{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 2px 6px;
  position:relative;
  z-index:1;
  scrollbar-width:none;
}
.cats::-webkit-scrollbar{ display:none; }
.cat{
  flex:0 0 auto;
  padding:7px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--border);
  color:var(--chocolate-2);
  font-size:.76rem;
  font-weight:800;
  cursor:pointer;
  transition:all .2s ease;
}
.cat.is-active{
  background:var(--phone-accent, var(--morango));
  color:#fff;
  border-color:transparent;
  font-weight:800;
}

.menu{
  display:flex;
  flex-direction:column;
  gap:9px;
  position:relative;
  z-index:1;
}
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  cursor:pointer;
  text-align:left;
  width:100%;
  box-shadow:0 3px 10px rgba(90,58,46,.05);
  transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease;
  animation:itemIn .3s ease both;
}
@keyframes itemIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.menu-item:hover{
  transform:translateY(-2px) rotate(-.6deg);
  border-color:var(--phone-accent, var(--morango));
  box-shadow:0 10px 20px rgba(90,58,46,.12);
}
.menu-item__emoji{
  width:46px; height:46px;
  flex:0 0 46px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--phone-accent-soft, var(--rosa));
  border:2px solid #fff;
  font-size:1.5rem;
}
.menu-item__body{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.menu-item__body strong{ font-size:.84rem; }
.menu-item__body small{
  font-size:.7rem;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.menu-item__price{ font-size:.84rem; font-weight:800; color:var(--morango-dark); margin-top:2px; }
.menu-item__add{
  width:32px; height:32px;
  flex:0 0 32px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--phone-accent, var(--morango));
  color:#fff;
  font-weight:800;
  font-size:1.15rem;
  border:none;
  cursor:pointer;
  transition:transform .15s ease;
}
.menu-item:hover .menu-item__add{ transform:scale(1.1) rotate(6deg); }

/* Controle de quantidade direto na lista (produtos sem adicionais) */
.qty-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.qty-inline__btn{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:9px;
  background:var(--phone-accent, var(--morango));
  color:#fff;
  font-weight:800;
  font-size:1.05rem;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
}
.qty-inline__btn:hover{ transform:scale(1.1); filter:brightness(1.05); }
.qty-inline__count{
  min-width:18px;
  text-align:center;
  font-weight:800;
  font-size:.85rem;
  color:var(--chocolate);
}

/* Barra do carrinho dentro do app */
.cartbar{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg, var(--phone-accent, var(--morango)), #FF86AC);
  color:#fff;
  font-weight:800;
  font-size:.88rem;
  cursor:pointer;
  z-index:4;
  box-shadow:0 14px 30px rgba(255,92,138,.36);
  animation:cartUp .28s ease both;
}
@keyframes cartUp{ from{ transform:translateY(60px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.cartbar__count{
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  font-size:.8rem;
  font-weight:800;
}
.cartbar__label{ flex:1; text-align:left; display:flex; flex-direction:column; line-height:1.15; }
.cartbar__label em{ font-style:normal; font-size:.68rem; opacity:.9; font-weight:700; }
.cartbar__total{ font-size:.95rem; }

/* Lado da demo */
.demo__side{
  background:#fff;
  border:2px solid var(--menta-suave);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow-soft);
}
.demo__side h3{ margin-bottom:16px; }
.check-list{ display:flex; flex-direction:column; gap:12px; }
.check-list li{
  position:relative;
  padding-left:30px;
  color:var(--chocolate-2);
  font-size:.93rem;
  font-weight:600;
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  width:20px; height:20px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--menta);
  color:#fff;
  font-size:.7rem;
  font-weight:800;
}
.check-list li b{ color:var(--chocolate); }
.check-list--two{ display:grid; grid-template-columns:1fr; }
.demo__note{
  margin-top:20px;
  padding-top:16px;
  border-top:1px dashed var(--border-strong);
  font-size:.82rem;
  color:var(--muted);
}

/* ============================ COMO FUNCIONA ============================ */
.steps{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.step{
  position:relative;
  background:#fff;
  border:2px solid var(--border);
  border-radius:var(--radius);
  padding:32px 24px 24px;
  box-shadow:var(--shadow-soft);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), border-color .25s ease;
}
.step:hover{ transform:translateY(-6px) rotate(-1deg); border-color:var(--morango); }
.step__num{
  position:absolute;
  top:-22px; left:24px;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--morango), var(--baunilha));
  color:#fff;
  font-family:var(--ff-head);
  font-weight:700;
  font-size:1.25rem;
  box-shadow:0 10px 22px rgba(255,92,138,.35);
}
.step h3{ margin-top:12px; }
.step p{ color:var(--chocolate-2); font-size:.94rem; margin:0; }

/* ============================ RECURSOS / CARDS ============================ */
.features__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.card{
  background:#fff;
  border:2px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), border-color .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform:translateY(-6px) rotate(-1deg);
  border-color:var(--morango);
  box-shadow:0 22px 40px rgba(90,58,46,.16);
}
.feature{ padding:26px 22px; }
/* Bolinha de sorvete colorida no lugar do ícone genérico */
.scoop{
  width:58px; height:58px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.7), transparent 46%),
    var(--flavor, var(--morango));
  border:3px solid #fff;
  box-shadow:0 10px 20px rgba(90,58,46,.18), inset 0 -6px 10px rgba(0,0,0,.10);
  font-size:1.6rem;
  margin-bottom:16px;
}
.feature h3{ font-size:1.1rem; }
.feature p{ color:var(--chocolate-2); font-size:.92rem; margin:0; }
.card--rosa{ border-color:#FFC9D9; }
.card--menta{ border-color:#BEEEDD; }
.card--lilas{ border-color:#DACBFF; }
.card--baunilha{ border-color:#FFE1A6; }

/* ============================ COMPARATIVO ============================ */
.compare__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.compare__card{
  border-radius:var(--radius-lg);
  padding:32px 26px;
  border:2px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.compare__card--bad{ border-color:#FFC9C9; }
.compare__card--good{
  border-color:var(--menta);
  background:linear-gradient(180deg, rgba(60,207,161,.10), #fff);
  box-shadow:0 22px 50px rgba(60,207,161,.22);
}
.compare__tag{
  display:inline-block;
  font-family:var(--ff-head);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  background:var(--creme);
  color:var(--chocolate-2);
  margin-bottom:18px;
}
.compare__card--good .compare__tag{
  background:var(--menta);
  color:#fff;
}
.compare__price{ display:flex; flex-direction:column; margin-bottom:20px; }
.compare__price strong{
  font-family:var(--ff-head);
  font-size:clamp(1.7rem, 6vw, 2.3rem);
  line-height:1.1;
}
.compare__card--bad .compare__price strong{ color:#E2546A; }
.compare__card--good .compare__price strong{ color:var(--menta); }
.compare__price span{ color:var(--chocolate-2); font-size:.9rem; }
.compare__list{ display:flex; flex-direction:column; gap:13px; margin-bottom:8px; }
.compare__list li{
  position:relative;
  padding-left:30px;
  font-size:.93rem;
  color:var(--chocolate-2);
  font-weight:600;
}
.compare__list li::before{
  position:absolute;
  left:0; top:0;
  width:20px; height:20px;
  display:grid; place-items:center;
  border-radius:50%;
  font-size:.72rem;
  font-weight:800;
}
.compare__list li.no::before{ content:"✕"; background:#FFE0E4; color:#E2546A; }
.compare__list li.yes::before{ content:"✓"; background:#CFF3E6; color:#1FA97F; }
.compare__card--good .btn{ margin-top:18px; }

/* ============================ PREÇO ============================ */
.pricing{ padding-bottom:44px; }
.price-card{
  position:relative;
  max-width:560px;
  margin:0 auto;
  text-align:center;
  padding:46px 26px 36px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:3px solid #FFC9D9;
  box-shadow:0 30px 60px rgba(255,92,138,.18);
}
.price-card__glow{
  position:absolute;
  inset:-3px;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(320px 150px at 50% 0%, rgba(255,92,138,.25), transparent 70%);
}
.price-card__badge{
  position:relative;
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--morango), var(--baunilha));
  color:#fff;
  font-weight:800;
  font-size:.82rem;
  margin-bottom:18px;
}
.price-card h3{ position:relative; margin-bottom:8px; }
.price-card__value{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
  margin:6px 0 8px;
}
.price-card__currency{ font-size:1.3rem; font-weight:800; margin-bottom:14px; }
.price-card__value strong{
  font-family:var(--ff-head);
  font-size:clamp(3rem, 12vw, 4rem);
  font-weight:700;
  line-height:1;
  color:var(--morango);
}
.price-card__period{ color:var(--chocolate-2); margin-bottom:10px; font-size:1rem; }
.price-card__note{ color:var(--chocolate-2); font-size:.9rem; }
.check-list--two{ position:relative; margin:26px 0; gap:11px; }
.price-card__small{ color:var(--muted); font-size:.8rem; margin:14px 0 0; }

/* ============================ DEPOIMENTOS ============================ */
.testimonials__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.testimonial{ padding:26px 24px; margin:0; }
.testimonial blockquote{
  margin:0 0 20px;
  font-size:.96rem;
  color:var(--chocolate);
  line-height:1.65;
}
.testimonial figcaption{
  display:flex;
  align-items:center;
  gap:12px;
}
/* Avatar em forma de bolinha de sorvete */
.testimonial__avatar{
  width:48px; height:48px;
  flex:0 0 48px;
  display:grid; place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.7), transparent 46%),
    var(--flavor, var(--morango));
  border:3px solid #fff;
  box-shadow:0 8px 16px rgba(90,58,46,.18);
  font-size:1.3rem;
}
.testimonial figcaption span:last-child{ display:flex; flex-direction:column; line-height:1.3; }
.testimonial figcaption strong{ font-size:.92rem; }
.testimonial figcaption small{ color:var(--muted); font-size:.8rem; }

/* ============================ FAQ ============================ */
.faq__list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:#fff;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
  box-shadow:0 4px 14px rgba(90,58,46,.05);
}
.faq-item.is-open{ border-color:var(--morango); box-shadow:0 12px 26px rgba(255,92,138,.16); }
.faq-item__q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  background:none;
  border:none;
  color:var(--chocolate);
  font-family:var(--ff-head);
  font-weight:600;
  font-size:1rem;
  text-align:left;
  cursor:pointer;
}
.faq-item__icon{
  flex:0 0 28px;
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--rosa);
  color:var(--morango-dark);
  font-style:normal;
  font-weight:700;
  transition:transform .3s ease, background .3s ease;
}
.faq-item.is-open .faq-item__icon{ transform:rotate(45deg); background:var(--morango); color:#fff; }
.faq-item__a{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}
.faq-item__a p{
  padding:0 20px 18px;
  margin:0;
  color:var(--chocolate-2);
  font-size:.93rem;
}

/* ============================ CTA FINAL ============================ */
.cta-final__box{
  position:relative;
  text-align:center;
  padding:56px 24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, #fff, #FFF1F6);
  border:3px solid #FFC9D9;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(255,92,138,.18);
}
.cta-final__glow{
  position:absolute;
  inset:0;
  background:radial-gradient(400px 200px at 50% 0%, rgba(255,92,138,.22), transparent 70%);
  pointer-events:none;
}
.cta-final__box h2{ position:relative; }
.cta-final__box p{ position:relative; color:var(--chocolate-2); }
.cta-final__actions{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:26px;
}

/* ============================ RODAPÉ ============================ */
.site-footer{
  border-top:2px solid var(--border);
  background:#fff;
  padding-top:52px;
  margin-bottom:78px; /* espaço para a barra fixa mobile */
}
.footer__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
.footer__brand p{ color:var(--chocolate-2); font-size:.92rem; margin-top:14px; max-width:34ch; }
.footer__col{ display:flex; flex-direction:column; gap:11px; }
.footer__col h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.footer__col a{ color:var(--chocolate-2); font-size:.92rem; font-weight:700; transition:color .2s ease; }
.footer__col a:hover{ color:var(--morango-dark); }
.footer__bottom{
  margin-top:40px;
  padding:20px 18px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
}
.footer__bottom p{ margin:0; font-size:.82rem; color:var(--muted); }

/* ============================ FLUTUANTES ============================ */
.whats-float{
  position:fixed;
  right:16px;
  bottom:88px;
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--whats);
  color:#fff;
  z-index:90;
  box-shadow:0 14px 30px rgba(37,211,102,.42);
  transition:transform .2s ease;
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
.whats-float:hover{ transform:scale(1.08) rotate(6deg); }

.mobile-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:95;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:2px solid var(--border);
  box-shadow:0 -8px 24px rgba(90,58,46,.10);
}
.mobile-bar__info{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.mobile-bar__info strong{ color:var(--morango-dark); font-size:1rem; }
.mobile-bar__info span{ font-size:.75rem; color:var(--chocolate-2); font-weight:700; }

/* ============================ MODAIS ============================ */
.modal[hidden]{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}
.modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(90,58,46,.45);
  backdrop-filter:blur(5px);
  animation:fadeIn .2s ease both;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

.modal__box{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  max-height:92vh;
  overflow-y:auto;
  background:#fff;
  border:3px solid #FFC9D9;
  border-radius:28px 28px 0 0;
  padding:30px 20px 24px;
  box-shadow:0 -20px 60px rgba(90,58,46,.28);
  animation:slideUp .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideUp{ from{ transform:translateY(40px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

.modal__close{
  position:absolute;
  top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--rosa);
  border:none;
  color:var(--morango-dark);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, color .2s ease;
}
.modal__close:hover{ background:var(--morango); color:#fff; transform:rotate(90deg); }
.modal__lead{ color:var(--chocolate-2); font-size:.92rem; }

/* Modal produto */
.modal__product{ display:flex; gap:14px; align-items:flex-start; padding-right:38px; }
.modal__emoji{
  width:62px; height:62px;
  flex:0 0 62px;
  display:grid; place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.7), transparent 46%), var(--rosa);
  border:3px solid #fff;
  box-shadow:0 10px 20px rgba(90,58,46,.16);
  font-size:2rem;
}
.modal__product h3{ margin:0 0 4px; }
.modal__desc{ color:var(--chocolate-2); font-size:.88rem; margin:0; }
.modal__groups{ display:flex; flex-direction:column; gap:18px; margin:22px 0; }
.opt-group{ border:none; margin:0; padding:0; }
.opt-group legend{
  font-family:var(--ff-head);
  font-weight:600;
  font-size:.98rem;
  margin-bottom:10px;
  padding:0;
}
.opt-group legend .opt-tag{
  font-family:var(--ff-body);
  font-size:.68rem;
  font-weight:800;
  padding:3px 9px;
  border-radius:999px;
  margin-left:8px;
  background:var(--creme);
  color:var(--chocolate-2);
  vertical-align:middle;
}
.opt-group legend .opt-tag--req{ background:#CDEBE0; color:#1FA97F; }
.opt-list{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-radius:16px;
  background:var(--creme);
  border:2px solid var(--border);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .18s ease;
  flex:1 1 100%;
}
.opt:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.opt input{ accent-color:var(--morango); width:18px; height:18px; }
.opt.is-checked{ border-color:var(--morango); background:rgba(255,92,138,.08); }
.opt__name{ flex:1; font-size:.9rem; font-weight:700; }
.opt__price{ font-size:.85rem; color:var(--morango-dark); font-weight:800; }

/* Bolinhas coloridas clicáveis (sabores) */
.opt__dot{
  width:28px; height:28px;
  flex:0 0 28px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.75), transparent 46%),
    var(--ball, var(--morango));
  border:2px solid rgba(90,58,46,.15);
  box-shadow:inset 0 -4px 7px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.opt--ball input{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.opt--ball{ flex:0 1 calc(50% - 4px); }
.opt--ball:focus-within{ outline:3px solid var(--morango); outline-offset:2px; }
.opt--ball.is-checked{ background:#fff; }
.opt.is-checked .opt__dot{
  transform:scale(1.08);
  box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ball, var(--morango)), inset 0 -4px 7px rgba(0,0,0,.12);
}

/* Resumo de bolas + total no modal */
.pm-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  margin:0 0 14px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,92,138,.12), rgba(60,207,161,.14));
  border:2px dashed rgba(255,92,138,.4);
  font-weight:800;
  color:var(--chocolate);
}
.pm-summary__balls b{ font-size:1.25rem; color:var(--morango); display:inline-block; }
.pm-summary__total strong{ color:var(--morango-dark); font-family:var(--ff-head); font-size:1.2rem; display:inline-block; }

.modal__foot{
  display:flex;
  flex-direction:column;
  gap:12px;
  border-top:1px solid var(--border);
  padding-top:16px;
}
.qty{
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:18px;
  background:var(--creme);
  border:2px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
}
.qty button{
  width:34px; height:34px;
  border-radius:50%;
  border:none;
  background:#fff;
  color:var(--morango-dark);
  font-size:1.3rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.qty button:hover{ background:var(--morango); color:#fff; }
.qty span{ min-width:22px; text-align:center; font-weight:800; }

/* ============================ CARRINHO / SHEET ============================ */
.modal--sheet .sheet{
  position:relative;
  z-index:1;
  width:100%;
  max-width:520px;
  max-height:92vh;
  overflow-y:auto;
  background:#fff;
  border:3px solid #FFC9D9;
  border-radius:28px 28px 0 0;
  padding:30px 20px 26px;
  box-shadow:0 -20px 60px rgba(90,58,46,.28);
  animation:slideUp .3s cubic-bezier(.22,1,.36,1) both;
}
.sheet h3{ margin-bottom:18px; }
.cart-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.cart-line{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:var(--creme);
  border:1px solid var(--border);
}
.cart-line__emoji{ font-size:1.5rem; }
.cart-line__body{ flex:1; min-width:0; }
.cart-line__body strong{ font-size:.88rem; display:block; }
.cart-line__body small{ color:var(--muted); font-size:.74rem; }
.cart-line__price{ font-weight:800; font-size:.88rem; color:var(--morango-dark); }
.cart-line__ctrl{ display:flex; align-items:center; gap:8px; }
.cart-line__ctrl button{
  width:28px; height:28px;
  border-radius:9px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--morango-dark);
  font-size:1rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.cart-line__ctrl button:hover{ background:var(--morango); color:#fff; border-color:transparent; }
.cart-line__ctrl span{ min-width:18px; text-align:center; font-weight:800; font-size:.9rem; }
.cart-empty{ text-align:center; color:var(--muted); padding:26px 0; }

/* Formulário */
.order-form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:7px; border:none; margin:0; padding:0; }
.field label, .field legend{
  font-size:.85rem;
  font-weight:800;
  color:var(--chocolate-2);
  padding:0;
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="password"],
.field textarea{
  width:100%;
  padding:13px 15px;
  border-radius:16px;
  background:var(--creme);
  border:2px solid var(--border);
  color:var(--chocolate);
  font-family:inherit;
  font-size:.95rem;
  transition:border-color .2s ease, box-shadow .2s ease;
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--morango);
  box-shadow:0 0 0 4px rgba(255,92,138,.16);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ cursor:pointer; }
.chip input{ position:absolute; opacity:0; pointer-events:none; }
.chip span{
  display:inline-block;
  padding:10px 15px;
  border-radius:999px;
  background:var(--creme);
  border:2px solid var(--border);
  font-size:.85rem;
  font-weight:800;
  color:var(--chocolate-2);
  transition:all .2s ease;
}
.chip input:checked + span{
  background:var(--morango);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 18px rgba(255,92,138,.3);
}
.chip input:focus-visible + span{ outline:3px solid var(--morango); outline-offset:2px; }
.order-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(60,207,161,.14), rgba(255,233,168,.3));
  border:2px solid #CDEBE0;
  font-weight:800;
}
.order-total strong{ font-size:1.25rem; color:var(--chocolate); font-family:var(--ff-head); }
.form-error{ color:#E2546A; font-size:.85rem; margin:0; font-weight:700; }
.order-form__small{ color:var(--muted); font-size:.78rem; text-align:center; margin:0; }

/* Cadastro */
.modal__box--signup{ max-width:480px; }
.link-input{
  display:flex;
  align-items:center;
  padding:0 15px;
  border-radius:16px;
  background:var(--creme);
  border:2px solid var(--border);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.link-input:focus-within{ border-color:var(--morango); box-shadow:0 0 0 4px rgba(255,92,138,.16); }
.link-input__prefix{ color:var(--muted); font-size:.85rem; white-space:nowrap; }
.link-input input{
  flex:1;
  border:none !important;
  background:transparent !important;
  padding:13px 4px !important;
  box-shadow:none !important;
  min-width:0;
  color:var(--chocolate);
  font-family:inherit;
  font-size:.95rem;
}
.link-input input:focus{ outline:none; }
.link-preview{ color:var(--menta); font-size:.8rem; min-height:1.1em; word-break:break-all; font-weight:700; }
.field__error{ color:#E2546A; font-size:.78rem; min-height:1em; font-weight:700; }

/* ============================ SUCESSO ============================ */
.success{ text-align:center; padding:16px 4px; }
.success__check{ color:var(--menta); display:flex; justify-content:center; margin-bottom:18px; }
.success__check svg circle,
.success__check svg path{
  stroke-dasharray:160;
  stroke-dashoffset:160;
  animation:draw .7s ease forwards;
}
.success__check svg path{ animation-delay:.45s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.success h3{ margin-bottom:10px; }
.success p{ color:var(--chocolate-2); font-size:.92rem; }
.success__link{
  display:inline-block;
  padding:12px 18px;
  border-radius:16px;
  background:var(--menta-suave);
  border:2px solid #CDEBE0;
  color:#1FA97F;
  font-weight:800;
  word-break:break-all;
  margin:6px 0 18px;
}

/* ============================ TOAST ============================ */
.toast{
  position:fixed;
  left:50%;
  bottom:150px;
  transform:translateX(-50%) translateY(20px);
  background:var(--chocolate);
  border:2px solid var(--baunilha);
  color:#FFF8F0;
  padding:12px 20px;
  border-radius:999px;
  font-size:.88rem;
  font-weight:800;
  z-index:200;
  box-shadow:0 14px 30px rgba(90,58,46,.35);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  max-width:90vw;
  text-align:center;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================ BOLINHA VOADORA ============================ */
.flying-ball{
  position:fixed;
  width:26px; height:26px;
  border-radius:50%;
  z-index:300;
  pointer-events:none;
  box-shadow:0 8px 16px rgba(90,58,46,.35), inset 0 -5px 8px rgba(0,0,0,.16);
}

/* ============================ CONTADORES ANIMADOS ============================ */
@keyframes bump{ 0%{ transform:scale(1);} 40%{ transform:scale(1.45);} 100%{ transform:scale(1);} }
.is-bump{ animation:bump .35s ease; }

/* ============================ ANIMAÇÃO REVEAL ============================ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================ RESPONSIVO ============================ */
@media (min-width:640px){
  .stats{ grid-template-columns:repeat(4, 1fr); }
  .niches__grid{ grid-template-columns:repeat(4, 1fr); }
  .features__grid{ grid-template-columns:repeat(2, 1fr); }
  .testimonials__grid{ grid-template-columns:repeat(2, 1fr); }
  .steps{ grid-template-columns:repeat(3, 1fr); gap:26px; }
  .check-list--two{ grid-template-columns:repeat(2, 1fr); }
  .modal{ align-items:center; padding:24px; }
  .modal__box, .modal--sheet .sheet{ border-radius:28px; max-height:88vh; }
  .modal__foot{ flex-direction:row; }
  .modal__foot .btn{ flex:1; }
  .footer__inner{ grid-template-columns:2fr 1fr 1fr; }
  .footer__bottom{ flex-direction:row; justify-content:space-between; text-align:left; }
}

@media (min-width:900px){
  .hero__inner{ grid-template-columns:1.05fr .95fr; }
  .hero__icecream{ width:210px; left:-6px; bottom:0; }
  .demo__layout{ grid-template-columns:auto 1fr; align-items:center; }
  .features__grid{ grid-template-columns:repeat(3, 1fr); }
  .testimonials__grid{ grid-template-columns:repeat(3, 1fr); }
  .compare__grid{ grid-template-columns:1fr 1fr; }
}

/* Mobile: navegação e barra fixa */
@media (max-width:899px){
  .nav{
    position:fixed;
    top:var(--header-h);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:16px;
    background:rgba(255,255,255,.99);
    backdrop-filter:blur(16px);
    border-bottom:2px solid var(--border);
    transform:translateY(-140%);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
    box-shadow:0 20px 40px rgba(90,58,46,.18);
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ padding:14px 8px; border-bottom:1px solid var(--border); }
  .nav a::after{ display:none; }
  .nav .btn{ margin-top:12px; }
  .hamburger{ display:block; }
}

@media (max-width:639px){
  .section{ padding:58px 0; }
  .hero{ padding-top:calc(var(--header-h) + 32px); }
  .hero__mock{ min-height:0; }
  .hero__icecream{ width:120px; top:-6px; left:-4px; bottom:auto; opacity:.95; }
  .phone__screen{ min-height:480px; }
  .phone__screen--app{ min-height:560px; }
  .hero__actions .btn{ flex:1 1 100%; }
  .cta-final__actions .btn{ flex:1 1 100%; }
  .whats-float{ bottom:84px; }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .flying-ball{ display:none; }
}