/* Fuentes autoalojadas: ver imports @fontsource en src/main.tsx (sin Google Fonts). */
:root {
  /* Colors - ADL Diagnostic: laboratorio de precisión, azul + naranjo + blanco */
  --primary-color: #022566;
  --primary-dark: #00263f;
  --primary-deep: #001624;
  --primary-glow: rgba(2, 37, 102, 0.4);

  --secondary-color: #ff8c4d;
  --secondary-light: #ffa870;
  --secondary-dark: #9c4009;
  --secondary-glow: rgba(255, 140, 77, 0.4);
  /* Lighter --secondary-color still fails WCAG AA (4.5:1) with white text.
     Use --secondary-ink wherever orange carries body-sized text (solid
     button fills, badges) — ~5:1 with white. Keep --secondary-color for
     large decorative fills, icons, borders. */
  --secondary-ink: #b8500e;

  --accent-color: #022566;
  --accent-glow: rgba(2, 37, 102, 0.4);

  --text-color: #022566;
  --text-light: #4f5d6e;
  --text-muted: #8b96a3;

  --bg-color: #ffffff;
  --bg-color-transparent: rgba(255, 255, 255, 0);
  --bg-alt: #f5f7f9;
  --bg-dark: #041220; /* Premium dark mode background */
  --bg-card: #ffffff;
  --bg-card-alt: #fcfcfc;

  --white: #ffffff;
  --border-color: rgba(10, 37, 64, 0.12);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* Typography — Poppins, matching the DiveIn reference exactly: SemiBold display, Regular body */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* System */
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --max-width: 100%;
  --container-padding: 5vw;

  /* Shadows — soft, no ghost-card doubling */
  --shadow-sm: 0 2px 4px rgba(4, 18, 32, 0.04), 0 1px 2px rgba(4, 18, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(4, 18, 32, 0.06), 0 2px 4px rgba(4, 18, 32, 0.04);
  --shadow-lg: 0 20px 40px -10px rgba(4, 18, 32, 0.12), 0 10px 20px -5px rgba(4, 18, 32, 0.05);
  --shadow-hover-primary: 0 12px 24px var(--primary-glow);
  --shadow-hover-secondary: 0 12px 24px var(--secondary-glow);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* Dark Mode Variables (can be applied to body.dark-mode) */
body.dark-mode {
  --text-color: #f1f5f9;
  --text-light: #cbd5e1;
  --text-muted: #64748b;
  --bg-color: var(--bg-dark);
  --bg-color-transparent: rgba(11, 15, 25, 0);
  --bg-alt: var(--bg-dark); /* Un solo color para las secciones */
  --bg-card: var(--bg-dark); /* Las tarjetas se funden con el fondo y usan borde */
  --bg-card-alt: #0f1524;
  --border-color: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .outfit-font {
  font-family: var(--font-display);
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Weight carries emphasis in this single-family system, not italics */
em, .editorial-em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* NOT scroll-behavior:smooth — every scroll that WANTS to be smooth
     (the "volver arriba" button, in-page anchor nav in ModernHeader,
     HeroServicePillars' carousel) already passes behavior:'smooth'
     explicitly in JS, which works regardless of this CSS property. Leaving
     it globally smooth instead made React Router's <ScrollRestoration/>
     reset-to-top on page navigation an ANIMATED scroll — on a page-height
     change (navigating from a tall page to a shorter one, e.g. from its
     footer), that animated reset could get cut short/overridden mid-flight,
     landing on the new page already scrolled down instead of at its top.
     Plain `auto` makes untagged scrolls (like ScrollRestoration's) instant. */
  scroll-behavior: auto;
  /* Prevents the browser from silently re-adjusting scrollY to "keep the
     same content in view" when off-screen content changes height — which
     is exactly what happens on every route change here (the outgoing and
     incoming page almost never have the same height). Without this, that
     auto-adjustment could fight the scroll-to-top reset above. */
  overflow-anchor: none;
  /* Promotes the scroll container to its own layer for smoother compositing */
  -webkit-overflow-scrolling: touch;
  /* body's overflow-x:hidden doesn't clip position:fixed descendants (e.g.
     the off-canvas .mobile-nav panel) since fixed elements escape ancestor
     overflow clipping by design — only the viewport/html scrollport can
     contain them. Without this, off-canvas panels could add stray
     horizontal scroll at some widths. */
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
  /* GPU compositing: promotes body to its own stacking context */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* Con overflow-x:hidden en html Y en body, el body se vuelve su propio
   contenedor de scroll y position:sticky deja de funcionar en todo el sitio
   (p. ej. el índice "En esta página" y los paneles laterales de las páginas
   legales no quedaban fijos al bajar). "clip" recorta igual el desborde
   horizontal, pero sin crear un contenedor de scroll. Navegadores sin
   soporte se quedan con "hidden". Va aquí, después de las reglas de body de
   index.css (que se carga antes que este archivo). */
@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* Margin-based box, matching .modern-header's floating bar exactly: the
   box itself shrinks to leave room outside it (capped at 1560px total),
   instead of a fixed-width box with padding eating into it from inside.
   Below 1560px both models render identically (a full-width box with 40px
   padding looks the same as an already-40px-narrower box with none) — they
   only diverge once the box hits its max-width cap. The old padding-based
   version put content 40px to the right of the navbar's edge on any
   monitor wider than ~1640px, because its own 40px padding stacked on top
   of a box that was already centered and capped. Same content inset at
   every width below the cap, but now it tracks the navbar exactly above
   it too. */
.container {
  max-width: min(1560px, calc(100% - 80px));
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 768px) {
  .container {
    max-width: calc(100% - 40px);
  }
}

@media (max-width: 480px) {
  .container {
    max-width: calc(100% - 32px);
  }
}

.section {
  padding: 160px 0;
  position: relative;
  scroll-margin-top: 100px;
}

@media (max-width: 768px) {
  .section {
    padding: 96px 0;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 70px 0;
  }
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.glass:hover {
  box-shadow: var(--shadow-lg);
  border-top-color: rgba(255, 255, 255, 0.8);
}

.title-primary {
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--text-color);
  text-wrap: balance;
}

.title-primary strong {
  color: var(--primary-color);
}

.subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-light);
  max-width: 62ch;
  margin-bottom: 2rem;
}

/* ── Buttons: precise, architectural. No pill shape, no shine sweep. ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  font-family: var(--font-body);
}

.btn-primary {
  background-color: var(--secondary-ink) !important;
  color: white !important;
  border: 1px solid var(--secondary-ink);
}

.btn-primary:hover {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover-secondary) !important;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color) !important;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  font-family: var(--font-body);
  transition: var(--transition);
  cursor: pointer;
}

.btn-outline:hover {
  border-color: var(--primary-color);
  background-color: rgba(2, 37, 102, 0.05);
  color: var(--primary-color) !important;
  transform: translateY(-2px);
}

/* Utilities */
.text-center {
  text-align: center !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Background Gradients (Mesh style) */
.bg-soft {
  background-color: var(--bg-alt);
}

.bg-gradient {
  background: radial-gradient(circle at 15% 50%, rgba(2, 37, 102, 0.03), transparent 25%),
              radial-gradient(circle at 85% 30%, rgba(255, 140, 77, 0.04), transparent 25%),
              var(--bg-color);
  background-size: 200% 200%;
  animation: gradientMove 15s ease infinite alternate;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  20% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  80% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-color, #ff8c4d);
  border-radius: 20px;
  border: 4px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
  background: #e65c00;
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-color, #ff8c4d) #f8fafc;
}

/* Unified Page Titles */
.adl-main-title {
  color: #022566 !important; /* Corporate Blue */
  font-family: var(--font-display) !important;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem) !important;
  font-weight: 500 !important;
  text-align: center;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ── Page transition (CSS-only, no Framer blocking) ───────────────────── */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.page-fade-in {
  animation: pageFadeIn 0.35s ease-out both;
}

/* ── App layout shells ────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

/* ── GPU acceleration hint for animated elements ─────────────────────── */
[data-framer-motion],
.motion-div {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Respect reduced motion preference ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 🛑 BULLETPROOF SEAM FIX 🛑 */
/* This paints a solid block of the background color exactly over the boundary between the hero and the next section, killing any Safari subpixel gaps or video leaks. */
.about-hero::after,
.contact-hero::after,
.notas-hero-section::after,
.service-hero::after,
.news-hero-section::after,
.modern-hero::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: var(--bg-color);
  z-index: 50;
  pointer-events: none;
}