/* ==========================================================================
   Santos Brasil — Programa de Estágio 2026
   CSS residual: animações, estados JS e ajustes que o Tailwind CDN não cobre
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* offset do header fixo nas âncoras */
}

body {
  overflow-x: hidden;
}

::selection {
  background: #006EC8;
  color: #fff;
}

/* ==========================================================================
   HEADER — transparente no hero, sólido (branco) ao scroll
   ========================================================================== */
#header .nav-link {
  position: relative;
  font-weight: 500;
  color: #fff;
  transition: color .3s ease;
}
#header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: #CBDB2A;
  transition: width .3s ease;
}
#header .nav-link:hover::after,
#header .nav-link.is-active::after {
  width: 100%;
}

/* botão hamburger e ícone Santos Brasil herdam a cor do texto */
#header { color: #fff; }
#navToggle .bar { background: #fff; }

/* Logo: branca no topo (sobre o hero), colorida ao scroll */
#header .logo-solid { display: none; }
#header .logo-hero  { display: block; }

/* Estado sólido ao scrollar */
#header.is-scrolled {
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 42, 80, 0.08);
  color: #006EC8;
}
#header.is-scrolled .nav-link { color: #006EC8; }
#header.is-scrolled .nav-link:hover { color: #006EC8; }
#header.is-scrolled .nav-link.is-active { color: #006EC8; }
#header.is-scrolled #navToggle .bar { background: #006EC8; }
#header.is-scrolled .logo-solid { display: block; }
#header.is-scrolled .logo-hero  { display: none; }

/* ==========================================================================
   MENU MOBILE — overlay full-screen
   ========================================================================== */
.mobile-menu {
  display: none;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 40;
}
.mobile-menu.is-open {
  display: flex;
  opacity: 1;
}
.mobile-link {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  transition: color .25s ease;
}
.mobile-link:hover { color: #CBDB2A; }

/* Animação do hamburger em X quando aberto */
#navToggle.is-open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#navToggle.is-open .bar:nth-child(2) { opacity: 0; }
#navToggle.is-open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* trava o scroll do body quando o menu está aberto */
body.no-scroll { overflow: hidden; }

/* ==========================================================================
   BOTÃO CTA
   ========================================================================== */
.btn-cta {
  will-change: transform;
}
.btn-cta:hover {
  transform: translateY(-2px) scale(1.02);
}

/* ==========================================================================
   REVEAL ON SCROLL — reveals direcionais (feeling Santos Brasil)
   Distâncias 70px + easing cubic-bezier(.19,1,.22,1), como o site oficial.
   O estado oculto só é aplicado quando o JS está ativo (html.js) — fail-safe.
   ========================================================================== */
.reveal {
  transition: transform 1.25s cubic-bezier(.19,1,.22,1), opacity .9s cubic-bezier(.19,1,.22,1);
  will-change: transform, opacity;
}
html.js .reveal        { opacity: 0; transform: translate3d(0, 70px, 0); }   /* padrão: sobe */
html.js .reveal-left   { opacity: 0; transform: translate3d(-70px, 0, 0); }  /* entra da esquerda */
html.js .reveal-right  { opacity: 0; transform: translate3d(70px, 0, 0); }   /* entra da direita */
html.js .reveal-down   { opacity: 0; transform: translate3d(0, -70px, 0); }  /* desce */
html.js .reveal-scale  { opacity: 0; transform: scale(1.14); }               /* escala (center) */
.reveal.is-visible     { opacity: 1 !important; transform: none !important; }

.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }
.reveal-delay-4 { transition-delay: .48s; }
.reveal-delay-5 { transition-delay: .60s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-left, html.js .reveal-right,
  html.js .reveal-down, html.js .reveal-scale { opacity: 1; transform: none; }
  .reveal { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glowRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ==========================================================================
   ✦ PREMIUM MOTION SYSTEM — hero cinematográfico, jornada, micro-interações
   ========================================================================== */

/* ---------- Barra de progresso de leitura (topo) ---------- */
#scrollbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: #CBDB2A;
  z-index: 60; will-change: width;
}

/* ---------- HERO: Ken Burns na foto ---------- */
.hero-zoom { animation: kenburns 24s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.14); } }

