/* =========================================================
   Elemental W — Química · Base
   Identidad visual del módulo de Química.
   Depende de: design-tokens.css, themes.css, ui-components.css
   ========================================================= */

/* ---------- Layout general ---------- */

.quim-body {
  /* Escala visual del módulo: basada en tokens oficiales de Elemental W */
  --quim-title-class-size: var(--ew-text-xl);
  --quim-title-section-size: var(--ew-text-xl);
  --quim-title-item-size: var(--ew-text-lg);
  --quim-text-size: var(--ew-text-base);
  --quim-text-secondary-size: var(--ew-text-base);

  --quim-diagram-method-size: 100px;
  --quim-diagram-tree-size: 40px;

  /* Paleta ilustrativa: la interfaz sigue usando theme purple */
  --quim-diagram-ink: var(--ew-theme-ink);
  --quim-diagram-pink: var(--ew-palette-pink-accent);
  --quim-diagram-pink-soft: var(--ew-palette-pink-background);
  --quim-diagram-blue: var(--ew-palette-blue-accent);
  --quim-diagram-blue-soft: var(--ew-palette-blue-background);
  --quim-diagram-orange: var(--ew-palette-orange-surface);
  --quim-diagram-muted: var(--ew-palette-purple-surface);

  /* Elimina el blanco puro del módulo, en tonos FRÍOS (no el papel
     cálido/crema del cuaderno, que se ve amarillento sobre morado).
     --ew-color-surface (#fff) y --ew-color-surface-soft vienen de
     design-tokens.css con blanco puro mezclado adentro, y Química
     los usa DIRECTO en decenas de cajas/tarjetas/botones (a
     diferencia de Física, que nunca toca estos tokens crudos y
     siempre pasa por sus propios alias --ewf-papel / --ewf-fondo-
     panel). Aquí el "blanco" base es en realidad un blanco frío
     teñido con la propia tinta morada del tema (--ew-theme-ink),
     así se mantiene en la familia de color de Química en vez de
     virar a un tono cálido. Ámbito solo en .quim-body: no toca el
     token global ni afecta a Física u otros módulos con tema
     purple. */
  --quim-blanco-frio: color-mix(in srgb, var(--ew-theme-ink) 6%, white);
  --quim-papel-frio: color-mix(in srgb, var(--ew-theme-ink) 3%, white);
  /* El "papel" compartido (--ew-color-paper) es un crema cálido
     pensado para el motivo de cuaderno de TODA la app (Física
     también lo usa igual). Aquí se sobreescribe solo dentro de
     .quim-body para que el fondo de Química, el header y cualquier
     otra regla de este archivo que use var(--ew-color-paper) caigan
     en un blanco frío teñido de tinta morada en vez de crema —
     sin tocar el token global ni el fondo de Física. */
  --ew-color-paper: var(--quim-papel-frio);
  --ew-color-surface: var(--quim-blanco-frio);
  --ew-color-surface-soft: color-mix(
    in srgb,
    var(--ew-theme-background) 45%,
    var(--quim-blanco-frio)
  );

  margin: 0;
  color: var(--ew-theme-ink);
  background-color: var(--ew-color-paper);
  background-image:
    linear-gradient(
      var(--ew-color-paper-grid) var(--ew-paper-grid-line),
      transparent var(--ew-paper-grid-line)
    ),
    linear-gradient(
      90deg,
      var(--ew-color-paper-grid) var(--ew-paper-grid-line),
      transparent var(--ew-paper-grid-line)
    );
  background-size: var(--ew-paper-grid-size) var(--ew-paper-grid-size);
}

.quim-main {
  width: min(calc(100% - var(--ew-space-5) * 2), var(--ew-container-md));
  margin-inline: auto;
  padding-block: var(--ew-space-5);
}

/* ---------- Header ---------- */

.quim-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 2px solid color-mix(
    in srgb,
    var(--ew-theme-accent) 32%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--ew-color-paper) 88%,
    var(--ew-theme-background)
  );
  backdrop-filter: blur(16px);
}

.quim-header__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

.quim-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-3);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-display);
  font-size: var(--ew-text-xl);
  text-decoration: none;
}

.quim-brand:focus-visible {
  border-radius: var(--ew-radius-sm);
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 4px;
}

.quim-brand__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.quim-header__label {
  color: var(--ew-theme-accent);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-lg);
  font-weight: 700;
  font-synthesis: weight;
}

/* ---------- Selector de clases ---------- */

.quim-selector {
  display: grid;
  gap: var(--ew-space-5);
  padding-block: var(--ew-space-6);
}

.quim-selector__titulo {
  margin: 0;
  font-family: var(--ew-font-display);
  font-size: var(--ew-text-3xl);
  color: var(--ew-theme-ink);
  line-height: 1.2;
}

.quim-selector__subtitulo {
  margin: 0;
  color: var(--ew-color-text-muted);
  line-height: 1.5;
}

.quim-clases {
  display: grid;
  gap: var(--ew-space-5);
}

@media (min-width: 768px) {
  .quim-clases {
    grid-template-columns: 1fr 1fr;
  }
}

.quim-clase-card {
  position: relative;
  display: grid;
  gap: var(--ew-space-2);
  padding: var(--ew-space-5);
  padding-right: calc(var(--ew-space-5) + 46px);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-lg);
  background: var(--ew-color-surface);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    border-color var(--ew-transition-base);
}

/* Franja de acento — mismo recurso visual que .fis-clase-card::before
   en Física (Fisica/css/fisica-base.css), en la gama de Química
   (acento del tema + rosa de diagramas, en vez de teoría/mostaza). */
.quim-clase-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(
    var(--ew-theme-accent),
    var(--quim-diagram-pink)
  );
}

.quim-clase-card:hover {
  transform: translateY(-2px);
  border-color: var(--ew-theme-accent);
  box-shadow: var(--ew-shadow-md);
}

.quim-clase-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 28%, transparent);
  outline-offset: 3px;
}

/* Chispa asomando en cada tarjeta — mismo patrón que
   .fis-clase-card__chispa en Física; Química no lo tenía todavía. */
.quim-clase-card__chispa {
  position: absolute;
  top: var(--ew-space-3);
  right: var(--ew-space-3);
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.9;
}

.quim-clase-card__eyebrow {
  margin: 0;
  color: var(--ew-theme-accent);
  font-size: var(--ew-text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quim-clase-card__titulo {
  margin: 0;
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xl);
  color: var(--ew-theme-ink);
  line-height: 1.25;
  font-weight: 700;
}

/* ---------- Vista de tema activo ---------- */

.quim-tema-header {
  display: flex;
  align-items: center;
  gap: var(--ew-space-3);
  margin-bottom: var(--ew-space-4);
}



.quim-tema-header__titulo {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-class-size);
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- Fondo cuaderno ---------- */

.quim-cuaderno {
  padding: 0;
}

/* ── Bloque de evaluación al final de la lección — reemplaza el
   antiguo modo "Evaluación" aparte: la evaluación de una clase se
   activa DENTRO de esa misma clase, nunca en otra pantalla. Mismo
   patrón que .fis-leccion-evaluacion en Fisica/css/fisica-base.css. ── */
.quim-leccion-evaluacion {
  width: min(900px, calc(100% - 2rem));
  box-sizing: border-box;
  margin: clamp(28px, 6vw, 44px) auto 0;
  padding: clamp(20px, 5vw, 28px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ew-space-4);
  border: 2px dashed var(--ew-theme-accent);
  border-radius: var(--ew-radius-lg);
  background: color-mix(in srgb, var(--ew-theme-surface) 20%, var(--ew-color-surface));
}

.quim-leccion-evaluacion--activa {
  display: block;
  background: var(--ew-color-surface);
  border-style: solid;
}

.quim-leccion-evaluacion__chispa {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.quim-leccion-evaluacion__texto {
  flex: 1;
  min-width: 200px;
}

.quim-leccion-evaluacion__titulo {
  margin: 0 0 4px;
  font-family: var(--ew-font-heading);
  font-weight: 700;
  color: var(--ew-theme-ink);
  font-size: 1rem;
}

.quim-leccion-evaluacion__subtitulo {
  margin: 0;
  color: var(--ew-color-text-muted);
  font-size: 0.88rem;
}

.quim-leccion-evaluacion__btn {
  flex-shrink: 0;
  border: none;
  border-radius: var(--ew-radius-pill);
  padding: 11px 22px;
  background: var(--ew-theme-accent);
  color: var(--ew-color-text-inverse);
  font-family: var(--ew-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--ew-shadow-sm);
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base);
}
.quim-leccion-evaluacion__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ew-shadow-md);
}

/* ── Pregunta inicial obligatoria — bloquea la entrada a la lección
   hasta que el estudiante responde; ver js/core/educativo/
   pregunta-inicial.js. Una vez respondida, no vuelve a pintarse. ── */
.quim-pregunta-inicial {
  width: min(700px, calc(100% - 2rem));
  box-sizing: border-box;
  margin: clamp(28px, 6vw, 44px) auto;
  padding: clamp(20px, 5vw, 28px);
  display: grid;
  gap: var(--ew-space-3);
  border-radius: var(--ew-radius-lg);
  background: var(--ew-color-surface);
  border: 2px solid var(--ew-theme-accent);
  box-shadow: var(--ew-shadow-md);
}

.quim-pregunta-inicial__etiqueta {
  justify-self: start;
  padding: 0.2rem 0.7rem;
  border-radius: var(--ew-radius-pill);
  background: var(--ew-theme-surface);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-weight: 700;
  font-size: var(--ew-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quim-pregunta-inicial__pregunta {
  margin: 0;
  font-family: var(--ew-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ew-color-text);
}

.quim-pregunta-inicial__campo {
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
  padding: var(--ew-space-2);
  border-radius: var(--ew-radius-sm);
  border: 1px solid var(--ew-color-border);
  background: var(--ew-color-surface-soft);
  color: var(--ew-color-text);
  font-family: var(--ew-font-body);
  font-size: var(--quim-text-size);
}

.quim-pregunta-inicial__aviso {
  margin: 0;
  min-height: 1.1em;
  color: var(--ew-color-danger, #c0392b);
  font-size: var(--ew-text-xs);
}

.quim-pregunta-inicial__boton {
  justify-self: start;
  border: none;
  border-radius: var(--ew-radius-pill);
  padding: 11px 22px;
  background: var(--ew-theme-accent);
  color: var(--ew-color-text-inverse);
  font-family: var(--ew-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--ew-shadow-sm);
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base);
}
.quim-pregunta-inicial__boton:hover {
  transform: translateY(-2px);
  box-shadow: var(--ew-shadow-md);
}

/* ---------- Experiencia (quim- prefix, generado por el motor) ---------- */

.quim-experiencia {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--ew-space-4);
  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface);
  padding: var(--ew-space-4);
}

.quim-experiencia__titulo {
  margin: 0 0 var(--ew-space-3);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-section-size);
  font-weight: 700;
  line-height: 1.3;
}

.quim-experiencia__escenario {
  min-height: 60px;
  /* experiencias.js fija min-height (al tamaño del paso más alto de la
     lección) tras el primer clic de flecha, para que el escenario deje
     de cambiar de alto entre pasos. Esta transición suaviza ese único
     ajuste en vez de que se sienta como un salto brusco. */
  transition: min-height 0.25s ease;
}

.quim-experiencia__progreso {
  margin-top: var(--ew-space-2);
}

.quim-experiencia__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ew-space-4);
  margin-top: var(--ew-space-3);
}

.quim-experiencia__nav[hidden] {
  display: none !important;
}



.quim-experiencia__indicador {
  font-size: var(--ew-text-sm);
  font-weight: 600;
  color: var(--ew-color-text-muted);
}

