/* =========================================================================
   Estratégia Pro360 — sistema visual
   Preto com azul piscina, extraído da própria logo:
   amostra do arquivo deu média #34B8D7 e ponto mais puro #08C9F2.
   ========================================================================= */

:root{
  /* --- Cor: superfícies --- */
  --preto:#07080A;
  --sup-1:#0C0E12;
  --sup-2:#12151B;
  --sup-3:#171B23;
  --linha:#20242D;
  --linha-2:#2B313C;

  /* --- Cor: marca --- */
  --azul:#29B8E5;
  --azul-claro:#7BDDF8;
  --azul-escuro:#0B7CA8;
  --azul-10:rgba(41,184,229,.10);
  --azul-20:rgba(41,184,229,.20);
  --azul-30:rgba(41,184,229,.30);

  /* --- Cor: texto --- */
  --txt:#F2F5F8;
  --txt-2:#A9B3C1;
  --txt-3:#6B7484;

  /* --- Tipografia: escala 1.25 --- */
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-md:1.0625rem;
  --t-lg:1.1875rem;
  --t-xl:clamp(1.5rem,2.6vw,1.9rem);
  --t-2xl:clamp(1.85rem,3.4vw,2.5rem);
  --t-3xl:clamp(2.2rem,5vw,3.6rem);

  /* --- Espaçamento: escala 4px --- */
  --e-1:.25rem; --e-2:.5rem;  --e-3:.75rem; --e-4:1rem;
  --e-5:1.5rem; --e-6:2rem;   --e-7:3rem;   --e-8:4rem;
  --e-9:5.5rem; --e-10:7rem;

  /* --- Forma --- */
  --r-sm:.5rem; --r-md:.75rem; --r-lg:1.125rem; --r-full:99rem;

  /* --- Elevação: sombras em camadas, não um borrão só --- */
  --elev-1:0 1px 2px rgba(0,0,0,.4), 0 2px 8px -2px rgba(0,0,0,.35);
  --elev-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -8px rgba(0,0,0,.55);
  --elev-3:0 4px 8px rgba(0,0,0,.45), 0 28px 56px -16px rgba(0,0,0,.7);
  --elev-azul:0 2px 6px rgba(11,124,168,.3), 0 14px 34px -10px rgba(41,184,229,.5);

  /* --- Movimento --- */
  --rapido:.16s cubic-bezier(.32,.72,0,1);
  --suave:.28s cubic-bezier(.32,.72,0,1);

  --max:74rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--preto); color:var(--txt);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--t-md); line-height:1.7; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--azul); text-decoration:none; transition:color var(--rapido)}
a:hover{color:var(--azul-claro)}
/* Foco visível só no teclado: acessível sem poluir o clique do mouse. */
:focus-visible{outline:2px solid var(--azul); outline-offset:3px; border-radius:var(--r-sm)}
::selection{background:var(--azul-30); color:#fff}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--e-5); position:relative}
/* Âncoras não podem parar embaixo do cabeçalho fixo. */
[id]{scroll-margin-top:6rem}

/* ---------------- Cabeçalho ---------------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(7,8,10,.72);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--linha);
}
.topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); min-height:4.5rem}
/* A logo é JPEG de fundo preto: "screen" apaga o preto sobre fundo escuro,
   sem caixa visível e sem precisar reprocessar o arquivo. */
.logo img{height:1.85rem; width:auto; mix-blend-mode:screen}
.nav{display:flex; align-items:center; gap:var(--e-6); font-size:var(--t-sm)}
.nav a{color:var(--txt-2); font-weight:500; position:relative}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-.4rem; height:1.5px;
  background:var(--azul); transform:scaleX(0); transform-origin:left;
  transition:transform var(--suave);
}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a:hover{color:var(--txt)}
.topo .nav-mob{display:none}

/* ---------------- Botões ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2);
  padding:.8rem 1.5rem; border-radius:var(--r-md);
  font-weight:600; font-size:var(--t-sm); letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform var(--rapido), box-shadow var(--suave), background var(--suave), border-color var(--suave), color var(--rapido);
}
.btn svg{width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.btn-principal{
  background:linear-gradient(135deg,var(--azul-claro) 0%,var(--azul) 42%,var(--azul-escuro) 100%);
  color:#041A22; box-shadow:var(--elev-azul);
}
.btn-principal:hover{transform:translateY(-2px); box-shadow:0 3px 8px rgba(11,124,168,.35), 0 20px 44px -12px rgba(41,184,229,.6); color:#041A22}
.btn-principal:active{transform:translateY(0); box-shadow:var(--elev-1)}
.btn-vazado{background:rgba(255,255,255,.035); border-color:var(--linha-2); color:var(--txt)}
.btn-vazado:hover{background:var(--azul-10); border-color:var(--azul-30); color:var(--azul-claro); transform:translateY(-2px)}
.btn-vazado:active{transform:translateY(0)}
.btn-compacto{padding:.5rem 1.05rem; font-size:var(--t-xs)}

/* ---------------- Capa ---------------- */
.capa{position:relative; padding:var(--e-9) 0 var(--e-8); overflow:hidden}
.capa::before{
  content:""; position:absolute; inset:-25% -15% auto -15%; height:52rem; pointer-events:none;
  background:
    radial-gradient(52% 46% at 18% 28%, rgba(41,184,229,.18) 0%, transparent 68%),
    radial-gradient(38% 34% at 82% 8%, rgba(41,184,229,.10) 0%, transparent 70%);
}
/* Linha de luz sob o cabeçalho: detalhe que dá acabamento sem chamar atenção. */
.capa::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(52rem,92%); height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--azul-30),transparent);
}
.capa .wrap{display:grid; gap:var(--e-8); grid-template-columns:1.12fr .88fr; align-items:center}

