/* home.css · Portada de macutomusic.com con lo aprendido en la landing Skin Pearl de Neyver (10-oct-2026).
 *
 * QUÉ ES    Capa SOLO de index.html, cargada DESPUÉS de styles.css. No toca las otras páginas del sitio:
 *           styles.css es común a 39 páginas (y a 10-oct tenía cambios sin commit de otra sesión).
 * REGLAS    1. Nada se esconde al hacer scroll: .reveal solo se desplaza (transform), nunca opacity:0.
 *              Sin JS, en una captura a página completa o para un buscador, la página se ve entera.
 *           2. Lo que se mueve en bucle o al cargar va dentro de (prefers-reduced-motion: no-preference)
 *              o se para con «reducir movimiento». Solo se anima transform y opacity.
 *           3. Objetivos táctiles de 44 px con (pointer: coarse).
 * PAREJA    El último <script> de index.html: aparición (.in), novedades pasadas (.nov-pasada), «Ver más»
 *           (data-despliega) y pausa de la cinta de géneros fuera de pantalla.
 * VERSIÓN   index.html la enlaza como home.css?v=<8 primeros hex del md5>. El hook de pre-commit solo sella
 *           styles.css: si cambias este fichero, actualiza el ?v= a mano  →  md5 -q home.css | cut -c1-8
 * MEDIR     DAP_Command_Center/09_Automatizaciones/macuto_web/ (auditar_web.py, medir_web.py, probar_home.py).
 */

/* ---------- 1 · Aparición sin esconder nada ---------- */
.reveal{opacity:1;transform:none;transition:transform .7s var(--ease)}
.js .reveal:not(.in){transform:translateY(24px)}
.reveal.ya{transition:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal:not(.in){transform:none}
  .marquee .track,.s-dot::after{animation:none!important}
}

/* ---------- 2 · Tacto ---------- */
a,button,summary{-webkit-tap-highlight-color:transparent}
.btn,summary,.ver-mas{touch-action:manipulation}
.btn:active{transform:scale(.975);transition-duration:.08s}
@media (pointer:coarse){
  .nav-links .btn{min-height:44px}
  .logo{min-height:44px}
  .link-arrow{min-height:44px}
  .foot-legal a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 3 · Cabecera móvil: el botón es la acción («Solicita acceso»), no un ancla ---------- */
/* (14-oct-2026: el corte del texto del logo vive ahora en styles.css, ≤349 px, junto al nav compacto de ≤389; así lo tiene también el RADAR) */

/* ---------- 4 · Héroe: un botón y una captura real ---------- */
.hero .cta-row{align-items:center;gap:12px 24px}
.enlace-sec{font-weight:600;color:var(--ink);font-size:.97rem;text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1.5px;text-underline-offset:5px;padding:12px 0;transition:color .2s,text-decoration-color .2s}
.enlace-sec:hover{color:var(--purple);text-decoration-color:var(--purple)}

.prueba{margin:0;justify-self:center;width:min(290px,100%)}
.prueba__movil{display:block;border-radius:36px;padding:9px;background:var(--ink);box-shadow:var(--shadow-lg);transform:rotate(2deg)}
.prueba__movil img{width:100%;height:auto;border-radius:28px}
.prueba figcaption{margin:24px auto 0;max-width:17em;text-align:center;font-size:.86rem;color:var(--muted);line-height:1.45}
.prueba figcaption b{display:block;color:var(--ink);font-family:'Poppins','Poppins Reserva',sans-serif;font-weight:600;font-size:.92rem}
@media (max-width:940px){.prueba{width:min(240px,100%);margin-top:28px}}
@media (max-width:600px){.prueba{display:none}}

/* Una sola coreografía, al cargar y solo en el héroe (no depende del scroll ni del JS) */
@media (prefers-reduced-motion:no-preference){
  .hero .entra{animation:asoma .8s var(--ease) backwards}
  .hero h1.entra{animation:asoma-titulo 1s var(--ease) .06s backwards}
  .hero .e1{animation-delay:.14s}.hero .e2{animation-delay:.22s}.hero .e3{animation-delay:.3s}.hero .e4{animation-delay:.38s}
  .hero .prueba.entra{animation:asoma-prueba 1.1s var(--ease) .2s backwards}
}
@keyframes asoma{from{opacity:0;transform:translateY(16px)}}
@keyframes asoma-titulo{from{opacity:0;transform:translateY(.35em)}}
@keyframes asoma-prueba{from{opacity:0;transform:translateY(26px) scale(.97)}}

/* ---------- 5 · Quién está detrás ---------- */
.fundador{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;margin-top:84px;padding-top:72px;border-top:1px solid var(--line)}
.fundador__foto{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--purple-wash);aspect-ratio:4/5}
.fundador__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.fundador__nombre{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;margin:16px 0 6px}
.fundador__cargo{font-family:'Poppins','Poppins Reserva',sans-serif;font-weight:600;color:var(--purple);margin-bottom:18px}
.fundador__txt > p:not(.fundador__cargo){font-size:1.05rem;margin-bottom:14px}
.fundador__txt > p b{color:var(--ink)}
.fundador__txt > p.fundador__lema{font:700 clamp(1.25rem,2.4vw,1.5rem)/1.2 'Poppins','Poppins Reserva',sans-serif;color:var(--purple);margin:6px 0 0}
@media (max-width:820px){
  .fundador{grid-template-columns:1fr;gap:28px;margin-top:56px;padding-top:52px}
  .fundador__foto{max-width:420px;aspect-ratio:1/1}
}

