@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

@media (min-width: 1024px) {
  html { font-size: 13.5px; }
}

:root {
  --navy:         #0B132B;
  --blue:         #2563EB;
  --blue-hover:   #1D4ED8;
  --blue-accent:  #00E5FF;
  --text-body:    #64748B;
  --text-muted:   #94A3B8;
  --white:        #FFFFFF;
  --card-border:  rgba(37,99,235,0.11);
  --card-shadow:  0 2px 12px rgba(11,19,43,0.10);
  --badge-bg:     color-mix(in srgb, var(--blue) 8%, transparent);
  --badge-border: color-mix(in srgb, var(--blue) 18%, transparent);
  --pill-bg:      linear-gradient(130deg, var(--blue-accent) 0%, var(--blue) 100%);
  --pill-shadow:  0 2px 10px color-mix(in srgb, var(--blue) 30%, transparent);
  --card-bg:      rgba(255,255,255,0.97);
  --border:       var(--card-border);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background-color: #F7F9FF;
  color: var(--navy);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── FONDO GRADIENTE (fijo = viewport-sized, no document-sized) ── */
#bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, color-mix(in srgb, var(--blue-accent) 20%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 55% 92%, color-mix(in srgb, var(--blue) 20%, transparent) 0%, transparent 55%);
}

@media (max-width: 680px) {
  #bg-layer {
    background-image:
      radial-gradient(ellipse 80% 55% at 15% 25%, color-mix(in srgb, var(--blue-accent) 20%, transparent) 0%, transparent 65%),
      radial-gradient(ellipse 50% 40% at 55% 92%, color-mix(in srgb, var(--blue) 13%, transparent) 0%, transparent 55%);
  }
}

/* ── CANVAS ── */
#neural-canvas        { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#static-neural-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#app                  { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════════
   NIVEL WIDGET, navbar top-right
══════════════════════════════════════════════════════════════ */
.nivel-widget {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.65rem 0.28rem 0.38rem;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
  position: relative;
}

.nivel-widget:hover {
  border-color: color-mix(in srgb, var(--blue) 38%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--blue) 10%, transparent);
}

.nivel-badge-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--blue) 18%, transparent));
  transition: filter 0.3s;
}

.nivel-widget:hover .nivel-badge-img {
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--blue) 35%, transparent));
}

.nivel-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nivel-nombre {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  letter-spacing: 0.2px;
  line-height: 1;
}

.nivel-bar-track {
  width: 58px;
  height: 3px;
  background: rgba(148,163,184,0.22);
  border-radius: 99px;
  overflow: hidden;
}

.nivel-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
  border-radius: 99px;
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1);
}

.dark-base .nivel-widget {
  background: rgba(12,22,42,0.70);
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}
.dark-base .nivel-nombre { color: #C4D0E3; }

@media (max-width: 640px) {
  .nivel-info { display: none; }
  .nivel-widget { padding: 0.28rem; border-radius: 50%; }
}

/* ── POPUP DE NIVEL ── */
/* position: fixed, el JS calcula top/right dinámicamente para evitar
   clipping por backdrop-filter/overflow del navbar en móvil */
.nivel-popup {
  position: fixed;
  width: 230px;  /* puede ser sobreescrito por JS en pantallas muy estrechas */
  background: rgba(247,249,255,0.97);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  border-radius: 18px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.14), 0 2px 8px color-mix(in srgb, var(--blue) 10%, transparent);
  padding: 1.25rem 1.1rem 1.1rem;
  z-index: 1200;
  text-align: center;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: np-in 0.16s ease;
}

@keyframes np-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nivel-popup::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  width: 11px;
  height: 11px;
  background: rgba(247,249,255,0.97);
  border-left: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  transform: rotate(45deg);
}

.nivel-popup-badge {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 0.55rem;
  filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--blue) 22%, transparent));
}

.nivel-popup-level {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.2rem;
}

.nivel-popup-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.55rem;
  line-height: 1.2;
}

.nivel-popup-xp {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.32rem;
}

.nivel-popup-bar-track {
  height: 4px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.85rem;
}

.nivel-popup-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
  border-radius: 99px;
  transition: width 0.45s cubic-bezier(0.4,0,0.2,1);
}

.nivel-popup-msg {
  font-size: 0.74rem;
  color: var(--text-secondary, #475569);
  line-height: 1.56;
  margin-bottom: 0.7rem;
}

.nivel-popup-next {
  font-size: 0.67rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  border-radius: 9px;
  padding: 0.38rem 0.7rem;
  line-height: 1.45;
}

.nivel-popup-next strong { color: var(--navy); font-weight: 700; }

.dark-base .nivel-popup {
  background: rgba(8,16,34,0.97);
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
}
.dark-base .nivel-popup::before {
  background: rgba(8,16,34,0.97);
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
}
.dark-base .nivel-popup-name { color: #E2E8F0; }
.dark-base .nivel-popup-msg  { color: #94A3B8; }
.dark-base .nivel-popup-next { background: color-mix(in srgb, var(--blue) 8%, transparent); color: #94A3B8; }
.dark-base .nivel-popup-next strong { color: #E2E8F0; }

@media (max-width: 768px) {
  /* El posicionado top/right lo calcula el JS, aquí solo ajustamos tamaños */
  .nivel-popup {
    padding: 1rem 1rem 0.9rem;
    border-radius: 14px;
  }
  .nivel-popup::before   { display: none; }
  .nivel-popup-badge     { width: 46px; height: 46px; margin-bottom: 0.4rem; }
  .nivel-popup-level     { font-size: 0.6rem; margin-bottom: 0.15rem; }
  .nivel-popup-name      { font-size: 0.88rem; margin-bottom: 0.4rem; }
  .nivel-popup-xp        { font-size: 0.63rem; margin-bottom: 0.25rem; }
  .nivel-popup-bar-track { margin-bottom: 0.65rem; }
  .nivel-popup-msg       { font-size: 0.66rem; line-height: 1.48; margin-bottom: 0.5rem; }
  .nivel-popup-next      { font-size: 0.6rem; padding: 0.28rem 0.55rem; }
}

/* ══════════════════════════════════════════════════════════════
   LEVEL-UP OVERLAY
══════════════════════════════════════════════════════════════ */
.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.levelup-overlay[hidden] { display: none; }

.levelup-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.levelup-card {
  position: relative;
  z-index: 9501;
  background: rgba(4, 10, 22, 0.96);
  border: 1px solid color-mix(in srgb, var(--blue-accent) 28%, transparent);
  border-radius: 26px;
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  max-width: 360px;
  width: 90%;
  box-shadow:
    0 0 60px color-mix(in srgb, var(--blue-accent) 12%, transparent),
    0 0 120px color-mix(in srgb, var(--blue) 8%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.88) translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.levelup-card.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.levelup-badge-anim {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin: 0 auto 1.1rem;
  display: block;
  animation: lu-badge-pulse 2.5s ease-in-out infinite;
}

@keyframes lu-badge-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--blue-accent) 55%, transparent)); transform: scale(1); }
  50%       { filter: drop-shadow(0 0 32px color-mix(in srgb, var(--blue-accent) 90%, transparent)) drop-shadow(0 0 60px color-mix(in srgb, var(--blue) 45%, transparent)); transform: scale(1.05); }
}

.levelup-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-accent);
  opacity: 0.75;
  margin-bottom: 0.35rem;
}

.levelup-nombre-card {
  font-size: 1.55rem;
  font-weight: 800;
  color: #E8F4FF;
  letter-spacing: -0.4px;
  margin-bottom: 1.2rem;
}

.levelup-perfil {
  font-size: 0.84rem;
  color: rgba(170, 205, 230, 0.88);
  line-height: 1.68;
  margin-bottom: 0.7rem;
  font-style: italic;
}

.levelup-percentil {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--blue-accent);
  margin-bottom: 0.7rem;
  letter-spacing: 0.1px;
}

.levelup-mensaje {
  font-size: 0.78rem;
  color: rgba(140, 165, 190, 0.75);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.levelup-tema-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto 1.25rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 0.75rem;
  color: rgba(200,220,240,0.85);
  width: fit-content;
}

.levelup-tema-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.30);
}

.levelup-tema-text strong {
  color: #fff;
  font-weight: 700;
}

.levelup-close {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1.8rem;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--blue-accent) 42%, transparent);
  border-radius: 999px;
  color: var(--blue-accent);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.levelup-close:hover {
  background: color-mix(in srgb, var(--blue-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--blue-accent) 75%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   GLOSARIO EMERGENTE
══════════════════════════════════════════════════════════════ */
.gloss {
  border-bottom: 1.5px dashed color-mix(in srgb, var(--blue) 40%, transparent);
  cursor: help;
  position: relative;
  color: inherit;
  white-space: nowrap;
}

.gloss::after {
  content: attr(data-def);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: #0B132B;
  color: #C8DCED;
  font-size: 0.72rem;
  line-height: 1.58;
  padding: 0.55rem 0.85rem;
  border-radius: 9px;
  width: 240px;
  white-space: normal;
  text-align: left;
  font-style: normal;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 300;
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}

.gloss::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #0B132B;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 300;
}

.gloss:hover::after,
.gloss:hover::before { opacity: 1; }

.dark-base .gloss { border-bottom-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.dark-base .gloss::after  { background: #0D1B30; color: #BAD0E4; box-shadow: 0 6px 20px rgba(0,0,0,0.55); }
.dark-base .gloss::before { border-top-color: #0D1B30; }

/* Ocultar tooltip CSS en dispositivos táctiles (lo gestiona JS) */
@media (hover: none) {
  .gloss::after, .gloss::before { display: none; }
}

/* Tooltip JS para dispositivos táctiles */
.gloss-tip {
  position: fixed;
  background: #0B132B;
  color: #C8DCED;
  font-size: 0.72rem;
  line-height: 1.58;
  padding: 0.55rem 0.85rem;
  border-radius: 9px;
  max-width: min(280px, calc(100vw - 2rem));
  white-space: normal;
  text-align: left;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s;
}

.gloss-tip.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dark-base .gloss-tip { background: #0D1B30; color: #BAD0E4; box-shadow: 0 6px 20px rgba(0,0,0,0.55); }

/* En desktop (hover disponible) el tooltip JS no se usa */
@media (hover: hover) { .gloss-tip { display: none; } }

/* ── ACCESIBILIDAD ── */

/* Focus ring universal para navegación por teclado */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.dark-base :focus-visible { outline-color: var(--blue); }

/* Eliminar el outline en elementos que ya tienen estilos propios de foco */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0; }

/* ── NAVBAR ── */
.navbar {
  background: rgba(235,242,255,0.97);
  border-bottom: 1px solid rgba(37,99,235,0.11);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.navbar-inner {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}

.logo { height: 36px; width: auto; mix-blend-mode: multiply; }

.navbar-brand-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.nav-link {
  padding: 0.42rem 0.95rem;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--navy);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.5);
  border: 1.5px solid rgba(148,163,184,0.2);
  text-decoration: none;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.social-btn:hover {
  color: var(--navy);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}

.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1.5px solid rgba(148,163,184,0.2);
  border-radius: 8px;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.hamburger-btn:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }

.mobile-menu {
  background: #F5F7FF;   /* 100% opaco, sin transparencia que deje pasar el blur */
  padding: 0.6rem 1.5rem 1.5rem;
}

.mobile-menu[hidden] { display: none; }

/* Cabecera de marca dentro del panel */
.mobile-menu-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.2rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mobile-menu-logo  { width: 30px; height: 30px; object-fit: contain; }

.mobile-menu-brand {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
}

/* Overlay, el blur SOLO aquí, nunca en el panel */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 499;
  background: rgba(11,19,43,0.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
body.menu-open .mobile-menu-overlay { opacity: 1; pointer-events: auto; }

.mobile-nav { display: flex; flex-direction: column; padding: 0; margin: 0; }

.mobile-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: color 0.18s;
}

.mobile-nav-link:last-child { border-bottom: none; }

.mobile-nav-chevron { color: rgba(11,19,43,0.28); flex-shrink: 0; transition: color 0.18s; }

.mobile-nav-link:hover                     { color: var(--blue); }
.mobile-nav-link:hover .mobile-nav-chevron { color: var(--blue); }

/* Botón de acción directa (sin subpanel) dentro del menú móvil */
.mobile-nav-link--action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 14px 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: color 0.18s;
}
.mobile-nav-link--action .mobile-nav-chevron { margin-left: auto; }
.mobile-nav-link--action:hover { color: var(--blue); }
.mobile-nav-link--action:hover .mobile-nav-chevron { color: var(--blue); }

/* ── HERO BUBBLE (circular premium) ── */

/* El hero necesita position:relative para anclar la burbuja */
.hero { position: relative; }

/* Enlace contenedor: gestiona el flotado vertical */
.hero-bubble {
  position: absolute;
  /* Centrado vertical: top 50% menos la mitad del disco (60px) */
  top: calc(50% - 60px);
  /* A la derecha del bloque central (520px / 2 = 260px desde centro) + holgura */
  left: calc(50% + 310px);
  text-decoration: none;
  cursor: pointer;
  display: block;
  /* El flotado usa translateY en la animación, no en el base */
  animation: bubble-float 4s ease-in-out infinite;
  /* Sólo ocultar en pantallas que no tienen espacio */
}

/* Disco circular, cristal blanco, color solo en el contorno */
.hero-bubble-disk {
  width: 120px;
  height: 120px;
  border-radius: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 1rem;
  text-align: center;

  background: rgba(255, 255, 255, 0.88);

  /* Color solo en el contorno: anillo cian + anillo azul via box-shadow */
  box-shadow:
    0 0 0 2px  var(--blue-accent),
    0 0 0 4px  var(--blue),
    0 0 18px color-mix(in srgb, var(--blue-accent) 20%, transparent),
    0 4px 12px rgba(11, 19, 43, 0.08);

  /* Texto oscuro para máximo contraste sobre el blanco */
  color: var(--navy);

  transition:
    transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.32s ease;
}

/* Sin pseudo-elemento, el borde lo hace el box-shadow */
.hero-bubble-disk::before { display: none; }

/* Hover */
.hero-bubble:hover .hero-bubble-disk {
  transform: scale(1.11);
  box-shadow:
    0 0 0 2px  var(--blue-accent),
    0 0 0 4.5px var(--blue),
    0 0 30px color-mix(in srgb, var(--blue-accent) 35%, transparent),
    0 6px 18px rgba(11, 19, 43, 0.10);
}

.hero-bubble-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(0, 70, 180, 0.25));
}

.hero-bubble-label {
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.15px;
}

/* Flotado vertical orgánico, sin cambios */
@keyframes bubble-float {
  0%, 100% { transform: translateY(0px); }
  35%       { transform: translateY(-8px); }
  65%       { transform: translateY(-11px); }
}

/* Dark mode: mismo cristal semitransparente pero sobre fondo oscuro */
.dark-base .hero-bubble-disk {
  background: rgba(255, 255, 255, 0.12);
  color: #E2E8F0;
  box-shadow:
    0 0 0 2px  var(--blue-accent),
    0 0 0 4px  var(--blue),
    0 0 20px color-mix(in srgb, var(--blue-accent) 28%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.40);
}

.dark-base .hero-bubble-icon {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--blue-accent) 40%, transparent));
}

/* Ocultar en tablets (no hay espacio lateral) */
@media (max-width: 960px) {
  .hero-bubble { display: none; }
}


/* ── HERO ── */
@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.024); }
}

.hero          { padding: 1.4rem 2rem 1rem; text-align: center; }
.hero-content  { max-width: 520px; margin: 0 auto; }

.hero-logo {
  display: block;
  width: 110px;
  height: auto;
  max-width: 75%;
  margin: 0 auto 0.9rem;
  object-fit: contain;
  animation: logo-breathe 5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blue) 20%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--blue-accent) 12%, transparent));
  transition: filter 0.35s ease, transform 0.35s ease;
  cursor: default;
}

.hero-logo:hover {
  animation-play-state: paused;
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--blue-accent) 75%, transparent))
    drop-shadow(0 0 30px color-mix(in srgb, var(--blue) 58%, transparent))
    drop-shadow(0 0 58px color-mix(in srgb, var(--blue) 24%, transparent));
}

.hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--navy);
  line-height: 1.0;
  margin-bottom: 0.55rem;
}

.hero p {
  font-size: 0.93rem;
  color: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  max-width: 400px;
  margin: 0 auto;
}

/* Acceso rápido móvil (visible solo en ≤768px) */
.hero-quick-access {
  display: none;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.3rem;
  flex-wrap: wrap;
}

.hqa-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.62rem 1.1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}

.hqa-icon { opacity: 0.55; flex-shrink: 0; }

.hqa-mitos {
  background: rgba(124,58,237,0.09);
  color: #7C3AED;
  border-color: rgba(124,58,237,0.28);
}

.hqa-mitos:hover { background: #7C3AED; color: white; border-color: #7C3AED; }

/* ── BUSCADOR ── */
.search-section { padding: 0 0 1.6rem; }

.search-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.search-bar { width: 100%; position: relative; display: flex; align-items: center; flex-direction: column; }

/* ── Panel resultados búsqueda ── */
.srp-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: rgba(247,249,255,0.98);
  border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(11,19,43,0.14);
  z-index: 500;
  overflow: hidden;
  max-height: 360px;
  overflow-y: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.srp-panel[hidden] { display: none; }
.srp-empty {
  padding: 1rem 1.2rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.srp-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  transition: background 0.14s;
}
.srp-item:last-child { border-bottom: none; }
.srp-item:hover, .srp-item:focus { background: color-mix(in srgb, var(--blue) 6%, transparent); outline: none; }
.srp-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--blue);
  opacity: 0.75;
}
.srp-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.srp-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.srp-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.dark-base .srp-panel  { background: rgba(8,16,34,0.97); border-color: color-mix(in srgb, var(--blue) 16%, transparent); }
.dark-base .srp-item:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.dark-base .srp-title  { color: #E2E8F0; }

@media (max-width: 680px) {
  .srp-panel { max-height: 260px; border-radius: 10px; }
}

.search-bar-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.search-bar input {
  width: 100%;
  padding: 0.9rem 1.3rem 0.9rem 3rem;
  background: var(--white);
  border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 999px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--navy);
  box-shadow: 0 4px 18px rgba(11,19,43,0.07), 0 1px 4px rgba(11,19,43,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.search-bar input::placeholder { color: var(--text-muted); }
.search-bar input:focus {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  box-shadow: 0 4px 22px color-mix(in srgb, var(--blue) 12%, transparent), 0 1px 4px rgba(11,19,43,0.04);
}

/* ── PILLS ── */
.filter-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 1rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--blue) 15%, transparent);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  color: var(--blue);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pill:hover:not(.active) { background: color-mix(in srgb, var(--blue) 13%, transparent); border-color: color-mix(in srgb, var(--blue) 28%, transparent); }
.pill.active { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ── MAIN ── */
.main-content { max-width: 1260px; margin: 0 auto; padding: 0 2rem 4rem; }

.seccion-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.seccion-header h2 { font-size: 1rem; font-weight: 700; color: var(--navy); letter-spacing: -0.2px; white-space: nowrap; }
.seccion-linea { flex: 1; height: 1px; background: linear-gradient(to right, rgba(37,99,235,0.18), transparent); }

/* ── DOCS LAYOUT ── */
.docs-layout   { display: flex; flex-direction: column; gap: 1.5rem; }

.docs-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.bata-secciones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.bata-seccion-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: rgba(255,255,255,0.97);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.bata-seccion-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--blue) 28%, transparent);
  box-shadow: 0 4px 12px rgba(11,19,43,0.10), 0 12px 36px rgba(11,19,43,0.13);
}

.bata-seccion-tile-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.bata-seccion-tile-titulo { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.bata-seccion-tile-count  { font-size: 0.76rem; color: var(--text-muted); }

.bata-seccion-tile.bata-ver-todos {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
}
.bata-seccion-tile.bata-ver-todos .bata-seccion-tile-titulo { color: var(--blue); }

.bata-seccion-tile-arrow { flex-shrink: 0; color: var(--blue); opacity: 0.7; transition: transform 0.2s; }
.bata-seccion-tile:hover .bata-seccion-tile-arrow { transform: translateX(3px); }

@media (max-width: 640px) {
  .bata-secciones-grid { grid-template-columns: 1fr; }
}

.dark-base .bata-seccion-tile { background: rgba(12,22,42,0.92); }
.dark-base .bata-seccion-tile.bata-ver-todos { background: color-mix(in srgb, var(--blue) 10%, transparent); }

.bata-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
}

.bata-pill {
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  font-family: inherit;
}

.bata-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.bata-pill.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* ── TARJETA BASE ── */
.doc-card {
  background:
    radial-gradient(ellipse 65% 55% at 8% 0%, color-mix(in srgb, var(--blue-accent) 5%, transparent) 0%, transparent 60%),
    rgba(255,255,255,0.97);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.doc-card:nth-child(even) {
  background:
    radial-gradient(ellipse 65% 55% at 92% 0%, rgba(157,0,255,0.035) 0%, transparent 60%),
    rgba(255,255,255,0.97);
}

.doc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(11,19,43,0.10), 0 12px 36px rgba(11,19,43,0.13), 0 24px 64px rgba(11,19,43,0.08), 0 0 28px color-mix(in srgb, var(--blue) 10%, transparent), inset 0 1px 0 rgba(255,255,255,0.90);
  border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

/* ── TARJETA DESTACADA ── */
.doc-card.doc-featured {
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  border-left: 3px solid var(--blue);
  background: rgba(255,255,255,0.93);
}

.doc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.doc-aside {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.2rem;
}

/* ── METADATOS ── */
.doc-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.sep { color: rgba(148,163,184,0.6); }

.meta-time {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.clock-icon { flex-shrink: 0; }

/* ── ETIQUETAS ── */
.doc-labels { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.featured-label {
  display: inline-flex;
  align-items: center;
  background: var(--blue);
  color: var(--white);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.doc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--badge-bg);
  color: var(--blue);
  border: 1px solid var(--badge-border);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font-size: 0.70rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ── Color e icono por categoría (Fuera de Bata) ── */
:root {
  --cat-comportamiento: var(--blue);
  --cat-neuropsicologia: #7C3AED;
  --cat-psicologia-social: var(--blue-accent);
  --cat-rendimiento: #F59E0B;
  --cat-salud: #10B981;
  --cat-icon-comportamiento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
  --cat-icon-neuropsicologia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z'/%3E%3C/svg%3E");
  --cat-icon-psicologia-social: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='11' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --cat-icon-rendimiento: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
  --cat-icon-salud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.5 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

#docs-grid-2 .doc-card { border-left: 3px solid var(--cat-comportamiento); }
#docs-grid-2 .doc-card[data-category="neuropsicologia"]   { border-left-color: var(--cat-neuropsicologia); }
#docs-grid-2 .doc-card[data-category="psicologia-social"] { border-left-color: var(--cat-psicologia-social); }
#docs-grid-2 .doc-card[data-category="rendimiento"]        { border-left-color: var(--cat-rendimiento); }
#docs-grid-2 .doc-card[data-category="salud"]               { border-left-color: var(--cat-salud); }

#docs-grid-2 .doc-card .doc-badge {
  background: color-mix(in srgb, var(--cat-comportamiento) 12%, transparent);
  color: var(--cat-comportamiento);
  border-color: color-mix(in srgb, var(--cat-comportamiento) 30%, transparent);
}
#docs-grid-2 .doc-card[data-category="neuropsicologia"] .doc-badge {
  background: color-mix(in srgb, var(--cat-neuropsicologia) 12%, transparent);
  color: var(--cat-neuropsicologia);
  border-color: color-mix(in srgb, var(--cat-neuropsicologia) 30%, transparent);
}
#docs-grid-2 .doc-card[data-category="psicologia-social"] .doc-badge {
  background: color-mix(in srgb, var(--cat-psicologia-social) 12%, transparent);
  color: var(--cat-psicologia-social);
  border-color: color-mix(in srgb, var(--cat-psicologia-social) 30%, transparent);
}
#docs-grid-2 .doc-card[data-category="rendimiento"] .doc-badge {
  background: color-mix(in srgb, var(--cat-rendimiento) 12%, transparent);
  color: var(--cat-rendimiento);
  border-color: color-mix(in srgb, var(--cat-rendimiento) 30%, transparent);
}
#docs-grid-2 .doc-card[data-category="salud"] .doc-badge {
  background: color-mix(in srgb, var(--cat-salud) 12%, transparent);
  color: var(--cat-salud);
  border-color: color-mix(in srgb, var(--cat-salud) 30%, transparent);
}

#docs-grid-2 .doc-card .doc-badge::before {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--cat-icon-comportamiento) center / contain no-repeat;
  mask: var(--cat-icon-comportamiento) center / contain no-repeat;
}
#docs-grid-2 .doc-card[data-category="neuropsicologia"] .doc-badge::before   { -webkit-mask-image: var(--cat-icon-neuropsicologia); mask-image: var(--cat-icon-neuropsicologia); }
#docs-grid-2 .doc-card[data-category="psicologia-social"] .doc-badge::before { -webkit-mask-image: var(--cat-icon-psicologia-social); mask-image: var(--cat-icon-psicologia-social); }
#docs-grid-2 .doc-card[data-category="rendimiento"] .doc-badge::before       { -webkit-mask-image: var(--cat-icon-rendimiento); mask-image: var(--cat-icon-rendimiento); }
#docs-grid-2 .doc-card[data-category="salud"] .doc-badge::before             { -webkit-mask-image: var(--cat-icon-salud); mask-image: var(--cat-icon-salud); }

/* ── Fade-in escalonado al hacer scroll dentro del modal ── */
#docs-grid-2 .doc-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
#docs-grid-2 .doc-card.card-in-view {
  opacity: 1;
  transform: translateY(0);
}

.doc-card h3 {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.2px;
  line-height: 1.45;
}

.doc-desc {
  font-size: 0.85rem;
  color: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  flex-grow: 1;
}

/* ── ACCIONES (tarjetas regulares) ── */
.doc-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.2rem;
}

/* ── BOTONES ── */
.btn-descarga {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1.2rem;
  background: var(--blue);
  color: var(--white);
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  font-family: inherit;
  transition: background 0.2s, transform 0.15s;
}

.btn-descarga:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* Icono libro, micro-resplandor en blanco, consistente con los demás iconos del sitio */
.btn-descarga-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.50)) drop-shadow(0 0 6px rgba(255,255,255,0.22));
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.2rem;
  background: transparent;
  color: var(--blue);
  border: 1.5px solid color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  width: 100%;
  text-align: center;
}

.btn-outline:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }

/* ── OPEN ACCESS ── */
.oa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-body);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(148,163,184,0.18);
}

.oa-link:hover { color: var(--blue); }

/* ── CITA APA ── */
.cite-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: transparent;
  border: 1.5px solid rgba(148,163,184,0.25);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-body);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  text-align: left;
}

.cite-btn:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}

.cite-btn.copied {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16,185,129,0.06);
}

/* ── ESTADO VACÍO ── */
.empty-state {
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ── EMPTY STATE BASE (icono + texto) ── */
.li-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.4rem 1.2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.65;
}
.li-empty-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,0.10);
  color: var(--text-muted);
  flex-shrink: 0;
}
.li-empty strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--text-body); margin-bottom: 0.1rem; }
.dark-base .li-empty-icon { background: rgba(148,163,184,0.08); }

/* ── LÍNEAS DE INVESTIGACIÓN ── */
.research-section { border-top: 1px solid rgba(148,163,184,0.15); padding: 3.5rem 0; }
.research-inner   { max-width: 1260px; margin: 0 auto; padding: 0 2rem; }

.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
}

.research-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--card-border);
  border-left: 3px solid color-mix(in srgb, var(--blue) 35%, transparent);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.80);
  transition: transform 0.2s, box-shadow 0.2s;
}

.research-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(11,19,43,0.07);
}

.research-tag {
  display: inline-flex;
  align-self: flex-start;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.research-card h3 {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
}

/* ── TRUST STRIP ── */
.trust-strip {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--blue) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 10%, transparent);
  padding: 0.65rem 2rem;
}
.trust-strip-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  flex-wrap: wrap;
}
.trust-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
}
.trust-icon { color: var(--blue); flex-shrink: 0; }
.trust-separator { width: 1px; height: 14px; background: color-mix(in srgb, var(--blue) 20%, transparent); }
.dark-base .trust-strip { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 15%, transparent); }
.dark-base .trust-pill { color: rgba(196,208,227,0.80); }

/* ── STATS BAR ── */
.stats-bar {
  padding: 1.4rem 2rem;
  border-bottom: 1px solid var(--card-border);
}
.stats-bar-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; }
.stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue-accent) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label { font-size: 0.70rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.stat-divider { width: 1px; height: 30px; background: var(--card-border); }

/* ── FOOTER ── */
.footer-main { background: var(--navy); padding: 2.8rem 2rem 2rem; }

.footer-inner {
  max-width: 1260px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

/* 3-column footer */
.footer-inner--3col {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col--brand { max-width: 300px; }
.footer-col-heading {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.30);
  margin-bottom: 0.2rem;
}
.footer-col-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col-links a {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.50);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col-links a:hover { color: rgba(255,255,255,0.90); }
.footer-email {
  font-size: 0.80rem;
  color: var(--blue-accent);
  text-decoration: none;
  margin-top: 0.3rem;
  transition: opacity 0.2s;
}
.footer-email:hover { opacity: 0.70; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 2rem;
  padding-top: 1.2rem;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}

.footer-libro-strip {
  max-width: 1260px;
  margin: 1.6rem auto 0;
  padding: 0.7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}

.footer-libro-strip-label { opacity: 0.75; }

.footer-libro-strip-link {
  color: #FF9900;
  font-weight: 700;
  text-decoration: none;
}

.footer-libro-strip-link:hover { text-decoration: underline; }

.footer-left  { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-title { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.95); }
.footer-desc  { font-size: 0.82rem; color: rgba(255,255,255,0.45); max-width: 280px; line-height: 1.55; }

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}

.footer-links { display: flex; gap: 1.4rem; }

.footer-links a {
  font-size: 0.80rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: rgba(255,255,255,0.9); }

.footer-copy { font-size: 0.74rem; color: rgba(255,255,255,0.3); }
.footer-affiliate-note { font-size: 0.7rem; color: rgba(255,255,255,0.25); margin-top: 0.3rem; max-width: 480px; line-height: 1.5; }

.contacto-email {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.86rem; color: var(--blue); font-weight: 600;
  text-decoration: none; margin-top: 0.8rem; transition: color 0.2s;
}

.contacto-email:hover { color: var(--blue-hover); }

/* ── TAB BAR ── */
.tab-bar {
  display: flex; gap: 0;
  background: rgba(255,255,255,0.97);
  border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 12px; padding: 4px;
  width: 100%;
  position: relative;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--blue) 7%, transparent), 0 1px 4px rgba(11,19,43,0.05);
}

/* Indicador deslizante magnético */
.tab-pill {
  position: absolute;
  border-radius: 9px;
  background: var(--pill-bg);
  box-shadow: var(--pill-shadow);
  transition: left 0.3s ease-out, top 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out;
  pointer-events: none;
  z-index: 0;
  top: 4px; height: calc(100% - 8px); left: 4px; width: 0;
}

.tab-btn {
  flex: 1; padding: 0.65rem 1rem; border: none;
  background: transparent; border-radius: 9px;
  font-family: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--text-body); cursor: pointer;
  transition: color 0.22s ease; display: inline-flex;
  align-items: center; justify-content: center; gap: 0.45rem;
  position: relative; z-index: 1;
}

.tab-btn.active {
  background: transparent;
  color: #ffffff;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(11,19,43,0.18);
}

.tab-btn.active svg { opacity: 0.9; }

.tab-btn:hover:not(.active) { color: var(--navy); background: color-mix(in srgb, var(--blue) 6%, transparent); }

.tab-btn--hidden { display: none; }

/* Con Fuera de Bata y El Artículo de la Semana ocultas, la barra deja de
   parecer un selector con varias opciones y pasa a ser un encabezado simple */
.tab-bar--single {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  width: auto;
}

.tab-bar--single .tab-pill { display: none; }

.tab-bar--single .tab-btn {
  flex: none;
  padding: 0;
  cursor: default;
  color: var(--navy);
  font-size: 1rem;
}

/* Vista por defecto (Por Intereses activa): la etiqueta no navega a ningun
   sitio, se oculta. Solo reaparece, ya como boton, cuando estas en Fuera de
   Bata o El Articulo de la Semana y sirve para volver. */
.tab-bar--single .tab-btn.active { display: none; }

.tab-bar--single .tab-btn:not(.active):not(.tab-btn--hidden) {
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-hover));
  border: none;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  gap: 0.5rem;
  text-shadow: none;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--blue) 65%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.25);
  transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.tab-bar--single .tab-btn:not(.active):not(.tab-btn--hidden) svg { display: none; }

.tab-bar--single .tab-btn:not(.active):not(.tab-btn--hidden)::before {
  content: "←";
  font-size: 1.05em;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.tab-bar--single .tab-btn:hover:not(.active):not(.tab-btn--hidden) {
  background: linear-gradient(135deg, var(--blue-hover), var(--blue-hover));
  box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--blue) 78%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-2px);
  color: #fff;
}

.tab-bar--single .tab-btn:hover:not(.active):not(.tab-btn--hidden)::before {
  transform: translateX(-3px);
}

/* ── TAB PANELS ── */
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: panel-fade-in 0.22s ease forwards;
  contain: layout style;
}

@keyframes panel-fade-in {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   NAVBAR, botón glosario
══════════════════════════════════════════════════════════════ */
.nav-link-btn {
  background: none;
  font-family: inherit;
  border: none;
}

/* ══════════════════════════════════════════════════════════════
   GLOSARIO, MODAL
══════════════════════════════════════════════════════════════ */
.glosario-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(3, 8, 22, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: ob-fade-in 0.28s ease;
}
.glosario-overlay[hidden] { display: none; }

.glosario-card {
  background: rgba(247, 249, 255, 0.99);
  border-radius: 22px;
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 4px 16px color-mix(in srgb, var(--blue) 10%, transparent);
  overflow: hidden;
  position: relative;
  animation: ob-card-in 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.glosario-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  background: rgba(148,163,184,0.12); border: none; border-radius: 10px;
  cursor: pointer; color: var(--text-body); font-size: 0.9rem;
  transition: background 0.18s; display: flex; align-items: center; justify-content: center;
  z-index: 10; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.glosario-close:hover { background: rgba(148,163,184,0.26); }

.glosario-header {
  padding: 1.8rem 1.8rem 0;
  flex-shrink: 0;
}
.glosario-eyebrow {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--blue); margin-bottom: 0.3rem;
}
.glosario-title {
  font-size: 1.5rem; font-weight: 800; color: var(--navy);
  letter-spacing: -0.4px; margin-bottom: 0.3rem;
}
.glosario-subtitle {
  font-size: 0.83rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem;
}

.glosario-search-wrap { padding: 0 1.8rem 0.8rem; flex-shrink: 0; }
.glosario-search-bar {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255,255,255,0.9); border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 10px; padding: 0.55rem 0.9rem;
  color: var(--text-muted);
}
.glosario-search-bar input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 0.86rem; color: var(--navy);
}
.glosario-search-bar input::placeholder { color: var(--text-muted); }