.quim-experiencia__paso {
  animation: ew-fade-up 300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.quim-experiencia__texto {
  margin: var(--ew-space-3) 0 0;
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.65;
  color: var(--ew-color-text);
}

.quim-experiencia__texto strong {
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-weight: 700;
  font-synthesis: weight;
  text-shadow: 0.25px 0 currentColor;
}


.quim-experiencia__btn-reflexion {
  display: inline-flex;
  align-items: center;
  margin-top: var(--ew-space-3);
  padding: 0.5rem 1rem;
  border: 1px solid var(--ew-theme-accent);
  border-radius: var(--ew-radius-pill);
  background: transparent;
  color: var(--ew-theme-accent);
  font-weight: 700;
  font-size: var(--ew-text-sm);
  cursor: pointer;
  transition: background var(--ew-transition-fast), color var(--ew-transition-fast);
}

.quim-experiencia__btn-reflexion:hover {
  background: var(--ew-theme-accent);
  color: var(--ew-color-text-inverse);
}

.quim-experiencia__referencia {
  margin: var(--ew-space-2) 0 0;
  font-size: var(--ew-text-xs);
  color: var(--ew-color-text-muted);
  font-style: italic;
}

.quim-experiencia__transicion {
  display: grid;
  place-items: center;
  gap: var(--ew-space-3);
  padding: var(--ew-space-5) var(--ew-space-4);
  text-align: center;
}

.quim-experiencia__fade-in {
  animation: ew-fade-in 400ms ease forwards;
}

.quim-experiencia__transicion-titulo {
  margin: 0;
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xl);
  color: var(--ew-color-plum);
}

.quim-experiencia__transicion-texto {
  margin: 0;
  color: var(--ew-color-text-muted);
  font-size: var(--ew-text-sm);
}

/* ---------- Stub ---------- */

.quim-bloque-stub {
  padding: var(--ew-space-3);
  border: 2px dashed var(--ew-color-border);
  border-radius: var(--ew-radius-sm);
  background: var(--ew-color-surface-soft);
  color: var(--ew-color-text-muted);
  font-size: var(--ew-text-xs);
  font-style: italic;
  text-align: center;
}

/* ---------- Builder: lista-vertical ---------- */

.quim-lista-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ew-space-2);
}

.quim-lista-vertical__item {
  padding: var(--ew-space-2) var(--ew-space-3);
  border-left: 3px solid var(--ew-theme-accent);
  background: var(--ew-color-surface-soft);
  border-radius: 0 var(--ew-radius-sm) var(--ew-radius-sm) 0;
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.55;
}

/* ---------- Builders: clasif-mapa, clasif-comparacion, clasif-resumen ---------- */
/* Estos formatos NO dibujan su propia caja ni su propio carrusel:
   viven directamente dentro de .quim-experiencia__paso, que ya es
   la única caja de la lección y ya trae su propia navegación
   (flechas, teclado, swipe) vía el motor compartido de
   experiencias.js. Antes existía un carrusel interno duplicado
   (viewport/pista/flechas/puntos) anidado dentro de ese carrusel
   externo — se eliminó por completo para que solo haya UN sistema
   de navegación por lección. */

.quim-clasif-slide {
  display: grid;
  gap: var(--ew-space-3);
}

.quim-clasif-slide__titulo {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-item-size);
  font-weight: 700;
  font-synthesis: weight;
  line-height: 1.25;
}

.quim-clasif-slide__intro {
  margin: 0;
  color: var(--ew-color-text-muted);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  line-height: 1.45;
}

/* ---------- Mapa conceptual interactivo ---------- */

.quim-clasif-slide__mapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--ew-space-2);
}

.quim-clasif-slide__nodo {
  position: relative;
  padding: 0.45rem 0.9rem;
  border: 2px solid var(--ew-theme-ink);
  border-radius: 10px;
  background: var(--ew-color-surface);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-sm);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--ew-transition-base), box-shadow var(--ew-transition-base), background var(--ew-transition-base);
}

.quim-clasif-slide__nodo:hover {
  transform: translateY(-2px);
  box-shadow: var(--ew-shadow-sm);
}

.quim-clasif-slide__nodo:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 32%, transparent);
  outline-offset: 2px;
}

.quim-clasif-slide__nodo--raiz {
  margin-bottom: 1.5rem;
  border-color: var(--ew-theme-ink);
  background: var(--ew-theme-ink);
  color: var(--ew-color-text-inverse);
}

.quim-clasif-slide__nodo--raiz::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  width: 2px;
  height: 1.5rem;
  background: var(--ew-color-border-strong);
}

.quim-clasif-slide__ramas {
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ew-space-5);
  width: 100%;
  padding-top: 1.5rem;
}

.quim-clasif-slide__ramas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2px;
  background: var(--ew-color-border-strong);
}

.quim-clasif-slide__rama {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ew-space-3);
  min-width: 220px;
}

.quim-clasif-slide__rama::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 2px;
  height: 1.5rem;
  background: var(--ew-color-border-strong);
}

.quim-clasif-slide__hijos {
  position: relative;
  display: flex;
  gap: var(--ew-space-3);
  padding-top: 1.2rem;
}

.quim-clasif-slide__hijos::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 2px;
  background: var(--ew-color-border-strong);
}

.quim-clasif-slide__hoja {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 96px;
  font-weight: 400;
}

.quim-clasif-slide__hoja::before {
  content: '';
  position: absolute;
  top: -1.2rem;
  left: 50%;
  width: 2px;
  height: 1.2rem;
  background: var(--ew-color-border-strong);
}

.quim-clasif-slide__icono-svg {
  display: block;
  width: 34px;
  height: 34px;
}

.quim-clasif-slide__nodo.is-activo {
  border-color: var(--ew-theme-accent);
  background: color-mix(in srgb, var(--ew-theme-accent) 22%, var(--ew-color-surface));
  box-shadow: var(--ew-shadow-sm);
}

.quim-clasif-slide__nodo--raiz.is-activo {
  background: var(--ew-theme-accent);
  border-color: var(--ew-theme-accent);
  color: var(--ew-theme-ink);
}

.quim-clasif-slide__panel {
  display: grid;
  gap: var(--ew-space-1);
  width: 100%;
  margin-top: var(--ew-space-4);
  padding: var(--ew-space-3) var(--ew-space-4);
  border-left: 5px solid var(--ew-theme-accent);
  border-radius: 0 var(--ew-radius-md) var(--ew-radius-md) 0;
  background: color-mix(in srgb, var(--ew-palette-purple-background) 28%, var(--quim-blanco-frio));
  transition: background var(--ew-transition-base);
}

.quim-clasif-slide__panel-titulo {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  font-weight: 700;
  font-synthesis: weight;
}

.quim-clasif-slide__panel-texto {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  line-height: 1.55;
}

.quim-clasif-slide__panel-pista {
  margin: 0;
  color: var(--ew-color-text-muted);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Comparación (elemento/compuesto · homogénea/heterogénea) ---------- */

.quim-clasif-slide__comparacion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ew-space-4);
}

.quim-clasif-slide__tarjeta {
  display: grid;
  justify-items: center;
  gap: var(--ew-space-2);
  padding: var(--ew-space-4);
  border: 1.5px solid var(--ew-color-border);
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface-soft);
  text-align: center;
}

.quim-clasif-slide__tarjeta--pink {
  border-color: color-mix(in srgb, var(--ew-palette-pink-accent) 45%, transparent);
  background: color-mix(in srgb, var(--ew-palette-pink-background) 55%, var(--ew-color-surface));
}

.quim-clasif-slide__tarjeta--blue {
  border-color: color-mix(in srgb, var(--ew-palette-blue-accent) 45%, transparent);
  background: color-mix(in srgb, var(--ew-palette-blue-background) 55%, var(--ew-color-surface));
}

.quim-clasif-slide__tarjeta-nombre {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  font-weight: 700;
}

.quim-clasif-slide__tarjeta-desc {
  margin: 0;
  color: var(--ew-color-text);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  line-height: 1.45;
}

.quim-clasif-slide__tarjeta-ejemplo {
  display: flex;
  align-items: flex-start;
  gap: var(--ew-space-1);
  margin: 0;
  padding: 0.3rem var(--ew-space-2);
  border-radius: var(--ew-radius-pill);
  background: var(--ew-color-surface);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-xs);
  font-weight: 700;
}

/* ---------- Resumen ---------- */

.quim-clasif-slide__resumen {
  display: grid;
  gap: var(--ew-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quim-clasif-slide__resumen-item {
  position: relative;
  padding: var(--ew-space-2) var(--ew-space-3) var(--ew-space-2) calc(var(--ew-space-5) + 4px);
  border-left: 3px solid var(--ew-palette-orange-surface);
  border-radius: 0 var(--ew-radius-sm) var(--ew-radius-sm) 0;
  background: var(--ew-color-surface-soft);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.5;
}

.quim-clasif-slide__resumen-item::before {
  content: '✓';
  position: absolute;
  left: var(--ew-space-2);
  color: var(--ew-palette-orange-surface);
  font-weight: 700;
}

/* ---------- Builder: tabla-datos ---------- */

.quim-tabla-datos {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
}

.quim-tabla-datos th {
  padding: var(--ew-space-3);
  background: var(--ew-theme-surface);
  color: var(--ew-theme-ink);
  font-weight: 700;
  text-align: left;
  border-bottom: 2px solid var(--ew-theme-accent);
  line-height: 1.25;
}

.quim-tabla-datos td {
  padding: var(--ew-space-3);
  border-bottom: 1px solid var(--ew-color-border);
  color: var(--ew-theme-ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.quim-tabla-datos tr:last-child td {
  border-bottom: none;
}

/* ---------- Builder: timeline / modelos atómicos ---------- */

.quim-modelos {
  display: grid;
  gap: var(--ew-space-4);
}

.quim-modelos__nota {
  justify-self: start;

  max-width: 100%;
  padding:
    var(--ew-space-2)
    var(--ew-space-3);

  color: var(--ew-theme-ink);
  background: var(--ew-palette-pink-background);

  border: 1.5px dashed var(--ew-theme-ink);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.4;

  transform: rotate(0.5deg);
}

.quim-timeline {
  display: grid;
  gap: var(--ew-space-3);

  width: 100%;
  margin: 0;

  padding: 0;
  border: 0;
}

.quim-timeline__evento {
  display: grid;

  grid-template-columns:
    44px
    minmax(170px, 190px)
    minmax(0, 1fr);

  gap: var(--ew-space-4);
  align-items: center;

  width: 100%;
  box-sizing: border-box;

  padding:
    var(--ew-space-3)
    var(--ew-space-4);

  background: var(--ew-color-surface);

  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-lg);

  box-shadow: none;
}

.quim-timeline__numero {
  align-self: center;

  color: var(--ew-theme-accent);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-section-size);
  font-weight: 700;
  font-synthesis: weight;

  text-align: center;
}

.quim-timeline__visuales {
  display: grid;
  grid-template-columns: 78px 90px;
  gap: var(--ew-space-2);
  align-items: center;
  justify-content: center;
}

.quim-timeline__autor {
  display: grid;
  justify-items: center;
  gap: var(--ew-space-1);

  margin: 0;
}

.quim-timeline__autor img {
  display: block;

  width: 68px;
  height: 68px;

  object-fit: cover;

  border-radius: 50%;
  border: 1px solid var(--ew-color-border);
}

.quim-timeline__autor-nombre {
  max-width: 78px;

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-sm);
  line-height: 1.15;

  text-align: center;
}

.quim-timeline__modelo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.quim-timeline__modelo svg {
  display: block;

  width: 82px;
  height: 82px;
}

.quim-timeline__contenido {
  min-width: 0;
}

.quim-timeline__titulo {
  margin: 0 0 var(--ew-space-1);

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-item-size);
  font-weight: 700;
  font-synthesis: weight;
}

.quim-timeline__frase {
  margin: 0 0 var(--ew-space-1);

  color: var(--ew-theme-accent);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.4;
}

.quim-timeline__descripcion {
  margin: 0;

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.5;
}



/* ---------- Builder: dialogo-chispa ---------- */

