/* =====================================================================
   Eu no Gibi — identidade visual "Recortado" (colagem de papel)
   Cores: laranja #FF7A3D, verde #3FAE6B, rosa #FF8FB1, amarelo #FFC23D,
   azul petróleo #123C46 (texto), papel #FFF6EE.
   Fundo da página: o do "Gibi de banca" (creme #FCF5E2 com retícula
   de pontinhos amarelos #F2C94C, como nos gibis impressos).
   Fontes: Grandstander (títulos) e Lexend (texto).
   ===================================================================== */

:root {
    --laranja: #FF7A3D;
    --verde: #3FAE6B;
    --rosa: #FF8FB1;
    --amarelo: #FFC23D;
    --tinta: #123C46;
    --papel: #FFF6EE;
    --fundo: #FCF5E2;
    --reticula: radial-gradient(rgba(232, 180, 50, .32) 1.3px, transparent 1.5px) 0 0 / 16px 16px;
    --branco: #FFFFFF;
    --tinta-suave: #3C5F68;
    --linha: rgba(18, 60, 70, .14);
    --sombra-papel: 4px 5px 0 rgba(18, 60, 70, .14);
    --sombra-papel-forte: 6px 7px 0 rgba(18, 60, 70, .18);
    --raio: 18px;
    --fonte-titulo: "Grandstander", "Comic Sans MS", system-ui, sans-serif;
    --fonte-texto: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Nomes antigos usados por telas herdadas (painel, login). */
    --text-muted: var(--tinta-suave);
    --text-soft: var(--tinta-suave);
    --line-soft: var(--linha);
    --accent-c: var(--laranja);

    --bs-body-color: var(--tinta);
    --bs-body-bg: var(--fundo);
    --bs-link-color: var(--tinta);
    --bs-link-hover-color: var(--laranja);
    --bs-border-color: var(--linha);
}

html { scroll-behavior: smooth; }

body {
    background: var(--reticula), var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte-texto);
    font-size: 1.02rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .titulo {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    color: var(--tinta);
    letter-spacing: -.01em;
}

a { color: var(--tinta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--laranja); }

/* Telas herdadas usam .text-white pensando em fundo escuro: aqui o papel é claro. */
body:not(.admin-dark) .text-white { color: var(--tinta) !important; }
body:not(.admin-dark) .text-white-50 { color: var(--tinta-suave) !important; }

::selection { background: var(--amarelo); color: var(--tinta); }

/* ---------------------------------------------------------------------
   Cabeçalho e rodapé
   --------------------------------------------------------------------- */
