/* =========================================================
   main.css — tokens, reset e componentes compartilhados
   ========================================================= */

:root{
  /* cores da marca, iguais as do site oficial */
  --pink:#e93a5d;
  --pink-dark:#cf2b4b;
  --orange:#f5a623;
  --teal:#2bb8c9;
  --teal-logo:#35c6d8;
  --purple:#8b6cb8;

  --navy:#0c2c4a;
  --fundo:#08243d;
  --fundo-2:#0f3355;
  --card:rgba(255,255,255,.07);
  --card-borda:rgba(255,255,255,.14);

  --texto:#eaf1f7;
  --texto-2:rgba(234,241,247,.68);

  --largura:520px;
  --raio:16px;
  --raio-sm:12px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brand:'Fredoka','Poppins',sans-serif;
  --script:'Kaushan Script','Poppins',cursive;
}

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

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--texto);
  background:
    radial-gradient(120% 80% at 50% -10%,#17466f 0%,rgba(23,70,111,0) 60%),
    linear-gradient(180deg,var(--fundo) 0%,#061a2c 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3{margin:0;line-height:1.2;font-weight:700}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.ic{
  width:1em;height:1em;
  flex:none;
  fill:currentColor;
  vertical-align:-.12em;
}

.app{
  width:100%;
  max-width:var(--largura);
  margin-inline:auto;
  padding:0 20px calc(40px + env(safe-area-inset-bottom));
}

/* ---------- paginas ---------- */
.pg{display:none;animation:entra .38s var(--ease)}
.pg.is-on{display:block}

@keyframes entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ---------- marca "Helena Holanda 5508" ---------- */
.marca{
  display:inline-grid;
  grid-template-columns:auto auto;
  column-gap:.08em;
  line-height:1;
  font-family:var(--brand);
  font-weight:600;
  font-size:19px;
  white-space:nowrap;
}
.marca__nome{grid-area:1/1;font-size:2.35em;letter-spacing:-.025em;color:var(--pink)}
.marca__sob{
  grid-area:2/1;
  justify-self:start;
  margin:-.44em 0 0 .82em;
  font-size:1.6em;
  letter-spacing:-.025em;
  color:var(--orange);
}
.marca__num{
  grid-area:1/2/3/3;
  align-self:center;
  font-size:3.3em;
  letter-spacing:-.035em;
  color:var(--orange);
}
.marca__slogan{
  grid-area:3/1/4/3;
  justify-self:center;
  margin-top:.16em;
  font-family:var(--script);
  font-weight:400;
  font-size:1.42em;
  color:var(--teal-logo);
}

/* ---------- cores por tema ---------- */
.t-pink{--c:var(--pink)}
.t-orange{--c:var(--orange)}
.t-teal{--c:var(--teal)}
.t-purple{--c:var(--purple)}

/* ---------- botao de voltar ---------- */
.voltar{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin:26px 0 18px;
  padding:9px 16px 9px 12px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--card-borda);
  font-size:.85rem;
  font-weight:500;
  color:var(--texto);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.voltar:hover{background:rgba(255,255,255,.13);transform:translateX(-3px)}

/* ---------- botoes ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  width:100%;
  padding:16px 22px;
  border-radius:999px;
  font-size:.95rem;
  font-weight:600;
  line-height:1;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.btn--wa{
  background:#25d366;
  color:#04331a;
  box-shadow:0 12px 28px rgba(37,211,102,.28);
}
.btn--wa:hover{background:#1fbe5b;transform:translateY(-2px)}
.btn--pink{
  background:var(--pink);
  color:#fff;
  box-shadow:0 12px 28px rgba(233,58,93,.32);
}
.btn--pink:hover{background:var(--pink-dark);transform:translateY(-2px)}
.btn--ghost{
  border:1.5px solid var(--card-borda);
  background:var(--card);
  color:var(--texto);
}
.btn--ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}