/* ===========================================================
   PSR — Programa de Estágio  ·  Landing page styles
   Brand system extracted from psr-inc.com:
   deep navy + teal gradients, gold/bronze accent, white cards
   =========================================================== */

:root{
  /* Brand palette */
  --navy-900:#0a1f36;
  --navy-800:#0e2a47;
  --navy-700:#143458;
  --navy-600:#1b4068;
  --teal-700:#1f5d6b;
  --teal-600:#2a778a;
  --teal-500:#36909f;
  --teal-300:#7bbccb;
  --gold-700:#a87f3e;
  --gold-600:#c19a5b;
  --gold-500:#d4af6a;
  --gold-300:#e8d2a3;

  --ink:#16263b;
  --ink-soft:#3c5066;
  --muted:#64788c;
  --line:#e3e9ee;
  --paper:#eef2f5;
  --paper-2:#f6f9fb;
  --white:#ffffff;

  /* Theming hooks (driven by Tweaks via [data-accent]) */
  --accent:var(--teal-500);
  --accent-bright:var(--teal-300);
  --accent-soft:#bfe2ea;
  --accent-ink:#0f4855;

  /* Hero surface (driven by [data-hero]) */
  --hero-grad:linear-gradient(125deg,#2c6e7e 0%,#1a4760 42%,#0e2a47 100%);

  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;

  --maxw:1320px;
  --radius:15.4px;
  --radius-lg:24.2px;
  --shadow-card:0 19.8px 44px -26.4px rgba(14,42,71,.35);
  --shadow-card-hover:0 28.6px 66px -24.2px rgba(14,42,71,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-accent="gold"]{
  --accent:var(--gold-600);
  --accent-bright:var(--gold-500);
  --accent-soft:var(--gold-300);
  --accent-ink:#6b4f22;
}
[data-accent="electric"]{
  --accent:#3fd0c9;
  --accent-bright:#79e8e0;
  --accent-soft:#bff2ee;
  --accent-ink:#0c5650;
}

[data-hero="dark"]{ --hero-grad:radial-gradient(120% 120% at 80% -10%,#1b4d63 0%,#0e2a47 45%,#091d31 100%); }
[data-hero="photo"]{ --hero-grad:linear-gradient(125deg,rgba(12,36,60,.86),rgba(10,28,48,.78)); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--ink);}
p{margin:0;text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 27.5px;}
.gold{color:var(--accent);}
/* Cada seção ocupa uma tela inteira, com o conteúdo centralizado na vertical.
   O padding vira respiro mínimo: se o conteúdo passar da altura da tela, a
   seção cresce normalmente em vez de cortar. O topo tem um mínimo maior para
   o conteúdo não escorregar por baixo da nav fixa. */
.section{
  /* O respiro vertical acompanha a ALTURA da tela (vh), não a largura: em
     notebooks 768px o padding em vw empurrava a seção para além da tela.
     O mínimo do topo (88px) mantém o conteúdo abaixo da nav fixa. */
  padding:clamp(88px,8vh,99px) 0 clamp(48px,6vh,99px);
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
.section>.wrap{width:100%;}

/* Seções curtas demais para uma tela inteira (Histórias) fluem pela altura do
   próprio conteúdo — forçar 100svh nelas só criaria vazio. */
.section.flow{min-height:0;display:block;padding:clamp(56px,7vh,88px) 0;scroll-margin-top:40px;}

/* Rolagem livre: as seções continuam com a altura da tela, mas nada puxa a
   página para encaixar no início de uma delas — quem rola para no ponto que
   quiser. (Sem scroll-snap por decisão de UX.) */
.eyebrow{
  font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-600);display:inline-flex;align-items:center;gap:9.9px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9.9px;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:14.85px;
  padding:13.2px 24.2px;border-radius:1098.9px;cursor:pointer;border:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s;
  white-space:nowrap;
}
.btn svg{width:15.4px;height:15.4px;}
.btn-secondary{background:var(--gold-600);color:#231a07;box-shadow:0 15.4px 33px -13.2px color-mix(in oklab,var(--gold-600) 80%,transparent);}
.btn-secondary:hover{background:var(--gold-500);transform:translateY(-2.2px);box-shadow:0 22px 44px -13.2px color-mix(in oklab,var(--gold-600) 80%,transparent);}
.btn-ghost{background:transparent;color:var(--white);border:1.65px solid rgba(255,255,255,.45);}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2.2px);}
.btn-dark{background:var(--navy-800);color:#fff;}
.btn-dark:hover{background:var(--navy-700);transform:translateY(-2.2px);}
/* Convite secundário: presente, mas sem competir com o CTA principal. */
.btn-soft{background:color-mix(in oklab,var(--navy-800) 9%,transparent);color:var(--navy-800);
  border:1.65px solid color-mix(in oklab,var(--navy-800) 16%,transparent);box-shadow:none;}
.btn-soft:hover{background:color-mix(in oklab,var(--navy-800) 16%,transparent);
  border-color:color-mix(in oklab,var(--navy-800) 28%,transparent);transform:translateY(-2.2px);}
.btn-teal{background:var(--teal-500);color:#fff;box-shadow:0 13.2px 28.6px -15.4px var(--teal-500);}
.btn-teal:hover{background:var(--teal-600);transform:translateY(-2.2px);box-shadow:0 19.8px 37.4px -15.4px var(--teal-500);}
.btn-teal:focus-visible{outline:2.2px solid #fff;outline-offset:3.3px;}
.btn-lg{padding:15.4px 29.7px;font-size:15.95px;}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:15.4px 27.5px;transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}
.nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(15.4px);box-shadow:0 11px 33px -22px rgba(14,42,71,.5);padding:9.9px 27.5px;}
.brand{display:flex;align-items:center;gap:12.1px;}
.brand .logo{height:29.7px;width:auto;display:block;flex:none;}
.brand .logo-scrolled{display:none;}
.nav.scrolled .brand .logo-default{display:none;}
.nav.scrolled .brand .logo-scrolled{display:block;}
.nav-links{display:flex;align-items:center;gap:25.3px;}
.nav-links a{font-family:var(--font-display);font-weight:500;font-size:16.5px;color:rgba(255,255,255,.86);transition:color .25s;position:relative;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6.6px;height:2.2px;width:0;background:var(--accent);transition:width .25s var(--ease);}
.nav-links a:hover::after{width:100%;}
.nav.scrolled .nav-links a{color:var(--ink-soft);}
.nav.scrolled .nav-links a:hover{color:var(--navy-800);}
.nav-cta{display:flex;align-items:center;gap:14.3px;}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;color:#fff;padding:0;margin-right:-6.6px;}
.nav.scrolled .menu-toggle{color:var(--navy-800);}

/* ---------- Gaveta de navegação (mobile) ---------- */
/* Painel navy próprio, e não uma extensão da nav: a nav troca de fundo
   (transparente → branco) ao rolar, e o menu precisa ser legível nos dois
   estados. Fica em display:none no desktop. */
.nav-scrim,.nav-drawer{display:none;}
.nav-scrim[hidden],.nav-drawer[hidden]{display:none !important;}
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(320px,86vw);
  background:linear-gradient(160deg,#12385c 0%,var(--navy-900) 100%);
  color:#fff;padding:19.8px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:-13.2px 0 44px -13.2px rgba(0,0,0,.6);
  overflow-y:auto;overscroll-behavior:contain;
  flex-direction:column;
  transform:translateX(100%);transition:transform .32s var(--ease);
}
.nav-drawer.open{transform:none;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:15.4px;}
.drawer-head .logo{height:29.7px;width:auto;}
.drawer-close{
  flex:none;width:44px;height:44px;margin-right:-9.9px;
  background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:color .25s;}
.drawer-close:hover{color:#fff;}
.drawer-links{display:flex;flex-direction:column;margin-top:19.8px;}
.drawer-links a{
  font-family:var(--font-display);font-weight:500;font-size:17.6px;
  color:rgba(233,242,247,.88);
  padding:14.3px 0;border-bottom:1.1px solid rgba(255,255,255,.1);
  transition:color .2s,padding-left .2s var(--ease);}
.drawer-links a:hover,.drawer-links a:focus-visible{color:var(--accent-bright);padding-left:6.6px;}
.drawer-links a:last-child{border-bottom:0;}
.drawer-cta{margin-top:26.4px;width:100%;}
.nav-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(6,18,32,.6);
  backdrop-filter:blur(2.2px);opacity:0;transition:opacity .32s var(--ease);}
.nav-scrim.open{opacity:1;}
/* Trava a rolagem do fundo enquanto a gaveta está aberta. */
body.drawer-open{overflow:hidden;}
@media (prefers-reduced-motion:reduce){
  .nav-drawer,.nav-scrim{transition:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--hero-grad);background-size:cover;background-position:center;
  color:#fff;overflow:hidden;isolation:isolate;
  --accent-bright:#79e8e0;
}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--hero-grad);}
[data-hero="gradient"] .hero::after,[data-hero="dark"] .hero::after{background:var(--hero-grad);}
.hero-mesh{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background:
    radial-gradient(40% 50% at 88% 18%, rgba(123,188,203,.28), transparent 70%),
    radial-gradient(38% 46% at 12% 92%, rgba(54,144,159,.30), transparent 70%);}
.hero-inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:104.5px 52.8px 63.8px;display:grid;grid-template-columns:1fr 506px;gap:44px;align-items:center;}
.hero-tag{display:inline-flex;align-items:center;gap:9.9px;font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(255,255,255,.1);border:1.1px solid rgba(255,255,255,.22);padding:6.6px 14.3px;border-radius:1098.9px;color:#fff;}
.hero h1{font-size:clamp(34.1px,4.95vw,49.5px);margin:22px 0 0;color:#fff;letter-spacing:-.02em;}
.hero h1 .gold{color:var(--accent-bright);}
.hero .sub{margin-top:19.8px;font-size:clamp(16.5px,1.32vw,17.6px);line-height:1.6;color:rgba(233,242,247,.86);max-width:594px;}
.hero .sub strong{font-weight:700;color:#99d5db;}
.hero-actions{margin-top:29.7px;display:flex;gap:14.3px;flex-wrap:wrap;}

/* Hero visual — cards de vidro flutuantes + malha de triângulos */
.hero-visual{position:relative;height:376.2px;}
.float-card{position:absolute;background:rgba(255,255,255,.1);backdrop-filter:blur(13.2px);border:1.1px solid rgba(255,255,255,.22);
  border-radius:16.5px;padding:15.4px 16.5px;color:#fff;box-shadow:0 26.4px 55px -26.4px rgba(0,0,0,.5);}
.float-card .k{font-family:var(--font-display);font-weight:700;font-size:25.3px;line-height:1;color:var(--gold-500);}
.float-card .l{font-family:var(--font-display);font-size:14px;color:rgba(255,255,255,.8);margin-top:5.5px;}
.fc-1{top:8%;left:0;animation:floaty 7s ease-in-out infinite;}
.fc-2{bottom:-4%;right:4%;animation:floaty 8s ease-in-out infinite .8s;}
.fc-3{top:42%;right:-6%;animation:floaty 9s ease-in-out infinite .4s;}
.fc-4{bottom:-6%;left:-5%;animation:floaty 7.5s ease-in-out infinite 1.2s;
  background:rgba(123,188,203,.17);border-color:rgba(123,188,203,.38);}
.fc-4 .l{max-width:161.7px;}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-15.4px)}}
/* Versão contida do floaty, para a lista de dados do hero no mobile: ali os
   cards ficam a 8.8px um do outro e os 15.4px do original fariam vizinhos
   quase se tocarem. */
@keyframes floaty-lista{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.3px)}}
@keyframes floaty-dado{0%,100%{transform:translateY(0)}50%{transform:translateY(-7.7px)}}
.netmark{position:absolute;inset:0;margin:auto;width:237.6px;height:237.6px;opacity:.9;}
.netmark .ln{stroke:rgba(212,175,106,.55);stroke-width:1.5;}
.netmark .nd{fill:var(--accent-bright);}