.glosario-body {
  flex: 1; overflow-y: auto; padding: 0 1.8rem 1.5rem;
}

/* Lista de términos */
.glosario-group { margin-bottom: 0.5rem; }
.glosario-letter {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--blue);
  padding: 0.6rem 0 0.3rem; border-top: 1px solid rgba(148,163,184,0.15);
  margin-top: 0.5rem;
}
.glosario-group:first-child .glosario-letter { border-top: none; margin-top: 0; }

.glosario-item {
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.7rem; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; text-align: left;
  transition: background 0.14s;
  font-family: inherit;
}
.glosario-item:hover { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.glosario-item-term { font-size: 0.87rem; font-weight: 700; color: var(--navy); flex: 1; }
.glosario-item-cat  { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; }
.glosario-item-chevron { flex-shrink: 0; color: var(--text-muted); }

/* Detalle de término */
.glosario-back-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--blue); background: none; border: none; cursor: pointer;
  padding: 0; margin-bottom: 1rem; transition: opacity 0.15s;
}
.glosario-back-btn:hover { opacity: 0.75; }

.glosario-detail-cat {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--blue); margin-bottom: 0.3rem;
}
.glosario-detail-title {
  font-size: 1.25rem; font-weight: 800; color: var(--navy);
  letter-spacing: -0.3px; margin-bottom: 0.8rem; line-height: 1.3;
}
.glosario-detail-def {
  font-size: 0.88rem; color: var(--text-body); line-height: 1.75;
  margin-bottom: 1rem;
}
.glosario-detail-block {
  background: rgba(148,163,184,0.06); border-radius: 10px;
  padding: 0.75rem 0.9rem; margin-bottom: 0.7rem;
}
.glosario-detail-label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 0.4rem;
}
.glosario-detail-origen,
.glosario-detail-ejemplo { font-size: 0.82rem; color: var(--text-body); line-height: 1.6; margin: 0; }

.glosario-related { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.glosario-rel-tag {
  font-family: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent); border-radius: 999px;
  padding: 0.22rem 0.7rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.glosario-rel-tag:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); border-color: color-mix(in srgb, var(--blue) 35%, transparent); }

/* Dark mode */
.dark-base .glosario-card { background: rgba(8, 16, 34, 0.98); box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 4px 16px color-mix(in srgb, var(--blue-hover) 8%, transparent); }
.dark-base .glosario-title { color: #E2E8F0; }
.dark-base .glosario-item-term { color: #E2E8F0; }
.dark-base .glosario-item:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.dark-base .glosario-search-bar { background: rgba(20,36,66,0.95); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.dark-base .glosario-search-bar input { color: #E2E8F0; }
.dark-base .glosario-detail-title { color: #E2E8F0; }
.dark-base .glosario-detail-block { background: color-mix(in srgb, var(--blue) 5%, transparent); }
.dark-base .glosario-close { background: rgba(148,163,184,0.10); }

@media (max-width: 600px) {
  .glosario-card { max-width: 100%; border-radius: 20px; max-height: 92vh; }
  .glosario-header { padding: 1.4rem 1.3rem 0; }
  .glosario-search-wrap { padding: 0 1.3rem 0.6rem; }
  .glosario-body { padding: 0 1.3rem 1.2rem; }
}

/* En móvil el glosario entra como panel lateral desde la derecha,
   consistente con el menú hamburguesa (no una ventana centrada). */
@media (max-width: 768px) {
  .glosario-overlay {
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
  }
  .glosario-card {
    width: min(430px, 92vw);
    max-width: min(430px, 92vw);
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: -8px 0 34px rgba(3, 8, 22, 0.42);
    animation: glosario-slide-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .glosario-header { padding-top: max(1.4rem, env(safe-area-inset-top)); }
}
@keyframes glosario-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .glosario-card { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   ONBOARDING, PRIMERA VISITA
══════════════════════════════════════════════════════════════ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 18, 0.80);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: ob-fade-in 0.42s ease;
}
.onboarding-overlay[hidden] { display: none; }

@keyframes ob-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card glassmorphism premium */
.onboarding-card {
  position: relative;
  background:
    radial-gradient(ellipse 72% 48% at 10% 0%, color-mix(in srgb, var(--blue-accent) 9%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 92% 100%, color-mix(in srgb, var(--blue) 8%, transparent) 0%, transparent 58%),
    rgba(248, 250, 255, 0.97);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-radius: 28px;
  padding: 2.6rem 2.4rem 2.2rem;
  max-width: 440px;
  width: 100%;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 11%, transparent),
    0 6px 24px rgba(11, 19, 43, 0.07),
    0 28px 80px rgba(11, 19, 43, 0.18),
    0 0 64px color-mix(in srgb, var(--blue-accent) 6%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  animation: ob-card-in 0.58s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.16s both;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Gradient top-border accent */
.onboarding-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--blue-accent) 20%,
    var(--blue) 60%,
    transparent 100%
  );
  opacity: 0.65;
}

/* Destello que recorre la línea de color del borde superior */
.onboarding-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: translateX(-130%);
  animation: ob-border-shimmer 5.5s ease-in-out 1.4s infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes ob-card-in {
  from { opacity: 0; transform: translateY(32px) scale(0.93); }
  62%  { opacity: 1; transform: translateY(-5px) scale(1.010); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ob-border-shimmer {
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(370%); }
  100% { transform: translateX(370%); }
}

/* Progress pills */
.onboarding-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.4rem;
  justify-content: center;
  align-items: center;
}

.onboarding-dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: rgba(148,163,184,0.22);
  transition:
    background  0.38s cubic-bezier(0.4,0,0.2,1),
    width       0.38s cubic-bezier(0.4,0,0.2,1),
    box-shadow  0.38s ease;
}

.onboarding-dot.active {
  width: 28px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
  box-shadow: 0 0 12px color-mix(in srgb, var(--blue) 40%, transparent);
}

/* Steps, slide + fade transitions */
.onboarding-step {
  display: none;
}

.onboarding-step.active {
  display: block;
  animation: ob-step-in 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.onboarding-step.step-exiting {
  display: block;
  animation: ob-step-out 0.20s ease forwards;
  pointer-events: none;
}

@keyframes ob-step-in {
  from { opacity: 0; transform: translateX(20px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes ob-step-out {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-20px) scale(0.97); }
}

/* Icon, circular with glow rings */
.onboarding-icon {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-accent) 13%, transparent) 0%, color-mix(in srgb, var(--blue) 13%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--blue);
  margin: 0 auto 1.6rem;
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--blue) 6%, transparent),
    0 0 0 16px color-mix(in srgb, var(--blue) 2%, transparent),
    0 6px 22px color-mix(in srgb, var(--blue) 18%, transparent);
  animation: ob-icon-pop 0.48s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation-delay: 0.14s;
}

@keyframes ob-icon-pop {
  from { opacity: 0; transform: scale(0.55) rotate(-12deg); }
  70%  { transform: scale(1.10) rotate(4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.onboarding-icon.icon-retrigger {
  animation: ob-icon-pop 0.40s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation-delay: 0.08s;
}

.onboarding-icon[hidden] { display: none; }

.onboarding-reward[hidden] { display: none; }
.onboarding-reward {
  position: relative;
  text-align: center;
}

/* Halo suave detrás del bloque del regalo */
.onboarding-reward::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 42%;
  width: 260px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--blue-accent) 16%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ob-reward-breathe 4.5s ease-in-out infinite;
}

.onboarding-reward > * { position: relative; z-index: 1; }

@keyframes ob-reward-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.onboarding-reward-hook {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 0.9rem;
}

.onboarding-reward-highlight {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.3px;
  line-height: 1.28;
  text-align: center;
  margin-bottom: 1rem;
  text-shadow: 0 0 18px color-mix(in srgb, var(--blue-accent) 30%, transparent);
}

.onboarding-reward-badge {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  background: color-mix(in srgb, #00E5FF 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  line-height: 1.4;
  text-align: center;
  margin: 0 auto 1.2rem;
}

.onboarding-reward-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue-accent) 55%, transparent);
  pointer-events: none;
  animation: ob-badge-pulse 2.4s ease-out infinite;
}

@keyframes ob-badge-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.12); }
  100% { opacity: 0;   transform: scale(1.12); }
}

.dark-base .onboarding-reward-hook      { color: #E8F2FF; }
.dark-base .onboarding-reward-highlight { color: var(--blue-hover); }
.dark-base .onboarding-reward-badge {
  color: #E8F2FF;
  background: color-mix(in srgb, var(--blue-hover) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 26%, transparent);
}

.onboarding-eyebrow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.35rem;
}

.dark-base .onboarding-eyebrow { color: var(--blue-hover); }

.onboarding-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.5px;
  text-align: center;
  margin-bottom: 0.75rem;
  line-height: 1.22;
}

.onboarding-text {
  font-size: 0.875rem;
  color: var(--text-body);
  line-height: 1.76;
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Features box, softly framed */
.onboarding-features {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.55rem;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}

.onboarding-features span {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}

.onboarding-features .ob-check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(16,185,129,0.13);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #10b981;
}

/* Selector de intereses (paso 0 del onboarding) */
.onboarding-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  margin: 0.1rem 0 0.5rem;
}

.ob-count-dots {
  display: inline-flex;
  gap: 0.45rem;
}

.ob-count-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  transition:
    background 0.32s ease,
    box-shadow 0.32s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ob-count-dots i.on {
  background: linear-gradient(135deg, var(--blue-accent), var(--blue));
  box-shadow: 0 0 10px color-mix(in srgb, var(--blue-accent) 55%, transparent);
  transform: scale(1.18);
}

.onboarding-chips {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  justify-content: center;
  margin: 0.4rem 0 0.2rem;
}

/* Líneas que unen los temas elegidos */
.ob-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.ob-constellation line {
  stroke: var(--blue-accent);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0.5;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--blue-accent) 55%, transparent));
  transition: stroke-dashoffset 0.55s ease;
  animation: ob-line-breathe 3.2s ease-in-out infinite;
}

@keyframes ob-line-breathe {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.62; }
}

.ob-constellation .ob-node {
  fill: var(--blue-accent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue-accent) 85%, transparent));
}

.ob-constellation .ob-node-halo {
  fill: color-mix(in srgb, var(--blue-accent) 30%, transparent);
  transform-box: fill-box;
  transform-origin: center;
  animation: ob-node-pulse 2s ease-out infinite;
}

@keyframes ob-node-pulse {
  0%   { opacity: 0.55; transform: scale(0.55); }
  70%  { opacity: 0;    transform: scale(1.9); }
  100% { opacity: 0;    transform: scale(1.9); }
}

/* Impulso que viaja por la línea de un nodo a otro */
.ob-constellation .ob-pulse {
  fill: #fff;
  filter: drop-shadow(0 0 6px var(--blue-accent)) drop-shadow(0 0 10px color-mix(in srgb, var(--blue-accent) 60%, transparent));
}

/* Nodo recién elegido: rebote de aterrizaje + onda */
.ob-constellation .ob-node--new {
  transform-box: fill-box;
  transform-origin: center;
  animation: ob-node-land 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ob-node-land {
  0%   { transform: scale(2.6); opacity: 0; }
  40%  { opacity: 1; }
  62%  { transform: scale(0.78); }
  100% { transform: scale(1); }
}

.ob-constellation .ob-node-land-wave {
  fill: none;
  stroke: var(--blue-accent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: ob-node-land-wave 0.55s ease-out forwards;
}

@keyframes ob-node-land-wave {
  from { opacity: 0.75; transform: scale(0.4); }
  to   { opacity: 0;    transform: scale(4.5); }
}

/* Constelación completa (3 temas): destello del triángulo + nodos que vitorean */
.ob-constellation.ob-complete line {
  animation: ob-line-flash 0.8s ease-out;
}

@keyframes ob-line-flash {
  0%   { opacity: 1; stroke-width: 2.6; }
  100% { opacity: 0.5; stroke-width: 1.25; }
}

.ob-constellation.ob-complete .ob-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: ob-node-cheer 0.7s ease-out;
}

@keyframes ob-node-cheer {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.75); }
}

.onboarding-chips[hidden] { display: none; }

.onboarding-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-body);
  background: rgba(255,255,255,0.9);
  border: 1.5px solid color-mix(in srgb, var(--blue) 16%, transparent);
  border-radius: 14px;
  padding: 0.6rem 0.4rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, opacity 0.2s, box-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
  animation: ob-chip-in 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: calc(55ms * var(--ci, 0) + 90ms);
}

.onboarding-chip svg { flex-shrink: 0; transition: color 0.2s, filter 0.2s; }

.onboarding-chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  color: var(--blue);
}

.onboarding-chip.selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  box-shadow:
    0 0 0 1px var(--blue),
    0 0 18px color-mix(in srgb, var(--blue-accent) 28%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--blue-accent) 8%, transparent);
}

.onboarding-chip.selected svg {
  color: var(--blue-accent);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue-accent) 50%, transparent));
  animation: ob-chip-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-chip:disabled:not(.selected) { opacity: 0.4; cursor: not-allowed; }

@keyframes ob-chip-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ob-chip-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Paso de intereses: debe caber en el viewport sin scroll, pero con aire */
.onboarding-card.ob-interests {
  padding: 1.9rem 2.2rem 1.8rem;
  max-height: 96dvh;
  overflow: hidden;
}
.onboarding-card.ob-interests .onboarding-progress { margin-bottom: 1.1rem; }
.onboarding-card.ob-interests .onboarding-icon {
  width: 64px; height: 64px;
  margin: 0 auto 0.95rem;
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--blue) 6%, transparent),
    0 0 0 14px color-mix(in srgb, var(--blue) 2%, transparent),
    0 5px 18px color-mix(in srgb, var(--blue) 17%, transparent);
}
.onboarding-card.ob-interests .onboarding-icon svg { width: 32px; height: 32px; }
.onboarding-card.ob-interests .onboarding-icon:has(img) { width: 64px; height: 64px; }
.onboarding-card.ob-interests .onboarding-icon img { width: 64px; height: 64px; }
.onboarding-card.ob-interests .onboarding-eyebrow { margin-bottom: 0.3rem; }
.onboarding-card.ob-interests .onboarding-title { font-size: 1.28rem; margin-bottom: 0.5rem; }
.onboarding-card.ob-interests .onboarding-text {
  font-size: 0.85rem;
  line-height: 1.58;
  margin-bottom: 0.85rem;
}
.onboarding-card.ob-interests .onboarding-counter { margin: 0 0 0.5rem; }
.onboarding-card.ob-interests .onboarding-chips { gap: 0.5rem; margin: 0.35rem 0 0; }
.onboarding-card.ob-interests .onboarding-chip {
  padding: 0.58rem 0.4rem;
  font-size: 0.7rem;
}
.onboarding-card.ob-interests .onboarding-actions { margin-top: 1.3rem; }

/* Ventanas bajas / tablets pequeñas: apretar un poco más, sin scroll */
@media (max-width: 768px) and (min-width: 681px) {
  .onboarding-card.ob-interests { padding: 1.5rem 1.9rem 1.4rem; }
  .onboarding-card.ob-interests .onboarding-progress { margin-bottom: 0.85rem; }
  .onboarding-card.ob-interests .onboarding-icon,
  .onboarding-card.ob-interests .onboarding-icon:has(img) { width: 54px; height: 54px; margin: 0 auto 0.7rem; }
  .onboarding-card.ob-interests .onboarding-icon img { width: 54px; height: 54px; }
  .onboarding-card.ob-interests .onboarding-icon svg { width: 27px; height: 27px; }
  .onboarding-card.ob-interests .onboarding-title { font-size: 1.2rem; margin-bottom: 0.4rem; }
  .onboarding-card.ob-interests .onboarding-text { line-height: 1.5; margin-bottom: 0.6rem; }
  .onboarding-card.ob-interests .onboarding-counter { margin-bottom: 0.4rem; }
  .onboarding-card.ob-interests .onboarding-chips { gap: 0.4rem; }
  .onboarding-card.ob-interests .onboarding-chip { padding: 0.48rem 0.35rem; }
  .onboarding-card.ob-interests .onboarding-actions { margin-top: 1rem; }
}

@media (max-width: 680px) {
  .onboarding-card.ob-interests { padding: 1rem 1.3rem 1rem; overflow-y: auto; }
}

/* Ventana muy baja: mejor un scroll corto que recortar el botón */
@media (max-height: 660px) {
  .onboarding-card.ob-interests { overflow-y: auto; }
}

/* Subtítulo que se adapta a los temas elegidos */
.onboarding-text.ob-swap {
  animation: ob-text-swap 0.28s ease;
}

@keyframes ob-text-swap {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* Botón "Siguiente": cobra vida al quedar habilitado */
.onboarding-next.ob-ready {
  animation:
    ob-next-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    ob-next-glow 2s ease-in-out 0.42s infinite;
}

.onboarding-next.ob-ready::before {
  animation: ob-next-sweep 2.6s ease-in-out 0.5s infinite;
}

@keyframes ob-next-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes ob-next-glow {
  0%, 100% {
    box-shadow:
      0 4px 16px color-mix(in srgb, var(--blue) 32%, transparent),
      0 1px 4px color-mix(in srgb, var(--blue) 18%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.22);
  }
  50% {
    box-shadow:
      0 6px 26px color-mix(in srgb, var(--blue-accent) 55%, transparent),
      0 0 22px color-mix(in srgb, var(--blue-accent) 38%, transparent),
      inset 0 1px 0 rgba(255,255,255,0.28);
  }
}

@keyframes ob-next-sweep {
  0%   { left: -110%; }
  45%  { left: 155%; }
  100% { left: 155%; }
}

/* Cierre: la tarjeta se deshace en nodos */
.onboarding-card.ob-dissolve {
  animation: ob-card-dissolve 0.62s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.tour-modal-backdrop.ob-closing {
  animation: ob-backdrop-out 0.66s ease forwards;
}

@keyframes ob-card-dissolve {
  from { opacity: 1; transform: scale(1)     rotate(0deg);    filter: blur(0); }
  35%  { opacity: 1; transform: scale(1.03)  rotate(-0.6deg); filter: blur(1px); }
  to   { opacity: 0; transform: scale(1.16)  rotate(1.2deg);  filter: blur(14px); }
}

@keyframes ob-backdrop-out {
  to { opacity: 0; }
}

.ob-particle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1003;
}

/* Onda expansiva al romperse */
.ob-shockwave {
  position: fixed;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--blue-accent) 60%, transparent);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--blue-accent) 45%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--blue-accent) 25%, transparent);
  transform: translate(-50%, -50%) scale(0.2);
  pointer-events: none;
  z-index: 1003;
  animation: ob-shockwave-out 0.6s ease-out forwards;
}

@keyframes ob-shockwave-out {
  from { opacity: 0.85; transform: translate(-50%, -50%) scale(0.2); }
  to   { opacity: 0;    transform: translate(-50%, -50%) scale(1.35); }
}

.ob-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--blue-accent) 75%, transparent);
  animation: ob-particle-fly 0.78s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes ob-particle-fly {
  from { opacity: 1; transform: translate(0, 0) scale(var(--s, 1)) rotate(0deg); }
  15%  { opacity: 1; }
  to   { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2) rotate(var(--rot, 90deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-card::after { animation: none; opacity: 0; }
  .onboarding-chip { animation-delay: 0s; animation-duration: 0.01s; }
  .onboarding-chip.selected svg { animation: none; }
  .ob-constellation line { transition: none; animation: none; }
  .ob-constellation .ob-node-halo { animation: none; opacity: 0; }
  .ob-constellation .ob-pulse { display: none; }
  .ob-constellation .ob-node--new,
  .ob-constellation .ob-node-land-wave,
  .ob-constellation.ob-complete line,
  .ob-constellation.ob-complete .ob-node { animation: none; }
  .onboarding-text.ob-swap { animation: none; }
  .onboarding-next.ob-ready { animation: none; }
  .onboarding-next.ob-ready::before { animation: none; }
  .onboarding-card.ob-dissolve { animation: none; opacity: 0; }
  .tour-modal-backdrop.ob-closing { animation: none; opacity: 0; }
  .ob-particle { display: none; }
  .ob-shockwave { display: none; }
  .onboarding-reward::before { animation: none; }
  .onboarding-reward-badge::after { animation: none; opacity: 0; }
  .lib-card { animation: none; opacity: 1; }
}

.onboarding-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}

.onboarding-next:disabled::before { display: none; }

.dark-base .onboarding-chip { background: rgba(12,22,42,0.80); border-color: color-mix(in srgb, var(--blue) 14%, transparent); color: #94A3B8; }
.dark-base .onboarding-chip.selected { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }

@media (max-width: 480px) {
  .onboarding-chips { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  .onboarding-chip { padding: 0.45rem 0.25rem; font-size: 0.64rem; gap: 0.25rem; }
}

/* Actions row */
.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.2rem;
  gap: 1rem;
}

.onboarding-skip {
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.20s;
  padding: 0.55rem;
  text-decoration: none;
}

.onboarding-skip:hover { color: var(--navy); }

/* Next button, premium shimmer */
.onboarding-next {
  position: relative;
  overflow: hidden;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(130deg, var(--blue-accent) 0%, var(--blue) 100%);
  border: none;
  border-radius: 999px;
  padding: 0.78rem 1.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: auto;
  transition:
    transform 0.24s cubic-bezier(0.25,0.46,0.45,0.94),
    box-shadow 0.24s ease;
  box-shadow:
    0 4px 16px color-mix(in srgb, var(--blue) 32%, transparent),
    0 1px 4px color-mix(in srgb, var(--blue) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.22);
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

/* Shimmer sweep on hover */
.onboarding-next::before {
  content: '';
  position: absolute;
  top: 0; left: -110%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.25) 50%,
    transparent 100%
  );
  transition: left 0.52s ease;
  pointer-events: none;
}

.onboarding-next:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 8px 28px color-mix(in srgb, var(--blue) 44%, transparent),
    0 2px 8px color-mix(in srgb, var(--blue) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.24);
}

.onboarding-next:hover::before {
  left: 155%;
}

.onboarding-next:active {
  transform: translateY(0) scale(0.99);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--blue) 28%, transparent);
}

/* Chevron icon inside button */
.ob-chevron {
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.onboarding-next:hover .ob-chevron {
  transform: translateX(2px);
}

/* ── Dark mode ── */
.dark-base .onboarding-overlay {
  background: rgba(0, 0, 0, 0.84);
}

.dark-base .onboarding-card {
  background:
    radial-gradient(ellipse 72% 48% at 10% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 92% 100%, color-mix(in srgb, var(--blue) 14%, transparent) 0%, transparent 58%),
    rgba(7, 14, 32, 0.98);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent),
    0 6px 24px rgba(0,0,0,0.28),
    0 36px 96px rgba(0,0,0,0.62),
    0 0 64px color-mix(in srgb, var(--blue-accent) 4%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.dark-base .onboarding-card::before { opacity: 0.45; }

.dark-base .onboarding-title   { color: #E8F2FF; }
.dark-base .onboarding-text    { color: #94A3B8; }

.dark-base .onboarding-features {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border-color: color-mix(in srgb, var(--blue) 11%, transparent);
}

.dark-base .onboarding-features span { color: #C4D0E3; }

.dark-base .onboarding-icon {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-hover) 10%, transparent) 0%, color-mix(in srgb, var(--blue) 10%, transparent) 100%);
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
  color: var(--blue);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--blue) 5%, transparent),
    0 0 0 16px color-mix(in srgb, var(--blue) 2%, transparent),
    0 6px 22px color-mix(in srgb, var(--blue) 18%, transparent);
}

.onboarding-icon:has(img) {
  width: 92px;
  height: 92px;
  background: none;
  border: none;
  box-shadow: none;
}

.onboarding-icon img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--blue) 28%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--blue-accent) 20%, transparent));
}

.dark-base .onboarding-icon img,
:is([data-theme="naranja"], [data-theme="tormenta"], [data-theme="cosmos"], [data-theme="carmesi"], [data-theme="obsidiana"]) .onboarding-icon img {
  filter: brightness(0) invert(1) drop-shadow(0 0 14px color-mix(in srgb, var(--blue) 28%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--blue-accent) 20%, transparent));
}

.dark-base .onboarding-dot.active {
  box-shadow: 0 0 12px color-mix(in srgb, var(--blue-hover) 45%, transparent);
}

.dark-base .onboarding-skip { color: #4B5A72; }
.dark-base .onboarding-skip:hover { color: #8899B0; }

/* Móvil: compactar siempre en vertical (no depender de max-height, poco fiable
   por la barra de direcciones dinámica de Safari/Chrome móvil) */
@media (max-width: 480px) {
  .onboarding-card     { padding: 1rem 1.3rem 1rem; border-radius: 22px; }
  .onboarding-title    { font-size: 1.18rem; margin-bottom: 0.3rem; }
  .onboarding-text     { margin-bottom: 0.5rem; line-height: 1.4; }
  .onboarding-next     { padding: 0.72rem 1.55rem; }
  .onboarding-progress { margin-bottom: 0.7rem; }
  .onboarding-actions  { margin-top: 0.7rem; }
  .onboarding-icon     { width: 46px; height: 46px; margin: 0 auto 0.6rem; }
  .onboarding-icon:has(img) { width: 46px; height: 46px; }
  .onboarding-icon img { width: 46px; height: 46px; }
  .onboarding-chips    { grid-template-columns: repeat(3, 1fr); gap: 0.32rem; }
  .onboarding-chip     { padding: 0.32rem 0.22rem; font-size: 0.6rem; gap: 0.25rem; }
}

/* ══════════════════════════════════════════════════════════════
   TOUR GUIADO, spotlight, tooltip flotante, modal intro/cierre
══════════════════════════════════════════════════════════════ */

/* ── Tour ring: anillo animado que rastrea el elemento spotlight ─ */
.tour-ring {
  position: fixed;
  z-index: 1001;
  pointer-events: none;
  border-radius: 14px;
  opacity: 0;
  transition:
    top          0.45s cubic-bezier(0.4, 0, 0.2, 1),
    left         0.45s cubic-bezier(0.4, 0, 0.2, 1),
    width        0.45s cubic-bezier(0.4, 0, 0.2, 1),
    height       0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity      0.28s ease;
  box-shadow:
    0 0 0 2px rgba(0, 229, 255, 0.75),
    0 0 0 5px rgba(0, 229, 255, 0.18),
    0 0 32px rgba(0, 229, 255, 0.22),
    0 0 60px rgba(37, 99, 235, 0.12);
}
.tour-ring[hidden] { display: none; }

.tour-ring::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1.5px solid rgba(0, 229, 255, 0.32);
  animation: tour-ring-pulse 2.4s ease-out infinite;
}

@keyframes tour-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  60%  { transform: scale(1.07); opacity: 0.15; }
  100% { transform: scale(1.09); opacity: 0; }
}

/* Elemento resaltado: se eleva sobre la capa oscura */
.tour-spotlight-target {
  position: relative !important;
  z-index: 1002 !important;
  border-radius: 12px;
}

/* Capa oscura: bloquea clics en el resto de la página */
.tour-dim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 19, 43, 0.82);
  pointer-events: all;
  cursor: default;
}
.tour-dim[hidden] { display: none; }

/* Shell: contenedor invisible que envuelve tooltip y modal */
.tour-shell {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
}
.tour-shell[hidden] { display: none; }

/* ── Barra de progreso animada ──────────────────────────────── */
.tour-progress-track {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
}

.tour-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-accent, #00E5FF) 0%, var(--blue, #2563EB) 100%);
  border-radius: inherit;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dots de progreso en el tooltip ─────────────────────────── */
.tour-dots-tt {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

.tour-dots-tt .onboarding-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.32);
  box-shadow: none;
  transition:
    background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width      0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease;
}

.tour-dots-tt .onboarding-dot.active {
  width: 20px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--blue-accent, #00E5FF) 0%, var(--blue, #2563EB) 100%);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

/* ── Tooltip flotante (pasos spotlight) ─────────────────────── */
.tour-tooltip {
  position: fixed;
  z-index: 1003;
  pointer-events: auto;
  width: 320px;
  background: rgba(248, 250, 255, 0.97);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 18px;
  padding: 1.35rem 1.5rem 1.2rem;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.12),
    0 8px 32px rgba(11, 19, 43, 0.18),
    0 2px 8px rgba(11, 19, 43, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: tour-tooltip-in 0.30s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: transform, opacity;
  overflow: hidden;
}
.tour-tooltip[hidden] { display: none; }

@keyframes tour-tooltip-in {
  from { opacity: 0; transform: scale(0.93) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* Transiciones direccionales entre pasos spotlight */
.tour-out-left  { animation: tour-slide-out-left  0.18s ease forwards; }
.tour-out-right { animation: tour-slide-out-right 0.18s ease forwards; }

@keyframes tour-slide-out-left  { to { opacity: 0; transform: translateX(-14px) scale(0.96); } }
@keyframes tour-slide-out-right { to { opacity: 0; transform: translateX( 14px) scale(0.96); } }

/* Transición fluida de posición entre steps spotlight */
.tour-tooltip--sliding {
  transition: top 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              left 0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  animation: none !important;
}

.tour-tooltip-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.tour-tooltip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(0,229,255,0.10) 100%);
  border: 1px solid rgba(37, 99, 235, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue, #2563EB);
  flex-shrink: 0;
}

.tour-tooltip-title {
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--navy, #0B132B);
  letter-spacing: -0.25px;
  line-height: 1.25;
  margin: 0;
}

.tour-tooltip-text {
  font-size: 0.82rem;
  color: var(--text-body, #374151);
  line-height: 1.72;
  margin: 0 0 1rem;
}

.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tour-tooltip-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.tour-skip-btn {
  font-family: inherit;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--text-muted, #6B7280);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.4rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.tour-skip-btn:hover { color: var(--navy, #0B132B); }

.tour-next-btn {
  position: relative;
  overflow: hidden;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(130deg, var(--blue-accent, #00E5FF) 0%, var(--blue, #2563EB) 100%);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.30), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  white-space: nowrap;
}
.tour-next-btn:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.40), inset 0 1px 0 rgba(255,255,255,0.24);
}
.tour-next-btn:active { transform: scale(0.99); }

/* Tooltip centrado: fallback desktop cuando elemento no visible */
.tour-tooltip--centered {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(320px, calc(100vw - 2rem)) !important;
}

/* Tooltip bottom sheet: móvil, se apoya justo encima del dock, sin taparlo */
.tour-tooltip--bottom-sheet {
  position: fixed !important;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 22px 22px 0 0 !important;
  padding: 1.4rem 1.4rem 1.4rem !important;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.12),
    0 -8px 32px rgba(11, 19, 43, 0.22) !important;
  animation: tour-sheet-up 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Dock elevado por encima del scrim durante el tour, permanece visible e iluminado */
#mobile-bottom-nav.tour-dock-raised {
  z-index: 1002 !important;
}
#mobile-bottom-nav.tour-dock-raised .mbn-tab:not(.tour-spotlight-target) {
  opacity: 0.4;
  transition: opacity 0.25s ease;
}
#mobile-bottom-nav.tour-dock-raised .mbn-tab.tour-spotlight-target {
  opacity: 1;
}

@keyframes tour-sheet-up {
  from { transform: translateY(100%); opacity: 0.5; }
  to   { transform: translateY(0);    opacity: 1;   }
}

/* ── Flecha CSS (apunta al elemento iluminado, solo desktop) ── */
.tour-arrow {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.tour-arrow--above {
  bottom: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(248, 250, 255, 0.97);
  filter: drop-shadow(0 2px 3px rgba(11,19,43,0.10));
}
.tour-arrow--below {
  top: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(248, 250, 255, 0.97);
  filter: drop-shadow(0 -1px 2px rgba(11,19,43,0.08));
}
.tour-arrow--left {
  right: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid rgba(248, 250, 255, 0.97);
  filter: drop-shadow(2px 0 3px rgba(11,19,43,0.10));
}
.tour-arrow--right {
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid rgba(248, 250, 255, 0.97);
  filter: drop-shadow(-2px 0 3px rgba(11,19,43,0.10));
}

/* ── Modal centrado (pasos 0 y 6) ───────────────────────────── */
.tour-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1002;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(2, 6, 18, 0.46);
  backdrop-filter: blur(8px) saturate(1.4);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  animation: ob-fade-in 0.6s ease;
}
.tour-modal-backdrop[hidden] { display: none; }

/* ── Dark mode ──────────────────────────────────────────────── */
.dark-base .tour-tooltip {
  background: rgba(7, 14, 32, 0.98);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.14),
    0 8px 32px rgba(0, 0, 0, 0.38),
    0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.dark-base .tour-tooltip-title  { color: #E8F2FF; }
.dark-base .tour-tooltip-text   { color: #94A3B8; }
.dark-base .tour-tooltip-icon   { background: linear-gradient(135deg, rgba(37,99,235,0.12) 0%, rgba(0,229,255,0.08) 100%); border-color: rgba(37,99,235,0.20); }
.dark-base .tour-skip-btn       { color: #4B5A72; }
.dark-base .tour-skip-btn:hover { color: #8899B0; }
.dark-base .tour-progress-track { background: rgba(148, 163, 184, 0.06); }
.dark-base .tour-dots-tt .onboarding-dot { background: rgba(148, 163, 184, 0.15); }
.dark-base .tour-arrow--above   { border-top-color:    rgba(7, 14, 32, 0.98); }
.dark-base .tour-arrow--below   { border-bottom-color: rgba(7, 14, 32, 0.98); }
.dark-base .tour-arrow--left    { border-left-color:   rgba(7, 14, 32, 0.98); }
.dark-base .tour-arrow--right   { border-right-color:  rgba(7, 14, 32, 0.98); }
.dark-base .tour-modal-backdrop { background: rgba(1, 4, 14, 0.52); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .tour-tooltip-title { font-size: 0.90rem; }
  .tour-tooltip-text  { font-size: 0.79rem; }
}

/* ══════════════════════════════════════════════════════════════
   BOTÓN VOLVER ARRIBA
══════════════════════════════════════════════════════════════ */
#btn-volver-arriba {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--blue-accent), var(--blue));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 8000;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--blue) 38%, transparent);
  opacity: 0;
  transform: scale(0.7) translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s;
}

#btn-volver-arriba.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

#btn-volver-arriba:hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--blue) 52%, transparent);
  transform: scale(1.08) translateY(0);
}

.dark-base #btn-volver-arriba {
  box-shadow: 0 4px 18px color-mix(in srgb, var(--blue-accent) 30%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   MODO LECTURA ENFOQUE
══════════════════════════════════════════════════════════════ */

/* Botón de activación, vive dentro de week-label */
.btn-modo-enfoque {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.38rem 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--blue);
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--blue) 10%, transparent);
  margin-left: auto; /* empuja el botón a la derecha y lleva el corazón al extremo */
  flex-shrink: 0;
}

/* Separación icono-reloj del texto de lectura */
.reading-time svg { margin-right: 5px; vertical-align: middle; }

.btn-modo-enfoque:hover {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 50%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 18%, transparent);
}

