/* CSS do site do Casulo. Todo valor visual vem das variaveis --casulo-* de casulo.css (gerado de brand/tokens.json);
 * nenhuma cor literal aqui. Claro por padrao; escuro pelo sistema ou pelo botao (data-theme). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--casulo-bg);color:var(--casulo-text);font:var(--casulo-type-body);transition:background var(--casulo-motion-fade) var(--casulo-motion-ease),color var(--casulo-motion-fade) var(--casulo-motion-ease)}
h1,h2,h3{font-family:var(--casulo-font-serif);font-variation-settings:var(--casulo-font-serif-variation);color:var(--casulo-text);margin:0 0 var(--casulo-space-sm);text-wrap:balance}
h1{font:var(--casulo-type-display);letter-spacing:var(--casulo-type-display-tracking);font-size:clamp(2rem,7vw,var(--casulo-type-display-size));line-height:1.15}
h2{font:var(--casulo-type-title1);letter-spacing:var(--casulo-type-title1-tracking)}
h3{font:var(--casulo-type-title2)}
h1,h2,h3{font-variation-settings:var(--casulo-font-serif-variation)}
p{margin:0 0 var(--casulo-space-md)}
ul,ol{margin:0 0 var(--casulo-space-md);padding-left:1.25em}
li{margin-bottom:var(--casulo-space-xs)}
a{color:var(--casulo-accent-text)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:var(--casulo-size-focus-ring) solid var(--casulo-focus);outline-offset:3px;border-radius:var(--casulo-radius-xs)}
main:focus{outline:none}
img,svg{max-width:100%}
[hidden]{display:none!important}
.mudo{color:var(--casulo-text-secondary);font:var(--casulo-type-body-small)}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lista-simples{list-style:none;padding:0}
.lista-simples li{margin-bottom:0}
.lista-simples a{display:inline-flex;align-items:center;min-height:var(--casulo-size-target-min)}

.pular{position:absolute;left:-999px;top:8px;background:var(--casulo-accent);color:var(--casulo-on-accent);padding:12px 16px;border-radius:var(--casulo-radius-sm);z-index:50;font-weight:700}
.pular:focus{left:8px}
.miolo{max-width:var(--casulo-layout-max-content);margin:0 auto;padding:0 var(--casulo-layout-gutter)}
@media (min-width:720px){.miolo{padding:0 var(--casulo-layout-gutter-wide)}}
.miolo.leitura>*,.miolo.prosa>*{max-width:var(--casulo-layout-max-reading)}

/* logo que troca com o tema */
.on-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .on-light{display:none}:root:not([data-theme="light"]) .on-dark{display:inline-block}}
:root[data-theme="dark"] .on-light{display:none}
:root[data-theme="dark"] .on-dark{display:inline-block}
:root[data-theme="light"] .on-light{display:inline-block}
:root[data-theme="light"] .on-dark{display:none}
/* icone do botao de tema: lua no claro, sol no escuro */
.mostra-no-escuro{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mostra-no-claro{display:none}:root:not([data-theme="light"]) .mostra-no-escuro{display:inline-block}}
:root[data-theme="dark"] .mostra-no-claro{display:none}
:root[data-theme="dark"] .mostra-no-escuro{display:inline-block}
:root[data-theme="light"] .mostra-no-claro{display:inline-block}
:root[data-theme="light"] .mostra-no-escuro{display:none}

