/* ===========================================================
   Cannabreed Technology Brasil — folha de estilo do site
   ===========================================================
   Um arquivo só, na ordem em que a página aparece.
   Para mudar uma cor ou um tamanho, altere o token em :root.
   =========================================================== */

/* ── Fontes ─────────────────────────────────────────────── */
@font-face { font-family:"Titillium Web"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/TitilliumWeb-Regular.woff2") format("woff2"); }
@font-face { font-family:"Titillium Web"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/TitilliumWeb-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Titillium Web"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/TitilliumWeb-Bold.woff2") format("woff2"); }
@font-face { font-family:"Titillium Web"; font-style:normal; font-weight:900; font-display:swap; src:url("fonts/TitilliumWeb-Black.woff2") format("woff2"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:300; font-display:swap; src:url("fonts/Lato-Light.woff2") format("woff2"); }
@font-face { font-family:"Lato"; font-style:italic;  font-weight:300; font-display:swap; src:url("fonts/Lato-LightItalic.woff2") format("woff2"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/Lato-Regular.woff2") format("woff2"); }
@font-face { font-family:"Lato"; font-style:italic;  font-weight:400; font-display:swap; src:url("fonts/Lato-Italic.woff2") format("woff2"); }
@font-face { font-family:"Lato"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/Lato-Bold.woff2") format("woff2"); }

/* ── Tokens da marca ────────────────────────────────────── */
:root {
  --navy-900:#02172B; --navy-800:#0A2740; --navy-700:#143656;
  --lime-500:#80DB42; --lime-600:#6BC233; --lime-300:#B7EC91;
  --slate-500:#707582; --slate-400:#8E93A0; --slate-300:#B7B7D1;
  --slate-200:#DEDEE8; --slate-100:#EFEFF5; --branco:#FFFFFF;

  --fonte-titulo:"Titillium Web","Helvetica Neue",Arial,sans-serif;
  --fonte-texto:"Lato","Helvetica Neue",Arial,sans-serif;

  --largura:1200px;
  --respiro-lateral:32px;
  --respiro-secao:120px;
  --raio:12px;
  --transicao:220ms cubic-bezier(.16,1,.3,1);
}

/* ── Base ───────────────────────────────────────────────── */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--branco); color:var(--navy-900);
       font-family:var(--fonte-texto); font-size:17px; line-height:1.6;
       -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--lime-600); }
::selection { background:var(--lime-300); color:var(--navy-900); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--lime-500); outline-offset:2px; border-radius:4px; }

.pular {
  position:fixed; top:-60px; left:16px; z-index:9999;
  background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:6px;
  text-decoration:none; font-weight:700; font-size:13px; transition:top 160ms; }
.pular:focus { top:16px; }

.interno { max-width:var(--largura); margin:0 auto; }
section[id], header[id] { scroll-margin-top:72px; }

/* ── Tipografia ─────────────────────────────────────────── */
h1, h2, h3 { font-family:var(--fonte-titulo); font-weight:700; margin:0; }
h1 { font-size:clamp(40px,6.6vw,87px); line-height:1.02; letter-spacing:-.025em; color:#fff; }
h2 { font-size:clamp(30px,4.2vw,52px); line-height:1.06; letter-spacing:-.02em; }
h3 { font-size:20px; line-height:1.25; letter-spacing:-.01em; }
p  { margin:0 0 18px; }
.sobrancelha {
  font-family:var(--fonte-texto); font-weight:400; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--lime-600);
  margin:0 0 18px; }
.sobrancelha--clara { color:var(--lime-500); }
.apoio { color:var(--slate-500); }
.realce { color:var(--lime-600); }
.chip {
  display:inline-block; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy-900); background:var(--slate-100);
  border:1px solid var(--slate-200); border-radius:999px; padding:5px 14px; margin-bottom:20px; }
.chip--claro { color:var(--lime-500); background:rgba(128,219,66,.10); border-color:rgba(128,219,66,.35); }

