/* ============================================================
   CURSONICA - Plataforma de miembros
   Sistema visual unico para login, panel, clases, recursos y cuenta.
   Valores tomados de marca/tokens.css. Estructura tipo Beemo,
   estetica Cursonica: aire, tipografia contenida, un solo amarillo.
   ============================================================ */

:root{
  --c-azul-900:#06276B; --c-azul-700:#2862FC; --c-azul-500:#1AA8D6;
  --c-azul-texto-oscuro:#5FC0EA; --c-azul-100:#E7EFFD;
  --c-amarillo:#EDF04B; --c-negro:#0A0A0A;
  --c-gris-700:#4A5568; --c-gris-300:#D7DCE3;
  --c-fondo:#F4F6F9; --c-blanco:#FFFFFF;

  /* Plano azul de marca: solo fondos grandes, siempre radial */
  --c-azul-nucleo:#16428F; --c-azul-foco:#123A86;
  --c-azul-sala:#0B1E48; --c-azul-fondo:#060B1B;
  --plano-azul-texto:radial-gradient(96% 128% at 50% 44%,
    var(--c-azul-nucleo) 0%, var(--c-azul-sala) 46%, var(--c-azul-fondo) 100%);
  --plano-azul-objeto:radial-gradient(118% 96% at 74% 44%,
    var(--c-azul-foco) 0%, var(--c-azul-sala) 44%, var(--c-azul-fondo) 100%);

  --f-base:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --r-btn:12px; --r-card:16px; --r-badge:8px;
  --sh-card:0 10px 30px rgba(6,39,107,.08);
  --sh-card-hover:0 18px 44px rgba(6,39,107,.14);
  --sh-escena:0 20px 50px rgba(6,39,107,.20);
}

*{box-sizing:border-box;}
html{background:var(--c-fondo);}
body{
  margin:0; background:var(--c-fondo); color:var(--c-negro);
  font-family:var(--f-base); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%;}
a{color:inherit;}

/* ---------- Piezas tipograficas ---------- */
.eyebrow{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; color:var(--c-azul-700); margin:0;
}
.eyebrow--claro{color:var(--c-azul-texto-oscuro);}

/* El drama es la mezcla de pesos 300 + 800, nunca el tamano */
.h-pagina{
  font-size:clamp(26px,3.6vw,32px); font-weight:300; line-height:1.2;
  letter-spacing:-.02em; margin:0; text-wrap:balance;
}
.h-pagina strong{font-weight:800;}
.h-seccion{font-size:20px; font-weight:700; letter-spacing:-.01em; margin:8px 0 0;}
.lead{margin:10px 0 0; color:var(--c-gris-700); font-size:16px; max-width:56ch;}
.lead--claro{color:rgba(255,255,255,.84);}

/* Firma de marca con cursor vivo */
.firma{font-size:12px; font-weight:600; letter-spacing:.14em; color:#fff;}
.firma--negro{color:var(--c-negro);}
.cur{font-weight:700; animation:cur-blink 1.1s steps(1) infinite;}
.cur--amarillo{color:var(--c-amarillo);}
@keyframes cur-blink{50%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .cur{animation:none;}
  *{transition:none !important;}
}

/* Textura susurrada: rejilla de puntos en UNA esquina */
.puntos::after{
  content:''; position:absolute; top:24px; right:24px;
  width:104px; height:76px; pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.22) 1.3px, transparent 1.4px);
  background-size:24px 24px;
}