/* ---------- Stats band ---------- */
.stats{background:var(--navy-800);color:#fff;}
.stats .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:19.8px;padding-top:47.3px;padding-bottom:47.3px;}
.stat{text-align:center;padding:7.7px;}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(31.9px,3.52vw,45.1px);line-height:1;color:var(--accent-bright);}
.stat .lbl{margin-top:7.7px;font-size:16.5px;color:rgba(233,242,247,.78);}
.stat+.stat{border-left:1.1px solid rgba(255,255,255,.1);}

/* ---------- Section headers ---------- */
.shead{max-width:673.2px;margin-bottom:41.8px;}
.shead.center{margin-left:auto;margin-right:auto;text-align:center;}
.shead h2{font-size:clamp(27.5px,3.19vw,41.8px);margin-top:14.3px;}
.shead p{margin-top:14.3px;color:var(--muted);font-size:16.5px;}

/* ---------- About ---------- */
.about{background:var(--white);}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:47.3px;align-items:center;}
.about-copy p{color:var(--ink-soft);font-size:16.5px;}
.about-copy p+p{margin-top:15.4px;}
.about-copy strong{color:var(--ink);font-weight:700;}
.about-copy .hl{color:var(--accent-ink);font-weight:700;background:linear-gradient(transparent 62%,var(--accent-soft) 0);padding:0 2.2px;}
.mini-grid{margin-top:25.3px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15.4px;}
.mini{background:var(--paper-2);border:1.1px solid var(--line);border-radius:14.3px;padding:15.4px;}
.mini .ic{width:29.7px;height:29.7px;color:var(--accent);}
.mini h3{margin-top:9.9px;font-size:16.5px;}
.mini p{margin-top:5.5px;font-size:16.5px;color:var(--muted);line-height:1.45;}
.about-media{position:relative;}
.about-photo{position:relative;}
.about-media .slot{width:100%;height:376.2px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);}
.about-media .badge{position:absolute;left:-19.8px;bottom:25.3px;background:var(--white);border-radius:16.5px;padding:15.4px 17.6px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:12.1px;}
.about-media .badge .b-num{font-family:var(--font-display);font-weight:700;font-size:27.5px;color:var(--accent);line-height:1;}
.about-media .badge .b-l{font-size:14px;color:var(--muted);max-width:118.8px;}
.about-media .about-cta{margin-top:48.4px;}

