/* IA Além do Chat — site estático. Cores como tokens; o tema segue o sistema,
   com troca manual (data-theme no <html>). */

@font-face { font-family: "Bricolage"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* cara clara — trilha Entenda */
  --azul: #2F54EB; --azul-forte: #1D39C4; --amarelo: #FFC53D; --tinta: #111827; --papel: #F7F8FA; --branco: #FFFFFF;
  /* cara escura — trilha Faça */
  --noite: #0E0B1F; --menta: #3DDC97; --violeta: #7B5CFF; --superficie: #1A1633; --borda-noite: #3A3460; --nevoa: #C9C3E6;

  --fundo: var(--papel);
  --fundo-cartao: var(--branco);
  --texto: var(--tinta);
  --texto-suave: #4B5563;
  --borda: #D1D5DB;
  --acento: var(--azul);
  --acento-hover: var(--azul-forte);
  --acento-texto: #FFFFFF;
  --destaque-fundo: var(--amarelo);
  --destaque-texto: var(--tinta);
  --brilho: rgba(47, 84, 235, 0.10);
  --chip-borda: 2px solid var(--tinta);
  --chip-sombra: 3px 3px 0 var(--tinta);
  --chip-raio: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: var(--noite);
    --fundo-cartao: var(--superficie);
    --texto: #FFFFFF;
    --texto-suave: var(--nevoa);
    --borda: var(--borda-noite);
    --acento: var(--menta);
    --acento-hover: #7FF0BF;
    --acento-texto: var(--noite);
    --destaque-fundo: transparent;
    --destaque-texto: var(--menta);
  --destaque-pad: 0;
    --destaque-pad: 0;
    --brilho: rgba(123, 92, 255, 0.20);
    --chip-borda: 1px solid var(--borda-noite);
    --chip-sombra: none;
    --chip-raio: 999px;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fundo: var(--noite);
  --fundo-cartao: var(--superficie);
  --texto: #FFFFFF;
  --texto-suave: var(--nevoa);
  --borda: var(--borda-noite);
  --acento: var(--menta);
  --acento-hover: #7FF0BF;
  --acento-texto: var(--noite);
  --destaque-fundo: transparent;
  --destaque-texto: var(--menta);
  --destaque-pad: 0;
  --brilho: rgba(123, 92, 255, 0.20);
  --chip-borda: 1px solid var(--borda-noite);
  --chip-sombra: none;
  --chip-raio: 999px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: var(--acento); }
a:hover { color: var(--acento-hover); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: "Bricolage", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 10; background: var(--fundo-cartao); padding: 10px 14px; }

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* topo */
.topo { padding: 20px 0; }
.topo .container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); margin-right: auto; }
.marca:hover { color: var(--texto); }
.marca span { font-family: "Bricolage", sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.simbolo .bolha { stroke: currentColor; }
.simbolo .ponto { fill: currentColor; }
.simbolo .sai, .simbolo .rastro { fill: var(--acento); }
.menu { display: flex; align-items: center; gap: 22px; }
.menu a { color: var(--texto-suave); text-decoration: none; font-weight: 500; font-size: 15px; }
.menu a:hover { color: var(--texto); }
.menu .botao-principal, .menu .botao-principal:hover { color: var(--acento-texto); }
.tema {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borda); background: var(--fundo-cartao);
  color: var(--texto); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tema .sol { display: none; }
:root[data-theme="dark"] .tema .sol { display: block; }
:root[data-theme="dark"] .tema .lua { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol { display: block; }
  :root:not([data-theme="light"]) .tema .lua { display: none; }
}

.botao {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 17px;
  padding: 15px 24px; border-radius: 14px; border: 1px solid transparent; min-height: 44px;
}
.botao-principal { background: var(--acento); color: var(--acento-texto); }
.botao-principal:hover { background: var(--acento-hover); color: var(--acento-texto); }
.botao-secundario { background: var(--fundo-cartao); color: var(--texto); border-color: var(--borda); font-weight: 600; }
.botao-secundario:hover { color: var(--texto); border-color: var(--texto-suave); }
.botao-pequeno { font-size: 15px; padding: 11px 18px; border-radius: 12px; }

/* hero */
.hero { position: relative; padding: 48px 0 80px; }
.hero::before {
  content: ""; position: absolute; right: -220px; top: 10px; width: 620px; height: 620px; border-radius: 50%;
  background: var(--brilho); pointer-events: none; z-index: -1;
}
.hero .container { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.hero-texto { flex: 1 1 520px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.selo {
  align-self: flex-start; background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: 999px;
  padding: 6px 14px; font-size: 14px; font-weight: 600; color: var(--texto-suave);
}
.hero h1 { font-size: clamp(42px, 6.4vw, 72px); }
.destaque { background: var(--destaque-fundo); color: var(--destaque-texto); padding: var(--destaque-pad, 0 0.14em); border-radius: 0.14em; white-space: nowrap; }
.hero p { font-size: 19px; color: var(--texto-suave); max-width: 560px; }
.acoes { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-arte { flex: 0 1 440px; max-width: 440px; position: relative; aspect-ratio: 1 / 0.95; margin: 0 auto; }
.hero-arte .simbolo { width: 66%; height: auto; color: var(--texto); }
.hero-arte .simbolo .bolha { fill: var(--fundo-cartao); }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--chip-raio);
  font-weight: 700; font-size: 15px; background: var(--fundo-cartao); color: var(--texto); border: var(--chip-borda);
  box-shadow: var(--chip-sombra); white-space: nowrap;
}
.chip svg { width: 18px; height: 18px; color: var(--acento); }
.chip-1 { left: 66%; top: 2%; }
.chip-2 { left: 72%; top: 19%; }
.chip-3 { left: 62%; top: 36%; }
.chip-4 { left: 70%; top: 53%; }
.chip-5 { left: 58%; top: 70%; }

/* animação: o terceiro ponto sai da bolha */
@media (prefers-reduced-motion: no-preference) {
  .hero-arte .sai { animation: sair 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .hero-arte .rastro { animation: rastro 3.2s ease-in-out infinite; }
  .hero-arte .ponto { animation: digitando 1.4s ease-in-out infinite; }
  .hero-arte .ponto + .ponto { animation-delay: 0.2s; }
  .chip { animation: flutua 5s ease-in-out infinite; }
  .chip-2 { animation-delay: -1s; } .chip-3 { animation-delay: -2s; } .chip-4 { animation-delay: -3s; } .chip-5 { animation-delay: -4s; }
}
@keyframes sair { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -3px); } }
@keyframes rastro { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.2; } }
@keyframes digitando { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* seções */
.secao { padding: 72px 0; }
.secao-cabeca { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 720px; }
.secao h2 { font-size: clamp(32px, 4.4vw, 48px); }
.secao-cabeca p { color: var(--texto-suave); font-size: 18px; }
.rotulo { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acento); }

