/* =============================================================================
   GLASS · Sistema canónico de glassmorphism SprintIA
   Recurso compartido entre TODAS las páginas. Una sola fuente de verdad para el
   efecto frosted-glass aplicado a paneles editoriales y cualquier contenedor
   que quiera el mismo aspecto que el <footer>.

   Cambia los tokens en :root y todo el sitio se actualiza.
   ============================================================================= */

:root {
  /* --- Tokens canónicos del glassmorphism --- */
  --glass-tint:
    linear-gradient(135deg,
      rgba(216,238,247,.18) 0%,
      rgba(232,230,248,.18) 50%,
      rgba(221,243,230,.18) 100%);
  --glass-base: rgba(11,13,18,.55);
  --glass-blur: blur(14px) saturate(160%);
  --glass-border: 1px solid rgba(255,255,255,.18);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 32px 80px -30px rgba(0,0,0,.5);
  --glass-radius: clamp(28px, 3vw, 44px);
}

/* --- Utility class · cualquier contenedor que quiera glass ------------------- */
.glass {
  background: var(--glass-tint), var(--glass-base);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: #fff;
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

/* --- Sistema editorial · todas las variantes comparten el mismo glass -------- */
.editorial,
.editorial.bare,
.editorial.minimal,
.editorial.frame,
.editorial.light {
  background: var(--glass-tint), var(--glass-base);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: #fff;
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 120px) clamp(28px, 5vw, 80px);
}
.editorial > * { position: relative; z-index: 2; }

/* Acento cromático base (radial-gradient overlay) */
.editorial::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(110,231,168,.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(183,148,244,.14), transparent 60%);
  pointer-events: none;
}

/* --- Variantes · sólo cambia el acento cromático (::before) ------------------ */
.editorial.bare {
  padding: clamp(36px, 5vw, 80px) clamp(24px, 4vw, 64px);
}
.editorial.bare::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(110,231,168,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(30,200,255,.18), transparent 60%);
}

.editorial.minimal {
  padding: clamp(36px, 5vw, 80px) clamp(24px, 4vw, 64px);
}
.editorial.minimal::before {
  background:
    radial-gradient(ellipse 60% 50% at 30% 10%, rgba(30,200,255,.20), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(110,231,168,.16), transparent 60%);
}

.editorial.frame::before {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, rgba(183,148,244,.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(110,231,168,.20), transparent 60%);
}

.editorial.light::before {
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(110,231,168,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(30,200,255,.18), transparent 60%);
}