/* site.css — landing do PlaceVox. Mobile-first; a mesma paleta e a mesma Rubik do conjunto das lojas. */
@font-face{font-family:'Rubik';src:url('fonts/rubik-latin-var.woff2') format('woff2');font-weight:300 900;font-display:swap}
:root{--laranja:#FAA831;--azul:#19658B;--azul-escuro:#0F4864;--azul-profundo:#0A3549;--tinta:#10202B;--tinta-2:#3E5461;--fundo:#FFFFFF;--fundo-2:#F3F6F8;--miolo:1120px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--tinta);background:var(--fundo);line-height:1.45;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.miolo{width:100%;max-width:var(--miolo);margin:0 auto;padding:0 20px}
/* topo: logo + troca de idioma, a primeira coisa visível */
.topo{position:sticky;top:0;z-index:10;background:rgba(15,72,100,.96);color:#fff;backdrop-filter:saturate(1.2) blur(6px)}
.topo .miolo{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-icone{width:34px;height:34px;border-radius:9px}
.logo-texto{font-weight:700;font-size:22px;letter-spacing:-.03em}
.logo-texto b{color:var(--laranja);font-weight:700}
.idioma{display:inline-flex;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:3px;gap:2px}
.idioma button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:13px;letter-spacing:.04em;padding:6px 12px;border-radius:999px;cursor:pointer;line-height:1}
.idioma button[aria-pressed="true"]{background:#fff;color:var(--azul-profundo)}
.idioma button:focus-visible{outline:3px solid var(--laranja);outline-offset:2px}
.idioma svg{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
/* herói */
.hero{color:#fff;text-align:center;padding:48px 0 0;overflow:hidden;
  background:radial-gradient(900px 600px at 80% 110%,rgba(250,168,49,.30) 0%,rgba(250,168,49,0) 60%),radial-gradient(1000px 700px at 50% -10%,#2A7BA6 0%,rgba(42,123,166,0) 62%),linear-gradient(172deg,var(--azul) 0%,var(--azul-escuro) 58%,var(--azul-profundo) 100%)}
.hero h1{margin:0 auto;font-weight:700;font-size:clamp(34px,8.5vw,64px);line-height:1.05;letter-spacing:-.03em;text-shadow:0 4px 24px rgba(6,40,58,.35)}
.hero h1 span,.hero h1 em{display:inline-block} /* as três linhas aprovadas; cada uma só quebra se não couber */
.hero h1 em{font-style:normal;color:var(--laranja)}
.hero .sub{margin:18px auto 0;max-width:34ch;font-size:clamp(17px,2.6vw,22px);color:rgba(255,255,255,.88)}
.lojas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:26px 0 0}
.badge{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 18px 0 14px;border-radius:10px;background:#000;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);min-width:180px;transition:transform .15s,opacity .15s}
.badge span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.badge small{font-size:11px;font-weight:400;opacity:.9}
.badge strong{font-size:19px;font-weight:500;letter-spacing:-.01em}
.badge:hover{transform:translateY(-1px)}
.badge:focus-visible{outline:3px solid var(--laranja);outline-offset:3px}
/* loja certa por aparelho: iOS destaca a App Store, Android o Google Play, computador as duas iguais */
.plat-ios .badge.android,.plat-android .badge.ios{opacity:.62;transform:scale(.94)}
.plat-android .badge.android{order:-1}
.plat-ios .badge.ios,.plat-android .badge.android{box-shadow:0 0 0 2px var(--laranja)}
.hero .capa{margin:36px auto 0;max-width:820px}
.hero .capa img{width:100%;margin-bottom:-6%}
/* recursos */
.recurso{padding:56px 0}
.recurso:nth-of-type(even){background:var(--fundo-2)}
.recurso .miolo{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;justify-items:center}
.recurso .fone{width:min(62%,300px)}
.recurso .texto{text-align:center;max-width:36ch}
.recurso h2{margin:0;font-size:clamp(26px,5.6vw,36px);line-height:1.12;letter-spacing:-.025em;color:var(--azul-profundo)}
.recurso p{margin:12px 0 0;font-size:18px;color:var(--tinta-2)}
/* fecho e rodapé */
.fecho{color:#fff;text-align:center;padding:64px 0;background:linear-gradient(160deg,var(--azul) 0%,var(--azul-profundo) 100%)}
.fecho h2{margin:0;font-size:clamp(28px,6vw,44px);letter-spacing:-.03em}
.fecho p{margin:10px auto 0;max-width:36ch;font-size:18px;color:rgba(255,255,255,.88)}
.rodape{background:var(--azul-profundo);color:rgba(255,255,255,.85);padding:26px 0 34px;font-size:14px}
.rodape .miolo{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px}
.legal{display:flex;gap:22px}
.legal a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rodape .copy{margin:0;flex-basis:100%;text-align:center;color:rgba(255,255,255,.65)}
@media (min-width:768px){
  .topo .miolo{height:66px}
  .hero{padding-top:72px}
  .lojas{gap:16px}
  .recurso{padding:80px 0}
  .recurso .miolo{grid-template-columns:5fr 7fr;gap:48px}
  .recurso .fone{width:min(100%,340px);justify-self:end}
  .recurso.inverso .fone{order:2;justify-self:start}
  .recurso .texto{text-align:left;justify-self:start}
  .recurso.inverso .texto{justify-self:end;text-align:right}
  .rodape .miolo{justify-content:space-between}
  .rodape .copy{flex-basis:auto}
}
@media (min-width:1200px){
  .hero{padding-top:88px}
  .hero .capa{max-width:960px}
  .recurso .fone{width:380px}
}
@media (prefers-reduced-motion:reduce){.badge{transition:none}}