/* =============================================================================
   /es/ e /en/ — só o que NÃO existia
   -----------------------------------------------------------------------------
   Estas páginas carregam skin.css + politica.css + este arquivo, nesta ordem.
   A carga pesada do visual (abertura .pp-head, índice lateral .pp-toc, corpo
   .pp-doc, cartão do encarregado .pp-dpo, moldura do certificado .pp-cert-img,
   faixa escura .pp-jorn) vem do politica.css: é a mesma natureza de página e
   copiar aquelas regras para cá seria criar uma segunda cópia para manter.

   Aqui entra o que é próprio destas duas páginas: o cabeçalho enxuto com troca
   de idioma, a grade de "o que fazemos", a lista dos 12 países, a faixa final e
   o rodapé curto.
   ============================================================================= */

/* ---- Pular para o conteúdo -------------------------------------------------
   Estas páginas não têm menu, então o único salto útil é para o texto. Fica
   invisível até receber foco pelo teclado. */
.sr-only-focus{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:600}
.sr-only-focus:focus{left:0}

/* ---- Cabeçalho enxuto -----------------------------------------------------
   Não é o .nav do site: aqui não há menu nem botão de login, e por isso ele não
   precisa de nada do comportamento móvel (hambúrguer, gaveta). */
.il-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.il-nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
.il-nav .brand{display:block;flex:none}
.il-nav .brand img{display:block;height:52px;width:auto}
.il-lang{display:flex;flex-wrap:wrap;gap:4px}
.il-lang a{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 12px;border-radius:999px;transition:color .15s,background .15s}
.il-lang a:hover{color:var(--teal);background:#E2EFEE}
/* A página em que a pessoa está não é um link para lugar nenhum — ela fica
   marcada e para de responder ao passar do mouse. */
.il-lang a.atual{color:var(--teal);background:#E2EFEE;cursor:default}
/* Nome por extenso no desktop, duas letras no telefone (ver o @media no fim). */
.il-lg-s{display:none}

/* Segundo parágrafo da abertura: é o que fala com quem chegou por causa de um
   e-mail recebido, então não pode ter o mesmo peso do primeiro. */
.il-dek2{font-size:16px;color:var(--muted);margin-top:12px}

/* ---- Faixa de ação (a mesma .pp-jorn da política) ------------------------- */
.il-acao{background:var(--surface);border-top:1px solid var(--line);padding:34px 0 8px}
.il-acao .pp-jorn{margin-bottom:0}

/* ---- Subtítulos e listas dentro do documento ----------------------------- */
.pp-doc h3{font-family:var(--disp);font-weight:800;font-size:19px;line-height:1.25;color:var(--ink);margin:26px 0 10px}
.il-ul{list-style:none;margin:4px 0 16px;display:grid;gap:10px}
.il-ul li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.7;color:var(--text)}
.il-ul li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:7px;border-radius:50%;background:var(--grad)}

/* ---- "O que fazemos": quatro cartões -------------------------------------
   O documento é uma coluna estreita (74ch no .pp-doc), então a grade é de 2 e
   não de 4 — quatro colunas aqui dariam cartões de 150px. */
.il-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:6px 0 22px}
.il-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 22px 24px}
.il-card h3{margin:0 0 8px;font-size:17px}
.il-card p{font-size:15px;line-height:1.6;color:var(--text);margin:0}

/* ---- Os 12 países -------------------------------------------------------- */
.il-paises{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px;padding:0}
.il-paises li{font-family:var(--disp);font-size:13.5px;font-weight:700;color:var(--teal);background:#E2EFEE;border:1px solid #CFE3E2;border-radius:999px;padding:7px 15px}

/* ---- Cartão do encarregado ----------------------------------------------- */
.il-dpo{margin-top:8px}
.il-dpo-canais{font-size:15px;line-height:1.9;margin:0}
.il-dpo-canais a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.il-dpo-canais a:hover{color:var(--red)}
.il-dpo-ends{font-size:14.5px;line-height:1.6;color:var(--text);max-width:34ch;margin:0}

/* ---- Certificado --------------------------------------------------------- */
/* Largura travada: a imagem tem 820x1159 e, solta numa coluna de texto, ocuparia
   a coluna inteira e empurraria o resto da página para baixo da dobra. */
.il-cert{max-width:280px;margin:16px 0 10px}

/* ---- Faixa final --------------------------------------------------------- */
.il-fim{background:var(--ink);color:#fff;padding:52px 0}
.il-fim .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.il-fim h2{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,34px);line-height:1.1;color:#fff}
.il-fim p{font-size:16px;line-height:1.6;color:#C9D6D5;max-width:52ch;margin-top:10px}
.il-fim-acoes{display:flex;flex-wrap:wrap;gap:12px}
.il-fim .btn{text-transform:none;letter-spacing:0;font-size:15px;display:inline-flex;align-items:center;gap:9px}
.il-fim .btn svg{width:18px;height:18px;fill:currentColor;flex:none}

/* ---- Rodapé curto -------------------------------------------------------- */
.il-foot{background:var(--ink);color:#9fb8b7;border-top:1px solid rgba(255,255,255,.1);padding:48px 0 30px}
.il-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:30px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.il-foot-marca img{display:block;width:150px;height:auto;margin-bottom:16px}
.il-foot-marca p{font-size:15px;line-height:1.6;max-width:46ch}
.il-foot-ends{margin-top:12px;font-size:13.5px;color:#7f9998}
.il-foot-col h3{color:#fff;font-family:var(--disp);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.il-foot-col a{display:block;font-size:15px;color:#9fb8b7;padding:6px 0;transition:color .15s,padding-left .15s}
.il-foot-col a:hover{color:#fff;padding-left:3px}
.il-foot-bottom{padding-top:24px;font-size:13.5px}

@media(max-width:900px){
  .il-foot-top{grid-template-columns:1fr 1fr}
  .il-foot-marca{grid-column:1/-1}
}
@media(max-width:760px){
  .il-nav .brand img{height:44px}
  .il-lang{justify-content:flex-end;gap:2px}
  .il-lang a{padding:7px 8px;font-size:11px;letter-spacing:.04em}
  /* Os três idiomas têm de caber numa linha só: o cabeçalho é fixo no topo e,
     quebrado em duas linhas, comia 90px de uma tela de 844. Só encolher a
     fonte não bastava — faltavam 11px. Abaixo desta largura entram as duas
     letras, que é o padrão de troca de idioma em telefone. */
  .il-lg-l{display:none}
  .il-lg-s{display:inline}
  .il-cards{grid-template-columns:1fr}
  .il-fim .wrap{flex-direction:column;align-items:flex-start}
  .il-fim-acoes{width:100%}
  .il-fim-acoes .btn{flex:1 1 auto;justify-content:center}
}
@media(max-width:520px){
  .il-foot-top{grid-template-columns:1fr}
}