/* ============================================================
   RAMTECH UI - camada visual compartilhada
   Carregada apos o <style> de cada pagina. Refina navegacao,
   cartoes, heros e microinteracoes em todo o site.
   ============================================================ */

/* ---------- fundamentos ---------- */
section[id] { scroll-margin-top: 92px; }
::selection { background: #B9151E; color: #fff; }

/* barra de rolagem discreta na identidade da marca */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0d1b36; }
::-webkit-scrollbar-thumb { background: #1D3F78; border-radius: 6px; border: 2px solid #0d1b36; }
::-webkit-scrollbar-thumb:hover { background: #B9151E; }

body { animation: rtPageIn .45s ease-out; }
@keyframes rtPageIn { from { opacity: 0; } to { opacity: 1; } }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #ff4d56; outline-offset: 2px;
}

/* ---------- navegacao ---------- */
nav { transition: background .35s, box-shadow .35s; }
nav.scrolled { background: rgba(8,17,38,0.97) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
.nav-links > li > a:not(.nav-cta) { position: relative; }
.nav-links > li > a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px;
  background: linear-gradient(90deg, #B9151E, #ff4d56); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.nav-links > li > a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { box-shadow: 0 6px 18px rgba(185,21,30,0.35); }
.nav-cta:hover { box-shadow: 0 10px 24px rgba(185,21,30,0.5); }

/* ---------- botoes ---------- */
.btn-primary, .btn-outline, .form-btn, .btn-submit, .qs-map-cta { border-radius: 8px; }
.btn-primary { position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(185,21,30,0.35); }
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

/* ---------- heros: titulo com gradiente na marca ---------- */
.hero-title span, .page-hero-title span, .qs-hero-title span {
  background: linear-gradient(92deg, #ff5a63 0%, #cf2830 85%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #B9151E;
  filter: drop-shadow(0 4px 22px rgba(185,21,30,0.35));
}

/* entrada cinematografica dos heros */
@keyframes rtRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-content > *,
.page-hero > :not(.rt-particles),
.qs-hero-inner > * {
  animation: rtRise .85s cubic-bezier(.22,.61,.36,1) backwards;
}
.hero-content > :nth-child(1), .page-hero > :nth-child(1), .qs-hero-inner > :nth-child(1) { animation-delay: .10s; }
.hero-content > :nth-child(2), .page-hero > :nth-child(2), .qs-hero-inner > :nth-child(2) { animation-delay: .24s; }
.hero-content > :nth-child(3), .page-hero > :nth-child(3), .qs-hero-inner > :nth-child(3) { animation-delay: .38s; }
.hero-content > :nth-child(4) { animation-delay: .52s; }

/* canvas de particulas (rede tecnologica) */
.rt-particles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.page-hero { position: relative; overflow: hidden; }
.page-hero .rt-particles, .qs-hero .rt-particles { z-index: 1; }

.carousel-arrow { width: 46px; height: 46px; background: rgba(255,255,255,0.07); }

/* ---------- cartoes: tilt 3D + brilho que segue o mouse ---------- */
.rt-tilt { transform-style: preserve-3d; will-change: transform; }
.rt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  background: radial-gradient(420px circle at var(--rt-mx,50%) var(--rt-my,50%),
              rgba(255,255,255,0.14), transparent 55%);
  opacity: 0; transition: opacity .3s;
}
.rt-tilt:hover .rt-glare { opacity: 1; }
.solucao-card .rt-glare {
  background: radial-gradient(480px circle at var(--rt-mx,50%) var(--rt-my,50%),
              rgba(255,255,255,0.22), transparent 60%);
}

/* revelacao ao rolar (mesma linguagem em todas as paginas) */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); }
.fade-up.in-view { opacity: 1; transform: none; }

/* ---------- rodape: filete luminoso ---------- */
.site-footer { position: relative; }
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #B9151E 30%, #ff4d56 50%, #B9151E 70%, transparent);
}

/* ---------- navegacao: impedir quebra de linha dos itens ---------- */
.nav-links { width: max-content; white-space: nowrap; }