/* ---------- HERO: contêineres flutuantes ---------- */
.float-layer { position: absolute; inset: 0; overflow: hidden; z-index: 5; pointer-events: none; }
.float-box {
  position: absolute; border-radius: 7px;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 -6px 12px rgba(0,0,0,.15);
  will-change: transform; animation: floaty 8s ease-in-out infinite;
}
.float-box::after { /* "portas" do contêiner */
  content: ""; position: absolute; inset: 18% 8%; border: 1px solid rgba(0,0,0,.18); border-radius: 2px;
}
/* --px/--py são atualizados por JS (parallax); o keyframe soma o balanço de ±20px */
@keyframes floaty {
  0%, 100% { transform: translate3d(var(--px,0px), var(--py,0px), 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate3d(var(--px,0px), calc(var(--py,0px) - 20px), 0) rotate(var(--rot, 0deg)); }
}

/* imagem com leve parallax dentro de wrapper overflow-hidden */
.parallax-img { transform: translate3d(0, var(--py,0px), 0) scale(1.12); will-change: transform; }

/* ---------- HERO: entrada cinética ---------- */
.hero-in { opacity: 0; transform: translateY(30px); animation: heroUp .95s cubic-bezier(.16,.84,.44,1) forwards; }
.hero-d1 { animation-delay: .10s } .hero-d2 { animation-delay: .24s }
.hero-d3 { animation-delay: .38s } .hero-d4 { animation-delay: .52s }
.hero-d5 { animation-delay: .66s }
@keyframes heroUp { to { opacity: 1; transform: translateY(0); } }

/* slogan em lima com brilho pulsante (visível e robusto) */
.slogan-glow { color: #CBDB2A; animation: sloganGlow 3.2s ease-in-out infinite; }
@keyframes sloganGlow {
  0%, 100% { text-shadow: 0 0 16px rgba(203,219,42,.18); }
  50%      { text-shadow: 0 0 30px rgba(203,219,42,.55); }
}

/* indicador de scroll */
.scroll-ind { animation: bob 1.9s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .65 } 50% { transform: translateY(9px); opacity: 1 } }

/* ---------- Tilt 3D nos cards ---------- */
.js-tilt { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.16,.84,.44,1); will-change: transform; }

/* ---------- Botões magnéticos ---------- */
.js-magnetic { will-change: transform; }

