/* ================================================================
   ESTILOS COMPARTILHADOS — PÁGINAS INTERNAS DA VIRTUS EXEC
   A ordem abaixo acompanha a ordem de exibição do BODY: base,
   heróis, conteúdo, timeline, serviços, contato e responsividade.
   Menu e Footer permanecem globais em site-components.js.
   ================================================================ */

/* BASE GLOBAL: define cores, tipografia, largura máxima e regras comuns. */
:root{--navy:#02071f;--navy-soft:#0b1235;--ink:#081030;--paper:#fff;--card:#f3f3f4;--muted:#626a7c;--gold:#d7c6a4;--line:#d5d9e4;--font:"Poppins","Montserrat",Arial,sans-serif;--content:min(1080px,calc(100% - 40px))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--ink);font-family:var(--font);font-weight:400;overflow-x:hidden}
main{display:block}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
figure{margin:0}
.page-container{width:var(--content);margin-inline:auto}
.page-kicker{margin:0 0 15px;color:#aeb8db;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.section-light{padding:92px 0;background:var(--paper)}
.section-navy{padding:92px 0;background:var(--navy);color:#fff}
.section-light h2,.section-navy h2{margin:0 0 28px;font-size:clamp(34px,4.2vw,58px);font-weight:400;line-height:1.08}
.section-title-centered{text-align:center}
.button-outline{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 28px;border:1px solid currentColor;border-radius:9px;background:transparent;color:inherit;font-size:15px;transition:background .2s ease,color .2s ease,transform .2s ease}
.button-outline:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}

/* HERO SOBRE: mantém a fotografia inteira e equilibra texto e imagem. */
.page-hero{padding:156px 0 76px;background:radial-gradient(ellipse 65% 90% at 85% 45%,#15204d 0,rgba(21,32,77,.35) 48%,transparent 75%),var(--navy);color:#fff}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,470px);gap:64px;align-items:center}
.hero-copy h1{max-width:650px;margin:0 0 24px;font-size:clamp(46px,6vw,78px);font-weight:400;line-height:1.02}
.hero-copy>p:last-child{max-width:620px;margin:0;font-size:19px;line-height:1.5}
.about-hero-photo{display:flex;justify-content:center;max-height:520px;overflow:hidden;border-radius:14px;background:#111832}
.about-hero-photo img{width:100%;height:520px;object-fit:contain;object-position:center;background:#111832}

/* CEO: replica o bloco claro do site online, com retrato completo e botão do LinkedIn. */
.ceo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,480px);gap:70px;align-items:center}
.ceo-copy h2{margin-bottom:30px}
.ceo-copy p{margin:0 0 17px;color:#646464;font-size:16px;line-height:1.48}
.ceo-copy strong{font-weight:700}
.ceo-copy .button-outline{min-width:190px;margin-top:18px;color:var(--ink)}
.ceo-copy .button-outline:hover{color:#fff}
.ceo-photo{display:flex;justify-content:center;min-height:0;border-radius:4px;overflow:hidden;background:#eee}
.ceo-photo img{width:100%;height:auto;max-height:700px;object-fit:contain;object-position:center}

/* TIMELINE: cria a linha vertical central e alterna os marcos nos dois lados. */
.timeline-section{padding-bottom:110px}
.timeline{position:relative;margin:48px auto 0;max-width:940px}
.timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:50%;width:2px;background:linear-gradient(#fff,rgba(255,255,255,.28),#fff);transform:translateX(-50%)}
.timeline-item{position:relative;width:50%;min-height:150px;padding:0 48px 36px}
.timeline-item::before{content:"";position:absolute;top:6px;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--navy);box-shadow:0 0 0 5px rgba(255,255,255,.08)}
.timeline-right{margin-left:50%;text-align:left}
.timeline-left{margin-right:50%;text-align:right}
.timeline-right::before{left:-11px}
.timeline-left::before{right:-11px}
.timeline-item h3{margin:0 0 7px;color:var(--gold);font-size:25px;font-weight:400;line-height:1.2}
.timeline-item strong{display:block;margin-bottom:7px;font-size:16px}
.timeline-item p{margin:0;color:#e6e8f2;font-size:15px;line-height:1.5}

/* PROPÓSITO: apresenta missão, visão e valores em cartões claros equivalentes. */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value-card{padding:32px;border-radius:14px;background:var(--card)}
.value-card h3{margin:0 0 16px;font-size:25px;font-weight:400;line-height:1.2}
.value-card p{margin:0;color:#454c5e;font-size:15px;line-height:1.55}

/* HERÓIS DE JORNADA: unifica as páginas Para Candidatos e Para Empresas. */
.journey-hero{padding:164px 0 70px;background:var(--navy);color:#fff}
.journey-intro{text-align:center}
.journey-intro h1{max-width:970px;margin:0 auto 34px;font-size:clamp(43px,5.5vw,72px);font-weight:400;line-height:1.05}
.journey-intro>p:not(.page-kicker){max-width:820px;margin:0 auto;color:#f2f3f8;font-size:17px;line-height:1.5}
.journey-banner{width:100%;height:150px;margin:35px 0 20px;border-radius:4px;object-fit:cover;object-position:center}
.journey-intro .button-outline{color:#fff}
.journey-intro .button-outline:hover{background:#fff;color:var(--navy)}
.button-wide{min-width:min(430px,100%)}
.journey-intro .journey-lead{display:block;max-width:980px;margin:38px auto 0!important;font-size:18px;line-height:1.55}

/* SERVIÇOS DE JORNADA: mantém textos brancos em fundo azul e cartões legíveis. */
.journey-services{padding-top:25px}
.service-stack{display:grid;gap:18px}
.service-card-dark{min-height:190px;padding:34px 40px;border:1px solid rgba(255,255,255,.88);border-radius:12px;background:rgba(2,7,31,.5);color:#fff}
.service-card-dark span{display:block;margin-bottom:11px;color:#8e97b5;font-size:14px;letter-spacing:.14em}
.service-card-dark h3{margin:0 0 12px;font-size:27px;font-weight:400;line-height:1.2}
.service-card-dark p{max-width:850px;margin:0;color:#f3f4f8;font-size:16px;line-height:1.48}
.service-card-dark .service-specialties{margin-top:18px;color:#e1e4ed}
.journey-closing{max-width:900px;margin:38px 0 0!important}
.journey-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:42px}
.journey-cta h2{margin:0}
.journey-cta .button-outline{flex:0 0 auto;color:#fff}
.journey-cta .button-outline:hover{background:#fff;color:var(--navy)}

/* CONTATO: centraliza os canais oficiais e remove qualquer formulário de envio. */
.contact-page{min-height:760px;padding:175px 0 90px;background:radial-gradient(ellipse 75% 75% at 50% 30%,#172250 0,rgba(12,20,58,.62) 42%,var(--navy) 78%);color:#fff}
.contact-panel{max-width:820px;padding:52px;border:1px solid rgba(255,255,255,.3);border-radius:20px;background:rgba(255,255,255,.06);box-shadow:0 22px 70px rgba(0,0,0,.25);text-align:center;backdrop-filter:blur(10px)}
.contact-panel h1{max-width:700px;margin:0 auto 20px;font-size:clamp(42px,5.5vw,66px);font-weight:400;line-height:1.08}
.contact-panel>p:not(.page-kicker){max-width:640px;margin:0 auto 35px;color:#dde1ef;font-size:17px;line-height:1.55}
.contact-links{display:grid;gap:12px;text-align:left}
.contact-links a{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;padding:18px 22px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(2,7,31,.35);transition:background .2s ease,transform .2s ease}
.contact-links a:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.contact-links span{color:#aeb7d2;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.contact-links strong{font-size:17px;font-weight:500;overflow-wrap:anywhere}
.contact-links b{font-size:23px;font-weight:400}

/* BLOG: organiza cartões com imagem à esquerda e texto à direita. */
.blog-hero{min-height:520px;display:flex;align-items:flex-end}
.article-list{display:grid;gap:24px}
.article-card{display:grid;grid-template-columns:minmax(280px,40%) 1fr;overflow:hidden;border-radius:14px;background:var(--card);box-shadow:0 7px 20px rgba(9,16,46,.08)}
.article-card img{width:100%;height:100%;min-height:260px;object-fit:cover}
.article-copy{align-self:center;padding:34px}
.article-copy .page-kicker{color:#667198}
.article-copy h2{margin:0 0 14px;font-size:31px;font-weight:400;line-height:1.18}
.article-copy p:not(.page-kicker){margin:0;color:#4c5367;font-size:16px;line-height:1.5}
.article-link{display:inline-block;margin-top:18px;color:#394563;font-weight:500}

/* ARTIGOS: cria cabeçalho editorial, coluna de leitura e chamada final padronizada. */
.article-hero{padding:165px 0 72px;background:var(--navy);color:#fff}
.article-hero-inner{max-width:960px}
.article-hero h1{max-width:930px;margin:0 0 24px;font-size:clamp(43px,5.5vw,72px);font-weight:400;line-height:1.06}
.article-hero p:not(.page-kicker){max-width:800px;margin:0 0 38px;color:#e1e4ee;font-size:18px;line-height:1.55}
.article-hero img{width:100%;max-height:520px;border-radius:14px;object-fit:cover;object-position:center}
.article-body{max-width:960px;padding:78px 50px 95px;border-radius:0 0 16px 16px;background:#fff}
.article-body>p{margin:0 0 25px;color:#30384c;font-size:18px;line-height:1.75}
.article-body>h2{margin:55px 0 17px;font-size:clamp(29px,3.3vw,43px);font-weight:400;line-height:1.18}
.article-cta{margin-top:65px;padding:38px;border-radius:16px;background:var(--navy);color:#fff}
.article-cta h2{margin:0 0 12px;font-size:32px;font-weight:400}
.article-cta p{margin:0 0 24px;color:#dfe3f0;font-size:16px;line-height:1.5}
.article-cta .button-outline:hover{background:#fff;color:var(--navy)}

/* VÍDEO DO ARTIGO: mantém a prévia do YouTube em proporção 16:9, sem quebrar em telas menores. */
.article-video{margin-top:58px}
.article-video h2{margin:0 0 18px;font-size:clamp(29px,3.3vw,43px);font-weight:400;line-height:1.18}
.video-frame{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#070b20;aspect-ratio:16 / 9;box-shadow:0 16px 35px rgba(4,9,31,.18)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* PRÉVIA OFFLINE: substitui o player quando o arquivo é aberto diretamente pelo computador. */
.offline-video-preview{display:none;position:absolute;inset:0;place-items:center;overflow:hidden;background:#070b20;color:#fff}
.offline-video-preview img{width:100%;height:100%;object-fit:cover;opacity:.68}
.offline-video-preview span{position:absolute;padding:14px 22px;border:1px solid rgba(255,255,255,.9);border-radius:8px;background:rgba(2,7,31,.82);font-weight:600}
.video-frame.is-local-file iframe{display:none}
.video-frame.is-local-file .offline-video-preview{display:grid}

/* MOVIMENTO: faz as seções aparecerem suavemente quando entram na tela. */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
[data-reveal].is-visible{opacity:1;transform:none}

/* TABLET: reduz espaços e transforma composições laterais em uma coluna. */
@media(max-width:850px){
  :root{--content:min(100% - 30px,1080px)}
  .page-hero,.journey-hero{padding-top:145px}
  .about-hero-grid,.ceo-grid,.value-grid{grid-template-columns:1fr}
  .about-hero-grid{gap:35px}
  .about-hero-photo{max-height:none}
  .about-hero-photo img{height:auto;max-height:620px}
  .ceo-grid{gap:40px}
  .ceo-photo img{max-height:760px}
  .section-light,.section-navy{padding:70px 0}
  .journey-services{padding-top:20px}
  .journey-cta{align-items:flex-start;flex-direction:column}
  .contact-page{padding-top:150px}
  .article-card{grid-template-columns:1fr}
  .article-card img{min-height:230px;max-height:380px}
  .article-hero{padding-top:145px}
}

/* CELULAR: empilha a timeline, reduz cartões e mantém todos os links visíveis. */
@media(max-width:600px){
  .hero-copy h1,.journey-intro h1{font-size:42px}
  .journey-banner{height:105px}
  .journey-intro .journey-lead{font-size:16px}
  .timeline::before{left:10px}
  .timeline-item,.timeline-right,.timeline-left{width:100%;min-height:0;margin:0;padding:0 0 40px 48px;text-align:left}
  .timeline-right::before,.timeline-left::before{right:auto;left:-1px}
  .timeline-item h3{font-size:22px}
  .value-grid{grid-template-columns:1fr}
  .service-card-dark{min-height:0;padding:27px 23px}
  .service-card-dark h3{font-size:23px}
  .contact-panel{padding:35px 20px}
  .contact-panel h1{font-size:40px}
  .contact-links a{grid-template-columns:1fr auto;gap:6px 15px}
  .contact-links span{grid-column:1 / -1}
  .article-copy{padding:26px 22px}
  .article-body>p{font-size:17px}
  .article-body{padding:55px 20px 70px}
  .article-cta{padding:28px 23px}
}

/* ACESSIBILIDADE: remove animações quando o visitante prefere menos movimento. */
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}.button-outline,.contact-links a{transition:none}}