/* ============================================================
   CONFLUENCIA — app.css
   Paleta: roca de barda, agua de deshielo, ocre de meseta.
   ============================================================ */

:root{
  --roca:#101a20;
  --roca-2:#17242c;
  --roca-3:#1f313b;
  --borde:#2b3f4a;
  --tiza:#e8eef0;
  --tiza-2:#9fb3bc;
  --rio:#2fc0ae;
  --rio-hondo:#1b8b8b;
  --barda:#e3a13a;
  --pehuen:#7fae7a;
  --lava:#e2685c;
  --papel:#f4efe4;
  --r-g:20px;
  --r-c:14px;
  --sombra:0 10px 30px rgba(0,0,0,.35);
  --disp:"Bricolage Grotesque",Georgia,serif;
  --cuerpo:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mano:"Caveat",cursive;
}

/* Regla crítica: sin esto, cualquier .capa o .portada con display:flex
   ignora el atributo hidden y se dibuja encima de toda la pantalla. */
[hidden]{display:none !important}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--roca);
  color:var(--tiza);
  font-family:var(--cuerpo);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(47,192,174,.13), transparent 62%),
    radial-gradient(900px 520px at 8% 105%, rgba(227,161,58,.10), transparent 60%),
    repeating-linear-gradient(102deg, rgba(255,255,255,.020) 0 1px, transparent 1px 46px);
}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;margin:0 0 .4em}
h2{font-size:1.5rem;line-height:1.15}
h3{font-size:1.15rem}
p{margin:0 0 .8em}
button,input,textarea,select{font:inherit;color:inherit}
textarea,input[type=text],input[type=number],input[type=date],input[type=time],
input[type=email],input[type=tel],input[type=search],input:not([type]),select{
  width:100%;background:#0d1519;border:1px solid var(--borde);
  border-radius:12px;padding:12px 14px;color:var(--tiza);resize:vertical;
}
/* Los campos de fecha y hora traen su propio aspecto del sistema
   operativo: fondo blanco, texto oscuro y un ícono de calendario
   negro. Sobre fondo oscuro quedaban ilegibles. */
input[type=date],input[type=time]{
  min-height:52px;                       /* cómodo para el dedo */
  color-scheme:dark;                     /* el calendario también se abre oscuro */
  -webkit-appearance:none;appearance:none;
  font-variant-numeric:tabular-nums;
}
/* Con color-scheme:dark el navegador ya dibuja el iconito en claro.
   Ponerle además un invert lo vuelve a oscurecer: por eso no lleva
   ningún filtro, solo se agranda para que se pueda tocar cómodo. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  cursor:pointer;padding:6px;margin-right:-2px;transform:scale(1.25);opacity:.9
}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}
input[type=date]::-webkit-datetime-edit{padding:0}
input[type=date]::-webkit-datetime-edit-fields-wrapper{color:var(--tiza)}
input[type=date]::-webkit-datetime-edit-text{color:var(--tiza-2);padding:0 2px}
input[type=date]::-webkit-datetime-edit-month-field,
input[type=date]::-webkit-datetime-edit-day-field,
input[type=date]::-webkit-datetime-edit-year-field{color:var(--tiza)}
input[type=date]:invalid::-webkit-datetime-edit{color:var(--tiza-2)}

textarea:focus,input:focus,select:focus{outline:2px solid var(--rio);outline-offset:1px;border-color:transparent}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tiza-2) 50%),linear-gradient(135deg,var(--tiza-2) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
:focus-visible{outline:2px solid var(--rio);outline-offset:2px}
.tenue{color:var(--tiza-2);font-size:.93rem}
.etq{display:block;font-size:.85rem;color:var(--tiza-2);margin:14px 0 6px}
.fila{display:flex;gap:10px;flex-wrap:wrap}
.oculto{display:none !important}

/* ---------- botones ---------- */
.btn{
  border:0;border-radius:999px;padding:13px 22px;font-weight:600;
  cursor:pointer;transition:transform .12s ease,filter .12s ease;
}
.btn:active{transform:scale(.97)}
.btn-fuerte{background:linear-gradient(100deg,var(--rio),var(--rio-hondo));color:#04211f}
.btn-fuerte:disabled{background:#243740;color:#5d747d;cursor:not-allowed}
.btn-suave{background:transparent;border:1px solid var(--borde);color:var(--tiza)}
.btn-ocre{background:var(--barda);color:#2b1c04}
.btn-chico{padding:8px 15px;font-size:.88rem}
.enlace{background:none;border:0;color:var(--rio);cursor:pointer;font-weight:600;padding:6px}
.enlace-tenue{color:var(--tiza-2);font-weight:500}

/* ============ PORTADA ============ */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.portada-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.portada-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,26,32,.55) 0%,rgba(16,26,32,.86) 55%,var(--roca) 100%)}
.portada-cont{position:relative;padding:28px 24px 40px;max-width:640px}
.portada-sobre{font-size:.78rem;letter-spacing:.14em;color:var(--rio);margin-bottom:10px}
.portada-titulo{
  font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,17vw,6rem);
  line-height:.86;margin:0 0 6px;
  background:linear-gradient(96deg,var(--tiza) 30%,var(--rio) 75%,var(--barda));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.portada-bajada{font-family:var(--disp);font-size:1.3rem;color:var(--tiza);margin-bottom:14px}
.portada-texto{color:var(--tiza-2);max-width:46ch}
.portada-acciones{display:flex;gap:10px;margin:22px 0 18px;flex-wrap:wrap}
.portada-acciones .btn{padding:15px 30px;font-size:1.05rem}
.portada-pies{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--borde);padding-top:14px}

/* ============ ONBOARDING ============ */
.pantalla-plena{min-height:100svh;display:flex;flex-direction:column}
.onb-barra{height:4px;background:var(--roca-3)}
.onb-barra-int{height:100%;width:0;background:linear-gradient(90deg,var(--rio),var(--barda));transition:width .4s ease}
.onb-cont{flex:1;padding:30px 22px 40px;max-width:620px;margin:0 auto;width:100%}
.onb-paso{font-size:.78rem;letter-spacing:.12em;color:var(--barda);margin-bottom:8px}
.onb-cont h2{font-size:1.7rem;margin-bottom:.3em}
.opciones{display:grid;gap:8px;margin:16px 0}
.opcion{
  text-align:left;background:var(--roca-2);border:1px solid var(--borde);
  border-radius:var(--r-c);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;
}
.opcion:hover{border-color:var(--rio)}
.opcion.sel{border-color:var(--rio);background:rgba(47,192,174,.10)}
.opcion b{display:block;font-family:var(--disp)}
.opcion small{color:var(--tiza-2)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}