.landing-header {
    background: var(--reticula), var(--fundo);
    border-bottom: 2px dashed var(--linha) !important;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.brand-logo-image { height: 44px; width: auto; display: block; }
.brand-logo-image-footer { height: 38px; }
.landing-nav .nav-link { color: var(--tinta); font-weight: 500; }
.landing-nav .nav-link:hover { color: var(--laranja); }
.navbar-toggler { color: var(--tinta) !important; }

.landing-footer {
    background: var(--tinta);
    color: #DDEBEE;
    margin-top: 3rem;
}
.landing-footer a { color: #DDEBEE; }
.landing-footer a:hover { color: var(--amarelo); }
.text-footer-muted { color: #B9CFD4 !important; }
.landing-footer .brand-logo-image { filter: brightness(0) invert(1); }

/* ---------------------------------------------------------------------
   Botões e campos
   --------------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 14px; }

.btn-neon, .btn-papel {
    background: var(--laranja);
    color: var(--branco);
    border: 2px solid var(--tinta);
    box-shadow: 3px 4px 0 var(--tinta);
    transition: transform .12s ease, box-shadow .12s ease;
}
.btn-neon:hover, .btn-neon:focus, .btn-papel:hover {
    background: #FF6A24;
    color: var(--branco);
    border-color: var(--tinta);
    transform: translate(-1px, -1px);
    box-shadow: 4px 5px 0 var(--tinta);
}
.btn-neon:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.btn-neon:disabled { background: #F2B597; border-color: var(--tinta-suave); box-shadow: none; }

.btn-glass, .btn-papel-claro {
    background: var(--branco);
    color: var(--tinta);
    border: 2px solid var(--tinta);
}
.btn-glass:hover, .btn-papel-claro:hover { background: var(--amarelo); color: var(--tinta); border-color: var(--tinta); }

.btn-verde { background: var(--verde); color: var(--branco); border: 2px solid var(--tinta); box-shadow: 3px 4px 0 var(--tinta); }
.btn-verde:hover { background: #349A5D; color: var(--branco); border-color: var(--tinta); }

.app-field, .form-control, .form-select {
    background: var(--branco);
    color: var(--tinta);
    border: 2px solid var(--linha);
    border-radius: 12px;
    padding: .65rem .85rem;
}
.app-field:focus, .form-control:focus, .form-select:focus {
    border-color: var(--laranja);
    box-shadow: 0 0 0 .2rem rgba(255, 122, 61, .2);
    background: var(--branco);
    color: var(--tinta);
}
.form-label { font-weight: 600; color: var(--tinta); }
.form-check-input:checked { background-color: var(--verde); border-color: var(--verde); }
.input-group-text { background: var(--amarelo); border: 2px solid var(--linha); color: var(--tinta); font-weight: 600; }
.text-danger { color: #C2410C !important; }

/* Escolha em "pedaço de papel" (radios do formulário) */
.escolhas { display: flex; flex-wrap: wrap; gap: .5rem; }
.escolha { position: relative; }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha label {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem .9rem;
    background: var(--branco);
    border: 2px solid var(--linha);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    user-select: none;
    transition: transform .1s ease;
}
.escolha label:hover { border-color: var(--tinta); }
.escolha input:checked + label { background: var(--amarelo); border-color: var(--tinta); box-shadow: 2px 3px 0 var(--tinta); transform: rotate(-1deg); }
.escolha input:focus-visible + label { outline: 3px solid var(--laranja); outline-offset: 2px; }
.bolinha { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--tinta); display: inline-block; }

/* Cartões de tema */
.temas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
/* Temas agrupados por categoria (4 por grupo): ocupam a largura toda do container. */
.temas-grid-linha { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 767.98px) { .temas-grid-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tema-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.tema-opcao label, a.tema-card {
    display: flex; flex-direction: column; gap: .2rem;
    height: 100%;
    padding: .9rem;
    background: var(--branco);
    border: 2px solid var(--linha);
    border-radius: 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--tinta);
}
.tema-opcao label:hover, a.tema-card:hover { border-color: var(--tinta); color: var(--tinta); }
.tema-opcao input:checked + label { background: #FFE9DE; border-color: var(--laranja); box-shadow: 3px 4px 0 var(--laranja); }
.tema-opcao input:focus-visible + label { outline: 3px solid var(--laranja); outline-offset: 2px; }
.tema-icone { font-size: 1.5rem; line-height: 1; }
.tema-nome { font-weight: 700; }
.tema-licao { font-size: .82rem; color: var(--tinta-suave); line-height: 1.35; }

/* ---------------------------------------------------------------------
   Blocos de página
   --------------------------------------------------------------------- */
.section-space { padding: 4rem 0; }
.section-eyebrow {
    display: inline-block;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--rosa);
    color: var(--tinta);
    padding: .2rem .7rem;
    border-radius: 8px;
    transform: rotate(-2deg);
}
.section-title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.section-text { color: var(--tinta-suave); }
.section-head { max-width: 720px; }

.card-neon, .app-panel, .papel {
    background: var(--branco);
    border: 2px solid var(--tinta);
    border-radius: var(--raio);
    box-shadow: var(--sombra-papel);
}
.app-panel { padding: 1.5rem; }
.papel-torto { transform: rotate(-.6deg); }
.papel-torto-2 { transform: rotate(.8deg); }

.selo {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--amarelo);
    border: 2px solid var(--tinta);
    border-radius: 10px;
    padding: .15rem .6rem;
    font-weight: 700;
    font-size: .85rem;
}
.selo-verde { background: var(--verde); color: var(--branco); }
.selo-rosa { background: var(--rosa); }
.selo-amarelo { background: var(--amarelo); }

.hero-price { display: flex; flex-wrap: wrap; gap: .4rem .6rem; color: var(--tinta-suave); }
.hero-price strong { color: var(--tinta); }

.alert { border-radius: 14px; border: 2px solid var(--tinta); }
.alert-success { background: #DDF3E6; color: var(--tinta); }
.alert-info { background: #E2F1F4; color: var(--tinta); }
.alert-warning { background: #FFF0CC; color: var(--tinta); }
.alert-danger { background: #FFE1E7; color: var(--tinta); }

/* ---------------------------------------------------------------------
   Página inicial
   --------------------------------------------------------------------- */
.hero { padding: 3.5rem 0 3rem; position: relative; overflow: hidden; }
.hero-titulo { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; }
.hero-titulo .marca-papel {
    display: inline-block;
    background: var(--laranja);
    color: var(--branco);
    padding: 0 .35em;
    border-radius: 10px;
    transform: rotate(-2deg);
    box-shadow: 3px 4px 0 var(--tinta);
}
.hero-sub { font-size: 1.15rem; color: var(--tinta-suave); max-width: 560px; }

.colagem { position: relative; min-height: 360px; }
.colagem .folha {
    position: absolute;
    background: var(--branco);
    border: 2px solid var(--tinta);
    border-radius: 16px;
    box-shadow: var(--sombra-papel-forte);
    overflow: hidden;
}
.colagem .folha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.colagem .folha-1 { width: 62%; aspect-ratio: 1; left: 4%; top: 6%; transform: rotate(-4deg); }
.colagem .folha-2 { width: 46%; aspect-ratio: 1; right: 2%; top: 0; transform: rotate(5deg); }
.colagem .folha-3 { width: 48%; aspect-ratio: 1; right: 8%; bottom: 0; transform: rotate(-2deg); }
.colagem .forma { position: absolute; border: 2px solid var(--tinta); }
.forma-sol { width: 70px; height: 70px; border-radius: 50%; background: var(--amarelo); left: 0; bottom: 6%; }
.forma-folha { width: 90px; height: 46px; border-radius: 46px 0; background: var(--verde); right: 0; bottom: 42%; transform: rotate(-20deg); }

/* Folha de exemplo desenhada só com formas (sem imagem ainda) */
.folha-vazia {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.1rem; text-align: center;
    padding: 1rem;
}

.passos { counter-reset: passo; }
.entrega-lista { list-style: none; padding: 0; display: grid; gap: .6rem 1.5rem; }
@media (min-width: 768px) { .entrega-lista { grid-template-columns: 1fr 1fr; } }
.entrega-lista li { display: flex; gap: .6rem; align-items: flex-start; }
.entrega-lista i { color: var(--laranja); font-size: 1.15rem; line-height: 1.4; }
.idade-faixa {
    display: inline-block;
    font-family: var(--fonte-titulo); font-weight: 800; font-size: .85rem;
    background: var(--amarelo); color: var(--tinta);
    border: 2px solid var(--tinta); border-radius: 999px;
    padding: .15rem .7rem;
}
.passo { position: relative; padding: 1.4rem 1.2rem 1.2rem; height: 100%; }
.passo::before {
    counter-increment: passo;
    content: counter(passo);
    position: absolute; top: -18px; left: 16px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--amarelo);
    border: 2px solid var(--tinta);
    border-radius: 50%;
    font-family: var(--fonte-titulo); font-weight: 800;
}

.preco-grande { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; }

/* FAQ */
.faq-item {
    background: var(--branco);
    border: 2px solid var(--linha);
    border-radius: 14px;
    padding: .9rem 1.1rem;
    margin-bottom: .65rem;
}
.faq-item[open] { border-color: var(--tinta); }
.faq-item summary { font-weight: 700; cursor: pointer; }
.faq-item p { margin: .6rem 0 0; color: var(--tinta-suave); }

/* ---------------------------------------------------------------------
   Gibi: páginas da história (prévia, leitura, compartilhada)
   --------------------------------------------------------------------- */
.gibi { display: grid; gap: 1.75rem; }
.gibi-pagina {
    background: var(--branco);
    border: 2px solid var(--tinta);
    border-radius: var(--raio);
    box-shadow: var(--sombra-papel);
    overflow: hidden;
}
.gibi-pagina img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: 2px solid var(--tinta); }
.gibi-texto { padding: 1rem 1.2rem 1.2rem; }
.gibi-narracao {
    font-size: 1.08rem;
    background: #FFF0CC;
    border: 2px solid var(--tinta);
    border-radius: 6px;
    padding: .55rem .8rem .6rem;
    margin-bottom: .75rem;
}
.gibi-narrador {
    display: block;
    font-family: var(--fonte-titulo); font-weight: 800;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--laranja);
    margin-bottom: .15rem;
}
.balao {
    position: relative;
    display: inline-block;
    background: #FFF9E8;
    border: 2px solid var(--tinta);
    border-radius: 16px;
    padding: .35rem .8rem;
    margin: .25rem .4rem .25rem 0;
    font-weight: 500;
}
.balao b { font-family: var(--fonte-titulo); font-weight: 800; margin-right: .3rem; }
.gibi-numero { font-family: var(--fonte-titulo); font-weight: 800; font-size: .8rem; color: var(--tinta-suave); }
/* Capa: título em letreiro de logotipo (preenchimento em degradê, contorno grosso e sombra) na parte de baixo da arte,
   com o selo "Eu no Gibi" logo abaixo. O contorno vem de uma cópia do texto por trás (::before), para funcionar em qualquer navegador. */
.capa-arte { position: relative; }
.gibi-capa img { aspect-ratio: 1; border-bottom: 0; }
.capa-letreiro {
    position: absolute; left: 4%; right: 4%; bottom: 3%;
    display: flex; flex-direction: column; align-items: center; gap: .35em;
    text-align: center;
    pointer-events: none;
    font-size: clamp(1.5rem, 7.6vw, 3.9rem);
}
.capa-titulo {
    position: relative;
    margin: 0;
    font-family: var(--fonte-titulo); font-weight: 800;
    font-size: 1em; line-height: 1.02;
    letter-spacing: .01em;
    transform: rotate(-3deg);
}
.capa-titulo span {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, #FFF1A8 0%, #FFC23D 45%, #FF7A3D 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.capa-titulo::before {
    content: attr(data-texto);
    position: absolute; inset: 0;
    -webkit-text-stroke: .24em #fff;
    color: #fff;
    text-shadow: 0 .09em 0 var(--tinta), .05em .1em 0 var(--tinta), 0 .16em .18em rgba(18, 60, 70, .45);
}
.capa-titulo::after {
    content: attr(data-texto);
    position: absolute; inset: 0;
    -webkit-text-stroke: .1em var(--tinta);
    color: var(--tinta);
}
.capa-selo {
    display: inline-block;
    font-family: var(--fonte-titulo); font-weight: 800;
    font-size: .42em;
    color: #fff;
    background: var(--tinta);
    border: 3px solid #fff;
    border-radius: 999px;
    padding: .2em 1.1em .25em;
    box-shadow: 0 .12em 0 var(--laranja), 0 .2em .4em rgba(18, 60, 70, .35);
    transform: rotate(-1.5deg);
}
.capa-selo::before, .capa-selo::after { content: "—"; margin: 0 .45em; color: var(--amarelo); }
.marca-dagua { position: relative; }
.marca-dagua::after {
    content: "PRÉVIA • EU NO GIBI";
    position: absolute; inset: auto 0 45% 0;
    text-align: center;
    font-family: var(--fonte-titulo); font-weight: 800;
    font-size: clamp(1.1rem, 4vw, 2rem);
    color: rgba(255, 255, 255, .55);
    text-shadow: 0 1px 2px rgba(18, 60, 70, .35);
    transform: rotate(-18deg);
    pointer-events: none;
}

.marca-exemplo::after { content: "EXEMPLO • EU NO GIBI"; }

.pagina-bloqueada {
    display: grid; place-items: center; text-align: center;
    aspect-ratio: 1;
    background: repeating-linear-gradient(45deg, #FFE9DE, #FFE9DE 14px, #FFF6EE 14px, #FFF6EE 28px);
    border: 2px dashed var(--tinta);
    border-radius: var(--raio);
    padding: 1rem;
}

.cenas-lista { list-style: none; padding: 0; margin: 0; counter-reset: cena; }
.cenas-lista li {
    position: relative;
    padding: .6rem .8rem .6rem 3rem;
    border-bottom: 2px dashed var(--linha);
}
.cenas-lista li::before {
    counter-increment: cena;
    content: counter(cena);
    position: absolute; left: .6rem; top: .55rem;
    width: 1.8rem; height: 1.8rem;
    display: grid; place-items: center;
    background: var(--verde); color: var(--branco);
    border: 2px solid var(--tinta); border-radius: 50%;
    font-weight: 700; font-size: .85rem;
}
.cenas-lista li:last-child { border-bottom: 0; }
.cenas-lista li.oculta { color: var(--tinta-suave); filter: blur(3px); user-select: none; }

.perguntas-pais { background: #E9F7EF; border-color: var(--verde); }
.moral-historia { background: #FFF3D1; border-color: var(--amarelo); }
.moral-frase { font-family: var(--fonte-titulo); font-size: 1.35rem; font-weight: 700; line-height: 1.35; color: var(--azul, #123C46); }
.colorir-previa { max-width: 420px; width: 100%; background: #fff; border: 2px solid #123C46; border-radius: 8px; }

/* Barra de compra fixa no celular */
.barra-compra {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--fundo);
    border-top: 2px solid var(--tinta);
    padding: .75rem 0;
}

/* Cupom do link do e-mail, aplicado sozinho no pagamento */
.cupom-aplicado {
    background: #E9F7EF;
    border: 2px dashed var(--verde);
    border-radius: 12px;
    padding: .5rem .8rem;
}

/* Pagamento no próprio site (Stripe embutido) */
.pagamento-selos { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagamento-selos span {
    font-size: .8rem; color: var(--tinta-suave);
    border: 1.5px solid var(--linha); border-radius: 999px; padding: .25rem .7rem;
}
#checkoutStripe { min-height: 420px; background: var(--branco); border: 2px solid var(--tinta); border-radius: var(--raio); padding: 12px; }
.pagamento-carregando { color: var(--tinta-suave); text-align: center; padding: 3rem 1rem; }

/* Espera da prévia */
.espera { text-align: center; padding: 2rem 1rem; }
.espera-folhas { display: flex; justify-content: center; gap: .6rem; margin-bottom: 1.2rem; }
.espera-folhas span {
    width: 44px; height: 56px;
    border: 2px solid var(--tinta); border-radius: 8px;
    animation: folha 1.4s ease-in-out infinite;
}
.espera-folhas span:nth-child(1) { background: var(--laranja); }
.espera-folhas span:nth-child(2) { background: var(--amarelo); animation-delay: .15s; }
.espera-folhas span:nth-child(3) { background: var(--verde); animation-delay: .3s; }
.espera-folhas span:nth-child(4) { background: var(--rosa); animation-delay: .45s; }
@keyframes folha { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* Andamento da geração: barra de papel, cronômetro e barrinha fixa no rodapé */
.andamento-barra {
    height: 18px;
    background: #FFF;
    border: 2px solid var(--tinta);
    border-radius: 999px;
    overflow: hidden;
    max-width: 460px; margin: 0 auto;
}
.andamento-preenchido {
    height: 100%;
    background: repeating-linear-gradient(-45deg, var(--laranja) 0 12px, var(--amarelo) 12px 24px);
    background-size: 34px 34px;
    animation: andamento-listras 1s linear infinite;
    transition: width .9s ease;
}
@keyframes andamento-listras { from { background-position: 0 0; } to { background-position: 34px 0; } }
.andamento-numeros {
    display: flex; justify-content: space-between; gap: 1rem;
    max-width: 460px; margin: .5rem auto .25rem;
    font-size: .9rem; color: var(--tinta-suave);
}
.andamento-numeros strong { color: var(--tinta); }
.andamento-falta { font-family: var(--fonte-titulo); font-weight: 800; color: var(--laranja); }
.andamento-mini {
    position: fixed; left: 50%; bottom: 14px; z-index: 1040;
    width: min(460px, calc(100% - 32px));
    transform: translate(-50%, 140%);
    background: var(--fundo);
    border: 2px solid var(--tinta); border-radius: 14px;
    box-shadow: var(--sombra-papel);
    padding: .5rem .8rem .6rem;
    transition: transform .3s ease;
}
.andamento-mini.visivel { transform: translate(-50%, 0); }
.andamento-mini-texto { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.andamento-barra-mini { height: 10px; max-width: none; }
@media (prefers-reduced-motion: reduce) { .andamento-preenchido { animation: none; } .andamento-mini { transition: none; } }

/* Tela de espera do roteiro (cobre a página enquanto a IA escreve) */
.loader-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    background: rgba(252, 245, 226, .94);
}
.loader-overlay.ativo { display: flex; }

/* Lista "Minhas histórias" */
.historia-item img { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; border: 2px solid var(--tinta); }
.historia-acoes { min-width: 150px; }
@media (max-width: 575.98px) {
    .historia-item { flex-wrap: wrap; }
    .historia-acoes { width: 100%; grid-template-columns: 1fr 1fr; }
}
.historia-item .sem-capa { width: 88px; height: 88px; border-radius: 12px; border: 2px dashed var(--tinta); display: grid; place-items: center; background: #FFE9DE; font-size: 1.6rem; }

/* Páginas de tema */
.dica-pais { background: #FFF0CC; }
.lista-batidas li { margin-bottom: .35rem; }

/* Login e cadastro */
.auth-center-page { min-height: 60vh; display: flex; align-items: center; }

@media (max-width: 991.98px) {
    .section-space { padding: 2.75rem 0; }
    .colagem { min-height: 300px; margin-top: 1rem; }
}

/* ---------------------------------------------------------------------
   Animações (pensadas para criança: papel que pula, balança e flutua).
   Usam as propriedades translate/rotate/scale separadas, para não brigar
   com o transform (inclinação) que cada peça já tem.
   --------------------------------------------------------------------- */
@keyframes flutuar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes balancar { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes girar { to { rotate: 360deg; } }
@keyframes respirar { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes chacoalhar {
    0%, 82%, 100% { rotate: 0deg; scale: 1; }
    85% { rotate: -6deg; scale: 1.08; }
    88% { rotate: 5deg; scale: 1.08; }
    91% { rotate: -4deg; scale: 1.06; }
    94% { rotate: 2deg; scale: 1.03; }
}
@keyframes pular { 0%, 100% { translate: 0 0; } 30% { translate: 0 -10px; } 50% { translate: 0 0; } 65% { translate: 0 -4px; } }
@keyframes entrar-papel {
    0% { opacity: 0; translate: 0 40px; rotate: -6deg; scale: .9; }
    60% { opacity: 1; translate: 0 -8px; rotate: 2deg; scale: 1.03; }
    100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
@keyframes cair-confete {
    0% { translate: 0 -40px; rotate: 0deg; opacity: 1; }
    85% { opacity: 1; }
    100% { translate: var(--vento, 0px) 110vh; rotate: var(--giro, 540deg); opacity: 0; }
}

/* Topo: cada pedaço entra pulando, um depois do outro */
.hero .col-lg-6:first-child > * { animation: entrar-papel .7s cubic-bezier(.2, .9, .3, 1.3) both; }
.hero .col-lg-6:first-child > :nth-child(2) { animation-delay: .1s; }
.hero .col-lg-6:first-child > :nth-child(3) { animation-delay: .2s; }
.hero .col-lg-6:first-child > :nth-child(4) { animation-delay: .3s; }
.hero .col-lg-6:first-child > :nth-child(n+5) { animation-delay: .4s; }
.hero .colagem { animation: entrar-papel .9s cubic-bezier(.2, .9, .3, 1.3) .25s both; }

/* Título: o recorte "e aprende" dá uma chacoalhada de vez em quando */
.hero-titulo .marca-papel { animation: chacoalhar 4s ease-in-out 1.2s infinite; }

/* Colagem do topo: folhas flutuando, sol girando, folha balançando */
.colagem .folha { animation: flutuar 5s ease-in-out infinite; }
.colagem .folha-2 { animation-duration: 6s; animation-delay: -2s; }
.colagem .folha-3 { animation-duration: 4.5s; animation-delay: -1s; }
.colagem .folha { transition: scale .2s ease; }
.colagem .folha:hover { scale: 1.04; z-index: 2; }
.forma-sol { animation: pular 2.6s ease-in-out infinite; }
.forma-folha { animation: balancar 3s ease-in-out infinite; }

/* Estrelinhas e bolinhas de papel soltas no topo */
.enfeite { position: absolute; pointer-events: none; z-index: 0; }
.enfeite-estrela {
    width: 34px; height: 34px; background: var(--amarelo);
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: girar 9s linear infinite;
}
.enfeite-bola { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tinta); animation: flutuar 3.5s ease-in-out infinite; }
.enfeite-1 { top: 8%; left: 46%; }
.enfeite-2 { top: 70%; left: 3%; background: var(--rosa); animation-delay: -1s; }
.enfeite-3 { top: 14%; right: 4%; width: 24px; height: 24px; background: var(--rosa); animation-duration: 12s; animation-direction: reverse; }
.enfeite-4 { bottom: 10%; left: 50%; background: var(--verde); animation-delay: -2s; }
.hero .container { position: relative; z-index: 1; }

/* Botão principal: "respira" para chamar a criança (e o adulto) */
.btn-neon.btn-lg { animation: respirar 2.4s ease-in-out infinite; }
.btn-neon.btn-lg:hover { animation: chacoalhar .7s ease-in-out; animation-iteration-count: 1; }
.btn-glass:hover, .btn-papel-claro:hover { rotate: -2deg; }
.btn-glass, .btn-papel-claro { transition: rotate .15s ease, background .15s ease; }

/* Etiquetas rosa e números dos passos */
.section-eyebrow { transition: rotate .2s ease, scale .2s ease; }
.section-eyebrow:hover { rotate: 4deg; scale: 1.1; }
.passo::before { animation: pular 2.8s ease-in-out infinite; }
.col-lg-3:nth-child(2) .passo::before { animation-delay: .25s; }
.col-lg-3:nth-child(3) .passo::before { animation-delay: .5s; }
.col-lg-3:nth-child(4) .passo::before { animation-delay: .75s; }

/* Cartões: levantam e entortam quando o mouse passa */
.papel, a.tema-card, .faq-item { transition: translate .18s ease, rotate .18s ease, box-shadow .18s ease, border-color .18s ease; }
.passo:hover, a.tema-card:hover { translate: 0 -6px; rotate: -1.5deg; box-shadow: var(--sombra-papel-forte); }
a.tema-card:nth-child(even):hover { rotate: 1.5deg; }
a.tema-card:hover .tema-icone { display: inline-block; animation: pular .6s ease-in-out; color: var(--laranja); }

/* Entrada ao rolar a página (o site.js liga só quando há movimento permitido) */
.js-anima .revelar { opacity: 0; }
.js-anima .revelar.visivel { animation: entrar-papel .7s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--atraso, 0s); }

/* Confete de papel que cai uma vez ao abrir a página inicial */
.confete {
    position: fixed; top: 0; z-index: 1500; pointer-events: none;
    width: 12px; height: 16px; border-radius: 3px;
    animation: cair-confete var(--duracao, 3s) cubic-bezier(.3, .6, .5, 1) forwards;
}

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

/* ---------------------------------------------------------------------
   Painel do admin: continua escuro, como no MomentoSom (tabelas e gráficos
   foram desenhados para fundo escuro).
   --------------------------------------------------------------------- */
body.admin-dark {
    --text-muted: #AFC1D6;
    --text-soft: #8EA2BA;
    --line-soft: rgba(255, 255, 255, .12);
    background: #0F2A31;
    color: #E6EEF0;
}
body.admin-dark .card-neon, body.admin-dark .app-panel { background: #143740; border-color: rgba(255, 255, 255, .14); box-shadow: none; color: #E6EEF0; }
body.admin-dark .section-text, body.admin-dark .form-label { color: #C4D4D8; }
body.admin-dark h1, body.admin-dark h2, body.admin-dark h3, body.admin-dark .h3, body.admin-dark .h5, body.admin-dark .h6 { color: #FFFFFF; }
body.admin-dark .landing-header { background: #0F2A31; }
body.admin-dark .landing-nav .nav-link { color: #E6EEF0; }
body.admin-dark .brand-logo-image { filter: brightness(0) invert(1); }
body.admin-dark .navbar-toggler { color: #FFFFFF !important; }