/* ==========================================================================
   TEMA HALLOWEEN PRAIA ADVENTURE
   Coleção MD TEC Convites.

   A IDEIA
   A tarde, não a noite. Creme de fundo, roxo nos títulos e nos blocos
   escuros, laranja para confirmar, teal para destacar. A letra de
   Halloween só no título; o resto é condensado e direto, para ler bem no
   celular. Morcegos e abóboras ficam nas bordas, sem roubar a cena.

   O QUE VEIO DO HALLOWEEN PREMIUM
   Imagem com luz de cinema (contraste, vinheta, brilho âmbar na borda),
   sombra funda e em camadas, um fio âmbar nos detalhes, a lanterna acesa
   no bloco roxo e a hierarquia do convite.

   Tudo escopado em .hpa. As cores do motor (--sdc-*) saem daqui, então o
   formulário e o passe seguem o tema sem uma linha a mais.
   ========================================================================== */

:root{
  --hpa-creme:#FFF7E9;
  --hpa-roxo:#250E3C;
  --hpa-laranja:#FA5B24;
  --hpa-teal:#007E87;
  --hpa-lilas:#D8B9F0;
  --hpa-ambar:#E8A33D;
  --hpa-verde:#15803D;
}

.hpa{
  /* Tons derivados: trocar a cor no painel arrasta o conjunto. */
  --hpa-roxo-2:color-mix(in srgb, var(--hpa-roxo) 82%, #6a2f8f);
  --hpa-roxo-suave:color-mix(in srgb, var(--hpa-roxo) 62%, var(--hpa-creme));
  --hpa-lilas-claro:color-mix(in srgb, var(--hpa-lilas) 38%, var(--hpa-creme));
  --hpa-fio:color-mix(in srgb, var(--hpa-roxo) 14%, transparent);
  --hpa-fio-forte:color-mix(in srgb, var(--hpa-roxo) 24%, transparent);
  --hpa-ambar-brilho:color-mix(in srgb, var(--hpa-ambar) 55%, transparent);
  --hpa-sombra:0 1px 2px color-mix(in srgb, var(--hpa-roxo) 10%, transparent),
               0 18px 40px -18px color-mix(in srgb, var(--hpa-roxo) 45%, transparent),
               0 40px 80px -40px color-mix(in srgb, var(--hpa-roxo) 40%, transparent);
  --hpa-sombra-funda:0 2px 4px color-mix(in srgb, var(--hpa-roxo) 12%, transparent),
                     0 30px 60px -22px color-mix(in srgb, var(--hpa-roxo) 60%, transparent),
                     0 70px 120px -60px color-mix(in srgb, var(--hpa-roxo) 55%, transparent);

  --hpa-halloween:'Creepster','Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --hpa-condensada:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --hpa-texto:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Contrato com o motor */
  --sdc-fundo:var(--hpa-creme);
  --sdc-superficie:#FFFFFF;
  --sdc-texto:var(--hpa-roxo);
  --sdc-texto-suave:var(--hpa-roxo-suave);
  --sdc-destaque:var(--hpa-verde);
  --sdc-destaque-texto:#FFFFFF;
  --sdc-acento:var(--hpa-teal);
  --sdc-fio:var(--hpa-fio-forte);
  --sdc-erro:#C2271A;
  --sdc-fonte-texto:var(--hpa-texto);
  --sdc-fonte-titulo:var(--hpa-condensada);
  --sdc-raio-controle:10px;
  /* Passe claro, como a página, com as faixas roxas. */
  --sdc-passe-fundo:#FFFCF6;
  --sdc-passe-caixa:color-mix(in srgb, var(--hpa-lilas) 22%, #fff);
  --sdc-passe-tinta:var(--hpa-roxo);
  --sdc-passe-rotulo:var(--hpa-roxo-suave);
  --sdc-passe-faixa:var(--hpa-roxo);
  --sdc-passe-faixa-texto:var(--hpa-creme);
  --sdc-passe-borda:var(--hpa-lilas);
  --sdc-passe-fio:color-mix(in srgb, var(--hpa-lilas) 55%, #fff);

  --hpa-gutter:clamp(18px,5vw,72px);
  --hpa-largura-max:1280px;

  position:relative;isolation:isolate;
  min-height:100vh;
  background:var(--hpa-creme);
  color:var(--hpa-roxo);
  font-family:var(--hpa-texto);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  overflow-x:clip;
}
:where(.hpa) p{margin:0 0 1em;text-wrap:pretty;}
:where(.hpa) h1,:where(.hpa) h2,:where(.hpa) h3{margin:0;text-wrap:balance;}
:where(.hpa) a{color:inherit;}
:where(.hpa) ul,:where(.hpa) ol{list-style:none;margin:0;padding:0;}
:where(.hpa) figure{margin:0;}
.hpa ::selection{background:var(--hpa-laranja);color:var(--hpa-roxo);}
.hpa a:focus-visible,.hpa summary:focus-visible,.hpa button:focus-visible{outline:3px solid var(--hpa-teal);outline-offset:4px;border-radius:6px;}
body.sdc-tela-cheia:has(.hpa){background:var(--hpa-creme);color:var(--hpa-roxo);}

.hpa-largura{position:relative;z-index:1;width:100%;max-width:var(--hpa-largura-max);margin:0 auto;padding-left:var(--hpa-gutter);padding-right:var(--hpa-gutter);}
.hpa-secao{padding-top:clamp(44px,7vw,92px);padding-bottom:clamp(44px,7vw,92px);}
.hpa-secao + .hpa-secao{padding-top:clamp(16px,3vw,40px);}

/* ---------------- fundo: brilho e céu ---------------- */
.hpa-ceu{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;}
.hpa-brilho{position:fixed;border-radius:50%;pointer-events:none;z-index:-2;filter:blur(60px);opacity:.34;animation:hpa-brilho 20s ease-in-out infinite alternate;}
.hpa-brilho--um{width:46vw;height:46vw;left:-24vw;top:16%;background:var(--hpa-lilas);}
.hpa-brilho--dois{width:38vw;height:38vw;right:-22vw;top:4%;background:color-mix(in srgb, var(--hpa-laranja) 45%, #ffd2a8);animation-delay:-10s;}
@keyframes hpa-brilho{to{transform:translate(12vw,12vh) scale(1.25);}}

/* ---------------- decoração de Halloween ---------------- */
.hpa-decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:clip;contain:layout paint;}
.hpa-voa{position:absolute;width:56px;fill:var(--hpa-roxo);opacity:.42;animation:hpa-voa 18s ease-in-out infinite;}
.hpa-voa svg{display:block;width:100%;animation:hpa-asa 2.2s ease-in-out infinite;transform-origin:center;}
.hpa-voa--1{top:150px;left:2%;width:38px;}
.hpa-voa--2{top:980px;right:2%;width:58px;animation-delay:-5s;}
.hpa-voa--3{top:1900px;left:1.5%;fill:var(--hpa-lilas);opacity:.7;animation-delay:-9s;}
.hpa-voa--4{top:3100px;right:3%;width:44px;animation-delay:-3s;}
.hpa-abobora{position:absolute;width:96px;opacity:.85;animation:hpa-balanca 11s ease-in-out infinite;}
.hpa-abobora svg{display:block;width:100%;filter:drop-shadow(0 0 6px color-mix(in srgb, var(--hpa-laranja) 30%, transparent));animation:hpa-acesa 3.2s ease-in-out infinite;}
.hpa-abobora--1{top:820px;right:-18px;}
.hpa-abobora--2{top:2350px;left:-22px;width:80px;animation-delay:-4s;}
.hpa-abobora--3{bottom:340px;right:-16px;width:72px;animation-delay:-7s;}
.hpa-teia{position:absolute;right:0;top:0;width:170px;color:var(--hpa-roxo-2);opacity:.2;transform:rotate(90deg);transform-origin:top right;}
.hpa-teia svg{display:block;width:100%;}
@keyframes hpa-voa{0%,100%{transform:translate(0,0) rotate(-10deg);}35%{transform:translate(18px,-26px) rotate(8deg);}70%{transform:translate(-8px,12px) rotate(-5deg);}}
@keyframes hpa-asa{50%{transform:scaleY(.66) rotate(4deg);}}
@keyframes hpa-balanca{0%,100%{transform:translateY(0) rotate(-6deg);}50%{transform:translateY(-12px) rotate(6deg);}}
@keyframes hpa-acesa{50%{filter:drop-shadow(0 0 14px color-mix(in srgb, var(--hpa-laranja) 60%, transparent));}}

/* ---------------- tipografia ---------------- */
.hpa-rotulo{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--hpa-roxo);
}
.hpa-rotulo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hpa-laranja);box-shadow:0 0 0 4px color-mix(in srgb, var(--hpa-laranja) 18%, transparent);}
.hpa-rotulo--claro{color:var(--hpa-creme);}
.hpa-h2{
  font-family:var(--hpa-condensada);font-weight:800;
  font-size:clamp(38px,5.4vw,70px);line-height:1;letter-spacing:-.01em;
  color:var(--hpa-roxo);margin:0 0 18px;
}
.hpa-h2 span,.hpa-h2 em{display:block;}
.hpa-h2 em{font-style:normal;color:var(--hpa-teal);}
.hpa-texto{font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:color-mix(in srgb, var(--hpa-roxo) 86%, transparent);max-width:56ch;}
.hpa-miudo{margin:16px 0 0;font-size:12px;line-height:1.6;opacity:.7;}
.hpa-miudo--claro{color:var(--hpa-creme);}
.hpa-teal{color:var(--hpa-teal);}

/* ======================= TOPO ======================= */
.hpa-topo{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px clamp(16px,2.4vw,28px);
  background:var(--hpa-roxo);color:var(--hpa-creme);
  border-radius:0 0 24px 24px;
  box-shadow:0 16px 36px -22px color-mix(in srgb, var(--hpa-roxo) 80%, transparent);
}
.hpa-topo::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--hpa-ambar-brilho),transparent);}
.hpa-topo__logo{width:clamp(138px,15vw,186px);height:auto;}
.hpa-topo__nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700;}
.hpa-topo__nav a{text-decoration:none;opacity:.92;}
.hpa-topo__nav a:hover{opacity:1;color:var(--hpa-lilas);}
.hpa .hpa-pilula{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:30px;background:var(--hpa-verde);color:#fff;box-shadow:3px 3px 0 var(--hpa-laranja);transition:transform .2s ease,box-shadow .2s ease;}
.hpa .hpa-pilula:hover{color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--hpa-laranja);}

