/* ============================================================
   VERBO CODE — folha das páginas internas (contato, privacidade,
   obrigado, 404). As duas landings têm CSS próprio embutido;
   aqui ficam só as páginas de texto, que são muitas e simples.
   Os tokens são os mesmos do manual. Não invente valor fora daqui.
   ============================================================ */
:root{
  /* laranja quase neom. mais vivo E mais legível que o anterior: 6,38:1 contra 5,48:1 */
  --fogo:#FF5A1F; --fogo-alto:#FF8A4C; --fogo-baixo:#E63F0B; --rosa-fundo:#8E2F52;
  --rosa:#FF5A7A;                 /* só na aurora, nunca em interface */

  /* base fria: tinta e pedra. nenhum marrom. */
  --tinta:#08090C; --pedra:#0F1117; --pedra-alta:#161923;
  --linha:#232733; --linha-2:#333949;
  --marmore:#EEF0F5; --nevoa:#A7ADBC; --basalto:#8A91A2;

  --disp:"Cormorant Garamond",Georgia,serif;
  --disp2:"Sora","Segoe UI",Arial,sans-serif;
  --texto:"IBM Plex Sans","Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --t-toque:160ms; --t-base:420ms; --t-longo:720ms;
  --e-sobe:cubic-bezier(.16,1,.3,1);
  --e-passo:cubic-bezier(.34,1.3,.5,1);
  --e-firme:cubic-bezier(.4,0,.2,1);

  /* sombra fria, nunca marrom e nunca preto puro */
  --sombra-1:0 2px 8px rgba(2,3,8,.55);
  --sombra-2:0 20px 48px -14px rgba(2,3,8,.78);
  --sombra-3:0 44px 96px -28px rgba(2,3,8,.9);
  --luz-borda:inset 0 1px 0 rgba(238,240,245,.08);
  --luz-borda-forte:inset 0 1px 0 rgba(238,240,245,.16);
  --brilho:0 0 44px rgba(255,90,31,.3);

  --grade-fina:rgba(51,57,73,.20); --grade-forte:rgba(51,57,73,.42);
  --arco:min(50%,190px);
  --col:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tinta);color:var(--marmore);
  font-family:var(--texto);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--fogo-alto)}
::selection{background:rgba(220,120,101,.28)}

.col{width:100%;max-width:var(--col);margin:0 auto;padding:0 26px}

.pular{position:absolute;left:-9999px}
.pular:focus{left:16px;top:16px;z-index:99;background:var(--fogo);color:#08090C;
  padding:10px 16px;border-radius:999px;font:600 .9rem var(--disp2);text-decoration:none}
:focus-visible{outline:2px solid var(--fogo);outline-offset:3px;border-radius:4px}

/* ---- barra ---- */
.barra{position:sticky;top:0;z-index:50;background:rgba(28,27,33,.82);
  backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--linha)}
.barra .col{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.barra img{height:25px;width:auto}
.barra .col>a:first-child{display:inline-flex;align-items:center;padding:6px 0}

/* ---- botão ---- */
.bt{display:inline-flex;align-items:center;gap:11px;position:relative;isolation:isolate;
  overflow:hidden;font-family:var(--disp2);font-size:1rem;font-weight:700;
  letter-spacing:-.018em;text-decoration:none;padding:14px 15px 14px 26px;
  border-radius:999px;background:var(--fogo);color:#08090C;border:1px solid transparent}
.bt .cap{display:grid;place-items:center;width:29px;height:29px;border-radius:999px;
  background:rgba(28,27,33,.14);flex:none;
  transition:transform var(--t-toque) var(--e-firme)}
.bt .cap svg{width:16px;height:16px}
.bt:hover .cap{transform:translate(3px,-3px)}
.bt-vazio{background:transparent;color:var(--marmore);border-color:var(--linha-2)}
.bt-vazio .cap{background:rgba(247,245,242,.09)}
.bt-vazio:hover{border-color:var(--fogo)}
.barra .bt{padding:9px 10px 9px 20px;font-size:.92rem}
.barra .bt .cap{width:27px;height:27px}
@media(max-width:520px){.barra .bt .lbl{display:none}
  .barra .bt{padding:9px 10px;border-radius:999px}}

/* ---- migalhas ---- */
.migalhas{padding:26px 0 0}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:0;padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--basalto)}
.migalhas a{display:inline-block;padding:5px 0;color:var(--basalto);text-decoration:none;
  transition:color var(--t-toque) var(--e-firme)}
.migalhas a:hover{color:var(--fogo-alto)}
.migalhas li+li::before{content:"/";margin-right:9px;color:var(--linha-2)}
.migalhas [aria-current]{color:var(--nevoa)}

/* ---- corpo ---- */
.pagina{padding:34px 0 90px}
.olho{font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fogo);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.olho::before{content:"";width:26px;height:2px;background:var(--fogo);border-radius:2px}
h1{font-family:var(--disp);font-weight:600;letter-spacing:-.018em;line-height:1.04;
  font-size:clamp(2.2rem,5.4vw,3.6rem);margin:0 0 20px}
h2{font-family:var(--disp);font-weight:600;letter-spacing:-.018em;line-height:1.14;
  font-size:clamp(1.4rem,2.6vw,1.85rem);margin:44px 0 14px}