/* ---------- 6 · La acción, repetida tras cada bloque de prueba ---------- */
.repite-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:48px;text-align:center}
.repite-cta span{color:var(--muted);font-size:.92rem}

/* ---------- 7 · Menos pantallas: carriles en móvil y «Ver más» ---------- */
.ver-mas{display:none;margin:22px auto 0;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:600 .95rem 'Poppins','Poppins Reserva',sans-serif;cursor:pointer;transition:border-color .2s,color .2s}
.ver-mas:hover{border-color:var(--line-strong);color:var(--purple)}
@media (max-width:600px){
  .js .roster.plegado > :nth-child(n+9){display:none}
  .js .roster.plegado + .ver-mas{display:flex}
}
/* 14-oct-2026: en tablet vertical (601-880 px) no se plegaba nada y salían los 21 artistas y las 36 capturas (la página pasaba de
   ~21.800 a 33.600 px). Ahora el roster enseña 2 filas de 6 y la galería, 3 filas de 2, con su «Ver más». */
@media (min-width:601px) and (max-width:880px){
  .js .roster.plegado > :nth-child(n+13){display:none}
  .js .roster.plegado + .ver-mas{display:flex}
}
@media (min-width:601px){
  .js .gallery.plegada .shot:nth-child(n+7){display:none}
  .js .gallery.plegada + .ver-mas{display:flex}
}
@media (min-width:601px) and (max-width:880px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .carril-movil{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-inline:-28px;padding:6px 28px 18px;scroll-padding-inline:28px;overscroll-behavior-x:contain;scrollbar-width:thin}
  .carril-movil > *{flex:0 0 min(80%,320px);scroll-snap-align:start}
  .carril-movil > .reveal{transform:none}
  .carril-movil .shot:hover,.carril-movil .artist:hover{transform:none}
}

/* ---------- 8 · Novedades: lo hecho, con su descripción y su sello «✓ Hecho» (12-oct-2026, Macuto: «lo hecho antes ponía
   descripción, mantén eso y busca la manera de resaltar, aunque menos que los eventos próximos»). Jerarquía: el próximo (.nov-next) lleva
   el lavado morado; lo hecho, tarjeta blanca con sello oscuro; el orden cronológico no cambia. ---------- */
