/* ==========================================================================
   Vantage Clinical Trials — Global Stylesheet
   Design tokens + component classes shared across all pages.
   Tailwind CDN handles utilities; this file handles reusable patterns.
   ========================================================================== */

/* --- Design Tokens -------------------------------------------------------- */
:root {
  /* Colors */
  --color-primary:                  #000f22;
  --color-secondary:                #006398;
  --color-surface:                  #f8f9ff;
  --color-surface-bright:           #f8f9ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #eff4ff;
  --color-surface-container:        #e5eeff;
  --color-surface-container-high:   #dce9ff;
  --color-on-surface:               #0b1c30;
  --color-on-surface-variant:       #43474d;
  --color-primary-container:        #0a2540;
  --color-on-primary:               #ffffff;
  --color-secondary-container:      #5bb8fe;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --max-width-content:  1440px;
  --max-width-protocol: 840px;
  --margin-mobile:      1rem;
  --margin-tablet:      1.5rem;
  --margin-desktop:     2rem;
  --gutter-sm:          1rem;
  --gutter-md:          1.5rem;
  --gutter-lg:          2rem;

  /* Border radius */
  --radius-sm: 0.125rem;
  --radius:    0.25rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Typography */
  --font-sans:  'Nunito Sans', sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  /* Shadows — per DESIGN.md elevation system */
  --shadow-sm:  0 1px 3px rgba(15,23,42,0.04);
  --shadow-md:  0 4px 12px -2px rgba(10,37,64,0.06), 0 2px 6px -1px rgba(10,37,64,0.03);
  --shadow-lg:  0 10px 24px -4px rgba(10,37,64,0.08), 0 4px 8px -2px rgba(10,37,64,0.04);

  /* Borders */
  --border-default: 1px solid #e2e8f0;
  --border-hover:   1px solid #cbd5e1;
  --border-subtle:  1px solid rgba(226,232,240,0.7);
}

/* --- Base Reset ----------------------------------------------------------- */
html, body  { margin: 0; padding: 0; }
html        { scroll-behavior: smooth; }
body        { overscroll-behavior: none; }
main > :first-child { margin-top: 0 !important; }
main > :last-child  { margin-bottom: 0 !important; }
::-webkit-scrollbar { display: none; }

/* Skip-to-content — visible only on keyboard focus */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.5rem 1.25rem;
  background: var(--color-primary-container);
  color: #ffffff;
  border-radius: 0 0 0.5rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.1s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 2px solid #5bb8fe;
  outline-offset: 2px;
}

/* Focus ring — visible for keyboard navigation */
:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

/* Header — border-bottom replaces shadow for cleaner look */
header {
  box-shadow: none !important;
  border-bottom: var(--border-subtle);
}

/* --- Gradient Spheres ----------------------------------------------------- */
/*
  Esferas decorativas con radial-gradient y la paleta del sistema.
  Uso típico: elementos absolutos/fixed con pointer-events:none para decoración de fondo.

  Ejemplo:
    <div class="sphere sphere-lg sphere-blue" style="position:absolute;top:-80px;right:-80px;opacity:0.35;pointer-events:none"></div>
*/

