/* ===========================================================================
   FESTA & DOCE — design system da LP
   ---------------------------------------------------------------------------
   Traduz o manual da marca (amarelo · magenta · azul · preto) para tela.
   A linguagem é pop/memphis: contorno preto, sombra dura deslocada, confete
   e zigue-zague. Nada de degradê e nada de sombra difusa — a marca é chapada.

   Contraste: o magenta com texto branco só aparece em peças com 18px+ bold
   (faixa "texto grande" da WCAG AA). Texto corrido é sempre preto no claro.
   =========================================================================== */

:root{
  /* -------------------------------------------------------------- paleta */
  --amarelo   : #F5F000;
  --magenta   : #FF2AA6;
  --azul      : #4FC3F7;
  --preto     : #000000;
  --branco    : #FFFFFF;

  /* apoios derivados, para fundos e textos secundários */
  --creme     : #FFFDE8;   /* amarelo lavado, fundo de seção */
  --rosa-claro: #FFF0F8;   /* magenta lavado */
  --azul-claro: #EEF9FE;
  --cinza     : #5A5A5A;   /* texto de apoio sobre branco — 7:1 */
  --linha     : #E6E6E6;

  /* ------------------------------------------------------------- espaço */
  --e1: 4px;  --e2: 8px;  --e3: 16px; --e4: 24px;
  --e5: 32px; --e6: 48px; --e7: 72px; --e8: 104px;

  /* -------------------------------------------------------------- forma */
  --r-card : 20px;
  --r-btn  : 999px;
  --r-img  : 24px;
  --borda  : 3px solid var(--preto);
  --dura   : 6px 6px 0 var(--preto);       /* sombra deslocada padrão */
  --dura-sm: 4px 4px 0 var(--preto);

  --largura: 1120px;
}

/* =============================================================== base === */

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

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--preto);
  background: var(--branco);
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }

.wrap{
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--e4);
}

section{ padding-block: var(--e7); }
@media (min-width: 900px){ section{ padding-block: var(--e8); } }

/* ========================================================= tipografia === */

h1, h2, h3, .h1, .h2, .h3{
  font-family: 'Anton', 'Poppins', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  margin: 0 0 var(--e3);
}

.h1{ font-size: clamp(34px, 8vw, 68px); }
.h2{ font-size: clamp(28px, 5.6vw, 48px); }
.h3{ font-size: clamp(20px, 3.2vw, 26px); }

/* Título com sombra dura, do jeito do logotipo. Usa text-shadow porque
   precisa acompanhar a quebra de linha — contorno em SVG não acompanha. */
.h1--sombra, .h2--sombra{
  text-shadow: 4px 4px 0 var(--preto);
}
.h1--sombra{ color: var(--magenta); }

.corpo{ margin: 0 0 var(--e3); font-size: clamp(16px, 2.2vw, 19px); }
.corpo--grande{ font-size: clamp(17px, 2.6vw, 21px); }
.apoio{ font-size: 14px; color: var(--cinza); line-height: 1.55; }

.destaque{ color: var(--magenta); font-weight: 700; }
.risca{ background: var(--amarelo); padding: 0 .18em; box-decoration-break: clone;
        -webkit-box-decoration-break: clone; }

/* ============================================================= etiqueta = */

.badge{
  display: inline-block;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 7px 16px;
  border: var(--borda);
  border-radius: var(--r-btn);
  background: var(--azul);
  color: var(--preto);
  box-shadow: var(--dura-sm);
  margin-bottom: var(--e3);
}
.badge--amarelo{ background: var(--amarelo); }
.badge--magenta{ background: var(--magenta); color: var(--branco); }
.badge--branco { background: var(--branco); }

/* ============================================================== botões == */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(17px, 2.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  text-decoration: none;
  padding: 17px 30px;
  border: var(--borda);
  border-radius: var(--r-btn);
  cursor: pointer;
  box-shadow: var(--dura);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translate(3px, 3px); box-shadow: var(--dura-sm); }
.btn:active{ transform: translate(6px, 6px); box-shadow: 0 0 0 var(--preto); }
.btn:focus-visible{ outline: 3px solid var(--azul); outline-offset: 3px; }