/* ---------- JORNADA (Etapas) ---------- */
.journey { position: relative; }
.journey-rail {
  position: absolute; z-index: 0; background: rgba(255,255,255,.14); border-radius: 99px;
  left: 28px; top: 28px; bottom: 28px; width: 3px;
}
.journey-fill {
  position: absolute; inset: 0; border-radius: 99px;
  background: #CBDB2A; transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
/* Máquina (reach stacker) que percorre a rota — visível só no desktop */
.journey-machine {
  position: absolute; z-index: 4; display: none;
  height: 84px; width: auto; pointer-events: none;
  filter: drop-shadow(0 9px 10px rgba(0,0,0,.42));
  transition: left .12s linear;
}
.journey-node .jn-circle { transition: all .45s cubic-bezier(.16,.84,.44,1); }
.journey-node.is-reached .jn-circle {
  background: #CBDB2A; color: #006EC8; transform: scale(1.12);
  box-shadow: 0 0 0 7px rgba(203,219,42,.16);
}
.journey-node.is-reached .jn-label { color: #fff; }

@media (min-width: 768px) {
  .journey { padding-top: 92px; }                    /* faixa (lane) para a máquina */
  .journey-rail { left: 10%; right: 10%; top: 92px; bottom: auto; width: auto; height: 3px; }
  .journey-fill { transform-origin: left; transform: scaleX(var(--progress, 0)); }
  .journey-machine {
    display: block;
    left: calc(10% + var(--progress, 0) * 80%);
    top: 92px;                                        /* linha do trilho */
    transform: translate(-50%, -100%);                /* rodas sobre o trilho, números abaixo */
  }
}

/* ---------- Parallax helper ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Respeito a quem prefere menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-zoom, .float-box, .slogan-glow, .scroll-ind { animation: none !important; }
  .hero-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .journey-fill { transform: none !important; }
  .journey-machine { display: none !important; }
  .js-tilt, [data-parallax] { transform: none !important; }
}

/* ==========================================================================
   ✦ HERO REDESENHADO — editorial corporativo (estático)
   ========================================================================== */
.font-display { font-family: 'Roboto Condensed', 'Roboto', Arial, sans-serif; }

/* textura de grão sutil sobre o hero */
.hero-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .06; mix-blend-mode: overlay;
}

/* faixa de KPIs do hero */
.hero-kpi dt { font-feature-settings: "tnum"; letter-spacing: -0.02em; }

/* ---------- Explorador de áreas (descrições do PDF) ---------- */
.area-btn {
  width: 100%; text-align: left; display: flex; align-items: center; gap: .75rem;
  background: #F0F5FA; border: 1px solid rgba(12,95,171,.12); border-radius: 12px;
  padding: .7rem 1rem; cursor: pointer; transition: all .2s ease; color: #006EC8;
}
.area-btn:hover { border-color: rgba(12,95,171,.4); }
.area-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.area-name { font-weight: 500; font-size: .9rem; line-height: 1.25; flex: 1; }
.area-chevron { width: 16px; height: 16px; flex-shrink: 0; opacity: .35; transition: opacity .2s ease; }
.area-desc { display: none; }                 /* conteúdo lido pelo JS/painel */
.area-btn.is-active { background: #006EC8; border-color: #006EC8; color: #fff; }
.area-btn.is-active .area-name { color: #fff; }
.area-btn.is-active .area-dot { background: #CBDB2A !important; }
.area-btn.is-active .area-chevron { opacity: 1; color: #CBDB2A; }
@media (min-width: 480px) { .area-name { font-size: .95rem; } }

/* ---------- Carrossel de imagens ---------- */
.carousel { position: relative; overflow: hidden; border-radius: 24px; box-shadow: 0 22px 55px rgba(0,42,80,.22); aspect-ratio: 4 / 5; }
.carousel--wide { aspect-ratio: 3 / 2; }
.carousel-track { display: flex; height: 100%; transition: transform .7s cubic-bezier(.19,1,.22,1); }
.carousel-slide { min-width: 100%; }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); color: #006EC8;
  display: flex; align-items: center; justify-content: center; border: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: background .2s ease, transform .2s ease;
}
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-arrow:hover { background: #CBDB2A; transform: translateY(-50%) scale(1.08); }
.carousel-prev { left: 14px; } .carousel-next { right: 14px; }
.carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.carousel-dots button { width: 9px; height: 9px; border-radius: 99px; background: rgba(255,255,255,.55); border: 0; padding: 0; cursor: pointer; transition: all .3s ease; }
.carousel-dots button.is-active { background: #CBDB2A; width: 26px; }

/* ---------- Benefícios: todos os ícones em lima ---------- */

/* ---------- Pré-requisitos: fundo laranja/ouro; cards e chips ficam navy ---------- */
#pre-requisitos .bg-white\/10  { background-color: #006EC8 !important; border-color: rgba(0,42,80,.18) !important; }
#pre-requisitos .text-white\/80 { color: rgba(0,42,80,.75) !important; }

/* ---------- Justificar descrições de cards ---------- */
.area-panel-text { text-align: left; }

/* =================================================================
   LOCALIDADES — LOCATOR INTERATIVO COM MAPA LEAFLET (paleta Santos)
   ================================================================= */
.locator__grid { display: grid; grid-template-columns: 280px 1fr; gap: 28px; }
.locator__list { display: flex; flex-direction: column; gap: 8px; }
.loc-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 20px; background: #fff; border: 1px solid #DCE6F1; border-radius: 12px;
  text-align: left; position: relative; cursor: pointer; width: 100%;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.loc-btn::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0); width: 3px; height: 62%;
  background: #CBDB2A; border-radius: 0 3px 3px 0; transition: transform .25s ease;
}
.loc-btn:hover { border-color: #006EC8; background: #F0F5FA; }
.loc-btn.is-active { border-color: #006EC8; background: #006EC8; color: #fff; box-shadow: 0 10px 26px -12px rgba(0,110,200,.6); }
.loc-btn.is-active::before { transform: translateY(-50%) scaleY(1); }
.loc-btn.is-active .loc-btn__sub { color: rgba(255,255,255,.75); }
.loc-btn__title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; color: inherit; }
.loc-btn__tag { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: #E7F0F9; color: #006EC8; }
.loc-btn.is-active .loc-btn__tag { background: #CBDB2A; color: #006EC8; }
.loc-btn__sub { font-size: .78rem; color: #65798A; font-weight: 500; }

.locator__detail { display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #DCE6F1; box-shadow: 0 14px 44px -18px rgba(0,42,80,.22); transition: opacity .35s ease, transform .35s ease; }
.locator__info { padding: 30px 34px 34px; }
.locator__info .eyebrow-mark { display: inline-block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #009137; margin-bottom: 8px; }
.locator__info h3 { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: 1.9rem; color: #006EC8; line-height: 1.05; margin-bottom: 8px; }
.locator__tag { color: #65798A; font-size: .98rem; line-height: 1.5; margin-bottom: 26px; }
.locator__data { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; }
.locator__data li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: flex-start; }
.locator__data svg { width: 22px; height: 22px; color: #50B848; margin-top: 2px; }
.locator__data h5 { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #65798A; margin-bottom: 3px; }
.locator__data p { font-size: .95rem; color: #006EC8; font-weight: 600; line-height: 1.4; }
.locator__cta { display: flex; gap: 10px; flex-wrap: wrap; }

.locator__map { position: relative; min-height: 440px; background: #EAEEF1; overflow: hidden; }
.leaflet-map { position: absolute; inset: 0; z-index: 1; background: #EAEEF1; }
.leaflet-control-zoom { border: none !important; border-radius: 10px !important; box-shadow: 0 10px 30px -10px rgba(0,42,80,.3) !important; overflow: hidden; margin: 14px !important; }
.leaflet-control-zoom a { background: #fff !important; color: #006EC8 !important; border: none !important; width: 34px !important; height: 34px !important; line-height: 34px !important; font-weight: 500 !important; font-size: 1.1rem !important; }
.leaflet-control-zoom a:hover { background: #F0F5FA !important; color: #009137 !important; }
.leaflet-control-zoom-in { border-bottom: 1px solid #DCE6F1 !important; }
.leaflet-control-attribution { background: rgba(255,255,255,.85) !important; font-size: .62rem !important; color: #65798A !important; padding: 2px 8px !important; }
.leaflet-control-attribution a { color: #006EC8 !important; }

/* marcadores personalizados */
.sb-marker-wrap { background: transparent; border: none; }
.sb-marker { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #006EC8; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0,110,200,.5); cursor: pointer; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.sb-marker:hover { transform: scale(1.18); }
.sb-marker.sb-marker--active { background: #CBDB2A; transform: scale(1.28); box-shadow: 0 6px 20px rgba(203,219,42,.6); }
.sb-marker.sb-marker--active::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(203,219,42,.4); animation: sb-marker-pulse 2s ease-out infinite; z-index: -1; }
@keyframes sb-marker-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.4); opacity: 0; } }

/* popup */
.sb-popup .leaflet-popup-content-wrapper { background: #fff !important; border-radius: 10px !important; box-shadow: 0 18px 50px -10px rgba(0,42,80,.35) !important; border: 1px solid #DCE6F1; padding: 2px; }
.sb-popup .leaflet-popup-content { margin: 12px 16px !important; font-family: 'Roboto', sans-serif !important; line-height: 1.45 !important; min-width: 170px; }
.sb-popup .leaflet-popup-tip { background: #fff !important; box-shadow: none !important; }
.sb-popup-inner h5 { font-weight: 700; font-size: .98rem; color: #006EC8; margin-bottom: 5px; }
.sb-popup-inner p { font-size: .78rem; color: #65798A; line-height: 1.5; margin: 0; }
.leaflet-popup-close-button { color: #65798A !important; padding: 6px 8px 0 0 !important; }

.map__label { position: absolute; bottom: 14px; right: 14px; z-index: 2; font-size: .74rem; color: #006EC8; background: rgba(255,255,255,.92); padding: 6px 14px; border-radius: 99px; font-weight: 600; pointer-events: none; box-shadow: 0 4px 12px rgba(0,42,80,.12); }

@media (max-width: 1023px) {
  .locator__grid { grid-template-columns: 1fr; }
  .locator__list { flex-direction: row; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .loc-btn { flex-shrink: 0; min-width: 210px; }
  .locator__detail { grid-template-columns: 1fr; }
  .locator__map { min-height: 300px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .sb-marker.sb-marker--active::after { animation: none; } }