.quim-dialogo-chispa {
  display: flex;
  align-items: flex-start;
  gap: var(--ew-space-3);
  padding: var(--ew-space-3);
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface-soft);
}

.quim-dialogo-chispa__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
}

.quim-dialogo-chispa__burbuja {
  padding: var(--ew-space-2) var(--ew-space-3);
  border-radius: var(--ew-radius-sm);
  background: var(--ew-color-surface);
  border: 1px solid var(--ew-color-border);
  color: var(--ew-color-text);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.5;
}

/* ---------- Builder: respuesta-abierta ---------- */

.quim-respuesta-abierta {
  display: grid;
  gap: var(--ew-space-2);
  padding: var(--ew-space-3);
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface-soft);
  border: 1px solid var(--ew-color-border);
}

.quim-respuesta-abierta__pregunta {
  margin: 0;
  font-family: var(--ew-font-heading);
  font-weight: 700;
  color: var(--ew-color-text);
}

.quim-respuesta-abierta__campo {
  width: 100%;
  resize: vertical;
  padding: var(--ew-space-2);
  border-radius: var(--ew-radius-sm);
  border: 1px solid var(--ew-color-border);
  background: var(--ew-color-surface);
  color: var(--ew-color-text);
  font-family: var(--ew-font-body);
  font-size: var(--quim-text-size);
}

.quim-respuesta-abierta__estado {
  justify-self: start;
  min-height: 1em;
  font-size: var(--ew-text-xs);
  color: var(--ew-color-text-muted);
}

/* ---------- Diagramas: nota al pie ---------- */

.quim-diagrama__nota {
  margin: var(--ew-space-1) 0 0;
  text-align: center;
  font-size: var(--ew-text-xs);
  color: var(--ew-color-text-muted);
}

/* ---------- Builder: chips-conceptuales ---------- */

.quim-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ew-space-2);
}

.quim-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-1);
  padding: 0.35rem 0.7rem;
  border-radius: var(--ew-radius-pill);
  background: var(--ew-theme-surface);
  color: var(--ew-theme-ink);
  font-weight: 700;
  font-size: var(--ew-text-xs);
}

.quim-chip__contenido {
  display: grid;
  gap: 0.15rem;
}

.quim-chip__etiqueta {
  font-weight: 700;
}

.quim-chip__valor {
  font-weight: 400;
  opacity: 0.75;
}

.quim-chips--ciudad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ew-space-3);
  width: 100%;
}

.quim-chips--ciudad .quim-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ew-space-2);
  min-width: 0;
  min-height: 86px;
  padding: var(--ew-space-3);
  border: 1px solid color-mix(in srgb, var(--ew-theme-accent) 34%, var(--ew-color-border));
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface);
  color: var(--ew-theme-ink);
  box-shadow: var(--ew-shadow-sm);
}

.quim-chips--ciudad .quim-chip__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--ew-theme-surface);
  color: var(--ew-theme-ink);
  font-size: 1.35rem;
  line-height: 1;
}

.quim-chips--ciudad .quim-chip__valor {
  color: var(--ew-color-text-muted);
  font-size: var(--ew-text-sm);
  line-height: 1.35;
}

/* ---------- Builder: chips-conceptuales · estilo "aplicaciones" ----------
   Usos industriales de compuestos inorgánicos: una tarjeta por uso, con
   su emoji en una burbuja de color (rotando la paleta pink/blue/orange/
   purple ya usada en los diagramas SVG de la misma clase) para que se
   sienta como una continuación del diagrama y no como texto suelto. */

.quim-chips--aplicaciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--ew-space-3);
  width: 100%;
}

.quim-chips--aplicaciones .quim-chip {
  display: grid;
  justify-items: center;
  gap: var(--ew-space-1);
  min-height: 108px;
  padding: var(--ew-space-3) var(--ew-space-2);
  text-align: center;
  border: 1.5px solid color-mix(in srgb, var(--quim-chip-borde, var(--ew-theme-accent)) 45%, var(--ew-color-border));
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface);
  box-shadow: var(--ew-shadow-sm);
  transition: transform 0.15s ease;
}

.quim-chips--aplicaciones .quim-chip:hover {
  transform: translateY(-2px);
}

.quim-chips--aplicaciones .quim-chip__icono {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--quim-chip-fondo, var(--ew-theme-surface)) 70%, var(--ew-color-surface));
  border: 1.5px solid color-mix(in srgb, var(--quim-chip-borde, var(--ew-theme-accent)) 55%, transparent);
  font-size: 1.3rem;
  line-height: 1;
}

.quim-chips--aplicaciones .quim-chip__contenido {
  justify-items: center;
  text-align: center;
}

.quim-chips--aplicaciones .quim-chip__etiqueta {
  font-size: var(--ew-text-sm);
}

.quim-chips--aplicaciones .quim-chip__valor {
  color: var(--ew-color-text-muted);
  font-size: var(--ew-text-xs);
  font-weight: 500;
  opacity: 1;
  line-height: 1.3;
}

/* ---------- Builder: chips-conceptuales · estilo "ph" ----------
   Resumen de la escala de pH (ácido/neutro/base) como una mini leyenda
   a color debajo del diagrama de la escala: mismos íconos (limón, gota,
   jabón) y mismos colores (rojo/verde/azul) que el gradiente del SVG,
   para que se lea como su continuación, no como una lista aparte. */

.quim-chips--ph {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ew-space-2);
  width: 100%;
}

.quim-chips--ph .quim-chip {
  display: grid;
  justify-items: center;
  gap: var(--ew-space-1);
  padding: var(--ew-space-3) var(--ew-space-2);
  text-align: center;
  border-top: 4px solid var(--quim-chip-acento, var(--ew-theme-accent));
  border-radius: 0 0 var(--ew-radius-md) var(--ew-radius-md);
  background: color-mix(in srgb, var(--quim-chip-acento, var(--ew-theme-accent)) 10%, var(--ew-color-surface));
  box-shadow: var(--ew-shadow-sm);
}

.quim-chips--ph .quim-chip__icono {
  font-size: 1.4rem;
  line-height: 1;
}

.quim-chips--ph .quim-chip__contenido {
  justify-items: center;
  text-align: center;
}

.quim-chips--ph .quim-chip__etiqueta {
  color: var(--quim-chip-acento, var(--ew-theme-ink));
  font-size: var(--ew-text-base);
}

.quim-chips--ph .quim-chip__valor {
  color: var(--ew-color-text-muted);
  font-size: var(--ew-text-xs);
  opacity: 1;
  line-height: 1.3;
}

@media (max-width: 430px) {
  .quim-chips--aplicaciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quim-chips--ph {
    grid-template-columns: 1fr;
  }
}

/* ---------- Builder: coleccion-ficha (una ficha, un paso) ----------
   Antes (coleccion-ilustrada) una lección completa con N fichas era
   UN solo paso de .quim-experiencia que escondía su propio carrusel
   con sus propios botones ← → (quim-coleccion__controles), duplicando
   la navegación del motor compartido. Ahora cada ficha es su propio
   paso real (una entrada más en el array "pasos" del JSON de la
   lección), así que avanzar/retroceder lo maneja SIEMPRE la única
   navegación de .quim-experiencia — sin sub-botones, sin carrusel
   anidado, y terminando en la práctica/minijuego como cualquier otro
   paso. .quim-ficha es contenido plano dentro de esa caja, igual que
   chips-conceptuales o atomo-analogia. */

.quim-ficha {
  display: grid;
  justify-items: center;
  gap: var(--ew-space-3);
  width: 100%;
}

/* El tamaño/borde/fondo de .quim-ficha__diagrama vive junto con
   .quim-diagrama y .quim-timeline__modelo (mismo diagrama
   "protagonista" que usa el resto de la app) — ver más abajo. */

.quim-ficha__titulo {
  margin: 0.2rem 0 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-item-size);
  font-weight: 700;
  line-height: 1.25;
}

.quim-ficha__desc {
  margin: 0;
  color: var(--ew-color-text);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.55;
}

.quim-ficha__ejemplo {
  margin: 0;
  color: var(--ew-color-text-muted);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  font-style: italic;
  line-height: 1.5;
}

.quim-ficha__frase {
  margin: 0.15rem 0 0;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid color-mix(
    in srgb,
    var(--ew-theme-accent) 42%,
    var(--quim-blanco-frio)
  );
  border-radius: var(--ew-radius-sm);
  background: color-mix(
    in srgb,
    var(--ew-palette-purple-background) 26%,
    var(--quim-blanco-frio)
  );
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  font-weight: 400;
  line-height: 1.35;
}

.quim-metodos {
  display: grid;
  gap: var(--ew-space-4);
}

/* Minijuegos insertados entre experiencias: mantienen el ritmo de
   Física sin convertirse en una segunda pantalla de evaluación. */
.quim-minijuego-raiz {
  width: 100%;
  margin: clamp(18px, 4vw, 30px) 0;
}

/* El chrome de los minijuegos globales conserva su layout horizontal
   dentro de una experiencia de Química. No heredar las restricciones
   de las prácticas antiguas ni dejar que el ancho de la tarjeta
   convierta cada opción en una columna. */
.quim-practica-global {
  display: block;
  width: 100%;
  min-width: 0;
}

.quim-practica-global > .mj-widget {
  width: 100%;
  min-width: 0;
  text-align: left;
}

.quim-practica-global .mj-widget__actividad {
  width: 100%;
  min-width: 0;
}

.quim-practica-global .mj-opcion__opciones {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.quim-practica-global .mj-matching__wrapper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.quim-practica-global .mj-opcion__boton,
.quim-practica-global .mj-matching__btn {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 430px) {
  .quim-practica-global .mj-opcion__opciones {
    grid-template-columns: 1fr;
  }

  .quim-practica-global .mj-widget {
    padding: var(--ew-space-3);
  }
}

.quim-metodos__definicion {
  padding: var(--ew-space-3) var(--ew-space-4);
  border-left: 5px solid var(--ew-theme-accent);
  border-radius: 0 var(--ew-radius-md) var(--ew-radius-md) 0;
  background: color-mix(
    in srgb,
    var(--ew-palette-purple-background) 24%,
    var(--quim-blanco-frio)
  );
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.6;
}

.quim-metodos__definicion strong {
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-weight: 700;
  font-synthesis: weight;
  text-shadow: 0.25px 0 currentColor;
}

.quim-metodos__dialogo {
  justify-self: start;
  width: auto;
  max-width: 100%;
}

/* ---------- Builder: diagrama-quimica (SVG contenedor) ---------- */

.quim-diagrama {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--ew-space-2);
}

.quim-diagrama svg {
  display: block;
  max-width: 100%;
  width: min(100%, 360px);
  height: auto;
  overflow: visible;
}

.quim-diagrama--tabla-periodica,
.quim-diagrama--tendencias {
  width: min(100%, 620px);
  margin-inline: auto;
}

.quim-diagrama--tabla-periodica svg,
.quim-diagrama--tendencias svg {
  display: block;
  width: 100%;
}

.quim-diagrama--enlace {
  width: min(100%, 260px);
  margin-inline: auto;
}

.quim-diagrama--enlace svg {
  display: block;
  width: 100%;
}


/* ---------- Composición: definición de materia ---------- */

.quim-experiencia__paso:has(.quim-diagrama--materia) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  grid-template-areas: "texto diagrama";
  gap: var(--ew-space-5);
  align-items: center;
}

.quim-experiencia__paso:has(.quim-diagrama--materia) .quim-experiencia__texto {
  grid-area: texto;
  margin: 0;
  min-width: 0;
}

.quim-diagrama--materia {
  grid-area: diagrama;
  justify-self: center;
  width: 100%;
  max-width: 200px;
  padding: 0;
}

.quim-diagrama--materia svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Composición: definición del átomo ---------- */

.quim-diagrama--atomo {
  justify-self: center;
  width: 100%;
  max-width: 220px;
  padding: 0;
}

