/* ===========================================================================
   Família Batuta — folha de estilo única (/batuta/)
   ---------------------------------------------------------------------------
   Design system "Playful Geometric" aplicado NA PALETA DO BATUTA: a estrutura
   vem do sistema (borda grossa, sombra dura sem blur, botão pílula, cartão
   adesivo, confete, bounce) e a cor vem da página que já existia — papel
   amarelo, creme, tinta marrom, vermelho e verde. O verbete de dicionário
   continua sendo a identidade; ele só ganhou o tratamento de adesivo.

   Tipografia: Alfa Slab One (assinatura) · Outfit (interface, no lugar do
   Archivo Narrow) · Lora (texto corrido).
   =========================================================================== */

:root{
    /* cor */
    --papel:#E9B44C;      /* fundo, o amarelo otimista do sistema */
    --creme:#F8F1DE;      /* superfície de cartão */
    --branco:#FFFDF5;     /* campo de formulário */
    --tinta:#27211A;      /* texto, borda e sombra */
    --musgo:#6B6157;      /* texto secundário */
    --vermelho:#BF3B23;   /* ação principal */
    --verde:#20563A;      /* apoio */
    --azul:#2A6F97;       /* terceiro confete */

    /* forma */
    --b:2px;
    --r-sm:8px; --r-md:16px; --r-lg:24px; --r-full:9999px;

    /* sombra dura: sem blur, deslocamento sólido */
    --pop:4px 4px 0 var(--tinta);
    --pop-alta:6px 6px 0 var(--tinta);
    --pop-baixa:2px 2px 0 var(--tinta);
    --pop-suave:6px 6px 0 rgba(39,33,26,.18);

    /* movimento com overshoot */
    --mola:cubic-bezier(.34,1.56,.64,1);
    --tempo:.28s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:'Lora',Georgia,serif;background:var(--papel);color:var(--tinta);
    background-image:radial-gradient(rgba(39,33,26,.07) 1px,transparent 1.4px);
    background-size:14px 14px;line-height:1.6;overflow-x:hidden;
}
/* o sistema pede container generoso (max-w-6xl) — 1120px é o equivalente aqui,
   e a árvore, que é o conteúdo mais largo da página, agradece */
.miolo{max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
a{color:var(--vermelho)}
img{max-width:100%;height:auto}

.pula{position:absolute;left:-9999px;background:var(--creme);border:var(--b) solid var(--tinta);
      border-radius:var(--r-sm);padding:.6rem 1rem;z-index:200}
.pula:focus{left:1rem;top:1rem}

/* ── Botões: a "candy button" do sistema, na cor da casa ─────────────────── */
.bt{
    display:inline-flex;align-items:center;gap:.45rem;
    font-family:'Outfit',system-ui,sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
    border:var(--b) solid var(--tinta);border-radius:var(--r-full);
    padding:.62rem 1.15rem;cursor:pointer;text-decoration:none;line-height:1.1;
    background:var(--creme);color:var(--tinta);
    transition:transform var(--tempo) var(--mola),box-shadow var(--tempo) var(--mola),background var(--tempo) ease;
}
.bt-doce{background:var(--vermelho);color:var(--creme);box-shadow:var(--pop)}
.bt-doce:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-alta)}
.bt-doce:active{transform:translate(2px,2px);box-shadow:var(--pop-baixa)}
.bt-verde{background:var(--verde);color:var(--creme);box-shadow:var(--pop)}
.bt-verde:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-alta)}
.bt-verde:active{transform:translate(2px,2px);box-shadow:var(--pop-baixa)}
.bt-fantasma{background:transparent;box-shadow:none}
.bt-fantasma:hover{background:var(--papel)}
.bt:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:3px solid var(--vermelho);outline-offset:2px;
}