.nov-pasada{background:var(--surface);border-color:var(--line)}
.nov-pasada h3{color:var(--ink)}
.nov-pasada p{font-size:.92rem;color:var(--text)}
.nov-pasada .nov-fecha{background:transparent;border:1px solid rgba(94,23,235,.28);color:#7c4ee8}  /* 12-oct, Macuto: «un morado de marca más suave» (5,1:1 sobre blanco); las próximas siguen con #5E17EB y fondo */
/* 14-oct-2026: la fecha y su etiqueta («Hecho», «Ahora», «Próximo») van en una fila propia (.nov-cab, la crea el script de la portada):
   antes «Hecho» bajaba de línea solo en «Mastermind presencial» y «Próximo» iba metido en el título. */
/* la etiqueta arriba y la fecha debajo, siempre: en fila, una fecha larga («19 septiembre 2026 · Madrid») la mandaba a otra línea solo en esa tarjeta */
.nov-cab{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}
.nov-cab .nov-fecha{margin:0}
.nov-cab .hecho,.nov-cab .soon{order:-1;margin:0}
.hecho{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;background:var(--ink);color:#fff;
  font-family:'Poppins','Poppins Reserva',sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;vertical-align:middle}
.hecho::before{content:"✓"}

/* ---------- 9 · Preguntas en acordeón (se abre una y se cierra la anterior) ---------- */
.faq-lista{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:44px;padding:19px 22px 19px 24px;font-family:'Poppins','Poppins Reserva',sans-serif;font-weight:600;font-size:1.06rem;line-height:1.3;color:var(--ink);border-radius:var(--r-md)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--purple-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%235E17EB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--purple)}
.faq-resp{padding:0 24px 22px}
.faq-resp p{font-size:.97rem;max-width:none}
.faq-resp p b{color:var(--ink)}
.faq-resp a{color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- 10 · Pie: desde el 11-oct-2026 vive entero en styles.css («footer»), igual en todo el sitio ---------- */

/* ---------- 11 · Correcciones ---------- */
/* «Powered by Macuto Music» heredaba el lila de .organic p (contraste 1,23:1 sobre el fondo de la página) */
.organic > .wrap > .roster-note{color:var(--muted)}
/* La cinta de géneros se para fuera de pantalla y con la pestaña oculta (no gasta batería a 10 pantallas) */
.marquee[data-fuera] .track,[data-oculta] .marquee .track{animation-play-state:paused}

/* ---------- 12 · Héroe móvil más compacto: el botón queda por encima del aviso de cookies (≈110 px abajo) ---------- */
@media (max-width:600px){
  .hero{padding-top:34px}
  .hero p.lead{margin:18px 0 24px}
  .hero .scarcity{margin-bottom:18px}
}

/* ---------- 13 · Las imágenes llevan width/height (reservan sitio, sin saltos): la proporción la sigue mandando la CSS ---------- */
.rcard img{height:auto}

/* ---------- 14 · Cabecera entre 881 y 1120 px: los enlaces no caben con 28 px de hueco (el logo chocaba con «Nosotros») ---------- */
.nav-links a:not(.btn){white-space:nowrap}
@media (min-width:1001px) and (max-width:1120px){.nav-links{gap:16px}.nav-links a:not(.btn){font-size:.9rem}}
@media (max-width:1000px){.nav-links a:not(.btn){display:none}.nav-links a.nav-keep-link{display:inline-flex}}

/* ---------- 16 · En persona: Mastermind y Forbes (dentro de #novedades) ---------- */
.evento{margin-top:64px}
.evento__cab{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:8px 32px;align-items:end;margin-bottom:22px}
.evento__cab h3{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700}
.evento__cab p{font-size:.97rem;color:var(--text);max-width:none}
.evento__fotos{display:grid;gap:14px}
.evento__fotos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.evento__fotos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.evento__fotos figure{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--purple-wash);position:relative;box-shadow:var(--shadow-sm)}
.evento__fotos img{width:100%;height:auto;object-fit:cover}
.evento__fotos--3 img{aspect-ratio:3/2}
.evento__fotos--4 img{aspect-ratio:3/4;object-position:50% 18%}
.evento__fotos figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);font:600 .74rem/1.3 'Poppins','Poppins Reserva',sans-serif;letter-spacing:.02em;color:#fff;background:rgba(23,16,46,.7);padding:6px 11px;border-radius:99px}
@media (max-width:880px) and (min-width:601px){.evento__fotos--3,.evento__fotos--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.evento__cab{grid-template-columns:1fr}}
@media (max-width:600px){.evento{margin-top:48px}.evento__fotos--4.carril-movil > *{flex-basis:min(62%,260px)}}
/* La foto de 2025 es 9:16: el encuadre baja hasta la revista y la acreditación «Macuto · Macuto Music», que es lo que cuenta el pie */
.evento__fotos--4 .evento__foto--abajo img{object-position:50% 90%}