.quim-diagrama--atomo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Builders: atomo-definicion, atomo-partes, atomo-tabla,
   atomo-analogia, atomo-resumen ---------- */
/* Estos formatos NO dibujan su propia caja ni su propio carrusel:
   viven directamente dentro de .quim-experiencia__paso, que ya es
   la única caja de la lección y ya trae su propia navegación
   (flechas, teclado, swipe) vía el motor compartido de
   experiencias.js. Antes existía un carrusel interno duplicado
   (viewport/pista/flechas/puntos) anidado dentro de ese carrusel
   externo — se eliminó por completo para que solo haya UN sistema
   de navegación por lección. */

.quim-atomo-slide {
  display: grid;
  gap: var(--ew-space-3);
}

.quim-atomo-slide__titulo {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-item-size);
  font-weight: 700;
  font-synthesis: weight;
  line-height: 1.25;
}

/* ---------- Slide: definición ---------- */

.quim-atomo-slide__layout {
  display: grid;
  gap: var(--ew-space-4);
  align-items: center;
}

.quim-atomo-slide__layout--definicion {
  grid-template-columns: minmax(0, 1fr) 200px;
}

.quim-atomo-slide__texto {
  display: grid;
  gap: var(--ew-space-3);
}

.quim-atomo-slide__definicion {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.6;
}

.quim-atomo-slide__definicion strong {
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-weight: 700;
  font-synthesis: weight;
  text-shadow: 0.25px 0 currentColor;
}

.quim-atomo-slide__dato {
  display: flex;
  align-items: flex-start;
  gap: var(--ew-space-2);
  margin: 0;
  padding: var(--ew-space-2) var(--ew-space-3);
  border: 1.5px dashed var(--ew-theme-ink);
  border-radius: var(--ew-radius-md);
  background: var(--ew-palette-pink-background);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  line-height: 1.4;
}

.quim-atomo-slide__dato-icono {
  flex-shrink: 0;
}

.quim-atomo-slide__diagrama {
  display: grid;
  place-items: center;
  width: 100%;
}

.quim-atomo-slide__diagrama .quim-diagrama {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  aspect-ratio: auto;
}

.quim-atomo-slide__diagrama svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Slide: partes (núcleo / nube electrónica) ---------- */

.quim-atomo-slide__partes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ew-space-4);
}

.quim-atomo-slide__parte {
  display: grid;
  justify-items: center;
  gap: var(--ew-space-2);
  padding: var(--ew-space-4);
  border: 1.5px solid var(--ew-color-border);
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface-soft);
  text-align: center;
}

.quim-atomo-slide__parte--pink {
  border-color: color-mix(in srgb, var(--ew-palette-pink-accent) 45%, transparent);
  background: color-mix(in srgb, var(--ew-palette-pink-background) 55%, var(--ew-color-surface));
}

.quim-atomo-slide__parte--blue {
  border-color: color-mix(in srgb, var(--ew-palette-blue-accent) 45%, transparent);
  background: color-mix(in srgb, var(--ew-palette-blue-background) 55%, var(--ew-color-surface));
}

.quim-atomo-slide__parte-icono {
  font-size: 1.8rem;
  line-height: 1;
}

.quim-atomo-slide__parte--pink .quim-atomo-slide__parte-icono {
  color: var(--ew-palette-pink-accent);
}

.quim-atomo-slide__parte--blue .quim-atomo-slide__parte-icono {
  color: var(--ew-palette-blue-accent);
}

.quim-atomo-slide__parte-nombre {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  font-weight: 700;
}

.quim-atomo-slide__parte-desc {
  margin: 0;
  color: var(--ew-color-text);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-secondary-size);
  line-height: 1.45;
}

/* ---------- Slide: tabla ---------- */

.quim-atomo-slide__tabla {
  width: 100%;
  overflow-x: auto;
}

.quim-atomo-slide__tabla .quim-tabla-datos {
  width: 100%;
  margin: 0;
  table-layout: fixed;
}

.quim-atomo-slide__tabla .quim-tabla-datos th:nth-child(1),
.quim-atomo-slide__tabla .quim-tabla-datos td:nth-child(1) {
  width: 28%;
}

.quim-atomo-slide__tabla .quim-tabla-datos th:nth-child(2),
.quim-atomo-slide__tabla .quim-tabla-datos td:nth-child(2) {
  width: 20%;
}

.quim-atomo-slide__tabla .quim-tabla-datos th:nth-child(3),
.quim-atomo-slide__tabla .quim-tabla-datos td:nth-child(3) {
  width: 52%;
}

.quim-atomo-slide__tabla tbody tr:nth-child(1) td:first-child {
  color: var(--ew-palette-pink-accent);
  font-weight: 700;
}

.quim-atomo-slide__tabla tbody tr:nth-child(2) td:first-child {
  color: var(--ew-theme-ink);
  font-weight: 700;
}

.quim-atomo-slide__tabla tbody tr:nth-child(3) td:first-child {
  color: var(--ew-palette-blue-accent);
  font-weight: 700;
}

/* ---------- Slide: analogía ---------- */

.quim-atomo-slide__analogia {
  display: grid;
  gap: var(--ew-space-3);
}

.quim-atomo-slide__layout--analogia {
  grid-template-columns: 220px minmax(0, 1fr);
}

.quim-atomo-slide__analogia-lista {
  display: grid;
  gap: var(--ew-space-2);
}

.quim-atomo-slide__analogia-lista p {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.45;
}

.quim-atomo-slide__analogia-lista strong {
  color: var(--ew-theme-ink);
  font-weight: 700;
  font-synthesis: weight;
}

.quim-atomo-slide__dialogo {
  justify-self: start;
  max-width: 100%;
}

/* ---------- Slide: resumen ---------- */

.quim-atomo-slide__resumen {
  display: grid;
  gap: var(--ew-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.quim-atomo-slide__resumen-item {
  position: relative;
  padding: var(--ew-space-2) var(--ew-space-3) var(--ew-space-2) calc(var(--ew-space-5) + 4px);
  border-left: 3px solid var(--ew-palette-orange-surface);
  border-radius: 0 var(--ew-radius-sm) var(--ew-radius-sm) 0;
  background: var(--ew-color-surface-soft);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.5;
}

.quim-atomo-slide__resumen-item::before {
  content: '✓';
  position: absolute;
  left: var(--ew-space-2);
  color: var(--ew-palette-orange-surface);
  font-weight: 700;
}


  /* ---------- Clase 2: estructura electrónica ---------- */

.quim-experiencia:has(.quim-estructura-electronica) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.quim-experiencia:has(.quim-estructura-electronica)
  > .quim-experiencia__titulo {
  display: none;
}


.quim-experiencia__paso:has(.quim-estructura-electronica) {
  display: block;
}

.quim-estructura-electronica {
  display: grid;
  gap: var(--ew-space-3);

  width: 100%;
  box-sizing: border-box;

  padding: var(--ew-space-4);

  background: var(--ew-color-surface);

  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-lg);
}

.quim-estructura-electronica__titulo {
  margin: 0 0 var(--ew-space-1);

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-section-size);
  font-weight: 700;
  font-synthesis: weight;

  line-height: 1.3;
}

.quim-estructura-electronica p {
  margin: 0;

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.55;
}

.quim-estructura-electronica p strong {
  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-weight: 700;
  font-synthesis: weight;
  text-shadow: 0.25px 0 currentColor;
}

/* Truco */
.quim-estructura-electronica__truco {
  justify-self: start;

  max-width: 640px;

  padding:
    var(--ew-space-3)
    var(--ew-space-4);

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 28%,
      var(--ew-color-surface)
    );

  border-left: 4px solid var(--ew-theme-accent);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.45;
}

/* Subniveles */
.quim-estructura-electronica__subniveles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ew-space-2);

  margin: 0;
}

.quim-estructura-electronica__subniveles .quim-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-1);

  padding:
    var(--ew-space-2)
    var(--ew-space-3);

  color: var(--ew-theme-ink);
  background: color-mix(
    in srgb,
    var(--ew-theme-surface) 32%,
    var(--ew-color-surface)
  );

  border: 1.5px solid var(--ew-theme-accent);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
}

.quim-estructura-electronica__subniveles
  .quim-chip__valor {
  font-weight: 700;
}

/* ---------- Prácticas ---------- */

.quim-practica-raiz {
  display: grid;
  gap: var(--ew-space-4);

  width: 100%;
}

.quim-practica-ejercicio {
  width: 100%;
}

.quim-practica-clasificar {
  display: grid;
  gap: var(--ew-space-4);

  width: 100%;
}

.quim-practica__pregunta {
  margin: 0;

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-title-item-size);
  font-weight: 700;
  font-synthesis: weight;
  line-height: 1.4;
}

.quim-practica__caso {
  padding:
    var(--ew-space-4)
    var(--ew-space-5);

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 28%,
      var(--ew-color-surface)
    );

  border-left: 4px solid var(--ew-theme-accent);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.5;
}

.quim-practica__grupos {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(150px, 1fr));

  gap: var(--ew-space-2);
}

.quim-practica__grupo {
  min-height: 48px;

  padding:
    var(--ew-space-2)
    var(--ew-space-3);

  color: var(--ew-theme-ink);
  background: var(--ew-color-surface);

  border: 1.5px solid var(--ew-theme-accent);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);

  cursor: pointer;

  transition:
    transform var(--ew-motion-fast),
    background-color var(--ew-motion-fast),
    border-color var(--ew-motion-fast);
}

.quim-practica__grupo:hover:not(:disabled) {
  transform: translateY(-1px);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 20%,
      var(--ew-color-surface)
    );
}

.quim-practica__grupo:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--ew-theme-accent) 35%,
      transparent
    );

  outline-offset: 2px;
}

.quim-practica__grupo--correcto {
  border-color: var(--ew-theme-accent);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 48%,
      var(--ew-color-surface)
    );
}

.quim-practica__grupo--incorrecto {
  border-color: var(--ew-palette-pink-accent);

  background:
    color-mix(
      in srgb,
      var(--ew-palette-pink-background) 55%,
      var(--ew-color-surface)
    );

  transform: translateX(2px);
}

.quim-practica__feedback {
  min-height: 1.5em;
  margin: 0;

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  line-height: 1.4;
}

.quim-practica__feedback--correcto {
  color: var(--ew-theme-ink);
}

.quim-practica__feedback--incorrecto {
  color: var(--ew-palette-pink-accent);
}

.quim-practica__pie {
  display: flex;
  justify-content: flex-end;

  width: 100%;
}

.quim-experiencia__btn-practica {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 46px;
  padding:
    var(--ew-space-2)
    var(--ew-space-4);

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 72%,
      var(--ew-color-surface)
    );

  border: 1.5px solid var(--ew-theme-accent);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  font-weight: 700;
  font-synthesis: weight;

  cursor: pointer;

  box-shadow: var(--ew-shadow-sm);

  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    border-color var(--ew-transition-base),
    background-color var(--ew-transition-base);
}


.quim-experiencia__btn-practica:not(
  .quim-experiencia__btn-practica--secundario
):hover {
  transform: translateY(-3px);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 82%,
      var(--ew-color-surface)
    );

  border-color: var(--ew-theme-accent);

  box-shadow: var(--ew-shadow-md);
}

.quim-experiencia__btn-practica:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--ew-theme-accent) 32%,
      transparent
    );

  outline-offset: 3px;
}

/* Acción secundaria: siguiente ejercicio */

.quim-practica__acciones {
  display: flex;
  justify-content: flex-end;

  width: 100%;
  min-height: 46px;
}

.quim-practica__siguiente {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;

  min-height: 44px;
  padding:
    var(--ew-space-2)
    var(--ew-space-4);

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-background) 35%,
      var(--ew-color-surface)
    );

  border: 1px solid var(--ew-theme-surface);
  border-radius: var(--ew-radius-md);

  box-shadow: var(--ew-shadow-sm);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  font-weight: 400;

  cursor: pointer;

  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    background-color var(--ew-transition-base),
    border-color var(--ew-transition-base);
}