/* topo */
.topo{position:sticky;top:0;z-index:20;background:var(--casulo-bg);border-bottom:1px solid var(--casulo-line)}
@media (max-width:719px){.topo{position:static}}
.topo-linha{display:flex;align-items:center;gap:var(--casulo-space-sm);min-height:68px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--casulo-text);min-height:var(--casulo-size-target-min)}
.marca img{display:block}
.marca-nome{font-family:var(--casulo-font-serif);font-variation-settings:var(--casulo-font-serif-variation);font-weight:600;font-size:1.5rem;letter-spacing:-.01em}
.marca-rodape{margin:0 0 var(--casulo-space-xs)}
.menu{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto;align-items:center}
.menu a{min-height:var(--casulo-size-target-min);display:inline-flex;align-items:center;padding:0 12px;border-radius:var(--casulo-radius-pill);color:var(--casulo-text);text-decoration:none;font:var(--casulo-type-body-small);font-weight:700}
.menu a:hover{background:var(--casulo-surface-raised)}
.menu a[aria-current="page"]{background:var(--casulo-sage-soft);color:var(--casulo-sage)}
.tema{width:var(--casulo-size-target-min);height:var(--casulo-size-target-min);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--casulo-radius-pill);border:1px solid var(--casulo-line-strong);background:var(--casulo-surface);color:var(--casulo-text);cursor:pointer}
.tema:hover{background:var(--casulo-surface-raised)}
@media (max-width:719px){
  .topo-linha{row-gap:2px}
  .menu{order:3;width:100%;margin-left:-12px;flex-wrap:wrap}
  .tema{margin-left:auto}
}

/* botoes */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--casulo-size-target-primary);padding:0 28px;border-radius:var(--casulo-radius-pill);border:1px solid transparent;font:var(--casulo-type-label);text-decoration:none;cursor:pointer;color:var(--casulo-on-accent);background:linear-gradient(180deg,var(--casulo-accent),var(--casulo-accent-end));box-shadow:var(--casulo-shadow-md);transition:transform var(--casulo-motion-press) var(--casulo-motion-ease),box-shadow var(--casulo-motion-press) var(--casulo-motion-ease)}
.botao:hover{box-shadow:var(--casulo-shadow-lg)}
.botao:active{transform:scale(.98)}
.botao-sec{background:var(--casulo-surface-raised);color:var(--casulo-text);border-color:var(--casulo-line-strong);box-shadow:none}
.botao-claro{background:transparent;color:var(--casulo-on-sage-deep);border-color:var(--casulo-on-sage-deep);box-shadow:none}
.botao-claro:hover{background:color-mix(in srgb,var(--casulo-on-sage-deep) 14%,transparent);box-shadow:none}
.botao[disabled]{cursor:not-allowed;background:transparent;box-shadow:none;border-style:dashed;color:var(--casulo-on-sage-deep);border-color:var(--casulo-on-sage-deep)}
.botao[disabled]:hover{background:transparent}
.botao-sec[disabled]{color:var(--casulo-text);border-color:var(--casulo-line-strong)}
.acoes{display:flex;flex-wrap:wrap;gap:var(--casulo-space-sm);align-items:center;margin:var(--casulo-space-lg) 0 var(--casulo-space-sm)}
.nota-botao{font:var(--casulo-type-body-small);color:var(--casulo-on-sage-deep);opacity:.92;margin:0}

/* heroi */
.heroi{background:var(--casulo-sage-deep);color:var(--casulo-on-sage-deep);padding:var(--casulo-space-xxl) 0}
.heroi .miolo{display:grid;gap:var(--casulo-space-xl);align-items:center}
@media (min-width:900px){.heroi .miolo{grid-template-columns:1.1fr 1fr;gap:var(--casulo-space-xxl)}}
.heroi h1,.heroi h2{color:var(--casulo-on-sage-deep)}
.heroi p{color:var(--casulo-on-sage-deep)}
.heroi a:not(.botao){color:var(--casulo-on-sage-deep)}
.heroi-pagina{padding:var(--casulo-space-xxl) 0 var(--casulo-space-xl)}
.heroi-pagina .miolo{display:block}
.sobrelinha{font:var(--casulo-type-overline);letter-spacing:var(--casulo-type-overline-tracking);text-transform:uppercase;margin:0 0 var(--casulo-space-sm)}
.lide{font-size:1.1875rem;line-height:1.6;max-width:36em}