/* ---------- Perfil desejado ---------- */
.profile{background:var(--paper);position:relative;overflow:hidden;}
.profile::before{content:"";position:absolute;top:-132px;left:-132px;width:374px;height:374px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 16%,transparent),transparent 72%);pointer-events:none;}
.profile .wrap{position:relative;}
.profile .shead{max-width:726px;margin-bottom:35.2px;}
.profile .shead p{color:var(--ink-soft);font-size:clamp(16.5px,1.54vw,18.7px);}

/* Os cinco requisitos lado a lado: a linha inteira é lida de uma vez, em vez
   de uma lista vertical competindo com uma segunda coluna de conteúdo. */
.profile-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:17.6px;}
.profile-list li{
  display:flex;flex-direction:column;align-items:flex-start;gap:15.4px;
  background:var(--white);color:var(--ink);
  border-radius:var(--radius);padding:24.2px 22px;font-size:20.9px;font-weight:600;line-height:1.4;
  border-top:3.3px solid transparent;box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}
.profile-list li:hover{transform:translateY(-6.6px);box-shadow:var(--shadow-card-hover);border-top-color:var(--accent);}
.profile-list li .li-badge{
  flex:none;width:46.2px;height:46.2px;border-radius:13.2px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-soft),color-mix(in oklab,var(--accent-soft) 55%,white));
  color:var(--accent-ink);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.profile-list li:hover .li-badge{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.06);}
.profile-list li .li-ic{width:23.1px;height:23.1px;}
.profile-list li .li-txt{align-self:stretch;}

/* Ponte para a seção seguinte: o último requisito fala em identificação com a
   cultura, então o convite natural é continuar por ali. */
.profile-foot{margin-top:33px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.profile-foot p{color:var(--muted);font-size:16.5px;}

/* ---------- Cultura e Princípios ---------- */
.culture{background:var(--white);position:relative;overflow:hidden;}
.culture::before{content:"";position:absolute;top:-154px;right:-132px;width:418px;height:418px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklab,var(--accent) 14%,transparent),transparent 72%);pointer-events:none;}
.culture .wrap{position:relative;}
.culture .shead{margin-bottom:30.8px;}
/* Degradê ecoando o do hero (teal → navy), o que amarra o começo e o meio da
   página. Sobre o fundo branco da seção, o bloco escuro vira o ponto de
   fixação do olhar, e os princípios claros orbitam em volta. */
.culture-statement{
  position:relative;overflow:hidden;max-width:1056px;margin:0 auto;text-align:center;
  font-size:clamp(17.6px,1.71vw,20.9px);line-height:1.6;color:rgba(233,242,247,.9);
  /* Os brilhos são camadas do próprio background (e não um ::after por cima),
     para não passarem um véu sobre o texto. */
  background:
    radial-gradient(46% 62% at 88% 8%, rgba(123,188,203,.30), transparent 70%),
    radial-gradient(40% 52% at 8% 96%, rgba(54,144,159,.28), transparent 70%),
    linear-gradient(125deg,#2c6e7e 0%,#1a4760 55%,#0e2a47 100%);
  border-radius:var(--radius-lg);padding:26.4px 44px;
  box-shadow:0 33px 66px -33px rgba(14,42,71,.55);}
.culture-statement strong{font-weight:700;color:var(--accent-bright);}
.principles-title{
  margin:37.4px 0 17.6px;text-align:center;font-size:16.5px;font-weight:700;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;}
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13.2px 17.6px;}
.principles li{
  display:flex;align-items:center;gap:13.2px;
  background:var(--paper-2);border:1.1px solid var(--line);border-radius:var(--radius);
  padding:14.3px 17.6px;font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);}
.principles li:hover{transform:translateY(-3.3px);background:var(--white);border-color:var(--accent-soft);box-shadow:var(--shadow-card);}
/* Um ícone por princípio, no mesmo vocabulário dos badges do Perfil desejado. */
.principles .pr-ic{
  flex:none;width:38.5px;height:38.5px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-soft),color-mix(in oklab,var(--accent-soft) 55%,white));
  color:var(--accent-ink);transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.principles .pr-ic svg{width:20.9px;height:20.9px;}