.btn--primario{ background: var(--magenta); color: var(--branco); }
.btn--amarelo { background: var(--amarelo); color: var(--preto); }
.btn--branco  { background: var(--branco);  color: var(--preto); }
.btn--pequeno { padding: 11px 20px; font-size: 15px; box-shadow: var(--dura-sm); }
.btn--largo   { width: 100%; }

.btn svg{ width: 22px; height: 22px; flex: none; }

/* ============================================================ confete === */
/* Formas soltas do manual: triângulo, zigue-zague, ponto. Puramente
   decorativas — todas com aria-hidden e sem peso de imagem. */

.confete{ position: absolute; pointer-events: none; z-index: 0; }
.confete svg{ width: 100%; height: 100%; display: block; }

.zig{ display: block; width: 92px; height: 16px; }
.zig path{ fill: none; stroke: var(--azul); stroke-width: 5; stroke-linecap: round;
           stroke-linejoin: round; }
.zig--magenta path{ stroke: var(--magenta); }
.zig--preto   path{ stroke: var(--preto); }

/* ============================================================== header == */

.topo{
  position: sticky; top: 0; z-index: 60;
  background: var(--amarelo);
  border-bottom: var(--borda);
  transition: padding .18s ease;
}
.topo__caixa{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3);
  padding-block: 12px;
}
.topo__logo{ height: 46px; width: auto; transition: height .18s ease; }
.topo.condensado .topo__logo{ height: 36px; }
.topo__cta{ flex: none; }
@media (max-width: 620px){
  .topo__cta{ display: none; }         /* no celular quem chama é a barra fixa */
  .topo__logo{ height: 40px; }
}

/* ================================================================ hero == */

.hero{
  position: relative;
  background: var(--amarelo);
  border-bottom: var(--borda);
  padding-block: var(--e6) var(--e7);
  overflow: hidden;
}
.hero__grade{
  position: relative; z-index: 1;
  display: grid; gap: var(--e6);
  align-items: center;
}
@media (min-width: 900px){
  .hero__grade{ grid-template-columns: 1.05fr .95fr; gap: var(--e7); }
}
.hero__texto{ max-width: 620px; }
.hero .h1{ margin-bottom: var(--e4); }
.hero__sub{ font-size: clamp(17px, 2.6vw, 21px); font-weight: 500; max-width: 33em; }
.hero__acao{ margin-top: var(--e5); display: flex; flex-wrap: wrap; gap: var(--e3); }
.hero__selos{
  margin-top: var(--e5); padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4);
  font-size: 15px; font-weight: 600;
}
.hero__selos li{ display: flex; align-items: center; gap: 8px; }
.hero__selos svg{ width: 18px; height: 18px; flex: none; }

.hero__foto{
  position: relative;
  border: var(--borda);
  border-radius: var(--r-img);
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--preto);
  background: var(--branco);
  aspect-ratio: 4 / 5;
}
.hero__foto img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px){ .hero__foto{ aspect-ratio: 4 / 4.4; } }

/* Confetes do hero. Ficam nas sobras da grade — nunca por cima da foto nem
   metade fora da tela — e somem no celular, onde não há sobra nenhuma. */
.hero .c1, .hero .c2, .hero .c3{ display: none; }
@media (min-width: 900px){
  .hero .c1{ display: block; top: 3%;    right: 2%;  width: 62px; height: 62px; }
  .hero .c2{ display: block; bottom: 4%; left: 1.5%; width: 74px; height: 74px; }
  .hero .c3{ display: block; top: 8%;    left: 3%;   width: 26px; height: 26px; }
}
@media (min-width: 1300px){
  .hero .c1{ right: 3.5%; } .hero .c2{ left: 3%; }
}

/* ============================================================ problema == */

.problema{ background: var(--branco); }
.problema__caixa{ max-width: 940px; margin-inline: auto; text-align: center; }
.problema__lista{
  list-style: none; margin: var(--e6) 0 0; padding: 0;
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  text-align: left;
}
.problema__lista li{
  border: var(--borda);
  border-radius: var(--r-card);
  padding: var(--e4);
  background: var(--branco);
  box-shadow: var(--dura-sm);
  font-weight: 600;
  display: flex; align-items: center; gap: 12px;
}
.problema__lista svg{ width: 22px; height: 22px; flex: none; color: var(--magenta); }
.problema__fecho{
  margin-top: var(--e6);
  border: var(--borda); border-radius: var(--r-card);
  background: var(--amarelo);
  box-shadow: var(--dura);
  padding: var(--e5) var(--e4);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.1;
}