/* secoes */
.secao{padding:var(--casulo-space-xxl) 0}
.secao-suave{background:var(--casulo-surface-raised)}
.secao-sage{background:var(--casulo-sage-soft)}
.secao h2{margin-bottom:var(--casulo-space-md)}
.secao-intro{max-width:38em;color:var(--casulo-text-secondary)}
.grade{display:grid;gap:var(--casulo-space-md);margin-top:var(--casulo-space-lg)}
@media (min-width:640px){.grade{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.grade-3{grid-template-columns:repeat(3,1fr)}.grade-5{grid-template-columns:repeat(5,1fr)}}
@media (min-width:640px) and (max-width:959px){.grade-5>:last-child{grid-column:1/-1}}
.cartao{background:var(--casulo-surface);border:1px solid var(--casulo-line);border-radius:var(--casulo-radius-lg);padding:var(--casulo-space-lg);box-shadow:var(--casulo-shadow-sm)}
.cartao h3{margin-top:0;margin-bottom:var(--casulo-space-xs)}
.cartao p:last-child{margin-bottom:0}
.cartao-ico{text-align:left}
.cartao-ico svg{width:72px;height:72px;display:block;margin-bottom:var(--casulo-space-sm)}
.cartao h3.titulo-pequeno{font:var(--casulo-type-title3)}
.dividido{display:grid;gap:var(--casulo-space-xl);align-items:start}
.dividido.centro{align-items:center}
@media (min-width:860px){.dividido{grid-template-columns:1fr 1fr}.dividido-inv>:first-child{order:2}}
.checks{list-style:none;padding:0}
.checks li{position:relative;padding-left:32px;margin-bottom:var(--casulo-space-sm)}
.checks li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:50%;background:var(--casulo-sage-soft);border:2px solid var(--casulo-sage)}
.checks li::after{content:"";position:absolute;left:6px;top:calc(.45em + 3px);width:5px;height:9px;border:solid var(--casulo-sage);border-width:0 2px 2px 0;transform:rotate(40deg)}
.nunca{list-style:none;padding:0}
.nunca li{position:relative;padding-left:32px;margin-bottom:var(--casulo-space-sm)}
.nunca li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:50%;background:var(--casulo-critical-soft);border:2px solid var(--casulo-critical)}
.nunca li::after{content:"";position:absolute;left:5px;top:calc(.45em + 8px);width:10px;height:2px;background:var(--casulo-critical)}

/* selo e avisos */
.selo{display:inline-block;font:var(--casulo-type-caption);padding:4px 12px;border-radius:var(--casulo-radius-pill);background:var(--casulo-accent-soft);color:var(--casulo-accent-text);border:1px solid var(--casulo-accent-text)}
.aviso{border-radius:var(--casulo-radius-md);padding:var(--casulo-space-md) var(--casulo-space-lg);background:var(--casulo-attention-soft);color:var(--casulo-text);border:1px solid var(--casulo-attention);margin:0 0 var(--casulo-space-lg)}
.aviso strong{color:var(--casulo-attention)}
.aviso p:last-child{margin-bottom:0}
.aviso-suave{background:var(--casulo-sage-soft);border-color:var(--casulo-sage)}
.aviso-suave strong{color:var(--casulo-sage)}
.confirmar{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;font:var(--casulo-type-caption);padding:1px 10px;border-radius:var(--casulo-radius-pill);background:var(--casulo-attention-soft);color:var(--casulo-attention);border:1px solid var(--casulo-attention)}