.selo{
  display:inline-flex; align-items:center; gap:var(--e-2); margin-bottom:var(--e-5);
  padding:.4rem .85rem; border-radius:var(--r-full);
  font-size:var(--t-xs); font-weight:600; letter-spacing:-.005em;
  color:var(--azul-claro); background:var(--azul-10); border:1px solid var(--azul-20);
}
.selo::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--azul);
  box-shadow:0 0 0 3px rgba(41,184,229,.18);
}
.capa h1{
  font-size:var(--t-3xl); line-height:1.08; letter-spacing:-.035em;
  margin:0 0 var(--e-5); font-weight:800; text-wrap:balance;
}
.realce{background:linear-gradient(115deg,var(--azul-claro),var(--azul) 70%); -webkit-background-clip:text; background-clip:text; color:transparent}
.capa .chamariz{font-size:var(--t-lg); color:var(--txt-2); margin:0 0 var(--e-6); max-width:33rem; text-wrap:pretty}
.acoes{display:flex; gap:var(--e-3); flex-wrap:wrap}

/* Retrato: moldura, halo e recorte controlado por tela. */
.retrato{position:relative; justify-self:end; width:100%; max-width:26rem}
.retrato::after{
  content:""; position:absolute; inset:-10% -6%; z-index:0; pointer-events:none;
  background:radial-gradient(48% 48% at 50% 42%, rgba(41,184,229,.26) 0%, transparent 72%);
}
.retrato picture{position:relative; z-index:1; display:block}
.retrato img{
  /* height:auto e obrigatorio: sem ele o atributo height="1005" do HTML vence
     o aspect-ratio do CSS e a foto estica. */
  width:100%; height:auto; border-radius:var(--r-lg);
  border:1px solid var(--linha-2); box-shadow:var(--elev-3);
  aspect-ratio:716/1005; object-fit:cover; object-position:center 20%;
}

/* ---------------- Seções ---------------- */
section{padding:var(--e-9) 0; position:relative}
.faixa{
  background:linear-gradient(180deg,var(--preto) 0%,var(--sup-1) 45%,var(--sup-1) 55%,var(--preto) 100%);
  border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
}
.rotulo{
  display:block; font-size:var(--t-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--azul); margin-bottom:var(--e-3);
}
h2{font-size:var(--t-2xl); line-height:1.15; letter-spacing:-.028em; margin:0 0 var(--e-4); font-weight:800; text-wrap:balance}
.intro{color:var(--txt-2); font-size:var(--t-lg); max-width:42rem; margin:0 0 var(--e-7); text-wrap:pretty}
h3{font-size:var(--t-md); margin:0 0 var(--e-2); font-weight:700; letter-spacing:-.015em; color:var(--txt)}
p{margin:0 0 var(--e-4)}

.grade{display:grid; gap:var(--e-4); grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.cartao{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,var(--sup-2) 0%,var(--sup-1) 100%);
  border:1px solid var(--linha); border-radius:var(--r-lg); padding:var(--e-5);
  transition:transform var(--suave), border-color var(--suave), box-shadow var(--suave);
}
/* Fio de luz no topo do cartão, revelado no hover. */
.cartao::before{
  content:""; position:absolute; top:0; left:var(--e-5); right:var(--e-5); height:1px;
  background:linear-gradient(90deg,transparent,var(--azul-30),transparent);
  opacity:0; transition:opacity var(--suave);
}
.cartao:hover{transform:translateY(-3px); border-color:var(--linha-2); box-shadow:var(--elev-2)}
.cartao:hover::before{opacity:1}
.cartao p{color:var(--txt-2); font-size:var(--t-sm); margin:0; text-wrap:pretty}

.icone{
  width:2.6rem; height:2.6rem; border-radius:var(--r-md); margin-bottom:var(--e-4);
  display:grid; place-items:center; color:var(--azul-claro);
  background:linear-gradient(145deg,var(--azul-20),rgba(41,184,229,.04));
  border:1px solid var(--azul-20);
}
.icone svg{width:1.25rem; height:1.25rem; stroke:currentColor; fill:none; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round}
.num{
  display:block; font-size:var(--t-xs); font-weight:700; color:var(--azul);
  letter-spacing:.12em; margin-bottom:var(--e-3); font-variant-numeric:tabular-nums;
}

