:root {
    --ink:#161109; --surface:#221b16; --surface-2:#2c2319; --line:#382d21; --line-strong:#4d3f2e;
    --paper:#f2ebe0; --paper-dim:#ab9f8c; --paper-faint:#6e6353; --signal:#dc9a4f; --signal-strong:#e8ac68; --urgente:#d8524a; --cian:#4dd7ce;
  }
  * { box-sizing:border-box; }
  html,body{ height:100%; }
  body {
    margin:0; color:var(--paper); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
    min-height:100vh; display:flex; flex-direction:column;
    background:
      radial-gradient(ellipse 900px 700px at 8% 4%, rgba(126,84,42,0.32), transparent 60%),
      radial-gradient(ellipse 900px 800px at 96% 30%, rgba(24,58,52,0.38), transparent 60%),
      linear-gradient(180deg, var(--ink) 0%, #100c07 100%);
    background-color: var(--ink);
  }
  .font-display{ font-family:'Fraunces',Georgia,serif; }
  .font-mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }
  .tabular{ font-variant-numeric:tabular-nums; }
  button,input,textarea{ font-family:inherit; }
  button{ cursor:pointer; }
  ::selection{ background:var(--signal); color:var(--ink); }
  :focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }

  .controles-flotantes { position:fixed; top:20px; right:20px; display:flex; align-items:center; gap:6px; z-index:20; }
  .icono-btn { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background:rgba(34,27,22,0.6); backdrop-filter:blur(6px); color:var(--paper-faint); transition:background-color .15s,color .15s,border-color .15s; position:relative; }
  .icono-btn:hover{ background:var(--surface); color:var(--paper); border-color:var(--line-strong); }
  .popover-menu { position:absolute; top:46px; right:0; min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:6px; box-shadow:0 12px 30px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:2px; }
  .popover-item { text-align:left; border:none; background:transparent; color:var(--paper-dim); font-size:14px; padding:9px 12px; border-radius:9px; transition:background-color .15s,color .15s; }
  .popover-item:hover{ background:var(--surface-2); color:var(--paper); }

  main{ flex:1; display:flex; align-items:center; justify-content:center; padding:32px 24px; }
  .pantalla{ width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; animation:fundido .3s ease-out both; }
  @keyframes fundido{ from{opacity:0;} to{opacity:1;} }

  .marca-superior { display:flex; flex-direction:column; align-items:center; margin-bottom:8px; }
  h1.titulo-hero{ font-family:'Fraunces',serif; font-weight:600; font-size:34px; letter-spacing:-0.01em; margin:0; }
  @media (min-width:640px){ h1.titulo-hero{ font-size:46px; } }
  .subtitulo-marca{ margin-top:8px; color:var(--paper-dim); font-size:14px; }
  .subtitulo{ margin:14px 0 0; color:var(--paper-dim); font-size:15px; max-width:420px; }
  @media (min-width:640px){ .subtitulo{ font-size:17px; } }

  .tabs-modo{ margin-top:26px; display:inline-flex; padding:4px; border-radius:999px; background:rgba(34,27,22,.7); border:1px solid var(--line); gap:2px; }
  .tab-modo{ border:none; background:transparent; color:var(--paper-faint); font-size:14px; padding:9px 18px; border-radius:999px; transition:background-color .25s cubic-bezier(.16,1,.3,1),color .25s; }
  .tab-modo:hover{ color:var(--paper-dim); }
  .tab-modo.activo{ background:linear-gradient(100deg, #ffb45c, #ff6a14); color:var(--ink); font-weight:600; box-shadow:0 8px 22px -6px rgba(255,106,20,.35); }
  .descripcion-modo{ margin-top:14px; color:var(--paper-dim); max-width:440px; font-size:13px; line-height:1.6; min-height:18px; }

  .fila-config { margin-top:20px; display:flex; align-items:flex-start; justify-content:center; gap:14px; flex-wrap:wrap; }

  .selector-categoria { position:relative; }
  .selector-categoria-btn { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--paper); font-size:14px; padding:9px 14px; border-radius:999px; transition:border-color .15s; }
  .selector-categoria-btn:hover{ border-color:var(--line-strong); }
  .selector-categoria-btn .chev { color:var(--paper-faint); font-size:11px; margin-left:2px; }
  .panel-categorias { position:absolute; z-index:30; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:270px; max-height:320px; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px; box-shadow:0 16px 40px rgba(0,0,0,.4); text-align:left; }
  .opcion-categoria { width:100%; display:flex; align-items:center; gap:10px; border:none; background:transparent; color:var(--paper-dim); font-size:14px; padding:9px 12px; border-radius:10px; text-align:left; }
  .opcion-categoria:hover, .opcion-categoria.foco { background:var(--surface-2); color:var(--paper); }
  .opcion-categoria.activa { color:var(--signal); }
  .opcion-categoria .marca-check { margin-left:auto; color:var(--signal); font-size:12px; }

  .grupo-duracion{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .grupo-duracion-etiqueta{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--paper-faint); }
  .fila-pills{ display:flex; align-items:center; gap:2px; }
  .pill-duracion{ border:none; background:transparent; color:var(--paper-faint); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:6px 12px; border-radius:999px; transition:background-color .15s,color .15s; }
  .pill-duracion:hover{ color:var(--paper-dim); }
  .pill-duracion.activo{ background:var(--surface); color:var(--signal); }

  .spin-zona{ margin-top:26px; display:flex; flex-direction:column; align-items:center; position:relative; }

  .rueda-ventana{ height:132px; width:100%; max-width:560px; overflow:hidden; position:relative;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%); }
  @media (min-width:640px){ .rueda-ventana{ height:158px; } }
  .rueda-pista{ display:flex; flex-direction:column; align-items:center; }
  .rueda-item{ height:44px; display:flex; align-items:center; justify-content:center; padding:0 24px; flex-shrink:0; }
  @media (min-width:640px){ .rueda-item{ height:53px; } }
  .rueda-item .texto{ white-space:nowrap; font-family:'IBM Plex Mono',monospace; font-weight:500; text-transform:uppercase; letter-spacing:.04em;
    display:inline-block; transition:filter .15s ease-out, opacity .15s ease-out, transform .15s ease-out, color .15s ease-out, font-size .15s ease-out; }
  .rueda-item.centro .texto{ font-size:22px; color:var(--paper); filter:blur(0px); opacity:1; transform:scale(1); }
  @media (min-width:640px){ .rueda-item.centro .texto{ font-size:27px; } }
  .rueda-item.vecino .texto{ font-size:14px; color:var(--paper-faint); filter:blur(1.5px); opacity:.4; transform:scale(.9); }
  @media (min-width:640px){ .rueda-item.vecino .texto{ font-size:16px; } }
  .rueda-ventana.girando-rapido .rueda-item .texto{ filter:blur(5px); opacity:.65; }
  .rueda-item.centro .texto.impacto{ animation:rueda-impacto .5s cubic-bezier(.16,1,.3,1) both; }
  @keyframes rueda-impacto{ 0%{ transform:scale(1); } 45%{ transform:scale(1.16); } 70%{ transform:scale(.97); } 100%{ transform:scale(1); } }
  .rueda-ventana::after{ content:''; position:absolute; inset:0; border-radius:20px; background:radial-gradient(ellipse at center, rgba(232,172,104,.4), transparent 72%); opacity:0; pointer-events:none; }
  .rueda-ventana.destello-activo::after{ animation:destello-rueda .5s ease-out both; }
  @keyframes destello-rueda{ 0%{ opacity:0; } 22%{ opacity:1; } 100%{ opacity:0; } }

  .spin-boton-wrap{ position:relative; margin-top:16px; width:104px; height:104px; }
  @media (min-width:640px){ .spin-boton-wrap{ width:120px; height:120px; } }
  .spin-halo{ position:absolute; inset:-16px; border-radius:999px; background:radial-gradient(circle, rgba(255,106,20,.38), transparent 70%); opacity:.5; transition:opacity .25s, transform .25s; pointer-events:none; }
  .spin-boton-wrap:hover .spin-halo{ opacity:.85; transform:scale(1.14); }
  .spin-boton-wrap.girando .spin-halo{ opacity:.28; }
  .spin-anillo{ position:absolute; inset:-8px; border-radius:999px; border:2px solid transparent; border-top-color:#ff6a14; border-right-color:rgba(255,106,20,.35); opacity:0; pointer-events:none; }
  .spin-boton-wrap.girando .spin-anillo{ opacity:.9; animation:anillo-girar .65s linear infinite; }
  @keyframes anillo-girar{ to{ transform:rotate(360deg); } }
  #spin-boton{ position:relative; width:100%; height:100%; border-radius:999px; border:none; background:linear-gradient(100deg, #ffb45c, #ff6a14); color:var(--ink);
    font-family:'Fraunces',serif; font-weight:600; font-size:16px; letter-spacing:.02em; transition:transform .15s;
    animation:spin-reposo 4.5s ease-in-out infinite; }
  @media (min-width:640px){ #spin-boton{ font-size:18px; } }
  @keyframes spin-reposo{
    0%,100%{ box-shadow:0 0 0 1px rgba(255,106,20,.25),0 20px 40px -12px rgba(255,106,20,.4); }
    50%{ box-shadow:0 0 0 7px rgba(255,106,20,.07),0 20px 46px -10px rgba(255,106,20,.5); }
  }
  #spin-boton:hover:not(:disabled){ transform:scale(1.06); }
  #spin-boton:active:not(:disabled){ transform:scale(.95); }
  #spin-boton:disabled{ transform:scale(.96); cursor:wait; animation:none; }
  .instruccion{ margin-top:22px; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--paper-faint); }
  .fondo-oscurecido{ position:fixed; inset:0; background:#000; opacity:0; transition:opacity .35s ease; pointer-events:none; z-index:1; }
  .fondo-oscurecido.activo{ opacity:.3; }
  main{ position:relative; z-index:2; }

  .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; }

  .zona-tema{ margin-top:20px; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:230px; }

  .etiqueta-tema{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--signal); transition:opacity .25s ease; }
  .texto-tema{ margin:14px auto 0; font-family:'Fraunces',serif; font-weight:500; text-align:center; max-width:950px; line-height:1.22; color:var(--paper); padding:0 12px; }
  .texto-tema.tema-corto{ font-size:72px; }
  .texto-tema.tema-medio{ font-size:62px; }
  .texto-tema.tema-largo{ font-size:50px; }
  .texto-tema.tema-muy-largo{ font-size:40px; }
  @media (max-width:640px){
    .texto-tema{ max-width:94vw; }
    .texto-tema.tema-corto{ font-size:46px; }
    .texto-tema.tema-medio{ font-size:39px; }
    .texto-tema.tema-largo{ font-size:32px; }
    .texto-tema.tema-muy-largo{ font-size:27px; }
  }
  .texto-tema.con-blur-rapido{ filter:blur(1px); }
  .texto-tema.pop{ animation:pop-tema .11s cubic-bezier(.3,.1,.3,1) both; }
  @keyframes pop-tema{ 0%{ transform:scale(.96); opacity:.75; } 55%{ transform:scale(1.025); opacity:1; filter:blur(0); } 100%{ transform:scale(1); } }
  .texto-tema.pop-final{ animation:pop-tema-final .55s cubic-bezier(.16,1,.3,1) both; }
  @keyframes pop-tema-final{ 0%{ transform:scale(.96); opacity:.75; } 55%{ transform:scale(1.03); opacity:1; } 100%{ transform:scale(1); } }
  .texto-tema.fundido{ transition:opacity .18s ease; }

  .fila-acciones-spin{ margin-top:32px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
  .boton-spin-pill{ border:none; border-radius:999px; background:linear-gradient(100deg, #ffb45c, #ff6a14); color:var(--ink); font-weight:600; font-size:16px; padding:14px 28px; transition:transform .15s,opacity .15s,filter .15s; box-shadow:0 10px 30px -8px rgba(255,106,20,.35); }
  .boton-spin-pill:hover:not(:disabled){ transform:scale(1.02); filter:brightness(1.06); }
  .boton-spin-pill:active:not(:disabled){ transform:scale(.97); }
  .boton-spin-pill:disabled{ opacity:.55; cursor:wait; }
  .boton-secundario-pill{ border:1.5px solid var(--paper-dim); border-radius:999px; background:transparent; color:var(--paper); font-weight:500; font-size:15px; padding:12.5px 24px; transition:border-color .15s,background-color .15s,opacity .15s; }
  .boton-secundario-pill:hover:not(:disabled){ background:rgba(242,235,224,.07); border-color:var(--paper); }
  .boton-secundario-pill:disabled{ opacity:.4; cursor:not-allowed; }

  .revelado-categoria{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--signal); }
  .revelado-pregunta{ margin:18px 0 0; font-family:'Fraunces',serif; font-weight:500; font-size:27px; line-height:1.2; max-width:700px; }
  @media (min-width:640px){ .revelado-pregunta{ font-size:42px; } }
  .revelado-descripcion { margin:16px 0 0; max-width:520px; font-size:15px; line-height:1.6; color:var(--paper-dim); }

  .tarjeta-explicacion{ margin-top:22px; border:1px solid var(--line); border-radius:16px; padding:18px 24px; background:var(--surface); max-width:480px; font-size:14px; color:var(--paper-dim); line-height:1.65; }
  .fila-botones{ margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }

  .cuenta-atras-wrap{ height:150px; display:flex; align-items:center; justify-content:center; }
  .cuenta-numero{ font-family:'Fraunces',serif; font-weight:600; font-size:84px; color:var(--signal); display:inline-block; }
  .cuenta-numero.golpe{ animation:cuenta-golpe .35s cubic-bezier(.16,1,.3,1) both; }
  @keyframes cuenta-golpe{ from{opacity:0;transform:scale(.6);} to{opacity:1;transform:scale(1);} }
  .pausa-numero{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:52px; color:var(--paper); }

  .respuesta-wrap,.investigacion-wrap,.resultado-wrap{ width:100%; max-width:640px; display:flex; flex-direction:column; align-items:center; animation:subir .4s cubic-bezier(.16,1,.3,1) both; }
  @keyframes subir{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }
  .fila-superior{ width:100%; display:flex; align-items:center; justify-content:space-between; }
  .etiqueta-categoria{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:var(--paper-faint); }
  .tiempo{ font-size:14px; color:var(--paper-dim); }
  .tiempo.urgente{ color:var(--urgente); }
  .pregunta-grande{ margin:28px 0 0; font-weight:500; font-size:24px; line-height:1.25; text-align:center; }
  @media (min-width:640px){ .pregunta-grande{ font-size:31px; } }
  .investigacion-tema{ margin:20px 0 0; font-family:'Fraunces',serif; font-weight:500; font-size:23px; line-height:1.3; text-align:center; }
  @media (min-width:640px){ .investigacion-tema{ font-size:29px; } }
  .barra-progreso{ margin-top:26px; width:100%; height:3px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
  .barra-relleno{ height:100%; border-radius:999px; background:var(--signal); width:100%; transition:width 1s linear,background-color .3s; }
  .barra-relleno.urgente{ background:var(--urgente); }

  .modos-pill{ margin-top:24px; display:flex; align-items:center; gap:8px; }
  .pill{ display:flex; align-items:center; gap:6px; border:none; background:transparent; color:var(--paper-faint); font-size:14px; padding:6px 14px; border-radius:999px; transition:background-color .15s,color .15s; }
  .pill:hover:not(:disabled){ color:var(--paper-dim); }
  .pill.activo{ background:rgba(220,154,79,.1); color:var(--signal); }
  .pill:disabled{ opacity:.4; cursor:not-allowed; }

  .textarea-wrap{ position:relative; margin-top:16px; width:100%; text-align:left; }
  textarea{ width:100%; resize:none; border:none; background:transparent; padding:0; color:var(--paper); font-size:17px; line-height:1.7; outline:none; }
  textarea::placeholder{ color:var(--paper-faint); }
  .linea-inferior{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }
  .boton-mic{ position:absolute; bottom:12px; right:0; width:44px; height:44px; border-radius:999px; border:none; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--paper-dim); transition:background-color .15s,color .15s; }
  .boton-mic.escuchando{ background:var(--signal); color:var(--ink); }
  .oculto{ display:none !important; }
  .nota-escuchando{ margin-top:10px; width:100%; text-align:left; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--signal); }

  .campo-enlaces{ width:100%; margin-top:14px; border:none; border-bottom:1px solid var(--line); background:transparent; padding:8px 0; color:var(--paper-dim); font-size:13px; outline:none; }
  .campo-enlaces::placeholder{ color:var(--paper-faint); }
  .guia-detalle{ margin-top:20px; width:100%; text-align:left; }
  .guia-resumen{ cursor:pointer; font-size:12px; color:var(--paper-faint); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.1em; list-style:none; }
  .guia-resumen::-webkit-details-marker{ display:none; }
  .guia-lista{ margin:12px 0 0; padding-left:18px; color:var(--paper-dim); font-size:14px; line-height:1.9; }
  .investigacion-acciones{ margin-top:20px; display:flex; justify-content:center; }

  .investigando-wrap{ width:100%; max-width:480px; display:flex; flex-direction:column; align-items:center; animation:subir .4s cubic-bezier(.16,1,.3,1) both; }
  .investigando-tema-arriba{ font-weight:500; font-size:18px; line-height:1.4; color:var(--paper-dim); max-width:460px; }
  @media (min-width:640px){ .investigando-tema-arriba{ font-size:20px; } }
  .investigando-estado{ margin-top:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--cian); }
  .temporizador-circular-wrap{ position:relative; margin-top:24px; width:210px; height:210px; }
  @media (min-width:640px){ .temporizador-circular-wrap{ width:240px; height:240px; } }
  .temporizador-circular-wrap svg{ transform:rotate(-90deg); width:100%; height:100%; display:block; }
  .temporizador-circular-texto{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:42px; font-weight:500; color:var(--paper); }
  @media (min-width:640px){ .temporizador-circular-texto{ font-size:50px; } }
  .temporizador-circular-wrap.urgente .temporizador-circular-texto{ animation:pulso-urgente 1s ease-in-out infinite; color:var(--urgente); }
  @keyframes pulso-urgente{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
  .investigando-mensaje{ margin-top:20px; color:var(--paper-dim); font-size:15px; }
  .boton-notas{ margin-top:24px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:var(--surface); color:var(--paper-dim); font-size:14px; padding:9px 16px; border-radius:999px; transition:border-color .15s,color .15s; }
  .boton-notas:hover{ color:var(--paper); border-color:var(--line-strong); }
  .panel-notas{ margin-top:16px; width:100%; text-align:left; border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:20px; animation:subir .25s cubic-bezier(.16,1,.3,1) both; }
  .panel-notas-cabecera{ display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--paper-faint); }
  .panel-notas-guardado{ color:var(--cian); }
  .confirmacion-caja{ border:1px solid var(--line-strong); border-radius:16px; background:var(--surface); padding:18px 22px; max-width:420px; animation:subir .2s ease-out both; }
  .confirmacion-texto{ font-size:14px; color:var(--paper); margin:0 0 14px; }

  .boton-primario{ border:none; border-radius:999px; background:linear-gradient(100deg, #ffb45c, #ff6a14); color:var(--ink); font-weight:600; font-size:16px; padding:14px 26px; transition:transform .15s,opacity .15s,filter .15s; }
  .boton-primario:hover:not(:disabled){ transform:scale(1.02); filter:brightness(1.06); }
  .boton-primario:disabled{ opacity:.4; cursor:not-allowed; }
  .boton-secundario{ border:none; border-radius:999px; background:var(--surface); color:var(--paper); font-weight:500; font-size:14px; padding:12px 22px; transition:background-color .15s; }
  .boton-secundario:hover:not(:disabled){ background:var(--surface-2); }
  .boton-secundario:disabled{ opacity:.4; cursor:not-allowed; }

  .cargando-spinner{ width:32px; height:32px; border-radius:50%; border:3px solid var(--surface-2); border-top-color:var(--signal); animation:girar .8s linear infinite; }
  @keyframes girar{ to{transform:rotate(360deg);} }
  .texto-dim{ color:var(--paper-dim); margin-top:16px; }

  .badge{ display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 12px; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; border:1px solid var(--line); color:var(--paper-dim); }
  .badge.signal{ border-color:rgba(220,154,79,.35); color:var(--signal); background:rgba(220,154,79,.08); }

  .resultado-badges{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
  .resultado-puntuacion{ margin:16px 0 0; font-family:'Fraunces',serif; font-weight:600; font-size:58px; color:var(--signal); }
  .resultado-sobre10{ margin:2px 0 0; font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:var(--paper-faint); }
  .xp-pill{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:6px 14px; border:1px solid rgba(220,154,79,.3); background:rgba(220,154,79,.1); color:var(--signal); font-family:'IBM Plex Mono',monospace; font-size:12px; }
  .nota-invitado{ margin-top:14px; max-width:380px; font-size:13px; color:var(--paper-dim); }
  .nota-invitado a{ color:var(--signal); }

  .toggle-vista{ margin-top:28px; display:inline-flex; padding:4px; border-radius:999px; background:var(--surface-2); gap:2px; }
  .toggle-opcion{ border:none; background:transparent; color:var(--paper-faint); font-size:13px; padding:8px 16px; border-radius:999px; transition:background-color .15s,color .15s; }
  .toggle-opcion.activo{ background:var(--surface); color:var(--paper); }

  .tarjeta-evaluacion{ margin-top:22px; border-radius:20px; border:1px solid var(--line); background:var(--surface); padding:26px; text-align:left; width:100%; }
  @media (min-width:640px){ .tarjeta-evaluacion{ padding:32px; } }
  .resumen-texto{ font-size:17px; line-height:1.6; color:var(--paper); margin:0; }
  .grid-puntuaciones{ margin-top:28px; display:grid; grid-template-columns:1fr; gap:16px 32px; }
  @media (min-width:640px){ .grid-puntuaciones{ grid-template-columns:1fr 1fr; } }
  .fila-puntuacion-etiqueta{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; font-size:14px; }
  .fila-puntuacion-etiqueta span:first-child{ color:var(--paper-dim); }
  .barra-mini{ height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
  .barra-mini-relleno{ height:100%; border-radius:999px; background:var(--signal); width:0%; transition:width .8s cubic-bezier(.16,1,.3,1); }
  .seccion-eval{ margin-top:26px; }
  .seccion-eval-titulo{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:14px; font-weight:500; color:var(--paper); }
  .seccion-eval ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
  .seccion-eval li{ display:flex; gap:8px; font-size:14px; line-height:1.6; color:var(--paper-dim); }
  .seccion-eval li::before{ content:''; margin-top:8px; width:4px; height:4px; border-radius:50%; background:var(--paper-faint); flex-shrink:0; }
  .seccion-eval p{ margin:0; font-size:14px; line-height:1.6; color:var(--paper-dim); white-space:pre-wrap; }
  .siguiente-tema{ margin-top:26px; display:flex; align-items:center; gap:12px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2); padding:14px 18px; }
  .siguiente-tema span{ font-size:14px; color:var(--paper-dim); }
  .siguiente-tema strong{ color:var(--paper); font-weight:500; }

  .modal-fondo{ position:fixed; inset:0; background:rgba(10,7,5,.65); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; }
  .modal-caja{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px; max-width:360px; text-align:center; animation:subir .3s cubic-bezier(.16,1,.3,1) both; }
  .modal-caja h3{ margin:0 0 10px; font-family:'Fraunces',serif; font-size:20px; font-weight:600; }
  .modal-caja p{ margin:0; font-size:14px; color:var(--paper-dim); line-height:1.6; }
  .modal-caja .boton-primario{ margin-top:20px; width:100%; }
  .modal-caja-ancha{ max-width:420px; text-align:left; }
  .modal-caja-ancha h3{ text-align:center; }
  .modal-caja-ancha > p{ margin-top:2px; }
  .acerca-de-seccion{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
  .acerca-de-etiqueta{ font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--paper-faint); margin:0 0 6px; }
  .acerca-de-seccion p{ font-size:13px; }
  .acerca-de-fila{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--paper-dim); }

  .ejercicios-lista{ width:100%; max-width:560px; display:flex; flex-direction:column; gap:10px; text-align:left; }
  .ejercicio-fila{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:14px; padding:14px 18px; background:var(--surface); }
  .ejercicio-fila .info{ min-width:0; }
  .ejercicio-fila .pregunta{ font-size:14px; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:340px; }
  .ejercicio-fila .meta{ margin-top:3px; font-size:11px; color:var(--paper-faint); font-family:'IBM Plex Mono',monospace; }
  .ejercicio-fila .puntuacion{ font-family:'IBM Plex Mono',monospace; color:var(--signal); font-size:16px; flex-shrink:0; }

  footer{ padding:20px 24px; }
  .footer-inner{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
  @media (min-width:640px){ .footer-inner{ flex-direction:row; justify-content:space-between; text-align:left; } }
  .footer-nombre{ font-family:'Fraunces',serif; font-weight:500; font-size:14px; }
  .footer-aviso{ margin-top:4px; max-width:420px; font-size:12px; line-height:1.6; color:var(--paper-faint); }
  .footer-copy{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--paper-faint); }
  .enlace-acerca-de{ margin-top:4px; border:none; background:transparent; padding:0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--paper-faint); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); transition:color .15s; }
  .enlace-acerca-de:hover{ color:var(--paper-dim); }

  @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }