@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&display=swap');

:root{
  --brand:#ff6a00;
  --brand-2:#ff8c00;
  --ink:#111;
  --muted:#555;
  --line:#eee;
  --blue:#0b2151;
  /* HEADER: topo mais alto */
  --header-h:104px;
  --item-h:48px;
  --logo-h:64px;
  --logo-h-sm:52px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{ font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:#fff; }
a{ text-decoration:none; color:inherit }

.container{ max-width:1280px; padding:0 24px; margin:0 auto; }

/* ===== HEADER ===== */
.header{ position:sticky; top:0; z-index:1000; background:#fff; border-top:10px solid var(--brand); }
.header-row{ min-height:var(--header-h); display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:40px; }
.logo{ display:flex; align-items:center; gap:12px }
.logo img{ height:var(--logo-h); max-height:calc(var(--header-h) - 28px); display:block; object-fit:contain; }
.nav{ display:flex; align-items:center; justify-content:center; gap:36px; }
.nav a{ display:inline-flex; align-items:center; justify-content:center; padding:10px 0; text-transform:uppercase; letter-spacing:.035em; font-weight:700; color:#555; font-size:.95rem; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--brand) }
.actions{ display:flex; align-items:center; gap:14px }

.btn{ display:inline-flex; align-items:center; justify-content:center; height:var(--item-h); padding:0 18px; border-radius:14px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; line-height:1; border:1px solid transparent; }
.btn-ghost{ border:2px solid var(--brand); color:var(--brand); background:#fff }
.btn-primary{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff !important; box-shadow:0 8px 22px rgba(255,106,0,.25); }

@media (max-width:1024px){
  :root{ --header-h:88px; --item-h:44px; --logo-h:58px; --logo-h-sm:50px }
  .nav{ gap:22px }
}
@media (max-width:720px){
  :root{ --header-h:72px; --item-h:40px; --logo-h:52px; --logo-h-sm:44px }
  .nav{ gap:12px }
}

/* ===== HERO / Slider (AGORA MAIS ALTO) ===== */
.hero{
  position:relative;
  overflow:hidden;
  margin:8px 0;
  min-height:0;                  /* não força altura */
  --hero-h: clamp(360px, 48vh, 620px);  /* <<< MAIS ALTO */
}
.hero > .container{ position:relative; max-width:100%; padding-left:0; padding-right:0; }
.slide{ display:none }
.slide.active{ display:block }
/* opção visual: cantos retos no banner, como no site de ref */
.slide picture, .slide img{ width:100%; display:block; border-radius:0; }
.slide img{
  object-fit:cover;
  object-position:center;
  width:100%;
  height:var(--hero-h);
  aspect-ratio:auto;             /* invalida 16:9 fixo */
}
@media (max-width:540px){
  .hero{ --hero-h: clamp(260px, 42vh, 420px); } /* mobile um pouco mais alto também */
}

.hero .controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 28px; pointer-events:none; }
.hero button{ border:none; background:rgba(0,0,0,.45); color:#fff; border-radius:999px; width:40px; height:40px; cursor:pointer; pointer-events:auto; }

.section{ padding:26px 0 }
.section h2{ font-size:26px; margin:0 0 8px; color:#ff5a00 }
.section-sub{ color:#6b7280; margin:6px 0 16px }

/* ==== CONTRATOS (NOVO) ==== */
.section-contracts .contracts-subtitle{
  margin-top:.25rem;
  color:#6b7280;
  font-size:1rem;
}
.section-contracts .doc-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:24px;
  align-items:center;
  justify-items:center;
  margin-top:24px;
}
.section-contracts .doc-btn{
  --btn-bg: var(--brand-2);
  --btn-bg-hover:#e57200;
  --btn-shadow: 0 6px 14px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  width:100%;
  max-width:340px;
  min-height:56px;
  padding:14px 22px;

  background:var(--btn-bg);
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:10px;
  box-shadow:var(--btn-shadow);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.section-contracts .doc-btn span{
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.section-contracts .doc-btn .icon-download{
  width:18px;
  height:18px;
  flex:0 0 18px;
  fill:currentColor;
  margin-left:4px; /* ícone encostado à direita do texto */
}
.section-contracts .doc-btn:hover{
  background:var(--btn-bg-hover);
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.08);
}
.section-contracts .doc-btn:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.06);
}
.section-contracts .doc-btn:focus-visible{
  outline:3px solid #1d4ed8; /* acessibilidade */
  outline-offset:2px;
}
@media (max-width: 992px){
  .section-contracts .doc-grid{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .section-contracts .doc-grid{ grid-template-columns:1fr; }
  .section-contracts .doc-btn{ max-width:100%; }
}
/* ==== CONTRATOS (FIM) ==== */

.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.col-4{ grid-column:span 12 }
@media (min-width:900px){ .col-4{ grid-column:span 4 } }

.card{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 22px rgba(17,24,39,.06); overflow:hidden; position:relative }
.card::after{ content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--brand),#ffa726) }
.card-body{ padding:22px 22px 8px }
.label{ font-size:12px; color:#9ca3af; font-weight:700; letter-spacing:.04em; text-transform:uppercase }
.speed{ display:flex; align-items:baseline; gap:6px; margin:6px 0 16px }
.speed .num{ font-size:44px; font-weight:900; line-height:1 }
.speed .unit{ font-size:18px; font-weight:800; color:#9ca3af }
.features{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px }
.features li{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#374151 }
.pricebox{ display:flex; align-items:end; justify-content:space-between; border-top:1px dashed #eee; margin:16px 0 0; padding:14px 22px; color:#111 }
.reais{ font-size:14px } .price{ font-size:26px; font-weight:900 }
.per{ font-size:12px; color:#6b7280; margin-left:4px }
.card-actions{ display:flex; gap:10px; padding:0 22px 22px }

.quick{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px }
.quick .q{ grid-column:span 12; background:#fff; border:1px dashed #f1c79d; border-radius:14px; padding:16px }
.quick .title{ font-weight:800 }
@media (min-width:900px){ .quick .q{ grid-column:span 3 } }

.strip{ background:var(--blue); color:#fff; margin:26px 0 }
.strip .inner{ display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:center; padding:26px 0 }
.strip img{ display:none }
.cta-white{ background:#fff; color:#111; border-radius:12px; font-weight:900; padding:12px 14px; display:inline-block }

.faq details{ border-bottom:1px solid #eee; padding:12px 0 }
.faq summary{ cursor:pointer; font-weight:800 }
.faq p{ color:#374151 }

.footer{ background:#f7e0cd; border-top:1px solid #ffd7b6; margin-top:48px }
.footer .container{ padding:32px 16px }
.footer-grid{ display:grid; grid-template-columns:1fr min(520px, 45%); gap:28px; align-items:start; }
.footer .col-left h4{ margin:0 0 8px }
.footer .hours{ list-style:none; padding:0; margin:6px 0 18px }
.footer .hours li{ margin:4px 0 }

.map-wrapper{ position:relative; width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.08); background:#eee; }
.map-wrapper iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr; gap:20px } .map-wrapper{ aspect-ratio:16/9 } }

.copy{ text-align:center; font-size:clamp(14px,1.6vw,18px); padding:14px 12px 24px; opacity:.85 }

/* Contato */
.contact-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:28px; align-items:start; }
.contact-grid input, .contact-grid textarea, .contact-grid button{ width:100%; box-sizing:border-box }
.contact-grid textarea{ min-height:220px; resize:vertical }
.contact-grid .card{ height:100% }
@media (max-width:960px){ .contact-grid{ grid-template-columns:1fr } }

/* Banner games */
.banner-games{ position:relative; background:#0f0f0f; color:#fff; overflow:hidden; }
.banner-games::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:min(58%, 760px);
  background:
    linear-gradient(90deg, rgba(15,15,15,1) 0%, rgba(15,15,15,0) 32%),
    url('../img/banner-games-1920x900.jpg') right center / cover no-repeat;
  pointer-events:none;
}
.banner-games__inner{ position:relative; z-index:1; padding:56px 0 }
.banner-games__content{ max-width:640px }
.banner-games h2{ font-size:clamp(1.6rem, 2.2vw + 1rem, 2.6rem); line-height:1.15; margin:0 0 16px }
.banner-games p{ font-size:1.05rem; line-height:1.55; margin:0 0 24px; color:#e6e6e6 }
.banner-games-mobile{ display:none }
.banner-games-mobile img{ width:100%; height:auto; display:block }

@media (max-width:1024px){ .banner-games::after{ width:55% } .banner-games__inner{ padding:48px 0 } }
@media (max-width:768px){
  .banner-games-mobile{ display:block }
  .banner-games::after{ display:none }
  .banner-games__inner{ padding:20px 0 28px }
  .banner-games__content{ max-width:100% }
}

/* Mobile header menu */
@media (max-width: 768px){
  .header-row{ height:auto !important; min-height:56px; align-items:center; }
  .nav{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; gap:12px; }
  .nav a{ line-height:1.2; padding:10px 8px; display:inline-flex; align-items:center; }
  .actions{ grid-column:1 / -1; justify-content:flex-start; }
}

/* iOS safe area */
@supports(padding:max(0px)){
  .header, header, .site-header{ padding-top:max(0px, env(safe-area-inset-top)); overflow:visible; }
}

/* Legenda estática no slide (corrigido) */
.slide .caption{
  position:static;
  color:#0b2151;
  text-shadow:none;
  padding:10px 6px 0;
}
.slide .caption .btn{ align-self:flex-start; }

/* FIX: Faixa azul (strip) responsiva */
@media (max-width: 768px){
  .strip .inner{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0 22px;
  }
  .strip h2{
    font-size: clamp(22px, 6vw, 32px);
    line-height: 1.2;
    margin: 0 0 8px;
  }
  .strip p{
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.5;
  }
}

/* Stronger mobile fix for blue strip */
@media (max-width: 768px){
  .strip .inner{
    display:block !important;          /* stop using grid on mobile */
    padding: 18px 0 22px;
  }
  .strip .inner > *{
    overflow-wrap: anywhere;           /* prevent weird long-line breaks */
    word-break: normal;
  }
}
/* ===== HOTFIX: normalizar ícone nos botões de Contratos ===== */
.section-contracts .doc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  white-space:nowrap;            /* impede quebrar o texto do botão */
}

/* qualquer ícone dentro do botão vira 18x18 e não estica */
.section-contracts .doc-btn svg,
.section-contracts .doc-btn img,
.section-contracts .doc-btn i,
.section-contracts .doc-btn .icon,
.section-contracts .doc-btn .emoji{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-block;
  line-height:1;
  vertical-align:middle;
}

/* se o ícone for texto/emoji, fixa o tamanho pela fonte também */
.section-contracts .doc-btn i,
.section-contracts .doc-btn .icon,
.section-contracts .doc-btn .emoji{
  font-size:18px;   /* evita emoji gigante */
}

/* se o ícone estiver caindo para a linha de baixo, força inline */
.section-contracts .doc-btn > *{
  display:inline-flex;
  align-items:center;
}