/* =========================================================================
   BachilleratoFacilito · Capa futurista (2026)
   Se carga después de estilos.css. No modifica el DOM: solo aplica
   tokens, superficies, tipografía y movimiento sobre las clases existentes.
   Todos los selectores usan el prefijo "html body" para ganar especificidad
   frente a las reglas heredadas sin recurrir a !important.
   ========================================================================= */

/* Las fuentes (Space Grotesk, JetBrains Mono) se cargan desde el <head> de cada página, sin bloquear el pintado. */

/* ---------- 1. Tokens ----------------------------------------------------- */

:root:not(.theme-light),
body.theme-dark,
html[data-theme="dark"],
html body.bf-home[data-theme="dark"] {
  --bf-bg: #03050b;
  --bf-paper: #03050b;
  --bf-surface: rgba(12, 18, 34, 0.56);
  --bf-surface-solid: #0b1222;
  --bf-white: rgba(14, 21, 40, 0.72);
  --bf-card: linear-gradient(160deg, rgba(22, 32, 58, 0.78), rgba(8, 12, 24, 0.82));
  --bf-ink: #f2f7ff;
  --bf-text: #eaf2ff;
  --bf-text-2: #b3c2db;
  --bf-text-3: #7d8ba6;
  --bf-muted: #9aaac4;
  --bf-line: rgba(130, 190, 255, 0.14);
  --bf-border: rgba(130, 190, 255, 0.14);
  --bf-border-strong: rgba(130, 190, 255, 0.30);
  --bf-green: #5ef2e0;
  --bf-lime: #c6ff5e;
  --bf-brand: #8b6bff;
  --bf-brand-2: #c084fc;
  --bf-cyan: #38d4ff;
  --bf-accent-glow: #38d4ff;
  --bf-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --bf-shadow-lg: 0 40px 100px rgba(0, 0, 0, 0.6);
  --bf-glow: 0 0 0 1px rgba(94, 242, 224, 0.18), 0 18px 50px rgba(56, 212, 255, 0.16);
  --bf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bf-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --bf-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bf-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Tokens de la versión legacy "bf-home" y de los componentes de página */
  --primary: #8b6bff;
  --interactive: #38d4ff;
  --secondary: #5ef2e0;
  --bg-main: #03050b;
  --text-main: #eaf2ff;
  --text-muted: #9aaac4;
  --border-soft: rgba(130, 190, 255, 0.14);
  --border-strong: rgba(130, 190, 255, 0.30);
  --shadow-color: rgba(56, 212, 255, 0.22);
}

:root.theme-light,
html.theme-light body {
  --bf-bg: #eef3fb;
  --bf-paper: #eef3fb;
  --bf-surface: rgba(255, 255, 255, 0.62);
  --bf-surface-solid: #ffffff;
  --bf-white: rgba(255, 255, 255, 0.78);
  --bf-card: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(240, 245, 255, 0.86));
  --bf-ink: #0b1224;
  --bf-text: #0b1224;
  --bf-text-2: #334155;
  --bf-text-3: #64748b;
  --bf-muted: #4b5a73;
  --bf-line: rgba(37, 65, 120, 0.14);
  --bf-border: rgba(37, 65, 120, 0.14);
  --bf-border-strong: rgba(37, 65, 120, 0.28);
  --bf-green: #0a7f8f;
  --bf-lime: #4d7c0f;
  --bf-brand: #6d3cf0;
  --bf-brand-2: #a21caf;
  --bf-cyan: #0891b2;
  --bf-accent-glow: #0891b2;
  --bf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bf-font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --bf-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bf-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --bf-shadow: 0 20px 50px rgba(30, 58, 110, 0.12);
  --bf-shadow-lg: 0 36px 90px rgba(30, 58, 110, 0.18);
  --bf-glow: 0 0 0 1px rgba(8, 145, 178, 0.22), 0 18px 46px rgba(109, 60, 240, 0.14);
  --primary: #6d3cf0;
  --interactive: #0891b2;
  --secondary: #0a7f8f;
  --bg-main: #eef3fb;
  --text-main: #0b1224;
  --text-muted: #4b5a73;
  --border-soft: rgba(37, 65, 120, 0.14);
  --border-strong: rgba(37, 65, 120, 0.28);
  --shadow-color: rgba(8, 145, 178, 0.2);
}

/* ---------- 2. Fondo: aurora, rejilla y brillo de cursor ------------------ */

html body {
  background:
    radial-gradient(60vmax 60vmax at 12% -10%, rgba(139, 107, 255, 0.22), transparent 60%),
    radial-gradient(55vmax 55vmax at 95% 0%, rgba(56, 212, 255, 0.16), transparent 60%),
    radial-gradient(70vmax 50vmax at 50% 115%, rgba(192, 132, 252, 0.12), transparent 60%),
    var(--bf-bg);
  color: var(--bf-text);
  font-family: var(--bf-font-body);
  -webkit-font-smoothing: antialiased;
}

html.theme-light body {
  background:
    radial-gradient(60vmax 60vmax at 12% -10%, rgba(109, 60, 240, 0.12), transparent 60%),
    radial-gradient(55vmax 55vmax at 95% 0%, rgba(8, 145, 178, 0.14), transparent 60%),
    var(--bf-bg);
}

/* Rejilla de perspectiva bajo todo el contenido */
html::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 140vh;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(94, 242, 224, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 242, 224, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(700px) rotateX(58deg) translateY(-6%);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}

html.theme-light::before { opacity: 0.45; }

/* Halo que sigue al cursor (solo puntero fino) */
.bf-cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, rgba(56, 212, 255, 0.13), rgba(139, 107, 255, 0.06) 40%, transparent 68%);
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.bf-cursor-glow.is-on { opacity: 1; }

/* ---------- 3. Tipografía ------------------------------------------------- */

html body h1,
html body h2,
html body h3,
html body h4,
html body .bf-subject strong,
html body .bf-section-heading h2,
html body .subject-block-card h2,
html body .subject-block-card h3,
html body .comparison-card__title,
html body .library-card h2,
html body .library-card h3,
html body .history-card h2,
html body .history-card h3 {
  font-family: var(--bf-font-display);
  letter-spacing: -0.035em;
  color: var(--bf-ink);
}

html body h1 {
  font-weight: 600;
  line-height: 1.02;
}

html body p,
html body li,
html body small,
html body span {
  font-family: var(--bf-font-body);
}

/* Texto de contenido dentro de componentes legacy (vencen a los selectores de elemento) */
html body .subject-block-card li,
html body .subject-block-card p,
html body .subject-block-card a,
html body .bullet-list,
html body .bullet-list li,
html body .library-card p,
html body .library-card li,
html body .history-card p,
html body .comparison-card p,
html body .comparison-card li,
html body .subject-summary-card p,
html body .subject-summary-card__item,
html body .recursos-links,
html body .recursos-links a,
html body .bf-resource-list__item,
html body .template-block p,
html body .legal-section p,
html body .legal-section li,
html body .glass-panel p,
html body .glass-panel li,
html body .card p,
html body .card li {
  font-family: var(--bf-font-body);
}

/* Etiquetas, numeración y metadatos en mono */
html body .bf-eyebrow,
html body .bf-section-label,
html body .subject-hero__eyebrow,
html body .bf-subject__number,
html body .subject-block-card__number,
html body .history-card__number,
html body .template-block__number,
html body .bf-resource-list__type,
html body .bf-resource-list__meta,
html body .bf-trust__label,
html body .era-badge,
html body .author-era-pill,
html body .comparison-card__pill {
  font-family: var(--bf-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Titular con gradiente animado */
html body .bf-hero h1,
html body .subject-hero h1,
html body .subject-page-heading h1 {
  background: linear-gradient(100deg, #f2f7ff 0%, #8fe9ff 30%, #b9a2ff 55%, #5ef2e0 80%, #f2f7ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation:
    bf-title-in 1.1s var(--bf-ease) both,
    bf-title-sheen 9s ease-in-out 1.2s infinite;
}

html.theme-light body .bf-hero h1,
html.theme-light body .subject-hero h1,
html.theme-light body .subject-page-heading h1 {
  background-image: linear-gradient(100deg, #0b1224 0%, #0a7f8f 35%, #6d3cf0 65%, #0b1224 100%);
}

@keyframes bf-title-in {
  from { opacity: 0; transform: translateY(42%) skewY(5deg); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0) skewY(0); filter: blur(0); }
}

@keyframes bf-title-sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 4. Cabecera, marca y navegación ------------------------------- */

html body .bf-header {
  background: rgba(3, 5, 11, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--bf-border);
  position: sticky;
  top: 0;
  z-index: 50;
  animation: bf-header-in 0.9s var(--bf-ease) both;
}

html.theme-light body .bf-header {
  background: rgba(238, 243, 251, 0.6);
}

html body .bf-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bf-green), var(--bf-brand-2), transparent);
  background-size: 200% 100%;
  animation: bf-line-flow 6s linear infinite;
  opacity: 0.85;
  pointer-events: none;
}