/* ---------- GESTO: la tecla-boton ---------- */
.keycap{
  display:inline-block; text-decoration:none; white-space:nowrap; text-align:center;
  background:linear-gradient(180deg,#F3F65E,var(--c-amarillo));
  color:var(--c-negro); border:none; cursor:pointer;
  padding:14px 28px; border-radius:var(--r-btn);
  font:800 15px var(--f-base); letter-spacing:-.005em;
  border-bottom:2px solid rgba(10,10,10,.22);
  box-shadow:0 10px 26px rgba(190,196,30,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .1s ease, border-bottom-width .1s ease;
}
.keycap:hover{transform:translateY(2px); border-bottom-width:1px;}
.keycap:focus-visible{outline:3px solid var(--c-azul-700); outline-offset:3px;}
.keycap--ancho{display:block; width:100%;}

.btn-ghost{
  display:inline-block; text-decoration:none; text-align:center;
  background:transparent; color:var(--c-azul-700);
  border:1.5px solid var(--c-gris-300); padding:12px 22px;
  border-radius:var(--r-btn); font:700 15px var(--f-base); cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.btn-ghost:hover{border-color:var(--c-azul-700);}
.btn-ghost--claro{color:#fff; border-color:rgba(255,255,255,.38);}
.btn-ghost--claro:hover{border-color:#fff;}

.enlace{
  color:var(--c-azul-700); font-size:15px; font-weight:600;
  text-decoration:none; border-bottom:1px solid rgba(40,98,252,.28);
}
.enlace:hover{border-bottom-color:var(--c-azul-700);}
/* Sobre el plano azul el azul de marca no llega a 4.5:1: ahi el enlace
   se vuelve blanco y se sostiene con el subrayado, no con el color. */
.enlace--claro{color:#fff; border-bottom-color:rgba(255,255,255,.40);}
.enlace--claro:hover{border-bottom-color:#fff;}

/* ============================================================
   SHELL DE APLICACION: menu lateral + area de trabajo
   ============================================================ */
/* 300px, no 268: con las cuatro piezas de Recursos abiertas en el menu,
   nombres como "Buscador de herramientas" tienen que caber en UNA linea. */
.app{display:grid; grid-template-columns:308px minmax(0,1fr); min-height:100vh;}
.mobile-app-nav{display:none;}

.side{
  position:sticky; top:0; height:100vh; z-index:5; min-width:0;
  display:flex; flex-direction:column;
  /* Con Recursos abierto el menu es alto: en pantallas bajas (1366x768)
     se desplaza dentro de si mismo en vez de cortar "Cerrar sesion". */
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
  padding:30px 18px 22px;
  color:#fff;
  /* Plano azul de marca: el mismo degradado radial del home.
     La luz queda detras del menu, no centrada por decoracion. */
  background:var(--plano-azul-texto);
  border-right:1px solid rgba(255,255,255,.08);
}
.side::-webkit-scrollbar{width:6px;}
.side::-webkit-scrollbar-track{background:transparent;}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24); border-radius:3px;}
.side__top{display:flex; flex-direction:column; gap:22px; margin-bottom:26px;}
.side__logo{width:132px; height:auto; margin:0 8px;}

/* ---------- Identificador / selector de curso ----------
   Con UN solo curso el bloque es estatico: en el HTML es un <div>, no abre
   nada, no tiene flecha y no promete una eleccion que no existe.
   El dia que haya un segundo curso, reactivarlo es solo HTML:
     1. <div class="curso"> -> <details class="curso">
     2. <div class="curso__btn"> -> <summary class="curso__btn">
     3. devolver el <svg class="curso__flecha"> y el <div class="curso__menu">
   Todos los estados (hover, foco, flecha que gira, menu abierto) siguen
   escritos aqui abajo y vuelven solos. Sin JavaScript, accesible con teclado. */
.curso{position:relative;}
.curso__btn{
  list-style:none;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  transition:background .15s ease, border-color .15s ease;
}
.curso__btn::-webkit-details-marker{display:none;}
.curso__btn::marker{content:'';}
/* Estados interactivos: solo cuando el bloque ES un <summary> de verdad.
   Como <div> no muestra cursor de mano ni reacciona al hover. */
summary.curso__btn{cursor:pointer;}
summary.curso__btn:hover{background:rgba(255,255,255,.13);}
summary.curso__btn:focus-visible{outline:2px solid var(--c-azul-texto-oscuro); outline-offset:2px;}
.curso[open] .curso__btn{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.26);}
.curso__txt{flex:1; min-width:0;}
.curso__k{
  display:block; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.68); margin-bottom:3px;
}
.curso__n{
  display:block; font-size:15px; font-weight:700; line-height:1.28;
  letter-spacing:-.01em; color:#fff; text-wrap:balance;
}
/* Nombre largo en escritorio, forma corta en movil: nunca truncado a la mitad */
.curso__n-corto{display:none;}
.curso__flecha{
  width:16px; height:16px; flex:none; stroke:#fff; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.82;
  transition:transform .15s ease;
}
.curso[open] .curso__flecha{transform:rotate(180deg);}
.curso__menu{
  margin-top:8px; padding:6px; border-radius:12px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
}
.curso__op{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:9px;
  color:#fff; text-decoration:none;
  font-size:15px; font-weight:600; line-height:1.3;
}
.curso__op:hover{background:rgba(255,255,255,.10);}
.curso__op--actual{font-weight:700;}
.curso__op .ic{
  width:16px; height:16px; margin-left:auto; margin-top:2px;
  stroke:var(--c-azul-texto-oscuro); stroke-width:2.2;
}
.nav{display:flex; flex-direction:column; gap:2px;}
.nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:10px;
  color:#fff; text-decoration:none;
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  transition:background .15s ease;
}
.nav a:hover{background:rgba(255,255,255,.09);}
/* Item activo: bloque tenue + barra de Azul Circuito claro.
   Sobre el plano azul oscuro un pastilla blanca gritaria demasiado. */
.nav a.on{
  position:relative; background:rgba(255,255,255,.13);
  color:#fff; font-weight:700;
}
.nav a.on.tenue{color:#fff; font-weight:700;}
.nav a.on::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0; background:var(--c-azul-texto-oscuro);
}
.nav a.tenue{color:rgba(255,255,255,.88); font-weight:500;}
.nav a.on .ic{stroke:var(--c-azul-texto-oscuro);}

/* ---------- Grupo con titulo (Recursos y sus piezas) ----------
   Las cuatro piezas del curso viven abiertas en el menu, no escondidas
   detras de un enlace que hay que abrir. La jerarquia la hace el titulo
   pequeno + una linea guia a la izquierda, no un tamano de letra distinto:
   los hijos siguen a 15px, legibles como todo lo demas. */
.nav__grupo{margin:14px 0 0;}
.nav__titulo{
  margin:0 0 8px; padding:0 14px;
  font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.72);
}
.nav__hijos{
  display:flex; flex-direction:column; gap:2px;
  margin-left:12px;
}
.nav__hijos a{padding:9px 10px; font-weight:500; line-height:1.3; color:rgba(255,255,255,.94);}
.nav__hijos .ic{width:17px; height:17px; opacity:.88;}
/* Separador de seccion: corta sin empujar (el .side__sep de abajo si empuja) */
.side__sep--seccion{margin:18px 14px 0;}
.ic{
  width:19px; height:19px; flex:none; stroke:#fff; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
/* Un solo contenedor de navegacion: en escritorio el separador empuja
   cuenta y salida al pie; en movil todo cae en la misma fila desplazable
   y "Cerrar sesion" queda al final, no encima del contenido. */
.side .nav{flex:1;}
.side__sep{height:1px; background:rgba(255,255,255,.20); margin:auto 14px 16px;}
.side__firma{margin:18px 0 0 14px; color:rgba(255,255,255,.72);}

.main{
  padding:56px clamp(22px,4vw,64px) 96px;
  max-width:1180px; width:100%; min-width:0;
}
.bloque{margin-top:52px;}
.bloque__cab{margin-bottom:22px;}

/* ---------- Escena: la banda de plano azul (una por vista) ---------- */
.escena{
  position:relative; overflow:hidden;
  border-radius:var(--r-card); color:#fff;
  box-shadow:var(--sh-escena);
}
.escena--banda{
  background:var(--plano-azul-objeto);
  padding:38px 40px;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:32px; align-items:center;
}
.escena--sala{
  background:var(--plano-azul-texto);
  padding:60px 48px;
  text-align:center;
}
.escena h2{
  font-size:clamp(22px,2.6vw,26px); font-weight:300; line-height:1.25;
  letter-spacing:-.02em; margin:12px 0 0; text-wrap:balance;
}
.escena h2 strong{font-weight:800;}
.escena .lead{margin-top:12px;}
.escena--sala .lead{margin-left:auto; margin-right:auto;}
.pie-nota{
  margin:20px 0 0; font-size:15px; color:rgba(255,255,255,.72);
}
/* Horario de la proxima sesion: el dato manda, no el adorno */
.horario{
  display:inline-block; margin:24px auto 0; padding:16px 22px;
  border-radius:var(--r-card); background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);
  font-size:16px; font-weight:600; line-height:1.5; color:#fff;
  max-width:46ch;
}

/* ---------- Tarjetas ---------- */
/* Cinco clases y cuatro recursos: filas exactas, sin tarjeta huerfana */
.rejilla{display:grid; gap:20px;}
.rejilla--clases{grid-template-columns:repeat(5,minmax(0,1fr));}
.rejilla--recursos{grid-template-columns:repeat(4,minmax(0,1fr));}
.rejilla--dos{grid-template-columns:repeat(2,minmax(0,1fr));}

.tarjeta{
  background:var(--c-blanco); border:1px solid var(--c-gris-300);
  border-radius:var(--r-card); box-shadow:var(--sh-card);
  text-decoration:none; color:inherit; display:block; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tarjeta:hover{transform:translateY(-2px); box-shadow:var(--sh-card-hover); border-color:#C3CEDF;}

.clase__vista{
  position:relative; aspect-ratio:16/9; background:var(--c-azul-100);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--c-gris-300); overflow:hidden;
}
.clase__num{
  position:absolute; right:14px; bottom:-8px;
  font-size:66px; font-weight:800; letter-spacing:-.04em;
  color:rgba(40,98,252,.13); line-height:1; user-select:none;
}
.play{
  position:relative; z-index:1;
  width:48px; height:48px; border-radius:50%; background:var(--c-blanco);
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(6,39,107,.16);
  transition:transform .15s ease;
}
.play svg{width:16px; height:16px; fill:var(--c-azul-700); margin-left:2px;}
.tarjeta:hover .play{transform:scale(1.06);}
.clase__cuerpo{padding:18px 20px 20px;}
.clase__t{font-size:16px; font-weight:700; letter-spacing:-.01em; margin:0;}
.clase__m{font-size:15px; color:var(--c-gris-700); margin:4px 0 0;}

.recurso{display:block; padding:24px;}
.recurso .ico{margin-bottom:16px;}
.ico{
  width:48px; height:48px; flex:none; border-radius:13px;
  background:var(--c-azul-100); display:grid; place-items:center;
}
.ico svg{
  width:25px; height:25px; stroke:var(--c-azul-700); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.recurso > span{display:block; min-width:0;}
.recurso__t{display:block; font-size:16px; font-weight:700; letter-spacing:-.01em;}
.recurso__d{display:block; font-size:15px; color:var(--c-gris-700); margin-top:4px;}

/* ---------- Paneles de contenido (cuenta) ---------- */
.dos{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; align-items:start;}
.panel{
  background:var(--c-blanco); border:1px solid var(--c-gris-300);
  border-radius:var(--r-card); padding:28px; box-shadow:var(--sh-card);
}
.panel h2{font-size:18px; font-weight:700; letter-spacing:-.01em; margin:10px 0 0;}
.dato{padding:16px 0; border-bottom:1px solid var(--c-gris-300);}
.dato:last-of-type{border-bottom:0;}
.dato__k{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-gris-700); margin:0;}
.dato__v{font-size:16px; font-weight:600; margin:6px 0 0; word-break:break-word;}

/* ---------- Formularios ---------- */
.campo{margin-top:20px;}
.campo label{
  display:block; font-size:15px; font-weight:600;
  color:var(--c-azul-900); margin-bottom:8px;
}
.campo input{
  width:100%; font:400 16px var(--f-base); color:var(--c-negro);
  padding:13px 14px; background:var(--c-blanco);
  border:1.5px solid var(--c-gris-300); border-radius:var(--r-btn);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus{
  outline:none; border-color:var(--c-azul-700);
  box-shadow:0 0 0 3px rgba(40,98,252,.18);
}
.campo__ayuda{font-size:15px; color:var(--c-gris-700); margin:8px 0 0; line-height:1.5;}
.acciones{margin-top:26px;}

.aviso{
  margin-top:18px; padding:12px 14px; border-radius:var(--r-btn);
  font-size:15px; line-height:1.45;
}
.aviso--error{background:#FDECEC; color:#B42318; border:1px solid #F5D0D0;}
.aviso--ok{background:#E9F7EF; color:#0B6B3A; border:1px solid #CBE9D8;}

/* ============================================================
   PANTALLAS DE ACCESO: escenario azul + formulario en blanco
   ============================================================ */
.auth{min-height:100vh; display:grid; grid-template-columns:1.02fr .98fr; background:var(--c-blanco);}
.auth__marca{
  position:relative; overflow:hidden; color:#fff;
  background:var(--plano-azul-texto);
  padding:52px clamp(32px,4vw,60px) 42px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.auth__logo{width:auto; height:24px;}
.auth__centro{padding:48px 0;}
.auth__centro h1{
  font-size:clamp(26px,3.2vw,33px); font-weight:300; line-height:1.22;
  letter-spacing:-.02em; margin:16px 0 0; max-width:17ch; text-wrap:balance;
}
.auth__centro h1 strong{font-weight:800;}
.auth__panel{display:flex; align-items:center; justify-content:center; padding:56px 28px;}
.auth__caja{width:100%; max-width:384px;}
.auth__caja h2{font-size:22px; font-weight:700; letter-spacing:-.015em; margin:10px 0 0;}
.auth__caja .lead{font-size:15px;}
.auth__pie{margin-top:24px; text-align:center;}

/* Error de Google: la ilustración es una escena, no un personaje recortado.
   El fondo de la imagen deja aire a la izquierda para que el copy conserve
   contraste y la imagen nunca tape el logo ni la firma. */
.auth__marca--oops{isolation:isolate;}
.auth__marca--oops::before{
  content:''; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(6,25,69,.56) 0%,rgba(6,25,69,.30) 42%,rgba(6,25,69,.05) 67%,rgba(6,25,69,0) 100%);
}
.auth__error-art{
  position:absolute; z-index:0; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; pointer-events:none;
}
.auth__marca--oops > a,
.auth__marca--oops .auth__centro,
.auth__marca--oops .firma{position:relative; z-index:2;}
.auth__marca--oops.puntos::after{z-index:3;}
.auth__oops{
  position:absolute; z-index:2; top:26%; right:13%; margin:0;
  padding:8px 15px 9px; border-radius:14px 14px 14px 4px;
  background:var(--c-amarillo); color:var(--c-negro);
  font:800 clamp(18px,2vw,26px)/1 var(--f-base); letter-spacing:-.03em;
  box-shadow:0 8px 18px rgba(6,11,27,.28); transform:rotate(-3deg);
}

/* ============================================================
   REPRODUCTOR: la sala oscura
   ============================================================ */
body.cine{background:var(--c-negro); color:#fff; min-height:100vh;}
html:has(body.cine){background:var(--c-negro);}
.cine__barra{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:22px;
  padding:16px clamp(20px,4vw,40px);
  background:rgba(10,10,10,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.cine__volver{
  display:inline-flex; align-items:center; gap:9px;
  color:#fff; text-decoration:none; font-size:15px; font-weight:600;
  opacity:.86; transition:opacity .15s ease;
}
.cine__volver:hover{opacity:1;}
.cine__logo{width:112px; height:auto; margin-left:auto;}
.cine__wrap{max-width:1120px; margin:0 auto; padding:36px clamp(20px,4vw,40px) 80px;}
.cine__wrap video{
  width:100%; display:block; background:#000; aspect-ratio:16/9;
  border-radius:var(--r-card); box-shadow:0 30px 80px rgba(0,0,0,.62);
}
.cine__preview{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  width:100%; min-height:clamp(270px,48vw,560px); padding:32px; text-align:center;
  border-radius:var(--r-card); color:var(--c-texto-oscuro-1);
  background:radial-gradient(circle at 68% 32%,rgba(26,168,214,.24),transparent 38%),#071634;
  box-shadow:0 30px 80px rgba(0,0,0,.62);
}
.cine__preview p:last-child{margin-top:10px;font-size:18px;}
.cine__info{margin-top:30px; max-width:60ch;}
.cine__info h1{
  font-size:clamp(24px,3vw,30px); font-weight:300; line-height:1.2;
  letter-spacing:-.02em; margin:12px 0 0;
}
.cine__info h1 strong{font-weight:800;}
.rail{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
.rail a{
  padding:10px 18px; border-radius:var(--r-btn);
  border:1.5px solid rgba(255,255,255,.22); color:#fff;
  text-decoration:none; font-size:15px; font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}
.rail a:hover{border-color:rgba(255,255,255,.55);}
.rail a.on{background:#fff; color:var(--c-negro); border-color:#fff;}
.cine__pie{margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1280px){
  .rejilla--clases{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1120px){
  .rejilla--recursos{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .rejilla--clases{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rejilla--dos{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .rejilla--recursos{grid-template-columns:1fr;}
  .rejilla{gap:14px;}
  .clase__num{font-size:48px; right:10px;}
}

@media (max-width:960px){
  .app{grid-template-columns:1fr;}
  .side{display:none;}
  .mobile-app-nav{
    position:fixed; z-index:40; inset:auto 0 0;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px;
    min-height:72px; padding:7px max(10px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));
    background:rgba(6,11,27,.96); color:#fff;
    border-top:1px solid rgba(255,255,255,.14);
    box-shadow:0 -10px 28px rgba(6,11,27,.20); backdrop-filter:blur(14px);
  }
  .mobile-app-nav a{
    display:grid; place-items:center; align-content:center; gap:3px;
    min-width:0; min-height:52px; padding:5px 3px; border-radius:10px;
    color:rgba(255,255,255,.82); text-decoration:none;
    font-size:11px; font-weight:700; line-height:1.1; letter-spacing:-.01em;
  }
  .mobile-app-nav svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .mobile-app-nav a:hover{background:rgba(255,255,255,.10); color:#fff;}
  .mobile-app-nav a.on{background:rgba(95,192,234,.18); color:#fff;}
  .mobile-app-nav a.on svg{stroke:var(--c-amarillo);}
  .mobile-app-nav a:focus-visible{outline:3px solid var(--c-amarillo); outline-offset:-2px;}
  .main{padding:36px 22px calc(96px + env(safe-area-inset-bottom));}
  .cine__wrap{padding-bottom:calc(160px + env(safe-area-inset-bottom));}
  .bloque{margin-top:40px;}
  .escena--banda{grid-template-columns:1fr; padding:30px 26px; gap:24px;}
  .escena--sala{padding:44px 26px;}
  .escena--banda .keycap{width:100%;}
}

@media (max-width:860px){
  .auth{grid-template-columns:1fr;}
  .auth__marca{padding:26px 24px 30px;}
  .auth__logo{width:auto; height:24px;}
  .auth__centro{padding:26px 0 4px;}
  .auth__centro h1{max-width:22ch;}
  .auth__marca .lead{font-size:15px;}
  .auth__panel{padding:36px 24px 56px;}
  .puntos::after{display:none;}
  .auth__marca--oops{min-height:410px;}
  .auth__marca--oops::before{background:linear-gradient(90deg,rgba(6,25,69,.63) 0%,rgba(6,25,69,.35) 51%,rgba(6,25,69,.04) 100%);}
  .auth__marca--oops .auth__error-art{object-position:62% center;}
  .auth__marca--oops .auth__centro{max-width:16ch; padding:48px 0 4px;}
  .auth__marca--oops .auth__centro h1{max-width:12ch;}
  .auth__oops{top:90px; right:24px; font-size:18px; padding:7px 12px 8px;}
}