@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; }

: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 1px 3px rgba(11,19,43,0.06), 0 6px 20px rgba(11,19,43,0.09), 0 16px 48px rgba(11,19,43,0.06);
  --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), 0 4px 18px color-mix(in srgb, var(--blue-accent) 18%, transparent);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  background-color: #F7F9FF;
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, color-mix(in srgb, var(--blue-accent) 7%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, rgba(157,0,255,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 55% 92%, color-mix(in srgb, var(--blue) 6%, transparent) 0%, transparent 55%);
  color: var(--navy);
  line-height: 1.6;
  min-height: 100vh;
}

/* ── CANVAS ── */
#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.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  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.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  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;

  /* Centro blanquecino semitransparente — sin ningún relleno azul */
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* 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);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blue) 15%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--blue-accent) 9%, transparent));
  }
  50% {
    transform: scale(1.024);
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--blue) 32%, transparent)) drop-shadow(0 0 32px color-mix(in srgb, var(--blue-accent) 22%, transparent));
  }
}

.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;
  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.88rem;
  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-exp {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 30%, transparent);
}

.hqa-exp:hover   { background: var(--blue-hover); border-color: var(--blue-hover); }

.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;
}

/* ── TARJETA BASE ── */
.doc-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  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: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;
  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;
}

.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;
}

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

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

.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); }

.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.90);
  border: 1.5px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 12px; padding: 4px;
  width: 100%;
  position: relative;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  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 PANELS ── */
.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: panel-fade-in 0.22s ease forwards;
}

@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; }
}

/* ══════════════════════════════════════════════════════════════
   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: 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);
  overflow: hidden;
}

/* 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;
}

/* Subtle ambient glow behind card */
.onboarding-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--blue-accent) 7%, transparent) 0%,
    color-mix(in srgb, var(--blue) 4%, transparent) 50%,
    rgba(124, 58, 237, 0.03) 100%
  );
  z-index: -1;
  pointer-events: none;
}

@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); }
}

/* 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-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;
}

/* 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;
  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: 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);
}

.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; }

@media (max-width: 480px) {
  .onboarding-card  { padding: 2rem 1.6rem 1.8rem; border-radius: 22px; }
  .onboarding-title { font-size: 1.18rem; }
  .onboarding-next  { padding: 0.72rem 1.55rem; }
}

/* ══════════════════════════════════════════════════════════════
   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);
}

/* ── ARTÍCULO SEMANAL ── */
.weekly-featured-card {
  background: rgba(255,255,255,0.96);
  border-radius: 20px; padding: 2rem;
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--blue);
  box-shadow: var(--card-shadow), 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;
}

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

.author-card {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-radius: 12px; padding: 1rem 1.2rem;
  display: flex; align-items: center; gap: 1rem; margin: 1rem 0;
}

.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: transparent;
  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 span { font-size: 0.78rem; color: var(--text-muted); }

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

.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 {
  font-size: 1rem; font-weight: 700; color: var(--navy);
  margin: 1.5rem 0 0.6rem; letter-spacing: -0.2px;
}

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

.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 4rem;
  transition: grid-template-columns 0.28s ease-out,
              gap 0.28s ease-out;
}

/* 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;
}

/* ── EXPERIMENTO INTERACTIVO ── */
.exp-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--card-border); border-radius: 20px;
  padding: 2rem; box-shadow: var(--card-shadow);
  min-height: 240px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Start screen */
.exp-start { text-align: center; padding: 1rem 0; }
.exp-icon { font-size: 3rem; margin-bottom: 1rem; }

/* ── CEREBRO NEURONAL SVG ── */
.neural-brain-svg {
  width: 88px; height: 88px;
  display: block; margin: 0 auto 1.4rem;
  overflow: visible;
  animation: brain-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Pulsación de brillo — simula actividad eléctrica continua */
@keyframes brain-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--blue-accent) 30%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--blue) 18%, transparent));
    opacity: 0.95;
  }
  50% {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--blue-accent) 70%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--blue) 40%, transparent));
    opacity: 1;
  }
}

/* Cada path del cerebro con animación de color alternada */
.brain-outline-path {
  animation: brain-stroke 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.brain-outline-path:nth-child(2n) { animation-delay: 0.4s; }
.brain-outline-path:nth-child(3n) { animation-delay: 0.8s; }

@keyframes brain-stroke {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 1;    }
}

/* Líneas: pulso escalonado por clase delay */
.nbl { animation: nb-flash 3s ease-in-out infinite; }
.nbl.d1 { animation-delay: 0s; }
.nbl.d2 { animation-delay: 0.5s; }
.nbl.d3 { animation-delay: 1s; }
.nbl.d4 { animation-delay: 1.5s; }
.nbl.d5 { animation-delay: 2s; }
.nbl.d6 { animation-delay: 2.5s; }

@keyframes nb-flash {
  0%, 100% { opacity: 0.20; }
  50%       { opacity: 0.65; }
}

/* Nodos: parpadeo más lento */
.nbn { animation: nb-dot 2.8s ease-in-out infinite; }
.nbn.d1 { animation-delay: 0s; }
.nbn.d2 { animation-delay: 0.38s; }
.nbn.d3 { animation-delay: 0.76s; }
.nbn.d4 { animation-delay: 1.14s; }
.nbn.d5 { animation-delay: 1.52s; }
.nbn.d6 { animation-delay: 1.9s; }

@keyframes nb-dot {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 0.30; }
}

/* Nodo central: pulso más pronunciado */
.nbn-core {
  animation: nb-core 2s ease-in-out infinite;
  transform-origin: 60px 46px;
}