.dark-base .btn-modo-enfoque {
  border-color: color-mix(in srgb, var(--blue) 25%, transparent);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--blue);
}

/* Preparar transición en elementos que se desvanecen */
.navbar,
.reading-progress-bar,
.search-section,
.filter-pills,
.tab-bar,
.footer-main,
.botiquin-section,
.timeline-section,
.propuestas-section {
  transition: opacity 0.38s ease, filter 0.38s ease;
}

.sidebar-widget {
  transition: opacity 0.25s ease, filter 0.25s ease;
}

/* will-change solo cuando el modo está activo, evita consumo GPU en reposo */
body.modo-enfoque-activo .navbar,
body.modo-enfoque-activo .reading-progress-bar,
body.modo-enfoque-activo .search-section,
body.modo-enfoque-activo .filter-pills,
body.modo-enfoque-activo .tab-bar,
body.modo-enfoque-activo .footer-main,
body.modo-enfoque-activo .botiquin-section,
body.modo-enfoque-activo .timeline-section,
body.modo-enfoque-activo .propuestas-section,
body.modo-enfoque-activo .sidebar-widget {
  will-change: opacity, filter;
}

/* Modo enfoque activo: difuminar todo excepto el artículo */
body.modo-enfoque-activo .navbar,
body.modo-enfoque-activo .reading-progress-bar,
body.modo-enfoque-activo .search-section,
body.modo-enfoque-activo .filter-pills,
body.modo-enfoque-activo .tab-bar,
body.modo-enfoque-activo .sidebar-widget,
body.modo-enfoque-activo .footer-main,
body.modo-enfoque-activo .botiquin-section,
body.modo-enfoque-activo .timeline-section,
body.modo-enfoque-activo .propuestas-section {
  opacity: 0.04;
  filter: blur(7px);
  pointer-events: none;
}

/* Artículo nítido con fondo editorial, semana y biblioteca */
body.modo-enfoque-activo #panel-semana.active .main-content,
body.modo-enfoque-activo #panel-biblioteca.active .main-content {
  background: #fbf9f5;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 6px 60px rgba(0,0,0,0.10);
  transition: background 0.38s, box-shadow 0.38s;
}

/* ── Modo Enfoque en móvil: artículo a ancho completo ── */
@media (max-width: 680px) {
  /* Ocultar completamente los elementos no esenciales (más eficiente que blur en móvil) */
  body.modo-enfoque-activo .navbar,
  body.modo-enfoque-activo .reading-progress-bar,
  body.modo-enfoque-activo .search-section,
  body.modo-enfoque-activo .filter-pills,
  body.modo-enfoque-activo .tab-bar,
  body.modo-enfoque-activo .sidebar-widget,
  body.modo-enfoque-activo .footer-main,
  body.modo-enfoque-activo .botiquin-section,
  body.modo-enfoque-activo .timeline-section,
  body.modo-enfoque-activo .propuestas-section {
    display: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  /* Artículo ocupa todo el ancho disponible sin padding lateral */
  body.modo-enfoque-activo #panel-semana.active .main-content,
  body.modo-enfoque-activo #panel-biblioteca.active .main-content {
    background: #fbf9f5;
    border-radius: 0;
    padding: 1rem 0.9rem;
    box-shadow: none;
    margin: 0 -12px;
    width: calc(100% + 24px);
  }
  .dark-base body.modo-enfoque-activo #panel-semana.active .main-content,
  .dark-base body.modo-enfoque-activo #panel-biblioteca.active .main-content {
    background: #050e1e;
  }
}

.dark-base body.modo-enfoque-activo #panel-semana.active .main-content,
.dark-base body.modo-enfoque-activo #panel-biblioteca.active .main-content {
  background: #050e1e;
  box-shadow: 0 6px 60px rgba(0,0,0,0.55);
}

/* ── Modo Enfoque en escritorio (3 columnas): soporte para colapso JS ── */
@media (min-width: 1101px) {
  body.modo-enfoque-activo .sidebar-left,
  body.modo-enfoque-activo .sidebar-right {
    overflow: hidden;
    min-width: 0;
    /* Sin padding:0, el sidebar ya es invisible (opacity 0.04).
       Cambiar padding durante la animación provoca recálculos de layout que causan tirones. */
  }
}

/* El botón de enfoque siempre legible aunque el fondo sea muy oscuro */
body.modo-enfoque-activo .btn-modo-enfoque {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}

.dark-base body.modo-enfoque-activo .btn-modo-enfoque {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
}

/* ── TARJETA TEASER SEMANAL ── */
.weekly-teaser-card {
  background: rgba(255,255,255,0.97);
  border-radius: 24px;
  padding: 2.2rem 2.4rem 2rem;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  box-shadow: 0 12px 48px rgba(37,99,235,0.10), 0 2px 8px rgba(11,19,43,0.06), inset 0 1px 0 rgba(255,255,255,0.95);
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.weekly-teaser-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--cyan) 100%);
  border-radius: 24px 24px 0 0;
}

.wt-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1.1rem;
}

.wt-badge { margin-bottom: 0.65rem; display: inline-block; }

.wt-title {
  font-size: 1.75rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.9rem !important;
}

.wt-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.3rem;
}

.wt-author-info { display: flex; flex-direction: column; gap: 0.1rem; }
.wt-author-info strong { font-size: 0.9rem; color: var(--navy); font-weight: 700; }
.wt-author-info span { font-size: 0.78rem; color: var(--text-muted); }

.wt-excerpt {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1.8rem;
  padding-left: 1rem;
  border-left: 2px solid color-mix(in srgb, var(--blue) 28%, transparent);
}

.wt-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.85rem 1.75rem;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(37,99,235,0.28);
  letter-spacing: 0.01em;
}

.wt-read-btn:hover {
  background: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(37,99,235,0.38);
}

.wt-read-btn:active { transform: translateY(0); }

.wt-read-btn svg { flex-shrink: 0; }

/* Botón colapsar artículo */
.weekly-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.28rem 0.75rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.weekly-collapse-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
}

/* ── ARTÍCULO SEMANAL ── */
.weekly-featured-card {
  position: relative;
  background:
    radial-gradient(ellipse 105% 22% at 22% 8%,  color-mix(in srgb, var(--blue-accent) 14%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 105% 24% at 82% 38%, color-mix(in srgb, var(--blue) 12%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 105% 22% at 14% 70%, color-mix(in srgb, var(--blue-accent) 11%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 115% 26% at 90% 96%, color-mix(in srgb, var(--blue) 12%, transparent) 0%, transparent 70%),
    var(--card-bg);
  border-radius: 20px; padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--card-border));
  box-shadow: 0 28px 80px rgba(11, 19, 43, 0.28), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent), inset 0 1px 0 rgba(255,255,255,0.90);
  margin-bottom: 2rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.week-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 1rem;
}

.week-tag {
  background: var(--blue); color: white; border-radius: 999px;
  padding: 0.2rem 0.75rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.week-date { font-size: 0.78rem; color: var(--text-muted); }
.reading-time { font-size: 0.78rem; color: var(--text-muted); }

.author-card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--card-border));
  box-shadow: 0 28px 80px rgba(11, 19, 43, 0.28), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 12px; padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 1rem; margin: 1rem 0;
}
.author-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-accent)); opacity: 0.85;
}

.author-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
  background: var(--blue);
  color: white; font-weight: 700; font-size: 0.9rem;
}

.author-avatar.author-avatar-photo {
  background: #F7F9FF;
  border: 2px solid color-mix(in srgb, var(--blue) 18%, transparent);
  box-shadow: 0 2px 10px rgba(11,19,43,0.10);
  position: relative;
}

.author-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.author-card > div { display: flex; flex-direction: column; gap: 0.1rem; }
.author-card strong { font-size: 0.9rem; color: var(--navy); font-weight: 700; }
.author-card-link { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--navy) 25%, transparent); transition: border-color 0.18s, color 0.18s; }
.author-card-link:hover { color: var(--blue-accent); border-color: var(--blue-accent); }
.author-card span { font-size: 0.78rem; color: var(--text-muted); }

.article-redactor {
  font-size: 0.8rem; color: var(--text-muted);
  margin: -0.4rem 0 1rem 0.2rem; line-height: 1.5;
}
.article-redactor-link {
  color: var(--blue); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  transition: border-color 0.18s, color 0.18s;
}
.article-redactor-link:hover { color: var(--blue-accent); border-color: var(--blue-accent); }

.weekly-escrito-por {
  font-size: 0.72rem; color: var(--text-muted); font-style: italic;
  margin: -0.6rem 0 0.8rem 0.2rem;
}

.weekly-title {
  font-size: 1.5rem; font-weight: 800; color: var(--navy);
  letter-spacing: -0.5px; line-height: 1.3; margin-bottom: 0.5rem;
}

.weekly-dek {
  font-size: 0.95rem; color: var(--text-muted);
  line-height: 1.6; margin: 0 0 0.9rem;
}

.article-content { margin-top: 1rem; }

.article-intro {
  font-size: 0.95rem; color: var(--navy); line-height: 1.8;
  font-style: italic; margin-bottom: 1.5rem;
}

.article-subtitle {
  position: relative;
  font-size: 1.26rem; font-weight: 800; color: var(--navy);
  margin: 3rem 0 0.95rem; letter-spacing: -0.4px; line-height: 1.26;
  padding-bottom: 0.5rem;
}
.article-subtitle::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
}
.article-content .article-subtitle:first-of-type { margin-top: 1rem; }

.article-content p {
  font-size: 0.9rem; color: var(--text-body);
  line-height: 1.8; margin-bottom: 0.8rem;
}

/* Cita destacada intercalada (párrafo que empieza por "» ") */
.article-pull {
  font-size: 1.22rem; font-weight: 500; font-style: italic;
  color: color-mix(in srgb, var(--navy) 80%, var(--text-body));
  line-height: 1.5; letter-spacing: -0.15px; text-wrap: balance;
  margin: 2.2rem 0; padding: 0.15rem 0 0.15rem 1.15rem;
  border-left: 3px solid var(--blue-accent);
}

/* Halo pegado al contorno de la letra: la despega del fondo con neblinas (solo temas oscuros) */
.dark-base .weekly-featured-card :is(.article-intro, .article-subtitle, .article-pull, .article-content p, .article-blockquote p, .weekly-title) {
  text-shadow:
    0 0 1px rgba(2, 6, 16, 0.9),
    0 0 3px rgba(2, 6, 16, 0.7),
    0 0 6px rgba(2, 6, 16, 0.45);
}

.article-blockquote {
  border-left: 3px solid var(--blue);
  padding: 1rem 1.5rem; margin: 1.5rem 0;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border-radius: 0 12px 12px 0;
}

.article-blockquote p {
  font-size: 1rem; color: var(--navy);
  font-style: italic; line-height: 1.7;
  font-weight: 500; margin-bottom: 0;
}

.article-blockquote cite {
  font-size: 0.78rem; color: var(--text-muted);
  font-style: normal; display: block; margin-top: 0.5rem;
}

/* ── SEMANAS ANTERIORES ── */
.weekly-prev-section { margin-top: 0.5rem; }

.weekly-prev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.weekly-prev-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--card-border);
  border-radius: 16px; padding: 1.4rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.80);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.weekly-prev-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--blue) 12%, transparent), 0 0 18px color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--blue) 32%, transparent);
}

.weekly-prev-card h3 {
  font-size: 0.95rem; font-weight: 700;
  color: var(--navy); line-height: 1.4;
}

.weekly-prev-meta { font-size: 0.74rem; color: var(--text-muted); }
.weekly-prev-excerpt { font-size: 0.83rem; color: var(--text-body); line-height: 1.65; }

/* ── DASHBOARD LAYOUT ── */
.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(268px, 1fr) 2.2fr minmax(268px, 1fr);
  gap: 1.8rem;
  align-items: start;
  max-width: 1620px;
  margin: 0 auto;
  padding: 0.3rem 2rem 1.5rem;
  transition: grid-template-columns 0.28s ease-out,
              gap 0.28s ease-out;
}

/* ── Bloque superior a igual altura (solo vista de inicio) ──────
   `.hero-balanced` lo activa/desactiva JS (_syncHeroBalance en
   main.js): presente solo cuando la pestaña "Por Intereses" está
   activa y no hay categoría elegida todavía, es decir, cuando la
   izquierda es de forma fiable la columna más alta.
   El CENTRO nunca se estira verticalmente: la cuadrícula de
   temáticas conserva su alto natural y compacto (row-gap/column-gap
   fijos, sin align-content/justify-content/grid-template-rows en
   fracciones que la estiren), y `.dashboard-center` se ajusta a ese
   contenido con `align-self:start` en vez de ocupar toda la fila.
   Solo la DERECHA se estira (CSS Grid `stretch`) para terminar donde
   termina la izquierda, con el botón "Ver más" pegado abajo gracias
   a `margin-top:auto`; eso sí queda contenido dentro de una tarjeta
   con borde, así que no se percibe como hueco.
   En cualquier otro estado (categoría elegida, otra pestaña) se cae
   de nuevo a `align-items:start` y cada columna usa su alto natural,
   igual que antes. */
@media (min-width: 1101px) {
  .dashboard-layout.hero-balanced { align-items: stretch; }
  .dashboard-layout.hero-balanced .dashboard-center { align-self: start; }

  .dashboard-layout.hero-balanced .sidebar-right { display: flex; flex-direction: column; }
  .dashboard-layout.hero-balanced .progress-tracker {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
  }

  /* La izquierda NO se estira al alto de fila del grid (ese alto lo
     marca la derecha, que puede ser más alta que la cuadrícula de
     temáticas). Su altura la fija JS (_syncSidebarLeftHeight en
     main.js) para que coincida exactamente con el alto real de
     `.cat-selector`. Las dos tarjetas se reparten ese alto a partes
     iguales (flex: 1 1 0), sin aire entre ellas. */
  .dashboard-layout.hero-balanced .sidebar-left {
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
  }
  .dashboard-layout.hero-balanced .sidebar-left .sidebar-weekly-card,
  .dashboard-layout.hero-balanced .sidebar-left .sidebar-fdb-card {
    flex: 1 1 0;
    min-height: 0;
    margin-bottom: 0;
    padding: 1rem 1rem 0.9rem;
    display: flex;
    flex-direction: column;
  }
  .dashboard-layout.hero-balanced .sidebar-left .sidebar-weekly-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

/* Sidebars: visualmente secundarios, no compiten con el centro */
.sidebar-widget {
  box-shadow: 0 2px 16px rgba(11,19,43,0.06), inset 0 1px 0 rgba(255,255,255,0.80);
  background: rgba(248,251,255,0.88);
  border: 1px solid rgba(37,99,235,0.09);
  border-radius: 20px;
  padding: 1.4rem 1.2rem;
  min-width: 0;
  max-width: 100%;
}

.sidebar-widget .widget-header h3 {
  color: var(--text-body);
  font-size: 0.87rem;
}

.sidebar-widget .widget-header p {
  font-size: 0.74rem;
  opacity: 0.75;
}

/* Restaurar fondo limpio cuando el sidebar es overlay en móvil */
.sidebar-widget.mobile-open {
  background: rgba(247,249,255,0.98) !important;
}

.widget-header {
  margin-bottom: 1rem;
}

.widget-header h3 {
  font-size: 0.95rem; font-weight: 800; color: var(--navy);
  letter-spacing: -0.2px; margin-bottom: 0.35rem;
  display: flex; align-items: center; gap: 0.45rem;
}

.widget-header p {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.55;
}

.dashboard-center { min-width: 0; }

.dashboard-center .main-content {
  max-width: none;
  padding: 0 0 2rem;
}

.dashboard-center .research-inner {
  max-width: none;
  padding: 0;
}

/* ── BLOQUE APLICACIÓN ── */
.aplicacion-block {
  margin-top: 1.8rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 3px solid var(--blue-accent);
  border-radius: 0 14px 14px 0;
  padding: 1.2rem 1.5rem;
}

.aplicacion-header {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem;
}

.aplicacion-header strong {
  font-size: 0.82rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.aplicacion-block p {
  font-size: 0.88rem; color: var(--navy); line-height: 1.75;
  font-style: italic; margin-bottom: 0;
}

/* ── BLOQUE RECOMENDACIÓN (libro / producto por artículo) ── */
.recomendacion-block {
  margin-top: 1.8rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 3px solid var(--blue-accent);
  border-radius: 0 14px 14px 0;
  padding: 1.2rem 1.5rem;
}

.recomendacion-label {
  font-size: 0.78rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 0.7rem;
}

.recomendacion-libro {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}

.recomendacion-libro-info { flex: 1; min-width: 220px; }
.recomendacion-libro-info strong { font-size: 0.95rem; color: var(--navy); }
.recomendacion-autor { font-size: 0.8rem; color: var(--text-muted); display: block; margin: 0.1rem 0 0.4rem; }
.recomendacion-libro-info p { font-size: 0.85rem; color: var(--navy); line-height: 1.65; margin: 0; }

.recomendacion-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.6rem; background: #FF9900; color: #111;
  border-radius: 10px; font-size: 0.95rem; font-weight: 800;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,153,0,0.35);
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s; flex-shrink: 0;
}
.recomendacion-btn:hover { background: #FFAD33; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,153,0,0.45); }

.recomendacion-valor {
  font-size: 0.82rem; color: var(--blue); font-weight: 600;
  margin: 0.7rem 0 0; line-height: 1.5;
}

.recomendacion-disclaimer {
  font-size: 0.72rem; color: var(--text-muted); margin: 0.4rem 0 0;
  font-style: italic; line-height: 1.5;
}

/* ── Teaser de libros en página de categoría ── */
.cat-libros-teaser {
  margin: 1.4rem 0 2rem;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 14px; padding: 1.1rem 1.4rem;
}
.cat-libros-teaser-label { font-size: 0.78rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin: 0 0 0.6rem; }
.cat-libros-teaser-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-bottom: 0.7rem; }
.cat-libros-teaser-item { font-size: 0.85rem; color: var(--navy); }
.cat-libros-teaser-item em { color: var(--text-muted); font-style: normal; }
.cat-libros-teaser-cta { font-size: 0.82rem; font-weight: 700; color: var(--blue); text-decoration: none; }
.cat-libros-teaser-cta:hover { text-decoration: underline; }

/* ── Recomendación de cierre en Rutas ── */
.ruta-finish-libro {
  margin: 1.2rem 0; padding: 1rem 1.2rem;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border-left: 3px solid var(--blue-accent);
  border-radius: 0 12px 12px 0;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.ruta-finish-libro-item { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* ── Biblioteca recomendada ── */
.biblioteca-grupo { margin: 2.2rem 0; }
.biblioteca-grupo h2 { font-size: 1.05rem; font-weight: 800; color: var(--navy); margin: 0 0 1rem; }
.biblioteca-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.biblioteca-item {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.1rem; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px;
}
.biblioteca-item strong { font-size: 0.92rem; color: var(--navy); }
.biblioteca-item p { font-size: 0.8rem; color: var(--text-body); line-height: 1.5; margin: 0; }
.biblioteca-item-links { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem; }
.biblioteca-item-articulo { font-size: 0.76rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.biblioteca-item-articulo:hover { text-decoration: underline; }
.ruta-finish-libro strong { font-size: 0.9rem; color: var(--navy); }

/* ── Tabla comparativa de Guías de compra ── */
.guia-tabla-wrap { overflow-x: auto; margin: 1.6rem 0; }
.guia-tabla { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.guia-tabla th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--blue); padding: 0.6rem 0.8rem; border-bottom: 2px solid color-mix(in srgb, var(--blue) 20%, transparent);
}
.guia-tabla td { padding: 0.9rem 0.8rem; border-bottom: 1px solid var(--card-border); vertical-align: top; color: var(--navy); }
.guia-tabla-autor { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.guia-tabla-estrellas { white-space: nowrap; font-weight: 700; color: var(--blue-accent); }

/* ── Bibliografía de documentos Fuera de Bata ── */
.biblio-block { margin: 2.2rem 0; }
.biblio-block h2 { margin-bottom: 0.8rem; }
.biblio-cite { font-size: 0.85rem; color: var(--text-muted); background: color-mix(in srgb, var(--blue) 6%, transparent); border-left: 3px solid var(--blue-accent); padding: 0.8rem 1rem; margin-bottom: 1.4rem; }
.biblio-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.biblio-list li { font-size: 0.85rem; color: var(--navy); padding-left: 1.6rem; text-indent: -1.6rem; line-height: 1.5; }
.biblio-list em { font-style: italic; }
.original-doc-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--blue-accent); text-decoration: none; font-weight: 600; margin-top: 0.6rem; }
.original-doc-btn:hover { text-decoration: underline; }

.botiquin-guias-link {
  display: inline-block; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 700;
  color: var(--blue); text-decoration: none;
}
.botiquin-guias-link:hover { text-decoration: underline; }


/* ── AUTOR: botón disparador + modal ── */
.author-trigger {
  background: transparent; border: none; padding: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 2px; transition: color 0.18s;
}
.author-trigger:hover { color: var(--blue); }

.author-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(11,19,43,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 500; align-items: center; justify-content: center; padding: 2rem;
}
.author-modal-overlay.open { display: flex; }

@keyframes modal-in {
  from { transform: scale(0.92) translateY(14px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.author-modal-card {
  background: rgba(249,251,255,0.98);
  border: 1px solid var(--card-border);
  border-radius: 22px; padding: 2.4rem 2rem 2rem;
  max-width: 400px; width: 100%; position: relative;
  box-shadow: 0 20px 60px rgba(11,19,43,0.22);
  text-align: center;
  animation: modal-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.author-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; background: rgba(148,163,184,0.12);
  border: none; border-radius: 7px; cursor: pointer;
  color: var(--text-body); font-size: 0.9rem; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
  z-index: 1010; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.author-modal-close:hover { background: rgba(148,163,184,0.26); }

.author-modal-avatar {
  width: 68px; height: 68px; background: var(--blue);
  border-radius: 50%; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 1.3rem;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--blue) 35%, transparent);
  overflow: hidden;
}

.author-modal-avatar--photo {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  position: relative;
  outline: 2px solid rgba(245,158,11,0.4);
  outline-offset: 3px;
}

.author-modal-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.author-modal-card h3 {
  font-size: 1.15rem; font-weight: 800; color: var(--navy);
  margin-bottom: 0.45rem; letter-spacing: -0.3px;
}

.author-modal-degree {
  font-size: 0.82rem; color: var(--text-body); line-height: 1.6;
  margin-bottom: 0.3rem;
}

.author-modal-detail {
  font-size: 0.78rem; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 1.1rem;
}

.author-modal-areas {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  justify-content: center; margin-bottom: 1.5rem;
}

.author-modal-areas span {
  background: var(--badge-bg); color: var(--blue);
  border: 1px solid var(--badge-border);
  border-radius: 999px; padding: 0.2rem 0.7rem;
  font-size: 0.70rem; font-weight: 600;
}

.author-modal-linkedin {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.62rem 1.4rem; background: #0A66C2; color: white;
  border-radius: 10px; text-decoration: none;
  font-size: 0.82rem; font-weight: 700;
  transition: background 0.2s, transform 0.15s;
}
.author-modal-linkedin:hover { background: #004182; transform: translateY(-1px); }

/* ── INFO MODAL ── */
.info-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(11,19,43,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 500; align-items: center; justify-content: center; padding: 2rem;
}

.info-modal-overlay.open { display: flex; }

.info-modal-card {
  background: rgba(249,251,255,0.98);
  border: 1px solid var(--card-border);
  border-radius: 22px; padding: 2.4rem 2.4rem 2rem;
  max-width: 560px; width: 100%; position: relative;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(11,19,43,0.22);
  animation: modal-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.info-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; background: rgba(148,163,184,0.12);
  border: none; border-radius: 7px; cursor: pointer;
  color: var(--text-body); font-size: 0.9rem; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
  z-index: 1010; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.info-modal-close:hover { background: rgba(148,163,184,0.26); }

.info-section { display: none; }
.info-section.active { display: block; }

.info-section h2 {
  font-size: 1.3rem; font-weight: 800; color: var(--navy);
  letter-spacing: -0.4px; margin-bottom: 0.75rem; line-height: 1.2;
}

.info-section p { font-size: 0.88rem; color: var(--text-body); line-height: 1.75; }
.info-section p + p { margin-top: 0.75rem; }

.info-eyebrow {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--blue); margin-bottom: 0.45rem;
}

.info-lead {
  font-size: 0.92rem !important;
  color: var(--text-body) !important;
  line-height: 1.7 !important;
  margin-bottom: 1.4rem !important;
  font-style: italic;
}

.info-mission {
  display: flex; align-items: flex-start; gap: 0.65rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 3%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1rem;
  margin-bottom: 1.4rem;
  font-size: 0.87rem; font-weight: 600; color: var(--navy); line-height: 1.55;
}
.info-mission svg { flex-shrink: 0; color: var(--blue); margin-top: 2px; }

.info-values { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.4rem; }
.info-value {
  display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.84rem; line-height: 1.6;
}
.info-value-icon { color: var(--blue); font-size: 0.55rem; margin-top: 5px; flex-shrink: 0; }
.info-value strong { display: block; font-weight: 700; color: var(--navy); margin-bottom: 0.1rem; font-size: 0.86rem; }
.info-value span   { color: var(--text-body); }

.info-section-divider {
  height: 1px;
  background: linear-gradient(to right, rgba(148,163,184,0.25), transparent);
  margin: 1.4rem 0;
}

.info-team-label {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-muted); margin-bottom: 0.9rem;
}

.info-team { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.4rem; }
.info-member { display: flex; gap: 1rem; align-items: flex-start; }
.info-member-avatar {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  border: 2px solid color-mix(in srgb, var(--blue) 18%, transparent);
  box-shadow: 0 2px 8px rgba(11,19,43,0.10);
}
.info-member-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-member-info { display: flex; flex-direction: column; gap: 0.1rem; }
.info-member-info strong { font-size: 0.9rem; font-weight: 700; color: var(--navy); }
.info-member-info > span:not(.info-member-bio) { font-size: 0.74rem; color: var(--blue); font-weight: 600; }
.info-member-bio { font-size: 0.78rem; color: var(--text-body); line-height: 1.55; margin-top: 0.2rem; }

.info-fuera-bata {
  background: rgba(124,58,237,0.05);
  border: 1px solid rgba(124,58,237,0.15);
  border-left: 3px solid #7C3AED;
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1rem;
}
.info-fb-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #7C3AED; margin-bottom: 0.5rem;
}
.info-fuera-bata p { font-size: 0.84rem; color: var(--text-body); line-height: 1.65; margin: 0; }

/* Colabora */
.info-collab-steps { display: flex; flex-direction: column; gap: 1rem; margin: 1.2rem 0 1.6rem; }
.info-collab-step { display: flex; gap: 1rem; align-items: flex-start; }
.info-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(130deg, var(--blue-accent), var(--blue));
  color: #fff; font-size: 0.68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.info-collab-step strong { display: block; font-size: 0.87rem; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; }
.info-collab-step span  { font-size: 0.82rem; color: var(--text-body); line-height: 1.6; }

/* CTA button */
.info-cta-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.75rem 1.4rem; border-radius: 10px;
  background: var(--blue); color: #fff;
  font-family: inherit; font-size: 0.86rem; font-weight: 700;
  text-decoration: none; transition: background 0.18s, transform 0.15s;
  margin-top: 0.5rem;
}
.info-cta-btn:hover { background: var(--blue-hover); transform: translateY(-1px); }

/* Contacto */
.info-contact-note { font-size: 0.8rem !important; color: var(--text-muted) !important; margin-top: 1rem !important; font-style: normal !important; }

/* Dark mode overrides */
.dark-base .info-mission { background: color-mix(in srgb, var(--blue) 5%, transparent); border-color: color-mix(in srgb, var(--blue) 15%, transparent); border-left-color: var(--blue); color: #C4D0E3; }
.dark-base .info-mission svg { color: var(--blue); }
.dark-base .info-value strong { color: #E2E8F0; }
.dark-base .info-member-info strong { color: #E2E8F0; }
.dark-base .info-member-info > span:not(.info-member-bio) { color: var(--blue); }
.dark-base .info-fuera-bata { background: rgba(124,58,237,0.08); border-color: rgba(167,139,250,0.20); border-left-color: #A78BFA; }
.dark-base .info-fb-label { color: #A78BFA; }
.dark-base .info-collab-step strong { color: #E2E8F0; }
.dark-base .info-cta-btn { background: var(--blue); color: #07101E; }
.dark-base .info-cta-btn:hover { background: #7DD3FC; }

/* ── BOTÓN CIERRE PANEL MÓVIL ── */
.sidebar-close-btn {
  display: none;
  width: 32px;
  height: 32px;
  background: rgba(148,163,184,0.12);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-body);
  font-size: 1rem;
  transition: background 0.2s;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-close-btn:hover { background: rgba(148,163,184,0.28); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .dashboard-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "center center"
      "left   right";
  }
  .sidebar-left  { grid-area: left; position: static; }
  .sidebar-right { grid-area: right; position: static; }
  .dashboard-center { grid-area: center; }
}

@media (max-width: 768px) {
  .navbar-nav        { display: none; }
  .hamburger-btn     { display: inline-flex; flex-shrink: 0; }
  .btn-modo-enfoque  { display: none !important; }
  .hero-quick-access { display: none !important; }

  /* ── Navbar fija en móvil ── */
  .navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
  }

  /* Compensar el espacio que el navbar fijo ocupa fuera del flujo */
  #app { padding-top: 64px; }

  /* ── Navbar compacta en móvil ── */
  .navbar-inner {
    padding: 0 10px;
    gap: 6px;
    overflow: hidden;
    max-width: 100vw;
  }
  .navbar-right { gap: 4px; flex-shrink: 0; }

  /* Botones de icono en móvil: compactos pero con área táctil suficiente */
  .fav-nav-btn,
  .theme-toggle,
  .hamburger-btn,
  .header-gift-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .fav-nav-btn svg,
  .theme-toggle svg { width: 13px; height: 13px; }
  .header-gift-btn svg { width: 15px; height: 15px; }

  /* ── Hero ──────────────────────────────────────────── */
  .hero        { padding: 0.8rem 1rem 0.5rem; position: relative; }
  .hero-logo   { width: 64px; margin-bottom: 0.4rem; }
  .hero h1     { font-size: 1.35rem; letter-spacing: -0.8px; }
  .hero p      {
    display: block;
    font-size: 0.82rem;
    color: var(--text-body);
    line-height: 1.45;
    max-width: 100%;
    margin: 0.3rem auto 0;
    padding: 0 0.25rem;
  }

  /* Burbuja "Tu problema, tu libro", junto al logo, a la derecha */
  .hero-bubble {
    display: block !important;
    position: absolute !important;
    top: 40px !important;
    right: 15px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 10;
    animation: bubble-float 4s ease-in-out infinite;
  }
  .hero-bubble-disk  { width: 58px; height: 58px; padding: 0.45rem; }
  .hero-bubble-label { font-size: 0.46rem; line-height: 1.3; }
  .hero-bubble-icon  { width: 12px; height: 12px; }

  /* Botones de acceso rápido */
  .hero-quick-access { margin-top: 0.75rem; gap: 0.32rem; flex-wrap: wrap; }
  .hqa-btn           { padding: 0.3rem 0.85rem; font-size: 13px; font-weight: 600; gap: 0.26rem; }
  .hqa-mitos         { background: rgba(255,255,255,0.88); color: var(--navy); border-color: rgba(11,19,43,0.18); }
  .hqa-mitos:hover   { background: rgba(11,19,43,0.05); }

  /* ── Barra de búsqueda ───────────────────────────── */
  .search-section      { padding: 0 0 0.75rem; }
  .search-inner        { gap: 0.6rem; width: 100%; align-items: stretch; max-width: 100%; }
  .search-bar          { width: 100%; max-width: 100%; }
  .search-bar input    { padding: 0.44rem 1rem 0.44rem 2.2rem; font-size: 14px; }
  .search-bar-icon     { left: 0.72rem; }
  .search-bar-icon svg { width: 14px; height: 14px; }

  /* ── Filtros ──────────────────────────────────────── */
  .filter-pills { gap: 0.28rem; }
  .pill         { padding: 0.2rem 0.6rem; font-size: 11px; }

  /* ── Pestañas: columna vertical compacta ── */
  .tab-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    padding: 4px !important;
    width: 100% !important;
  }
  .tab-btn {
    flex: 1 1 auto !important;
    width: 100% !important;
    white-space: normal !important;
    font-size: 0.78rem !important;
    padding: 0.48rem 0.9rem !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
    border-radius: 8px !important;
    text-align: left !important;
  }
  .tab-btn svg { width: 12px; height: 12px; }

  /* Boton premium "volver a Por Intereses": centrado y con cuerpo tambien en movil */
  .tab-bar--single .tab-btn:not(.active):not(.tab-btn--hidden) {
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.9rem !important;
    padding: 0.7rem 1.2rem !important;
  }

  /* Artículo semanal, tipografía editorial compacta */
  .weekly-teaser-card   { padding: 1.4rem 1.1rem 1.4rem; }
  .wt-title             { font-size: 1.3rem !important; }
  .weekly-featured-card { padding: 1rem 0.9rem; }
  .weekly-title         { font-size: 17px !important; line-height: 1.3 !important; margin-bottom: 0.35rem; }
  .week-label           { margin-bottom: 0.5rem; flex-wrap: wrap; gap: 8px; }
  .week-tag             { font-size: 0.6rem; padding: 0.13rem 0.8rem; }
  .reading-time         { font-size: 0.62rem; }
  .article-intro        { font-size: 15px !important; line-height: 1.6 !important; color: var(--text-body) !important; margin-bottom: 0.8rem; }
  .article-content p    { font-size: 15px !important; line-height: 1.6 !important; color: var(--text-body) !important; margin-bottom: 0.5rem; }
  .article-subtitle     { font-size: 17px !important; font-weight: 800; margin: 2.1rem 0 0.7rem; padding-bottom: 0.4rem; }
  .article-pull         { font-size: 16px; font-style: italic; margin: 1.7rem 0; padding-left: 0.9rem; }
  .aplicacion-block p   { font-size: 13.5px !important; line-height: 1.55; }
  .article-content      { margin-top: 0.6rem; }
  .article-blockquote   { margin: 0.75rem 0; padding: 0.6rem 0.8rem; }
  .article-blockquote p { font-size: 13.5px !important; line-height: 1.5; }
  .article-blockquote cite { font-size: 11px; }

  /* ── Tarjetas de libros: flip 3D estándar en móvil ── */
  .flip-card { height: 420px !important; }

  /* Sinopsis sin truncar; flex-grow:1 empuja las acciones al fondo */
  .flip-back-sinopsis {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: hidden !important;
    max-height: none !important;
    white-space: normal !important;
    flex-grow: 1 !important;
  }

  /* ── Sidebars como overlay ───────────────────────── */
  .sidebar-widget.mobile-open {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(247,249,255,0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    overflow-y: auto;
    padding: 1.8rem 1.4rem 3rem;
    top: 0;
  }
  .sidebar-widget.mobile-open .sidebar-close-btn {
    display: inline-flex;
    position: sticky;
    top: 0;
    margin-left: auto;
    margin-bottom: 1rem;
  }

  /* ── Menú lateral deslizable desde la derecha ───── */
  .mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(300px, 85vw) !important;
    height: 100% !important;
    min-height: -webkit-fill-available !important;
    padding: 4.5rem 1.5rem max(2rem, env(safe-area-inset-bottom)) !important;
    background: #F5F7FF !important;
    border-top: none !important;
    border-left: 1px solid rgba(148,163,184,0.14) !important;
    z-index: 9000 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -8px 0 32px rgba(11,19,43,0.14) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate !important;
    transform: translateX(0) !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s !important;
  }
  .mobile-menu[hidden] {
    display: block !important;
    visibility: hidden !important;
    transform: translateX(110%) !important;
    pointer-events: none !important;
  }
}

@media (max-width: 720px) {
  .doc-card.doc-featured { flex-direction: column; }
  .doc-aside { width: 100%; }
  .docs-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  /* Fuentes de tarjetas y secciones más pequeñas */
  .doc-card h3       { font-size: 0.91rem; line-height: 1.38; }
  .doc-desc          { font-size: 0.77rem; line-height: 1.58; }
  .doc-meta          { font-size: 0.67rem; }
  .fuera-bata-desc   { font-size: 0.75rem; line-height: 1.65; }
  .seccion-header h2 { font-size: 0.85rem; }
  .dashboard-layout { grid-template-columns: 1fr; grid-template-areas: "center" "right" "left"; padding: 0 1rem 2rem; gap: 1rem; }
  .main-content     { padding: 0 0 1.2rem; }
  .research-inner   { padding: 0; }
  .navbar-inner     { padding: 0 1rem; gap: 0.6rem; height: 52px; }
  #app              { padding-top: 52px; }
  .navbar-brand     { gap: 0.5rem; }
  .logo             { height: 28px; }
  .navbar-brand-name { font-size: 0.92rem; }
  .navbar-right     { gap: 0.55rem; }
  .footer-inner     { flex-direction: column; }
  .footer-inner--3col { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .footer-col--brand  { grid-column: 1 / -1; }
  .footer-right     { align-items: flex-start; }
  .footer-links     { flex-wrap: wrap; gap: 0.7rem; }
  .trust-strip { padding: 0.55rem 1.2rem; }
  .trust-separator { display: none; }
  .trust-strip-inner { gap: 0.9rem; justify-content: flex-start; }
  .trust-pill { font-size: 0.72rem; }
  .stats-bar { padding: 0.8rem 1.2rem; }
  .stats-bar-inner { gap: 1rem; flex-wrap: wrap; }
  .stat-number { font-size: 1.3rem; }
  .stat-divider { display: none; }
  .footer-main { padding: 1.6rem 1.2rem calc(68px + env(safe-area-inset-bottom, 0px) + 0.8rem); }
  .author-modal-card { padding: 1.3rem 1.1rem; }
  .info-modal-card  { padding: 1.3rem 1.1rem; }

  /* ── Mobile layout fixes: evitar desborde horizontal ── */
  .cat-selector     { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .cat-btn          { white-space: normal; overflow: hidden; word-break: break-word; padding: 0.7rem 0.5rem; }
  .lib-cards-grid   { grid-template-columns: 1fr; }
  .sidebar-widget   { width: 100%; min-width: 0; box-sizing: border-box; padding: 1rem 0.9rem; }
  .tab-bar          { width: 100% !important; flex-direction: column !important; }
  .tab-btn          { width: 100% !important; }
  .dashboard-center { min-width: 0; max-width: 100%; }
}

/* ── ROLE BADGES, cargos de Miguel ── */
.role-badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0.75rem;
}

.role-badges-row--inline {
  justify-content: flex-start;
  margin: 0.3rem 0 0.2rem;
}

@keyframes vip-shimmer {
  0%   { left: -40%; }
  100% { left: 140%; }
}

.vip-badge {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: #0B132B;
  border-top: 2px solid #E6CA65;
  border-right: 2px solid #B8860B;
  border-bottom: 2px solid #996515;
  border-left: 2px solid #D4AF37;
}

.vip-badge-shimmer {
  position: absolute;
  top: 0;
  left: -40%;
  width: 30%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-12deg);
  animation: vip-shimmer 2.5s linear infinite;
  z-index: 2;
}

.vip-badge-inner {
  position: relative;
  border-radius: 9999px;
  background: #0B132B;
  padding: 0.4rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  color: #D4AF37;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── FUERA DE BATA, intro + tab emoji ── */
.tab-emoji {
  font-size: 0.78em;
  opacity: 0.65;
  margin-left: 0.18rem;
  vertical-align: middle;
  line-height: 1;
}

.fuera-bata-intro {
  margin-bottom: 1.8rem;
  padding: 1.2rem 1.5rem;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--blue-accent) 55%, transparent);
  border-radius: 0 14px 14px 0;
}

.fuera-bata-titulo {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.5rem;
}

.fuera-bata-desc {
  font-size: 0.87rem;
  color: var(--text-body);
  line-height: 1.78;
  margin: 0;
}

@media (max-width: 680px) {
  .fuera-bata-intro { padding: 1rem 1.1rem; }
  .fuera-bata-desc  { font-size: 0.84rem; }
}

/* ── Vista rápida de Fuera de Bata dentro de la SPA (pestaña inferior) ── */
.fdb-home {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.fdb-home h2 {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--navy); margin: 0; line-height: 1.1;
}
.fdb-home h2 .grad { color: var(--blue); }
/* Título con la probeta a la izquierda (mismo SVG que la pestaña) */
.fdb-home-title { display: flex; align-items: center; gap: 0.5rem; }
.fdb-home-flask {
  width: 32px; height: 32px; flex-shrink: 0;
  color: var(--blue);
  margin-top: -1px;
  animation: fdb-flask-float 3.6s ease-in-out infinite;
}
.dark-base .fdb-home-flask { color: var(--blue); }   /* acento del tema (rojo, ámbar, morado…) */
[data-theme="dark"] .fdb-home-flask { color: #60A5FA; } /* dark liso: azul claro legible */
.fdb-flask-liquid { animation: fdb-flask-liquid 3.6s ease-in-out infinite; }
.fdb-flask-bubble {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: fdb-flask-bubble 2.8s ease-in infinite 0.6s;
}
@keyframes fdb-flask-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes fdb-flask-liquid {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.4px); }
}
@keyframes fdb-flask-bubble {
  0%   { transform: translateY(2.5px) scale(0.6); opacity: 0; }
  20%  { opacity: 0.85; }
  70%  { opacity: 0.45; }
  100% { transform: translateY(-5px) scale(1); opacity: 0; }
}

/* Entrada escalonada de los elementos al abrir la vista */
body.mp-fuerabata .fdb-home > * {
  animation: fdb-enter 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.mp-fuerabata .fdb-home > *:nth-child(1) { animation-delay: 0.02s; }
body.mp-fuerabata .fdb-home > *:nth-child(2) { animation-delay: 0.08s; }
body.mp-fuerabata .fdb-home > *:nth-child(3) { animation-delay: 0.14s; }
body.mp-fuerabata .fdb-home > *:nth-child(4) { animation-delay: 0.20s; }
body.mp-fuerabata .fdb-home > *:nth-child(5) { animation-delay: 0.26s; }
@keyframes fdb-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fdb-home-flask,
  .fdb-flask-liquid,
  .fdb-flask-bubble,
  body.mp-fuerabata .fdb-home > * { animation: none; }
}
.fdb-home-lead {
  font-size: 0.92rem; line-height: 1.7; color: var(--text-body); margin: 0;
  /* Halo pegado a las letras para que los nodos del canvas no le resten
     legibilidad. Al ir ligado al texto y no a una caja, no hay ningún
     borde perceptible. */
  text-shadow: 0 0 7px #F7F9FF, 0 0 7px #F7F9FF, 0 0 15px #F7F9FF;
}
.dark-base .fdb-home-lead {
  text-shadow: 0 0 7px #07101E, 0 0 7px #07101E, 0 0 15px #07101E;
}
.fdb-home-stats { display: flex; gap: 1.6rem; margin: 0.2rem 0; }
.fdb-home-stats div { display: flex; flex-direction: column; }
.fdb-home-stats b { font-size: 1.35rem; font-weight: 800; color: var(--navy); line-height: 1; }
.fdb-home-stats span { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; }
.fdb-home-featured {
  position: relative;
  display: block; text-decoration: none; color: inherit;
  padding: 1rem 1.1rem; border-radius: 14px;
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--card-border));
  box-shadow: 0 28px 80px rgba(11, 19, 43, 0.28), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.fdb-home-featured::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-accent)); opacity: 0.85;
}
.fdb-home-featured:hover { border-color: color-mix(in srgb, var(--blue) 38%, var(--card-border)); transform: translateY(-1px); }
.fdb-home-featured-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  padding: 0.15rem 0.5rem; border-radius: 6px; margin-bottom: 0.5rem;
}
.fdb-home-featured h3 { font-size: 0.98rem; font-weight: 700; color: var(--navy); margin: 0 0 0.35rem; line-height: 1.35; }
.fdb-home-featured p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 0.55rem; }
.fdb-home-featured-more { font-size: 0.8rem; font-weight: 700; color: var(--blue); }
.fdb-home-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.fdb-home-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.2rem; border-radius: 12px; font-size: 0.88rem; font-weight: 700;
  background: var(--blue); color: #fff; text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.fdb-home-cta:hover { background: var(--blue-hover); transform: translateY(-1px); }
