/* ==========================================================================
   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}
}

/* ==========================================================================
   SUBMENU "MARCAS OFICIALES"
   Lista compacta en dos columnas, anclada por la izquierda.
   ========================================================================== */
.nav__mas--marcas .nav__sub{left:0;right:auto;width:min(90vw,420px)}
.nav__sub-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nav__sub-l--min{padding:9px 10px}
.nav__sub-l--min::before{top:10px;bottom:10px}
.nav__sub-l--min b{font-size:12.5px;letter-spacing:.01em}

@media(max-width:1180px){
  .nav__mas--marcas .nav__sub{left:auto;right:0}
}


/* ==========================================================================
   PANEL MOVIL - SEGUNDA VISTA "MARCAS OFICIALES"
   Una sola caja: al tocar la opcion se ocultan las demas y entran las
   marcas. El boton "Menu" regresa. Sirve igual en la landing (.panel)
   y en la tienda (.mv-panel).
   ========================================================================== */

/* El disparador se ve igual que los enlaces numerados */
.panel.panel .panel__lista > .panel__salto,
.mv-panel.mv-panel .mv-panel__lista > .mv-panel__salto{
  display:flex;
  align-items:baseline;
  gap:13px;
  width:100%;
  padding:clamp(3px,.7vh,7px) 0;
  background:none;
  border:0;
  cursor:pointer;
  text-align:left;
  color:#F5F1E8;
  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__salto b,
.mv-panel.mv-panel .mv-panel__salto 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__salto em,
.mv-panel.mv-panel .mv-panel__salto em{
  font-style:normal;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  text-transform:inherit;
}
/* Flecha */
.panel.panel .panel__salto i,
.mv-panel.mv-panel .mv-panel__salto i{
  width:8px;
  height:8px;
  margin-left:6px;
  border-right:2px solid #FF1E1E;
  border-top:2px solid #FF1E1E;
  transform:rotate(45deg);
  align-self:center;
}
.panel.panel .panel__salto:hover,
.panel.panel .panel__salto:active,
.mv-panel.mv-panel .mv-panel__salto:hover,
.mv-panel.mv-panel .mv-panel__salto:active{
  color:#FF1E1E;
  transform:translateX(9px);
}

/* La vista de marcas vive escondida hasta que se pide */
.panel.panel .panel__vista,
.mv-panel.mv-panel .mv-panel__vista{
  display:none;
  position:relative;
  z-index:2;
}

.panel.panel.en-marcas .panel__lista > a,
.panel.panel.en-marcas .panel__salto,
.panel.panel.en-marcas .panel__sub,
.panel.panel.en-marcas .panel__pie,
.mv-panel.mv-panel.en-marcas .mv-panel__lista > a,
.mv-panel.mv-panel.en-marcas .mv-panel__salto,
.mv-panel.mv-panel.en-marcas .mv-panel__sub,
.mv-panel.mv-panel.en-marcas .mv-panel__pie{
  display:none;
}

.panel.panel.en-marcas .panel__vista,
.mv-panel.mv-panel.en-marcas .mv-panel__vista{
  display:block;
  animation:mv-vista-entra .32s cubic-bezier(.16,1,.3,1) both;
}

@keyframes mv-vista-entra{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:none}
}