/* ======================= ABERTURA ======================= */
.hpa-abertura{
  position:relative;
  display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(26px,4vw,48px) 0 clamp(30px,4vw,56px);
}
.hpa-abertura__texto{min-width:0;}

.hpa-selo{
  display:inline-flex;align-items:center;gap:16px;
  padding:13px 22px;border-radius:15px;
  background:color-mix(in srgb, var(--hpa-roxo) 90%, #3b1556);color:var(--hpa-creme);
  border:1px solid color-mix(in srgb, var(--hpa-lilas) 70%, transparent);
  box-shadow:5px 5px 0 var(--hpa-laranja),0 14px 34px -14px color-mix(in srgb, var(--hpa-roxo) 70%, transparent);
  transform:rotate(-2deg);
  animation:hpa-selo 6s ease-in-out infinite;
}
.hpa-selo div{text-align:center;}
.hpa-selo small{display:block;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hpa-lilas);margin-bottom:4px;}
.hpa-selo strong{display:block;font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(28px,3vw,34px);line-height:1.02;letter-spacing:.01em;}
.hpa-selo em{display:block;font-style:normal;font-size:10px;letter-spacing:.06em;margin-top:6px;color:var(--hpa-lilas);}
.hpa-selo__estrela{font-size:22px;color:color-mix(in srgb, var(--hpa-laranja) 70%, #ffc28a);animation:hpa-gira 14s linear infinite;}
@keyframes hpa-selo{0%,100%{transform:rotate(-2deg) translateY(0);}50%{transform:rotate(0) translateY(-4px);}}
@keyframes hpa-gira{to{transform:rotate(360deg);}}

.hpa-abertura__publico{margin:24px 0 0;}
.hpa-titulo{margin:14px 0 10px;transform:rotate(-2deg);transform-origin:left center;}
.hpa-titulo__halloween,.hpa-titulo__ola{
  display:block;
  font-family:var(--hpa-halloween);font-weight:400;
  font-size:clamp(68px,9.2vw,138px);line-height:.95;letter-spacing:.01em;
  color:var(--hpa-roxo);
  text-shadow:2px 3px 0 var(--hpa-laranja),0 18px 40px color-mix(in srgb, var(--hpa-roxo) 22%, transparent);
}
.hpa-titulo small{
  display:block;margin-top:2px;
  font-family:var(--hpa-condensada);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4vw,58px);line-height:1.05;letter-spacing:-.01em;white-space:nowrap;
  color:var(--hpa-roxo);
}
.hpa-abertura__apoio{font-size:clamp(15px,1.4vw,17px);line-height:1.65;max-width:52ch;margin:16px 0 20px;}

/* Data e horário: o bloco que a designer desenhou, com a sombra lilás. */
.hpa-quando{
  display:inline-flex;align-items:stretch;overflow:hidden;
  background:var(--hpa-roxo);color:var(--hpa-creme);
  border-radius:12px;transform:rotate(-1deg);
  box-shadow:5px 5px 0 var(--hpa-lilas),var(--hpa-sombra);
  margin:2px 0 22px;
}
.hpa-quando span{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.hpa-quando__data{background:var(--hpa-laranja);color:var(--hpa-roxo);padding:12px 20px;text-align:center;}
.hpa-quando__data strong{display:block;font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(44px,4.4vw,56px);line-height:1;margin-top:2px;}
.hpa-quando__hora{padding:12px 22px;display:flex;flex-direction:column;justify-content:center;}
.hpa-quando__hora strong{display:block;font-family:var(--hpa-condensada);font-weight:700;font-size:clamp(26px,2.6vw,33px);line-height:1.15;margin:3px 0;white-space:nowrap;}
.hpa-quando__hora small{font-size:11px;opacity:.82;}

.hpa-abertura__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}
.hpa-convite-acao{position:relative;display:inline-flex;margin-right:44px;}
.hpa-convite-acao__morcego{position:absolute;right:-46px;top:-18px;width:58px;fill:var(--hpa-roxo);animation:hpa-morcego-botao 5s ease-in-out infinite;pointer-events:none;}
.hpa-convite-acao__morcego svg{display:block;width:100%;}
@keyframes hpa-morcego-botao{0%,100%{transform:translateY(0) rotate(-12deg);}50%{transform:translateY(-9px) rotate(5deg);}}
.hpa a.hpa-botao-convite,.hpa a.hpa-cta__botao{
  background:var(--hpa-verde);color:#fff;
  min-height:56px;padding:16px 30px;border-radius:12px;
  font-size:14px;letter-spacing:.08em;
  box-shadow:4px 4px 0 var(--hpa-laranja),0 18px 34px -16px color-mix(in srgb, var(--hpa-roxo) 75%, transparent);
  animation:hpa-convida 3.2s ease-in-out infinite;
}
.hpa a.hpa-botao-convite:hover,.hpa a.hpa-cta__botao:hover{color:#fff;background:color-mix(in srgb, var(--hpa-verde) 88%, #000);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hpa-laranja),0 22px 40px -16px color-mix(in srgb, var(--hpa-roxo) 80%, transparent);}
@keyframes hpa-convida{0%,100%{box-shadow:4px 4px 0 var(--hpa-laranja),0 18px 34px -16px color-mix(in srgb, var(--hpa-roxo) 75%, transparent),0 0 0 0 color-mix(in srgb, var(--hpa-laranja) 0%, transparent);}50%{box-shadow:4px 4px 0 var(--hpa-laranja),0 18px 34px -16px color-mix(in srgb, var(--hpa-roxo) 75%, transparent),0 0 0 7px color-mix(in srgb, var(--hpa-laranja) 18%, transparent);}}
.hpa-link-desce{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:700;text-underline-offset:6px;text-decoration-thickness:1px;}
.hpa-link-desce::after{content:"↓";margin-left:8px;color:var(--hpa-laranja);}
.hpa-boasvindas{
  margin:22px 0 0;max-width:46ch;
  padding:12px 16px;border-radius:10px;border-left:3px solid var(--hpa-teal);
  background:color-mix(in srgb, var(--hpa-lilas) 26%, transparent);
  font-size:13px;line-height:1.6;color:var(--hpa-teal);font-weight:500;
}

/* O arco com a foto: moldura lilás girada, luz âmbar e vinheta de cinema. */
.hpa-arco{position:relative;justify-self:end;width:100%;max-width:560px;padding:8px;}
.hpa-arco::before{
  content:"";position:absolute;inset:0;border-radius:48% 48% 30px 30px;
  background:linear-gradient(160deg,var(--hpa-lilas),color-mix(in srgb, var(--hpa-lilas) 60%, var(--hpa-ambar)));
  transform:rotate(3deg);animation:hpa-moldura 12s ease-in-out infinite;
  box-shadow:var(--hpa-sombra);
}
@keyframes hpa-moldura{50%{transform:rotate(-1.5deg) translateY(-4px);}}
.hpa-arco__foto{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:4/5;max-height:620px;
  border-radius:44% 44% 22px 22px;background:#efe1dd;
  box-shadow:var(--hpa-sombra-funda);
}
.hpa-arco__foto img,.hpa-arco__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.05);
  animation:hpa-respira 14s ease-in-out infinite alternate;
}
.hpa-arco__video{pointer-events:none;animation:none;}
.hpa-arco__video::-webkit-media-controls,.hpa-arco__video::-webkit-media-controls-panel,.hpa-arco__video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none;opacity:0;}
@keyframes hpa-respira{to{transform:scale(1.045) translateY(-4px);}}
/* Luz de cinema: vinheta funda embaixo, brilho âmbar na borda e um reflexo
   que atravessa a foto devagar. */
