/* Carrusel en 3D fijado (#carrusel-pin, js/app.js initCarruselPin) y tira de minivistas (#minis-juegos: barco pirata y carros
   chocones, app.js crearMini con data-modelo). Sobre .pin de css/sistema.css §8 (la altura sale de --pin-alto / --pin-alto-cel).
   Sin html.con3d, o con .sin-escena (app.js: la escena no se armó o su vista tronó), la sección mide lo que su contenido y
   muestra la foto real del carrusel (FOTOS carrusel-real-2) con el mismo texto, como hace #sillas con su video. */

/* ---------- sección fijada ---------- */
.carrusel-pin{background:var(--s-0)}
/* ancla del menú y el pie (#carrusel): el borde de la sección queda justo bajo la barra, en el arranque del tramo */
.carrusel-ancla{position:absolute;left:0;width:1px;height:1px;top:calc(var(--nav) + 12px);visibility:hidden;pointer-events:none}
html:not(.con3d) .carrusel-ancla,.carrusel-pin.sin-escena .carrusel-ancla{top:0}
.carrusel-pin .pin-escena{grid-template-columns:minmax(0,1fr)}
#stage-carrusel{inset:0}
html:not(.con3d) #stage-carrusel,.carrusel-pin.sin-escena #stage-carrusel{display:none}
.carrusel-pin .pin-escena > .pin-copy{max-width:480px;gap:14px}
.carrusel-h{font-size:clamp(40px,6vw,96px);line-height:1.02;max-width:12ch;margin:0;padding-bottom:.08em}
.carrusel-medida{margin:0;color:var(--tono-claro);letter-spacing:.16em}
.carrusel-pista{margin:0;color:var(--tinta-2);letter-spacing:.14em}
.carrusel-acciones{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin-top:4px}
.carrusel-acciones .btn{min-width:0}
/* la foto real: a la derecha del texto en computadora, arriba de él en celular */
.carrusel-respaldo{display:none;position:relative;z-index:4;width:min(100%,640px);aspect-ratio:1280/853;justify-self:end}
.carrusel-respaldo img{display:block;width:100%;height:100%;object-fit:cover}
html:not(.con3d) .carrusel-pin .pin-escena,.carrusel-pin.sin-escena .pin-escena{position:relative;height:auto;min-height:0;padding-top:var(--sec-y);padding-bottom:var(--sec-y);grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
html.con3d .carrusel-pin.sin-escena{height:auto}
html:not(.con3d) .carrusel-respaldo,.carrusel-pin.sin-escena .carrusel-respaldo{display:block!important}
.carrusel-pin.sin-escena .solo3d{display:none!important}
.carrusel-pin.sin-escena .eyebrow.solo-foto{display:flex!important}
html:not(.con3d) .carrusel-pin :is(.pin-velo,.marco--escena,.pin-progreso),.carrusel-pin.sin-escena :is(.pin-velo,.marco--escena,.pin-progreso){display:none}

/* ---------- tira: barco pirata y carros chocones en 3D (giran solos; sin 3D, su foto) ---------- */
.minis{padding-block:clamp(56px,7vw,96px);background:var(--s-1)}
.minis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.mini-juego{position:relative;display:grid;gap:16px;scroll-margin-top:calc(var(--nav) + 12px)}
.mini-vista{position:relative;aspect-ratio:4/3;border-radius:var(--r-marco)}
.mini-vista picture{display:block;width:100%;height:100%;transition:opacity .6s var(--curva)}
.mini-vista img{display:block;width:100%;height:100%;object-fit:cover}
/* con la vista 3D lista (app.js pone .con-modelo) la foto se va y queda el rótulo */
.mini-vista.con-modelo picture{opacity:0}
.mini-tag{position:absolute;left:14px;bottom:12px;z-index:var(--z-sobre-gl);display:flex;align-items:center;gap:8px;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(10,7,24,.78);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);opacity:0;transition:opacity .6s var(--curva);pointer-events:none}
.mini-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tono)}
.mini-vista.con-modelo .mini-tag{opacity:1}
.mini-texto{display:grid;gap:8px;align-content:start}
.mini-texto h3{font-size:var(--t-1);line-height:1.04;max-width:14ch}
.mini-texto .mono{margin:0;color:var(--tono-claro);letter-spacing:.16em}
.mini-acciones{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin-top:6px}

@media(max-width:900px){
  .carrusel-h{font-size:clamp(34px,10vw,48px)}
  .carrusel-pin .pin-escena > .pin-copy{gap:10px;padding-top:36px}
  html.con3d .carrusel-pin .pin-escena > .pin-copy{margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);max-width:none;
    background:linear-gradient(180deg,rgba(18,12,43,0),rgba(18,12,43,.95) 64px)}
  .carrusel-acciones .btn{flex:1 1 auto}
  html:not(.con3d) .carrusel-pin .pin-escena,.carrusel-pin.sin-escena .pin-escena{grid-template-columns:minmax(0,1fr);align-items:end}
  .carrusel-respaldo{width:auto;justify-self:stretch;order:-1}
  .minis-grid{grid-template-columns:minmax(0,1fr);gap:44px}
}
@media(prefers-reduced-motion:reduce){
  .mini-vista picture,.mini-tag{transition:none}
}