/* ==========================================================================
   Criar Balões · Nova Lima, MG
   Direção: "Vitrine festiva" — branco suave, roxo da marca, tons pastel
   (lilás, rosa e azul claro) em áreas pontuais. Quicksand nos títulos,
   Nunito no texto: letras arredondadas, fofas e ainda assim finas.
   ========================================================================== */

:root{
  /* Superfícies */
  --fundo:        #FBFAFE;   /* branco suave com um toque de lilás */
  --branco:       #FFFFFF;
  --lilas-claro:  #F3EEFC;   /* áreas pontuais */
  --lilas-borda:  #E4DAF7;

  /* Marca */
  --lilas:        #B9A0E4;   /* cor da logo — só decorativa (contraste baixo) */
  --roxo:         #5B34B3;   /* 8.1:1 no branco — títulos em destaque e botões */
  --roxo-escuro:  #4A2894;   /* hover */

  /* Detalhes festivos (pastel) */
  --rosa:         #E9799F;
  --rosa-claro:   #FDEEF4;
  --rosa-escuro:  #A93C68;   /* 5.3:1 sobre o rosa claro */
  --azul:         #5B8DEF;
  --azul-claro:   #ECF2FE;
  --azul-escuro:  #2C5BB8;   /* 5.7:1 sobre o azul claro */

  /* Texto */
  --tinta:        #1E1A2B;   /* 16:1 */
  --tinta-suave:  #595470;   /* 6.9:1 */

  --whats:        #0E7A3F;

  /* Tipografia */
  --fonte-titulo: "Quicksand", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo:  "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritmo */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --largura: 1180px;
  --raio-p:  12px;
  --raio:    22px;
  --raio-g:  32px;
  --secao:   clamp(3.5rem, 7vw, 6rem);

  /* Profundidade: sombras frias, levemente arroxeadas */
  --sombra-1: 0 1px 2px rgba(30, 26, 43, .05), 0 4px 14px -6px rgba(74, 40, 148, .12);
  --sombra-2: 0 2px 6px rgba(30, 26, 43, .05), 0 22px 48px -22px rgba(74, 40, 148, .32);
  --sombra-3: 0 30px 70px -30px rgba(74, 40, 148, .45);

  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-mola: cubic-bezier(.34, 1.4, .64, 1);   /* leve "quique" nas entradas */

  /* Altura do cabeçalho — o JS mede e atualiza */
  --altura-cabecalho: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: 1.02rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
h1, h2, h3{
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h2{ font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.4rem); }
h3{ font-size: 1.1rem; letter-spacing: 0; }
p{ margin: 0 0 1rem; text-wrap: pretty; }
a{ color: var(--roxo); }
ul, ol{ margin: 0; padding: 0; list-style: none; }
figure{ margin: 0; }

.pular{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--roxo); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--raio-p) 0;
}
.pular:focus{ left: 0; }

:focus-visible{ outline: 3px solid var(--roxo); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus{ outline: none; }

/* Todos os destinos de âncora param abaixo do cabeçalho fixo */
[id]{ scroll-margin-top: calc(var(--altura-cabecalho) + 1.25rem); }

/* ---------- Peças compartilhadas ---------- */
.ponto{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--lilas); }
.ponto--roxo{ background: var(--roxo); }
.ponto--rosa{ background: var(--rosa); }
.ponto--azul{ background: var(--azul); }