.fdb-home-cta svg { width: 15px; height: 15px; }
.fdb-home-cta--ghost {
  background: transparent; color: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
}
.fdb-home-cta--ghost:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.dark-base .fdb-home h2,
.dark-base .fdb-home-stats b,
.dark-base .fdb-home-featured h3 { color: #E8EEF9; }
.dark-base .fdb-home-featured {
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
}

/* ── Tarjeta del Artículo de la Semana en la portada móvil ── */
.mob-weekly-home { display: none; }
@media (max-width: 768px) {
  body.mp-casa .mob-weekly-home { display: block; margin: 1.4rem 0 0.4rem; }
}
.mwh-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.05rem 1.15rem 1.1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: #EEF2FD;                       /* relleno, opaco */
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-left: 3px solid var(--blue-accent); /* franja de diferenciación (acento del tema) */
  transition: transform 0.2s, box-shadow 0.2s;
}
.mwh-card:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(11, 19, 43, 0.1); }
.dark-base .mwh-card {
  background: #0E1B30;                       /* relleno, un pelo más claro que el fondo */
  border-color: rgba(148, 163, 184, 0.14);
}
/* La franja: cian explícito en el tema oscuro liso; en los temas de color,
   su propio acento para que no desentone */
[data-theme="dark"] .mwh-card { border-left-color: #00E5FF; }
[data-theme="cosmos"] .mwh-card,
[data-theme="tormenta"] .mwh-card,
[data-theme="verde"] .mwh-card { border-left-color: var(--blue); }
.mwh-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue);
}
.mwh-eyebrow svg { width: 13px; height: 13px; }
.mwh-badge {
  align-self: flex-start;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  padding: 0.15rem 0.5rem; border-radius: 6px;
}
.mwh-title { font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.32; }
.mwh-cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 700; color: var(--blue); margin-top: 0.1rem;
}
.mwh-cta svg { width: 14px; height: 14px; }
.dark-base .mwh-title { color: #E8EEF9; }

/* ── BIBLIOTECA POR INTERESES ── */
.cat-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1rem;
  column-gap: 1.125rem;
  margin-bottom: 2rem;
}

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.5rem 0.65rem 1.2rem;
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 16%, transparent);
  background: rgba(255,255,255,0.96);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-body);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(11,19,43,0.06), inset 0 1px 0 rgba(255,255,255,0.80);
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  white-space: nowrap;
}

.cat-btn svg { width: 22px; height: 22px; }

.cat-btn:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 12%, transparent);
}

.cat-btn--recomendado {
  border-color: color-mix(in srgb, var(--blue-accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-accent) 25%, transparent), 0 4px 14px color-mix(in srgb, var(--blue-accent) 10%, transparent);
}

.cat-btn.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--blue) 18%, transparent);
  transform: translateY(-1px);
}

/* Categorías prioritarias: solo orden, primera fila, sin marca visual (Operación Fénix) */
.cat-btn--destacada { order: -1; }
.lib-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem;
}

.lib-cat-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 1.5rem 0;
}

.lib-card {
  position: relative;
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, color-mix(in srgb, var(--cat-color, var(--blue)) 12%, transparent) 0%, transparent 65%),
    rgba(255,255,255,0.97);
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--cat-color, var(--card-border));
  border-radius: 16px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.80);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  opacity: 0;
  animation: lib-card-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes lib-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lib-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--cat-color, var(--blue)) 18%, transparent), 0 0 22px color-mix(in srgb, var(--cat-color, var(--blue)) 12%, transparent);
  border-color: color-mix(in srgb, var(--cat-color, var(--blue)) 40%, transparent);
  border-left-color: var(--cat-color, var(--card-border));
}

/* Despega la etiqueta del tick de leído y el corazón de favorito, ambos
   position:absolute sobre la esquina superior de la tarjeta */
.lib-card .doc-badge { margin-top: 1.6rem; gap: 0.35rem; }
.lib-card .doc-badge-icon { display: inline-flex; }
.lib-card .doc-badge-icon svg { width: 11px; height: 11px; stroke: var(--cat-color, var(--blue)); }

.lib-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}

.lib-card-summary {
  font-size: 0.83rem;
  color: var(--text-body);
  line-height: 1.65;
  flex-grow: 1;
}

.lib-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.lib-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 9px;
  background: transparent;
  color: var(--blue);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  margin-bottom: 1.2rem;
}

.lib-back-btn:hover {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}

.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--text-body) 25%, transparent);
  color: var(--text-body);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
  font-family: inherit;
}

.save-btn:hover { border-color: var(--blue); color: var(--blue); }
.save-btn:active { transform: scale(0.96); }

.save-btn.active {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: var(--blue);
  color: var(--blue);
}

.save-btn-icon { display: inline-flex; }
.save-btn.active .save-btn-icon svg { fill: currentColor; }

.dark-base .save-btn { border-color: color-mix(in srgb, #ffffff 22%, transparent); color: #C8D2E0; }
.dark-base .save-btn:hover { border-color: var(--blue); color: var(--blue); }
.dark-base .save-btn.active { background: color-mix(in srgb, var(--blue) 14%, transparent); border-color: var(--blue); color: var(--blue); }

.li-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 12px);
  background: #0B132B;
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 9999;
  max-width: calc(100vw - 2rem);
  text-align: center;
}

.li-toast--visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 680px) {
  .save-btn { font-size: 0.72rem; padding: 0.28rem 0.7rem; margin-left: 0; }
}

.source-verify-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--blue) 20%, transparent);
  color: var(--blue);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  line-height: 1.4;
}

.source-verify-btn:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .cat-selector { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .cat-selector { grid-template-columns: repeat(2, 1fr); }
  .cat-btn { font-size: 0.72rem; white-space: normal; word-break: break-word; overflow: hidden; }
  .footer-inner--3col { grid-template-columns: 1fr; }
}

/* ── MODAL DE EFECTOS (premium blur) ── */
.efecto-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 600;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.efecto-modal-overlay.open { display: flex; }

.efecto-modal-card {
  background: rgba(249,251,255,0.98);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  padding: 2.2rem 2rem 2rem;
  max-width: 520px;
  width: 100%;
  position: relative;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(11,19,43,0.22);
  animation: modal-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.efecto-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 44px;
  height: 44px;
  background: rgba(148,163,184,0.12);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-body);
  font-size: 0.9rem;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1010;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.efecto-modal-close:hover { background: rgba(148,163,184,0.26); }

.efecto-modal-nombre {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin-bottom: 0.3rem;
  padding-right: 2.2rem;
  line-height: 1.25;
}

.efecto-modal-gancho {
  font-size: 0.88rem;
  color: var(--blue);
  font-weight: 600;
  font-style: italic;
  margin-bottom: 1.1rem;
}

.efecto-modal-explicacion {
  font-size: 0.86rem;
  color: var(--text-body);
  line-height: 1.78;
  margin-bottom: 1.3rem;
}

.experimento-box {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.3rem;
}

.experimento-box-label {
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.experimento-box-titulo {
  font-size: 0.83rem;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.experimento-box p { font-size: 0.81rem; color: var(--text-body); line-height: 1.6; margin: 0; }

.aplicaciones-label {
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.aplicaciones-list { display: flex; flex-direction: column; gap: 0.52rem; list-style: none; padding: 0; margin: 0; }

.aplicaciones-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.55;
}

.aplicaciones-list li::before {
  content: '→';
  color: var(--blue);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.82rem;
  margin-top: 0.02rem;
}

@media (max-width: 680px) {
  .efecto-modal-card { padding: 1.3rem 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════
   TRANSICIÓN DE TEMA, View Transition API (crossfade en GPU)
   Compatible: Chrome 111+, Safari 18+, Edge 111+
   Fallback para otros: cambio instantáneo (sin jank)
══════════════════════════════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: ease;
}
::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in;  }
@keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* Overlay de fallback (navegadores sin View Transition API) */
#theme-overlay {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none; opacity: 0;
  will-change: opacity;
  transition: opacity 0.16s ease;
}
#theme-overlay.fade-in  { opacity: 1; }
#theme-overlay.fade-out { opacity: 0; transition: opacity 0.20s ease; }

/* ══════════════════════════════════════════════════════════════
   MODO OSCURO
══════════════════════════════════════════════════════════════ */
.dark-base {
  --navy:         #E2E8F0;
  --blue:         #38BDF8;
  --blue-hover:   #7DD3FC;
  --blue-accent:  var(--blue-hover);
  --text-body:    #C0D0E4;
  --text-muted:   #8899B2;
  --white:        #0D1B30;
  --card-border:  rgba(148,163,184,0.10);
  --card-shadow:  0 2px 8px rgba(0,0,0,0.40), 0 8px 32px rgba(0,0,0,0.35);
  --badge-bg:     color-mix(in srgb, var(--blue) 10%, transparent);
  --badge-border: color-mix(in srgb, var(--blue) 22%, transparent);
  --card-bg:      rgba(12,22,42,0.98);
  --border:       var(--card-border);
}

.dark-base body { background-color: #07101E; }
.dark-base #bg-layer {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, color-mix(in srgb, var(--blue-accent) 20%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, color-mix(in srgb, var(--blue) 20%, transparent) 0%, transparent 60%);
}

.dark-base .navbar {
  background: rgba(5,10,22,0.92);
  border-bottom-color: rgba(148,163,184,0.08);
}

.dark-base .mobile-menu {
  background: #07131B !important;   /* opaco en dark */
  border-top-color: rgba(148,163,184,0.08);
}

.dark-base .mobile-menu-header { border-bottom-color: rgba(255,255,255,0.08); }
.dark-base .mobile-menu-brand  { color: #E2E8F0; }
.dark-base .mobile-menu-logo   { filter: none; }

/* Botones de acceso rápido en dark mode móvil
  , var(--navy) se convierte en #E2E8F0 en dark mode, por lo que
   los valores heredados del bloque 768px producen claro sobre claro. */
@media (max-width: 768px) {
  .dark-base .hqa-mitos {
    background: rgba(255,255,255,0.06) !important;
    color: #C4D0E3 !important;
    border-color: rgba(255,255,255,0.13) !important;
  }
  .dark-base .hqa-mitos:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #E2E8F0 !important;
  }
}
.dark-base .mobile-nav-link    { color: #C4D0E3; border-bottom-color: rgba(255,255,255,0.07); }
.dark-base .mobile-nav-chevron { color: rgba(196,208,227,0.28); }
.dark-base .mobile-nav-link:hover { color: var(--blue); }
.dark-base .mobile-nav-link:hover .mobile-nav-chevron { color: var(--blue); }
.dark-base .nav-link:hover { color: #E2E8F0; background: color-mix(in srgb, var(--blue) 8%, transparent); }

.dark-base .social-btn {
  background: rgba(12,22,42,0.7);
  border-color: rgba(148,163,184,0.15);
  color: #64748B;
}
.dark-base .social-btn:hover { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }

.dark-base .sidebar-widget {
  background: rgba(9,17,33,0.75);
  border-color: rgba(148,163,184,0.08);
}

.dark-base .doc-card,
.dark-base .weekly-teaser-card,
.dark-base .weekly-prev-card,
.dark-base .research-card {
  background:
    radial-gradient(ellipse 65% 55% at 8% 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 0%, transparent 60%),
    rgba(12,22,42,0.95);
  border-color: rgba(148,163,184,0.10);
}

.dark-base .weekly-featured-card {
  background:
    radial-gradient(ellipse 105% 22% at 22% 8%,  color-mix(in srgb, var(--blue-accent) 22%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 105% 24% at 82% 38%, color-mix(in srgb, var(--blue) 20%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 105% 22% at 14% 70%, color-mix(in srgb, var(--blue-accent) 18%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 115% 26% at 90% 96%, color-mix(in srgb, var(--blue) 20%, transparent) 0%, transparent 70%),
    var(--card-bg);
  border-color: color-mix(in srgb, var(--blue) 20%, var(--card-border));
}

.dark-base .doc-card:nth-child(even) {
  background:
    radial-gradient(ellipse 65% 55% at 92% 0%, rgba(157,0,255,0.05) 0%, transparent 60%),
    rgba(12,22,42,0.95);
}

.dark-base .lib-card {
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, color-mix(in srgb, var(--cat-color, var(--blue-accent)) 20%, transparent) 0%, transparent 65%),
    rgba(12,22,42,0.95);
  border-color: rgba(148,163,184,0.10);
  border-left-color: var(--cat-color, var(--blue-accent));
}

.dark-base .doc-card.doc-featured { background: rgba(12,22,42,0.98); }

.dark-base .search-bar input {
  background: rgba(20,36,66,0.97);
  color: #E2E8F0;
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
}
.dark-base .search-bar input::placeholder { color: #7A90AA; }
.dark-base .search-bar input:focus { border-color: color-mix(in srgb, var(--blue) 45%, transparent); box-shadow: 0 4px 22px color-mix(in srgb, var(--blue) 10%, transparent); }

.dark-base .tab-bar { background: rgba(8,16,34,0.92) !important; border-color: color-mix(in srgb, var(--blue) 18%, transparent) !important; box-shadow: 0 2px 12px color-mix(in srgb, var(--blue-hover) 8%, transparent), 0 1px 4px rgba(0,0,0,0.18) !important; }
.dark-base .tab-bar--single { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.dark-base { --pill-bg: linear-gradient(130deg, var(--blue-hover) 0%, var(--blue) 100%); --pill-shadow: 0 2px 10px color-mix(in srgb, var(--blue-hover) 30%, transparent), 0 4px 18px color-mix(in srgb, var(--blue) 22%, transparent); }
.dark-base .tab-btn.active { background: transparent; box-shadow: none; }
.dark-base .tab-btn:not(.active) { color: #94A3B8; }
.dark-base .tab-btn:not(.active):hover { color: #E2E8F0; background: color-mix(in srgb, var(--blue) 7%, transparent); }
.dark-base .tab-bar--single .tab-btn:not(.active):not(.tab-btn--hidden) { color: #fff; }
.dark-base .tab-bar--single .tab-btn:hover:not(.active):not(.tab-btn--hidden) { color: #fff; }

.dark-base .author-modal-card,
.dark-base .info-modal-card,
.dark-base .efecto-modal-card { background: rgba(8,16,32,0.99); }

.dark-base .author-modal-overlay,
.dark-base .info-modal-overlay { background: rgba(0,0,0,0.55); }

.dark-base .fuera-bata-intro {
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border-left-color: color-mix(in srgb, var(--blue) 45%, transparent);
}

.dark-base .aplicacion-block {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 100%);
  border-left-color: var(--blue);
}

.dark-base .article-blockquote { background: color-mix(in srgb, var(--blue) 5%, transparent); border-left-color: var(--blue); }
.dark-base .experimento-box { background: color-mix(in srgb, var(--blue) 5%, transparent); border-color: color-mix(in srgb, var(--blue) 12%, transparent); border-left-color: var(--blue); }

.dark-base .research-section { border-top-color: rgba(148,163,184,0.08); }
.dark-base .footer-main { background: #030810; }

.dark-base .cat-btn { background: rgba(12,22,42,0.80); border-color: color-mix(in srgb, var(--blue) 14%, transparent); color: #94A3B8; }
.dark-base .cat-btn:hover { border-color: color-mix(in srgb, var(--blue) 35%, transparent); background: color-mix(in srgb, var(--blue) 8%, transparent); color: var(--blue); transform: translateY(-2px); }
.dark-base .cat-btn.active { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }

.dark-base .doc-badge { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.dark-base .bata-pill { border-color: rgba(255,255,255,0.12); color: #94A3B8; }
.dark-base .bata-pill:hover { border-color: var(--blue); color: var(--blue); }
.dark-base .bata-pill.active { background: var(--blue); border-color: var(--blue); color: #07101E; }
.dark-base .featured-label { background: var(--blue); color: #07101E; }
.dark-base .research-tag { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }

.dark-base .btn-descarga { background: var(--blue); }
.dark-base .btn-descarga:hover { background: #7DD3FC; }

.dark-base .source-verify-btn { background: color-mix(in srgb, var(--blue) 7%, transparent); border-color: color-mix(in srgb, var(--blue) 20%, transparent); color: var(--blue); }
.dark-base .source-verify-btn:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }

.dark-base .lib-back-btn { border-color: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--blue); }
.dark-base .lib-back-btn:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }

.dark-base .author-trigger { color: #94A3B8; }
.dark-base .author-trigger:hover { color: var(--blue); }

/* ── CORRECCIONES DE CONTRASTE MODO OSCURO ── */

/* 1 · Logo cerebro hero: brillo cian sobre fondo oscuro */
.dark-base .hero-logo {
  filter: invert(0.9) brightness(1.5) drop-shadow(0 0 12px color-mix(in srgb, var(--blue-accent) 40%, transparent));
  animation-name: logo-breathe-dark;
}

@keyframes logo-breathe-dark {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.024); }
}

/* 2 · Logo navbar: invertido en modo oscuro para contraste premium */
.dark-base .logo {
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}

/* 3 · Pestañas inactivas SVG */
.dark-base .tab-btn:not(.active) svg { opacity: 0.7; }

.dark-base .sidebar-widget .widget-header p {
  color: #94A3B8;
  opacity: 1;
}

/* 7 · Textos de tarjetas de documentos */
.dark-base .doc-card h3         { color: #E2E8F0; }
.dark-base .doc-desc            { color: #B0C4D8; }

/* ── BOTÓN FAVORITOS NAVBAR ── */
.header-gift-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-accent) 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 35%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
  animation: header-gift-pulse 2.4s ease-in-out infinite;
}
.header-gift-btn[hidden] { display: none; }
.header-gift-btn svg { width: 18px; height: 18px; }
.header-gift-btn:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 48%, transparent);
}
@keyframes header-gift-pulse {
  0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 35%, transparent); }
  50%      { box-shadow: 0 4px 20px color-mix(in srgb, var(--blue) 55%, transparent), 0 0 0 6px color-mix(in srgb, var(--blue) 12%, transparent); }
}

.header-gift-btn.header-gift-btn--claimed {
  animation: none;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  box-shadow: none;
}
.header-gift-btn.header-gift-btn--claimed:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 20%, transparent);
}

.fav-nav-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.55);
  color: var(--text-body);
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}

.fav-nav-btn:hover        { color: #E11D48; background: rgba(225,29,72,0.07); border-color: rgba(225,29,72,0.28); }
.fav-nav-btn.has-favs svg { fill: #E11D48; stroke: #E11D48; }

.fav-nav-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #E11D48;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.dark-base .fav-nav-btn {
  background: rgba(12,22,42,0.7);
  border-color: rgba(148,163,184,0.15);
  color: #94A3B8;
}
.dark-base .fav-nav-btn:hover { color: #FB7185; background: rgba(251,113,133,0.10); border-color: rgba(251,113,133,0.30); }
.dark-base .fav-nav-btn.has-favs svg { fill: #FB7185; stroke: #FB7185; }

/* Panel desplegable de favoritos */
.fav-nav-panel {
  position: fixed;
  top: 70px;
  right: 1rem;
  width: min(360px, calc(100vw - 2rem));
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  background: rgba(247,249,255,0.98);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.14), 0 2px 8px color-mix(in srgb, var(--blue) 8%, transparent);
  padding: 1.2rem;
  z-index: 1200;
  animation: np-in 0.18s ease;
}

.fav-nav-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(148,163,184,0.15);
}

.fav-nav-panel-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.2px;
}

.fav-nav-panel-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(148,163,184,0.15);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.fav-nav-panel-close:hover { background: rgba(148,163,184,0.28); }

.fav-nav-empty { /* hereda de .li-empty cuando se use esa clase */ }

.fav-nav-list { display: flex; flex-direction: column; gap: 0.55rem; }

.fav-nav-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.12);
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.fav-nav-item:hover { background: color-mix(in srgb, var(--blue) 5%, transparent); border-color: color-mix(in srgb, var(--blue) 20%, transparent); }

.fav-nav-item-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.fav-nav-item-body { flex: 1; min-width: 0; }

.fav-nav-item-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.fav-nav-item-sub {
  font-size: 0.67rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

.fav-nav-item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 0.75rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity 0.15s, color 0.15s;
}
.fav-nav-item-remove:hover { opacity: 1; color: #E11D48; }

.dark-base .fav-nav-panel {
  background: rgba(8,16,34,0.98);
  border-color: color-mix(in srgb, var(--blue) 16%, transparent);
}
.dark-base .fav-nav-panel-header { border-bottom-color: rgba(148,163,184,0.10); }
.dark-base .fav-nav-panel-title  { color: #E2E8F0; }
.dark-base .fav-nav-item { background: rgba(18,32,58,0.8); border-color: rgba(148,163,184,0.10); }
.dark-base .fav-nav-item:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.dark-base .fav-nav-item-title { color: #E2E8F0; }

/* ── BOTÓN SELECTOR DE TEMA ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.55);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}

.dark-base .theme-toggle {
  background: rgba(12,22,42,0.7);
  border-color: rgba(148,163,184,0.15);
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--blue) 20%, transparent);
}

.dark-base .theme-toggle:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.2);
}

.theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.35);
  transition: background 0.25s;
  pointer-events: none;
}

.theme-icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.theme-toggle--simple {
  justify-content: center;
}

.theme-chevron {
  opacity: 0.55;
  transition: transform 0.18s;
  pointer-events: none;
}

.theme-toggle[aria-expanded="true"] .theme-chevron { transform: rotate(180deg); }

@media (max-width: 640px) {
  .theme-toggle { gap: 0; }
  .theme-chevron { display: none; }
}

/* ── POPUP SELECTOR DE TEMA ── */
.theme-picker-popup {
  position: fixed;
  background: rgba(247,249,255,0.98);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 16px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.14), 0 2px 8px color-mix(in srgb, var(--blue) 8%, transparent);
  padding: 0.85rem;
  z-index: 1200;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: np-in 0.16s ease;
  width: 234px;
}

.dark-base .theme-picker-popup {
  background: rgba(10,18,36,0.98);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 10px 36px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
}

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.theme-swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.45rem 0.2rem;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.theme-swatch-btn:hover { background: rgba(0,0,0,0.045); }
.dark-base .theme-swatch-btn:hover { background: rgba(255,255,255,0.055); }

.theme-swatch-btn.ts-active {
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

.dark-base .theme-swatch-btn.ts-active {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
}

.theme-swatch-preview {
  width: 44px;
  height: 28px;
  border-radius: 7px;
  border: 1.5px solid rgba(0,0,0,0.09);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.theme-swatch-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.dark-base .theme-swatch-label { color: #C4D0E3; }

/* ══════════════════════════════════════════════════════════════
   BARRA DE PROGRESO DE LECTURA
══════════════════════════════════════════════════════════════ */
.reading-progress-bar {
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s;
}

.reading-progress-bar.visible { opacity: 1; }

@media (max-width: 680px) {
  .reading-progress-bar { top: 52px; }
}

/* Páginas estáticas: la navbar mide 60px, no 64/52 como la de la SPA */
body:not(:has(#app)) .reading-progress-bar { top: 60px; }

.reading-progress-fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue-accent) 0%, var(--blue) 100%);
  transition: transform 0.08s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--blue-accent) 55%, transparent);
}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING
══════════════════════════════════════════════════════════════ */
@keyframes skeleton-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Clase base de pulso para cualquier skeleton */
.sk-pulse {
  background: linear-gradient(90deg,
    rgba(148,163,184,0.08) 0%,
    rgba(148,163,184,0.18) 45%,
    rgba(148,163,184,0.08) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
  border-radius: 12px;
  pointer-events: none;
}

/* Skeleton tarjeta botiquín */
.bq-skeleton-card {
  height: 280px;
  border-radius: 16px;
}

/* Skeleton ítem timeline */
.tl-skeleton-item {
  width: 180px;
  height: 90px;
  border-radius: 12px;
  flex-shrink: 0;
}

.dark-base .sk-pulse {
  background: linear-gradient(90deg,
    rgba(148,163,184,0.05) 0%,
    rgba(148,163,184,0.12) 45%,
    rgba(148,163,184,0.05) 100%
  );
  background-size: 200% 100%;
}

/* Skeleton overlay común */
.docs-layout.sk-init .doc-card {
  position: relative;
  pointer-events: none;
}

.docs-layout.sk-init .doc-card > * { opacity: 0; }

.docs-layout.sk-init .doc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(90deg,
    rgba(148,163,184,0.08) 0%,
    rgba(148,163,184,0.20) 45%,
    rgba(148,163,184,0.08) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   BOTIQUÍN ANTISESGOS
══════════════════════════════════════════════════════════════ */
.botiquin-section {
  padding: 2.8rem 2rem 6.5rem;
  background:
    radial-gradient(ellipse 65% 45% at 10% 50%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 30%, color-mix(in srgb, var(--blue) 4%, transparent) 0%, transparent 55%),
    rgba(11,19,43,0.02);
  border-top: 1px solid rgba(148,163,184,0.12);
}

.botiquin-inner { max-width: 1260px; margin: 0 auto; }

/* Encabezado */
.botiquin-heading { text-align: center; margin-bottom: 2.8rem; }

.botiquin-eyebrow {
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--blue);
  margin-bottom: 0.65rem;
  opacity: 0.85;
}

.botiquin-heading h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.8px;
  margin-bottom: 0.55rem;
}

.botiquin-sub {
  font-size: 0.9rem;
  color: var(--text-body);
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.6;
}

.botiquin-disclaimer {
  font-size: 0.76rem;
  color: var(--text-muted, #8a93a8);
  max-width: 460px;
  margin: 0.5rem auto 0;
  line-height: 1.5;
}

/* Buscador por síntoma */
.bq-search-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto 1.6rem;
}

.bq-search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  opacity: 0.6;
}

.bq-search-input {
  width: 100%;
  padding: 0.75rem 2.8rem 0.75rem 2.6rem;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 50px;
  background: rgba(255,255,255,0.90);
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.bq-search-input::placeholder { color: var(--text-muted); opacity: 0.75; }
.bq-search-input:focus {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent);
}

.bq-search-clear {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.18s;
}
.bq-search-clear:hover { color: var(--navy); }

.dark-base .bq-search-input {
  background: rgba(12,22,42,0.90);
  color: #E2E8F0;
  border-color: rgba(148,163,184,0.14);
}
.dark-base .bq-search-input:focus { border-color: color-mix(in srgb, var(--blue) 45%, transparent); }

/* Etiqueta de resultados */
.bq-results-label {
  text-align: center;
  font-size: 0.80rem;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Sin resultados */
.bq-no-results {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 2rem 0;
}

/* Tabs del botiquín, pill chips */
.bq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 800px;
  margin: 0 auto 2.4rem;
}

.bq-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.52rem 1.05rem;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,0.82);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}

.bq-tab:hover:not(.active) {
  color: var(--navy);
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  background: rgba(255,255,255,0.96);
}

.bq-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(11,19,43,0.18);
}

.dark-base .bq-tab { background: rgba(18,32,58,0.70); border-color: rgba(148,163,184,0.14); color: rgba(148,163,184,0.85); }
.dark-base .bq-tab:hover:not(.active) { background: rgba(18,32,58,0.95); color: #E2E8F0; }
.dark-base .bq-tab.active { background: var(--blue); color: #fff; border-color: transparent; }

/* Grid de tarjetas */
.bq-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  transition: opacity 0.22s ease;
}

/* ── FLIP CARD ── */
.flip-card {
  perspective: 1000px;
  height: 340px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  border-radius: 20px;
}

/* Al activar .is-flipped el inner rota 180° → la cara trasera (pre-rotada otros 180°)
   suma 360° total y el texto queda al derecho */
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

/* Ambas caras: absolutas, misma posición, backface oculta */
.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.15rem 1.2rem;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* CARA FRONTAL */
.flip-card-front {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.85);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* backdrop-filter eliminado: rompe preserve-3d y backface-visibility */
  transition: border-color 0.22s, box-shadow 0.22s;
}

/* Hover solo cuando no está girada */
.flip-card:not(.is-flipped):hover {
  transform: translateY(-3px);
  transition: transform 0.22s ease;
}
.flip-card:not(.is-flipped):hover .flip-card-front {
  border-color: color-mix(in srgb, var(--blue) 30%, transparent);
  box-shadow: 0 8px 28px rgba(11,19,43,0.10), 0 0 22px color-mix(in srgb, var(--blue) 9%, transparent);
}

/* ── Encabezado de la cara frontal: icono + categoría ── */
.flip-front-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.flip-front-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(59,130,246,0.07);
  border: 1px solid rgba(99,102,241,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s, border-color 0.22s;
}

.flip-card:not(.is-flipped):hover .flip-front-icon-wrap {
  background: rgba(59,130,246,0.13);
  border-color: rgba(99,102,241,0.32);
}

.dark-base .flip-front-icon-wrap {
  background: rgba(59,130,246,0.11);
  border-color: rgba(99,102,241,0.28);
}

.flip-front-sector {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--blue);
}

.flip-front-q {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.42;
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}

.flip-front-hint {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.flip-front-hint span {
  font-size: 0.80rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--blue) 0%, #6366F1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Icono con anillos de eco expansivos ── */
.flip-front-hint-icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flip-front-hint-icon::before,
.flip-front-hint-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(59,130,246,0.55);
  animation: hint-ripple 2.2s ease-out infinite;
}

.flip-front-hint-icon::after { animation-delay: 0.9s; }

@keyframes hint-ripple {
  0%   { transform: scale(0.65); opacity: 0.85; }
  80%  { opacity: 0.15; }
  100% { transform: scale(2.5); opacity: 0; }
}

.dark-base .flip-card-front { background: rgba(12,22,42,0.95); border-color: rgba(148,163,184,0.10); }
.dark-base .flip-front-q { color: #E2E8F0; }
.dark-base .flip-front-hint-icon::before,
.dark-base .flip-front-hint-icon::after { border-color: rgba(96,165,250,0.50); }

/* CARA TRASERA */
.flip-card-back {
  background: linear-gradient(145deg, #1A3360 0%, #0F2248 55%, #091830 100%);
  color: #fff;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

.flip-back-stars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.73rem;
  font-weight: 700;
}

.bq-stars { color: #FBBF24; letter-spacing: 1px; }

.flip-back-stars .bq-rating { color: rgba(203,213,225,0.65); font-weight: 400; }

.flip-back-ciencia-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 50px;
  padding: 0.32rem 0.72rem;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
  margin-top: 0.3rem;
}
.flip-back-ciencia-btn:hover {
  background: color-mix(in srgb, var(--blue) 32%, transparent);
  border-color: color-mix(in srgb, var(--blue) 55%, transparent);
}

.flip-back-sinopsis {
  font-size: 0.74rem;
  color: rgba(203,213,225,0.80);
  line-height: 1.60;
  flex-grow: 1;
  overflow: hidden;
}

/* ── MODAL CIENCIA ── */
.bq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.bq-modal-overlay[hidden] { display: none; }

.bq-modal-card {
  background: linear-gradient(145deg, #1A3360 0%, #0F2248 55%, #091830 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 16px;
  padding: 1.6rem 1.5rem 1.4rem;
  max-width: 420px;
  width: 100%;
  position: relative;
  color: #fff;
  animation: bq-modal-in 0.22s ease;
}
@keyframes bq-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.bq-modal-close {
  position: absolute;
  top: 0.7rem; right: 0.85rem;
  background: none;
  border: none;
  color: rgba(147,197,253,0.55);
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  transition: color 0.15s;
  font-family: inherit;
}
.bq-modal-close:hover { color: #fff; }

.bq-modal-science-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--blue);
  margin-bottom: 0.85rem;
}

.bq-modal-ciencia-text {
  font-size: 0.81rem;
  color: rgba(186,220,255,0.90);
  line-height: 1.68;
  padding: 0.75rem 0.9rem;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: 0 6px 6px 0;
  margin: 0;
}

.flip-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.5rem;
  background: #FF9900;
  color: #111;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(255,153,0,0.35);
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
  flex-shrink: 0;
}

.flip-back-btn:hover { background: #FFAD33; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,153,0,0.45); }

.weekly-libro-block {
  margin: 1.4rem 0;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 12px;
}

.weekly-libro-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #64748b);
  margin-bottom: 0.6rem;
}

.weekly-libro-sinopsis { font-size: 0.88rem; line-height: 1.55; margin: 0 0 0.75rem; opacity: 0.9; }

/* ── Recompensa-misterio (quiz, hitos, toast de progreso) ── */
.mystery-unlock-block {
  margin: 1.2rem 0;
  padding: 1.2rem;
  text-align: center;
  background: radial-gradient(circle at 50% 0%, rgba(251,191,36,0.12), transparent 70%), rgba(255,255,255,0.04);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(251,191,36,0.10);
}

.mystery-unlock-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.6rem;
  background: linear-gradient(90deg, #D97706 0%, #FBBF24 18%, #FDE68A 38%, #FFFBEB 50%, #FDE68A 62%, #FBBF24 82%, #D97706 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: badge-shine 3.5s linear infinite;
}

.mystery-unlock-sinopsis { font-size: 0.86rem; line-height: 1.55; margin: 0 0 0.9rem; opacity: 0.92; }

.mystery-unlock-btn { margin: 0 auto; }

.mystery-unlock-valor { font-size: 0.74rem; color: rgba(147,197,253,0.75); margin: 0.6rem 0 0; }

/* ── Regalo de bienvenida (modal de preguntas + recompensa) ──
   Reutiliza la piel real de .concepto-modal-overlay/.concepto-modal-card
   (misma que Glosario, Por Intereses, etc.) para que respete tema claro/oscuro. ── */
.wg-modal-card { max-width: 420px; text-align: left; }
.wg-modal-card.wg-card-resizing {
  transition: height 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
  overflow: hidden;
}

.wg-step {
  transition: opacity 0.3s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.wg-step-leave { opacity: 0; transform: translateX(-18px); }
.wg-step-enter { opacity: 0; transform: translateX(18px); }

.wg-question {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 1.2rem;
}

.wg-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.wg-opt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  color: var(--navy);
  background: rgba(255,255,255,0.96);
  border: 1.5px solid color-mix(in srgb, var(--blue) 16%, transparent);
  box-shadow: 0 1px 4px rgba(11,19,43,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.16s, opacity 0.16s;
}
.wg-opt.wg-opt-selected {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-accent) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 30%, transparent);
  transform: translateY(-2px);
}
.wg-opt.wg-opt-selected .wg-opt-badge { background: rgba(255,255,255,0.25); color: #fff; }
.wg-opt.wg-opt-dim { opacity: 0.4; pointer-events: none; }
.dark-base .wg-opt {
  background: rgba(18,32,58,0.85);
  border-color: rgba(148,163,184,0.15);
  color: #E2E8F0;
}
.dark-base .wg-opt:hover,
.dark-base .wg-opt:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}
.wg-opt-badge {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  transition: background 0.18s, color 0.18s;
}
.wg-opt-label { flex: 1; }
.wg-opt:hover, .wg-opt:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 16%, transparent);
  transform: translateY(-2px);
}
.wg-opt:hover .wg-opt-badge, .wg-opt:focus-visible .wg-opt-badge {
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-accent) 100%);
  color: #fff;
}

