/* El carrusel de la clase.
   Todo el movimiento lo hace el navegador, atado al deslizamiento (como la galería de fotos del teléfono):
   no corre código mientras deslizás, por eso no se traba.
   --w es el ancho de la foto de adelante. */
.carro{--w:62vw;margin-top:var(--aire,120px);padding-block:clamp(18px,3vw,40px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  scroll-timeline:--carro x}
.carro::-webkit-scrollbar{display:none}
/* la pista deja medio ancho libre a cada lado, así la primera y la última también pueden quedar adelante */
.carro-pista{display:flex;width:max-content;padding-inline:calc(50vw - var(--w) / 2)}
.carro .foto{flex:none;width:var(--w);aspect-ratio:2/3;scroll-snap-align:center;scroll-snap-stop:always;border-radius:clamp(16px,2vw,24px);overflow:hidden}
.carro .foto img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.carro-velo{position:absolute;inset:0;background:#2a1712;opacity:0;pointer-events:none}

/* el 3D: cada foto se agranda al llegar al centro y se achica, se aleja y gira al irse a un costado.
   La respiración es aparte: todo el carrusel crece un 3 % y vuelve, despacio, como una inhalación y una exhalación */
@supports (animation-timeline: view()){
  .carro .foto{animation:carro-giro linear both,carro-respira 6.5s ease-in-out infinite;animation-timeline:view(inline),auto}
  .carro-velo{animation:carro-velo linear both;animation-timeline:view(inline)}
  .carrito{animation:carro-riel linear both;animation-timeline:--carro}
  @media (prefers-reduced-motion:reduce){
    .carro .foto{animation:carro-giro linear both;animation-timeline:view(inline)}
  }
  .carro-scope{timeline-scope:--carro}
}
/* en el celu una foto y la de al lado: el cambio pasa entre el 12 % y el 88 % del recorrido de cada foto */
@keyframes carro-giro{
  0%,12%{transform:perspective(1300px) translateZ(-120px) rotateY(18deg) scale(.8)}
  50%{transform:perspective(1300px) translateZ(0) rotateY(0) scale(1)}
  88%,100%{transform:perspective(1300px) translateZ(-120px) rotateY(-18deg) scale(.8)}
}
@keyframes carro-velo{0%,12%{opacity:.2}50%{opacity:0}88%,100%{opacity:.2}}
@keyframes carro-respira{0%,100%{scale:1}50%{scale:1.03}}
@keyframes carro-riel{from{transform:translateX(0)}to{transform:translateX(100%)}}

@media (min-width:701px){
  .carro{--w:clamp(300px,28vw,420px)}
  @keyframes carro-giro{
    0%{transform:perspective(1500px) translateZ(-260px) rotateY(26deg) scale(.7)}
    28%{transform:perspective(1500px) translateZ(-130px) rotateY(16deg) scale(.82)}
    50%{transform:perspective(1500px) translateZ(0) rotateY(0) scale(1)}
    72%{transform:perspective(1500px) translateZ(-130px) rotateY(-16deg) scale(.82)}
    100%{transform:perspective(1500px) translateZ(-260px) rotateY(-26deg) scale(.7)}
  }
  @keyframes carro-velo{0%{opacity:.32}28%{opacity:.18}50%{opacity:0}72%{opacity:.18}100%{opacity:.32}}
}

/* la raya que marca por dónde vas, y las flechas */
.carro-pie{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);width:min(560px,100% - 40px);margin:clamp(10px,1.6vw,22px) auto 0}
.riel{position:relative;flex:1;height:2px;border-radius:2px;background:rgba(46,38,34,.18)}
/* el carrito recorre el riel menos su propio largo: se mueve con transform, que no le cuesta nada al navegador */
.carrito{position:absolute;left:0;top:-2px;width:calc(100% - 44px);height:6px}
.carrito::before{content:"";position:absolute;left:0;top:0;width:44px;height:6px;border-radius:6px;background:var(--tinta,#2A1A18)}
.carro-flechas{display:flex;gap:10px}
.carro-flechas button{display:grid;place-items:center;width:58px;height:44px;border-radius:14px;border:1px solid rgba(46,38,34,.28);background:rgba(255,255,255,.22);color:var(--text,#2E2622);cursor:pointer;transition:background-color .5s ease,border-color .5s ease;-webkit-tap-highlight-color:transparent}
.carro-flechas button:hover{background:rgba(255,255,255,.5);border-color:rgba(46,38,34,.45)}
.carro-flechas button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.carro-flechas svg{width:30px}
.carro-flechas path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}