/* ═══════════════════════════════════════════
   LAYOUT — Contenedores, secciones y cabeceras
   ═══════════════════════════════════════════ */

/* Page system — mostrar/ocultar paginas */
.page { display: none; }
.page.active { display: block; }

/* Secciones */
.section { padding: 72px 32px; position: relative; }
.section-sm { padding: 48px 32px; }
.section-inner { max-width: 960px; margin: 0 auto; }
.section-narrow { max-width: 640px; margin: 0 auto; }
.line-accent { height: 1px; background: linear-gradient(90deg, transparent, var(--navy-200), transparent); opacity: 0.5; }

/* Cabeceras de pagina — degradados pronunciados con resplandor */
.page-header {
  padding: 130px 32px 56px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0B1222 0%, #111D33 20%, #162C4A 45%, #1B3A5E 70%, #1E4570 100%);
}
.page-header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 30% 100%, rgba(74,122,184,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 0%, rgba(44,182,125,0.06) 0%, transparent 60%);
}
.page-header::after {
  content: ''; position: absolute; inset: 0; opacity: 0.025; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-header .inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.page-header .eyebrow {
  font-family: 'DM Sans'; font-size: 11px; font-weight: 500;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--navy-300);
}
.page-header h1 { margin-top: 12px; font-size: clamp(28px, 3.5vw, 40px); color: #fff; }
.page-header p { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,0.55); max-width: 440px; line-height: 1.7; }
.page-header-dark {
  background: linear-gradient(160deg, #0B1222 0%, #0F1A2E 30%, #111D33 55%, #162C4A 100%);
}

/* Cabeceras de seccion */
.sh { margin-bottom: 32px; }
.sh.centered { text-align: center; }
.sh .eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--navy-400);
}
.sh h2 { margin-top: 8px; font-size: clamp(24px, 3vw, 34px); }
.sh p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); max-width: 480px; line-height: 1.7; }
.sh.centered p { margin-left: auto; margin-right: auto; }
.sh.light h2 { color: #fff; }
.sh.light p { color: rgba(255,255,255,0.55); }
.sh.light .eyebrow { color: var(--navy-300); }

/* Seccion oscura — multiples capas de degradado con difuminados */
.dark-section {
  background: linear-gradient(160deg, #0B1222 0%, #0F1A2E 20%, #132D4A 50%, #1B3A5E 75%, #1E4570 100%);
  color: #fff; position: relative; overflow: hidden;
}
.dark-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(74,122,184,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(30,69,112,0.10) 0%, transparent 60%);
}
.dark-section::after {
  content: ''; position: absolute; top: -30%; right: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(74,122,184,0.10) 0%, rgba(59,96,152,0.04) 35%, transparent 65%);
  border-radius: 50%; pointer-events: none; animation: drift 25s ease-in-out infinite;
  filter: blur(40px);
}

/* Fondos dinamicos para secciones claras (efectos inyectados via JS) */
.section[style*="background:#fff"],
.section[style*="background: #fff"] {
  position: relative;
}