.wg-step-intro { text-align: center; }

.wg-icon-badge {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-accent) 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 28%, transparent);
}
.wg-icon-badge svg { width: 18px; height: 18px; }
.wg-icon-badge-lg {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  margin: 0 auto 1rem;
}
.wg-icon-badge-lg svg { width: 28px; height: 28px; }

.wg-intro-title { font-size: 1.4rem; font-weight: 800; color: var(--navy); margin: 0 0 0.6rem; }
.wg-intro-text { font-size: 0.94rem; line-height: 1.55; color: var(--navy); opacity: 0.85; margin: 0 0 0.5rem; }
.wg-intro-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 1.4rem; }

.wg-step-final { text-align: center; }
.wg-step-final .wg-icon-badge-lg { margin: 0 auto 1rem; }

.wg-final-heading {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--navy);
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
}
.wg-final-heading::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-accent) 100%);
}

.wg-final-sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--navy);
  opacity: 0.85;
  margin: 0 0 1.1rem;
}

.wg-final-stats {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
}
.wg-final-stats strong { color: var(--blue); font-weight: 800; }

.wg-final-eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--blue);
  margin: 0 0 1rem;
}

.wg-cta { margin: 0.5rem auto 0; }

.wg-final-fineprint {
  font-size: 0.74rem;
  color: var(--text-muted);
  opacity: 0.75;
  margin: 0.7rem 0 0;
}

@media (max-width: 520px) {
  .wg-question { font-size: 0.98rem; }
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .bq-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

@media (max-width: 960px) {
  .bq-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (max-width: 720px) {
  .bq-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .flip-card { height: 420px !important; }
  .flip-front-q { font-size: 1.0rem; }
  .botiquin-section { padding: 3.5rem 1.4rem 4.5rem; }
  .bq-search-input { font-size: 0.82rem; }

  /* Gap entre "¿Qué dice la ciencia?" y "Ver en Amazon", solo móvil.
     flex-grow:0 en sinopsis deja libre el espacio; margin-top:auto en
     flip-back-btn lo absorbería todo. Anclar con valor fijo. */
  .flip-back-ciencia-btn { margin-top: 0; }

  /* Compactar ambas caras, reducir aire vertical */
  .flip-card-front,
  .flip-card-back      { padding: 1rem 1.1rem; }
  .card-icon-container { height: 44px; }
  .flip-front-q        { padding: 0.15rem 0; }
}

@media (max-width: 460px) {
  .bq-grid { grid-template-columns: 1fr; }
  .flip-card { height: 380px !important; }
  .bq-tab { font-size: 0.76rem; gap: 0.25rem; padding: 0.45rem 0.85rem; }
  .bq-tab svg { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SISTEMA DE FAVORITOS
══════════════════════════════════════════════════════════════ */

/* position:relative permanente para el botón absoluto */
.doc-card   { position: relative; }

/* Botón de corazón base */
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s, background 0.18s, transform 0.15s;
  flex-shrink: 0;
}

.fav-btn:hover { color: var(--blue); background: color-mix(in srgb, var(--blue) 9%, transparent); }

.fav-btn.active { color: var(--blue-accent); }
.fav-btn.active:hover { color: var(--blue-accent); transform: scale(1.18); background: color-mix(in srgb, var(--blue-accent) 8%, transparent); }

/* Posicionamiento en artículos (semana + biblioteca, dentro de week-label) */
.fav-btn--article {
  margin-left: auto;
  flex-shrink: 0;
}

/* Posicionamiento en tarjetas de semanas anteriores */
.fav-btn--prev-card {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

/* Posicionamiento en tarjetas de biblioteca (grid) */
.fav-btn--lib-card {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
}

/* Posicionamiento en doc cards */
.fav-btn--doc {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

/* Posicionamiento en efecto cards */
.fav-btn--efecto {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

.dark-base .fav-btn:hover { color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.dark-base .fav-btn.active { color: var(--blue-hover); }

/* ── BOTÓN COMPARTIR EN MODAL ── */
.efecto-share-btn {
  position: absolute;
  top: 1rem;
  right: 3.4rem;
  width: 30px;
  height: 30px;
  background: rgba(148,163,184,0.12);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-body);
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.efecto-share-btn:hover {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}

.dark-base .efecto-share-btn:hover { background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--blue); }

.share-tooltip {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #FFFFFF;
  font-size: 0.70rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 10;
  font-family: inherit;
}

.dark-base .share-tooltip { background: #E2E8F0; color: #07101E; }

.share-tooltip.visible { opacity: 1; }

.share-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: var(--navy);
}

.dark-base .share-tooltip::before { border-bottom-color: #E2E8F0; }

/* ── SECCIÓN TUS FAVORITOS ── */
.favoritos-section { margin-bottom: 2.5rem; }

.favoritos-section .seccion-header h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.favoritos-section .seccion-header h2 svg { color: var(--blue-accent); flex-shrink: 0; }

.favoritos-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--text-body) 22%, transparent);
  color: var(--text-body);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s, color 0.18s;
  font-family: inherit;
}
.favoritos-share-btn:hover { border-color: var(--blue); color: var(--blue); }
.dark-base .favoritos-share-btn { border-color: color-mix(in srgb, #ffffff 20%, transparent); color: #C8D2E0; }
.dark-base .favoritos-share-btn:hover { border-color: var(--blue); color: var(--blue); }

.coleccion-shared-banner {
  margin-bottom: 2rem;
  padding: 1.2rem 1.4rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
}

.coleccion-shared-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.coleccion-shared-head h2 { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 0.2rem; }
.coleccion-shared-head p { font-size: 0.82rem; color: var(--text-body); margin: 0; }

.coleccion-shared-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--text-body);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 8px;
  flex-shrink: 0;
}
.coleccion-shared-close:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); color: var(--blue); }

.coleccion-shared-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1rem;
}

.coleccion-shared-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(37,99,235,0.12);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.coleccion-shared-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(37,99,235,0.1); }
.coleccion-shared-card strong { font-size: 0.86rem; color: var(--navy); line-height: 1.35; }

.coleccion-shared-save {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.coleccion-shared-save:hover { background: #1D4ED8; }

.dark-base .coleccion-shared-banner { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 24%, transparent); }
.dark-base .coleccion-shared-head h2 { color: #E7ECF5; }
.dark-base .coleccion-shared-card { background: rgba(255,255,255,0.04); border-color: rgba(148,163,184,0.14); }
.dark-base .coleccion-shared-card strong { color: #E7ECF5; }

@media (max-width: 680px) {
  .coleccion-shared-grid { grid-template-columns: 1fr; }
  .coleccion-shared-head { flex-wrap: wrap; }
}

.favoritos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.1rem;
}

.fav-item-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}

.fav-item-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--blue-accent) 32%, transparent);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--blue-accent) 8%, transparent);
}

.dark-base .fav-item-card { background: rgba(12,22,42,0.92); }

.fav-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.fav-item-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
}

.fav-item-sub {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.fav-item-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 1rem;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  margin-top: 0.15rem;
  cursor: pointer;
  border: none;
  background: var(--blue);
  color: #FFFFFF;
  transition: background 0.18s, transform 0.15s;
}

.fav-item-cta:hover { background: var(--blue-hover); transform: translateY(-1px); }

button.fav-item-cta {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid color-mix(in srgb, var(--blue) 30%, transparent);
}

button.fav-item-cta:hover {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  border-color: color-mix(in srgb, var(--blue) 50%, transparent);
  transform: translateY(-1px);
}

.dark-base button.fav-item-cta { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 28%, transparent); }
.dark-base button.fav-item-cta:hover { background: color-mix(in srgb, var(--blue) 8%, transparent); border-color: color-mix(in srgb, var(--blue) 48%, transparent); }

.favoritos-empty {
  background: transparent;
  border: 1px dashed rgba(148,163,184,0.15);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  text-align: center;
}
.favoritos-empty p {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(100,116,139,0.45);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.dark-base .favoritos-empty { border-color: rgba(148,163,184,0.1); }
.dark-base .favoritos-empty p { color: rgba(148,163,184,0.35); }

@media (max-width: 680px) {
  .favoritos-grid { grid-template-columns: 1fr; }
  .fav-btn--doc   { top: 0.75rem; right: 0.75rem; }
}

.dark-base .docs-layout.sk-init .doc-card::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--blue) 5%, transparent) 0%,
    color-mix(in srgb, var(--blue) 13%, transparent) 45%,
    color-mix(in srgb, var(--blue) 5%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   LECTURAS STRIP, chips entre hero y dashboard
══════════════════════════════════════════════════════════════ */
.lstrip-section {
  padding: 2.2rem 2rem 2.8rem;
  border-bottom: 1px solid rgba(37,99,235,0.08);
  background: rgba(11,19,43,0.028);
}

.lstrip-inner { max-width: 1260px; margin: 0 auto; }

.lstrip-header {
  text-align: center;
  margin-bottom: 1.6rem;
}

.lstrip-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--blue);
  margin-bottom: 0.45rem;
  opacity: 0.85;
}

.lstrip-header h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.4px;
  margin-bottom: 0.3rem;
}

.lstrip-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lstrip-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}

.lstrip-chip {
  padding: 0.52rem 1.05rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
  background: rgba(255,255,255,0.88);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lstrip-chip:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  color: var(--navy);
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--blue) 10%, transparent);
}

.lstrip-chip.active {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--blue) 30%, transparent);
  transform: translateY(-1px);
}

/* Panel de libro */
.lstrip-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.35s;
  opacity: 0;
}

.lstrip-panel.open {
  max-height: 500px;
  opacity: 1;
}

.lstrip-book {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 680px;
  margin: 0 auto;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 1.8rem;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: lstrip-in 0.32s cubic-bezier(0.25,0.46,0.45,0.94);
}

@keyframes lstrip-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lstrip-cover-wrap { flex-shrink: 0; width: 95px; }

.lstrip-cover {
  width: 100%;
  height: auto;
  max-height: 145px;
  object-fit: cover;
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(11,19,43,0.18);
  display: block;
}

.lstrip-cover-placeholder {
  width: 95px;
  height: 135px;
  border-radius: 7px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, var(--blue-accent) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.60rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem;
  line-height: 1.4;
}

.lstrip-book-info { flex: 1; min-width: 0; }

.lstrip-book-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 0.22rem;
}

.lstrip-book-author {
  font-size: 0.80rem;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
  font-weight: 500;
}

.lstrip-stars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

.lstrip-stars-val { color: #FBBF24; font-size: 0.88rem; letter-spacing: 1px; }
.lstrip-stars-num { font-size: 0.71rem; color: var(--text-muted); }

.lstrip-sinopsis {
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.72;
  margin-bottom: 1.1rem;
}

.lstrip-amazon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.58rem 1.15rem;
  background: #FF9900;
  color: #111;
  border-radius: 9px;
  text-decoration: none;
  font-size: 0.81rem;
  font-weight: 800;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
  flex-shrink: 0;
}

.lstrip-amazon-btn:hover { background: #FFAD33; transform: translateY(-1px); }

/* Dark mode */
.dark-base .lstrip-section {
  background: rgba(7,16,30,0.40);
  border-color: rgba(148,163,184,0.08);
}
.dark-base .lstrip-chip {
  background: rgba(12,22,42,0.80);
  border-color: color-mix(in srgb, var(--blue) 16%, transparent);
  color: #8B9EB8;
}
.dark-base .lstrip-chip:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  color: #E2E8F0;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
}
.dark-base .lstrip-chip.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #07101E;
}
.dark-base .lstrip-book {
  background: rgba(12,22,42,0.96);
  border-color: rgba(148,163,184,0.10);
}
.dark-base .lstrip-book-title { color: #E2E8F0; }

@media (max-width: 680px) {
  .lstrip-section { padding: 1.2rem 1rem 1.4rem; }
  .lstrip-book { flex-direction: column; gap: 0.8rem; padding: 1rem; }
  .lstrip-cover-wrap { width: 64px; }
  .lstrip-panel.open { max-height: 700px; }
}

.flip-back-titulo { display: block; font-size: 0.85rem; color: #F1F5F9; }
.flip-back-autor { display: block; font-size: 0.72rem; color: rgba(203,213,225,0.65); margin: 0.05rem 0 0.4rem; }

.flip-card-back-top {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin-bottom: 0.4rem;
  flex-shrink: 0;
}

.flip-card-back-meta { flex: 1; min-width: 0; }

/* Badge de social proof, sello tipo medalla con texto reluciente */
.flip-back-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  align-self: flex-start;
  background: rgba(251,191,36,0.10);
  border: 1px solid rgba(251,191,36,0.35);
  border-radius: 20px;
  padding: 0.20rem 0.55rem 0.20rem 0.32rem;
  margin-bottom: 0.35rem;
  box-shadow: 0 0 10px rgba(251,191,36,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.flip-back-badge-star {
  flex-shrink: 0;
  color: #FBBF24;
  animation: badge-star-pulse 3s ease-in-out infinite;
}
@keyframes badge-star-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(251,191,36,0.45)); opacity: 0.85; }
  50%       { filter: drop-shadow(0 0 5px rgba(251,191,36,0.95)); opacity: 1; }
}
.flip-back-badge-text {
  font-size: 0.57rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  background: linear-gradient(
    90deg,
    #D97706 0%,
    #FBBF24 18%,
    #FDE68A 38%,
    #FFFBEB 50%,
    #FDE68A 62%,
    #FBBF24 82%,
    #D97706 100%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: badge-shine 3.5s linear infinite;
}
@keyframes badge-shine {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.flip-back-badge[hidden] { display: none; }

/* Acciones (Audible + otra recomendación) */
.flip-back-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex-shrink: 0;
}

/* Botón "No me convence, otro" */
.flip-back-otro-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 9px;
  padding: 0.42rem 0.9rem;
  font-size: 0.71rem;
  font-weight: 600;
  color: rgba(203,213,225,0.60);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.18s, color 0.18s;
}
.flip-back-otro-btn:hover {
  border-color: rgba(148,163,184,0.45);
  color: rgba(203,213,225,0.90);
}

/* ══════════════════════════════════════════════════════════════
   MECANISMO BOX, ¿por qué ocurre? en modal de efectos
══════════════════════════════════════════════════════════════ */
.mecanismo-box {
  background: color-mix(in srgb, var(--blue-accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue-accent) 18%, transparent);
  border-left: 3px solid #00D4CC;
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.3rem;
}

.mecanismo-box-label {
  font-size: 0.69rem;
  font-weight: 700;
  color: #00B5B0;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mecanismo-box p {
  font-size: 0.81rem;
  color: var(--text-body);
  line-height: 1.68;
  margin: 0;
}

.dark-base .mecanismo-box {
  background: color-mix(in srgb, var(--blue-accent) 3%, transparent);
  border-color: color-mix(in srgb, var(--blue-accent) 12%, transparent);
  border-left-color: var(--blue-accent);
}
.dark-base .mecanismo-box-label { color: var(--blue-hover); }

/* ══════════════════════════════════════════════════════════════
   PROPÓN UN TEMA
══════════════════════════════════════════════════════════════ */
.propuestas-section {
  padding: 5rem 2rem 5.5rem;
  border-top: 1px solid rgba(148,163,184,0.12);
}

.propuestas-inner { max-width: 1260px; margin: 0 auto; }

/* ── Newsletter ── */
.newsletter-section {
  padding: 4.5rem 2rem 5rem;
  border-top: 1px solid rgba(148,163,184,0.12);
  text-align: center;
}

.newsletter-inner { max-width: 1260px; margin: 0 auto; }

.newsletter-section .botiquin-heading { margin-bottom: 1.6rem; }

.newsletter-cta {
  display: inline-block;
  text-decoration: none;
  padding: 0.92rem 2rem;
}

.propuestas-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 0.5rem;
}

.prop-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  position: relative;
}

.prop-label {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--navy);
}

.prop-optional { font-weight: 400; color: var(--text-muted); }

.prop-textarea, .prop-input {
  padding: 0.82rem 1.1rem;
  border: 1.5px solid rgba(148,163,184,0.25);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--navy);
  background: var(--white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
  line-height: 1.6;
}

.prop-textarea:focus, .prop-input:focus {
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 7%, transparent);
}

.prop-chars {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: right;
  position: absolute;
  bottom: 0.55rem;
  right: 0.8rem;
  pointer-events: none;
}

.prop-field-row {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.8rem;
  margin-bottom: 0;
}

.prop-field-half {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.prop-btn {
  padding: 0.82rem 1.3rem;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.prop-btn:hover { background: var(--blue-hover); transform: translateY(-1px); }

.propuestas-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.propuestas-feed-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
}

.prop-counter {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
}

.propuestas-feed {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.prop-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: prop-in 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}

@keyframes prop-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.prop-card-texto {
  font-size: 0.85rem;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 0.4rem;
  font-weight: 500;
  font-style: italic;
}

.prop-card-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.prop-empty {
  border: 1.5px dashed rgba(148,163,184,0.22);
  border-radius: 14px;
}

.dark-base .prop-textarea,
.dark-base .prop-input {
  background: rgba(20,36,66,0.97);
  color: #E2E8F0;
  border-color: rgba(148,163,184,0.15);
}
.dark-base .prop-card { background: rgba(12,22,42,0.92); }
.dark-base .prop-card-texto { color: #C4D0E3; }
.dark-base .propuestas-feed-title { color: #E2E8F0; }
.dark-base .prop-label { color: #C4D0E3; }

@media (max-width: 900px) {
  .propuestas-layout { grid-template-columns: 1fr; gap: 2rem; }
  .propuestas-feed { max-height: 280px; }
}

@media (max-width: 680px) {
  .propuestas-section { padding: 1.8rem 1rem 2rem; }
  .newsletter-section { padding: 2.4rem 1rem 2.6rem; }
  .prop-field-row { flex-direction: column; align-items: stretch; }
  .prop-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   ACORDEONES PREMIUM, Lista de Efectos
══════════════════════════════════════════════════════════════ */

/* ── Base compartida ── */
.accordion-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 100%);
  border: 1.5px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-left: 3px solid var(--blue);
  border-radius: 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
}

.accordion-toggle-btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 11%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 7%, transparent) 100%);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--blue) 9%, transparent);
}

.accordion-toggle-btn[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion-btn-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
}

.accordion-btn-title {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.15px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accordion-btn-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.accordion-chevron {
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  color: var(--text-muted);
}

.accordion-toggle-btn[aria-expanded="true"] .accordion-chevron {
  transform: rotate(180deg);
}

/* ── Contenido colapsable base ── */
.accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 1rem;
  border: 1.5px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: rgba(247,249,255,0.60);
  will-change: max-height, opacity;
  transition:
    max-height 0.32s ease-out,
    opacity    0.22s ease;
}

.accordion-content.is-open {
  max-height: 900px;
  opacity: 1;
  padding: 1rem;
}

.accordion-inner-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148,163,184,0.14);
}

/* ── Dark mode ── */
.dark-base .accordion-toggle-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent) 0%, color-mix(in srgb, var(--blue-hover) 4%, transparent) 100%);
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
  border-left-color: var(--blue);
  color: #C4D0E3;
}

.dark-base .accordion-toggle-btn:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, transparent) 0%, color-mix(in srgb, var(--blue-hover) 7%, transparent) 100%);
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}

.dark-base .accordion-content {
  background: rgba(8,16,34,0.55);
  border-color: color-mix(in srgb, var(--blue) 16%, transparent);
}

.dark-base .accordion-inner-desc {
  color: #7A90AA;
  border-bottom-color: rgba(148,163,184,0.10);
}

/* ══════════════════════════════════════════════════════════════
   RESEARCH TOGGLE
══════════════════════════════════════════════════════════════ */
.research-toggle-wrap {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 1.2rem;
}

.research-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.52rem 1.1rem;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.research-toggle-btn:hover {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}

.research-toggle-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.research-toggle-btn[aria-expanded="true"] .research-toggle-chevron {
  transform: rotate(180deg);
}

.dark-base .research-toggle-btn { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 22%, transparent); }
.dark-base .research-toggle-btn:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); border-color: color-mix(in srgb, var(--blue) 42%, transparent); }

/* Ajuste: la research section sin padding arriba cuando se muestra inline */
#research-section {
  border-top: none;
  padding: 0;           /* comprimido: sin espacio */
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.42s ease,
    padding    0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

#research-section.is-open {
  max-height: 600px;    /* suficiente para todos los breakpoints */
  opacity: 1;
  padding-bottom: 3rem;
}

#research-section .research-inner { padding-top: 0; }

/* ── Efectos "Ver más" ── */
#efectos-extra { display: flex; flex-direction: column; gap: 0.45rem; }
#efectos-extra[hidden] { display: none; }

.efectos-ver-mas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.52rem 0.9rem;
  background: transparent;
  border: 1.5px solid rgba(148,163,184,0.22);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.efectos-ver-mas:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

.efectos-ver-mas svg { transition: transform 0.25s ease; }
.efectos-ver-mas[aria-expanded="true"] svg { transform: rotate(180deg); }

.dark-base .efectos-ver-mas { border-color: rgba(148,163,184,0.12); }
.dark-base .efectos-ver-mas:hover { border-color: color-mix(in srgb, var(--blue) 35%, transparent); color: var(--blue); }

/* ══════════════════════════════════════════════════════════════
   FILTER PILLS, búsqueda por categoría en Fuera de Bata
══════════════════════════════════════════════════════════════ */
#filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   PROGRESS TRACKER, gamificación por localStorage
══════════════════════════════════════════════════════════════ */
.progress-tracker {
  margin-bottom: 1.2rem;
  padding: 0.9rem 1rem;
  background: rgba(248,251,255,0.99);
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: 0 2px 14px rgba(11,19,43,0.07), inset 0 1px 0 rgba(255,255,255,0.85);
}

.pt-header {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.70rem;
  font-weight: 800;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 0.55px;
}

.pt-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pt-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  flex: 1;
}

.pt-stat-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pt-bar-wrap {
  width: 72px;
  height: 5px;
  background: rgba(148,163,184,0.18);
  border-radius: 99px;
  overflow: hidden;
}

.pt-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
  border-radius: 99px;
  transition: width 0.65s cubic-bezier(0.4,0,0.2,1);
}

.pt-nivel-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
}

.pt-nivel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pt-nivel-id {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.pt-nivel-badge {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.pt-nivel-nombre {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--navy);
}

.pt-nivel-xp-restante {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.pt-nivel-bar-wrap { width: 100%; height: 6px; position: relative; overflow: visible; }

.pt-nivel-xp-actual {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 600;
  text-align: right;
  margin-top: 0.55rem;
}

.dark-base .pt-nivel-block { border-bottom-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.dark-base .pt-nivel-nombre { color: #E2E8F0; }
.dark-base .pt-nivel-xp-actual { color: #94A3B8; }

.pt-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--navy);
  min-width: 2.4rem;
  text-align: right;
}

.pt-reward-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
}
.pt-reward-block[hidden] { display: none; }

.pt-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pt-reward-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  flex: 1;
}

.pt-reward-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
}

.pt-reward-segments {
  display: flex;
  gap: 4px;
  width: 100%;
}

.pt-reward-segment {
  flex: 1;
  height: 5px;
  background: rgba(148,163,184,0.18);
  border-radius: 99px;
  overflow: hidden;
}

.pt-reward-segment.is-filled {
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
}

.dark-base .pt-reward-block { border-bottom-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.dark-base .pt-reward-count { color: #E2E8F0; }

/* ── Recompensa lista para reclamar (sustituye la barra al llegar a 6) ── */
.pt-reward-claim {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.5rem;
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 32%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 9%, transparent) 100%);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.pt-reward-claim[hidden] { display: none; }
.pt-reward-claim:hover {
  transform: translateY(-2px);
  border-color: var(--blue);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--blue) 20%, transparent);
}

.pt-reward-claim-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-accent) 100%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--blue) 28%, transparent);
  animation: pt-reward-claim-pulse 2.4s ease-in-out infinite;
}
.pt-reward-claim-icon svg { width: 17px; height: 17px; }

@keyframes pt-reward-claim-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.pt-reward-claim-copy { display: flex; flex-direction: column; gap: 0.15rem; }
.pt-reward-claim-title { font-size: 0.84rem; font-weight: 800; color: var(--navy); }
.pt-reward-claim-sub { font-size: 0.74rem; color: var(--navy); opacity: 0.75; }

