/* ==========================================================================
   CABECERA SIEMPRE VISIBLE
   landing.js marca .escondida al bajar y la cabecera se sale de pantalla.
   Aqui se anula: el menu se queda fijo todo el recorrido.
   ========================================================================== */
.cab.escondida{transform:none !important}

/* ==========================================================================
   MARVATOYS - MENU "MAS" Y PAGINAS DE PLAYLIST
   Se carga despues de landing.css y secciones.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SUBMENU EN LA CABECERA
   -------------------------------------------------------------------------- */
.nav__mas{position:relative;z-index:2}

.nav__l--mas{display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;font:inherit;
  font-family:var(--f-dato);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--hueso);
  padding:10px 15px;border-radius:999px}
.nav__l--mas i{width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid currentColor;
  transition:transform .35s var(--curva)}
.nav__mas.abierto .nav__l--mas i{transform:rotate(180deg)}

.nav__sub{position:absolute;right:0;top:calc(100% + 14px);z-index:20;
  width:min(84vw,340px);padding:14px;
  background:#15141C;border:1px solid var(--linea);border-radius:20px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
  transition:opacity .3s,transform .4s var(--curva),visibility .3s}
.nav__mas.abierto .nav__sub{opacity:1;visibility:visible;transform:none}

/* Puente invisible para que el raton no pierda el menu al bajar */
.nav__sub::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}

.nav__sub-k{display:block;font-family:var(--f-dato);font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ceniza);
  padding:4px 12px 12px}

.nav__sub-l{display:block;padding:12px;border-radius:13px;text-decoration:none;
  position:relative;
  transition:background-color .22s,transform .3s var(--curva)}
.nav__sub-l::before{content:'';position:absolute;left:0;top:14px;bottom:14px;
  width:3px;border-radius:99px;background:var(--ac);
  transform:scaleY(0);transform-origin:center;
  transition:transform .35s var(--curva)}
.nav__sub-l b{display:block;font-family:var(--f-cuerpo);font-weight:700;
  font-size:14.5px;line-height:1.3;color:var(--hueso)}
.nav__sub-l em{display:block;font-style:normal;font-family:var(--f-dato);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ceniza);margin-top:5px}
.nav__sub-l:hover{background:rgba(255,255,255,.05);transform:translate3d(4px,0,0)}
.nav__sub-l:hover::before{transform:scaleY(1)}
.nav__sub-l:hover em{color:var(--ac)}

/* Separador entre grupos del submenu */
.nav__sub-k--sep{margin-top:10px;padding-top:16px;
  border-top:1px solid var(--linea)}

.nav__sub-t{display:block;margin-top:8px;padding:13px 12px 4px;
  border-top:1px solid var(--linea);
  font-family:var(--f-dato);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amarillo);text-decoration:none}
.nav__sub-t:hover{color:var(--hueso)}

/* En el panel movil el submenu va desplegado */
.panel__sub{margin-top:var(--e3);padding-top:var(--e3);
  border-top:2px solid rgba(8,7,10,.25)}
.panel__sub-k{display:block;font-family:var(--f-dato);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(8,7,10,.6);
  margin-bottom:12px}
.panel__sub-l{display:block;font-family:var(--f-cuerpo);font-weight:700;
  font-size:17px;line-height:1.4;color:var(--void);text-decoration:none;
  padding:8px 0 8px 16px;position:relative}
.panel__sub-l::before{content:'';position:absolute;left:0;top:14px;
  width:7px;height:7px;border-radius:50%;background:rgba(8,7,10,.4)}
.panel__sub-l:hover{color:var(--hueso)}
.panel__sub-l--ext{font-family:var(--f-dato);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}
.panel__sub-l:hover::before{background:var(--hueso)}

/* --------------------------------------------------------------------------
   PAGINA DE PLAYLIST
   -------------------------------------------------------------------------- */