@keyframes nb-core {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.55; transform: scale(0.72); }
}
.exp-start h3 { font-size: 1.2rem; font-weight: 800; color: var(--navy); margin-bottom: 0.7rem; }
.exp-start p { font-size: 0.88rem; color: var(--text-body); line-height: 1.7; margin-bottom: 1.6rem; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Question */
.exp-q-wrapper { display: flex; flex-direction: column; gap: 1.2rem; }
.exp-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.exp-sesgo-tag { font-size: 0.70rem; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.5px; }
.exp-counter { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.exp-progress-track { height: 4px; background: rgba(148,163,184,0.2); border-radius: 99px; }
.exp-progress-fill { height: 100%; background: var(--blue); border-radius: 99px; transition: width 0.35s ease; }
.exp-q-text { font-size: 1rem; font-weight: 600; color: var(--navy); line-height: 1.6; }
.exp-options { display: flex; flex-direction: column; gap: 0.6rem; }
.exp-option {
  text-align: left; padding: 0.75rem 1.1rem;
  border: 1.5px solid rgba(148,163,184,0.25); border-radius: 10px;
  background: rgba(255,255,255,0.6); font-family: inherit;
  font-size: 0.88rem; font-weight: 500; color: var(--navy);
  cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.exp-option:hover { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent); color: var(--blue); }

/* Result */
.exp-result { display: flex; flex-direction: column; gap: 1rem; }
.exp-result-badge {
  display: inline-flex; align-self: flex-start;
  padding: 0.3rem 0.9rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700;
}
.exp-correct   { background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.3); }
.exp-incorrect { background: rgba(239,68,68,0.10); color: #DC2626; border: 1px solid rgba(239,68,68,0.25); }
.exp-explain { font-size: 0.88rem; color: var(--text-body); line-height: 1.75; }
.exp-bars { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.3rem 0; }
.exp-bar-row { display: flex; flex-direction: column; gap: 0.25rem; }
.exp-bar-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.exp-bar-track { height: 8px; background: rgba(148,163,184,0.18); border-radius: 99px; overflow: hidden; }
.exp-bar-fill { height: 100%; border-radius: 99px; transition: width 0.85s cubic-bezier(0.4,0,0.2,1); }
.exp-bar-wrong { background: linear-gradient(90deg, #EF4444, #F97316); }
.exp-bar-right { background: linear-gradient(90deg, #10B981, var(--blue)); }

/* Final */
.exp-final { text-align: center; padding: 0.5rem 0; }
.exp-score-display {
  font-size: 5rem; font-weight: 800; color: var(--navy);
  letter-spacing: -3px; line-height: 1; margin-bottom: 1rem;
}
.exp-score-display span { font-size: 2rem; color: var(--text-muted); font-weight: 600; }
.exp-final-titulo {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  margin: 0 auto 0.5rem;
}
.exp-final-msg { font-size: 0.92rem; color: var(--text-body); line-height: 1.75; max-width: 480px; margin: 0 auto 1.6rem; }

/* Buttons */
.exp-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.8rem; background: var(--blue); color: white;
  border: none; border-radius: 10px; font-family: inherit;
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.exp-btn-primary:hover { background: var(--blue-hover); transform: translateY(-1px); }
.exp-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.65rem 1.5rem; background: transparent; color: var(--blue);
  border: 1.5px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 10px;
  font-family: inherit; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.exp-btn-secondary:hover { background: var(--blue); color: white; border-color: var(--blue); }

/* ── RADAR DE MITOS (T/F interactivo) ── */
#mitos-cards {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  touch-action: pan-x;
}
#mitos-cards::-webkit-scrollbar { display: none; }
#mitos-extra { display: contents; }

.mitos-counter {
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: -0.3rem 0 0.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.mito-tf-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.90);
  border: 1px solid var(--card-border);
  border-radius: 14px; padding: 1.1rem 1.2rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: box-shadow 0.2s;
}
.mito-tf-card.answered { border-color: rgba(148,163,184,0.15); }

.mito-statement {
  font-size: 0.84rem; font-weight: 600; color: var(--navy);
  line-height: 1.5; margin-bottom: 0.75rem; font-style: italic;
}

.mito-tf-btns { display: flex; gap: 0.45rem; }

.tf-btn {
  flex: 1; padding: 0.42rem 0.7rem;
  border-radius: 8px; font-family: inherit;
  font-size: 0.76rem; font-weight: 700; cursor: pointer;
  border: 1.5px solid; transition: background 0.18s, border-color 0.18s, color 0.18s;
}
/* Estado neutro — fondo casi blanco, texto suave con tinte de color */
.tf-true  {
  background: rgba(16,185,129,0.05);
  color: #1E5C40;
  border-color: rgba(16,185,129,0.22);
}
.tf-false {
  background: rgba(190,60,55,0.04);
  color: #7A2828;
  border-color: rgba(190,80,75,0.20);
}

/* Hover — verde esmeralda para Verdadero, coral elegante para Falso */
.tf-true:hover:not(:disabled) {
  background: rgba(22,163,74,0.10);
  color: #166534;
  border-color: rgba(22,163,74,0.38);
}
.tf-false:hover:not(:disabled) {
  background: rgba(210,80,65,0.08);
  color: #8B3020;
  border-color: rgba(200,75,60,0.32);
}

.tf-btn:disabled { cursor: default; }

/* Confirmación tras responder */
.tf-btn.tf-chosen-correct {
  background: rgba(16,185,129,0.14);
  color: #065F46;
  border-color: rgba(16,185,129,0.55);
}
.tf-btn.tf-chosen-wrong {
  background: rgba(190,55,50,0.10);
  color: #7F1D1D;
  border-color: rgba(185,55,50,0.45);
  opacity: 0.6;
}
.tf-btn.tf-show-correct {
  background: rgba(16,185,129,0.14);
  color: #065F46;
  border-color: rgba(16,185,129,0.55);
}

.mito-reveal {
  display: none; overflow: hidden; max-height: 0;
  transition: max-height 0.4s ease;
}
.mito-reveal.open { display: block; }

.mito-reveal-badge {
  display: inline-flex; padding: 0.22rem 0.7rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; margin: 0.65rem 0 0.45rem;
}
.mito-reveal-badge.badge-correct   { background: rgba(16,185,129,0.12); color: #059669; }
.mito-reveal-badge.badge-incorrect { background: rgba(239,68,68,0.10); color: #DC2626; }

.mito-evidence {
  font-size: 0.78rem; color: var(--text-body); line-height: 1.65;
}

/* ── 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; }
  .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 {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }
  .fav-nav-btn svg,
  .theme-toggle svg { width: 13px; height: 13px; }

  /* ── Hero ──────────────────────────────────────────── */
  .hero        { padding: 1.2rem 1.5rem 0.7rem; position: relative; }
  .hero-logo   { width: 90px; margin-bottom: 0.65rem; }
  .hero h1     { font-size: clamp(1.65rem, 5.5vw, 2rem); letter-spacing: -1px; }
  .hero p      {
    display: block;
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.55;
    max-width: 100%;
    margin: 0.45rem 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-exp           { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: none; }
  .hqa-exp:hover     { background: #1a2a4a; border-color: #1a2a4a; color: #fff; }
  .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; }

  /* Artículo semanal — tipografía editorial compacta */
  .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: 13px !important; line-height: 1.55 !important; color: var(--text-body) !important; margin-bottom: 0.8rem; }
  .article-content p    { font-size: 13px !important; line-height: 1.55 !important; color: var(--text-body) !important; margin-bottom: 0.5rem; }
  .article-subtitle     { font-size: 13px !important; font-weight: 700; margin: 0.85rem 0 0.35rem; }
  .aplicacion-block p   { font-size: 12px !important; line-height: 1.5; }
  .article-content      { margin-top: 0.6rem; }
  .article-blockquote   { margin: 0.75rem 0; padding: 0.6rem 0.8rem; }
  .article-blockquote p { font-size: 12px !important; line-height: 1.45; }
  .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.88rem; }
  .dashboard-layout { grid-template-columns: 1fr; grid-template-areas: "center" "right" "left"; padding: 0 1.2rem 3rem; }
  .main-content     { padding: 0 0 2rem; }
  .research-inner   { padding: 0; }
  .navbar-inner     { padding: 0 1.4rem; gap: 0.75rem; }
  .navbar-brand     { gap: 0.5rem; }
  .navbar-right     { gap: 0.55rem; }
  .footer-inner     { flex-direction: column; }
  .footer-right     { align-items: flex-start; }
  .footer-links     { flex-wrap: wrap; gap: 1rem; }
  .exp-card         { padding: 1.3rem; }
  .exp-score-display { font-size: 3.5rem; }
  .author-modal-card { padding: 2rem 1.4rem; }
  .info-modal-card  { padding: 2rem 1.4rem; }

  /* ── Mobile layout fixes: evitar desborde horizontal ── */
  .cat-selector     { grid-template-columns: repeat(2, 1fr); }
  .cat-btn          { white-space: normal; overflow: hidden; word-break: break-word; }
  .lib-cards-grid   { grid-template-columns: 1fr; }
  .sidebar-widget   { width: 100%; min-width: 0; box-sizing: border-box; }
  .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; }
}

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

.cat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.1rem 0.6rem 0.9rem;
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--blue) 16%, transparent);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(8px);
  font-family: inherit;
  font-size: 0.75rem;
  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: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.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);
}