.pt-reward-claim--claimed {
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
}
.pt-reward-claim--claimed .pt-reward-claim-icon { animation: none; box-shadow: none; opacity: 0.75; }

.dark-base .progress-tracker {
  background: rgba(9,17,33,0.60);
  border-color: color-mix(in srgb, var(--blue) 12%, transparent);
}
.dark-base .pt-count { color: #E2E8F0; }

/* ══════════════════════════════════════════════════════════════
   SHARE BUTTON EN DOC-CARDS
══════════════════════════════════════════════════════════════ */
.doc-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.38rem 0.75rem;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid rgba(148,163,184,0.22);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.doc-share-btn:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}

.doc-share-btn.copied {
  border-color: #10b981;
  color: #10b981;
  background: rgba(16,185,129,0.06);
}

.dark-base .doc-share-btn { border-color: rgba(148,163,184,0.15); color: #64748B; }
.dark-base .doc-share-btn:hover { border-color: color-mix(in srgb, var(--blue) 35%, transparent); color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent); }

/* ── Compartir artículo semanal / biblioteca ── */
.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.8rem;
  border-radius: 8px;
  background: transparent;
  border: 1.5px solid rgba(148,163,184,0.22);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}
.article-share-btn:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 5%, transparent);
}
.dark-base .article-share-btn { border-color: rgba(148,163,184,0.15); color: #8899B2; }
.dark-base .article-share-btn:hover { border-color: color-mix(in srgb, var(--blue) 35%, transparent); color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent); }

/* ══════════════════════════════════════════════════════════════
   TIMELINE, hitos de la psicología
══════════════════════════════════════════════════════════════ */
.timeline-section {
  padding: 5rem 2rem 5.5rem;
  background: rgba(11,19,43,0.02);
  border-top: 1px solid rgba(148,163,184,0.12);
  overflow: hidden;
}
.timeline-inner { max-width: 1260px; margin: 0 auto; }

/* Track: scroll horizontal, sin posición relativa (la línea va en cada ítem) */
.timeline-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.25rem 1.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 20%, transparent) transparent;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  user-select: none;
}
.timeline-track:active { cursor: grabbing; }
.timeline-track::-webkit-scrollbar { height: 4px; }
.timeline-track::-webkit-scrollbar-track { background: transparent; }
.timeline-track::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blue) 20%, transparent); border-radius: 2px; }

/* ── Scroll interno de paneles y modales desplegables ── */
.info-modal-card,
.efecto-modal-card,
.concepto-modal-card,
.glosario-body,
.fav-nav-panel,
.wpd-list,
.buscador-results,
.srp-panel,
.propuestas-feed,
.progress-tracker {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 25%, transparent) transparent;
}
.info-modal-card::-webkit-scrollbar,
.efecto-modal-card::-webkit-scrollbar,
.concepto-modal-card::-webkit-scrollbar,
.glosario-body::-webkit-scrollbar,
.fav-nav-panel::-webkit-scrollbar,
.wpd-list::-webkit-scrollbar,
.buscador-results::-webkit-scrollbar,
.srp-panel::-webkit-scrollbar,
.propuestas-feed::-webkit-scrollbar,
.progress-tracker::-webkit-scrollbar {
  width: 6px;
}
.info-modal-card::-webkit-scrollbar-track,
.efecto-modal-card::-webkit-scrollbar-track,
.concepto-modal-card::-webkit-scrollbar-track,
.glosario-body::-webkit-scrollbar-track,
.fav-nav-panel::-webkit-scrollbar-track,
.wpd-list::-webkit-scrollbar-track,
.buscador-results::-webkit-scrollbar-track,
.srp-panel::-webkit-scrollbar-track,
.propuestas-feed::-webkit-scrollbar-track,
.progress-tracker::-webkit-scrollbar-track {
  background: transparent;
}
.info-modal-card::-webkit-scrollbar-thumb,
.efecto-modal-card::-webkit-scrollbar-thumb,
.concepto-modal-card::-webkit-scrollbar-thumb,
.glosario-body::-webkit-scrollbar-thumb,
.fav-nav-panel::-webkit-scrollbar-thumb,
.wpd-list::-webkit-scrollbar-thumb,
.buscador-results::-webkit-scrollbar-thumb,
.srp-panel::-webkit-scrollbar-thumb,
.propuestas-feed::-webkit-scrollbar-thumb,
.progress-tracker::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 999px;
}
.info-modal-card::-webkit-scrollbar-thumb:hover,
.efecto-modal-card::-webkit-scrollbar-thumb:hover,
.concepto-modal-card::-webkit-scrollbar-thumb:hover,
.glosario-body::-webkit-scrollbar-thumb:hover,
.fav-nav-panel::-webkit-scrollbar-thumb:hover,
.wpd-list::-webkit-scrollbar-thumb:hover,
.buscador-results::-webkit-scrollbar-thumb:hover,
.srp-panel::-webkit-scrollbar-thumb:hover,
.propuestas-feed::-webkit-scrollbar-thumb:hover,
.progress-tracker::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--blue) 40%, transparent);
}

.onboarding-card {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 25%, transparent) transparent;
}
.onboarding-card::-webkit-scrollbar { width: 6px; }
.onboarding-card::-webkit-scrollbar-track { background: transparent; }
.onboarding-card::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 999px;
}
.onboarding-card::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--blue) 40%, transparent);
}
.dark-base .onboarding-card {
  scrollbar-color: color-mix(in srgb, var(--blue-accent) 30%, transparent) transparent;
}
.dark-base .onboarding-card::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue-accent) 30%, transparent);
}

/* Cada ítem genera su propio segmento de línea → línea continua que scrollea */
.tl-item {
  flex: 0 0 auto;
  width: 200px;
  padding: 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
}
.tl-item::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0; right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  pointer-events: none;
  z-index: 0;
}
.tl-item:first-child::before {
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--blue) 22%, transparent) 35%);
}
.tl-item:last-child::before {
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 22%, transparent) 65%, transparent 100%);
}

/* Nodo: punto + año + autor/lugar */
.tl-node {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blue);
  border: 2.5px solid #F7F9FF;
  box-shadow: 0 0 0 2px var(--blue);
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tl-item:hover .tl-dot,
.tl-item.active .tl-dot {
  transform: scale(1.4);
  box-shadow: 0 0 0 3px var(--blue), 0 0 10px color-mix(in srgb, var(--blue) 30%, transparent);
}

.tl-node-meta { display: flex; flex-direction: column; gap: 0.08rem; }

.tl-year {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.tl-tag {
  font-size: 0.60rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Tarjeta compacta */
.tl-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0.8rem 0.85rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tl-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 35%, transparent); box-shadow: 0 6px 20px color-mix(in srgb, var(--blue) 10%, transparent); }
.tl-item.active .tl-card { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 50%, transparent); box-shadow: 0 6px 24px color-mix(in srgb, var(--blue) 14%, transparent); }

.tl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.tl-cat-badge {
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.tl-cat-cognitivo  { background: rgba(99,102,241,0.12); color: #4338CA; }
.tl-cat-conductual { background: rgba(245,158,11,0.12); color: #B45309; }
.tl-cat-social     { background: rgba(16,185,129,0.12); color: #047857; }
.tl-cat-neuro      { background: rgba(236,72,153,0.12); color: #BE185D; }
.tl-cat-clinico    { background: rgba(239,68,68,0.12);  color: #B91C1C; }
.tl-cat-humanista  { background: color-mix(in srgb, var(--blue) 12%, transparent); color: #0369A1; }

.tl-titulo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
}

.tl-mystery-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 800;
  margin-top: 0.5rem;
  color: #B45309;
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
}
.dark-base .tl-mystery-chip { color: #FBBF24; background: rgba(251,191,36,0.10); }

/* Panel de detalle: aparece bajo el track al hacer clic */
.tl-detail {
  margin-top: 1.5rem;
  background: rgba(255,255,255,0.92);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 16px;
  padding: 1.5rem 1.75rem 1.5rem 1.6rem;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tl-fade-in 0.22s ease;
}
@keyframes tl-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tl-detail-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.3rem;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.18s;
}
.tl-detail-close:hover { color: var(--navy); }
.tl-detail-meta { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.55rem; }
.tl-detail-year { font-size: 1.55rem; font-weight: 800; color: var(--blue); letter-spacing: -0.5px; }
.tl-detail-tag  { font-size: 0.70rem; color: var(--text-muted); }
h3.tl-detail-titulo { font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: 0.65rem; }
.tl-detail-desc { font-size: 0.84rem; color: var(--text-body); line-height: 1.72; margin-bottom: 1rem; }
.tl-detail-importa {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 3%, transparent) 100%);
  border-left: 3px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 0 10px 10px 0;
  padding: 0.75rem 0.9rem;
}
.tl-importa-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
  margin-bottom: 0.4rem;
}
.tl-detail-importa p { font-size: 0.78rem; color: var(--text-body); line-height: 1.65; }

/* Dark mode */
.dark-base .tl-card { background: rgba(12,22,42,0.95); border-color: rgba(148,163,184,0.10); }
.dark-base .tl-dot { background: var(--blue); box-shadow: 0 0 0 2px var(--blue); border-color: #0f1c34; }
.dark-base .timeline-section { background: rgba(0,0,0,0.15); border-color: rgba(148,163,184,0.08); }
.dark-base .tl-item::before { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.dark-base .tl-item:first-child::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--blue) 18%, transparent) 35%); }
.dark-base .tl-item:last-child::before  { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 18%, transparent) 65%, transparent 100%); }
.dark-base .tl-year   { color: var(--blue); }
.dark-base .tl-tag    { color: #8899B2; }
.dark-base .tl-titulo { color: #E2E8F0; }
.dark-base .tl-detail { background: rgba(8,16,34,0.92); border-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.dark-base .tl-detail-year    { color: var(--blue); }
.dark-base h3.tl-detail-titulo { color: #E2E8F0; }
.dark-base .tl-detail-tag  { color: #8899B2; }
.dark-base .tl-detail-desc { color: #B0C4D8; }
.dark-base .tl-detail-importa { border-left-color: color-mix(in srgb, var(--blue) 30%, transparent); background: color-mix(in srgb, var(--blue) 5%, transparent); }
.dark-base .tl-importa-header { color: var(--blue); }
.dark-base .tl-detail-importa p { color: #B0C4D8; }

@media (max-width: 680px) {
  .timeline-section { padding: 1.8rem 1rem 2rem; }
  .tl-item { width: 168px; padding: 0 0.6rem; }
  .tl-titulo { font-size: 0.74rem; }
  .tl-detail { padding: 1.2rem 1.1rem; }
  h3.tl-detail-titulo { font-size: 0.92rem; }
  .tl-detail-desc { font-size: 0.78rem; }
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR IZQUIERDO: tarjetas Artículo de la Semana + Fuera de Bata
══════════════════════════════════════════════════════════════ */
.sidebar-weekly-card,
.sidebar-fdb-card {
  background: rgba(255,255,255,0.98);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 3px solid var(--blue);
  border-radius: 16px;
  padding: 1.1rem 1.1rem 1rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 18px color-mix(in srgb, var(--blue) 10%, transparent), 0 8px 32px rgba(11,19,43,0.07), inset 0 1px 0 rgba(255,255,255,0.85);
}

.sidebar-weekly-card:empty { display: none; }

.sidebar-weekly-card::before,
.sidebar-fdb-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-accent), transparent);
  border-radius: 16px 16px 0 0;
}

.sidebar-weekly-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.6rem;
  opacity: 0.85;
}

.sidebar-fdb-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--navy);
  margin-bottom: 0.65rem;
}

.sidebar-fdb-eyebrow svg { flex-shrink: 0; color: var(--blue); width: 15px; height: 15px; }

.sw-title {
  font-size: var(--sw-title-fs, 1.5rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.6px;
  line-height: 1.24;
  margin-bottom: 0.9rem;
  overflow-wrap: break-word;
  hyphens: auto;
}

.sw-subtitle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 1.1rem;
}

.sidebar-fdb-desc {
  font-size: 0.86rem;
  color: var(--text-body);
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.sw-read-btn,
.sidebar-fdb-btn {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  align-items: center;
  gap: 0.38rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  background: #FFFFFF;
  border: 1px solid #E8EEF4;
  box-shadow: 0 4px 12px rgba(11,19,43,0.10);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.18s, transform 0.2s;
}

.sw-read-btn:hover,
.sidebar-fdb-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(11,19,43,0.14);
  transform: translateY(-2px);
}

/* ── Dark mode ── */
.dark-base .sidebar-weekly-card,
.dark-base .sidebar-fdb-card {
  background: linear-gradient(135deg, rgba(11,19,43,0.92) 0%, rgba(15,32,68,0.92) 100%);
  border-color: color-mix(in srgb, var(--blue-accent) 18%, transparent);
  border-left-color: var(--blue-accent);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.dark-base .sidebar-weekly-card::before,
.dark-base .sidebar-fdb-card::before {
  background: linear-gradient(90deg, var(--blue-accent), var(--blue), transparent);
}

.dark-base .sidebar-weekly-eyebrow,
.dark-base .sidebar-fdb-eyebrow { color: var(--blue-hover); }
.dark-base .sw-title   { color: #E8F4FF; }
.dark-base .sw-subtitle { color: var(--blue-accent); }
.dark-base .sidebar-fdb-desc { color: rgba(196,208,227,0.88); }

.dark-base .sw-read-btn,
.dark-base .sidebar-fdb-btn {
  color: var(--blue-accent);
  background: #1E293B;
  border: 1px solid rgba(51,65,85,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.dark-base .sw-read-btn:hover,
.dark-base .sidebar-fdb-btn:hover {
  background: #263548;
  border-color: rgba(51,65,85,0.8);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   MODAL BASE, overlay con blur editorial (compartido por
   Por Intereses y Fuera de Bata)
══════════════════════════════════════════════════════════════ */
.concepto-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(11,19,43,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: cm-in 0.22s ease;
}

.concepto-modal-overlay[hidden] { display: none; }

.bata-lista-modal-overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes cm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.concepto-modal-card {
  position: relative;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, color-mix(in srgb, var(--blue-accent) 6%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 95% 100%, color-mix(in srgb, var(--blue) 5%, transparent) 0%, transparent 60%),
    #ffffff;
  border-radius: 24px;
  padding: 2.2rem 2rem 2rem;
  max-width: 540px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 24px 64px rgba(11,19,43,0.28),
    0 4px 16px color-mix(in srgb, var(--blue) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent);
  animation: cm-card-in 0.30s cubic-bezier(0.25,0.46,0.45,0.94);
}

@keyframes cm-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.concepto-modal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-accent) 60%, transparent 100%);
  border-radius: 24px 24px 0 0;
}

.concepto-modal-close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(148,163,184,0.14);
  border: 1px solid rgba(148,163,184,0.22);
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  z-index: 1010;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.concepto-modal-close:hover {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 28%, transparent);
}

.concepto-modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0.80;
  margin-bottom: 0.7rem;
}

/* ── Variante ancha del modal base (Por Intereses, Fuera de Bata) ── */
.efectos-lista-modal-card {
  max-width: 820px;
}

/* Artículo abierto dentro del modal de Por Intereses: el modal ya aporta el
   marco (fondo, borde, padding), así que la tarjeta interna pierde su propio
   recuadro para no duplicarlo y dejar que el texto use todo el ancho. */
.efectos-lista-modal-card .weekly-featured-card {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  margin-bottom: 0;
}

.biblioteca-modal-titulo {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1.1rem;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  padding-bottom: 0.7rem;
}

.biblioteca-modal-titulo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-accent) 0%, var(--blue) 100%);
}

@media (max-width: 600px) {
  .biblioteca-modal-titulo { font-size: 1.4rem; }
}

.efectos-lista-modal-titulo {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

/* ── Modal dark mode ── */
.dark-base .concepto-modal-overlay {
  background: rgba(3,6,18,0.65);
}

.dark-base .concepto-modal-card {
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, color-mix(in srgb, var(--blue-accent) 5%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 95% 100%, color-mix(in srgb, var(--blue) 6%, transparent) 0%, transparent 60%),
    #0b1428;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.65),
    0 4px 16px color-mix(in srgb, var(--blue-accent) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--blue-accent) 12%, transparent);
}

.dark-base .concepto-modal-card::before {
  background: linear-gradient(90deg, var(--blue-accent), var(--blue), transparent);
}

.dark-base .concepto-modal-close {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
  color: #7A90AA;
}

.dark-base .concepto-modal-close:hover {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
}

.dark-base .concepto-modal-eyebrow { color: var(--blue); }

/* ── Modal responsive ── */
@media (max-width: 600px) {
  .concepto-modal-card    { padding: 1.8rem 1.3rem 1.5rem; border-radius: 20px; }
  .concepto-modal-close   { width: 34px; height: 34px; top: 0.75rem; right: 0.75rem; }
  .wg-step-final          { padding-top: 0.6rem; }
  .wg-final-eyebrow       { margin-top: 1.6rem; }
}

/* ══════════════════════════════════════════════════════════════
   SORPRÉNDEME + CAT PROGRESS + CAT SELECTOR HEADER
══════════════════════════════════════════════════════════════ */
.cat-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
  gap: 0.5rem;
}

.cat-selector-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sorprendeme-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 1.1rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 72%, var(--blue-accent)) 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--blue) 30%, transparent);
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
}

.sorprendeme-btn:hover {
  background: linear-gradient(135deg, var(--blue-hover) 0%, color-mix(in srgb, var(--blue-hover) 72%, var(--blue-accent)) 100%);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--blue) 42%, transparent);
  transform: translateY(-1px);
}

.sorprendeme-btn.spinning svg {
  animation: spin-once 0.6s cubic-bezier(0.4,0,0.2,1);
}

@keyframes spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Progress bar inside cat-btn */
.cat-btn {
  position: relative;
  overflow: hidden;
}

.cat-pbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(148,163,184,0.15);
  border-radius: 0 0 10px 10px;
}

.cat-pbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--blue-accent));
  border-radius: 0 0 10px 10px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── Racha en progress tracker ── */
.pt-streak {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(148,163,184,0.14);
  font-size: 0.72rem;
}

.pt-streak svg { color: var(--text-muted); flex-shrink: 0; }

.pt-streak-label {
  color: var(--text-muted);
  flex: 1;
}

.pt-streak-value {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.75rem;
}

.pt-streak-value.streak-hot {
  color: #F97316;
}

.dark-base .pt-streak { border-top-color: rgba(148,163,184,0.10); }
.dark-base .pt-streak-value { color: #E2E8F0; }
.dark-base .pt-streak-value.streak-hot { color: #FB923C; }

/* ── Artículo relacionado ── */
.related-articles {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(148,163,184,0.18);
}

.related-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem;
}

.related-card {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  padding: 0.85rem;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.related-card:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--blue) 9%, transparent);
  transform: translateY(-1px);
}

.related-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  margin: 0.4rem 0 0.3rem;
}