.pl-hero{position:relative;overflow:hidden;padding:calc(78px + 6vh) 0 var(--e5)}
.pl-hero__mq{position:absolute;left:0;right:0;top:46%;z-index:0;overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.pl-hero__mq em{font-style:normal;font-family:var(--f-display);
  text-transform:uppercase;font-size:clamp(50px,10vw,140px);line-height:1;
  white-space:nowrap;display:block;width:max-content;
  color:transparent;-webkit-text-stroke:1.3px rgba(245,241,232,.06);
  animation:pl-corre 34s linear infinite}
@keyframes pl-corre{to{transform:translateX(-50%)}}

.pl-hero__caja{position:relative;z-index:2}

.pl-migas{font-family:var(--f-dato);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ceniza);
  display:flex;align-items:center;gap:10px;margin-bottom:var(--e3)}
.pl-migas a{color:var(--ceniza);text-decoration:none}
.pl-migas a:hover{color:var(--amarillo)}
.pl-migas b{color:var(--ac);font-weight:700}

.pl-hero__k{display:inline-block;font-family:var(--f-dato);font-size:10px;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);
  border:1px solid var(--ac);border-radius:999px;padding:7px 15px;
  margin-bottom:16px}
.pl-hero__t{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(32px,6.4vw,84px);line-height:.98;letter-spacing:-.015em;
  color:var(--hueso);margin:0;max-width:18ch}
.pl-hero__d{color:var(--ceniza);font-size:16.5px;line-height:1.85;
  max-width:56ch;margin:var(--e3) 0 0}

/* Reproductor */
.pl-cuerpo{padding-top:0}
.pl-marco{position:relative;width:100%;aspect-ratio:16/9;
  border-radius:24px;overflow:hidden;background:#0E0D13;
  border:1px solid var(--linea);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.98),
             0 0 0 5px rgba(255,30,30,.08)}
.pl-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  display:block}

.pl-pendiente{padding:var(--e5) var(--e4);border-radius:22px;
  border:1px dashed var(--linea);background:#12111A;text-align:center}
.pl-pendiente p{color:var(--ceniza);font-size:15.5px;line-height:1.9;margin:0}
.pl-pendiente code,.pl-vacio code{font-family:var(--f-dato);font-size:13px;
  color:var(--amarillo);background:rgba(255,212,0,.08);padding:3px 8px;
  border-radius:6px}

.pl-acc{display:flex;gap:var(--e2);flex-wrap:wrap;align-items:center;
  margin-top:var(--e4)}

/* Boton de YouTube */
.pl-yt{display:inline-flex;align-items:center;gap:12px;
  padding:15px 26px;border-radius:999px;text-decoration:none;
  background:var(--hueso);color:var(--void);border:2px solid var(--void);
  font-family:var(--f-dato);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:5px 5px 0 var(--sangre);transform:rotate(-1.2deg);
  transition:transform .32s var(--curva),box-shadow .32s var(--curva),
             background-color .3s,color .3s}
.pl-yt svg{width:24px;height:24px;fill:var(--sangre);flex:0 0 auto}
.pl-yt:hover{background:var(--void);color:var(--hueso);border-color:var(--hueso);
  box-shadow:2px 2px 0 var(--amarillo);
  transform:rotate(0deg) translate3d(4px,4px,0)}

/* Otras listas */
.pl-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e2)}
@media(max-width:900px){.pl-rej{grid-template-columns:1fr}}

.pl-c{position:relative;display:block;padding:var(--e4);border-radius:20px;
  border:1px solid var(--linea);background:#14131B;overflow:hidden;
  text-decoration:none;
  transition:transform .5s var(--curva),border-color .4s,box-shadow .5s}
.pl-c::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--ac);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--curva)}
.pl-c:hover{transform:translate3d(0,-8px,0);border-color:var(--ac);
  box-shadow:0 22px 44px -24px var(--ac)}
.pl-c:hover::after{transform:none}
.pl-c__k{display:block;font-family:var(--f-dato);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ac);
  margin-bottom:14px}
.pl-c__n{display:block;font-family:var(--f-display);text-transform:uppercase;
  font-size:20px;line-height:1.14;color:var(--hueso);max-width:18ch}
.pl-c__d{display:block;color:var(--ceniza);font-size:14.5px;line-height:1.8;
  margin-top:12px;max-width:38ch}
