/* Celular: la foto ocupa toda la pantalla y se desplaza lento de izquierda a derecha
   para recorrer el cartel completo. Sin franja azul arriba. */
@media (max-width: 600px) {
  .billboard-slide {
    background-image: var(--bg-m);
    background-size: auto 106%;
    background-repeat: no-repeat;
    background-position: var(--pan-from) 0px;
  }

  .slide { transition: opacity 1.5s ease, transform 8s linear, visibility 1.5s; }

  /* Al salir, el slide se queda quieto mientras se desvanece y recién después vuelve al inicio */
  .billboard-slide {
    transition: opacity 1.5s ease, transform 8s linear, visibility 1.5s, background-position 0s linear 1.6s;
  }
  .billboard-slide.active {
    background-position: var(--pan-to) 0px;
    transition: opacity 1.5s ease, transform 8s linear, visibility 1.5s, background-position 8.5s cubic-bezier(.25, 0, .55, 1) .2s;
  }

  .billboard-slide .hero-shade {
    background: linear-gradient(180deg, rgba(3,25,36,.45) 0, rgba(3,25,36,0) 16%, rgba(3,25,36,0) 36%, rgba(3,25,36,.82) 62%, rgba(3,25,36,.94) 100%);
  }

  .billboard-slide .hero-copy {
    top: auto;
    bottom: 104px;
    transform: none;
  }

  .billboard-slide .hero-copy h1,
  .billboard-slide .hero-copy h2 {
    font-size: clamp(1.9rem, 8.6vw, 2.25rem);
    line-height: .95;
    margin: .3em 0 .35em;
  }

  .billboard-slide .hero-copy > p:not(.eyebrow) { font-size: .95rem; }
  .billboard-slide .button { margin-top: 1rem; padding: .85rem 1.1rem .85rem 1.3rem; }
  .tech-slide { background-color:#062637; background-repeat:no-repeat; background-size:auto 60%; background-position:73% 64px; }
  .tech-slide .hero-shade { background:linear-gradient(180deg,rgba(6,38,55,.35) 0,rgba(6,38,55,0) 18%,rgba(6,38,55,0) 40%,#062637 64%); }
  .tech-slide .hero-copy { top:auto; bottom:104px; transform:none; }
  .tech-slide .hero-copy h2 { font-size:clamp(1.9rem,8.2vw,2.2rem); }
  .tech-slide .hero-copy > p:not(.eyebrow) { font-size:.95rem; }
}

@media (max-width: 600px) and (max-height: 700px) {
  .billboard-slide .hero-copy > p:not(.eyebrow) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .billboard-slide, .billboard-slide.active { transition: opacity 1.5s ease, visibility 1.5s; background-position: var(--pan-mid) 0px; }
}

/* Todas las pantallas: zoom-out suave en las fotos del slider */
@media (min-width: 601px) {
  .slide { transform: scale(1.07); transition: opacity 1.4s ease, transform 9s cubic-bezier(.25, .1, .25, 1), visibility 1.4s; }
  .slide.active { transform: scale(1); }
}
/* Computador y tablet: bajar la foto de Las Grutas para que el cartel
   se vea entero arriba, igual que el del Boliche de Alberto */
@media (min-width: 601px) {
  .slide.grutas-slide {
    top: 38px;
    background-position: center top;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 52px);
    mask-image: linear-gradient(180deg, transparent 0, #000 52px);
  }
}

/* Slide de vía pública en Argentina */
.street-slide .hero-copy{max-width:640px}
@media (max-width: 600px) {
  .street-slide { background-image: var(--bg-sm); background-position: 22% 12%; }
  .street-slide .hero-shade { background: linear-gradient(180deg, rgba(3,25,36,.4) 0, rgba(3,25,36,0) 16%, rgba(3,25,36,0) 34%, rgba(3,25,36,.82) 62%, rgba(3,25,36,.94) 100%); }
  .street-slide .hero-copy { top: auto; bottom: 104px; transform: none; z-index: 3; }
  .street-slide .hero-copy h2 { font-size: clamp(1.9rem, 8.6vw, 2.25rem); line-height: .95; margin: .3em 0 .35em; }
  .street-slide .hero-copy > p:not(.eyebrow) { display: none; }
  .street-slide .button { margin-top: 1rem; padding: .85rem 1.1rem .85rem 1.3rem; }
}
@media (min-width: 601px) {
  .street-slide .hero-shade { background: linear-gradient(90deg, rgba(3,25,36,.82), rgba(3,25,36,.45) 48%, rgba(3,25,36,.05) 75%); }
}

/* Celular: movimiento leve (zoom suave + deriva) en las otras 3 fotos del slider.
   Se anima solo la foto de fondo (::before), el texto queda quieto. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .slide:not(.billboard-slide) { background-image: none !important; transform: none !important; transition: opacity 1.5s ease, visibility 1.5s; overflow: hidden; }
  .slide:not(.billboard-slide)::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--bg); background-size: cover; background-position: center; background-repeat: no-repeat;
    transform: scale(1.13) translate3d(1.5%, 0, 0);
    transition: transform 0s linear 1.6s;
    will-change: transform;
  }
  .slide:not(.billboard-slide).active::before { transform: scale(1) translate3d(0, 0, 0); transition: transform 9s cubic-bezier(.25, .1, .3, 1) .1s; }
  .slide.street-slide:not(.billboard-slide)::before { background-image: var(--bg-sm); background-color: #062637; background-size: auto 62%; background-position: 51% 60px; }
  .slide.street-slide .hero-shade { background: linear-gradient(180deg, rgba(6,38,55,.35) 0, rgba(6,38,55,0) 16%, rgba(6,38,55,0) 38%, #062637 66%); }
  .slide.tech-slide:not(.billboard-slide)::before { background-color: #062637; background-size: auto 60%; background-position: 73% 64px; }
}

/* v47: imágenes del slider llegan hasta arriba (sin franja azul) */
@media (max-width:760px){
  .slide.street-slide:not(.billboard-slide)::before{background-position:51% 0;background-size:auto 66%}
  .slide.tech-slide:not(.billboard-slide)::before{background-position:73% 0;background-size:auto 64%}
}

/* v74: celular - el cartel del Boliche se muestra por el costado del nombre (sin recorrido lateral)
   y con el mismo zoom suave de las otras fotos */
@media (max-width: 600px) {
  .billboard-slide, .billboard-slide.active { background-position: 30% 0px; }
  .billboard-slide { background-size: auto 113%; transition: opacity 1.5s ease, visibility 1.5s, background-size 0s linear 1.6s; }
  .billboard-slide.active { background-size: auto 106%; transition: opacity 1.5s ease, visibility 1.5s, background-size 9s cubic-bezier(.25,.1,.3,1) .1s; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .billboard-slide, .billboard-slide.active { background-size: auto 106%; transition: opacity 1.5s ease, visibility 1.5s; }
}

/* v79: slide de ferias en celular - foto panorámica de la expo arriba, texto abajo */
@media (max-width: 600px) {
  .slide.expo-slide::before { background-color: #062637; background-size: auto 60% !important; background-position: 40% 0 !important; }
  .slide.expo-slide .hero-shade { background: linear-gradient(180deg, rgba(6,38,55,.3) 0, rgba(6,38,55,0) 16%, rgba(6,38,55,0) 40%, #062637 66%) !important; }
  .slide.expo-slide .hero-copy { top: auto; bottom: 104px; transform: none; z-index: 3; }
  .slide.expo-slide .hero-copy h2 { font-size: clamp(1.9rem, 8.6vw, 2.25rem); line-height: .95; margin: .3em 0 .35em; }
  .slide.expo-slide .hero-copy > p:not(.eyebrow) { display: none; }
}

/* v80: slide 2 - totem urbano. Computador: texto a la derecha para no tapar el totem; celular: totem a la vista */
@media (min-width: 901px) {
  .street-slide .hero-copy{left:auto;right:6vw;max-width:560px}
  .street-slide .hero-shade{background:linear-gradient(270deg,rgba(3,25,36,.82),rgba(3,25,36,.5) 45%,rgba(3,25,36,.05) 78%)}
}
@media (max-width: 760px) {
  .slide.street-slide:not(.billboard-slide)::before{background-position:0% 0 !important}
}

/* v85: slide de la expo con la foto del stand de Chile */
@media (max-width: 600px) { .slide.expo-slide.expo-chile::before { background-position: 66% 0 !important; } }