/* ══════════════════════════════════════════════════════════
   DUDA MAKE — página de links
   Paleta e medidas ficam todas aqui em cima.
   ══════════════════════════════════════════════════════════ */
:root{
  --cream:        #FDF1EC;
  --cream-deep:   #F5DFDB;
  --ink:          #2C1A20;
  --pink:         #E5187B;
  --pink-deep:    #B4125E;
  --pink-soft:    #FDF0F4;
  --pink-line:    #F0A9C6;
  --lilac:        #8E5BD8;
  --selo:         #B79CE8;
  --framboesa:    #C2185B;
  --muted:        #7A6068;
  --card:         #FFFFFF;
  --radius:       20px;
  --border:       3px;
  --lift:         0 5px 0 var(--ink);
  --press:        0 3px 0 var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;min-height:100%;background:#F5DFDB}
body{
  margin:0;
  min-height:100dvh;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 70% at 50% 0%, #FFF6F2 0%, transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  display:flex;
  justify-content:center;
  padding:44px 20px 28px;
}

/* fundo vivo: manchas pastel que derivam devagar ──────── */
.fundo{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fundo b{
  position:absolute;display:block;border-radius:50%;
  filter:blur(58px);opacity:.55;
  animation:deriva 22s ease-in-out infinite;
}
.fundo b:nth-child(1){width:62vw;height:62vw;top:-14%;left:-22%;
  background:radial-gradient(circle,#FFC7DC 0,rgba(255,199,220,0) 70%);animation-duration:24s}
.fundo b:nth-child(2){width:55vw;height:55vw;top:24%;right:-24%;
  background:radial-gradient(circle,#D9C6F5 0,rgba(217,198,245,0) 70%);animation-duration:29s;animation-delay:-6s}
.fundo b:nth-child(3){width:58vw;height:58vw;bottom:6%;left:-20%;
  background:radial-gradient(circle,#FFE0B8 0,rgba(255,224,184,0) 70%);animation-duration:26s;animation-delay:-12s}
.fundo b:nth-child(4){width:50vw;height:50vw;bottom:-12%;right:-16%;
  background:radial-gradient(circle,#C3EBD8 0,rgba(195,235,216,0) 70%);animation-duration:31s;animation-delay:-3s}
@keyframes deriva{
  0%,100%{transform:translate(0,0) scale(1)}
  33%    {transform:translate(6vw,-5vh) scale(1.12)}
  66%    {transform:translate(-5vw,6vh) scale(.92)}
}

/* florzinhas subindo pela tela ─────────────────────────── */
.voando{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.voando .item{position:absolute;bottom:-90px;animation:voar linear infinite;will-change:transform}
.voando .item > *{display:block;animation:gira 9s ease-in-out infinite}
.flor{opacity:.7}
@keyframes voar{
  0%  {transform:translate(0,0);opacity:0}
  8%  {opacity:1}
  50% {transform:translate(26px,-52vh)}
  88% {opacity:1}
  100%{transform:translate(-14px,-112vh);opacity:0}
}
@keyframes gira{
  0%,100%{transform:rotate(-13deg) scale(1)}
  50%    {transform:rotate(15deg) scale(1.07)}
}

/* estrutura ───────────────────────────────────────────── */
.pagina{position:relative;z-index:1;width:100%;max-width:400px}

/* animação de entrada, em cascata */
.sobe{opacity:0;animation:sobe .5s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* cabeçalho ───────────────────────────────────────────── */
.topo{text-align:center;margin-bottom:26px}

.moldura{
  width:118px;height:118px;margin:0 auto 16px;
  border-radius:50%;
  background:var(--card);
  border:3px solid var(--pink);
  box-shadow:0 0 0 5px var(--card), 0 8px 22px rgba(180,18,94,.16);
  display:grid;place-items:center;overflow:hidden;
}
.moldura img{width:100%;height:100%;object-fit:cover;display:block}
.moldura svg{width:88%;height:88%;object-fit:contain;display:block}

.marca{
  font-family:"Fredoka",sans-serif;font-weight:700;
  font-size:clamp(34px,10vw,42px);
  letter-spacing:.01em;line-height:1;
  color:var(--pink);
  margin:0 0 12px;
  text-shadow:
    -3px -3px 0 #fff,  0 -3px 0 #fff,  3px -3px 0 #fff,
    -3px  0   0 #fff,                  3px  0   0 #fff,
    -3px  3px 0 #fff,  0  3px 0 #fff,  3px  3px 0 #fff,
     4px  7px 0 rgba(44,26,32,.20);
}

.cidade{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:var(--border) solid var(--ink);
  border-radius:999px;padding:7px 15px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.cidade svg{width:12px;height:12px;flex:none}

.chamada{
  margin:16px auto 0;max-width:20em;
  font-size:15px;font-weight:600;line-height:1.5;color:var(--muted);
}

/* cartões de link ─────────────────────────────────────── */
.links{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}

.link{
  position:relative;display:flex;align-items:center;gap:14px;
  background:var(--card);color:inherit;text-decoration:none;
  border:var(--border) solid var(--ink);border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--lift);
  transition:transform .13s ease, box-shadow .13s ease;
}
.link:hover,.link:focus-visible{transform:translateY(2px);box-shadow:var(--press)}
.link:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.link:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}

.icone{
  flex:none;width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  font-size:20px;line-height:1;
}

.texto{flex:1;min-width:0}
.titulo{display:block;font-family:"Fredoka",sans-serif;font-size:18px;font-weight:600;line-height:1.15}
.legenda{display:block;margin-top:2px;font-size:12.5px;font-weight:700;line-height:1.3;color:var(--muted)}
.seta{flex:none;width:9px;height:9px;opacity:.4}

/* cartão em destaque — framboesa chapado, torto 1°, sombra reta */
.link.destaque{
  background:var(--framboesa);
  color:#fff;
  padding:19px 18px;
  transform:rotate(-1deg);
  box-shadow:0 6px 0 var(--ink);
}
.link.destaque:hover,
.link.destaque:focus-visible{transform:rotate(-1deg) translateY(2px);box-shadow:0 4px 0 var(--ink)}
.link.destaque:active      {transform:rotate(-1deg) translateY(6px);box-shadow:0 0 0 var(--ink)}
.link.destaque .icone{background:rgba(255,255,255,.22);font-size:20px;line-height:1}
.link.destaque .titulo{font-family:"Fredoka",sans-serif;font-weight:600;font-size:19px}
.link.destaque .legenda{color:rgba(255,255,255,.82);font-size:12.5px;font-weight:700}
.link.destaque .seta{opacity:.7}

.selo{
  position:absolute;top:-13px;right:14px;
  background:var(--selo);color:#fff;
  border:2.5px solid var(--ink);border-radius:999px;
  padding:3px 11px;
  font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  transform:rotate(4deg);
  box-shadow:0 2px 0 var(--ink);
}

.estado{font-weight:800}
.estado.aberto {color:#1E8A66}
.estado.fechado{color:var(--pink)}

/* cartão que ainda não abriu — não é link, é aviso ────── */
.link.embreve{
  background:var(--pink-soft);
  border-style:dashed;
  border-color:var(--pink-line);
  box-shadow:none;
  cursor:default;
}
.link.embreve:hover,.link.embreve:active{transform:none;box-shadow:none}
.link.embreve .titulo{color:var(--muted)}
.link.embreve .icone{filter:grayscale(.35);opacity:.7}
.embreve-selo{
  flex:none;
  background:var(--selo);color:#fff;
  border:2px solid var(--ink);border-radius:999px;
  padding:4px 10px;
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 2px 0 var(--ink);
}

/* etiqueta da inauguração — o elemento de assinatura ──── */
.etiqueta{
  position:relative;text-align:center;overflow:hidden;
  background:var(--pink-soft);
  border:var(--border) dashed var(--pink-line);
  border-radius:var(--radius);
  padding:19px 18px;
  opacity:0;
  animation:sobe .5s cubic-bezier(.2,.7,.3,1) .63s forwards,
            respira 3.4s ease-in-out 1.3s infinite;
}
@keyframes respira{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.018)}
}

/* brilho que atravessa o cartão */
.etiqueta::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.85) 45%,
    rgba(255,255,255,.85) 55%,
    transparent 100%);
  transform:skewX(-18deg);
  animation:brilho 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes brilho{
  0%,55%   {left:-60%}
  85%,100% {left:130%}
}
.etiqueta > *{position:relative;z-index:1}

/* estrelinhas dentro do cartão */
.brilhos{position:absolute;inset:0;pointer-events:none}
.brilhos i{
  position:absolute;font-style:normal;font-size:13px;
  color:var(--selo);opacity:0;
  animation:pisca 2.8s ease-in-out infinite;
}
@keyframes pisca{
  0%,100%{opacity:0;transform:scale(.5) rotate(0deg)}
  50%    {opacity:.85;transform:scale(1) rotate(90deg)}
}

/* o número dá um pulinho de vez em quando */
.etiqueta .n{display:inline-block;animation:pulo 2.6s ease-in-out infinite}
@keyframes pulo{
  0%,72%,100%{transform:translateY(0) scale(1)}
  80%        {transform:translateY(-7px) scale(1.12)}
  88%        {transform:translateY(0) scale(.96)}
  94%        {transform:translateY(-2px) scale(1.02)}
}

.etiqueta .rotulo{
  font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.etiqueta .contagem{
  font-family:"Fredoka",sans-serif;font-weight:600;
  font-size:clamp(25px,7.5vw,31px);line-height:1.15;
  color:var(--pink);margin:7px 0 5px;
}
.etiqueta .data{font-size:12px;font-weight:700;color:var(--muted)}

.rodape{
  margin-top:26px;text-align:center;
  font-size:11.5px;font-weight:700;color:var(--muted);opacity:.75;
}

/* quem pediu menos movimento, recebe menos movimento */
@media (prefers-reduced-motion:reduce){
  .sobe,.etiqueta{opacity:1;animation:none}
  .etiqueta::after,.brilhos{display:none}
  .etiqueta .n{animation:none}
  .fundo b{animation:none}
  .voando{display:none}
  .link{transition:none}
}