/* ════════════════════════════════════════════════════════════════════
   vagas.css — Landing "Trabalhe Conosco" do Grupo Hera
   Design system: Montserrat · dourado #CDA667 · navy #12263A
   Seções alternadas (foto / navy / dourado / claro) — ref. vagasherard.pdf
   ════════════════════════════════════════════════════════════════════ */
@font-face{ font-family:'Montserrat'; src:url('Montserrat (1)/Montserrat-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Montserrat'; src:url('Montserrat (1)/Montserrat-Italic-VariableFont_wght.ttf') format('truetype'); font-weight:100 900; font-style:italic; font-display:swap; }

:root{
  --gold:#CDA667; --gold2:#ecd6a6; --gold-deep:#b98f4f;
  --navy:#12263A; --navy2:#1b3550; --navy-deep:#0d1c2b;
  --ink:#12263A; --ink-soft:#41546a; --ink-mute:#6b7c90;
  --paper:#ffffff; --paper2:#f7f5f1; --line:#e7e3db;
  --shadow:0 24px 60px rgba(18,38,58,.10), 0 4px 14px rgba(18,38,58,.06);
  --shadow-lg:0 40px 90px rgba(18,38,58,.18);
  --c:#CDA667; /* accent da empresa (sobrescrito por [data-co]) */
  --radius:18px; --maxw:1200px;
}
/* Acentos por empresa (cores oficiais das marcas) */
[data-co="maxipas"]{ --c:#e6007e; }
[data-co="facil"]  { --c:#f0b800; }
[data-co="metis"]  { --c:#CDA667; }
[data-co="zinea"]  { --c:#22b6ee; }
[data-co="dsg"]    { --c:#364de7; }
[data-co="panexa"] { --c:#0cd5ef; }
[data-co="grupo"]  { --c:#CDA667; }

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Montserrat','Segoe UI',sans-serif; color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:600; letter-spacing:-.5px; line-height:1.1; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ── Header fixo ───────────────────────────────────────────────────── */
.site-head{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:16px 32px; transition:background .3s, box-shadow .3s, padding .3s; }
.site-head .brand{ display:flex; align-items:center; gap:12px; }
.site-head .brand img{ height:34px; width:auto; }
.site-head.scrolled{ background:rgba(13,28,43,.92); backdrop-filter:blur(12px); padding:12px 32px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); }
.head-cta{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600;
  color:var(--navy); background:linear-gradient(135deg,var(--gold),var(--gold2)); padding:11px 22px;
  border-radius:100px; transition:transform .2s, box-shadow .2s; }
.head-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(205,166,103,.4); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0;
  transform:scale(1.04); }
/* camada navy translúcida (cor Hera) sobre a foto — melhora a legibilidade dos textos */
.hero::after{ content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(13,28,43,.82) 0%, rgba(18,38,58,.66) 42%, rgba(13,28,43,.9) 100%),
    rgba(18,38,58,.34); }
.hero-inner{ position:relative; z-index:2; max-width:820px; padding:120px 32px 90px; }
.hero .eyebrow{ display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--gold2); margin-bottom:26px; }
.hero .eyebrow::before,.hero .eyebrow::after{ content:''; width:30px; height:1px; background:var(--gold); opacity:.7; }
.hero h1{ font-size:clamp(40px,6vw,72px); font-weight:600; letter-spacing:-1.5px; }
.hero p.sub{ font-size:clamp(17px,2.2vw,22px); font-weight:400; color:rgba(255,255,255,.9);
  margin:22px auto 0; max-width:560px; line-height:1.55; }
.hero-actions{ margin-top:40px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero-scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.75); font-size:12px; letter-spacing:2px; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ── Botões ────────────────────────────────────────────────────────── */
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:inherit; font-size:15px; font-weight:600;
  padding:15px 30px; border-radius:100px; cursor:pointer; border:1px solid transparent; transition:all .22s ease; }
.btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:var(--navy); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(205,166,103,.45); }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(4px); }
.btn-ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.btn-navy{ background:var(--navy); color:var(--gold2); }
.btn-navy:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(18,38,58,.35); }
.btn-sm{ padding:11px 22px; font-size:13.5px; }

/* ── Seções genéricas ──────────────────────────────────────────────── */
section{ position:relative; }
.sec-pad{ padding:100px 0; }
.sec-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.sec-eyebrow{ font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:14px; }
.sec-head h2{ font-size:clamp(32px,4.4vw,46px); font-weight:600; }
.sec-head p{ font-size:18px; color:var(--ink-soft); margin-top:18px; line-height:1.6; }

