/* ===========================
   Base & Tokens
=========================== */
:root{
  --g1:#059384; --g2:#13322b; --g3:#007367;

  --bg:#ffffff;
  --text:#0a0a0a;
  --muted:#5e5e5e;
  --border:#e8e8e8;

  --radius:16px;
  --shadow:0 8px 20px rgba(0,0,0,.06);

  --onvideo-text:#f7faf9;
  --onvideo-muted:#deefeb;
  --onvideo-chip-bg:rgba(236,247,245,.22);
  --onvideo-chip-bd:rgba(215,238,234,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Aileron',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
img{max-width:100%;display:block}
.container{width:min(1200px,92vw);margin:0 auto}

/* ===========================
   Vídeo de fundo fixo
=========================== */
.bg-video{ position:fixed; inset:0; z-index:-2; }
.bg-video__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.bg-video__dim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,18,16,.82) 0%, rgba(6,18,16,.68) 35%, rgba(6,18,16,.52) 60%, rgba(6,18,16,.72) 100%),
    radial-gradient(60% 40% at 50% 75%, rgba(0,0,0,.26), rgba(0,0,0,0) 60%);
}

/* ===========================
   Header / Navbar
=========================== */
.site-header{
  position:sticky; top:0; z-index:60;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
  border-bottom:1px solid transparent;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 0; }
.brand-logo{ height:36px; width:auto; }

.nav{ display:flex; align-items:center; gap:1rem }
.nav-link{
  text-decoration:none; font-weight:300;
  padding:.5rem .6rem; border-radius:10px;
  transition: color .2s ease, background-color .2s ease;
}
.nav-link:focus-visible,.nav-link:hover{outline:none}

