/* =============================================================================
   AERIAL ACADEMY — MOVEMENT ZONE — THEME-V1 (BORRADOR)
   Identidad propia (NO clon de aerial-dreams): limpio, luminoso, mucho blanco.
   Es una academia — se enseña, no se hace un show nocturno. Paleta y tipografía
   tomadas de MARCA.md (_brand/aerial-academy-mz/), extraídas del logo real.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Montserrat',system-ui,-apple-system,sans-serif;
  --color-ink:#1A1030; --color-bg:#FFFFFF; --color-bg-alt:#F6F5FA;
  --color-muted:#635C78; --color-rule:#E7E3F0;
  --color-accent:#048BAF; --color-accent2:#35156B;
  --color-on-accent:#FFFFFF; --color-on-dark:#FFFFFF;
  --radius:10px; --maxw:1180px;
}
::selection{background:var(--color-accent);color:#fff}
body{color:var(--color-ink);background:var(--color-bg)}

/* NAV */
.nav{background:color-mix(in srgb,#fff 88%,transparent);border-bottom:1px solid var(--color-rule)}
.nav__brand img{height:44px;width:auto;display:block}
.nav__links a{color:var(--color-ink);font-weight:600}
.nav__links a:hover{color:var(--color-accent)}

/* draft banner */
.draft-banner{background:#35156B;color:#fff;text-align:center;font-family:var(--font-body);font-weight:600;font-size:12px;letter-spacing:.08em;padding:9px 16px}
.draft-banner strong{color:#7FD8F0}

/* HERO — claro, aire, logo protagonista */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,#F6F5FA 100%);position:relative}
.hero__content{max-width:820px;margin:0 auto;padding:clamp(56px,10vh,110px) 32px clamp(48px,8vh,90px);text-align:center}
.hero__logo{max-width:min(480px,86vw);width:100%;height:auto;margin:0 auto 28px;display:block}
.hero__tag{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(20px,3.4vw,30px);color:var(--color-accent2);margin:0 0 10px}
.hero__sub{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--color-accent);margin:0 0 34px}
.hero__ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* secciones */
.section-label{color:var(--color-accent);font-weight:700}
.section-title{font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--color-accent2)}
.section-title em{font-style:normal;color:var(--color-accent)}
.section-subtitle{color:var(--color-muted);font-family:var(--font-body);font-style:normal;font-weight:500}
.section--alt{background:var(--color-bg-alt)}

/* about / qué es */
.about__lead{color:var(--color-ink);font-family:var(--font-body);font-style:normal;font-weight:500}
.about__list strong{color:var(--color-accent2)}

/* about photo — the source photography is stage/performance (black backdrop, purple stage
   lighting), which reads wrong for a white, kids-first academy site. Treatment: crop tight to
   the figure + colored silk (done at the file level), round the container, bias the visible
   crop toward the lower-right (where a young student in a light-blue leotard is visible in the
   background — the "golden" detail for this brand), and lay a soft light overlay on top so the
   photo sits comfortably next to all the white space instead of reading as a dark night scene. */
.about__photo{background:var(--color-bg-alt);position:relative;overflow:hidden;border-radius:20px;box-shadow:0 18px 46px rgba(53,21,107,.16)}
.about__photo img{object-position:66% 78%}
.about__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 42%,rgba(255,255,255,.18) 100%);pointer-events:none}
.about__photo-note{margin:10px 0 0;font-size:11px;letter-spacing:.05em;color:var(--color-muted);text-align:center}

