/* ====== Tokens ======================================================= */
:root{
  --primary:#ff9900;
  --primary-strong:#f71010;
  --grad-start:#ff9900;
  --grad-end:#f71010;
  --bg-light:#ffffff;
  --text-dark:#222;
  --text-light:#666;
  --card-bg:#f9f9f9;
  --border:#eee;
  --shadow:0 4px 10px rgba(0,0,0,0.05);
}

/* ====== Base ========================================================= */
*{ box-sizing:border-box; scroll-behavior:smooth; }
html,body{ margin:0; }
body{ font-family:'Roboto',sans-serif; background:var(--bg-light); color:var(--text-dark); }

/* ===== Skip link (acessibilidade) – NOVO ============================ */
.skip-link,
.sr-only{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0);
  border:0; white-space:nowrap;
}
.skip-link:focus,
.sr-only:focus{
  position:fixed!important; left:16px; top:12px; z-index:1000;
  width:auto; height:auto; margin:0; padding:.6rem .9rem;
  clip:auto; overflow:visible; white-space:normal;
  background:#fff; color:#222; border:2px solid var(--primary);
  border-radius:10px; box-shadow:var(--shadow);
}

/* ===== Header / Nav ================================================== */
header{
  background:#fff; padding:1rem 2rem; position:sticky; top:0; z-index:999;
  display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border);
}
.logo{ font-weight:bold; font-size:1.4rem; color:var(--primary); }
.logo img{ height:40px; width:auto; display:block; }
nav{ display:flex; gap:1.5rem; align-items:center; }
nav a{ color:var(--text-dark); text-decoration:none; font-weight:500; position:relative; padding:.25rem 0; }
nav a:after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end)); transition:width .25s ease;
}
nav a:hover{ color:var(--primary); }
nav a:hover:after{ width:100%; }
.menu-toggle{ display:none; width:36px; height:28px; position:relative; cursor:pointer; }
.menu-toggle span{
  position:absolute; left:0; right:0; height:3px; background:var(--text-dark);
  border-radius:2px; transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.menu-toggle span:nth-child(1){ top:2px; }
.menu-toggle span:nth-child(2){ top:12px; }
.menu-toggle span:nth-child(3){ top:22px; }
.menu-toggle.active span:nth-child(1){ top:12px; transform:rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ top:12px; transform:rotate(-45deg); }

/* ===== HERO (sem vídeo) ============================================= */
.hero{
  position:relative; display:grid; place-items:center; text-align:center;
  padding:clamp(48px,8vh,120px) 16px; min-height:70svh; overflow:hidden;
  background-size:cover; background-position:center;
}
.hero h1{
  font-size:clamp(28px,6.2vw,56px); line-height:1.1; margin:0 0 12px; color:var(--text-dark);
}
.hero p{
  font-size:clamp(14px,3.8vw,18px); color:var(--text-light); max-width:760px; margin:0 auto 18px;
}
.hero h1,.hero p{ text-shadow:0 2px 10px rgba(0,0,0,.15); }

/* ===== Buttons ======================================================= */
.btn-main{
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end)); color:#fff;
  padding:14px 30px; border:none; border-radius:24px; font-weight:bold; text-decoration:none;
  display:inline-block; margin-top:1.5rem; transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:0 6px 20px rgba(247,16,16,0.2); font-size:clamp(14px,3.6vw,16px);
}
.btn-main:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(247,16,16,0.28); }
.btn-outline{
  background:#fff; color:var(--primary); border:2px solid var(--primary); padding:12px 26px;
  border-radius:22px; font-weight:700; text-decoration:none; transition:background .2s, color .2s, border-color .2s;
}
.btn-outline:hover{ background:linear-gradient(90deg,var(--grad-start),var(--grad-end)); color:#fff; border-color:transparent; }

/* ===== Sections ====================================================== */
section{ padding:60px 20px; max-width:1180px; margin:auto; }
h2{ font-size:2rem; margin-bottom:1rem; text-align:center; color:var(--primary); }

/* ===== Cards ========================================================= */
.card-section{
  display:grid; gap:20px; margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

/* Card base */
.card{
  background:var(--card-bg); border-radius:16px; padding:24px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.card h3{ color:var(--text-dark); margin-bottom:.5rem; }
.card p{ color:var(--text-light); font-size:.95rem; }

/* ===== Cards clicáveis – sem sublinhado (páginas filhas) – NOVO ===== */
a.card{ /* quando o card inteiro é um link */
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
a.card h3, a.card p{ text-decoration:none; color:inherit; }
a.card:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(247,16,16,0.22); }

/* suporte à versão com data-href (div/card que navega via JS) */
.card[data-href]{ position:relative; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; text-decoration:none; }
.card[data-href] h3, .card[data-href] p{ text-decoration:none; color:inherit; }
.card[data-href]:hover{ transform:translateY(-4px); box-shadow:0 10px 28px rgba(247,16,16,0.22); }

/* efeito de “barra animada” na base do card ao hover */
.card[data-href]::after,
a.card::after{
  content:""; position:absolute; left:16px; right:16px; bottom:8px; height:3px;
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end));
  background-size:200% 100%; border-radius:999px; opacity:0; transform:scaleX(0); transform-origin:left;
  transition:opacity .25s ease, transform .25s ease;
}
@keyframes stripe-pan{ 0%{background-position:0% 50%} 100%{background-position:100% 50%} }
.card[data-href]:hover::after,
.card[data-href]:focus-visible::after,
a.card:hover::after,
a.card:focus-visible::after{
  opacity:1; transform:scaleX(1); animation:stripe-pan 1.2s linear infinite;
}
.card[data-href]:focus-visible,
a.card:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(255,153,0,0.35), 0 10px 28px rgba(247,16,16,0.22);
}