.hpa-arco__luz{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 110%,color-mix(in srgb, var(--hpa-roxo) 55%, transparent),transparent 55%),
    radial-gradient(80% 60% at 100% 0%,color-mix(in srgb, var(--hpa-ambar) 30%, transparent),transparent 60%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent),inset 0 -60px 80px -40px color-mix(in srgb, var(--hpa-roxo) 50%, transparent);
  border-radius:inherit;
}
.hpa-arco__luz::after{
  content:"";position:absolute;inset:-20% -60%;
  background:linear-gradient(105deg,transparent 42%,color-mix(in srgb, #fff 22%, transparent) 50%,transparent 58%);
  transform:translateX(-60%);animation:hpa-reflexo 9s ease-in-out infinite;
}
@keyframes hpa-reflexo{0%,55%{transform:translateX(-60%);}85%,100%{transform:translateX(60%);}}
.hpa-arco__morcego{position:absolute;right:10px;top:16px;width:68px;fill:var(--hpa-roxo);transform:rotate(14deg);animation:hpa-voa 6s ease-in-out infinite;z-index:2;}
.hpa-arco__morcego svg{display:block;width:100%;}
.hpa-carimbo{
  position:absolute;z-index:2;right:-6px;bottom:42px;
  width:112px;height:112px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--hpa-laranja);color:var(--hpa-roxo);
  border:5px solid var(--hpa-creme);
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--hpa-roxo) 70%, transparent);
  transform:rotate(10deg);animation:hpa-carimbo 10s ease-in-out infinite;
}
.hpa-carimbo small{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;}
.hpa-carimbo strong{font-family:var(--hpa-condensada);font-weight:800;font-size:36px;line-height:1;margin:2px 0;}
@keyframes hpa-carimbo{0%,100%{transform:rotate(8deg);}50%{transform:rotate(14deg);}}

