/* ==========================================================================
   MAIN CSS — Innova Theme
   Layout centrado, animaciones futuristas, tipografía base.
   ========================================================================== */

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: var(--gradient-radial);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* --- Tipografía base --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-accent-hover); }

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

strong, b {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

ul, ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
}

blockquote {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-lg);
  margin: var(--space-xl) 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-3xl) 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Layout: centrado global --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  text-align: center;
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

/* --- Secciones --- */
.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
  overflow: hidden;
}

/* Separador gradiente animado entre secciones */
.section--border {
  border-top: none;
}

.section--border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  width: 80%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent) 20%,
    var(--color-accent-light) 40%,
    var(--color-gold) 60%,
    var(--color-accent-light) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer-line 6s linear infinite;
  opacity: 0.6;
}

@keyframes shimmer-line {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Fondos alternados con orbes de luz */
.section--glow-blue {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(0, 136, 255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 191, 255, 0.03) 0%, transparent 50%);
}

.section--glow-gold {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255, 184, 0, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(0, 136, 255, 0.03) 0%, transparent 50%);
}

.section--glow-center {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 136, 255, 0.05) 0%, transparent 60%);
}

/* Títulos de sección h2 — shimmer animado */
.section h2 {
  background: linear-gradient(
    90deg,
    var(--color-text) 0%,
    var(--color-text) 35%,
    var(--color-accent-light) 45%,
    var(--color-gold) 50%,
    var(--color-accent-light) 55%,
    var(--color-text) 65%,
    var(--color-text) 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-text 6s ease-in-out infinite;
}

@keyframes shimmer-text {
  0%, 100% { background-position: 100% center; }
  50%      { background-position: 0% center; }
}

.site-main {
  min-height: calc(100vh - var(--nav-height));
}

/* --- Section number (gradiente) --- */
.section-number {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: var(--space-sm);
}

/* --- Section label (gradiente) --- */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  margin-bottom: var(--space-sm);
}

/* --- Utilidades --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-text-muted); }

.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* ==========================================================================
   ANIMACIONES KEYFRAME
   ========================================================================== */

/* Gradiente rotativo (para bordes animados) */
@keyframes gradient-rotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* Resplandor pulsante */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 136, 255, 0.15); }
  50%      { box-shadow: 0 0 40px rgba(0, 136, 255, 0.3), 0 0 60px rgba(0, 136, 255, 0.1); }
}

/* Brillo que recorre el texto */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Flotar suave */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Fade in desde abajo */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in con escala */
@keyframes fade-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Línea que se expande */
@keyframes line-expand {
  from { width: 0; }
  to   { width: 100%; }
}

/* Contador numérico (solo visual, JS hace el incremento) */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Elementos animados --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger para grids */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.5s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.6s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.7s; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 0.8s; }

/* Shimmer en texto */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-text) 0%,
    var(--color-accent-light) 25%,
    var(--color-gold) 50%,
    var(--color-accent-light) 75%,
    var(--color-text) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Texto gradiente estático */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  z-index: var(--z-modal);
  transition: top var(--transition-fast);
}

.skip-link:focus { top: var(--space-md); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Admin bar --- */
.admin-bar .site-nav { top: 32px; }
.admin-bar .scroll-progress { top: calc(32px + var(--nav-height)); }

@media (max-width: 782px) {
  .admin-bar .site-nav { top: 46px; }
  .admin-bar .scroll-progress { top: calc(46px + var(--nav-height)); }
}

/* ==========================================================================
   BARRA DE PROGRESO DE SCROLL
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 9998;
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light), var(--color-gold));
  box-shadow: 0 0 8px rgba(0, 136, 255, 0.4), 0 0 4px rgba(255, 184, 0, 0.3);
  transition: width 50ms linear;
}