.paises{display:grid; gap:var(--e-4); grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.pais{
  display:flex; gap:var(--e-4); align-items:flex-start;
  background:var(--sup-1); border:1px solid var(--linha); border-radius:var(--r-lg); padding:var(--e-5);
  transition:border-color var(--suave), transform var(--suave);
}
.pais:hover{border-color:var(--linha-2); transform:translateY(-3px)}
.pais .bandeira{font-size:1.6rem; line-height:1.2; flex:none}
.pais p{color:var(--txt-2); font-size:var(--t-sm); margin:0; text-wrap:pretty}

.chamada{position:relative; overflow:hidden; text-align:center; padding:var(--e-8) 0}
.chamada::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 78% at 50% 0%, rgba(41,184,229,.15) 0%, transparent 70%);
}
.chamada h2{margin-bottom:var(--e-3)}
.chamada .intro{margin:0 auto var(--e-6); text-align:center}

/* ---------------- Páginas de texto ---------------- */
.texto{max-width:44rem}
.texto h1{font-size:var(--t-2xl); letter-spacing:-.03em; margin:0 0 var(--e-2); font-weight:800}
.texto h2{font-size:var(--t-xl); margin:var(--e-7) 0 var(--e-4); letter-spacing:-.022em}
.texto h2:first-of-type{margin-top:var(--e-6)}
.texto p,.texto li{color:var(--txt-2); text-wrap:pretty}
.texto strong{color:var(--txt); font-weight:600}
.texto ul{padding-left:1.15rem; margin:0 0 var(--e-4)}
.texto li{margin-bottom:var(--e-2)}
.texto table{border-collapse:separate; border-spacing:0; width:100%; margin:0 0 var(--e-5); font-size:var(--t-sm); border:1px solid var(--linha); border-radius:var(--r-md); overflow:hidden}
.texto th,.texto td{padding:.85rem 1rem; text-align:left; vertical-align:top; color:var(--txt-2); border-bottom:1px solid var(--linha)}
.texto tr:last-child th,.texto tr:last-child td{border-bottom:0}
.texto th{background:var(--azul-10); color:var(--txt); font-weight:600}
.texto code{background:var(--sup-2); border:1px solid var(--linha); border-radius:var(--r-sm); padding:.12rem .4rem; font-size:.9em; color:var(--azul-claro)}
.data{color:var(--txt-3); font-size:var(--t-sm); margin:0 0 var(--e-6)}
.aviso{
  background:linear-gradient(135deg,var(--azul-10),rgba(41,184,229,.02));
  border:1px solid var(--azul-20); border-left:3px solid var(--azul);
  padding:var(--e-4) var(--e-5); border-radius:var(--r-md); margin:0 0 var(--e-5);
}
.aviso p{margin:0 0 var(--e-3); color:var(--txt-2)}
.aviso p:last-child{margin:0}

/* ---------------- Rodapé ---------------- */
.rodape{background:var(--sup-1); border-top:1px solid var(--linha); padding:var(--e-7) 0 var(--e-5); font-size:var(--t-sm); color:var(--txt-2); margin-top:var(--e-4)}
.rodape .cols{display:grid; gap:var(--e-6); grid-template-columns:1.5fr 1fr 1fr}
.rodape img{height:1.7rem; width:auto; margin-bottom:var(--e-4); mix-blend-mode:screen}
.rodape strong{color:var(--txt); display:block; margin-bottom:var(--e-3); font-size:var(--t-sm); font-weight:700}
.rodape a{color:var(--txt-2); display:inline-block; margin-bottom:var(--e-1)}
.rodape a:hover{color:var(--azul)}
.rodape .legal{margin-top:var(--e-6); padding-top:var(--e-4); border-top:1px solid var(--linha); font-size:var(--t-xs); color:var(--txt-3)}

/* ---------------- Telas menores ---------------- */
@media (max-width:900px){
  .capa .wrap{grid-template-columns:1fr; gap:var(--e-6)}
  .retrato{justify-self:center; max-width:22rem; order:-1}
  /* No celular a foto vem no recorte fechado e mais baixa, para não empurrar
     o texto para fora da primeira tela. */
  .retrato img{aspect-ratio:4/3.4; object-position:center 25%}
  .rodape .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--e-9:3.5rem; --e-8:2.75rem}
  body{font-size:1rem}
  .nav{display:none}
  .topo .nav-mob{display:inline-flex; width:auto}
  .topo .wrap{min-height:3.9rem}
  .logo img{height:1.6rem}
  .capa{padding:var(--e-7) 0 var(--e-8)}
  .retrato{max-width:100%}
  .retrato img{aspect-ratio:4/3.2}
  .acoes{flex-direction:column; align-items:stretch}
  .btn{width:100%}
  .rodape .cols{grid-template-columns:1fr; gap:var(--e-5)}
  .texto table{font-size:var(--t-xs)}
  .texto th,.texto td{padding:.7rem .75rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}