/* cards */
.feature-card{background:#fff;border:1px solid var(--color-rule);border-top:3px solid var(--color-accent);box-shadow:0 10px 30px rgba(53,21,107,.05)}
.feature-card__icon{color:var(--color-accent)}
.feature-card__title{color:var(--color-accent2);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-family:var(--font-display)}
.feature-card__body{color:var(--color-muted)}

.note-box{max-width:720px;margin:34px auto 0;padding:16px 22px;background:#fff;border:1px dashed var(--color-accent);border-radius:var(--radius);text-align:center;font-size:14px;color:var(--color-accent2)}
.note-box strong{color:var(--color-accent2)}

/* botones */
.btn{border-radius:999px;letter-spacing:.14em;font-weight:700;border-width:2px}
.btn--primary{background:var(--color-accent2);color:#fff;border-color:var(--color-accent2)}
.btn--primary:hover:not(:disabled){background:var(--color-accent);border-color:var(--color-accent)}
.btn--ghost{color:var(--color-accent2);border-color:var(--color-accent2)}
.btn--ghost:hover:not(:disabled){background:var(--color-accent2);color:#fff;border-color:var(--color-accent2)}

/* form */
.form--card{background:#fff;border:1px solid var(--color-rule);box-shadow:0 20px 50px rgba(53,21,107,.06)}
.form__field input,.form__field textarea,.form__field select{background:#fff;color:var(--color-ink);border-color:var(--color-rule)}
.form__field input:focus,.form__field textarea:focus,.form__field select:focus{border-color:var(--color-accent)}
.contact__direct strong{color:var(--color-accent2)}

/* footer */
.footer{background:var(--color-accent2)}
.footer__brand img{height:40px;width:auto;filter:brightness(0) invert(1)}
.footer__role{color:#8FD9EE}
.footer__line span{color:#8FD9EE}

/* fade-in */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

@media(max-width:760px){
  .nav__inner{flex-direction:column;gap:10px;padding:12px 16px}
  .nav__links{flex-wrap:wrap;justify-content:center;gap:8px 16px}
  .nav__links a{font-size:11px;letter-spacing:.1em}
  .hero__ctas{flex-direction:column;width:100%;max-width:320px;margin:0 auto}
  .hero__ctas .btn{width:100%}
  .section{padding:56px 0}
}

/* ── Galería + lightbox ───────────────────────────────────────────── */
.gallery__grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);   /* 8 fotos = 2 filas exactas */
}
.gallery__item{
  margin:0; position:relative; overflow:hidden;
  border-radius:16px; background:var(--color-bg-alt);
  box-shadow:0 6px 20px rgba(53,21,107,.10);
  cursor:zoom-in; aspect-ratio:4/5;
  transition:transform .25s ease, box-shadow .25s ease;
  outline-offset:3px;
}
.gallery__item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.gallery__item:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(53,21,107,.18)}
.gallery__item:hover img{transform:scale(1.04)}
.gallery__item:focus-visible{outline:3px solid var(--color-accent)}
.gallery__note{
  margin-top:18px; text-align:center; font-size:.82rem;
  color:var(--color-muted); letter-spacing:.02em;
}
@media (max-width:900px){ .gallery__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .gallery__grid{gap:10px} }

.lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(20,10,42,.92); backdrop-filter:blur(4px);
  padding:24px; animation:lbIn .18s ease-out;
}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__stage{
  margin:0; max-width:min(1200px,92vw); max-height:88vh;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.lightbox__img{
  max-width:100%; max-height:80vh; object-fit:contain;
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#111;
}
.lightbox__caption{
  color:rgba(255,255,255,.82); font-size:.85rem; text-align:center;
  max-width:60ch; letter-spacing:.02em;
}
.lightbox__close,.lightbox__nav{
  border:0; cursor:pointer; color:#fff; background:rgba(255,255,255,.12);
  border-radius:999px; display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease;
}
.lightbox__close{
  position:absolute; top:18px; right:20px;
  width:44px; height:44px; font-size:1.8rem; line-height:1;
}
.lightbox__nav{width:52px; height:52px; font-size:2.2rem; line-height:1; flex:0 0 auto}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.26); transform:scale(1.06)}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:3px solid var(--color-accent); outline-offset:2px}
@media (max-width:640px){
  .lightbox{padding:12px}
  .lightbox__nav{width:42px; height:42px; font-size:1.7rem}
  .lightbox__img{max-height:72vh}
}

/* ── Logo animado: la figura cae desde arriba de la pagina y gira al pasar el cursor ── */
.hero__logo.logo-anim{
  position:relative; display:block;
  max-width:min(480px,86vw); width:100%; margin:0 auto 28px;
  overflow:visible;                     /* que la figura pueda venir de fuera de la caja */
}
/* wordmark y dancer comparten EXACTAMENTE el mismo lienzo (708x403) */
.logo-anim__wordmark{display:block; width:100%; height:auto}
.logo-anim__dancer{
  position:absolute; left:0; top:0; width:100%; height:auto;
  transform-origin:12.24% 33.64%;       /* centro real de la figura dentro del lienzo */
  animation:dancerDrop 2.4s cubic-bezier(.28,.85,.32,1) .2s both;
  will-change:transform;
}
/* baja desde arriba de la ventana, como quien desciende por una tela */
@keyframes dancerDrop{
  0%   {transform:translateY(-100vh) rotate(-10deg); opacity:0}
  12%  {opacity:1}
  62%  {transform:translateY(0)      rotate(0deg)}
  74%  {transform:translateY(-5%)    rotate(2.5deg)}
  86%  {transform:translateY(0)      rotate(0deg)}
  93%  {transform:translateY(-1.6%)  rotate(-1deg)}
  100% {transform:translateY(0)      rotate(0deg)}
}
/* zona sensible al cursor: solo donde esta la figura, no todo el lienzo */
.logo-anim__hit{
  position:absolute; left:0.7%; top:2.9%; width:23.5%; height:64.5%;
  cursor:pointer; z-index:3; background:transparent;
}
.logo-anim__hit:hover ~ .logo-anim__dancer,
.logo-anim__dancer.spin{animation:dancerSpin 1.15s cubic-bezier(.45,.05,.25,1)}
@keyframes dancerSpin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .logo-anim__dancer{animation:none}
  .logo-anim__hit:hover ~ .logo-anim__dancer{animation:none}
}

/* ── Foto de Vanessa: entera, sin recorte ── */
/* 50/50 exacto: imagen y texto ocupan lo mismo, y la foto llena su columna */
.about__grid{grid-template-columns:1fr 1fr !important; gap:48px; align-items:center}
.about__grid > *{min-width:0}
.about__photo{
  width:100%; display:block; line-height:0; background:none;
  border-radius:20px; overflow:hidden; box-shadow:0 14px 34px rgba(53,21,107,.16);
}
.about__photo img{width:100%; height:auto; display:block; aspect-ratio:auto; object-fit:fill}
.about__photo::after{content:none}
@media (max-width:900px){ .about__grid{grid-template-columns:1fr !important; gap:32px} }

/* ── Banda fotográfica con texto ── */
.photoband{position:relative; overflow:hidden; min-height:clamp(340px,46vw,520px); display:grid; place-items:center; margin:0}
.photoband__media{position:absolute; inset:0}
.photoband__media img{width:100%; height:100%; object-fit:cover; display:block}
.photoband__overlay{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(53,21,107,.86) 0%, rgba(53,21,107,.62) 45%, rgba(4,139,175,.34) 100%);
}
.photoband__content{position:relative; z-index:2; text-align:center; color:#fff; padding:60px 24px; max-width:760px}
.photoband__kicker{
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:.24em; font-size:11px; color:#8FD9EE; margin:0 0 14px;
}
.photoband__title{
  font-family:var(--font-display); font-weight:800; line-height:1.12;
  font-size:clamp(28px,4.6vw,46px); margin:0 0 16px; color:#fff;
}
.photoband__text{font-size:15px; line-height:1.7; color:rgba(255,255,255,.9); margin:0 auto; max-width:56ch}
@media (max-width:640px){ .photoband__content{padding:44px 20px} }

/* la foto DEBE llenar su mitad — gana a cualquier regla previa de base.css */
.about__grid > *{width:100%}
.about__photo{width:100% !important; max-width:none !important; height:auto !important; aspect-ratio:auto !important}
.about__photo img{
  width:100% !important; max-width:none !important;
  height:auto !important; aspect-ratio:auto !important;
  object-fit:contain !important; object-position:center !important;
}

/* la etiqueta "Instagram" no entra en los 70px del footer original */
.footer__line{grid-template-columns:92px 1fr}

/* ── About: 50/50 REAL ──────────────────────────────────────────────
   `1fr` es minmax(auto,1fr): el texto empuja su columna y le come ancho
   a la foto. minmax(0,1fr) fuerza mitades exactas.                     */
.about__grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.38fr) minmax(0,1fr) !important;
  gap:44px !important;
  align-items:center !important;
}
.about__grid > *{width:100% !important; min-width:0 !important; max-width:none !important}
.about__photo{display:block !important}
.about__photo img{width:100% !important; height:auto !important; display:block !important}
@media (max-width:900px){
  .about__grid{grid-template-columns:minmax(0,1fr) !important; gap:32px !important}
}