/* conversa da Nina */
.conversa-cartao{background:var(--casulo-surface);color:var(--casulo-text);border-radius:var(--casulo-radius-xl);padding:var(--casulo-space-lg);box-shadow:var(--casulo-shadow-lg)}
.conversa-topo{display:flex;align-items:center;gap:var(--casulo-space-sm);margin-bottom:var(--casulo-space-md)}
.conversa-topo img{width:44px;height:44px;border-radius:50%;flex:none}
.conversa-topo strong{display:block;font:var(--casulo-type-title3)}
.conversa-topo .selo{margin-left:auto}
.conversa{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--casulo-space-xs)}
.conversa li{margin:0;max-width:88%;padding:10px 16px;border-radius:var(--casulo-radius-md);font:var(--casulo-type-body-small);font-size:1rem;line-height:1.45}
.conversa .nina{align-self:flex-start;background:var(--casulo-sage-soft);color:var(--casulo-text);border-bottom-left-radius:6px}
.conversa .voce{align-self:flex-end;background:var(--casulo-accent-soft);color:var(--casulo-text);border-bottom-right-radius:6px}
.conversa .quem{font:var(--casulo-type-caption);display:block;color:var(--casulo-text-secondary)}
.conversa .proposta{display:block;margin-top:6px;padding:8px 12px;border-radius:var(--casulo-radius-sm);background:var(--casulo-surface);border:1px solid var(--casulo-line-strong);font-weight:700}
.heroi .conversa-cartao p,.heroi .conversa-cartao .mudo{color:var(--casulo-text-secondary)}
.conversa-rodape{margin:var(--casulo-space-md) 0 0;color:var(--casulo-text-secondary);font:var(--casulo-type-caption)}
.antes-depois{display:grid;gap:var(--casulo-space-xs);margin:var(--casulo-space-md) 0;grid-template-columns:1fr 1fr}
.antes-depois div{background:var(--casulo-surface);border:1px solid var(--casulo-line);border-radius:var(--casulo-radius-md);padding:var(--casulo-space-sm) var(--casulo-space-md)}
.antes-depois dt{font:var(--casulo-type-overline);letter-spacing:var(--casulo-type-overline-tracking);text-transform:uppercase;color:var(--casulo-text-secondary)}
.antes-depois dd{margin:4px 0 0;font:var(--casulo-type-number-large);font-size:1.25rem;font-variant-numeric:tabular-nums}

/* telas ilustrativas em SVG */
.figura{margin:0;text-align:center}
.figura svg{display:block;margin:0 auto;height:auto}
.figura figcaption{font:var(--casulo-type-caption);color:var(--casulo-text-secondary);margin-top:var(--casulo-space-sm)}
.telas{display:grid;gap:var(--casulo-space-xl);margin-top:var(--casulo-space-lg);justify-items:center}
@media (min-width:760px){.telas{grid-template-columns:repeat(3,1fr);align-items:start}}
.telas .figura svg{width:min(100%,240px)}
.painel-fig svg{width:100%;max-width:760px}
.f-bg{fill:var(--casulo-bg)}.f-surface{fill:var(--casulo-surface)}.f-raised{fill:var(--casulo-surface-raised)}
.f-text{fill:var(--casulo-text)}.f-mute{fill:var(--casulo-text-secondary)}
.f-acc{fill:var(--casulo-accent)}.f-accsoft{fill:var(--casulo-accent-soft)}.f-acctext{fill:var(--casulo-accent-text)}
.f-sage{fill:var(--casulo-sage)}.f-sagesoft{fill:var(--casulo-sage-soft)}.f-sagedeep{fill:var(--casulo-sage-deep)}
.f-onacc{fill:var(--casulo-on-accent)}.f-onsagedeep{fill:var(--casulo-on-sage-deep)}
.f-ok{fill:var(--casulo-ok)}.f-oksoft{fill:var(--casulo-ok-soft)}
.f-att{fill:var(--casulo-attention)}.f-attsoft{fill:var(--casulo-attention-soft)}
.f-crit{fill:var(--casulo-critical)}
.f-none{fill:none}
.k-line{stroke:var(--casulo-line)}.k-strong{stroke:var(--casulo-line-strong)}.k-sage{stroke:var(--casulo-sage)}
.k-acc{stroke:var(--casulo-accent)}.k-text{stroke:var(--casulo-text)}.k-mute{stroke:var(--casulo-text-secondary)}
svg .t{font-family:var(--casulo-font-sans)}
svg .b{font-weight:700}
svg .serif{font-family:var(--casulo-font-serif);font-variation-settings:var(--casulo-font-serif-variation)}
svg .n{font-variant-numeric:tabular-nums}