@keyframes bf-header-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes bf-line-flow {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

html body .bf-brand {
  font-family: var(--bf-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: filter 0.4s ease, transform 0.4s var(--bf-spring);
}

html body .bf-brand span {
  background: linear-gradient(90deg, var(--bf-green), var(--bf-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html body .bf-brand:hover {
  filter: drop-shadow(0 0 12px rgba(94, 242, 224, 0.5));
  transform: translateY(-1px) scale(1.02);
}

html body .bf-nav a {
  position: relative;
  color: var(--bf-muted);
  font-family: var(--bf-font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

html body .bf-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bf-green), var(--bf-brand-2));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--bf-ease);
}

html body .bf-nav a:hover,
html body .bf-nav a:focus-visible,
html body .bf-nav a.is-current {
  color: var(--bf-ink);
  text-shadow: 0 0 14px rgba(94, 242, 224, 0.45);
}

html body .bf-nav a:hover::after,
html body .bf-nav a:focus-visible::after,
html body .bf-nav a.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

html body .bf-nav a.is-current { border-bottom: 0; }

html body .bf-theme-toggle,
html body .bf-menu-toggle {
  position: relative;
  border: 1px solid var(--bf-border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--bf-ink);
  font-family: var(--bf-font-display);
  transition: transform 0.4s var(--bf-spring), box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

html body .bf-theme-toggle:hover,
html body .bf-menu-toggle:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--bf-green);
  box-shadow: 0 0 22px rgba(94, 242, 224, 0.28);
}

html body .bf-theme-toggle [data-theme-icon] {
  display: inline-block;
  transition: transform 0.7s var(--bf-spring);
}
html body .bf-theme-toggle:hover [data-theme-icon] { transform: rotate(180deg); }

/* Menú móvil con despliegue elástico */
@media (max-width: 680px) {
  html body .bf-nav.is-open {
    background: #080c18 !important;
    backdrop-filter: none;
    border: 1px solid var(--bf-border-strong);
    border-radius: 20px;
    box-shadow: var(--bf-shadow-lg);
    padding: 12px;
    transform-origin: top right;
    animation: bf-menu-spring 0.6s var(--bf-spring) both;
  }
  html.theme-light body .bf-nav.is-open { background: #ffffff !important; }
  html body .bf-nav.is-open a {
    animation: bf-rise 0.55s var(--bf-spring) backwards;
  }
  html body .bf-nav.is-open a:nth-child(1) { animation-delay: 0.05s; }
  html body .bf-nav.is-open a:nth-child(2) { animation-delay: 0.10s; }
  html body .bf-nav.is-open a:nth-child(3) { animation-delay: 0.15s; }
  html body .bf-nav.is-open a:nth-child(4) { animation-delay: 0.20s; }
  html body .bf-nav.is-open a:nth-child(5) { animation-delay: 0.25s; }
}

@keyframes bf-menu-spring {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Barra de progreso de lectura */
html body .bf-scroll-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.04);
}
html body .bf-scroll-progress span {
  background: linear-gradient(90deg, var(--bf-green), var(--bf-brand-2), var(--bf-cyan));
  box-shadow: 0 0 14px rgba(94, 242, 224, 0.7);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

/* ---------- 5. Botones y micro-interacciones ------------------------------ */

html body .btn-neon,
html body .bf-button,
html body .btn-library,
html body .btn-library--primary,
html body .btn-library--secondary,
html body .btn-history,
html body .btn-history--primary,
html body .btn-outline,
html body .btn-ghost,
html body .btn-back,
html body .card-btn,
html body .bf-text-link,
html body .filter-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--bf-btn-x, 0px), var(--bf-btn-y, 0px), 0);
  transition:
    transform 0.45s var(--bf-spring),
    box-shadow 0.4s ease,
    background 0.4s ease,
    border-color 0.4s ease,
    color 0.3s ease;
  will-change: transform;
}

/* Botón primario: gradiente neón */
html body .btn-neon,
html body .bf-button--primary,
html body .bf-hero__cta,
html body .btn-library--primary,
html body .btn-history--primary {
  background: linear-gradient(120deg, #7c5cff 0%, #38d4ff 55%, #5ef2e0 100%);
  background-size: 200% 100%;
  color: #04060d;
  border: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 14px 34px rgba(56, 212, 255, 0.28);
  font-family: var(--bf-font-display);
  font-weight: 700;
}

html body .btn-neon:hover,
html body .btn-neon:focus-visible,
html body .bf-button--primary:hover,
html body .bf-button--primary:focus-visible,
html body .btn-library--primary:hover,
html body .btn-history--primary:hover {
  background-position: 100% 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 18px 48px rgba(94, 242, 224, 0.42);
  color: #04060d;
}

/* Botones secundarios: cristal con borde que se ilumina */
html body .btn-outline,
html body .btn-ghost,
html body .btn-library--secondary,
html body .btn-history,
html body .btn-back,
html body .bf-button--light,
html body .card-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bf-border-strong);
  color: var(--bf-ink);
  backdrop-filter: blur(10px);
  font-family: var(--bf-font-display);
  font-weight: 600;
}

html body .btn-outline:hover,
html body .btn-ghost:hover,
html body .btn-library--secondary:hover,
html body .btn-history:hover,
html body .btn-back:hover,
html body .card-btn:hover,
html body .btn-outline:focus-visible,
html body .btn-ghost:focus-visible,
html body .btn-library--secondary:focus-visible,
html body .btn-history:focus-visible,
html body .btn-back:focus-visible {
  border-color: var(--bf-green);
  color: var(--bf-green);
  box-shadow: 0 0 0 4px rgba(94, 242, 224, 0.10), 0 0 26px rgba(94, 242, 224, 0.22);
}

/* Destello que cruza el botón al pasar el ratón */
html body .btn-neon::after,
html body .bf-button::after,
html body .btn-library::after,
html body .btn-library--primary::after,
html body .btn-history::after,
html body .btn-history--primary::after,
html body .btn-outline::after,
html body .btn-ghost::after,
html body .btn-back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--bf-ease);
  pointer-events: none;
}

html body .btn-neon:hover::after,
html body .bf-button:hover::after,
html body .btn-library:hover::after,
html body .btn-library--primary:hover::after,
html body .btn-history:hover::after,
html body .btn-history--primary:hover::after,
html body .btn-outline:hover::after,
html body .btn-ghost:hover::after,
html body .btn-back:hover::after {
  transform: translateX(120%);
}

/* Onda al hacer clic (la genera home-nav.js con la clase .ripple) */
html body .ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(94, 242, 224, 0.25) 45%, transparent 70%);
  transform: scale(0);
  animation: bf-ripple 0.7s var(--bf-ease) forwards;
  pointer-events: none;
  z-index: 0;
}

@keyframes bf-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- 6. Superficies: tarjetas 3D con brillo ------------------------ */

html body .bf-subject,
html body .subject-block-card,
html body .card,
html body .glass-panel,
html body .library-card,
html body .comparison-card,
html body .history-card,
html body .template-block,
html body .physics-directory-card,
html body .subject-summary-card,
html body .bf-resource-list__item,
html body .bf-pau,
html body .bf-editorial,
html body .bf-about,
html body .bf-progress,
html body .bf-timeline,
html body .bf-trust {
  position: relative;
  isolation: isolate;
  background: var(--bf-card);
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--bf-shadow);
  opacity: 1;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--bf-rx, 0deg)) rotateY(var(--bf-ry, 0deg)) translate3d(0, var(--bf-lift, 0px), 0);
  transition:
    transform 0.55s var(--bf-ease),
    box-shadow 0.55s var(--bf-ease),
    border-color 0.45s ease,
    background 0.45s ease;
  animation: bf-rise 0.9s var(--bf-ease) backwards;
  animation-delay: calc(var(--bf-i, 0) * 90ms);
}