/* About: seccion mas ancha que el resto + mas peso a la foto.
   Asi la imagen crece SIN achicar el texto. */
#about > .container{max-width:1400px}
.about__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) !important}
@media (max-width:900px){ #about > .container{max-width:none} }


/* ══════════════════════════════════════════════════════════════════
   NIVELES Y CLASES (17-ago-2026) — texto de Vanessa + las 5 ilustraciones.
   Reemplaza a las 3 tarjetas genericas que habia en #classes.

   AJUSTE 17-ago-2026 (tarde): las 5 ilustraciones asignadas eran de
   aparatos equivocados (trapecio/aro/espiral en vez de telas — las 5
   clases de nivel son TODAS aerial silks). Se sacó <div class="level-card__art">
   del HTML de las 5 tarjetas. La regla de abajo (.level-card__art) queda
   INTACTA y lista: cuando Vanessa mande las 3 fotos de telas, alcanza con
   volver a poner el div en index.html — no hace falta tocar este CSS.
   Mientras tanto la tarjeta se rediseñó para sostenerse sola sin imagen
   (más aire arriba, rank/título con más presencia).
   ══════════════════════════════════════════════════════════════════ */
.levels__grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; align-items:start;
}
.level-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--color-rule); border-top:3px solid var(--color-accent);
  border-radius:var(--radius); box-shadow:0 10px 30px rgba(53,21,107,.05);
  padding:28px 22px 22px; overflow:hidden;
}
/* La ilustracion es el "icono" de la tarjeta: recortada con transparencia real,
   asi que se apoya en el fondo blanco sin caja ni marco.
   INERTE por ahora (ver nota arriba) — no hay .level-card__art en el HTML. */