.principles li:hover .pr-ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.06);}

/* ---------- Cards grid (Áreas) ---------- */
.areas{background:var(--navy-800);color:#fff;position:relative;overflow:hidden;}
.areas .shead h2,.areas .eyebrow{color:#fff;}
.areas .eyebrow{color:var(--gold-500);}
.areas .shead p{color:rgba(233,242,247,.74);}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19.8px;}

/* Pill / tab menu for grouped areas */
.area-tabs{display:flex;gap:9.9px;justify-content:center;flex-wrap:wrap;margin:-9.9px 0 35.2px;}
.area-tab{
  position:relative;overflow:hidden;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:16.5px;
  padding:11px 22px;border-radius:1098.9px;
  border:1.65px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:rgba(233,242,247,.82);
  display:inline-flex;align-items:center;gap:9.9px;
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.area-tab:hover{color:#fff;border-color:rgba(255,255,255,.5);transform:translateY(-2.2px);}
.area-tab .tab-count{font-size:14px;font-weight:700;padding:2.2px 7.7px;border-radius:1098.9px;background:rgba(255,255,255,.14);color:#fff;line-height:1.4;transition:background .25s,color .25s;}
.area-tab.active{background:var(--accent);border-color:var(--accent);color:#231a07;}
.area-tab.active .tab-count{background:rgba(35,26,7,.16);color:#231a07;}
.area-tab .bar{position:absolute;left:0;bottom:0;height:3.3px;width:0;background:rgba(35,26,7,.4);border-radius:0 3.3px 3.3px 0;}
.area-tab.active .bar{animation:tabfill var(--rotate,7000ms) linear forwards;}
.areas.paused .area-tab.active .bar{animation-play-state:paused;}
@keyframes tabfill{from{width:0}to{width:100%}}

/* Card entrance on group switch */
.card.swap-in{animation:cardIn .55s var(--ease) both;}
@keyframes cardIn{from{opacity:0;transform:translateY(17.6px) scale(.98)}to{opacity:1;transform:none}}
[data-fun="calm"] .card.swap-in{animation:none;}
@media (prefers-reduced-motion:reduce){.card.swap-in{animation:none;}.area-tab.active .bar{animation:none;width:0;}}

/* Video section */
.video-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:52.8px;align-items:center;}
.video-copy{max-width:462px;}
.video-copy h2{font-size:clamp(30.8px,3.52vw,41.8px);margin-top:15.4px;}
.video-copy p{margin-top:15.4px;color:var(--muted);font-size:16.5px;line-height:1.6;}
.video-stat{
  margin-top:26.4px;display:inline-flex;align-items:center;gap:15.4px;
  background:linear-gradient(135deg,var(--paper-2),var(--white));
  border:1.1px solid var(--line);border-left:3.3px solid var(--accent);
  border-radius:16.5px;padding:15.4px 19.8px;box-shadow:var(--shadow-card);
  animation:floaty-dado 7s ease-in-out infinite;}
.video-stat .k{
  flex:none;font-family:var(--font-display);font-weight:700;font-size:27.5px;
  line-height:1;color:var(--gold-600);}
.video-stat .l{font-size:15.4px;line-height:1.4;color:var(--ink-soft);}
.video-stat .l strong{font-weight:700;color:var(--accent-ink);}

.video-frame{position:relative;width:100%;padding-bottom:56.25%;height:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);background:#000;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.card{
  background:#fff;border-radius:var(--radius);padding:25.3px 24.2px 22px;position:relative;
  box-shadow:var(--shadow-card);transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  display:flex;flex-direction:column;min-height:227.7px;
}
.card:hover{transform:translateY(-8.8px);box-shadow:var(--shadow-card-hover);}
.card-head{display:flex;align-items:center;gap:13.2px;}
.card .ic{flex:none;width:33px;height:33px;color:var(--accent);opacity:.9;}
.card h3{font-size:18.7px;margin:0;color:var(--navy-800);}
.card p{margin-top:9.9px;color:var(--muted);font-size:16.5px;line-height:1.5;flex:1;}
.card-foot{margin-top:14.3px;display:flex;align-items:center;justify-content:space-between;gap:11px;flex-wrap:wrap;}
/* O espaçamento passou para o .card-foot, que agora é quem separa do texto. */
.card .more{margin-top:0;font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--navy-700);display:inline-flex;align-items:center;gap:7.7px;
  border-bottom:2.2px solid var(--accent);padding-bottom:3.3px;width:max-content;max-width:100%;transition:gap .25s var(--ease);}
.card .more svg{width:14.3px;height:14.3px;flex:none;}
.card:hover .more{gap:14.3px;}

/* ---------- Vagas abertas ---------- */
/* A primeira camada é a emenda com a seção Áreas: começa exatamente no
   --navy-800 dela e se dissolve na foto até ~20% da altura, no lugar do corte
   reto que havia entre as duas. */
.vagas{background:
  linear-gradient(180deg,rgba(14,42,71,1) 0%,rgba(14,42,71,.92) 5%,rgba(14,42,71,.55) 11%,rgba(14,42,71,0) 20%),
  linear-gradient(rgba(10,25,44,.45),rgba(10,25,44,.55)),
  url("web/fundo-vagas.jpg") center/cover no-repeat;
  color:#fff;position:relative;overflow:hidden;}
.vagas .wrap{position:relative;}
.vagas .shead h2{color:#fff;}
.vagas .eyebrow{color:var(--gold-500);}
.vagas .shead p{color:rgba(233,242,247,.78);}

/* Cada vaga é um card de vidro sobre a foto: antes eram ícone, texto e botão
   soltos no fundo, o que ficava frágil — ainda mais com uma vaga só. O grid
   centraliza tanto uma quanto três. */
.vagas-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:26.4px;}
.vaga-card{
  flex:1 1 319px;max-width:418px;
  display:flex;flex-direction:column;align-items:flex-start;gap:19.8px;text-align:left;
  background:rgba(255,255,255,.07);backdrop-filter:blur(15.4px);
  border:1.1px solid rgba(255,255,255,.17);border-radius:var(--radius-lg);
  padding:30.8px 30.8px 26.4px;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);}
.vaga-card:hover{transform:translateY(-6.6px);background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.32);box-shadow:0 33px 66px -33px rgba(0,0,0,.65);}
.vaga-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:15.4px;}
.vaga-ic{flex:none;width:57.2px;height:57.2px;border-radius:17.6px;
  background:rgba(255,255,255,.1);border:1.1px solid rgba(255,255,255,.14);
  color:var(--accent-bright);display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);}
