/* =====================================================================
   css/organico.css, as peças da frente orgânica, desde 24/10/2026
   ---------------------------------------------------------------------
   Fiel ao canvas «Sybila orgânica» do Claude Design (design system
   Sybila), feito pelo maestro em 24/10/2026: a página do Sim ou não, a
   resposta, a caixa da carta da semana e o molde das páginas de ação. As
   cores, as fontes, os tamanhos e os espaços são os do desenho. As peças
   são de celular (390 px); no computador a página centraliza numa coluna,
   como as páginas de carta. A CSP do site não aceita estilo dentro do
   HTML, e por isso o desenho mora aqui, em classes og-.
   ===================================================================== */

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/tipos/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/tipos/eb-garamond-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/tipos/eb-garamond-500.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin Leve";font-style:normal;font-weight:300;font-display:swap;src:url(/tipos/libre-franklin-300.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin Leve";font-style:normal;font-weight:400;font-display:swap;src:url(/tipos/libre-franklin-400.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin Leve";font-style:normal;font-weight:500;font-display:swap;src:url(/tipos/libre-franklin-500.woff2) format("woff2")}

.og{
  --og-fundo:#0C0B0A; --og-campo:#15130F; --og-cartao:#1E1B16;
  --og-texto:#EDE9E1; --og-apoio:#A9A29A; --og-ocre:#C58A3D; --og-ocre-escuro:#7E5620;
  --og-filete:#35312B; --og-filete-ocre:#4A3B22; --og-borda:#635D55; --og-link:#86A3B4;
  --og-papel:#E8E3D9; --og-papel-borda:#8D8573; --og-tinta:#17140F; --og-tinta-apoio:#6B6558;
  --og-serif:"EB Garamond",Georgia,serif;
  --og-sans:"Libre Franklin Leve","Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --og-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  font-family:var(--og-sans); font-weight:300; color:var(--og-texto);
}
.og *, .og *::before, .og *::after{box-sizing:border-box}
/* o atributo hidden vence as classes que dão display, nas telas e nos dois estados da caixa */
.og [hidden], .og[hidden]{display:none !important}

/* ---- a página inteira (Sim ou não e páginas de ação) ---- */
body.og-pagina{margin:0;background:#0C0B0A;color:#EDE9E1}
.og-coluna{max-width:390px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--og-fundo)}
@media (min-width:700px){ .og-coluna{max-width:560px} }
.og-topo{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--og-filete)}
.og-marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--og-texto);min-height:44px}
.og-marca img{width:24px;height:24px;display:block}
.og-marca span{font-family:var(--og-serif);font-size:21px}
.og-topo-link{font-family:var(--og-serif);font-variant-caps:small-caps;letter-spacing:.1em;font-size:13px;color:var(--og-apoio);text-decoration:none;min-height:44px;display:flex;align-items:center}
.og-rodape{padding:18px 20px 26px;border-top:1px solid var(--og-filete);font-size:12.5px;color:var(--og-apoio)}
.og-rodape p{margin:0}

.og-rotulo{margin:0;font-family:var(--og-serif);font-variant-caps:small-caps;letter-spacing:.1em;font-size:13px;font-weight:500;color:var(--og-ocre)}
.og-rotulo-apoio{color:var(--og-apoio)}
.og-h1{margin:0;font-family:var(--og-serif);font-weight:400;font-size:34px;line-height:1.12}
.og-h2{margin:0;font-family:var(--og-serif);font-weight:400;font-size:27px;line-height:1.12}
.og-apoio{margin:0;font-size:15px;line-height:1.55;color:var(--og-apoio)}
.og-apoio b{font-weight:500;color:var(--og-texto)}
.og-texto{margin:0;font-size:15px;line-height:1.55}
.og-miudo{margin:0;font-size:12.5px;line-height:1.5;color:var(--og-apoio)}
.og-centro{text-align:center}
.og-mono{font-family:var(--og-mono);font-size:11px;color:var(--og-apoio)}