/* ============================================================= solução == */

.solucao{ background: var(--rosa-claro); border-block: var(--borda); }
.solucao__topo{ text-align: center; max-width: 780px; margin-inline: auto; }
.solucao__grade{
  margin-top: var(--e6);
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/* Os cinco itens da oferta são um conjunto: ou cabem os cinco na mesma linha,
   ou vão para duas linhas de tamanho parecido. O auto-fit sozinho deixava um
   card órfão embaixo de quatro. */
@media (min-width: 620px) and (max-width: 1039px){
  .solucao__grade{ grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
}
@media (min-width: 1040px){
  .solucao__grade{ grid-template-columns: repeat(5, 1fr); gap: var(--e3); }
  .item{ padding: var(--e4) var(--e3); }
}
.item{
  border: var(--borda); border-radius: var(--r-card);
  background: var(--branco);
  box-shadow: var(--dura-sm);
  padding: var(--e4);
  text-align: center;
}
.item__icone{
  width: 62px; height: 62px; margin: 0 auto var(--e3);
  display: grid; place-items: center;
  border: var(--borda); border-radius: 50%;
}
.item__icone svg{ width: 28px; height: 28px; }
.item:nth-child(5n+1) .item__icone{ background: var(--amarelo); }
.item:nth-child(5n+2) .item__icone{ background: var(--magenta); color: var(--branco); }
.item:nth-child(5n+3) .item__icone{ background: var(--azul); }
.item:nth-child(5n+4) .item__icone{ background: var(--amarelo); }
.item:nth-child(5n+5) .item__icone{ background: var(--magenta); color: var(--branco); }
.item h3{ margin-bottom: 6px; }
.item p{ margin: 0; font-size: 15px; color: var(--cinza); }

.solucao__nota{ margin-top: var(--e5); text-align: center; }

/* ========================================================= como funciona */

.passos{ background: var(--branco); }
.passos__topo{ text-align: center; max-width: 760px; margin-inline: auto; }
.passos__grade{
  margin-top: var(--e6);
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.passo{
  position: relative;
  border: var(--borda); border-radius: var(--r-card);
  padding: var(--e5) var(--e4) var(--e4);
  box-shadow: var(--dura-sm);
  background: var(--branco);
}
.passo__num{
  position: absolute; top: -22px; left: var(--e4);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-family: 'Anton', sans-serif; font-size: 22px;
  border: var(--borda); border-radius: 50%;
  background: var(--amarelo);
  box-shadow: var(--dura-sm);
}
.passo:nth-child(2) .passo__num{ background: var(--magenta); color: var(--branco); }
.passo:nth-child(3) .passo__num{ background: var(--azul); }
.passo:nth-child(4) .passo__num{ background: var(--branco); }
.passo h3{ margin-bottom: 8px; }
.passo p{ margin: 0; font-size: 15px; color: var(--cinza); }

/* ============================================================= galeria == */

.galeria{ background: var(--azul-claro); border-block: var(--borda); }
.galeria__topo{ text-align: center; max-width: 780px; margin-inline: auto; }
.galeria__grade{
  margin-top: var(--e6);
  display: grid; gap: var(--e3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){ .galeria__grade{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px){ .galeria__grade{ grid-template-columns: repeat(4, 1fr); } }

.galeria__foto{
  position: relative;
  border: var(--borda); border-radius: var(--r-img);
  overflow: hidden;
  box-shadow: var(--dura-sm);
  background: var(--branco);
  aspect-ratio: 1;
}
.galeria__foto img{ width: 100%; height: 100%; object-fit: cover; }
/* Uma peça vertical quebra o ritmo do mosaico. Ocupa duas linhas em qualquer
   largura — assim as 11 fotos sempre fecham 12 células e nenhuma sobra órfã.
   Sem aspect-ratio: a altura vem das duas linhas do grid mais o intervalo,
   que muda com a largura da coluna. */
.galeria__foto--alta{ grid-row: span 2; aspect-ratio: auto; }

.galeria__acao{ margin-top: var(--e6); text-align: center; }

/* ========================================================== depoimentos = */

.provas{ background: var(--branco); }
.provas__topo{ text-align: center; max-width: 780px; margin-inline: auto; }
.provas__grade{
  margin-top: var(--e6);
  display: grid; gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.prova{
  border: var(--borda); border-radius: var(--r-card);
  padding: var(--e4);
  box-shadow: var(--dura-sm);
  display: flex; flex-direction: column; gap: var(--e3);
}
.prova:nth-child(3n+1){ background: var(--creme); }
.prova:nth-child(3n+2){ background: var(--rosa-claro); }
.prova:nth-child(3n+3){ background: var(--azul-claro); }
.prova__estrelas{ display: flex; gap: 3px; color: var(--magenta); }
.prova__estrelas svg{ width: 18px; height: 18px; }
.prova p{ margin: 0; font-size: 16px; }
.prova__autor{ margin-top: auto; font-weight: 700; font-size: 15px; }
.prova__autor span{ display: block; font-weight: 400; font-size: 13px; color: var(--cinza); }

/* ============================================================ CTA final = */

.fecho{
  position: relative;
  background: var(--magenta);
  border-block: var(--borda);
  color: var(--branco);
  overflow: hidden;
  text-align: center;
}
.fecho .wrap{ position: relative; z-index: 1; max-width: 820px; }
.fecho .h2{ color: var(--branco); text-shadow: 4px 4px 0 var(--preto); }
.fecho .corpo{ font-size: clamp(17px, 2.5vw, 20px); font-weight: 500; }
.fecho__acao{ margin-top: var(--e5); }
.fecho .c1, .fecho .c2{ display: none; }
@media (min-width: 900px){
  .fecho .c1{ display: block; top: 14%;    left: 4%;   width: 64px; height: 64px; }
  .fecho .c2{ display: block; bottom: 12%; right: 4.5%; width: 76px; height: 76px; }
}

/* ============================================================== rodapé == */

.rodape{ background: var(--preto); color: var(--branco); padding-block: var(--e6); }
.rodape__grade{
  display: grid; gap: var(--e5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px){ .rodape__grade{ grid-template-columns: 1.2fr 1fr 1fr; } }
.rodape__logo{ height: 52px; width: auto; margin-bottom: var(--e3); }
.rodape h4{
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: 15px; letter-spacing: .06em; margin: 0 0 var(--e3);
  color: var(--amarelo);
}
.rodape p, .rodape a{ font-size: 15px; color: #D9D9D9; margin: 0 0 8px; }
.rodape a{ text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.rodape a:hover{ color: var(--amarelo); text-decoration: underline; }
.rodape svg{ width: 18px; height: 18px; flex: none; }
.rodape__base{
  margin-top: var(--e6); padding-top: var(--e4);
  border-top: 1px solid #2A2A2A;
  display: flex; flex-wrap: wrap; gap: var(--e3);
  justify-content: space-between; align-items: center;
  font-size: 13px; color: #9A9A9A;
}
.rodape__base a{ font-size: 13px; margin: 0; }
.rodape__base strong a{ color: var(--branco); font-weight: 700; }

/* ==================================================== barra fixa mobile = */

.barra{
  position: fixed; inset: auto 0 0 0; z-index: 55;
  background: var(--amarelo);
  border-top: var(--borda);
  padding: 10px var(--e3) calc(10px + env(safe-area-inset-bottom));
  display: none;
}
.barra .btn{ width: 100%; box-shadow: var(--dura-sm); }
@media (max-width: 620px){
  .barra{ display: block; }
  body{ padding-bottom: 84px; }
}

/* ================================================================ modal = */

.modal{
  position: fixed; inset: 0; z-index: 100;
  display: none;
  background: rgba(0,0,0,.62);
  padding: var(--e3);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal.aberto{ display: grid; place-items: start center; }
@media (min-width: 700px){ .modal.aberto{ place-items: center; } }

.modal__painel{
  position: relative;
  width: 100%; max-width: 560px;
  margin-block: var(--e4);
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--r-card);
  box-shadow: 10px 10px 0 var(--preto);
  padding: var(--e5) var(--e4) var(--e4);
}
@media (min-width: 700px){ .modal__painel{ padding: var(--e6) var(--e5) var(--e5); } }

.modal__fechar{
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: var(--borda); border-radius: 50%;
  background: var(--amarelo);
  cursor: pointer;
}
.modal__fechar svg{ width: 20px; height: 20px; }
.modal__fechar:hover{ background: var(--magenta); color: var(--branco); }

.modal__titulo{
  font-size: clamp(23px, 4.8vw, 34px);
  margin-bottom: var(--e2);
  padding-right: 44px;      /* espaço do botão de fechar */
  text-wrap: balance;       /* evita o emoji sozinho na última linha */
}
.modal__texto{ font-size: 15px; color: var(--cinza); margin: 0 0 var(--e4); }

/* ============================================================= campos === */

.campo{ margin-bottom: var(--e3); }
.campo > label,
.campo > .rotulo{
  display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px;
}
.campo .obrig{ color: var(--magenta); }

.campo input[type=text],
.campo input[type=tel],
.campo input[type=email],
.campo input[type=date],
.campo input[type=number],
.campo select{
  width: 100%;
  font: inherit; font-size: 16px;   /* 16px evita o zoom automático do iOS */
  color: var(--preto);
  background: var(--branco);
  padding: 13px 15px;
  border: 2px solid var(--preto);
  border-radius: 12px;
  appearance: none;
}
.campo select{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.campo input:focus, .campo select:focus{
  outline: none; border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255,42,166,.22);
}
.campo.erro input, .campo.erro select, .campo.erro .caixas{
  border-color: #D40000; background: #FFF5F5;
}
.campo.erro .aviso{ display: block; }
.aviso{ display: none; font-size: 13px; color: #D40000; margin-top: 5px; font-weight: 600; }

.dupla{ display: grid; gap: var(--e3); }
@media (min-width: 560px){ .dupla{ grid-template-columns: 1fr 1fr; } }

/* seleção múltipla em forma de pastilha */
.caixas{
  display: flex; flex-wrap: wrap; gap: 8px;
  border: 2px solid transparent; border-radius: 12px;
}
.caixa input{ position: absolute; opacity: 0; pointer-events: none; }
.caixa span{
  display: inline-block;
  font-size: 14px; font-weight: 600;
  padding: 9px 15px;
  border: 2px solid var(--preto);
  border-radius: var(--r-btn);
  background: var(--branco);
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, transform .12s ease;
}
.caixa span:hover{ transform: translateY(-1px); }
.caixa input:checked + span{ background: var(--magenta); color: var(--branco); }
.caixa input:focus-visible + span{ outline: 3px solid var(--azul); outline-offset: 2px; }

/* consentimento */
.consent{ display: flex; gap: 10px; align-items: flex-start; margin-block: var(--e4) var(--e3); }
.consent input{ width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--magenta); }
.consent label{ font-size: 13px; font-weight: 400; color: var(--cinza); line-height: 1.5; }

.girando{
  width: 17px; height: 17px; flex: none;
  border: 2.5px solid rgba(255,255,255,.4);
  border-top-color: var(--branco);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar{ to{ transform: rotate(360deg); } }

/* ========================================================== animação === */

/* A entrada só esconde o conteúdo quando há JS para revelá-lo: sem a classe
   .js no <html> — script bloqueado, erro antes do observer — tudo nasce
   visível, e nenhuma seção pode ficar invisível para sempre. */
.js .sobe{ opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.js .sobe.vis{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .sobe{ opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- ajustes
   Regras que antes viviam em atributos style= no HTML. */
figure{ margin: 0; }
.rodape__logo{ border: var(--borda); border-radius: 14px; height: 66px; }
.rodape__slogan{ margin-top: var(--e3); }
.rodape__acao{ cursor: pointer; }
.rodape__icone{ vertical-align: -3px; }
.rodape__nota{ color: #9A9A9A; }
.solucao__nota{ margin-inline: auto; max-width: 640px; }
.modal__consent-aviso{ margin-bottom: var(--e2); }
.modal__enviar{ margin-top: var(--e2); }
.modal__lgpd{ text-align: center; margin: 14px 0 0; }
.badge--espaco{ margin-bottom: var(--e4); }