/* Eletroparts — estilos compartilhados (cabeçalho, menu, utilidades).
   Os estilos de cada página ficam no <style> do próprio template. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #0B1B33; background: #0B1B33; }
main { display: block; background: #FFFFFF; overflow-x: hidden; }
/* clip evita rolagem lateral causada pelas animações sem quebrar elementos "sticky" */
@supports (overflow: clip) { main { overflow-x: clip; } }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid #ED3237; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: #FFFFFF; color: #0B1B33; padding: 12px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Barra superior */
.topbar { background: #071427; color: #A9B8CF; font-size: 13px; }
.topbar-inner { padding-top: 9px; padding-bottom: 9px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.topbar a { color: #A9B8CF; text-decoration: none; }
.topbar a:hover { color: #FFFFFF; }
.topbar .topbar-strong { color: #FFFFFF; font-weight: 600; }
.topbar-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Cabeçalho */
.site-header { position: sticky; top: 0; z-index: 50; background: #FFFFFF; border-bottom: 1px solid #DCE3EC; }
.site-header-inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 48px; width: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600; }
.main-nav a { text-decoration: none; color: #0B1B33; padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: #0D62AD; }
.main-nav a[aria-current="page"] { color: #0D62AD; border-bottom-color: #ED3237; }
.main-nav .nav-portal { display: none; }
.btn-portal { background: #D9232A; color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 15px; padding: 0 20px; height: 46px; border-radius: 8px; white-space: nowrap; display: flex; align-items: center; flex: none; transition: background .2s ease; }
.btn-portal:hover { background: #B81B21; }
.menu-toggle { display: none; width: 46px; height: 46px; border-radius: 10px; border: 1px solid #DCE3EC; background: #FFFFFF; color: #0B1B33; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex: none; }
.menu-toggle .i-close { display: none; }
.site-header.is-open .menu-toggle .i-open { display: none; }
.site-header.is-open .menu-toggle .i-close { display: inline; }

.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: #ED3237; transform-origin: left; animation: ep-progress linear both; animation-timeline: scroll(root block); }
  @keyframes ep-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

@media (max-width: 1080px) {
  .menu-toggle { display: flex; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #FFFFFF; border-bottom: 1px solid #DCE3EC; box-shadow: 0 18px 30px rgba(11,27,51,.12); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid #EEF2F7; font-size: 16px; }
  .main-nav a[aria-current="page"] { border-bottom-color: #EEF2F7; box-shadow: inset 3px 0 0 #ED3237; padding-left: 12px; }
  .site-header.is-open .main-nav { display: flex; }
  .site-header-inner { gap: 12px; }
  .brand { margin-right: auto; }
}
@media (max-width: 560px) {
  .btn-portal { display: none; }
  .main-nav .nav-portal { display: flex; justify-content: center; margin-top: 14px; background: #D9232A; color: #FFFFFF; border-radius: 10px; border: 0; padding: 14px; }
  .brand img { height: 40px; }
  .topbar-links { display: none; }
}

/* Foto da equipe: mais alta no celular para as pessoas não ficarem pequenas */
@media (max-width: 720px) {
  img.team-photo { aspect-ratio: 4 / 3 !important; object-position: center 78% !important; }
}

/* Vídeo: carrega o player do YouTube só depois do clique */
.yt-lite { cursor: pointer; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Animações de entrada para navegadores sem scroll-timeline (Safari, Firefox) */
html.io .fx .rv, html.io .fx .rv-l, html.io .fx .rv-r, html.io .fx .rv-z { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.io .fx .rv { transform: translateY(36px); }
html.io .fx .rv-l { transform: translateX(-48px); }
html.io .fx .rv-r { transform: translateX(48px); }
html.io .fx .rv-z { transform: scale(.94) translateY(24px); }
html.io .fx .is-in { opacity: 1 !important; transform: none !important; }

/* E-mails longos quebram em vez de vazar da caixa */
a[href^="mailto:"], a[href^="mailto:"] span { overflow-wrap: anywhere; }

@media (max-width: 520px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .tc-card { padding: 28px 20px !important; }
}