/* ===== JG Inspeções de Solda — Tokens & Styles ===== */
/* Paleta IDV: Azul Petróleo #0E3A5B · Grafite #2E3135 · Cinza Aço #7A8087 · Branco #FFFFFF */

:root {
  --primary: #0E3A5B;             /* Azul petróleo — cor principal IDV */
  --primary-light: #14537F;       /* Azul petróleo claro (hovers em dark bg) */
  --primary-bright: #1A6FA8;      /* Versão luminosa pra textos em fundo escuro */
  --primary-soft: rgba(14, 58, 91, 0.15);
  --primary-glow: rgba(14, 58, 91, 0.55);
  --graphite: #2E3135;            /* Grafite — backgrounds, textos */
  --metal: #7A8087;               /* Cinza aço — secundário */
  --metal-light: #9EA3A8;         /* Cinza aço claro */
  --white: #FFFFFF;
  --bg-dark: #1A1E23;             /* Fundo principal (grafite profundo) */
  --bg-section: #22272D;          /* Fundo seções alternadas */
  --bg-card: #2A2F36;             /* Cards */
  --accent-cta: #FFFFFF;          /* CTAs em branco (fundo azul petróleo) */
}

/* ---- Background grid ---- */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.bg-radial-glow {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(14, 58, 91, 0.20), transparent);
}

/* ---- Glow effects ---- */
.glow-text {
  text-shadow:
    0 0 30px rgba(14, 58, 91, 0.6),
    0 0 60px rgba(14, 58, 91, 0.3);
}
.shadow-glow {
  box-shadow: 0 0 20px var(--primary-soft), 0 0 40px rgba(14, 58, 91, 0.1);
}
.shadow-glow-lg {
  box-shadow: 0 0 40px var(--primary-glow), 0 0 80px rgba(14, 58, 91, 0.2);
}

/* ---- Pulsing dot ---- */
.pulse-dot {
  animation: pulseDot 2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--primary-bright);
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* ---- Hero overlay ---- */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 30, 35, 1);
  z-index: 1;
  animation: overlayReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes overlayReveal {
  to {
    background: linear-gradient(
      to bottom,
      rgba(26, 30, 35, 0.88) 0%,
      rgba(26, 30, 35, 0.80) 40%,
      rgba(26, 30, 35, 0.92) 100%
    );
  }
}

/* ---- Word reveal ---- */
.word-reveal {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  transform: translateY(40px);
  opacity: 0;
  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease;
}
.word-reveal.is-visible {
  clip-path: inset(0);
  transform: translateY(0);
  opacity: 1;
}
.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero-sub.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-sub-1 { transition-delay: 1.8s; }
.hero-sub-2 { transition-delay: 2.0s; }
.hero-sub-3 { transition-delay: 2.2s; }
.hero-sub-4 { transition-delay: 2.4s; }
.hero-text-shadow {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 4px 40px rgba(0, 0, 0, 0.5);
}

/* ---- Scroll indicator ---- */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  animation: scrollIndicatorFadeIn 0.5s ease 3s forwards;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll-indicator.is-hidden { opacity: 0; pointer-events: none; }
@keyframes scrollIndicatorFadeIn { to { opacity: 1; } }
.scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(14, 58, 91, 0.8), transparent);
  position: relative;
  overflow: hidden;
  margin: 0 auto 8px;
}
.scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--primary-bright);
  animation: scrollLineMove 1.8s ease-in-out infinite;
}
@keyframes scrollLineMove {
  0% { top: -50%; }
  100% { top: 100%; }
}

/* ---- Serviços full-bleed ---- */
.svc-block {
  aspect-ratio: 16 / 5;
  min-height: 180px;
}
.svc-block__label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 1.125rem 0.5rem 0.875rem;
  border-radius: 0 0.5rem 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 4px 2px 16px rgba(0,0,0,0.25);
  z-index: 1;
}

/* Selo FBTS motion (rotacao lenta) */
.seal-spin .seal-text-rotate {
  animation: sealRotate 25s linear infinite;
  transform-origin: center;
}
@keyframes sealRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile blocks (alternados) */
.svc-mblock {
  display: grid;
  grid-template-columns: 2fr 3fr;
  min-height: 160px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.svc-mblock--reverse {
  direction: rtl;
}
.svc-mblock--reverse > * {
  direction: ltr;
}
.svc-mblock__copy {
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.375rem;
  background: var(--bg-card);
}
.svc-mblock__copy h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9375rem;
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
}
.svc-mblock__copy p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.svc-mblock__img {
  overflow: hidden;
  position: relative;
}
.svc-mblock__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-mblock__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 30%);
}

@media (max-width: 640px) {
  .svc-mblock { min-height: 140px; }
  .svc-mblock__copy { padding: 1rem 0.75rem; }
  .svc-mblock__copy h3 { font-size: 0.875rem; }
}

/* ---- Setor badge ---- */
.setor-card {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.setor-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--primary-soft);
}

/* ---- Marquee parceiros ---- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 35s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* ---- Form multi-step ---- */
.opt {
  display: block;
  width: 100%;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.opt:hover {
  background: var(--primary-soft);
  border-color: var(--primary-bright);
}
.inp {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
  transition: border-color 0.2s;
}
.inp:focus {
  outline: none;
  border-color: var(--primary-bright);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.inp::placeholder { color: rgba(255,255,255,0.35); }

/* ---- Certificação selo ---- */
.cert-badge {
  background: linear-gradient(135deg, rgba(14, 58, 91, 0.2), rgba(14, 58, 91, 0.05));
  border: 1px solid rgba(14, 58, 91, 0.3);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.3s ease;
}
.cert-badge:hover {
  border-color: var(--primary-bright);
}

/* ---- Btn primary (azul petróleo bg + branco texto) ---- */
.btn-primary {
  background: var(--primary);
  color: var(--white);
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
  background: var(--primary-light);
  transform: scale(1.03);
}

/* ---- Btn outline ---- */
.btn-outline {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(14, 58, 91, 0.4);
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover {
  background: rgba(14, 58, 91, 0.15);
  border-color: var(--primary-bright);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .word-reveal, .hero-sub {
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .animate-marquee { animation: none; }
  .pulse-dot { animation: none; }
  .scroll-indicator { display: none; }
}