.pl-c__ir{position:absolute;right:20px;bottom:20px;
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--ac);color:var(--void);font-size:15px;
  opacity:0;transform:scale(.6);
  transition:opacity .3s,transform .4s var(--curva)}
.pl-c:hover .pl-c__ir{opacity:1;transform:none}

.pl-vacio{text-align:center;padding:var(--e7) var(--e3);border-radius:26px;
  border:1px dashed var(--linea);background:#12111A}
.pl-vacio h1{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(26px,4vw,46px);line-height:1.06;color:var(--hueso);margin:0}
.pl-vacio p{color:var(--ceniza);font-size:16px;line-height:1.85;
  margin:16px auto var(--e4);max-width:54ch}

@media(prefers-reduced-motion:reduce){
  .pl-hero__mq em{animation:none}
  .nav__sub,.nav__sub-l,.pl-c{transition:none}
}



/* ==========================================================================
   REJILLA DE VIDEOS DE LA PLAYLIST
   Pegar al FINAL de assets/video.css
   ========================================================================== */

/* Que se esta viendo ahora */
.pl-ahora{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:var(--e3) 0 0;padding:0}
.pl-ahora span{font-family:var(--f-dato);font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ac);flex:0 0 auto}
.pl-ahora b{font-family:var(--f-cuerpo);font-weight:700;font-size:16px;
  line-height:1.45;color:var(--hueso)}

/* Cabecera de la rejilla */
.pl-lista{margin-top:var(--e5)}
.pl-lista__cab{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--e2);flex-wrap:wrap;margin-bottom:var(--e3);
  padding-bottom:14px;border-bottom:1px solid var(--linea)}
.pl-lista__t{font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(20px,3vw,30px);line-height:1;letter-spacing:-.01em;
  color:var(--hueso);margin:0}
.pl-lista__c{font-family:var(--f-dato);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ceniza)}

/* La rejilla */
.pl-vids{display:grid;gap:var(--e2);
  grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}

/* Cada video */
.pl-v{display:flex;flex-direction:column;gap:11px;
  padding:0;margin:0;border:0;background:none;text-align:left;
  cursor:pointer;font:inherit;color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--curva)}
.pl-v:hover{transform:translate3d(0,-4px,0)}

.pl-v__foto{position:relative;display:block;width:100%;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;background:#0E0D13;
  border:1px solid var(--linea);
  transition:border-color .3s,box-shadow .3s}
.pl-v__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--curva),opacity .3s;opacity:.82}
.pl-v:hover .pl-v__foto{border-color:var(--ac);
  box-shadow:0 18px 36px -22px rgba(0,0,0,.95)}
.pl-v:hover .pl-v__foto img{transform:scale(1.06);opacity:1}

/* Triangulo de reproducir */
.pl-v__play{position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%) scale(.85);border-radius:50%;
  background:rgba(8,7,10,.72);border:1px solid rgba(245,241,232,.28);
  opacity:0;transition:opacity .28s,transform .28s var(--curva)}
.pl-v__play::after{content:"";position:absolute;left:52%;top:50%;
  transform:translate(-50%,-50%);
  border-left:12px solid var(--hueso);
  border-top:8px solid transparent;border-bottom:8px solid transparent}
.pl-v:hover .pl-v__play,.pl-v:focus-visible .pl-v__play{opacity:1;
  transform:translate(-50%,-50%) scale(1)}

.pl-v__txt{display:flex;gap:10px;align-items:flex-start}
.pl-v__i{font-family:var(--f-dato);font-size:10px;font-weight:700;
  letter-spacing:.1em;color:var(--ac);flex:0 0 auto;padding-top:3px}
.pl-v__n{font-family:var(--f-cuerpo);font-weight:700;font-size:14px;
  line-height:1.45;color:var(--hueso);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* El que se esta viendo */
.pl-v.es-activo{cursor:default}
.pl-v.es-activo:hover{transform:none}
.pl-v.es-activo .pl-v__foto{border-color:var(--ac);
  box-shadow:0 0 0 2px var(--ac)}
.pl-v.es-activo .pl-v__foto img{opacity:.42}
.pl-v.es-activo .pl-v__n{color:var(--ac)}
.pl-v.es-activo .pl-v__play{opacity:0}

/* Etiqueta sobre la miniatura activa */
.pl-v.es-activo .pl-v__foto::after{content:"En pantalla";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--f-dato);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--void);
  background:var(--ac);padding:6px 12px;border-radius:999px;white-space:nowrap}

