/* =========================================================================
   ELUMAR KIDS — style.css
   CSS organizado por secciones: variables, reset, layout, componentes,
   pantallas, animaciones, utilidades, responsive (mobile-first) e impresión.
   ========================================================================= */

/* ---------- 1. VARIABLES / IDENTIDAD VISUAL ---------- */
:root{
  /* Colores institucionales */
  --violeta:  #9B71B8;
  --verde:    #19A35B;
  --naranja:  #EF7A21;
  --celeste:  #67C2E8;

  --violeta-dark: #7C4F9B;
  --verde-dark:   #128047;
  --naranja-dark: #C95F14;
  --celeste-dark: #3AA3CE;

  --bg:        #F7F5FB;
  --bg-card:   #FFFFFF;
  --text:      #362A44;
  --text-soft: #6B5E7B;
  --border:    #E7E1F0;
  --success:   #19A35B;
  --error:     #E14B4B;
  --shadow: 0 10px 28px rgba(80, 50, 120, 0.14);
  --shadow-sm: 0 3px 10px rgba(80, 50, 120, 0.10);
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --font-main: 'Fredoka', 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --header-h: 64px;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, fieldset{ margin: 0; padding: 0; }
fieldset{ border: none; }
ul{ list-style: none; }
img{ max-width: 100%; display: block; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; text-transform: inherit; }
button{ cursor: pointer; background: none; border: none; }
button:disabled{ cursor: not-allowed; opacity: .55; }

body{
  font-family: var(--font-main);
  background: radial-gradient(circle at 10% 20%, rgba(155, 113, 184, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(103, 194, 232, 0.10) 0%, transparent 40%),
              radial-gradient(circle at 50% 50%, rgba(239, 122, 33, 0.05) 0%, transparent 60%),
              var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  padding-top: var(--header-h);
}

/* ---------- 2b. TIPOGRAFÍA SEGÚN GRADO (letra imprenta) ---------- */
/* Antes 3°/4° usaban una fuente cursiva escolar; a pedido de las maestras
   (Sugerencias web.docx) 2°, 3° y 4° quedan todos en imprenta minúscula
   (misma tipografía que --font-main), sin regla propia. */
body[data-grado="1°"]{
  text-transform: uppercase;
  letter-spacing: .3px;
}

:focus-visible{
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 3. HEADER / NAV ---------- */
.app-header{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  z-index: 100;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.brand__logo{ height: 40px; width: 40px; object-fit: contain; }
.brand__name{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--violeta-dark);
  white-space: nowrap;
}
.brand__name strong{ color: var(--naranja); }
.app-nav{ display: flex; align-items: center; gap: 10px; }
.app-nav__student{
  font-size: .85rem;
  color: var(--text-soft);
  font-weight: 600;
}
#btn-fullscreen{ font-size: 1.2rem; padding: 8px; min-width: 44px; }

/* El encabezado conserva controles táctiles de 44 px sin superponer marca,
   alumno y navegación en teléfonos angostos. */
@media (max-width: 480px){
  .app-header{ gap: 4px; padding: 0 6px; }
  .brand{ min-width: 0; gap: 5px; padding: 4px; }
  .brand__logo{ width: 32px; height: 32px; flex: 0 0 32px; }
  .brand__name{ font-size: .78rem; letter-spacing: 0; }
  .app-nav{ min-width: 0; gap: 4px; }
  .app-nav__student{
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .72rem;
  }
  #btn-parent-tip{ width: 44px; min-width: 44px; padding-inline: 0; }
  .btn-parent-tip__label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- 4. BOTONES 3D Y TÁCTILES ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  min-height: 48px;
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
  user-select: none;
}
/* Bug preexistente encontrado al verificar § 8 (25/08/2026), mismo mecanismo que
   el de #screen-start más abajo: [hidden] del navegador NO es !important, así
   que "display: inline-flex" de acá le gana a cualquier botón .btn al que se le
   ponga el atributo hidden por JS (ej. btnQuizNext antes de responder, o los
   toggles nuevos de escena/cuestionario en inglés) — quedaba visible y, peor,
   clickeable igual. Sin esta línea, CUALQUIER botón .btn oculto por JS en toda
   la app queda visible en pantalla. */
.btn[hidden]{ display: none; }

.btn--primary{
  background: linear-gradient(135deg, var(--violeta), var(--violeta-dark));
  color: #fff;
  box-shadow: 0 5px 0 var(--violeta-dark), 0 6px 16px rgba(80,50,120,0.22);
}
.btn--primary:hover{
  background: linear-gradient(135deg, var(--violeta-dark), #6a3d8a);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 7px 0 var(--violeta-dark), 0 10px 22px rgba(80,50,120,0.28);
}
.btn--primary:active{
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 1px 0 var(--violeta-dark), 0 2px 6px rgba(80,50,120,0.15);
}

.btn--secondary{
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  color: #0E3444;
  box-shadow: 0 5px 0 var(--celeste-dark), 0 6px 16px rgba(58,163,206,0.2);
}
.btn--secondary:hover{
  background: linear-gradient(135deg, var(--celeste-dark), #2a8eb8);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 7px 0 var(--celeste-dark), 0 10px 22px rgba(58,163,206,0.25);
}
.btn--secondary:active{
  transform: translateY(3px) scale(0.97);
  box-shadow: 0 1px 0 var(--celeste-dark), 0 2px 6px rgba(58,163,206,0.15);
}

.btn--ghost{
  background: #FFFFFF;
  color: var(--violeta-dark);
  border: 2px solid var(--border);
  box-shadow: 0 4px 0 var(--border);
}
.btn--ghost:hover{ border-color: var(--violeta); background: #F6F1FC; transform: translateY(-2px); }
.btn--ghost:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }

.btn--danger{
  background: #FDEBEB;
  color: var(--error);
  border: 2px solid #F4C6C6;
  box-shadow: 0 4px 0 #F4C6C6;
}
.btn--danger:hover{ background: #FBD9D9; transform: translateY(-2px); }
.btn--danger:active{ transform: translateY(3px); box-shadow: 0 1px 0 #F4C6C6; }

.btn--icon{
  background: #F1EBF8;
  color: var(--violeta-dark);
  border-radius: 999px;
  box-shadow: 0 4px 0 #E2D4F0;
}
.btn--icon:hover{ background: #E4D8F1; transform: translateY(-2px); }
.btn--icon:active{ transform: translateY(3px); box-shadow: 0 1px 0 #E2D4F0; }
.btn--icon[aria-pressed="true"]{ background: var(--verde); color: #fff; box-shadow: 0 4px 0 var(--verde-dark); }

.btn--big{ padding: 16px 32px; font-size: 1.15rem; width: 100%; border-radius: var(--radius-md); }

/* ---------- 5. LAYOUT DE PANTALLAS ---------- */
.screen{
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  animation: fadeIn .35s ease;
}
.screen[hidden]{ display: none; }

.screen-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.screen-header h2{ font-size: 1.4rem; color: var(--violeta-dark); flex: 1; text-align: center; }
.screen-help{ text-align: center; color: var(--text-soft); margin-bottom: 20px; }

.score-chip{
  background: var(--naranja);
  color: var(--text); /* naranja de fondo contra blanco no llega a 3:1 (WCAG) — texto oscuro sí */
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .9rem;
}

/* ---------- 6. PANTALLA INICIO ---------- */
#screen-start{ display: flex; justify-content: center; }
/* Bug preexistente encontrado al verificar § 8 (25/08/2026): un selector por ID
   siempre le gana en especificidad a .screen[hidden] (una clase + un atributo),
   así que sin esta línea #screen-start nunca pasaba a display:none al navegar a
   otra pantalla — quedaba con display:flex de fondo, apilado sobre/debajo de lo
   que sí se estaba mostrando. Mismo patrón que .modal[hidden]/.mascot-widget[hidden]
   más abajo en este archivo. */
#screen-start[hidden]{ display: none; }
.start-card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 20px 28px;
  max-width: 900px;
  width: 100%;
  text-align: center;
}
.start-card__logo{
  height: 72px; width: 72px;
  margin: 0 auto 6px;
  object-fit: contain;
}
.app-title{
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  color: var(--violeta-dark);
  letter-spacing: 1px;
}
.app-title strong{ color: var(--naranja); }
.app-subtitle{
  font-size: 1.1rem;
  color: var(--verde-dark);
  font-weight: 700;
  margin-top: 4px;
}
.app-institution{
  color: var(--text-soft);
  font-size: .85rem;
  margin-top: 6px;
  margin-bottom: 12px;
}

.start-form{ text-align: left; display: flex; flex-direction: column; gap: 14px; }
.field label, .field legend{
  display: block;
  font-weight: 700;
  color: var(--violeta-dark);
  margin-bottom: 8px;
}
.field input[type="text"]{
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 48px;
}
.field input[type="text"]:focus{ border-color: var(--violeta); }

.grade-picker{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade-btn{
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 0;
  font-weight: 700;
  font-size: 1.15rem;
  min-height: 52px;
  background: linear-gradient(180deg, #fff 0%, #f9f7fc 100%);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  box-shadow: 0 2px 0 var(--border);
}
.grade-btn:hover{ transform: translateY(-2px); box-shadow: 0 4px 0 var(--border), 0 4px 12px rgba(80,50,120,0.06); }
.grade-btn[aria-checked="true"]{
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  border-color: var(--celeste-dark);
  color: #10394A;
  box-shadow: 0 3px 0 var(--celeste-dark);
  transform: translateY(-1px);
}

/* ---------- 6b. SELECTOR DE TABLA DE MULTIPLICAR ---------- */
.tables-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.table-btn{
  background: linear-gradient(180deg, var(--bg-card) 0%, #f9f7fc 100%);
  border: 3px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 0;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--violeta-dark);
  box-shadow: 0 3px 0 var(--border), 0 4px 12px rgba(80,50,120,0.06);
  min-height: 76px;
  transition: all .15s ease;
}
.table-btn:hover{
  border-color: var(--naranja);
  transform: translateY(-3px);
  box-shadow: 0 5px 0 var(--naranja), 0 8px 20px rgba(239,122,33,0.15);
}
.table-btn:active{
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--naranja), 0 2px 6px rgba(239,122,33,0.10);
}
.table-btn__label{ display: block; font-size: .65rem; font-weight: 700; color: var(--text-soft); margin-top: 2px; }

/* ---------- 6c. TABLA PITAGÓRICA (descubrir casilleros) ---------- */
.pit-grid-wrap{
  overflow-x: auto;    /* en pantallas angostas (320px) se puede desplazar en vez de romper el layout */
  padding-bottom: 12px;
  margin-bottom: 20px;
}
.pit-grid{
  display: grid;
  gap: 5px;
  width: max-content;
  margin: 0 auto;
  padding: 10px;
  background: #FAF7FC;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  box-shadow: inset 0 2px 6px rgba(80,50,120,0.05);
}
.pit-cell{
  min-width: 44px; /* mínimo táctil WCAG (antes 42px) */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pit-cell--header{
  background: linear-gradient(135deg, var(--violeta), var(--violeta-dark));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--violeta-dark);
}
.pit-cell--header.is-highlight{
  background: linear-gradient(135deg, var(--naranja), var(--naranja-dark));
  color: var(--text); /* hereda color:#fff de .pit-cell--header, pero naranja no llega a 3:1 con blanco */
  box-shadow: 0 3px 0 var(--naranja-dark), 0 0 0 3px rgba(239,122,33,0.3);
  transform: scale(1.08);
}
.pit-cell--corner{ background: var(--violeta-dark); }
.pit-cell--hidden{
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F0FB 100%);
  border: 2px solid var(--border);
  color: var(--violeta-dark);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border);
}
.pit-cell--hidden:hover:not(:disabled){
  background: #EFE6FA;
  border-color: var(--violeta);
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 0 var(--violeta-dark), 0 6px 14px rgba(80,50,120,0.18);
  z-index: 2;
}
.pit-cell--hidden.is-current{
  border-color: var(--naranja);
  background: #FFF5EA;
  color: var(--naranja-dark);
  box-shadow: 0 4px 0 var(--naranja-dark), 0 0 0 4px rgba(239, 122, 33, .3);
  transform: translateY(-2px) scale(1.12);
  z-index: 3;
}
.pit-cell--revealed{
  background: linear-gradient(135deg, var(--verde), var(--verde-dark));
  color: #fff;
  border: 2px solid var(--verde-dark);
  box-shadow: 0 3px 0 var(--verde-dark), 0 4px 10px rgba(25, 163, 91, 0.25);
  animation: popIn .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 6d. MEMOTEST 3D ---------- */
.memo-grid-wrap{ overflow-x: auto; padding: 6px 0 16px; }
.memo-grid{
  display: grid;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
  perspective: 900px;
}
.memo-card{
  width: 58px;
  height: 58px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  outline: none;
}
.memo-card:disabled{
  cursor: default;
  opacity: 1;
}
@media (min-width: 768px){
  .memo-card{ width: 72px; height: 72px; }
}
.memo-card__inner{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.memo-card.is-flipped .memo-card__inner,
.memo-card.memo-card--volteada .memo-card__inner,
.memo-card.memo-card--resuelta .memo-card__inner{
  transform: rotateY(180deg);
}
.memo-card__front,
.memo-card__back{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  pointer-events: none;
}
.memo-card__back{
  background: linear-gradient(135deg, var(--violeta), var(--violeta-dark));
  color: #fff;
  border: 2px solid #E2D4F0;
  font-size: 1.5rem;
  box-shadow: 0 4px 0 var(--violeta-dark), var(--shadow-sm);
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .18s ease;
}
.memo-card:hover:not(:disabled) .memo-card__back{
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 7px 0 var(--violeta-dark), 0 8px 18px rgba(80,50,120,0.22);
}
.memo-card__front{
  background: #FFFFFF;
  border: 2px solid var(--border);
  color: var(--text);
  font-size: 2rem;
  box-shadow: 0 4px 0 var(--border), var(--shadow-sm);
  transform: rotateY(180deg);
}
.memo-card.memo-card--resuelta .memo-card__front{
  background: linear-gradient(135deg, #EAF8F0 0%, #D4F4E2 100%);
  border-color: var(--verde);
  box-shadow: 0 4px 0 var(--verde-dark), 0 0 0 3px rgba(25, 163, 91, 0.3);
  animation: memoPopIn .4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes memoPopIn{
  0%{ transform: rotateY(180deg) scale(0.85); }
  50%{ transform: rotateY(180deg) scale(1.08); }
  100%{ transform: rotateY(180deg) scale(1); }
}

/* ---------- 6e. LABERINTO LÓGICO (Aventura de baldosas) ---------- */
.lab-controls{ display: flex; justify-content: center; margin-bottom: 16px; }
.lab-grid-wrap{ overflow-x: auto; padding-bottom: 12px; margin-bottom: 16px; }
.lab-grid{
  display: grid;
  gap: 6px;
  width: max-content;
  margin: 0 auto;
  padding: 12px;
  background: #FAF7FC;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  box-shadow: inset 0 2px 6px rgba(80,50,120,0.06);
}
.lab-cell{
  min-width: 46px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  background: #FFFFFF;
  border: 2px solid var(--border);
  color: var(--text-soft);
  box-shadow: 0 3px 0 var(--border);
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lab-cell--candidata{
  background: linear-gradient(180deg, #FFF9EB 0%, #FEECCF 100%);
  border-color: var(--naranja);
  color: var(--naranja-dark);
  box-shadow: 0 4px 0 var(--naranja), 0 0 0 3px rgba(239, 122, 33, .2);
  cursor: pointer;
  animation: candidatePulse 1.8s infinite ease-in-out;
}
.lab-cell--candidata:hover{
  background: #FEECCF;
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 0 var(--naranja), 0 8px 18px rgba(239, 122, 33, .28);
}
@keyframes candidatePulse{
  0%, 100%{ box-shadow: 0 3px 0 var(--naranja), 0 0 0 2px rgba(239, 122, 33, .2); }
  50%{ box-shadow: 0 4px 0 var(--naranja), 0 0 0 6px rgba(239, 122, 33, .35); }
}
.lab-cell--visitada{
  background: linear-gradient(135deg, var(--verde), var(--verde-dark));
  border-color: var(--verde-dark);
  color: #fff;
  box-shadow: 0 2px 0 var(--verde-dark);
}
.lab-cell--actual{
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  border-color: var(--celeste-dark);
  color: #10394A;
  font-size: 1.25rem;
  box-shadow: 0 4px 0 var(--celeste-dark), 0 4px 14px rgba(58,163,206,0.3);
  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lab-cell--meta{
  background: linear-gradient(135deg, var(--naranja), var(--naranja-dark));
  border-color: var(--naranja-dark);
  color: var(--text); /* naranja de fondo contra blanco no llega a 3:1 (WCAG) — texto oscuro sí */
  font-size: 1.25rem;
  box-shadow: 0 3px 0 var(--naranja-dark);
}
.lab-cell.is-shaking{ animation: shake .4s; }

@media (min-width: 768px){
  .lab-cell{ min-width: 56px; min-height: 56px; font-size: 1.15rem; }
}

.module-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.module-access-help{
  margin: -2px 0 9px;
  color: var(--text-soft);
  font-size: .8rem;
  font-weight: 650;
}
.module-card-shell{
  position: relative;
  min-width: 0;
  min-height: 104px;
}
.module-card-shell[hidden]{ display: none; }
.module-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: linear-gradient(180deg, #fff 0%, #faf8fd 100%);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.module-card__badge{
  position: absolute;
  top: 6px; left: 6px; /* no right: choca con .module-card__narrar, que ya está ahí */
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--text); /* naranja contra blanco no llega a 3:1 (WCAG) — texto oscuro sí */
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.module-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: transparent;
  transition: background .15s ease;
}
.module-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 24px rgba(80,50,120,0.10); }
.module-card--active{ border-color: var(--verde); background: linear-gradient(180deg, #eaf8f0 0%, #e0f5e9 100%); }
.module-card--active::before{ background: var(--verde); }
.module-card--active.is-selected{
  border-color: var(--naranja);
  background: linear-gradient(180deg, #fdeedf 0%, #fce8d4 100%);
  box-shadow: 0 0 0 3px rgba(239,122,33,.25);
}
.module-card--active.is-selected::before{ background: var(--naranja); }
.module-card__icon{ font-size: 1.8rem; line-height: 1; }
/* Insignia de texto en lugar de emoji de bandera: el emoji 🇬🇧 se arma combinando dos
   "letras regionales" que muchos sistemas (Windows sin fuente de banderas, Smart TV,
   navegadores viejos) no unen en una bandera — se ven como dos letras sueltas y más
   anchas que el resto de los íconos, desbordando la tarjeta. El texto es 100% estable. */
.module-card__icon--badge{
  /* Mismo tamaño de caja que los emoji hermanos (font-size/line-height heredados de
     .module-card__icon) para que ocupe exactamente el mismo lugar en la tarjeta — nada
     de ancho/alto fijo ni círculo, así no puede quedar desalineada ni salirse del marco. */
  font-weight: 800;
  color: #17465A;
}
.module-card__name{ font-weight: 700; font-size: .85rem; }

/* Narración por voz: botón real y hermano de la tarjeta dentro de
   .module-card-shell. Evita controles interactivos anidados y mantiene una
   superficie táctil de 44×44 px para quienes todavía no leen con autonomía. */
.module-card__narrar{
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
}
.module-card__narrar:hover, .module-card__narrar:focus-visible{
  background: var(--celeste);
  transform: scale(1.1);
}

/* Mascota ilustrada por módulo (imagenes/mascotas/<modulo>.png), oculta hasta que
   cargue bien (JS la muestra y esconde el emoji de respaldo). Va recortada en un
   círculo tipo "avatar": los archivos no son todos cuadrados (algunas mascotas
   viejas son apaisadas verticales) y a tamaño chico con contain quedaban como
   estampitas perdidas en medio de un montón de fondo blanco. object-fit:cover +
   object-position arriba hace zoom sobre la cabeza/torso del personaje y recorta
   el resto. */
.module-card__icon-img{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  box-shadow: var(--shadow-sm);
  display: none;
}

.module-card[data-available="false"]{ opacity: .55; }
.module-card[hidden]{ display: none; }
.module-card__soon{
  font-size: .65rem;
  color: var(--text-soft);
  background: var(--border);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------- Banner "Mirá todo nuestro arte" (mockup 02/09/2026, Dirección A) ----------
   Puerta de entrada a la Galería de ilustraciones — a propósito FUERA del
   flujo de juego (no exige nombre/grado/módulo), ver btn-galeria-abrir en
   app.js. Mismos valores que el mockup aprobado, sin inventar un estilo
   nuevo. */
.art-banner{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 168px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background:
    radial-gradient(circle at 85% 20%, rgba(103,194,232,0.35) 0%, transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(155,113,184,0.30) 0%, transparent 55%),
    linear-gradient(120deg, #FBF8FF 0%, #F3ECFA 100%);
  padding: 18px 20px;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.art-banner:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(80,50,120,0.14); }
.art-banner:active{ transform: translateY(1px); }
.art-banner__text{ position: relative; z-index: 2; flex: 0 0 42%; }
.art-banner__eyebrow{
  font-family: var(--font-main); font-weight: 700; font-size: 1.1rem; color: var(--violeta-dark);
  margin: 0 0 4px;
}
.art-banner__sub{ font-size: .8rem; color: var(--text-soft); margin: 0 0 12px; line-height: 1.35; }
.art-banner__cta{
  display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
  font-size: .85rem; color: #0E3444; background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  padding: 9px 16px; border-radius: 999px; box-shadow: 0 4px 0 var(--celeste-dark);
}
.art-banner__pics{ position: relative; flex: 1 1 58%; height: 132px; }
.float-pic{
  position: absolute; border-radius: 14px; box-shadow: 0 6px 16px rgba(80,50,120,0.18);
  border: 3px solid #fff; object-fit: cover; animation: floatPic 4.4s ease-in-out infinite;
}
@keyframes floatPic{
  0%, 100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-9px) rotate(var(--r, 0deg)); }
}
@media (prefers-reduced-motion: reduce){ .float-pic{ animation: none; } }

.field-error{
  color: var(--error);
  background: #FDEBEB;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .9rem;
  font-weight: 600;
}

/* ---------- 7. BIBLIOTECA DE CUENTOS ---------- */
.story-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.story-card{
  position: relative;
  isolation: isolate;
  min-height: 250px;
  align-items: flex-end;
  background: var(--violeta-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px rgba(80,50,120,.18);
  overflow: hidden;
  display: flex;
  border: 3px solid rgba(255,255,255,.96);
  transition: transform .2s ease, box-shadow .2s ease;
}
.story-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(80,50,120,.25); }
/* Narración por voz del tema (28/08/2026, mismo criterio que
   .module-card__narrar): acá SÍ es un <button> real, .story-card es un
   <article>, no un botón — no hay problema de anidar. */
.story-card__narrar{
  position: absolute;
  top: 14px; right: 14px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 18px rgba(35,18,48,.24);
  font-size: 1rem;
  line-height: 1;
  z-index: 4;
}
.story-card__narrar:hover, .story-card__narrar:focus-visible{
  background: var(--celeste);
  transform: scale(1.1);
}
.story-card__cover{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  line-height: 1;
  text-align: center;
  color: #fff;
  overflow: hidden;
  z-index: 0;
}
.story-card__cover::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25,12,34,.03) 18%, rgba(27,13,37,.22) 48%, rgba(27,12,38,.94) 100%);
  pointer-events: none;
  z-index: 2;
}
.story-card__cover-emoji{
  position: relative;
  line-height: 1;
  filter: drop-shadow(0 5px 12px rgba(30,15,40,.28));
  z-index: 1;
}
/* Identidad visual por mecánica (no por tema): mismo ícono chico en todas las
   tarjetas de un motor, sea cual sea el tema — así "Unir conceptos" se reconoce
   de un vistazo distinto de "Clasificar", independiente del color de la tarjeta.
   El borde superior de color (ver JS) hace lo mismo por otra vía, para quien
   todavía no lee. Ver ilustraciones.md § Identidad visual por mecánica. */
.story-card__motor-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 78px);
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--violeta-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  box-shadow: 0 5px 16px rgba(35,18,48,.2);
  backdrop-filter: blur(7px);
  z-index: 3;
}
.story-card__cover-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none; /* se muestra por JS solo si la imagen carga OK */
  z-index: 0;
}
.story-card__body{
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 82px 16px 17px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  color: #fff;
  z-index: 3;
}
.story-card__title{
  font-size: 1.5rem;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 9px rgba(0,0,0,.48);
}
.story-card__desc{
  max-width: 38ch;
  color: rgba(255,255,255,.9);
  font-size: .86rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-shadow: 0 2px 7px rgba(0,0,0,.56);
}
.story-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  gap: 8px;
  color: rgba(255,255,255,.86);
  text-shadow: 0 2px 7px rgba(0,0,0,.56);
}
.story-card__stars{ color: #FFD45B; font-size: .95rem; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.story-card__play{
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  color: #3b164f;
  background: linear-gradient(180deg, #ffda68, #ffca3f);
  border: 2px solid #fff0b1;
  box-shadow: 0 5px 0 #d58d23, 0 8px 16px rgba(0,0,0,.24);
}
.story-card__play:hover{
  color: #3b164f;
  background: linear-gradient(180deg, #ffe17d, #ffd04d);
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #d58d23, 0 11px 20px rgba(0,0,0,.28);
}
.story-card__play:active{
  transform: translateY(3px);
  box-shadow: 0 2px 0 #d58d23, 0 5px 10px rgba(0,0,0,.2);
}

/* ---------- 8. ESCENA DEL CUENTO ---------- */
.progress-bar{
  height: 14px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
.progress-bar__fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--celeste), var(--verde), var(--naranja));
  background-size: 200% 100%;
  border-radius: 999px;
  transition: width .5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}
.progress-bar__fill::after{
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
  border-radius: 999px;
}

/* ---------- 8b. BANNER DE ILUSTRACIÓN EN PANTALLA DE JUEGO ----------
   Le da protagonismo a las portadas (antes solo vivían como tira de 150px en
   las tarjetas de biblioteca): banda arriba de cada pantalla de juego,
   tocable para ver la ilustración completa en un modal.

   Revisión de tamaño (25/08/2026, ver PLAN.md): con alto fijo en 136px y sin
   tope de ancho, `.screen` puede llegar a 1080-1280px (tablet/desktop/
   proyector), así que el banner terminaba con una proporción de hasta ~9:1
   contra el ~3:2 real de las portadas (1264×848px) — se veía una tira
   mínima de la ilustración con `object-fit: cover`. Enfoque híbrido:
   - Celular (por defecto): banner compacto de 160px (antes 136px) con
     `max-width` para no estirarse — sigue recortando algo, pero el botón
     de lupa 🔍 sigue ahí para ver la ilustración completa sin comprometer
     el alto pensado para no empujar el juego fuera de la pantalla en un
     celular chico.
   - Tablet en adelante (≥768px, ver § 16 más abajo): pasa a
     `aspect-ratio: 3/2` (la proporción real de casi todas las portadas) +
     `object-fit: contain` — se ve la ilustración COMPLETA, sin recortar,
     aprovechando que ahí sobra alto de pantalla. */
.game-banner{
  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;
  height: 160px;
  margin: 0 auto 14px;
  border: none;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.game-banner:active{ filter: brightness(.94); }
.game-banner__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: none; /* JS lo muestra solo si el derivado -banner carga OK */
}
.game-banner__fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
}
.game-banner::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}
.game-banner__label{
  position: absolute;
  left: 12px;
  bottom: 9px;
  z-index: 2;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.game-banner__zoom{
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-sm);
}
.game-banner__zoom[hidden]{ display: none; } /* sin ilustración cargada: no hay nada que ampliar */

/* Modal "ilustración ampliada": mismo componente .modal que Tip para Padres,
   con la imagen a resolución completa (no el derivado liviano del banner). */
.modal__ilustracion-img{
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  display: block;
  background: var(--bg);
}
.modal__ilustracion-caption{
  margin: 12px 0 0;
  font-weight: 700;
  color: var(--violeta-dark);
}
.modal--ilustracion .modal__card{ max-width: 640px; }

.scene-card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: center;
}
.scene-card__illustration{
  position: relative;
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 14px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F1EBF8, #E6F7FF, #FFF7E6);
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
  border-radius: var(--radius-md);
  padding: 20px;
  overflow: hidden;
}
@keyframes gradient-shift{
  0%{background-position: 0% 50%}
  50%{background-position: 100% 50%}
  100%{background-position: 0% 50%}
}
.scene-illustration-img{
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;  /* muestra la ilustración completa, sin recortarla */
  border-radius: var(--radius-sm);
  display: none;        /* se muestra por JS solo si la imagen carga OK */
}
.scene-card__text{
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text);
  max-width: 640px;
  margin: 0 auto 18px;
}
.scene-card__controls{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Subtítulo en español opcional (solo cuentos auditivos en inglés,
   spec-motores-nuevos.md § 8.2): oculto por default, nunca se narra. */
.scene-card__apoyo{
  font-size: 1rem;
  font-style: italic;
  color: var(--text-soft);
  background: #F1EBF8;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  max-width: 640px;
  margin: -6px auto 18px;
}

.scene-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}
.scene-nav__count{ font-weight: 700; color: var(--text-soft); }

/* Pantalla de minijuegos de un cuento de lectura comprensiva (spec-motores-nuevos.md
   § 9.5): un solo botón centrado, a diferencia de .scene-nav (prev/count/next). */
.story-minigames-finish{ display: flex; justify-content: center; margin-top: 24px; }

/* ---------- 8c. LIBRO COMPAÑERO — molde común de cuentos (Fase 4) ----------
   Español, inglés auditivo e inglés lector comparten esta estructura. Los
   archivos de contenido sólo aportan escenas y apoyos; no crean pantallas. */
.storybook{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  max-width: 1080px;
  min-height: 540px;
  margin: 24px auto 0;
  padding: 15px;
  background: transparent;
  border-radius: 30px;
  box-shadow: 0 24px 50px rgba(49, 34, 64, .28);
  text-align: left;
  isolation: isolate;
}
.storybook__cover{
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 3px solid #C8993F;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0, #70498D 0, transparent 34%),
    linear-gradient(145deg, #492D68, #291B42 55%, #51336B);
  box-shadow: inset 0 0 0 3px rgba(249, 220, 124, .34), inset 0 0 35px #130A25, 0 6px 0 #1D122E;
}
.storybook__cover::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(244, 215, 123, .6);
  border-radius: 22px;
}
.storybook__cover::after{
  content: "✦  ELUMAR  ✦";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 7px 20px;
  border: 2px solid #D9AD51;
  border-radius: 999px;
  background: linear-gradient(#6F4A88, #35214E);
  color: #FFE9A6;
  font-family: Georgia, serif;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-shadow: 0 1px #000;
  white-space: nowrap;
}
.storybook__page{
  position: relative;
  min-width: 0;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid #E0CFAA;
  background: #FFFDF7;
  box-shadow: inset 0 0 28px rgba(178, 149, 96, .14);
}
.storybook__page::after{
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(213, 183, 97, .34);
  border-radius: 13px;
  pointer-events: none;
}
.storybook__page--art{ border-radius: 18px 3px 3px 18px; padding: 18px 12px 18px 18px; }
.storybook__page--copy{
  display: flex;
  flex-direction: column;
  border-radius: 3px 18px 18px 3px;
  padding: 30px 38px 45px;
  background: linear-gradient(90deg, #D6C8AE 0, #FFFDF7 5%, #FFFDF7 100%);
}
.storybook__spine{
  position: absolute;
  z-index: 5;
  top: 18px;
  bottom: 18px;
  left: calc(52.5% - 8px);
  width: 16px;
  background: linear-gradient(90deg, rgba(122,91,55,.66), #FFF5D9 46%, rgba(139,106,66,.66) 55%, transparent);
  filter: drop-shadow(0 0 4px rgba(61,39,23,.46));
  pointer-events: none;
}
.storybook__spine span{
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  transform: translate(-50%, -50%);
  border: 1px solid #E8C368;
  border-radius: 50%;
  background: #5B376F;
  color: #FFE697;
}
.storybook__corner{
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  width: 35px; height: 35px;
  border: 1px solid #FFEDAA;
  background: linear-gradient(135deg, #C7973C, #76501C);
  color: #FFE9A6;
  box-shadow: 0 3px 9px rgba(21,12,36,.66);
  pointer-events: none;
}
.storybook__corner--tl{ left: 3px; top: 3px; border-radius: 25px 3px 15px 3px; }
.storybook__corner--tr{ right: 3px; top: 3px; border-radius: 3px 25px 3px 15px; }
.storybook__corner--bl{ left: 3px; bottom: 3px; border-radius: 3px 15px 3px 25px; }
.storybook__corner--br{ right: 3px; bottom: 3px; border-radius: 15px 3px 25px 3px; }
.storybook .scene-card__illustration{
  height: 100%;
  min-height: 472px;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: #40364D;
  animation: none;
  isolation: isolate;
}
.storybook .scene-card__illustration::before{
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  background: var(--storybook-scene) center / cover;
  filter: blur(15px) saturate(.82) brightness(.7);
  opacity: .72;
  transform: scale(1.08);
}
.storybook .scene-illustration-img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 3px 7px rgba(27,16,44,.46));
}
.storybook .scene-illustration-emoji{ position: relative; z-index: 1; }
.storybook__page-topline{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.storybook .scene-card__controls{ justify-content: flex-end; gap: 8px; }
.storybook .scene-card__controls .btn{ min-height: 44px; }
.storybook .scene-card__text{
  width: 100%;
  margin: auto 0;
  padding: 24px 0;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  line-height: 1.7;
}
.storybook .scene-card__apoyo{ position: relative; z-index: 1; margin: 0 0 18px; }
.storybook__reflection{
  position: relative;
  z-index: 1;
  padding: 13px 15px;
  border-left: 4px solid #F2BD52;
  border-radius: 4px 13px 13px 4px;
  background: #F2EDE5;
}
.storybook__reflection strong{ color: #956A1D; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.storybook__reflection p{ margin: 5px 0 0; line-height: 1.45; }
.storybook__folio{ position: absolute; right: 28px; bottom: 15px; color: #9D9388; font-family: Georgia, serif; }
.storybook + .scene-nav{ max-width: 980px; margin: 24px auto 0; }
.storybook[data-modalidad="ingles-auditivo"] .scene-card__text{ font-size: clamp(1.12rem, 1.8vw, 1.32rem); }
.storybook[data-modalidad="ingles-lector"] .scene-card__text{ font-size: clamp(1.08rem, 1.7vw, 1.28rem); }

@media (max-width: 767px){
  .storybook{
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 20px;
    padding: 11px;
    border-radius: 26px;
  }
  .storybook__cover{ border-radius: 26px; }
  .storybook__cover::after{ top: -14px; padding: 5px 14px; font-size: .63rem; }
  .storybook__corner{ width: 29px; height: 29px; font-size: .75rem; }
  .storybook__spine{ display: none; }
  .storybook__page{ min-height: 0; }
  .storybook__page--art{ border-radius: 16px 16px 3px 3px; padding: 10px; }
  .storybook__page--copy{ border-radius: 3px 3px 16px 16px; padding: 22px 22px 38px; }
  .storybook .scene-card__illustration{ min-height: 310px; }
  .storybook__page-topline{ flex-direction: column; }
  .storybook .scene-card__controls{ width: 100%; justify-content: flex-start; }
  .storybook .scene-card__controls .btn{ flex: 1 1 44%; }
  .storybook .scene-card__text{ margin: 0; padding: 22px 0; font-size: 1.08rem; line-height: 1.58; }
  .storybook + .scene-nav{ gap: 10px; }
  .storybook + .scene-nav .btn{ flex: 1; min-width: 0; }
}

/* Pantalla de minijuegos de un cuento de lectura comprensiva (spec-motores-nuevos.md
   § 9.5): un solo botón centrado, a diferencia de .scene-nav (prev/count/next). */
.story-minigames-finish{ display: flex; justify-content: center; margin-top: 24px; }

/* ---------- 9. PREGUNTAS / QUIZ ---------- */
.quiz-card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.quiz-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--violeta), var(--celeste), var(--verde), var(--naranja));
  opacity: 0.6;
}
.quiz-card__count{ color: var(--text-soft); font-weight: 700; margin-bottom: 6px; }
.quiz-card__figura{ display: flex; justify-content: center; margin-bottom: 12px; }
.quiz-card__question{
  font-size: 1.3rem;
  color: var(--violeta-dark);
  margin-bottom: 18px;
  line-height: 1.5;
}
/* "Completar la palabra" (spec-motores-nuevos.md § 1.2): resalta el hueco a
   completar dentro del texto de la pregunta. */
.quiz-blank{
  display: inline-block;
  padding: 0 10px;
  border-bottom: 3px dashed var(--naranja);
  background: var(--bg);
  border-radius: 4px;
  color: var(--naranja-dark);
  font-weight: 700;
}

/* "Unir conceptos" (spec-motores-nuevos.md § 2.1): dos columnas de fichas tocables,
   con una línea SVG que se dibuja entre cada par acertado (ver dibujarLineaUnir en
   app.js). El gap grande deja lugar para esas líneas en pantallas anchas; en mobile,
   con una sola columna, no hace falta y se achica para no dejar huecos gigantes. */
.unir-columnas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 4px;
  position: relative;
}
.unir-columna{ display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.unir-item{
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border);
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
}
.unir-item:hover:not(:disabled){
  border-color: var(--violeta);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 0 var(--violeta-dark), 0 8px 16px rgba(80,50,120,0.12);
}
.unir-item:active:not(:disabled){
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 0 var(--border);
}
.unir-item.is-seleccionada{
  border-color: var(--celeste-dark);
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  color: #10394A; /* celeste de fondo contra blanco no llega a 3:1 (WCAG) — mismo tono oscuro que ya usan .grade-btn/.lab-cell--actual */
  box-shadow: 0 4px 0 var(--celeste-dark), 0 0 0 4px rgba(103,194,232,0.3);
  transform: translateY(-2px) scale(1.04);
}
.unir-item.is-resuelta{
  border-color: var(--verde-dark);
  background: linear-gradient(135deg, var(--verde), var(--verde-dark));
  color: #fff;
  cursor: default;
  box-shadow: 0 3px 0 var(--verde-dark);
  transform: scale(1.02);
  animation: popIn .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.unir-item.is-error{ animation: shake .4s ease; border-color: var(--error); }

/* Líneas SVG dibujadas entre columnas al acertar un par */
.unir-svg-lines{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.unir-line{
  fill: none;
  stroke: var(--verde);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine .5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }

@media (max-width: 480px){
  .unir-columnas{ grid-template-columns: 1fr; gap: 10px; }
}

/* MOT-02: cuaderno botánico; la ilustración funciona como tablero. */
.unir--botanica .game-banner{ display: none; }
.unir--botanica .screen-help{
  width: fit-content;
  margin: 14px auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #eef8d9;
  color: #385127;
  font-weight: 800;
  box-shadow: 0 3px 0 #9cbd6a;
}
.unir--botanica .unir-columnas{
  box-sizing: border-box;
  aspect-ratio: 3 / 2;
  grid-template-columns: 23% 54% 23%;
  gap: 0;
  align-items: center;
  padding: 4% 2.5% 5%;
  border-radius: 24px;
  background: url('../imagenes/unir/ciencias-partes-planta-1/tablero-botanica.jpg') center / cover no-repeat;
  box-shadow: 0 9px 0 #76512f, 0 17px 32px rgba(66,45,27,.2);
  overflow: hidden;
}
.unir--botanica #unir-columna-izq{ grid-column: 1; gap: clamp(5px, .8vw, 10px); }
.unir--botanica #unir-columna-der{ grid-column: 3; padding: 8%; }
.unir--botanica .unir-item{
  min-height: 44px;
  padding: clamp(7px, 1vw, 13px) 6px;
  border-color: #aa7c45;
  border-radius: 14px;
  background: rgba(255,249,225,.94);
  color: #49351f;
  box-shadow: 0 4px 0 #78532e, 0 5px 10px rgba(63,42,21,.14);
  font-size: clamp(.72rem, 1.45vw, 1rem);
}
.unir--botanica .unir-item.is-resuelta{
  border-color: #5f9146;
  background: rgba(223,244,190,.92);
  color: #315124;
  box-shadow: 0 3px 0 #4f793b;
}
.unir--botanica .unir-funcion-activa{
  display: grid;
  place-items: center;
  min-height: clamp(130px, 21vw, 230px);
  border: 4px solid #8769ae;
  background: rgba(255,252,244,.94);
  box-shadow: 0 6px 0 #5d447d, 0 10px 18px rgba(61,42,78,.18);
  font-size: clamp(.72rem, 1.45vw, 1.05rem);
  line-height: 1.35;
}
.unir--botanica .unir-descubrimientos{
  position: relative;
  grid-column: 2;
  align-self: stretch;
  z-index: 3;
}
.unir-descubrimientos[hidden]{ display: none; }
.unir-descubrimiento{
  position: absolute;
  padding: 4px 8px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #7560a6;
  color: #fff;
  font-size: clamp(.58rem, 1vw, .78rem);
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(45,30,58,.25);
  animation: popIn .35s cubic-bezier(.34,1.56,.64,1);
}
.unir-descubrimiento::after{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #75a955;
}
.unir-descubrimiento--raiz{ left: 29%; top: 74%; }
.unir-descubrimiento--tallo{ left: 47%; top: 50%; }
.unir-descubrimiento--hoja{ left: 25%; top: 35%; }
.unir-descubrimiento--flor{ left: 38%; top: 13%; }
.unir-descubrimiento--fruto{ left: 63%; top: 43%; }
.unir-descubrimiento--semilla{ left: 72%; top: 68%; }
.unir-descubrimiento::after{ left: 50%; top: 100%; transform: translate(-50%,-1px); }
.unir-feedback{
  min-height: 1.6em;
  margin: 18px auto 0;
  color: #3d522d;
  font-weight: 750;
  text-align: center;
}
.unir-feedback[hidden]{ display: none; }

@media (max-width: 620px){
  .unir--botanica .unir-columnas{
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: calc(66.67% + 12px) 0 0;
    border-radius: 16px;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    box-shadow: none;
    overflow: visible;
  }
  .unir--botanica #unir-columna-der{ grid-column: 1; order: 1; padding: 0; }
  .unir--botanica #unir-columna-izq{
    grid-column: 1;
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  .unir--botanica .unir-funcion-activa{ min-height: 82px; padding: 12px; }
  .unir--botanica .unir-descubrimientos{
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .unir--botanica .unir-item{ font-size: .86rem; }
}

/* "Clasificar en categorías" (spec-motores-nuevos.md § 2.2). */
.clasificar-elementos{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  min-height: 48px;
}
.clasificar-chip{
  min-height: 44px; /* mínimo táctil WCAG */
  padding: 10px 20px;
  border: 2px solid var(--border);
  border-radius: 100px;
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border), 0 2px 6px rgba(80,50,120,0.06);
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.clasificar-chip:hover{
  border-color: var(--violeta);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 0 var(--violeta-dark), 0 8px 16px rgba(80,50,120,0.12);
}
.clasificar-chip:active{
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 0 var(--border);
}
.clasificar-chip.is-seleccionada{
  border-color: var(--celeste-dark);
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  color: #10394A; /* celeste de fondo contra blanco no llega a 3:1 (WCAG) — mismo tono oscuro que ya usan .grade-btn/.lab-cell--actual */
  box-shadow: 0 4px 0 var(--celeste-dark), 0 0 0 4px rgba(103,194,232,0.3);
  transform: translateY(-2px) scale(1.08);
}
.clasificar-chip.is-animating{ pointer-events: none; }
.clasificar-categorias{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.clasificar-categoria{
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FD 100%);
  min-height: 130px;
  box-shadow: 0 3px 0 var(--border);
  transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.clasificar-categoria.is-target{
  border-color: var(--celeste);
  border-style: solid;
  background: rgba(103,194,232,0.08);
  box-shadow: 0 4px 0 var(--celeste-dark), 0 0 0 4px rgba(103,194,232,0.2);
  transform: translateY(-2px);
}
.clasificar-categoria.is-error{ animation: shake .4s ease; border-color: var(--error); }
.clasificar-categoria__boton{
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--violeta), var(--violeta-dark));
  color: #fff;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--violeta-dark);
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease;
}
.clasificar-categoria__boton:hover{
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--violeta-dark);
}
.clasificar-categoria__boton:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--violeta-dark);
}

/* MOT-01: variante táctil "Mesa de exploración". Se activa por contenido. */
.clasificar--mesa .game-banner{ max-height: 150px; }
.clasificar--mesa .screen-help{
  width: fit-content;
  margin: 14px auto;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff7d6;
  color: #654b18;
  font-weight: 800;
  box-shadow: 0 3px 0 #e9c96c;
}
.clasificar--mesa .clasificar-elementos{
  justify-content: center;
  margin: 12px auto 18px;
}
.clasificar-animal-turno{
  display: grid;
  justify-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-width: min(100%, 280px);
  padding: 14px 28px 12px;
  border: 3px solid #9a632f;
  border-radius: 24px;
  background: linear-gradient(155deg, #fffdf7, #fff0c9);
  box-shadow: 0 7px 0 #70451f, 0 12px 24px rgba(82, 48, 21, .18);
  color: #513619;
}
.clasificar-animal-turno:hover{ border-color: #9a632f; box-shadow: 0 9px 0 #70451f, 0 14px 26px rgba(82,48,21,.2); }
.clasificar-animal-turno.is-seleccionada{
  border-color: #5e9b51;
  background: linear-gradient(155deg, #fffef8, #eaf8ce);
  color: #29461f;
  box-shadow: 0 7px 0 #3f7137, 0 0 0 5px rgba(126, 183, 91, .24);
}
.clasificar-animal-turno__rotulo{
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}
.clasificar-animal-turno__nombre{ font-size: clamp(1.6rem, 4vw, 2.35rem); line-height: 1.25; }
.clasificar-animal-turno__accion{ font-size: .78rem; font-weight: 700; opacity: .76; }
.clasificar--mesa .clasificar-categorias{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 20px);
  padding: clamp(12px, 2.5vw, 24px);
  border: 5px solid #89562c;
  border-radius: 28px;
  background: linear-gradient(100deg, #bf7d3e, #dca45e 45%, #b66e34);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), 0 8px 0 #68401f, 0 16px 30px rgba(77,43,18,.2);
}
.clasificar--mesa .clasificar-bandeja{
  min-height: 190px;
  padding: 12px;
  border: 4px solid rgba(82, 52, 26, .58);
  border-style: solid;
  border-radius: 22px;
  box-shadow: inset 0 4px 12px rgba(255,255,255,.45), 0 5px 0 rgba(78,47,23,.48);
  transform: none;
}
.clasificar--mesa .clasificar-bandeja--agua{ background: linear-gradient(#d9f6ff, #85d7ee); }
.clasificar--mesa .clasificar-bandeja--tierra{ background: linear-gradient(#eff9d0, #a8d374 62%, #8cbd5c); }
.clasificar--mesa .clasificar-bandeja--aire{ background: linear-gradient(#eaf7ff, #b9dff4); }
.clasificar--mesa .clasificar-bandeja.is-target{
  border-color: #fff;
  box-shadow: inset 0 4px 12px rgba(255,255,255,.6), 0 5px 0 rgba(78,47,23,.48), 0 0 0 5px #ffd75e;
}
.clasificar--mesa .clasificar-categoria__boton{
  min-height: 54px;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: #3d3428;
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 0 rgba(62,45,27,.28);
}
.clasificar--mesa .clasificar-categoria__boton[aria-disabled="true"]{ opacity: .62; cursor: default; }
.clasificar--mesa .clasificar-categoria__lista{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.clasificar--mesa .clasificar-categoria__lista li{
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 700;
}
.clasificar-acciones{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.clasificar-acciones[hidden]{ display: none; }
.clasificar-feedback{ min-height: 1.5em; margin: 0; font-weight: 750; color: #513619; }

@media (max-width: 620px){
  .clasificar--mesa .clasificar-categorias{ grid-template-columns: 1fr; }
  .clasificar--mesa .clasificar-bandeja{ min-height: 112px; }
  .clasificar-acciones{ align-items: stretch; flex-direction: column; }
}
.clasificar-categoria__boton.is-error{ animation: shake .4s; background: var(--error); }
.clasificar-categoria__lista{
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clasificar-categoria__lista li{
  background: linear-gradient(135deg, var(--verde), var(--verde-dark));
  color: #fff;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 700;
  box-shadow: 0 2px 0 var(--verde-dark);
  animation: dropIn .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dropIn{
  from{ transform: translateY(-20px) scale(0.8); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* MOT-01 v2: la ilustración es el tablero y cada frasco es un destino real. */
.clasificar--mesa .game-banner{ display: none; }
.clasificar--mesa .clasificar-categorias{
  box-sizing: border-box;
  aspect-ratio: 3 / 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4%;
  align-items: stretch;
  padding: 22% 4.2% 7%;
  border: 0;
  border-radius: 24px;
  background: url('../imagenes/clasificar/ciencias-desplazamiento-animales-2/tablero-v2.jpg') center / cover no-repeat;
  box-shadow: 0 10px 0 #70451f, 0 18px 34px rgba(77,43,18,.22);
  overflow: hidden;
}
.clasificar--mesa .clasificar-bandeja,
.clasificar--mesa .clasificar-bandeja.is-target{
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 5%;
  border: 3px solid transparent;
  border-radius: 18% / 12%;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.clasificar--mesa .clasificar-bandeja.is-target{
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px #ffd75e, inset 0 0 18px rgba(255,255,255,.5);
}
.clasificar--mesa .clasificar-bandeja:has(.clasificar-categoria__boton.is-error){
  border-color: var(--error);
  animation: shake .4s ease;
}
.clasificar--mesa .clasificar-categoria__boton{
  order: 2;
  min-height: 46px;
  padding: 7px 8px;
  font-size: clamp(.82rem, 2vw, 1.25rem);
  color: #3d3428;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 0 rgba(62,45,27,.3);
}
.clasificar--mesa .clasificar-categoria__lista{
  order: 1;
  flex: 1;
  align-content: center;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 7px;
  margin: 0;
}
.clasificar--mesa .clasificar-categoria__lista li{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.82);
  color: #3b3126;
  box-shadow: 0 2px 5px rgba(49,35,21,.18);
  font-size: clamp(.7rem, 1.3vw, .9rem);
}
.clasificar-animal-colocado__icono{ font-size: 1.35em; }

@media (max-width: 620px){
  .clasificar--mesa .clasificar-categorias{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.7%;
    padding: 22% 3.8% 6%;
    border-radius: 15px;
  }
  .clasificar--mesa .clasificar-bandeja{ min-height: 0; padding: 3px; border-width: 2px; }
  .clasificar--mesa .clasificar-bandeja.is-target{ box-shadow: 0 0 0 2px #ffd75e; }
  .clasificar--mesa .clasificar-categoria__boton{ min-height: 44px; padding: 4px 2px; font-size: .72rem; }
  .clasificar--mesa .clasificar-categoria__lista{ gap: 2px; }
  .clasificar--mesa .clasificar-categoria__lista li{ padding: 2px 3px; }
  .clasificar-animal-colocado__nombre{ display: none; }
}

/* "Ordenar pasos" (spec-motores-nuevos.md § 2.3): cada paso ya colocado se numera
   con una insignia circular (contador CSS) en vez del número nativo de lista. */
/* El tablero especializado reemplaza los controles clásicos, no los duplica. */
#screen-ordenar > [hidden]{ display: none !important; }
.motor-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:20px auto;max-width:850px}
.motor-actions > [hidden]{display:none!important}
.clasificar-categoria__boton{min-height:44px;min-width:44px}
.motor-feedback{flex-basis:100%;margin:0;padding:14px 18px;border:2px solid var(--violeta);border-radius:16px;background:#fffaf0;color:#49325c;text-align:center;font-weight:700;line-height:1.5}
.ordenar-item.needs-review,.formar-letra.needs-review{outline:3px solid #b85f19;outline-offset:3px;background:#fff2d4}
.ordenar-item.is-correct,.formar-letra.is-correct{background:#e4f4d9;border-color:#548539;opacity:1}
.ordenar-colocados{
  list-style: none;
  padding-left: 28px;
  min-height: 50px;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: paso;
}
.ordenar-colocados li{
  position: relative;
  padding-left: 0;
}
.ordenar-colocados li::before{
  content: counter(paso);
  counter-increment: paso;
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--naranja);
  color: var(--text); /* naranja de fondo contra blanco no llega a 3:1 (WCAG) — texto oscuro sí */
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(239,122,33,0.3);
}
.ordenar-item{
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 3px 0 var(--border);
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease, border-color .15s ease;
  margin-bottom: 8px;
  position: relative;
}
.ordenar-item:hover{
  border-color: var(--violeta);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--violeta-dark), 0 6px 14px rgba(80,50,120,0.10);
}
.ordenar-item:active{
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--border);
}
.ordenar-item.is-colocado{
  border-color: var(--violeta-dark);
  background: linear-gradient(135deg, var(--violeta), var(--violeta-dark));
  color: #fff;
  width: 100%;
  box-shadow: 0 4px 0 var(--violeta-dark), 0 6px 16px rgba(80,50,120,0.18);
  animation: popIn .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ordenar-colocados.is-error .ordenar-item{ animation: shake .4s; border-color: var(--error); }
.ordenar-disponibles{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* "Formar la palabra" (spec-motores-nuevos.md § 2.4): fichas de letras tocables. */
.formar-colocadas{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 68px;
  margin-bottom: 20px;
  padding: 12px;
  background: rgba(80,50,120,0.04);
  border-radius: var(--radius-md);
  border: 2px dashed var(--border);
  box-shadow: inset 0 2px 6px rgba(80,50,120,0.05);
}
.formar-disponibles{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.formar-letra{
  min-width: 52px;
  height: 52px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F0FB 100%);
  font-family: var(--font-main);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--violeta-dark);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--border), 0 4px 10px rgba(80,50,120,0.08);
  transition: transform .15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .15s ease, border-color .15s ease;
}
.formar-letra:hover{
  border-color: var(--violeta);
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 0 var(--violeta-dark), 0 8px 16px rgba(80,50,120,0.15);
}
.formar-letra:active{
  transform: translateY(2px) scale(0.96);
  box-shadow: 0 1px 0 var(--violeta-dark);
}
.formar-letra.is-colocada{
  border-color: var(--naranja-dark);
  background: linear-gradient(135deg, var(--naranja), var(--naranja-dark));
  color: var(--text); /* naranja de fondo contra blanco no llega a 3:1 (WCAG) — texto oscuro sí */
  box-shadow: 0 4px 0 var(--naranja-dark), 0 6px 14px rgba(239,122,33,0.22);
  animation: popIn .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.formar-colocadas.is-error .formar-letra{ animation: shake .4s; border-color: var(--error); }

/* "Sopa de letras" (spec-motores-nuevos.md § 2.5): lista de palabras a
   buscar arriba de la grilla, más la grilla misma como botones cuadrados
   uno por celda. Interacción "tocar-tocar" (PLAN.md § 1): tocar la primera
   letra y después la última de una palabra. */
#screen-sopa{
  max-width: 960px;
  /* Cada grado suma filas y columnas. El tablero acompaña ese crecimiento para
     conservar celdas cercanas a 48 px en escritorio, en vez de estirar todos
     los niveles a un cuadrado fijo de 620 px. */
  --sopa-grid-width: 464px;
  --sopa-content-width: 520px;
}
body[data-grado="1°"] #screen-sopa{ --sopa-grid-width: 412px; }
body[data-grado="3°"] #screen-sopa{ --sopa-grid-width: 516px; }
body[data-grado="4°"] #screen-sopa{ --sopa-grid-width: 568px; }
#screen-sopa .game-banner{
  max-width: var(--sopa-content-width);
  height: 96px;
  aspect-ratio: auto;
  margin-bottom: 12px;
}
#screen-sopa .game-banner__img{
  object-fit: cover;
}
#screen-sopa .progress-bar{
  max-width: var(--sopa-content-width);
  margin-inline: auto;
}
#screen-sopa .screen-help{
  margin-bottom: 12px;
}
.sopa-palabras{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: var(--sopa-content-width);
  margin: 0 auto 14px;
}
.sopa-palabra{
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 100px;
  background: var(--bg-card);
  font-family: var(--font-main);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .02em;
}
.sopa-palabra.is-encontrada{
  border-color: var(--verde-dark);
  background: linear-gradient(135deg, var(--verde), var(--verde-dark));
  color: #fff;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.sopa-grilla-wrap{
  overflow-x: auto;
  max-width: 100%;
}
.sopa-grilla{
  display: grid;
  width: min(100%, var(--sopa-grid-width));
  gap: clamp(2px, .35vw, 4px);
  justify-content: center;
  margin: 0 auto;
}
.sopa-cell{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(.85rem, 1.8vw, 1.2rem);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.sopa-cell:hover{ border-color: var(--violeta); transform: scale(1.08); }
.sopa-cell:active{ transform: scale(0.94); }
.sopa-cell.is-seleccionando{
  border-color: var(--celeste-dark);
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  color: #10394A; /* celeste de fondo contra blanco no llega a 3:1 (WCAG) — mismo tono oscuro que ya usan .grade-btn/.lab-cell--actual */
}
.sopa-cell.is-encontrada{
  border-color: var(--verde-dark);
  background: linear-gradient(135deg, var(--verde), var(--verde-dark));
  color: #fff;
  cursor: default;
}
.sopa-cell.is-error{ animation: shake .4s ease; border-color: var(--error); background: var(--error); color: #fff; }
.sopa-cell.is-preview{background:#ffe8a6;box-shadow:inset 0 0 0 2px #9b651a;color:#3d2b14;transform:none}
.sopa-cell:focus-visible{outline:3px solid #653587;outline-offset:1px;z-index:2}

/* ---------- ROMPECABEZAS (js/motor-rompecabezas.js, módulo propio 01/09/2026) ----------
   A diferencia de Sopa/Laberinto (grillas fijas NxN con celdas de texto), acá
   cada celda es un RECORTE de imagen y la grilla entera tiene que respetar
   el aspecto real de la imagen (nunca se recorta a cuadrado, PLAN.md) — el
   contenedor lleva `aspect-ratio` fijado en JS desde banco.ancho/banco.alto
   y las columnas/filas se reparten con `fr` vía las variables --rompe-cols/
   --rompe-rows (también seteadas en JS), así que esta hoja de estilos no
   necesita saber nada de ninguna imagen en particular. */
.rompe-referencia{
  max-width: 220px;
  margin: 0 auto 12px;
  text-align: center;
}
.rompe-referencia__label{
  font-family: var(--font-main);
  font-weight: 700;
  font-size: .85rem;
  color: var(--text-soft);
  margin: 0 0 6px;
}
.rompe-referencia__img{
  width: 100%;
  border-radius: 10px;
  border: 2px solid var(--border);
  display: block;
}
.rompe-grid-wrap{
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 4px;
}
.rompe-grid{
  display: grid;
  grid-template-columns: repeat(var(--rompe-cols), 1fr);
  grid-template-rows: repeat(var(--rompe-rows), 1fr);
  gap: 3px;
  width: min(92vw, 480px);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--border);
  background: var(--bg-card);
}
.rompe-pieza{
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: var(--bg-card);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.rompe-pieza:hover{ transform: scale(1.04); box-shadow: 0 0 0 2px var(--violeta) inset; z-index: 1; }
.rompe-pieza:active{ transform: scale(.96); }
.rompe-pieza.is-seleccionando{ box-shadow: 0 0 0 3px var(--celeste-dark) inset; filter: brightness(1.08); }
.rompe-pieza--correcta{ box-shadow: 0 0 0 2px var(--verde-dark) inset; }
.rompe-pieza--vacia{ background: var(--bg-card); cursor: default; box-shadow: inset 0 0 0 2px var(--border); }
.rompe-pieza--vacia:hover{ transform: none; box-shadow: inset 0 0 0 2px var(--border); }

@media (min-width: 768px){
  .rompe-grid{ width: min(70vw, 560px); }
}

/* ---------- GALERÍA DE ILUSTRACIONES — Cover Flow (js/motor-galeria.js) ----------
   Sin filtros/secciones a propósito (sacados el 02/09/2026 por pedido
   explícito: "termina siendo muy incómodo y repetitivo") — un solo
   carrusel con las 134 ilustraciones activas, más grande que la primera
   versión, con lupa (agrandar) y pantalla completa con pase automático. */
.galeria-coverflow{
  position: relative; height: min(72vw, 340px); margin: 14px 0 8px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1300px; touch-action: pan-y; user-select: none;
}
.galeria-cover{
  position: absolute; width: min(52vw, 240px); height: min(52vw, 240px); border-radius: 14px;
  box-shadow: 0 14px 30px rgba(50,30,70,0.28);
  border: 4px solid #fff; overflow: hidden; background: var(--bg-card);
  /* .6s (no .3s): con 134 piezas siempre en el DOM y una geometría continua
     (motor-galeria.js), CUALQUIER cambio de índice — flecha, swipe, o un
     salto grande al azar en el pase automático — tiene que sentirse como
     un deslizamiento, nunca un corte (pedido explícito 02/09/2026). */
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease;
  -webkit-box-reflect: below 3px linear-gradient(transparent, transparent 55%, rgba(255,255,255,.4));
  cursor: grab;
}
.galeria-cover img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; pointer-events: none; }
.galeria-cover--centro{ cursor: zoom-in; }

/* Pantalla completa (pedido 02/09/2026: "que quede solo el carrusel") — el
   navegador ya llena la pantalla solo al fullscreenear #screen-galeria
   puntual (el header/nav global quedan afuera del elemento); acá además se
   ocultan el resto de los hijos (header propio, caption, botones) para que
   sobreviva ÚNICAMENTE el carrusel, centrado y más grande. Salir es Esc (o
   el gesto nativo del navegador) — no hay botón visible a propósito. */
#screen-galeria:fullscreen{
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); max-width: none; height: 100vh; padding: 0;
}
#screen-galeria:fullscreen > *:not(.galeria-coverflow){ display: none; }
#screen-galeria:fullscreen .galeria-coverflow{ height: 82vh; margin: 0; width: 100%; }
/* Sin tope en píxeles a propósito (pedido 02/09/2026: que se ajuste al
   tamaño real de la pantalla, no quedarse chico en un proyector/TV
   grande) — la pieza crece con la pantalla; js/app.js mide este ancho real
   del DOM (offsetWidth) para que motor-galeria.js escale la SEPARACIÓN
   entre piezas al mismo ritmo (ver estiloPieza). */
#screen-galeria:fullscreen .galeria-cover{ width: 50vh; height: 50vh; }
#btn-galeria-fullscreen[aria-pressed="true"]{ background: var(--verde); color: #fff; box-shadow: 0 4px 0 var(--verde-dark); }

.galeria-nav-row{ display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
.galeria-nav-btn{
  width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border);
  box-shadow: 0 3px 0 var(--border); font-size: 1.2rem; color: var(--violeta-dark); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.galeria-nav-btn:hover:not(:disabled){ border-color: var(--violeta); transform: translateY(-2px); }
.galeria-nav-btn:disabled{ opacity: .4; }
.galeria-caption{ text-align: center; min-width: 0; }
.galeria-caption__title{ font-family: var(--font-main); font-weight: 700; font-size: 1.05rem; color: var(--violeta-dark); margin: 0; }
.galeria-caption__meta{ font-size: .78rem; color: var(--text-soft); margin-top: 2px; }
.galeria-actions{ display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.galeria-actions .btn{ padding: 10px 16px; font-size: .85rem; min-height: 40px; }
.galeria-actions .btn.is-favorita{
  color: #fff; background: linear-gradient(135deg, #F27C9E, #E1547B); border-color: #C43D66; box-shadow: 0 4px 0 #C43D66;
}
.galeria-vacio{ text-align: center; color: var(--text-soft); padding: 40px 0; }

.quiz-card__options{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.quiz-option{
  text-align: left;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border);
  background: #FFFFFF;
  font-weight: 600;
  font-size: 1.05rem;
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 0 var(--border);
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .18s ease, border-color .18s ease, background .15s ease;
  position: relative;
  overflow: hidden;
}
.quiz-option::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: transparent;
  transition: background .15s ease;
}
.quiz-option:hover:not(:disabled){
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 6px 0 var(--violeta-dark), 0 8px 22px rgba(80,50,120,0.12);
  border-color: var(--violeta);
}
.quiz-option:hover:not(:disabled)::before{ background: var(--violeta); }
.quiz-option:active:not(:disabled){
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 1px 0 var(--border);
}
.quiz-option.is-correct{
  border-color: var(--success);
  background: #E4F7EC;
  color: var(--verde-dark);
  box-shadow: 0 4px 0 var(--verde-dark), 0 6px 16px rgba(25,163,91,0.2);
  transform: scale(1.02);
}
.quiz-option.is-correct::before{ background: var(--success); }
.quiz-option.is-wrong{
  border-color: var(--error);
  background: #FDEBEB;
  color: var(--error);
  box-shadow: 0 3px 0 #C93434;
  animation: shake .5s ease;
}
.quiz-option.is-wrong::before{ background: var(--error); }
.quiz-option.is-dim{ opacity: .45; }

/* ---------- BANCO DE ENERGÍA DE LA FELICIDAD (js/motor-baterias-emociones.js) ----------
   Tablero de 10 baterías + pantalla de dilema. Las respuestas del dilema
   reusan .quiz-card__options/.quiz-option de arriba, mismo lenguaje visual
   que el resto de los cuestionarios — solo se suma el "medidor" de pila. */
.baterias-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.bateria-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: #FFFFFF;
  box-shadow: 0 3px 0 var(--border);
  font-family: var(--font-main);
  transition: transform .18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .18s ease, border-color .18s ease;
}
.bateria-card:hover{
  transform: translateY(-3px) scale(1.02);
  border-color: var(--bateria-color, var(--violeta));
  box-shadow: 0 6px 0 var(--bateria-color, var(--violeta-dark)), 0 8px 20px rgba(80,50,120,0.12);
}
.bateria-card:active{ transform: translateY(2px) scale(.98); }
.bateria-card__icono{ font-size: 2rem; line-height: 1; }
.bateria-card__nombre{ font-weight: 700; text-align: center; font-size: .92rem; line-height: 1.2; }
.bateria-card__estado{ font-size: .8rem; color: var(--text-soft); font-weight: 600; }
.bateria-card.is-completa{ border-color: var(--bateria-color, var(--verde)); background: linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%); }
.bateria-card.is-completa .bateria-card__estado{ color: var(--bateria-color, var(--verde-dark)); font-weight: 700; }

.bateria-medidor, .bateria-mini{
  display: flex;
  gap: 3px;
  padding: 4px 5px;
  border: 2px solid var(--bateria-color, var(--border));
  border-radius: 6px;
  position: relative;
}
/* "Ficha" arriba a la izquierda del medidor, como una pila real. */
.bateria-medidor::before, .bateria-mini::before{
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 5px;
  background: var(--bateria-color, var(--border));
  border-radius: 2px 2px 0 0;
}
.bateria-medidor{ width: 100px; height: 20px; margin-top: 4px; }
.bateria-mini{ width: 170px; height: 28px; margin: 0 auto 18px; }
.bateria-segmento{
  flex: 1;
  border-radius: 2px;
  background: var(--bg);
  transition: background .25s ease;
}
.bateria-segmento.is-cargado{
  background: var(--bateria-color, var(--verde));
  animation: bateria-cargar .35s ease;
}
@keyframes bateria-cargar{
  0%{ transform: scaleY(.4); opacity: .3; }
  60%{ transform: scaleY(1.2); }
  100%{ transform: scaleY(1); opacity: 1; }
}

/* Cuestionario por imagen (cuentos auditivos en inglés, spec-motores-nuevos.md
   § 8.3): se toca una imagen en vez de leerse un texto. */
.quiz-card__options.quiz-card__options--imagen{
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 14px;
}
.quiz-option--imagen{
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 14px;
  min-height: 120px;
  gap: 8px;
}
.quiz-option__emoji{ font-size: 3rem; line-height: 1; }
.quiz-option__img{
  max-width: 100%;
  max-height: 96px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: none; /* se muestra por JS solo si la imagen carga OK, ver cargarImagenConRespaldo */
}

.quiz-card__feedback{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-align: center;
  font-size: 1rem;
  transition: all .3s ease;
}
.quiz-card__feedback.is-correct{ background: #E4F7EC; color: var(--verde-dark); }
.quiz-card__feedback.is-wrong{ background: #FDEBEB; color: var(--error); }

.quiz-card__hint{
  margin-top: 12px;
  padding: 10px 14px;
  background: #FFF7E6;
  border: 2px dashed var(--naranja);
  border-radius: var(--radius-sm);
  color: var(--naranja-dark);
  font-weight: 600;
}

.quiz-card__controls{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px;
}

/* Fase 3.1 · Preguntas: la portada deja de ser un banner separado y pasa a
   ser el escenario. En móvil la pregunta continúa debajo de la imagen dentro
   del mismo marco; desde tablet usa la bandeja translúcida aprobada. */
#screen-quiz .quiz-stage{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--violeta-dark);
  border: 3px solid #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
#screen-quiz .game-banner{
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
#screen-quiz .game-banner__img{
  object-fit: cover;
  object-position: center;
}
#screen-quiz .game-banner__label{
  top: 12px;
  bottom: auto;
  padding: 8px 12px;
  color: var(--violeta-dark);
  font-size: .78rem;
  text-shadow: none;
  background: rgba(255,255,255,.92);
  border: 1px solid #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
#screen-quiz .game-banner::after{
  background: linear-gradient(180deg, transparent 62%, rgba(35,18,48,.18) 100%);
}
#screen-quiz .quiz-card{
  width: 100%;
  margin: 0;
  padding: 18px 14px 16px;
  background: rgba(255,253,247,.96);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
#screen-quiz .quiz-card::before{ display: none; }
#screen-quiz .quiz-card__prompt{ min-width: 0; }
#screen-quiz .quiz-card__count{
  color: var(--violeta-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#screen-quiz .quiz-card__question{
  margin-bottom: 18px;
  color: #351346;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
}
#screen-quiz .quiz-option{
  color: #351b42;
  background: #fffdf9;
}
.quiz-option.is-tried{
  color: #7e5328;
  background: #fff4df;
  border-color: #e8a84e;
  box-shadow: 0 3px 0 #cf8a34;
  opacity: 1;
}
.quiz-option.is-tried::before{ background: #e8a84e; }
.quiz-card__feedback.is-retry{
  color: #68471f;
  background: #fff2ce;
  border: 2px solid #edbd55;
}
.quiz-card__feedback.is-explain{
  color: #225a3d;
  background: #e7f8ec;
  border: 2px solid #73c994;
}

@media (min-width: 768px){
  #screen-quiz .quiz-stage{
    min-height: 610px;
    display: flex;
    align-items: flex-end;
    padding: 24px;
  }
  #screen-quiz .game-banner{
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: inherit;
  }
  #screen-quiz .quiz-card{
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(250px,.82fr) minmax(360px,1.18fr);
    column-gap: 22px;
    row-gap: 0;
    padding: 18px 20px;
    background: linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,249,236,.3));
    border: 2px solid rgba(255,255,255,.78);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 34px rgba(30,15,40,.28);
    backdrop-filter: blur(4px) saturate(1.04);
  }
  #screen-quiz .quiz-card__prompt{
    grid-column: 1;
    align-self: center;
  }
  #screen-quiz .quiz-card__options{
    grid-column: 2;
    align-self: center;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  #screen-quiz .quiz-card__feedback,
  #screen-quiz .quiz-card__hint,
  #screen-quiz .quiz-card__controls{ grid-column: 1 / -1; }
  #screen-quiz .quiz-card__question{
    margin-bottom: 0;
    font-size: clamp(1.45rem,2.4vw,1.95rem);
    text-shadow: 0 1px 0 rgba(255,255,255,.95),0 0 8px rgba(255,255,255,.72);
  }
  #screen-quiz .quiz-card__count{
    text-shadow: 0 1px 0 rgba(255,255,255,.95);
  }
  #screen-quiz .quiz-card__controls{ margin-top: 14px; }
}

/* ---------- 9b. RULETA DE PREGUNTAS (spec-motores-nuevos.md § 4) ----------
   Los gajos son <div> "radio" (spoke): del centro al borde, rotados por JS a su
   ángulo. El contenido (ícono + nombre) se ancla a un % fijo dentro del gajo —
   así el radio de la etiqueta escala solo con el tamaño del disco (ver
   .ruleta-disco), sin necesitar recalcular píxeles por JS en cada breakpoint.
   A propósito NO se contra-rota (ver renderizarDiscoRuleta() en app.js): queda
   inclinada como en una ruleta real, y la única que termina perfectamente
   vertical al frenar el giro es la del gajo ganador. */
#ruleta-config .module-grid{ margin-bottom: 4px; }
.ruleta-modo-picker, .ruleta-equipos-picker{ grid-template-columns: repeat(2, 1fr); }
#ruleta-equipos-picker{ grid-template-columns: repeat(3, 1fr); }

.ruleta-wrap{
  position: relative;
  /* Tamaño de respaldo antes de min(): si el navegador no soporta min()
     (WebView viejo en algunos celulares) esta línea es la que queda vigente
     en vez de colapsar a 0 de alto. aspect-ratio 1/1 es la garantía real de
     que nunca se vea "rectangular" — ver Sugerencias web.docx. */
  width: 280px;
  height: 280px;
  width: min(320px, 82vw);
  height: min(320px, 82vw);
  aspect-ratio: 1 / 1;
  margin: 8px auto 18px;
}
.ruleta-puntero{
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.ruleta-disco{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid var(--bg-card);
  box-shadow: var(--shadow), 0 0 0 3px var(--border);
  overflow: hidden;
  transition: transform 4.2s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.ruleta-gajo{
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 50%;
  transform-origin: 50% 100%;
}
.ruleta-gajo__contenido{
  position: absolute;
  top: 38%; left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 84px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ruleta-gajo__icono{ font-size: 1.5rem; line-height: 1; }
.ruleta-gajo__nombre{ font-size: clamp(.75rem, 2vw, .85rem); font-weight: 700; line-height: 1.15; }

#btn-ruleta-girar:disabled{ opacity: .6; }

.ruleta-turno{
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.ruleta-tablero{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}
.ruleta-equipo-card{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 3px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: all .2s ease;
}
.ruleta-equipo-card.is-turno{
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06), var(--shadow);
}
.ruleta-equipo-card__puntos{
  font-size: 1.1rem;
  font-weight: 800;
}

.ruleta-cierre{
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  box-shadow: var(--shadow);
  margin-top: 12px;
}
.ruleta-cierre h3{ font-size: 1.4rem; margin-bottom: 12px; }
.ruleta-cierre-botones{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}

@media (min-width: 768px){
  .ruleta-wrap{ width: 380px; height: 380px; aspect-ratio: 1 / 1; }
}

/* ---------- 9c. DIAGRAMA INTERACTIVO (spec-motores-nuevos.md § 11) ---------- */
.diagrama-wrap{
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  margin: 0 auto 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
  /* El scroll normal de la página queda "atrapado" acá — girar la rueda explora el
     video en vez de bajar la pantalla (mismo criterio que un visor de imágenes). */
  touch-action: none;
  cursor: ns-resize;
}
.diagrama-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* la interacción es del contenedor (rueda/arrastre), no del video */
}
.diagrama-etiqueta{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: rgba(54, 42, 68, 0.82);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* ---------- 9d. LABORATORIO INTERACTIVO (spec-motores-nuevos.md § 12) ---------- */
.laboratorio-escena{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 16px;
  margin-bottom: 18px;
}
.laboratorio-planta{
  min-height: 264px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.laboratorio-planta svg{ transition: all .35s ease; }
.laboratorio-feedback{
  font-weight: 700;
  color: var(--violeta-dark);
  text-align: center;
  margin: 0;
  min-height: 1.4em;
}

.laboratorio-controles{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0 auto;
}
.laboratorio-control label{
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
}
.laboratorio-control__valor{ color: var(--text-soft); }
.laboratorio-control input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.laboratorio-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--slider-color, var(--violeta));
  border: 4px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.laboratorio-control input[type=range]::-moz-range-thumb{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--slider-color, var(--violeta));
  border: 4px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

/* ---------- 9e. PROGRAMÁ EL AUTO (spec-motores-nuevos.md § 13, v2: obstáculos/
   coleccionables/charcos/laberinto) ----------
   Reusa .lab-grid/.lab-cell tal cual (misma grilla que el Laberinto lógico);
   .lab-cell--actual/--meta ya existían y significan lo mismo acá. Los
   modificadores nuevos siguen el mismo lenguaje visual (degradado + borde +
   box-shadow 3D) que ya usa el resto de la app para "tipos de celda". */
.lab-cell--camino{
  background: #EAF6FC;
  border-color: var(--celeste);
}
.lab-cell--obstaculo{
  background: linear-gradient(135deg, #C9BEB0, #A69884);
  border-color: #8B7A63;
}
.lab-cell--coleccionable{
  background: linear-gradient(135deg, #FFEFC2, #FFD873);
  border-color: #E8B93C;
  font-size: 1.1rem;
}
.lab-cell--coleccionable::before{ content: '⭐'; }
.lab-cell--charco{
  background: linear-gradient(135deg, #BEE7F5, var(--celeste));
  border-color: var(--celeste-dark);
  font-size: 1.1rem;
}
.lab-cell--charco::before{ content: '💧'; }

.circuito-programa{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  background: var(--bg-card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 14px;
}
.circuito-programa:empty::before{
  content: 'Tocá las cartas de abajo para armar el programa acá.';
  color: var(--text-soft);
  font-size: .9rem;
}
.circuito-programa__chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 1.3rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--celeste), var(--celeste-dark));
  color: #10394A;
  box-shadow: 0 3px 0 var(--celeste-dark);
  cursor: pointer;
}
.circuito-programa__chip:active{ transform: translateY(2px); box-shadow: 0 1px 0 var(--celeste-dark); }
.circuito-programa__chip:disabled{ cursor: not-allowed; opacity: .7; }
.circuito-programa__chip svg{ width: 20px; height: 20px; display: block; }

.circuito-cartas, .circuito-controles{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}

/* Ícono grande + palabra chica de refuerzo, no de requisito (ver el comentario
   en index.html junto a estos botones). El color en izquierda/derecha ayuda a
   distinguirlas por forma sin necesidad de leer "izquierda"/"derecha". */
.circuito-carta{
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  min-width: 78px;
}
.circuito-carta__icono{ font-size: 1.8rem; line-height: 1; display: flex; }
.circuito-carta__icono svg{ display: block; }
.circuito-carta__texto{ font-size: .68rem; font-weight: 700; opacity: .75; }
.circuito-carta--izquierda .circuito-carta__icono{ color: var(--violeta); }
.circuito-carta--derecha .circuito-carta__icono{ color: var(--naranja); }
.circuito-carta--giro180 .circuito-carta__icono{ color: var(--error); }

/* ---------- 9f. MÉTODO CIENTÍFICO (spec-metodo-cientifico.md) ----------
   Mismo criterio de sliders grandes que 9d (Laboratorio) — reusa el thumb de
   32px pensado para dedos, no mouse fino, acá bajo .mc-control en vez de
   .laboratorio-control para no acoplar los dos motores entre sí. */
.mc-estado{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.mc-pasos{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 620px;
  margin: 4px auto 14px;
  padding: 0;
  position: relative;
}
.mc-pasos::before{
  content: '';
  position: absolute;
  height: 4px;
  left: 12%; right: 12%; top: 17px;
  border-radius: 4px;
  background: #DCE7EC;
}
.mc-paso{ position: relative; z-index: 1; text-align: center; color: #72828B; font-size: .76rem; }
.mc-paso span{
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #E8F0F3;
  border: 3px solid #fff;
  box-shadow: 0 2px 7px rgba(32, 75, 92, .16);
  font-weight: 800;
}
.mc-paso strong{ display: block; }
.mc-paso.is-activo{ color: #11667C; }
.mc-paso.is-activo span{ background: var(--celeste); color: #10394A; transform: scale(1.1); }
.mc-paso.is-hecho span{ background: var(--verde); color: #fff; }
.mc-chip{
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  font-size: .9rem;
  color: var(--violeta-dark);
}
.mc-mision{
  max-width: 620px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #69468A, #9568B5);
  box-shadow: 0 7px 0 #4D3268, 0 12px 24px rgba(77, 50, 104, .18);
}
.mc-mision__icono{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: rgba(255,255,255,.18); font-size: 1.8rem; }
.mc-mision__eyebrow{ margin: 0 0 1px; font-size: .65rem; letter-spacing: .15em; font-weight: 800; opacity: .78; }
.mc-mision h3{ margin: 0; font-size: 1.2rem; color: #fff; }
.mc-mision p:last-child{ margin: 2px 0 0; font-size: .86rem; line-height: 1.3; color: #fff; }
.mc-escena{
  background: linear-gradient(145deg, #245267, #173849);
  border-radius: 26px;
  box-shadow: 0 10px 0 #102C39, 0 18px 35px rgba(21, 57, 73, .22);
  border: 4px solid #fff;
  padding: 12px 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.mc-escena__cartel{ color: #DDF8FF; font-size: .7rem; letter-spacing: .11em; padding: 0 8px 8px; display: flex; gap: 8px; align-items: center; }
.mc-escena__luz{ width: 9px; height: 9px; border-radius: 50%; background: #68E6A1; box-shadow: 0 0 10px #68E6A1; }
.mc-canvas{
  display: flex;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: #F8E8C8 url('../imagenes/metodo-cientifico/rampa-pelota/escenario-taller.webp') center center / cover no-repeat;
}
.mc-canvas canvas{ border-radius: 16px; max-width: 100%; height: auto !important; display: block; }

.mc-prediccion{ text-align: center; margin: 18px auto 14px; max-width: 620px; }
.mc-prediccion__pregunta{ font-weight: 800; font-size: 1.08rem; margin-bottom: 10px; color: var(--violeta-dark); }
.mc-prediccion__opciones{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mc-prediccion__opcion.is-elegida{
  background: var(--celeste);
  color: #10394A;
  border-color: var(--celeste-dark);
  box-shadow: 0 5px 0 #318BAB;
  transform: translateY(-2px);
}

.mc-mesa{
  max-width: 620px;
  margin: 0 auto 16px;
  padding: 15px 18px 18px;
  border: 2px solid #BDE5F2;
  border-radius: 20px;
  background: linear-gradient(180deg, #F7FDFF, #EAF7FB);
  box-shadow: 0 7px 0 #CDE6EE;
}
.mc-mesa__titulo{ display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; margin-bottom: 14px; color: #174E63; }
.mc-mesa__titulo span{ grid-row: 1 / 3; font-size: 1.7rem; }
.mc-mesa__titulo small{ color: #63808C; font-weight: 600; }

.mc-controles{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
  margin: 0;
}
.mc-control label{ display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 8px; }
.mc-control__valor{ color: var(--text-soft); }
.mc-control__ajuste{ display: grid; grid-template-columns: 46px 1fr 46px; gap: 10px; align-items: center; }
.mc-control__paso{
  width: 46px; height: 42px;
  border: 2px solid #fff;
  border-radius: 13px;
  background: #fff;
  color: #69468A;
  font: 800 1.5rem/1 'Fredoka', sans-serif;
  box-shadow: 0 5px 0 #C9DDE5, 0 7px 12px rgba(38, 85, 102, .12);
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.mc-control__paso:active{ transform: translateY(4px); box-shadow: 0 1px 0 #C9DDE5; }
.mc-control input[type=range]{
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}
.mc-control input[type=range]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--celeste);
  border: 4px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.mc-control input[type=range]::-moz-range-thumb{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--celeste);
  border: 4px solid #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.mc-acciones{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.mc-feedback{ text-align: center; font-weight: 800; color: var(--violeta-dark); min-height: 1.4em; max-width: 620px; margin: 12px auto; padding: 0 8px; }
.mc-btn-siguiente{ animation: popIn .35s cubic-bezier(.34,1.56,.64,1); }
.mc-btn-siguiente[hidden]{ display: none; }

@media (max-width: 480px){
  .mc-paso strong{ font-size: .68rem; }
  .mc-pasos::before{ left: 11%; right: 11%; }
  .mc-escena{ margin-left: -8px; margin-right: -8px; padding: 8px; border-width: 3px; }
  .mc-mesa{ padding: 13px 14px 16px; }
}

@media (prefers-reduced-motion: reduce){
  .mc-paso.is-activo span{ transform: none; }
}

.mc-nudge{
  background: var(--bg-card);
  border: 2px dashed var(--celeste);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  margin: 10px 0;
}
.mc-nudge p{ margin: 0 0 8px; font-weight: 700; }

/* Cuadernito: panel superpuesto (spec § 6), no una pantalla aparte.
   [hidden] del navegador NO es !important — un display:flex de acá le gana
   en la cascada si no se lo neutraliza a mano (mismo gotcha ya documentado
   arriba para .screen[hidden]/.modal[hidden]/.mascot-widget[hidden]). */
.mc-cuadernito{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.mc-cuadernito[hidden]{ display: none; }
.mc-cuadernito__card{
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
.mc-cuadernito__header{ display: flex; justify-content: space-between; align-items: center; }
.mc-cuadernito__vacio{ color: var(--text-soft); font-style: italic; }

/* ---------- 10. VICTORIA / CONFETTI ---------- */
#screen-victory{ position: relative; overflow: hidden; min-height: calc(100vh - var(--header-h)); }
.confetti-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece{
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  opacity: .9;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
@keyframes confetti-fall{
  to{ transform: translateY(110vh) rotate(600deg); opacity: .3; }
}

.victory-card{
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 40px auto;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px 28px;
  text-align: center;
  animation: popIn .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#victory-title{ font-size: 1.8rem; color: var(--naranja); }
.victory-story{ color: var(--violeta-dark); font-weight: 700; margin-top: 6px; }
.victory-stars{
  font-size: 2.6rem;
  margin: 20px 0 10px;
  letter-spacing: 6px;
  animation: stars-bounce .6s ease .3s both;
}
@keyframes stars-bounce{
  0%{transform: scale(0)}
  60%{transform: scale(1.2)}
  100%{transform: scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .confetti-piece,
  .ek-sparkle-particle,
  .victory-card,
  .victory-stars,
  .is-shaking,
  .mc-btn-siguiente{
    animation: none !important;
  }
  .module-card,
  .module-card__narrar,
  .story-card,
  .story-card__narrar,
  .btn{
    transition: none !important;
  }
  .module-card:hover,
  .module-card__narrar:hover,
  .module-card__narrar:focus-visible,
  .story-card:hover,
  .story-card__narrar:hover,
  .story-card__narrar:focus-visible{
    transform: none;
  }
}
.victory-score{ color: var(--text-soft); font-weight: 700; margin-bottom: 20px; }
.victory-learning{
  margin: 14px 0 18px;
  padding: 16px;
  border: 2px solid #afd08d;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #f5fbe9, #edf8e4);
}
.victory-learning[hidden], .victory-recap[hidden]{ display: none; }
.victory-learning__progress{ margin: 0; color: #31652d; font-size: 1.12rem; font-weight: 850; }
.victory-learning__attempts{ margin: 5px 0 0; color: var(--text-soft); font-weight: 650; }
.victory-recap{
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 8px 14px;
  border: 2px solid #d8c9e8;
  border-radius: 999px;
  background: #faf7fd;
  color: var(--violeta-dark);
  font-weight: 750;
}
.victory-racha{ color: var(--naranja-dark); font-weight: 800; margin-top: -12px; margin-bottom: 20px; }
.victory-actions{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.victory-actions .btn{ width: 100%; min-width: 0; }

/* ---------- 11. CERTIFICADO ---------- */
.certificate{ display: flex; justify-content: center; padding: 10px 0 40px; }
.certificate__border{
  width: 100%;
  max-width: 720px;
  border: 6px double var(--violeta);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(103,194,232,.12), transparent 55%),
    radial-gradient(circle at bottom right, rgba(239,122,33,.12), transparent 55%),
    #fff;
}
.certificate__logo{ height: 76px; width: 76px; margin: 0 auto 8px; object-fit: contain; }
.certificate__eyebrow{ color: var(--text-soft); font-size: .85rem; margin-bottom: 6px; }
.certificate__title{
  font-size: 2.2rem;
  letter-spacing: 3px;
  color: var(--violeta-dark);
  margin-bottom: 18px;
}
.certificate__line{ color: var(--text-soft); margin-top: 10px; }
.certificate__name{
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--naranja);
  margin: 6px 0;
}
.certificate__story{
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--verde-dark);
  margin: 6px 0 18px;
}
.certificate__details{
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.certificate__label{ display: block; font-size: .8rem; color: var(--text-soft); }
.certificate__value{ display: block; font-size: 1.1rem; font-weight: 700; color: var(--violeta-dark); }
.certificate__stars{ margin-top: 18px; font-size: 1.6rem; letter-spacing: 3px; color: var(--naranja); }

/* ---------- 13. FOOTER ---------- */
.app-footer{
  text-align: center;
  padding: 18px;
  color: var(--text-soft);
  font-size: .8rem;
}
.btn--test-audio{ margin: 10px auto 0; }
.app-footer__test-result{
  max-width: 420px;
  margin: 10px auto 0;
  font-size: .82rem;
  color: var(--violeta-dark);
  font-weight: 600;
}

/* ---------- 14. ANIMACIONES ---------- */
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes popIn{ from{ opacity: 0; transform: scale(.85); } to{ opacity: 1; transform: scale(1); } }
@keyframes shake{ 10%,90%{ transform: translateX(-2px); } 20%,80%{ transform: translateX(4px); } 30%,50%,70%{ transform: translateX(-8px); } 40%,60%{ transform: translateX(8px); } }
.is-shaking{ animation: shake .5s; }

/* ---------- 14b. AVISO DE NARRACIÓN (voice-toast) ---------- */
.voice-toast{
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  max-width: 380px;
  margin-left: auto;
  background: #fff;
  border: 2px solid var(--naranja);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 16px 40px 16px 16px;
  z-index: 200;
  animation: popIn .3s ease;
}
.voice-toast p{ font-size: .88rem; color: var(--text); margin-top: 6px; }
.voice-toast p:first-child{ margin-top: 0; }
.voice-toast__hint{ color: var(--text-soft); }
.voice-toast code{ background: var(--border); padding: 1px 5px; border-radius: 4px; }
.voice-toast__close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  font-weight: 700;
}

/* ---------- 14b. MASCOTA GUÍA ACOMPAÑANTE Y ESTADOS REACTIVOS ---------- */
.mascot-widget{
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 2px solid var(--violeta);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  margin: 0 auto 20px;
  max-width: min(640px, calc(100% - 24px));
  box-shadow: 0 6px 0 var(--border), var(--shadow-sm);
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .3s ease, box-shadow .3s ease;
  animation: popIn .3s ease;
  position: relative;
}
.mascot-widget[hidden]{ display: none; }
.mascot-widget__img{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
  background: #F1EBF8;
  padding: 4px;
  flex-shrink: 0;
  border: 2px solid #E2D4F0;
  animation: bounceSoft 2.8s infinite ease-in-out;
  transition: transform .3s ease;
}
.mascot-widget__bubble{
  font-size: .98rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
  position: relative;
  background: #FAF7FD;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.mascot-widget__bubble::before{
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid #FAF7FD;
}

/* Estados emocionales de la mascota */
.mascot-widget--festejando{
  border-color: var(--verde);
  box-shadow: 0 8px 0 var(--verde-dark), 0 10px 24px rgba(25, 163, 91, 0.25);
  transform: translateY(-4px) scale(1.02);
}
.mascot-widget--festejando .mascot-widget__img{
  animation: mascotCelebrate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
  border-color: var(--verde);
}
.mascot-widget--alentando{
  border-color: var(--naranja);
  box-shadow: 0 8px 0 var(--naranja-dark), 0 10px 24px rgba(239, 122, 33, 0.25);
  animation: mascotEncourage 0.5s ease;
}
.mascot-widget--alentando .mascot-widget__img{
  border-color: var(--naranja);
}
.mascot-widget--pensando .mascot-widget__img{
  animation: mascotThink 2.2s infinite ease-in-out;
}

@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes mascotCelebrate {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-12px) scale(1.15) rotate(8deg); }
}
@keyframes mascotEncourage {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  75% { transform: translateX(4px) rotate(3deg); }
}
@keyframes mascotThink {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.06); }
}

/* ---------- 14f. PARTÍCULAS DE DESTELLO LÚDICO (JUICE) ---------- */
.ek-sparkle-container{
  pointer-events: none;
}
.ek-sparkle-particle{
  position: absolute;
  font-size: 1.35rem;
  line-height: 1;
  user-select: none;
  animation: sparkle-fly 0.75s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes sparkle-fly{
  0%{
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
    opacity: 1;
  }
  60%{
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.35) rotate(180deg);
    opacity: 1;
  }
  100%{
    transform: translate(calc(-50% + var(--dx, 0px) * 1.25), calc(-50% + var(--dy, 0px) * 1.25)) scale(0.4) rotate(360deg);
    opacity: 0;
  }
}

/* ---------- 14g. AMBIENTACIÓN TEMÁTICA SEGÚN MATERIA ---------- */
body[data-modulo="matematica"]{
  background:
    radial-gradient(circle at 12% 18%, rgba(239, 122, 33, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(103, 194, 232, 0.12) 0%, transparent 45%),
    var(--bg);
}
body[data-modulo="ciencias"]{
  background:
    radial-gradient(circle at 15% 15%, rgba(25, 163, 91, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(103, 194, 232, 0.12) 0%, transparent 45%),
    var(--bg);
}
body[data-modulo="ingles"]{
  background:
    radial-gradient(circle at 10% 20%, rgba(103, 194, 232, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 90% 75%, rgba(155, 113, 184, 0.12) 0%, transparent 45%),
    var(--bg);
}
body[data-modulo="lengua"]{
  background:
    radial-gradient(circle at 12% 22%, rgba(155, 113, 184, 0.15) 0%, transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(239, 122, 33, 0.10) 0%, transparent 45%),
    var(--bg);
}
body[data-modulo="emociones"]{
  background:
    radial-gradient(circle at 15% 20%, rgba(239, 122, 33, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, rgba(155, 113, 184, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(103, 194, 232, 0.12) 0%, transparent 40%),
    var(--bg);
}
body[data-modulo="logica"]{
  background:
    radial-gradient(circle at 10% 25%, rgba(155, 113, 184, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(25, 163, 91, 0.12) 0%, transparent 45%),
    var(--bg);
}

/* ---------- 14c. MODAL Y TIP PARA PADRES ---------- */
.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal[hidden]{ display: none; }
.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(54, 42, 68, 0.55);
  backdrop-filter: blur(4px);
}
.modal__card{
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 24px 24px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  animation: popIn .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal__close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
}
.parent-tip__header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.parent-tip__icon{ font-size: 2rem; }
.parent-tip__title{ font-size: 1.3rem; color: var(--violeta-dark); }
.parent-tip__body{
  font-size: 1rem;
  color: var(--text-soft);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Globo de tips "rico" y cuento completo, solo cuentos auditivos en inglés
   (spec-motores-nuevos.md § 8.4) — reusan el mismo .modal/#modal-parent-tip,
   se ensanchan y pasan a texto alineado a la izquierda (el default sigue
   centrado y angosto, sin cambios). */
.modal__card--ancho{ max-width: 640px; text-align: left; max-height: 85vh; overflow-y: auto; }
.modal__card--ancho .parent-tip__header{ justify-content: flex-start; }
.parent-tip__section{ margin-bottom: 16px; }
.parent-tip__section h4{ color: var(--violeta-dark); font-size: 1.02rem; margin-bottom: 4px; }
.parent-tip__section p{ color: var(--text-soft); line-height: 1.5; margin: 0; }
/* ul{list-style:none} es la base global del sitio (sección 2 de este archivo) —
   acá sí hace falta distinguir cada item, así que se agrega una viñeta propia
   en vez de reactivar el list-style nativo (mismo criterio que el resto de la
   app, que no usa bullets nativos en ningún otro lado). */
.parent-tip__section ul{ color: var(--text-soft); line-height: 1.5; margin: 0; padding-left: 4px; }
.parent-tip__section li{ margin-bottom: 8px; padding-left: 18px; position: relative; }
.parent-tip__section li::before{ content: '•'; position: absolute; left: 4px; color: var(--naranja); font-weight: 700; }
.parent-tip__controls{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.story-full-list{ display: flex; flex-direction: column; gap: 14px; margin: 12px 0 18px; }
.story-full-escena{
  background: #F9F7FC;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.story-full-escena__numero{ color: var(--text-soft); font-size: .8rem; font-weight: 700; margin-bottom: 4px; }
.story-full-escena__en{ color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.story-full-escena__es{ color: var(--text-soft); font-style: italic; line-height: 1.5; margin: 0; }

/* ---------- 14d. INSIGNIAS DE ESTRELLAS (GAMIFICACIÓN) ---------- */
.card-stars{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 1rem;
  color: #FFD166;
}
.card-star--active{ filter: drop-shadow(0 2px 4px rgba(255, 209, 102, 0.5)); }
.card-star--empty{ color: #E7E1F0; }

/* ---------- 14e. RESALTADO DE LECTURA DE VOZ ---------- */
.tts-speaking{
  background: rgba(255, 209, 102, 0.4) !important;
  border-radius: 6px;
  transition: background .2s ease;
}

/* ---------- 15. UTILIDADES ---------- */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 16. RESPONSIVE — 768px (tablets) ---------- */
@media (min-width: 768px){
  .app-header{ padding: 0 28px; }
  .brand__name{ font-size: 1.2rem; }
  .screen{ padding: 28px 24px 56px; }
  /* Seis pistas permiten conservar tres columnas y centrar también una fila
     final de una o dos tarjetas cuando el grado oculta módulos sin contenido. */
  .module-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .module-card-shell{ grid-column: span 2; }
  .module-card-shell.is-tail-one{ grid-column: 3 / span 2; }
  .module-card-shell.is-tail-two-first{ grid-column: 2 / span 2; }
  .story-grid{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .story-card{ min-height: 290px; }
  .story-card__body{
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    padding: 88px 18px 18px;
  }
  .story-card__title,
  .story-card__desc,
  .story-card__meta{ grid-column: 1; }
  .story-card__play{
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: end;
    width: auto;
    min-width: 126px;
    margin-top: 0;
  }
  .story-card:last-child:nth-child(odd){
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 22px) / 2);
  }
  .quiz-card__options{ grid-template-columns: repeat(2, 1fr); }
  .victory-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .victory-actions__main{ grid-column: 1 / -1; }
  .scene-card__text{ font-size: 1.3rem; }
  .pit-cell{ min-width: 48px; min-height: 48px; font-size: 1.05rem; }

  /* Banner de ilustración (§ 8b): a partir de acá sobra alto de pantalla,
     así que se muestra la portada completa en vez de recortarla. */
  .game-banner{
    max-width: 560px;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .game-banner__img{
    object-fit: contain;
    background: var(--bg);
  }
}

/* ---------- 17. RESPONSIVE — 1024px (desktop / iPad landscape) ---------- */
@media (min-width: 1024px){
  .story-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-card{ padding: 36px; }
  .scene-card__illustration{ font-size: 6.5rem; }
  .start-card{ padding: 24px 32px 30px; }
}

/* ---------- 18. RESPONSIVE — 1440px (pantallas grandes / Smart TV / proyector) ---------- */
@media (min-width: 1440px){
  .screen{ max-width: 1280px; }
  .story-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-title{ font-size: 3.2rem; }
  .scene-card__text{ font-size: 1.5rem; }
  .quiz-card__question{ font-size: 1.5rem; }
}

/* ---------- 19. IMPRESIÓN (Certificado) ---------- */
@media print{
  .no-print, .app-header, .app-footer{ display: none !important; }
  body{ padding-top: 0; background: #fff; }
  #screen-certificate{ display: block !important; }
  .screen{ padding: 0; max-width: 100%; }
  .certificate__border{ border-width: 4px; box-shadow: none; }
}