/* =========================================================================
   /guia — Qual IA abrir agora
   Fundo quente escuro, laranja da marca como acento, Degular em tudo.
   Superfícies chapadas e cantos arredondados — sem degradê.
   ========================================================================= */

:root{
  --ground:#0E0906;
  --surface:#16100B;
  --surface-2:#1D150E;
  --tile:#241A12;
  --cream:#FCF9F0;
  --muted:#B09E91;
  --faint:#7A6C62;

  --line:rgba(252,249,240,.12);
  --line-soft:rgba(252,249,240,.07);

  --orange:#ED623B;
  --orange-dim:rgba(237,98,59,.16);
  --green:#8CA680;
  --green-solid:#434F43;
  --green-deep:#1D281D;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;

  --font:"Degular","Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"degular-display","Degular","Familjen Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --pop:cubic-bezier(.34,1.56,.64,1);

  --shell:min(100% - 2.5rem, 74rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ground);
  color:var(--cream);
  font-family:var(--font);
  font-size:17px; line-height:1.6;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; border-radius:4px; }

.shell{ width:var(--shell); margin-inline:auto; }

/* textura de pontinhos, bem fraca */
.dots-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 1px 1px, rgba(252,249,240,.055) 1px, transparent 1.5px) 0 0/24px 24px;
}
main,footer{ position:relative; z-index:2; }

/* =========================================================================
   HEADER EM PÍLULA
   ========================================================================= */
.hdr{
  position:sticky; top:14px; z-index:60;
  width:var(--shell); margin:14px auto 0;
  display:flex; align-items:center; gap:14px;
  padding:9px 9px 9px 14px;
  background:rgba(28,20,14,.72);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);
  border-radius:999px;
}
.hdr__brand{ display:inline-flex; align-items:center; gap:9px; flex-shrink:0; padding-right:6px; }
.hdr__brand img{ width:30px; height:auto; }
.hdr__brand span{ display:flex; flex-direction:column; line-height:1.05; }
.hdr__brand b{ font-size:14px; font-weight:600; letter-spacing:-.02em; }
.hdr__brand i{ font-style:normal; font-size:11px; color:var(--faint); }

.pills{ display:flex; align-items:center; gap:3px; margin-inline:auto; }
.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px;
  font-size:14px; font-weight:500; color:var(--muted);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.pill svg{ width:15px; height:15px; opacity:.75; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pill:hover{ background:rgba(252,249,240,.07); color:var(--cream); transform:translateY(-1px); }
.pill.is-on{ background:var(--cream); color:#160E09; }
.pill.is-on svg{ opacity:1; }

.hdr__cta{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 5px 5px 18px;
  background:var(--green-solid); border-radius:999px;
  border-bottom:2px solid var(--green-deep);
  font-size:14px; font-weight:600; flex-shrink:0;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.hdr__cta:hover{ background:#4E5C4E; transform:translateY(-1px); }
.hdr__cta em{
  font-style:normal; width:32px; height:32px; border-radius:50%;
  background:var(--cream); color:#1D281D; display:grid; place-items:center;
}
.hdr__cta em svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:880px){ .pills{ display:none; } }
@media (max-width:520px){
  /* mantém o nome da marca: header com só o mascote e um círculo fica críptico */
  .hdr__brand i{ display:none; }
  .hdr__brand b{ font-size:13px; }
  .hdr__cta{ padding:5px; }
  .hdr__cta b{ display:none; }
}


/* túnel de luz do fundo da hero — Canvas 2D.
   Fica bem apagado de propósito: é atmosfera, não protagonista. A máscara
   apaga o lado esquerdo, onde mora o título, para o texto não competir. */
.tunel{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.55;
  /* máscara radial centralizada: dissolve o efeito antes de encostar nas
     bordas da hero, senão o overflow:hidden corta os feixes no seco. */
  -webkit-mask-image:radial-gradient(115% 105% at 50% 50%, #000 34%, rgba(0,0,0,.62) 66%, transparent 96%);
  mask-image:radial-gradient(115% 105% at 50% 50%, #000 34%, rgba(0,0,0,.62) 66%, transparent 96%);
}
.hero__bgtext{ z-index:1; }
@media (max-width:700px){ .tunel{ opacity:.34; } }

/* =========================================================================
   HERO
   ========================================================================= */
/* overflow:hidden corta o texto gigante do fundo, que vaza a viewport */
.hero{ position:relative; overflow:hidden; padding:clamp(3rem,9vh,6rem) 0 clamp(2rem,5vh,3.5rem); }
.hero__bgtext{
  position:absolute; left:52%; top:58%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--display); font-weight:400;
  font-size:clamp(120px,20vw,300px); line-height:.8; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(252,249,240,.038);
}
.hero > .shell{ position:relative; z-index:2; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin:0 0 1.5rem;
}
.eyebrow::before{ content:""; width:1.6rem; height:1px; background:currentColor; opacity:.8; }
.eyebrow::after{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }

.title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,7.6vw,5.4rem);
  line-height:.96; letter-spacing:-.035em;
  margin:0; text-transform:uppercase;
}
.title__row{ display:flex; align-items:center; gap:clamp(.6rem,1.4vw,1.3rem); flex-wrap:wrap; }
.title em{ font-style:normal; color:var(--orange); }
.title__desc{
  font-family:var(--font); font-weight:400; text-transform:none;
  font-size:clamp(.82rem,1vw,.95rem); line-height:1.4;
  letter-spacing:-.01em; color:var(--muted);
  max-width:26ch; margin:0; align-self:center;
}
.paren{ display:inline-flex; align-items:center; gap:.4rem; }
.paren b{ font-weight:400; color:var(--faint); }

.chips{ display:flex; }
.chips img{
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--ground); margin-left:-14px; object-fit:cover;
}
.chips img:first-child{ margin-left:0; }
.tile{
  width:52px; height:52px; border-radius:var(--r);
  background:var(--tile); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--orange);
  flex-shrink:0;
}
.tile svg{ width:24px; height:24px; }