.quim-practica__siguiente:hover {
  transform: translateY(-3px);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 28%,
      var(--ew-color-surface)
    );

  border-color: var(--ew-theme-accent);

  box-shadow: var(--ew-shadow-md);
}

.quim-practica__siguiente:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--ew-theme-accent) 28%,
      transparent
    );

  outline-offset: 3px;
}



/* Terminar práctica: misma jerarquía visual que Practicar */

.quim-practica__pie
  .quim-experiencia__btn-practica--secundario {
  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 72%,
      var(--ew-color-surface)
    );

  border: 1.5px solid var(--ew-theme-accent);

  box-shadow: var(--ew-shadow-sm);

  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    background-color var(--ew-transition-base),
    border-color var(--ew-transition-base);
}

.quim-practica__pie
  .quim-experiencia__btn-practica--secundario:hover {
  color: var(--ew-theme-ink);

  transform: translateY(-3px);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 82%,
      var(--ew-color-surface)
    );

  border-color: var(--ew-theme-accent);

  box-shadow: var(--ew-shadow-md);
}

.quim-practica-seleccionar {
  display: grid;
  gap: var(--ew-space-4);

  width: 100%;
}

/* ---------- Práctica: ordenar secuencia ---------- */

.quim-practica-ordenar {
  display: grid;
  gap: var(--ew-space-4);

  width: 100%;
}

.quim-practica__secuencia {
  display: grid;
  gap: var(--ew-space-2);
}

.quim-practica__posicion {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--ew-space-2);
  align-items: center;

  min-height: 46px;

  padding:
    var(--ew-space-2)
    var(--ew-space-3);

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-background) 30%,
      var(--ew-color-surface)
    );

  border: 1px dashed var(--ew-theme-surface);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
}

.quim-practica__posicion--correcta {
  border-style: solid;
  border-color: var(--ew-theme-accent);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 28%,
      var(--ew-color-surface)
    );
}

.quim-practica__posicion-numero {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;

  color: var(--ew-theme-ink);

  background: var(--ew-theme-background);

  border-radius: 50%;

  font-weight: 700;
}

.quim-practica__posicion-texto {
  min-width: 0;
}

.quim-practica__disponibles {
  display: flex;
  flex-wrap: wrap;

  gap: var(--ew-space-2);
}

/* ---------- Práctica: completar estructura ---------- */

.quim-practica-completar {
  display: grid;
  gap: var(--ew-space-4);

  width: 100%;
}

.quim-practica__datos {
  display: flex;
  flex-wrap: wrap;

  gap: var(--ew-space-2);
}

.quim-practica__dato {
  padding:
    var(--ew-space-2)
    var(--ew-space-3);

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 26%,
      var(--ew-color-surface)
    );

  border: 1px solid var(--ew-theme-surface);
  border-radius: var(--ew-radius-md);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
}

.quim-practica__campos {
  display: grid;
  gap: var(--ew-space-3);
}

.quim-practica__campo {
  display: grid;
  gap: var(--ew-space-2);

  padding: var(--ew-space-3);

  background: var(--ew-color-surface);

  border: 1px solid var(--ew-color-border);
  border-radius: var(--ew-radius-md);
}

.quim-practica__campo--correcto {
  border-color: var(--ew-theme-accent);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 18%,
      var(--ew-color-surface)
    );
}

.quim-practica__campo-label {
  margin: 0;

  color: var(--ew-theme-ink);

  font-family: var(--ew-font-heading);
  font-size: var(--quim-text-size);
  font-weight: 700;
  font-synthesis: weight;
}

.quim-practica__opciones-campo {
  display: flex;
  flex-wrap: wrap;

  gap: var(--ew-space-2);
}

.quim-practica__opciones-campo
  .quim-practica__grupo {
  min-width: 72px;
}

.quim-practica__opciones-campo
  .quim-practica__grupo:disabled:not(
    .quim-practica__grupo--correcto
  ) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Flecha de continuación hacia la práctica */

.quim-experiencia:has(
  .quim-experiencia__nav--continuar
) {
  position: relative;
}

.quim-experiencia__nav--continuar {
  position: static;
  right: var(--ew-space-4);
  bottom: var(--ew-space-4);

  z-index: 2;

  justify-content: flex-end;

  width: auto;
  margin: 0;
}

/* Navegación hacia práctica dentro de la card final */

.quim-experiencia:has(.quim-estructura-electronica) {
  position: relative;
}

.quim-experiencia:has(.quim-estructura-electronica)
  .quim-experiencia__nav--continuar {
  position: absolute;
  right: var(--ew-space-4);
  bottom: var(--ew-space-4);

  z-index: 3;

  width: auto;
  margin: 0;

  justify-content: flex-end;
}

/* Espacio para la flecha dentro de las cards */

.quim-estructura-electronica {
  padding-bottom: 72px;
}

.quim-experiencia__nav-btn--continuar,
.quim-nav-volver {
  display: inline-grid;
  place-items: center;
  appearance: none;

  width: 46px;
  height: 42px;
  padding: 0;

  color: var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 28%,
      var(--ew-color-surface)
    );

  border: 1px solid var(--ew-theme-surface);
  border-radius: var(--ew-radius-md);

  box-shadow: var(--ew-shadow-sm);

  font-family: var(--ew-font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;

  cursor: pointer;

  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    border-color var(--ew-transition-base),
    background-color var(--ew-transition-base);
}

.quim-experiencia__nav-btn--continuar:hover,
.quim-nav-volver:hover {
  transform: translateY(-3px);

  border-color: var(--ew-theme-accent);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 32%,
      var(--ew-color-surface)
    );

  box-shadow: var(--ew-shadow-md);
}

.quim-experiencia__nav-btn--continuar:focus-visible,
.quim-nav-volver:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--ew-theme-accent) 25%,
      transparent
    );

  outline-offset: 3px;
}

/* ── Experiencia tipo cuaderno: tarjeta ligera y navegación flotante ──
   Sigue el patrón de Física para que ambas asignaturas compartan la
   misma sensación de una pantalla, una idea y una pregunta. */
.quim-experiencia {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 4vw, 22px);
  padding: clamp(18px, 5vw, 30px) clamp(14px, 5vw, 24px);
  border: 1.5px dashed color-mix(in srgb, var(--ew-theme-ink) 35%, transparent);
  border-radius: var(--ew-radius-lg);
  background: var(--ew-color-paper);
  text-align: center;
  overflow: visible;
}

.quim-experiencia__titulo {
  width: 100%;
  margin: 0;
  color: var(--ew-theme-ink);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.quim-experiencia__escenario {
  width: 100%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.quim-experiencia__paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ew-space-3);
  width: 100%;
  max-width: min(92%, 680px);
}

.quim-experiencia__paso > :first-child {
  width: 100%;
}

.quim-experiencia__texto {
  max-width: 62ch;
  margin: 0;
  color: var(--ew-color-text);
  line-height: 1.6;
  text-align: left;
}

.quim-experiencia__nav {
  position: sticky;
  top: 50vh;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.quim-experiencia__nav-btn,
.quim-experiencia__indicador {
  pointer-events: auto;
}

.quim-experiencia__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--ew-theme-ink) 35%, transparent);
  background: color-mix(in srgb, var(--ew-color-surface-soft) 92%, transparent);
  color: var(--ew-theme-ink);
  box-shadow: var(--ew-shadow-md);
  cursor: pointer;
  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    border-color var(--ew-transition-base);
}

/* La navegación redonda ← → de .quim-experiencia (avanzar entre
   pasos, incluida la última ficha antes de la práctica/minijuego) no
   tenía hover/disabled/focus propios: solo la variante --continuar
   los tenía. Se agregan aquí, en la base, para que se vea y se
   sienta interactiva siempre que se use. */
.quim-experiencia__nav-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--ew-theme-accent);
  box-shadow: var(--ew-shadow-md);
}

.quim-experiencia__nav-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.quim-experiencia__nav-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 30%, transparent);
  outline-offset: 3px;
}

.quim-experiencia__indicador {
  min-width: 48px;
  padding: 6px 14px;
  border: 1.5px solid color-mix(in srgb, var(--ew-theme-ink) 25%, transparent);
  border-radius: var(--ew-radius-pill);
  background: color-mix(in srgb, var(--ew-color-paper) 90%, transparent);
  color: var(--ew-color-text-muted);
  text-align: center;
}

.quim-experiencia__nav--continuar {
  justify-content: center;
}

.quim-experiencia__chispa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ew-space-2);
  text-align: left;
}

.quim-experiencia__chispa-pregunta {
  margin: 0;
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.quim-experiencia__chispa-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.quim-experiencia__chispa-opcion {
  min-height: 54px;
  padding: 12px 14px;
  border: 1.5px solid color-mix(in srgb, var(--ew-theme-ink) 25%, transparent);
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface);
  color: var(--ew-color-text);
  font: inherit;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: transform var(--ew-transition-base), box-shadow var(--ew-transition-base);
}

.quim-experiencia__chispa-opcion:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--ew-shadow-sm);
}

.quim-experiencia__chispa-opcion--correcta {
  border-color: var(--ew-color-success, #2f9e5c);
  background: color-mix(in srgb, var(--ew-color-success, #2f9e5c) 14%, var(--ew-color-surface));
}

.quim-experiencia__chispa-opcion--incorrecta {
  border-color: var(--ew-color-error, #d1453b);
  background: color-mix(in srgb, var(--ew-color-error, #d1453b) 12%, var(--ew-color-surface));
}

.quim-experiencia__chispa-feedback {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--ew-radius-sm);
  background: color-mix(in srgb, var(--ew-theme-accent) 12%, var(--ew-color-surface));
  color: var(--ew-color-text);
  line-height: 1.5;
  text-align: left;
}

/* Los diagramas SVG pasan a ser protagonistas y conservan una silueta
   cuadrada aunque cada variante tenga un viewBox distinto. */
.quim-diagrama,
.quim-ficha__diagrama,
.quim-timeline__modelo {
  display: grid;
  place-items: center;
  min-height: clamp(170px, 28vw, 250px);
  aspect-ratio: 1;
  padding: clamp(12px, 3vw, 22px);
  border: 1px solid color-mix(in srgb, var(--ew-theme-accent) 24%, transparent);
  border-radius: var(--ew-radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ew-theme-accent) 8%, transparent), transparent 55%),
    var(--ew-color-surface-soft);
}

.quim-diagrama svg,
.quim-ficha__diagrama svg,
.quim-timeline__modelo svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.quim-experiencia__fade-in {
  animation: ew-fade-in 350ms ease both;
}

/* =========================================================
   EVALUACIÓN FINAL
   ========================================================= */

.quim-evaluacion {
  width: min(
    900px,
    calc(100% - 2rem)
  );

  margin:
    0 auto
    var(--ew-space-8);
}

.quim-cuadro {
  margin-bottom:
    var(--ew-space-4);

  padding:
    var(--ew-space-5);

  color:
    var(--ew-theme-ink);

  background:
    var(--ew-color-surface);

  border:
    1px solid
    color-mix(
      in srgb,
      var(--ew-theme-surface) 72%,
      transparent
    );

  border-radius:
    var(--ew-radius-lg);

  box-shadow:
    var(--ew-shadow-sm);
}

.quim-cuadro__etiqueta {
  display: inline-block;

  margin-bottom:
    var(--ew-space-3);

  color:
    var(--ew-theme-accent);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);

  font-weight: 700;
  font-synthesis: weight;
}

.quim-parrafo {
  color:
    var(--ew-theme-ink);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);

  line-height: 1.6;
}

.quim-test-final-meta {
  display: grid;
  gap: var(--ew-space-2);

  margin:
    var(--ew-space-4) 0;

  padding-left: 1.25rem;

  color:
    var(--ew-theme-ink);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);
}