/* ── Barra de conta ──────────────────────────────────────────────────────── */
.barra-conta{background:var(--creme);border-bottom:var(--b) solid var(--tinta);position:relative;z-index:50}
.barra-dentro{max-width:1120px;margin:0 auto;padding:.55rem clamp(1rem,4vw,2rem);
              display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.barra-conta .marca{font-family:'Alfa Slab One',serif;font-size:1rem;color:var(--tinta);text-decoration:none}

/* ── Ícones: traço grosso, e nunca soltos ────────────────────────────────────
   O sistema é explícito: um "check" não é um check, é um check DENTRO de um
   círculo verde. Por isso todo ícone daqui mora numa forma — .bolinha (botão)
   ou .adesivo-icone (cartão). */
.ic{width:1.05em;height:1.05em;display:block;flex:none}
.bolinha{
    width:22px;height:22px;border-radius:var(--r-full);background:var(--branco);color:var(--tinta);
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    border:1.5px solid var(--tinta);
}
.bolinha .ic{width:13px;height:13px}
.bt-fantasma .bolinha{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
.bt:hover .bolinha{animation:sacode .5s var(--mola)}
@keyframes sacode{0%{transform:rotate(0)}30%{transform:rotate(9deg)}60%{transform:rotate(-9deg)}100%{transform:rotate(0)}}
.barra-conta nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.barra-conta .quem-sou{font-family:'Outfit',sans-serif;font-weight:600;font-size:.85rem}
.barra-conta .quem-sou em{color:var(--musgo);font-size:.78rem}
.avatar{border-radius:var(--r-full);border:var(--b) solid var(--tinta);object-fit:cover;width:30px;height:30px}

/* ── Confete: formas primitivas atrás do conteúdo ────────────────────────── */
.confete{position:absolute;pointer-events:none;z-index:0}
.confete-1{width:190px;height:190px;border-radius:var(--r-full);background:var(--creme);
           top:-30px;right:-40px;opacity:.75}
.confete-2{width:64px;height:64px;background:var(--vermelho);border:var(--b) solid var(--tinta);
           border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;transform:rotate(-12deg);
           bottom:12%;right:6%;opacity:.9}
.confete-3{width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;
           border-bottom:44px solid var(--verde);top:32%;right:22%;transform:rotate(14deg);opacity:.85}

/* ── Cabeçalho: o verbete ────────────────────────────────────────────────── */
.verbete{padding:clamp(2.2rem,7vw,4.2rem) 0 clamp(1.5rem,5vw,2.5rem);position:relative}
/* o :not(.confete) é o que faz o confete existir: sem ele esta regra vence a
   .confete por especificidade e devolve os enfeites para o fluxo do texto */
.verbete > *:not(.confete){position:relative;z-index:1}
.chapeu{
    font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.2em;font-size:.74rem;color:var(--verde);
    display:inline-block;border:var(--b) solid var(--verde);border-radius:var(--r-full);
    padding:.35rem .95rem;margin-bottom:1.5rem;background:var(--creme);box-shadow:var(--pop-baixa);
}
h1{
    font-family:'Alfa Slab One',serif;font-weight:400;color:var(--tinta);
    font-size:clamp(3rem,12vw,6.5rem);line-height:1;letter-spacing:.01em;
    text-shadow:5px 5px 0 var(--creme);
}
.fonetica{font-style:italic;color:var(--musgo);margin:.7rem 0 1.7rem;font-size:1.05rem}
.definicoes{list-style:none;max-width:620px;display:grid;gap:.9rem}
.definicoes li{display:flex;gap:.8rem;align-items:baseline}
.definicoes .num{
    font-family:'Outfit',sans-serif;font-weight:800;color:var(--creme);
    background:var(--tinta);min-width:1.6rem;height:1.6rem;border-radius:var(--r-full);
    display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex:none;
    position:relative;top:.15rem;
}
.definicoes .classe{font-style:italic;color:var(--musgo);margin-right:.25rem}
.definicoes li.essa{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-md);
    padding:.8rem 1rem;box-shadow:var(--pop);transform:rotate(-.8deg);
}
.definicoes li.essa .num{background:var(--vermelho)}
.definicoes li.essa strong{color:var(--vermelho)}
.carimbo{
    font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;font-size:.72rem;color:var(--vermelho);
    display:inline-block;transform:rotate(-2deg);margin-top:.2rem;
}

/* ── Divisor ─────────────────────────────────────────────────────────────── */
.batuta-divisor{display:flex;justify-content:center;padding:1.3rem 0}
.batuta-divisor svg{width:min(320px,70%);height:22px}

/* ── Seções ──────────────────────────────────────────────────────────────── */
/* o sistema pede py-24 (96px). Aqui o teto é 4rem porque as seções já vêm
   separadas pelo divisor da batuta, que ocupa espaço vertical por conta dele */
section{padding:clamp(1.8rem,6vw,4rem) 0;position:relative}
h2{font-family:'Alfa Slab One',serif;font-weight:400;font-size:clamp(1.6rem,5vw,2.3rem);margin-bottom:.35rem}
/* rabisco sublinhando o título — o "squiggle" do sistema, em SVG embutido */
h2::after{
    content:"";display:block;width:118px;height:11px;margin:.15rem 0 .5rem;
    background:no-repeat left/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 11'%3E%3Cpath d='M2 7c8-6 16 4 24-1s16 5 24 0 16 5 24 0 16 4 22 1' fill='none' stroke='%23BF3B23' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
h2.sem-rabisco::after{display:none}
.sub{color:var(--musgo);margin-bottom:1.5rem;max-width:620px}
.msg-ok{background:var(--creme);border:var(--b) solid var(--verde);color:var(--verde);
        border-radius:var(--r-sm);padding:.7rem 1rem;margin-bottom:1.2rem;font-size:.92rem;box-shadow:var(--pop-baixa)}
.aviso{background:var(--branco);border:var(--b) solid var(--vermelho);color:var(--vermelho);
       border-radius:var(--r-sm);padding:.65rem .85rem;font-size:.92rem;margin-bottom:.9rem}
.rotulo{font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
        letter-spacing:.12em;font-size:.7rem;color:var(--verde)}

/* ── Busca ───────────────────────────────────────────────────────────────── */
.busca-caixa{position:relative;max-width:440px;margin-bottom:1.4rem;z-index:20}
.busca-caixa input{
    width:100%;border:var(--b) solid var(--tinta);border-radius:var(--r-full);background:var(--branco);
    font-family:'Lora',serif;font-size:1rem;padding:.72rem 1.15rem;box-shadow:var(--pop);
    transition:box-shadow var(--tempo) var(--mola),transform var(--tempo) var(--mola);
}
.busca-caixa input:focus{transform:translate(-2px,-2px);box-shadow:var(--pop-alta);outline:none;border-color:var(--vermelho)}
.busca-res{
    position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-md);
    box-shadow:var(--pop);max-height:290px;overflow:auto;display:none;
}
.busca-res button{
    display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
    font-family:'Lora',serif;font-size:.95rem;padding:.6rem .95rem;color:var(--tinta);
}
.busca-res button:hover,.busca-res button:focus-visible{background:var(--papel);outline:none}
.busca-res small{color:var(--musgo)}

/* ── Árvore ──────────────────────────────────────────────────────────────── */
.arvore-caixa{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-lg);
    box-shadow:var(--pop-suave);padding:1.2rem 1.2rem 1.2rem .6rem;overflow-x:auto;position:relative;z-index:1;
}
.arvore-topo{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap;padding:0 0 .8rem .6rem}
.arvore-raiz{font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--verde)}
.arvore-topo a{font-size:.85rem}
.arvore ul{list-style:none;padding-left:1.3rem;border-left:2px dotted rgba(39,33,26,.35);margin-left:.55rem}
.arvore > ul{border-left:none;margin-left:0;padding-left:.4rem}
.arvore li{margin:.35rem 0}
.no-pessoa{
    display:inline-block;background:none;border:none;cursor:pointer;text-align:left;
    font-family:'Lora',serif;font-size:1rem;color:var(--tinta);padding:.14rem .4rem;border-radius:var(--r-sm);
    transition:background var(--tempo) ease,transform var(--tempo) var(--mola);
}
.no-pessoa:hover,.no-pessoa:focus-visible{background:var(--papel);outline:none;transform:translateX(2px)}
.no-pessoa .datas{font-size:.78rem;color:var(--musgo)}
.no-pessoa.extra::after{content:" \2726";color:var(--vermelho)}
.no-pessoa.reservado::after{content:" \00B7";color:var(--musgo)}
.uniao{font-family:'Outfit',sans-serif;font-weight:600;font-size:.72rem;
       text-transform:uppercase;letter-spacing:.1em;color:var(--musgo);margin:.45rem 0 .1rem}