.hero__note{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font); font-size:.9rem; font-weight:500;
  text-transform:none; letter-spacing:-.01em; color:var(--muted);
  align-self:center;
}
.hero__note b{ color:var(--cream); font-weight:600; }
.hero__note svg{ width:17px; height:17px; color:var(--orange); flex-shrink:0; }

/* selo giratório */
.selo-hero{
  position:absolute; right:0; top:1.5rem;
  width:104px; height:104px; z-index:1; pointer-events:none;
}
@media (max-width:900px){ .selo-hero{ display:none; } }

/* índice numerado */
.indice{ margin:clamp(2.5rem,6vh,4rem) 0 0; max-width:23rem; margin-left:auto; }
.idx{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem;
  padding:.85rem .3rem; border-top:1px solid var(--line-soft);
  color:var(--muted); font-size:.95rem;
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.idx:last-child{ border-bottom:1px solid var(--line-soft); }
.idx:hover{ color:var(--cream); padding-left:.5rem; }
.idx u{ text-decoration:none; color:var(--faint); font-family:var(--mono); font-size:.72rem; }
.idx__dots{ display:inline-flex; gap:4px; }
.idx__dots i{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.28; }
.idx:hover .idx__dots i:nth-child(2){ opacity:1; }
.idx svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; transition:transform .3s var(--ease); }
.idx:hover svg{ transform:translateX(4px); }

/* =========================================================================
   FITA ONDULADA COM OS LOGOS
   ========================================================================= */
.esteira{ padding:clamp(2rem,5vh,3rem) 0 clamp(2.5rem,6vh,3.5rem); overflow:hidden; }
.esteira__lbl{
  display:block; text-align:center; margin:0 0 1.4rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.onda{ width:100%; }
.onda svg{ display:block; width:100%; height:auto; overflow:visible; }

/* =========================================================================
   SEÇÕES
   ========================================================================= */
section{ padding:clamp(3.5rem,8vh,5.5rem) 0; }
.sec-head{ margin-bottom:2.4rem; max-width:60ch; }
.sec-head h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1.05; letter-spacing:-.03em; margin:.7rem 0 .9rem; text-wrap:balance;
}
.sec-head p{ margin:0; color:var(--muted); font-size:1.05rem; }
.sec-head p strong{ color:var(--cream); font-weight:500; }

/* três tipos */
.tipos{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.tipo{
  padding:1.7rem 1.6rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
}
.tipo u{
  display:block; text-decoration:none; margin-bottom:.7rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange);
}
.tipo h3{ font-family:var(--display); font-weight:400; font-size:1.45rem; letter-spacing:-.02em; margin:0 0 .5rem; }
.tipo p{ margin:0 0 1rem; font-size:.96rem; color:var(--muted); line-height:1.55; }
.tipo i{
  font-style:normal; display:block; padding-top:.9rem;
  border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:.72rem; color:var(--faint); line-height:1.5;
}

/* =========================================================================
   TAREFAS + CARDS DE FERRAMENTA
   ========================================================================= */
.tarefa{ margin-bottom:clamp(2.5rem,6vh,3.5rem); }
.tarefa__head{
  display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap;
  padding-bottom:.9rem; margin-bottom:1.3rem;
  border-bottom:1px solid var(--line);
}
.tarefa__n{
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; color:var(--orange);
  border:1px solid rgba(237,98,59,.32); border-radius:999px; padding:.15rem .6rem;
}
.tarefa__head h3{ font-family:var(--display); font-weight:400; font-size:1.7rem; letter-spacing:-.025em; margin:0; }
.tarefa__head p{ margin:0; color:var(--faint); font-size:.92rem; flex:1 1 100%; }