.quim-test-final-cabecera {
  margin-bottom:
    var(--ew-space-3);
}

.quim-test-final-seccion {
  color:
    var(--ew-theme-accent);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-title-item-size);

  font-weight: 700;
  font-synthesis: weight;
}

.quim-test-opciones {
  display: grid;
  gap: var(--ew-space-2);

  margin-top:
    var(--ew-space-4);
}

.quim-test-opcion {
  appearance: none;

  width: 100%;

  padding:
    var(--ew-space-3)
    var(--ew-space-4);

  text-align: left;

  color:
    var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 25%,
      var(--ew-color-surface)
    );

  border:
    1px solid
    var(--ew-theme-surface);

  border-radius:
    var(--ew-radius-md);

  box-shadow:
    var(--ew-shadow-sm);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);

  cursor: pointer;

  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    background-color var(--ew-transition-base),
    border-color var(--ew-transition-base);
}

.quim-test-opcion:hover:not(:disabled) {
  transform:
    translateY(-3px);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 42%,
      var(--ew-color-surface)
    );

  border-color:
    var(--ew-theme-accent);

  box-shadow:
    var(--ew-shadow-md);
}

.quim-test-opcion:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--ew-theme-accent) 25%,
      transparent
    );

  outline-offset: 3px;
}

/* Estado seleccionado — usado por los botones de "Prueba de sonido"
   en la encuesta de satisfacción (Sección B). Sin esta regla el clic
   sí registra la respuesta (ver evaluacion-final.js), pero no se ve
   ningún cambio, así que parece que no se puede elegir. */
.quim-test-opcion[aria-pressed="true"] {
  background:
    color-mix(
      in srgb,
      var(--ew-theme-accent) 22%,
      var(--ew-color-surface)
    );

  border-color: var(--ew-theme-accent);

  box-shadow: var(--ew-shadow-md);
}

.quim-test-final-sonidos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ew-space-2);

  margin-top: var(--ew-space-2);
}

.quim-test-final-sonidos .quim-test-opcion {
  flex: 1;
  min-width: 140px;
  text-align: center;
}

.quim-test-final-btn-empezar {
  width: auto;

  margin-top:
    var(--ew-space-3);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-surface) 72%,
      var(--ew-color-surface)
    );

  border-color:
    var(--ew-theme-accent);

  font-weight: 700;
  font-synthesis: weight;
}

/* Likert */

.quim-likert {
  padding:
    var(--ew-space-4) 0;

  border-bottom:
    1px solid
    color-mix(
      in srgb,
      var(--ew-theme-surface) 40%,
      transparent
    );
}

.quim-likert:last-child {
  border-bottom: 0;
}

.quim-likert__enunciado {
  margin:
    0 0
    var(--ew-space-3);

  color:
    var(--ew-theme-ink);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);
}

.quim-likert__escala {
  display: flex;
  gap: var(--ew-space-2);

  flex-wrap: wrap;
}

.quim-likert__opcion {
  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  color:
    var(--ew-theme-ink);

  background:
    var(--ew-color-surface);

  border:
    1px solid
    var(--ew-theme-surface);

  border-radius:
    var(--ew-radius-md);

  box-shadow:
    var(--ew-shadow-sm);

  font-family:
    var(--ew-font-heading);

  cursor: pointer;

  transition:
    transform var(--ew-transition-base),
    box-shadow var(--ew-transition-base),
    background-color var(--ew-transition-base);
}

.quim-likert__opcion:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--ew-shadow-md);
}

.quim-likert__opcion[
  aria-pressed="true"
] {
  background:
    var(--ew-theme-surface);

  border-color:
    var(--ew-theme-accent);
}

.quim-likert__extremos {
  display: flex;
  justify-content: space-between;

  margin-top:
    var(--ew-space-2);

  color:
    var(--ew-theme-ink);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--ew-text-sm);
}

/* Preguntas abiertas */

.quim-abierta {
  display: grid;
  gap: var(--ew-space-2);

  margin-bottom:
    var(--ew-space-4);
}

.quim-abierta__enunciado {
  color:
    var(--ew-theme-ink);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);
}

.quim-abierta__campo {
  width: 100%;
  box-sizing: border-box;

  min-height: 100px;

  padding:
    var(--ew-space-3);

  resize: vertical;

  color:
    var(--ew-theme-ink);

  background:
    color-mix(
      in srgb,
      var(--ew-theme-background) 18%,
      var(--ew-color-surface)
    );

  border:
    1px solid
    var(--ew-theme-surface);

  border-radius:
    var(--ew-radius-md);

  font-family:
    var(--ew-font-heading);

  font-size:
    var(--quim-text-size);
}

.quim-abierta__campo:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--ew-theme-accent) 25%,
      transparent
    );

  outline-offset: 2px;
}

.quim-test-final-aviso {
  min-height: 1.5em;
}


@media (max-width: 600px) {
  .quim-diagrama--atomo {
    justify-self: center;
    width: min(210px, 78%);
    max-width: 210px;
  }
}

/* =========================================================
   Carrusel de modelos atómicos
   Una ficha completa por pantalla: evita que el retrato, el SVG y
   el texto compitan por espacio en teléfonos y pantallas estrechas.
========================================================= */

.quim-timeline {
    display: grid;
    gap: var(--ew-space-3);
    width: 100%;
    min-width: 0;
  }

.quim-timeline__viewport {
    width: 100%;
    overflow: hidden;
    border-radius: var(--ew-radius-lg);
  }

.quim-timeline__pista {
    display: flex;
    width: 100%;
    align-items: stretch;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    touch-action: pan-y;
  }

.quim-timeline__evento {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "numero"
      "visuales"
      "contenido";
    gap: var(--ew-space-3);
    flex: 0 0 100%;
    min-width: 100%;
    min-height: clamp(390px, 52vw, 500px);
    align-content: start;
    padding: clamp(18px, 4vw, 30px);
    border: 1.5px solid color-mix(in srgb, var(--ew-theme-accent) 30%, transparent);
    border-radius: var(--ew-radius-lg);
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--ew-theme-accent) 9%, transparent), transparent 45%),
      var(--ew-color-surface);
    box-shadow: var(--ew-shadow-sm);
    overflow: hidden;
  }

.quim-timeline__evento[aria-hidden="true"] {
    visibility: hidden;
  }

.quim-timeline__evento:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 32%, transparent);
    outline-offset: -5px;
  }

.quim-timeline__numero {
    grid-area: numero;
    justify-self: start;
    width: 38px;
    height: 38px;
    padding-top: 8px;
    border-radius: 50%;
    background: var(--ew-theme-accent);
    color: var(--ew-color-text-inverse);
    font-family: var(--ew-font-heading);
    font-size: var(--ew-text-lg);
    text-align: center;
  }

.quim-timeline__visuales {
    grid-area: visuales;
    display: grid;
    grid-template-columns: minmax(92px, 130px) minmax(150px, 1fr);
    gap: clamp(14px, 5vw, 28px);
    align-items: center;
    justify-content: center;
    width: min(100%, 420px);
    margin-inline: auto;
  }

.quim-timeline__autor {
    display: grid;
    justify-items: center;
    gap: var(--ew-space-2);
    margin: 0;
  }

.quim-timeline__autor img {
    width: clamp(82px, 18vw, 116px);
    height: clamp(82px, 18vw, 116px);
    border: 2px solid color-mix(in srgb, var(--ew-theme-accent) 35%, transparent);
    border-radius: 50%;
    object-fit: cover;
  }

.quim-timeline__autor-nombre {
    max-width: 130px;
    color: var(--ew-theme-ink);
    font-family: var(--ew-font-heading);
    font-size: var(--ew-text-sm);
    line-height: 1.2;
    text-align: center;
  }

.quim-timeline__modelo {
    display: grid;
    place-items: center;
    width: min(100%, 210px);
    aspect-ratio: 1;
    padding: clamp(10px, 2vw, 18px);
    border: 1px solid color-mix(in srgb, var(--ew-theme-accent) 25%, transparent);
    border-radius: var(--ew-radius-lg);
    background: color-mix(in srgb, var(--ew-color-paper) 72%, var(--ew-theme-surface));
  }

.quim-timeline__modelo svg {
    display: block;
    width: 100%;
    height: 100%;
  }

.quim-timeline__contenido {
    grid-area: contenido;
    width: min(100%, 640px);
    margin-inline: auto;
    text-align: center;
  }

.quim-timeline__titulo {
    margin: 0 0 var(--ew-space-2);
    color: var(--ew-theme-ink);
    font-family: var(--ew-font-heading);
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    line-height: 1.2;
  }

.quim-timeline__frase {
    margin: 0 auto var(--ew-space-2);
    max-width: 54ch;
    color: var(--ew-theme-accent);
    font-family: var(--ew-font-heading);
    font-size: var(--quim-text-size);
    line-height: 1.45;
  }

.quim-timeline__descripcion {
    margin: 0 auto;
    max-width: 60ch;
    color: var(--ew-color-text);
    font-family: var(--ew-font-heading);
    font-size: var(--quim-text-size);
    line-height: 1.55;
  }

.quim-timeline__controles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ew-space-3);
    width: 100%;
  }

.quim-timeline__control {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--ew-theme-accent);
    border-radius: 50%;
    background: var(--ew-color-surface);
    color: var(--ew-theme-ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform var(--ew-transition-base), box-shadow var(--ew-transition-base);
  }

.quim-timeline__control:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--ew-shadow-sm);
  }

.quim-timeline__control:disabled {
    cursor: default;
    opacity: 0.45;
  }

.quim-timeline__control:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 30%, transparent);
    outline-offset: 3px;
  }

.quim-timeline__indicador {
    color: var(--ew-color-text-muted);
    font-size: var(--ew-text-sm);
    font-weight: 700;
  }

.quim-timeline__control:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ew-color-focus) 30%, transparent);
  outline-offset: 3px;
}

@media (max-width: 520px) {
    .quim-timeline__evento {
      min-height: 440px;
    }

    .quim-timeline__visuales {
      grid-template-columns: 1fr;
      gap: var(--ew-space-2);
    }

    .quim-timeline__autor {
      grid-template-columns: auto minmax(0, 1fr);
      justify-content: center;
      align-items: center;
    }

    .quim-timeline__autor img {
      width: 70px;
      height: 70px;
    }

    .quim-timeline__autor-nombre {
      text-align: left;
    }

    .quim-timeline__modelo {
      width: min(180px, 68vw);
      margin-inline: auto;
    }
}

