/* =====================================================================
   vemnaminhafesta.com.br — camada sobre o Bootstrap 5.3
   Dois temas: .tema-app (institucional/painel) e .tema-festa (convite)
   ===================================================================== */

:root{
  --c0:#ff4d8d; --c1:#22c9c9; --c2:#ffc93c; --c3:#8b5cf6; --c4:#3ecf8e; --c5:#ff8a3d;
  --rosa:#ff4d8d; --rosa-esc:#d92c6c; --roxo:#8b5cf6; --roxo-esc:#6d28d9;
  --turquesa:#22c9c9; --amarelo:#ffc93c; --verde:#3ecf8e; --verde-esc:#0f9d68;

  --creme:#fff6ea; --creme-2:#ffeede; --papel:#ffffff;
  --neutro:#f7f4fa; --borda:#ece4f2;
  --tinta:#2d1b3d; --tinta-sub:#6b5878; --tinta-fraca:#9a8aa8;

  --sombra-1:0 2px 8px rgba(45,27,61,.06);
  --sombra:0 10px 30px rgba(45,27,61,.10);
  --sombra-lg:0 22px 60px rgba(45,27,61,.16);
  --raio:20px; --raio-sm:14px;

  --titulo:"Baloo 2","Trebuchet MS",system-ui,sans-serif;

  --bs-body-font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bs-body-color:var(--tinta);
  --bs-link-color:var(--roxo-esc);
  --bs-link-hover-color:var(--rosa);
  --bs-border-radius:14px;
  --bs-border-color:var(--borda);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }

body{
  background:var(--neutro); color:var(--tinta);
  line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  /* Toque duplo não dá zoom: no editor ele atrapalhava mais do que
     ajudava. A pinça de zoom do navegador continua valendo, que é
     acessibilidade e não pode sumir. */
  touch-action:manipulation;
}
body.tema-festa{ background:var(--creme); }

h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:var(--titulo); font-weight:800; letter-spacing:-.01em; }
img{ max-width:100%; height:auto; }

.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--roxo); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
  font-weight:800; text-decoration:none;
}
.pular-para-conteudo:focus{ left:0; color:#fff; }

:focus-visible{ outline:3px solid var(--roxo); outline-offset:3px; border-radius:6px; }

/* =====================================================================
   TOPO
   ===================================================================== */
.topo{
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:100;
}
.topo-linha{ display:flex; align-items:center; gap:16px; min-height:66px; }
.marca{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--titulo); font-weight:800; font-size:1.12rem; color:var(--tinta);
  margin-right:auto;
}
.marca:hover{ color:var(--rosa-esc); }
.marca-simbolo{ width:32px; height:32px; display:block; flex:0 0 auto; }

.topo-menu{ display:flex; align-items:center; gap:22px; }
.topo-menu a:not(.btn){
  text-decoration:none; color:var(--tinta-sub); font-weight:700; font-size:.94rem;
}
.topo-menu a:not(.btn):hover{ color:var(--rosa-esc); }
.botao-link{
  background:none; border:0; padding:0; color:var(--tinta-sub);
  font:inherit; font-weight:700; font-size:.94rem; cursor:pointer;
}
.botao-link:hover{ color:var(--rosa-esc); }

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

/* =====================================================================
   BOTÕES
   ===================================================================== */