.sphere {
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tamaños */
.sphere-xs  { width: 120px; height: 120px; }
.sphere-sm  { width: 240px; height: 240px; }
.sphere-md  { width: 400px; height: 400px; }
.sphere-lg  { width: 600px; height: 600px; }
.sphere-xl  { width: 900px; height: 900px; }

/* Variantes de color — paleta Vantage */

.sphere-blue {
  /* Azul eléctrico brillante → navy profundo */
  background: radial-gradient(circle at 30% 30%, #38bdf8 0%, #0284c7 30%, #006398 60%, #000f22 100%);
}

.sphere-navy {
  /* Navy con núcleo azul cobalto */
  background: radial-gradient(circle at 30% 30%, #0ea5e9 0%, #0369a1 35%, #0a2540 65%, #000c30 100%);
}

.sphere-sky {
  /* Azul intenso → navy oscuro: moderno y profundo */
  background: radial-gradient(circle at 35% 30%, #7dd3fc 0%, #0284c7 40%, #0a2540 80%, #000f22 100%);
}

.sphere-brand {
  /* Cian brillante → azul real → navy: el más impactante */
  background: radial-gradient(circle at 28% 28%, #38bdf8 0%, #2563eb 35%, #006398 60%, #000f22 100%);
}

.sphere-ghost {
  /* Azul lavanda oscuro — presencia sutil en fondos claros */
  background: radial-gradient(circle at 40% 40%, #bae6fd 0%, #7dd3fc 35%, #0284c7 70%, #0a2540 100%);
}

.sphere-electric {
  /* Azul eléctrico puro — el más vibrante y moderno */
  background: radial-gradient(circle at 25% 25%, #e0f2fe 0%, #38bdf8 25%, #0284c7 55%, #000f22 100%);
}

/* Blur decorativo (versión "blob" difusa) */
.sphere-blur { filter: blur(60px); }
.sphere-blur-sm { filter: blur(30px); }
.sphere-blur-lg { filter: blur(100px); }

/* --- Gradient Backgrounds ------------------------------------------------- */
/*
  Uso: añadir la clase al elemento <section> o <div> como fondo.
  Paleta base: primary #000f22 · primary-container #0a2540
               secondary #006398 · secondary-container #5bb8fe
               surface #f8f9ff · surface-container-low #eff4ff
               surface-container #e5eeff · surface-container-high #dce9ff
*/

/* Secciones claras — variantes de azul muy suave */
.bg-gradient-surface {
  /* Blanco → azul-lavanda muy claro. Para secciones neutras sobre blanco. */
  background: linear-gradient(160deg, #ffffff 0%, #eff4ff 55%, #dce9ff 100%);
}

.bg-gradient-surface-warm {
  /* Diagonal suave de izquierda-arriba a derecha-abajo. Para alternar con bg-gradient-surface. */
  background: linear-gradient(135deg, #f8f9ff 0%, #e5eeff 50%, #eff4ff 100%);
}

/* Secciones de acento azul medio */
.bg-gradient-blue {
  /* Azul claro → blanco. Útil para secciones de transición entre oscuro y claro. */
  background: linear-gradient(160deg, #dce9ff 0%, #eff4ff 50%, #f8f9ff 100%);
}

/* bg-gradient-navy-color en espejo claro —
   mismos 4 radiales, mismas posiciones, misma paleta;
   base linear clara y opacidades reducidas para fondos blancos. */
.bg-gradient-light-color {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 0%,     rgba(91,184,254,0.30) 0%, rgba(0,99,152,0.16) 22%, rgba(10,37,64,0.05) 48%, rgba(0,15,34,0) 72%),
    radial-gradient(ellipse at 62% 8%,    rgba(0,99,152,0.13)   0%, rgba(10,37,64,0.06) 42%, rgba(0,15,34,0) 72%),
    radial-gradient(ellipse at 44% 38%,   rgba(10,37,64,0.06)   0%, rgba(0,15,34,0.03) 50%, rgba(0,15,34,0) 76%),
    radial-gradient(ellipse at 14% 78%,   rgba(0,99,152,0.10)   0%, rgba(10,37,64,0.04) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, #ffffff 0%, #f3f7ff 22%, #ecf2ff 48%, #eff4ff 72%, #f8f9ff 100%);
}

.bg-gradient-light-color::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(229,238,255,0.20) 60%, rgba(213,228,255,0.35) 100%),
    radial-gradient(ellipse at 100% 100%, rgba(0,99,152,0.07) 0%, rgba(0,15,34,0) 60%);
}

/* Secciones oscuras — navy */
.bg-gradient-navy {
  /* Deep navy diagonal. Para CTA, hero o secciones de contraste fuerte. */
  background: linear-gradient(135deg, #000f22 0%, #0a2540 60%, #000c30 100%);
}

.bg-gradient-navy-blue {
  /* Primary navy → secondary blue. Añade energía al dark section. */
  background: linear-gradient(135deg, #000f22 0%, #006398 100%);
}

.bg-gradient-brand {
  /* Navy → azul cielo — el gradiente más vibrante de la paleta. */
  background: linear-gradient(135deg, #0a2540 0%, #006398 55%, #5bb8fe 100%);
}

.bg-gradient-navy-color {
  /* Paleta Vantage: secondary-container #5bb8fe · secondary #006398 · primary-container #0a2540 · primary #000f22 */
  position: relative;
  overflow: hidden;
  min-height: 623px;
  background:
    radial-gradient(circle at 92% 0%,     rgba(91,184,254,0.50) 0%, rgba(0,99,152,0.36) 22%, rgba(10,37,64,0.18) 48%, rgba(0,15,34,0) 72%),
    radial-gradient(ellipse at 62% 8%,    rgba(0,99,152,0.28)   0%, rgba(10,37,64,0.16) 42%, rgba(0,15,34,0) 72%),
    radial-gradient(ellipse at 44% 38%,   rgba(10,37,64,0.50)   0%, rgba(0,15,34,0.32) 50%, rgba(0,15,34,0) 76%),
    radial-gradient(ellipse at 14% 78%,   rgba(0,99,152,0.22)   0%, rgba(10,37,64,0.14) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, #0a2540 0%, #071d35 22%, #041529 48%, #020e1e 72%, #010816 100%);
}

.bg-gradient-navy-color::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 45%, rgba(0,0,0,0.28) 75%, rgba(0,0,0,0.45) 100%),
    radial-gradient(ellipse at 100% 100%, rgba(0,15,34,0.45) 0%, rgba(0,15,34,0.20) 30%, rgba(0,0,0,0) 62%);
}

/* --- Hero Banner ---------------------------------------------------------- */

/* Estructura base — todas las páginas */
.hero-banner {
  min-height: 80vh;
  min-height: 80svh;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* Imagen por página */
.hero-banner-home {
  background-image: url('assets/photo_4970244285487844413_y.webp');
  background-position: center 30%;
}
.hero-banner-patient {
  background-image: url('assets/photo_4970244285487844420_y.webp');
  background-position: center 20%;
}
.hero-banner-pi {
  background-image: url('assets/photo_4970244285487844417_y.webp');
  background-position: center 25%;
}
.hero-banner-sponsor {
  background-image: url('assets/photo_4970244285487844409_y.webp');
  background-position: center center;
}
.hero-banner-contact {
  background-image: url('assets/photo_4970244285487844405_y.webp');
  background-position: center 35%;
}

.hero-overlay {
  background:
    linear-gradient(to bottom, rgba(0,15,34,0) 100%, rgba(0,15,34,0.65) 100%),
    linear-gradient(45deg, rgba(0,15,34,0.93) 0%, rgba(0,15,34,0.70) 35%, rgba(0,15,34,0.18) 75%)
}

/* Section vertical padding — 100px fijo en todos los breakpoints */
.section-py {
  padding-top: 3.25rem;
  padding-bottom: 3.25rem;
}

/* --- Layout --------------------------------------------------------------- */

/* Responsive page-width container used in every section */
.section-container {
  width: 100%;
  max-width: var(--max-width-content);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}
@media (min-width: 768px) {
  .section-container {
    padding-left: var(--margin-tablet);
    padding-right: var(--margin-tablet);
  }
}
@media (min-width: 1024px) {
  .section-container {
    padding-left: var(--margin-desktop);
    padding-right: var(--margin-desktop);
  }
}
@media (min-width: 1440px) {
  .section-container {
    padding-left: var(--margin-tablet);
    padding-right: var(--margin-tablet);
  }
}

/* Narrower container for protocol / form pages */
.protocol-container {
  width: 100%;
  max-width: var(--max-width-protocol);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}
@media (min-width: 768px) {
  .protocol-container {
    padding-left: var(--margin-tablet);
    padding-right: var(--margin-tablet);
  }
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: var(--border-default);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(0);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.card:hover {
  border: var(--border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  will-change: transform;
}

.card-compact {
  background-color: var(--color-surface-container-lowest);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  border: var(--border-default);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(0);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.card-compact:hover {
  border: var(--border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  will-change: transform;
}

/* Icon box inside a card.
   Remove Tailwind bg-* and text-* classes from the element so this rule wins.
   Hover state below — triggers on .card or .card-compact parent hover. */
.card-icon {
  background: linear-gradient(140deg, #dce9ff 0%, #b4cff0 100%);
  color: var(--color-secondary);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Glassmorphism — para cards dentro de secciones oscuras (bg-gradient-navy-color) */
.card-glass {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0, 15, 34, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(0);
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.card-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 44px rgba(0, 15, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-4px);
  will-change: transform;
}

/* Glassmorphism row — layout horizontal icon + contenido (capabilities cards) */
.card-glass-row {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 24px rgba(0, 15, 34, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  transform: translateY(0);
  transition: background 0.25s, box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.card-glass-row:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  will-change: transform;
  box-shadow: 0 14px 44px rgba(0, 15, 34, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}

/* --- Typography ----------------------------------------------------------- */

/* Section eyebrow label — pill-style, see full definition in Scroll Reveal section */

/* Section headline  — h2 on most sections */
.section-heading {
  font-family: var(--font-display);
  font-size: 44px !important;
  line-height: 50px !important;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-primary);
  text-wrap: balance;
}

/* Card / item title */
.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--color-primary);
  text-wrap: balance;
}

/* Secondary body copy */
.body-muted {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  color: var(--color-on-surface-variant);
}

/* Small body copy */
.body-sm-muted {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0em;
  color: var(--color-on-surface-variant);
}

/* --- Navigation ----------------------------------------------------------- */

/* Inactive header nav link */
.nav-link {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.nav-link:hover {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

/* --- Responsive Typography Scale -----------------------------------------
   Breakpoints:
     Desktop  > 1024px  — tamaños base definidos abajo
     Tablet   768–1024px
     Mobile   < 768px
   -------------------------------------------------------------------- */

/* Desktop (default) */
.text-headline-xl {
  font-size: 70px !important;
  line-height: 75px !important;
  font-weight: 600 !important;

}

/* Tablet */
@media (max-width: 1024px) {
  .text-headline-xl {
    font-size: 52px !important;
    line-height: 58px !important;
  }
  .section-heading {
    font-size: 36px !important;
    line-height: 44px !important;
  }
  .hero-banner {
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .text-headline-xl {
    font-size: 32px !important;
    line-height: 40px !important;
    letter-spacing: -0.015em !important;
  }
  .section-heading {
    font-size: 30px !important;
    line-height: 35px !important;
  }
  /* Hero banner: full-screen on mobile, grows if content is taller */
  .hero-banner {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    background-position: center center;
  }
  /* Per-image position adjustments for mobile */
  .hero-banner-home    { background-position: center 25%; }
  .hero-banner-patient { background-position: center 15%; }
  .hero-banner-pi      { background-position: center 20%; }
  .hero-banner-sponsor { background-position: center center; }
  .hero-banner-contact { background-position: center 30%; }
  /* Eyebrow labels (uppercase tracking-wider) — reduce on mobile */
  .text-label-sm.uppercase {
    font-size: 13px !important;
    line-height: 18px !important;
  }
  /* Contact form pathway tabs — stack icon + text vertically on mobile */
  .inquiry-tab-btn {
    flex-direction: column !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding: 0.5rem 0.25rem !important;
    gap: 0.2rem !important;
  }
  .inquiry-tab-btn i {
    font-size: 15px !important;
  }
  /* Cards — reduce padding on mobile */
  .card,
  .card-compact,
  .card-glass,
  .card-glass-row {
    padding: 1rem !important;
  }
  /* Footer top bar — center logo + nav on mobile */
  footer .section-container > div:first-child {
    align-items: center !important;
  }
  footer .section-container > div:first-child nav {
    justify-content: center !important;
  }
  /* Footer bottom bar — copyright font size */
  footer .font-body-md.text-body-md {
    font-size: 15px !important;
    line-height: 22px !important;
  }
  /* Footer links row — tighter gap on mobile */
  footer .gap-space-lg {
    gap: 0.5rem !important;
  }
}

/* --- Mobile Hero Home: blurred bg + imagen clara debajo del texto --------- */
@media (max-width: 767px) {
  /* Quitar bg-image nativa; ::before la reemplaza con blur */
  .hero-banner-home {
    background-image: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
  }

  /* Fondo desenfocado detrás del texto */
  .hero-banner-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/photo_4970244285487844413_y.webp');
    background-size: cover;
    background-position: center 25%;
    filter: blur(8px);
    transform: scale(1.08); /* oculta bordes del blur dentro de overflow:hidden */
    z-index: 0;
  }

  /* Overlay más opaco para que el texto sea legible sobre el blur */
  .hero-banner-home .hero-overlay {
    background: rgba(0, 15, 34, 0.80) !important;
    z-index: 1;
  }

  /* Imagen clara como flex-child, aparece debajo del texto */
  .hero-banner-home::after {
    content: '';
    display: block;
    width: calc(100% - 2rem);
    height: 260px;
    background-image: url('assets/photo_4970244285487844413_y.webp');
    background-size: cover;
    background-position: center 25%;
    border-radius: 20px;
    margin: 0 1rem 1.5rem;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
  }
}

/* --- Mobile Hero (patient / pi / sponsor / contact): mismo tratamiento ----- */
@media (max-width: 767px) {

  /* Propiedades compartidas: quitar bg-image, layout columna */
  .hero-banner-patient,
  .hero-banner-pi,
  .hero-banner-sponsor,
  .hero-banner-contact {
    background-image: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
  }

  /* Overlay reforzado — igual para todas */
  .hero-banner-patient .hero-overlay,
  .hero-banner-pi .hero-overlay,
  .hero-banner-sponsor .hero-overlay,
  .hero-banner-contact .hero-overlay {
    background: rgba(0, 15, 34, 0.80) !important;
    z-index: 1;
  }

  /* Propiedades compartidas del ::before y ::after */
  .hero-banner-patient::before,
  .hero-banner-pi::before,
  .hero-banner-sponsor::before,
  .hero-banner-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    filter: blur(8px);
    transform: scale(1.08);
    z-index: 0;
  }

  .hero-banner-patient::after,
  .hero-banner-pi::after,
  .hero-banner-sponsor::after,
  .hero-banner-contact::after {
    content: '';
    display: block;
    width: calc(100% - 2rem);
    height: 260px;
    background-size: cover;
    border-radius: 20px;
    margin: 0 1rem 1.5rem;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
  }

  /* Imagen y posición específica por página */
  .hero-banner-patient::before { background-image: url('assets/photo_4970244285487844420_y.webp'); background-position: center 15%; }
  .hero-banner-patient::after  { background-image: url('assets/photo_4970244285487844420_y.webp'); background-position: center 15%; }

  .hero-banner-pi::before { background-image: url('assets/photo_4970244285487844417_y.webp'); background-position: center 20%; }
  .hero-banner-pi::after  { background-image: url('assets/photo_4970244285487844417_y.webp'); background-position: center 20%; }

  .hero-banner-sponsor::before { background-image: url('assets/photo_4970244285487844409_y.webp'); background-position: center center; }
  .hero-banner-sponsor::after  { background-image: url('assets/photo_4970244285487844409_y.webp'); background-position: center center; }

  .hero-banner-contact::before { background-image: url('assets/photo_4970244285487844405_y.webp'); background-position: center 30%; }
  .hero-banner-contact::after  { background-image: url('assets/photo_4970244285487844405_y.webp'); background-position: center 30%; }
}

/* --- Mobile Navigation ---------------------------------------------------- */
#mobile-menu {
  background-color: var(--color-surface-container-lowest);
  border-top: var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

/* Mobile nav active link */
.mobile-nav-active {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: block;
}

/* Mobile nav inactive link */
.mobile-nav-link {
  color: var(--color-on-surface-variant);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: block;
  transition: background-color 0.15s, color 0.15s;
}
.mobile-nav-link:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* --- Section sphere backgrounds -------------------------------------------
   Reemplazan los divs de esferas decorativas + position:relative;overflow:hidden
   ::before → esfera superior derecha
   ::after  → esfera inferior izquierda
   La tercera esfera (centro, muy sutil) va baked en el background.
   El contenido interno debe tener position:relative;z-index:1
   --------------------------------------------------------------------------- */

/* index.html — electric (top-right) + brand (bottom-left) + navy hint (center) */
.bg-gradient-surface-spheres {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle 140px at 52% 35%, rgba(10,37,64,0.06) 0%, rgba(10,37,64,0) 100%),
    radial-gradient(circle at 92% 0%,     rgba(91,184,254,0.30) 0%, rgba(0,99,152,0.16) 22%, rgba(10,37,64,0.05) 48%, rgba(0,15,34,0) 72%),
    radial-gradient(ellipse at 62% 8%,    rgba(0,99,152,0.13)   0%, rgba(10,37,64,0.06) 42%, rgba(0,15,34,0) 72%),
    radial-gradient(ellipse at 44% 38%,   rgba(10,37,64,0.06)   0%, rgba(0,15,34,0.03) 50%, rgba(0,15,34,0) 76%),
    radial-gradient(ellipse at 14% 78%,   rgba(0,99,152,0.10)   0%, rgba(10,37,64,0.04) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, #ffffff 0%, #f3f7ff 22%, #ecf2ff 48%, #eff4ff 72%, #f8f9ff 100%);
}
.bg-gradient-surface-spheres::before {
  content: "";
  position: absolute;
  inset: auto -160px auto auto;
  top: -220px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at 25% 25%, #e0f2fe 0%, #38bdf8 25%, #0284c7 55%, #000f22 100%);
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.bg-gradient-surface-spheres::after {
  content: "";
  position: absolute;
  bottom: -180px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 28%, #38bdf8 0%, #2563eb 35%, #006398 60%, #000f22 100%);
  filter: blur(60px);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

/* investigation.html — cyan bloom top-right, softer secondary bottom-left */
.bg-gradient-surface-spheres-pi {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 50% at 96% 2%,  rgba(91,184,254,0.16) 0%, rgba(91,184,254,0) 100%),
    radial-gradient(ellipse 48% 44% at 4% 98%,  rgba(0,99,152,0.08)   0%, rgba(0,99,152,0) 100%),
    linear-gradient(155deg, #ffffff 0%, #f5f9ff 32%, #edf4ff 60%, #f4f8ff 82%, #fafcff 100%);
}
.bg-gradient-surface-spheres-pi::before {
  content: "";
  position: absolute;
  top: -190px;
  right: -130px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%,
    rgba(219,241,255,0.95) 0%,
    rgba(91,184,254,0.80)  22%,
    rgba(14,165,233,0.36)  48%,
    rgba(0,99,152,0.05)    72%,
    rgba(0,99,152,0)       100%);
  filter: blur(84px);
  opacity: 0.58;
  pointer-events: none;
  z-index: 0;
}
.bg-gradient-surface-spheres-pi::after {
  content: "";
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 34%,
    rgba(224,244,255,0.90) 0%,
    rgba(91,184,254,0.62)  24%,
    rgba(56,125,244,0.20)  52%,
    rgba(0,99,152,0.04)    76%,
    rgba(0,99,152,0)       100%);
  filter: blur(74px);
  opacity: 0.46;
  pointer-events: none;
  z-index: 0;
}

/* --- Scroll Reveal ---------------------------------------------------------
   JS counterpart in global.js adds .visible when element enters viewport.
   ----------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Eyebrow / Section Badge -----------------------------------------------
   Pill-shaped eyebrow label. .eyebrow — light sections.
   .section-badge-dark — on navy/dark sections.
   ----------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background-color: var(--color-surface-container);
  border: 1px solid var(--color-surface-container-high);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-secondary);
  width: fit-content;
  margin-bottom: 0.625rem;
}

.section-badge-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-secondary-container);
  width: fit-content;
  margin-bottom: 0.625rem;
}

/* Card-icon hover — gradient fills to brand blue, glow shadow appears */
.card:hover .card-icon,
.card-compact:hover .card-icon {
  transform: scale(1.12);
  background: linear-gradient(140deg, var(--color-secondary) 0%, var(--color-primary-container) 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 99, 152, 0.28);
}

/* Step number badge — numbered process steps (e.g. How it Works) */
.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  background: linear-gradient(140deg, #dce9ff 0%, #b4cff0 100%);
  border: 1px solid rgba(0, 99, 152, 0.15);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  flex-shrink: 0;
}

/* Icon pill — bare icon wrapper for cards that lack a container */
.icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: linear-gradient(140deg, #dce9ff 0%, #b4cff0 100%);
  color: var(--color-secondary);
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.22s ease, color 0.22s ease;
}
.card:hover .icon-pill {
  transform: scale(1.08);
  background: linear-gradient(140deg, var(--color-secondary) 0%, var(--color-primary-container) 100%);
  color: #ffffff;
}

/* Icon glass — feature icon container for dark/navy sections */
.icon-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-secondary-container);
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.22s ease, border-color 0.22s ease;
}
.card-glass:hover .icon-glass,
.card-glass-row:hover .icon-glass {
  transform: scale(1.1);
  background: rgba(91, 184, 254, 0.20);
  border-color: rgba(91, 184, 254, 0.36);
}

/* Check pill — checkmark badge for dark-section bullet lists */
.check-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--color-secondary-container);
  border: none;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* --- Stat number display ------------------------------------------------- */
.stat-number {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-primary);
}

/* --- Infinite marquee slide ----------------------------------------------- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-slide 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}