.vaga-ic svg{width:28.6px;height:28.6px;}
.vaga-card:hover .vaga-ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.06);}
.vaga-tag{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-500);background:rgba(212,175,106,.14);border:1.1px solid rgba(212,175,106,.3);
  padding:6.6px 13.2px;border-radius:1098.9px;}
.vaga-kicker{display:block;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,242,247,.55);}
.vaga-role{font-family:var(--font-display);font-weight:700;font-size:24.2px;line-height:1.2;color:#fff;margin-top:6.6px;}
.vaga-desc{color:rgba(233,242,247,.74);font-size:16.5px;line-height:1.55;flex:1;}
.vaga-actions{width:100%;display:flex;justify-content:center;align-items:center;gap:19.8px;flex-wrap:wrap;margin-top:4.4px;}
.vaga-actions .btn svg{width:15.4px;height:15.4px;}

/* Aviso acima dos cards: tom azulado, próximo do fundo — é um leve destaque,
   não um alerta. O dourado ficou reservado para o CTA da seção. */
.vagas-alert{
  display:flex;align-items:center;justify-content:center;gap:13.2px;
  max-width:792px;margin:0 auto 33px;padding:15.4px 26.4px;
  background:rgba(123,188,203,.07);border:1.1px solid rgba(123,188,203,.2);border-radius:var(--radius-lg);
  color:rgba(233,242,247,.86);font-size:16.5px;line-height:1.5;text-align:left;}
.vagas-alert svg{flex:none;width:22px;height:22px;color:var(--accent-bright);}
.vagas-alert strong{color:var(--accent-bright);font-weight:700;}

/* Fecho da seção: quem não achou a própria área continua tendo um caminho. */
.vagas-foot{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:19.8px;text-align:center;}

/* Selo de vaga aberta no card da área. Dourado porque é o acento reservado
   aos CTAs da página; texto escuro para contraste sobre o fundo claro. */
.vaga-flag{
  display:inline-flex;align-items:center;gap:6.6px;
  font-family:var(--font-display);font-weight:700;font-size:12.1px;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  color:#4a340f;background:linear-gradient(135deg,var(--gold-500),var(--gold-300));
  border:1.1px solid var(--gold-600);padding:5.5px 12.1px;border-radius:1098.9px;
  box-shadow:0 6.6px 15.4px -8.8px rgba(168,127,62,.7);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;}
.vaga-flag::before{
  content:"";width:6.6px;height:6.6px;border-radius:50%;flex:none;
  background:#3f7d52;box-shadow:0 0 0 3.3px rgba(63,125,82,.25);}
.vaga-flag:hover{transform:translateY(-2.2px);filter:brightness(1.05);
  box-shadow:0 11px 22px -8.8px rgba(168,127,62,.8);}

/* Destaque disparado ao chegar em Vagas pelo selo. Anima só box-shadow e
   border-color: o card tem [data-reveal], que usa transform, e animar transform
   aqui brigaria com a entrada dele. */
@keyframes vagaDestaque{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);border-color:rgba(255,255,255,.17);
          background-color:rgba(255,255,255,.07);}
  18%{box-shadow:0 0 0 3.3px rgba(255,255,255,.92),0 22px 55px -22px rgba(255,255,255,.4);
      border-color:rgba(255,255,255,.92);background-color:rgba(255,255,255,.19);}
}
.vaga-card.destaque{animation:vagaDestaque 1.6s var(--ease) 1;}
@media (prefers-reduced-motion:reduce){
  /* Sem brilhar: o anel aparece estático e o JS o retira no mesmo tempo. */
  .vaga-card.destaque{animation:none;
    box-shadow:0 0 0 3.3px rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);}
}

/* ---------- Benefits ---------- */
.benefits{background:var(--paper);}
.benefits .shead{margin-bottom:52.8px;}
/* Subtítulos em destaque: saem do cinza de apoio, ganham corpo e vão para a
   fonte de título (Poppins), ficando entre o h2 e o texto de apoio na
   hierarquia. Um bloco só para as três seções que usam esse nível.
   (A cor sobre fundo escuro é ajustada em .voices .shead p, mais abaixo.) */
.benefits .shead p,
.video-copy p,
.voices .shead p{font-family:var(--font-display);margin-top:17.6px;
  font-size:clamp(17.6px,1.45vw,20.9px);line-height:1.55;
  color:var(--ink-soft);font-weight:500;}
/* Grade 3×2 de cards: as duas colunas separadas por filetes ocupavam menos de
   metade da seção e deixavam o texto miúdo. Como card, cada benefício ganha
   corpo e a seção preenche a tela. */
.perk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30.8px;}
.perk{
  display:flex;align-items:flex-start;gap:19.8px;
  background:var(--white);border-radius:var(--radius-lg);padding:35.2px 30.8px;
  box-shadow:var(--shadow-card);border-top:3px solid transparent;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}
.perk:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-top-color:var(--accent);}
.perk .ic{flex:none;width:59.4px;height:59.4px;border-radius:17.6px;
  background:linear-gradient(135deg,var(--accent-soft),color-mix(in oklab,var(--accent-soft) 55%,white));
  color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);}
.perk .ic svg{width:29.7px;height:29.7px;}
.perk:hover .ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.06);}
.perk-text h4{font-size:20.9px;line-height:1.3;}
.perk-text p{margin-top:9.9px;font-size:16.5px;color:var(--muted);line-height:1.6;}