/* ======================= FAIXA QUE CORRE ======================= */
.hpa-faixa{
  position:relative;z-index:1;overflow:hidden;
  background:var(--hpa-teal);color:var(--hpa-creme);
  padding:16px 0;transform:rotate(-1deg);margin:6px -2vw 0;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 16px 30px -18px color-mix(in srgb, var(--hpa-teal) 80%, transparent);
}
.hpa-faixa::before,.hpa-faixa::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--hpa-ambar-brilho),transparent);}
.hpa-faixa::before{top:4px;}.hpa-faixa::after{bottom:4px;}
.hpa-faixa div{display:flex;align-items:center;width:max-content;animation:hpa-corre 40s linear infinite;}
.hpa-faixa span{padding:0 24px;white-space:nowrap;}
.hpa-faixa b{color:var(--hpa-ambar);font-weight:400;}
@keyframes hpa-corre{to{transform:translateX(-50%);}}

/* ======================= UMA TARDE FORA DO COMUM ======================= */
.hpa-tarde__cabeca{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,64px);align-items:end;margin-bottom:clamp(24px,3.5vw,40px);}
.hpa-tarde__cabeca .hpa-h2{margin-bottom:0;}
.hpa-tarde__lado .hpa-texto{margin-bottom:16px;}
.hpa-companhia{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
.hpa-companhia li{
  padding:9px 15px;border-radius:30px;font-size:13px;font-weight:700;
  background:#fff;border:1px solid var(--hpa-fio-forte);
  box-shadow:0 6px 16px -10px color-mix(in srgb, var(--hpa-roxo) 40%, transparent);
}
.hpa-companhia li::before{content:"♥";color:var(--hpa-laranja);margin-right:8px;font-size:11px;}
.hpa-nota-acomp{margin:0;font-size:13px;color:var(--hpa-teal);font-weight:500;}

.hpa-sabores{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,28px);}
.hpa-sabores--um{grid-template-columns:1fr;}
.hpa-sabor{
  position:relative;overflow:hidden;isolation:isolate;
  height:clamp(260px,34vw,460px);border-radius:18px;color:#fff;
  box-shadow:var(--hpa-sombra-funda);
}
.hpa-sabor img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.06);transition:transform .7s ease;}
.hpa-sabor:hover img{transform:scale(1.04);}
.hpa-sabor::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,transparent 30%,color-mix(in srgb, #12061e 88%, transparent) 100%),
    radial-gradient(90% 60% at 50% 0%,color-mix(in srgb, var(--hpa-ambar) 18%, transparent),transparent 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent);border-radius:inherit;
}
.hpa-sabor__texto{position:absolute;left:clamp(14px,2.4vw,30px);right:clamp(14px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:1;}
.hpa-sabor__texto span{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--hpa-lilas);padding-bottom:6px;border-bottom:1px solid var(--hpa-ambar-brilho);}
.hpa-sabor__texto h3{font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.02;margin:8px 0 6px;}
.hpa-sabor__texto p{margin:0;font-size:13px;line-height:1.5;opacity:.9;max-width:32ch;}

/* Botão de confirmar no meio da página. */
.hpa-cta{margin-top:clamp(26px,3.5vw,40px);display:flex;justify-content:center;}

/* ======================= ENTRE UM BRINDE E OUTRO ======================= */
.hpa-projeto{
  position:relative;z-index:1;overflow:clip;
  background:
    radial-gradient(70% 60% at 85% 0%,color-mix(in srgb, var(--hpa-ambar) 16%, transparent),transparent 60%),
    radial-gradient(60% 50% at 0% 100%,color-mix(in srgb, var(--hpa-teal) 22%, transparent),transparent 60%),
    var(--hpa-roxo);
  color:var(--hpa-creme);
  padding:clamp(48px,7vw,96px) 0;
}
.hpa-projeto::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--hpa-ambar-brilho),transparent);}
.hpa-projeto__cabeca{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-bottom:clamp(24px,3.5vw,40px);}
.hpa-projeto__cabeca > div{max-width:760px;}
.hpa-projeto .hpa-h2{color:var(--hpa-creme);}
.hpa-projeto .hpa-h2 em{color:var(--hpa-lilas);}
.hpa-paragrafos p{font-size:clamp(15px,1.4vw,16.5px);line-height:1.8;color:color-mix(in srgb, var(--hpa-creme) 84%, var(--hpa-lilas));max-width:62ch;}
.hpa-tags{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0;}
.hpa-tags li{padding:8px 14px;border:1px solid color-mix(in srgb, var(--hpa-creme) 26%, transparent);border-radius:30px;font-size:12px;font-weight:500;background:color-mix(in srgb, var(--hpa-creme) 5%, transparent);}
.hpa-lanterna{
  width:clamp(110px,14vw,190px);height:auto;align-self:start;
  filter:drop-shadow(0 0 30px var(--hpa-ambar-brilho)) drop-shadow(0 20px 30px rgba(0,0,0,.4));
  animation:hpa-lanterna 7s ease-in-out infinite;
}
@keyframes hpa-lanterna{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-10px) rotate(3deg);}}