.lib-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.2rem;
}

.lib-card {
  background: rgba(255,255,255,0.93);
  border: 1px solid 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;
  backdrop-filter: blur(8px);
}

.lib-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(11,19,43,0.11), 0 0 20px color-mix(in srgb, var(--blue) 9%, transparent);
  border-color: color-mix(in srgb, var(--blue) 32%, transparent);
}

/* Hover cromático por categoría */
.lib-card[data-cat="economia"]:hover {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--blue) 16%, transparent), 0 0 22px color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue) 42%, transparent);
}
.lib-card[data-cat="moda"]:hover {
  box-shadow: 0 10px 30px rgba(124,58,237,0.16), 0 0 22px rgba(124,58,237,0.11);
  border-color: rgba(124,58,237,0.42);
}
.lib-card[data-cat="derecho"]:hover {
  box-shadow: 0 10px 30px rgba(11,19,43,0.18), 0 0 22px color-mix(in srgb, var(--blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
}
.lib-card[data-cat="deporte"]:hover {
  box-shadow: 0 10px 30px rgba(16,185,129,0.16), 0 0 22px rgba(16,185,129,0.11);
  border-color: rgba(16,185,129,0.42);
}
.lib-card[data-cat="arte"]:hover {
  box-shadow: 0 10px 30px rgba(245,158,11,0.16), 0 0 22px rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.42);
}
.lib-card[data-cat="tecnologia"]:hover {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--blue) 14%, transparent), 0 0 22px color-mix(in srgb, var(--blue-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--blue-accent) 38%, transparent);
}

.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);
}

.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; }
}

/* ── RADAR DE MITOS en sidebar izquierdo ── */
.mitos-section .widget-header { margin-bottom: 0.8rem; }

/* ── LISTA DE EFECTOS ── */
.efectos-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.efecto-card {
  background: #FFFFFF;
  border: 1px solid #D8E4F4;
  border-left: 3px solid color-mix(in srgb, var(--blue) 28%, transparent);
  box-shadow: 0 1px 4px rgba(11,19,43,0.07), 0 4px 16px rgba(11,19,43,0.08), inset 0 1px 0 rgba(255,255,255,0.90);
  border-radius: 12px;
  padding: 0.95rem 1.2rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s, border-left-color 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
}

.efecto-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 35%, transparent);
  border-left: 3px solid var(--blue);
  box-shadow: 0 8px 22px rgba(11,19,43,0.14), 0 2px 6px color-mix(in srgb, var(--blue) 12%, transparent);
}