h3{font-family:var(--disp2);font-weight:600;font-size:1.02rem;margin:26px 0 8px}
p,li{color:var(--nevoa);max-width:68ch}
.guia{font-size:1.1rem;color:var(--nevoa);max-width:56ch;margin:0 0 34px}
strong{color:var(--marmore);font-weight:600}
.mono{font-family:var(--mono);font-size:.86rem;color:var(--basalto)}
hr{border:0;border-top:1px solid var(--linha);margin:44px 0}

/* ---- painel ---- */
.casca{background:linear-gradient(180deg,rgba(51,57,73,.26),rgba(51,57,73,.07));
  border:1px solid rgba(51,57,73,.44);border-radius:20px;padding:6px;
  box-shadow:var(--sombra-2)}
.nucleo{background:linear-gradient(180deg,#161923,#0F1117);border-radius:14px;
  box-shadow:var(--luz-borda);padding:28px 26px}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0}
.grade .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--basalto);margin-bottom:9px}
.grade .v{font-size:1.02rem;color:var(--marmore)}
.grade a{display:inline-block;padding:3px 0;color:var(--marmore);text-decoration:none;
  border-bottom:1px solid var(--linha-2)}
.grade a:hover{color:var(--fogo-alto);border-bottom-color:var(--fogo)}

/* ---- rodapé ---- */
footer{border-top:1px solid var(--linha);background:var(--tinta);padding:40px 0 44px}
footer .dentro{display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;
  align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--basalto)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{color:var(--basalto);text-decoration:none;display:inline-block;padding:5px 0;
  transition:color var(--t-toque) var(--e-firme)}
footer a:hover{color:var(--fogo-alto)}

/* ---- entrada ---- */
.sobe{opacity:0;transform:translateY(14px);
  transition:opacity var(--t-base) var(--e-firme),transform var(--t-base) var(--e-sobe)}
.sobe.vis{opacity:1;transform:none}
.d1{transition-delay:80ms} .d2{transition-delay:160ms} .d3{transition-delay:240ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .sobe{opacity:1 !important;transform:none !important}
}

/* ============================================================
   MODO CLARO
   Mesmos tokens do modo claro da landing. O laranja de texto
   escurece para #C13A0D: #FF5A1F sobre papel da 2,89:1 e reprova.
   ============================================================ */
:root{--fogo-txt:var(--fogo-alto)}
[data-tema="claro"]{
  color-scheme:light;
  --tinta:#F5F6F9; --pedra:#ECEEF3; --pedra-alta:#FFFFFF;
  --linha:#DDE1E9; --linha-2:#C2C8D6;
  --marmore:#0E1016; --nevoa:#41485A; --basalto:#5C6478;
  --fogo-txt:#C13A0D;                     /* 5,01:1 sobre o papel */
  --grade-fina:rgba(14,16,22,.055); --grade-forte:rgba(14,16,22,.11);
  --sombra-1:0 1px 3px rgba(20,26,44,.09);
  --sombra-2:0 14px 32px -12px rgba(20,26,44,.17);
  --sombra-3:0 30px 64px -22px rgba(20,26,44,.24);
  --luz-borda:inset 0 1px 0 rgba(255,255,255,.9);
  --luz-borda-forte:inset 0 1px 0 #fff;
  --brilho:0 0 34px rgba(255,90,31,.3);
}
[data-tema="claro"] body{background-image:
  radial-gradient(56% 40% at 88% -6%, rgba(220,120,101,.13), transparent 62%);
  background-attachment:fixed}
/* so o link dentro do texto fica laranja. botao, migalha e rodape tem cor
   propria, e um seletor de tag venceria a classe deles. */
[data-tema="claro"] .pagina p a,
[data-tema="claro"] .pagina li a,
[data-tema="claro"] .migalhas a:hover,
[data-tema="claro"] .grade a:hover,
[data-tema="claro"] footer a:hover,
[data-tema="claro"] .olho{color:var(--fogo-txt)}
[data-tema="claro"] .olho::before{background:var(--fogo-txt)}
[data-tema="claro"] .barra{background:rgba(247,245,242,.8)}
[data-tema="claro"] .casca{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(236,238,243,.72));
  border-color:rgba(28,27,33,.11)}
[data-tema="claro"] .nucleo{background:linear-gradient(180deg,#fff,#F5F6F9)}
[data-tema="claro"] .bt-vazio{background:rgba(28,27,33,.045)}
[data-tema="claro"] .bt-vazio .cap{background:rgba(28,27,33,.07)}
/* a marca clara some no papel: existe uma versao em tinta */
.so-claro{display:none}
[data-tema="claro"] .so-escuro{display:none}
[data-tema="claro"] .so-claro{display:block}
/* botao do tema */
.tema{display:grid;place-items:center;flex:none;width:44px;height:44px;cursor:pointer;
  border:1px solid var(--linha-2);border-radius:999px;background:rgba(22,25,35,.6);
  color:var(--nevoa);padding:0;
  transition:border-color var(--t-toque) var(--e-firme),color var(--t-toque) var(--e-firme)}
.tema:hover{border-color:var(--fogo);color:var(--marmore)}
[data-tema="claro"] .tema{background:rgba(28,27,33,.04)}
.tema svg{width:19px;height:19px}
.tema .lua{display:none}
[data-tema="claro"] .tema .lua{display:block}
[data-tema="claro"] .tema .sol{display:none}
.barra .col{gap:12px}