.pl-v:focus-visible{outline:2px solid var(--ac);outline-offset:6px;
  border-radius:16px}

@media (max-width:640px){
  .pl-vids{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:16px}
  .pl-v__n{font-size:12.5px}
  .pl-ahora b{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
  .pl-v,.pl-v__foto img,.pl-v__play{transition:none}
  .pl-v:hover{transform:none}
  .pl-v:hover .pl-v__foto img{transform:none}
}

/* ==========================================================================
   PLAYLIST: portada mas compacta
   Pegar al FINAL de assets/video.css, despues del bloque de la rejilla.

   Antes el titulo y el aire de arriba se comian la pantalla y el video
   quedaba abajo del pliegue. Aqui se recorta todo para que al entrar se
   vea el reproductor y ya se asomen las miniaturas.
   ========================================================================== */

/* Menos aire arriba y abajo del titulo */
.pl-hero{padding:calc(70px + 1.5vh) 0 var(--e3)}

/* Titulo mas chico */
.pl-hero__t{font-size:clamp(28px,4.2vw,52px);max-width:22ch}

/* La marquesina de fondo se acomoda al titulo nuevo */
.pl-hero__mq{top:52%}
.pl-hero__mq em{font-size:clamp(38px,7vw,96px)}

/* Antetitulo y migas mas discretos */
.pl-migas{margin-bottom:14px}
.pl-hero__k{margin-bottom:11px;padding:5px 13px;font-size:9.5px}

/* La descripcion no necesita tanto renglon */
.pl-hero__d{font-size:14.5px;line-height:1.65;max-width:62ch;
  margin:14px 0 0}

/* Reproductor con tope de ancho: a pantalla completa era enorme */
.pl-marco{max-width:940px;margin-left:auto;margin-right:auto;
  border-radius:18px}

/* Lo de abajo se alinea con el marco */
.pl-ahora,
.pl-lista,
.pl-acc{max-width:940px;margin-left:auto;margin-right:auto}

.pl-acc{margin-top:var(--e3)}
.pl-lista{margin-top:var(--e4)}

@media (min-width:1500px){
  .pl-marco,
  .pl-ahora,
  .pl-lista,
  .pl-acc{max-width:1040px}
}

@media (max-width:900px){
  .pl-hero{padding:calc(64px + 1vh) 0 var(--e2)}
  .pl-hero__t{font-size:clamp(26px,7vw,38px)}
  .pl-hero__d{font-size:13.5px;line-height:1.6}
  .pl-marco{border-radius:14px}
}

/* ==========================================================================
   MARVATOYS - MENU MOVIL UNIFICADO  (v3, solo CSS)

   Mismo diseno en la landing (.panel) y en la tienda (.mv-panel).
   No necesita JavaScript. El cierre sigue siendo la hamburguesa de la
   cabecera, que ya se convierte en X sola: por eso el panel NO la tapa.

   Si pegaste una version anterior de este bloque, borrala antes.
   ========================================================================== */

body.marva-panel-abierto{overflow:hidden}

/* --------------------------------------------------------------------------
   1. El panel
      No se toca el apilado: cada panel conserva el z-index que ya tenia,
      asi la cabecera con su X queda encima y sigue cerrando el menu.
      En la tienda se pliega la cinta superior mientras esta abierto,
      que era lo que se asomaba encima del panel.
   -------------------------------------------------------------------------- */
.panel.panel,
.mv-panel.mv-panel{
  position:fixed;
  inset:0;
  background:#0B0A0F;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-content:normal;
  overflow:hidden;                  /* sin scroll: todo tiene que caber */
  padding:clamp(78px,11vh,96px) clamp(22px,6vw,44px) clamp(18px,3vh,30px);
}

/* --- TIENDA: el panel tapa la cabecera completa ---
   El panel sube por encima de la barra fija (que esta en 9000).

   OJO con el apilado: ".mv-fijo" tiene z-index propio, o sea que crea
   un contexto de apilado y nada de lo que vive dentro puede salir de el.
   Subirle el z-index solo a la hamburguesa no sirve de nada. Por eso lo
   que sube es el contenedor entero, y adentro se apaga todo menos la X.
   Asi el panel tapa la cabecera y el cierre sigue funcionando sin JS. */
.mv-panel.mv-panel{z-index:9500}

body.marva-panel-abierto .mv-fijo{
  z-index:9600;
  pointer-events:none;              /* solo la X recibe toques */
  transform:none;                   /* que no se esconda al scrollear */
}

/* La barra se vuelve invisible: queda el panel de fondo */
body.marva-panel-abierto .mv-cab,
body.marva-panel-abierto .mv-cab__caja{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Se apaga todo lo de la cabecera menos el boton de cerrar */
body.marva-panel-abierto .mv-logo,
body.marva-panel-abierto .mv-carrito,
body.marva-panel-abierto .mv-buscar,
body.marva-panel-abierto .mv-nav__lista,
body.marva-panel-abierto .mv-cab__progreso,
body.marva-panel-abierto .mv-techo{
  opacity:0;
  pointer-events:none;
}

/* La X: unica cosa viva por encima del panel */
body.marva-panel-abierto .mv-ham{
  pointer-events:auto;
  opacity:1;
}

/* Con el panel abierto la cinta de anuncios se pliega */
body.marva-panel-abierto .mv-techo{height:0}

/* Resplandores de fondo, en lugar del rojo pleno que cansaba la vista */
.panel.panel::before,
.mv-panel.mv-panel::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-25%;
  width:150%;
  height:85%;
  background:radial-gradient(ellipse at 30% 30%,rgba(255,30,30,.34),transparent 62%);
  pointer-events:none;
  z-index:0;
}
.panel.panel::after,
.mv-panel.mv-panel::after{
  content:"";
  position:absolute;
  right:-40%;
  bottom:-30%;
  width:130%;
  height:70%;
  background:radial-gradient(ellipse at 70% 70%,rgba(139,92,246,.2),transparent 60%);
  pointer-events:none;
  z-index:0;
}

/* La marca de agua se apaga: ya hay fondo */
.panel.panel .panel__wm,
.mv-panel.mv-panel .mv-panel__wm{
  right:-24%;
  bottom:-16%;
  width:min(58vw,320px);
  opacity:.05;
}

/* --------------------------------------------------------------------------
   2. Lista principal
   -------------------------------------------------------------------------- */
.panel.panel .panel__lista,
.mv-panel.mv-panel .mv-panel__lista{
  position:relative;
  z-index:2;
  width:100%;
  max-width:620px;
}

.panel.panel .panel__lista > a,
.mv-panel.mv-panel .mv-panel__lista > a{
  display:flex;
  align-items:baseline;
  gap:13px;
  padding:clamp(3px,.7vh,7px) 0;
  color:#F5F1E8;
  text-decoration:none;
  font-family:var(--f-display,'Anton',sans-serif);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(23px,5.2vh,36px);
  line-height:1.14;
  letter-spacing:-.005em;
  transition:transform .3s cubic-bezier(.16,1,.3,1),color .25s;
}

.panel.panel .panel__lista > a b,
.mv-panel.mv-panel .mv-panel__lista > a b{
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  color:#FF1E1E;
  flex:0 0 auto;
  opacity:.9;
}

.panel.panel .panel__lista > a em,
.mv-panel.mv-panel .mv-panel__lista > a em{
  font-style:normal;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  text-transform:inherit;
}

.panel.panel .panel__lista > a:hover,
.panel.panel .panel__lista > a:active,
.mv-panel.mv-panel .mv-panel__lista > a:hover,
.mv-panel.mv-panel .mv-panel__lista > a:active{
  color:#FF1E1E;
  transform:translateX(9px);
}

/* --------------------------------------------------------------------------
   3. Bloque "Mas"
      El CSS viejo de la landing usa ".panel__lista a", que pesa mas que
      ".panel__sub-l" y por eso estos enlaces salian negros y enormes.
      Repetir la clase del panel gana esa pelea sin usar !important.
   -------------------------------------------------------------------------- */
.panel.panel .panel__sub,
.mv-panel.mv-panel .mv-panel__sub{
  position:relative;
  z-index:2;
  margin-top:clamp(12px,2.4vh,20px);
  padding-top:clamp(12px,2.2vh,18px);
  border-top:1px solid rgba(245,241,232,.14);
}

.panel.panel .panel__sub-k,
.mv-panel.mv-panel .mv-panel__sub-k{
  display:block;
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:9px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(245,241,232,.45);
  margin-bottom:8px;
}

.panel.panel .panel__lista a.panel__sub-l,
.panel.panel .panel__sub .panel__sub-l,
.mv-panel.mv-panel .mv-panel__lista a.mv-panel__sub-l,
.mv-panel.mv-panel .mv-panel__sub .mv-panel__sub-l{
  display:block;
  font-family:var(--f-cuerpo,'Space Grotesk',sans-serif);
  font-weight:700;
  font-size:clamp(12.5px,1.65vh,14px);
  line-height:1.32;
  letter-spacing:0;
  text-transform:none;
  color:rgba(245,241,232,.82);
  text-decoration:none;
  padding:clamp(4px,.8vh,7px) 0 clamp(4px,.8vh,7px) 15px;
  position:relative;
  transform:none;
}

.panel.panel .panel__sub-l::before,
.mv-panel.mv-panel .mv-panel__sub-l::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  margin-top:-3px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ac,#FF1E1E);
  opacity:.85;
}