.dark-base .efecto-card {
  background: #1E293B;
  border-color: rgba(51,65,85,0.45);
  border-left: 3px solid color-mix(in srgb, var(--blue) 45%, transparent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

.dark-base .efecto-card:hover {
  background: #263548;
  border-color: rgba(51,65,85,0.80);
  border-left: 3px solid var(--blue);
  box-shadow: 0 8px 22px rgba(0,0,0,0.38), 0 2px 6px color-mix(in srgb, var(--blue) 18%, transparent);
}

.efecto-card strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}

.efecto-card span {
  font-size: 0.75rem;
  color: var(--text-body);
  line-height: 1.45;
}

/* ── 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: 2rem 1.4rem; }
}

/* ══════════════════════════════════════════════════════════════
   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);
}

.dark-base body {
  background-color: #07101E;
  background-image:
    radial-gradient(ellipse 80% 55% at 15% 25%, color-mix(in srgb, var(--blue-accent) 3%, transparent) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 85% 60%, color-mix(in srgb, var(--blue) 2%, 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-exp {
    background: color-mix(in srgb, var(--blue) 14%, transparent) !important;
    color: var(--blue) !important;
    border-color: color-mix(in srgb, var(--blue) 32%, transparent) !important;
  }
  .dark-base .hqa-exp:hover {
    background: color-mix(in srgb, var(--blue) 24%, transparent) !important;
    color: #7DD3FC !important;
  }
  .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-featured-card,
.dark-base .weekly-prev-card,
.dark-base .lib-card,
.dark-base .research-card {
  background: rgba(12,22,42,0.95);
  border-color: rgba(148,163,184,0.10);
}

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

.dark-base .mito-tf-card,
.dark-base .exp-card { background: rgba(12,22,42,0.92); }

.dark-base .efecto-card {
  background: #1E293B;
  border-color: rgba(51,65,85,0.5);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}

.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 { --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 .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 .mitos-section {
  background: rgba(8,16,34,0.82);
  border-color: color-mix(in srgb, #818CF8 18%, transparent);
  border-left-color: #6366F1;
  box-shadow: 0 2px 14px color-mix(in srgb, #6366F1 8%, transparent);
}
.dark-base .mitos-headline { color: #C4D0E3; }
.dark-base .mitos-eyebrow { color: #818CF8; }
.dark-base .mitos-nav-btn { color: #818CF8; border-color: color-mix(in srgb, #818CF8 30%, transparent); background: color-mix(in srgb, #6366F1 9%, transparent); }
.dark-base .mitos-nav-btn:hover { background: #4F46E5; border-color: #4F46E5; color: #ffffff; }
.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 .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 .tf-true  { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.22); color: #4ADE80; }
.dark-base .tf-false { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.22); color: #FC8181; }
.dark-base .tf-true:hover:not(:disabled)  { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.45); color: #34D399; }
.dark-base .tf-false:hover:not(:disabled) { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.40); color: #F87171; }

.dark-base .mito-reveal-badge.badge-correct   { background: rgba(16,185,129,0.15); }
.dark-base .mito-reveal-badge.badge-incorrect { background: rgba(239,68,68,0.13); }

.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% {
    filter: invert(0.9) brightness(1.4) drop-shadow(0 0 8px color-mix(in srgb, var(--blue-accent) 30%, transparent));
    transform: scale(1);
  }
  50% {
    filter: invert(0.9) brightness(1.6) drop-shadow(0 0 20px color-mix(in srgb, var(--blue-accent) 65%, transparent));
    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; }

/* 4 · Textos secundarios cortos: gancho de efectos y desc. de dilemas */
.dark-base .efecto-card span {
  color: #B0C4D8;
}

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

/* 5 · Descripción de la tarjeta-base del experimento */
.dark-base .exp-start p,
.dark-base .exp-q-text { color: #C4D0E3; }

.dark-base .exp-explain { color: #B0C4D8; }

/* 6 · Texto de declaraciones del Radar de Mitos */
.dark-base .mito-statement { color: #C4D0E3; }
.dark-base .mito-evidence  { color: #B0C4D8; }

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

/* ── BOTÓN FAVORITOS NAVBAR ── */
.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; }

.reading-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-accent) 0%, var(--blue) 100%);
  transition: width 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 */
.efectos-list.sk-init .efecto-card,
.docs-layout.sk-init .doc-card {
  position: relative;
  pointer-events: none;
}

.efectos-list.sk-init .efecto-card strong,
.efectos-list.sk-init .efecto-card span,
.docs-layout.sk-init .doc-card > * { opacity: 0; }

.efectos-list.sk-init .efecto-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  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;
}

.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: 5rem 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;
}

/* 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(4, 1fr);
  gap: 1.5rem;
  transition: opacity 0.22s ease;
}

/* ── FLIP CARD ── */
.flip-card {
  perspective: 1000px;
  height: 460px;
  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.5rem;
  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-book {
  font-size: 0.88rem;
  font-weight: 800;
  color: #DBEAFE;
  line-height: 1.35;
}

.flip-back-author {
  font-size: 0.73rem;
  color: rgba(147,197,253,0.75);
  font-weight: 500;
}

.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-book {
  font-size: 0.90rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.22rem;
  line-height: 1.3;
  padding-right: 1.2rem;
}

.bq-modal-author {
  font-size: 0.72rem;
  color: rgba(147,197,253,0.70);
  margin: 0 0 1rem;
}

.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.55rem 1rem;
  background: #FF9900;
  color: #111;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s, transform 0.15s;
  flex-shrink: 0;
}

.flip-back-btn:hover { background: #FFAD33; transform: translateY(-1px); }

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

@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; }
.efecto-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-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: rgba(148,163,184,0.05);
  border: 1.5px dashed rgba(148,163,184,0.25);
  border-radius: 14px;
}
.dark-base .favoritos-empty { border-color: rgba(148,163,184,0.12); }

@media (max-width: 680px) {
  .favoritos-grid { grid-template-columns: 1fr; }
  .fav-btn--doc   { top: 0.75rem; right: 0.75rem; }
}

.dark-base .efectos-list.sk-init .efecto-card::after,
.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.8rem 1.2rem 2.2rem; }
  .lstrip-book { flex-direction: column; gap: 1.2rem; padding: 1.4rem; }
  .lstrip-cover-wrap { width: 80px; }
  .lstrip-panel.open { max-height: 700px; }
}

/* ── Portada en flip cards del botiquín ── */
.flip-card-cover {
  width: 56px;
  height: 78px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
  flex-shrink: 0;
  align-self: flex-start;
}

.flip-card-cover-placeholder {
  width: 56px;
  height: 78px;
  border-radius: 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: none;
}

.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; }
.flip-card-cover[hidden] { display: none; }

/* Acciones (Amazon + otro libro) */
.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; }

.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;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 15%, transparent) transparent;
}

.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: 3.5rem 1.2rem 4rem; }
  .prop-field-row { flex-direction: column; align-items: stretch; }
  .prop-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   ACORDEONES PREMIUM — Radar de Mitos, Lista de Efectos,
   ¿Cuánto te manipula tu cerebro?
══════════════════════════════════════════════════════════════ */

/* ── 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);
}

/* ── Radar de Mitos — estilo editorial ── */
.mitos-accordion-btn {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent) 0%, color-mix(in srgb, #4F46E5 4%, transparent) 100%);
  border-left-color: #4F46E5;
}