@media (max-width: 600px) {
  .quim-clasif-slide__panel {
    padding: var(--ew-space-3);
  }

  .quim-clasif-slide__panel-texto,
  .quim-clasif-slide__panel-pista {
    font-size: var(--quim-text-size);
    line-height: 1.55;
  }

  .quim-clasif-slide__panel-titulo {
    font-size: inherit;
  }


  /* Materia: texto arriba, ilustración abajo */
  .quim-experiencia__paso:has(.quim-diagrama--materia) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "texto"
      "diagrama";
    gap: var(--ew-space-4);
    align-items: start;
  }

  .quim-experiencia__paso:has(.quim-diagrama--materia) .quim-experiencia__texto {
    grid-area: texto;
    width: 100%;
    margin: 0;
  }

  .quim-diagrama--materia {
    grid-area: diagrama;
    justify-self: center;
    width: min(180px, 72%);
    max-width: 180px;
  }


  /* Mapa conceptual: conserva jerarquía y entra en móvil */
  .quim-clasif-slide__mapa {
    width: 100%;
    overflow: visible;
  }

  .quim-clasif-slide__ramas {
    width: 100%;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .quim-clasif-slide__ramas::before {
    left: 25%;
    right: 25%;
  }

  .quim-clasif-slide__rama {
    flex: 1 1 45%;
    min-width: 0;
    gap: 0.8rem;
  }

  .quim-clasif-slide__hijos {
    width: 100%;
    gap: 0.4rem;
    justify-content: center;
  }

  .quim-clasif-slide__hijos::before {
    left: 25%;
    right: 25%;
  }

  .quim-clasif-slide__hoja {
    flex: 1 1 0;
    min-width: 0;
  }

  .quim-clasif-slide__nodo {
    max-width: 100%;
    padding: 0.32rem 0.5rem;
    font-size: var(--ew-text-sm);
    line-height: 1.2;
    white-space: normal;
  }

  .quim-clasif-slide__nodo--raiz {
    font-size: var(--ew-text-base);
  }

  .quim-clasif-slide__icono-svg {
    width: 30px;
    height: 30px;
  }

  .quim-clasif-slide__comparacion {
    grid-template-columns: 1fr;
  }


  /* Layout general móvil */
  .quim-main {
    padding-block: var(--ew-space-3);
  }

  .quim-cuaderno {
    padding: 0;
  }

  .quim-experiencia {
    padding: var(--ew-space-3);
  }

     /* ---------- Slides del átomo ---------- */

  .quim-atomo-slide {
    gap: var(--ew-space-3);
  }

  /* Texto arriba → átomo abajo */
  .quim-atomo-slide__layout--definicion,
  .quim-atomo-slide__layout--analogia {
    grid-template-columns: 1fr;
    gap: var(--ew-space-3);
  }

  .quim-atomo-slide__diagrama {
    width: min(190px, 70%);
    margin-inline: auto;
  }

  .quim-atomo-slide__partes {
    grid-template-columns: 1fr;
  }

  /* Tabla dentro de la misma card */
  .quim-atomo-slide__tabla {
    width: 100%;
  }

  .quim-atomo-slide__tabla .quim-tabla-datos {
    width: 100%;
    min-width: 0;
    table-layout: fixed;

    font-size: var(--ew-text-sm);
  }

  .quim-atomo-slide__tabla .quim-tabla-datos th,
  .quim-atomo-slide__tabla .quim-tabla-datos td {
    padding: var(--ew-space-2);
    overflow-wrap: anywhere;
  }

  .quim-atomo-slide__tabla .quim-tabla-datos th:nth-child(1),
  .quim-atomo-slide__tabla .quim-tabla-datos td:nth-child(1) {
    width: 30%;
  }

  .quim-atomo-slide__tabla .quim-tabla-datos th:nth-child(2),
  .quim-atomo-slide__tabla .quim-tabla-datos td:nth-child(2) {
    width: 18%;
  }

  .quim-atomo-slide__tabla .quim-tabla-datos th:nth-child(3),
  .quim-atomo-slide__tabla .quim-tabla-datos td:nth-child(3) {
    width: 52%;
  }

  /* Chispa */
  .quim-atomo-slide__dialogo {
    width: 100%;
  }

    /* ---------- Modelos atómicos ---------- */

  .quim-modelos {
    padding-inline: var(--ew-space-2);
  }

  .quim-modelos__nota {
    width: auto;
    margin-inline: 0;

    font-size: var(--ew-text-sm);
  }

  .quim-timeline {
    gap: var(--ew-space-3);
  }

  .quim-timeline__evento {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "numero contenido"
      "numero visuales";

    gap:
      var(--ew-space-2)
      var(--ew-space-3);

    padding: var(--ew-space-3);
  }

  .quim-timeline__numero {
    grid-area: numero;
    align-self: start;

    padding-top: var(--ew-space-1);
  }

  .quim-timeline__contenido {
    grid-area: contenido;
  }

  .quim-timeline__visuales {
    grid-area: visuales;

    grid-template-columns:
      minmax(0, 78px)
      minmax(0, 90px);

    justify-content: start;

    width: 100%;
  }

  .quim-timeline__autor img {
    width: 62px;
    height: 62px;
  }

  .quim-timeline__autor-nombre {
    max-width: 72px;
    font-size: var(--ew-text-sm);
  }

  .quim-timeline__modelo svg {
    width: 72px;
    height: 72px;
  }

  .quim-timeline__titulo {
    font-size: var(--quim-title-item-size);
  }

  .quim-timeline__frase,
  .quim-timeline__descripcion {
    font-size: var(--quim-text-size);
  }

      /* ---------- Estructura electrónica ---------- */

  .quim-estructura-electronica {
    width: 100%;
    box-sizing: border-box;

    gap: var(--ew-space-3);
    padding: var(--ew-space-3);
  }

  .quim-estructura-electronica__titulo {
    margin-bottom: var(--ew-space-1);

    font-size: var(--quim-title-section-size);
    line-height: 1.25;
  }

  .quim-estructura-electronica__truco {
    width: 100%;
    max-width: none;
    box-sizing: border-box;

    padding: var(--ew-space-3);
  }

  .quim-estructura-electronica__subniveles {
    width: 100%;
  }

  .quim-estructura-electronica__subniveles .quim-chip {
    flex: 1 1 calc(50% - var(--ew-space-2));
    justify-content: center;

    min-width: 0;
  }

    /* ---------- Prácticas ---------- */

  .quim-practica-clasificar {
    gap: var(--ew-space-3);
  }

  .quim-practica__caso {
    padding: var(--ew-space-3);
  }

  .quim-practica__grupos {
    grid-template-columns: 1fr;
  }

  .quim-practica__grupo {
    width: 100%;
    min-height: 46px;
  }

  .quim-practica__pie {
    justify-content: stretch;
  }

  .quim-practica__pie
    .quim-experiencia__btn-practica {
    width: 100%;
  }

  .quim-practica__acciones {
    width: 100%;
  }

  .quim-practica__siguiente {
    width: 100%;
  }

  .quim-experiencia__btn-practica {
    width: 100%;
  }

  .quim-practica-seleccionar {
  gap: var(--ew-space-3);
  }

  .quim-practica-ordenar {
    gap: var(--ew-space-3);
  }

  .quim-practica__disponibles {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quim-practica__disponibles
    .quim-practica__grupo {
    width: 100%;
  }

    /* ---------- Completar estructura ---------- */

  .quim-practica-completar {
    gap: var(--ew-space-3);
  }

  .quim-practica__datos {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quim-practica__dato {
    width: 100%;
    box-sizing: border-box;
  }

  .quim-practica__campo {
    padding: var(--ew-space-3);
  }

  .quim-practica__opciones-campo {
    display: grid;
    grid-template-columns: 1fr;
  }

  .quim-practica__opciones-campo
    .quim-practica__grupo {
    width: 100%;
  }

  .quim-experiencia__nav--continuar {
    justify-content: flex-end;
  }

  .quim-experiencia__nav-btn--continuar {
    width: 48px;
    min-width: 48px;
    height: 44px;
  }

  .quim-experiencia:has(.quim-estructura-electronica)
    .quim-experiencia__nav--continuar {
    right: var(--ew-space-3);
    bottom: var(--ew-space-3);
  }

  .quim-estructura-electronica {
    padding-bottom: 68px;
  }

  .quim-leccion-evaluacion {
    width: calc(100% - 2rem);
  }

  .quim-evaluacion {
    width: calc(100% - 1rem);
  }

  .quim-cuadro {
    padding:
      var(--ew-space-4);
  }

  .quim-test-opcion {
    width: 100%;
  }

  .quim-test-final-btn-empezar {
    width: 100%;
    text-align: center;
  }

  .quim-likert__escala {
    justify-content:
      space-between;
  }

  .quim-likert__opcion {
    flex:
      1 1 44px;

    max-width: 52px;
  }

}

/* =========================================================
   Visuales fluidos y animados
   Los SVG comparten una caja estable para que ningún diagrama
   empuje la tarjeta fuera de sus límites.
========================================================= */

.quim-diagrama {
  aspect-ratio: 1.45 / 1;
}

.quim-diagrama--atomo {
  aspect-ratio: auto;
  animation: quim-atomo-flotar 3s ease-in-out infinite;
}

.quim-diagrama--atomo .quim-svg {
  animation: none;
}

@keyframes quim-atomo-flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Materia: la tarjeta NO se mueve como bloque — cada objeto tiene su
   propio movimiento real e independiente (rebote, balanceo, flote),
   igual que Chispa se anima en el index. */
.quim-diagrama--materia .quim-svg {
  animation: none;
}

.quim-materia__obj {
  transform-box: fill-box;
}

.quim-materia__silla {
  transform-origin: bottom center;
  animation: quim-materia-balanceo 3.6s ease-in-out infinite;
}

.quim-materia__balon {
  transform-origin: bottom center;
  animation: quim-materia-rebote 1.4s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}

.quim-materia__mochila {
  transform-origin: center;
  animation: quim-materia-flote 2.8s ease-in-out infinite;
  animation-delay: 0.4s;
}

.quim-materia__cometa {
  transform-origin: bottom center;
  animation: quim-materia-viento 2.4s ease-in-out infinite;
  animation-delay: 0.2s;
}

.quim-materia__libreta {
  transform-origin: center;
  animation: quim-materia-flote 3.2s ease-in-out infinite;
  animation-delay: 0.9s;
}

@keyframes quim-materia-balanceo {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(4deg);
  }
}

@keyframes quim-materia-rebote {
  0% {
    transform: translateY(0) scaleY(1);
  }
  45% {
    transform: translateY(-26px) scaleY(1.05);
  }
  50% {
    transform: translateY(-28px) scaleY(1.08);
  }
  55% {
    transform: translateY(-26px) scaleY(1.05);
  }
  95% {
    transform: translateY(0) scaleY(0.85);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}

@keyframes quim-materia-flote {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(-3deg);
  }
}

@keyframes quim-materia-viento {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

/* ══════════════════════════════════════════════════════════
   Utilidades genéricas de animación por figura.
   Mismo principio que "materia": cada elemento del SVG se mueve
   por sí mismo, la tarjeta/SVG completo no se traslada como bloque.
══════════════════════════════════════════════════════════ */
.quim-diagrama--filtracion .quim-svg,
.quim-diagrama--decantacion .quim-svg,
.quim-diagrama--evaporacion .quim-svg,
.quim-diagrama--destilacion .quim-svg,
.quim-diagrama--imantacion .quim-svg,
.quim-diagrama--tamizado .quim-svg,
.quim-diagrama--policias-ladrones .quim-svg,
.quim-diagrama--tendencias .quim-svg,
.quim-diagrama--enlace .quim-svg {
  animation: none;
}

.quim-obj {
  transform-box: fill-box;
}

.quim-obj--flotar {
  transform-origin: center;
  animation: quim-obj-flotar 2.4s ease-in-out infinite;
}

.quim-obj--flotar-lento {
  transform-origin: center;
  animation: quim-obj-flotar 3.6s ease-in-out infinite;
}

.quim-obj--balanceo {
  transform-origin: top center;
  animation: quim-obj-balanceo 3.2s ease-in-out infinite;
}

.quim-obj--balanceo-centro {
  transform-origin: center;
  animation: quim-obj-balanceo 1.6s ease-in-out infinite;
}

.quim-obj--rebote {
  transform-origin: bottom center;
  animation: quim-obj-rebote 1.2s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}

.quim-obj--rebote-suave {
  transform-origin: center;
  animation: quim-obj-rebote-suave 1.8s ease-in-out infinite;
}

.quim-obj--caida {
  transform-origin: center;
  animation: quim-obj-caida 2.2s ease-in infinite;
}

.quim-obj--vapor {
  transform-origin: bottom center;
  animation: quim-obj-vapor 2.6s ease-out infinite;
}

.quim-obj--pulso {
  transform-origin: center;
  animation: quim-obj-pulso 2s ease-in-out infinite;
}

.quim-obj--vibrar {
  transform-origin: center;
  animation: quim-obj-vibrar 0.5s ease-in-out infinite;
}

.quim-obj--girar-lento {
  transform-origin: center;
  animation: quim-obj-girar 6s linear infinite;
}

/* Órbitas: sin fill-box — el origen queda fijo en el centro del
   viewBox (transform-box: view-box es el valor inicial), así el
   punto orbita alrededor del núcleo en vez de girar sobre sí mismo. */
.quim-obj--orbita {
  transform-origin: 50px 50px;
  animation: quim-obj-girar 3.4s linear infinite;
}

.quim-obj--orbita-inversa {
  transform-origin: 50px 50px;
  animation: quim-obj-girar-inversa 4.2s linear infinite;
}

.quim-obj--orbita-lenta {
  transform-origin: 50px 50px;
  animation: quim-obj-girar 5.6s linear infinite;
}

.quim-obj--flujo {
  animation: quim-obj-flujo 1s linear infinite;
}

.quim-obj--acercar-der {
  transform-origin: center;
  animation: quim-obj-acercar-der 2.4s ease-in-out infinite;
}

.quim-obj--acercar-izq {
  transform-origin: center;
  animation: quim-obj-acercar-izq 2.4s ease-in-out infinite;
}

.quim-obj--d1 { animation-delay: 0.15s; }
.quim-obj--d2 { animation-delay: 0.3s; }
.quim-obj--d3 { animation-delay: 0.45s; }
.quim-obj--d4 { animation-delay: 0.6s; }
.quim-obj--d5 { animation-delay: 0.75s; }
.quim-obj--d6 { animation-delay: 0.9s; }

@keyframes quim-obj-flotar {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes quim-obj-balanceo {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}

@keyframes quim-obj-rebote {
  0%,
  100% {
    transform: translateY(0) scaleY(1);
  }
  40% {
    transform: translateY(-14px) scaleY(1.05);
  }
  50% {
    transform: translateY(-16px) scaleY(1.08);
  }
  60% {
    transform: translateY(-14px) scaleY(1.05);
  }
}

@keyframes quim-obj-rebote-suave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes quim-obj-caida {
  0% {
    transform: translateY(-4px);
    opacity: 0.4;
  }
  60% {
    transform: translateY(10px);
    opacity: 1;
  }
  100% {
    transform: translateY(16px);
    opacity: 0;
  }
}

@keyframes quim-obj-vapor {
  0% {
    transform: translateY(0) scaleY(0.8);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-14px) scaleY(1.3);
    opacity: 0;
  }
}

@keyframes quim-obj-pulso {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes quim-obj-vibrar {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
}

@keyframes quim-obj-girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes quim-obj-girar-inversa {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes quim-obj-flujo {
  to {
    stroke-dashoffset: -22;
  }
}

@keyframes quim-obj-acercar-der {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

@keyframes quim-obj-acercar-izq {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-6px);
  }
}

.quim-diagrama--tabla-periodica,
.quim-diagrama--tendencias {
  aspect-ratio: 1.9 / 1;
}

.quim-diagrama--tabla-periodica {
  aspect-ratio: 1.33 / 1;
}

.quim-ciudad__casa {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: quim-casita-aparece 3.2s ease-in-out infinite;
}

.quim-diagrama--enlace {
  aspect-ratio: 1.85 / 1;
}

/* ---------- Familias químicas inorgánicas: nuevos diagramas ---------- */
.quim-diagrama--formacion-oxido,
.quim-diagrama--familia-hidroxido,
.quim-diagrama--acidos-comparacion,
.quim-diagrama--neutralizacion-sal,
.quim-diagrama--receta-ecuacion,
.quim-diagrama--aplicaciones-industriales {
  aspect-ratio: 1.6 / 1;
}

.quim-diagrama--nomenclatura-etiqueta {
  aspect-ratio: 1.7 / 1;
}

.quim-diagrama--escala-ph {
  aspect-ratio: 2.4 / 1;
}

.quim-diagrama--formacion-oxido .quim-svg,
.quim-diagrama--familia-hidroxido .quim-svg,
.quim-diagrama--acidos-comparacion .quim-svg,
.quim-diagrama--neutralizacion-sal .quim-svg,
.quim-diagrama--receta-ecuacion .quim-svg,
.quim-diagrama--aplicaciones-industriales .quim-svg,
.quim-diagrama--nomenclatura-etiqueta .quim-svg,
.quim-diagrama--escala-ph .quim-svg {
  animation: none;
}

.quim-diagrama .quim-svg {
  transform-origin: center;
  animation: quim-grafico-flotar 5s ease-in-out infinite;
}

.quim-atomo__orbita {
  transform-box: fill-box;
  transform-origin: center;
  stroke-dasharray: 3 5;
  animation: quim-orbita-pulso 2.8s ease-in-out infinite;
}

.quim-atomo__nucleon {
  transform-box: fill-box;
  transform-origin: center;
  animation: quim-nucleo-latido 1.8s ease-in-out infinite;
}

.quim-atomo__electron {
  transform-box: fill-box;
  transform-origin: center;
  animation: quim-electron-brillo 2.2s ease-in-out infinite;
}

.quim-timeline__modelo .quim-svg,
.quim-ficha__diagrama .quim-svg {
  animation-duration: 4.2s;
}

.quim-tabla-datos tbody tr {
  transition: background-color var(--ew-transition-base), transform var(--ew-transition-base);
}

.quim-tabla-datos tbody tr:hover {
  background: color-mix(in srgb, var(--ew-theme-surface) 22%, transparent);
  transform: translateX(3px);
}

@keyframes quim-grafico-flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(0.5deg); }
}

@keyframes quim-orbita-pulso {
  0%, 100% { opacity: 0.42; stroke-width: 2.5; }
  50% { opacity: 0.9; stroke-width: 3.5; }
}

@keyframes quim-nucleo-latido {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes quim-electron-brillo {
  0%, 100% { opacity: 0.65; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: 1; filter: drop-shadow(0 0 3px var(--quim-diagram-blue)); }
}

@keyframes quim-casita-aparece {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (max-width: 600px) {
  .quim-diagrama,
  .quim-diagrama--enlace {
    aspect-ratio: 1.35 / 1;
    padding: 0;
  }

  .quim-diagrama--tabla-periodica,
  .quim-diagrama--tendencias {
    aspect-ratio: 1.55 / 1;
  }

  .quim-diagrama--tabla-periodica {
    aspect-ratio: 1.33 / 1;
  }

  .quim-diagrama--formacion-oxido,
  .quim-diagrama--familia-hidroxido,
  .quim-diagrama--acidos-comparacion,
  .quim-diagrama--neutralizacion-sal,
  .quim-diagrama--receta-ecuacion,
  .quim-diagrama--aplicaciones-industriales,
  .quim-diagrama--nomenclatura-etiqueta {
    aspect-ratio: 1.35 / 1;
    padding: 0;
  }

  .quim-diagrama--escala-ph {
    aspect-ratio: 1.8 / 1;
    padding: 0;
  }

  .quim-diagrama--atomo {
    aspect-ratio: auto;
    width: min(100%, 220px);
  }

  .quim-tabla-datos,
  .quim-tabla-datos thead,
  .quim-tabla-datos tbody,
  .quim-tabla-datos tr,
  .quim-tabla-datos th,
  .quim-tabla-datos td {
    display: block;
  }

  .quim-chips--ciudad {
    grid-template-columns: 1fr;
  }

  .quim-chips--ciudad .quim-chip {
    min-height: 0;
  }

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

  .quim-tabla-datos tbody {
    display: grid;
    gap: var(--ew-space-2);
  }

  .quim-tabla-datos tr {
    padding: var(--ew-space-2) var(--ew-space-3);
    border: 1px solid var(--ew-color-border);
    border-left: 4px solid var(--ew-theme-accent);
    border-radius: var(--ew-radius-md);
    background: var(--ew-color-surface);
  }

  .quim-tabla-datos td {
    display: grid;
    grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
    gap: var(--ew-space-2);
    padding: var(--ew-space-1) 0;
    border: 0;
  }

  .quim-tabla-datos td::before {
    content: attr(data-label);
    color: var(--ew-color-text-muted);
    font-size: var(--ew-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .quim-tabla-datos tbody tr:hover {
    transform: none;
  }
}

/* ---------- Reto interactivo: Construye un átomo ---------- */

.quim-atomo-reto {
  display: grid;
  gap: var(--ew-space-4);
  width: 100%;
  margin-block: var(--ew-space-4);
}

.quim-atomo-reto__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ew-space-3);
}

.quim-atomo-reto__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ew-space-1);
  padding: 0.3rem 0.75rem;
  border-radius: var(--ew-radius-pill);
  background: color-mix(in srgb, var(--ew-palette-purple-accent) 15%, var(--ew-color-surface));
  border: 1px solid color-mix(in srgb, var(--ew-palette-purple-accent) 40%, transparent);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-sm);
  font-weight: 700;
}

