/* ============================================================
   japronto — estilos
   Paleta e marca herdadas da Dexer. Mobile-first.
   ============================================================ */

:root{
  /* paleta */
  --tinta:#10141C;
  --escuro:#0B111E;
  --azul:#20618C;
  --azul-claro:#4FA8D8;
  --claro:#F2F5FA;
  --branco:#FFFFFF;
  --cinza:#5A6478;
  --cinza-claro:#AEB6C6;
  --borda:#E2E7F0;

  /* tipografia */
  --display:'Nunito', system-ui, sans-serif;
  --corpo:'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* ritmo */
  --pad-x:clamp(20px, 5vw, 72px);
  --secao-y:clamp(56px, 9vh, 104px);
  --max:1120px;
}

*{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  background:var(--branco);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.container{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad-x) }

/* ---------- marca ---------- */
.jp-logo{
  display:inline-flex; align-items:baseline;
  font-family:var(--display);
  font-weight:900; font-style:normal;
  letter-spacing:-.03em; line-height:1;
  color:var(--tinta); white-space:nowrap;
  text-decoration:none;
}
.jp-logo *{ font-style:normal }
.jp-logo .jp-dot{
  width:.155em; height:.155em; border-radius:50%;
  background:var(--azul); margin-left:.11em;
}
.jp-logo.jp-inv{ color:var(--claro) }
.jp-logo.jp-inv .jp-dot{ background:var(--azul-claro) }

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--corpo); font-weight:600; font-size:.98rem;
  padding:.82em 1.5em; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:3px }

.btn-primario{ background:var(--azul); color:var(--branco) }
.btn-primario:hover{ background:#1a5178 }
.btn-fantasma{ background:transparent; color:var(--tinta); border-color:var(--borda) }
.btn-fantasma:hover{ border-color:var(--azul); color:var(--azul) }
.btn-lg{ font-size:1.05rem; padding:.95em 1.85em }

.inv .btn-primario{ background:var(--azul-claro); color:var(--escuro) }
.inv .btn-primario:hover{ background:#6bb8e0 }
.inv .btn-fantasma{ color:var(--claro); border-color:rgba(242,245,250,.28) }
.inv .btn-fantasma:hover{ border-color:var(--azul-claro); color:var(--azul-claro) }

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--borda);
}
.topo-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px }
.topo .jp-logo{ font-size:26px }
.nav{ display:flex; align-items:center; gap:22px }
.nav a:not(.btn){
  color:var(--cinza); text-decoration:none; font-size:.95rem; font-weight:500;
  transition:color .18s ease;
}
.nav a:not(.btn):hover{ color:var(--tinta) }
@media (max-width:780px){ .nav .so-desktop{ display:none } }

/* ---------- hero ---------- */
.hero{
  background:var(--escuro); color:var(--claro);
  padding-block:clamp(56px, 11vh, 120px) clamp(48px, 9vh, 96px);
  position:relative; overflow:hidden;   /* trava: nada do carrossel empurra a página para o lado */
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(42% 48% at 86% 18%, rgba(79,168,216,.16), transparent 64%),
    radial-gradient(48% 46% at 6% 98%, rgba(32,97,140,.14), transparent 68%);
}
.hero > *{ position:relative; z-index:1 }

.sobrancelha{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--azul-claro); margin-bottom:20px;
}
.sobrancelha::before{
  content:""; width:26px; height:2px; border-radius:2px; background:var(--azul-claro);
}

/* hero em duas colunas: discurso à esquerda, prova visual à direita.
   A coluna da direita é maior de propósito — o site pronto é o argumento. */
.hero .container{ max-width:1260px }   /* hero mais largo: sobra tela para a prova visual */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px, 3.4vw, 48px); align-items:center;
}
/* minmax(0,…) é obrigatório: com "1fr" puro a coluna não encolhe abaixo do
   min-content do carrossel e estoura a tela em telas estreitas */
@media (max-width:940px){ .hero-grid{ grid-template-columns:minmax(0,1fr) } }
.hero-texto, .hero-grid > .carrossel{ min-width:0 }

.hero h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  line-height:1.04; letter-spacing:-.035em;
  max-width:14ch; text-wrap:balance;
}
.hero h1 .ponto{ color:var(--azul-claro) }
.hero-sub{
  margin-top:clamp(18px, 3vh, 26px); max-width:56ch;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem); line-height:1.58;
  color:var(--cinza-claro); text-wrap:pretty;
}
.hero-sub strong{ color:var(--claro); font-weight:600 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px, 4vh, 38px) }

.numeros{
  display:grid; gap:26px 34px; margin-top:clamp(38px, 6vh, 60px);
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  border-top:1px solid rgba(242,245,250,.14); padding-top:28px;
}
.numero strong{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(1.6rem, 3vw, 2.1rem); line-height:1.1; letter-spacing:-.03em;
  color:var(--claro);
}
.numero span{ display:block; margin-top:5px; font-size:.9rem; color:var(--cinza-claro); line-height:1.4 }

/* ---------- seções ---------- */
/* flow-root cria um BFC: a margem dos filhos fica contida na seção
   e não "escapa" abrindo fresta do fundo do body entre as seções */
.secao{ padding-block:var(--secao-y); display:flow-root }
.secao-clara{ background:var(--claro) }
.secao-escura{ background:var(--escuro); color:var(--claro) }
/* seção que continua a anterior, sem repetir o respiro do topo */
.secao-continua{ padding-top:0 }

.secao-titulo{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.75rem, 3.9vw, 2.65rem);
  line-height:1.12; letter-spacing:-.03em; max-width:20ch; text-wrap:balance;
}
.secao-escura .secao-titulo{ color:var(--claro) }
.secao-titulo .ponto{ color:var(--azul) }
.secao-escura .secao-titulo .ponto{ color:var(--azul-claro) }

.secao-lead{
  margin-top:16px; max-width:62ch; font-size:1.08rem; line-height:1.6;
  color:var(--cinza); text-wrap:pretty;
}
.secao-escura .secao-lead{ color:var(--cinza-claro) }

/* ---------- caminhos (tem site / não tem) ---------- */
.caminhos{ display:grid; gap:20px; margin-top:40px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) }
.caminho{
  background:var(--branco); border:1px solid var(--borda); border-radius:18px;
  padding:30px 28px; display:flex; flex-direction:column; gap:12px;
}
.caminho h3{ font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em }
.caminho p{ color:var(--cinza); font-size:1rem }
.caminho-tag{
  align-self:flex-start; font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--azul); background:rgba(32,97,140,.1);
  padding:.4em .8em; border-radius:999px;
}

/* ---------- passos ---------- */
.passos{ display:grid; gap:22px; margin-top:44px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) }
.passo{ display:flex; flex-direction:column; gap:10px }
.passo-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:13px;
  background:var(--azul-claro); color:var(--escuro);
  font-family:var(--display); font-weight:900; font-size:1.15rem;
}
.passo h3{ font-family:var(--display); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; margin-top:4px }
.passo p{ color:var(--cinza-claro); font-size:.99rem }
.secao-clara .passo p{ color:var(--cinza) }

/* ---------- comparação ---------- */
.tabela-wrap{ margin-top:40px; overflow-x:auto; border:1px solid var(--borda); border-radius:18px; background:var(--branco) }
table.comparacao{ width:100%; border-collapse:collapse; min-width:640px }
table.comparacao th, table.comparacao td{
  padding:16px 20px; text-align:left; border-bottom:1px solid var(--borda);
  font-size:.99rem; vertical-align:top;
}
table.comparacao thead th{
  font-family:var(--display); font-weight:800; font-size:1rem; letter-spacing:-.01em;
  background:var(--claro);
}
table.comparacao thead th:last-child{ color:var(--azul) }
table.comparacao tbody th{ font-weight:600; color:var(--tinta); width:26% }
table.comparacao td{ color:var(--cinza) }
table.comparacao td:last-child{ color:var(--tinta); font-weight:500; background:rgba(79,168,216,.05) }
table.comparacao tr:last-child th, table.comparacao tr:last-child td{ border-bottom:0 }

/* ---------- lista de entregas ---------- */
.entregas{ display:grid; gap:14px 30px; margin-top:38px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); list-style:none }
.entregas li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--cinza) }
.entregas li strong{ color:var(--tinta); font-weight:600 }
.entregas .marca{
  flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:rgba(32,97,140,.12); color:var(--azul);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800; margin-top:2px;
}

/* ---------- GEO destaque ---------- */
.geo-grid{ display:grid; gap:36px; margin-top:12px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items:start }
.geo-card{
  background:rgba(242,245,250,.05); border:1px solid rgba(242,245,250,.12);
  border-radius:18px; padding:28px 26px;
}
.geo-card h3{ font-family:var(--display); font-weight:800; font-size:1.15rem; margin-bottom:10px; letter-spacing:-.02em }
.geo-card p{ color:var(--cinza-claro); font-size:.99rem }
.geo-card .sigla{
  display:inline-block; font-family:var(--display); font-weight:900;
  font-size:2rem; letter-spacing:-.03em; color:var(--azul-claro); line-height:1; margin-bottom:12px;
}

/* ---------- carrossel de templates ---------- */
.carrossel{ margin-top:40px; position:relative }