/* ── Radar de Mitos — widget prominente ── */
.mitos-section {
  background: rgba(255,255,255,0.95);
  border: 1px solid color-mix(in srgb, #4F46E5 18%, transparent);
  border-left: 3px solid #4F46E5;
  border-radius: 16px;
  padding: 1.1rem 1.1rem 0.9rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 22px color-mix(in srgb, #4F46E5 10%, transparent), 0 8px 36px rgba(11,19,43,0.07), inset 0 1px 0 rgba(255,255,255,0.85);
  transition: box-shadow 0.22s;
}
.mitos-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #4F46E5, #2563EB 60%, transparent);
  border-radius: 16px 16px 0 0;
}
.mitos-widget-header { margin-bottom: 0.8rem; }
.mitos-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.mitos-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #4F46E5;
}
.mitos-headline {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin: 0 0 0.18rem;
}
.mitos-sub {
  font-size: 0.71rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.mitos-nav-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.mitos-nav-btn {
  background: color-mix(in srgb, #4F46E5 9%, transparent);
  border: 1px solid color-mix(in srgb, #4F46E5 26%, transparent);
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  color: #4F46E5;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
  font-family: inherit;
}
.mitos-nav-btn:hover {
  background: #4F46E5;
  border-color: #4F46E5;
  color: #ffffff;
}
.mitos-counter {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.8rem;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1;
}

/* ── Lista de Efectos — acordeón (desktop y móvil) ── */
.efectos-accordion-btn {
  display: flex;
  background: #FFFFFF;
  border: 1.5px solid #E8EEF4;
  border-left: 3px solid var(--blue);
  box-shadow: 0 4px 12px rgba(11,19,43,0.10);
  color: var(--navy);
  border-radius: 16px;
  padding: 1.05rem 1.1rem;
  font-size: 0.9rem;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.efectos-accordion-btn .accordion-btn-meta {
  color: var(--text-muted);
}

.efectos-accordion-btn .accordion-chevron {
  color: var(--text-muted);
}

.efectos-accordion-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(11,19,43,0.14);
  transform: translateY(-1px);
}

.efectos-accordion-btn[aria-expanded="true"] {
  border-radius: 16px 16px 0 0;
}

.efectos-widget-header-desktop { display: none; }

.efectos-content-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0;
  will-change: max-height, opacity;
  border: 1.5px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: color-mix(in srgb, var(--blue) 5%, #F0F7FF);
  transition:
    max-height 0.35s ease-out,
    opacity    0.25s ease;
}
.efectos-content-wrap.is-open {
  max-height: 1600px;
  opacity: 1;
  padding: 1rem;
}

/* ── 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);
}

.dark-base .efectos-accordion-btn {
  background: #1E293B;
  border: 1.5px solid rgba(51,65,85,0.5);
  border-left: 3px solid var(--blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #C4D0E3;
}
.dark-base .efectos-accordion-btn .accordion-btn-meta  { color: rgba(255,255,255,0.55); }
.dark-base .efectos-accordion-btn .accordion-chevron   { color: rgba(255,255,255,0.60); }
.dark-base .efectos-accordion-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(-1px);
}
.dark-base .efectos-content-wrap {
  background: color-mix(in srgb, var(--blue) 6%, rgba(6,12,24,0.92));
  border-color: color-mix(in srgb, var(--blue) 22%, transparent);
}

.dark-base .mitos-accordion-btn {
  border-left-color: #6366F1;
}

/* ══════════════════════════════════════════════════════════════
   TEST COGNITIVO — BOTÓN SIDEBAR
══════════════════════════════════════════════════════════════ */
.exp-sidebar-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.1rem;
  margin-bottom: 0.1rem;
  background: #FFFFFF;
  border: 1.5px solid #E8EEF4;
  border-left: 3px solid var(--blue);
  box-shadow: 0 4px 12px rgba(11,19,43,0.10);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.exp-sidebar-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(11,19,43,0.14);
  transform: translateY(-1px);
}

.exp-sidebar-btn-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dark-base .exp-sidebar-btn {
  background: #1E293B;
  border: 1.5px solid rgba(51,65,85,0.5);
  border-left: 3px solid var(--blue);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #C4D0E3;
}
.dark-base .exp-sidebar-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(-1px);
}

.exp-toggle-chevron {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

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

#exp-section {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0;
  will-change: max-height, opacity;
  transition:
    max-height 0.32s ease-out,
    opacity    0.22s ease;
}

#exp-section.is-open {
  max-height: 600px;
  opacity: 1;
  padding: 1.5rem 0 0.5rem;
}

.dark-base .exp-toggle-btn { color: var(--blue); border-color: rgba(51,65,85,0.5); background: #1E293B; }
.dark-base .exp-toggle-btn:hover { background: #263548; border-color: rgba(51,65,85,0.8); }
.dark-base .exp-toggle-wrap { border-top-color: rgba(148,163,184,0.08); }

/* ══════════════════════════════════════════════════════════════
   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.95);
  border: 1px solid color-mix(in srgb, var(--blue) 15%, transparent);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  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-count {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--navy);
  min-width: 2.4rem;
  text-align: right;
}

.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; }

/* 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;
}

/* 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: 3.5rem 1.2rem 4rem; }
  .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; }
}


/* ══════════════════════════════════════════════════════════════
   CONCEPTO DE LA SEMANA — widget sidebar + modal completo
══════════════════════════════════════════════════════════════ */

/* ── Widget (sidebar) — modo claro por defecto ── */
.concepto-semana-widget {
  background: rgba(255,255,255,0.95);
  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;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  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);
  transition: box-shadow 0.22s;
}

.concepto-semana-widget:hover {
  box-shadow: 0 4px 24px color-mix(in srgb, var(--blue) 14%, transparent), 0 12px 40px rgba(11,19,43,0.09), inset 0 1px 0 rgba(255,255,255,0.90);
}

.concepto-semana-widget::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;
}

.concepto-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;
}

.concepto-termino {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.concepto-origen {
  font-size: 0.63rem;
  color: color-mix(in srgb, var(--blue) 65%, transparent);
  font-style: italic;
  margin-bottom: 0.7rem;
}

.concepto-def {
  font-size: 0.75rem;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 0.8rem;
}

.concepto-abrir-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-family: inherit;
  font-size: 0.82rem;
  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.52rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.18s, transform 0.2s;
}