/* ---------- responsivo: menu compacto assume mais cedo ---------- */
@media (max-width: 1120px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

/* ============================================================
   ABERTURA DO SITE (preloader)
   Fallback em CSS puro via body::before/::after (aparece antes
   do JS e some sozinho em 7s se o JS falhar). O JS injeta a
   versao completa .rt-preloader por cima, sem emenda visivel.
   ============================================================ */
body::before, body::after { pointer-events: none; z-index: 2147480000; }
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(640px circle at 72% 82%, rgba(185,21,30,0.20), transparent 60%),
    linear-gradient(160deg, #0a1a35 0%, #14294d 55%, #1D3F78 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  transition: opacity .35s ease, visibility .35s ease;
  animation: rtAutoHide .5s ease 7s forwards;
}
body::after {
  content: '';
  position: fixed; top: 50%; left: 50%;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.10);
  border-top-color: #ff4d56;
  transition: opacity .35s ease, visibility .35s ease;
  animation: rtSpin 1s linear infinite, rtAutoHide .5s ease 7s forwards;
}
/* JS assumiu com a versao completa: esconde o fallback na hora */
html.rt-js body::before, html.rt-js body::after { content: none; animation: none; }
/* visita repetida / fim da abertura: fallback some suave (piscada de marca) */
html.rt-intro-done body::before, html.rt-intro-done body::after { opacity: 0; visibility: hidden; animation: rtSpin 1s linear infinite; }
@keyframes rtSpin { to { transform: rotate(360deg); } }
@keyframes rtAutoHide { to { opacity: 0; visibility: hidden; } }

.rt-preloader {
  position: fixed; inset: 0; z-index: 2147480001;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(640px circle at 72% 82%, rgba(185,21,30,0.20), transparent 60%),
    linear-gradient(160deg, #0a1a35 0%, #14294d 55%, #1D3F78 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  transition: transform .7s cubic-bezier(.75,0,.25,1) .28s;
}
.rt-preloader.rt-pl-exit { transform: translateY(-101%); }
.rt-preloader .rt-particles { z-index: 1; }
.rt-pl-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1.35rem;
  transition: opacity .3s ease, transform .3s ease;
}
.rt-pl-exit .rt-pl-inner { opacity: 0; transform: scale(.96); }
.rt-pl-emblem { position: relative; width: 128px; height: 128px; }
.rt-pl-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.10); border-top-color: #ff4d56;
  animation: rtSpin 1.1s linear infinite;
}
.rt-pl-ring2 {
  position: absolute; inset: 10px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06); border-bottom-color: rgba(185,21,30,0.55);
  animation: rtSpin 1.8s linear infinite reverse;
}
.rt-pl-emblem img {
  position: absolute; top: 50%; left: 50%; width: 64px; height: auto;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 8px 24px rgba(185,21,30,0.45));
  animation: rtPulse 2s ease-in-out infinite;
}
@keyframes rtPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.06); }
}
.rt-pl-word {
  display: flex; gap: 2px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 34px; font-weight: 900; letter-spacing: 5px;
  color: #fff; text-transform: uppercase;
}
.rt-pl-word span { display: inline-block; opacity: 0; transform: translateY(16px); animation: rtLetter .5s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes rtLetter { to { opacity: 1; transform: none; } }
.rt-pl-sub {
  font-family: 'Barlow', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 4px;
  color: rgba(255,255,255,0.55); text-transform: uppercase;
  opacity: 0; animation: rtLetter .6s ease .8s forwards;
}
.rt-pl-bar { width: 240px; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.rt-pl-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #B9151E, #ff4d56);
  box-shadow: 0 0 12px rgba(255,77,86,0.8);
  animation: rtBar 1.7s cubic-bezier(.25,.7,.3,1) .15s forwards;
}
@keyframes rtBar { to { width: 100%; } }
html.rt-introing { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { content: none !important; animation: none !important; }
  .rt-preloader { display: none !important; }
}

/* ---------- responsivo: hero no celular ---------- */
@media (max-width: 640px) {
  .carousel-arrow { display: none; }
  .hero-badge { font-size: 10px; letter-spacing: 1px; padding: 5px 12px; }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body { animation: none; }
  .hero-content > *, .page-hero > :not(.rt-particles), .qs-hero-inner > * { animation: none; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .rt-particles { display: none; }
}