.related-author {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.dark-base .related-card { background: rgba(9,17,33,0.55); border-color: rgba(148,163,184,0.12); }
.dark-base .related-card:hover { border-color: color-mix(in srgb, var(--blue) 35%, transparent); }
.dark-base .related-title { color: #C4D0E3; }


/* ══════════════════════════════════════════════════════════════
   MAPA DE CONCEPTOS
══════════════════════════════════════════════════════════════ */
.mapa-section {
  padding: 5rem 2rem 4rem;
  background: rgba(247,249,255,0.50);
  border-top: 1px solid rgba(148,163,184,0.12);
}

.mapa-inner { max-width: 1100px; margin: 0 auto; }

.mapa-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.mapa-ley {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.mapa-ley i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mapa-ley[data-cat="persona"] i { background: #7C3AED; }
.mapa-ley[data-cat="sesgo"]   i { background: #DC2626; }
.mapa-ley[data-cat="efecto"]  i { background: #0891B2; }
.mapa-ley[data-cat="teoria"]  i { background: #059669; }

.mapa-canvas-wrap {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(148,163,184,0.18);
  box-shadow: 0 4px 32px color-mix(in srgb, var(--blue) 7%, transparent);
  cursor: grab;
}

.mapa-canvas-wrap:active { cursor: grabbing; }
#mapa-canvas { display: block; width: 100%; }

/* Info panel */
.mapa-info-panel {
  position: relative;
  margin-top: 1.2rem;
  background: rgba(255,255,255,0.88);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 16px;
  padding: 1.2rem 1.3rem 1.2rem;
  backdrop-filter: blur(10px);
  animation: mapa-panel-in 0.22s ease;
}

@keyframes mapa-panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mapa-info-panel[hidden] { display: none; }

.mapa-info-close {
  position: absolute;
  top: 0.8rem; right: 0.9rem;
  background: transparent;
  border: none;
  font-size: 1rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
}

.mapa-info-close:hover { color: var(--navy); }

.mapa-info-cat {
  display: inline-block;
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 0.35rem;
}

.mapa-info-titulo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  padding-right: 1.5rem;
}

.mapa-info-desc {
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.mapa-info-conexiones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
}

.mapa-info-conx-label {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.mapa-info-chip {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.mapa-chip-persona { background: rgba(124,58,237,0.12); color: #6D28D9; }
.mapa-chip-sesgo   { background: rgba(220,38,38,0.12);  color: #B91C1C; }
.mapa-chip-efecto  { background: rgba(8,145,178,0.12);  color: #0E7490; }
.mapa-chip-teoria  { background: rgba(5,150,105,0.12);  color: #047857; }

/* Dark mode mapa */
.dark-base .mapa-section { background: rgba(5,10,22,0.50); border-color: rgba(148,163,184,0.08); }
.dark-base .mapa-canvas-wrap { background: rgba(8,16,34,0.80); border-color: color-mix(in srgb, var(--blue) 14%, transparent); }
.dark-base .mapa-info-panel { background: rgba(8,16,34,0.88); border-color: color-mix(in srgb, var(--blue) 18%, transparent); }
.dark-base .mapa-info-titulo { color: #E2E8F0; }
.dark-base .mapa-info-desc   { color: #B0C4D8; }
.dark-base .mapa-info-cat    { color: var(--blue); }
.dark-base .mapa-info-close  { color: #94A3B8; }
.dark-base .mapa-info-close:hover { color: #E2E8F0; }

@media (max-width: 680px) {
  .mapa-section { padding: 3.5rem 1.2rem 3rem; }
  .tl-filters { gap: 0.3rem; }
  .tl-filter  { font-size: 0.65rem; padding: 0.25rem 0.65rem; }
}


/* ════════════════════════════════════════════════════════════════
   NUEVAS FUNCIONALIDADES, Historial · Quiz · TOC · Stats · Desafío
   ════════════════════════════════════════════════════════════════ */

/* ── HISTORIAL DE LECTURA, badge en tarjeta ── */
.read-badge {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  width: 20px; height: 20px;
  background: var(--cat-color, var(--blue-accent));
  color: #fff;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue-accent) 35%, transparent);
}
.lib-card.is-read { border-color: color-mix(in srgb, var(--blue-accent) 28%, transparent); }
.lib-card.is-read h3 { opacity: 0.8; }
.dark-base .lib-card.is-read { border-color: color-mix(in srgb, var(--blue-hover) 22%, transparent); }

/* ── TOC (Tabla de Contenidos) ── */
.article-toc {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--card-border));
  box-shadow: 0 28px 80px rgba(11, 19, 43, 0.28), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  max-width: 480px;
}
.article-toc::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-accent)); opacity: 0.85;
}
.toc-label {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 0.55rem;
}
.toc-list {
  margin: 0; padding-left: 1.2rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.toc-link {
  font-size: 0.82rem; color: var(--text-muted);
  text-decoration: none; line-height: 1.4;
  transition: color 0.15s;
}
.toc-link:hover, .toc-link.toc-active { color: var(--blue); font-weight: 600; }
.dark-base .article-toc {
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border-color: color-mix(in srgb, var(--blue) 20%, var(--card-border));
}

/* ── STAT CALLOUT (visualización de datos inline) ── */
.stat-callout-row {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin: 1.4rem 0;
}
.stat-callout {
  flex: 1; min-width: min(180px, 100%);
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--card-border));
  border-left: 3px solid var(--blue);
  box-shadow: 0 28px 80px rgba(11, 19, 43, 0.28), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.stat-value {
  font-size: 1.7rem; font-weight: 800;
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1;
}
.stat-label {
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-primary); line-height: 1.3;
}
.stat-detail {
  font-size: 0.72rem; color: var(--text-muted); line-height: 1.4;
}
.dark-base .stat-callout {
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border-color: color-mix(in srgb, var(--blue) 20%, var(--card-border));
  border-left-color: var(--blue-hover);
}

/* ── DESAFÍO DE LA SEMANA ── */
.desafio-block {
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.18);
  border-left: 3px solid #7C3AED;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin: 1.4rem 0;
}
.desafio-header {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.65rem; color: #7C3AED;
}
.desafio-header svg { flex-shrink: 0; }
.desafio-header strong { font-size: 0.85rem; font-weight: 800; }
.desafio-duracion {
  margin-left: auto;
  font-size: 0.7rem; font-weight: 600;
  background: rgba(124,58,237,0.12);
  padding: 0.2rem 0.55rem;
  border-radius: 20px; color: #7C3AED;
}
.desafio-texto {
  font-size: 0.88rem; line-height: 1.7;
  color: var(--text-primary); margin-bottom: 0.9rem;
}
.desafio-accept-btn {
  background: #7C3AED; color: #fff;
  border: none; border-radius: 8px;
  padding: 0.5rem 1.1rem; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: background 0.18s, transform 0.12s;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.desafio-accept-btn:hover { background: #6D28D9; transform: translateY(-1px); }
.desafio-accept-btn:disabled { background: rgba(124,58,237,0.4); cursor: default; transform: none; }
.desafio-accepted .desafio-block,
.desafio-block.desafio-accepted { border-color: rgba(124,58,237,0.35); background: rgba(124,58,237,0.09); }
.dark-base .desafio-block { background: rgba(124,58,237,0.08); border-color: rgba(167,139,250,0.2); }
.dark-base .desafio-header { color: #A78BFA; }
.dark-base .desafio-duracion { color: #A78BFA; background: rgba(167,139,250,0.15); }

/* ── BOTÓN QUIZ LAUNCH ── */
.quiz-launch-wrap { margin: 1.2rem 0; }
.quiz-launch-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  font-size: 0.82rem; font-weight: 700;
  color: var(--blue); cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.quiz-launch-btn:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); transform: translateY(-1px); }
.quiz-launch-btn.quiz-done { color: #16A34A; border-color: rgba(22,163,74,0.25); background: rgba(22,163,74,0.06); cursor: default; }
.quiz-launch-btn.quiz-done:hover { transform: none; }
.dark-base .quiz-launch-btn { background: color-mix(in srgb, var(--blue-hover) 7%, transparent); border-color: color-mix(in srgb, var(--blue-hover) 18%, transparent); color: var(--blue-hover); }
.dark-base .quiz-launch-btn.quiz-done { color: #4ADE80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.06); }

/* ── MODAL QUIZ ── */
.quiz-modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(3,12,26,0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.quiz-modal-overlay[hidden] { display: none; }
.quiz-modal-card {
  background: rgba(247,249,255,0.98);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
  border-radius: 20px;
  padding: 2rem 2rem 1.5rem;
  width: 100%; max-width: 540px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-height: 90vh; overflow-y: auto;
}
.quiz-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(148,163,184,0.15);
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.quiz-modal-close:hover { background: rgba(148,163,184,0.3); }
.quiz-modal-eyebrow {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--blue);
  margin-bottom: 1.1rem;
}
.quiz-progress { margin-bottom: 1rem; }
.quiz-prog-text { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; display: block; margin-bottom: 0.4rem; }
.quiz-prog-bar { height: 4px; background: rgba(148,163,184,0.2); border-radius: 2px; }
.quiz-prog-fill { height: 100%; background: linear-gradient(90deg, var(--blue-accent), var(--blue)); border-radius: 2px; transition: width 0.3s; }
.quiz-question {
  font-size: 1rem; font-weight: 700; line-height: 1.5;
  color: var(--text-primary); margin-bottom: 1.1rem;
}
.quiz-opts { display: flex; flex-direction: column; gap: 0.55rem; }
.quiz-opt-btn {
  text-align: left; padding: 0.75rem 1rem;
  border: 1.5px solid rgba(148,163,184,0.25);
  border-radius: 10px; background: rgba(255,255,255,0.7);
  font-size: 0.88rem; color: var(--text-primary);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  line-height: 1.4;
}
.quiz-opt-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--blue) 40%, transparent); background: color-mix(in srgb, var(--blue) 5%, transparent); }
.quiz-opt-btn.correct { border-color: #16A34A; background: rgba(22,163,74,0.1); color: #15803D; font-weight: 700; }
.quiz-opt-btn.wrong   { border-color: #DC2626; background: rgba(220,38,38,0.07); color: #B91C1C; }
.quiz-opt-btn:disabled { cursor: default; }
.quiz-result { text-align: center; padding: 1rem 0; }
.quiz-result-emoji { font-size: 2.5rem; display: block; margin-bottom: 0.6rem; }
.quiz-result-score { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.7rem; }
.quiz-result-bar { height: 8px; background: rgba(148,163,184,0.2); border-radius: 4px; margin: 0 auto 0.6rem; max-width: 220px; }
.quiz-result-fill { height: 100%; background: linear-gradient(90deg, var(--blue-accent), var(--blue)); border-radius: 4px; transition: width 0.6s; }
.quiz-result-xp { font-size: 0.85rem; font-weight: 700; color: var(--blue); margin-bottom: 0.5rem; }
.quiz-result-msg { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.2rem; line-height: 1.5; }
.quiz-close-final {
  background: linear-gradient(90deg, var(--blue-accent), var(--blue));
  color: #fff; border: none; border-radius: 10px;
  padding: 0.6rem 1.6rem; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s;
}
.quiz-close-final:hover { opacity: 0.88; }

.dark-base .quiz-modal-card { background: rgba(8,16,34,0.97); border-color: color-mix(in srgb, var(--blue) 15%, transparent); }
.dark-base .quiz-opt-btn { background: rgba(18,32,58,0.8); border-color: rgba(148,163,184,0.15); color: var(--text-primary); }
.dark-base .quiz-opt-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--blue) 40%, transparent); background: color-mix(in srgb, var(--blue) 7%, transparent); }

@media (max-width: 680px) {
  .quiz-modal-card { padding: 1.1rem 1rem 1rem; }
  .stat-callout-row { flex-direction: column; gap: 0.5rem; }
  .stat-value { font-size: 1.2rem; }
  .article-toc { max-width: 100%; }
}

/* ── PANELES INLINE DEL MENÚ MÓVIL ── */
.mobile-nav-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.mobile-nav-item:last-child { border-bottom: none; }

.mobile-nav-toggle {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 0.18s;
}
.mobile-nav-toggle:hover { color: var(--blue); }
.mobile-nav-toggle:hover .mobile-nav-chevron { color: var(--blue); }
.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron {
  transform: rotate(90deg);
  color: var(--blue);
}
.mobile-nav-chevron { transition: transform 0.22s ease, color 0.18s; }

.mobile-nav-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  will-change: max-height, opacity;
  transition: max-height 0.3s ease-out, opacity 0.2s ease;
}
.mobile-nav-panel.is-open {
  max-height: 1600px;
  opacity: 1;
}
.mobile-nav-panel[hidden] { display: block !important; }

.mob-panel-inner {
  padding: 0.2rem 0 1.1rem;
}
.mob-panel-inner p {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.mob-panel-eyebrow {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--blue) !important;
  margin-bottom: 0.3rem !important;
}
.mob-panel-lead {
  font-size: 0.85rem !important;
  color: var(--text-body) !important;
  line-height: 1.65 !important;
  margin-bottom: 1rem !important;
}
/* El mob-panel-inner puede contener clases del modal de escritorio */
.mob-panel-inner .info-values,
.mob-panel-inner .info-collab-steps,
.mob-panel-inner .info-team,
.mob-panel-inner .info-fuera-bata,
.mob-panel-inner .info-section-divider,
.mob-panel-inner .info-team-label,
.mob-panel-inner .info-mission { display: revert; }
.mob-panel-inner .info-cta-btn { margin-top: 0.4rem; }
.mob-panel-inner a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 8px;
  margin-top: 0.3rem;
  transition: background 0.15s, border-color 0.15s;
}
.mob-panel-inner a:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.mob-contacto-email {
  font-size: 0.88rem; font-weight: 700;
  color: var(--blue); text-decoration: none;
  display: block; margin-top: 0.3rem;
}

.dark-base .mobile-nav-toggle { color: #E2E8F0; }
.dark-base .mobile-nav-item   { border-bottom-color: rgba(255,255,255,0.08); }
.dark-base .mob-panel-inner p { color: #94A3B8; }
.dark-base .mob-panel-inner a { border-color: color-mix(in srgb, var(--blue) 22%, transparent); color: var(--blue); }
.dark-base .mob-contacto-email { color: var(--blue); }


/* ══════════════════════════════════════════════════════════════
   SEMANAS ANTERIORES, Drawer móvil
   ══════════════════════════════════════════════════════════════ */

/* Botón "Ver anteriores" visible en todas las pantallas */
.weekly-prev-mob-trigger {
  display: flex;
  justify-content: center;
  margin: 1.4rem 0 0.5rem;
}

.weekly-prev-section { display: none; }

/* ── Botón disparador ── */
.weekly-prev-mob-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: rgba(255,255,255,0.9);
  border: 1.5px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 12px;
  padding: 0.65rem 1.2rem;
  font-size: 0.85rem; font-weight: 700;
  color: var(--navy); cursor: pointer;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--blue) 8%, transparent);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  width: 100%; justify-content: center;
}
.weekly-prev-mob-btn:hover { border-color: color-mix(in srgb, var(--blue) 40%, transparent); transform: translateY(-1px); }
.wpd-count {
  background: var(--blue); color: #fff;
  font-size: 0.7rem; font-weight: 800;
  padding: 0.1rem 0.5rem; border-radius: 20px; min-width: 22px; text-align: center;
}
.dark-base .weekly-prev-mob-btn { background: rgba(12,22,42,0.9); border-color: color-mix(in srgb, var(--blue) 22%, transparent); color: #E2E8F0; }

/* ── Lista dentro del modal (concepto-modal-overlay / concepto-modal-card) ── */
.wpd-list {
  padding: 0.4rem 0;
}

/* ── Item de la lista ── */
.wpd-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(148,163,184,0.1);
}
.wpd-item:last-child { border-bottom: none; }
.wpd-item:hover, .wpd-item:focus { background: color-mix(in srgb, var(--blue) 5%, transparent); outline: none; }
.wpd-item:active { background: color-mix(in srgb, var(--blue) 9%, transparent); }

.wpd-item-left {
  display: flex; flex-direction: column; gap: 0.35rem;
  min-width: 0; flex: 1;
}
.wpd-badge { font-size: 0.62rem; align-self: flex-start; }
.wpd-item-body { display: flex; flex-direction: column; gap: 0.15rem; }
.wpd-item-title {
  font-size: 0.85rem; font-weight: 700; color: var(--navy);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wpd-item-meta {
  font-size: 0.7rem; color: var(--text-muted); line-height: 1.3;
}
.wpd-chevron { flex-shrink: 0; color: rgba(148,163,184,0.6); }

/* Dark mode */
.dark-base .wpd-item   { border-bottom-color: rgba(148,163,184,0.08); }
.dark-base .wpd-item:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.dark-base .wpd-item-title { color: #E2E8F0; }



/* ══════════════════════════════════════════════════════════════
   PROPUESTAS, BOTÓN DE VOTO
══════════════════════════════════════════════════════════════ */

.prop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.prop-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.26rem 0.65rem;
  background: none;
  border: 1px solid rgba(148,163,184,0.30);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.prop-vote-btn:hover:not(.voted) {
  background: color-mix(in srgb, var(--blue) 7%, transparent);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  color: var(--blue);
}
.prop-vote-btn.voted {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
  cursor: default;
}
.prop-vote-count { min-width: 0.6ch; }

.dark-base .prop-vote-btn {
  border-color: rgba(148,163,184,0.20);
  color: #64748B;
}
.dark-base .prop-vote-btn:hover:not(.voted) {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
}
.dark-base .prop-vote-btn.voted {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  color: var(--blue);
}


/* ══════════════════════════════════════════════════════════════
   ARTÍCULOS, GRÁFICOS / ILUSTRACIONES
══════════════════════════════════════════════════════════════ */

.article-chart {
  margin: 1.6rem 0;
  padding: 1.4rem 1.2rem 1rem;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
  border-radius: 14px;
  text-align: center;
}
.article-chart svg {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 0.7rem;
  color: var(--navy);
}
.article-chart figcaption {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.55;
  font-style: italic;
  max-width: 400px;
  margin: 0 auto;
}

.dark-base .article-chart {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
}
.dark-base .article-chart svg { color: #C4D0E3; }
.dark-base .article-chart figcaption { color: #64748B; }

/* ══════════════════════════════════════════════════════════════
   TEMAS EXTRA: NARANJA · VERDE · TORMENTA · COSMOS
══════════════════════════════════════════════════════════════ */

/* ── Variables de color ── */
[data-theme="naranja"] {
  --navy:         #F5EFE6;
  --blue:         #F97316;
  --blue-hover:   #FB923C;
  --text-body:    #C4A882;
  --text-muted:   #8A7060;
  --white:        #14100A;
  --card-border:  rgba(249,115,22,0.16);
  --card-shadow:  0 2px 8px rgba(0,0,0,0.45), 0 8px 32px rgba(0,0,0,0.40);
  --badge-bg:     rgba(249,115,22,0.12);
  --badge-border: rgba(249,115,22,0.28);
}

[data-theme="verde"] {
  --navy:         #14291A;
  --blue:         #16A34A;
  --blue-hover:   #15803D;
  --text-body:    #3D6B4A;
  --text-muted:   #5A8A68;
  --white:        #FFFFFF;
  --card-border:  rgba(22,163,74,0.18);
  --card-shadow:  0 2px 8px rgba(20,41,26,0.05), 0 8px 32px rgba(20,41,26,0.06);
  --badge-bg:     rgba(22,163,74,0.08);
  --badge-border: rgba(22,163,74,0.20);
}

[data-theme="tormenta"] {
  --navy:         #EDE8F8;
  --blue:         #A855F7;
  --blue-hover:   #C084FC;
  --text-body:    #B0A0D0;
  --text-muted:   #786098;
  --white:        #07030F;
  --card-border:  rgba(168,85,247,0.16);
  --card-shadow:  0 2px 8px rgba(0,0,0,0.55), 0 8px 32px rgba(0,0,0,0.50);
  --badge-bg:     rgba(168,85,247,0.12);
  --badge-border: rgba(168,85,247,0.28);
}

[data-theme="cosmos"] {
  --navy:         #F0E8D3;
  --blue:         #F59E0B;
  --blue-hover:   #FBBF24;
  --text-body:    #C8AC80;
  --text-muted:   #907050;
  --white:        #08060A;
  --card-border:  rgba(245,158,11,0.16);
  --card-shadow:  0 2px 8px rgba(0,0,0,0.55), 0 8px 32px rgba(0,0,0,0.50);
  --badge-bg:     rgba(245,158,11,0.12);
  --badge-border: rgba(245,158,11,0.28);
}

/* ── Fondos de página ── */
[data-theme="naranja"] body { background-color: #1A1208; color: #F5EFE6; }
[data-theme="naranja"] #bg-layer {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, rgba(249,115,22,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, rgba(251,146,60,0.05) 0%, transparent 60%);
}

[data-theme="verde"] body { background-color: #F0FBF4; color: #14291A; }
[data-theme="verde"] #bg-layer {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, rgba(22,163,74,0.055) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, rgba(134,239,172,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 55% 92%, rgba(16,185,129,0.04) 0%, transparent 55%);
}

[data-theme="tormenta"] body { background-color: #07030F; color: #EDE8F8; }
[data-theme="tormenta"] #bg-layer {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, rgba(168,85,247,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, rgba(192,132,252,0.05) 0%, transparent 60%);
}

[data-theme="cosmos"] body { background-color: #08060A; color: #F0E8D3; }
[data-theme="cosmos"] #bg-layer {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, rgba(245,158,11,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, rgba(251,191,36,0.05) 0%, transparent 60%);
}

/* ── Carmesí (Nivel 4) ── */
[data-theme="carmesi"] {
  --navy:         #F5E8E8;
  --blue:         #C8102E;
  --blue-hover:   #E01133;
  --blue-accent:  #DC143C;
  --text-body:    #B08080;
  --text-muted:   #7A5050;
  --white:        #0A0204;
  --card-border:  rgba(200,16,46,0.16);
  --card-shadow:  0 2px 8px rgba(0,0,0,0.65), 0 8px 32px rgba(0,0,0,0.60);
  --badge-bg:     rgba(200,16,46,0.10);
  --badge-border: rgba(200,16,46,0.25);
}

[data-theme="carmesi"] body { background-color: #0A0204; color: #F5E8E8; }
[data-theme="carmesi"] #bg-layer {
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, rgba(200,16,46,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, rgba(160,0,30,0.06) 0%, transparent 60%);
}

/* ── Obsidiana (Nivel 5 (Córtex Supremo)) tema claro premium ── */
[data-theme="obsidiana"] {
  --navy:         #1C1814;
  --blue:         #B8920C;
  --blue-hover:   #D4AF37;
  --blue-accent:  #D4AF37;
  --text-body:    #3C3530;
  --text-muted:   #7C7468;
  --white:        #FFFFFF;
  --card-border:  rgba(184,146,12,0.16);
  --card-shadow:  0 2px 8px rgba(0,0,0,0.07), 0 8px 32px rgba(0,0,0,0.05);
  --badge-bg:     rgba(184,146,12,0.09);
  --badge-border: rgba(184,146,12,0.22);
}

[data-theme="obsidiana"] body { background-color: #f4f5f6; color: #1C1814; }
[data-theme="obsidiana"] #bg-layer {
  background-image:
    radial-gradient(#4a5568 0.5px, transparent 0.5px),
    radial-gradient(#a0aec0 0.5px, #f4f5f6 0.5px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

/* ── Navbar ── */
[data-theme="naranja"]   .navbar { background: rgba(18,12,6,0.93);   border-bottom-color: rgba(249,115,22,0.14); }
[data-theme="verde"]     .navbar { background: rgba(240,251,244,0.93); border-bottom-color: rgba(22,163,74,0.15); }
[data-theme="tormenta"]  .navbar { background: rgba(5,2,12,0.93);    border-bottom-color: rgba(168,85,247,0.14); }
[data-theme="cosmos"]    .navbar { background: rgba(6,4,8,0.93);     border-bottom-color: rgba(245,158,11,0.13); }
[data-theme="carmesi"]   .navbar { background: rgba(7,1,2,0.97);     border-bottom-color: rgba(200,16,46,0.14);  }
[data-theme="obsidiana"] .navbar { background: rgba(244,245,246,0.96); border-bottom-color: rgba(184,146,12,0.20); }

/* ── Menú móvil (temas oscuros) ── */
[data-theme="naranja"]   .mobile-menu { background: #1C1408 !important; border-top-color: rgba(249,115,22,0.10); }
[data-theme="tormenta"]  .mobile-menu { background: #09040F !important; border-top-color: rgba(168,85,247,0.10); }
[data-theme="cosmos"]    .mobile-menu { background: #0A060C !important; border-top-color: rgba(245,158,11,0.10); }
[data-theme="carmesi"]   .mobile-menu { background: #0D0306 !important; border-top-color: rgba(200,16,46,0.10);  }
[data-theme="obsidiana"] .mobile-menu { background: #f4f5f6 !important; border-top-color: rgba(184,146,12,0.16); }

/* ── Logos ── */
:is([data-theme="naranja"], [data-theme="tormenta"], [data-theme="cosmos"], [data-theme="carmesi"]) .logo {
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}
:is([data-theme="naranja"], [data-theme="tormenta"], [data-theme="cosmos"], [data-theme="carmesi"]) .hero-logo {
  filter: invert(0.9) brightness(1.5) drop-shadow(0 0 12px rgba(255,255,255,0.15));
  animation-name: logo-breathe-dark;
}

/* ── Barra de nivel (gradiente por tema) ── */
[data-theme="naranja"]   .nivel-bar-fill,
[data-theme="naranja"]   .nivel-popup-bar-fill  { background: linear-gradient(90deg, #FB923C, #F97316); }
[data-theme="verde"]     .nivel-bar-fill,
[data-theme="verde"]     .nivel-popup-bar-fill  { background: linear-gradient(90deg, #4ADE80, #16A34A); }
[data-theme="tormenta"]  .nivel-bar-fill,
[data-theme="tormenta"]  .nivel-popup-bar-fill  { background: linear-gradient(90deg, #E879F9, #A855F7); }
[data-theme="cosmos"]    .nivel-bar-fill,
[data-theme="cosmos"]    .nivel-popup-bar-fill  { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
[data-theme="carmesi"]   .nivel-bar-fill,
[data-theme="carmesi"]   .nivel-popup-bar-fill  { background: linear-gradient(90deg, #E01133, #C8102E); }
[data-theme="obsidiana"] .nivel-bar-fill,
[data-theme="obsidiana"] .nivel-popup-bar-fill  { background: linear-gradient(90deg, #D4AF37, #B8920C); }

/* ── Widget de nivel ── */
[data-theme="naranja"]   .nivel-widget { border-color: rgba(249,115,22,0.22); }
[data-theme="verde"]     .nivel-widget { border-color: rgba(22,163,74,0.22); }
[data-theme="tormenta"]  .nivel-widget { border-color: rgba(168,85,247,0.22); }
[data-theme="cosmos"]    .nivel-widget { border-color: rgba(245,158,11,0.22); }
[data-theme="carmesi"]   .nivel-widget { border-color: rgba(200,16,46,0.22); }
[data-theme="obsidiana"] .nivel-widget { border-color: rgba(184,146,12,0.22); }

/* ── Tab activo: el pill hereda --pill-bg del tema activo ── */
[data-theme="naranja"]   { --pill-bg: linear-gradient(130deg, #FB923C 0%, #F97316 100%); --pill-shadow: 0 2px 10px rgba(249,115,22,0.35), 0 4px 18px rgba(249,115,22,0.20); }
[data-theme="verde"]     { --pill-bg: linear-gradient(130deg, #4ADE80 0%, #16A34A 100%); --pill-shadow: 0 2px 10px rgba(22,163,74,0.35), 0 4px 18px rgba(22,163,74,0.20); }
[data-theme="tormenta"]  { --pill-bg: linear-gradient(130deg, #E879F9 0%, #A855F7 100%); --pill-shadow: 0 2px 10px rgba(168,85,247,0.35), 0 4px 18px rgba(168,85,247,0.20); }
[data-theme="cosmos"]    { --pill-bg: linear-gradient(130deg, #FBBF24 0%, #F59E0B 100%); --pill-shadow: 0 2px 10px rgba(245,158,11,0.35), 0 4px 18px rgba(245,158,11,0.20); }
[data-theme="carmesi"]   { --pill-bg: linear-gradient(130deg, #E01133 0%, #C8102E 100%); --pill-shadow: 0 2px 10px rgba(200,16,46,0.35), 0 4px 18px rgba(200,16,46,0.20); }
[data-theme="obsidiana"] { --pill-bg: linear-gradient(130deg, #D4AF37 0%, #B8920C 100%); --pill-shadow: 0 2px 10px rgba(184,146,12,0.30), 0 4px 18px rgba(184,146,12,0.16); }
[data-theme="naranja"]   .tab-btn.active,
[data-theme="verde"]     .tab-btn.active,
[data-theme="tormenta"]  .tab-btn.active,
[data-theme="cosmos"]    .tab-btn.active,
[data-theme="carmesi"]   .tab-btn.active,
[data-theme="obsidiana"] .tab-btn.active { background: transparent; box-shadow: none; }

/* ── Verde: navbar links hover ── */
[data-theme="verde"] .nav-link:hover { color: #14291A; background: rgba(22,163,74,0.08); }

/* ── Obsidiana: logos y textos dorados ── */

/* Destellos: puntos de luz que aparecen en zonas concretas del logo */
@keyframes obsidiana-sparkle-a {
  0%, 18%, 82%, 100% { opacity: 0; transform: scale(0.1); }
  40%, 60%           { opacity: 1; transform: scale(1);   }
}
@keyframes obsidiana-sparkle-b {
  0%, 22%, 88%, 100% { opacity: 0; transform: scale(0.1); }
  45%, 55%           { opacity: 1; transform: scale(1.1); }
}
@keyframes obsidiana-text-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Obsidiana: logo swap vía JS (swapLogos), aquí solo ajustes visuales */
[data-theme="obsidiana"] img.logo,
[data-theme="obsidiana"] img.mobile-menu-logo {
  mix-blend-mode: normal;
}

[data-theme="obsidiana"] img.hero-logo {
  animation: logo-breathe 5s ease-in-out infinite;
}

/* Contenedores de los logos: relativos para anclar los destellos */
[data-theme="obsidiana"] .navbar-brand,
[data-theme="obsidiana"] .mobile-menu-header {
  position: relative;
}

/* Dos puntos de destello por logo, anclados a distintas esquinas del icono */
[data-theme="obsidiana"] .navbar-brand::before,
[data-theme="obsidiana"] .mobile-menu-header::before {
  content: '';
  position: absolute;
  top: 18%; left: 26%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,180,1) 0%, rgba(255,235,80,0.55) 45%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  animation: obsidiana-sparkle-a 5s ease-in-out infinite;
}
[data-theme="obsidiana"] .navbar-brand::after,
[data-theme="obsidiana"] .mobile-menu-header::after {
  content: '';
  position: absolute;
  top: 55%; left: 48%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,252,180,1) 0%, rgba(255,235,80,0.50) 45%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  animation: obsidiana-sparkle-b 5s ease-in-out 2.2s infinite;
}

/* Texto "La Inferencia", mismo oro 3D diagonal + barrido de luz */
[data-theme="obsidiana"] .navbar-brand-name,
[data-theme="obsidiana"] .hero-content h1 {
  background: linear-gradient(
    155deg,
    #6B4F08 0%,
    #B8920C 22%,
    #D4AF37 38%,
    #F5D860 48%,
    #FFFBE8 52%,
    #F5D860 58%,
    #D4AF37 72%,
    #B8920C 88%,
    #6B4F08 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: obsidiana-text-shimmer 4.5s linear infinite;
}

/* ── Footer en temas oscuros extra ── */
[data-theme="naranja"]   .footer-main { background: #100C06; }
[data-theme="tormenta"]  .footer-main { background: #040210; }
[data-theme="cosmos"]    .footer-main { background: #060408; }
[data-theme="carmesi"]   .footer-main { background: #070102; }
[data-theme="obsidiana"] .footer-main { background: #eaebec; }


/* ══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV | La Inferencia
══════════════════════════════════════════════════════════════ */

/* Overlay de transición entre páginas */
#mbn-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 440;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

/* La bottom nav y el section header existen solo en móvil */
.mobile-bottom-nav    { display: none; }
.mobile-section-header { display: none; }

/* ── Transición entre documentos del mismo origen (home <-> /fuera-de-bata/) ──
   Quita el parpadeo blanco al navegar. Plataforma pura, sin framework.
   Donde no haya soporte (Firefox) degrada a navegación normal. */
@view-transition { navigation: auto; }
/* La barra inferior se mantiene fija entre páginas en vez de desvanecerse */
.mobile-bottom-nav { view-transition-name: mobile-bottom-nav; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

@media (max-width: 768px) {

  /* ── Overlay activo ── */
  #mbn-overlay          { display: block; pointer-events: none; }
  #mbn-overlay.mbn-fade { opacity: 0.92; pointer-events: all; }

  /* ── Barra de navegación inferior ── */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 450;
    /* Superficie con una leve luz superior: da relieve sin blur */
    background:
      linear-gradient(180deg, #ffffff 0%, #f6f8fd 100%);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 -6px 22px rgba(15, 23, 42, 0.08),
      0 -1px 3px rgba(15, 23, 42, 0.04);
    height: 64px;
    overflow: hidden;
    /* GPU compositing: capa propia permanente, evita salto durante animaciones de contenido */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
      height: calc(64px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
  /* Oculta al bajar, reaparece al subir (patrón de apps de lectura) */
  .mobile-bottom-nav.mbn-hidden {
    transform: translate3d(0, calc(100% + 26px), 0);
  }

  /* Indicador deslizante: píldora que viaja tras la pestaña activa.
     Se mueve con transform: translateX() (compuesto en GPU, sin layout). */
  .mbn-indicator {
    position: absolute;
    width: 44px;
    height: 30px;
    border-radius: 15px;
    background: var(--pill-bg);
    box-shadow:
      0 6px 16px -3px color-mix(in srgb, var(--blue) 48%, transparent),
      0 2px 5px -1px color-mix(in srgb, var(--blue) 30%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.32);
    top: 8px;
    left: 0;
    transform: translateX(0);
    /* leve rebote al aterrizar → sensación premium */
    transition: transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.22s ease;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
  }
  .mbn-indicator.mbn-indicator--hidden {
    opacity: 0;
  }

  /* Tab: estructura de columna con icon-wrap + label */
  .mbn-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px 2px 5px;
    color: #64748b;
    transition: color 0.18s;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative;
    z-index: 2;
    text-decoration: none;
  }

  /* Contenedor de icono: idéntico para las 4 pestañas */
  .mbn-icon-wrap {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  /* Iconos: SVG de trazo, un único juego coherente. Color vía currentColor. */
  .mbn-icon {
    width: 22px; height: 22px;
    display: block;
    flex-shrink: 0;
    color: #7c889b;
    stroke-width: 2;
    transition: color 0.2s ease;
  }
  /* El matraz (forma estrecha) llena menos su viewBox: se agranda para igualar masa visual */
  .mbn-icon--flask { width: 25px; height: 25px; }

  /* Label: debajo del icono, altura fija para alinear los iconos */
  .mbn-label {
    font-size: 0.5625rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    letter-spacing: 0.015em;
    line-height: 1.05;
    white-space: normal;
    text-align: center;
    color: #7c889b;
    transition: color 0.18s;
    max-width: 100%;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Estado activo: icono blanco sobre la píldora (elevado 1px), label de marca.
     El peso de la fuente NO cambia (evita salto de ancho del texto). */
  .mbn-tab.mbn-tab--active .mbn-icon {
    color: #fff;
  }
  .mbn-tab.mbn-tab--active .mbn-icon-wrap {
    transform: translateY(-1px);
  }
  .mbn-tab.mbn-tab--active .mbn-label {
    color: var(--blue);
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-bottom-nav,
    .mbn-indicator,
    .mbn-icon-wrap { transition: none; }
    .mobile-bottom-nav.mbn-hidden { transform: translate3d(0, 0, 0); }
  }

  /* ── Viewport lock: body no scrolleable → address bar no se mueve → fixed nav no salta ── */
  /* Solo en la SPA (tiene #app como contenedor de scroll). Las páginas estáticas
     (artículos, autores, guías) scrollean el body y no deben quedar bloqueadas. */
  html:has(#app), body:has(#app) { overflow: hidden; height: 100%; }
  #app {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* ── Padding para que el contenido no quede bajo la barra ── */
  #app { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Páginas estáticas con la barra inferior (Fuera de Bata, etc.): el body
     scrollea, así que el hueco se reserva en el body */
  body:not(:has(#app)):has(.mobile-bottom-nav) {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
  /* ── Botón volver arriba: pequeño, bottom-24 sobre la barra inferior ── */
  #btn-volver-arriba {
    width: 34px; height: 34px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 24px);
    right: 1rem;
  }

  /* ── Ocultar pestaña "Fuera de Bata" del tab-bar central en móvil ── */
  #tab-repositorio { display: none !important; }

  /* ── MOBILE SECTION HEADER ── */
  body.mobile-nav-active .mobile-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 1.4rem;
    gap: 2px;
    background: rgba(247, 249, 255, 0.97);
    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
    position: relative;
    width: 100%;
    /* Capa GPU propia: evita glitch al repintar backdrop-filter durante animaciones vecinas */
    transform: translateZ(0);
    will-change: transform;
  }

  /* En Casa no hace falta: el hero ya da contexto */
  body.mp-casa .mobile-section-header { display: none !important; }

  .msh-section-name {
    font-size: 1.75rem;
    font-weight: 800;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    color: var(--navy);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  /* ══════════════════════════════════════════════════════════
     SISTEMA DE PÁGINAS MÓVILES
  ══════════════════════════════════════════════════════════ */

  /* Sección perfil: oculta por defecto en móvil (solo visible en mp-yo) */
  body.mobile-nav-active #mob-yo-section { display: none; }

  /* Cuando la nav está activa, ocultar todas las secciones por defecto */
  body.mobile-nav-active .hero,
  body.mobile-nav-active .dashboard-center,
  body.mobile-nav-active .sidebar-left,
  body.mobile-nav-active .sidebar-right,
  body.mobile-nav-active .botiquin-section,
  body.mobile-nav-active .newsletter-section,
  body.mobile-nav-active .timeline-section,
  body.mobile-nav-active .propuestas-section,
  body.mobile-nav-active .footer-main {
    display: none;
  }

  /* Los sidebars en páginas móviles: sin overlay, flujo normal */
  body.mobile-nav-active .sidebar-widget {
    position: static !important;
    background: rgba(236,241,252,0.52) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 1.4rem 1.2rem !important;
    overflow-y: visible !important;
    margin: 0 !important;
  }
  body.mobile-nav-active .sidebar-close-btn { display: none !important; }
  html.dark-base body.mobile-nav-active .sidebar-widget {
    background: rgba(9, 17, 33, 0.75) !important;
  }

  /* Dashboard-layout en páginas donde solo se ven sidebars: bloque simple */
  body.mp-descubrir .dashboard-layout,
  body.mp-yo .dashboard-layout {
    display: block !important;
    padding: 0 1.2rem 2rem !important;
  }
  /* Casa: sin grid, si no la fila oculta de sidebars deja un hueco muerto */
  body.mp-casa .dashboard-layout { display: block !important; }

  /* ── PÁGINA: CASA ── */
  body.mp-casa .hero,
  body.mp-casa .dashboard-center,
  body.mp-casa .newsletter-section,
  body.mp-casa .propuestas-section,
  body.mp-casa .footer-main          { display: block; }
  body.mp-casa #panel-repositorio    { display: none !important; }

  /* ── PÁGINA: FUERA DE BATA (vista rápida in-app; la completa es /fuera-de-bata/) ── */
  /* El panel ya trae su propio título "Fuera de Bata", no repetir el section header */
  body.mp-fuerabata .mobile-section-header { display: none !important; }
  body.mp-fuerabata .dashboard-center  { display: block; }
  body.mp-fuerabata .search-section    { display: none !important; }
  body.mp-fuerabata #panel-biblioteca,
  body.mp-fuerabata #panel-semana      { display: none !important; }
  body.mp-fuerabata #panel-repositorio { display: block !important; }
  body.mp-fuerabata .dashboard-layout  { display: block; }
  body.mp-fuerabata .sidebar-left,
  body.mp-fuerabata .sidebar-right     { display: none !important; }
  body.mp-fuerabata .propuestas-section,
  body.mp-fuerabata .footer-main       { display: block; }
  /* Sin section header: dar aire arriba para que el título no roce el header */
  body.mp-fuerabata #panel-repositorio .main-content { padding-top: 1.6rem; }

  /* ── PÁGINA: EXPLORAR (data-mbn="descubrir") ── */
  body.mp-descubrir .sidebar-left,
  body.mp-descubrir .sidebar-right,
  body.mp-descubrir .timeline-section,
  body.mp-descubrir .propuestas-section,
  body.mp-descubrir .footer-main      { display: block; }
  /* Solo efectos (sin tracker de progreso) */
  body.mp-descubrir #progress-tracker,
  body.mp-descubrir #pt-streak-row    { display: none !important; }

  /* ── PÁGINA: BOTIQUÍN ── */
  body.mp-botiquin .botiquin-section,
  body.mp-botiquin .newsletter-section,
  body.mp-botiquin .propuestas-section,
  body.mp-botiquin .footer-main       { display: block; }
  body.mp-botiquin .dashboard-layout  { display: none !important; }
  /* Pegar contenido al encabezado: sin hueco entre msh y "Tu problema, tu libro" */
  body.mp-botiquin .botiquin-section  { padding-top: 0 !important; border-top: none; }
  body.mp-botiquin .botiquin-heading  { padding-top: 0.9rem; margin-top: 0; }

  /* ── PÁGINA: YO ── */
  /* La nueva sección de perfil reemplaza el sidebar de progreso */
  body.mp-yo #mob-yo-section          { display: block; }
  body.mp-yo .footer-main             { display: block; }
  /* Ocultar sidebar-right: los datos ya están en mob-yo-section */
  body.mp-yo .sidebar-right           { display: none !important; }
  body.mp-yo .dashboard-layout        { display: none !important; }
  /* Bloque azul (footer) al final: reordenar con flex sin cambiar el DOM */
  body.mp-yo #mob-slide-wrap          { display: flex; flex-direction: column; }
  body.mp-yo #mob-yo-section          { order: 1; }
  body.mp-yo .footer-main             { order: 2; }

  /* ── TRANSICIONES LATERALES ENTRE PÁGINAS ── */
  @keyframes mob-enter-right {
    from { transform: translateX(32px); }
    to   { transform: translateX(0); }
  }
  @keyframes mob-enter-left {
    from { transform: translateX(-32px); }
    to   { transform: translateX(0); }
  }

  /* will-change solo durante la animación (JS lo añade/quita); estático rompe fixed en Safari */
  /* overflow:hidden evita que el translateX inicial cree scroll horizontal y layout shifts */
  /* contain:layout paint aísla reflows/repaints, la animación no afecta elementos externos */
  #mob-slide-wrap { position: relative; overflow: hidden; width: 100%; contain: layout paint; }

  #mob-slide-wrap.slide-enter-right {
    will-change: transform;
    animation: mob-enter-right 0.27s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  #mob-slide-wrap.slide-enter-left {
    will-change: transform;
    animation: mob-enter-left 0.27s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

}

/* ── Widget Glosario en Explorar (solo móvil) ── */
.mob-glosario-widget {
  display: none; /* Solo en móvil, activado abajo */
  margin: 0 0 0.8rem;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(29,78,216,0.06) 0%, rgba(0,229,255,0.06) 100%);
  border: 1px solid rgba(29,78,216,0.14);
  padding: 0.75rem 1rem;
}
.mob-glosario-widget-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.mob-glosario-widget-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mob-glosario-widget-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}
.mob-glosario-widget-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.mob-glosario-widget-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.mob-glosario-widget-btn:hover { opacity: 0.88; }
@media (max-width: 768px) {
  .mob-glosario-widget { display: block; }
}
.dark-base .mob-glosario-widget {
  background: rgba(29,78,216,0.08);
  border-color: rgba(96,165,250,0.18);
}
.dark-base .mob-glosario-widget-label { color: #E2E8F0; }

/* ── Gancho descriptivo en las tarjetas de efectos ── */
.efecto-hook {
  display: none; /* Solo visible en móvil */
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 2px;
}
@media (max-width: 768px) {
  .efecto-hook { display: block; }
}
.dark-base .efecto-hook { color: #64748B; }

/* ── Dark base: bottom nav ── */
.dark-base .mobile-bottom-nav {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nav-bg, #030C1A) 88%, #6b7fa6) 0%, var(--nav-bg, #030C1A) 62%);
  border-top-color: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 -8px 26px rgba(0, 0, 0, 0.5),
    0 -1px 3px rgba(0, 0, 0, 0.3);
}
.dark-base .mbn-label { color: #8b97a8; }
.dark-base .mbn-icon  { color: #8b97a8; }
/* Estado activo: icono blanco (regla base), label con el acento del tema */
.dark-base .mbn-tab.mbn-tab--active .mbn-icon  { color: #fff; }
.dark-base .mbn-tab.mbn-tab--active .mbn-label { color: var(--blue); }
/* Dark Oscuro: --blue es #2563EB (oscuro), usar azul claro legible */
[data-theme="dark"] .mbn-tab.mbn-tab--active .mbn-label { color: #60A5FA; }

/* ── Colores de superficie por tema oscuro ── */
[data-theme="dark"]     { --nav-bg: #030C1A; --header-bg: rgba(3, 12, 26, 0.97); }
[data-theme="naranja"]  { --nav-bg: #1A1208; --header-bg: rgba(26, 18, 8, 0.97); }
[data-theme="tormenta"] { --nav-bg: #07030F; --header-bg: rgba(7, 3, 15, 0.97); }
[data-theme="cosmos"]   { --nav-bg: #08060A; --header-bg: rgba(8, 6, 10, 0.97); }
[data-theme="carmesi"]  { --nav-bg: #0A0204; --header-bg: rgba(10, 2, 4, 0.97); }

/* ── Dark base: mobile section header ── */
.dark-base .mobile-section-header,
.dark-base body.mobile-nav-active .mobile-section-header {
  background: var(--header-bg, rgba(3, 12, 26, 0.93));
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.dark-base .msh-section-name { color: var(--text, #e2e8f0); }

.dark-base #mbn-overlay { background: var(--nav-bg, #030C1A); }

/* ══════════════════════════════════════════════════════════════
   SECCIÓN YO, PERFIL PREMIUM MÓVIL
══════════════════════════════════════════════════════════════ */
.mob-yo-section {
  display: none;
  padding: 0 1.2rem 2rem;
}

/* ── Cabecera del perfil ── */
.mob-yo-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.6rem 0 1.4rem;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  margin-bottom: 1.4rem;
}
.mob-yo-avatar-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
}
.mob-yo-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(#60A5FA 0deg, #00E5FF 120deg, #2563EB 240deg, #60A5FA 360deg);
  animation: yo-ring-spin 6s linear infinite;
  z-index: 0;
}
@keyframes yo-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mob-yo-badge-img {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--bg, #f7f9ff);
  border: 3px solid var(--bg, #f7f9ff);
}
.mob-yo-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mob-yo-nombre {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 0;
}
.mob-yo-rank {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2563EB;
  letter-spacing: 0.01em;
}
.mob-yo-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ── Panel XP ── */
.mob-yo-xp-panel {
  background: #ffffff;
  border: 1px solid rgba(37,99,235,0.10);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 14px rgba(37,99,235,0.10), 0 1px 4px rgba(0,0,0,0.07);
}
.mob-yo-xp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.mob-yo-xp-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mob-yo-xp-chip {
  font-size: 0.7rem;
  font-weight: 800;
  color: #2563EB;
  background: rgba(37,99,235,0.1);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: 0.04em;
}
.mob-yo-xp-track {
  height: 8px;
  border-radius: 8px;
  background: rgba(148,163,184,0.18);
  overflow: hidden;
  position: relative;
  margin-bottom: 0.45rem;
}
.mob-yo-xp-fill {
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #2563EB 0%, #00E5FF 100%);
  width: 0%;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
  position: relative;
  z-index: 1;
}
.mob-yo-xp-glow {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,229,255,0.3) 100%);
  pointer-events: none;
}
.mob-yo-xp-legend {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Grid de estadísticas ── */
.mob-yo-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
}
.mob-yo-stat-card {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  padding: 0.75rem 0.85rem 0.6rem;
  box-shadow: 0 2px 12px rgba(37,99,235,0.09), 0 1px 4px rgba(0,0,0,0.07);
}
.mob-yo-stat-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 5px;
  margin-bottom: 0.5rem;
}
.mob-yo-stat-icon {
  color: #2563EB;
  flex-shrink: 0;
}
.mob-yo-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mob-yo-stat-num {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.mob-yo-stat-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(148,163,184,0.2);
  overflow: hidden;
}
.mob-yo-stat-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #2563EB, #60A5FA);
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1);
}

/* ── Regalo de bienvenida (mismo sistema que la barra "Tu Progreso" de escritorio) ── */
.mob-yo-reward {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 12px;
  padding: 0.85rem 0.9rem 0.75rem;
  box-shadow: 0 2px 12px rgba(37,99,235,0.09), 0 1px 4px rgba(0,0,0,0.07);
  margin-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.mob-yo-reward .pt-reward-block { padding-bottom: 0; border-bottom: none; }
.mob-yo-reward .pt-reward-claim { margin-bottom: 0; }
.dark-base .mob-yo-reward {
  background: rgba(15,23,42,0.92);
  border-color: rgba(96,165,250,0.14);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
}

/* ── Favoritos ── */
.mob-yo-favs {
  margin-top: 0.4rem;
}
.mob-yo-favs-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.8rem;
}
.mob-yo-favs-hdr svg {
  color: #2563EB;
  flex-shrink: 0;
}
.mob-yo-favs-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2563EB;
  background: rgba(37,99,235,0.1);
  border-radius: 20px;
  padding: 1px 8px;
}
.mob-yo-favs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.mob-yo-fav-card {
  background: rgba(247,249,255,0.8);
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 10px;
  padding: 0.7rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mob-yo-fav-card:hover {
  border-color: rgba(37,99,235,0.3);
  background: rgba(37,99,235,0.04);
}
.mob-yo-fav-cat {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #2563EB;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.mob-yo-fav-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mob-yo-favs-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.8rem 1rem;
  text-align: center;
  color: var(--text-muted);
}
.mob-yo-favs-empty svg { opacity: 0.35; }
.mob-yo-favs-empty p {
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
}

/* ── Dark base: sección Yo ── */
.dark-base .mob-yo-stat-card {
  background: rgba(15,23,42,0.92);
  border-color: rgba(96,165,250,0.14);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.2);
}
.dark-base .mob-yo-xp-panel {
  background: rgba(37,99,235,0.08);
  border-color: rgba(96,165,250,0.2);
}
.dark-base .mob-yo-fav-card {
  background: rgba(15,23,42,0.5);
  border-color: rgba(255,255,255,0.07);
}
.dark-base .mob-yo-nombre,
.dark-base .mob-yo-stat-num { color: var(--text, #e2e8f0); }
.dark-base .mob-yo-badge-img {
  background: var(--bg, #030C1A);
  border-color: var(--bg, #030C1A);
}
/* ── ARTÍCULO INTERACTIVO W26: PENALTIS ──────────────────────────── */
.w26-wrap { margin: 1.8rem 0; }

.w26-slider-block {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), color-mix(in srgb, var(--blue-accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 3px solid var(--blue-accent);
  border-radius: 0 14px 14px 0;
  padding: 1.4rem 1.6rem 1.6rem;
}

.w26-eyebrow {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 0.7rem;
}

.w26-question {
  font-size: 0.95rem; font-weight: 600; color: var(--navy);
  line-height: 1.5; margin-bottom: 1.2rem;
}

.w26-range-row {
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem;
}

.w26-pole {
  font-size: 0.72rem; color: var(--text-muted); text-align: center;
  line-height: 1.3; flex-shrink: 0;
}
.w26-pole small { font-size: 0.68rem; }

.w26-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 6px;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 3px; outline: none; cursor: pointer;
}
.w26-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); border: 3px solid white;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 40%, transparent);
  cursor: pointer; transition: transform 0.15s;
}
.w26-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.w26-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); border: 3px solid white;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--blue) 40%, transparent);
  cursor: pointer;
}

.w26-display {
  font-size: 0.88rem; color: var(--navy); margin-bottom: 1.2rem;
  text-align: center;
}
.w26-display strong { color: var(--blue); font-size: 1.05rem; }

.w26-reveal-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg, var(--blue), var(--blue-hover));
  color: white; border: none; border-radius: 10px;
  padding: 0.75rem 1.2rem; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s, transform 0.15s;
  font-family: inherit; letter-spacing: 0.2px;
}
.w26-reveal-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Reveal block */
.w26-reveal-block {
  margin-top: 1rem;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-radius: 12px; overflow: hidden;
  animation: w26FadeIn 0.4s ease;
}
@keyframes w26FadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.w26-reveal-inner { padding: 1.4rem 1.6rem; }

.w26-cmp-row {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 0.9rem;
}
.w26-cmp-box {
  flex: 1; text-align: center; padding: 0.8rem;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
}
.w26-cmp-user { background: color-mix(in srgb, var(--blue) 5%, transparent); }
.w26-cmp-real { background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: var(--blue); }
.w26-cmp-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.2rem; }
.w26-cmp-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.w26-cmp-real .w26-cmp-val { color: var(--blue); }
.w26-cmp-vs { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }

.w26-reveal-msg {
  font-size: 0.85rem; color: var(--text-body); line-height: 1.6;
  margin-bottom: 1.4rem; font-style: italic;
  padding: 0.7rem 1rem;
  background: color-mix(in srgb, var(--blue-accent) 6%, transparent);
  border-radius: 8px;
}

/* Bars */
.w26-bars { margin-bottom: 1.2rem; }
.w26-bar-row {
  display: grid; grid-template-columns: 90px 1fr 48px;
  align-items: center; gap: 0.7rem; margin-bottom: 0.6rem;
}
.w26-bar-label { font-size: 0.78rem; font-weight: 600; color: var(--navy); }
.w26-bar-track {
  height: 10px; background: color-mix(in srgb, var(--blue) 10%, transparent);
  border-radius: 5px; overflow: hidden;
}
.w26-bar-fill {
  height: 100%; border-radius: 5px;
  transition: width 1.1s cubic-bezier(.4,0,.2,1);
}
.w26-fill-first  { background: linear-gradient(90deg, var(--blue), var(--blue-accent)); }
.w26-fill-second { background: color-mix(in srgb, var(--blue) 30%, transparent); }
.w26-bar-num { font-size: 0.75rem; font-weight: 700; color: var(--navy); text-align: right; }
.w26-bar-src { display: block; font-size: 0.67rem; color: var(--text-muted); margin-top: 0.4rem; }

/* ── LIB CARD VIEWS ── */
.lib-card-views {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  font-size: 0.70rem;
}

.lib-card-readtime {
  color: var(--text-muted);
  font-size: 0.70rem;
}

.mystery-toast {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  max-width: 320px;
  background: linear-gradient(145deg, #1A3360 0%, #0F2248 55%, #091830 100%);
  border: 1px solid rgba(251,191,36,0.4);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 30px rgba(251,191,36,0.15);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  z-index: 9999;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.35s, transform 0.35s;
  color: #fff;
}
.mystery-toast.visible { opacity: 1; transform: translateY(0) scale(1); }
.mystery-toast-close {
  position: absolute;
  top: 0.5rem; right: 0.6rem;
  background: none; border: none;
  color: rgba(203,213,225,0.6);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.2rem;
}
.mystery-toast-close:hover { color: #fff; }
.mystery-toast-head { font-weight: 800; font-size: 0.92rem; margin-bottom: 0.4rem; }
.mystery-toast .mystery-unlock-block { margin: 0.4rem 0 0; padding: 0.9rem; }
.mystery-toast-uso { font-size: 0.74rem; color: rgba(147,197,253,0.75); margin: 0.55rem 0 0; text-align: center; }
@media (max-width: 520px) {
  .mystery-toast { left: 1rem; right: 1rem; max-width: none; }
}

.w26-reveal-inner p {
  font-size: 0.88rem; color: var(--text-body); line-height: 1.7; margin-bottom: 0.8rem;
}

/* Quiz bonus */
.quiz-bonus-block {
  margin: 1rem 0 0.5rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-accent) 8%, transparent), color-mix(in srgb, var(--blue) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue-accent) 25%, transparent);
  border-radius: 10px; padding: 1rem 1.1rem;
}
.quiz-bonus-eyebrow {
  font-size: 0.72rem; font-weight: 700; color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem;
  display: block;
}
.quiz-bonus-slider, .quiz-bonus-secret {
  font-size: 0.82rem; color: var(--navy); line-height: 1.6; margin-bottom: 0.4rem;
}
.quiz-bonus-secret { color: var(--text-body); font-style: italic; margin-bottom: 0; }

/* Dark mode */
.dark-base .w26-slider-block { background: color-mix(in srgb, var(--blue) 6%, transparent); }
.dark-base .w26-reveal-block { border-color: color-mix(in srgb, var(--blue) 20%, transparent); }
.dark-base .w26-cmp-user { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.dark-base .w26-cmp-real { background: color-mix(in srgb, var(--blue) 15%, transparent); }
.dark-base .w26-reveal-msg { background: color-mix(in srgb, var(--blue) 8%, transparent); }
.dark-base .quiz-bonus-block { background: color-mix(in srgb, var(--blue) 8%, transparent); }

@media (max-width: 680px) {
  .w26-slider-block { padding: 1rem 1rem 1.2rem; border-radius: 0 10px 10px 0; }
  .w26-cmp-row { gap: 0.6rem; }
  .w26-cmp-val { font-size: 1.25rem; }
  .w26-reveal-inner { padding: 1rem; }
  .w26-bar-row { grid-template-columns: 75px 1fr 40px; gap: 0.5rem; }
  .w26-bar-label { font-size: 0.72rem; }
}

.dark-base .mob-yo-avatar-ring {
  background: conic-gradient(#3B82F6 0deg, #00E5FF 120deg, #1D4ED8 240deg, #3B82F6 360deg);
}


/* ── PÁGINAS ESTÁTICAS DE ARTÍCULO ─────────────────────────── */

/* Mini-hero: idéntico al hero principal, sin fondo propio (usa #bg-layer) */
/* ── Navbar sticky artículos estáticos ──────────────────────── */
.static-navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(235,242,255,0.97);
  border-bottom: 1px solid rgba(37,99,235,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, border-color 0.2s;
}
.dark-base .static-navbar { background: rgba(5,10,22,0.92); border-bottom-color: rgba(148,163,184,0.08); }
[data-theme="naranja"]   .static-navbar { background: rgba(18,12,6,0.93);   border-bottom-color: rgba(249,115,22,0.14); }
[data-theme="verde"]     .static-navbar { background: rgba(240,251,244,0.93); border-bottom-color: rgba(22,163,74,0.15); }
[data-theme="tormenta"]  .static-navbar { background: rgba(5,2,12,0.93);    border-bottom-color: rgba(168,85,247,0.14); }
[data-theme="cosmos"]    .static-navbar { background: rgba(6,4,8,0.93);     border-bottom-color: rgba(245,158,11,0.13); }
[data-theme="carmesi"]   .static-navbar { background: rgba(7,1,2,0.97);     border-bottom-color: rgba(200,16,46,0.14);  }
[data-theme="obsidiana"] .static-navbar { background: rgba(244,245,246,0.96); border-bottom-color: rgba(184,146,12,0.20); }
.static-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.static-navbar-brand { justify-self: start; }
.static-navbar-links { justify-self: center; }
.static-navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
}
.static-navbar-logo { height: 36px; mix-blend-mode: multiply; }
.dark-base .static-navbar-logo { mix-blend-mode: normal; filter: brightness(0) invert(1); }
.static-navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: linear-gradient(135deg, var(--blue), var(--blue-hover));
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  padding: 0.62rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37,99,235,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: box-shadow 0.2s, transform 0.15s;
  white-space: nowrap;
}
.static-navbar-cta svg { transition: transform 0.2s; }
.static-navbar-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.24);
}
.static-navbar-cta:hover svg { transform: translateX(3px); }

.static-navbar-links { display: flex; align-items: center; gap: 1.1rem; }
.static-navbar-link { font-size: 0.82rem; font-weight: 600; color: var(--text-body); text-decoration: none; white-space: nowrap; }
.static-navbar-link:hover { color: var(--blue); }

@media (max-width: 680px) {
  .static-navbar-link { display: none; }
}

.static-hero {
  padding: 0.8rem 2rem 0.6rem;
  text-align: center;
}

.static-hero-inner {
  max-width: 520px;
  margin: 0 auto;
}

/* Contenedor del logo hero */
.static-hero-visual {
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Líneas del cerebro: pulso escalonado */
.hbl {
  animation: hbl-flash 3.5s ease-in-out infinite;
}
.hbl:nth-child(3n)  { animation-delay: 0.4s; }
.hbl:nth-child(5n)  { animation-delay: 0.8s; }
.hbl:nth-child(7n)  { animation-delay: 1.2s; }
.hbl:nth-child(11n) { animation-delay: 1.6s; }

@keyframes hbl-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.22; }
}

/* Nodos: pulso de escala */
.hb-n {
  transform-box: fill-box;
  transform-origin: center;
  animation: hbn-pulse 4s ease-in-out infinite;
}
.hb-n.d0  { animation-delay: 0s; }
.hb-n.d1  { animation-delay: 0.25s; }
.hb-n.d2  { animation-delay: 0.5s; }
.hb-n.d3  { animation-delay: 0.75s; }
.hb-n.d4  { animation-delay: 1s; }
.hb-n.d5  { animation-delay: 1.25s; }
.hb-n.d6  { animation-delay: 1.5s; }
.hb-n.d7  { animation-delay: 1.75s; }
.hb-n.d8  { animation-delay: 2s; }
.hb-n.d9  { animation-delay: 2.25s; }
.hb-n.d10 { animation-delay: 2.5s; }
.hb-n.d11 { animation-delay: 2.75s; }
.hb-n.d12 { animation-delay: 3s; }
.hb-n.d13 { animation-delay: 3.25s; }
.hb-n.d14 { animation-delay: 0.1s; }
.hb-n.d15 { animation-delay: 0.6s; }
.hb-n.d16 { animation-delay: 1.1s; }
.hb-n.d17 { animation-delay: 1.6s; }
.hb-n.d18 { animation-delay: 2.1s; }
.hb-n.d19 { animation-delay: 2.6s; }

@keyframes hbn-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.25); }
}

/* Nodo central más prominente */
.hbn-c {
  animation-duration: 3s;
}

/* Anillos de pulso sináptico: expand + fade */
.hb-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: hbp-ring 3s ease-out infinite;
}
.hbp0 { animation-delay: 0s; }
.hbp1 { animation-delay: 0.75s; }
.hbp2 { animation-delay: 1.5s; }
.hbp3 { animation-delay: 2.25s; }

@keyframes hbp-ring {
  0%   { transform: scale(1);   opacity: 0.85; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* Logo encima del cerebro, mismo tamaño que .hero-logo */
.static-hero-logo {
  position: relative;
  z-index: 1;
  width: 110px;
  height: auto;
  animation: logo-breathe 5s ease-in-out infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blue) 20%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--blue-accent) 12%, transparent));
}
.dark-base .static-hero-logo {
  filter: invert(0.9) brightness(1.5) drop-shadow(0 0 12px color-mix(in srgb, var(--blue-accent) 40%, transparent));
  animation-name: logo-breathe-dark;
}

/* Título y tagline: heredan estilos de .hero h1 / .hero p */
.static-hero-title {
  font-size: clamp(1.75rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--navy);
  margin: 0 0 0.55rem;
  line-height: 1.15;
}

.static-hero-tagline {
  font-size: 0.93rem;
  color: var(--text-body);
  font-weight: 400;
  max-width: 400px;
  margin: 0 auto 1.1rem;
  line-height: 1.5;
}

.static-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}

.static-hero-cta:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
}

.static-art-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding: 2.5rem 1.5rem 4rem;
}

/* ── Layout dos columnas: artículo + sidebar ────────────────── */
.static-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  align-items: start;
}
/* Piezas de Fuera de Bata: solo el artículo, centrado y legible, sin lateral */
body.fdb-page .static-layout {
  max-width: 820px;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body.fdb-page .static-sidebar { display: none; }
body.fdb-page .static-art-main { overflow-x: clip; }
body.fdb-page .static-art-wrap,
body.fdb-page :is(.weekly-featured-card, .article-content) { min-width: 0; max-width: 100%; }
body.fdb-page .static-art-wrap { overflow-wrap: anywhere; word-break: break-word; }
body.fdb-page .static-art-wrap :is(.guia-tabla-wrap, pre) { max-width: 100%; }
.static-sidebar {
  position: sticky;
  top: 72px;
}
.static-sidebar-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}
.static-sidebar-heading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin: 0 0 1rem;
}
.static-sidebar-article {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.static-sidebar-article:last-of-type { border-bottom: none; }
.static-sidebar-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
}
.static-sidebar-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  transition: color 0.15s;
}
.static-sidebar-article:hover .static-sidebar-title { color: var(--blue); }
.static-sidebar-cta {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  transition: background 0.2s;
}
.static-sidebar-cta:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); }

.static-art-wrap {
  max-width: none;
  margin: 0 auto;
}

.static-breadcrumb {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
}
.static-breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}
.static-breadcrumb a:hover { text-decoration: underline; }
.static-breadcrumb [aria-current] { color: var(--text-body); }

.static-art-header {
  margin-bottom: 2rem;
}
.static-art-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin: 0.75rem 0 0.9rem;
}
.static-art-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.3rem;
}
.static-art-source-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}

.static-art-body {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  margin-bottom: 2rem;
}

.static-art-cta {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--blue-accent) 8%, transparent),
    color-mix(in srgb, var(--blue) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 16px;
}
.static-art-cta p {
  font-size: 0.92rem;
  color: var(--text-body);
  margin-bottom: 1rem;
}
.static-art-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blue);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.static-art-cta-btn:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .static-layout { grid-template-columns: 1fr; gap: 0; }
  .static-sidebar { position: static; margin-top: 1.5rem; }
  .static-sidebar-inner { border-radius: 12px; }
}

@media (max-width: 680px) {
  .static-navbar-inner     { padding: 0 1rem; }
  .static-navbar-brand span { display: none; }
  .static-hero             { padding: 0.6rem 1rem 0.5rem; }
  .static-hero-logo        { width: 72px; }
  .static-hero-title       { font-size: 1.4rem; }
  .static-hero-tagline     { display: none; }
  .static-art-main         { padding: 1.75rem 1rem 3rem; }
  .static-art-body         { padding: 1.25rem 1.1rem; border-radius: 12px; }
  .static-art-cta          { padding: 1.5rem 1rem; }
  .static-related-grid     { grid-template-columns: 1fr; }
}

.dark-base .static-art-body { background: var(--card-bg); }

/* ── Artículos relacionados (página estática) ──────────────── */
.static-related {
  margin-bottom: 2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
}
.static-related h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.9rem;
}
.static-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.static-related-list li {
  font-size: 0.88rem;
}
.static-related-list a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.static-related-list a:hover { text-decoration: underline; }
.static-related-cat {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

/* ── Related cards grid ─────────────────────────────────────── */
.static-related-heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 1.1rem;
}
.static-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.static-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s;
}
.static-related-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.static-related-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue);
}
.static-related-card-title {
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.35;
}
.static-related-card-summary {
  font-size: 0.77rem;
  color: var(--text-body);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── FAQ (página estática de artículo) ─────────────────────── */
.static-faq {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.static-faq h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 1rem;
}
.static-faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.6rem;
}
.static-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
}
.static-faq-item p {
  font-size: 0.85rem;
  color: var(--text-body);
  margin: 0.6rem 0 0;
  line-height: 1.6;
}

/* ── Página de categoría ────────────────────────────────────── */
.static-cat-header {
  margin-bottom: 2rem;
}
.static-cat-header h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}
.static-cat-header p {
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.6;
}

.cat-article-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cat-article-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s, transform 0.15s;
}
.cat-article-item:hover { border-color: var(--blue); transform: translateY(-1px); }
.cat-article-item a {
  display: block;
  text-decoration: none;
  padding: 1.1rem 1.4rem;
}
.cat-article-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--blue);
  margin-bottom: 0.4rem;
}
.cat-article-item h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.3rem;
  line-height: 1.4;
}
.cat-article-item p {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

/* ── Página de autor ────────────────────────────────────────── */
.static-art-wrap-narrow { max-width: 1080px; margin: 0 auto; }

.author-ficha {
  position: relative;
  display: grid;
  grid-template-columns: 168px 1fr;
  align-items: center;
  gap: 2.4rem;
  margin: 1.5rem 0 2.5rem;
  padding: 3rem 3.2rem;
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, var(--card-bg)) 0%, var(--card-bg) 60%);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.author-ficha::before {
  content: '';
  position: absolute;
  top: -70%; left: 10%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue-accent) 16%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.author-ficha-photo {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent), 0 10px 30px rgba(11,19,43,0.18);
}
.author-ficha-body { position: relative; text-align: left; }
.author-ficha h1 {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.author-ficha-role {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.1px;
  margin: 0 0 0.4rem;
}
.author-role-sep {
  color: color-mix(in srgb, var(--navy) 30%, transparent);
  margin: 0 0.15rem;
  font-weight: 400;
}
.author-ficha-location {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
}
.author-ficha-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* ── Credenciales: barra de stats ─────────────────────────────── */
.author-stats-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.author-stat {
  flex: 1 1 0;
  min-width: 160px;
  padding: 1.4rem 1.6rem;
  border-left: 1px solid var(--card-border);
}
.author-stat:first-child { border-left: none; }
.author-stat-value { font-size: 1rem; font-weight: 800; color: var(--navy); margin: 0 0 0.3rem; line-height: 1.3; }
.author-stat-label { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.4; }

@media (max-width: 900px) {
  .author-ficha { grid-template-columns: 1fr; text-align: center; padding: 2.6rem 2rem; }
  .author-ficha-photo { margin: 0 auto; }
  .author-ficha-body { text-align: center; }
  .author-ficha-ctas { justify-content: center; }
}
@media (max-width: 680px) {
  .author-ficha {
    grid-template-columns: 58px 1fr;
    align-items: center;
    text-align: left;
    gap: 0.9rem;
    margin: 0.5rem 0 1.6rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
  }
  .author-ficha-photo { width: 58px; height: 58px; margin: 0; }
  .author-ficha-body { text-align: left; min-width: 0; }
  .author-ficha h1 { font-size: 1.2rem; margin-bottom: 0.15rem; }
  .author-ficha-role { font-size: 0.82rem; margin-bottom: 0.15rem; }
  .author-ficha-location { font-size: 0.72rem; margin-bottom: 0.75rem; }
  .author-ficha-ctas { justify-content: flex-start; flex-wrap: wrap; gap: 0.4rem; }
  .author-ficha-cta-primary,
  .author-ficha-cta-secondary { font-size: 0.7rem; padding: 0.38rem 0.62rem; white-space: nowrap; }

  .author-stats-bar { flex-direction: column; margin-bottom: 2rem; }
  .author-stat { border-left: none; border-top: 1px solid var(--card-border); padding: 1rem 0; min-width: 0; }
  .author-stat:first-child { border-top: none; }
}
.author-ficha-cta-primary {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s;
}
.author-ficha-cta-primary:hover { background: var(--blue-hover); }
.author-ficha-cta-secondary {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--card-border);
  padding: 0.62rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s;
}
.author-ficha-cta-secondary:hover { border-color: var(--blue); color: var(--blue); }

.static-author-arts-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 1rem;
}

.author-bio {
  margin: 2rem 0;
}
.author-bio h2 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.9rem;
}
.author-bio p {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 0.9rem;
}
.author-bio p:last-child { margin-bottom: 0; }

.cat-article-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.4rem;
  padding: 0 1.4rem 1.1rem;
}
.cat-article-item a.cat-article-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue);
  background: none;
  border-radius: 0;
  text-decoration: none;
  box-shadow: none;
}
.cat-article-item a.cat-article-cta-alt { color: var(--text-muted); }
.cat-article-item a.cat-article-cta svg { transition: transform 0.18s; }
.cat-article-item a.cat-article-cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cat-article-item a.cat-article-cta:hover svg { transform: translateX(2px); }
.author-ficha-explore {
  text-align: center;
  margin-top: 2rem;
}
.author-ficha-explore a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.author-ficha-explore a:hover { color: var(--blue-hover); }

@media (max-width: 680px) {
  .static-related   { padding: 1.1rem 1.1rem; }
  .cat-article-item a { padding: 0.9rem 1.1rem; }
  .cat-article-links { padding: 0 1.1rem 0.9rem; }
  .cat-article-item a.cat-article-cta { margin: 0; padding: 0; }
}

/* ── Buscador ───────────────────────────────────────────────── */
.static-navbar-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(148,163,184,0.12);
  border: none;
  color: var(--text-body);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  flex-shrink: 0;
}
.static-navbar-search-btn:hover { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }

.buscador-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(3, 8, 22, 0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1.5rem 1.5rem;
}
.buscador-overlay[hidden] { display: none; }

.buscador-card {
  background: rgba(247, 249, 255, 0.99);
  border-radius: 20px;
  width: 100%; max-width: 560px;
  max-height: 78vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 4px 16px color-mix(in srgb, var(--blue) 10%, transparent);
  overflow: hidden;
  position: relative;
}

.buscador-close {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 38px; height: 38px;
  background: rgba(148,163,184,0.12); border: none; border-radius: 10px;
  cursor: pointer; color: var(--text-body);
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.buscador-close:hover { background: rgba(148,163,184,0.26); }

.buscador-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.3rem 3.2rem 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}
.buscador-header input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--navy);
}
.buscador-header input::placeholder { color: var(--text-muted); }

.buscador-results {
  overflow-y: auto;
  padding: 0.6rem;
}

.buscador-hint {
  padding: 1.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

.buscador-result {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s;
}
.buscador-result:hover, .buscador-result:focus-visible { background: color-mix(in srgb, var(--blue) 7%, transparent); }
.buscador-result-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--blue); }
.buscador-result strong { font-size: 0.92rem; color: var(--navy); line-height: 1.35; }
.buscador-result p { font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
.buscador-result-libro { font-size: 0.74rem; color: var(--blue); margin-top: 0.1rem; }

.dark-base .buscador-card { background: rgba(8, 16, 34, 0.98); }
.dark-base .buscador-header input { color: #E2E8F0; }
.dark-base .buscador-close { background: rgba(148,163,184,0.10); }
.dark-base .static-navbar-search-btn { background: rgba(148,163,184,0.10); color: #C0D0E4; }

@media (max-width: 600px) {
  .buscador-overlay { padding: 1.2rem; align-items: center; }
  .buscador-card { max-height: 88vh; }
}

/* ── Rutas de Aprendizaje ───────────────────────────────────── */

/* Banner en la cabecera del artículo (paso actual) */
.ruta-banner {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--blue) 20%, transparent);
}
.ruta-banner-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.ruta-banner-label { font-size: 0.78rem; font-weight: 700; color: var(--navy); }
.ruta-banner-paso { font-size: 0.72rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.3px; }
.ruta-banner-dots { display: flex; gap: 0.4rem; }
.ruta-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 22%, transparent); }
.ruta-dot--visto { background: var(--blue); }
.ruta-dot--activo { background: var(--navy); transform: scale(1.25); }

/* CTA al siguiente paso (dentro del artículo, distinta de "Seguir leyendo") */
.ruta-siguiente {
  margin-top: 1.3rem;
  padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--blue);
}
.ruta-siguiente p { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--text-body); }
.ruta-siguiente p strong { color: var(--navy); }
.ruta-siguiente-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.15rem;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}
.ruta-siguiente-btn:hover { background: var(--blue-hover); }

/* Cierre al terminar la ruta (último paso) */
.ruta-finish {
  margin-top: 1.3rem;
  padding: 1.2rem 1.3rem;
  border-radius: 14px;
  background: color-mix(in srgb, #10B981 6%, transparent);
  border: 1.5px solid color-mix(in srgb, #10B981 24%, transparent);
}
.ruta-finish h3 { font-size: 0.98rem; font-weight: 800; color: var(--navy); margin: 0 0 0.3rem; }
.ruta-finish > p { font-size: 0.84rem; color: var(--text-body); margin: 0 0 0.8rem; }
.ruta-finish-links { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.9rem; }
.ruta-finish-link { font-size: 0.84rem; font-weight: 600; color: var(--blue); text-decoration: none; }
.ruta-finish-link:hover { text-decoration: underline; }
.ruta-finish-otras { font-size: 0.82rem; font-weight: 700; color: var(--navy); text-decoration: none; }
.ruta-finish-otras:hover { color: var(--blue); }

/* Cabecera premium de /rutas/ */
.ruta-hero-header {
  position: relative;
  padding: 2.5rem 2.4rem;
  margin-bottom: 2rem;
  border-radius: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.85);
  overflow: hidden;
}
.dark-base .ruta-hero-header { box-shadow: var(--card-shadow); }
.ruta-hero-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 15%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.ruta-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pill-bg);
  box-shadow: var(--pill-shadow);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
  position: relative;
}
.ruta-hero-header h1 {
  font-size: clamp(1.7rem, 4.2vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.22;
  margin: 0 0 0.9rem;
  max-width: 20ch;
  position: relative;
}
.ruta-hero-header > p {
  font-size: 0.98rem;
  color: var(--text-body);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 0 1.6rem;
  position: relative;
}
.ruta-hero-stats { display: flex; flex-wrap: wrap; gap: 2rem; position: relative; }
.ruta-hero-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.ruta-hero-stat strong { font-size: 1.4rem; font-weight: 800; color: var(--blue); line-height: 1; }
.ruta-hero-stat span { font-size: 0.76rem; color: var(--text-muted); font-weight: 600; }

/* Landing /rutas/ */
.ruta-landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4rem;
}
.ruta-landing-card {
  --accent: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 1.8rem 1.6rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.ruta-landing-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--blue-accent) 100%);
}
.ruta-landing-card:nth-child(1) { --accent: var(--blue); }
.ruta-landing-card:nth-child(2) { --accent: color-mix(in srgb, var(--blue) 40%, var(--blue-accent)); }
.ruta-landing-card:nth-child(3) { --accent: var(--blue-accent); }
.ruta-landing-card:nth-child(4) { --accent: color-mix(in srgb, var(--navy) 35%, var(--blue)); }