.concepto-abrir-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(11,19,43,0.14);
  transform: translateY(-2px);
}

/* ── Widget dark mode ── */
.dark-base .concepto-semana-widget {
  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 .concepto-semana-widget::before {
  background: linear-gradient(90deg, var(--blue-accent), var(--blue), transparent);
}

.dark-base .concepto-eyebrow { color: var(--blue-hover); }
.dark-base .concepto-termino { color: #E8F4FF; }
.dark-base .concepto-origen  { color: color-mix(in srgb, var(--blue-hover) 60%, transparent); }
.dark-base .concepto-def     { color: rgba(196,208,227,0.88); }

.dark-base .concepto-abrir-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 .concepto-abrir-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);
}

/* ══════════════════════════════════════════════════════════════
   CONCEPTO MODAL — overlay con blur editorial
══════════════════════════════════════════════════════════════ */
.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; }

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

.concepto-modal-card {
  position: relative;
  background: #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);
  scrollbar-width: thin;
}

@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;
}

.concepto-modal-termino {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin-bottom: 0.3rem;
}

.concepto-modal-origen {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--blue) 65%, transparent);
  font-style: italic;
  margin-bottom: 0;
}

.concepto-modal-divider {
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 25%, transparent), transparent);
  margin: 1.4rem 0;
}

/* ── Secciones del modal ── */
.concepto-modal-section {
  margin-bottom: 1.4rem;
}

.concepto-modal-lbl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--blue);
  margin-bottom: 0.55rem;
}

.concepto-modal-def {
  font-size: 0.93rem;
  color: var(--navy);
  line-height: 1.75;
}

/* Sección "En la práctica" — blockquote editorial */
.concepto-modal-section--ejemplo {
  background: color-mix(in srgb, var(--blue) 4%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.1rem;
  margin-left: -0.2rem;
}

.concepto-modal-section--ejemplo .concepto-modal-lbl {
  color: var(--blue);
  opacity: 0.80;
}

.concepto-modal-ejemplo {
  font-size: 0.87rem;
  font-style: italic;
  color: var(--text-body);
  line-height: 1.72;
  margin: 0;
}

/* Sección "Aplicación" — tip card */
.concepto-modal-section--aplicacion {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 0;
}

.concepto-modal-lbl--aplicacion {
  color: var(--blue);
}

.concepto-modal-aplicacion {
  font-size: 0.87rem;
  color: var(--navy);
  line-height: 1.72;
  font-weight: 500;
}

/* ── Modal dark mode ── */
.dark-base .concepto-modal-overlay {
  background: rgba(3,6,18,0.65);
}

.dark-base .concepto-modal-card {
  background: #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); }
.dark-base .concepto-modal-termino  { color: #E8F4FF; }
.dark-base .concepto-modal-origen   { color: color-mix(in srgb, var(--blue) 60%, transparent); }
.dark-base .concepto-modal-divider  { background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 25%, transparent), transparent); }
.dark-base .concepto-modal-lbl      { color: var(--blue); }
.dark-base .concepto-modal-def      { color: #C4D0E3; }

.dark-base .concepto-modal-section--ejemplo {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border-left-color: color-mix(in srgb, var(--blue) 30%, transparent);
}

.dark-base .concepto-modal-section--ejemplo .concepto-modal-lbl { color: var(--blue); }
.dark-base .concepto-modal-ejemplo { color: #B0C4D8; }

.dark-base .concepto-modal-section--aplicacion {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent) 0%, color-mix(in srgb, var(--blue-accent) 4%, transparent) 100%);
  border-color: color-mix(in srgb, var(--blue) 18%, transparent);
}

.dark-base .concepto-modal-lbl--aplicacion { color: var(--blue); }
.dark-base .concepto-modal-aplicacion { color: #C4D0E3; }

/* ── Modal responsive ── */
@media (max-width: 600px) {
  .concepto-modal-card    { padding: 1.8rem 1.3rem 1.5rem; border-radius: 20px; }
  .concepto-modal-termino { font-size: 1.55rem; }
  .concepto-modal-def,
  .concepto-modal-ejemplo,
  .concepto-modal-aplicacion { font-size: 0.84rem; }
}

/* ══════════════════════════════════════════════════════════════
   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: linear-gradient(135deg, var(--blue-accent), var(--blue));
  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 {
  background: color-mix(in srgb, var(--blue) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, transparent);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 1.2rem 0;
  max-width: 480px;
}
.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: color-mix(in srgb, var(--blue-hover) 4%, transparent); border-color: color-mix(in srgb, var(--blue-hover) 12%, transparent); }

/* ── 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: linear-gradient(135deg, color-mix(in srgb, var(--blue) 7%, transparent), color-mix(in srgb, var(--blue-accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 3px solid var(--blue);
  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: color-mix(in srgb, var(--blue-hover) 5%, transparent); border-color: color-mix(in srgb, var(--blue-hover) 14%, transparent); 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.4rem 1.2rem 1.2rem; }
  .stat-callout-row { flex-direction: column; }
  .stat-value { font-size: 1.4rem; }
  .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
   ══════════════════════════════════════════════════════════════ */

/* El trigger solo aparece en móvil; la grid solo en desktop */
.weekly-prev-mob-trigger { display: none; }

@media (max-width: 680px) {
  .weekly-prev-section  { display: none; }          /* ocultar grid */
  .weekly-prev-mob-trigger { display: flex; justify-content: center; margin: 1.4rem 0 0.5rem; }
}

/* ── 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; }

/* ── Drawer (bottom sheet) ── */
.weekly-prev-drawer {
  position: fixed; inset: 0; z-index: 1200;
  pointer-events: none;
}
.weekly-prev-drawer[hidden] { display: flex !important; visibility: hidden; pointer-events: none; }
.weekly-prev-drawer:not([hidden]) { pointer-events: auto; }

.wpd-overlay {
  position: absolute; inset: 0;
  background: rgba(3,12,26,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.wpd-open .wpd-overlay { opacity: 1; }

.wpd-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: #F7F9FF;
  border-radius: 20px 20px 0 0;
  max-height: 80dvh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -8px 40px rgba(11,19,43,0.18);
  padding-bottom: max(1.2rem, env(safe-area-inset-bottom));
}
.wpd-open .wpd-sheet { transform: translateY(0); }

.wpd-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(148,163,184,0.4);
  margin: 0.75rem auto 0;
  flex-shrink: 0;
}

.wpd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.2rem 0.75rem;
  border-bottom: 1px solid rgba(148,163,184,0.15);
  flex-shrink: 0;
}
.wpd-title {
  font-size: 0.95rem; font-weight: 800; color: var(--navy);
}
.wpd-close {
  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;
}
.wpd-close:hover { background: rgba(148,163,184,0.3); }

.wpd-list {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1;
  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-sheet  { background: #08111F; }
.dark-base .wpd-title  { color: #E2E8F0; }
.dark-base .wpd-header { border-bottom-color: rgba(148,163,184,0.1); }
.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; }
.dark-base .wpd-handle { background: rgba(148,163,184,0.25); }


/* ══════════════════════════════════════════════════════════════
   MITO — BOTÓN DETALLE + VER MÁS + MODAL
══════════════════════════════════════════════════════════════ */

.mito-detalle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding: 0.52rem 1.0rem;
  background: #FFFFFF;
  border: 1px solid #E8EEF4;
  box-shadow: 0 4px 12px rgba(11,19,43,0.10);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.18s, transform 0.2s;
}
.mito-detalle-btn:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  box-shadow: 0 6px 18px rgba(11,19,43,0.14);
  transform: translateY(-2px);
}
.dark-base .mito-detalle-btn {
  background: #1E293B;
  border: 1px solid rgba(51,65,85,0.5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: var(--blue-accent);
}
.dark-base .mito-detalle-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);
}

