/* ============================================================
   console.css — D3X "Operations Console" layer
   Cargado DESPUÉS de styles.css. Añade: modo oscuro, toggles
   de tema/idioma, y refuerzos visuales tipo consola de datos.
   ============================================================ */

/* ---- Modo oscuro (sobrescribe variables semánticas) ---- */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9eef0;
  --muted: #9aa6b1;
  --line: #2b333b;
  --paper: #0e1217;
  --panel: #161c22;
  --emph: #232c34;
  --surf: 30, 38, 46;
  --teal: #3fd0c9;
  --green: #4cc78a;
  --blue: #6ba6e0;
  --gold: #e0a84d;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  --soft-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
/* Fallback: cualquier panel/borde claro residual en dark */
[data-theme="dark"] .site-header { background: rgba(14, 18, 23, 0.8); }

/* Transición suave al alternar tema */
html { transition: background-color .25s ease, color .25s ease; }
body,
.site-header,
.section,
.panel,
[class*="card"],
[class*="-card"] {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* En oscuro, el grid blueprint del fondo se atenúa correctamente */
[data-theme="dark"] body {
  background:
    linear-gradient(180deg, var(--paper), var(--paper));
}

/* ---- Controles del header (tema + idioma) ---- */
.console-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.console-btn {
  font: 600 12px/1 ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color .2s ease, transform .12s ease, background-color .2s ease;
}
.console-btn:hover { border-color: var(--teal); transform: translateY(-1px); }
.console-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.console-btn .ico { font-size: 14px; line-height: 1; }

/* El toggle de idioma muestra el idioma DESTINO */
.lang-btn { min-width: 46px; justify-content: center; }

/* ---- Reorden a enfoque-reclutador (sin mover HTML) ----
   Orden: hero → skills → experiencia → proyectos → minijuego →
   educación → credenciales → [cotización] → contacto.
   El formulario de cotización (#diagnostico) baja al final. */
main { display: flex; flex-direction: column; }
.hero            { order: 0; }
.stack-section   { order: 1; }
#work            { order: 2; }
#projects        { order: 3; }
#game            { order: 4; }
#education       { order: 5; }
#credentials     { order: 6; }
#diagnostico     { order: 7; }
#contact         { order: 8; }

/* ============================================================
   FASE 5 — Pulido visual "Operations Console"
   ============================================================ */

/* Tipografía monoespaciada para datos/métricas/labels técnicos */
.eyebrow,
.hero-proof strong,
.impact-grid span, .impact-grid strong, .impact-grid small,
.score-ring strong, .score-ring span,
.profile-snapshot span,
.timeline time,
.pipeline-step span, .pipeline-step strong,
.stack-track span,
.capability-strip span,
.visual-topline span,
.credential-body p {
  font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  letter-spacing: .01em;
}

/* Grid blueprint sutil de fondo (capa de consola) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .22;
  -webkit-mask-image: radial-gradient(ellipse at 50% -10%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% -10%, #000, transparent 72%);
}
[data-theme="dark"] body::before { opacity: .16; }
/* El contenido va por encima del grid */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* Indicador "● live" con pulso en la píldora de disponibilidad */
.availability-pill > span:first-child {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 2px;
  box-shadow: 0 0 0 0 rgba(38, 162, 105, .6);
  animation: d3xPulse 2.2s infinite;
}
@keyframes d3xPulse {
  0%   { box-shadow: 0 0 0 0 rgba(38, 162, 105, .6); }
  70%  { box-shadow: 0 0 0 9px rgba(38, 162, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 162, 105, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .availability-pill > span:first-child { animation: none; }
}
/* El span de TEXTO (no el punto) no debe heredar el estilo de punto */
.availability-pill > span:not(:first-child) {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
/* La píldora acomoda texto largo sin desbordar */
.availability-pill {
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.3;
  text-transform: none;
}

/* La flecha de métricas (3-4h → 30m) en acento teal */
.metric-arrow { color: var(--teal); font-weight: 700; }

/* ---- Densidad: menos separación entre y dentro de secciones ---- */
.section { padding: clamp(36px, 5vw, 64px) clamp(18px, 5vw, 64px); }
.compact-section { padding-block: clamp(28px, 4vw, 44px); }
.hero { min-height: auto; padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(28px, 5vw, 56px); }
.section-heading { margin-bottom: clamp(16px, 2.5vw, 26px); }
/* separadores sutiles entre secciones para dar estructura sin tanto aire */
main > .section { border-top: 1px solid var(--line); }

/* ---- Fix timeline: evita celda vacía (time | h3+p) ---- */
.timeline article { align-items: start; }
.timeline article > time { grid-column: 1; grid-row: 1 / span 2; }
.timeline article > h3,
.timeline article > p { grid-column: 2; }
.timeline article > p { margin-top: 4px; }

/* Dashboard del hero alineado al design system (como las demás cards) */
.dashboard-visual {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.dashboard-visual .visual-topline span { color: var(--muted); }
.dashboard-visual .visual-topline strong { color: var(--ink); }

/* Las métricas del impact-grid ya no son porcentajes: quitar el "%" automático */
.impact-grid article strong::after { content: none !important; }

/* Cinta de skills: estática y centrada (sin marquee que salta) */
.stack-section { overflow: hidden; padding: clamp(14px,2.5vw,20px) 0; }
.stack-track {
  width: max-content;
  flex-wrap: nowrap;
  padding-left: 0;
  animation: d3xMarquee 40s linear infinite;
}
.stack-track:hover { animation-play-state: paused; }
@keyframes d3xMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   DESIGN SYSTEM — capa unificadora (consonancia global)
   Da reglas comunes a TODAS las secciones sin tocar el layout.
   ============================================================ */
:root { --radius: 12px; --radius-sm: 8px; }

/* 1) Radio consistente en superficies y controles */
.client-benefits article, .credential-card, .timeline article,
.experience-summary article, .education-grid article, .education-note,
.hero-proof article, .impact-grid article, .profile-snapshot article,
.game-scoreboard article, .pipeline-step, .signal-card, .game-stage,
.dashboard-visual, .contact-form, .contact-card, .contact-actions-card,
.experience-feature, .game-disclosure summary, .game-disclosure {
  border-radius: var(--radius) !important;
}
.button, .console-btn, .stack-track span, .capability-strip span,
.contact-tags span, .experience-points span, .decision-grid button,
.game-start, input, select, textarea {
  border-radius: var(--radius-sm) !important;
}

/* 2) Borde + sombra coherentes en TODAS las tarjetas de contenido */
.client-benefits article, .credential-card,
.experience-summary article, .education-grid article, .education-note,
.hero-proof article, .profile-snapshot article {
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
  background: var(--panel);
}

/* 3) Tipografía coherente por rol */
.section h2, .education-shell h2, .client-value-copy h2, .diagnostic-copy h2 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.section h3 { font-weight: 700; letter-spacing: -0.005em; }
.section p { line-height: 1.6; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* 4) Escala de espaciado uniforme dentro de grids de tarjetas */
.client-benefits, .credential-list, .education-grid, .experience-summary {
  gap: clamp(14px, 1.6vw, 20px);
}

/* ---- Formulario alineado al design system ---- */
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-form label.checkbox-field {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--ink);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(var(--surf), 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(10, 143, 138, 0.18);
}
.contact-form .checkbox-field input { width: auto; }
.contact-form button[type="submit"] {
  margin-top: 4px;
  padding: 12px 18px;
  font-weight: 700;
  color: var(--on-emph);
  background: var(--emph);
  border: 1px solid var(--emph);
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: transform .12s ease, opacity .15s ease;
}
.contact-form button[type="submit"]:hover { transform: translateY(-1px); opacity: .92; }
.contact-form .form-status,
.contact-form .form-note { color: var(--muted); font-size: 0.8rem; }

/* ---- Botones del hero: mismo ancho y esquema coherente ---- */
.hero-actions { gap: 10px; flex-wrap: wrap; align-items: stretch; }
.hero-actions .button {
  min-width: 160px;
  justify-content: center;
  text-align: center;
  padding: 12px 18px !important;
  font-weight: 700;
  border-radius: var(--radius-sm) !important;
}
.hero-actions .button.primary {
  background: var(--emph) !important;
  color: var(--on-emph) !important;
  border: 1px solid var(--emph) !important;
}
.hero-actions .button.secondary,
.hero-actions .button.ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
}
.hero-actions .button.secondary:hover,
.hero-actions .button.ghost:hover { border-color: var(--teal) !important; }

/* ---- Dashboard del hero: panel de KPIs limpio ---- */
.dashboard-visual .kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.dashboard-visual .kpi-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--surf), 0.5);
}
.dashboard-visual .kpi-grid strong {
  display: block;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 6px;
}
.dashboard-visual .kpi-grid article > span {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.dashboard-visual .kpi-grid strong span { font: inherit; color: inherit; letter-spacing: inherit; }

/* ---- Formulario de diagnóstico como desplegable (estilo Signal Run) ---- */
.diag-disclosure .diagnostic-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
  margin-top: 18px;
}
.diag-disclosure .diagnostic-copy { position: static; }
@media (max-width: 760px) {
  .diag-disclosure .diagnostic-grid { grid-template-columns: 1fr; }
}

/* === Visor 3D en hero: modelo arriba, panel Impact abajo === */
.hero-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  width: 100%;
  max-width: 560px;
  justify-self: end;
  align-self: stretch;
}
.hero-aside .dashboard-visual { max-width: none; justify-self: stretch; margin: 0; }