.botao{
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.45rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--fonte-corpo); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              box-shadow .25s ease, transform .25s var(--curva);
}
.botao--primario{
  background: linear-gradient(135deg, #6A42C4 0%, var(--roxo) 55%, var(--roxo-escuro) 100%);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(91, 52, 179, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.botao--primario:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 34px -14px rgba(91, 52, 179, .8), 0 0 0 5px rgba(185, 160, 228, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.botao--contorno{ border-color: var(--roxo); color: var(--roxo); background: var(--branco); }
.botao--contorno:hover{ background: var(--lilas-claro); transform: translateY(-2px); }
.botao:active{ transform: translateY(0); }
.botao--grande{ min-height: 54px; padding: .95rem 1.7rem; font-size: 1.02rem; }
.i-whats{ width: 20px; height: 20px; fill: currentColor; flex: none; }

.link-seta{
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  font-weight: 700; color: var(--roxo); text-decoration: none;
}
.link-seta span{ transition: transform .25s var(--curva); }
.link-seta:hover{ text-decoration: underline; text-underline-offset: 4px; }
.link-seta:hover span{ transform: translateX(4px); }

/* Etiqueta flutuante sobre as fotos */
.selo{
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .75rem;
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--lilas-borda);
  border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--tinta);
  box-shadow: var(--sombra-1);
}

/* brilho de quatro pontas depois do título, como um detalhe de festa */
.titulo-festivo::after{
  content: ""; display: inline-block;
  width: .52em; height: .52em; margin-left: .28em;
  vertical-align: .55em;
  background: var(--rosa);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.8 6.4 5.6 11.2 12 12-6.4.8-11.2 5.6-12 12-.8-6.4-5.6-11.2-12-12C6.4 11.2 11.2 6.4 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.texto-intro{ color: var(--tinta-suave); font-size: 1.05rem; max-width: 46ch; }

.nota{
  font-size: .93rem; color: var(--tinta-suave);
  padding: .8rem 1rem;
  background: var(--lilas-claro);
  border-radius: var(--raio-p);
  max-width: 48ch;
}
.nota strong{ color: var(--roxo-escuro); font-weight: 600; }
.nota--simples{ background: none; padding: 0; margin: 0; }

.secao{ padding: var(--secao) var(--gutter); }

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position: sticky; top: 0; z-index: 100;
  background: var(--fundo);
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cabecalho.rolou{
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--lilas-borda);
  box-shadow: 0 6px 20px -16px rgba(74, 40, 148, .35);
}
.cabecalho__interno{
  max-width: var(--largura); margin-inline: auto;
  padding: .7rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marca{ display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--tinta); }
.marca__selo{ width: 50px; height: 50px; border-radius: 50%; }
.marca__nome{ font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.14rem; letter-spacing: -.02em; }

.navegacao{ display: flex; align-items: center; gap: 1.9rem; }
/* :not(.botao) evita que a regra pinte de escuro o texto do botão roxo */
.navegacao a:not(.botao){
  position: relative;
  color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .95rem;
  padding-block: .4rem;
}
.navegacao a:not(.botao)::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--roxo); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--curva);
}
.navegacao a:not(.botao):hover::after{ transform: scaleX(1); }
.navegacao__cta{ min-height: 42px; padding: .6rem 1.2rem; font-size: .92rem; }