/* "Ver más mitos" */
.mitos-ver-mas {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem auto 0;
  padding: 0.45rem 1.1rem;
  background: none;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.mitos-ver-mas:hover { background: color-mix(in srgb, var(--blue) 6%, transparent); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.dark-base .mitos-ver-mas { border-color: color-mix(in srgb, var(--blue) 28%, transparent); color: var(--blue); }
.dark-base .mitos-ver-mas:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); }

/* Overlay */
.mito-info-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,12,26,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1rem;
}
.mito-info-overlay[hidden] { display: none; }

.mito-info-card {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 90dvh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  padding: 2rem 2rem 1.8rem;
  box-shadow: 0 24px 80px rgba(3,12,26,0.30);
  animation: mitoSlideIn 0.28s cubic-bezier(0.34,1.26,0.64,1) both;
}
@keyframes mitoSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.mito-info-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,0.12);
  border: none; border-radius: 50%;
  cursor: pointer; color: var(--navy);
  transition: background 0.18s;
}
.mito-info-close:hover { background: rgba(148,163,184,0.22); }

.mito-info-eyebrow {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue); opacity: 0.75;
  margin-bottom: 0.55rem;
}

.mito-info-statement {
  font-size: 1.1rem; font-weight: 700; color: var(--navy);
  line-height: 1.4; margin: 0 0 0.75rem; font-style: italic;
}

