@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
: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;
}

/* 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;
}