details.ramo > summary{cursor:pointer;list-style:none;display:inline-block}
details.ramo > summary::-webkit-details-marker{display:none}
details.ramo > summary::before{
    content:"+";display:inline-block;width:1.2rem;height:1.2rem;line-height:1.05rem;text-align:center;
    border:var(--b) solid var(--tinta);border-radius:6px;background:var(--papel);
    font-family:'Outfit',sans-serif;font-weight:800;font-size:.8rem;
    margin-right:.35rem;vertical-align:2px;box-shadow:var(--pop-baixa);
    transition:transform var(--tempo) var(--mola);
}
details.ramo > summary:hover::before{transform:translate(-1px,-1px) rotate(-6deg)}
details.ramo[open] > summary::before{content:"\2212"}

/* ── Ficha (modal) ───────────────────────────────────────────────────────── */
.ficha-fundo{position:fixed;inset:0;background:rgba(39,33,26,.55);z-index:90;display:none}
.ficha-fundo.aberta{display:flex;align-items:center;justify-content:center;padding:16px}
.ficha{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-lg);
    box-shadow:8px 8px 0 var(--vermelho);
    width:100%;max-width:470px;max-height:86vh;overflow:auto;padding:1.5rem;
    animation:pipoca .3s var(--mola);
}
@keyframes pipoca{from{transform:scale(.9) rotate(-1.5deg);opacity:0}to{transform:none;opacity:1}}
.ficha h3{font-family:'Alfa Slab One',serif;font-weight:400;font-size:1.35rem;margin-bottom:.2rem}
.ficha .rot{font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
            letter-spacing:.12em;font-size:.7rem;color:var(--verde);margin-top:.95rem}