.quim-atomo-reto__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.95rem;
  border-radius: var(--ew-radius-md);
  background: var(--ew-color-surface);
  border: 1.5px solid var(--ew-palette-purple-accent);
  color: var(--ew-theme-ink);
  font-family: var(--ew-font-heading);
  font-size: var(--ew-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quim-atomo-reto__btn:hover {
  background: var(--ew-palette-purple-accent);
  color: var(--ew-color-text-inverse);
  transform: translateY(-1px);
}

.quim-atomo-reto__simulador {
  width: 100%;
}

.quim-atomo-reto__pregunta {
  width: 100%;
}

/* Evaluación con simulador integrado */
.quim-evaluacion-simulador {
  width: 100%;
  margin-bottom: var(--ew-space-4);
}

.quim-evaluacion-pregunta {
  width: 100%;
}

.quim-evaluacion-instruccion {
  width: 100%;
  margin: 0 0 var(--ew-space-3);
  font-weight: 700;
  text-align: center;
  color: var(--ew-color-text);
}

@media (prefers-reduced-motion: reduce) {
  .quim-clase-card {
    transition: none;
  }

  .quim-clase-card:hover {
    transform: none;
  }

  .quim-experiencia__paso {
    animation: none;
  }

  .quim-experiencia__fade-in {
    animation: none;
  }

  .quim-diagrama .quim-svg,
  .quim-diagrama--atomo,
  .quim-atomo__orbita,
  .quim-atomo__nucleon,
  .quim-atomo__electron,
  .quim-materia__obj,
  .quim-obj,
  .quim-obj--flotar,
  .quim-obj--flotar-lento,
  .quim-obj--balanceo,
  .quim-obj--balanceo-centro,
  .quim-obj--rebote,
  .quim-obj--rebote-suave,
  .quim-obj--caida,
  .quim-obj--vapor,
  .quim-obj--pulso,
  .quim-obj--vibrar,
  .quim-obj--girar-lento,
  .quim-obj--orbita,
  .quim-obj--orbita-inversa,
  .quim-obj--orbita-lenta,
  .quim-obj--flujo,
  .quim-obj--acercar-der,
  .quim-obj--acercar-izq {
    animation: none;
  }

  .quim-ciudad__casa {
    animation: none;
  }

  .quim-tabla-datos tbody tr {
    transition: none;
  }
}
/* Bloques estáticos creados desde el CMS */
.quim-bloque-cms {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 var(--ew-space-4);
  padding: clamp(18px, 5vw, 30px) clamp(14px, 5vw, 24px);

  border: 1.5px dashed
    color-mix(in srgb, var(--ew-theme-ink) 35%, transparent);
  border-radius: var(--ew-radius-lg);
  background: var(--ew-color-paper, var(--ew-color-surface));

  font-family: var(--ew-font-body, inherit);
  color: var(--ew-theme-ink);
}

/* Separa la sección CMS de las experiencias interactivas */
.quim-bloque-cms + .quim-experiencia {
  margin-top: var(--ew-space-7);
}

.quim-bloque-cms > .cms-md,
.quim-bloque-cms > .cms-imagen {
  margin: 0;
}

.quim-bloque-cms .cms-imagen {
  margin-inline: auto;
  max-width: 100%;
  text-align: center;
}

.quim-bloque-cms .cms-imagen__img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}