/* movimiento.css · Capa de movimiento e interacción de la portada de macutomusic.com (11-oct-2026, skill impeccable).
 *
 * QUÉ ES     Solo index.html, cargada DESPUÉS de home.css. Pareja de movimiento.js (mismo nombre, mismas secciones).
 *            Desde el 11-oct (tarde) también los vídeos de la portada (§14): Mastermind y «Hecho en casa».
 * REGLAS     1. Nada se esconde: sin JS, con «reducir movimiento» o en una captura a página completa se ve todo, quieto.
 *               Los estados de partida solo desplazan (transform) o atenúan color; nunca opacity:0 ni display:none.
 *               Única excepción, por formato: las Stories de §18 enseñan una foto cada vez (sin JS, la primera).
 *            2. Lo que se mueve solo al cargar o en bucle va dentro de (prefers-reduced-motion:no-preference);
 *               lo que enciende movimiento.js no arranca con «reducir movimiento».
 *            3. Lo que sigue al ratón solo existe con (hover:hover) and (pointer:fine): en móvil, nada depende del puntero.
 *            4. Se anima transform, opacity, color y font-variation-settings; nunca alto, ancho ni márgenes.
 *            5. NO toca lo de la sesión «Diseño Web OK» (reparto del 11-oct): .prueba/.feed, .fundador__txt,
 *               .timeline/.tstep, #forbes ni el bloque NODE de #novedades.
 * CARGA      Sin bloquear el pintado (media=print → all al cargar, con <noscript>); lo crítico del héroe (§2) va en línea en index.html.
 * VERSIÓN    index.html la enlaza como movimiento.css?v=<8 hex del md5>  →  md5 -q movimiento.css | cut -c1-8
 * MEDIR      DAP_Command_Center/09_Automatizaciones/macuto_web/ (medir_web.py, probar_home.py).
 */

:root{--ease-expo:cubic-bezier(.16,1,.3,1);--ease-quart:cubic-bezier(.25,1,.5,1)}

/* ---------- 1 · Cabecera: barra de progreso de lectura y sombra al bajar (estado, no adorno) ----------
   La barra la mueve el propio scroll (animation-timeline:scroll()), fuera del hilo principal: con JS por fotograma costaba
   ≈1.000 recálculos de estilo por pasada (medido el 11-oct). movimiento.js solo la crea donde el navegador lo soporta. */
.mv-progreso{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--purple);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.mv-progreso{animation:mv-progreso linear both;animation-timeline:scroll(root block)}}
@keyframes mv-progreso{to{transform:scaleX(1)}}
nav.site{transition:box-shadow .35s var(--ease-quart),background-color .35s var(--ease-quart)}
nav.site.mv-bajado{background:rgba(253,252,255,.94);box-shadow:0 12px 32px -22px rgba(38,20,92,.45)}
/* subrayado que se dibuja al pasar el ratón (y se queda en la sección activa) */
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--purple);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-expo)}
.nav-links a:not(.btn):hover::after,.nav-links a:not(.btn)[aria-current="true"]::after{transform:scaleX(1)}

/* ---------- 2 · Héroe: el titular palabra a palabra y su fuente de reserva viven EN LÍNEA en el <head> de index.html ----------
   Son lo único que hace falta para el primer pintado; esta hoja se carga sin bloquear (en móvil lento costaba ~80 ms de FCP).
   · Titular: cada palabra sube desde una ventana fija hecha con clip-path, que recorta por abajo lo mismo que la palabra baja
     (el % de translate y de inset es del mismo alto). Sin overflow:hidden ni inline-block en .mv-p: la línea no cambia.
   · Fuente de reserva «Poppins Reserva Titular» (Arial Bold) calibrada a Poppins 700, la tipografía definitiva desde el
     13-oct-2026 (hhea 1050/-350 de 1000): mientras llega la woff2 el titular ya ocupa su sitio. Sin reserva las letras bajaban
     dentro de su línea al cambiar de fuente (CLS 0,041 en móvil lento, medido con Space Grotesk). El size-adjust sale de
     probar 98-112 % en 17 anchos (360-1.920 px) con el titular «Lleva tu música más lejos, con un experto a tu lado»: parte
     igual que Poppins entre 103,75 % y 106,75 % (14-oct, con el titular a 2,2rem en ≤380 px; el 13-oct, antes de ese cambio,
     valía 105,5-110,25); se deja 105,25 %, en medio. ascent y descent = 1050 y 350 ÷ 1,0525 (99,76 % y 33,25 %), para que la línea
     base no se mueva. Si cambia el titular, se vuelve a probar con
     09_Automatizaciones/macuto_web/calibrar_reserva_titular.py. El resto de la página tiene sus reservas («Poppins Reserva», «Inter Reserva») arriba en styles.css. */