.model-viewer {
  position: relative;
  width: 100%;
  height: clamp(435px, 56vh, 535px);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(10,143,138,0.18), transparent 60%),
    linear-gradient(180deg, rgba(var(--surf),0.85), rgba(var(--surf),0.55));
  box-shadow: 0 18px 50px -28px rgba(0,0,0,0.6);
}
.model-stage { position: absolute; inset: 0; }
.model-stage canvas { display: block; width: 100% !important; height: 100% !important; }

.model-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  transition: opacity .45s ease;
}
.model-viewer.is-ready .model-overlay { opacity: 0; pointer-events: none; }
.model-viewer.is-loading .model-load { opacity: .5; pointer-events: none; }

.model-load {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--surf), 0.7);
  color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: transform .2s ease, background .2s ease;
}
.model-load:hover { transform: translateY(-1px); background: rgba(10,143,138,0.22); }
.model-load-ico { color: #0a8f8a; }
.model-hint { margin: 0; font-size: .78rem; color: var(--muted); }
.model-viewer.is-loading .model-hint::after { content: " · cargando…"; }
.model-viewer.is-error .model-hint { color: #e0796b; }
.model-viewer.is-error .model-hint::after { content: " · no se pudo cargar"; }

@media (max-width: 900px) {
  .hero-aside { max-width: none; }
  .model-viewer { height: clamp(320px, 70vw, 440px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .dashboard-visual { animation: none; }
}

/* === Hero: alinear contenido al ancho global (--content) sin perder fondo full-bleed === */
.hero { padding-inline: max(clamp(18px, 5vw, 64px), calc((100% - var(--content)) / 2)); }

/* === Centrar el contenido de las tarjetas (perfil, trayectoria e impacto) === */
.profile-snapshot article,
.hero-proof article,
.kpi-grid article {
  text-align: center;
  align-items: center;
}

/* === Hero quepa en la primera vista (above the fold) en desktop === */
@media (min-width: 901px) {
  .hero {
    min-height: auto;
    padding-top: clamp(20px, 3vh, 36px);
    padding-bottom: clamp(20px, 3vh, 36px);
    align-items: center;
  }
  /* columnas del hero balanceadas en altura */
  .hero-copy, .hero-aside { align-self: center; }
  .model-viewer { height: clamp(300px, 38vh, 400px); }
  .hero-summary { margin-block: 8px !important; font-size: .98rem; }
  .hero-actions { margin-block: 8px !important; }
  .profile-snapshot { margin-top: 6px !important; gap: 8px; }
  .hero-proof { margin-top: 8px !important; gap: 8px; }
  .profile-snapshot article, .hero-proof article { padding: 9px 12px !important; }
  .model-viewer { height: clamp(300px, 42vh, 440px); }
  .hero-aside { gap: 12px; }
  .dashboard-visual { padding: 14px 16px !important; }
  .kpi-grid { gap: 8px !important; }
}

/* === "Ver más": summaries de details destacados (ya no pasan desapercibidos) === */
summary[data-en] {
  display: block; width: 100%; text-align: center;
  margin-top: 16px; padding: 4px;
  color: #0a8f8a; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; list-style: none;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
summary[data-en]::-webkit-details-marker { display: none; }
summary[data-en]::after { content: " →"; }
summary[data-en]:hover { color: #0c7c78; }

/* === Mapa de credenciales: color por categoría === */
.credential-map article { border-left: 3px solid #0a8f8a; padding-left: 14px; }
.credential-map article span { font-weight: 700; letter-spacing: .04em; }
.credential-map article:nth-child(1) { border-left-color: #0a8f8a; }
.credential-map article:nth-child(1) span { color: #0a8f8a; }
.credential-map article:nth-child(2) { border-left-color: #3b82c4; }
.credential-map article:nth-child(2) span { color: #3b82c4; }
.credential-map article:nth-child(3) { border-left-color: #d9913a; }
.credential-map article:nth-child(3) span { color: #d9913a; }
.credential-map article:nth-child(4) { border-left-color: #3fb27f; }
.credential-map article:nth-child(4) span { color: #3fb27f; }

/* === Juego: invitación + cómo jugar === */
.game-invite { font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.game-howto { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.game-howto li { display: flex; gap: 8px; align-items: baseline; font-size: .9rem; color: var(--muted); }
.game-howto strong { color: #0a8f8a; min-width: 92px; }

/* === Sección Carrera con más presencia === */
#work .section-heading .eyebrow { color: #0a8f8a; }
.career-arc span { font-weight: 600; }


/* === Fix tema: credenciales respetan Light/Dark (antes fondo oscuro fijo) === */
.credential-map article { background: var(--panel) !important; color: var(--ink); }
.credential-map article strong { color: var(--ink); }

/* === Carrera con más presencia (antes 0.76rem, pasaba desapercibida) === */
.career-arc span { font-size: .92rem !important; padding: 12px 16px !important; }
.career-arc i { background: #0a8f8a !important; height: 3px !important; opacity: .55; }
#work .section-heading .eyebrow { font-size: .92rem; }

/* === Eyebrows "Carrera"/"Aprendizaje" más grandes (pasaban desapercibidos) === */
#work .section-heading .eyebrow,
#credentials .section-heading .eyebrow { font-size: 1.05rem !important; letter-spacing: .06em; }

/* === Todos los eyebrows de sección más grandes (Career/Education/Learning/Contact) === */
.section-heading .eyebrow { font-size: 1.05rem !important; letter-spacing: .06em; }

/* === Acceso al juego: que se vea claramente abrible/jugable === */
#game .game-disclosure > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); box-shadow: var(--soft-shadow);
  transition: transform .15s ease, border-color .2s ease;
}
#game .game-disclosure > summary:hover { transform: translateY(-2px); border-color: #0a8f8a; }
#game .game-disclosure > summary::-webkit-details-marker { display: none; }
#game .game-disclosure > summary small { color: #0a8f8a; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#game .game-disclosure > summary strong { font-size: 1.2rem; display: block; }
#game .game-disclosure > summary em {
  font-style: normal; font-weight: 700; color: #fff;
  background: #0a8f8a; padding: 10px 20px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
#game .game-disclosure > summary em::before { content: "▶"; font-size: .8em; }
#game .game-disclosure[open] > summary em::before { content: "■"; }

/* === Juego: título grande + botón Jugar prominente (más intuitivo) === */
#game .game-disclosure > summary strong { font-size: 1.7rem !important; line-height: 1.15; }
#game .game-disclosure > summary small { font-size: .82rem; }
#game .game-disclosure > summary em {
  font-size: 1.05rem !important; padding: 13px 28px !important;
  box-shadow: 0 8px 22px -10px rgba(10,143,138,.7);
}
#game .game-disclosure > summary em::before { content: "▶ "; }

/* === Cintilla seamless: gap como margin para que el loop -50% no brinque === */
.stack-track { gap: 0 !important; }
.stack-track span { margin-right: 10px; }

/* === Diagnóstico: pregunta en su propia línea === */
.diag-q { display: block; }

/* === Móvil (≤640px, P40 ~360px): desamontonar — apilar grids y dar aire === */
@media (max-width: 640px) {
  .section { padding: clamp(30px, 9vw, 44px) 18px; }
  .hero { grid-template-columns: 1fr; gap: 22px; }
  .hero-aside { max-width: 100%; }
  .model-viewer { height: clamp(300px, 78vw, 400px); }
  /* tarjetas: apilar para que respiren */
  .credential-map { grid-template-columns: 1fr !important; }
  .profile-snapshot { grid-template-columns: 1fr !important; gap: 10px; }
  .hero-proof { grid-template-columns: repeat(3, 1fr) !important; gap: 8px; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .experience-summary { grid-template-columns: 1fr !important; }
  /* arco de carrera: vertical, sin conectores horizontales */
  .career-arc { grid-template-columns: 1fr !important; gap: 8px; }
  .career-arc i { display: none !important; }
  /* títulos que no desborden */
  .hero h1 { font-size: clamp(2rem, 10vw, 2.6rem); }
  .hero-role { font-size: .92rem; }
  #game .game-disclosure > summary { flex-direction: column; align-items: flex-start; gap: 12px; }
  #game .game-disclosure > summary strong { font-size: 1.35rem !important; }
}

/* === Sección "Mi historia" (storytelling) === */
.story-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  width: min(100%, var(--content)); margin-inline: auto;
}
.story-grid article {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; background: rgba(var(--surf), 0.45);
  border-left: 3px solid #0a8f8a;
}
.story-grid h3 { margin: 0 0 8px; color: #0a8f8a; font-size: 1rem; letter-spacing: .02em; }
.story-grid p { margin: 0; color: var(--muted); line-height: 1.62; }
.story-quote {
  width: min(100%, 720px); margin: clamp(22px, 4vw, 34px) auto 0;
  text-align: center; font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 800; color: var(--ink); line-height: 1.3;
}
.story-note {
  width: min(100%, 620px); margin: 10px auto 0;
  text-align: center; color: var(--muted); font-size: .95rem;
}
@media (max-width: 640px) { .story-grid { grid-template-columns: 1fr; } }

/* Orden: historia justo después del hero */
.hero { order: 0; }
.stack-section { order: 1; }
#story { order: 2; }
#work { order: 3; }
#projects { order: 4; }
#game { order: 5; }
#education { order: 6; }
#credentials { order: 7; }
#diagnostico { order: 8; }
#contact { order: 9; }

/* === Fix móvil: desplegables que se trababan (desborde horizontal + sticky) === */
@media (max-width: 640px) {
  /* grids internos de los <details> a 1 columna (el minmax(340px) desbordaba) */
  .game-shell { grid-template-columns: 1fr !important; padding: 16px !important; }
  .game-stage { min-width: 0 !important; }
  .diagnostic-grid { grid-template-columns: 1fr !important; }
  .credential-list { grid-template-columns: 1fr !important; }
  /* el form sticky trababa el scroll dentro del details */
  .diagnostic-copy { position: static !important; top: auto !important; }
  /* cinturón: nada desborda a lo ancho (clip no rompe el header sticky) */
  body { overflow-x: clip; }
}

/* === Historia: números de etapa (01–04) para que se lea como recorrido === */
.story-grid { counter-reset: story; }
.story-grid article { counter-increment: story; }
.story-grid article h3 { display: flex; align-items: baseline; gap: 10px; }
.story-grid article h3::before {
  content: "0" counter(story);
  font-size: 1.5rem; font-weight: 800; color: #0a8f8a; opacity: .55;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.story-quote::before { content: "“"; color: #0a8f8a; margin-right: 2px; }
.story-quote::after { content: "”"; color: #0a8f8a; margin-left: 2px; }