.hpa-galeria{display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-auto-rows:clamp(150px,19vw,250px);gap:clamp(9px,1.2vw,16px);}
.hpa-galeria figure{position:relative;overflow:hidden;isolation:isolate;border-radius:14px;box-shadow:0 24px 50px -24px rgba(0,0,0,.65);}
.hpa-galeria figure:first-child{grid-row:span 2;}
.hpa-galeria--1{grid-template-columns:1fr;}
.hpa-galeria--1 figure:first-child{grid-row:span 2;}
.hpa-galeria--2{grid-template-columns:1fr 1fr;}
.hpa-galeria--4 figure:nth-child(4){grid-column:span 2;}
.hpa-galeria--6 figure:nth-child(6){grid-column:span 3;}
.hpa-galeria img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.06);transition:transform .7s ease;}
.hpa-galeria figure:hover img{transform:scale(1.05);}
.hpa-galeria figure::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);background:radial-gradient(100% 70% at 50% 0%,color-mix(in srgb, var(--hpa-ambar) 12%, transparent),transparent 65%);}
.hpa-galeria figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:36px 16px 15px;font-size:12px;font-weight:500;background:linear-gradient(transparent,color-mix(in srgb, #12061e 82%, transparent));}

/* ======================= O PROJETO COMPLETO ======================= */
.hpa-visao__cabeca{max-width:820px;margin-bottom:clamp(24px,3.5vw,38px);}
.hpa-panorama{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:22px;aspect-ratio:16/7;margin-bottom:clamp(16px,2.4vw,28px);
  box-shadow:var(--hpa-sombra-funda);
}
.hpa-panorama img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.06);}
.hpa-panorama::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 55%,color-mix(in srgb, var(--hpa-roxo) 70%, transparent)),
    radial-gradient(70% 70% at 90% 10%,color-mix(in srgb, var(--hpa-ambar) 22%, transparent),transparent 60%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent);
}
.hpa-panorama figcaption{position:absolute;left:clamp(16px,2.4vw,28px);bottom:clamp(14px,2vw,22px);z-index:1;color:var(--hpa-creme);font-size:12px;font-weight:500;letter-spacing:.04em;}
.hpa-grupos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,22px);}
.hpa-grupos--1{grid-template-columns:1fr;}
.hpa-grupos--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.hpa-grupos--4{grid-template-columns:repeat(2,minmax(0,1fr));}
.hpa-grupo{
  position:relative;padding:clamp(20px,2.4vw,30px);border-radius:18px;
  background:#fff;border:1px solid var(--hpa-fio);
  box-shadow:var(--hpa-sombra);
}
.hpa-grupo::before{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--hpa-laranja),var(--hpa-ambar));}
.hpa-grupo:nth-child(2)::before{background:linear-gradient(90deg,var(--hpa-teal),color-mix(in srgb, var(--hpa-teal) 40%, var(--hpa-ambar)));}
.hpa-grupo:nth-child(3)::before{background:linear-gradient(90deg,var(--hpa-roxo-2),var(--hpa-lilas));}
.hpa-grupo__icone{display:inline-flex;width:46px;height:46px;padding:9px;border-radius:12px;background:var(--hpa-lilas-claro);color:var(--hpa-roxo);margin-bottom:14px;}
.hpa-grupo:nth-child(1) .hpa-grupo__icone{color:var(--hpa-teal);}
.hpa-grupo:nth-child(2) .hpa-grupo__icone{color:#2f6b3a;}
.hpa-grupo:nth-child(3) .hpa-grupo__icone{color:var(--hpa-laranja);}
.hpa-grupo__icone svg{width:100%;height:100%;}
.hpa-grupo h3{font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(26px,2.6vw,32px);line-height:1.05;margin:0 0 12px;}
.hpa-grupo ul{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px;}
.hpa-grupo li{font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:20px;background:var(--hpa-creme);border:1px solid var(--hpa-fio);}
.hpa-grupo p{margin:0;font-size:14px;line-height:1.65;color:color-mix(in srgb, var(--hpa-roxo) 82%, transparent);}

/* ======================= A MAQUETE E A EQUIPE ======================= */
.hpa-maquete__grade{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4.5vw,64px);align-items:center;}
.hpa-maquete__foto{position:relative;padding:0 0 0 12px;}
.hpa-maquete__foto img{position:relative;width:100%;aspect-ratio:1000/542;object-fit:cover;border-radius:18px;filter:saturate(1.06) contrast(1.06);
  box-shadow:-12px 12px 0 color-mix(in srgb, var(--hpa-teal) 88%, var(--hpa-roxo)),var(--hpa-sombra-funda);}
.hpa-maquete__foto figcaption{margin-top:26px;font-size:12px;opacity:.75;}
.hpa-maquete__texto .hpa-texto{margin-bottom:0;}
.hpa-passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);margin-top:clamp(28px,4vw,48px);counter-reset:passo;}
.hpa-passos li{position:relative;padding:22px 20px 20px;border-radius:16px;background:color-mix(in srgb, #fff 70%, transparent);border:1px solid var(--hpa-fio);}
.hpa-passos__num{display:block;font-family:var(--hpa-condensada);font-weight:800;font-size:15px;letter-spacing:.06em;color:var(--hpa-laranja);margin-bottom:8px;}
.hpa-passos h3{font-family:var(--hpa-condensada);font-weight:800;font-size:23px;line-height:1.1;margin:0 0 6px;}
.hpa-passos p{margin:0;font-size:13.5px;line-height:1.6;color:color-mix(in srgb, var(--hpa-roxo) 80%, transparent);}

/* "Por que conhecer agora": o bloco que mais herda do Premium. */
.hpa-agora{
  position:relative;overflow:hidden;
  margin-top:clamp(20px,3vw,32px);
  padding:clamp(24px,3.4vw,40px) clamp(22px,4vw,56px);
  border-radius:20px;
  background:
    radial-gradient(60% 120% at 100% 0%,color-mix(in srgb, var(--hpa-ambar) 22%, transparent),transparent 60%),
    var(--hpa-roxo);
  color:var(--hpa-creme);
  box-shadow:var(--hpa-sombra-funda);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(14px,3vw,48px);align-items:start;
}
.hpa-agora::before{content:"";position:absolute;left:clamp(22px,4vw,56px);top:0;width:64px;height:2px;background:var(--hpa-ambar);box-shadow:0 0 14px var(--hpa-ambar-brilho);}
.hpa-agora h3{font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(28px,3vw,38px);line-height:1.05;color:var(--hpa-creme);}
.hpa-agora p{margin:0;font-size:clamp(15px,1.4vw,17px);line-height:1.75;color:color-mix(in srgb, var(--hpa-creme) 86%, var(--hpa-lilas));}

/* ======================= ONDE E QUANDO ======================= */
.hpa-detalhes{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
/* Contagem: quatro casas roxas, número em laranja âmbar, bordas
   alternando lilás e laranja, como um painel de Halloween aceso. */
.hpa-contagem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);max-width:480px;margin:10px 0 28px;}
.hpa-contagem div{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:clamp(14px,1.8vw,20px) 6px clamp(12px,1.5vw,16px);
  border-radius:16px;
  background:
    radial-gradient(120% 80% at 50% 0%,color-mix(in srgb, var(--hpa-ambar) 14%, transparent),transparent 65%),
    linear-gradient(180deg,color-mix(in srgb, var(--hpa-roxo) 86%, #4a1f6e),var(--hpa-roxo));
  border:1px solid color-mix(in srgb, var(--hpa-lilas) 30%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),0 14px 28px -16px color-mix(in srgb, var(--hpa-roxo) 80%, transparent);
}
.hpa-contagem div:nth-child(even){border-color:color-mix(in srgb, var(--hpa-laranja) 60%, var(--hpa-ambar));}
.hpa-contagem b{
  display:block;font-family:var(--hpa-condensada);font-weight:800;
  font-size:clamp(32px,3.6vw,44px);line-height:1;letter-spacing:.01em;
  color:color-mix(in srgb, var(--hpa-ambar) 70%, #ffc77a);
  text-shadow:0 0 18px color-mix(in srgb, var(--hpa-ambar) 45%, transparent);
  font-variant-numeric:tabular-nums;
}
.hpa-contagem span{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--hpa-lilas) 85%, #fff);}
.hpa-perguntas details{border-top:1px solid var(--hpa-fio-forte);padding:15px 0;}
.hpa-perguntas details:last-child{border-bottom:1px solid var(--hpa-fio-forte);}
.hpa-perguntas summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:30px;}
.hpa-perguntas summary::-webkit-details-marker{display:none;}
.hpa-perguntas summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--hpa-lilas-claro);color:var(--hpa-roxo);font-weight:700;transition:transform .25s ease;}
.hpa-perguntas details[open] summary::after{transform:rotate(45deg);background:var(--hpa-laranja);}
.hpa-perguntas p{margin:10px 0 0;font-size:14px;line-height:1.7;color:color-mix(in srgb, var(--hpa-roxo) 82%, transparent);}

.hpa-cartao-evento{
  position:relative;
  background:
    radial-gradient(90% 50% at 50% 0%,color-mix(in srgb, var(--hpa-ambar) 14%, transparent),transparent 70%),
    linear-gradient(170deg,color-mix(in srgb, var(--hpa-lilas) 34%, #fff),color-mix(in srgb, var(--hpa-lilas) 22%, var(--hpa-creme)));
  border:1px solid var(--hpa-fio);border-radius:22px;
  padding:clamp(22px,3vw,34px);
  box-shadow:var(--hpa-sombra);
}
.hpa-cartao-evento__cabeca{text-align:center;margin-bottom:6px;}
.hpa-icone{display:block;width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 6px 8px color-mix(in srgb, var(--hpa-roxo) 28%, transparent));}
.hpa-icone--titulo{width:88px;height:88px;margin:-10px auto 2px;filter:drop-shadow(0 0 16px color-mix(in srgb, var(--hpa-ambar) 55%, transparent)) drop-shadow(0 8px 10px color-mix(in srgb, var(--hpa-roxo) 30%, transparent));animation:hpa-lanterna 7s ease-in-out infinite;}
.hpa-cartao-evento h3{font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(26px,2.6vw,32px);margin:0;}
.hpa-pontilhado{display:block;width:120px;height:0;margin:12px auto 4px;border-top:2px dotted color-mix(in srgb, var(--hpa-roxo) 35%, transparent);}
.hpa-cartao-evento__linha{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--hpa-fio-forte);font-size:14px;line-height:1.5;}
.hpa-cartao-evento__linha strong{display:block;font-size:15px;}
.hpa-cartao-evento__linha em{display:block;font-style:normal;color:color-mix(in srgb, var(--hpa-roxo) 75%, transparent);}
.hpa-cartao-evento__rotulo{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hpa-teal);margin-bottom:2px;}
.hpa-cartao-evento__acoes{display:flex;flex-direction:column;gap:14px;margin-top:20px;}
.hpa .hpa-cartao-evento__acoes .sdc-botao{width:100%;min-height:52px;font-size:12px;}

/* ======================= CHAMADA FINAL + CONFIRMAÇÃO ======================= */
.hpa-final{
  position:relative;overflow:hidden;isolation:isolate;
  margin:clamp(10px,2vw,20px) 0 clamp(28px,4vw,56px);
  padding:clamp(36px,5vw,64px) clamp(16px,5vw,64px) clamp(28px,4vw,52px);
  border-radius:28px;
  background:
    radial-gradient(70% 50% at 50% 0%,color-mix(in srgb, var(--hpa-ambar) 20%, transparent),transparent 70%),
    var(--hpa-teal);
  color:var(--hpa-creme);text-align:center;
  box-shadow:var(--hpa-sombra-funda);
}
.hpa-final__cabeca{max-width:680px;margin:0 auto clamp(20px,3vw,32px);}
.hpa-final .hpa-h2{color:var(--hpa-creme);font-size:clamp(38px,5vw,64px);margin:22px 0 14px;}
.hpa-final .hpa-texto{color:color-mix(in srgb, var(--hpa-creme) 92%, transparent);margin:0 auto;}
.hpa-selo--final{display:inline-flex;transform:rotate(-2deg);padding:12px 24px;}
.hpa-selo--final strong{font-size:clamp(22px,2.4vw,28px);}