/* Foco de luz que sigue al puntero dentro de la tarjeta */
html body .bf-subject::before,
html body .subject-block-card::before,
html body .card::before,
html body .glass-panel::before,
html body .library-card::before,
html body .comparison-card::before,
html body .history-card::before,
html body .template-block::before,
html body .physics-directory-card::before,
html body .subject-summary-card::before,
html body .bf-resource-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  filter: none;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--bf-gx, 50%) var(--bf-gy, 50%),
    color-mix(in srgb, var(--bf-accent, #38d4ff) 22%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

html body .bf-subject:hover,
html body .subject-block-card:hover,
html body .card:hover,
html body .glass-panel:hover,
html body .library-card:hover,
html body .comparison-card:hover,
html body .history-card:hover,
html body .template-block:hover,
html body .physics-directory-card:hover,
html body .subject-summary-card:hover,
html body .bf-resource-list__item:hover {
  --bf-lift: -8px;
  transform: perspective(1000px) rotateX(var(--bf-rx, 0deg)) rotateY(var(--bf-ry, 0deg)) translate3d(0, var(--bf-lift, 0px), 0) !important;
  border-color: color-mix(in srgb, var(--bf-accent, #38d4ff) 55%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px color-mix(in srgb, var(--bf-accent, #38d4ff) 25%, transparent),
    0 26px 60px rgba(0, 0, 0, 0.45),
    0 0 46px color-mix(in srgb, var(--bf-accent, #38d4ff) 22%, transparent) !important;
}

html body .bf-tilt-active,
html body .bf-magnetic-active {
  transition: transform 0s !important;
}

html body .bf-subject:hover::before,
html body .subject-block-card:hover::before,
html body .card:hover::before,
html body .glass-panel:hover::before,
html body .library-card:hover::before,
html body .comparison-card:hover::before,
html body .history-card:hover::before,
html body .template-block:hover::before,
html body .physics-directory-card:hover::before,
html body .subject-summary-card:hover::before,
html body .bf-resource-list__item:hover::before {
  opacity: 1;
}

/* Borde con gradiente animado al enfocar por teclado */
html body .bf-subject:focus-visible,
html body .bf-resource-list__item:focus-visible {
  outline: 2px solid var(--bf-green);
  outline-offset: 4px;
}

/* Acentos por asignatura (neón) */
html body .bf-subject--math     { --bf-accent: #2ef2c8; }
html body .bf-subject--physics  { --bf-accent: #38bdf8; }
html body .bf-subject--philosophy { --bf-accent: #c084fc; }
html body .bf-subject--language { --bf-accent: #fb923c; }
html body .bf-subject--drawing  { --bf-accent: #a3e635; }
html body .bf-subject--history  { --bf-accent: #facc15; }
html body .bf-subject--english  { --bf-accent: #818cf8; }
html body .bf-subject--biology  { --bf-accent: #34d399; }
html body .bf-subject--chemistry { --bf-accent: #f472b6; }
html.theme-light body .bf-subject--math     { --bf-accent: #0f9b82; }
html.theme-light body .bf-subject--physics  { --bf-accent: #0369a1; }
html.theme-light body .bf-subject--philosophy { --bf-accent: #7e22ce; }
html.theme-light body .bf-subject--language { --bf-accent: #c2410c; }
html.theme-light body .bf-subject--drawing  { --bf-accent: #4d7c0f; }
html.theme-light body .bf-subject--history  { --bf-accent: #a16207; }
html.theme-light body .bf-subject--english  { --bf-accent: #4338ca; }
html.theme-light body .bf-subject--biology  { --bf-accent: #047857; }
html.theme-light body .bf-subject--chemistry { --bf-accent: #be185d; }
/* Símbolo y flecha de asignatura con reacción propia */
html body .bf-subject__symbol {
  color: var(--bf-accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--bf-accent) 55%, transparent);
  transition: transform 0.6s var(--bf-spring), text-shadow 0.4s ease;
  display: inline-block;
}
html body .bf-subject:hover .bf-subject__symbol {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
}
html body .bf-subject__arrow {
  color: var(--bf-accent);
  transition: transform 0.5s var(--bf-spring);
}
html body .bf-subject:hover .bf-subject__arrow {
  transform: translate(4px, -4px) rotate(45deg);
}
html body .bf-subject {
  border-top: 2px solid var(--bf-accent, var(--bf-green));
}
html body .bf-subject::after {
  border-color: var(--bf-accent);
  opacity: 0.45;
  filter: drop-shadow(0 0 12px var(--bf-accent));
  transition: transform 0.9s var(--bf-ease), opacity 0.6s ease;
}
html body .bf-subject:hover::after {
  transform: scale(1.35) rotate(25deg);
  opacity: 0.8;
}

/* Números de bloque y etiquetas */
html body .subject-block-card__number,
html body .history-card__number,
html body .template-block__number,
html body .bf-subject__number {
  color: var(--bf-green);
  opacity: 0.85;
}

html body .subject-block-card__icon,
html body .history-card__icon,
html body .comparison-card__icon,
html body .comparison-section__icon {
  background: rgba(94, 242, 224, 0.08);
  border: 1px solid var(--bf-border-strong);
  box-shadow: 0 0 22px rgba(94, 242, 224, 0.12);
  transition: transform 0.6s var(--bf-spring), box-shadow 0.4s ease;
}
html body .subject-block-card:hover .subject-block-card__icon,
html body .history-card:hover .history-card__icon,
html body .comparison-card:hover .comparison-card__icon {
  transform: rotate(-8deg) scale(1.12);
  box-shadow: 0 0 30px rgba(94, 242, 224, 0.35);
}

/* Enlaces de lista de recursos: se desplazan al pasar el ratón */
html body .bf-resource-list__item {
  transition: transform 0.5s var(--bf-ease), box-shadow 0.5s var(--bf-ease), border-color 0.4s ease;
}
html body .bf-resource-list__arrow,
html body .bf-subject__arrow {
  transition: transform 0.5s var(--bf-spring);
}
html body .bf-resource-list__item:hover .bf-resource-list__arrow {
  transform: translateX(6px);
}

/* Entradas tipo cascada para los elementos de listas y rejillas */
html body .subject-summary-card__item,
html body .recursos-links a,
html body .bf-progress__badges > *,
html body .bf-popular-search button,
html body .bf-suggestion-choice {
  opacity: 1;
  transform: none;
  animation: bf-rise 0.7s var(--bf-spring) backwards;
  animation-delay: calc(var(--bf-i, 0) * 70ms);
}

@keyframes bf-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Revelado de secciones al hacer scroll (la clase .is-visible la pone home-nav.js) */
html body .reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.9s var(--bf-ease),
    transform 0.9s var(--bf-ease),
    filter 0.9s var(--bf-ease) !important;
}
html body .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------- 7. Hero de portada y de asignatura ---------------------------- */

html body .bf-hero {
  position: relative;
  border: 1px solid var(--bf-border);
  background:
    radial-gradient(40vmax 30vmax at 85% 20%, rgba(56, 212, 255, 0.14), transparent 60%),
    radial-gradient(40vmax 30vmax at 10% 90%, rgba(139, 107, 255, 0.16), transparent 60%),
    var(--bf-card);
  border-radius: 32px;
  overflow: hidden;
}

html body .bf-hero__copy > * {
  /* La capa legacy deja opacity/transform base; se fija el estado final */
  opacity: 1;
  transform: none;
  animation: bf-rise 0.9s var(--bf-ease) backwards;
}
html body .bf-hero__copy > *:nth-child(1) { animation-delay: 0.10s; }
html body .bf-hero__copy > *:nth-child(2) { animation-delay: 0.22s; }
html body .bf-hero__copy > *:nth-child(3) { animation-delay: 0.34s; }
html body .bf-hero__copy > *:nth-child(4) { animation-delay: 0.46s; }
html body .bf-hero__copy > *:nth-child(5) { animation-delay: 0.58s; }

html body .bf-hero__search,
html body .bf-hero__meta,
html body .bf-hero__actions {
  opacity: 1;
  transform: none;
  animation: bf-rise 0.9s var(--bf-ease) backwards;
  animation-delay: 0.5s;
}

html body .subject-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bf-border-strong);
  border-radius: 32px;
  background:
    radial-gradient(40vmax 40vmax at 90% 0%, color-mix(in srgb, var(--bf-accent, #38d4ff) 22%, transparent), transparent 60%),
    var(--bf-card);
  animation: bf-rise 1s var(--bf-ease) backwards;
}

html body .subject-hero::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: bf-sweep 6s ease-in-out 1.2s infinite;
  pointer-events: none;
}

@keyframes bf-sweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  55%, 100% { transform: translateX(320%) skewX(-18deg); }
}

html body .subject-hero__icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--bf-border-strong);
  box-shadow: 0 0 28px color-mix(in srgb, var(--bf-accent, #38d4ff) 30%, transparent);
  animation: bf-subject-float 5s ease-in-out infinite;
}

@keyframes bf-subject-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

html body .subject-math-visual path,
html body .subject-math-visual circle {
  filter: drop-shadow(0 0 6px rgba(94, 242, 224, 0.5));
}

/* Búsqueda de portada: vidrio con anillo de luz al enfocar */
html body .bf-search,
html body .bf-hero__search,
html body .bf-quick-search {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bf-border-strong);
  backdrop-filter: blur(16px);
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.5s var(--bf-spring);
}
html body .bf-search:focus-within,
html body .bf-hero__search:focus-within {
  border-color: var(--bf-green);
  box-shadow: 0 0 0 4px rgba(94, 242, 224, 0.12), 0 0 40px rgba(94, 242, 224, 0.22);
  transform: translateY(-2px);
}

/* ---------- 8. Formularios, chips y elementos auxiliares ------------------ */

html body input,
html body textarea,
html body select {
  background: rgba(255, 255, 255, 0.04);
  color: var(--bf-ink);
  border: 1px solid var(--bf-border-strong);
  border-radius: 14px;
  font-family: var(--bf-font-body);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
html body input:focus,
html body textarea:focus,
html body select:focus {
  outline: none;
  border-color: var(--bf-green);
  box-shadow: 0 0 0 4px rgba(94, 242, 224, 0.12), 0 0 24px rgba(94, 242, 224, 0.2);
  background: rgba(94, 242, 224, 0.04);
}

html body .filter-pill,
html body .bf-popular-search button,
html body .era-badge,
html body .author-era-pill,
html body .author-chip,
html body .card-tags span,
html body .bf-subjects__grid > *,
html body .bf-timeline__countdown {
  border-radius: 999px;
}

html body .filter-pill:hover,
html body .bf-popular-search button:hover {
  box-shadow: 0 0 22px rgba(94, 242, 224, 0.25);
  border-color: var(--bf-green);
}

html body .is-current,
html body .filter-pill.is-active,
html body .filter-pill[aria-pressed="true"] {
  box-shadow: 0 0 22px rgba(94, 242, 224, 0.28);
}

html body .bf-section-label::before,
html body .bf-eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--bf-green), transparent);
}

html body .toast {
  background: rgba(10, 16, 32, 0.82);
  backdrop-filter: blur(18px);
  border: 1px solid var(--bf-border-strong);
  box-shadow: var(--bf-shadow-lg), var(--bf-glow);
  color: var(--bf-ink);
}

html body .cookie-banner {
  background: rgba(10, 16, 32, 0.9) !important;
  border: 1px solid var(--bf-border-strong) !important;
  border-radius: 24px !important;
  box-shadow: var(--bf-shadow-lg), var(--bf-glow) !important;
  backdrop-filter: blur(20px) saturate(150%);
}

html body .cookie-banner h2 { color: var(--bf-ink) !important; }
html body .cookie-banner__description { color: var(--bf-text-2) !important; }

html.theme-light body .toast,
html.theme-light body .cookie-banner,
html.theme-light body .cookie-banner {
  background: rgba(255, 255, 255, 0.94) !important;
}

html body .toast {
  animation: bf-toast-in 0.6s var(--bf-spring) both;
}
@keyframes bf-toast-in {
  from { transform: translateY(24px) scale(0.9); opacity: 0; filter: blur(4px); }
  to   { transform: none; opacity: 1; filter: blur(0); }
}

html body .bf-footer {
  position: relative;
  border-top: 1px solid var(--bf-border);
  background: linear-gradient(180deg, transparent, rgba(56, 212, 255, 0.05));
}
html body .bf-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bf-green), var(--bf-brand-2), transparent);
  opacity: 0.7;
}

html body .back-to-top {
  background: rgba(14, 21, 40, 0.7);
  border: 1px solid var(--bf-border-strong);
  color: var(--bf-green);
  backdrop-filter: blur(12px);
  transition: transform 0.5s var(--bf-spring), box-shadow 0.4s ease;
}
html body .back-to-top:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 0 26px rgba(94, 242, 224, 0.35);
}

/* Cargador inicial: anillo giratorio neón */
html body .site-loader {
  background: radial-gradient(circle at 50% 40%, rgba(139, 107, 255, 0.25), transparent 50%), #03050b;
}
html body .site-loader__dot {
  background: var(--bf-green);
  box-shadow: 0 0 16px var(--bf-green);
  animation: bf-dot 1.2s ease-in-out infinite;
}
html body .site-loader__dot:nth-child(2) { animation-delay: 0.15s; }
html body .site-loader__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bf-dot {
  0%, 80%, 100% { transform: translateY(0) scale(0.8); opacity: 0.4; }
  40%           { transform: translateY(-8px) scale(1.15); opacity: 1; }
}

/* ---------- 9. Transiciones de página ------------------------------------ */

html body .bf-transition {
  background:
    radial-gradient(circle at 50% 42%, rgba(139, 107, 255, 0.35), transparent 30rem),
    radial-gradient(circle at 80% 90%, rgba(56, 212, 255, 0.2), transparent 26rem),
    #03050b;
  will-change: clip-path, opacity;
  /* Sin fundido: al terminar la animación la capa debe desaparecer al instante.
     Antes, al quitar .is-enter, la capa volvía a verse entera y se desvanecía
     durante 0,55 s (ese era el parpadeo). */
  transition: none;
}

/* Cubierta previa: se activa desde un script en <head> (antes del primer pintado)
   para que la página nueva no se vea ni un instante antes de que JS cree la capa. */
html.bf-pre-enter::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(139, 107, 255, 0.35), transparent 30rem),
    radial-gradient(circle at 80% 90%, rgba(56, 212, 255, 0.2), transparent 26rem),
    #03050b;
  /* Red de seguridad: si el JS no llega a quitarla, se oculta sola.
     Antes eran 2,5 s: en móvil con red lenta eso se percibía como un
     espacio negro vacío mientras cargaba la página. */
  animation: bf-pre-enter-failsafe 0s linear 1.2s forwards;
}
@keyframes bf-pre-enter-failsafe { to { opacity: 0; visibility: hidden; } }

/* Barrido de escáner sobre el overlay */
html body .bf-transition::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  transform: translateY(0);
  background: linear-gradient(90deg, transparent, var(--bf-green), var(--bf-brand-2), transparent);
  box-shadow: 0 0 30px 6px rgba(94, 242, 224, 0.35);
  opacity: 0;
  pointer-events: none;
}

/* Salida: expansión circular desde el punto del clic */
html body .bf-transition.is-exit {
  opacity: 1;
  visibility: visible;
  animation: bf-circle-open 0.4s var(--bf-ease) both;
}
html body .bf-transition.is-exit::after {
  animation: bf-scan 0.4s var(--bf-ease) both;
}

/* Entrada: el círculo se contrae, revelando la nueva página */
html body .bf-transition.is-enter {
  opacity: 1;
  visibility: visible;
  animation: bf-circle-close 0.55s cubic-bezier(0.7, 0, 0.2, 1) both;
}

@keyframes bf-circle-open {
  from { clip-path: circle(0px at var(--bf-tx, 50%) var(--bf-ty, 50%)); }
  to   { clip-path: circle(150vmax at var(--bf-tx, 50%) var(--bf-ty, 50%)); }
}

@keyframes bf-circle-close {
  from { clip-path: circle(150vmax at 50% 50%); }
  to   { clip-path: circle(0px at 50% 50%); }
}

@keyframes bf-scan {
  0%   { transform: translateY(0); opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

html body .bf-transition__title {
  background: linear-gradient(100deg, #fff, var(--bf-green), var(--bf-brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bf-rise 0.5s var(--bf-spring) 0.03s backwards;
}

html body .bf-transition__symbol {
  text-shadow: 0 0 40px rgba(94, 242, 224, 0.6);
  animation: bf-transition-float 3s ease-in-out infinite;
  display: inline-block;
}

@keyframes bf-transition-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- 10. Movimiento reducido -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html::before,
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html body .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  html body .bf-cursor-glow { display: none; }
  html body .bf-transition.is-exit,
  html body .bf-transition.is-enter { clip-path: none; }
}

/* ---------- 11. Ajustes responsive ---------------------------------------- */

@media (max-width: 680px) {
  html body .bf-hero,
  html body .subject-hero { border-radius: 24px; }
  html body .bf-subject:hover,
  html body .subject-block-card:hover,
  html body .card:hover { --bf-lift: -3px; }
  html body .bf-cursor-glow { display: none; }
}

/* Cursor "de precisión": desactiva el efecto 3D en pantallas táctiles */
@media (hover: none) {
  html body .bf-subject,
  html body .subject-block-card,
  html body .card,
  html body .library-card,
  html body .comparison-card,
  html body .history-card {
    transform: none;
  }
  html body .bf-subject:hover,
  html body .subject-block-card:hover,
  html body .card:hover { --bf-lift: 0px; }
}

/* ---------- 12. Hero: chips y tarjeta de búsqueda ------------------------ */

html body .bf-hero__meta span {
  background: rgba(94, 242, 224, 0.06) !important;
  border: 1px solid var(--bf-border-strong) !important;
  color: var(--bf-text-2) !important;
  font-family: var(--bf-font-mono);
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
html body .bf-hero__meta span::before {
  color: var(--bf-green) !important;
}

html body .bf-hero__search {
  background:
    radial-gradient(60% 60% at 100% 0%, rgba(56, 212, 255, 0.14), transparent 70%),
    linear-gradient(160deg, rgba(20, 30, 54, 0.85), rgba(8, 12, 24, 0.9)) !important;
  border: 1px solid var(--bf-border-strong) !important;
  box-shadow: var(--bf-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html.theme-light body .bf-hero__search {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(240, 245, 255, 0.92)) !important;
}

/* Título de la capa de transición en una sola línea */
html body .bf-transition__title {
  white-space: nowrap;
  font-size: clamp(1.6rem, 5.5vw, 3.4rem);
}

/* Icono de asignatura: pieza de cristal con el color de la materia */
html body .bf-subject__symbol {
  width: 60px;
  height: 60px;
  margin: 0 0 14px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 1.6rem;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--bf-accent, #38d4ff) 35%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.04) !important;
  border: 1px solid color-mix(in srgb, var(--bf-accent, #38d4ff) 45%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 22px color-mix(in srgb, var(--bf-accent, #38d4ff) 25%, transparent) !important;
  color: var(--bf-accent, var(--bf-green)) !important;
}
html.theme-light body .bf-subject__symbol {
  background: rgba(255, 255, 255, 0.7) !important;
}
html body .bf-subject:hover .bf-subject__symbol {
  transform: translateY(-4px) rotate(-6deg) scale(1.08);
}

/* ---------- 13. Controles de formulario con fondo propio de la página ---- */

html body input,
html body select,
html body textarea {
  background: #0b1222 !important;
  color: var(--bf-ink) !important;
  border-color: var(--bf-border-strong) !important;
}
html body input::placeholder,
html body textarea::placeholder {
  color: var(--bf-text-3) !important;
  opacity: 1;
}
html body select option,
html body select optgroup {
  background: #0b1222;
  color: #eaf2ff;
}
html.theme-light body input,
html.theme-light body select,
html.theme-light body textarea {
  background: #ffffff !important;
  color: #0b1224 !important;
}
html.theme-light body select option {
  background: #ffffff;
  color: #0b1224;
}

/* Fila de búsquedas rápidas: píldoras en lugar de una caja de texto */
html body .bf-quick-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 8px 0 0;
  backdrop-filter: none;
}
html body .bf-quick-search span {
  color: var(--bf-text-3);
  font-family: var(--bf-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body .bf-quick-search button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--bf-border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--bf-text-2);
  font: 600 0.75rem var(--bf-font-body);
  cursor: pointer;
}
html body .bf-quick-search button:hover,
html body .bf-quick-search button:focus-visible {
  border-color: var(--bf-green);
  color: var(--bf-green);
  box-shadow: 0 0 18px rgba(94, 242, 224, 0.2);
}

/* ---------- 14. Superficies legacy con !important ------------------------ */

html body header,
html body .bf-header {
  background: rgba(3, 5, 11, 0.6) !important;
}
html.theme-light body header,
html.theme-light body .bf-header {
  background: rgba(238, 243, 251, 0.7) !important;
}

html body .bf-theme-toggle {
  background: rgba(255, 255, 255, 0.04) !important;
}
html.theme-light body .bf-theme-toggle {
  background: rgba(255, 255, 255, 0.7) !important;
}

html body .subject-block-card,
html body .team-card {
  background: var(--bf-card) !important;
}

html body .physics-hero,
html body .subject-hero {
  background:
    radial-gradient(40vmax 40vmax at 90% 0%, color-mix(in srgb, var(--bf-accent, #38d4ff) 22%, transparent), transparent 60%),
    var(--bf-card) !important;
  color: var(--bf-text);
}
html body .physics-hero h1,
html body .subject-hero h1 {
  color: transparent;
}
html body .btn-back {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--bf-ink) !important;
}
html.theme-light body .btn-back {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #0b1224 !important;
}

/* Fondo del body en páginas con clase bf-home (la legacy usa papel claro) */
html body.bf-home {
  background:
    radial-gradient(60vmax 60vmax at 12% -10%, rgba(139, 107, 255, 0.22), transparent 60%),
    radial-gradient(55vmax 55vmax at 95% 0%, rgba(56, 212, 255, 0.16), transparent 60%),
    radial-gradient(70vmax 50vmax at 50% 115%, rgba(192, 132, 252, 0.12), transparent 60%),
    var(--bf-bg);
}
html.theme-light body.bf-home {
  background:
    radial-gradient(60vmax 60vmax at 12% -10%, rgba(109, 60, 240, 0.12), transparent 60%),
    radial-gradient(55vmax 55vmax at 95% 0%, rgba(8, 145, 178, 0.14), transparent 60%),
    var(--bf-bg);
}

/* ---------- 15. Correcciones de revisión: brillos duplicados ------------- */

/* Un único foco de luz por tarjeta: anular el círculo legacy de 170px desenfocado */
html body .bf-subject::before,
html body .subject-block-card::before,
html body .card::before,
html body .glass-panel::before,
html body .library-card::before,
html body .comparison-card::before,
html body .history-card::before,
html body .template-block::before,
html body .physics-directory-card::before,
html body .subject-summary-card::before,
html body .bf-resource-list__item::before {
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: none;
}

/* Brillos decorativos legacy que se apilan con los fondos de la capa */
html body .bf-hero::before,
html body .bf-hero::after,
html body .bf-hero__search::after,
html body .bf-library-search::after,
html body .subject-hero::before {
  display: none !important;
}

/* ---------- 16. Correcciones de revisión: desbordes en móvil ------------- */

html body .card,
html body .subject-block-card,
html body .bullet-list,
html body .bullet-list li,
html body li,
html body h2,
html body h3,
html body p {
  min-width: 0;
  overflow-wrap: anywhere;
}

html body .subject-hero,
html body .subject-hero > *,
html body .subject-hero__content > * {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 680px) {
  html body [class*="grid"],
  html body .subject-grid,
  html body .comparison-grid,
  html body .library-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body [class*="grid"] > *,
  html body .subject-grid > *,
  html body .comparison-grid > *,
  html body .library-grid > * {
    min-width: 0;
    max-width: 100%;
  }
  html body .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
  }
}

/* ---------- 17. Correcciones de revisión: superficies claras en modo oscuro --
   Componentes legacy que pintan fondos blancos; en oscuro su texto (claro)
   quedaba invisible. Se les da una superficie oscura de cristal.            */

html:not(.theme-light) body .subject-summary-card__item,
html:not(.theme-light) body .comparison-section,
html:not(.theme-light) body .comparison-section__icon,
html:not(.theme-light) body .comparison-card__icon,
html:not(.theme-light) body .comparison-card__pill,
html:not(.theme-light) body .comparison-card__badges span,
html:not(.theme-light) body .library-stat,
html:not(.theme-light) body .era-badge,
html:not(.theme-light) body .library-era-section,
html:not(.theme-light) body .library-era-header,
html:not(.theme-light) body .bf-about__mark,
html:not(.theme-light) body .bf-pau__index,
html:not(.theme-light) body .bf-progress__meter,
html:not(.theme-light) body .btn-library:not(.btn-library--primary) {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--bf-text) !important;
  border-color: var(--bf-border-strong) !important;
}

html:not(.theme-light) body .comparison-section,
html:not(.theme-light) body .library-era-section {
  background: var(--bf-card) !important;
}

html:not(.theme-light) body .comparison-section__title-group h2,
html:not(.theme-light) body .comparison-section h2,
html:not(.theme-light) body .library-era-title,
html:not(.theme-light) body .library-era-header h2,
html:not(.theme-light) body .library-era-header h3 {
  color: var(--bf-ink) !important;
}

html:not(.theme-light) body .comparison-section__subtitle,
html:not(.theme-light) body .comparison-section__eyebrow {
  color: var(--bf-text-2) !important;
}

/* Textos en listas dentro de tarjetas claras de la página de adecuación */
html:not(.theme-light) body .subject-summary-card__item,
html:not(.theme-light) body .subject-summary-card__item * {
  color: var(--bf-text) !important;
}

/* ---------- 18. Correcciones de revisión: pie de página en modo claro ---- */

html.theme-light body footer,
html.theme-light body .bf-footer,
html.theme-light body .site-footer,
html.theme-light body .bf-footer__main,
html.theme-light body .bf-footer__bottom {
  color: #334155 !important;
}
html.theme-light body footer .bf-brand,
html.theme-light body .bf-footer .bf-brand {
  color: #0b1224 !important;
}
html.theme-light body footer a,
html.theme-light body .bf-footer a {
  color: #1e3a8a !important;
}
html.theme-light body footer p,
html.theme-light body footer li,
html.theme-light body footer span,
html.theme-light body footer small,
html.theme-light body .bf-footer p,
html.theme-light body .bf-footer span,
html.theme-light body .bf-footer small {
  color: #334155 !important;
}
html.theme-light body footer h2,
html.theme-light body footer h3,
html.theme-light body footer h4,
html.theme-light body .bf-footer h2,
html.theme-light body .bf-footer h3,
html.theme-light body .bf-footer h4 {
  color: #0b1224 !important;
}

/* Icono del hero de asignatura: cuadrado fijo, no se aplasta en flex */
html body .subject-hero__icon {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
}

/* Móvil: campos de búsqueda y botones que no deben sobrepasar la pantalla */
@media (max-width: 680px) {
  html body .library-search-field,
  html body .search-field {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  html body .btn-neon,
  html body .btn-outline,
  html body .btn-library,
  html body .btn-history {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }
}

/* ---------- 19. Correcciones de revisión: paneles oscuros por diseño ----- */

/* El bloque PAU / contacto es un panel verde oscuro con texto claro en ambos
   temas; no debe heredar el fondo de tarjeta claro del modo claro.         */
html body .bf-pau,
html.theme-light body .bf-pau {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(94, 242, 224, 0.16), transparent 70%),
    linear-gradient(160deg, #123d31 0%, #0a1f19 100%) !important;
  border-color: rgba(94, 242, 224, 0.22) !important;
  color: #f2f7f4;
}
html body .bf-pau h2,
html body .bf-pau h3,
html body .bf-pau__index,
html body .bf-pau .bf-section-label,
html body .bf-pau .bf-section-label span {
  color: #f6fbf8 !important;
}
html body .bf-pau p,
html body .bf-pau li,
html body .bf-pau__years {
  color: rgba(242, 247, 244, 0.8) !important;
}
html body .bf-pau label,
html body .bf-contact-form label {
  color: rgba(242, 247, 244, 0.92) !important;
}

/* Tarjetas de contacto: radio de tarjeta, no de píldora */
html body .contact-card,
html body .contact-note {
  border-radius: 22px !important;
}

/* Cabecera más opaca para que el contenido no se transparente al hacer scroll */
html body .bf-header,
html body header {
  background: rgba(3, 5, 11, 0.85) !important;
}
html.theme-light body .bf-header,
html.theme-light body header {
  background: rgba(238, 243, 251, 0.92) !important;
}


/* ---------- 20. Correcciones de revisión (ronda 3) ----------------------- */

/* Tarjetas de sugerencias de contacto: radio de tarjeta, no de píldora */
html body .bf-suggestion-choice {
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 20px;
  min-width: 0;
}

/* Bloque de progreso: la rejilla de temas no puede salir de su contenedor */
html body .bf-progress {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}
html body .bf-progress__topics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  box-sizing: border-box;
}
html body .bf-progress__topics > * {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 680px) {
  html body .bf-progress__topics {
    grid-template-columns: minmax(0, 1fr);
  }
}

html body .bf-progress {
  padding: 48px 44px !important;
}
@media (max-width: 680px) {
  html body .bf-progress {
    padding: 32px 22px !important;
  }
}

/* ---------- 21. Escenas de entrada por asignatura ----------------------- */

html body .bf-transition__art {
  position: relative;
  width: 230px;
  height: 150px;
  max-width: 100%;
}
html body .bf-transition__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
html body .bf-transition__symbol {
  position: relative;
  z-index: 2;
}
html body .bf-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--sc, #5ef2e0);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body .bf-scene text {
  fill: var(--sc, #5ef2e0);
  stroke: none;
  font-family: var(--bf-font-display);
}

/* Trazo que se dibuja (elementos con pathLength="1") */
html body .sc-draw,
html body .sc-axis,
html body .sc-curve,
html body .sc-timeline,
html body .sc-ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sc-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes sc-draw { to { stroke-dashoffset: 0; } }

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

@keyframes sc-pop {
  from { opacity: 0; transform: scale(0.35); }
  to   { opacity: 1; transform: scale(1); }
}

/* Matemáticas: cuadrícula, ejes, curva que se traza y símbolos que aparecen */
html body .sc-grid { stroke: var(--sc); stroke-opacity: 0.16; stroke-width: 1; animation: sc-fade 0.6s ease both; }
html body .sc-axis { stroke-opacity: 0.55; stroke-width: 1.4; animation-duration: 0.6s; }
html body .sc-curve { stroke-width: 3; filter: drop-shadow(0 0 6px var(--sc)); animation-duration: 1s; animation-delay: 0.15s; }
html body .sc-tok {
  font-size: 22px;
  font-weight: 600;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
html body .sc-tok.t1 { animation-delay: 0.5s; }
html body .sc-tok.t2 { animation-delay: 0.7s; }
html body .sc-tok.t3 { animation-delay: 0.9s; }

/* Física: núcleo que palpita y tres órbitas que giran a la vez */
html body .sc-nucleus {
  fill: var(--sc);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 8px var(--sc));
  animation: sc-breathe 1.2s ease-in-out infinite;
}
@keyframes sc-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
html body .sc-orbit {
  transform-box: view-box;
  transform-origin: 115px 75px;
  animation: sc-orbit-spin 3.2s linear infinite;
}
html body .sc-orbit ellipse { stroke: var(--sc); stroke-opacity: 0.4; }
html body .sc-electron { fill: var(--sc); stroke: none; filter: drop-shadow(0 0 5px var(--sc)); }
@keyframes sc-orbit-spin {
  from { transform: rotate(var(--r)); }
  to   { transform: rotate(calc(var(--r) + 360deg)); }
}

/* Filosofía: columnas de un templo que se levantan y frontón que aparece */
html body .sc-column {
  fill: var(--sc);
  fill-opacity: 0.14;
  stroke: var(--sc);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sc-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes sc-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
html body .sc-pediment { fill: var(--sc); fill-opacity: 0.16; animation: sc-fade 0.6s 0.5s both; }
html body .sc-base { stroke-width: 3; animation: sc-fade 0.5s 0.4s both; }

/* Dibujo Técnico: compás y escuadra que se trazan en secuencia */
html body .sc-draw { stroke-width: 2.2; }
html body .sc-draw.d2 { animation-delay: 0.15s; }
html body .sc-draw.d3 { animation-delay: 0.3s; }
html body .sc-draw.d4 { animation-delay: 0.45s; }
html body .sc-draw.d5 { animation-delay: 0.6s; }

/* Historia: línea del tiempo con hitos y fechas */
html body .sc-timeline { stroke-width: 2.4; animation-duration: 0.8s; }
html body .sc-dot {
  fill: var(--sc);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sc-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.18s);
}
html body .sc-year {
  font-family: var(--bf-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-anchor: middle;
  opacity: 0;
  animation: sc-fade 0.4s both;
  animation-delay: calc(0.5s + var(--i, 0) * 0.18s);
}

/* Inglés: burbujas de diálogo en dos idiomas */
html body .sc-bubble {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sc-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
html body .sc-bubble rect {
  fill: var(--sc);
  fill-opacity: 0.14;
  stroke: var(--sc);
  stroke-width: 2;
}
html body .sc-bubble text {
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}

/* Biología: membrana que crece, núcleo que palpita y orgánulos en órbita */
html body .sc-membrane {
  stroke-width: 3;
  fill: var(--sc);
  fill-opacity: 0.06;
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-grow 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes sc-grow {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}
html body .sc-nucleolus {
  fill: var(--sc);
  fill-opacity: 0.35;
  stroke: var(--sc);
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-breathe 1.6s ease-in-out 0.6s infinite;
}
html body .sc-spin {
  transform-box: view-box;
  transform-origin: 115px 75px;
  animation: sc-spin 4s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
html body .sc-organelle { fill: var(--sc); stroke: none; }

/* Química: anillo de benceno que se traza, átomos que aparecen y burbujas */
html body .sc-ring { stroke-width: 2.6; animation-delay: 0.2s; animation-duration: 0.9s; }
html body .sc-atom {
  fill: var(--sc);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: sc-pop 0.4s both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.14s);
}
html body .sc-bubble-rise {
  fill: var(--sc);
  fill-opacity: 0.5;
  stroke: none;
  animation: sc-rise-up 1.1s ease-in infinite;
}
html body .sc-bubble-rise.b2 { animation-delay: 0.4s; }
@keyframes sc-rise-up {
  from { transform: translateY(0); opacity: 0.8; }
  to   { transform: translateY(-40px); opacity: 0; }
}

/* Lengua conserva el libro CSS que ya existía (no lleva escena SVG) */
html body .bf-transition[data-subject="lengua"] .bf-transition__scene { display: none; }

/* Dibujos legacy del overlay: se retiran para no duplicar la escena nueva.
   Lengua conserva su libro CSS. */
html body .bf-transition:not([data-subject="lengua"]) .bf-transition__art::before,
html body .bf-transition:not([data-subject="lengua"]) .bf-transition__art::after {
  display: none !important;
}
/* En asignaturas con escena propia, el símbolo de texto no compite con ella */
html body .bf-transition[data-subject]:not([data-subject="generic"]):not([data-subject="lengua"]) .bf-transition__symbol {
  display: none;
}
/* Recursos y otras páginas genéricas: un único distintivo «BF» */
html body .bf-transition[data-subject="generic"] .bf-transition__symbol {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #fff;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(103, 87, 245, 0.9), rgba(22, 184, 212, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 25px 55px rgba(103, 87, 245, 0.25);
  animation: bf-generic-art 1s var(--bf-ease) both;
}
@keyframes bf-generic-art {
  from { opacity: 0; transform: rotate(-12deg) scale(0.55); }
  to   { opacity: 1; transform: none; }
}
html body .bf-suggestion-choice strong {
  font-family: var(--bf-font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--bf-ink);
}


/* ---------- 22. Tarjeta editorial (Contacto, Quiénes somos…) ------------- */

/* Margen interior: antes el contenido tocaba los bordes de la tarjeta y el
   botón de la derecha se recortaba. */
html body .bf-editorial {
  padding: 34px clamp(22px, 4vw, 56px) 56px;
  margin-bottom: 28px;
}
html body .bf-editorial__body { align-items: start; }

/* Separación entre el párrafo y el subtítulo "Elige tu canal" */
html body .bf-editorial__body p + h2 { margin-top: 44px; }
html body .bf-editorial__body h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }

/* Filas de contacto: tipo | título | flecha, con el dato debajo del título */
html body .bf-resource-list a { padding: 20px 0; }
html body .bf-resource-list a > small {
  grid-column: 2 / -1;
  margin-top: -4px;
  color: var(--bf-text-2, var(--bf-muted));
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
html body .bf-resource-list__arrow { justify-self: end; }

@media (max-width: 680px) {
  html body .bf-editorial { padding: 26px 20px 36px; }
  html body .bf-editorial__body p + h2 { margin-top: 30px; }
  html body .bf-resource-list a > small { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- 23. Botón de subir vs. botón de cookies ----------------------- */

/* Ambos estaban fijos en la esquina inferior derecha y se solapaban.
   El de subir se coloca justo encima del de cookies. */
html body .back-to-top {
  right: 18px;
  bottom: 68px;
}

/* Mientras el aviso de cookies está abierto, el botón de subir se oculta
   para no quedar debajo ni asomar por el borde del aviso. */
html body:has(.cookie-banner:not(.cookie-banner--hidden)) .back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- 24. Correcciones de modo oscuro y móvil ----------------------- */

/* "Tu progreso" tenía un fondo blanco semitransparente también en oscuro:
   quedaba gris y el texto claro no se leía. */
html:not(.theme-light) body .bf-progress {
  background: var(--bf-card) !important;
}

/* Contraste en modo oscuro: tarjetas claras con texto claro y botones cian con
   texto blanco eran ilegibles. */
html:not(.theme-light) body .bf-suggestion-choice {
  background: var(--bf-card) !important;
  border-color: var(--bf-border-strong) !important;
}
html:not(.theme-light) body .bf-suggestion-choice strong { color: var(--bf-ink) !important; }
html:not(.theme-light) body .bf-suggestion-choice small { color: var(--bf-text-2) !important; }

html:not(.theme-light) body .btn-library--primary,
html:not(.theme-light) body .physics-directory-card a[href*="fiquipedia"] {
  color: #04141c !important;
}
html:not(.theme-light) body .card-tags li {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--bf-border) !important;
  color: var(--bf-text-2) !important;
}

/* Botón de enviar del formulario: fondo verde claro, texto oscuro también en oscuro */
html:not(.theme-light) body .bf-contact-form .bf-button,
html:not(.theme-light) body .bf-contact-form .bf-button span { color: #0b2a1e !important; }

/* Tarjetas de asignaturas: el círculo decorativo queda detrás del texto */
html body .bf-subject::after { opacity: 0.16; z-index: 0; }
html body .bf-subject > strong,
html body .bf-subject > small,
html body .bf-subject > .bf-subject__number,
html body .bf-subject > .bf-subject__symbol { position: relative; z-index: 1; }

/* Móvil: separación entre el sello "BF · Contacto" y la etiqueta de sección */
@media (max-width: 920px) {
  html body .bf-contact-section .bf-pau__index { margin-bottom: 20px; }
}

/* Tarjetas de bloques (Temas de literatura, Matemáticas…): con min-height:100% la
   tarjeta era más alta que su fila y se montaba sobre la siguiente en móvil. */
html body .subject-grid > .subject-block-card,
html body .subject-grid > article {
  min-height: 0;
  height: auto;
}
html body .subject-grid { grid-auto-rows: auto; align-items: stretch; }

/* Buscador de la biblioteca de filosofía: margen interior del texto y botón en fila */
html body .library-search-field input { padding-left: 16px; }
@media (max-width: 680px) {
  html body .library-search-field { display: flex; gap: 8px; align-items: stretch; }
  html body .library-search-field input { flex: 1 1 auto; min-width: 0; }
  html body .library-search-field button { flex: 0 0 52px; width: 52px; }
  /* Quiénes somos: la etiqueta no pega con la cabecera */
  html body .bf-team-intro { padding-top: 34px; }
}

/* ---------- 25. Arranque sincronizado y modo ligero ------------------------ */

/* Mientras la transición de entrada está en marcha, el resto de animaciones
   esperan (quedan en su primer fotograma). Al terminar, todas arrancan a la vez,
   así que se ven igual en cualquier dispositivo. */
html.bf-booting body *:not(.bf-transition):not(.bf-transition *),
html.bf-booting body *:not(.bf-transition):not(.bf-transition *)::before,
html.bf-booting body *:not(.bf-transition):not(.bf-transition *)::after {
  animation-play-state: paused !important;
}

/* Equipos que no llegan a ~30 fps: se quitan los efectos más pesados.
   Las duraciones y el orden de las animaciones no cambian. */
html.bf-lite body * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.bf-lite body .reveal { filter: none !important; }
html.bf-lite body .bfb-glow,
html.bf-lite body .bf-cursor-glow,
html.bf-lite body .bf-banner::before { display: none !important; }
html.bf-lite body .bf-timeline::before { animation: none !important; }

/* ==========================================================================
   Página PAU (pau.html) y bloque de Donaciones (contacto.html)
   Usa los mismos tokens, bordes, sombras y animación .reveal que el resto.
   ========================================================================== */
.bf-pau-page { max-width: 1100px; }
.bf-pau-stack { display: grid; gap: 22px; margin-bottom: 48px; }
.bf-pau-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr);
  gap: 28px 48px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 20px;
  background: var(--bf-white);
  box-shadow: var(--bf-shadow);
  transition: border-color 0.35s var(--bf-ease), box-shadow 0.35s var(--bf-ease), transform 0.35s var(--bf-ease);
}
.bf-pau-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--bf-brand), var(--bf-cyan));
  opacity: 0.8;
}
.bf-pau-card:hover { border-color: var(--bf-border-strong); box-shadow: var(--bf-glow); }
.bf-pau-card__num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--bf-font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--bf-cyan);
}
.bf-pau-card h2 {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.08;
}
.bf-pau-card__body { color: var(--bf-muted); font-size: 0.98rem; line-height: 1.75; align-self: center; }
.bf-pau-card__body p { margin: 0 0 12px; }
.bf-pau-card__body p:last-child { margin-bottom: 0; }
.bf-pau-card__body ul, .bf-pau-card__body ol { margin: 0 0 12px; padding-left: 1.2em; }
.bf-pau-placeholder {
  padding: 18px 20px;
  border: 1px dashed var(--bf-border-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bf-brand) 7%, transparent);
}
.bf-pau-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--bf-border);
  color: var(--bf-ink);
  text-decoration: none;
  transition: color 0.25s var(--bf-ease), padding-left 0.25s var(--bf-ease);
}
.bf-pau-link:first-child { border-top: 1px solid var(--bf-border); }
.bf-pau-link:hover, .bf-pau-link:focus-visible { color: var(--bf-green); padding-left: 8px; outline: 0; }
.bf-pau-link__type { grid-column: 1 / -1; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-cyan); }
.bf-pau-link strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 400; }
.bf-pau-link small { grid-column: 1; color: var(--bf-muted); font-size: 0.85rem; }
.bf-pau-link__arrow { grid-column: 2; grid-row: 2 / 4; align-self: center; color: var(--bf-green); font-weight: 800; }
.bf-pau-tips { counter-reset: tip; list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.bf-pau-tips li { counter-increment: tip; position: relative; padding: 12px 14px 12px 52px; border: 1px solid var(--bf-border); border-radius: 12px; }
.bf-pau-tips li::before {
  content: counter(tip);
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bf-brand), var(--bf-cyan)); color: #04101c; font-size: 0.78rem; font-weight: 800;
}
@media (max-width: 820px) {
  .bf-pau-card { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px 26px 26px; }
}

/* Donaciones */
.bf-donate {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px 40px;
  align-items: center;
  margin: 40px 0 56px;
  padding: 40px 44px;
  overflow: hidden;
  border: 1px solid var(--bf-border-strong);
  border-radius: 28px;
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--bf-brand-2) 26%, transparent), transparent 60%),
    radial-gradient(50% 100% at 0% 100%, color-mix(in srgb, var(--bf-cyan) 18%, transparent), transparent 60%),
    var(--bf-white);
  box-shadow: var(--bf-shadow-lg);
}
.bf-donate__heart {
  display: grid; place-items: center; width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bf-brand), var(--bf-brand-2));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--bf-brand) 14%, transparent), 0 18px 40px rgba(139, 107, 255, 0.35);
  font-size: 2.6rem; line-height: 1;
  animation: bf-donate-beat 2.6s ease-in-out infinite;
}
.bf-donate h2 {
  margin: 0 0 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 400; letter-spacing: -0.05em; line-height: 1.04;
}
.bf-donate p { max-width: 560px; margin: 0; color: var(--bf-muted); font-size: 1rem; line-height: 1.7; }
.bf-donate__note { margin-top: 10px !important; font-size: 0.8rem !important; color: var(--bf-text-3) !important; }
.bf-donate__button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--bf-brand), var(--bf-brand-2) 55%, var(--bf-cyan));
  color: #060912; font-weight: 800; font-size: 1rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 34px rgba(139, 107, 255, 0.4);
  transition: transform 0.3s var(--bf-spring), box-shadow 0.3s var(--bf-ease);
}
.bf-donate__button:hover, .bf-donate__button:focus-visible { transform: translateY(-3px) scale(1.03); box-shadow: 0 20px 44px rgba(139, 107, 255, 0.55); outline: 0; }
.bf-donate__button span { transition: transform 0.3s var(--bf-ease); }
.bf-donate__button:hover span { transform: translateX(4px); }
@keyframes bf-donate-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 24% { transform: scale(1); } 36% { transform: scale(1.05); } }
@media (max-width: 820px) {
  .bf-donate { grid-template-columns: 1fr; justify-items: start; padding: 30px 24px; gap: 20px; }
  .bf-donate__heart { width: 72px; height: 72px; font-size: 2rem; }
  .bf-donate__button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .bf-donate__heart { animation: none; } }