.site-header.is-transparent{ background:transparent; border-bottom-color:transparent; }
.site-header.is-transparent .nav-link{ color:#ffffff; }
.site-header.is-transparent .nav-link:hover{ background:rgba(255,255,255,.18) }

.site-header.is-solid{
  background:#ffffff; border-bottom-color:var(--border);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.site-header.is-solid .nav-link{ color:#000000; }
.site-header.is-solid .nav-link:hover{ background:#f5f7f6 }

/* Mobile toggle */
.nav-toggle{ display:none; background:transparent; border:0; padding:.25rem; margin-right:-.25rem; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#000; margin:5px 0; transition:.2s; }

/* ===========================
   Buttons
=========================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; border-radius:14px; padding:.75rem 1rem; border:1px solid #0000; cursor:pointer; }
.btn-primary{ color:#fff; background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3)); box-shadow:var(--shadow); }
.btn-primary:hover{ filter:brightness(1.02) }
.btn-ghost{ border:1px solid var(--border); color:#000; background:#fff }
.btn-ghost:hover{ background:#f6f8f7 }
.btn-ghost--onvideo{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12); color:#fff; }
.btn-ghost--onvideo:hover{ background:rgba(255,255,255,.2) }

/* Chips */
.chips{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin:14px 0 0 }
.chip{ font-size:.85rem; color:#13322b; background:#ecf7f5; border:1px solid #d7eeea; padding:.35rem .6rem; border-radius:999px; }
.chip--onvideo{ color:#e8fffa; background:var(--onvideo-chip-bg); border-color:var(--onvideo-chip-bd); }

/* ===========================
   Hero
=========================== */
.hero{position:relative}
.hero--video{ min-height:92vh; display:grid; align-items:center; padding:0; isolation:isolate; }
.hero--video .hero-inner{ text-align:center; transform:translateY(-6vh); }
.on-video .eyebrow{ color:var(--onvideo-muted) }
.on-video .hero-title{ color:var(--onvideo-text) }
.on-video .hero-subtitle{ color:#f1f8f6 }
.grad-invert{ background:linear-gradient(135deg,#e9fffb,#d1fff7 60%,#b8fff2); -webkit-background-clip:text; background-clip:text; color:transparent; }

.eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; margin:0 0 .5rem }
.hero-title{ font-size:clamp(2.4rem,6vw,3.4rem); line-height:1.12; margin:.25rem 0 .75rem }
.hero-subtitle{ font-size:clamp(1.05rem,1.8vw,1.2rem); line-height:1.65; max-width:68ch; margin:0 auto 1.1rem }
.hero-ctas{ display:inline-flex; gap:.75rem; margin-top:.5rem }

.scroll-indicator{ display:flex; justify-content:center; padding:24px 0 12px; margin:0 auto }
.scroll-arrow{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));
  display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
  box-shadow:var(--shadow);transition:.3s;border:2px solid rgba(255,255,255,.7)
}
.scroll-arrow:hover{ transform:translateY(3px); box-shadow:0 4px 12px rgba(0,0,0,.15) }
.scroll-arrow svg{ transition:transform .3s ease }
.scroll-arrow:hover svg{ transform:translateY(2px) }

/* ===========================
   CARDS
=========================== */
.cards{ padding:56px 0; background:#fff; }
.cards-grid{ display:grid; gap:18px; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; }
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05); overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.07); }
.card-media{ aspect-ratio:16/9; overflow:hidden; background:#f5f7f6; }
.card-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.card-body{ padding:1rem 1rem .25rem; }
.card-title{ margin:.1rem 0 .35rem; font-size:1.3rem; }
.card-desc{ margin:0 0 .6rem; color:#262626; }
.card-bullets{ margin:0 0 .75rem; padding-left:1.1rem; }
.card-bullets li{ margin:.3rem 0; }
.card-footer{ padding:0 1rem 1rem; margin-top:auto; }

/* ===========================
   Impacto
=========================== */
.impact{ padding:72px 0; background:linear-gradient(180deg,#f8fbfa,#fff) }
.impact-kicker{ letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;color:var(--muted);margin:0 0 .6rem;text-align:center }
.impact-title{ text-align:center; font-size:clamp(1.9rem,4.6vw,2.5rem); line-height:1.25; margin:.5rem auto 1rem; max-width:30ch; }
.impact-title em{ font-style:normal; color:#0c6c60 }
.impact-note{ max-width:60ch;margin:.25rem auto 1.2rem;text-align:center;color:#1e1e1e }
.impact-ctas{ display:flex;justify-content:center }

/* ===========================
   FAQs (80% da viewport + tipografia grande)
=========================== */
.faqs{ min-height:90vh; display:flex; align-items:center; background:#fff; padding:56px 0; }
.faqs-inner{ width:100%; }
.section-head{ margin-bottom:24px; text-align:center }
.section-head h2{ margin:0 0 .25rem; font-size:clamp(2rem,4.8vw,2.6rem) } /* Título grande */
.section-head .muted{ color:var(--muted); margin:0; font-size:clamp(1rem,1.8vw,1.1rem) }

.accordion{ max-width:980px; margin:18px auto 0; display:grid; gap:12px }
.acc-item{ border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.03); overflow:hidden }
.acc-summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:.6rem;
  padding:1rem 1.15rem; font-weight:800; color:#142a25;
  font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.4; /* perguntas maiores */
}
.acc-summary::-webkit-details-marker{ display:none }
.acc-summary span{ flex:1 }
.acc-item[open] .acc-summary{ background:#f6fbfa }
.acc-panel{
  padding:0 1.15rem 1.15rem .95rem; color:#2b2b2b;
  font-size:clamp(1rem,1.6vw,1.1rem); line-height:1.7; /* respostas com boa leitura */
}

/* ===========================
   Redes sociais
=========================== */
.social{ padding:56px 0; background:#fff; }
.social-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.social-card{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--border); border-radius:14px; padding:.9rem 1rem; background:#fff;
  text-decoration:none; color:#0f0f0f;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.social-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.06); border-color:#dfe7e5; }
.social-ico{ width:28px; height:28px; display:grid; place-items:center; }
.social-ico svg{ width:100%; height:100%; fill:#0c6c60 }

/* ===========================
   Footer escuro
=========================== */
.footer--dark{ background:#0a0a0a; color:#f3f3f3; border-top:1px solid #0a0a0a; }
.footer-grid{
  display:grid; gap:18px; align-items:start; padding:28px 0;
  grid-template-columns: 1.2fr 1fr auto;
}
.footer .brand-logo--lg{ height:40px; width:auto; margin-bottom:8px }
.footer .muted{ color:#bcbcbc }

.footer-nav{ display:flex; flex-direction:column; gap:.4rem }
.footer-nav a{ color:#e9e9e9; text-decoration:none; font-weight:600; }
.footer-nav a:hover{ text-decoration:underline }

.footer-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end }
.lang-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem; border-radius:12px; border:1px solid #2a2a2a;
  background:#141414; color:#fff; cursor:pointer;
}
.lang-btn:hover{ background:#1a1a1a }

.flag{ width:20px; height:14px; display:inline-block; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; }
.flag-us{
  background:
    linear-gradient(#b22234 50%,#b22234 0) top/100% 14.28%,
    linear-gradient(#fff 50%,#fff 0) top/100% 14.28%,
    linear-gradient(#3c3b6e, #3c3b6e) left/40% 50% no-repeat;
  background-repeat:repeat-y;
}
.flag-br{
  background:
    linear-gradient(#009b3a,#009b3a),
    radial-gradient(circle at 50% 50%, transparent 20%, transparent 0);
  position:relative;
}
.flag-br::before{
  content:""; position:absolute; inset:2px 2px; background:
    linear-gradient(45deg, transparent 35%, #ffdf00 35% 65%, transparent 65%),
    linear-gradient(-45deg, transparent 35%, #ffdf00 35% 65%, transparent 65%);
  border-radius:2px;
}
.lang-label{ font-weight:700; font-size:.95rem }

.footer-bottom{ padding:14px 0 24px; border-top:1px solid #1a1a1a; color:#bdbdbd; text-align:center; }

/* ===========================
   Responsivo
=========================== */
@media (max-width: 1100px){
  .cards-grid{ grid-template-columns:1fr; }
  .social-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-actions{ justify-content:flex-start }
}
@media (max-width: 760px){
  .hero--video{ min-height:86vh }
  .hero--video .hero-inner{ transform:translateY(-4vh) }
  .hero-ctas{ flex-direction:column; width:100% }
  .hero-ctas .btn{ width:100% }

  .nav{
    position:fixed; inset:64px 0 auto 0; background:#fff; border-bottom:1px solid var(--border);
    transform:translateY(-120%); transition:.2s; padding:12px 4vw; gap:.5rem; flex-direction:column; align-items:flex-start;
    z-index:70;
  }
  .nav.open{ transform:translateY(0) }
  .scroll-indicator{ padding:24px 0 8px }
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}
/* ==== Sessão Lead (fundo preto + card verde) ==== */
.lead-section{
  background:#0a0a0a;
  color:#f3f3f3;
  padding:72px 0;
}
.lead-grid{
  display:grid;
  gap:24px;
  grid-template-columns: 1.1fr 0.9fr; /* texto | card */
  align-items:stretch;
}
.lead-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 0;
}
.lead-eyebrow{
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b7c9c5;
  margin:0 0 .5rem;
  font-size:.9rem;
}
.lead-title{
  margin:.2rem 0 .6rem;
  font-size:clamp(2rem,5vw,2.6rem);
  line-height:1.15;
}
.lead-sub{
  margin:0 0 .8rem;
  color:#dfe9e7;
  font-size:clamp(1rem,1.6vw,1.125rem);
  line-height:1.65;
}
.lead-points{
  margin:.2rem 0 0;
  padding-left:1.1rem;
  color:#d0dedb;
}

/* Card verde (usa os tokens --g1, --g2, --g3 já existentes) */
.lead-card{
  background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));
  color:#ffffff;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.lead-card-title{
  margin:.1rem 0 1rem;
  font-size:1.25rem;
  font-weight:800;
}

/* Formulário dentro do card */
.lead-form{ display:grid; gap:12px; }
.lead-form .field{ display:flex; flex-direction:column; gap:6px; }
.lead-form label{ font-weight:700; }
.lead-form input{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.95);
  color:#0a0a0a;
  border-radius:12px;
  padding:.85rem .9rem;
  font-size:1rem;
  outline:none;
}
.lead-form input:focus{
  border-color:#ffffff;
  box-shadow:0 0 0 3px rgba(255,255,255,.2);
}

/* Botão inverso para contraste no card verde */
.btn-invert{
  color:#0a0a0a;
  background:#ffffff;
  border:1px solid #ffffff;
  border-radius:14px;
  padding:.8rem 1rem;
  font-weight:800;
  cursor:pointer;
}
.btn-invert:hover{ filter:brightness(0.98); }

/* Responsivo */
@media (max-width: 980px){
  .lead-grid{ grid-template-columns:1fr; }
}
/* ==== Formas de atuação — cards grandes com imagem de fundo ==== */
.modes-hero{
  padding:64px 0;
  background:#fff;
}
.modes-head{
  text-align:center;
  margin:0 0 18px;
}
.modes-head h2{
  margin:0 0 .3rem;
  font-size:clamp(2rem,5vw,2.8rem);
}
.modes-head .muted{
  color:var(--muted);
  font-size:clamp(1rem,1.6vw,1.1rem);
}

/* Grid com cards maiores (duas colunas para dar destaque) */
.modes-hero-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:stretch;
}

/* Card base */
.mode-hero-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  min-height:420px;             /* maior altura */
  isolation:isolate;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  transition:transform .35s ease, box-shadow .35s ease;
}
.mode-hero-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 36px rgba(0,0,0,.14);
}
.mode-hero-link{ display:block; position:relative; inset:0; width:100%; height:100%; text-decoration:none; color:inherit; }

/* Imagem de fundo (via CSS var) */
.mode-hero-media{
  position:absolute; inset:0;
  background-image:var(--bg);
  background-size:cover; background-position:center;
  transform:scale(1.03);
  transition:transform .6s ease;
  z-index:-2;
}
.mode-hero-card:hover .mode-hero-media{ transform:scale(1.08); }

/* Camada de escurecimento para legibilidade */
.mode-hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.66) 100%),
    radial-gradient(60% 40% at 50% 70%, rgba(0,0,0,.18), rgba(0,0,0,0) 60%);
}

/* Conteúdo sobreposto */
.mode-hero-content{
  position:absolute; inset:auto 0 0 0;
  padding:20px 18px 18px;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
.mode-hero-content h3{
  margin:.35rem 0 .35rem;
  font-size:clamp(1.4rem,2.6vw,1.8rem);
  line-height:1.15;
  font-weight:900;
}
.mode-hero-content p{
  margin:0;
  font-size:clamp(1rem,1.6vw,1.1rem);
  line-height:1.6;
}

/* Chip com degradê da paleta */
.mode-hero-chip{
  display:inline-block;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.02em;
  padding:.38rem .65rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--g1),var(--g2) 60%,var(--g3));
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Responsivo: 1 coluna em telas menores */
@media (max-width: 980px){
  .modes-hero-grid{ grid-template-columns:1fr; }
  .mode-hero-card{ min-height:360px; }
}

/* --- Mobile: centralizar logo na navbar --- */
@media (max-width: 760px){
  .header-inner{
    display: grid;
    grid-template-columns: 44px 1fr 44px; /* [hamburger] [logo] [espaço] */
    align-items: center;
    padding: .7rem 0;
  }
  .brand{
    grid-column: 2;           /* coloca o logo no centro */
    justify-self: center;
  }
  .nav-toggle{
    display: inline-block;    /* garante o hamburger visível */
    grid-column: 1;
    justify-self: start;
    z-index: 80;              /* acima do vídeo/menu */
  }

  /* cores do hamburger conforme o estado do header */
  .site-header.is-transparent .nav-toggle span{ background:#fff; }
  .site-header.is-solid .nav-toggle span{ background:#000; }

  /* ajuste opcional do tamanho do logo no mobile */
  .brand-logo{ height:32px; }
}
/* --- Mobile: corrigir contraste do menu aberto --- */
@media (max-width: 760px){
  /* mantém o overlay branco do menu, mas com texto escuro */
  .site-header .nav.open{
    background:#fff;
    border-bottom:1px solid var(--border);
  }
  .site-header .nav.open .nav-link{
    color:#0a0a0a;            /* texto escuro */
    background:transparent;
  }
  .site-header .nav.open .nav-link:hover{
    background:#f5f7f6;       /* hover visível no branco */
  }

  /* quando o header estiver transparente, só deixa links brancos se o menu NÃO estiver aberto */
  .site-header.is-transparent .nav:not(.open) .nav-link{
    color:#ffffff;
  }
  .site-header.is-transparent .nav:not(.open) .nav-link:hover{
    background:rgba(255,255,255,.18);
  }

  /* hambúrguer fica escuro quando o menu abre (sem mudar JS) */
  #navToggle[aria-expanded="true"] span{
    background:#000;
  }
}
/* --- Mobile: hero mostra só eyebrow, título e botões --- */
@media (max-width: 760px){
  /* esconde elementos extras */
  .hero-subtitle,
  .chips,
  .scroll-indicator {
    display: none !important;
  }

  /* ajusta layout/espaçamento para dar foco ao texto e CTAs */
  .hero--video{
    min-height: 90vh;
  }
  .hero--video .hero-inner{
    transform: translateY(-3vh);
    padding-top: 8vh;
    padding-bottom: 6vh;
    text-align: center;
  }

  /* tipografia mais direta no mobile */
  .on-video .eyebrow{
    font-size: .95rem;
    letter-spacing: .08em;
  }
  .hero-title{
    font-size: clamp(1.9rem, 6.4vw, 2.4rem);
    line-height: 1.18;
    margin: .35rem auto .9rem;
    max-width: 20ch; /* mantém o título em 2–3 linhas */
  }

  /* botões em coluna, largura total */
  .hero-ctas{
    display: grid;
    grid-auto-flow: row;
    gap: .6rem;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  .hero-ctas .btn{
    width: 100%;
  }
}
/* --- MOBILE: header sempre transparente + logo alinhado ao hambúrguer --- */
@media (max-width: 760px){
  /* Header fica transparente mesmo se o JS trocar para .is-solid */
  .site-header,
  .site-header.is-solid{
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
  }

  /* Links brancos quando o menu NÃO está aberto (sobre o vídeo) */
  .site-header .nav:not(.open) .nav-link{
    color: #ffffff !important;
    background: transparent;
  }
  .site-header .nav:not(.open) .nav-link:hover{
    background: rgba(255,255,255,.18);
  }

  /* Menu aberto continua branco com texto escuro (boa leitura) */
  .site-header .nav.open{
    background:#fff;
    border-bottom:1px solid var(--border);
  }
  .site-header .nav.open .nav-link{
    color:#0a0a0a;
  }

  /* Layout: hambúrguer à esquerda, logo perfeitamente CENTRALIZADO e mesma altura */
  .header-inner{
    display:grid;
    grid-template-columns: 44px 1fr 44px; /* [hambúrguer] [logo] [espaço] */
    align-items:center;
    min-height:56px;
    padding:.7rem 0;
  }
  .nav-toggle{
    display:inline-grid;
    place-items:center;
    width:44px; height:44px;
    grid-column:1; justify-self:start;
    z-index:80;
  }
  .nav-toggle span{
    width:22px; height:2px; margin:4px 0;
    background:#fff; /* branco sobre o vídeo */
    transition:.2s;
  }
  /* Quando o menu abre (fundo branco), barras ficam escuras */
  #navToggle[aria-expanded="true"] span{ background:#000; }

  .brand{
    grid-column:2;
    display:flex; align-items:center; justify-content:center;
    height:44px; /* mesma “altura visual” do botão */
  }
  .brand-logo{ height:24px; width:auto; } /* ajuste fino: pode subir p/ 28px se quiser */
}
/* --- MOBILE: aumentar e descer o logotipo --- */
@media (max-width: 760px){
  /* valores fáceis de ajustar */
  :root{
    --logo-mobile-size: 34px;   /* ↑ aumente p/ 36px se quiser maior */
    --logo-mobile-nudge: 4px;   /* ↑ empurra pra baixo (2–8px) */
  }

  /* mantém a grade do header confortável pro novo tamanho */
  .header-inner{
    min-height: 60px;           /* era ~56px */
    grid-template-columns: 44px 1fr 44px; /* [hamb] [logo] [vazio] */
    align-items: center;
  }

  /* centralizado na coluna 2, mas levemente mais baixo */
  .brand{
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;               /* área clicável maior */
    transform: translateY(var(--logo-mobile-nudge));
  }

  /* tamanho do logo */
  .brand-logo{
    height: var(--logo-mobile-size);
    width: auto;
  }

  /* mantém o hambúrguer alinhado verticalmente */
  .nav-toggle{
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
  }
}
/* === Hero: botões minimalistas (sem fundo) com seta em círculo branco === */
.hero-ctas .btn-hero{
  /* herda .btn, mas remove fundo/borda */
  background: transparent !important;
  border: 0 !important;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: 1.4rem 3.16rem;            /* hit area enxuta no desktop */
  font-weight: 300;
  font-size: 22px;
  text-decoration: none;
}

.hero-ctas .btn-hero .btn-hero-ico{
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.9); /* círculo sem preenchimento */
  display: grid;
  place-items: center;
  transition: border-color .25s ease, transform .25s ease;
}
.hero-ctas .btn-hero .btn-hero-ico svg{
  display:block;
  stroke: #ffffff;
  transform: translateX(0);
  transition: transform .25s ease;
}

.hero-ctas .btn-hero:hover .btn-hero-ico,
.hero-ctas .btn-hero:focus-visible .btn-hero-ico{
  border-color: #ffffff;
}
.hero-ctas .btn-hero:hover .btn-hero-ico svg,
.hero-ctas .btn-hero:focus-visible .btn-hero-ico svg{
  transform: translateX(2px);      /* micro-movimento da seta */
}

.hero-ctas .btn-hero:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Em fundos claros (se algum dia reutilizar fora da hero em branco), crie uma variação escura:
.btn-hero--dark { color:#0a0a0a; }
.btn-hero--dark .btn-hero-ico { border-color: rgba(10,10,10,.85); }
.btn-hero--dark .btn-hero-ico svg { stroke:#0a0a0a; }
*/

/* --- Mobile: largura total, sem fundo, mantendo o círculo/ seta --- */
@media (max-width: 760px){
  .hero-ctas .btn-hero{
    width: 100%;
    justify-content: space-between; /* texto à esquerda, círculo à direita */
    padding: .9rem .2rem;           /* área clicável maior no touch */
  }
  .hero-ctas{
    gap: .7rem; /* dá um respiro entre os dois botões */
  }
}