.hpa-cartao{
  position:relative;text-align:left;
  max-width:620px;margin:0 auto;
  padding:clamp(22px,3.4vw,36px);
  background:var(--hpa-creme);color:var(--hpa-roxo);
  border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);
}
.hpa-cartao::before{content:"";position:absolute;left:32px;right:32px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--hpa-ambar),transparent);}
.hpa-cartao .sdc-eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--hpa-teal);}
.hpa-cartao .sdc-titulo{font-family:var(--hpa-condensada);font-weight:800;font-size:clamp(30px,4vw,40px);line-height:1.05;color:var(--hpa-roxo);margin:0 0 10px;}
.hpa-cartao .sdc-paragrafo,.hpa-cartao .sdc-apoio{color:color-mix(in srgb, var(--hpa-roxo) 80%, transparent);}
.hpa-cartao .sdc-apoio{margin-bottom:22px;font-size:14px;}
.hpa-cartao label{font-weight:700;}
.hpa .hpa-cartao input,.hpa .hpa-cartao select{background:#fff;min-height:50px;font-size:16px;}
.hpa .hpa-cartao button.sdc-botao--principal{width:100%;min-height:56px;font-size:14px;letter-spacing:.06em;}
.hpa .sdc-passe{box-shadow:0 26px 50px -24px color-mix(in srgb, var(--hpa-roxo) 60%, transparent);}

/* ======================= TODOS OS BOTÕES =======================
   Pedido do David: todo botão é verde, com o laranja atrás, e com cara de
   tecla (um 3D leve): luz em cima, sombra embaixo e uma base laranja que
   "afunda" quando a pessoa toca. Quem não está acostumado com site
   entende na hora que aquilo se aperta. Vale para os botões do tema e do
   motor (confirmar, baixar o convite, mapa, Waze, agenda, WhatsApp, barra). */
.hpa{
  --hpa-botao-base:color-mix(in srgb, var(--hpa-laranja) 82%, #7a1e00);
  --hpa-botao-face:linear-gradient(180deg,color-mix(in srgb, var(--hpa-verde) 72%, #fff) 0%,var(--hpa-verde) 48%,color-mix(in srgb, var(--hpa-verde) 84%, #000) 100%);
  --hpa-botao-sombra:inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),inset 0 -3px 0 color-mix(in srgb, #000 16%, transparent),
                     0 5px 0 var(--hpa-botao-base),0 6px 0 color-mix(in srgb, var(--hpa-botao-base) 70%, #000),
                     0 16px 24px -10px color-mix(in srgb, var(--hpa-roxo) 60%, transparent);
}
.hpa a.sdc-botao,.hpa button.sdc-botao,
.hpa a.sdc-botao--principal,.hpa button.sdc-botao--principal,
.hpa a.sdc-botao--contorno,.hpa button.sdc-botao--contorno,
.hpa a.hpa-botao-convite,.hpa a.hpa-cta__botao,.hpa .hpa-pilula{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--hpa-botao-face);color:#fff;border:1px solid color-mix(in srgb, var(--hpa-verde) 70%, #000);border-radius:14px;
  text-shadow:0 1px 1px color-mix(in srgb, #000 35%, transparent);
  box-shadow:var(--hpa-botao-sombra);
  transform:translateY(0);
  transition:transform .15s ease,box-shadow .15s ease,filter .2s ease;
  animation:none;
}
.hpa .sdc-botao svg,.hpa .hpa-cta__botao svg{width:18px;height:18px;flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));}
/* O brilho que passa devagar pela tecla: o toque de Halloween, uma luz
   de vela que atravessa o botão a cada poucos segundos. */
.hpa a.sdc-botao::after,.hpa button.sdc-botao::after,.hpa a.hpa-botao-convite::after,.hpa a.hpa-cta__botao::after{
  content:"";position:absolute;inset:-40% -30%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,color-mix(in srgb, var(--hpa-ambar) 38%, #fff 20%) 50%,transparent 60%);
  opacity:.55;transform:translateX(-70%);animation:hpa-brilho-botao 5.5s ease-in-out infinite;
}
@keyframes hpa-brilho-botao{0%,62%{transform:translateX(-70%);}88%,100%{transform:translateX(70%);}}
.hpa a.sdc-botao:hover,.hpa button.sdc-botao:hover,
.hpa a.sdc-botao--contorno:hover,.hpa button.sdc-botao--contorno:hover,
.hpa a.hpa-botao-convite:hover,.hpa a.hpa-cta__botao:hover,.hpa .hpa-pilula:hover{
  color:#fff;filter:brightness(1.06) saturate(1.05);border-color:color-mix(in srgb, var(--hpa-verde) 70%, #000);
  background:var(--hpa-botao-face);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent),inset 0 -3px 0 color-mix(in srgb, #000 16%, transparent),
             0 7px 0 var(--hpa-botao-base),0 8px 0 color-mix(in srgb, var(--hpa-botao-base) 70%, #000),
             0 20px 28px -10px color-mix(in srgb, var(--hpa-roxo) 60%, transparent);
}
.hpa a.sdc-botao:active,.hpa button.sdc-botao:active,.hpa a.hpa-botao-convite:active,.hpa a.hpa-cta__botao:active,.hpa .hpa-pilula:active{
  transform:translateY(5px);
  box-shadow:inset 0 2px 4px color-mix(in srgb, #000 22%, transparent),0 0 0 var(--hpa-botao-base),0 1px 0 color-mix(in srgb, var(--hpa-botao-base) 70%, #000),0 6px 10px -6px color-mix(in srgb, var(--hpa-roxo) 50%, transparent);
}
.hpa .hpa-pilula{--hpa-botao-sombra:inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 var(--hpa-botao-base),0 8px 14px -8px rgba(0,0,0,.6);border-radius:30px;}
/* Quem vem com você: pergunta, ajuda e o "- 0 +" no centro do cartão. */
.hpa .sdc-campo--acomp{text-align:center;}
.hpa .sdc-campo--acomp .sdc-contador{justify-content:center;}
.hpa .sdc-campo--acomp #sdc-fichas{text-align:left;}
/* O "+" e "-" de acompanhantes também ganham cara de tecla, mais discreta. */
.hpa .sdc-contador button{background:#fff;border-radius:12px;box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--hpa-roxo) 12%, transparent),0 3px 0 color-mix(in srgb, var(--hpa-lilas) 80%, var(--hpa-roxo));transition:transform .12s ease,box-shadow .12s ease;}
.hpa .sdc-contador button:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 transparent;}
@media (prefers-reduced-motion:reduce){.hpa .sdc-botao::after,.hpa .hpa-cta__botao::after,.hpa .hpa-botao-convite::after{display:none;}}

/* ======================= RODAPÉ ======================= */
.hpa-rodape{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding:4px 0 36px;font-size:12px;opacity:.75;}
.hpa-rodape a{text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;}
.hpa-rodape p{margin:0;width:100%;}
.hpa-rodape__credito a{min-height:0;}

/* ======================= BARRA DO CELULAR ======================= */
.hpa #sdc-barra{background:color-mix(in srgb, var(--hpa-creme) 96%, transparent);border-top:1px solid var(--hpa-fio-forte);box-shadow:0 -12px 30px -18px color-mix(in srgb, var(--hpa-roxo) 50%, transparent);}
.hpa .sdc-barra__texto b{color:var(--hpa-roxo);font-weight:700;line-height:1.2;}
.hpa #sdc-barra .sdc-botao{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 0 var(--hpa-botao-base),0 10px 16px -8px rgba(0,0,0,.45);}

/* ======================= CELULAR E TABLET ======================= */
@media (max-width:900px){
  .hpa-topo__nav a:not(.hpa-pilula){display:none;}
  .hpa-abertura{grid-template-columns:1fr;gap:28px;}
  .hpa-arco{justify-self:center;max-width:420px;}
  .hpa-tarde__cabeca{grid-template-columns:1fr;gap:18px;align-items:start;}
  .hpa-maquete__grade,.hpa-detalhes{grid-template-columns:1fr;}
  .hpa-passos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hpa-grupos,.hpa-grupos--2,.hpa-grupos--4{grid-template-columns:1fr;}
  .hpa-agora{grid-template-columns:1fr;}
  /* Abertura empilhada: tudo no eixo do meio, como a foto logo abaixo. */
  .hpa-abertura__texto{text-align:center;}
  .hpa-abertura__texto .hpa-rotulo{justify-content:center;}
  .hpa-titulo{transform-origin:center;}
  .hpa-abertura__apoio{margin-inline:auto;}
  .hpa-quando{margin-inline:auto;}
  .hpa-abertura__acoes{justify-content:center;}
  .hpa-convite-acao{margin-inline:auto;}
  .hpa-boasvindas{margin-inline:auto;text-align:left;}
  .hpa-rodape{justify-content:center;text-align:center;}
}
@media (max-width:640px){
  .hpa{font-size:15px;}
  .hpa-topo{padding:11px 14px;border-radius:0 0 16px 16px;}
  .hpa .hpa-pilula{padding:0 14px;font-size:11.5px;}
  .hpa-selo{padding:11px 16px;gap:13px;box-shadow:3px 3px 0 var(--hpa-laranja),0 10px 24px -12px color-mix(in srgb, var(--hpa-roxo) 70%, transparent);animation:none;}
  .hpa-selo strong{font-size:27px;}
  .hpa-titulo__halloween,.hpa-titulo__ola{font-size:clamp(60px,17.5vw,96px);}
  .hpa-titulo small{font-size:clamp(28px,8.6vw,40px);}
  .hpa-quando{display:flex;width:100%;max-width:400px;transform:none;box-shadow:3px 3px 0 var(--hpa-lilas),var(--hpa-sombra);}
  .hpa-quando__data{flex:0 0 40%;padding:12px 10px;}
  .hpa-quando__hora{flex:1;padding:12px 16px;}
  .hpa-abertura__acoes{flex-direction:column;align-items:center;gap:6px;}
  .hpa-convite-acao{width:calc(100% - 52px);max-width:360px;margin-inline:auto;}
  .hpa-convite-acao .sdc-botao{width:100%;}
  .hpa-convite-acao__morcego{right:-34px;top:-4px;width:42px;}
  .hpa-arco{max-width:380px;}
  .hpa-arco__foto{aspect-ratio:auto;height:clamp(330px,104vw,430px);border-radius:36% 36% 18px 18px;}
  .hpa-arco__foto img{animation:none;}
  .hpa-arco::before{animation:none;transform:rotate(2deg);}
  .hpa-arco__morcego{width:50px;}
  .hpa-carimbo{width:94px;height:94px;right:-4px;bottom:28px;}
  .hpa-carimbo strong{font-size:30px;}
  .hpa-faixa{padding:13px 0;font-size:11px;}
  .hpa-faixa div{animation-duration:52s;}
  .hpa-sabores{gap:10px;}
  .hpa-sabor{height:250px;border-radius:14px;}
  .hpa-sabor__texto span{font-size:8.5px;letter-spacing:.1em;}
  .hpa-sabor__texto h3{font-size:25px;}
  .hpa-sabor__texto p{font-size:11.5px;}
  .hpa-lanterna{width:84px;position:absolute;right:-8px;top:-24px;opacity:.95;}
  .hpa-projeto__cabeca{grid-template-columns:1fr;}
  .hpa-projeto__cabeca > div{padding-right:58px;}
  .hpa-galeria,.hpa-galeria--2{grid-template-columns:1fr 1fr;grid-auto-rows:140px;}
  .hpa-galeria figure:first-child{grid-column:span 2;grid-row:span 2;}
  .hpa-galeria--4 figure:nth-child(4),.hpa-galeria--6 figure:nth-child(6){grid-column:span 2;}
  .hpa-galeria figcaption{font-size:10.5px;padding:24px 10px 10px;}
  .hpa-panorama{aspect-ratio:4/3;border-radius:16px;}
  .hpa-passos{grid-template-columns:1fr;}
  .hpa-passos li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;padding:16px;}
  .hpa-passos__num{grid-row:span 2;margin:3px 0 0;}
  .hpa-contagem{max-width:none;gap:8px;}
  .hpa-contagem div{border-radius:12px;padding:12px 4px 10px;}
  .hpa-contagem b{font-size:30px;}
  .hpa-contagem span{font-size:9.5px;letter-spacing:.1em;}
  .hpa-cartao-evento__linha{grid-template-columns:44px 1fr;gap:12px;font-size:13.5px;}
  .hpa-icone:not(.hpa-icone--titulo){width:42px;height:42px;}
  .hpa-icone--titulo{width:72px;height:72px;}
  .hpa-final{border-radius:18px;padding:30px 14px 22px;}
  .hpa-cartao{padding:22px 16px;border-radius:14px;}
  .hpa-rodape{flex-direction:column;padding-bottom:calc(96px + env(safe-area-inset-bottom));}
  .hpa-brilho{display:none;}
  .hpa-voa{opacity:.28;}
  .hpa-voa--1{width:26px;top:118px;}
  .hpa-abobora{width:56px;opacity:.6;}
  .hpa-abobora--1{top:1180px;}
  .hpa-teia{width:92px;}
}
@media (max-width:360px){
  .hpa-sabores{grid-template-columns:1fr;}
  .hpa-titulo__halloween{font-size:58px;}
  .hpa-quando__hora strong{font-size:25px;}
}

/* ======================= MENOS MOVIMENTO ======================= */
@media (prefers-reduced-motion:reduce){
  .hpa *,.hpa *::before,.hpa *::after{animation:none !important;transition:none !important;}
  .hpa-ceu{display:none;}
}