/* ---------- Testimonials ---------- */
.voices{background:var(--navy-900);color:#fff;}
.voices .shead{max-width:836px;margin-bottom:33px;}
.voices .shead h2,.voices .eyebrow{color:#fff;}
.voices .eyebrow{color:var(--gold-500);}
.voices .shead p{color:rgba(233,242,247,.9);}
/* Alinhado à mesma calha das outras seções — antes era mais largo e os
   depoimentos ficavam desencaixados do resto da página. */
.voices .wrap{max-width:var(--maxw);}
/* minmax(0,1fr): sem isso o texto do cargo (que é largo) empurra a coluna e os
   quatro depoimentos saem com larguras diferentes. */
.voice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26.4px;}
.voice{background:transparent;border:0;padding:0;text-align:center;display:flex;flex-direction:column;align-items:center;transition:transform .3s var(--ease);}
.voice:hover{transform:translateY(-6.6px);}
.voice .av{width:114.4px;height:114.4px;border-radius:50%;flex:none;object-fit:cover;object-position:50% 65%;
  border:3.3px solid rgba(255,255,255,.18);box-shadow:0 17.6px 35.2px -15.4px rgba(0,0,0,.5);margin-bottom:17.6px;}
.voice .q{margin:0;width:100%;font-size:16.5px;line-height:1.5;color:rgba(233,242,247,.92);}
.voice .who{width:100%;margin-top:auto;padding-top:15.4px;display:flex;flex-direction:column;align-items:center;gap:4.4px;}
.voice .who .nm{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--accent-bright);}
/* O cargo quebra em duas linhas em vez de ser cortado por reticências —
   "Intern em Recursos Hídricos e Meio Ambiente" não cabe em uma linha. */
.voice .who .rl{width:100%;font-size:14px;line-height:1.4;color:rgba(233,242,247,.66);}
.voice .who .rl em{font-style:italic;color:rgba(233,242,247,.85);}

/* ---------- FAQ ---------- */
.faq{background:var(--paper-2);}
.faq-list{max-width:811.8px;margin:0 auto;}
.qa{background:#fff;border:1.1px solid var(--line);border-radius:14.3px;margin-bottom:12.1px;overflow:hidden;transition:box-shadow .3s,border-color .3s;}
.qa.open{box-shadow:var(--shadow-card);border-color:var(--accent-soft);}
.qa button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:17.6px 22px;display:flex;align-items:center;justify-content:space-between;gap:19.8px;
  font-family:var(--font-display);font-weight:600;font-size:16.5px;color:var(--navy-800);}
.qa .plus{width:22px;height:22px;flex:none;position:relative;transition:transform .35s var(--ease);}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2.2px;}
.qa .plus::before{top:50%;left:0;right:0;height:2.75px;transform:translateY(-50%);}
.qa .plus::after{left:50%;top:0;bottom:0;width:2.75px;transform:translateX(-50%);transition:transform .35s var(--ease);}
.qa.open .plus::after{transform:translateX(-50%) scaleY(0);}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.qa .ans-inner{padding:0 22px 19.8px;color:var(--ink-soft);font-size:16.5px;line-height:1.6;}
/* O CTA fecha a página: quem leu as dúvidas está a um clique da inscrição. */
.faq-cta{margin-top:30px;display:flex;justify-content:center;}