html.bf-lite body .bf-donate__heart { animation: none; }


/* ---------- 25. Aviso de cookies: sin parpadeo entre páginas ---------------- */

/* Si el aviso ya se aceptó, nace oculto y sin animación (ver cookie-consent.js).
   Solo se anima al abrirlo o cerrarlo de verdad con el botón «Cookies» / «Entendido». */
html body .cookie-banner.cookie-banner--instant {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
}

/* Tras la animación de cierre, el aviso queda fuera del flujo de foco y lectores. */
html body .cookie-banner.cookie-banner--hidden {
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}


/* ---------- 26. Tarjetas apiladas: solo la de delante es interactiva -------- */

/* Una tarjeta que contiene a otras (el panel de fondo de «Valoraciones críticas»,
   «Temas de literatura», etc.) se queda quieta: sin elevarse, inclinarse ni brillar.
   Así solo reacciona la tarjeta que está delante y deja de «marear». */
html body :is(.bf-subject,.subject-block-card,.card,.glass-panel,.library-card,.comparison-card,.history-card,.template-block,.physics-directory-card,.subject-summary-card,.bf-resource-list__item):has(:is(.bf-subject,.subject-block-card,.card,.glass-panel,.library-card,.comparison-card,.history-card,.template-block,.physics-directory-card,.subject-summary-card,.bf-resource-list__item)),
html body :is(.bf-subject,.subject-block-card,.card,.glass-panel,.library-card,.comparison-card,.history-card,.template-block,.physics-directory-card,.subject-summary-card,.bf-resource-list__item):has(:is(.bf-subject,.subject-block-card,.card,.glass-panel,.library-card,.comparison-card,.history-card,.template-block,.physics-directory-card,.subject-summary-card,.bf-resource-list__item)):hover {
  --bf-lift: 0px;
  --bf-rx: 0deg;
  --bf-ry: 0deg;
  transform: none !important;
  border-color: var(--bf-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--bf-shadow) !important;
}
html body :is(.bf-subject,.subject-block-card,.card,.glass-panel,.library-card,.comparison-card,.history-card,.template-block,.physics-directory-card,.subject-summary-card,.bf-resource-list__item):has(:is(.bf-subject,.subject-block-card,.card,.glass-panel,.library-card,.comparison-card,.history-card,.template-block,.physics-directory-card,.subject-summary-card,.bf-resource-list__item)):hover::before {
  opacity: 0;
}