/* luz que sigue al puntero (la pone movimiento.js en el héroe, la banda «100% orgánicos» y el CTA final) */
.mv-foco{position:absolute;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(94,23,235,.13),rgba(94,23,235,0));opacity:0;transition:opacity .6s var(--ease-quart);
  transform:translate3d(var(--fx,50vw),var(--fy,30vh),0)}
.mv-foco.mv-on{opacity:1}
.hero .mv-foco{z-index:1}
.organic .box,.final .box{isolation:isolate}
.organic .mv-foco,.final .mv-foco{z-index:-1}
.organic .mv-foco{background:radial-gradient(closest-side,rgba(255,255,255,.2),rgba(255,255,255,0))}

/* ---------- 3 · Cinta de géneros: la mueve movimiento.js (acelera con el scroll y gira con él) ---------- */
.marquee.mv-js .track{animation:none;will-change:transform}

/* ---------- 4 · Cifras: cuentan hasta su valor al entrar (movimiento.js); el número final está en el HTML ---------- */
.stat b{transition:transform .9s var(--ease-expo)}
.js .stats-band .stat:not(.in) b{transform:translateY(14px) scale(.94)}

/* ---------- 5 · «Quiénes somos»: la frase se ilumina palabra a palabra al bajar (movimiento.js parte las palabras) ---------- */
.mv-palabra{transition:color .4s var(--ease-quart)}
.mv-leer .mv-palabra:not(.mv-on){color:rgba(23,16,46,.22)}
.mv-leer .hl .mv-palabra:not(.mv-on){color:rgba(94,23,235,.3)}

/* ---------- 6 · Retrato del fundador: paralaje suave dentro de su marco (CSS ligado al scroll; sin soporte, quieto) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fundador__foto:not(.historias){view-timeline-name:--retrato}
    .fundador__foto:not(.historias) img{animation:mv-paralaje linear both;animation-timeline:--retrato;animation-range:cover}
  }
}
@keyframes mv-paralaje{from{transform:translate3d(0,-5%,0) scale(1.12)}to{transform:translate3d(0,5%,0) scale(1.12)}}

/* ---------- 7 · Qué hacemos: foco que sigue al ratón dentro de cada celda; el icono se inclina ---------- */
.bento .cell{isolation:isolate}
.bento .cell::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-quart);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(94,23,235,.12),rgba(94,23,235,0) 65%)}
.bento .cell .ic{transition:transform .55s var(--ease-expo)}
/* «Label management» cierra la rejilla de 3 (fila: Marketing Digital Avanzado ×2 + ella); en la de 2 columnas iría sola, así que ocupa la fila entera */
@media (min-width:561px) and (max-width:880px){.bento .cell.cell--remate{grid-column:span 2}}
@media (hover:hover) and (pointer:fine){
  .bento .cell:hover::after{opacity:1}
  .bento .cell:hover .ic{transform:translateY(-3px) rotate(-7deg)}
}