.level-card__art{
  height:190px; margin:0 -20px 4px; display:flex; align-items:flex-end; justify-content:center;
  background:linear-gradient(180deg,var(--color-bg-alt) 0%,#fff 100%);
}
.level-card__art img{ height:178px; width:auto; max-width:100%; object-fit:contain; display:block; }
.level-card__rank{
  font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.18em;
  color:var(--color-accent); margin:0 0 6px;
}
.level-card__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--color-accent2); font-size:22px; margin:0 0 6px;
}
.level-card__tier{
  font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--color-accent);
  text-transform:uppercase; margin:0 0 14px; line-height:1.6; min-height:39px;
}
/* El detalle se despliega al hacer clic: la tarjeta se escanea, no se lee.
   Va con <details> nativo — funciona con teclado y sin una linea de JS. */
.level-card__more{ margin:0 0 14px; flex:1; }
.level-card__more > summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-accent); padding:2px 0;
}
.level-card__more > summary::-webkit-details-marker{ display:none; }
.level-card__more > summary::after{ content:'+'; font-size:15px; line-height:1; font-weight:700; }
.level-card__more[open] > summary::after{ content:'–'; }
.level-card__more > summary:hover{ color:var(--color-accent2); }
.level-card__more > summary:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:3px; }
.level-card__body{ font-size:13.5px; line-height:1.6; color:var(--color-muted); margin:10px 0 0; }
/* El requisito de ingreso es el dato que decide la inscripcion: va destacado y al pie. */
.level-card__req{
  margin:0; padding-top:12px; border-top:1px solid var(--color-rule);
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.level-card__req--open{ color:var(--color-accent); }
.level-card__req--approval{ color:var(--color-accent2); }

/* Aerial Mix & Fly — bloque aparte: no es un nivel, es otro formato de clase. */
.mixfly{
  margin-top:52px; background:#fff; border:1px solid var(--color-rule);
  border-radius:var(--radius); padding:34px 34px 30px; box-shadow:0 10px 30px rgba(53,21,107,.05);
}
.mixfly__head{ text-align:center; max-width:760px; margin:0 auto 28px; }
.mixfly__title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--color-accent2); font-size:23px; margin:0 0 12px;
}
.mixfly__lead{ font-size:14.5px; line-height:1.7; color:var(--color-muted); margin:0 0 10px; }
.mixfly__alt{ font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-accent); margin:0; }
/* 17-ago-2026: con las 5 tarjetas de nivel sin ilustracion (ver nota arriba), estos 3
   iconos quedaron como la unica imagen de #classes — ya no compiten con nada, asi que
   suben de tamaño para que la seccion no se sienta puro texto. Techo real del archivo:
   560px de alto, asi que a esta escala siguen nitidos. */