/* ============ CABECERA ============ */
.cab{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:12px 16px calc(12px + env(safe-area-inset-top,0px));
  background:rgba(16,26,32,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.cab-avatar,.cab-racha{
  background:var(--roca-3);border:1px solid var(--borde);border-radius:12px;
  width:auto;min-width:42px;height:42px;font-size:1.1rem;cursor:pointer;padding:0 10px;
}
.cab-medio{flex:1;min-width:0}
.cab-linea{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:5px}
.cab-nivel{font-family:var(--disp);font-weight:700}
.cab-aura{color:var(--rio);font-variant-numeric:tabular-nums}
/* el río: único elemento decorativo con movimiento propio */
.rio{height:9px;border-radius:99px;background:#0c1418;overflow:hidden;border:1px solid var(--borde)}
.rio-int{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--rio-hondo),var(--rio) 45%,var(--barda));
  background-size:220% 100%;animation:corriente 5s linear infinite;transition:width .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes corriente{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.rio-int{animation:none}}

/* ============ PANTALLA ============ */
.pantalla{padding:18px 16px 110px;max-width:760px;margin:0 auto}
.titulo-mod{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.titulo-mod h2{margin:0}
.volver{background:none;border:0;color:var(--tiza-2);cursor:pointer;padding:0 0 10px;font-weight:600}
.sub{color:var(--tiza-2);margin-bottom:18px;max-width:60ch}

/* tarjetas */
.tarjeta{
  background:var(--roca-2);border:1px solid var(--borde);
  border-radius:var(--r-g) var(--r-g) var(--r-g) 6px;padding:18px;margin-bottom:12px;
}
.tarjeta-viva{border-color:var(--rio);box-shadow:0 0 0 1px rgba(47,192,174,.25)}
.tarjeta-ocre{border-left:3px solid var(--barda)}
.tarjeta h3{margin-bottom:.25em}

/* mosaico de módulos */
.mosaico{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px}
.baldosa{
  position:relative;text-align:left;background:var(--roca-2);border:1px solid var(--borde);
  border-radius:18px;padding:14px;cursor:pointer;min-height:120px;
  display:flex;flex-direction:column;transition:border-color .15s,transform .12s;
}
.baldosa:hover{border-color:var(--rio)}
.baldosa:active{transform:scale(.98)}
/* El emoji va en el flujo, no flotando: si el título crece, lo empuja
   en vez de superponerse (pasaba en tablets con títulos largos). */
.baldosa-emo{display:block;font-size:1.5rem;line-height:1.15;margin-bottom:8px;padding-right:66px}
.baldosa b{margin-top:auto}
.baldosa b{font-family:var(--disp);font-size:1.02rem;display:block}
.baldosa small{color:var(--tiza-2);line-height:1.35;display:block;margin-top:2px}
.baldosa .marca{
  position:absolute;top:12px;right:12px;font-size:.72rem;color:var(--pehuen);
  max-width:58px;text-align:right;line-height:1.2
}

/* chips y estados */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--roca-3);border:1px solid var(--borde);border-radius:99px;padding:5px 12px;font-size:.82rem;margin:0 6px 6px 0;cursor:pointer}
.chip.sel{background:rgba(47,192,174,.15);border-color:var(--rio);color:var(--tiza)}
.puntos{color:var(--barda);font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
.ok{color:var(--pehuen)}
.mal{color:var(--lava)}

/* respuestas */
.resp{display:grid;gap:8px;margin:14px 0}
.resp button{
  text-align:left;background:var(--roca-3);border:1px solid var(--borde);
  border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .15s
}
.resp button:hover{border-color:var(--rio)}
.resp button.correcta{border-color:var(--pehuen);background:rgba(127,174,122,.14)}
.resp button.incorrecta{border-color:var(--lava);background:rgba(226,104,92,.12)}
.explic{border-left:3px solid var(--rio);padding:10px 0 10px 14px;margin:12px 0;color:var(--tiza-2)}

/* devolución del motor */
.devol{background:#0d1519;border:1px solid var(--borde);border-radius:var(--r-c);padding:16px;margin-top:14px}
.devol h4{font-family:var(--disp);margin:0 0 8px;font-size:1rem}
.devol ul{margin:0;padding-left:18px}
.devol li{margin-bottom:5px}
.devol .pregunta-motor{font-family:var(--disp);color:var(--barda);font-size:1.05rem;margin-top:12px}

/* barras del perfil */
.dim{margin-bottom:12px}
.dim-cab{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:5px}
.dim-barra{height:7px;background:#0c1418;border-radius:99px;overflow:hidden}
.dim-int{height:100%;background:linear-gradient(90deg,var(--rio-hondo),var(--rio));border-radius:99px;transition:width .7s ease}

/* bitácora / papel */
.papel{
  background:var(--papel);color:#2a2118;border-radius:6px;padding:16px 18px;
  font-family:var(--mano);font-size:1.22rem;line-height:1.5;
  background-image:repeating-linear-gradient(180deg,transparent 0 32px,rgba(42,33,24,.13) 32px 33px);
}
.papel small{font-family:var(--cuerpo);font-size:.75rem;color:#6b5c48;display:block;margin-bottom:6px}

/* reloj de pausa */
.capa{
  position:fixed;inset:0;z-index:60;background:rgba(8,13,16,.88);
  display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);
}
.capa-caja{
  background:var(--roca-2);border:1px solid var(--borde);border-radius:22px;
  padding:24px;max-width:460px;width:100%;max-height:88svh;overflow:auto;box-shadow:var(--sombra)
}
.pausa{text-align:center}
.pausa-emo{font-size:2.4rem}
.pausa-consigna{color:var(--tiza-2)}
.reloj{font-family:var(--disp);font-size:3.6rem;font-weight:800;letter-spacing:-.03em;color:var(--rio);font-variant-numeric:tabular-nums;margin:6px 0}
.pausa-nota{font-size:.85rem;color:var(--tiza-2)}
.pausa-pies{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.video-caja{text-align:center}
.video-tag{color:var(--lava);font-family:var(--disp);font-weight:700;letter-spacing:.08em;font-size:.85rem;margin-bottom:10px}
.video-marco{position:relative;border-radius:14px;overflow:hidden;background:#000;line-height:0}
.video-error{width:100%;max-height:52svh;display:block;background:#000}
.video-sonido{
  position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#fff;font-size:1.1rem;cursor:pointer
}
.video-frase{color:var(--tiza-2);max-width:38ch;margin:14px auto;font-size:.95rem}
.glitch{text-align:center;padding:26px 10px 4px}
.glitch-t{font-family:var(--disp);font-size:2.1rem;color:var(--lava);animation:tiembla .5s steps(2) 3}
@keyframes tiembla{50%{transform:translate(3px,-2px)}}
@media (prefers-reduced-motion:reduce){.glitch-t{animation:none}}

.ayuda-lista{display:grid;gap:8px;margin:14px 0}
.ayuda-item{background:var(--roca-3);border:1px solid var(--borde);border-radius:12px;padding:12px 14px;cursor:pointer}
.ayuda-item.abierta{border-color:var(--barda);cursor:default}
.ayuda-item b{display:block;font-size:.8rem;color:var(--barda)}

.insignia-caja{text-align:center}
.insignia-emo{font-size:3.2rem}

.tostada{
  position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:70;
  background:var(--roca-3);border:1px solid var(--rio);border-radius:99px;
  padding:11px 20px;font-weight:600;box-shadow:var(--sombra);max-width:90vw;text-align:center
}

/* ============ NAV ============ */
.nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
  background:rgba(16,26,32,.95);backdrop-filter:blur(12px);border-top:1px solid var(--borde);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.nav-b{
  flex:1;background:none;border:0;color:var(--tiza-2);cursor:pointer;
  padding:9px 2px 11px;font-size:.7rem;display:flex;flex-direction:column;align-items:center;gap:3px
}
.nav-b span{font-size:1.25rem;line-height:1}
.nav-b.activo{color:var(--rio)}

/* ============ ESCRITORIO ============ */
@media (min-width:900px){
  /* La barra lateral ocupa 92px fijos; el contenido se centra en
     el espacio que queda, en vez de quedar pegado a la izquierda
     con un vacío enorme a la derecha. */
  #app{padding-left:92px}
  .nav{
    top:0;bottom:0;right:auto;width:92px;flex-direction:column;justify-content:center;gap:6px;
    border-top:0;border-right:1px solid var(--borde);padding:0
  }
  .nav-b{flex:0;padding:14px 2px;font-size:.72rem}

  .cab{padding:12px 24px}
  .cab-medio{max-width:660px;margin:0 auto}   /* la barra de aura no se estira de punta a punta */

  .pantalla{padding:30px 24px 80px;max-width:880px;margin:0 auto}
  .mosaico{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .portada-cont{padding:0 0 70px 130px;max-width:760px}
  .portada{align-items:center}
}
/* Pantallas muy anchas: el texto no debe cruzar toda la pantalla,
   se lee peor. Se mantiene una columna cómoda y centrada. */
@media (min-width:1500px){
  .pantalla{max-width:1000px}
}

/* tabla docentes */
.tabla{width:100%;border-collapse:collapse;font-size:.9rem;margin:10px 0}
.tabla th,.tabla td{border-bottom:1px solid var(--borde);padding:9px 8px;text-align:left;vertical-align:top}
.tabla th{color:var(--tiza-2);font-weight:600;font-size:.8rem}
.salida{background:#0d1519;border:1px dashed var(--borde);border-radius:var(--r-c);padding:16px;white-space:pre-wrap;font-size:.94rem}
.imprimible{display:none}
@media print{
  body{background:#fff;color:#000}
  .nav,.cab,.btn,.enlace,.no-imprimir{display:none !important}
  .pantalla{padding:0}
  .tarjeta,.salida{border-color:#999;background:#fff;color:#000}
}

/* ============================================================
   TEMAS
   rio    — confluencia de ríos: pizarra, deshielo y ocre
   barda  — barda al amanecer: basalto, cielo y arena
   premium— obsidiana y oro
   ============================================================ */
html[data-tema="barda"]{
  --roca:#191410; --roca-2:#221b16; --roca-3:#2e251d; --borde:#463a2e;
  --tiza:#f2e9dd; --tiza-2:#bda893;
  --rio:#5aa8dd; --rio-hondo:#2f6f9e; --barda:#e0973c; --pehuen:#93ab6d; --lava:#d9695a;
  --papel:#f6efe1;
}
html[data-tema="barda"] body::before{
  background:
    radial-gradient(1000px 560px at 80% -6%, rgba(224,151,60,.16), transparent 60%),
    radial-gradient(900px 520px at 5% 104%, rgba(90,168,221,.12), transparent 62%),
    repeating-linear-gradient(96deg, rgba(255,255,255,.020) 0 1px, transparent 1px 52px);
}
html[data-tema="premium"]{
  --roca:#0c0a11; --roca-2:#15121d; --roca-3:#211b2e; --borde:#3a3150;
  --tiza:#f6f1e6; --tiza-2:#a99cc0;
  --rio:#e0bb63; --rio-hondo:#a8822f; --barda:#b48cf5; --pehuen:#79d3bd; --lava:#e0736a;
  --papel:#f6f0e2;
  --sombra:0 14px 44px rgba(0,0,0,.55);
}
html[data-tema="premium"] body::before{
  background:
    radial-gradient(900px 520px at 72% -10%, rgba(224,187,99,.16), transparent 60%),
    radial-gradient(800px 520px at 10% 100%, rgba(180,140,245,.14), transparent 62%),
    repeating-linear-gradient(88deg, rgba(255,255,255,.018) 0 1px, transparent 1px 58px);
}
html[data-tema="premium"] .cab{background:rgba(12,10,17,.94)}
html[data-tema="premium"] .nav{background:rgba(12,10,17,.96)}
html[data-tema="premium"] .btn-fuerte{background:linear-gradient(100deg,var(--rio),var(--rio-hondo));color:#241a03}

/* velo de transición entre temas */
.velo-tema{
  --x:50vw; --y:50vh; --r:0px;
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:radial-gradient(circle at var(--x) var(--y), rgba(224,187,99,.95) 0%, rgba(180,140,245,.55) 40%, rgba(12,10,17,.92) 70%);
  clip-path:circle(0px at var(--x) var(--y));
}
.velo-tema.abre{animation:abanico 1.15s cubic-bezier(.22,.7,.2,1) forwards}
@keyframes abanico{
  0%{clip-path:circle(0px at var(--x) var(--y));opacity:1}
  55%{clip-path:circle(var(--r) at var(--x) var(--y));opacity:1}
  100%{clip-path:circle(var(--r) at var(--x) var(--y));opacity:0}
}
@media (prefers-reduced-motion:reduce){ .velo-tema.abre{animation:desvanece .5s forwards} @keyframes desvanece{to{opacity:0}} }

/* ---------- piezas premium ---------- */
.btn-oro{
  background:linear-gradient(100deg,#e6c470,#b3873a);color:#231903;border:0;
  box-shadow:0 6px 20px rgba(179,135,58,.28)
}
.tarjeta-premium{
  border:1px solid #6d5a2e;
  background:
    linear-gradient(180deg, rgba(224,187,99,.09), rgba(180,140,245,.05)),
    var(--roca-2);
  border-radius:22px 22px 22px 8px;
}
.tarjeta-premium .puntos{color:#e0bb63}
.baldosa-lock{opacity:.72;border-style:dashed}
.baldosa-lock .marca{color:var(--tiza-2)}
.muestra{
  border-left:3px solid var(--rio);padding:10px 0 10px 14px;margin:12px 0;
  color:var(--tiza-2);font-style:italic
}
.hero-premium{padding:8px 0 18px;border-bottom:1px solid var(--borde);margin-bottom:18px}
.hero-premium h2{font-size:clamp(1.6rem,6vw,2.3rem);line-height:1.08}
.precio{font-family:var(--disp);font-size:2.6rem;font-weight:800;color:var(--rio);margin:2px 0}
.precio-viejo{color:var(--tiza-2);text-decoration:line-through;margin:0;font-size:1.05rem}
.destacado{
  font-family:var(--disp);font-size:1.16rem;line-height:1.3;color:var(--tiza);
  border-left:3px solid var(--barda);padding-left:14px;margin-top:14px
}
.dos-col{display:grid;gap:12px}
.dos-col .col-a{border-left:3px solid var(--borde);padding-left:14px;color:var(--tiza-2)}
.dos-col .col-b{border-left:3px solid var(--rio);padding-left:14px}
.bloque-sesion{display:flex;gap:12px;margin:12px 0;align-items:flex-start}
.bloque-sesion span{
  flex:0 0 30px;height:30px;border-radius:50%;border:1px solid var(--borde);
  display:grid;place-items:center;font-size:.85rem;font-family:var(--disp);color:var(--rio)
}
.bloque-sesion p{margin:2px 0 0}
@media (min-width:720px){ .dos-col{grid-template-columns:1fr 1fr;gap:22px} }

/* ============================================================
   CORRECCIONES PARA PANTALLAS CHICAS Y VENTANAS EMERGENTES
   ============================================================ */
body{overflow-wrap:anywhere}
body.fondo-quieto{overflow:hidden;position:relative}
.portada,.pantalla-plena{min-height:100vh;min-height:100svh}

/* las capas se vuelven hojas deslizables en el celular */
.capa{
  align-items:center;
  padding:16px;
  padding-top:max(16px, env(safe-area-inset-top,0px));
  padding-bottom:max(16px, env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.capa-caja{max-height:calc(100svh - 40px)}
@media (max-width:600px){
  .capa{align-items:flex-end;padding:0}
  .capa-caja{
    max-width:none;border-radius:22px 22px 0 0;
    max-height:92svh;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));
  }
  .reloj{font-size:3rem}
  .video-error{max-height:64svh}
  .tostada{bottom:calc(84px + env(safe-area-inset-bottom,0px));font-size:.9rem;padding:10px 16px}
  .pantalla{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .btn{padding:14px 20px}
  .fila .btn{flex:1 1 auto}
  .titulo-mod h2{font-size:1.35rem}
  .baldosa{min-height:112px}
}
/* nada de zoom automático al tocar un campo en iOS */
input,textarea,select{font-size:16px}
/* tablas anchas: se deslizan en vez de romper la pantalla */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px -4px}
.tabla{min-width:520px}
.aviso-caja{text-align:left}
.aviso-caja h3{color:var(--rio)}

/* ============================================================
   CONFETI, MAPA PROGRESIVO, PLUS Y COMPARTIR
   ============================================================ */
.confeti{position:fixed;inset:0;z-index:150;pointer-events:none}

/* --- camino de desbloqueo --------------------------------------
   Tarjetas en fila (ícono | texto | estado). En fila el emoji no
   puede pisar nunca al título, y el ancho es siempre el mismo sin
   importar cuánto texto tenga cada una.
   En celular: una columna, con la línea del camino a la izquierda.
   En pantalla ancha: dos columnas, sin línea (una línea partida en
   dos columnas se lee mal). */
.camino{position:relative;display:grid;gap:10px;margin-top:6px;padding-left:30px}
.camino::before{
  content:"";position:absolute;left:9px;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--rio),var(--barda));opacity:.30
}
.hito{position:relative;min-width:0}
.hito::before{
  content:"";position:absolute;left:-26px;top:calc(50% - 6px);width:11px;height:11px;border-radius:50%;
  background:var(--rio);box-shadow:0 0 0 4px var(--roca)
}
.hito.cerrado::before{background:var(--borde)}

.hito-card{
  width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  background:var(--roca-2);border:1px solid var(--borde);
  border-radius:18px 18px 18px 6px;padding:15px 16px;
  transition:border-color .15s,transform .12s,background .15s;
}
.hito-card:hover{border-color:var(--rio)}
.hito-card:active{transform:scale(.99)}
.hito.cerrado .hito-card{
  opacity:.6;border-style:dashed;cursor:default;background:transparent
}
.hito.cerrado .hito-card:hover{border-color:var(--borde)}

.hito-emo{
  flex:0 0 46px;height:46px;border-radius:14px;display:grid;place-items:center;
  font-size:1.45rem;line-height:1;background:var(--roca-3);border:1px solid var(--borde)
}
.hito.cerrado .hito-emo{font-size:1.1rem;color:var(--tiza-2)}
.hito-txt{flex:1;min-width:0}
.hito-txt b{display:block;font-family:var(--disp);font-size:1.04rem;line-height:1.25}
.hito-txt small{display:block;color:var(--tiza-2);font-size:.86rem;line-height:1.35;margin-top:1px}
.hito-estado{
  flex:0 0 auto;font-size:.74rem;font-weight:600;text-align:right;line-height:1.3;
  color:var(--pehuen);white-space:nowrap
}
.hito.cerrado .hito-estado{color:var(--barda)}
.hito-estado span{display:block;color:var(--tiza-2);font-weight:500;font-size:.7rem}
.hito-estado .tilde{font-size:1.05rem;color:var(--pehuen);font-weight:700}

@media (min-width:820px){
  .camino{grid-template-columns:1fr 1fr;gap:12px;padding-left:0}
  .camino::before{display:none}
  .hito::before{display:none}
}
@media (max-width:420px){
  .camino{padding-left:24px}
  .hito::before{left:-21px}
  .hito-card{padding:13px;gap:11px}
  .hito-emo{flex-basis:40px;height:40px;font-size:1.25rem}
  .hito-txt small{font-size:.82rem}
  /* en pantallas muy angostas el estado va debajo del título */
  .hito-estado{display:none}
  .hito.cerrado .hito-txt small::after{
    content:" · " attr(data-candado);color:var(--barda);font-weight:600
  }
}

.candado{color:var(--barda);font-size:.78rem;font-weight:600;display:block;margin-top:6px}
.barrita{height:5px;background:#0c1418;border-radius:99px;overflow:hidden;margin-top:8px}
.barrita i{display:block;height:100%;background:linear-gradient(90deg,var(--rio-hondo),var(--barda));border-radius:99px;transition:width .6s ease}

/* --- banner de Plus activo --- */
.plus-banner{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(100deg,rgba(224,187,99,.16),rgba(180,140,245,.10));
  border:1px solid #6d5a2e;border-radius:16px;padding:12px 14px;margin-bottom:12px
}
.plus-banner b{font-family:var(--disp);display:block}
.plus-banner .reloj-mini{margin-left:auto;color:#e0bb63;font-weight:700;white-space:nowrap;font-size:.9rem}

/* --- tarjetas de compartir --- */
.compartir-card{
  border:1px dashed var(--rio);border-radius:var(--r-g) var(--r-g) var(--r-g) 6px;
  padding:16px;margin-bottom:12px;background:rgba(47,192,174,.06)
}
.compartir-card h3{margin-bottom:.2em}
.bono{
  display:inline-block;background:var(--rio);color:#04211f;border-radius:99px;
  padding:2px 10px;font-size:.78rem;font-weight:700;margin-left:6px
}

/* ============================================================
   MODO RÁPIDO
   ============================================================ */
.rap-modos{display:grid;gap:10px}
.rap-modo{
  display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;width:100%;box-sizing:border-box;
  background:var(--roca-2);border:1px solid var(--borde);border-radius:18px;padding:15px 16px;
  transition:border-color .15s,transform .12s
}
.rap-modo:hover{border-color:var(--rio)} .rap-modo:active{transform:scale(.99)}
.rap-modo-emo{flex:0 0 44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:1.35rem;background:var(--roca-3);border:1px solid var(--borde)}
.rap-modo b{display:block;font-family:var(--disp);font-size:1.02rem}
.rap-modo small{display:block;color:var(--tiza-2);font-size:.85rem;line-height:1.3}
.rap-mezcla{border-style:dashed;border-color:var(--barda)}

.rap-cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.9rem}
.rap-vidas{color:var(--lava);font-size:1.15rem;letter-spacing:2px}
.rap-vidas .vacio{opacity:.22}
.rap-cuenta{color:var(--tiza-2)}
.rap-combo{color:var(--barda);font-weight:700}
.rap-barra{height:6px;background:#0c1418;border-radius:99px;overflow:hidden;margin-bottom:22px}
.rap-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--rio),var(--barda));
  border-radius:99px;transition:width .1s linear}
.rap-pregunta{
  font-family:var(--disp);font-size:clamp(1.35rem,5.2vw,1.9rem);line-height:1.25;
  margin:10px 0 22px;min-height:2.4em;display:flex;align-items:center
}
.rap-opciones{display:grid;gap:10px}
.rap-op{
  text-align:left;background:var(--roca-2);border:1px solid var(--borde);border-radius:14px;
  padding:16px 18px;cursor:pointer;font-size:1.02rem;transition:border-color .12s,background .12s
}
.rap-op:hover:not(:disabled){border-color:var(--rio)}
.rap-op.bien{border-color:var(--pehuen);background:rgba(127,174,122,.16)}
.rap-op.mal{border-color:var(--lava);background:rgba(226,104,92,.14)}
.rap-exp{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--roca-2);
  border-left:3px solid var(--borde);font-size:.94rem}
.rap-exp.ok{border-left-color:var(--pehuen)} .rap-exp.mal{border-left-color:var(--lava)}
.rap-resultado{font-family:var(--disp);font-size:3.6rem;font-weight:800;color:var(--rio);line-height:1}
.rap-resultado span{font-size:1.5rem;color:var(--tiza-2)}

/* ============================================================
   EL CASO
   ============================================================ */
.caso-cap .caso-esc{
  font-size:1.08rem;line-height:1.6;border-left:3px solid var(--barda);
  padding-left:16px;margin:14px 0 20px;color:var(--tiza)
}

/* ============================================================
   LO QUE NO ESTÁ EN EL MENÚ
   ============================================================ */
.secreto{text-align:center;padding:30px 6px;max-width:520px;margin:0 auto}
.secreto-emo{font-size:3.4rem;margin-bottom:10px;animation:respira 3.5s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.09);opacity:.85}}
@media (prefers-reduced-motion:reduce){.secreto-emo{animation:none}}
.secreto h2{font-size:1.7rem}
.secreto-c{font-size:1.1rem;color:var(--tiza);max-width:34ch;margin:10px auto 18px}
.puerta{
  display:block;width:100%;box-sizing:border-box;text-align:center;cursor:pointer;
  background:linear-gradient(160deg,rgba(224,187,99,.10),transparent);
  border:1px dashed var(--barda);border-radius:20px;padding:22px;margin-bottom:12px
}
.puerta-emo{font-size:2rem;display:block;animation:respira 3.5s ease-in-out infinite}

/* ============================================================
   HIPERFOCO
   ============================================================ */
.foco-portada{margin-bottom:18px}
.foco-titulo{font-size:clamp(2rem,8vw,2.9rem);line-height:1.02;margin-bottom:10px}
.foco-modos{display:grid;gap:10px}
.foco-modo{
  display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  background:var(--roca-2);border:1px solid var(--borde);border-radius:18px;padding:15px 16px;
  transition:border-color .15s,transform .12s
}
.foco-modo:hover{border-color:var(--rio)} .foco-modo:active{transform:scale(.99)}
.foco-modo-emo{flex:0 0 42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:1.3rem;background:var(--roca-3);border:1px solid var(--borde)}
.foco-modo-txt{flex:1;min-width:0}
.foco-modo-txt b{display:block;font-family:var(--disp);font-size:1.02rem}
.foco-modo-txt small{display:block;color:var(--tiza-2);font-size:.85rem;line-height:1.3}
.foco-modo-min{flex:0 0 auto;font-family:var(--disp);font-size:1.5rem;font-weight:800;color:var(--rio);text-align:center;line-height:1}
.foco-modo-min span{display:block;font-size:.62rem;color:var(--tiza-2);font-weight:500;letter-spacing:.06em}

/* --- el switch --- */
.switch-pantalla{text-align:center;padding:18px 6px 40px;max-width:460px;margin:0 auto}
.switch-sobre{font-size:.74rem;letter-spacing:.16em;color:var(--rio);margin-bottom:8px}
.switch-titulo{font-size:clamp(1.9rem,7vw,2.6rem);margin-bottom:8px}
.switch-bajada{color:var(--tiza-2);max-width:32ch;margin:0 auto 30px}
.switch{background:none;border:0;padding:0;cursor:pointer;display:inline-block}
.switch-riel{
  display:block;width:132px;height:66px;border-radius:99px;position:relative;
  background:#0b1116;border:1px solid var(--borde);
  transition:background .5s ease,border-color .5s ease,box-shadow .5s ease
}
.switch-bola{
  position:absolute;top:5px;left:5px;width:54px;height:54px;border-radius:50%;
  background:linear-gradient(160deg,#4a5b64,#2a373f);
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.3,1.5,.5,1),background .5s ease,box-shadow .5s ease
}
.switch.encendido .switch-riel{
  background:linear-gradient(100deg,rgba(47,192,174,.28),rgba(224,161,58,.24));
  border-color:var(--rio);
  box-shadow:0 0 0 1px rgba(47,192,174,.45), 0 0 32px rgba(47,192,174,.55), 0 0 70px rgba(47,192,174,.28)
}
.switch.encendido .switch-bola{
  transform:translateX(66px);
  background:linear-gradient(160deg,#eafffb,#9fe8dd);
  box-shadow:0 0 20px rgba(47,192,174,.85), 0 3px 10px rgba(0,0,0,.4)
}
.switch-pie{color:var(--tiza-2);font-size:.85rem;margin-top:14px}
.switch-reglas{
  text-align:left;color:var(--tiza-2);font-size:.88rem;line-height:1.5;
  max-width:34ch;margin:26px auto 18px;padding-left:18px
}
.switch-reglas li{margin-bottom:6px}

/* --- transición a negro + video --- */
.capa-foco{
  position:fixed;inset:0;z-index:120;background:#000;
  display:flex;align-items:center;justify-content:center;opacity:0
}
.capa-foco.entrando{animation:aNegro .55s ease forwards}
.capa-foco.saliendo{animation:deNegro .5s ease forwards}
@keyframes aNegro{from{opacity:0}to{opacity:1}}
@keyframes deNegro{from{opacity:1}to{opacity:0}}
.video-foco{max-width:100%;max-height:100svh;object-fit:contain}
.foco-saltar{
  position:fixed;bottom:calc(26px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:99px;padding:9px 20px;font-size:.85rem;cursor:pointer;backdrop-filter:blur(6px)
}

/* Durante el bloque no hay nada más en pantalla: se esconden la
   barra de aura y la navegación. Nada para tocar salvo el reloj. */
body.en-foco .cab, body.en-foco .nav{display:none}
body.en-foco .pantalla{padding-top:max(28px, env(safe-area-inset-top,0px));padding-bottom:40px}
body.en-foco #app{padding-left:0}

/* --- el bloque en curso --- */
.foco-vivo{text-align:center;padding:10px 4px 30px;max-width:480px;margin:0 auto}
.foco-sobre{font-size:.74rem;letter-spacing:.16em;color:var(--rio);margin-bottom:16px}
.foco-anillo{position:relative;width:min(76vw,290px);margin:0 auto 20px}
.foco-anillo svg{width:100%;height:auto;transform:rotate(-90deg)}
.anillo-base{fill:none;stroke:#0d1519;stroke-width:9}
.anillo-int{fill:none;stroke:var(--rio);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.en-descanso .anillo-int{stroke:var(--barda)}
.foco-reloj{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:clamp(3rem,13vw,4.4rem);
  color:var(--tiza);font-variant-numeric:tabular-nums;letter-spacing:-.02em
}
.foco-msg{color:var(--tiza-2);min-height:2.6em;max-width:30ch;margin:0 auto 12px;font-size:1rem}
.foco-escapadas{color:var(--lava);font-size:.9rem;margin-bottom:14px}
.foco-tilde{font-size:4rem;color:var(--pehuen);margin:8px 0}

/* --- videos de motivación --- */
.motiv-caja{text-align:center;max-width:400px}
.motiv-frase{font-family:var(--disp);font-size:1.2rem;margin:14px 0 6px}

/* --- sello del reto de método --- */
#capaSello{background:rgba(8,13,16,.72)}
.sello-caja{
  text-align:center;background:var(--roca-2);border:2px solid var(--barda);
  border-radius:22px;padding:26px 30px;box-shadow:0 0 46px rgba(224,161,58,.35)
}
.sello-caja.cae{animation:sello .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes sello{
  0%{transform:scale(2.4) rotate(-14deg);opacity:0}
  60%{transform:scale(.94) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
@media (prefers-reduced-motion:reduce){.sello-caja.cae{animation:none}}
.sello-emo{font-size:3rem}
.sello-caja b{display:block;font-family:var(--disp);font-size:1.25rem;margin-top:4px}
.sello-caja small{display:block;color:var(--tiza-2);margin-bottom:10px}

/* --- tarjeta del norte en el inicio --- */
.norte-card{
  border-left:3px solid var(--barda);padding:12px 0 12px 16px;margin-bottom:14px
}
.norte-card p{margin:0;font-family:var(--disp);font-size:1.06rem;line-height:1.35}
.norte-card small{color:var(--tiza-2);font-size:.78rem;letter-spacing:.1em}

@media (max-width:420px){
  .rap-pregunta{font-size:1.28rem;min-height:2.2em}
  .rap-op{padding:14px 15px}
  .switch-riel{width:120px;height:60px}
  .switch-bola{width:48px;height:48px}
  .switch.encendido .switch-bola{transform:translateX(60px)}
  .foco-modo-min{font-size:1.3rem}
}


/* --- invitación al acceso directo --- */
.atajo-caja{text-align:center}
.atajo-icono{margin-bottom:14px}
.atajo-icono img{
  width:76px;height:76px;border-radius:18px;display:block;margin:0 auto 8px;
  box-shadow:0 10px 26px rgba(0,0,0,.45);border:1px solid var(--borde)
}
.atajo-icono span{font-size:.78rem;color:var(--tiza-2)}

/* ============================================================
   EL APARATO — cátedra abierta
   Identidad propia dentro del sistema: formas geométricas
   recortadas, alto contraste y una sola idea por pantalla.
   ============================================================ */
.ap-portada{padding:26px 0 20px;border-bottom:1px solid var(--borde);margin-bottom:18px;position:relative}
.ap-portada.chico{padding:18px 0 14px}
.ap-marca{display:flex;gap:8px;align-items:flex-end;height:56px;margin-bottom:16px}
.ap-forma{display:block;background:var(--rio)}
.ap-f1{width:56px;height:56px;border-radius:50%;background:#F93A66}
.ap-f2{width:26px;height:44px;background:var(--barda)}
.ap-f3{width:70px;height:14px;background:var(--rio);align-self:center}
.ap-sobre{font-size:.72rem;letter-spacing:.2em;color:var(--rio);margin-bottom:6px}
.ap-titulo{
  font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(2.6rem,13vw,4.6rem);margin:0 0 12px
}
.ap-bajada{font-family:var(--disp);font-size:clamp(1.05rem,4.4vw,1.4rem);line-height:1.25;color:var(--tiza);max-width:26ch}

.ap-recorridos{display:grid;gap:10px}
.ap-recorrido{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;
  text-align:left;cursor:pointer;background:var(--roca-2);border:1px solid var(--borde);
  border-radius:18px;padding:16px;transition:border-color .15s,transform .12s
}
.ap-recorrido:hover{border-color:var(--rio)} .ap-recorrido:active{transform:scale(.99)}
.ap-rec-emo{flex:0 0 44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:1.3rem;background:var(--roca-3);border:1px solid var(--borde)}
.ap-recorrido b{display:block;font-family:var(--disp);font-size:1.04rem}
.ap-recorrido small{display:block;color:var(--tiza-2);font-size:.86rem;line-height:1.35}
.ap-tilde{position:absolute;top:12px;right:14px;color:var(--pehuen);font-weight:700}

/* --- el reproductor --- */
.ap-cabecera{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.ap-chip{background:var(--roca-3);border:1px solid var(--borde);border-radius:99px;padding:5px 12px;font-size:.82rem}
.ap-progreso{color:var(--tiza-2);font-size:.82rem}

.ap-marco{position:relative;margin-bottom:12px}
.ap-video{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:16px;overflow:hidden;border:1px solid var(--borde)
}
.ap-video iframe, .ap-video #apPlayer{position:absolute;inset:0;width:100%;height:100%;border:0}
.ap-cargando{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;
  color:var(--tiza-2);font-size:.92rem;pointer-events:none
}
.ap-cargando a{color:var(--rio);pointer-events:auto}

/* Cuando aparece la pregunta el video se achica y queda arriba,
   para que se siga viendo el contexto mientras se responde. */
@media (max-width:820px){
  .ap-marco.achicado{
    position:sticky;top:0;z-index:20;margin:0 -16px 12px;padding:6px 16px 8px;
    background:var(--roca);border-bottom:1px solid var(--borde)
  }
  .ap-marco.achicado .ap-video{max-width:210px;margin-left:auto;margin-right:auto;border-radius:12px}
}

.ap-puntos{display:flex;gap:6px;margin-bottom:16px}
.ap-punto{flex:1;height:4px;border-radius:99px;background:var(--roca-3);transition:background .3s}
.ap-punto.hecho{background:linear-gradient(90deg,var(--rio),var(--barda))}

/* --- la pregunta --- */
.ap-pregunta{
  background:var(--roca-2);border:1px solid var(--rio);border-radius:20px 20px 20px 6px;
  padding:20px 18px;animation:apEntra .38s cubic-bezier(.2,.9,.3,1)
}
@keyframes apEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ap-pregunta{animation:none}}
.ap-pregunta h2{font-size:clamp(1.3rem,5.4vw,1.7rem);line-height:1.15;margin:6px 0 10px}
.ap-enunciado{font-size:1.05rem;line-height:1.5;color:var(--tiza);margin-bottom:16px}
.ap-opciones{display:grid;gap:9px}
.ap-op{
  text-align:left;background:var(--roca-3);border:1px solid var(--borde);border-radius:14px;
  padding:15px 16px;cursor:pointer;font-size:1rem;line-height:1.35;transition:border-color .12s,background .12s
}
.ap-op:hover{border-color:var(--rio);background:rgba(47,192,174,.08)}
.ap-op:active{transform:scale(.99)}

.ap-respuesta{
  background:var(--roca-2);border:1px solid var(--borde);border-radius:20px 20px 20px 6px;padding:20px 18px;
  animation:apEntra .38s cubic-bezier(.2,.9,.3,1)
}
@media (prefers-reduced-motion:reduce){.ap-respuesta{animation:none}}
.ap-elegiste{color:var(--tiza-2);font-size:.9rem;margin-bottom:10px}
.ap-devolucion{font-size:1.04rem;line-height:1.55;margin-bottom:12px}
.ap-cierre{
  font-family:var(--disp);font-size:1.06rem;line-height:1.3;color:var(--barda);
  border-left:3px solid var(--barda);padding-left:14px;margin-bottom:16px
}

/* --- tarjeta destacada en el inicio --- */
.ap-destacado{
  position:relative;display:block;width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  background:linear-gradient(120deg,#16242c,#101a20);border:1px solid var(--borde);
  border-radius:20px 20px 20px 6px;padding:18px 16px;margin-bottom:12px;overflow:hidden
}
.ap-destacado b{display:block;font-family:var(--disp);font-size:1.24rem;line-height:1.15;margin:4px 0 4px}
.ap-destacado small{display:block;color:var(--tiza-2);line-height:1.4;max-width:34ch}
.ap-destacado-formas{position:absolute;top:0;right:-10px;height:100%;display:flex;align-items:center;gap:7px;opacity:.5}
.ap-destacado-formas i{display:block}
.ap-destacado-formas i:nth-child(1){width:44px;height:44px;border-radius:50%;background:#F93A66}
.ap-destacado-formas i:nth-child(2){width:16px;height:60px;background:var(--barda)}
.ap-destacado-formas i:nth-child(3){width:30px;height:30px;background:var(--rio)}
@media (max-width:420px){ .ap-destacado-formas{opacity:.28} .ap-destacado small{max-width:24ch} }

@media (min-width:900px){
  .ap-marco{max-width:760px}
  .ap-pregunta,.ap-respuesta{max-width:760px}
}

/* ============================================================
   AURA — pantalla propia
   ============================================================ */
.aura-hero{text-align:center;padding:6px 0 20px;margin-bottom:16px;border-bottom:1px solid var(--borde)}
.aura-video{
  width:min(58vw,190px);aspect-ratio:1;margin:0 auto 14px;border-radius:22px;
  overflow:hidden;background:#0d1519;border:1px solid var(--borde);line-height:0
}
.aura-video video{width:100%;height:100%;object-fit:cover;display:block}
.aura-sello{font-size:.72rem;letter-spacing:.2em;color:var(--rio);margin-bottom:4px}
.aura-numero{
  font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:.9;
  font-size:clamp(3.4rem,17vw,5.4rem);color:var(--barda);font-variant-numeric:tabular-nums
}
.aura-nivel{font-family:var(--disp);font-size:1.16rem;margin:8px 0 2px}
.aura-desc{color:var(--tiza-2);max-width:30ch;margin:0 auto}

.aura-fuente{margin-bottom:12px}
.aura-fuente:last-child{margin-bottom:0}
.aura-fuente-cab{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;margin-bottom:5px}
.aura-fuente-cab b{color:var(--barda);font-variant-numeric:tabular-nums;white-space:nowrap}
.aura-fuente-barra{height:6px;background:#0c1418;border-radius:99px;overflow:hidden}
.aura-fuente-barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--rio-hondo),var(--rio))}

.aura-dist{display:flex;align-items:flex-end;gap:8px;height:110px;margin:6px 0 10px}
.aura-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.aura-col i{display:block;width:100%;border-radius:8px 8px 3px 3px;background:var(--roca-3)}
.aura-col.yo i{background:linear-gradient(180deg,var(--barda),var(--rio))}
.aura-col small{color:var(--tiza-2);font-size:.68rem;margin-top:6px}
.aura-col.yo small{color:var(--barda);font-weight:700}

.cod-aura{
  display:inline-block;background:var(--barda);color:#231400;border-radius:7px;
  padding:1px 8px;font-weight:700;font-size:.82rem;margin-right:4px
}

/* tarjeta destacada en el inicio */
.aura-tarjeta{
  display:block;width:100%;box-sizing:border-box;text-align:left;cursor:pointer;
  background:var(--roca-2);border:1px solid var(--borde);
  border-radius:var(--r-g) var(--r-g) var(--r-g) 6px;padding:16px;margin-bottom:12px;
  transition:border-color .15s
}
.aura-tarjeta:hover{border-color:var(--barda)}
.aura-tarjeta-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.aura-tarjeta-n{
  font-family:var(--disp);font-weight:800;font-size:1.9rem;color:var(--barda);
  line-height:1;font-variant-numeric:tabular-nums
}
.aura-tarjeta small{display:block;color:var(--tiza-2);font-size:.84rem;line-height:1.4;margin-top:8px}

/* el video dentro de la ventana de recompensa */
.rec-video{
  width:min(52vw,168px);aspect-ratio:1;margin:0 auto 10px;border-radius:20px;
  overflow:hidden;background:#0d1519;line-height:0
}
.rec-video video{width:100%;height:100%;object-fit:cover;display:block}

/* En pantallas angostas la tabla de aura muestra apodo y aura: la
   escuela se cae, porque el dato que importa quedaba fuera de vista. */
@media (max-width:520px){
  .col-escuela{display:none}
  #auraOtros .tabla{min-width:0;width:100%}
}

/* ============================================================
   SCROLL CÁTEDRAS — feed vertical
   Anclaje por tarjeta: cada video ocupa la pantalla y el scroll
   se detiene en cada uno, como en Reels.
   ============================================================ */
body.en-feed{overflow:hidden}
body.en-feed .cab,
body.en-feed .nav{display:none}
body.en-feed .pantalla{padding:0;max-width:none;margin:0}
body.en-feed #app{padding-left:0}

.feed{
  position:fixed;inset:0;z-index:35;overflow-y:auto;overscroll-behavior-y:contain;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;background:#07040f;
}
.feed-item{
  position:relative;height:100svh;min-height:100svh;flex:0 0 auto;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.feed-fondo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.25);filter:blur(34px) saturate(1.15) brightness(.55);
}
.feed-velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(7,4,15,.80) 0%, rgba(7,4,15,.58) 26%, rgba(7,4,15,.58) 62%, rgba(7,4,15,.92) 100%);
}

/* El fondo es solo ambiente: la miniatura es 16:9 y la tarjeta es
   vertical, así que estirarla a pantalla completa deforma todo. Va
   muy desenfocada, como el color del ambiente, y el contenido real
   se muestra aparte en su proporción correcta. */
.feed-cuerpo{
  position:relative;z-index:2;margin-top:auto;padding:96px 20px 0;
  display:flex;flex-direction:column;gap:13px;align-items:flex-start;
}
.feed-tema{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#46E0C4;
}
.feed-frase{
  font-family:var(--disp);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.5rem,6.2vw,2.1rem);line-height:1.16;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.5);margin:0;max-width:19ch;
}
.feed-frase-chica{font-family:var(--disp);font-size:1.2rem;line-height:1.3}

/* La caja del video, siempre en 16:9 */
.feed-caja{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#000;cursor:pointer;box-shadow:0 18px 44px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);line-height:0;
}
.feed-mini{width:100%;height:100%;object-fit:cover;display:block}
.feed-caja iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.feed-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);
  border:1.5px solid rgba(255,255,255,.7);color:#fff;font-size:1.5rem;
  display:grid;place-items:center;padding-left:5px;backdrop-filter:blur(4px);
  transition:transform .15s;
}
.feed-caja:active .feed-play{transform:translate(-50%,-50%) scale(.9)}
.feed-caja.andando .feed-play,
.feed-caja.andando .feed-mini{display:none}
.feed-tocar{
  align-self:flex-start;background:none;border:0;color:rgba(255,255,255,.62);
  padding:0;font-size:.85rem;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}

/* Los Shorts sí ocupan la pantalla entera: son verticales */
.feed-item.es-vertical .feed-caja{aspect-ratio:9/16;max-height:62svh;margin:0 auto}

/* Barra de arriba */
.feed-barra{
  position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;
  background:linear-gradient(180deg,rgba(7,4,15,.75),transparent);
}
.feed-titulo{
  flex:1;text-align:center;font-family:var(--disp);font-weight:700;color:#fff;font-size:1.02rem;
}
.feed-salir,.feed-son{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.35);color:#fff;font-size:1.05rem;cursor:pointer;backdrop-filter:blur(6px);
  display:grid;place-items:center;
}

/* Pie con acciones, a la derecha como en Reels */
.feed-pie{
  position:relative;z-index:5;display:flex;align-items:flex-end;gap:14px;
  padding:16px 18px calc(22px + env(safe-area-inset-bottom,0px));
}
/* Con el feed abierto el aviso de aura sube, para no quedar encima
   de los botones de guardar y enviar. */
body.en-feed .tostada{bottom:auto;top:calc(64px + env(safe-area-inset-top,0px));font-size:.85rem;padding:8px 16px}
.feed-datos{flex:1;min-width:0;color:#fff}
.feed-datos b{display:block;font-family:var(--disp);font-size:1.05rem;line-height:1.25}
.feed-datos small{color:rgba(255,255,255,.66)}
.feed-acciones{display:flex;flex-direction:column;gap:14px}
.feed-b{
  background:none;border:0;color:#fff;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:2px;min-width:52px;padding:4px;
}
.feed-b span{
  font-size:1.5rem;line-height:1;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .12s
}
.feed-b:active span{transform:scale(.9)}
.feed-b.activo span{background:rgba(255,216,77,.9);color:#231400;border-color:transparent}
.feed-b small{font-size:.66rem;color:rgba(255,255,255,.72)}

/* Tarjeta de pregunta */
.feed-preg{justify-content:center;background:linear-gradient(160deg,#1B1536,#0d0820)}
.feed-preg-caja{
  position:relative;z-index:2;margin:0 20px;max-width:36ch;align-self:center;text-align:left;
}
.feed-preg-emo{font-size:2.6rem;margin-bottom:8px}
.feed-preg h2{font-size:clamp(1.5rem,6vw,2rem);line-height:1.14;margin:6px 0 10px;color:#fff}
.feed-preg-p{font-size:1.08rem;line-height:1.5;color:rgba(255,255,255,.86);margin-bottom:14px}
.feed-preg textarea{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.22);color:#fff}

.feed-fin{justify-content:center;background:linear-gradient(160deg,#16122B,#07040f);text-align:center}
.feed-fin-caja{margin:0 24px;align-self:center}

@media (min-width:900px){
  /* En computadora el feed se muestra como una columna angosta y
     centrada, igual que en el celular: a pantalla completa se vería
     absurdo. Ojo: NO usar flex en el contenedor, porque las
     tarjetas se encogen y el feed se queda sin scroll. */
  .feed{background:#05030c}
  .feed-item{width:min(430px,100%);margin:0 auto}
  .feed-barra{width:min(430px,100%);left:50%;transform:translateX(-50%)}
}

/* ============================================================
   ANILLO DE AURA — el mismo de Expediente Abierto
   Dónut de conic-gradient con el centro recortado. El porcentaje
   entra por la variable --p.
   ============================================================ */
.anillo-panel{
  display:flex;align-items:center;gap:18px;width:100%;box-sizing:border-box;
  text-align:left;cursor:pointer;background:var(--roca-2);border:1px solid var(--borde);
  border-radius:var(--r-g) var(--r-g) var(--r-g) 6px;padding:18px 16px;margin-bottom:14px;
  transition:border-color .15s,transform .12s;
}
.anillo-panel:hover{border-color:var(--barda)}
.anillo-panel:active{transform:scale(.99)}
.anillo-caja{
  flex:0 0 92px;width:92px;height:92px;border-radius:50%;position:relative;
  display:grid;place-items:center;align-content:center;
  background:conic-gradient(var(--barda) calc(var(--p,0)*1%), rgba(255,255,255,.08) 0);
  box-shadow:0 0 18px rgba(227,161,58,.30), inset 0 0 12px rgba(227,161,58,.12);
}
.anillo-caja::before{
  content:"";position:absolute;inset:9px;border-radius:50%;background:var(--roca-2);
}
.anillo-caja b{
  position:relative;font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1;
  color:var(--barda);font-variant-numeric:tabular-nums;
}
.anillo-caja b i{font-style:normal;font-size:.8rem;margin-left:1px}
.anillo-caja span{
  /* El texto tiene que caber DENTRO del círculo interior: si se
     pasa, queda pegado al anillo y se ve sucio. */
  position:relative;display:block;text-align:center;font-size:.55rem;color:var(--tiza-2);
  letter-spacing:.01em;margin-top:2px;max-width:70%;line-height:1.15;
}
.anillo-datos{flex:1;min-width:0;display:block}
.anillo-total{
  display:block;font-family:var(--disp);font-weight:800;font-size:2rem;line-height:1.05;
  color:var(--barda);font-variant-numeric:tabular-nums;margin:2px 0 4px;
}
.anillo-datos small{display:block;color:var(--tiza-2);font-size:.85rem;line-height:1.35}
.anillo-hoy{
  display:inline-block;margin-top:8px;font-size:.78rem;color:var(--tiza-2);
  background:var(--roca-3);border-radius:999px;padding:4px 10px;
}
@media (max-width:400px){
  .anillo-caja{flex-basis:82px;width:82px;height:82px}
  .anillo-caja b{font-size:1.3rem}
  .anillo-total{font-size:1.7rem}
}
.anillo-mas{
  display:block;margin-top:8px;font-size:.8rem;font-weight:600;color:var(--rio);
}

/* El clip corto en la pantalla del switch, como las fichas de
   Expediente Abierto: chico, en bucle y sin sonido. */
.foco-clip{
  width:min(42vw,150px);aspect-ratio:1;margin:0 auto 22px;border-radius:20px;
  overflow:hidden;background:#0d1519;border:1px solid var(--borde);line-height:0;
}
.foco-clip video{width:100%;height:100%;object-fit:cover;display:block}

/* Con una ventana abierta, el aviso flotante sube al borde superior.
   Estaba apareciendo en el medio de la ventana de recompensa y
   tapaba el video y el código. */
body.fondo-quieto .tostada{
  bottom:auto; top:calc(14px + env(safe-area-inset-top,0px)); z-index:80;
}