/* ---------- 17 · Feed vertical del héroe: capturas que suben como un scroll de redes (11-oct-2026) ---------- */
.prueba__movil{position:relative}
.feed{position:relative;overflow:hidden;border-radius:28px;aspect-ratio:9/16;background:#0b0a14;cursor:pointer}
.feed__pista{list-style:none;margin:0;padding:0;height:100%;transition:transform .78s cubic-bezier(.65,0,.25,1);will-change:transform}
/* La pista mide lo mismo que la pantalla: translateY(-100%) avanza exactamente una captura. Cada captura, 9:16 por su anchura. */
.feed__item{position:relative;height:0;padding-bottom:calc(100% * 16 / 9)}
.prueba__movil .feed__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.feed__item picture{position:absolute;inset:0}
.feed__pie{position:absolute;left:10px;right:10px;bottom:12px;font:600 .74rem/1.3 'Poppins','Poppins Reserva',sans-serif;color:#fff;background:rgba(23,16,46,.74);padding:7px 10px;border-radius:12px;text-align:center}
.feed__pausa{position:absolute;top:20px;right:20px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(23,16,46,.62);cursor:pointer;display:grid;place-items:center}
.feed__pausa::before{content:"";width:4px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:content-box}
.feed__pausa[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:3px}
.feed__pausa:focus-visible{outline-color:#fff}
@media (pointer:coarse){.feed__pausa{width:44px;height:44px}}

/* ---------- 18 · Cómo trabajamos: bolitas grandes que se rellenan de color al entrar en pantalla (11-oct-2026) ----------
   Estado final (y sin JS): 72 px, degradado morado, número en blanco. Con JS, cada paso entra pequeño y en contorno
   y se rellena en cadena (1 → 4) cuando .reveal recibe .in. El degradado vive en ::before (z-index -1 dentro de
   isolation) para poder fundirlo con opacity; el número queda siempre encima. La línea se recoloca al centro. */
.timeline::before{top:35px;height:3px;border-radius:3px}
.tstep .n{width:72px;height:72px;margin-bottom:22px;border:0;font-size:1.6rem;color:#fff;background:var(--surface);isolation:isolate;
  box-shadow:0 0 0 6px var(--bg),0 0 0 8px var(--purple-wash-2),0 14px 30px -10px rgba(94,23,235,.55);
  transition:transform .7s cubic-bezier(.34,1.56,.64,1),color .5s,box-shadow .7s}
.tstep .n::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;transition:opacity .55s ease;
  background:linear-gradient(140deg,#8b5cf6 0%,var(--purple) 55%,var(--purple-deep) 100%)}
.tstep:nth-child(2) .n::before{background:linear-gradient(140deg,#a855f7 0%,#7c3aed 55%,var(--purple-deep) 100%)}
.tstep:nth-child(3) .n::before{background:linear-gradient(140deg,#c026d3 0%,#8b2cf0 55%,var(--purple) 100%)}
.tstep:nth-child(4) .n::before{background:linear-gradient(140deg,#db2777 0%,#a21caf 50%,var(--purple) 100%)}
.js .tstep:not(.in) .n{transform:scale(.62);color:var(--purple);box-shadow:inset 0 0 0 2px var(--purple),0 0 0 6px var(--bg)}
.js .tstep:not(.in) .n::before{opacity:0}
.tstep:nth-child(2) .n,.tstep:nth-child(2) .n::before{transition-delay:.18s}
.tstep:nth-child(3) .n,.tstep:nth-child(3) .n::before{transition-delay:.36s}
.tstep:nth-child(4) .n,.tstep:nth-child(4) .n::before{transition-delay:.54s}
@media (hover:hover){.tstep:hover .n{transform:scale(1.08);transition-delay:0s}}
@media (max-width:880px){
  .timeline::before{left:27px;top:12px;bottom:12px;width:3px;height:auto}
  .tstep{grid-template-columns:56px 1fr}
  .tstep .n{width:56px;height:56px;margin:0;font-size:1.3rem;box-shadow:0 0 0 5px var(--bg),0 10px 22px -10px rgba(94,23,235,.55)}
}
@media (prefers-reduced-motion:reduce){.tstep .n,.tstep .n::before{transition:none}.js .tstep:not(.in) .n{transform:none}}

/* ---------- 19 · Feed: diapositiva de vídeo (Mastermind) con botón de sonido (11-oct-2026) ----------
   El vídeo va encima del fotograma fijo y no se ve hasta que suena el primer fotograma (.va), así nunca hay un recuadro negro. */
.feed__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;background:transparent}
.feed__video.va{opacity:1}
.feed__sonido{position:absolute;top:20px;left:20px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 13px 7px 10px;
  border:0;border-radius:99px;background:rgba(23,16,46,.66);color:#fff;font:600 .78rem/1 'Poppins','Poppins Reserva',sans-serif;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.feed__sonido svg{width:18px;height:18px;flex:none}
.feed__sonido .ondas{display:none}
.feed__sonido[aria-pressed="true"] .ondas{display:inline}
.feed__sonido[aria-pressed="true"] .mudo{display:none}
.feed__sonido[aria-pressed="false"]{animation:sonido-llama 2.2s ease-out infinite}
.feed__sonido:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes sonido-llama{0%{box-shadow:0 0 0 0 rgba(139,92,246,.75)}70%,100%{box-shadow:0 0 0 12px rgba(139,92,246,0)}}
@media (pointer:coarse){.feed__sonido{min-height:44px}}
@media (prefers-reduced-motion:reduce){.feed__sonido{animation:none!important}}

/* ---------- 20 · Eventos: fotos verticales cuyo motivo está en el centro (NODE) ---------- */
.evento__fotos--4 .evento__foto--centro img{object-position:50% 50%}


/* ---------- 21 · Visión: el aftermovie de la Mastermind crece con el scroll hasta llenar la pantalla (11-oct-2026) ----------
   --p (0 → 1) lo pone el JS del propio bloque #vision. Solo se anima transform y opacity (sin reflujo). El vídeo mide siempre
   la pantalla entera y se escala desde 0,5 junto al texto hasta 1, con el texto desvanecido. Sin JS: composición inicial y
   póster. En móvil y con «reducir movimiento»: texto arriba y vídeo 16:9 debajo, sin animación. */
.vision{--p:0;position:relative;background:#0b0a14;color:#fff}
.js .vision__pista{height:260vh}
.vision__fijo{position:sticky;top:0;height:100vh;overflow:hidden}
.vision__marco{position:absolute;inset:0;overflow:hidden;background:#000;transform-origin:100% 50%;
  transform:translateX(calc((1 - var(--p)) * -5vw)) scale(calc(.5 + .5 * var(--p)));border-radius:calc((1 - var(--p)) * 44px);will-change:transform}
.vision__video{display:block;width:100%;height:100%;object-fit:cover}
.vision__txt{position:absolute;z-index:2;left:max(5vw,calc((100vw - 1180px) / 2));top:50%;width:min(38vw,470px);
  transform:translateY(calc(-50% - var(--p) * 60px));opacity:calc(1 - var(--p) * 2.2)}
.vision--llena .vision__txt{visibility:hidden}
.vision .eyebrow{color:#c9b8f5}
.vision__txt h2{color:#fff;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.06;margin:14px 0 16px}
.vision__txt p{color:rgba(255,255,255,.8);font-size:1.06rem;max-width:none}
.vision__txt p.vision__dato{margin-top:18px;font:600 .85rem/1.4 'Poppins','Poppins Reserva',sans-serif;color:#c9b8f5}
.vision__pista-txt{display:inline-block;margin-top:24px;font:600 .78rem 'Poppins','Poppins Reserva',sans-serif;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.vision__botones{position:absolute;z-index:3;right:18px;bottom:18px;display:flex;gap:10px;transform:translate(calc((var(--p) - 1) * 5vw),calc((var(--p) - 1) * 25vh))}
.vision__botones button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 15px 8px 12px;border:0;border-radius:99px;
  background:rgba(23,16,46,.68);color:#fff;font:600 .82rem/1 'Poppins','Poppins Reserva',sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vision__botones button:hover{background:rgba(94,23,235,.85)}
.vision__botones button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vision__botones svg{width:18px;height:18px;flex:none}
.vision__sonido .ondas{display:none}
.vision__sonido[aria-pressed="true"] .ondas{display:inline}
.vision__sonido[aria-pressed="true"] .mudo{display:none}
@media (pointer:coarse){.vision__botones button{min-height:44px}}
@media (max-width:760px),(orientation:portrait),(prefers-reduced-motion:reduce){  /* en vertical (tablet) el 16:9 a pantalla completa se recortaba al 42 % */
  .js .vision__pista{height:auto}
  .vision__fijo{position:relative;height:auto;overflow:visible;padding:72px 0 64px;display:flex;flex-direction:column;gap:26px}
  .vision__txt{position:static;transform:none;opacity:1;visibility:visible;width:auto;max-width:680px;margin:0 auto;padding:0 28px}
  .vision__marco{position:relative;inset:auto;transform:none;border-radius:18px;aspect-ratio:16/9;width:calc(100% - 56px);max-width:1100px;margin:0 auto}
  .vision__botones{position:static;justify-content:center;flex-wrap:wrap;padding:0 28px;transform:none}
  .vision__pista-txt{display:none}
}

/* ---------- 22 · Eventos: rejilla de 6 columnas («Con artistas y la industria», 11-oct-2026) ---------- */
.evento__fotos--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.evento__fotos--6 img{aspect-ratio:3/4;object-position:50% 30%}
.evento__fotos--6 figcaption{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:5px 9px;font-size:.68rem}
/* 13-oct-2026: con 29 piezas la rejilla dejaba huecos al final (1 en 6 columnas, 3 en 4, 1 en 3). En flex centrado la última fila va al centro. */
@media (min-width:601px){.evento__fotos--6{display:flex;flex-wrap:wrap;justify-content:center}.evento__fotos--6 > *{flex:0 0 calc((100% - 5 * 12px) / 6)}}
@media (max-width:1100px) and (min-width:881px){.evento__fotos--6 > *{flex-basis:calc((100% - 4 * 12px) / 5)}}
@media (max-width:880px) and (min-width:601px){.evento__fotos--6 > *{flex-basis:calc((100% - 2 * 12px) / 3)}}
@media (max-width:600px){.evento__fotos--6.carril-movil > *{flex-basis:min(62%,260px)}}

/* §23 · Vídeos mudos de «Con artistas y la industria» (11-oct-2026, Macuto: «reproduce los videos sin sonido»).
   La foto queda debajo (póster y respaldo); el vídeo aparece encima cuando ya se reproduce. JS: script al final de #industria. */
.evento__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .8s var(--ease-expo,ease)}
.evento__video.va{opacity:1}
@media (hover:hover) and (pointer:fine){.evento__fotos figure:hover .evento__video{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.evento__video{display:none}}

/* §24 · «Detrás de cámara» al final de #creacion (12-oct-2026): rodajes, sesiones y estudio de la biblioteca de Macuto.
   Mismo formato que #testimonios (Macuto, 12-oct): dos filas que avanzan solas en sentido contrario (movimiento.js §11, que coge
   .testimonios__fila); se paran con el ratón encima y un toque las para en el móvil. Altura fija y ancho natural: las horizontales
   se ven enteras. Sin JS o con «reducir movimiento», cada fila se desliza con el dedo. Vídeos: .evento__video (§23). */
.detras{margin-top:56px}
.detras__titulo{font:700 clamp(1.15rem,2vw,1.4rem)/1.2 'Poppins','Poppins Reserva',sans-serif;margin:0 0 16px}
.detras__sub{color:var(--purple)}
@media (max-width:600px){.detras__sep{display:none}.detras__sub{display:block}}  /* sin «·» colgando al final de línea */
.detras__filas{display:grid;gap:14px;overflow:hidden;--alto:300px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.detras .detras__fila{padding:2px 0;gap:14px;align-items:stretch}
.detras .detras__fila.mv-js{padding-inline:0}
.detras__item{position:relative;flex:0 0 auto;height:var(--alto);border-radius:var(--r-md);overflow:hidden;background:var(--purple-wash);box-shadow:var(--shadow-sm);scroll-snap-align:start}
.detras__item img{display:block;height:100%;width:auto;max-width:none}
.detras__item .evento__video{object-position:50% 35%}
.detras__pie{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);font:600 .68rem/1.3 'Poppins','Poppins Reserva',sans-serif;letter-spacing:.02em;color:#fff;background:rgba(23,16,46,.7);padding:5px 9px;border-radius:99px}
@media (hover:hover) and (pointer:fine){.detras__item img{transition:transform .8s var(--ease-expo,ease)}.detras__item:hover img,.detras__item:hover .evento__video{transform:scale(1.04)}}
@media (max-width:880px){.detras__filas{--alto:240px}}
@media (max-width:600px){.detras .detras__fila:not(.mv-js){padding-inline:28px;scroll-padding-inline:28px}}
@media (max-width:600px){.detras{margin-top:40px}.detras__filas{--alto:210px;margin-inline:-28px;-webkit-mask-image:none;mask-image:none}}

/* §25 · Mastermind (12-oct-2026). Se ven 9: las 6 fotos de Madrid y 3 vídeos verticales en diagonal; con «Ver más», el resto (más vídeos de
   Madrid y Barcelona). Los vídeos verticales (.evento__foto--alta) ocupan dos filas para no recortarse; «dense» rellena los huecos.
   Mismo patrón de plegado que .gallery.plegada; el botón lleva data-desde="9" para mandar el foco a la 10.ª. */
#mastermind-fotos{grid-auto-flow:row dense}
#mastermind-fotos > .evento__foto--alta{grid-row:span 2;aspect-ratio:3/4;align-self:stretch;width:100%}  /* 3:4 ≈ dos filas 3:2 (sin el hueco): nunca estira la fila, y si dos altas van juntas la fila no se encoge */
#mastermind-fotos > .evento__foto--alta img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-position:50% 40%}  /* el alto lo marcan las dos filas de fotos 3:2 */
@media (max-width:600px){#mastermind-fotos > .evento__foto--alta{flex-basis:calc(min(80%,320px) / 2)}}  /* mismo alto que las 3:2 del carril y en vertical: sin cabezas cortadas */
@media (min-width:601px){.js .evento__fotos.plegada > :nth-child(n+10){display:none}.js .evento__fotos.plegada + .ver-mas{display:flex}}  /* en el carril del móvil se ve todo deslizando */