.ficha p{font-size:.95rem}
.ficha .lk{background:none;border:none;cursor:pointer;font-family:'Lora',serif;font-size:.95rem;
           color:var(--vermelho);text-decoration:underline;padding:0;text-align:left}
.ficha .acoes-ficha{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.ficha-nota{background:var(--branco);border:var(--b) solid rgba(39,33,26,.25);border-radius:var(--r-sm);
            padding:.7rem .85rem;font-size:.88rem;margin-top:.4rem;text-align:justify;hyphens:auto}
.ficha-cadeado{
    background:var(--papel);border:var(--b) dashed var(--tinta);border-radius:var(--r-md);
    padding:.85rem .95rem;margin-top:1rem;font-size:.88rem;
}
.ficha-cadeado strong{display:block;font-family:'Outfit',sans-serif;text-transform:uppercase;
                      letter-spacing:.1em;font-size:.7rem;margin-bottom:.25rem}

/* ── Formulários ─────────────────────────────────────────────────────────── */
.caixa-form{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-lg);
    padding:1.4rem;box-shadow:var(--pop);max-width:580px;position:relative;z-index:1;
}
.caixa-form.larga{max-width:100%}
.caixa-form label{
    display:block;font-family:'Outfit',sans-serif;font-weight:700;
    text-transform:uppercase;letter-spacing:.11em;font-size:.72rem;margin-bottom:.3rem;
}
.caixa-form input[type=text],.caixa-form input[type=email],.caixa-form input[type=password],
.caixa-form input[type=search],.caixa-form textarea,.caixa-form select{
    width:100%;border:var(--b) solid #CBB89A;border-radius:var(--r-sm);background:var(--branco);
    color:var(--tinta);font-family:'Lora',serif;font-size:1rem;
    padding:.62rem .72rem;margin-bottom:.9rem;box-shadow:4px 4px 0 transparent;
    transition:box-shadow var(--tempo) var(--mola),border-color var(--tempo) ease;
}
.caixa-form input:focus,.caixa-form textarea:focus,.caixa-form select:focus{
    border-color:var(--vermelho);box-shadow:4px 4px 0 var(--vermelho);outline:none;
}
.caixa-form textarea{min-height:96px;resize:vertical}
.caixa-form .dica{font-size:.8rem;color:var(--musgo);margin:-.6rem 0 .95rem;text-align:justify;hyphens:auto}
.caixa-form button[type=submit]{
    font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;font-size:.82rem;color:var(--creme);background:var(--vermelho);
    border:var(--b) solid var(--tinta);border-radius:var(--r-full);padding:.75rem 1.6rem;cursor:pointer;
    box-shadow:var(--pop);min-height:48px;
    transition:transform var(--tempo) var(--mola),box-shadow var(--tempo) var(--mola);
}
.caixa-form button[type=submit]:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-alta)}
.caixa-form button[type=submit]:active{transform:translate(2px,2px);box-shadow:var(--pop-baixa)}
/* a seta na bolinha branca que o sistema pede no botão principal — aqui ela vem
   por ::after para não ter que tocar em sete formulários */