/* o campo da pergunta */
.og-campo{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.og-campo label{font-family:var(--og-serif);font-variant-caps:small-caps;letter-spacing:.1em;font-size:13px;font-weight:500;color:var(--og-apoio)}
.og-campo textarea{width:100%;resize:none;overflow:hidden;background:var(--og-campo);color:var(--og-texto);border:1px solid var(--og-ocre-escuro);border-radius:0;padding:14px 16px;font-family:var(--og-serif);font-size:21px;line-height:1.34;margin:0}
.og-campo textarea::placeholder{color:#6F6960}
.og-campo textarea:focus{outline:1px solid var(--og-ocre);outline-offset:0}
.og-conta{align-self:flex-end;font-family:var(--og-mono);font-size:11px;color:var(--og-apoio)}
.og-erro{margin:0;font-size:12.5px;color:#D69A8A}

/* os botões */
.og-botao{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;background:var(--og-texto);color:var(--og-tinta);text-decoration:none;font-family:var(--og-sans);font-size:15px;font-weight:400;border:0;border-radius:0;cursor:pointer;padding:0 16px;text-align:center}
.og-botao:focus-visible{outline:2px solid var(--og-ocre);outline-offset:2px}
.og-botao[disabled]{opacity:.55;cursor:default}
.og-botao-sec{background:transparent;color:var(--og-texto);border:1px solid var(--og-borda)}
.og-link{color:var(--og-link)}

/* ---- o Sim ou não, a pergunta ---- */
.og-principal{padding:38px 20px 26px;display:flex;flex-direction:column;gap:18px;flex-grow:1}
.og-passos{list-style:none;margin:18px 0 0;padding:18px 0 0;border-top:1px solid var(--og-filete);display:flex;flex-direction:column;gap:12px}
.og-passos li{display:flex;gap:12px;align-items:baseline}
.og-passos .og-num{font-family:var(--og-mono);font-size:11px;color:var(--og-ocre);min-width:16px}
.og-passos .og-passo{font-size:14px;line-height:1.55}

/* o corte, na mesma página */
.og-corte{padding:26px 20px;display:flex;flex-direction:column;gap:14px}

/* ---- o Sim ou não, a resposta ---- */
.og-sec{padding:26px 20px 0;display:flex;flex-direction:column;gap:12px}
.og-sec-centro{align-items:center;gap:18px}
.og-pergunta-dita{margin:0;font-family:var(--og-serif);font-size:27px;line-height:1.2;overflow-wrap:anywhere}
.og-carta{margin:0;width:190px;background:var(--og-papel);border:1px solid var(--og-papel-borda);padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px;align-items:center}
.og-carta img{width:100%;height:280px;object-fit:cover;display:block}
.og-carta figcaption{font-family:var(--og-serif);font-size:17px;color:var(--og-tinta)}
.og-tendencia{margin:0;font-family:var(--og-serif);font-size:34px;line-height:1.1;text-align:center}
.og-reflexao{border-left:1px solid var(--og-ocre-escuro);padding:4px 0 4px 14px}
.og-reflexao p{margin:0;font-family:var(--og-serif);font-size:21px;line-height:1.34}
.og-fundo{margin:38px 20px 0;background:var(--og-cartao);border:1px solid var(--og-filete-ocre);padding:22px 18px;display:flex;flex-direction:column;gap:12px}
.og-fundo .og-botao{margin-top:6px}
.og-fundo-apoio{margin:0;font-size:14px;line-height:1.55;color:var(--og-apoio)}
.og-outra{padding:26px 20px 38px;display:flex;flex-direction:column;align-items:center;gap:6px}
.og-outra a, .og-outra button{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--og-link);background:none;border:0;font-family:var(--og-sans);font-weight:300;cursor:pointer;text-decoration:underline;padding:0}
.og-caixa-moldura{margin:38px 20px 0;background:var(--og-campo);border:1px solid var(--og-filete)}

/* ---- a caixa da carta da semana ---- */
.og-caixa{background:var(--og-campo);border-top:1px solid var(--og-filete-ocre);border-bottom:1px solid var(--og-filete-ocre);padding:26px 18px;display:flex;flex-direction:column;gap:12px}
.og-caixa-moldura .og-caixa{border:0}
.og-caixa-moldura .og-caixa .og-botao{background:transparent;color:var(--og-texto);border:1px solid var(--og-borda)}
.og-caixa-cabeca{display:flex;gap:14px;align-items:center}
.og-caixa-dorso{width:52px;height:84px;background:var(--og-fundo);border:1px solid var(--og-ocre-escuro);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.og-caixa-dorso img{width:28px;height:28px;display:block}
.og-caixa-titulos{display:flex;flex-direction:column;gap:4px}
.og-caixa h2{margin:0;font-family:var(--og-serif);font-weight:400;font-size:23px;line-height:1.15}
.og-caixa-apoio{margin:0;font-size:14px;line-height:1.55;color:var(--og-apoio)}
.og-caixa-forte{margin:0;font-size:14px;line-height:1.55}
.og-caixa form{margin:0}
.og-caixa-campos{display:flex;flex-direction:column;gap:12px}
.og-caixa label.og-rot-email{font-size:12.5px;color:var(--og-apoio);margin-top:4px;margin-bottom:-4px}
.og-caixa input[type="email"]{width:100%;min-height:48px;background:var(--og-fundo);color:var(--og-texto);border:1px solid var(--og-borda);border-radius:0;padding:0 14px;font-family:var(--og-sans);font-size:15px;margin:0}
.og-caixa input[type="email"]:focus{outline:1px solid var(--og-ocre)}
.og-aceite{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;min-height:44px;cursor:pointer}
.og-aceite input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--og-ocre);flex-shrink:0}
.og-caixa-feita{background:var(--og-cartao);border-top:1px solid var(--og-ocre-escuro);border-bottom:1px solid var(--og-ocre-escuro)}
.og-caixa-moldura .og-caixa-feita{border:0}
.og-caixa .og-link{color:var(--og-link)}
/* a caixa no fim das páginas de carta, dentro da coluna delas */
.og-caixa-na-carta{margin:38px 0 0}

/* ---- as páginas de ação ---- */
.og-acao{padding:38px 20px 0;display:flex;flex-direction:column;gap:18px}
.og-bloco{padding:56px 20px 0;display:flex;flex-direction:column;gap:18px}
.og-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.og-lista li{display:flex;gap:12px;align-items:baseline}
.og-lista .og-num{font-family:var(--og-mono);font-size:11px;color:var(--og-ocre);min-width:16px}
.og-lista h3{margin:0 0 4px;font-family:var(--og-serif);font-weight:400;font-size:19px}
.og-lista p{margin:0;font-size:14px;line-height:1.55;color:var(--og-apoio)}
.og-trecho{background:var(--og-papel);border:1px solid var(--og-papel-borda);padding:22px 18px;color:var(--og-tinta);display:flex;flex-direction:column;gap:10px}
.og-trecho-rot{margin:0;font-size:12.5px;color:var(--og-tinta-apoio)}
.og-trecho-texto{margin:0;font-family:var(--og-serif);font-size:19px;line-height:1.4}
.og-tiragens{display:flex;flex-direction:column;gap:8px}
.og-tiragem{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--og-filete);padding:16px}
.og-tiragem-destaque{background:var(--og-cartao);border-color:var(--og-ocre-escuro)}
.og-tiragem-nome{margin:0;font-family:var(--og-serif);font-size:19px}
.og-tiragem-desc{margin:2px 0 0;font-size:12.5px;color:var(--og-apoio)}
.og-preco{font-family:var(--og-mono);font-size:13px;white-space:nowrap}
.og-faq{border-top:1px solid var(--og-filete)}
.og-faq details{border-bottom:1px solid var(--og-filete)}
.og-faq summary{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:15px}
.og-faq summary::-webkit-details-marker{display:none}
.og-faq summary::after{content:"+";color:var(--og-ocre);font-family:var(--og-mono);font-size:15px}
.og-faq details[open] summary::after{content:"\2212"}
.og-faq details p{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--og-apoio)}
.og-fim{padding:56px 20px 38px;display:flex;flex-direction:column;gap:18px;align-items:center}
.og-fim .og-h1{text-align:center}
.og-acao-caixa{margin-top:56px}