/* ---------- 27. Tabla de características literarias ------------------------ */

.bf-table-intro {
  margin: 6px 0 20px;
  color: var(--bf-text-2);
  max-width: 70ch;
}
.bf-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-surface-solid);
  -webkit-overflow-scrolling: touch;
}
.bf-table-wrap:focus-visible { outline: 2px solid var(--bf-green); outline-offset: 3px; }
.bf-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bf-text);
}
.bf-table caption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bf-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 16px;
  text-align: left;
  font-family: var(--bf-font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-green);
  background: color-mix(in srgb, var(--bf-surface-solid) 88%, var(--bf-brand) 12%);
  border-bottom: 1px solid var(--bf-border-strong);
}
.bf-table tbody th,
.bf-table tbody td {
  padding: 16px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--bf-border);
}
.bf-table thead th:not(:first-child),
.bf-table tbody td { width: 26.66%; }
.bf-table tbody tr:last-child th,
.bf-table tbody tr:last-child td { border-bottom: 0; }
.bf-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 20%;
  min-width: 190px;
  font-family: var(--bf-font-display);
  font-weight: 700;
  color: var(--bf-ink);
  background: var(--bf-surface-solid);
  border-right: 1px solid var(--bf-border);
}
.bf-table tbody th small {
  display: block;
  margin-bottom: 4px;
  font-family: var(--bf-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bf-brand);
}
.bf-table tbody tr:hover td { background: color-mix(in srgb, var(--bf-brand) 6%, transparent); }
.bf-table ul { margin: 0; padding-left: 1.1em; }
.bf-table li + li { margin-top: 4px; }
.bf-table .is-empty { color: var(--bf-text-3); }
.bf-table-hint {
  display: none;
  margin: 10px 2px 0;
  font-size: 0.82rem;
  color: var(--bf-text-3);
}
@media (max-width: 900px) { .bf-table-hint { display: block; } }