.caixa-form button[type=submit]{display:inline-flex;align-items:center;gap:.6rem}
.caixa-form button[type=submit]::after{
    content:"";width:22px;height:22px;flex:none;border-radius:var(--r-full);
    background:var(--branco) no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327211A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
    border:1.5px solid var(--tinta);transition:transform var(--tempo) var(--mola);
}
.caixa-form button[type=submit]:hover::after{transform:rotate(9deg)}
.duas-col{display:grid;grid-template-columns:1fr 1fr;gap:0 .9rem}
@media (max-width:560px){.duas-col{grid-template-columns:1fr}}
.pote-de-mel{position:absolute;left:-9999px;top:-9999px}
details.dobra{margin-top:1.3rem}
details.dobra > summary{
    cursor:pointer;font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;font-size:.8rem;color:var(--vermelho);
    display:inline-block;border:var(--b) solid var(--tinta);border-radius:var(--r-full);
    padding:.5rem 1.1rem;background:var(--creme);box-shadow:var(--pop-baixa);list-style:none;
    transition:transform var(--tempo) var(--mola),box-shadow var(--tempo) var(--mola);
}
details.dobra > summary::-webkit-details-marker{display:none}
details.dobra > summary:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}

/* olho de mostrar senha (regra da casa: todo campo de senha nasce com ele) */
.pw-wrap{position:relative}
.pw-wrap input{margin-bottom:0;padding-right:46px}
.pw-toggle{position:absolute;top:0;right:0;height:calc(100% - .9rem);width:44px;display:flex;
           align-items:center;justify-content:center;background:none;border:0;padding:0;
           box-shadow:none;color:var(--tinta);opacity:.55;cursor:pointer}
.pw-toggle[hidden]{display:none}
.pw-toggle:hover{opacity:1;color:var(--vermelho)}
.pw-toggle svg{width:20px;height:20px;display:block}
.pw-toggle .olho-off{display:none}
.pw-toggle.on .olho-on{display:none}
.pw-toggle.on .olho-off{display:block}