.btn{
  font-family:var(--titulo); font-weight:800; border-radius:999px;
  padding:13px 28px; min-height:46px; border:0;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-sm{ padding:9px 18px; min-height:40px; font-size:.88rem; }
.btn-lg{ padding:16px 34px; min-height:54px; font-size:1.08rem; }

.btn-festa{
  background:linear-gradient(135deg,var(--rosa),var(--roxo)); color:#fff;
  box-shadow:0 10px 24px rgba(255,77,141,.34);
}
.btn-festa:hover,.btn-festa:focus{ color:#fff; transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(255,77,141,.44); }

.btn-claro{ background:var(--papel); color:var(--roxo-esc); box-shadow:var(--sombra-1);
  border:2px solid var(--borda); }
.btn-claro:hover{ color:var(--roxo-esc); transform:translateY(-2px); border-color:#dcc9ec; }

.btn-fantasma{ background:transparent; color:var(--tinta-sub); border:2px solid var(--borda); }
.btn-fantasma:hover{ color:var(--tinta); border-color:var(--tinta-fraca); }

.btn-perigo{ background:#fff1f0; color:#b3261e; border:2px solid #ffd9d5; }
.btn-perigo:hover{ background:#ffe3e0; color:#b3261e; }

.btn-amazon{
  background:linear-gradient(135deg,#ff9900,#ff6a00); color:#1a1005;
  font-size:.95rem; padding:12px 20px; box-shadow:0 8px 20px rgba(255,153,0,.3);
}
.btn-amazon:hover{ color:#1a1005; filter:brightness(1.06); transform:translateY(-2px); }

.btn-whats{ background:#25d366; color:#06301f; }
.btn-whats:hover{ background:#1fbb59; color:#06301f; }

/* =====================================================================
   RECADOS (flash)
   ===================================================================== */
.recado{
  display:flex; gap:11px; align-items:flex-start;
  border-radius:var(--raio-sm); padding:14px 18px; font-weight:700; font-size:.94rem;
  border:2px solid transparent;
}
.recado-ok{    background:#e9fbf2; color:#0b6b47; border-color:#bdefd8; }
.recado-erro{  background:#fff1f0; color:#a1201a; border-color:#ffd2cd; }
.recado-aviso{ background:#fff8e6; color:#8a5b00; border-color:#ffe6ac; }

/* =====================================================================
   CARTÕES E SUPERFÍCIES
   ===================================================================== */
.cartao{
  background:var(--papel); border-radius:var(--raio); padding:26px;
  box-shadow:var(--sombra); border:1px solid var(--borda);
}
.cartao-limpo{ background:var(--papel); border-radius:var(--raio);
  border:1px solid var(--borda); padding:22px; }

.secao{ padding:72px 0; }
.secao-titulo{ font-size:clamp(1.8rem,4.4vw,2.7rem); text-align:center; margin-bottom:12px; }
.secao-apoio{ text-align:center; color:var(--tinta-sub); max-width:660px;
  margin:0 auto 44px; font-size:1.03rem; }

.selo-topo{
  display:inline-block; background:#f3ecff; color:var(--roxo-esc);
  font-weight:800; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 16px; border-radius:999px;
}

/* =====================================================================
   HOME INSTITUCIONAL
   ===================================================================== */
.hero-app{
  padding:76px 0 64px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 15% -10%,#ffe6f1 0%,transparent 62%),
    radial-gradient(800px 520px at 88% 0%,#ddf7f7 0%,transparent 60%),
    radial-gradient(700px 500px at 50% 108%,#fff3d6 0%,transparent 60%),
    var(--neutro);
}
.hero-app h1{
  font-size:clamp(2.15rem,6.2vw,3.9rem); line-height:1.08; margin:18px auto 16px;
  max-width:16ch;
}
.hero-app .destaque{
  background:linear-gradient(96deg,var(--rosa),var(--roxo) 55%,var(--turquesa));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-app p.chamada{
  font-size:1.12rem; color:var(--tinta-sub); max-width:56ch; margin:0 auto 30px;
}
.hero-acoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-nota{ margin-top:18px; font-size:.88rem; color:var(--tinta-fraca); }

/* mockup do celular na home */
.mockup{
  margin:52px auto 0; max-width:290px; background:#2d1b3d; border-radius:38px;
  padding:11px; box-shadow:var(--sombra-lg); position:relative;
}
.mockup::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:78px; height:5px; background:#4a3560; border-radius:3px; z-index:2;
}
.mockup-tela{
  background:var(--creme); border-radius:28px; overflow:hidden; padding:30px 18px 22px;
  text-align:center;
}
.mockup-tela .m-selo{ font-size:.6rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--rosa-esc); background:#fff;
  padding:5px 12px; border-radius:999px; display:inline-block; box-shadow:var(--sombra-1); }
.mockup-tela .m-nome{ font-family:var(--titulo); font-size:2rem; font-weight:800;
  background:linear-gradient(96deg,var(--rosa),var(--roxo) 50%,var(--turquesa));
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:10px 0 2px; }
.mockup-tela .m-idade{
  width:52px; height:52px; border-radius:50%; margin:6px auto;
  background:linear-gradient(140deg,var(--amarelo),var(--c5)); color:#fff;
  font-family:var(--titulo); font-weight:800; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
}
.mockup-tela .m-data{ font-size:.76rem; color:var(--tinta-sub); font-weight:700; }
.mockup-tela .m-btn{ margin-top:14px; background:linear-gradient(135deg,var(--rosa),var(--roxo));
  color:#fff; border-radius:999px; padding:9px; font-weight:800; font-size:.78rem; }
.mockup-tela .m-linha{ height:7px; border-radius:4px; background:#efe4f5; margin:9px 18px; }
.mockup-tela .m-linha.curta{ margin-inline:44px; }

/* passos "como funciona" */
.passos{ counter-reset:passo; display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.passo{
  background:var(--papel); border-radius:var(--raio); padding:28px 24px;
  border:1px solid var(--borda); position:relative; box-shadow:var(--sombra-1);
}
.passo::before{
  counter-increment:passo; content:counter(passo);
  position:absolute; top:-16px; left:24px;
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg,var(--rosa),var(--roxo)); color:#fff;
  font-family:var(--titulo); font-weight:800; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(255,77,141,.35);
}
.passo h3{ font-size:1.14rem; margin:14px 0 6px; }
.passo p{ color:var(--tinta-sub); font-size:.95rem; margin:0; }

/* recursos */
.recursos{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.recurso{ background:var(--papel); border-radius:var(--raio); padding:26px;
  border:1px solid var(--borda); box-shadow:var(--sombra-1);
  transition:transform .25s ease, box-shadow .25s ease; }
.recurso:hover{ transform:translateY(-5px); box-shadow:var(--sombra); }
.recurso .ic{ font-size:2.1rem; display:block; margin-bottom:10px; }
.recurso h3{ font-size:1.1rem; margin:0 0 6px; }
.recurso p{ color:var(--tinta-sub); font-size:.94rem; margin:0; }

.faixa-cta{
  background:linear-gradient(135deg,var(--rosa),var(--roxo));
  border-radius:var(--raio); padding:52px 32px; text-align:center; color:#fff;
}
.faixa-cta h2{ color:#fff; font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:10px; }
.faixa-cta p{ opacity:.92; max-width:46ch; margin:0 auto 26px; }

/* =====================================================================
   FORMULÁRIOS
   ===================================================================== */
.form-label{ font-weight:800; font-size:.86rem; margin-bottom:6px; color:var(--tinta); }
.form-text, .dica{ color:var(--tinta-sub); font-size:.82rem; font-weight:600; }
.form-control, .form-select{
  padding:12px 15px; border:2px solid var(--borda); background:#fbf9fd;
  font-size:16px;                      /* abaixo de 16px o iOS dá zoom no foco */
  border-radius:12px; color:var(--tinta);
}
.form-control:focus, .form-select:focus{
  border-color:var(--roxo); box-shadow:0 0 0 4px rgba(139,92,246,.15); background:#fff;
}
.form-control.is-invalid, .form-select.is-invalid{ border-color:#e04b4b; background:#fff6f5; }
.invalid-feedback{ font-weight:700; font-size:.83rem; }
textarea.form-control{ min-height:96px; }

.campo-prefixo{ display:flex; align-items:stretch; }
.campo-prefixo .prefixo{
  display:flex; align-items:center; padding:0 12px; font-size:.88rem; font-weight:700;
  color:var(--tinta-sub); background:var(--neutro);
  border:2px solid var(--borda); border-right:0; border-radius:12px 0 0 12px;
  white-space:nowrap;
}
.campo-prefixo .form-control{ border-radius:0 12px 12px 0; }

.caixa-form{ background:var(--papel); border-radius:var(--raio); box-shadow:var(--sombra);
  border:1px solid var(--borda); padding:32px; }

fieldset.bloco{ border:0; padding:0; margin:0 0 34px; }
fieldset.bloco > legend{
  font-family:var(--titulo); font-weight:800; font-size:1.1rem; float:none;
  padding:0 0 4px; margin-bottom:16px; width:100%;
  border-bottom:2px solid var(--borda);
}
fieldset.bloco > legend .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:#f3ecff; color:var(--roxo-esc);
  font-size:.85rem; margin-right:8px;
}

/* linhas repetíveis (acompanhantes, atividades) */
.linha-repetivel{ display:grid; gap:10px; margin-bottom:10px; align-items:start; }
.btn-remover{
  background:#fff1f0; color:#b3261e; border:0; border-radius:12px;
  font-size:1.15rem; font-weight:800; min-height:46px; width:100%;
}
.btn-remover:hover{ background:#ffe0dc; color:#b3261e; }
.btn-add{
  background:none; border:2px dashed #d9c9e8; color:var(--roxo-esc);
  font-weight:800; border-radius:12px; padding:12px 18px; width:100%; min-height:46px;
  font-family:var(--titulo);
}
.btn-add:hover{ background:#faf6ff; color:var(--roxo-esc); }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }

/* =====================================================================
   PAINEL / ADMIN
   ===================================================================== */
.cabeca-pagina{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.cabeca-pagina h1{ font-size:clamp(1.5rem,3.6vw,2.1rem); margin:0; }
.cabeca-pagina .sub{ color:var(--tinta-sub); font-size:.95rem; margin:4px 0 0; }

.abas{ display:flex; gap:6px; overflow-x:auto; border-bottom:2px solid var(--borda);
  margin-bottom:26px; scrollbar-width:none; }
.abas::-webkit-scrollbar{ display:none; }
.abas a{
  padding:12px 18px; text-decoration:none; color:var(--tinta-sub); font-weight:800;
  font-size:.92rem; white-space:nowrap; border-bottom:3px solid transparent;
  margin-bottom:-2px; min-height:44px; display:flex; align-items:center;
}
.abas a:hover{ color:var(--tinta); }
.abas a.ativo{ color:var(--roxo-esc); border-bottom-color:var(--roxo); }

.metricas{ display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); margin-bottom:26px; }
.metrica{
  background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:20px; box-shadow:var(--sombra-1);
}
.metrica .rot{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  font-weight:800; color:var(--tinta-fraca); display:block; }
.metrica .num{ font-family:var(--titulo); font-size:2.1rem; font-weight:800;
  line-height:1.15; color:var(--tinta); display:block; }
.metrica .pe{ font-size:.82rem; color:var(--tinta-sub); }
.metrica.destaque .num{ color:var(--rosa); }
.metrica.verde .num{ color:var(--verde-esc); }
.metrica.roxa .num{ color:var(--roxo-esc); }

.tabela-cartao{ background:var(--papel); border:1px solid var(--borda);
  border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra-1); }
.tabela-cartao .table{ margin:0; }
.tabela-cartao thead th{
  background:var(--neutro); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tinta-sub); font-weight:800;
  border-bottom:1px solid var(--borda); padding:13px 16px; white-space:nowrap;
}
.tabela-cartao tbody td{ padding:14px 16px; vertical-align:middle;
  border-bottom:1px solid var(--borda); }
.tabela-cartao tbody tr:last-child td{ border-bottom:0; }

.etiqueta{ display:inline-block; padding:4px 11px; border-radius:999px;
  font-size:.74rem; font-weight:800; }
.etiqueta-publicada{ background:#e9fbf2; color:#0b6b47; }
.etiqueta-rascunho{  background:#fff8e6; color:#8a5b00; }
.etiqueta-encerrada{ background:var(--neutro); color:var(--tinta-sub); }
.etiqueta-admin{ background:#f3ecff; color:var(--roxo-esc); }

.vazio{ text-align:center; padding:56px 24px; color:var(--tinta-sub); }
.vazio .ic{ font-size:3.2rem; display:block; margin-bottom:12px; }
.vazio h2{ font-size:1.3rem; margin-bottom:8px; }

/* cartão de festa no painel */
.festa-cartao{
  background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:22px; box-shadow:var(--sombra-1); height:100%;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.festa-cartao:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.festa-cartao h3{ font-size:1.16rem; margin:0; }
.festa-cartao .meta{ color:var(--tinta-sub); font-size:.88rem; }
.festa-cartao .numeros{ display:flex; gap:18px; padding:12px 0; border-top:1px solid var(--borda);
  border-bottom:1px solid var(--borda); }
.festa-cartao .numeros b{ font-family:var(--titulo); font-size:1.3rem; display:block; line-height:1; }
.festa-cartao .numeros span{ font-size:.74rem; color:var(--tinta-fraca);
  text-transform:uppercase; letter-spacing:.06em; font-weight:800; }

/* gráfico de barras (SVG puro, sem biblioteca) */
.grafico{ background:var(--papel); border:1px solid var(--borda);
  border-radius:var(--raio); padding:22px; box-shadow:var(--sombra-1); }
.grafico svg{ width:100%; height:auto; display:block; overflow:visible; }
/* A cor de cada série vai inline no rect; aqui fica só o realce ao passar o mouse. */
.grafico .barra{ opacity:.88; transition:opacity .15s; }
.grafico .barra:hover{ opacity:1; }
.grafico .eixo{ font-size:9px; fill:var(--tinta-fraca); font-weight:700; }
.legenda{ display:flex; gap:18px; flex-wrap:wrap; font-size:.82rem;
  font-weight:700; color:var(--tinta-sub); margin-top:12px; }
.legenda i{ width:11px; height:11px; border-radius:3px; display:inline-block;
  margin-right:6px; vertical-align:-1px; }

.barra-progresso{ background:var(--neutro); border-radius:999px; height:9px; overflow:hidden; }
.barra-progresso i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--roxo),var(--rosa)); }

/* =====================================================================
   COMPARTILHAR
   ===================================================================== */
.link-curto{
  display:flex; align-items:center; gap:8px;
  background:var(--neutro); border:2px dashed #e2d4ef; border-radius:14px;
  padding:6px 6px 6px 14px; margin-bottom:12px;
}
.link-curto-texto{
  flex:1; min-width:0; font-family:var(--titulo); font-weight:700;
  font-size:1rem; color:var(--roxo-esc);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.btn-copiar{
  flex:0 0 auto; background:var(--roxo); color:#fff; border:0; border-radius:10px;
  font-family:var(--titulo); font-weight:800; font-size:.85rem;
  padding:11px 16px; min-height:44px;
}
.btn-copiar:hover{ background:var(--roxo-esc); color:#fff; }
.btn-copiar.copiado{ background:var(--verde); color:#06301f; }
.compartilhar-botoes{ display:flex; gap:10px; flex-wrap:wrap; }
.compartilhar-botoes .btn{ flex:1 1 210px; }

/* =====================================================================
   TEMA FESTA — o convite público
   ===================================================================== */
.tema-festa .topo{ background:rgba(255,255,255,.86); }
.fundo{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1000px 600px at 12% -5%,#ffe0ef 0%,transparent 60%),
    radial-gradient(900px 600px at 92% 8%,#d8f7f7 0%,transparent 60%),
    radial-gradient(900px 700px at 50% 105%,#fff0cf 0%,transparent 60%),
    var(--creme);
}
#confetes{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.baloes{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.balao{ position:absolute; bottom:-160px; width:54px; height:68px;
  border-radius:50% 50% 46% 46%; opacity:.18; animation:subir linear infinite; }
.balao::after{ content:""; position:absolute; left:50%; top:100%;
  width:1px; height:70px; background:rgba(45,27,61,.2); }
@keyframes subir{
  0%  { transform:translateY(0) translateX(0) rotate(-4deg); }
  50% { transform:translateY(-55vh) translateX(28px) rotate(5deg); }
  100%{ transform:translateY(-115vh) translateX(-18px) rotate(-3deg); }
}

.hero-festa{ padding:60px 0 46px; text-align:center; }
.hero-festa .selo{
  display:inline-block; background:#fff; color:var(--rosa-esc); font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem;
  padding:9px 20px; border-radius:999px; box-shadow:var(--sombra);
  animation:pulsar 2.6s ease-in-out infinite;
}
@keyframes pulsar{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.titulo-arcoiris{
  font-size:clamp(2.5rem,8.5vw,5rem); line-height:1.03; margin:.25em 0 .1em;
  background:linear-gradient(96deg,var(--c0),var(--c3) 42%,var(--c1) 72%,var(--c2));
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:arcoiris 9s ease-in-out infinite;
}
@keyframes arcoiris{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.subtitulo{ font-family:var(--titulo); font-weight:700; color:var(--tinta-sub);
  font-size:clamp(1.02rem,3vw,1.5rem); }
.idade-badge{
  display:flex; align-items:center; justify-content:center; margin:16px auto 0;
  width:100px; height:100px; border-radius:50%;
  background:linear-gradient(140deg,var(--amarelo),var(--c5)); color:#fff;
  font-family:var(--titulo); font-weight:800; font-size:2.9rem;
  box-shadow:var(--sombra-lg); animation:pular 2.4s ease-in-out infinite;
}
.pular{ animation:pular 1.8s ease-in-out infinite; }
@keyframes pular{ 0%,100%{transform:translateY(0) rotate(-4deg)}
                  50%{transform:translateY(-13px) rotate(4deg)} }

.contagem{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:26px 0 8px; }
.contagem-titulo{
  flex-basis:100%; text-align:center; margin-bottom:-2px;
  font-family:var(--titulo); font-weight:800; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--tinta-sub);
}
.contagem .bloco{ background:#fff; border-radius:14px; box-shadow:var(--sombra);
  min-width:78px; padding:12px 10px; text-align:center; }
.contagem .num{ display:block; font-family:var(--titulo); font-size:1.9rem;
  font-weight:800; line-height:1; color:var(--rosa); }
.contagem .rot{ font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--tinta-sub); font-weight:800; }

.convite-moldura{
  border-radius:8px; overflow:hidden; box-shadow:var(--sombra-lg);
  background:#fff; transform:rotate(-1.5deg); transition:transform .35s ease;
  aspect-ratio:4/5; margin:0;
}
.convite-moldura:hover{ transform:rotate(0) scale(1.02); }
.convite-moldura img{ width:100%; height:100%; object-fit:cover; }
.convite-placeholder{
  height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; text-align:center; padding:28px; color:var(--tinta-sub);
  background:repeating-linear-gradient(45deg,var(--creme-2) 0 18px,#ffe6d2 18px 36px);
}
.convite-placeholder .icone{ font-size:3rem; }

.dado{ display:flex; gap:15px; padding:15px 0; border-bottom:2px dashed var(--creme-2); }
.dado:last-child{ border-bottom:0; }
.dado .ic{ font-size:1.6rem; line-height:1.2; flex:0 0 auto; }
.dado .rot{ display:block; font-size:.71rem; text-transform:uppercase;
  letter-spacing:.11em; font-weight:800; color:var(--tinta-sub); }
.dado .val{ font-family:var(--titulo); font-weight:700; font-size:1.1rem; }
.dado .val small{ display:block; font-family:var(--bs-body-font-family);
  font-weight:600; font-size:.9rem; color:var(--tinta-sub); }
.cadeado{ display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-size:.84rem; font-weight:700; color:var(--roxo-esc);
  background:#f3ecff; padding:5px 12px; border-radius:999px; }

.atividade{
  background:#fff; border-radius:var(--raio); padding:26px 22px; text-align:center;
  box-shadow:var(--sombra); border-top:6px solid var(--cor,var(--rosa)); height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.atividade:hover{ transform:translateY(-6px); box-shadow:var(--sombra-lg); }
.atividade .ic{ font-size:2.6rem; display:block; margin-bottom:8px;
  animation:balancar 3.5s ease-in-out infinite; }
@keyframes balancar{ 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
.atividade h3{ font-size:1.14rem; margin:0 0 4px; }
.atividade p{ margin:0; color:var(--tinta-sub); font-size:.93rem; }

.aviso{ background:#fff; border-left:6px solid var(--amarelo); border-radius:14px;
  padding:18px 22px; box-shadow:var(--sombra); color:var(--tinta-sub); }

/* presentes */
.chip-teto{ display:inline-block; background:var(--verde); color:#06301f;
  font-weight:800; padding:7px 18px; border-radius:999px; font-size:.85rem; }
.filtros{ display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:22px 0 26px; }
.filtro{ background:#fff; border:2px solid transparent; border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:.86rem; color:var(--tinta-sub);
  text-decoration:none; box-shadow:var(--sombra-1); min-height:44px;
  display:inline-flex; align-items:center; }
.filtro:hover{ transform:translateY(-2px); color:var(--tinta-sub); }
.filtro.ativo{ background:var(--roxo); color:#fff; border-color:var(--roxo); }

.presente{ background:#fff; border-radius:var(--raio); padding:20px;
  box-shadow:var(--sombra); display:flex; flex-direction:column; gap:8px; height:100%;
  transition:transform .25s, box-shadow .25s; }
.presente:hover{ transform:translateY(-5px); box-shadow:var(--sombra-lg); }
.presente .ic{ font-size:2.3rem; }
.presente-img{ height:165px; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:12px; overflow:hidden; }
.presente-img img{ max-height:100%; max-width:100%; object-fit:contain; }
.marca-produto{ font-size:.74rem; color:var(--tinta-fraca); text-transform:uppercase;
  letter-spacing:.06em; font-weight:800; margin:0; }
.resumo{ font-size:.89rem; color:var(--tinta-sub); margin:0; }
.preco{ font-weight:800; color:var(--verde-esc); background:#e9fbf2;
  padding:4px 12px; border-radius:999px; font-size:.94rem; }
.desconto{ font-weight:800; color:#b3261e; background:#ffe9e7;
  padding:4px 10px; border-radius:999px; font-size:.78rem; }
.prime{ font-weight:800; color:#00507c; background:#e3f2fd;
  padding:4px 10px; border-radius:999px; font-size:.74rem; }
.disclosure{ font-size:.82rem; color:var(--tinta-sub); text-align:center;
  background:#fff; border-radius:14px; padding:16px 20px; box-shadow:var(--sombra-1); }

/* FAQ */
.faq{ max-width:780px; margin-inline:auto; }
.faq .accordion-item{ background:var(--papel); border:1px solid var(--borda);
  border-radius:14px !important; box-shadow:var(--sombra-1);
  margin-bottom:12px; overflow:hidden; }
.faq .accordion-button{ font-family:var(--titulo); font-weight:700; font-size:1.04rem;
  background:var(--papel); color:var(--tinta); box-shadow:none; min-height:56px; }
.faq .accordion-button:not(.collapsed){ background:var(--papel); color:var(--roxo-esc); }
.faq .accordion-body{ color:var(--tinta-sub); padding-top:0; }

/* botão fixo de confirmar */
.flutuante{ position:fixed; right:18px; bottom:18px; z-index:90;
  box-shadow:0 14px 34px rgba(255,77,141,.45); }

/* =====================================================================
   RODAPÉ
   ===================================================================== */
.rodape{ background:var(--tinta); color:#e8dff0; padding:56px 0 28px; margin-top:72px; }
.rodape a{ color:#e8dff0; text-decoration:none; display:block;
  padding:4px 0; font-size:.92rem; opacity:.82; }
.rodape a:hover{ color:var(--amarelo); opacity:1; }
.rodape-grade{ display:grid; gap:34px;
  grid-template-columns:minmax(240px,2fr) repeat(2,minmax(140px,1fr)); }
.rodape-marca{ font-family:var(--titulo); font-size:1.4rem; font-weight:800;
  color:#fff; margin-bottom:8px; }
.rodape-titulo{ font-family:var(--titulo); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.1em; color:#b9a8c9; margin-bottom:8px; }
.rodape-nota{ border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px;
  font-size:.8rem; opacity:.6; }
.rodape-mini{ font-size:.78rem; opacity:.5; margin:0; }

/* ===== Convite: a chamada do presente ==================================== */
.convite-presente{
  background:linear-gradient(150deg,#fff6ea,#ffeede);
  border:2px solid var(--amarelo); border-radius:var(--raio);
  padding:26px 22px; text-align:center; box-shadow:var(--sombra-1);
}
.convite-presente-emoji{ font-size:2.4rem; line-height:1; display:block; margin-bottom:6px; }
.convite-presente h2{
  font-family:var(--titulo); font-weight:800; font-size:1.35rem;
  margin:0 0 8px; color:var(--tinta);
}
.convite-presente p{
  color:var(--tinta-sub); margin:0 auto 16px; max-width:46ch; line-height:1.6;
}
.convite-presente-nota{ font-size:.86rem; margin:14px auto 0 !important; }

/* ===== Parcerias e quem desenvolve ======================================= */
.parcerias-secao{ background:var(--papel); border-top:1px solid var(--borda); }
.parcerias-h2{
  font-family:var(--titulo); font-weight:800; font-size:1.45rem;
  margin:0 0 10px; color:var(--tinta);
}
.parcerias-intro{ color:var(--tinta-sub); margin:0 0 22px; max-width:65ch; }
.parcerias-grade{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .parcerias-grade{ grid-template-columns:1fr 1fr; } }
.parceria{
  display:flex; flex-direction:column; gap:6px;
  background:var(--papel); border:1px solid var(--borda); border-radius:10px;
  padding:18px 20px; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.parceria:hover,.parceria:focus-visible{
  border-color:var(--roxo); box-shadow:var(--sombra-1); transform:translateY(-2px);
}
.parceria-nome{
  font-family:var(--titulo); font-weight:800; font-size:1.1rem; color:var(--tinta);
}
.parceria-url{ font-size:.82rem; color:var(--roxo-esc); overflow-wrap:anywhere; }
.parceria-desc{ font-size:.94rem; line-height:1.55; color:var(--tinta-sub); }
.quem-faz{ margin-top:34px; padding-top:24px; border-top:1px solid var(--borda); }
.quem-faz p{
  color:var(--tinta-sub); margin:0 0 8px; max-width:65ch; font-size:.98rem; line-height:1.6;
}
.quem-faz p:last-child{ margin-bottom:0; }
.quem-faz-extra{ margin:14px 0 0; font-size:.98rem; }
/* Sozinho na faixa (em /sobre) nao precisa da propria regua no topo. */
.parcerias-secao .container > .quem-faz:first-child{
  margin-top:0; padding-top:0; border-top:0;
}
.quem-faz strong{ color:var(--tinta); }

/* O rodape torna todo link um bloco; o credito da empresa corre no texto. */
.rodape-empresa{
  font-size:.8rem; opacity:.65; margin:0 0 6px;
}
.rodape-empresa a{ display:inline; padding:0; opacity:1; text-decoration:underline;
  text-underline-offset:2px; }

/* =====================================================================
   MOBILE
   ===================================================================== */
.btn,.filtro,.btn-add,.btn-remover,.accordion-button,.abas a{ min-height:44px; }

@media (max-width:991.98px){
  .topo-hamburguer{ display:flex; }
  .topo-menu{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--borda);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 20px 20px;
    box-shadow:var(--sombra);
  }
  .topo-menu.aberto{ display:flex; }
  .topo-menu a:not(.btn), .botao-link{
    padding:14px 0; border-bottom:1px solid var(--borda); text-align:left;
    width:100%; font-size:1rem; min-height:48px;
  }
  .topo-menu .btn{ margin-top:14px; }
  .topo-menu form{ display:block !important; width:100%; }
  .secao{ padding:52px 0; }
  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .rodape-grade > :first-child{ grid-column:1 / -1; }
}

@media (max-width:575.98px){
  .container{ padding-inline:16px; }
  .hero-app{ padding:48px 0 44px; }
  .hero-app h1{ font-size:clamp(1.95rem,8vw,2.5rem); max-width:none; }
  .hero-app p.chamada{ font-size:1rem; }
  .hero-acoes .btn{ width:100%; }
  .secao{ padding:44px 0; }
  .secao-titulo{ font-size:1.7rem; }
  .secao-apoio{ margin-bottom:32px; font-size:.97rem; }
  .cartao, .caixa-form{ padding:20px; border-radius:18px; }
  .faixa-cta{ padding:36px 22px; }

  .hero-festa{ padding:34px 0 24px; }
  .titulo-arcoiris{ font-size:clamp(2.3rem,13vw,3.2rem); }
  .idade-badge{ width:82px; height:82px; font-size:2.3rem; }
  .contagem{ gap:6px; }
  .contagem .bloco{ min-width:0; flex:1 1 0; padding:10px 4px; }
  .contagem .num{ font-size:1.45rem; }
  .contagem .rot{ font-size:.58rem; letter-spacing:.05em; }
  .convite-moldura{ transform:none; max-width:400px; margin-inline:auto; }

  .metricas{ grid-template-columns:1fr 1fr; gap:12px; }
  .metrica{ padding:16px; }
  .metrica .num{ font-size:1.7rem; }

  /* tabelas largas rolam sozinhas, o corpo da página nunca */
  .tabela-cartao{ overflow-x:auto; }
  .tabela-cartao .table{ min-width:620px; }

  .filtros{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding:4px 16px 12px; margin-inline:-16px;
    scroll-snap-type:x proximity; scrollbar-width:none; }
  .filtros::-webkit-scrollbar{ display:none; }
  .filtro{ flex:0 0 auto; scroll-snap-align:center; }

  .link-curto{ align-items:flex-start; padding:10px 10px 10px 12px; }
  .link-curto-texto{ font-size:.9rem; white-space:normal; overflow:visible;
    text-overflow:clip; word-break:break-word; line-height:1.35; padding-top:9px; }
  .compartilhar-botoes .btn{ flex:1 1 100%; }

  .rodape-grade{ grid-template-columns:1fr; gap:24px; }
  .rodape{ padding:40px 0 24px; }
}

/* Barra fixa de confirmar no celular */
@media (max-width:767.98px){
  .flutuante{
    left:0; right:0; bottom:0; width:100%; border-radius:0;
    padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 24px rgba(45,27,61,.2); font-size:1.05rem;
  }
  .tema-festa .rodape{ padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
}

@media (max-width:359.98px){
  .titulo-arcoiris{ font-size:2rem; }
  .contagem .num{ font-size:1.25rem; }
  .metricas{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  #confetes,.baloes{ display:none; }
}

@media print{
  .topo,.rodape,.flutuante,#confetes,.baloes,.fundo,.abas{ display:none !important; }
  body{ background:#fff; }
}

/* =====================================================================
   TEMA DO CONVITE
   As variáveis --tema-* vêm inline no <body>, geradas por Temas.php.
   Se não vierem, tudo cai no visual padrão.
   ===================================================================== */
.tema-festa{
  --tema-primaria:var(--rosa);
  --tema-secundaria:var(--roxo);
  --tema-fonte:var(--titulo);
}
.tema-festa h1,.tema-festa h2,.tema-festa h3,
.tema-festa .titulo-secao,.tema-festa .idade-badge,
.tema-festa .subtitulo,.tema-festa .dado .val{
  font-family:var(--tema-fonte);
}
.titulo-tema{
  font-family:var(--tema-fonte);
  font-size:clamp(2.5rem,8.5vw,5rem); line-height:1.05; margin:.25em 0 .1em;
  background:linear-gradient(96deg,var(--tema-primaria),var(--tema-secundaria));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tema-festa .idade-badge{
  background:linear-gradient(140deg,var(--tema-primaria),var(--tema-secundaria));
}
.tema-festa .selo{ color:var(--tema-primaria); }
.tema-festa .contagem .num{ color:var(--tema-primaria); }
.tema-festa .btn-festa{
  background:linear-gradient(135deg,var(--tema-primaria),var(--tema-secundaria));
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.tema-festa .cadeado{ color:var(--tema-secundaria); background:rgba(0,0,0,.04); }
.tema-festa .atividade{ border-top-color:var(--tema-primaria); }
.tema-festa .atividade:nth-child(even){ border-top-color:var(--tema-secundaria); }

/* ---------- molduras ---------- */
.convite-moldura.borda-suave{ border:0; }
.convite-moldura.borda-nenhuma{ box-shadow:none; border-radius:6px; }
.convite-moldura.borda-solida{ border:8px solid var(--tema-primaria); }
.convite-moldura.borda-tracejada{ border:6px dashed var(--tema-secundaria); padding:6px; background:#fff; }
.convite-moldura.borda-festao{
  border:7px solid var(--tema-primaria);
  box-shadow:0 0 0 7px #fff, 0 0 0 14px var(--tema-secundaria), var(--sombra-lg);
}
.convite-moldura.borda-fita{ position:relative; border:5px solid var(--tema-secundaria); }
.convite-moldura.borda-fita::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 9px),var(--tema-primaria) calc(50% - 9px),
                    var(--tema-primaria) calc(50% + 9px),transparent calc(50% + 9px)),
    linear-gradient(0deg,transparent calc(50% - 9px),var(--tema-primaria) calc(50% - 9px),
                    var(--tema-primaria) calc(50% + 9px),transparent calc(50% + 9px));
  opacity:.75;
}

/* =====================================================================
   EDITOR DE APARÊNCIA (painel)
   ===================================================================== */
/* Carrossel: com 17 modelos, uma grade empurrava o resto do formulário para
   fora da tela. Em faixa, ocupa a altura de um cartão só. */
.modelos{
  display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px;
  scroll-snap-type:x mandatory; scroll-padding-left:2px;
  scrollbar-width:thin; overscroll-behavior-x:contain;
}
.modelos::-webkit-scrollbar{ height:6px; }
.modelos::-webkit-scrollbar-thumb{ background:var(--borda); border-radius:3px; }
.modelo{
  position:relative; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--papel); border:2px solid var(--borda); border-radius:8px;
  padding:8px 12px 8px 8px; transition:border-color .18s, box-shadow .18s;
  flex:0 0 auto; scroll-snap-align:start;
}
.modelo:hover{ box-shadow:var(--sombra-1); }
.modelo-desc{ display:none; }   /* a descrição some na faixa; o nome basta */
.carrossel{ position:relative; }
.carrossel-bt{
  position:absolute; top:6px; z-index:2; width:36px; height:36px;
  border:1px solid var(--borda); background:var(--papel); color:var(--tinta);
  border-radius:8px; cursor:pointer; box-shadow:var(--sombra-1); font-size:.9rem;
}
.carrossel-bt[hidden]{ display:none; }
.carrossel-bt.antes{ left:-6px; }
.carrossel-bt.depois{ right:-6px; }
@media (hover:none){ .carrossel-bt{ display:none; } }
.modelo.ativo{ border-color:var(--roxo); box-shadow:0 0 0 4px rgba(139,92,246,.14); }
.modelo input{ position:absolute; opacity:0; width:0; height:0; }
.modelo-tinta{
  width:34px; height:34px; flex:0 0 auto; border-radius:7px; display:flex;
  align-items:center; justify-content:center; font-size:1.15rem;
}
.modelo-nome{ font-family:var(--titulo); font-weight:800; font-size:.9rem; white-space:nowrap; }
.modelo-desc{ font-size:.78rem; color:var(--tinta-sub); line-height:1.35; }

.form-control-color{ height:46px; padding:5px; cursor:pointer; }

/* ---------- prévia ao vivo ---------- */
.previa{
  background:var(--neutro); border:2px dashed var(--borda); border-radius:18px;
  padding:22px; text-align:center; position:relative;
}
.previa-rotulo{
  position:absolute; top:-11px; left:18px; background:var(--papel);
  padding:0 10px; font-size:.72rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; color:var(--tinta-fraca);
}
.previa-cartao{ max-width:260px; margin-inline:auto; }
.previa-selo{
  display:inline-block; background:var(--papel); color:var(--p);
  font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px; box-shadow:var(--sombra-1);
}
.previa-nome{
  font-size:2.2rem; font-weight:800; margin:10px 0 2px; line-height:1.1;
  background:linear-gradient(96deg,var(--p),var(--s));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.previa-idade{
  width:52px; height:52px; border-radius:50%; margin:4px auto 10px;
  background:linear-gradient(140deg,var(--p),var(--s)); color:#fff;
  font-weight:800; font-size:1.5rem; display:flex; align-items:center; justify-content:center;
}
.previa-btn{
  background:linear-gradient(135deg,var(--p),var(--s)); color:#fff;
  border-radius:999px; padding:10px; font-weight:800; font-size:.82rem;
}
.previa-nome,.previa-idade,.previa-btn,.previa-selo{ font-family:var(--previa-fonte,var(--titulo)); }

/* =====================================================================
   MODOS DE PROTEÇÃO DO ENDEREÇO
   ===================================================================== */
.modos{ display:grid; gap:10px; }
.modo{
  position:relative; display:block; cursor:pointer;
  background:var(--papel); border:2px solid var(--borda); border-radius:14px;
  padding:14px 16px; transition:border-color .18s, box-shadow .18s;
}
.modo:hover{ border-color:#dcc9ec; }
.modo.ativo{ border-color:var(--roxo); box-shadow:0 0 0 4px rgba(139,92,246,.12); }
.modo input{ position:absolute; opacity:0; width:0; height:0; }
.modo-titulo{ display:block; font-family:var(--titulo); font-weight:800; font-size:1rem; }
.modo-desc{ display:block; font-size:.85rem; color:var(--tinta-sub); margin-top:3px; }

@media (max-width:575.98px){
  .modelos{ grid-template-columns:1fr 1fr; gap:10px; }
  .modelo{ padding:11px; }
  .modelo-desc{ display:none; }
  .previa{ padding:18px 14px; }
}

/* =====================================================================
   BLOG
   Texto para ler no celular: coluna estreita, entrelinha alta, títulos
   com respiro. Nada de largura total — linha comprida cansa a vista.
   ===================================================================== */
.blog-filtros{
  display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px;
}
.blog-filtro{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--papel); border:1px solid var(--borda); border-radius:999px;
  padding:8px 16px; font-weight:700; font-size:.92rem;
  color:var(--tinta-sub); text-decoration:none; transition:.15s;
}
.blog-filtro:hover{ border-color:var(--roxo); color:var(--roxo-esc); }
.blog-filtro.ativo{
  background:var(--roxo); border-color:var(--roxo); color:#fff;
}

.blog-grade{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.blog-cartao{
  background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra-1); overflow:hidden; transition:.18s;
}
.blog-cartao:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.blog-cartao-link{
  display:flex; flex-direction:column; gap:8px; height:100%;
  padding:22px; text-decoration:none; color:inherit;
}
.blog-etiqueta{
  font-size:.76rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--roxo-esc);
}
.blog-cartao-titulo{
  font-size:1.14rem; line-height:1.3; margin:0;
}
.blog-cartao-resumo{
  font-size:.94rem; color:var(--tinta-sub); margin:0; flex:1 1 auto;
}
.blog-cartao-pe{
  font-size:.82rem; color:var(--tinta-fraca); font-weight:700;
}

.blog-migalhas{
  font-size:.88rem; color:var(--tinta-fraca); margin-bottom:18px;
}
.blog-migalhas a{ color:var(--tinta-sub); text-decoration:none; font-weight:700; }
.blog-migalhas a:hover{ color:var(--rosa); }

.blog-cabeca{ max-width:720px; margin:0 auto 30px; }
.blog-cabeca h1{ font-size:clamp(1.7rem,5vw,2.6rem); line-height:1.15; margin-bottom:14px; }
.blog-linha-fina{
  font-size:1.1rem; color:var(--tinta-sub); margin-bottom:12px;
}
.blog-meta{ font-size:.88rem; color:var(--tinta-fraca); font-weight:700; margin:0; }

.blog-texto{
  max-width:720px; margin:0 auto; font-size:1.06rem; line-height:1.78;
}
.blog-texto h2{
  font-size:clamp(1.35rem,3.6vw,1.75rem); margin:2.2em 0 .6em; line-height:1.25;
}
.blog-texto h3{ font-size:1.16rem; margin:1.7em 0 .5em; }
.blog-texto p{ margin:0 0 1.1em; }
.blog-texto ul,.blog-texto ol{ margin:0 0 1.3em; padding-left:1.3em; }
.blog-texto li{ margin-bottom:.5em; }
.blog-texto strong{ color:var(--tinta); }
.blog-texto a{ color:var(--roxo-esc); text-underline-offset:3px; }
.blog-texto blockquote{
  margin:1.6em 0; padding:16px 20px;
  background:var(--creme); border-left:5px solid var(--amarelo);
  border-radius:0 var(--raio-sm) var(--raio-sm) 0;
  font-size:1rem;
}
.blog-texto blockquote p:last-child{ margin-bottom:0; }
.blog-texto .aviso-idade{
  background:#fff; border:1px dashed var(--borda); border-radius:var(--raio-sm);
  padding:16px 20px; margin:1.6em 0; font-size:.98rem;
}
.blog-texto table{
  width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.96rem;
}
.blog-texto th,.blog-texto td{
  border-bottom:1px solid var(--borda); padding:10px 8px; text-align:left;
  vertical-align:top;
}
.blog-texto th{ font-weight:800; color:var(--tinta); }
.blog-tabela-rolagem{ overflow-x:auto; }

.blog-vitrine{
  max-width:720px; margin:46px auto 0; padding:26px;
  background:var(--papel); border:1px solid var(--borda);
  border-radius:var(--raio); box-shadow:var(--sombra-1);
}
.blog-vitrine h2{ font-size:1.35rem; margin:0 0 6px; }
.blog-vitrine-grade{
  display:grid; gap:12px; margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
}
.blog-produto{
  display:flex; flex-direction:column; gap:4px;
  padding:14px; border:1px solid var(--borda); border-radius:var(--raio-sm);
  text-decoration:none; color:inherit; background:var(--neutro); transition:.15s;
}
.blog-produto:hover{ border-color:var(--roxo); background:#fff; }
.blog-produto-emoji{ font-size:1.5rem; line-height:1; }
.blog-produto-nome{ font-weight:800; font-size:.96rem; }
.blog-produto-desc{ font-size:.85rem; color:var(--tinta-sub); }

.blog-relacionados{ max-width:1040px; margin:52px auto 0; }
.blog-relacionados h2{ font-size:1.5rem; margin-bottom:18px; }

@media (max-width:575.98px){
  .blog-texto{ font-size:1.02rem; }
  .blog-vitrine{ padding:20px 16px; }
}

/* =====================================================================
   CEP, ENDEREÇO DE ENTREGA
   ===================================================================== */
.linha-cep{ display:flex; gap:8px; }
.linha-cep .form-control{ flex:1 1 auto; min-width:0; }
.linha-cep .btn{ flex:0 0 auto; white-space:nowrap; }

/* O submit invisível que garante que Enter salve, e não busque CEP. */
.submit-padrao{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.sub-bloco{
  margin-top:26px; padding:20px;
  background:var(--neutro); border:1px solid var(--borda);
  border-radius:var(--raio-sm);
}
.sub-bloco-titulo{ font-size:1.05rem; margin:0 0 6px; }
.sub-bloco-apoio{ font-size:.92rem; color:var(--tinta-sub); margin:0 0 16px; }

.entrega-cartao{
  max-width:640px; margin:0 auto 32px; padding:24px;
  background:var(--papel); border:2px dashed var(--turquesa);
  border-radius:var(--raio); text-align:left;
}
.entrega-titulo{ font-size:1.2rem; margin:0 0 6px; }
.entrega-apoio{ font-size:.94rem; color:var(--tinta-sub); margin:0 0 14px; }
.entrega-endereco{
  font-style:normal; font-size:1.02rem; line-height:1.6;
  background:var(--creme); border-radius:var(--raio-sm);
  padding:14px 16px; margin:0 0 14px;
}
.entrega-dica{
  font-size:.9rem; color:var(--tinta-sub); margin:14px 0 0;
}

/* Lugar/contato ainda não liberados: presente na página, sem fingir dado. */
.val-fechado{ color:var(--tinta-fraca); font-weight:600; }

/* Reforço da página de cadastro — é onde o clique pago aterrissa. */
.ganhos{ list-style:none; margin:0 0 14px; padding:0; }
.ganhos li{
  position:relative; padding:6px 0 6px 26px;
  font-size:.94rem; color:var(--tinta-sub);
}
.ganhos li::before{
  content:"✓"; position:absolute; left:0; top:6px;
  color:var(--verde-esc); font-weight:800;
}
.selo-gratis{
  margin:0 0 20px; padding:9px 14px; text-align:center;
  background:var(--creme); border-radius:999px;
  font-size:.86rem; font-weight:700; color:var(--tinta-sub);
}

/* ===== convite livre: fundo próprio com os textos posicionados =============
   O editor do painel e o convite publicado usam a MESMA conta de tamanho:
   cqw, porcentagem da largura do cartão. É por isso que o que a pessoa
   arrasta é exatamente o que sai publicado, em qualquer largura de tela. */

.divisor{ border:0; border-top:1px solid var(--borda); margin:34px 0 24px; }
.sub-titulo{ font-family:var(--titulo); font-size:1.15rem; font-weight:800; margin:0 0 4px; }

.formatos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.formato{
  position:relative; display:block; cursor:pointer; background:var(--papel);
  border:2px solid var(--borda); border-radius:var(--raio-sm); padding:14px 16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.formato:hover{ border-color:var(--roxo); }
.formato.ativo{ border-color:var(--rosa); box-shadow:var(--sombra-1); }
.formato input{ position:absolute; opacity:0; pointer-events:none; }
.formato:focus-within{ outline:3px solid var(--roxo); outline-offset:2px; }
.formato-ic{ font-size:1.5rem; display:block; line-height:1; }
.formato-nome{ display:block; font-weight:800; margin-top:6px; }
.formato-desc{ display:block; font-size:.82rem; color:var(--tinta-sub); margin-top:2px; }

.painel-arte{ margin-top:22px; }

.editor-arte{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
@media (min-width:992px){
  .editor-arte{ grid-template-columns:minmax(0,360px) minmax(0,1fr); align-items:start; }
}

/* Nada de sticky aqui. Numa coluna só, o palco gruda e o resto do editor
   passa POR BAIXO dele — foi o que empilhou o cartão em cima da lista de
   blocos no celular. Só vira sticky quando existem duas colunas de verdade,
   e a regra do sticky tem de vir DEPOIS desta, senão esta a apaga. */
.ea-palco{ position:relative; }
@media (min-width:992px){ .ea-palco{ position:sticky; top:14px; } }
.ea-canvas{
  container-type:inline-size;          /* o que dá sentido ao cqw dos blocos */
  position:relative; aspect-ratio:4 / 5; width:100%; overflow:hidden;
  border-radius:6px;
  /* outline e não border: border entraria na medida do container, e o cqw
     dos blocos sairia 1% menor aqui do que no convite publicado. */
  outline:2px dashed var(--borda); outline-offset:-2px;
  background:var(--neutro) center/cover no-repeat;
  touch-action:none;                   /* arrastar não rola a página junto */
  user-select:none;
  /* No celular o cartão inteiro comia a tela e empurrava os controles para
     fora dela. Limitado pela ALTURA, que é o que falta num telefone. */
  max-width:min(100%, 36vh);   /* 4:5 → a altura fica em ~45% da tela */
  margin-inline:auto;
}
@media (min-width:992px){ .ea-canvas{ max-width:100%; } }
/* Pastilha no vão do meio. O layout padrão deixa 45%–68% vazios de
   propósito, e é o único lugar do cartão onde o aviso não cobre um texto.
   Fundo próprio porque ele também precisa ser legível sobre um fundo claro. */
.ea-vazio-aviso{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  z-index:2; width:max-content; max-width:88%; text-align:center;
  background:rgba(45,27,61,.82); color:#fff; font-size:.78rem;
  padding:8px 14px; border-radius:999px; line-height:1.35;
}
.ea-vazio-aviso small{ opacity:.75; font-size:.92em; }
.ea-bloco{
  /* width:max-content é obrigatório, não estético. Sem ele um bloco absoluto
     encolhe contra a borda mais próxima (left:92% deixa 8% de espaço) e o
     texto desfia em coluna de uma letra. max-width volta a permitir a quebra. */
  font-synthesis-weight:none;
  position:absolute; width:max-content; max-width:92%; line-height:1.1; cursor:grab;
  overflow-wrap:anywhere;   /* palavra sem espaço não vaza para fora do cartão */
  font-family:var(--tema-fonte,var(--titulo));
  /* Mesma caixa do .al-bloco, no mesmo cqw: o editor tem de mostrar o que o
     convite vai mostrar. Antes daqui saía min-height + flex, que mudavam a
     altura do bloco e, com ela, onde o centro dele caía. */
  padding:0.25cqw 0.5cqw; border-radius:3px; white-space:pre-wrap;
  outline:2px dashed transparent; outline-offset:2px;

  /* touch-action NÃO se herda, e o toque começa AQUI, não no cartão. Sem esta
     linha o navegador entende o arrasto como rolagem, cancela o ponteiro e o
     texto não sai do lugar — só no dedo; com mouse funcionava. */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;   /* iOS: sem menu de seleção no toque longo */
}
/* O alvo do dedo cresce por fora, num pseudo-elemento: aumentar a caixa de
   verdade (min-height) desalinharia o bloco em relação ao convite. Sai
   durante a escrita, senão atrapalha o cursor no texto. */
.ea-bloco:not(.editando)::after{ content:''; position:absolute; inset:-9px; }
.ea-bloco:hover{ outline-color:rgba(255,255,255,.7); }
.ea-bloco:focus-visible,
.ea-bloco.selecionado{ outline-color:var(--rosa); outline-style:solid; }
.ea-bloco.arrastando{ cursor:grabbing; opacity:.85; }
.ea-bloco.ea-vazio{ opacity:.55; font-style:italic; }
.com-sombra{ text-shadow:0 2px 6px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }

/* O envio do fundo virou um botão sobre a figura. O input continua no DOM
   para quem não tem JavaScript — só sai da vista. */
.ea-fundo-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ea-topo{ display:flex; gap:8px; margin-bottom:8px; }
.ea-topo-bt{
  flex:1 1 0; min-height:42px; cursor:pointer;
  border:1px solid var(--borda); background:var(--papel); color:var(--tinta);
  border-radius:8px; font-size:.84rem; font-weight:700;
}
.ea-topo-bt:active{ background:var(--rosa); border-color:var(--rosa); color:#fff; }
.ea-topo-bt[aria-pressed="true"]{ background:var(--roxo); border-color:var(--roxo); color:#fff; }

/* ---- modo tela cheia ----
   Tudo o que a edição precisa já mora dentro de .ea-palco, então o modo é
   promover esse contêiner a sobreposição. O cartão continua 4:5 e passa a ser
   o maior que couber: limitado pela ALTURA, que é o que falta num telefone.
   .ea-palco.ea-cheio tem especificidade maior que o sticky do desktop. */
.ea-palco.ea-cheio{
  position:fixed; inset:0; z-index:1000; margin:0;
  display:flex; flex-direction:column; align-items:center;
  /* flex-start, não center: centralizado, um cartão alto transborda para
     cima e vai parar debaixo da barra fixa de botões. */
  justify-content:flex-start;
  gap:10px; padding:12px;
  background:var(--tinta); overflow:auto;
}
.ea-palco.ea-cheio{ padding:60px 8px 12px; }
.ea-palco.ea-cheio .ea-canvas{
  /* 0.8 = 4/5. O resto da tela é a barra, as fichas e o respiro. */
  max-width:min(100% , calc((100dvh - 250px) * 0.8));
  flex:0 0 auto;
}
.ea-palco.ea-cheio .ea-topo{
  position:fixed; top:10px; left:10px; right:10px; z-index:1002; margin:0;
}
.ea-palco.ea-cheio .ea-topo-bt{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff;
}
.ea-palco.ea-cheio .ea-fichas{ justify-content:center; margin:0; max-width:100%; }
.ea-palco.ea-cheio .ea-ficha{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); color:#cbbcd6; }
.ea-palco.ea-cheio .ea-ficha.ligado{ color:#fff; border-color:rgba(255,255,255,.6); }
.ea-palco.ea-cheio .ea-ficha.atual{ background:var(--rosa); border-color:var(--rosa); color:#fff; }
.ea-palco.ea-cheio .ea-barra{ margin:0; width:100%; max-width:520px; }
.ea-palco.ea-cheio .ea-dica{ display:none; }
.ea-palco.ea-cheio .ea-cheio-bt{ background:var(--rosa); border-color:var(--rosa); }
body.ea-travado{ overflow:hidden; }

/* Fichas dos textos: trocar de bloco sem sair de perto do convite. */
.ea-fichas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.ea-ficha{
  border:1px solid var(--borda); background:var(--papel); color:var(--tinta-fraca);
  border-radius:8px; padding:8px 14px; min-height:38px;
  font-size:.8rem; font-weight:700; cursor:pointer;
}
.ea-ficha.ligado{ color:var(--tinta); border-color:var(--roxo); }
.ea-ficha.atual{ background:var(--rosa); border-color:var(--rosa); color:#fff; }

/* A lista completa continua existindo, mas fora do caminho. */
.ea-mais{ margin-top:14px; }
.ea-mais > summary{
  cursor:pointer; font-size:.84rem; font-weight:800; color:var(--roxo-esc);
  padding:10px 4px; list-style:revert;
}
.ea-mais[open] > summary{ margin-bottom:8px; }

/* Barra de comandos do bloco escolhido, logo abaixo do convite. */
.ea-barra{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding:8px 10px;
  background:var(--papel); border:1px solid var(--borda);
  border-radius:12px; box-shadow:var(--sombra-1);
}
.ea-barra-nome{
  font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinta-fraca); padding-left:6px; flex:0 0 auto;
}
.ea-barra-acoes{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.ea-barra-acoes button{
  width:44px; height:44px; flex:0 0 auto;
  border:1px solid var(--borda); background:var(--neutro); color:var(--tinta);
  border-radius:8px; font-size:.9rem; font-weight:800; line-height:1; cursor:pointer;
}
.ea-barra-acoes button:active{ background:var(--rosa); border-color:var(--rosa); color:#fff; }
.ea-barra-acoes button[aria-pressed="true"]{
  background:var(--roxo); border-color:var(--roxo); color:#fff;
}
.ea-barra-acoes button[data-acao="ocultar"]:active{ background:var(--tinta); border-color:var(--tinta); }
.ea-barra-cor{
  width:44px; height:44px; border-radius:8px; overflow:hidden;
  /* Aro escuro: sem ele um texto branco vira um buraco branco na barra branca. */
  border:2px solid var(--tinta-sub); flex:0 0 auto; cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.ea-barra-cor input{
  width:150%; height:150%; margin:-25%; border:0; padding:0; background:none; cursor:pointer;
}

.ea-barra-escrita{ display:flex; gap:8px; width:100%; align-items:center; }
.ea-barra-escrita input{
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px;
  border:1px solid var(--borda); border-radius:8px; background:var(--neutro);
  font:inherit; color:var(--tinta);
}
.ea-barra-escrita button{
  width:44px; height:44px; flex:0 0 auto; cursor:pointer;
  border:0; border-radius:8px; background:var(--rosa); color:#fff; font-size:1rem;
}

.ea-dica{ font-size:.82rem; color:var(--tinta-sub); margin:10px 2px 0; }
.ea-dica .so-mouse{ display:none; }
@media (hover:hover){ .ea-dica .so-mouse{ display:inline; } .ea-dica .so-toque{ display:none; } }
.ea-dica kbd{
  background:var(--neutro); border:1px solid var(--borda); border-radius:5px;
  padding:1px 5px; font-size:.78em;
}

.ea-lado{ display:flex; flex-direction:column; gap:8px; }
.ea-item{
  border:1px solid var(--borda); border-radius:var(--raio-sm);
  background:var(--papel); padding:10px 12px;
}
.ea-item.aberto{ border-color:var(--rosa); }
.ea-item:not(.ligado) .ea-cabeca span{ color:var(--tinta-fraca); }
.ea-cabeca{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ea-liga{ display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; font-weight:700; }
.ea-liga input{ margin:0; }
.ea-abrir{
  border:1px solid var(--borda); background:var(--neutro); color:var(--tinta-sub);
  border-radius:8px; padding:8px 16px; font-size:.82rem; font-weight:700; cursor:pointer;
  min-height:40px;                     /* alvo de toque, não de mouse */
}
.ea-abrir:hover{ border-color:var(--roxo); color:var(--roxo-esc); }
.ea-abrir[aria-expanded="true"]{
  background:var(--rosa); border-color:var(--rosa); color:#fff;
}
.ea-ctrl{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--borda); }
.ea-ctrl .form-label{ font-size:.78rem; margin-bottom:3px; }
.ea-num{ font-weight:800; color:var(--roxo-esc); }
.ea-chaves{ display:flex; gap:18px; }
.ea-ctrl .form-range{ height:34px; }
.ea-ctrl .form-control-color{ height:44px; }

/* Setas de ajuste fino: arrastar com o dedo acerta o lugar aproximado,
   estes botões acertam o ponto. */
.ea-setas{
  display:grid; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,44px);
  gap:6px; justify-content:center; margin:4px auto 10px;
}
.ea-setas button{
  border:1px solid var(--borda); background:var(--neutro); color:var(--tinta);
  border-radius:8px; font-size:1rem; line-height:1; cursor:pointer;
  touch-action:none;   /* segurar a seta repete, não rola a página */
}
.ea-setas button:active{ background:var(--rosa); border-color:var(--rosa); color:#fff; }
.ea-setas .cima{ grid-column:2; grid-row:1; }
.ea-setas .esq{  grid-column:1; grid-row:2; }
.ea-setas .baixo{grid-column:2; grid-row:2; }
.ea-setas .dir{  grid-column:3; grid-row:2; }
.ea-setas .centrar{ grid-column:3; grid-row:1; font-size:.7rem; font-weight:700; }

@media (max-width:991.98px){
  /* No celular o painel do bloco escolhido é o assunto: ele abre grande e a
     lista dos outros fica só como interruptor. */
  .ea-item{ padding:12px 14px; }
  .ea-liga{ min-height:40px; }
  .ea-item.aberto{ box-shadow:var(--sombra); }
}

/* ---- o convite publicado ---- */
.arte-livre{
  container-type:inline-size;
  position:relative; aspect-ratio:4 / 5; width:100%; overflow:hidden;
  background:var(--neutro) center/cover no-repeat;
  font-family:var(--tema-fonte,var(--titulo));
}
.al-bloco{
  /* Sem negrito falso: o cartaz do WhatsApp é composto com GD, que não sabe
     engordar traço. Onde a família não tem 700 de verdade, os dois lados
     desenham o mesmo peso — e as linhas quebram no mesmo lugar. */
  font-synthesis-weight:none;
  position:absolute; width:max-content; max-width:92%; line-height:1.1;
  overflow-wrap:anywhere;
  /* TUDO em cqw, nada em px. Um padding fixo é uma fatia MAIOR da caixa num
     cartão estreito do que num largo: sobra menos espaço para o texto, a
     linha quebra num ponto diferente, o bloco muda de altura — e como ele é
     centrado nela, sobe ou desce. Era isso que fazia a data cair em cima da
     frase no cartaz. Proporcional, o desenho é o mesmo em qualquer largura. */
  padding:0.25cqw 0.5cqw; white-space:pre-wrap;
}

/* O código entra no meio do formulário de confirmação, não numa segunda tela.
   Fica destacado porque é o campo que decide se o endereço aparece. */
.campo-codigo-rsvp{
  background:var(--creme); border:1px dashed var(--tema-primaria,var(--rosa));
  border-radius:var(--raio-sm); padding:14px 16px;
}
.campo-codigo-rsvp .form-control{ max-width:260px; letter-spacing:.06em; }

/* ---- fundos prontos e paleta do tema ---- */
.ea-fundos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:8px; margin-top:10px; max-height:230px; overflow-y:auto;
  padding:10px; background:var(--neutro); border:1px solid var(--borda); border-radius:10px;
}
.ea-fundo-op{
  position:relative; aspect-ratio:4 / 5; border-radius:6px; cursor:pointer;
  border:2px solid transparent; background:center/cover no-repeat; padding:0;
  display:flex; align-items:flex-end; overflow:hidden;
}
.ea-fundo-op span{
  width:100%; padding:4px 5px; font-size:.62rem; font-weight:700; color:#fff;
  background:rgba(45,27,61,.62); text-align:center; line-height:1.15;
}
.ea-fundo-op.atual{ border-color:var(--rosa); }
.ea-fundo-envio{
  grid-column:1 / -1; min-height:44px; cursor:pointer;
  border:1px dashed var(--roxo); background:var(--papel); color:var(--roxo-esc);
  border-radius:8px; font-weight:700; font-size:.84rem;
}

.ea-barra-paleta{ display:flex; flex-direction:column; gap:6px; width:100%; }
.ea-paleta-topo{ display:flex; align-items:center; gap:8px; }
.ea-paleta-rot{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinta-fraca); margin-right:auto;
}
.ea-paleta-tema{ display:flex; gap:5px; flex-wrap:wrap; }
/* A paleta inteira: doze matizes em quatro claridades, mais os cinzas. */
.ea-paleta-grade{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(30px,1fr));
  gap:5px; max-height:170px; overflow-y:auto;
}
.ea-tinta{
  width:30px; height:30px; flex:0 0 auto; cursor:pointer; padding:0;
  border:1px solid rgba(45,27,61,.35); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.ea-paleta-grade .ea-tinta{ width:100%; }
.ea-tinta.escolhida{ outline:3px solid var(--rosa); outline-offset:1px; }
.ea-paleta-tema .ea-tinta{ width:34px; height:34px; }
.ea-tinta-livre{ width:38px; height:38px; }
.ea-tinta-livre{ overflow:hidden; display:block; }
.ea-tinta-livre input{ width:150%; height:150%; margin:-25%; border:0; padding:0; background:none; cursor:pointer; }
.ea-barra-paleta button[data-acao="pronto"]{
  width:38px; height:38px; margin-left:auto; border:0; border-radius:8px;
  background:var(--rosa); color:#fff; cursor:pointer;
}
/* O botão da cor mostra a cor atual do texto escolhido. */
#ea-barra-cor-bt{ background:var(--ea-cor,#fff); }

.ea-palco.ea-cheio .ea-fundos{ max-width:520px; width:100%; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.ea-palco.ea-cheio .ea-fundo-envio{ background:transparent; color:#e6dcf0; border-color:rgba(255,255,255,.45); }

/* Alça de largura da caixa: muda quanto o texto ocupa, nunca o tamanho da letra. */
.ea-alca{
  position:absolute; z-index:4; width:28px; height:28px; margin:-14px 0 0 -14px;
  border-radius:6px; cursor:ew-resize; touch-action:none;
  background:var(--rosa); border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.ea-alca::after{
  content:'↔'; display:block; text-align:center; line-height:24px;
  font-size:.8rem; color:#fff; font-weight:800;
}
.ea-alca.mexendo{ transform:scale(1.15); }
.ea-alca[hidden]{ display:none; }

/* Escrever direto na caixa do convite, onde o texto aparece. */
.ea-bloco.editando{
  outline:2px solid var(--rosa); outline-offset:2px;
  cursor:text; background:rgba(0,0,0,.18);
  -webkit-user-select:text; user-select:text;
  -webkit-touch-callout:default;
}
.ea-bloco.editando:empty::before{
  content:'escreva aqui'; opacity:.5; font-style:italic;
}
#ea-barra-escrever[aria-pressed="true"]{
  background:var(--rosa); border-color:var(--rosa); color:#fff;
}

/* Controles colados na caixa escolhida. Acima dela, para não disputar lugar
   com a alça de largura, que mora na borda direita. */
.ea-acoes-bloco{
  position:absolute; z-index:5; display:flex; gap:5px;
  transform:translate(0, -100%); margin-top:-8px;
}
.ea-acoes-bloco[hidden]{ display:none; }
.ea-acoes-bloco.abaixo{ transform:translate(0, 0); margin:8px 0 0; }
.ea-acoes-bloco button{
  width:36px; height:36px; padding:0; cursor:pointer; touch-action:none;
  border:2px solid #fff; border-radius:8px; font-size:.9rem; line-height:1;
  background:rgba(45,27,61,.82); color:#fff;
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.ea-acoes-bloco button:active{ background:var(--rosa); border-color:var(--rosa); }
.ea-acoes-bloco button[data-acao-bloco="escrever"][aria-pressed="true"]{
  background:var(--rosa); border-color:var(--rosa);
}

/* ===== Sobre o site: a história de como isto começou ===================== */
.sobre-topo{ text-align:center; }
.selo-sobre{
  display:inline-block; background:#f3ecff; color:var(--roxo-esc);
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:6px;
}
.sobre-titulo{
  font-family:var(--titulo); font-weight:800; line-height:1.1; margin:16px 0 14px;
  font-size:clamp(1.9rem, 6vw, 3rem);
  background:linear-gradient(96deg,var(--rosa),var(--roxo));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sobre-linha-fina{
  font-size:1.08rem; color:var(--tinta-sub); max-width:52ch; margin-inline:auto;
}
/* ~65 caracteres por linha: é onde o olho não se perde na volta. */
.sobre-p{ font-size:1.05rem; line-height:1.75; margin:0 0 20px; max-width:65ch; }
.sobre-abre::first-letter{
  float:left; font-family:var(--titulo); font-size:4.25rem; line-height:.865;
  padding:0 12px 0 0; color:var(--rosa);
}
.sobre-fecha{ font-weight:700; }
.sobre-h2{
  font-family:var(--titulo); font-weight:800; font-size:1.45rem;
  margin:38px 0 14px; color:var(--tinta);
}
.sobre-citacao{
  margin:26px 0; padding:20px 22px; border-left:5px solid var(--rosa);
  background:var(--creme); border-radius:0 10px 10px 0;
  font-size:1.12rem; line-height:1.6; font-weight:600; color:var(--tinta);
}
.sobre-lista{ margin:0 0 22px; padding-left:22px; max-width:65ch; }
.sobre-lista li{ margin-bottom:10px; line-height:1.65; }
.sobre-arte{ margin:34px 0; text-align:center; }
.sobre-arte img{
  width:100%; max-width:100%; height:auto; border-radius:10px;
  box-shadow:var(--sombra-1);
}

/* =====================================================================
 * PARCERIAS — o diretório de parceiros
 *
 * Convive com o resto do site reusando as variáveis do :root. Nada aqui
 * redefine classe existente — só acrescenta.
 * ================================================================== */

/* ---- utilitários que faltavam fora do escopo do painel de festas ---- */
.sub{ color:var(--tinta-sub); font-size:.95rem; margin:4px 0 0; }
.meta{ color:var(--tinta-sub); font-size:.88rem; }
.meta a{ color:inherit; text-decoration:underline; }

.formulario{ display:flex; flex-direction:column; gap:16px; }
.campo{ display:flex; flex-direction:column; gap:6px; width:100%; }
.campo > span{ font-weight:700; font-size:.92rem; }
.campo input, .campo select, .campo textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--borda);
  border-radius:12px; background:#fff; font:inherit; color:var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--roxo); box-shadow:0 0 0 3px rgba(139,92,246,.18);
}
.campo small{ color:var(--tinta-sub); font-size:.82rem; }
.campo small.erro{ color:var(--rosa-esc); font-weight:700; }
.campo input[type="file"]{ padding:9px; background:var(--neutro); }

.grupo{ border:1.5px solid var(--borda); border-radius:var(--raio); padding:16px; }
.grupo > legend{ font-size:.92rem; font-weight:800; padding:0 8px; width:auto;
  color:var(--roxo-esc); }

.escolha{ display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:6px 0; }
.escolha input{ margin-top:3px; flex:0 0 auto; }

.tabela-rolagem{ overflow-x:auto; }
.tabela{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tabela th, .tabela td{ padding:10px 12px; text-align:left;
  border-bottom:1px solid var(--borda); white-space:nowrap; }
.tabela thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-sub); }

.cartao-ok{ border-color:var(--verde); background:#f2fdf8; }
.cartao-cta{ background:linear-gradient(150deg,#fff6ea,#ffeede); border:2px solid var(--amarelo); }

.numero-grande{ text-align:center; display:flex; flex-direction:column; gap:4px;
  align-items:center; }
.numero-grande b{ font-size:2.2rem; line-height:1; color:var(--roxo-esc); }
.numero-grande span{ color:var(--tinta-sub); font-size:.86rem; }
.numero-grande .btn{ margin-top:8px; }

.lista-pendencias{ list-style:none; padding:0; margin:0; display:flex;
  flex-direction:column; gap:8px; }
.lista-pendencias li{ padding-left:26px; position:relative; }
.lista-pendencias li::before{ content:'○'; position:absolute; left:6px;
  color:var(--amarelo); font-weight:900; }

/* ---- etiquetas próprias da casa ---- */
.etiqueta-ativa{ background:#e9fbf2; color:#0b6b47; }
.etiqueta-aguardando_pagamento{ background:#fff8e6; color:#8a5b00; }
.etiqueta-suspensa{ background:var(--neutro); color:var(--tinta-sub); }
.etiqueta-livre{ background:#e9fbf2; color:#0b6b47; }
.etiqueta-reservado{ background:#fff8e6; color:#8a5b00; }
.etiqueta-ocupado{ background:#f3ecff; color:var(--roxo-esc); }
.etiqueta-bloqueado{ background:var(--neutro); color:var(--tinta-sub); }
.etiqueta-publicado{ background:#e9fbf2; color:#0b6b47; }
.etiqueta-pago{ background:#e9fbf2; color:#0b6b47; }
.etiqueta-pendente{ background:#fff8e6; color:#8a5b00; }
.etiqueta-falhou, .etiqueta-estornado{ background:#ffeaf0; color:var(--rosa-esc); }

/* ---- o mapa ---- */
.mapa-bloco{ margin-bottom:20px; }
.mapa{ width:100%; border-radius:var(--raio); overflow:hidden;
  border:1.5px solid var(--borda); background:var(--neutro); }
.mapa .leaflet-container{ font:inherit; }

/* ---- busca ---- */
.busca-parceiros{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;
  margin-bottom:24px; }
.busca-parceiros .campo{ width:auto; }
.busca-parceiros .campo:first-child{ flex:1 1 240px; }

/* ---- card da casa na lista ---- */
.parceiro-cartao{ background:var(--papel); border:1.5px solid var(--borda);
  border-radius:var(--raio); overflow:hidden; height:100%; display:flex;
  flex-direction:column; box-shadow:var(--sombra-1); transition:transform .15s ease; }
.parceiro-cartao:hover{ transform:translateY(-3px); }
.parceiro-capa{ display:block; position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg,#f3ecff,#ffeef5); }
.parceiro-capa img{ width:100%; height:100%; object-fit:cover; display:block; }
.parceiro-capa-vazia{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:2.6rem; }
.parceiro-logo{ position:absolute; left:14px; bottom:-22px; border-radius:14px;
  border:3px solid var(--papel); background:#fff; object-fit:cover;
  box-shadow:var(--sombra-1); }
.parceiro-corpo{ padding:32px 16px 16px; flex:1; }
.parceiro-corpo h2 a{ color:var(--tinta); text-decoration:none; }
.parceiro-corpo h2 a:hover{ color:var(--rosa-esc); }

/* ---- página da casa ---- */
.parceiro-topo{ position:relative; background:linear-gradient(135deg,#f3ecff,#ffeef5); }
.parceiro-topo-capa{ width:100%; height:clamp(160px,28vw,320px); object-fit:cover;
  display:block; }
.parceiro-topo-info{ display:flex; gap:18px; align-items:flex-end; padding-top:20px;
  padding-bottom:20px; flex-wrap:wrap; }
.parceiro-topo-logo{ border-radius:18px; border:4px solid var(--papel); background:#fff;
  object-fit:cover; box-shadow:var(--sombra-1); }
.parceiro-topo h1{ margin:0; }
.parceiro-chamada{ font-size:1.05rem; color:var(--tinta-sub); margin:4px 0 6px; }

.parceiro-lateral{ display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }
@media (max-width:991.98px){ .parceiro-lateral{ position:static; } }

.texto-corrido{ line-height:1.75; }
.galeria-parceiro{ display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
.galeria-parceiro figure{ margin:0; }
.galeria-parceiro img{ width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:14px; border:1.5px solid var(--borda); }
.galeria-parceiro figcaption{ font-size:.82rem; color:var(--tinta-sub); margin-top:4px; }

.lista-inclui, .lista-opcional{ list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px; }
.lista-inclui li::before{ content:'✓ '; color:var(--verde-esc); font-weight:900; }
.lista-opcional li::before{ content:'+ '; color:var(--tinta-sub); font-weight:900; }

.pacote-cartao{ border:1.5px solid var(--borda); border-radius:var(--raio);
  padding:16px; height:100%; background:var(--papel); }
.pacote-preco{ font-size:1.4rem; font-weight:800; color:var(--roxo-esc); margin:2px 0 6px; }
.pacote-preco .sob-consulta{ font-size:1rem; font-weight:700; color:var(--tinta-sub); }

.agenda-publica{ list-style:none; padding:0; margin:0; display:flex;
  flex-direction:column; gap:10px; }
/* Empilhado sempre: com data e faixas na mesma linha, "5 de setembro" cabia
   e "12 de setembro" quebrava, e a lista ficava com duas alturas diferentes. */
.agenda-publica li{ display:flex; flex-direction:column; gap:6px;
  border-bottom:1px dashed var(--borda); padding-bottom:10px; }
.agenda-publica li:last-child{ border-bottom:0; }
.agenda-faixas{ display:flex; gap:6px; flex-wrap:wrap; }
.agenda-faixa{ background:#e9fbf2; color:#0b6b47; border-radius:999px;
  padding:2px 10px; font-size:.82rem; font-weight:700; }

/* ---- agenda no painel ---- */
.faixa-linha{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px dashed var(--borda); }
.faixa-linha:last-child{ border-bottom:0; }
.faixa-hora{ font-weight:800; font-variant-numeric:tabular-nums; min-width:104px; }
.faixa-nome{ flex:1 1 120px; color:var(--tinta-sub); font-size:.9rem; }
.faixa-acoes{ display:flex; gap:6px; align-items:center; }
.faixa-acoes select{ padding:6px 8px; border:1.5px solid var(--borda);
  border-radius:10px; font:inherit; font-size:.85rem; }

/* ---- fotos e posts no painel ---- */
.foto-parceiro{ margin:0; }
.foto-parceiro img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  border:1.5px solid var(--borda); }
.foto-parceiro figcaption{ font-size:.82rem; color:var(--tinta-sub); margin:4px 0; }
.previa-logo{ border-radius:14px; object-fit:cover; border:1.5px solid var(--borda); }
.previa-capa{ border-radius:10px; object-fit:cover; border:1.5px solid var(--borda); }
.post-mini{ border-radius:12px; object-fit:cover; flex:0 0 auto; }
.post-capa{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px;
  margin-bottom:12px; }
.post-capa-grande{ width:100%; border-radius:var(--raio); margin:18px 0; }
.post-linha{ display:flex; gap:14px; align-items:flex-start; padding:14px 0;
  border-bottom:1px dashed var(--borda); }
.post-linha img{ border-radius:12px; object-fit:cover; flex:0 0 auto; }
.post-linha h3 a{ color:var(--tinta); text-decoration:none; }
.post-linha h3 a:hover{ color:var(--rosa-esc); }

.escolher-casa{ background:var(--neutro); border-radius:14px; padding:14px;
  margin-bottom:16px; }

.lista-vantagens{ list-style:none; padding:0; margin:0; display:flex;
  flex-direction:column; gap:8px; }
.lista-vantagens li{ padding-left:26px; position:relative; }
.lista-vantagens li::before{ content:'✓'; position:absolute; left:4px;
  color:var(--verde-esc); font-weight:900; }

/* ---- o anúncio ---- */
.anuncio-parceiro{ border:2px dashed var(--borda); border-radius:var(--raio);
  background:var(--papel); }
.anuncio-parceiro a{ display:flex; gap:14px; align-items:center; padding:16px;
  text-decoration:none; color:var(--tinta); }
.anuncio-parceiro a:hover{ color:var(--tinta); }
.anuncio-parceiro:hover{ border-color:var(--roxo); }
.anuncio-logo{ border-radius:14px; object-fit:cover; flex:0 0 auto;
  border:1.5px solid var(--borda); }
.anuncio-texto{ flex:1; display:flex; flex-direction:column; gap:2px; }
.anuncio-selo{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em;
  font-weight:800; color:var(--roxo-esc); }
.anuncio-chamada{ font-size:.9rem; color:var(--tinta-sub); }
.anuncio-seta{ font-size:1.4rem; color:var(--roxo); flex:0 0 auto; }

/* ---- categorias do diretório ---- */
.categorias{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.categorias a{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:999px; border:1.5px solid var(--borda); background:var(--papel);
  color:var(--tinta); text-decoration:none; font-size:.88rem; font-weight:700;
  white-space:nowrap;
}
.categorias a:hover{ border-color:var(--roxo); color:var(--roxo-esc); }
.categorias a.ativo{ background:var(--roxo); border-color:var(--roxo); color:#fff; }

.etiqueta-categoria{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em; font-weight:800;
  color:var(--roxo-esc); margin-bottom:6px;
}

/* A pergunta que decide as telas seguintes merece peso visual. */
.destaque-escolha{
  background:#f8f4ff; border:1.5px solid #e5d8ff; border-radius:14px;
  padding:14px; align-items:flex-start;
}
.destaque-escolha small{ color:var(--tinta-sub); display:block; margin-top:4px; }

.parcerias-topo{ padding-bottom:0; }
.projetos-amigos{ border-top:1px solid var(--borda); margin-top:24px; padding-top:32px; }