.hamburguer{
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 9px;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
}
.hamburguer span{ height: 2px; background: var(--tinta); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.hamburguer[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Primeira tela ---------- */
.hero{
  position: relative;
  padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
/* luzes pastel difusas: lilás atrás da composição, rosa e azul nos cantos */
.hero::before{
  content: ""; position: absolute; pointer-events: none;
  inset: 0;
  background:
    radial-gradient(closest-side, rgba(185, 160, 228, .34), transparent) 100% 0 / min(900px, 85vw) min(900px, 85vw) no-repeat,
    radial-gradient(closest-side, rgba(233, 121, 159, .16), transparent) 0 100% / min(520px, 70vw) min(520px, 70vw) no-repeat,
    radial-gradient(closest-side, rgba(91, 141, 239, .12), transparent) 55% 100% / min(460px, 60vw) min(460px, 60vw) no-repeat;
}
.hero__interno{
  position: relative;
  max-width: var(--largura); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}
.hero h1{
  font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.35rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  max-width: 15ch;
  margin-bottom: .5em;
}
.hero h1 em{
  font-style: normal; white-space: nowrap;
  color: var(--roxo);
  background: linear-gradient(100deg, #7B4FD8, var(--roxo) 45%, #A64E8C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__sub{ font-size: clamp(1.03rem, .98rem + .3vw, 1.17rem); color: var(--tinta-suave); max-width: 40ch; margin-bottom: 1.8rem; }
.hero__acoes{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1.6rem; }
.hero__apoio{
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem;
  margin: 0; font-size: .9rem; font-weight: 500; color: var(--tinta-suave);
}
.hero__apoio-item{ display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.hero__sep{ color: var(--lilas); }

/* Composição: balão grande em moldura, caneca sobreposta, órbitas finas */
.hero__visual{
  position: relative;
  aspect-ratio: 1 / 1.02;
  max-width: 560px; width: 100%;
  justify-self: end;
}
.hero__orbita{
  position: absolute; inset: -4% -6%;
  width: 112%; height: 108%;
  fill: none; stroke: rgba(91, 52, 179, .16); stroke-width: 1.2;
  pointer-events: none;
}
.hero__orbita ellipse + ellipse{ stroke-dasharray: 3 7; }
.hero__orbita-ponto{ stroke: none; }
.hero__orbita-ponto--rosa{ fill: var(--rosa); }
.hero__orbita-ponto--azul{ fill: var(--azul); }

.moldura{
  position: absolute;
  padding: 10px;
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-3);
}
/* a foto mantém a proporção original dentro da moldura: nada da estampa é cortado */
.moldura img{ width: 100%; height: auto; border-radius: calc(var(--raio-g) - 10px); }
.moldura--balao{ right: 0; top: 0; width: 72%; rotate: 2.5deg; z-index: 1; }
.moldura--caneca{ left: 0; bottom: 2%; width: 46%; rotate: -4deg; z-index: 2; box-shadow: var(--sombra-3), 0 0 0 1px var(--lilas-borda); }

/* balões decorativos (desenho estático) e brilhos ao redor da composição */
.deco-balao{ position: absolute; height: auto; pointer-events: none; overflow: visible; }
.deco-balao--hero-1{ width: 17%; left: 12%; top: -3%; rotate: -10deg; z-index: 0; }
.deco-balao--hero-2{ width: 11%; right: -5%; bottom: 8%; rotate: 8deg; z-index: 3; }
.brilho{ position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 3; }
.brilho--1{ left: 30%; top: 22%; fill: var(--rosa); width: 16px; }
.brilho--2{ right: -2%; top: 8%; fill: var(--lilas); width: 22px; height: 22px; }
.brilho--3{ left: 48%; bottom: 0; fill: var(--azul); width: 13px; height: 13px; }
.moldura--balao .selo{ left: auto; right: 22px; bottom: 22px; }
.moldura--caneca .selo{ left: 50%; transform: translateX(-50%); bottom: -16px; white-space: nowrap; }

/* ---------- Balões ---------- */
.baloes__interno{
  max-width: var(--largura); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.baloes__destaque{
  position: relative;
  padding: 10px; background: var(--branco);
  border-radius: var(--raio-g); box-shadow: var(--sombra-2);
}
.baloes__destaque img{ border-radius: calc(var(--raio-g) - 10px); cursor: zoom-in; }
.baloes__destaque .selo{ left: 24px; bottom: 24px; }

.lista-opcoes{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem;
  margin: 1.4rem 0 1.6rem;
}
.lista-opcoes li{
  display: flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 500;
}
.lista-opcoes li::before{
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 6px;
  background: var(--lilas-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.4' fill='none' stroke='%235B34B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.baloes__exemplos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.miniatura{
  background: var(--branco); padding: 6px 6px 0;
  border-radius: var(--raio); box-shadow: var(--sombra-1);
  transition: transform .3s var(--curva), box-shadow .3s ease;
}
.miniatura:hover{ transform: translateY(-4px); box-shadow: var(--sombra-2); }
.miniatura img{ aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 6%; border-radius: calc(var(--raio) - 6px); cursor: zoom-in; }
.miniatura figcaption{ padding: .5rem .4rem .6rem; font-size: .88rem; font-weight: 600; }
.baloes__texto .nota{ margin-bottom: 1.5rem; }

/* ---------- Canecas (área lilás pontual) ---------- */
.canecas{
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(253, 238, 244, .9), transparent 70%),
    linear-gradient(180deg, rgba(243, 238, 252, .88), rgba(243, 238, 252, .7));
}
.canecas__interno{ max-width: var(--largura); margin-inline: auto; }
.canecas__cabeca{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .5rem clamp(2rem, 5vw, 4.5rem); align-items: end;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.canecas__cabeca h2, .canecas__cabeca p{ margin: 0; }
.canecas__fotos{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.cartao-foto{
  background: var(--branco);
  border-radius: var(--raio-g);
  padding: 10px 10px 0;
  box-shadow: var(--sombra-1);
  transition: transform .3s var(--curva), box-shadow .3s ease;
}
.cartao-foto:hover{ transform: translateY(-5px); box-shadow: var(--sombra-2); }
.cartao-foto img{ aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(var(--raio-g) - 10px); cursor: zoom-in; }
.cartao-foto figcaption{ padding: .9rem .6rem 1.1rem; font-size: .93rem; color: var(--tinta-suave); }
.cartao-foto figcaption strong{ display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; color: var(--tinta); margin-bottom: .15rem; }
.canecas__rodape, .mais__rodape{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- Mais personalizados (grade compacta) ---------- */
.mais__interno{ max-width: var(--largura); margin-inline: auto; }
.mais__cabeca{ max-width: 620px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.mais__cabeca p{ margin: 0; }
.grade{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 2vw, 1.5rem); }
.item{
  background: var(--branco);
  border: 1px solid var(--lilas-borda);
  border-radius: var(--raio);
  padding: 8px 8px 1rem;
  transition: transform .3s var(--curva), box-shadow .3s ease, border-color .3s ease;
}
.item:hover{ transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--sombra-2); border-color: transparent; }
.item img{ aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--raio) - 8px); margin-bottom: .85rem; cursor: zoom-in; }
.item h3, .item p{ padding-inline: .5rem; }
.item h3{ margin-bottom: .2rem; }
.item p{ margin: 0; font-size: .9rem; color: var(--tinta-suave); }
.item--texto{
  display: flex; flex-direction: column; justify-content: center; gap: .35rem;
  padding: 1.4rem 1.2rem;
  background: linear-gradient(160deg, var(--lilas-claro), var(--branco) 70%);
}
.item--texto h3, .item--texto p{ padding: 0; }
.item__icone{
  width: 52px; height: 52px; padding: 12px; margin-bottom: .6rem;
  border-radius: 16px; background: var(--branco); box-shadow: var(--sombra-1);
  fill: none; stroke: var(--roxo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.item--texto h3{ font-size: 1.2rem; color: var(--roxo-escuro); }
.item--texto .link-seta{ margin-top: .4rem; }

/* ---------- Como encomendar ---------- */
.encomendar{ padding-top: 0; }
.encomendar__interno{
  max-width: var(--largura); margin-inline: auto;
  padding-top: var(--secao);
  border-top: 1px solid var(--lilas-borda);
}
.etapas{
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}
/* trilho que liga as etapas */
.etapas::before{
  content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px;
  background: linear-gradient(90deg, var(--roxo), var(--lilas) 60%, var(--rosa));
  opacity: .35;
}
.etapas li{ position: relative; }
.etapas__num{
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--branco); color: var(--roxo);
  border: 1.5px solid var(--lilas-borda);
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.1rem;
  box-shadow: var(--sombra-1);
}
.etapas li:nth-child(1) .etapas__num{ background: var(--lilas-claro); color: var(--roxo); border-color: var(--lilas-borda); }
.etapas li:nth-child(2) .etapas__num{ background: var(--rosa-claro); color: var(--rosa-escuro); border-color: #F7D3E1; }
.etapas li:nth-child(3) .etapas__num{ background: var(--azul-claro); color: var(--azul-escuro); border-color: #D3E0FB; }
.etapas h3{ font-size: 1.1rem; margin-bottom: .35rem; }
.etapas p{ color: var(--tinta-suave); font-size: .95rem; margin: 0; max-width: 34ch; }

.fatos{ display: flex; flex-wrap: wrap; gap: .6rem; }
.fatos li{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem;
  background: var(--branco); border: 1px solid var(--lilas-borda); border-radius: 999px;
  font-size: .88rem; font-weight: 500;
}
.fatos li::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--roxo); flex: none; }
.fatos li:nth-child(1){ background: var(--lilas-claro); }
.fatos li:nth-child(2){ background: var(--rosa-claro); border-color: #F7D3E1; }
.fatos li:nth-child(2)::before{ background: var(--rosa); }
.fatos li:nth-child(3){ background: var(--azul-claro); border-color: #D3E0FB; }
.fatos li:nth-child(3)::before{ background: var(--azul); }

/* ---------- Chamada final ---------- */
.chamada{ padding: 0 var(--gutter) var(--secao); }
.chamada__painel{
  position: relative; overflow: hidden;
  max-width: var(--largura); margin-inline: auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--raio-g);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(233, 121, 159, .16), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(91, 141, 239, .12), transparent 55%),
    var(--lilas-claro);
  border: 1px solid var(--lilas-borda);
  text-align: center;
}
.chamada__painel h2, .chamada__painel p, .chamada__painel .botao{ position: relative; z-index: 1; }
.chamada__painel h2{ max-width: 20ch; margin-inline: auto; }
.deco-balao--cta-1{ width: 92px; left: 4%; bottom: -34px; rotate: -12deg; }
.deco-balao--cta-2{ width: 70px; right: 6%; top: 14%; rotate: 10deg; }
.deco-balao--cta-3{ width: 48px; right: 14%; top: 48%; rotate: -6deg; }
.chamada__painel p{ color: var(--tinta-suave); max-width: 44ch; margin: 0 auto 1.6rem; }

/* ---------- Rodapé / Contato ---------- */
.rodape{ background: var(--branco); border-top: 1px solid var(--lilas-borda); padding: clamp(2rem, 4vw, 3rem) var(--gutter) 1.25rem; }
.rodape__interno{
  max-width: var(--largura); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--lilas-borda);
}
.rodape__marca{ display: flex; align-items: center; gap: .8rem; }
.rodape__marca img{ width: 54px; height: 54px; border-radius: 50%; }
.rodape__marca strong{ display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1rem; letter-spacing: -.02em; }
.rodape__marca span{ font-size: .9rem; color: var(--tinta-suave); }
.rodape__contato{ display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.rodape__contato a{
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  color: var(--tinta); font-weight: 500; text-decoration: none;
}
.rodape__contato a:hover{ color: var(--roxo); text-decoration: underline; text-underline-offset: 4px; }
.i-insta{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.i-insta__ponto{ fill: currentColor; stroke: none; }
.rodape__base{ max-width: var(--largura); margin: 1rem auto 0; font-size: .85rem; color: var(--tinta-suave); text-align: center; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.whats-flutuante{
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 50px; padding: .75rem 1.2rem;
  background: var(--whats); color: #fff;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(14, 122, 63, .7);
  transition: transform .25s var(--curva), box-shadow .25s ease;
}
.whats-flutuante:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(14, 122, 63, .75); }
.whats-flutuante svg{ width: 22px; height: 22px; fill: currentColor; flex: none; }

/* ---------- Lightbox ---------- */
.lupa{
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(30, 26, 43, .9);
}
.lupa[hidden]{ display: none; }
.lupa img{ max-width: 100%; max-height: 88vh; border-radius: var(--raio); }
.lupa__fechar{
  position: absolute; top: 1rem; right: 1.25rem;
  width: 48px; height: 48px;
  background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer;
}

.defs-ocultas{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Balões 3D flutuantes (camada decorativa)
   ========================================================================== */
/* A camada fica ATRÁS do conteúdo (main e rodapé têm z-index 1) e nunca recebe
   eventos: o toque ou clique num balão é conferido pelo JS, então nenhum link,
   botão ou gesto de rolagem pode ser bloqueado por ela. */
.camada-baloes{
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.balao{
  position: absolute; top: 0; left: 0;
  width: var(--w); padding: 0; margin: 0;
  background: none; border: 0;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  animation: balao-sobe var(--dur) linear var(--atraso) both;
}
.balao__osc{
  display: block;
  transform-origin: 50% 90%;
  animation: balao-oscila var(--osc) ease-in-out var(--atraso-osc) infinite alternate;
}
.balao svg{ display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 36%; }
.balao__corpo{ fill-opacity: .94; }
.balao__fio{ fill: none; stroke: rgba(89, 84, 112, .45); stroke-width: 1.3; stroke-linecap: round; }

main, .rodape{ position: relative; z-index: 1; }
/* No celular eles cruzam a tela inteira por trás do texto: mais suaves */
.camada-baloes.no-fundo .balao{ opacity: .68; }
.sobre-balao{ cursor: pointer; }

.camada-baloes.pausada .balao,
.camada-baloes.pausada .balao__osc,
.camada-baloes.oculta .balao,
.camada-baloes.oculta .balao__osc{ animation-play-state: paused; }

@keyframes balao-sobe{
  from{ transform: translate3d(var(--x), calc(100vh + 20px), 0); }
  to  { transform: translate3d(var(--x), calc(-1 * var(--w) * 1.7), 0); }
}
@keyframes balao-oscila{
  from{ transform: translateX(calc(-1 * var(--amp))) rotate(calc(-1 * var(--giro))); }
  to  { transform: translateX(var(--amp)) rotate(var(--giro)); }
}

/* Estouro: cresce um instante e some */
.balao.estourando{ pointer-events: none; }
.balao.estourando svg{ animation: balao-estoura .3s var(--curva) forwards; }
@keyframes balao-estoura{
  0%  { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.16); opacity: 1; }
  100%{ transform: scale(1.34); opacity: 0; }
}
.fragmento{
  position: absolute; top: 0; left: 0;
  width: 8px; height: 5px; border-radius: 2px;
  pointer-events: none;
}

.controle-animacao{
  position: fixed; left: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .5rem .9rem .5rem .75rem;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--lilas-borda); border-radius: 999px;
  font: 500 .82rem var(--fonte-corpo); color: var(--tinta-suave);
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: color .2s ease, border-color .2s ease;
}
.controle-animacao[hidden]{ display: none; }
.controle-animacao:hover{ color: var(--roxo); border-color: var(--lilas); }
.controle-animacao__icone{ width: 16px; height: 16px; fill: currentColor; flex: none; }
.controle-animacao .icone-play{ display: none; }
.controle-animacao[aria-pressed="true"] .icone-play{ display: block; }
.controle-animacao[aria-pressed="true"] .icone-pausa{ display: none; }

.dica-baloes{
  position: fixed; left: 1rem; bottom: 4.1rem; z-index: 90;
  margin: 0; padding: .5rem .85rem;
  background: var(--tinta); color: #fff;
  border-radius: 12px;
  font-size: .85rem; font-weight: 500;
  box-shadow: var(--sombra-2);
  pointer-events: none;
  animation: dica-entra .4s var(--curva) both;
}
.dica-baloes[hidden]{ display: none; }
.dica-baloes.saindo{ animation: dica-sai .35s ease forwards; }
@keyframes dica-entra{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
@keyframes dica-sai{ to{ opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   Movimento: entrada da primeira tela e revelação ao rolar
   ========================================================================== */
@keyframes entra{
  from{ opacity: 0; transform: translateY(16px); }
  to  { opacity: 1; transform: none; }
}
@keyframes entra-moldura{
  from{ opacity: 0; transform: translateY(22px) scale(.97); }
  to  { opacity: 1; transform: none; }
}
.hero__texto > *{ animation: entra .65s var(--curva) both; }
.hero__texto > :nth-child(2){ animation-delay: .08s; }
.hero__texto > :nth-child(3){ animation-delay: .16s; }
.hero__texto > :nth-child(4){ animation-delay: .24s; }
.hero__orbita{ animation: entra .9s ease .35s both; }

/* depois da entrada, as molduras e os balões decorativos flutuam de leve */
@keyframes flutua{ from{ translate: 0 0; } to{ translate: 0 -8px; } }
@keyframes flutua-deco{ from{ translate: 0 0; } to{ translate: 4px -12px; } }
@keyframes cintila{ 0%, 100%{ opacity: .35; scale: .75; } 50%{ opacity: 1; scale: 1; } }
.moldura--balao{ animation: entra-moldura .8s var(--curva) .15s both, flutua 6s ease-in-out 1s infinite alternate; }
.moldura--caneca{ animation: entra-moldura .8s var(--curva) .3s both, flutua 5.2s ease-in-out 1.4s infinite alternate-reverse; }
.deco-balao{ animation: flutua-deco 5.5s ease-in-out infinite alternate; }
.deco-balao--hero-2, .deco-balao--cta-2{ animation-duration: 4.6s; animation-direction: alternate-reverse; }
.brilho{ animation: cintila 2.8s ease-in-out infinite; }
.brilho--2{ animation-delay: .9s; }
.brilho--3{ animation-delay: 1.7s; }
/* "Pausar animações" também congela esses movimentos */
.animacoes-pausadas .moldura, .animacoes-pausadas .deco-balao, .animacoes-pausadas .brilho{ animation-play-state: paused; }

/* Só esconde o conteúdo quando o JS existe para revelá-lo */
.js .revela{ opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s var(--curva); }
.js .revela.visivel{ opacity: 1; transform: none; }
.js .revela-grupo > *{ opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .55s ease, transform .6s var(--curva-mola), box-shadow .3s ease, border-color .3s ease; }
.js .revela-grupo.visivel > *{ opacity: 1; transform: none; }
.js .revela-grupo.visivel > :nth-child(2){ transition-delay: .07s; }
.js .revela-grupo.visivel > :nth-child(3){ transition-delay: .14s; }
.js .revela-grupo.visivel > :nth-child(4){ transition-delay: .21s; }
.js .revela-grupo.visivel > :nth-child(5){ transition-delay: .28s; }
.js .revela-grupo.visivel > :nth-child(6){ transition-delay: .35s; }
/* o hover precisa responder na hora, sem herdar o atraso da cascata */
.js .revela-grupo.visivel > :hover{ transition-delay: 0s; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px){
  .navegacao{ gap: 1.3rem; }
  .grade{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  /* logo e botão ficam acima do painel do menu, senão o X some */
  .hamburguer{ display: flex; position: relative; z-index: 2; }
  .marca{ position: relative; z-index: 2; }
  .navegacao{
    position: fixed; inset: 0; z-index: 1;
    height: 100dvh; overflow-y: auto;
    padding: calc(var(--altura-cabecalho) + 1rem) var(--gutter) 2rem;
    background: var(--fundo);
    flex-direction: column; align-items: stretch; gap: 0;
    transform: translateY(-100%);
    visibility: hidden;             /* impede que o Tab entre no menu fechado */
    transition: transform .32s var(--curva), visibility .32s;
  }
  .navegacao.aberto{ transform: none; visibility: visible; }
  .navegacao a:not(.botao){ padding: 1rem .25rem; font-size: 1.1rem; border-bottom: 1px solid var(--lilas-borda); }
  .navegacao a:not(.botao)::after{ display: none; }
  .navegacao__cta{ margin-top: 1.5rem; min-height: 52px; font-size: 1rem; }

  /* Primeira tela compacta: texto e botão antes da composição */
  .hero{ padding-top: 1.25rem; padding-bottom: 2.5rem; }
  .hero__interno{ grid-template-columns: 1fr; gap: 1.75rem; }
  .hero__sub{ margin-bottom: 1.3rem; }
  .hero__acoes{ margin-bottom: 1.1rem; }
  .hero__visual{ justify-self: center; max-width: 440px; aspect-ratio: 1 / .92; }
  .moldura--balao{ width: 62%; right: 5%; }
  .moldura--caneca{ width: 43%; left: 3%; bottom: 6%; }
  .deco-balao--hero-2{ right: 0; }
  .brilho--2{ right: 2%; }
  .moldura{ padding: 7px; border-radius: var(--raio); }
  .moldura img{ border-radius: calc(var(--raio) - 7px); }

  .baloes__interno{ grid-template-columns: 1fr; }
  .baloes__destaque{ max-width: 460px; }
  .canecas__cabeca{ grid-template-columns: 1fr; }
  .etapas{ grid-template-columns: 1fr; gap: 1.5rem; }
  .etapas::before{ left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--roxo), var(--lilas) 60%, var(--rosa)); }
  .etapas li{ display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; }
  .etapas__num{ grid-row: span 2; margin: 0; }
  .etapas h3{ align-self: center; margin: 0 0 .25rem; }
  .etapas p{ grid-column: 2; }

  .rodape{ padding-bottom: 5.5rem; }   /* sobra para os botões fixos */
  .deco-balao--cta-1{ width: 64px; left: -8px; bottom: -30px; }
  .deco-balao--cta-2{ width: 48px; right: 3%; top: 5%; }
  .deco-balao--cta-3{ display: none; }
}

@media (max-width: 560px){
  .marca__selo{ width: 44px; height: 44px; }
  .marca__nome{ font-size: 1.05rem; }
  .hero__acoes .botao{ width: 100%; }
  .hero__sep{ display: none; }
  .hero__apoio{ gap: .35rem 1.1rem; }
  .hero__acoes{ gap: .35rem; }
  .canecas__fotos{ grid-template-columns: 1fr; }
  /* grade compacta vira lista: foto ao lado do texto */
  .grade{ grid-template-columns: 1fr; gap: .7rem; }
  .item{
    display: grid; grid-template-columns: 96px minmax(0, 1fr); align-content: center;
    column-gap: .9rem; padding: 6px;
  }
  .item img{ grid-row: span 2; aspect-ratio: 1; width: 96px; margin: 0; border-radius: 14px; }
  .item h3{ align-self: end; margin: 0 0 .15rem; padding: 0; font-size: 1rem; }
  .item p{ align-self: start; padding: 0; font-size: .88rem; }
  .item--texto{ display: flex; padding: 1.2rem 1.1rem; }
  .lista-opcoes{ grid-template-columns: 1fr; }
  .canecas__rodape .botao, .mais__rodape .botao, .baloes__texto .botao{ width: 100%; }
  .whats-flutuante span{ display: none; }
  .whats-flutuante{ width: 54px; height: 54px; padding: 0; justify-content: center; }
  .whats-flutuante svg{ width: 26px; height: 26px; }
  .controle-animacao{ min-height: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .controle-animacao__texto{
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

@media (max-width: 374px){
  .cabecalho__interno{ gap: .5rem; }
  .marca{ gap: .5rem; }
  .marca__selo{ width: 40px; height: 40px; }
  .marca__nome{ font-size: .98rem; }
  .hero h1{ font-size: 1.82rem; }
  .selo{ font-size: .74rem; padding: .3rem .6rem; }
}

/* ---------- Preferências do sistema ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .revela, .js .revela-grupo > *{ opacity: 1; transform: none; }
  .camada-baloes, .dica-baloes, .controle-animacao{ display: none !important; }
}

@media print{
  .cabecalho, .whats-flutuante, .lupa, .camada-baloes, .controle-animacao, .dica-baloes{ display: none !important; }
  body{ background: #fff; }
  .js .revela, .js .revela-grupo > *{ opacity: 1; transform: none; }
}