/* ── Quem somos (navy) ─────────────────────────────────────────────── */
.quem{ background:var(--navy-deep); color:#fff; }
.quem .sec-eyebrow{ color:var(--gold2); }
.quem .sec-head h2{ color:#fff; }
.quem .sec-head p{ color:rgba(255,255,255,.72); }
.eco-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.eco{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius);
  padding:30px 28px; transition:transform .3s, border-color .3s, background .3s; }
.eco:hover{ transform:translateY(-5px); border-color:var(--c); background:rgba(255,255,255,.06); }
.eco-logo{ height:34px; margin-bottom:20px; }
.eco-logo img{ height:100%; width:auto; object-fit:contain; object-position:left center; }
/* logos de Zínea e Métis 20% menores nos cards */
.eco[data-co="zinea"] .eco-logo,
.eco[data-co="metis"] .eco-logo{ height:27px; }
.eco p{ font-size:15.5px; color:rgba(255,255,255,.72); line-height:1.6; }
.eco .bar{ width:34px; height:3px; border-radius:3px; background:var(--c); margin-bottom:20px; }

/* ── Benefícios (dourado) ──────────────────────────────────────────── */
.benef{ background:linear-gradient(160deg,var(--gold) 0%, var(--gold-deep) 130%); color:var(--navy); }
.benef .sec-eyebrow{ color:var(--navy); opacity:.7; }
.benef-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.benef-card{ background:var(--navy-deep); color:#fff; border-radius:var(--radius); padding:34px 30px;
  box-shadow:0 20px 46px rgba(13,28,43,.28); transition:transform .3s; }
.benef-card:hover{ transform:translateY(-6px); }
.benef-ic{ width:56px; height:56px; border-radius:14px; background:rgba(205,166,103,.16); color:var(--gold2);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.benef-ic svg{ width:28px; height:28px; }
.benef-card h3{ font-size:19px; color:#fff; margin-bottom:8px; }
.benef-card p{ font-size:15px; color:rgba(255,255,255,.7); line-height:1.55; }
.benef-foot{ text-align:center; margin-top:44px; font-size:17px; font-weight:500; color:var(--navy); }

/* ── Vagas (claro) ─────────────────────────────────────────────────── */
.vagas{ background:var(--paper2); }
.filtros{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.filtro{ font-family:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); background:#fff;
  border:1px solid var(--line); padding:9px 20px; border-radius:100px; cursor:pointer; transition:all .2s; }
.filtro:hover{ border-color:var(--gold); color:var(--navy); }
.filtro.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.vaga-list{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.vaga{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  border-left:4px solid var(--c); overflow:hidden; transition:box-shadow .3s, transform .3s; }
.vaga.open{ box-shadow:var(--shadow-lg); }
.vaga-head{ display:flex; align-items:center; gap:20px; padding:24px 28px; cursor:pointer; }
.vaga-head:hover{ background:#fcfbf9; }
.vaga-tt{ flex:1; min-width:0; }
.vaga-tt h3{ font-size:20px; color:var(--navy); font-weight:600; }
.vaga-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:9px; font-size:13.5px; color:var(--ink-mute); }
.vaga-meta span{ display:inline-flex; align-items:center; gap:6px; }
.vaga-emp{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--c); }
.vaga-emp .dot{ width:8px; height:8px; border-radius:50%; background:var(--c); }
.vaga-chev{ flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:transform .3s, background .2s; }
.vaga.open .vaga-chev{ transform:rotate(180deg); background:var(--navy); color:#fff; border-color:var(--navy); }
.vaga-body{ max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); }
.vaga.open .vaga-body{ max-height:1600px; }
.vaga-body-inner{ padding:4px 28px 28px; border-top:1px solid var(--line); }
.vaga-block{ margin-top:22px; }
.vaga-block h4{ font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:12px; }
.vaga-block ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.vaga-block li{ position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-soft); line-height:1.5; }
.vaga-block li::before{ content:''; position:absolute; left:4px; top:8px; width:8px; height:8px; border-radius:50%;
  background:var(--c); }
.vaga-apply{ margin-top:28px; }
.vaga-empty{ text-align:center; color:var(--ink-mute); font-size:16px; padding:50px 0; }

/* ── Banco de talentos (dourado) ───────────────────────────────────── */
.talentos{ background:linear-gradient(160deg,var(--gold) 0%, var(--gold-deep) 130%); color:var(--navy);
  text-align:center; }
.talentos h2{ font-size:clamp(30px,4vw,42px); font-weight:600; }
.talentos .lead{ font-size:18px; color:var(--navy); opacity:.85; margin:18px auto 30px; max-width:640px; line-height:1.6; }
.talentos-areas{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 36px; max-width:760px; }
.area-chip{ background:rgba(13,28,43,.9); color:#fff; font-size:14px; font-weight:500; padding:9px 18px; border-radius:100px; }

/* ── Footer (navy) ─────────────────────────────────────────────────── */
.site-foot{ background:var(--navy-deep); color:#fff; padding:64px 0 40px; text-align:center; }
.foot-logo{ height:40px; margin:0 auto 30px; }
.foot-empresas{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px 40px; margin-bottom:40px; }
.foot-empresas img{ height:26px; width:auto; opacity:.82; transition:opacity .2s; filter:grayscale(.2); }
/* logos de Zínea e Métis 20% menores no rodapé */
.foot-empresas img[alt="Zínea"],
.foot-empresas img[alt="Métis"]{ height:21px; }
.foot-empresas img:hover{ opacity:1; }
.foot-copy{ font-size:13px; color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.08); padding-top:28px; }

/* ── Reveal on scroll ──────────────────────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
[data-reveal].in{ opacity:1; transform:none; }

/* ── Responsivo ────────────────────────────────────────────────────── */
@media (max-width:900px){
  .eco-grid,.benef-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .sec-pad{ padding:70px 0; }
  .eco-grid,.benef-grid{ grid-template-columns:1fr; }
  .site-head{ padding:12px 20px; }
  .head-cta{ padding:9px 16px; font-size:13px; }
  .vaga-head{ padding:20px; gap:14px; }
  .vaga-tt h3{ font-size:17px; }
  .foot-empresas{ gap:22px 28px; }
}