/* ---------- 8 · Artistas: las fichas grandes se inclinan hacia el ratón; el roster entra en cascada ---------- */
.artist .ph{transition:transform .8s var(--ease-expo)}
.artist.mv-incl{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);transition:transform .5s var(--ease-expo),box-shadow .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.artist:hover .ph{transform:scale(1.05)}}
.rcard img{transition:transform .7s var(--ease-expo)}
@media (hover:hover) and (pointer:fine){.rcard:hover img{transform:scale(1.07)}.rcard:hover b{color:var(--purple)}}
.rcard b{transition:color .25s}
.js .roster:not(.in) .rcard{transform:translateY(22px) scale(.96)}
.roster:not(.mv-listo) .rcard{transition:transform .85s var(--ease-expo) calc(var(--i,0) * 28ms),box-shadow .25s var(--ease),border-color .25s var(--ease)}
/* lo que despliega «Ver más» entra en vez de aparecer de golpe */
@media (prefers-reduced-motion:no-preference){
  .roster:not(.plegado) > :nth-child(n+9),.gallery:not(.plegada) > .shot:nth-child(n+7){animation:mv-asoma .7s var(--ease-expo) backwards;animation-delay:calc((var(--j,0)) * 40ms)}
}
@keyframes mv-asoma{from{opacity:0;transform:translateY(18px)}}

/* ---------- 9 · Resultados y eventos: la captura se acerca un poco dentro de su marco ---------- */
.shot img,.evento__fotos img{transition:transform .8s var(--ease-expo)}
@media (hover:hover) and (pointer:fine){.shot:hover img,.evento__fotos figure:hover img{transform:scale(1.04)}}

/* ---------- 10 · «100% orgánicos»: los tres puntos entran en cascada desde la derecha ---------- */
.organic .no-item{transition:transform .8s var(--ease-expo)}
.organic .no-item:nth-child(2){transition-delay:.08s}.organic .no-item:nth-child(3){transition-delay:.16s}
.js .organic .box:not(.in) .no-item{transform:translateX(28px)}

/* ---------- 11 · Botones imán: el botón principal se deja atraer unos píxeles por el ratón ---------- */
.btn.mv-iman{translate:var(--mgx,0px) var(--mgy,0px);
  transition:translate .45s var(--ease-expo),transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}

/* ---------- 12 · Dudas: la respuesta se despliega (y se recoge) en vez de saltar ---------- */
@supports selector(::details-content){
  @media (prefers-reduced-motion:no-preference){
    .faq-lista{interpolate-size:allow-keywords}
    .faq-item::details-content{block-size:0;overflow-y:clip;transition:block-size .5s var(--ease-expo),content-visibility .5s allow-discrete}
    .faq-item[open]::details-content{block-size:auto}
  }
}
.faq-resp{transition:transform .5s var(--ease-expo)}
.faq-item:not([open]) .faq-resp{transform:translateY(-6px)}

/* ---------- 13 · Reducir movimiento: todo quieto y en su sitio ---------- */
@media (prefers-reduced-motion:reduce){
  .js .stats-band .stat:not(.in) b,.js .roster:not(.in) .rcard,.js .organic .box:not(.in) .no-item,.faq-item:not([open]) .faq-resp{transform:none}
  .mv-leer .mv-palabra:not(.mv-on),.mv-leer .hl .mv-palabra:not(.mv-on){color:inherit}
}

/* ---------- 14 · Vídeos (11-oct-2026): Mastermind (horizontales con portada y botón propio) y «Hecho en casa» ----------
   El botón va abajo a la izquierda, no en el centro: centrado tapaba el rótulo de la portada de Madrid y el arte de «NEEUS».
   Sin JS: el <video> lleva sus controles nativos y el botón de YouTube es un enlace. Con JS (movimiento.js §10) el botón sustituye
   a los controles hasta que se pulsa, la sesión de YouTube carga youtube-nocookie solo al pulsar y los verticales van en bucle mudo. */