/* Regresar */
.panel.panel .panel__atras,
.mv-panel.mv-panel .mv-panel__atras{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:none;
  border:0;
  cursor:pointer;
  padding:0 0 clamp(10px,2vh,16px);
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(245,241,232,.6);
}
.panel.panel .panel__atras i,
.mv-panel.mv-panel .mv-panel__atras i{
  width:7px;
  height:7px;
  border-left:2px solid #FF1E1E;
  border-bottom:2px solid #FF1E1E;
  transform:rotate(45deg);
}
.panel.panel .panel__atras:hover,
.mv-panel.mv-panel .mv-panel__atras:hover{color:#F5F1E8}

.panel.panel .panel__vista-k,
.mv-panel.mv-panel .mv-panel__vista-k{
  display:block;
  font-family:var(--f-display,'Anton',sans-serif);
  text-transform:uppercase;
  font-size:clamp(22px,4.4vh,32px);
  line-height:1.1;
  color:#F5F1E8;
  padding-bottom:clamp(10px,2vh,16px);
  margin-bottom:clamp(8px,1.6vh,14px);
  border-bottom:1px solid rgba(245,241,232,.14);
}

/* Las marcas, en dos columnas si cabe */
.panel.panel .panel__vista-lista,
.mv-panel.mv-panel .mv-panel__vista-lista{
  display:grid;
  grid-template-columns:1fr;
  gap:0 18px;
}
@media (min-width:420px){
  .panel.panel .panel__vista-lista,
  .mv-panel.mv-panel .mv-panel__vista-lista{grid-template-columns:1fr 1fr}
}

.panel.panel .panel__vista-lista .panel__sub-l,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l{
  display:block;
  font-family:var(--f-cuerpo,'Space Grotesk',sans-serif);
  font-weight:700;
  font-size:clamp(13px,1.9vh,15.5px);
  line-height:1.32;
  text-transform:none;
  color:rgba(245,241,232,.85);
  text-decoration:none;
  padding:clamp(5px,1vh,9px) 0 clamp(5px,1vh,9px) 15px;
  position:relative;
}
.panel.panel .panel__vista-lista .panel__sub-l::before,
.mv-panel.mv-panel .mv-panel__vista-lista .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:.9;
}
.panel.panel .panel__vista-lista .panel__sub-l:active,
.panel.panel .panel__vista-lista .panel__sub-l:hover,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l:active,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l:hover{color:#F5F1E8}

@media (prefers-reduced-motion:reduce){
  .panel.panel.en-marcas .panel__vista,
  .mv-panel.mv-panel.en-marcas .mv-panel__vista{animation:none}
}


/* Encabezado de grupo dentro de la vista de marcas del panel */
.panel.panel .panel__vista-g,
.mv-panel.mv-panel .mv-panel__vista-g{
  display:block;
  grid-column:1 / -1;
  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:clamp(8px,1.6vh,14px) 0 6px;
}
.panel.panel .panel__vista-g:first-of-type,
.mv-panel.mv-panel .mv-panel__vista-g:first-of-type{margin-top:0}


/* ==========================================================================
   MARCAS: ALTURA CONTENIDA
   La lista no estira el panel: se queda en su caja y hace scroll dentro.
   ========================================================================== */

/* Dos columnas ya desde pantallas chicas */
@media (min-width:340px){
  .panel.panel .panel__vista-lista,
  .mv-panel.mv-panel .mv-panel__vista-lista{grid-template-columns:1fr 1fr}
}

.panel.panel .panel__vista-lista,
.mv-panel.mv-panel .mv-panel__vista-lista{
  max-height:calc(100vh - 300px);
  max-height:calc(100dvh - 300px);
  min-height:150px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding-right:6px;
  /* Se desvanece arriba y abajo para que se note que hay mas */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);
}

.panel.panel .panel__vista-lista::-webkit-scrollbar,
.mv-panel.mv-panel .mv-panel__vista-lista::-webkit-scrollbar{width:3px}
.panel.panel .panel__vista-lista::-webkit-scrollbar-thumb,
.mv-panel.mv-panel .mv-panel__vista-lista::-webkit-scrollbar-thumb{
  background:rgba(245,241,232,.28);border-radius:99px}

/* Boton "Otras": va a la tienda, no despliega nada */
.panel.panel .panel__vista-otras,
.mv-panel.mv-panel .mv-panel__vista-otras{
  display:block;
  margin-top:clamp(10px,2vh,16px);
  padding:11px 14px;
  border:1px solid rgba(255,212,0,.5);
  border-radius:999px;
  text-align:center;
  text-decoration:none;
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#FFD400;
}
.panel.panel .panel__vista-otras:active,
.mv-panel.mv-panel .mv-panel__vista-otras:active{
  background:rgba(255,212,0,.12);
}