/* ── Cartões adesivo (histórias, pessoa, painel) ─────────────────────────── */
.adesivo{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-lg);
    box-shadow:8px 8px 0 var(--pop-cor,#E2D7BC);padding:clamp(1.2rem,3vw,1.9rem);position:relative;
    transition:transform var(--tempo) var(--mola),box-shadow var(--tempo) var(--mola);
}
.adesivo:hover{transform:rotate(-1deg) scale(1.01);box-shadow:10px 10px 0 var(--pop-cor,#E2D7BC)}
.adesivo.destaque{--pop-cor:var(--vermelho)}
/* o ícone que senta meio dentro, meio fora da borda de cima */
.adesivo{margin-top:30px}
.adesivo-icone{
    position:absolute;top:-28px;left:26px;width:56px;height:56px;border-radius:var(--r-full);
    border:var(--b) solid var(--tinta);background:var(--vermelho);color:var(--creme);
    display:flex;align-items:center;justify-content:center;box-shadow:var(--pop-baixa);
    transition:transform var(--tempo) var(--mola);
}
.adesivo-icone .ic{width:26px;height:26px}
.adesivo:hover .adesivo-icone{animation:sacode .5s var(--mola)}

/* ── Trio "como funciona": a grade de 3 do sistema, com a linha tracejada
      passando por trás e a cor do ícone alternando ─────────────────────────── */
.trio{position:relative;display:grid;gap:2.6rem 1.2rem;grid-template-columns:1fr;margin-top:2.6rem}
@media (min-width:760px){.trio{grid-template-columns:repeat(3,1fr)}}
/* a linha passa na altura do CENTRO das bolinhas (30px), ligando os três.
   width explícito porque <svg> é elemento substituído: com left+right e width
   auto ele fica no tamanho intrínseco do viewBox (100px) em vez de esticar. */
.trio .fio{position:absolute;top:32px;left:6%;width:88%;height:2px;pointer-events:none;display:none}
@media (min-width:760px){.trio .fio{display:block}}
.trio .adesivo{--pop-cor:#E2D7BC;margin-top:30px}
/* nth-of-type, não nth-child: o primeiro filho da grade é o <svg> da linha */
.trio article:nth-of-type(2) .adesivo-icone{background:var(--verde)}
.trio article:nth-of-type(3) .adesivo-icone{background:var(--papel);color:var(--tinta)}
.trio h3{font-family:'Outfit',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:.35rem}
.trio p{font-size:.93rem;text-align:justify;hyphens:auto}

/* ── Marquee: os sobrenomes da árvore passando devagar ───────────────────── */
.marquise{
    overflow:hidden;border-top:var(--b) solid var(--tinta);border-bottom:var(--b) solid var(--tinta);
    background:var(--creme);padding:.55rem 0;margin:2.4rem 0;
}
.marquise-trilho{display:flex;width:max-content;animation:desliza 42s linear infinite}
.marquise:hover .marquise-trilho{animation-play-state:paused}
.marquise span{
    font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
    font-size:.8rem;padding:0 1.1rem;white-space:nowrap;color:var(--tinta);
}
.marquise span::after{content:"\25C6";color:var(--vermelho);margin-left:1.1rem}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Entrada: os blocos pipocam em vez de aparecer prontos ───────────────── */
@keyframes entra{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
.pipoca{animation:entra .5s var(--mola) both}
.pipoca-1{animation-delay:.05s} .pipoca-2{animation-delay:.13s}
.pipoca-3{animation-delay:.21s} .pipoca-4{animation-delay:.29s}
.historia{max-width:740px;transform:rotate(-.3deg)}
.historia h3{font-family:'Alfa Slab One',serif;font-weight:400;font-size:1.3rem;margin-bottom:.6rem}
.historia p{margin-bottom:.9rem;font-size:.98rem;text-align:justify;hyphens:auto}
.historia .fonte{font-size:.8rem;color:var(--musgo);font-style:italic;text-align:left}
.historia .destaque{color:var(--vermelho);font-weight:600}

/* ── Mural ───────────────────────────────────────────────────────────────── */
.mural-lista{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:640px){.mural-lista{grid-template-columns:1fr 1fr}}
.recado{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-md);
    padding:1rem 1.1rem;box-shadow:var(--pop);font-size:.95rem;
}
.recado:nth-child(3n+1){transform:rotate(-.7deg)}
.recado:nth-child(3n+2){transform:rotate(.6deg)}
.recado:nth-child(3n){transform:rotate(-.2deg)}
.recado .quem{font-family:'Alfa Slab One',serif;font-size:1rem;margin-bottom:.15rem}
.recado .quando{font-family:'Outfit',sans-serif;font-weight:600;font-size:.7rem;
                text-transform:uppercase;letter-spacing:.1em;color:var(--musgo);margin-bottom:.5rem}
.recado p{overflow-wrap:anywhere;text-align:justify;hyphens:auto}
.mural-vazio{background:var(--creme);border:var(--b) dashed var(--tinta);border-radius:var(--r-md);
             padding:1.2rem;max-width:580px;margin-top:1.5rem}
.convite{
    background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-lg);
    box-shadow:var(--pop);padding:1.2rem 1.3rem;max-width:580px;display:flex;gap:1rem;
    align-items:center;flex-wrap:wrap;justify-content:space-between;
}
.convite p{font-size:.95rem;flex:1 1 260px;text-align:justify;hyphens:auto}

/* ── Página da pessoa (a que o Google indexa) ────────────────────────────── */
.pessoa-topo{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.2rem}
.pessoa-topo h1{font-size:clamp(1.8rem,6vw,3rem);text-shadow:3px 3px 0 var(--creme)}
.pessoa-selo{
    font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
    font-size:.68rem;border:var(--b) solid var(--tinta);border-radius:var(--r-full);
    padding:.3rem .8rem;background:var(--creme);display:inline-block;box-shadow:var(--pop-baixa);
}
.pessoa-selo.viva{background:var(--papel)}
.pessoa-grade{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.2rem}
@media (min-width:700px){.pessoa-grade{grid-template-columns:1fr 1fr}}
.pessoa-grade dl{background:var(--creme);border:var(--b) solid var(--tinta);border-radius:var(--r-md);
                 padding:1rem 1.1rem;box-shadow:var(--pop-suave)}
.pessoa-grade dt{font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
                 letter-spacing:.11em;font-size:.68rem;color:var(--verde);margin-top:.7rem}
.pessoa-grade dt:first-child{margin-top:0}
.pessoa-grade dd{font-size:.98rem}
.migalhas{font-size:.82rem;color:var(--musgo);margin:.8rem 0 0}
.migalhas a{color:var(--musgo)}
.lista-parentes{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.35rem}
.lista-parentes a{
    display:inline-block;background:var(--branco);border:var(--b) solid var(--tinta);
    border-radius:var(--r-full);padding:.3rem .8rem;font-size:.88rem;text-decoration:none;color:var(--tinta);
    transition:transform var(--tempo) var(--mola),box-shadow var(--tempo) var(--mola);
}
.lista-parentes a:hover{transform:translate(-2px,-2px);box-shadow:var(--pop-baixa)}

/* ── Painel (admin) ──────────────────────────────────────────────────────── */
.tabela{width:100%;border-collapse:collapse;background:var(--creme);
        border:var(--b) solid var(--tinta);border-radius:var(--r-md);overflow:hidden}
.tabela th,.tabela td{padding:.6rem .7rem;border-bottom:1px solid rgba(39,33,26,.18);
                      text-align:left;font-size:.9rem;vertical-align:top}
.tabela th{font-family:'Outfit',sans-serif;font-weight:700;text-transform:uppercase;
           letter-spacing:.1em;font-size:.68rem;background:var(--papel)}
.tabela tr:last-child td{border-bottom:none}
.rolagem{overflow-x:auto;border-radius:var(--r-md);box-shadow:var(--pop-suave)}
.etiqueta{font-family:'Outfit',sans-serif;font-weight:700;font-size:.66rem;text-transform:uppercase;
          letter-spacing:.09em;border:var(--b) solid var(--tinta);border-radius:var(--r-full);
          padding:.15rem .6rem;display:inline-block}
.etiqueta.pendente{background:var(--papel)}
.etiqueta.aprovado{background:var(--verde);color:var(--creme)}
.etiqueta.recusado{background:var(--vermelho);color:var(--creme)}

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
footer{background:var(--verde);color:var(--creme);margin-top:3rem;
       padding:2.2rem 0 2.4rem;text-align:center;border-top:var(--b) solid var(--tinta)}
footer .lema{font-family:'Alfa Slab One',serif;font-size:1.15rem;margin-bottom:.3rem}
footer small{color:rgba(248,241,222,.85);font-size:.82rem}
.rodape-links{margin-top:1rem;font-size:.86rem}
.rodape-links a{color:var(--papel)}
.rodape-lgpd{margin:.9rem auto 0;max-width:620px;font-size:.78rem;color:rgba(248,241,222,.75)}
.rodape-lgpd a{color:var(--papel)}

/* ── Responsivo e movimento ──────────────────────────────────────────────── */
@media (max-width:600px){
    :root{--pop:2px 2px 0 var(--tinta);--pop-alta:4px 4px 0 var(--tinta)}
    .confete{display:none}
    /* a sombra de 5px é proporcional ao tipo grande do desktop; no telefone
       ela empata com a altura da letra e o wordmark parece impresso torto */
    h1{text-shadow:3px 3px 0 var(--creme)}
    .adesivo,.historia,.recado,.definicoes li.essa{transform:none}
    .bt{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{transition:none!important;animation:none!important}
    .pipoca{opacity:1;transform:none}
    .marquise-trilho{transform:none;flex-wrap:wrap;width:auto;justify-content:center}
    .adesivo:hover,.bt:hover,.no-pessoa:hover,.caixa-form button[type=submit]:hover{transform:none}
    .recado,.historia,.definicoes li.essa,.adesivo{transform:none}
}