.ruta-landing-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--card-shadow), 0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}

.ruta-landing-card-num {
  position: absolute;
  top: 0.4rem;
  right: 1.2rem;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  opacity: 0.06;
  pointer-events: none;
}

.ruta-landing-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-bottom: 0.2rem;
}

.ruta-landing-card-badge { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.3px; }
.ruta-landing-card h2 { font-size: 1.12rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.35; position: relative; }
.ruta-landing-card p { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.55; position: relative; }
.ruta-landing-card-progreso[hidden] { display: none; }
.ruta-landing-card-progreso {
  font-size: 0.72rem;
  font-weight: 700;
  color: #10B981;
  background: color-mix(in srgb, #10B981 12%, transparent);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.ruta-landing-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 0.3rem;
  transition: gap 0.18s;
}
.ruta-landing-card:hover .ruta-landing-card-cta { gap: 0.55rem; }

/* Portada de una ruta individual */
.ruta-portada-meta { display: inline-block; margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-muted); }
.ruta-portada-lista { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.5rem 0; }
.ruta-portada-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color 0.18s;
}
.ruta-portada-item:hover { border-color: var(--blue); }
.ruta-portada-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ruta-portada-item-body { display: flex; flex-direction: column; gap: 0.15rem; }
.ruta-portada-item-body strong { font-size: 0.92rem; color: var(--navy); line-height: 1.4; }
.ruta-portada-item-meta { font-size: 0.76rem; color: var(--text-muted); }
.ruta-portada-empezar {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
}
.ruta-portada-empezar:hover { background: var(--blue-hover); }

.dark-base .ruta-portada-item,
.dark-base .ruta-siguiente { background: rgba(255,255,255,0.03); border-color: rgba(148,163,184,0.14); }

@media (max-width: 680px) {
  .ruta-hero-header { padding: 1.8rem 1.5rem; }
  .ruta-hero-stats { gap: 1.4rem; }
  .ruta-landing-grid { grid-template-columns: 1fr; }
  .ruta-landing-card-num { font-size: 2.8rem; }
  .ruta-banner-top { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

/* ── Modal "Escribir en Fuera de Bata" (mismo diseño que /fuera-de-bata/) ── */
.fdb-modal {
  position: fixed; inset: 0; z-index: 9800;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(2, 6, 18, 0.8);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  animation: fdb-modal-fade .32s ease;
}
.fdb-modal[hidden] { display: none; }
@keyframes fdb-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.fdb-modal-card {
  position: relative; width: 100%; max-width: 600px;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; overflow-x: hidden;
  padding: 1.5rem 2.2rem 1.45rem; border-radius: 22px;
  background:
    radial-gradient(ellipse 72% 46% at 8% 0%, color-mix(in srgb, var(--blue-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 64% 52% at 94% 100%, color-mix(in srgb, var(--blue) 9%, transparent) 0%, transparent 58%),
    var(--card-bg);
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--card-border));
  box-shadow: 0 28px 80px rgba(11, 19, 43, 0.28), 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent);
  animation: fdb-modal-rise .46s cubic-bezier(.22,.61,.36,1) both;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 32%, transparent) transparent;
}
.fdb-modal-card::-webkit-scrollbar { width: 8px; }
.fdb-modal-card::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 30%, transparent); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
@keyframes fdb-modal-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fdb-modal-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-accent)); opacity: 0.85;
}
.fdb-modal-close {
  position: absolute; top: 0.85rem; right: 0.85rem; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--blue) 5%, var(--card-bg)); color: var(--text-body);
  cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.fdb-modal-close:hover { color: var(--blue); border-color: var(--blue); }
.fdb-modal-close svg { width: 14px; height: 14px; }
.fdb-modal-eyebrow {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 0.5rem; padding-right: 2.4rem;
}
.fdb-modal h2 {
  font-size: 1.26rem; font-weight: 800; color: var(--navy);
  line-height: 1.22; letter-spacing: -0.5px; margin: 0 0 0.5rem; text-wrap: balance;
  padding-right: 2.4rem;
}
.fdb-modal-lead { font-size: 0.92rem; color: var(--text-body); line-height: 1.45; margin: 0; }
.fdb-modal h3 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--blue); margin: 0.9rem 0 0.45rem;
}
.fdb-modal-steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.fdb-modal-steps li { font-size: 0.9rem; color: var(--navy); line-height: 1.4; padding-left: 0.2rem; }
.fdb-modal-steps li::marker { color: var(--blue); font-weight: 700; }
.fdb-modal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.36rem; }
.fdb-modal-list li {
  position: relative; padding-left: 1.8rem;
  font-size: 0.9rem; font-weight: 600; color: var(--navy); line-height: 1.38;
}
.fdb-modal-list li::before {
  content: ""; position: absolute; left: 0; top: 0.02rem;
  width: 17px; height: 17px; border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 40%, transparent);
}
.fdb-modal-list li::after {
  content: ""; position: absolute; left: 5px; top: 5px;
  width: 6px; height: 3px; border-left: 1.8px solid var(--blue); border-bottom: 1.8px solid var(--blue);
  transform: rotate(-45deg);
}
.fdb-modal-note {
  margin: 0.9rem 0 0; padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  font-size: 0.88rem; color: var(--navy); line-height: 1.45;
}
.fdb-modal-kicker { margin: 0.9rem 0 0.6rem; font-size: 0.98rem; font-weight: 700; color: var(--navy); line-height: 1.35; }
.fdb-modal-mail-label { margin: 0 0 0.2rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.fdb-modal-mail { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--blue); letter-spacing: -0.2px; user-select: all; overflow-wrap: anywhere; }
.fdb-modal-after { margin: 0.55rem 0 0; font-size: 0.82rem; color: var(--text-muted); }
body.fdb-modal-open { overflow: hidden; }
@keyframes fdb-sheet-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fdb-modal, .fdb-modal-card { animation: none; }
  .fdb-modal-close { transition: none; }
}
@media (max-width: 560px) {
  .fdb-modal { padding: 0; align-items: flex-end; }
  .fdb-modal-card {
    max-width: none; max-height: 94vh; max-height: 94dvh;
    padding: 1.5rem 1.35rem calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    animation: fdb-sheet-up .4s cubic-bezier(.22,.61,.36,1) both;
  }
  .fdb-modal-card::before { border-radius: 20px 20px 0 0; }
  .fdb-modal-close { top: 0.7rem; right: 0.7rem; }
  .fdb-modal h2 { font-size: 1.16rem; }
  .fdb-modal-mail { font-size: 1rem; }
}