.trilho{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding-bottom:8px; list-style:none;
  scrollbar-width:none; -ms-overflow-style:none;
}
.trilho::-webkit-scrollbar{ display:none }
@media (prefers-reduced-motion:reduce){ .trilho{ scroll-behavior:auto } }

/* um site por vez; snap no início bate com o cálculo do JS (offsetLeft) */
.slide{ flex:0 0 100%; scroll-snap-align:start }

/* moldura de navegador — dá contexto de "isto é um site" */
/* sombra sem deslocamento vertical: a versão com "0 30px" criava uma
   faixa escura logo abaixo da moldura, sobre o fundo já escuro do hero */
.tela{
  border-radius:16px; overflow:hidden;
  background:#1B2130; border:1px solid rgba(242,245,250,.14);
  box-shadow:0 0 60px rgba(0,0,0,.35);
}
.tela-barra{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:rgba(242,245,250,.07);
  border-bottom:1px solid rgba(242,245,250,.1);
}
.tela-barra i{ width:9px; height:9px; border-radius:50%; background:rgba(242,245,250,.26) }
/* 16/9 corta a sobra do rodapé de cada captura (área vazia do site original),
   mostrando só o topo — que é onde está o layout que interessa */
.tela img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  object-position:top center; background:#0F141F;
}

/* controles */
.carrossel-ctrl{ display:flex; gap:12px; align-items:center; margin-top:24px }
.seta{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--claro); cursor:pointer;
  border:1.5px solid rgba(242,245,250,.28);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.seta:hover{ background:var(--azul-claro); border-color:var(--azul-claro); color:var(--escuro) }
.seta:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:3px }
.seta svg{ width:19px; height:19px }

/* visível só para leitor de tela */
.so-leitor{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (max-width:620px){ .trilho{ gap:16px } }

/* ---------- preço ---------- */
.preco{
  background:var(--branco); border:1px solid var(--borda);
  border-radius:22px; padding:clamp(28px, 4vw, 44px);
  display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); align-items:center;
}
.preco h3{ font-family:var(--display); font-weight:900; font-size:clamp(1.4rem,2.6vw,1.9rem); letter-spacing:-.03em; line-height:1.15 }
.preco p{ color:var(--cinza); margin-top:12px }
.preco-selo{
  display:inline-flex; align-items:center; gap:.5em; margin-bottom:14px;
  font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--azul); background:rgba(32,97,140,.1); padding:.45em .9em; border-radius:999px;
}

/* ---------- FAQ ---------- */
.faq{ margin-top:40px; display:grid; gap:12px }
.faq details{
  background:var(--branco); border:1px solid var(--borda); border-radius:14px;
  padding:20px 24px; transition:border-color .18s ease;
}
.faq details[open]{ border-color:var(--azul-claro) }
.faq summary{
  font-family:var(--display); font-weight:800; font-size:1.08rem; letter-spacing:-.015em;
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; font-size:1.5rem; font-weight:700; color:var(--azul); line-height:1; flex-shrink:0;
  transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"−" }
.faq summary:focus-visible{ outline:3px solid var(--azul-claro); outline-offset:4px; border-radius:4px }
.faq details p{ margin-top:12px; color:var(--cinza); font-size:1rem }

/* ---------- faixa CTA ---------- */
.faixa-cta{ background:var(--azul); color:var(--branco); padding-block:clamp(48px, 8vh, 80px) }
.faixa-inner{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between }
.faixa-cta h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.6rem, 3.4vw, 2.4rem); line-height:1.12; letter-spacing:-.03em;
  max-width:18ch; text-wrap:balance;
}
.faixa-cta p{ margin-top:12px; color:rgba(255,255,255,.85); max-width:46ch }
.faixa-cta .btn-primario{ background:var(--branco); color:var(--azul) }
.faixa-cta .btn-primario:hover{ background:var(--claro) }

/* ---------- rodapé ---------- */
.rodape{ background:var(--escuro); color:var(--cinza-claro); padding-block:44px; font-size:.92rem }
.rodape-inner{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between }
.rodape .jp-logo{ font-size:22px }
.rodape a{ color:var(--cinza-claro); text-decoration:none }
.rodape a:hover{ color:var(--claro) }
.rodape-meta{ display:flex; gap:20px; flex-wrap:wrap; align-items:center }

/* ---------- utilidades ---------- */
.pular-para-conteudo{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--azul); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.pular-para-conteudo:focus{ left:0 }

@media (max-width:620px){
  .hero h1{ max-width:100% }
  .faixa-inner{ flex-direction:column; align-items:flex-start }
  .hero-cta .btn{ width:100% }
}