/* Guías de gramática · estilos propios (los comunes, en /herramientas/comun.css) */
:root { --ok:#1f9d6f; --ok-tint:#e7f8f0; --mal:#c2352b; --mal-tint:#fdecea; --medio:#b7791f; --medio-tint:#fdf4e3; }
.gx [hidden] { display:none !important; }
.gx { margin-top:-32px; margin-bottom:40px; position:relative; display:grid; gap:20px; }
.gx-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:24px clamp(18px,4vw,36px); min-width:0; }
.gx-card h2 { font-size:1.4rem; letter-spacing:-.02em; }
.gx-sub { margin-top:6px; color:var(--dark-soft); max-width:760px; }
.gx-kick { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--mint-deep); }
.gx button:focus-visible, .gx a:focus-visible, .gx input:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
.lnk { border:none; background:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; color:var(--mint-deep); padding:4px 8px; border-radius:100px; }
.lnk:hover { background:var(--mint-tint); }
.gx-btn { border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.95rem; color:#fff; background:var(--navy); padding:12px 22px; border-radius:100px; transition:background .2s ease; justify-self:start; }
.gx-btn:hover { background:var(--navy-light); }
.gx-btn:disabled { opacity:.6; cursor:default; }

/* Acceso */
.gx-acceso { max-width:640px; }
.gx-form { display:grid; gap:12px; margin-top:16px; }
.gx-form-fila { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.gx-inp { font-family:inherit; font-size:1rem; color:var(--navy); padding:11px 14px; border:1px solid #c9cfda; border-radius:12px; background:var(--bg-body); width:100%; }
.gx-inp:focus { outline:2px solid var(--mint); outline-offset:1px; background:#fff; }
.gx-codigo { font-size:1.2rem; letter-spacing:.2em; font-variant-numeric:tabular-nums; }
.gx-check { display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--dark-soft); line-height:1.45; cursor:pointer; }
.gx-check input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--navy); }
.gx-check a { color:var(--mint-deep); font-weight:700; }
.gx-edad { border:none; padding:0; margin:0; display:grid; gap:8px; }
.gx-edad legend { font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.gx-aviso { margin-top:12px; background:var(--medio-tint); color:#7a4d12; border-radius:12px; padding:10px 14px; font-size:.9rem; font-weight:600; }
.gx-links { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; }

/* Barra de la cuenta */
.gx-barra { display:flex; justify-content:space-between; gap:6px 16px; flex-wrap:wrap; align-items:center; background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:10px 16px; font-size:.86rem; color:var(--dark-soft); box-shadow:var(--shadow-sm); }
.gx-barra b { color:var(--navy); }
.gx-sus a { color:var(--mint-deep); font-weight:700; }
.gx-volver { font-size:.9rem; }
.gx-volver a { color:var(--mint-deep); font-weight:700; text-decoration:none; }

/* Índice */
.gx-indice { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; }
.gx-ind-x { display:inline-flex; align-items:center; gap:8px; }
.gx-ind { position:relative; display:grid; grid-template-columns:30px minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--bg-body);
  transition:background .5s ease, border-color .5s ease; }
.gx-ind-t { font-weight:700; color:var(--navy); text-decoration:none; }
.gx-ind-t:hover { text-decoration:underline; }
.gx-ind-p { font-size:.78rem; font-weight:800; color:var(--mint-deep); background:var(--mint-tint); border-radius:100px; padding:2px 9px; }
.gx-ind-c { font-size:.78rem; font-weight:700; color:var(--text-muted); }
.gx.gx-entra .gx-ind { animation:gx-sube .45s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:calc(.1s + var(--i, 0) * 28ms); }

/* El número: una moneda con dos caras (el número y el check) y, si está empezado,
   un anillo alrededor que se llena con los bloques hechos. */
@property --anillo { syntax:'<number>'; inherits:true; initial-value:0; }
.gx-ind-n { position:relative; width:28px; height:28px; perspective:220px; transition:--anillo .9s cubic-bezier(.22,.61,.36,1); }
.gx-ind-n::before { content:''; position:absolute; inset:-5px; border-radius:50%; opacity:0; transition:opacity .3s ease;
  background:conic-gradient(var(--mint-deep) calc(var(--anillo) * 360deg), #e1e6ee 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px)); }
.gx-ind.empezado:not(.hecho) .gx-ind-n::before { opacity:1; }
.gx-ind-flip { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.34,1.45,.64,1); }
.gx-ind-cara { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:50%;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; background:var(--navy); color:#fff; font-size:.78rem; font-weight:800; }
.gx-ind-ok { background:var(--ok); transform:rotateY(180deg); }
.gx-ind-ok svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.gx-ind-ok path { stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset .45s ease .45s; }
.gx-ind.hecho { background:var(--ok-tint); border-color:#b9e6d2; }
.gx-ind.hecho .gx-ind-flip { transform:rotateY(180deg); }
.gx-ind.hecho .gx-ind-ok path { stroke-dashoffset:0; }
.gx-ind.cerrado .gx-ind-cara { background:#9aa3b5; }

/* La celebración: la fila tiembla al caer el sello, y el sello se va solo. */
.gx-ind.celebra { animation:gx-temblor .45s ease .2s; }
@keyframes gx-temblor { 20% { transform:translateX(-3px) rotate(-.3deg); } 45% { transform:translateX(3px) rotate(.3deg); } 70% { transform:translateX(-2px); } }
.gx-sello { position:absolute; right:22%; top:50%; z-index:2; pointer-events:none; padding:2px 12px; border:3px solid var(--ok); border-radius:9px;
  color:var(--ok); background:rgba(255,255,255,.88); font-family:'Plus Jakarta Sans',sans-serif; font-size:1.05rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  transform:translateY(-50%) rotate(-12deg); animation:gx-sello .5s cubic-bezier(.2,1.5,.4,1) both, gx-sello-fuera .5s ease 2.2s forwards; }
@keyframes gx-sello { from { opacity:0; transform:translateY(-50%) rotate(-12deg) scale(2.6); } }
@keyframes gx-sello-fuera { to { opacity:0; transform:translateY(-50%) rotate(-12deg) scale(.9); } }
.gx-confeti { position:fixed; width:0; height:0; z-index:60; pointer-events:none; }
.gx-confeti i { position:absolute; left:-4px; top:-3px; width:8px; height:5px; border-radius:1.5px; background:var(--c);
  animation:gx-confeti var(--t) cubic-bezier(.2,.65,.35,1) forwards; }
@keyframes gx-confeti {
  0% { transform:translate(0, 0) rotate(0); opacity:1; }
  55% { transform:translate(calc(var(--dx) * .85), var(--dy)) rotate(calc(var(--r) * .6)); opacity:1; }
  100% { transform:translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--r)); opacity:0; } }

/* La barra del nivel: termómetro tumbado y la cabeza del científico. */
.gx-nivelbar { --ojo-x:2px; --ojo-y:0px; --brazo:0deg; display:flex; align-items:center; gap:12px; margin-top:16px; padding:8px 16px 10px 8px; background:var(--bg-body); border:1px solid var(--border); border-radius:16px; }
.gx-nivelbar .gx-cient { flex:none; }
.gx-nivelbar .gx-cient svg { width:66px; overflow:hidden; }
.gx-nb-c { flex:1; min-width:0; }
.gx-nb-t { font-size:.95rem; font-weight:700; color:var(--navy); }
.gx-nb-t b { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.2rem; color:var(--ok); }
.gx-nb-vidrio { display:flex; align-items:center; margin-top:6px; }
.gx-nivelbar .gx-termo-bulbo { width:30px; height:30px; margin-right:-6px; }
.gx-nivelbar .gx-termo-bulbo i { width:22px; height:22px; }
.gx-nb-tubo { position:relative; flex:1; height:16px; border:2px solid #c9d2df; border-left:0; border-radius:0 10px 10px 0; background:linear-gradient(180deg, #f8fafc, #e8edf3 55%, #dce3ec); }
.gx-nb-liq { position:absolute; left:0; right:3px; top:3px; bottom:3px; border-radius:0 6px 6px 0;
  background:linear-gradient(to right, #2fb39a 0%, #5fd3b8 40%, #f2b544 75%, #ef6b4d 100%);
  clip-path:inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 0 6px 6px 0); transition:clip-path 1.2s cubic-bezier(.22,.61,.36,1); }

/* Tema: la teoría */
.gx-tema { display:grid; gap:20px; background-repeat:repeat; border-radius:var(--radius-lg);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.gx-tema input { -webkit-user-select:text; user-select:text; }
.gx-tema .gx-card { background-color:rgba(255,255,255,.93); }
.gx-teoria h2 { margin-top:4px; }
.gx-teoria h3 { margin:22px 0 8px; font-size:1.05rem; color:var(--navy); }
.gx-teoria > p { max-width:760px; margin-top:8px; line-height:1.65; color:var(--text-main); }
.gx-teoria i { color:var(--dark); font-weight:600; }
.gx-ejemplos { list-style:none; margin:12px 0; padding:0; display:grid; gap:8px; max-width:760px; }
.gx-ejemplos li { border-left:3px solid var(--mint); padding:4px 0 4px 12px; }
.gx-ejemplos span { display:block; font-weight:600; color:var(--dark); }
.gx-ejemplos small { display:block; color:var(--text-muted); font-size:.86rem; }
.gx-ojo { margin-top:12px; max-width:760px; background:var(--medio-tint); border-radius:12px; padding:12px 14px; color:#6b4410; }
.gx-tabla-w { border:1px solid var(--border); border-radius:12px; overflow:hidden; max-width:860px; }
.gx-tabla { width:100%; border-collapse:collapse; font-size:.9rem; }
.gx-tabla th, .gx-tabla td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.gx-tabla thead th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg-body); }
.gx-tabla tbody th { color:var(--navy); font-weight:700; }
.gx-tabla tbody tr:last-child th, .gx-tabla tbody tr:last-child td { border-bottom:0; }

/* Tema: los ejercicios */
.gx-ej-h { margin-bottom:8px; }
.gx-instr { margin-top:4px; font-style:italic; color:var(--dark-soft); font-size:.92rem; }
.gx-items { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px; }
.gx-item { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:rgba(250,250,251,.9); }
.gx-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:100px; background:var(--navy); color:#fff; font-size:.74rem; font-weight:800; }
.gx-item.st-ok { border-color:var(--ok); } .gx-item.st-ok .gx-num { background:var(--ok); }
.gx-item.st-mal { border-color:#f1b3ad; } .gx-item.st-mal .gx-num { background:var(--mal); }
.gx-item.st-medio { border-color:#ecc983; } .gx-item.st-medio .gx-num { background:var(--medio); }
.gx-item.st-ver .gx-num { background:#8b94a7; }
.gx-frase { color:var(--dark); line-height:2; }
.gx-blank { display:inline-block; min-width:5em; border-bottom:2px solid #c9cfda; margin:0 3px; font-weight:700; color:var(--navy); text-align:center; }
.gx-ops { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:6px; }
.gx-op { display:flex; align-items:center; gap:8px; text-align:left; cursor:pointer; font-family:inherit; font-size:.92rem; font-weight:600; color:var(--dark-soft); background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; min-width:0; overflow-wrap:anywhere; }
.gx-op b { flex:none; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; background:var(--navy-tint); color:var(--navy); font-size:.72rem; }
.gx-op:hover:not(:disabled) { border-color:#9aa3b5; }
.gx-op.bien { border-color:var(--ok); background:var(--ok-tint); color:#14684a; }
.gx-op.bien b { background:var(--ok); color:#fff; }
.gx-op.fallo { border-color:var(--mal); background:var(--mal-tint); color:var(--mal); }
.gx-op.fallo b { background:var(--mal); color:#fff; }
.gx-op:disabled { cursor:default; }
.gx-op:disabled:not(.bien):not(.fallo) { opacity:.6; }
.gx-gap { font-family:inherit; font-size:1rem; font-weight:600; color:var(--navy); width:11em; max-width:100%; margin:0 4px; padding:2px 8px; border:1px solid #c9cfda; border-radius:8px; background:var(--bg-body); line-height:1.5; }
.gx-gap-l { width:18em; }
.gx-gap:focus { outline:2px solid var(--mint); outline-offset:1px; background:#fff; }
.st-ok .gx-gap { border-color:var(--ok); background:var(--ok-tint); color:#14684a; }
.st-mal .gx-gap { border-color:var(--mal); background:var(--mal-tint); }
.st-medio .gx-gap { border-color:var(--medio); background:var(--medio-tint); }
.st-ver .gx-gap { background:var(--navy-tint); color:var(--dark-soft); }
.gx-pista { font-size:.86rem; font-weight:700; color:var(--dark-soft); }
.gx-frase mark { background:#fde7b0; color:var(--dark); border-radius:4px; padding:0 3px; }
.gx-corr { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:.86rem; font-weight:700; color:var(--text-muted); }
.gx-clave { margin:4px 0; font-weight:800; letter-spacing:.12em; color:var(--navy); }
.gx-cuenta { display:block; font-size:.76rem; font-weight:700; color:var(--text-muted); }
.gx-cuenta.mal { color:var(--mal); }
.gx-fb p { margin-top:6px; font-size:.9rem; line-height:1.5; color:var(--dark-soft); }
.gx-fb b { color:var(--navy); }
.gx-fb-ok b { color:var(--ok); }
.gx-fb-mal { color:var(--mal) !important; font-weight:600; }
.gx-fb-p { color:#92591a; }
.gx-ej-pie { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:.88rem; color:var(--dark-soft); }
.gx-marca b { color:var(--navy); }
/* Al final del tema: el anterior, discreto; el siguiente, el botón que se ve. */
.gx-nav { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:12px; align-items:stretch; }
.gx-nav a { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; text-decoration:none; border-radius:var(--radius-lg); padding:16px 22px;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.gx-nav small { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.gx-nav span { font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.gx-nav-ant { background:var(--bg-surface); border:1px solid var(--border); color:var(--navy); }
.gx-nav-ant small { color:var(--text-muted); }
.gx-nav-ant:hover { border-color:#9aa3b5; }
.gx-nav-sig { background:var(--navy); color:#fff; align-items:flex-end; text-align:right; box-shadow:var(--shadow-md); }
.gx-nav-sig small { color:var(--mint); }
.gx-nav-sig span { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.12rem; font-weight:800; }
.gx-nav-sig:hover { background:var(--navy-light); box-shadow:0 10px 24px rgba(43,51,73,.22); transform:translateY(-2px); }
.gx-nav a:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }
/* En el primer tema no hay anterior: el siguiente va solo y centrado. */
.gx-nav.solo { grid-template-columns:minmax(0,520px); justify-content:center; }
.gx-nav.solo .gx-nav-sig { align-items:center; text-align:center; }


/* Historia final: marcadores, escena, decisiones y final. */
.gx-hist h2 { margin-top:4px; }
.gx-hist-regla { margin-top:10px; max-width:760px; font-size:.9rem; line-height:1.55; color:var(--dark-soft); background:var(--bg-body); border-radius:12px; padding:10px 14px; }
.gx-mets { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 20px; margin-top:16px; }
.gx-met { --v:.5; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:4px 10px; }
.gx-met-n { font-size:.82rem; font-weight:800; color:var(--navy); }
.gx-met-n small { font-weight:600; color:var(--text-muted); }
.gx-met-v { display:inline-block; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:800; color:var(--navy); line-height:1; }
.gx-met-bar { grid-column:1 / -1; height:10px; border-radius:100px; background:#e6eaf0; overflow:hidden; }
.gx-met-bar i { display:block; height:100%; width:calc(var(--v) * 100%); border-radius:inherit; background:linear-gradient(90deg, #2fb39a, #5fd3b8); transition:width .9s cubic-bezier(.22,.61,.36,1); }
.gx-met:nth-child(2) .gx-met-bar i { background:linear-gradient(90deg, #7b5cd6, #a58cf0); }
.gx-met:nth-child(3) .gx-met-bar i { background:linear-gradient(90deg, #e39a1f, #f2c35e); }
.gx-met:nth-child(4) .gx-met-bar i { background:linear-gradient(90deg, #2f80d0, #6aa8e8); }
.gx-met.sube .gx-met-v { animation:gx-met-sube .9s ease; }
.gx-met.baja .gx-met-v { animation:gx-met-baja .9s ease; }
@keyframes gx-met-sube { 30% { color:var(--ok); transform:scale(1.4); } }
@keyframes gx-met-baja { 30% { color:var(--mal); transform:scale(1.4); } }
.gx-hist-notas { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.gx-hist-notas i { font-style:normal; font-size:.8rem; letter-spacing:0; text-transform:none; font-weight:700; color:var(--navy); background:var(--navy-tint); border-radius:100px; padding:3px 10px; }
.gx-hist-reini { margin-top:10px; }
.gx-escena { border-top:4px solid var(--navy); }
.gx-escena.t-decision { border-top-color:#2f80d0; }
.gx-escena.t-speech { border-top-color:#f2b544; }
.gx-escena.t-ending { border-top-color:var(--ok); }
.gx-escena-t { margin-top:8px; max-width:760px; font-size:1.06rem; line-height:1.7; color:var(--dark); }
.gx-fxs { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.gx-fx { font-size:.82rem; font-weight:800; border-radius:100px; padding:3px 11px; }
.gx-fx.mas { background:var(--ok-tint); color:#14684a; }
.gx-fx.menos { background:var(--mal-tint); color:var(--mal); }
.gx-fx.nota { background:var(--navy-tint); color:var(--navy); }
.gx-hist-bonus { margin-top:8px; max-width:760px; font-style:italic; font-size:.92rem; color:var(--dark-soft); }
.gx-escena-pie { display:grid; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.gx-hist-espera { font-size:.88rem; font-weight:600; color:var(--text-muted); }
.gx-hist-instr { font-size:.92rem; font-weight:700; color:var(--navy); }
.gx-decs { display:grid; gap:8px; }
.gx-dec { display:flex; gap:10px; align-items:flex-start; text-align:left; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:600; line-height:1.45; color:var(--dark); background:var(--bg-surface); border:1.5px solid var(--border); border-radius:14px; padding:12px 14px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.gx-dec b { flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:var(--navy); color:#fff; font-size:.78rem; }
.gx-dec:hover { border-color:var(--mint-deep); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.gx-dec.cerrada { cursor:default; color:var(--text-muted); background:var(--bg-body); border-style:dashed; }
.gx-dec.cerrada:hover { border-color:var(--border); box-shadow:none; transform:none; }
.gx-dec.cerrada b { background:#9aa3b5; }
.gx-dec.cerrada small { display:block; margin-top:3px; font-size:.8rem; font-weight:700; color:var(--text-muted); }
@media (max-width:640px) { .gx-mets { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gx-hist-gram { font-size:.9rem; font-weight:700; border-radius:10px; padding:8px 12px; background:var(--bg-body); color:var(--dark-soft); }
.gx-hist-gram.mas { background:var(--ok-tint); color:#14684a; }
.gx-hist-gram.menos { background:var(--mal-tint); color:var(--mal); }
.gx-escena h3 { margin:20px 0 8px; font-size:1.02rem; color:var(--navy); }
.gx-hist-pts { margin-top:12px; font-weight:800; color:var(--navy); }
.gx-hist-finales { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.gx-hist-finales li { font-size:.86rem; font-weight:700; border-radius:100px; padding:5px 12px; background:var(--ok-tint); color:#14684a; border:1px solid #b9e6d2; }
.gx-hist-finales li.este { background:var(--ok); color:#fff; border-color:var(--ok); }
.gx-hist-finales li.oculto { background:var(--bg-body); color:var(--text-muted); border:1px dashed #c9cfda; }
.gx-hist-repasa { margin:0 0 16px; padding-left:20px; display:grid; gap:4px; }
.gx-hist-repasa a { color:var(--mint-deep); font-weight:700; }
.gx-hist-repasa small { color:var(--text-muted); }
.gx-escena > .gx-btn { margin-top:4px; }
@media (max-width:640px) {
  .gx-mets { grid-template-columns:minmax(0,1fr); gap:8px; }
  .gx-escena-t { font-size:1rem; }
}
@media (prefers-reduced-motion:reduce) {
  .gx-met-bar i, .gx-dec { transition:none; }
  .gx-met.sube .gx-met-v, .gx-met.baja .gx-met-v { animation:none; }
}

/* Cambio de vista: lo de antes se atenúa mientras llega lo nuevo, y lo nuevo entra suave.
   El contenedor solo cambia de opacidad (un transform rompería el termómetro fijo del móvil);
   las tarjetas suben un poco, escalonadas. Sin «both»: al acabar no queda ningún transform. */
.gx { transition:opacity .2s ease; }
.gx.gx-espera { opacity:.55; pointer-events:none; }
.gx.gx-entra > :not(.gx-barra) { animation:gx-aparece .35s ease-out backwards; }
.gx.gx-entra .gx-card { animation:gx-sube .5s cubic-bezier(.22,.61,.36,1) backwards; }
.gx.gx-entra .gx-tema > .gx-card:nth-child(2) { animation-delay:.07s; }
.gx.gx-entra .gx-tema > .gx-card:nth-child(n+3) { animation-delay:.14s; }
@keyframes gx-aparece { from { opacity:0; } }
@keyframes gx-sube { from { opacity:0; transform:translateY(12px); } }

/* Termómetro del tema, con el científico al lado mirándolo subir.
   Ancho: columna a la derecha, pegada al bajar. Estrecho: abajo, en horizontal,
   con el científico de pie encima. */
.gx-lectura { display:grid; grid-template-columns:minmax(0,1fr) 168px; gap:14px; align-items:start; }
.gx-termo { --p:0; --c:#2fb39a; --brazo:0deg; --ojo-x:3px; --ojo-y:2px;
  position:sticky; top:104px; height:min(62vh,540px); display:grid; grid-template-columns:106px 62px; align-items:end; z-index:40; }
/* Hasta 1080 px el menú ocupa dos filas (comun.css): el termómetro se pega más abajo. */
@media (max-width:1080px) { .gx-termo { top:158px; height:min(56vh,480px); } }

/* — El cristal — */
.gx-termo-vidrio { position:relative; height:100%; display:flex; flex-direction:column; align-items:center; }
.gx-termo-tubo { position:relative; flex:1; width:22px; margin-bottom:-8px; border:2px solid #c9d2df; border-bottom:0; border-radius:14px 14px 0 0;
  background:linear-gradient(90deg, #f8fafc, #e8edf3 55%, #dce3ec); box-shadow:inset 0 2px 5px rgba(43,51,73,.12); }
/* El reflejo del cristal, por encima del líquido. */
.gx-termo-tubo::after { content:''; position:absolute; left:4px; top:12px; bottom:16px; width:3px; border-radius:3px; background:rgba(255,255,255,.8); z-index:2; pointer-events:none; }
/* La escala, a la izquierda: rayitas cada 10 % y una más larga cada 50 %. */
.gx-termo-escala { position:absolute; right:calc(100% + 5px); top:4px; bottom:0; width:9px;
  background:repeating-linear-gradient(to top, #8c97aa 0 2px, transparent 2px 50%) right / 9px 100% no-repeat,
             repeating-linear-gradient(to top, #b8c1ce 0 1.5px, transparent 1.5px 10%) right / 5px 100% no-repeat; }
.gx-termo-liq { position:absolute; left:3px; right:3px; top:3px; bottom:0; border-radius:9px 9px 0 0; overflow:hidden;
  background:linear-gradient(to top, #2fb39a 0%, #5fd3b8 40%, #f2b544 75%, #ef6b4d 100%);
  clip-path:inset(calc(100% - var(--p) * 100%) 0 0 0 round 7px 7px 0 0);
  transition:clip-path .7s cubic-bezier(.22,.61,.36,1); }
/* Burbujas que suben dentro del líquido. */
.gx-termo-liq::after { content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.6) 1.4px, transparent 1.9px), radial-gradient(circle, rgba(255,255,255,.38) 1px, transparent 1.5px);
  background-size:12px 34px, 12px 22px; background-position:3px 0, 8px 9px;
  animation:gx-burbujas 3.2s linear infinite; }
@keyframes gx-burbujas { to { background-position:3px -68px, 8px -35px; } }
/* La superficie del líquido: brilla con su color y se mece. */
.gx-termo-sup { position:absolute; left:3px; right:3px; height:6px; bottom:calc(var(--p) * (100% - 3px)); margin-bottom:-3px; border-radius:50%;
  background:rgba(255,255,255,.75); box-shadow:0 0 10px 3px var(--c); transition:bottom .7s cubic-bezier(.22,.61,.36,1);
  animation:gx-ola 1.8s ease-in-out infinite; }
@keyframes gx-ola { 50% { transform:scaleX(.75) translateY(-1px); } }
.gx-termo-bulbo { position:relative; z-index:1; flex:none; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:#eef2f7; border:2px solid #c9d2df; box-shadow:0 6px 14px rgba(43,51,73,.16); }
.gx-termo-bulbo i { width:36px; height:36px; border-radius:50%; background-color:var(--c);
  background-image:radial-gradient(circle at 33% 30%, rgba(255,255,255,.85) 0 13%, rgba(255,255,255,0) 15%), linear-gradient(to top, rgba(0,0,0,.14), rgba(0,0,0,0) 60%);
  transition:background-color .6s ease; }
.gx-termo.lleno .gx-termo-bulbo i { animation:gx-latido 1.1s ease-out 2; }
@keyframes gx-latido { 35% { transform:scale(1.15); box-shadow:0 0 0 8px rgba(239,107,77,.18); } }
.gx-termo-pct { margin-top:8px; padding:2px 9px; border-radius:100px; background:var(--navy); color:#fff; font-size:.74rem; font-weight:800; font-variant-numeric:tabular-nums; transition:background .3s ease; }
.gx-termo.lleno .gx-termo-pct { background:var(--ok); }
/* Marcas: una por ejercicio (y la T del test), a la derecha del tubo. */
.gx-termo-m { position:absolute; left:calc(100% + 7px); bottom:calc(var(--f, 0) * 100%); width:18px; height:18px; margin-bottom:-9px; border-radius:50%;
  display:grid; place-items:center; font-size:.62rem; font-weight:800; line-height:1; color:#8b94a7; background:#fff; border:2px solid #d3d9e3;
  transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.gx-termo-m.pasado { border-color:var(--mint-deep); color:var(--mint-deep); }
.gx-termo-m.hecho { background:var(--ok); border-color:var(--ok); color:#fff; transform:scale(1.12); }

/* — El científico — */
.gx-cient svg { display:block; height:auto; overflow:visible; }
.gx-termo .gx-cient { align-self:end; margin:0 -8px 28px 0; }
.gx-termo .gx-cient svg { width:106px; }
.gx-cient .c-todo { transform-box:fill-box; transform-origin:50% 100%; animation:gx-respira 3.4s ease-in-out infinite; }
@keyframes gx-respira { 50% { transform:translateY(-2px); } }
.gx-cient.salta svg { animation:gx-salto .55s cubic-bezier(.3,.7,.4,1) var(--saltos, 1); }
.gx-termo.lleno .gx-cient { --saltos:3; }
@keyframes gx-salto { 45% { transform:translateY(-12px); } }
.gx-cient .c-cabeza { transform-box:fill-box; transform-origin:50% 90%; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.gx-cient .c-brazo-d { transform-box:fill-box; transform-origin:0 0; transform:rotate(var(--brazo)); transition:transform .6s cubic-bezier(.34,1.3,.64,1); }
.gx-cient .c-brazo-i { transform-box:fill-box; transform-origin:100% 0; transition:transform .6s cubic-bezier(.34,1.3,.64,1); }
.gx-cient .c-ojos { transform:translate(var(--ojo-x), var(--ojo-y)); transition:transform .45s ease; }
.gx-cient .c-parpado { transform-box:fill-box; transform-origin:50% 50%; animation:gx-parpadeo 4.6s infinite; transition:opacity .3s ease; }
@keyframes gx-parpadeo { 0%, 93%, 100% { transform:scaleY(1); } 96% { transform:scaleY(.1); } }
.gx-cient .c-ceja { transform-box:fill-box; transform-origin:50% 50%; transition:transform .4s ease; }
.gx-cient .c-boca > *, .gx-cient .c-feliz, .gx-cient .c-duda, .gx-cient .c-chispas, .gx-cient .c-rubor { opacity:0; transition:opacity .3s ease; }
.gx-cient .c-duda circle { animation:gx-duda 1.8s ease-in-out infinite; animation-delay:calc(var(--n) * .25s); }
@keyframes gx-duda { 50% { opacity:.25; } }
.gx-cient .c-chispas path { transform-box:fill-box; transform-origin:50% 50%; animation:gx-chispa 1.3s ease-in-out infinite; animation-delay:calc(var(--n) * .3s); }
@keyframes gx-chispa { 0%, 100% { transform:scale(.5) rotate(0); opacity:.4; } 50% { transform:scale(1.15) rotate(45deg); opacity:1; } }
/* 0 · dudando: cabeza ladeada, una ceja arriba y puntos suspensivos. */
.gx-caras[data-cara="0"] .b0, .gx-caras:not([data-cara]) .b0, .gx-caras[data-cara="0"] .c-duda { opacity:1; }
.gx-caras[data-cara="0"] .c-cabeza { transform:rotate(-7deg); }
.gx-caras[data-cara="0"] .c-ceja-i { transform:translateY(-4px) rotate(-10deg); }
/* 1 · atento: media sonrisa y empieza a señalar. */
.gx-caras[data-cara="1"] .b1 { opacity:1; }
/* 2 · contento. */
.gx-caras[data-cara="2"] .b2 { opacity:1; }
.gx-caras[data-cara="2"] .c-ceja { transform:translateY(-2px); }
/* 3 · emocionado: boca abierta, colorete y el otro brazo arriba a medias. */
.gx-caras[data-cara="3"] .b3, .gx-caras[data-cara="3"] .c-rubor { opacity:1; }
.gx-caras[data-cara="3"] .c-ceja { transform:translateY(-4px); }
.gx-caras[data-cara="3"] .c-brazo-i { transform:rotate(40deg); }
/* 4 · eufórico: ojos de felicidad, los dos brazos arriba y chispas. */
.gx-caras[data-cara="4"] .b4, .gx-caras[data-cara="4"] .c-rubor, .gx-caras[data-cara="4"] .c-feliz, .gx-caras[data-cara="4"] .c-chispas { opacity:1; }
.gx-caras[data-cara="4"] .c-parpado { opacity:0; }
.gx-caras[data-cara="4"] .c-ceja { transform:translateY(-6px); }
.gx-caras[data-cara="4"] .c-brazo-i { transform:rotate(155deg); }

@media (max-width:899px) {
  .gx-lectura { display:block; }
  .gx-termo { position:fixed; top:auto; left:12px; right:12px; bottom:12px; height:auto; display:flex; align-items:center; padding:8px 12px 8px 8px;
    background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:100px; box-shadow:var(--shadow-md); }
  .gx-termo-vidrio { flex:1; height:auto; flex-direction:row; align-items:center; }
  .gx-termo-bulbo { order:-1; width:32px; height:32px; margin-right:-6px; }
  .gx-termo-bulbo i { width:24px; height:24px; }
  .gx-termo-tubo { flex:1; width:auto; height:18px; margin:0; border:2px solid #c9d2df; border-left:0; border-radius:0 12px 12px 0;
    background:linear-gradient(180deg, #f8fafc, #e8edf3 55%, #dce3ec); }
  .gx-termo-tubo::after { left:12px; right:12px; top:3px; bottom:auto; width:auto; height:2px; }
  .gx-termo-escala { display:none; }
  .gx-termo-liq { left:0; right:3px; top:3px; bottom:3px; border-radius:0 7px 7px 0;
    background:linear-gradient(to right, #2fb39a 0%, #5fd3b8 40%, #f2b544 75%, #ef6b4d 100%);
    clip-path:inset(0 calc(100% - var(--p) * 100%) 0 0 round 0 6px 6px 0); }
  .gx-termo-liq::after { background-size:34px 10px, 22px 10px; background-position:0 2px, 9px 6px; animation-name:gx-burbujas-h; }
  @keyframes gx-burbujas-h { to { background-position:68px 2px, 44px 6px; } }
  .gx-termo-sup { top:3px; bottom:3px; right:auto; width:6px; height:auto; left:calc(var(--p) * (100% - 3px)); margin:0 0 0 -3px; transition:left .7s cubic-bezier(.22,.61,.36,1); }
  .gx-termo-m { left:calc(var(--f, 0) * 100%); bottom:auto; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; font-size:.55rem; }
  .gx-termo-pct { margin:0 0 0 8px; }
  /* El científico, de pie sobre la barra y mirando hacia el líquido (dado la vuelta). */
  .gx-termo .gx-cient { position:absolute; right:56px; bottom:calc(100% - 10px); margin:0; transform:scaleX(-1); pointer-events:none; }
  .gx-termo .gx-cient svg { width:56px; }
}

@media (prefers-reduced-motion:reduce) {
  .gx.gx-entra > *, .gx.gx-entra .gx-card, .gx-termo.lleno .gx-termo-bulbo i, .gx-termo-liq::after, .gx-termo-sup,
  .gx-cient .c-todo, .gx-cient .c-parpado, .gx-cient .c-duda circle, .gx-cient .c-chispas path, .gx-cient.salta svg,
  .gx.gx-entra .gx-ind, .gx-ind.celebra, .gx-sello, .gx-confeti i { animation:none; }
  .gx-termo-liq, .gx-termo-sup, .gx-termo-m, .gx, .gx-nav a, .gx-cient *, .gx-ind, .gx-ind-n, .gx-ind-n::before, .gx-ind-flip, .gx-ind-ok path, .gx-nb-liq { transition:none; }
  .gx-nav-sig:hover { transform:none; }
}
.gx-pago form { max-width:620px; }
.gx-impreso { display:none; }

/* Niveles: en la portada pública y, con sesión, en #/ */
.gx-niveles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.gx-nivel { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"b span" "b small"; column-gap:14px; align-items:center; text-decoration:none; background:var(--bg-body); border:1px solid var(--border); border-left:5px solid var(--navy); border-radius:14px; padding:14px 16px; transition:border-color .2s ease, background .2s ease; min-width:0; }
a.gx-nivel:hover { background:#fff; border-color:var(--navy); }
.gx-nivel b { grid-area:b; font-family:'Plus Jakarta Sans',sans-serif; font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1; }
.gx-nivel span { grid-area:span; font-weight:800; color:var(--navy); }
.gx-nivel small { grid-area:small; font-size:.8rem; font-weight:600; color:var(--mint-deep); }
.gx-nivel.pronto { border-left-color:#c9cfda; border-style:dashed; border-left-style:solid; }
.gx-nivel.pronto b, .gx-nivel.pronto span { color:var(--text-muted); }
.gx-nivel.pronto small { color:var(--text-muted); }

/* Con sesión, los niveles ya salen arriba (dentro de la cuenta): el de la portada sobra. */
body.gx-dentro .gx-elige { display:none; }

/* Portada pública */
.gx-portada { display:grid; gap:20px; margin-bottom:64px; }
.gx-portada h2 { font-size:1.35rem; letter-spacing:-.02em; }
.gx-portada p { max-width:760px; }
.gx-plan { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; counter-reset:t; }
.gx-plan li { counter-increment:t; display:flex; gap:10px; align-items:baseline; font-size:.92rem; color:var(--dark-soft); padding:5px 0; border-bottom:1px solid var(--border); }
.gx-plan li::before { content:counter(t); font-weight:800; color:var(--text-muted); min-width:1.6em; }
.gx-plan li > span { min-width:0; }   /* las filas con cursivas: el texto en una sola pieza, para que baje de línea */
.gx-plan li.ya { color:var(--navy); font-weight:700; }
.gx-plan li.ya::after { content:'✓'; margin-left:auto; color:var(--ok); }
.gx-faq details { background:var(--bg-surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin-top:10px; }
.gx-faq summary { cursor:pointer; font-weight:700; color:var(--navy); }
.gx-faq details p { margin-top:8px; font-size:.94rem; }

@media (max-width:640px) {
  .gx-card { padding:18px 16px; }
  .gx-form-fila { grid-template-columns:1fr; }
  .gx-ops { grid-template-columns:1fr; }
  .gx-ind { grid-template-columns:28px minmax(0,1fr); }
  .gx-ind-x, .gx-ind-c { grid-column:2; justify-self:start; }
  .gx-sello { right:12px; font-size:.9rem; }
  .gx-nivelbar .gx-cient svg { width:54px; }
  .gx-gap, .gx-gap-l { width:100%; margin:4px 0; }
  .gx-plan { grid-template-columns:1fr; }
  .gx-niveles { grid-template-columns:1fr; gap:8px; }
  .gx-nav { grid-template-columns:1fr; }
  .gx-nav-sig { order:-1; align-items:flex-start; text-align:left; }
  .gx-tabla, .gx-tabla thead, .gx-tabla tbody, .gx-tabla tr, .gx-tabla th, .gx-tabla td { display:block; }
  .gx-tabla thead { display:none; }
  .gx-tabla tr { padding:8px 12px; border-bottom:1px solid var(--border); }
  .gx-tabla th, .gx-tabla td { border:0; padding:1px 0; }
}

/* Al imprimir, de las guías no sale nada: solo el aviso. */
@media print {
  body.gx-leyendo nav, body.gx-leyendo header, body.gx-leyendo footer, body.gx-leyendo #he-cc,
  body.gx-leyendo main > *:not(.gx), body.gx-leyendo .gx > *:not(.gx-impreso) { display:none !important; }
  body.gx-leyendo .gx-impreso { display:block !important; font-size:14pt; margin:40mm 0; text-align:center; }
}