.grade { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cartao {
  background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: 20px; padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.cartao h3 { font-size: 24px; }
.cartao p { color: var(--texto-suave); }
.icone {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--brilho); color: var(--acento); margin-bottom: 6px;
}
.icone svg { width: 24px; height: 24px; }

/* trilhas: cada uma mantém a própria cara em qualquer modo */
.trilhas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.trilha { border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.trilha h3 { font-size: 30px; }
.trilha ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.trilha li { padding-left: 22px; position: relative; }
.trilha li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; }
.etiqueta { align-self: flex-start; font-weight: 800; font-size: 13px; letter-spacing: 0.14em; padding: 6px 11px; border-radius: 8px; }
.trilha-entenda { background: var(--papel); color: var(--tinta); border: 1px solid #D1D5DB; }
.trilha-entenda .etiqueta { background: var(--azul); color: #FFFFFF; }
.trilha-entenda p, .trilha-entenda li { color: #374151; }
.trilha-entenda li::before { background: var(--azul); }
.trilha-faca { background: var(--noite); color: #FFFFFF; border: 1px solid var(--menta); }
.trilha-faca .etiqueta { background: var(--menta); color: var(--noite); }
.trilha-faca p, .trilha-faca li { color: var(--nevoa); }
.trilha-faca li::before { background: var(--menta); }
.trilha-faca .mono { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--menta); }
.par { margin-top: 20px; color: var(--texto-suave); font-size: 16px; }

/* princípios */
.principios { counter-reset: p; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.principios .cartao h3 { font-size: 22px; }
.principios .cartao::before {
  counter-increment: p; content: "0" counter(p); font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--acento);
}

/* segurança */
.seguranca { background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: 28px; padding: clamp(28px, 5vw, 56px); display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.seguranca > div:first-child { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; }
.seguranca h2 { font-size: clamp(30px, 4vw, 42px); }
.seguranca p { color: var(--texto-suave); }
.seguranca ol { flex: 1 1 360px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.seguranca li { display: flex; gap: 14px; align-items: flex-start; }
.seguranca li b { display: block; }
.seguranca li div span { color: var(--texto-suave); }
.passo {
  flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--acento); color: var(--acento-texto);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}

/* chamada final */
.final { text-align: center; padding: 96px 0; }
.final .container { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.final h2 { font-size: clamp(34px, 5vw, 56px); max-width: 760px; }
.final p { color: var(--texto-suave); max-width: 560px; font-size: 18px; }

/* rodapé */
.rodape { border-top: 1px solid var(--borda); padding: 32px 0 40px; font-size: 15px; color: var(--texto-suave); }
.rodape .container { display: flex; gap: 16px 32px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rodape .marca span { font-size: 18px; }

@media (max-width: 760px) {
  .menu a.link { display: none; }
  .hero { padding-top: 24px; padding-bottom: 32px; }
  .hero-arte { flex-basis: 100%; max-width: 340px; }
  .chip { font-size: 13px; padding: 6px 10px; gap: 6px; }
  .chip svg { width: 15px; height: 15px; }
  .chip-1 { left: 60%; } .chip-2 { left: 64%; } .chip-3 { left: 56%; } .chip-4 { left: 62%; } .chip-5 { left: 52%; }
  .botao { font-size: 16px; padding: 13px 20px; }
  .topo .botao-pequeno { display: none; }
  .secao { padding: 56px 0; }
}