/* nina e historia */
.nina-ident{display:flex;align-items:center;gap:var(--casulo-space-lg);flex-wrap:wrap}
.nina-ident img{width:112px;height:112px}
.respira{animation:respira var(--casulo-motion-breathe) ease-in-out infinite}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(var(--casulo-motion-breathe-scale))}}
@media (prefers-reduced-motion:reduce){.respira{animation:none}html{scroll-behavior:auto}*{transition-duration:var(--casulo-motion-fade)!important}}

/* texto longo e paginas legais */
.prosa h2{margin-top:var(--casulo-space-xl);font:var(--casulo-type-title2)}
.prosa h2:first-child{margin-top:0}
.prosa h3{font:var(--casulo-type-title3);margin-top:var(--casulo-space-lg)}
.prosa table{width:100%;border-collapse:collapse;margin:0 0 var(--casulo-space-md);font:var(--casulo-type-body-small)}
.prosa th,.prosa td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--casulo-line)}
.prosa th{font-weight:700;color:var(--casulo-text)}
.tabela-rolagem{overflow-x:auto}
.faixa-rascunho{background:var(--casulo-attention-soft);color:var(--casulo-text);border-bottom:2px solid var(--casulo-attention);padding:var(--casulo-space-sm) 0}
.faixa-rascunho strong{color:var(--casulo-attention)}
.faixa-rascunho p{margin:0}

/* contato */
.email-copia{display:flex;flex-wrap:wrap;gap:var(--casulo-space-sm);align-items:center;margin:var(--casulo-space-md) 0}
.email-texto{font:var(--casulo-type-title3);padding:12px 16px;border-radius:var(--casulo-radius-sm);background:var(--casulo-surface);border:1px solid var(--casulo-line-strong);user-select:all;overflow-wrap:anywhere}
.form-desligado fieldset{border:1px dashed var(--casulo-line-strong);border-radius:var(--casulo-radius-md);padding:var(--casulo-space-lg);margin:0;min-width:0}
.form-desligado legend{font:var(--casulo-type-title3);padding:0 8px}
.campo{margin-bottom:var(--casulo-space-md)}
.campo label{display:block;font:var(--casulo-type-title3);margin-bottom:4px}
.campo input,.campo textarea,.campo select{width:100%;min-height:var(--casulo-size-target-primary);padding:10px 14px;border-radius:var(--casulo-radius-sm);border:1px solid var(--casulo-line-strong);background:var(--casulo-surface);color:var(--casulo-text);font:var(--casulo-type-body)}
.campo textarea{min-height:120px}
.campo input:disabled,.campo textarea:disabled,.campo select:disabled{opacity:.7;cursor:not-allowed}
.copiado{font:var(--casulo-type-caption);color:var(--casulo-ok);min-height:1.2em}

/* blog */
.vazio{border:1px dashed var(--casulo-line-strong);border-radius:var(--casulo-radius-lg);padding:var(--casulo-space-xl);text-align:center;background:var(--casulo-surface)}
.vazio svg{width:88px;height:88px}

/* rodape */
.rodape{border-top:1px solid var(--casulo-line);background:var(--casulo-surface);padding:var(--casulo-space-xl) 0}
.rodape-grade{display:grid;gap:var(--casulo-space-lg)}
@media (min-width:760px){.rodape-grade{grid-template-columns:1.4fr 1fr 1.6fr}}
.nota-rodape{margin:0}
.mt{margin-top:var(--casulo-space-md)}
.figura-legenda{margin-top:var(--casulo-space-sm);text-align:center}
@media (max-width:639px){
  .prosa table,.prosa tbody,.prosa tr,.prosa th,.prosa td{display:block}
  .prosa thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prosa tr{padding:var(--casulo-space-sm) 0;border-bottom:1px solid var(--casulo-line)}
  .prosa th,.prosa td{border:0;padding:2px 0}
  .prosa td::before{content:attr(data-label) ": ";font-weight:700;color:var(--casulo-text-secondary)}
}
@media (max-width:639px){.nina-ident img{width:72px;height:72px}.nina-ident{gap:var(--casulo-space-sm)}}