/* ── Botões ─────────────────────────────────────────────── */
.botao {
  display:inline-block; font-family:var(--fonte-titulo); font-weight:700; font-size:15px;
  text-decoration:none; padding:14px 26px; border-radius:8px; border:0; cursor:pointer;
  transition:background var(--transicao), color var(--transicao); }
.botao--primario { background:var(--lime-500); color:var(--navy-900); }
.botao--primario:hover { background:var(--lime-600); }
.botao--fantasma { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); }
.botao--fantasma:hover { border-color:var(--lime-500); color:var(--lime-500); }

/* ── Navegação ──────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:50; transition:background var(--transicao), border-color var(--transicao); border-bottom:1px solid transparent; }
.nav[data-solida="1"] { background:rgba(255,255,255,.94); backdrop-filter:saturate(1.2) blur(10px); border-bottom-color:var(--slate-200); }
.nav__interno { max-width:var(--largura); margin:0 auto; padding:16px var(--respiro-lateral);
                display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__logo img { height:34px; width:auto; }
.nav__logo .logo-escuro { display:none; }
.nav[data-solida="1"] .logo-claro { display:none; }
.nav[data-solida="1"] .logo-escuro { display:block; }
.nav__links { display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav__links a { color:rgba(255,255,255,.86); text-decoration:none; font-size:14px; font-weight:700; }
.nav[data-solida="1"] .nav__links a { color:var(--navy-900); }
.nav__links a:hover { color:var(--lime-500); }
.nav__acoes { display:flex; align-items:center; gap:16px; }

/* ── Seletor de idioma ──────────────────────────────────── */
.idiomas { display:flex; align-items:center; gap:2px; font-family:var(--fonte-titulo);
           font-weight:700; font-size:12.5px; letter-spacing:.04em; }
.idiomas a, .idiomas__atual { padding:5px 9px; border-radius:5px; text-decoration:none; }
.idiomas a { color:rgba(255,255,255,.62); }
.idiomas a:hover { color:var(--lime-500); }
.idiomas__atual { color:var(--navy-900); background:var(--lime-500); }
.nav[data-solida="1"] .idiomas a { color:var(--slate-500); }
.gaveta .idiomas, .rodape .idiomas { justify-content:flex-start; }
.rodape .idiomas a { color:rgba(255,255,255,.62); }