/* ---------- Footer ---------- */
.foot{background:var(--navy-900);color:rgba(233,242,247,.7);padding:53.9px 0 27.5px;}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:72px;padding-bottom:31.9px;border-bottom:1.1px solid rgba(255,255,255,.1);}
.foot-links{display:flex;gap:26.4px;}
.foot-seal{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:center;margin-left:-72px;}
.foot-seal img{width:183.75px;height:auto;display:block;}
.foot .brand .logo{height:31.9px;width:auto;display:block;}
.foot-top p{margin-top:14.3px;max-width:336.6px;font-size:16.5px;}
.foot h5{font-family:var(--font-display);font-weight:600;color:#fff;font-size:16.5px;letter-spacing:.04em;margin-bottom:14.3px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9.9px;font-size:16.5px;}
.foot ul a:hover{color:var(--accent-bright);}
.foot .socials{display:flex;gap:12.1px;margin-top:15.4px;}
.foot .socials a{width:35.2px;height:35.2px;border-radius:9.9px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;transition:background .25s, transform .25s;}
.foot .socials a:hover{background:var(--accent);transform:translateY(-3.3px);}
.foot .socials svg{width:17.6px;height:17.6px;color:#fff;}
.foot-bottom{padding-top:22px;display:flex;justify-content:space-between;gap:17.6px;flex-wrap:wrap;font-size:14px;}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(30.8px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
[data-reveal-delay="4"]{transition-delay:.32s;}
[data-reveal-delay="5"]{transition-delay:.4s;}
[data-fun="calm"] [data-reveal]{opacity:1;transform:none;transition:none;}
[data-fun="calm"] .fc-1,[data-fun="calm"] .fc-2,[data-fun="calm"] .fc-3,[data-fun="calm"] .fc-4,[data-fun="calm"] .video-stat{animation:none;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .fc-1,.fc-2,.fc-3,.fc-4,.video-stat{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Responsive ---------- */
/* Telas baixas (notebooks 768px, janelas com muitas barras): comprime os
   blocos mais altos para que continuem cabendo em uma tela. */
@media (max-height:820px){
  .faq .shead{margin-bottom:26.4px;}
  .faq .qa{margin-bottom:8.8px;}
  .faq .qa button{padding:13.2px 19.8px;}
  .voices .shead{margin-bottom:22px;}
  .benefits .shead{margin-bottom:30.8px;}
  .perk-grid{gap:19.8px;}
  .perk{padding:24.2px 22px;gap:17.6px;}
  .perk .ic{width:52.8px;height:52.8px;border-radius:15.4px;}
  .perk .ic svg{width:26.4px;height:26.4px;}
  .perk-text h4{font-size:18.7px;}
  .perk-text p{margin-top:8.8px;line-height:1.55;}
  .vagas .shead{margin-bottom:26.4px;}
  .vagas-alert{padding:11px 19.8px;margin-bottom:22px;}
  .vaga-card{padding:22px 24.2px 19.8px;gap:14.3px;}
  .vaga-ic{width:48.4px;height:48.4px;border-radius:14.3px;}
  .vaga-ic svg{width:24.2px;height:24.2px;}
  .vaga-role{font-size:20.9px;}
  .vagas-foot{margin-top:26.4px;gap:15.4px;}
}
@media (max-width:1080px){
  /* Os sete links da nav somam ~980px com a marca e o CTA — no tablet em
     retrato estouravam para fora da tela. Daqui para baixo quem navega é a
     gaveta lateral. */
  .nav-links{display:none;}
  .menu-toggle{display:flex;align-items:center;justify-content:center;}
  .nav-drawer{display:flex;}
  .nav-scrim{display:block;}

  /* Abaixo de 1080px o .hero-visual era escondido, e os quatro dados iam junto
     com a treliça — desapareciam da página. Aqui ele deixa de ser palco de
     posicionamento absoluto e vira uma lista, encaixada entre o subtítulo e os
     botões.

     display:contents dissolve o .hero-text (que não tem estilo próprio, é só
     wrapper): os filhos dele passam a ser irmãos do .hero-visual no mesmo flex
     container, e é isso que permite intercalar os dados no meio do texto sem
     duplicar o conteúdo no HTML. O gap do grid vai a zero porque agora ele
     valeria entre TODOS os blocos do hero, brigando com as margens de cada um. */
  .hero-inner{display:flex;flex-direction:column;align-items:flex-start;gap:0;}
  .hero-text{display:contents;}
  .hero-actions{order:1;}

  .hero-visual{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8.8px;
    position:static;order:0;width:100%;height:auto;margin-top:26.4px;}
  /* A treliça é decorativa e depende do palco absoluto — não acompanha a lista. */
  .netmark{display:none;}
  /* Cada card vira uma linha: número à esquerda, rótulo à direita. Empilhados
     na vertical eles custariam ~270px de altura e empurrariam os CTAs para
     fora da primeira tela. */
  .float-card{
    position:static;animation:none;
    display:flex;align-items:center;gap:13.2px;
    width:100%;padding:11px 15.4px;border-radius:13.2px;}
  .float-card .k{flex:none;min-width:52.8px;font-size:22px;}
  .float-card .l{margin-top:0;font-size:14px;line-height:1.35;}
  .fc-4 .l{max-width:none;}
  /* Quatro depoimentos em 753px davam colunas de 154px, mais estreitas que o
     próprio avatar. */
  .voice-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-grid,.video-grid{grid-template-columns:minmax(0,1fr);gap:35.2px;}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .profile-list{grid-template-columns:repeat(3,minmax(0,1fr));}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .perk-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats .wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:29.7px;}
  .stat:nth-child(3){border-left:0;}
}
@media (max-width:680px){
  /* No celular a tela é estreita e alta: forçar uma seção por tela deixaria
     blocos enormes com muito vazio, então volta a fluir pelo conteúdo. */
  .section{min-height:0;display:block;padding:clamp(47.3px,11vw,70.4px) 0;scroll-margin-top:56px;}

  /* Nav: os links do desktop dão lugar ao hamburger, que agora abre a gaveta.
     O botão de inscrição continua visível, em versão compacta — é o objetivo
     da página e sumia por completo antes. */
  .nav{padding:12.1px 19.8px;}
  .nav.scrolled{padding:8.8px 19.8px;}
  .nav .nav-cta{gap:8.8px;}
  .nav .nav-cta .btn-secondary{padding:9.9px 15.4px;font-size:13.2px;}

  /* Hero: o padding lateral de 52.8px sobrava do desktop e deixava só 270px de
     texto numa tela de 375px. Os <br> do título e do subtítulo foram medidos
     para o desktop — no celular a quebra natural lê melhor.
     Cada <br> tem um espaço antes dele no HTML: com display:none a quebra
     desaparece sem deixar separação, e as palavras grudavam ("nosetor"). No
     desktop esse espaço cai no fim da linha e o CSS o descarta. */
  .hero-inner{padding:99px 19.8px 55px;gap:0;}
  .hero h1 br,.hero .sub br{display:none;}
  .hero h1{font-size:clamp(29.7px,8.6vw,36.3px);}
  .hero .sub{margin-top:15.4px;}
  .hero-actions{margin-top:24.2px;gap:11px;align-self:center;}
  .hero-actions .btn{flex:1 1 auto;justify-content:center;}

  /* Calha lateral um pouco mais estreita, acompanhando a nav. */
  .wrap{padding:0 19.8px;}

  .card-grid,.voice-grid,.perk-grid{grid-template-columns:minmax(0,1fr);}

  /* About: os três minicards em três colunas eram a causa do scroll
     horizontal — o min-content deles esticava o grid além da tela. */
  .mini-grid{grid-template-columns:minmax(0,1fr);gap:11px;}
  .mini{padding:14.3px 15.4px;}
  .about-media .slot{height:264px;}
  /* O selo saía da tela com o deslocamento negativo do desktop. */
  .about-media .badge{left:11px;right:11px;bottom:13.2px;padding:12.1px 15.4px;}
  .about-media .badge .b-l{max-width:none;}
  .about-media .about-cta{display:none;}

  /* Perfil: em uma coluna o card fica largo, e 20.9px era corpo de título. */
  .profile-list,.principles{grid-template-columns:minmax(0,1fr);}
  .profile-list li{flex-direction:row;align-items:center;gap:14.3px;padding:15.4px 17.6px;font-size:17.6px;border-top:0;border-left:3.3px solid transparent;}
  .profile-list li:hover{transform:translateX(6.6px);border-left-color:var(--accent);}
  .profile-list li .li-badge{width:41.8px;height:41.8px;}
  .profile-foot{display:none;}

  /* Cultura: 44px de padding lateral em uma caixa de 320px deixavam 232px de
     texto útil. */
  .culture-statement{padding:22px 19.8px;font-size:16.5px;border-radius:var(--radius);}
  .principles li{padding:12.1px 14.3px;}

  /* Áreas: as três abas somavam 378px numa faixa de 335px. Antes elas
     empilhavam em várias linhas, depois viraram faixa rolável — e aí a última
     ficava cortada fora da tela. Agora dividem a largura em partes iguais
     (flex:1 1 0), o que torna o estouro impossível em qualquer largura, e o
     conjunto fica centralizado e parado.

     O max-width evita o oposto no limite de 680px, onde três abas soltas
     ficariam largas e vazias. */
  .area-tabs{
    display:flex;flex-wrap:nowrap;justify-content:center;
    width:100%;max-width:462px;margin:0 auto 26.4px;padding:0;
    overflow:visible;}
  .area-tab{
    flex:1 1 0;min-width:0;justify-content:center;
    font-size:13.75px;padding:9.9px 8.8px;min-height:44px;}
  /* Com a largura repartida, o contador não caberia junto do rótulo. */
  .area-tab .tab-count{display:none;}
  .area-tab .t-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .card{min-height:0;padding:22px 19.8px 19.8px;}
  .card .ic{width:28.6px;height:28.6px;}
  .card-head{gap:11px;}

  /* Vagas */
  .vagas-alert{padding:13.2px 17.6px;gap:11px;font-size:15.4px;margin-bottom:24.2px;}
  .vaga-card{flex:1 1 100%;max-width:none;padding:24.2px 22px 22px;gap:15.4px;}
  .vaga-actions{flex-direction:column;align-items:stretch;gap:11px;}
  .vaga-actions .btn{width:100%;}
  .vagas-foot{margin-top:30.8px;}

  .benefits .shead{margin-bottom:30.8px;}
  .perk{padding:24.2px 22px;gap:15.4px;order:99;}
  .perk:nth-child(1){order:1;} /* Programa de feedback */
  .perk:nth-child(4){order:2;} /* Modelo híbrido */
  .perk:nth-child(2){order:3;} /* Plano de saúde */
  .perk:nth-child(5){order:4;} /* Wellhub */
  .perk:nth-child(3){order:5;} /* Vale-transporte */
  .perk:nth-child(6){order:6;} /* Vale-refeição */

  /* Footer: quatro elementos nos quatro cantos de uma grade 2x2 —
       logo | redes
       selo | copyright

     O logo e as redes estão dentro do .foot-about, e o copyright dentro do
     .foot-bottom, que é irmão do .foot-top: são três containers diferentes, e
     nenhum layout no .foot-top alcançaria os quatro ao mesmo tempo.
     display:contents dissolve o .foot-top e o .foot-about (que não têm estilo
     próprio no mobile), promovendo os quatro a itens da mesma grade.

     Efeito colateral aceito: o .foot-top perde seu border-bottom junto com a
     caixa. Com o rodapé reduzido a logo e selo, o filete separava pouco. */
  .foot{padding:41.8px 0 22px;}
  .foot .wrap{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:15.4px;row-gap:28.6px;align-items:center;}
  .foot-top,.foot-about{display:contents;}
  .foot-top p,.foot-links{display:none;}

  /* Posicionamento explícito em vez de confiar na ordem do auto-flow: os itens
     vêm de containers diferentes e um deles pode ficar oculto. */
  .foot .brand{grid-area:1/1;justify-self:start;}
  .foot .socials{grid-area:1/2;justify-self:end;margin-top:0;}
  .foot-seal{grid-area:2/1;justify-self:start;flex:none;align-self:center;margin-left:0;}
  .foot-bottom{grid-area:2/2;justify-self:end;
    flex-direction:column;align-items:flex-end;text-align:right;gap:4.4px;
    padding-top:0;font-size:11.55px;line-height:1.35;}
  /* 132px mantém o selo legível e ainda deixa a coluna do copyright respirar;
     em 183.75px (desktop) não sobraria largura para o texto ao lado. */
  .foot-seal img{width:132px;}
  .stat+.stat{border-left:0;}

  /* Alvos de toque: 44px é o mínimo confortável para o polegar. */
  .foot .socials a{width:44px;height:44px;}
  .qa button{padding:15.4px 17.6px;gap:14.3px;}
}

/* Telas bem estreitas (iPhone SE e afins, 320–400px). */
@media (max-width:400px){
  .hero h1{font-size:28.6px;}
  .hero .sub{font-size:15.4px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .shead h2{font-size:25.3px;}
  .nav .nav-cta .btn-secondary{padding:8.8px 13.2px;font-size:12.1px;min-height:40px;}
  .vaga-role{font-size:20.9px;}
  .voice .av{width:99px;height:99px;}
  /* Mais um passo de compressão: em 320px é o que faz "Consultoria" caber
     inteira, sem reticências. */
  .area-tabs{gap:4.4px;}
  .area-tab{font-size:12.1px;padding:8.8px 6.6px;}
  /* A lista de dados do hero soma ~240px antes dos botões; comprimida, devolve
     ~50px para os CTAs subirem na primeira tela. */
  .hero-visual{gap:6.6px;margin-top:19.8px;}
  .float-card{padding:8.8px 13.2px;}
  .float-card .k{min-width:46.2px;font-size:19.8px;}
  .float-card .l{font-size:13.2px;}
}

/* Movimento leve nos cards de dados do hero (mobile e tablet), no mesmo
   espírito dos cards flutuantes do desktop.

   Seletor com .hero-visual (0,2,0) para vencer o .float-card{animation:none}
   do bloco de 1080px sem depender da ordem no arquivo. A condição
   prefers-reduced-motion:no-preference é necessária porque a regra global de
   reduced-motion aparece ANTES desta e seria sobreposta — sem ela, quem pediu
   menos movimento voltaria a ver a animação.

   Atrasos escalonados de 0.9s em um ciclo de 6.5s: os vizinhos ficam a ~14% de
   fase, então a aproximação máxima entre dois cards é ~2.8px, bem dentro do
   gap de 8.8px (6.6px abaixo de 400px). */
@media (max-width:1080px) and (prefers-reduced-motion:no-preference){
  .hero-visual .float-card{animation:floaty-lista 6.5s ease-in-out infinite;}
  .hero-visual .fc-2{animation-delay:.9s;}
  .hero-visual .fc-3{animation-delay:1.8s;}
  .hero-visual .fc-4{animation-delay:2.7s;}
}
/* O modo calmo continua desligando tudo (0,3,0 vence o seletor acima). */
[data-fun="calm"] .hero-visual .float-card{animation:none;}

/* Celular em paisagem: sem 100svh no hero, senão o conteúdo não cabe. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .hero{min-height:0;}
  .hero-inner{padding:88px 26.4px 44px;}
}