.ferramentas{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); }
.ferr{
  display:flex; flex-direction:column;
  padding:1.4rem 1.5rem 1.3rem;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--pop);
}
.ferr:hover{ border-color:rgba(237,98,59,.38); background:var(--surface-2); transform:translateY(-3px); }
.ferr__top{ display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem; }
.ferr__logo{
  width:42px; height:42px; border-radius:var(--r-sm);
  background:var(--tile); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--cream); flex-shrink:0;
}
.ferr__logo svg{ width:20px; height:20px; fill:currentColor; }
.ferr__logo abbr{ font-family:var(--mono); font-size:.8rem; font-weight:600; border:0; text-decoration:none; }
.ferr__top h4{ font-family:var(--display); font-weight:400; font-size:1.3rem; letter-spacing:-.02em; margin:0; }
.ferr__top u{
  display:block; text-decoration:none; margin-top:.1rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.ferr > p{ margin:0 0 1.1rem; font-size:.93rem; color:var(--muted); line-height:1.58; }
.ferr__quando{
  margin-top:auto; padding-left:.85rem;
  border-left:2px solid var(--green);
  font-size:.9rem; color:var(--muted); line-height:1.5;
}
.ferr__quando b{ color:var(--green); font-weight:600; }

/* =========================================================================
   PERGUNTAS · ERROS · STACK · CTA
   ========================================================================= */
.perguntas{ display:grid; gap:1rem; }
.pq{
  display:grid; grid-template-columns:4rem 1fr; gap:0 1.4rem;
  padding:1.7rem 1.6rem;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg);
}
.pq__n{
  font-family:var(--display); font-weight:400; font-size:2.4rem; line-height:.9;
  letter-spacing:-.04em; color:transparent;
  -webkit-text-stroke:1px rgba(237,98,59,.6); font-variant-numeric:tabular-nums;
}
.pq h3{ font-family:var(--display); font-weight:400; font-size:1.45rem; letter-spacing:-.02em; margin:0 0 .6rem; text-wrap:balance; }
.pq p{ margin:0 0 .7rem; color:var(--muted); font-size:1rem; max-width:62ch; }
.pq p:last-child{ margin-bottom:0; }
.pq strong{ color:var(--cream); font-weight:500; }
@media (max-width:640px){ .pq{ grid-template-columns:1fr; gap:.4rem; padding:1.4rem 1.2rem; } .pq__n{ font-size:1.7rem; } }

.erros{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); }
.erro{
  display:grid; grid-template-columns:auto 1fr; gap:1rem;
  padding:1.3rem 1.4rem; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
}
.erro u{ text-decoration:none; color:var(--orange); font-family:var(--mono); font-size:.78rem; padding-top:.25rem; }
.erro h4{ font-family:var(--display); font-weight:400; font-size:1.18rem; letter-spacing:-.02em; margin:0 0 .35rem; }
.erro p{ margin:0; font-size:.93rem; color:var(--muted); line-height:1.55; }
.erro p b{ color:var(--green); font-weight:600; }

.stack{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,2.6rem); }
.stack ol{ list-style:none; margin:0; padding:0; display:grid; gap:1.2rem; counter-reset:s; }
.stack li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; counter-increment:s; }
.stack li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange-dim); color:var(--orange); border:1px solid rgba(237,98,59,.3);
}
.stack b{ display:block; font-size:1rem; font-weight:600; margin-bottom:.15rem; }
.stack span{ color:var(--muted); font-size:.94rem; line-height:1.5; }

.cta{
  margin-top:clamp(3rem,7vh,4.5rem);
  padding:clamp(2.2rem,5vw,3rem);
  background:var(--surface); border:1px solid rgba(237,98,59,.28);
  border-radius:var(--r-xl);
  display:grid; gap:1.6rem; align-items:center; grid-template-columns:1fr auto;
}
.cta h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,3.6vw,2.4rem); line-height:1.06; letter-spacing:-.03em; margin:0 0 .6rem; text-wrap:balance; }
.cta p{ margin:0; color:var(--muted); max-width:46ch; font-size:1rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:60px; padding:0 2rem; border-radius:var(--r);
  border-bottom:2px solid var(--green-deep); background:var(--green-solid);
  color:var(--cream); font-size:1.02rem; font-weight:600; white-space:nowrap;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.btn:hover{ background:#4E5C4E; transform:translateY(-2px); }
.btn:active{ transform:translateY(1px); }
@media (max-width:720px){ .cta{ grid-template-columns:1fr; } .btn{ width:100%; } }

/* rodapé */
footer{ border-top:1px solid var(--line-soft); padding:2.6rem 0 3.5rem; margin-top:clamp(2.5rem,6vh,4rem); }
.foot{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between; }
.foot p{ margin:0; font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.04em; }
.foot nav{ display:flex; gap:1.3rem; flex-wrap:wrap; }
.foot nav a{ font-family:var(--mono); font-size:.72rem; color:var(--muted); letter-spacing:.04em; }
.foot nav a:hover{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.foot img{ width:70px; height:70px; opacity:.8; }

/* entrada */
.js .rise{ opacity:0; translate:0 22px; }
.js .rise.on{ opacity:1; translate:0 0; transition:opacity .75s var(--ease-out), translate .75s var(--ease-out); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rise{ opacity:1 !important; translate:none !important; transition:none !important; }
  .fita__trilho{ animation:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}