.panel.panel .panel__sub-l:hover,
.mv-panel.mv-panel .mv-panel__sub-l:hover{
  color:#F5F1E8;
  transform:translateX(4px);
}

.panel.panel .panel__lista a.panel__sub-l--ext,
.panel.panel .panel__sub .panel__sub-l--ext,
.mv-panel.mv-panel .mv-panel__lista a.mv-panel__sub-l--ext,
.mv-panel.mv-panel .mv-panel__sub .mv-panel__sub-l--ext{
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FFD400;
  margin-top:4px;
}
.panel.panel .panel__sub-l--ext::before,
.mv-panel.mv-panel .mv-panel__sub-l--ext::before{background:#FFD400}

/* --------------------------------------------------------------------------
   4. Pie
   -------------------------------------------------------------------------- */
.panel.panel .panel__pie,
.mv-panel.mv-panel .mv-panel__pie{
  position:relative;
  z-index:2;
  margin-top:clamp(12px,2.4vh,20px);
  padding-top:clamp(11px,2vh,16px);
  border-top:1px solid rgba(245,241,232,.14);
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(245,241,232,.5);
}
.panel.panel .panel__pie a,
.mv-panel.mv-panel .mv-panel__pie a{
  color:rgba(245,241,232,.5);
  text-decoration:none;
  border-bottom:1px solid rgba(245,241,232,.28);
  padding-bottom:2px;
}
.panel.panel .panel__pie a:hover,
.mv-panel.mv-panel .mv-panel__pie a:hover{color:#FFD400;border-color:#FFD400}

/* --------------------------------------------------------------------------
   5. Pantallas muy bajas: se aprieta mas antes que aparezca scroll
   -------------------------------------------------------------------------- */
@media (max-height:680px){
  .panel.panel,
  .mv-panel.mv-panel{padding-top:clamp(68px,9.5vh,80px)}

  .panel.panel .panel__lista > a,
  .mv-panel.mv-panel .mv-panel__lista > a{font-size:clamp(20px,4.6vh,27px)}

  .panel.panel .panel__sub-l,
  .mv-panel.mv-panel .mv-panel__sub-l{font-size:12px}
}

/* El panel solo existe en movil */
@media (min-width:981px){
  .panel.panel,
  .mv-panel.mv-panel{display:none}
}

@media (prefers-reduced-motion:reduce){
  .panel.panel .panel__lista > a,
  .mv-panel.mv-panel .mv-panel__lista > a{transition:none}
}