.mito-info-veredicto {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 700;
  margin-bottom: 1.2rem;
}
.veredicto-verdadero { background: rgba(16,185,129,0.12); color: #059669; }
.veredicto-falso     { background: rgba(239,68,68,0.10); color: #DC2626; }

.mito-info-body { display: flex; flex-direction: column; gap: 1.1rem; }

.mito-info-section { display: flex; flex-direction: column; gap: 0.45rem; }

.mito-info-lbl {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--blue); opacity: 0.8;
}
.mito-info-lbl--realidad { color: #059669; }
.mito-info-lbl--ciencia  { color: #7C3AED; }

.mito-info-section p {
  font-size: 0.84rem; color: var(--text-body); line-height: 1.7; margin: 0;
}

.mito-info-section--realidad {
  padding: 0.8rem 1rem;
  background: rgba(16,185,129,0.06);
  border-left: 3px solid rgba(16,185,129,0.4);
  border-radius: 0 10px 10px 0;
}
.mito-info-section--ciencia {
  padding: 0.8rem 1rem;
  background: rgba(124,58,237,0.05);
  border-left: 3px solid rgba(124,58,237,0.3);
  border-radius: 0 10px 10px 0;
}

.mito-info-ref {
  display: block;
  font-size: 0.7rem; font-style: normal; font-weight: 600;
  color: rgba(124,58,237,0.65);
  margin-top: 0.3rem;
}

/* Dark mode — modal mito */
.dark-base .mito-info-card {
  background: #0B1524;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.dark-base .mito-info-close { color: #94A3B8; }
.dark-base .mito-info-statement { color: #E2E8F0; }
.dark-base .mito-info-section p { color: #B0C4D8; }
.dark-base .mito-info-section--realidad { background: rgba(16,185,129,0.08); }
.dark-base .mito-info-section--ciencia  { background: rgba(124,58,237,0.08); }
.dark-base .mito-info-ref { color: rgba(167,139,250,0.7); }
.dark-base .veredicto-verdadero { background: rgba(16,185,129,0.15); }
.dark-base .veredicto-falso     { background: rgba(239,68,68,0.13); }


/* ══════════════════════════════════════════════════════════════
   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;
  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%);
  color: #F5EFE6;
}

[data-theme="verde"] body {
  background-color: #F0FBF4;
  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%);
  color: #14291A;
}

[data-theme="tormenta"] body {
  background-color: #07030F;
  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%);
  color: #EDE8F8;
}

[data-theme="cosmos"] body {
  background-color: #08060A;
  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%);
  color: #F0E8D3;
}

/* ── 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;
  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%);
  color: #F5E8E8;
}

/* ── 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;
  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;
  color: #1C1814;
}

/* ── 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; }

@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;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    /* Sin box-shadow recto: la sombra la da el drop-shadow en .mbn-curve */
    height: 68px;
    overflow: visible;
    /* 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;
  }
  @supports (padding-bottom: env(safe-area-inset-bottom)) {
    .mobile-bottom-nav {
      height: calc(68px + env(safe-area-inset-bottom));
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* Indicador magnético — círculo único que se desliza entre pestañas */
  .mbn-indicator {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--pill-bg);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);
    /* top fijo: alineado con el centro vertical del icon-wrap (8px padding + 21px radio) */
    top: 29px;
    left: 0;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease-out, top 0.3s ease-out, transform 0.3s ease-out, opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
  }
  .mbn-indicator.mbn-indicator--hidden {
    opacity: 0;
  }
  /* Estado "casa": indicador viaja hacia el botón central (más alto + escalado) */
  .mbn-indicator.mbn-indicator--casa {
    top: 15px;
    transform: translate(-50%, -50%) scale(1.38);
  }

  /* 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: 8px 4px 6px;
    color: #475569;
    transition: color 0.18s;
    min-width: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative;
    z-index: 2;
    overflow: visible;
  }

  /* Contenedor de icono: círculo fijo idéntico para las 5 pestañas */
  .mbn-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }

  /* ── Botón central (Casa): círculo flotante sobre la barra ── */
  .mbn-tab--home {
    flex: 1;
    justify-content: flex-end;
    padding-bottom: 7px;
    position: relative;
    z-index: 3;
  }

  /* Campana — rellena el fondo blanco, ancho dinámico via JS */
  .mbn-curve {
    position: absolute;
    top: -40px;
    left: 0;
    transform: none;
    width: 100%;
    height: 40px;
    fill: #fff;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    display: block;
    /* Sombra curva sigue la silueta de la campana, no el borde recto de la barra */
    filter: drop-shadow(0 -5px 10px rgba(0,0,0,0.09));
  }

  /* Borde plasma — ancho dinámico via JS, barrido de extremo a extremo */
  .mbn-curve-plasma {
    position: absolute;
    top: -40px;
    left: 0;
    transform: none;
    width: 100%;
    height: 40px;
    fill: none;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
    display: block;
  }

  .mbn-home-wrap {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 22px rgba(0,0,0,0.12);
    transition: background 0.25s, box-shadow 0.25s;
    flex-shrink: 0;
    z-index: 4;
  }

  .mbn-tab--home .mbn-icon {
    width: 28px; height: 28px;
    opacity: 1;
  }

  .mbn-icon {
    width: 24px; height: 24px;
    object-fit: contain;
    opacity: 1;
    transition: filter 0.18s;
    display: block;
    flex-shrink: 0;
    /* Neutralizar color del PNG → gris oscuro independiente del tema */
    filter: brightness(0) invert(0.38) opacity(0.72);
  }

  /* lab.png: ajuste óptico para equiparar con perfil.png y botiquin.png */
  [data-mbn="fuerabata"] .mbn-icon { width: 32px; height: 32px; }
  [data-mbn="botiquin"] .mbn-icon  { width: 28px; height: 28px; }
  [data-mbn="yo"] .mbn-icon        { width: 28px; height: 28px; }

  /* Label: fuera del icon-wrap, visible sin recorte, debajo del icono */
  .mbn-label {
    font-size: 0.57rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    color: #475569;
    transition: color 0.18s, font-weight 0.18s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Estado activo (tabs normales): icono blanco puro, label azul */
  .mbn-tab.mbn-tab--active .mbn-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
  }
  .mbn-tab.mbn-tab--active .mbn-label {
    color: var(--blue);
    font-weight: 800;
  }

  /* Estado activo Casa: círculo sólido con color del tema activo */
  .mbn-tab--home.mbn-tab--active .mbn-home-wrap {
    background: var(--pill-bg);
    box-shadow: 0 6px 24px color-mix(in srgb, var(--blue) 48%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);
  }
  .mbn-tab--home.mbn-tab--active .mbn-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
  }
  .mbn-tab--home.mbn-tab--active .mbn-label {
    color: var(--blue);
    font-weight: 800;
  }

  /* ── Viewport lock: body no scrolleable → address bar no se mueve → fixed nav no salta ── */
  html, body { 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; }
  /* ── 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-brand {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .msh-logo {
    height: 18px;
    width: auto;
    mix-blend-mode: multiply;
    opacity: 0.78;
  }

  .msh-brand-name {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    color: var(--text-muted);
    letter-spacing: 0.01em;
  }

  .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 .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; }

  /* 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;
  }

  /* ── PÁGINA: CASA ── */
  body.mp-casa .hero,
  body.mp-casa .dashboard-center,
  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 ── */
  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 .propuestas-section,
  body.mp-fuerabata .footer-main      { display: block; }

  /* ── PÁGINA: 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 .propuestas-section,
  body.mp-botiquin .footer-main       { display: block; }
  /* 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: var(--nav-bg, #030C1A);
}
.dark-base .mbn-label  { color: #94a3b8; }
/* Iconos inactivos en dark: neutralizar PNG → blanco tenue */
.dark-base .mbn-icon { filter: brightness(0) invert(1) opacity(0.45); }
.dark-base .mbn-curve  {
  fill: var(--nav-bg, #030C1A);
  filter: drop-shadow(0 -5px 14px rgba(0,0,0,0.55));
}
.dark-base .mbn-curve-plasma { opacity: 1; filter: brightness(1.35); }
.dark-base .mbn-home-wrap {
  background: var(--nav-bg, #030C1A);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--blue) 22%, transparent);
}
.dark-base .mbn-tab--home.mbn-tab--active .mbn-home-wrap {
  box-shadow: 0 6px 22px color-mix(in srgb, var(--blue) 42%, transparent);
}
/* Labels activos dark: usar --blue del tema (ya es el acento correcto para cada dark) */
.dark-base .mbn-tab.mbn-tab--active .mbn-label { color: var(--blue); }
.dark-base .mbn-tab--home.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,
[data-theme="dark"] .mbn-tab--home.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 {
  background: var(--header-bg, rgba(3, 12, 26, 0.93));
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.dark-base .msh-brand-name { color: var(--text-muted, #94a3b8); }
.dark-base .msh-section-name { color: var(--text, #e2e8f0); }
.dark-base .msh-logo { mix-blend-mode: screen; opacity: 0.50; }

.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);
}

/* ── 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);
}
.dark-base .mob-yo-avatar-ring {
  background: conic-gradient(#3B82F6 0deg, #00E5FF 120deg, #1D4ED8 240deg, #3B82F6 360deg);
}