.hamburguer { display:none; flex-direction:column; justify-content:center; gap:5px;
              width:44px; height:44px; margin-right:-10px; padding:0;
              background:transparent; border:0; cursor:pointer; color:#fff; }
.nav[data-solida="1"] .hamburguer { color:var(--navy-900); }
.hamburguer span { display:block; width:24px; height:2px; background:currentColor; border-radius:2px; }

.gaveta-fundo { position:fixed; inset:0; background:rgba(2,23,43,.5); opacity:0; visibility:hidden;
                transition:opacity 240ms, visibility 240ms; z-index:55; }
.gaveta-fundo[data-aberta="1"] { opacity:1; visibility:visible; }
.gaveta { position:fixed; top:0; right:0; bottom:0; width:min(86vw,340px);
          background:var(--navy-900); color:#fff; padding:26px 26px 36px;
          display:flex; flex-direction:column; overflow-y:auto; z-index:60;
          transform:translateX(100%); visibility:hidden;
          box-shadow:-20px 0 60px rgba(0,0,0,.4);
          transition:transform 300ms cubic-bezier(.16,1,.3,1), visibility 300ms; }
.gaveta[data-aberta="1"] { transform:translateX(0); visibility:visible; }
.gaveta__fechar { position:absolute; top:14px; right:16px; width:40px; height:40px;
                  background:transparent; border:0; color:rgba(255,255,255,.75);
                  font-size:22px; line-height:1; cursor:pointer; }
.gaveta a { display:block; color:#fff; text-decoration:none; font-family:var(--fonte-titulo);
            font-weight:700; font-size:19px; letter-spacing:-.01em; padding:14px 0;
            border-bottom:1px solid rgba(255,255,255,.10); }

/* ── Hero ───────────────────────────────────────────────── */
.hero { position:relative; background:var(--navy-900); min-height:760px;
        display:flex; align-items:center; margin-top:-86px; overflow:hidden; }
.hero__fundo { position:absolute; inset:0;
  background-image:
    linear-gradient(90deg, rgba(2,23,43,.92) 0%, rgba(2,23,43,.72) 38%, rgba(2,23,43,.15) 78%, rgba(2,23,43,0) 100%),
    linear-gradient(180deg, rgba(2,23,43,.81) 0%, rgba(2,23,43,.29) 14%, rgba(2,23,43,0) 28%, rgba(2,23,43,0) 60%, rgba(2,23,43,.68) 100%),
    url("assets/imagens/hero-cannabreed.webp");
  background-size:cover, cover, cover; background-position:center; }
.hero__interno { position:relative; max-width:var(--largura); margin:0 auto; width:100%;
                 padding:180px var(--respiro-lateral) 120px; }
.hero__texto { max-width:720px; }
.hero__lede { font-size:19px; line-height:1.6; color:rgba(255,255,255,.88); margin:26px 0 34px; max-width:620px; }
.hero__lede b { color:#fff; }
.hero__acoes { display:flex; flex-wrap:wrap; gap:14px; }

/* ── Seções ─────────────────────────────────────────────── */
.secao { padding:var(--respiro-secao) var(--respiro-lateral); }
.secao--clara { background:var(--branco); }
.secao--cinza { background:var(--slate-100); }
.secao--escura { background:var(--navy-900); color:#fff; }
.secao--escura h2, .secao--escura h3 { color:#fff; }
.secao--escura p { color:rgba(255,255,255,.80); }

.duas-colunas { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
                max-width:var(--largura); margin:0 auto; }
.cabeca { max-width:760px; }
.cabeca h2 { margin-bottom:8px; }

.divisor { padding:8px var(--respiro-lateral); }
.divisor__interno { max-width:var(--largura); margin:0 auto; display:flex; align-items:center; gap:18px; }
.divisor span { flex:1; height:1px; background:var(--slate-200); }
.divisor img { width:22px; height:auto; opacity:.65; }

/* ── Números ────────────────────────────────────────────── */
.numeros { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:38px; }
.numero__valor { font-family:var(--fonte-titulo); font-weight:900; font-size:36px;
                 letter-spacing:-.025em; color:var(--lime-600); line-height:1; }
.secao--escura .numero__valor { color:var(--lime-500); }
.numero__rotulo { font-size:13.5px; line-height:1.4; color:var(--slate-500); margin-top:6px; }
.secao--escura .numero__rotulo { color:rgba(255,255,255,.62); }

/* ── Foto com legenda ───────────────────────────────────── */
.foto { position:relative; border-radius:var(--raio); overflow:hidden; aspect-ratio:4/3;
        background:var(--slate-200) center/cover no-repeat; }
.foto__legenda { position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
                 background:linear-gradient(180deg, rgba(2,23,43,0) 0%, rgba(2,23,43,.78) 100%);
                 color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }

/* ── Trajetória ─────────────────────────────────────────── */
.trajetoria { display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
              list-style:none; padding:0; margin:44px 0 0; }
.trajetoria li { border-top:2px solid var(--lime-500); padding-top:16px; }
.trajetoria .ano { font-family:var(--fonte-titulo); font-weight:900; font-size:15px;
                   letter-spacing:.06em; color:var(--lime-600); }
.trajetoria h3 { font-size:18px; margin:6px 0 6px; }
.trajetoria p { font-size:14.5px; line-height:1.55; color:var(--slate-500); margin:0; }

/* ── Cartões (frentes de trabalho) ──────────────────────── */
.cartoes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.cartao { border:1px solid var(--slate-200); border-radius:var(--raio); padding:28px;
          display:flex; flex-direction:column; gap:10px; transition:border-color var(--transicao); }
.cartao:hover { border-color:var(--lime-500); }
.cartao .sobrancelha { margin-bottom:4px; }
.cartao p { font-size:15px; line-height:1.6; color:var(--slate-500); margin:0; flex:1; }
.cartao__numero { font-family:var(--fonte-titulo); font-weight:900; font-size:30px;
                  color:var(--lime-600); letter-spacing:-.02em; line-height:1; margin-top:14px; }
.cartao__numero small { display:block; font-family:var(--fonte-texto); font-weight:400;
                        font-size:13px; letter-spacing:0; color:var(--slate-500); margin-top:4px; }

/* ── Credenciais do fundador ────────────────────────────── */
.credenciais { list-style:none; padding:0; margin:26px 0 0; }
.credenciais li { display:grid; grid-template-columns:120px 1fr; gap:14px;
                  padding:12px 0; border-top:1px solid var(--slate-200); }
.credenciais dt, .credenciais .papel { font-family:var(--fonte-titulo); font-weight:700; font-size:14px; }
.credenciais .detalhe { font-size:14px; line-height:1.5; color:var(--slate-500); }

/* ── Imprensa ───────────────────────────────────────────── */
.imprensa-grade { display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:44px;
                  max-width:var(--largura); margin-left:auto; margin-right:auto; align-items:start; }
.lista-titulo { font-family:var(--fonte-titulo); font-weight:700; font-size:13px;
                letter-spacing:.10em; text-transform:uppercase; color:var(--slate-500); margin:0 0 18px; }
.video { display:grid; grid-template-columns:168px 1fr; gap:16px; align-items:center;
         text-decoration:none; color:inherit; padding:12px 0; border-top:1px solid var(--slate-200); }
.video:hover h3 { color:var(--lime-600); }
.video img { border-radius:8px; aspect-ratio:16/9; object-fit:cover; background:var(--slate-200); }
.video h3 { font-size:15.5px; line-height:1.35; margin:0 0 4px; transition:color var(--transicao); }
.video .canal { font-size:13px; color:var(--slate-500); }
.noticia { display:block; text-decoration:none; color:inherit; padding:16px 0; border-top:1px solid var(--slate-200); }
.noticia:hover h3 { color:var(--lime-600); }
.noticia .veiculo { font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.noticia h3 { font-size:16px; line-height:1.35; margin:6px 0 6px; transition:color var(--transicao); }
.noticia p { font-size:14px; line-height:1.55; color:var(--slate-500); margin:0; }
.mais-noticias { margin-top:22px; }
.escondida { display:none; }

/* ── Contato ────────────────────────────────────────────── */
.contato-bloco { max-width:760px; }
.contato-lede { font-size:19px; line-height:1.6; max-width:640px; }
.contato-acoes { display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 0; }
.contato-acoes .botao { font-size:16px; padding:16px 30px; }
.contato-nota { font-size:14px; color:rgba(255,255,255,.55); margin:18px 0 0; }
.contato-desvio { font-size:15px; margin:30px 0 0; padding-top:24px;
                  border-top:1px solid rgba(255,255,255,.12); }
.secao--escura .contato-desvio { color:rgba(255,255,255,.70); }
.contato-desvio a { color:var(--lime-500); }

/* ── Rodapé ─────────────────────────────────────────────── */
.rodape { background:var(--navy-900); color:#fff; padding:80px var(--respiro-lateral) 28px; }
.rodape__topo { display:grid; grid-template-columns:1fr 1fr; gap:64px;
                max-width:var(--largura); margin:0 auto 48px; }
.rodape__tagline { font-family:var(--fonte-titulo); font-weight:700; font-size:34px;
                   line-height:1.1; letter-spacing:-.02em; margin:22px 0 0; }
.rodape__tagline span { color:var(--lime-500); }
.rodape__listas { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.rodape h3 { font-size:12.5px; letter-spacing:.10em; text-transform:uppercase;
             color:var(--slate-300); font-weight:700; margin:0 0 14px; }
.rodape ul { list-style:none; margin:0; padding:0; }
.rodape li { margin-bottom:9px; }
.rodape a { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; }
.rodape a:hover { color:var(--lime-500); }
.rodape__canais a { display:inline-flex; align-items:center; gap:10px; }
.icone-canal { flex:none; color:var(--lime-500); }

/* e-mail na seção de contato: presente, mas sem peso de canal comercial */
.contato-email { font-size:14px; color:rgba(255,255,255,.55); margin:6px 0 0; }
.contato-email a { color:rgba(255,255,255,.75); text-decoration:underline;
                   text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3); }
.contato-email a:hover { color:var(--lime-500); }
.rodape__base { max-width:var(--largura); margin:0 auto; padding-top:24px;
                border-top:1px solid rgba(255,255,255,.10);
                display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
                font-size:13px; color:rgba(255,255,255,.55); }
.rodape__logo img { height:30px; width:auto; }

/* ── Aviso flutuante ────────────────────────────────────── */
.aviso { position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px);
         background:var(--navy-900); color:#fff; padding:14px 22px; border-radius:8px;
         font-weight:700; font-size:13px; box-shadow:0 12px 32px rgba(2,23,43,.25);
         border-left:3px solid var(--lime-500); opacity:0; pointer-events:none;
         transition:opacity var(--transicao), transform var(--transicao); z-index:999; }
.aviso[data-visivel="1"] { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Entrada suave ao rolar ───────────────────────────────
   REGRA DE OURO: o conteudo e visivel por padrao.
   A animacao so passa a existir depois que o home.js coloca a
   classe "anima" no <html>. Assim, se o JavaScript falhar, nao
   carregar ou for bloqueado, a pagina aparece inteira mesmo
   assim -- em vez de ficar em branco.                        */
.surge { opacity:1; transform:none; }
html.anima .surge { opacity:0; transform:translateY(18px);
                    transition:opacity 600ms var(--transicao), transform 600ms cubic-bezier(.16,1,.3,1); }
html.anima .surge[data-visivel="1"] { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html.anima .surge { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ════════ Tablet e celular ════════════════════════════════ */
@media (max-width:980px) {
  :root { --respiro-secao:72px; --respiro-lateral:20px; }
  .hamburguer { display:flex; }
  .nav__links, .nav__acoes { display:none; }
  .nav__interno { padding:12px 20px; }
  .nav__logo img { height:28px; }
  .hero { min-height:0; margin-top:-70px; }
  .hero__interno { padding:128px 20px 80px; }
  .duas-colunas, .imprensa-grade, .rodape__topo { grid-template-columns:1fr; gap:40px; }
  .cartoes, .trajetoria { grid-template-columns:1fr; gap:20px; }
  .formulario { padding:24px 20px; }
  .formulario input, .formulario textarea, .formulario select { font-size:16px; } /* evita o zoom do iOS */
  .video { grid-template-columns:140px 1fr; gap:12px; }
  .credenciais li { grid-template-columns:1fr; gap:2px; }
}
@media (min-width:641px) and (max-width:980px) {
  .cartoes, .trajetoria { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  :root { --respiro-secao:60px; --respiro-lateral:18px; }
  .hero__interno { padding:120px 18px 68px; }
  .numeros { grid-template-columns:repeat(3,1fr); gap:12px; }
  .numero__valor { font-size:28px; }
  .formulario .linha { grid-template-columns:1fr; }
  .video { grid-template-columns:116px 1fr; }
  .rodape__base { flex-direction:column; align-items:flex-start; }
  .rodape__listas { grid-template-columns:1fr; }
}

.contato-servico a { color:var(--lime-500); font-weight:700; }