/* Escritorio: el desplegable tampoco crece de mas */
.nav__sub--marcas .nav__sub-rejilla,
.mv-sub--marcas .mv-sub__rejilla{
  max-height:min(56vh,420px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Pie del desplegable en la tienda (equivale a .nav__sub-t de la landing) */
.mv-sub__t{
  display:block;
  margin-top:8px;
  padding:13px 12px 4px;
  border-top:1px solid rgba(245,241,232,.14);
  font-family:var(--mv-dato,'Space Mono',monospace);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#FFD400;
  text-decoration:none;
}
.mv-sub__t:hover{color:#F5F1E8}


/* ==========================================================================
   PRECIOS CON DESCUENTO
   WooCommerce mete un texto para lectores de pantalla ("Original price
   was... Current price is...") que ningun estilo estaba ocultando: se
   veia en pantalla, en ingles, y estiraba la tarjeta.
   ========================================================================== */
.screen-reader-text,
.marva-pz .screen-reader-text,
.woocommerce-Price-amount + .screen-reader-text{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* El precio tachado y el nuevo, en una sola linea */
.marva-pz .pz__precio,
.pz .pz__precio{
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.marva-pz .pz__precio del,
.pz .pz__precio del{order:1}
.marva-pz .pz__precio ins,
.pz .pz__precio ins{order:2}


/* ==========================================================================
   WHATSAPP FLOTANTE: DOS NUMEROS
   El boton conserva su estilo de landing.css; solo se le quita el
   posicionamiento, que ahora lo lleva el contenedor.
   ========================================================================== */
.wa-flot{
  position:fixed;
  right:clamp(14px,2.4vw,26px);
  bottom:clamp(14px,2.4vw,26px);
  z-index:9600;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.wa-flot .wa,
.wa-flot .wa-flot__b{
  position:relative !important;inset:auto !important
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  top:auto !important;
  border:0;
  padding:0;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}

.wa-flot.abierto .wa-flot__b{transform:rotate(-8deg) scale(.94)}

.wa-flot__lista{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .28s,transform .4s cubic-bezier(.16,1,.3,1),visibility .28s;
}

.wa-flot.abierto .wa-flot__lista{
  opacity:1;
  visibility:visible;
  transform:none;
}

.wa-flot__n{
  display:block;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(245,241,232,.14);
  background:rgba(15,14,21,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.9);
  text-decoration:none;
  text-align:right;
  white-space:nowrap;
  transition:border-color .25s,transform .25s;
}

.wa-flot__n b{
  display:block;
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:#F5F1E8;
}

.wa-flot__n em{
  display:block;
  margin-top:2px;
  font-style:normal;
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:9px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#25D366;
}

.wa-flot__n:hover{border-color:#25D366;transform:translateX(-3px)}

@media(max-width:520px){
  .wa-flot{right:14px;bottom:14px}
  .wa-flot__n{padding:9px 14px}
  .wa-flot__n b{font-size:12px}
}

/* Con el menu movil abierto estorba */
body.marva-panel-abierto .wa-flot{opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .wa-flot__lista,.wa-flot__n,.wa-flot .wa{transition:none}
}



/* =================================================================
   PEGAR AL FINAL DE /marvav2/assets/video.css

   Submenu de Catalogo en escritorio y pastillas de categoria en el
   panel movil. Reutiliza las clases ".nav__mas" y ".nav__sub" que ya
   existen arriba en este mismo archivo, asi que aqui solo van los
   ajustes propios de las categorias.
   ================================================================= */

/* --- Escritorio: el panel de Catalogo es mas angosto que el de "Mas",
       porque cada renglon es solo nombre y cuenta --- */
.nav__sub--cat{
  width:min(76vw,286px);
  max-height:min(70vh,520px);
  overflow-y:auto;
}

/* El desplegable de Catalogo se ancla a la izquierda: al estar a media
   barra, anclarlo a la derecha lo mandaba fuera de la pantalla. */
.nav__sub--cat{left:0;right:auto}

.nav__sub--cat .nav__sub-l{padding:10px 12px}
.nav__sub--cat .nav__sub-l b{font-size:13.5px}
.nav__sub--cat .nav__sub-l em{margin-top:3px;font-size:9px}

/* --- Movil: categorias como pastillas, en letra chica --- */
.panel__sub--cat{margin-top:clamp(10px,2vh,16px)}

.panel__cats{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.panel.panel .panel__cats .panel__cat,
.mv-panel.mv-panel .panel__cats .panel__cat{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(245,241,232,.16);
  background:rgba(245,241,232,.04);
  font-family:var(--f-dato,'Space Mono',monospace);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  color:rgba(245,241,232,.86);
  text-decoration:none;
  transform:none;
}


.panel.panel .panel__cats .panel__cat i,
.mv-panel.mv-panel .panel__cats .panel__cat i{
  font-style:normal;
  font-size:9px;
  font-weight:400;
  color:var(--ac,#FF1E1E);
  opacity:.9;
}

.panel.panel .panel__cats .panel__cat:hover,
.panel.panel .panel__cats .panel__cat:active{
  border-color:var(--ac,#FF1E1E);
  color:#F5F1E8;
  transform:none;
}

/* Pantallas muy bajas: la lista grande cede tamano para que las
   pastillas quepan sin provocar scroll en el panel. */
@media (max-height:680px){
  .panel__cats{gap:6px}
  .panel.panel .panel__cats .panel__cat,
  .mv-panel.mv-panel .panel__cats .panel__cat{padding:6px 10px;font-size:10px}
}

/* =================================================================
   MARVATOYS - CATEGORIAS EN EL MENU

   PEGAR AL FINAL DE LOS DOS ARCHIVOS, identico en ambos:
     /marvav2/assets/video.css        (landing)
     <tema-hijo>/assets/header.css    (tienda)

   Reutiliza todo lo que ya existe para Marcas Oficiales: el
   desplegable de escritorio (.nav__sub--marcas / .mv-sub--marcas) y
   la segunda vista del panel movil (.panel__vista). Aqui solo van
   las piezas que faltaban para que la vista "cats" se comporte igual
   que la de marcas, mas los ajustes de tamano en movil.
   ================================================================= */

/* --------------------------------------------------------------------------
   1. Escritorio: desplegable de Catalogo
      Mismas medidas que el de marcas. Anclado a la izquierda porque
      Catalogo esta a media barra y a la derecha se saldria de pantalla.
   -------------------------------------------------------------------------- */
.nav__mas--cat .nav__sub,
.mv-mas--cat .mv-sub{
  left:0;
  right:auto;
  width:min(90vw,420px);
}

@media (max-width:1180px){
  .nav__mas--cat .nav__sub,
  .mv-mas--cat .mv-sub{left:auto;right:0}
}

/* La rejilla de dos columnas y su tope de altura, igual que marcas */
.nav__sub--cat .nav__sub-rejilla,
.mv-sub--cat .mv-sub__rejilla{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  max-height:min(56vh,420px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* --------------------------------------------------------------------------
   2. Movil: la vista "cats" se comporta igual que "en-marcas"
      El CSS de marcas nombra su clase una por una, asi que la vista
      nueva necesita sus propias lineas o no se ocultaria nada.
   -------------------------------------------------------------------------- */
.panel.panel.en-cats .panel__lista > a,
.panel.panel.en-cats .panel__salto,
.panel.panel.en-cats .panel__sub,
.panel.panel.en-cats .panel__pie,
.mv-panel.mv-panel.en-cats .mv-panel__lista > a,
.mv-panel.mv-panel.en-cats .mv-panel__salto,
.mv-panel.mv-panel.en-cats .mv-panel__sub,
.mv-panel.mv-panel.en-cats .mv-panel__pie{
  display:none;
}

/* Cada vista solo aparece cuando le toca: sin esto, al entrar a una
   se verian las dos apiladas. */
.panel.panel.en-cats .panel__vista--cats,
.panel.panel.en-marcas .panel__vista--marcas,
.mv-panel.mv-panel.en-cats .mv-panel__vista--cats,
.mv-panel.mv-panel.en-marcas .mv-panel__vista--marcas{
  display:block;
  animation:mv-vista-entra .32s cubic-bezier(.16,1,.3,1) both;
}

.panel.panel.en-cats .panel__vista--marcas,
.panel.panel.en-marcas .panel__vista--cats,
.mv-panel.mv-panel.en-cats .mv-panel__vista--marcas,
.mv-panel.mv-panel.en-marcas .mv-panel__vista--cats{
  display:none;
}

@media (prefers-reduced-motion:reduce){
  .panel.panel.en-cats .panel__vista,
  .mv-panel.mv-panel.en-cats .mv-panel__vista{animation:none}
}

/* --------------------------------------------------------------------------
   3. Movil: letra mas chica en las listas de las vistas
      Con 12 categorias o 20 marcas, el tamano anterior obligaba a
      scrollear de mas. Aqui se aprieta sin perder el area de toque.
   -------------------------------------------------------------------------- */
.panel.panel .panel__vista-lista .panel__sub-l,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l{
  font-size:clamp(11.5px,1.6vh,13px);
  padding:clamp(4px,.85vh,7px) 0 clamp(4px,.85vh,7px) 14px;
  line-height:1.28;
}

.panel.panel .panel__vista-lista .panel__sub-l::before,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l::before{
  width:5px;
  height:5px;
  margin-top:-2.5px;
}

/* El titulo de la vista tambien baja de tamano */
.panel.panel .panel__vista-k,
.mv-panel.mv-panel .mv-panel__vista-k{
  font-size:clamp(18px,3.6vh,26px);
}

/* Con tres columnas caben las categorias, que son nombres cortos */
@media (min-width:380px){
  .panel.panel .panel__vista--cats .panel__vista-lista,
  .mv-panel.mv-panel .mv-panel__vista--cats .mv-panel__vista-lista{
    grid-template-columns:1fr 1fr;
  }
}

/* Pantallas muy bajas: se aprieta un poco mas */
@media (max-height:680px){
  .panel.panel .panel__vista-lista .panel__sub-l,
  .mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l{
    font-size:11.5px;
    padding-top:4px;
    padding-bottom:4px;
  }
}
/* =================================================================
   MARVATOYS - CATALOGO EN EL MENU

   PEGAR AL FINAL DE LOS DOS ARCHIVOS, identico en ambos:
     /marvav2/assets/video.css        (landing)
     <tema-hijo>/assets/header.css    (tienda)

   Reutiliza lo que ya existe para Marcas Oficiales: el desplegable de
   escritorio y la segunda vista del panel movil. Aqui solo van las
   piezas que faltaban para que la vista "cat" se comporte igual, mas
   los ajustes de tamano en movil.
   ================================================================= */

/* --------------------------------------------------------------------------
   1. Escritorio: desplegable de Catalogo
      Mismas medidas que el de marcas. Anclado a la izquierda porque
      Catalogo esta a media barra y a la derecha se saldria de pantalla.
   -------------------------------------------------------------------------- */
.nav__mas--cat .nav__sub,
.mv-mas--cat .mv-sub{
  left:0;
  right:auto;
  width:min(90vw,420px);
}

@media (max-width:1180px){
  .nav__mas--cat .nav__sub,
  .mv-mas--cat .mv-sub{left:auto;right:0}
}

/* La rejilla de dos columnas y su tope de altura, igual que marcas */
.nav__sub--cat .nav__sub-rejilla,
.mv-sub--cat .mv-sub__rejilla{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  max-height:min(56vh,420px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Las fichas del desplegable de la landing, al tamano de la tienda */
.nav__sub-l--min{padding:9px 10px}
.nav__sub-l--min::before{top:10px;bottom:10px}
.nav__sub-l--min b{font-size:12.5px;letter-spacing:.01em}

/* --------------------------------------------------------------------------
   2. Movil: la vista "cat" se comporta igual que "en-marcas"
      El CSS de marcas nombra su clase una por una, asi que la vista
      nueva necesita sus propias lineas o no se ocultaria nada.
   -------------------------------------------------------------------------- */
.panel.panel.en-cat .panel__lista > a,
.panel.panel.en-cat .panel__salto,
.panel.panel.en-cat .panel__sub,
.panel.panel.en-cat .panel__pie,
.mv-panel.mv-panel.en-cat .mv-panel__lista > a,
.mv-panel.mv-panel.en-cat .mv-panel__salto,
.mv-panel.mv-panel.en-cat .mv-panel__sub,
.mv-panel.mv-panel.en-cat .mv-panel__pie{
  display:none;
}

.panel.panel.en-cat .panel__vista,
.mv-panel.mv-panel.en-cat .mv-panel__vista{
  display:block;
  animation:mv-vista-entra .32s cubic-bezier(.16,1,.3,1) both;
}

/* Cada vista solo aparece cuando le toca: sin esto, al entrar a una se
   verian las dos apiladas, porque las reglas de arriba no distinguen. */
.panel.panel.en-cat .panel__vista--marcas,
.panel.panel.en-marcas .panel__vista--cat,
.mv-panel.mv-panel.en-cat .mv-panel__vista--marcas,
.mv-panel.mv-panel.en-marcas .mv-panel__vista--cat{
  display:none;
}

@media (prefers-reduced-motion:reduce){
  .panel.panel.en-cat .panel__vista,
  .mv-panel.mv-panel.en-cat .mv-panel__vista{animation:none}
}

/* --------------------------------------------------------------------------
   3. Movil: letra mas chica en las listas de las vistas
      Con doce categorias o quince marcas, el tamano anterior obligaba a
      scrollear de mas. Aqui se aprieta sin perder el area de toque.
   -------------------------------------------------------------------------- */
.panel.panel .panel__vista-lista .panel__sub-l,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l{
  font-size:clamp(11.5px,1.6vh,13px);
  padding:clamp(4px,.85vh,7px) 0 clamp(4px,.85vh,7px) 14px;
  line-height:1.28;
}

.panel.panel .panel__vista-lista .panel__sub-l::before,
.mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l::before{
  width:5px;
  height:5px;
  margin-top:-2.5px;
}

/* El titulo de la vista tambien baja de tamano */
.panel.panel .panel__vista-k,
.mv-panel.mv-panel .mv-panel__vista-k{
  font-size:clamp(18px,3.6vh,26px);
}

/* Pantallas muy bajas: se aprieta un poco mas */
@media (max-height:680px){
  .panel.panel .panel__vista-lista .panel__sub-l,
  .mv-panel.mv-panel .mv-panel__vista-lista .mv-panel__sub-l{
    font-size:11.5px;
    padding-top:4px;
    padding-bottom:4px;
  }
}