.mixfly__thumbs{ display:flex; justify-content:center; align-items:flex-end; gap:36px; margin:0 0 28px; }
.mixfly__thumbs img{ height:150px; width:auto; display:block; opacity:.92; }
.mixfly__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.mixfly__class{ border:1px solid var(--color-rule); border-left:3px solid var(--color-accent); border-radius:var(--radius); padding:20px 22px; }
.mixfly__class h4{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--color-accent2); font-size:16px; margin:0 0 3px;
}
.mixfly__level{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--color-accent); margin:0 0 12px; }
.mixfly__meta{ list-style:none; margin:0 0 12px; padding:0; font-size:13px; color:var(--color-accent2); }
.mixfly__meta li{ padding:3px 0; }
.mixfly__meta strong{ font-weight:700; }
.mixfly__class p{ font-size:13.5px; line-height:1.6; color:var(--color-muted); margin:0; }



/* Boton "Schedule" del menu (17-ago-2026) — es el unico enlace del nav que lleva
   a OTRA pagina, no a un ancla del home: por eso va marcado y no como un link mas. */
.nav__links a.nav__cta{
  background:var(--color-accent2); color:#fff; padding:8px 16px; border-radius:999px;
  transition:background .18s ease;
}
.nav__links a.nav__cta:hover{ background:var(--color-accent); color:#fff; }
@media (max-width:900px){
  .nav__links a.nav__cta{ padding:6px 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   MÓVIL — va al FINAL a propósito: cualquier regla !important de
   arriba (las de escritorio) se pisa acá. El bug era justamente ese:
   el About quedaba en 2 columnas de 186px y 124px en un teléfono.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* About: una sola columna, foto a ancho completo */
  #about > .container{max-width:none !important}
  .about__grid{
    grid-template-columns:1fr !important;
    gap:26px !important;
    align-items:stretch !important;
    margin-bottom:0 !important;
  }
  .about__grid > *{width:100% !important}
  .about__photo{width:100% !important; border-radius:16px}
  .about__photo img{width:100% !important; height:auto !important}
  .about__lead{font-size:18px !important; line-height:1.55 !important}
  .about__list li{font-size:14px}
}

@media (max-width:640px){
  /* respiro lateral y tipografía a escala de teléfono */
  .container{padding:0 20px}
  .section{padding:52px 0}
  .hero__content{padding:48px 20px 56px}
  .hero__tag{font-size:22px !important; letter-spacing:.10em}
  .hero__sub{font-size:11px; letter-spacing:.16em}
  .hero__ctas{flex-direction:column; gap:12px}
  .hero__ctas .btn{width:100%}
  .about__lead{font-size:17px !important}
  .section-title{font-size:26px}
  .section-subtitle{font-size:14px}
  .feature-card{padding:22px}
  .photoband{min-height:300px}
  .photoband__title{font-size:24px !important}
  .photoband__text{font-size:14px}
  .gallery__grid{grid-template-columns:repeat(2,1fr) !important; gap:8px}
  .note-box{font-size:13px}
  .footer__line{grid-template-columns:1fr; gap:2px}
  .footer__line span{font-size:9px}
}

@media (max-width:430px){
  /* iPhone: la galería a una columna se ve mejor que 2 miniaturas */
  .gallery__item{aspect-ratio:1/1}
}


/* Niveles y Mix & Fly en pantallas chicas — va al final, como el resto del movil. */
@media (max-width:1100px){
  .levels__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width:760px){
  .levels__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; }
  .mixfly__grid{ grid-template-columns:minmax(0,1fr) !important; }
  .mixfly{ padding:26px 20px 22px !important; }
  /* 17-ago-2026 (reporte de Vanessa desde el iPhone: "de las 5 ilustraciones de
     Mix & Fly solo se ven las 3 del centro"). La fila es un flex SIN wrap con
     justify-content:center y 5 imagenes de alto fijo: cuando no caben, el
     sobrante se corta por los DOS lados a la vez y ademas estira el ancho del
     documento (Safari de iOS achica entonces TODA la pagina para que entre).
     El alto y el gap pasan a escalar con el ancho, y el wrap queda de red:
     en 393px CSS las 5 entran en una sola fila; mas angosto, bajan de linea
     en vez de desaparecer. Son 5, no 3 — la version anterior asumia 3. */
  .mixfly__thumbs{ flex-wrap:wrap !important; gap:12px clamp(10px,4vw,36px) !important; }
  .mixfly__thumbs img{ height:clamp(86px,22vw,150px) !important; max-width:100% !important; }
}
@media (max-width:460px){
  .levels__grid{ grid-template-columns:minmax(0,1fr) !important; }
  .level-card__art{ height:210px !important; }
  .level-card__art img{ height:196px !important; }
}