.videos-h{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;margin-bottom:22px}
.videos-h:has(> :only-child){grid-template-columns:minmax(0,820px)}
.video-h,.creacion__vertical{margin:0}
.video-h__marco{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#0b0a14;box-shadow:var(--shadow-md);isolation:isolate}
.video-h__marco video,.video-h__marco img,.video-h__marco iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.video-h__marco::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,10,30,0) 50%,rgba(13,10,30,.5));transition:opacity .4s var(--ease-quart)}
.video-h__marco.en-marcha::after{opacity:0}
a.video-h__marco{display:block;color:#fff}
/* la portada de Madrid es un enlace a #vision (el aftermovie en grande): el botón reacciona al pasar por toda la portada */
@media (hover:hover) and (pointer:fine){a.video-h__marco:hover .video-h__play{background:var(--purple-deep);transform:scale(1.05)}}
.video-h__marco img{transition:transform .9s var(--ease-expo)}
.video-h__play{position:absolute;left:18px;bottom:18px;z-index:2;transform-origin:0 100%;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:8px 24px 8px 8px;
  border:0;border-radius:99px;background:var(--purple);color:#fff;font:600 .98rem 'Poppins','Poppins Reserva',sans-serif;white-space:nowrap;cursor:pointer;
  box-shadow:0 18px 40px -14px rgba(94,23,235,.75);transition:transform .45s var(--ease-expo),background-color .25s}
.video-h__play[hidden]{display:none}
.video-h__play:focus-visible{outline-color:#fff;outline-offset:4px}
.video-h__ico{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;flex-shrink:0}
.video-h__ico::before{content:"";border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--purple);margin-left:3px}
@media (hover:hover) and (pointer:fine){
  .video-h__marco:hover img{transform:scale(1.03)}
  .video-h__play:hover{background:var(--purple-deep);transform:scale(1.05)}
}
.video-h figcaption,.creacion__vertical figcaption{padding:14px 2px 0}
.video-h figcaption b,.creacion__vertical figcaption b{display:block;font:600 1rem/1.3 'Poppins','Poppins Reserva',sans-serif;color:var(--ink)}
.video-h figcaption span,.creacion__vertical figcaption span{display:block;color:var(--muted);font-size:.86rem;line-height:1.45;margin-top:3px}
/* Hecho en casa: la sesión horizontal y dos móviles a la misma altura (16:9 ≈ 3,16 veces el ancho de un 9:16 de igual alto) */
.creacion{display:grid;grid-template-columns:minmax(0,3.16fr) minmax(0,1fr);gap:28px 22px;align-items:start}  /* cada fila: una pieza horizontal y una vertical de la misma altura */
.movil{position:relative;border-radius:28px;padding:7px;background:var(--ink);box-shadow:var(--shadow-md)}
.movil video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:22px;background:#0b0a14}
.movil__sonido{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);min-height:36px;padding:7px 14px;border:0;border-radius:99px;
  background:rgba(23,16,46,.78);color:#fff;font:600 .78rem 'Poppins','Poppins Reserva',sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .25s}
.movil__sonido[hidden]{display:none}
.movil__sonido[aria-pressed="true"]{background:var(--purple)}
.movil__sonido:focus-visible{outline-color:#fff}
@media (pointer:coarse){.movil__sonido{min-height:44px}}
@media (max-width:880px){.creacion{grid-template-columns:1fr 1fr;grid-auto-flow:dense}.creacion__sesion{grid-column:1/-1}}
@media (max-width:600px){
  .creacion{gap:14px}
  .movil{border-radius:22px;padding:5px}.movil video{border-radius:18px}
  .video-h__play{left:12px;bottom:12px;min-height:46px;padding:5px 16px 5px 5px;font-size:.88rem}.video-h__ico{width:34px;height:34px}
}


/* ---------- 15 · «Hecho en casa»: videoclips y piezas de estudio en bucles pequeños (12-oct-2026) ----------
   Un solo bloque (Macuto unió aquí «Videoclips hechos por Macuto Music»): 25 fragmentos mudos de 5 s (640×360, ~120-230 KB),
   con la clase .bucle: movimiento.js §10 los reproduce solo mientras se ven; sin JS o con «reducir movimiento», póster.
   Solo vista previa: ninguna ficha es enlace ni abre nada (14-oct, Macuto). En escritorio se ven 10 (12 celdas) y
   el resto con «Ver todos»; en el móvil, carril que se desliza con el dedo (.carril-movil de home.css), sin plegar. */
.clips{margin-top:56px}
.clips__titulo{font-size:clamp(1.15rem,1.6vw,1.4rem);margin:0 0 18px}
.clips__cab{display:flex;justify-content:space-between;align-items:flex-end;gap:6px 24px;flex-wrap:wrap;margin-bottom:18px}
.clips__cab .clips__titulo{margin:0}
.clips__nota{margin:0;color:var(--muted);font-size:.92rem;max-width:52ch}
@media (min-width:601px){.js .clips__lista.plegada > :nth-child(n+11){display:none}.js .clips__lista.plegada + .ver-mas{display:flex}}
@media (prefers-reduced-motion:no-preference){.clips__lista:not(.plegada) > .clip:nth-child(n+11){animation:mv-asoma .7s var(--ease-expo) backwards;animation-delay:calc((var(--j,0)) * 40ms)}}
.clips__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.clip{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:#0b0a14;isolation:isolate}
.clip--ancho{grid-column:span 2;grid-row:span 2}
.clip.clip--ancho video,.clip.clip--ancho img{height:100%;aspect-ratio:auto}
.clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .8s var(--ease-expo)}
/* 14-oct-2026 (Macuto: «no debe salir un botón de pulsar»): Safari en iOS con «Ahorro de energía» no deja arrancar solo un vídeo y le pinta
   encima su botón ▶ aunque no lleve controls. Se oculta: ahí se ve el póster quieto. */
video.bucle::-webkit-media-controls-start-playback-button,.evento__video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.clip__pie{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 14px 11px;color:#fff;font-size:.82rem;line-height:1.3;
  background:linear-gradient(to top,rgba(11,10,20,.82),rgba(11,10,20,0));pointer-events:none}
.clip__pie b{font:600 .9rem/1.2 'Poppins','Poppins Reserva',sans-serif;margin-right:4px}
.clip:has(video[controls]) .clip__pie{display:none}
@media (hover:hover) and (pointer:fine){.clip:hover video{transform:scale(1.04)}}
/* 13-oct-2026: con 3 columnas las piezas anchas (2 × 2) dejaban huecos; con 2, cada ancha ocupa la fila entera y el resto va de 2 en 2 */
@media (min-width:601px) and (max-width:900px){.clips__lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.clips{margin-top:40px}.clips__lista.carril-movil{margin-inline:-28px;padding:6px 28px 18px}.clips__lista.carril-movil > *{flex-basis:min(78%,300px)}.clip--ancho{grid-column:auto;grid-row:auto}.clip.clip--ancho video,.clip.clip--ancho img{aspect-ratio:16/9;height:auto}}

/* ---------- 16 · Testimonios: capturas reales en dos filas que van en sentido contrario (12-oct-2026) ----------
   Banda oscura (mismas tintas que el pie) a mitad de la bajada, para cortar el tramo largo antes de «Envía tu canción».
   Sin JS: cada fila se desliza con el dedo. Con JS (movimiento.js §11) la fila se duplica y avanza sola a ~32 px/s;
   se para fuera de pantalla, con el ratón encima o con el foco dentro. Con «reducir movimiento», quieta y deslizable. */
.testimonios{background:var(--pie-tinta,#17102e);color:var(--pie-txt,#cdc6e3);overflow:hidden}
.testimonios h2{color:#fff}
.testimonios .sec-head p{color:var(--pie-txt,#cdc6e3)}
.testimonios .eyebrow{color:var(--pie-acento,#b197fc)}
.testimonios .eyebrow::before{background:var(--pie-acento,#b197fc)}
.testimonios__filas{display:grid;gap:22px;margin-top:6px}
.testimonios__fila{list-style:none;margin:0;padding:4px max(28px,calc((100vw - 1144px)/2));display:flex;gap:18px;align-items:flex-start;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:max(28px,calc((100vw - 1144px)/2));scrollbar-width:none;overscroll-behavior-x:contain}
.testimonios__fila::-webkit-scrollbar{display:none}
.testimonio{flex:0 0 auto;width:min(76vw,300px);margin:0;scroll-snap-align:start}
.testimonio--ancho{width:min(86vw,460px)}  /* el comentario es una sola línea: más ancho para que se lea */
.testimonio img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 44px -20px rgba(0,0,0,.6)}
.testimonio span{display:block;margin-top:10px;font-size:.84rem;color:var(--pie-tenue,#a39cbd)}
.testimonios__fila.mv-js{overflow:visible;width:max-content;padding-inline:0;scroll-snap-type:none;will-change:transform}  /* sin relleno: las copias cubren los dos lados y no queda franja vacía al reiniciar la vuelta */
@media (max-width:600px){.testimonio{width:min(80vw,300px)}.testimonios__filas{gap:16px}}

/* ---------- 17 · (14-oct-2026) Aquí vivía el reproductor <dialog> de los videoclips de YouTube: se quitó con los enlaces de §15. */

/* ---------- 18 · «Quién está detrás» en formato Stories de Instagram (12-oct-2026, Macuto) ----------
   Fotos y vídeos mudos de Angelo a 9:16, uno sobre otro (el vídeo no lleva el zoom lento de las fotos); movimiento.js §12 añade las barras, la cabecera, la pausa y las zonas de toque
   (izquierda: anterior · derecha: siguiente · mantener: pausa). Sin JS: se ve la primera foto. Sin este CSS (llega sin
   bloquear): las fotos van en columna dentro del marco y su overflow:hidden deja ver solo la primera. */
.fundador__foto.historias{position:relative;aspect-ratio:9/16;width:100%;max-width:400px;justify-self:center;background:#120c24;
  isolation:isolate;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.historias__lista{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.historia{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease-quart)}
.historia:first-child,.historias--viva .historia.es-actual{opacity:1}
.historias--viva .historia:first-child:not(.es-actual){opacity:0}
.fundador__foto.historias .historia img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform-origin:50% 35%}
.historia video{display:block;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .historias--viva .historia.es-actual img{animation:mv-historia 6.4s linear both}
  .historias--pausa .historia img{animation-play-state:paused}
}
@keyframes mv-historia{from{transform:scale(1)}to{transform:scale(1.07)}}
.historias__ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.historias__ui::before{content:"";position:absolute;inset:0 0 auto;height:118px;background:linear-gradient(rgba(12,7,26,.6),rgba(12,7,26,0))}
.historias__barras{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px}
.historias__barras span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.36);overflow:hidden}
.historias__barras i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.historias__cab{position:absolute;top:20px;left:12px;right:4px;display:flex;align-items:center;gap:9px;color:#fff;font-size:.8rem;line-height:1.2;
  text-shadow:0 1px 2px rgba(0,0,0,.35)}
.fundador__foto.historias .historias__avatar{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 50%;
  background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.historias__autor{font:600 .88rem/1.2 'Poppins','Poppins Reserva',sans-serif}
.historias__lugar{min-width:0;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.historias__pausa{margin-left:auto;flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:none;color:#fff;cursor:pointer;pointer-events:auto}
.historias__pausa svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.historias__ant,.historias__sig{position:absolute;top:70px;bottom:0;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent}
.historias__ant{left:0;width:34%}
.historias__sig{right:0;width:66%}
.historias__ant::after,.historias__sig::after{content:"";position:absolute;top:50%;width:38px;height:38px;margin-top:-19px;border-radius:50%;
  background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%2317102e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 55% 50%/17px no-repeat;
  box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transition:opacity .2s}
.historias__ant::after{left:12px;transform:scaleX(-1)}
.historias__sig::after{right:12px}
@media (hover:hover) and (pointer:fine){.historias:hover .historias__ant::after,.historias:hover .historias__sig::after{opacity:.92}}
.historias__ant:focus-visible::after,.historias__sig:focus-visible::after{opacity:1}
.historias__ant:focus-visible,.historias__sig:focus-visible{outline:none}
.historias__ant:focus-visible::after,.historias__sig:focus-visible::after{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--purple)}
.historias__pausa:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.historias__aviso{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:820px){.fundador__foto.historias{aspect-ratio:9/16;max-width:min(340px,100%)}}
@media (min-width:821px){.fundador__foto.historias{justify-self:start}}  /* a dos columnas, alineadas con el borde de la página */

/* ---------- 19 · CTA final con el perfil de Instagram en un iPhone (12-oct-2026, Macuto) ----------
   Texto a la izquierda y, a la derecha, un iPhone que asoma por el borde de abajo de la caja con el perfil real de @macutomusic
   (cifras leídas sin sesión el 12-oct). Las tres cifras cuentan de 0 a su valor con movimiento.js §4. Todo el móvil es un enlace
   al perfil con su aria-label; lo de dentro va aria-hidden. En pantallas estrechas, el móvil va debajo del botón. */
.final .box.box--ig{max-width:1100px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px 48px;
  text-align:left;padding:0 56px 0 64px}
.box--ig .final__txt{position:relative;padding:64px 0}
.box--ig .final__txt p:not(.scarcity){margin:0}
.box--ig .scarcity.center{margin:30px 0 0}
.box--ig .cta-row{justify-content:flex-start}
.ig-movil{position:relative;display:block;justify-self:center;align-self:end;width:304px;height:550px;margin-top:48px;padding:11px 11px 0;
  border-radius:48px 48px 0 0;background:#14101f;box-shadow:0 0 0 2px #2c2640 inset,0 30px 60px -18px rgba(40,14,110,.45);text-decoration:none;
  transition:transform .6s var(--ease-expo)}
.ig-movil:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){.ig-movil:hover{transform:translateY(-10px)}}
.ig-movil__pantalla{display:block;height:100%;overflow:hidden;border-radius:38px 38px 0 0;background:#fff;color:#000;text-align:left;
  font:400 12.5px/1.32 -apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;letter-spacing:0}
.ig-movil__pantalla > span{display:block}
.ig-movil__estado{display:flex!important;align-items:center;justify-content:space-between;height:40px;padding:4px 22px 0 26px;font-weight:600;font-size:13px}
.ig-movil__isla{width:84px;height:24px;border-radius:14px;background:#000}
.ig-movil__bateria{width:22px;height:11px;border:1.5px solid #000;border-radius:3px;position:relative}
.ig-movil__bateria::after{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:#000;border-radius:1px}
.ig-movil__usuario{display:flex!important;align-items:center;gap:4px;padding:6px 14px 8px;font-weight:700;font-size:17px}
.ig-movil__verificado{width:15px;height:15px}
.ig-movil__perfil{display:flex!important;align-items:center;gap:12px;padding:4px 12px 8px}
.ig-movil__avatar{width:62px;height:62px;flex:none;border-radius:50%;padding:3px;background:#fff;
  box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #d62976}
.ig-movil__cifras{display:flex;flex:1;min-width:0;justify-content:space-around;gap:4px;text-align:center}
.ig-movil__cifras > span{display:flex;flex-direction:column;align-items:center;font-size:10.5px;letter-spacing:-.01em}
.ig-movil__cifras b{font-weight:700;font-size:15px;line-height:1.25}
.ig-movil__bio{padding:0 14px 8px}
.ig-movil__bio b{display:block;font-weight:600}
.ig-movil__cat{display:block;color:#737373}
.ig-movil__enlace{display:block;color:#00376b;font-weight:600}
.ig-movil__botones{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;padding:2px 14px 12px}
.ig-movil__botones > span{display:block;padding:6px 0;border-radius:8px;background:#efefef;text-align:center;font-weight:600;font-size:13px}
.ig-movil__botones .ig-movil__seguir{background:#0077d6;color:#fff}  /* azul de Instagram oscurecido: 4,56:1 con el blanco (#0095f6 daba 3,17) */
.ig-movil__destacadas{display:flex!important;gap:12px;padding:0 14px 10px;overflow:hidden}
.ig-movil__dest{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:52px;font-size:11px;text-align:center;white-space:nowrap}
.ig-movil__dest img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #dbdbdb;border:2.5px solid #fff}
.ig-movil__pestanas{display:flex!important;justify-content:center;padding:8px 0;border-top:1px solid #efefef}
.ig-movil__pestanas svg{width:20px;height:20px;color:#000}
.ig-movil__rejilla{display:grid!important;grid-template-columns:repeat(3,1fr);gap:2px}
.ig-movil__rejilla img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
@media (max-width:900px){
  .final .box.box--ig{grid-template-columns:1fr;text-align:center;padding:0 24px}
  .box--ig .final__txt{padding:52px 0 0}
  .box--ig .final__txt p:not(.scarcity){margin:0 auto}
  .box--ig .scarcity.center{margin:30px auto 0}
  .box--ig .cta-row{justify-content:center}
  .ig-movil{width:290px;height:440px;margin-top:8px}
}
/* 14-oct-2026: por debajo de 420 px el móvil de 290 px no cabía en la caja (a 360 se salía 11 px y recortaba el «100%», la píldora y
   el lado derecho; a 390 iba descentrado). Se reduce entero con zoom (mantiene sus proporciones y su caja) y la caja da más sitio. */
@media (max-width:420px){.final .box.box--ig{padding:0 16px}.ig-movil{zoom:.9}}
@media (max-width:360px){.ig-movil{zoom:.82}}
@media (max-width:340px){.ig-movil{zoom:.74}}

/* ---------- 20 · Ajustes de la auditoría visual (13-oct-2026) ---------- */
/* el eyebrow del héroe cabe en una línea en el móvil (a 390 px le faltaban 2 px y la raya solo salía en la primera) */
@media (max-width:420px){.hero .eyebrow{font-size:.72rem;letter-spacing:.09em}}
/* las tres piezas del RADAR en la portada: de 601 a 900 px, 3 columnas en vez de 2 + 1 suelta */
@media (min-width:601px) and (max-width:900px){#radar .art-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* ---------- 21 · «Volver arriba» del pie, juguetón (13-oct-2026, Macuto: «ese botón debería saltar o hacer algo juguetón») ----------
   · En pantalla (.en-vista, la pone movimiento.js §13), el círculo da un saltito cada 4 s: se agacha, salta, cae y se asienta.
   · Con el ratón encima (o el foco del teclado), la flecha sale por arriba y vuelve a entrar por abajo, en bucle.
   · Al pulsarlo (.despega), el círculo coge impulso y la flecha despega hacia arriba; a los 240 ms sube la página (§13).
   Solo transform y opacity. Con «reducir movimiento», nada de esto: el botón de siempre y la subida directa. */
@media (prefers-reduced-motion:no-preference){
  .pie__arriba-ico{overflow:hidden;transform-origin:50% 100%}
  .pie__arriba.en-vista:not(:hover):not(:focus-visible):not(.despega) .pie__arriba-ico{animation:pie-salto 4s var(--ease-quart) .4s infinite}
  .pie__arriba:hover .pie__arriba-ico svg,.pie__arriba:focus-visible .pie__arriba-ico svg{animation:pie-flecha 1.15s var(--ease-expo) infinite}
  .pie__arriba.despega .pie__arriba-ico{animation:pie-impulso .24s var(--ease-quart) both}
  .pie__arriba.despega .pie__arriba-ico svg{animation:pie-despega .24s cubic-bezier(.55,0,.8,.2) both}
}
@keyframes pie-salto{
  0%,26%,100%{transform:none}
  4%{transform:translateY(1px) scale(1.1,.88)}
  11%{transform:translateY(-8px) scale(.93,1.08)}
  18%{transform:translateY(0) scale(1.08,.9)}
  22%{transform:translateY(-2px) scale(.98,1.02)}
}
@keyframes pie-flecha{0%{transform:none;opacity:1}38%{transform:translateY(-150%);opacity:0}39%{transform:translateY(150%);opacity:0}45%{opacity:1}78%,100%{transform:none;opacity:1}}
@keyframes pie-impulso{45%{transform:scale(1.1,.86)}100%{transform:translateY(-5px) scale(.95,1.07)}}
@keyframes pie-despega{to{transform:translateY(-180%)}}