/* ===== Footer ======================================================== */
footer{ text-align:center; padding:2rem; background:#f6f6f6; color:var(--text-light); font-size:.9rem; margin-top:60px; }
footer .footer-wrap{ max-width:1180px; margin:auto; text-align:left; }
footer h3{ margin-top:0; color:var(--text-dark); }
.link-list{ list-style:none; padding:0; margin:.5rem 0 0; }
.link-list li{ margin:.35rem 0; }
.link-list a{
  color:var(--text-dark); text-decoration:none; position:relative; font-weight:500;
}
.link-list a:after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end)); transition:width .25s ease;
}
.link-list a:hover{ color:var(--primary); }
.link-list a:hover:after{ width:100%; }
.social{ display:flex; gap:.75rem; margin-top:.75rem; }
.social a{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-radius:999px; border:1px solid var(--border); text-decoration:none; }
.social a:hover{ border-color:transparent; background:linear-gradient(90deg,var(--grad-start),var(--grad-end)); color:#fff; }
.lang{ display:flex; gap:.35rem; align-items:center; justify-content:center; }
.lang span{ padding:.25rem .55rem; border:1px solid var(--border); border-radius:999px; font-size:.85rem; }

/* ===== Media (Nav mobile) ========================================== */
@media (max-width:768px){
  nav{
    position:fixed; top:64px; right:14px; background:#fff; flex-direction:column;
    width:min(86vw,320px); display:none; box-shadow:var(--shadow); padding:1rem; border-radius:12px;
  }
  nav.active{ display:flex; }
  .menu-toggle{ display:block; }

  .hero{ margin-inline:0; border-radius:0; }
}

/* ===== Fixes extras ================================================= */
nav a.btn-outline::after{ content:none!important; width:0!important; } /* não sublinhar CTA do menu */
.social a::after{ content:none!important; width:0!important; }
.btn-outline:hover{ background-clip:padding-box; }

/* Branding degradê */
.brand-gradient{
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; text-decoration:none;
}
.brand-gradient:hover{ opacity:.9; }

/* ==== Scroll Reveal ================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* variantes rápidas / lentas (opcional) */
  .reveal-fast    { transition-duration: .45s; }
  .reveal-slow    { transition-duration: .9s;  }

  /* direção lateral (opcional) */
  .reveal-left  { transform: translateX(-24px); }
  .reveal-right { transform: translateX(24px);  }
  .reveal-left.is-visible,
  .reveal-right.is-visible { transform: translateX(0); }
}

/* Stagger nos grids: cada filho atrasa um pouco */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

/* Ajuda: remove transição para quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}