/* ── Indicador «En desarrollo» en la pestaña de Aplicaciones ── */
.bf-nav-wip {
  position: relative;
}
.bf-nav-wip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bf-green, #5ef2e0);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 7px;
  vertical-align: middle;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s;
}
.bf-nav-wip-badge::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: bf-wip-pulse 1.8s ease-in-out infinite;
}
@keyframes bf-wip-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .bf-nav-wip-badge::before { animation: none; }
}
/* En móvil el menú es vertical: dar algo más de espacio */
@media (max-width: 720px) {
  .bf-nav-wip-badge { margin-left: 8px; }
}

/* =============================================================================
   Motion UI extensions — Hero Background Paths + Bento Grid
   ============================================================================= */

/* ── Hero Background Paths ──────────────────────────────────────────────────── */
html body .bf-hero-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
html body .bf-hero-paths .bf-hp {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body .bf-hero-paths .bf-hp--a {
  stroke: var(--bf-brand);
  stroke-width: 1.2;
  opacity: 0.22;
}
html body .bf-hero-paths .bf-hp--b {
  stroke: var(--bf-cyan);
  stroke-width: 0.9;
  opacity: 0.16;
}
html body .bf-hero-paths .bf-hp--c {
  stroke: var(--bf-green);
  stroke-width: 0.7;
  opacity: 0.11;
}
html.theme-light body .bf-hero-paths .bf-hp--a { opacity: 0.10; }
html.theme-light body .bf-hero-paths .bf-hp--b { opacity: 0.09; }
html.theme-light body .bf-hero-paths .bf-hp--c { opacity: 0.07; }

/* Asegurar que el contenido del hero queda por encima del SVG */
html body .bf-hero > .bf-hero__copy,
html body .bf-hero > .bf-hero__search {
  position: relative;
  z-index: 1;
}

/* ── Bento Grid: primera tarjeta destacada ──────────────────────────────────── */
@media (min-width: 901px) {
  html body .bf-subjects__grid > :first-child {
    grid-column: span 2;
  }
  html body .bf-subjects__grid > :first-child .bf-subject__symbol {
    font-size: 2.4rem;
    opacity: 0.8;
  }
  html body .bf-subjects__grid > :first-child strong {
    font-size: 1.05em;
  }
}