/* ============================================
   PORTADA — AJUSTES DE RESPONSIVE MÓVIL
   ============================================
   Correcciones puntuales para secciones de la
   portada que no estaban adaptadas a pantallas
   estrechas. Cada bloque explica qué sustituye
   y por qué.
   ============================================ */

/* --------------------------------------------
   "Disfruta de la Experiencia": mosaico de scroll
   --------------------------------------------
   El mosaico de escritorio usa fotos de 1164px de
   ancho fijo movidas por una interacción de scroll
   nativa de Webflow (misma animación en todos los
   breakpoints, por diseño). En una pantalla de
   390px eso deja las fotos casi 3 veces más anchas
   que la pantalla, mostrando solo una porción
   diagonal irreconocible, y como el recorrido de
   scroll es larguísimo, la animación tarda muchísimo
   en verse completa.

   En vez de pelear con esa interacción, en móvil se
   oculta el mosaico (con display:none — la interacción
   de Webflow sigue "viva" pero no tiene ningún efecto
   visual sobre algo oculto) y se muestra una cuadrícula
   estática sencilla con aparición suave al hacer scroll,
   usando js/scroll-animations.js que ya carga la página.
   -------------------------------------------- */
.scroll-mosaic-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .content-section.scoll-section .full-overflow {
    display: none;
  }

  .scroll-mosaic-mobile {
    display: block;
    padding: 3rem 0;
  }

  .scroll-mosaic-heading {
    text-align: center;
    font-family: Nyghtserif, sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: var(--font, #1f1f1f);
    margin-bottom: 1.75rem;
  }

  .scroll-mosaic-heading span {
    display: block;
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .scroll-mosaic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .scroll-mosaic-grid img {
    display: block;
    width: 100%;
    height: 42vw;
    max-height: 220px;
    object-fit: cover;
    border-radius: 24px;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  /* La primera foto destaca a doble ancho, como portada del mosaico */
  .scroll-mosaic-grid img:first-child {
    grid-column: 1 / -1;
    height: 55vw;
    max-height: 280px;
  }

  .scroll-mosaic-cta {
    text-align: center;
    margin-top: 2rem;
  }

  .scroll-mosaic-cta .mini-title-link {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-mosaic-grid img {
    transition: none;
  }
}

/* --------------------------------------------
   "Descubre": tira horizontal para las 3 fotos
   --------------------------------------------
   El envoltorio no cambia nada en escritorio
   (display:contents lo hace invisible al layout);
   en móvil convierte las tres fotos en una tira con
   scroll horizontal y deja la tarjeta "Reserva ahora"
   como bloque aparte, a ancho completo, al final.
   -------------------------------------------- */
.discover-scroll-mobile {
  display: contents;
}

@media screen and (max-width: 767px) {
  #Discover .flex-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .discover-scroll-mobile {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .discover-scroll-mobile .box-grid {
    flex: 0 0 76vw;
    max-width: 320px;
    width: auto;
    aspect-ratio: 4 / 3;
    height: auto;
    margin: 0;
    scroll-snap-align: center;
  }

  /* La foto real solo aportaba su propio tamaño intrínseco a la caja
     (achatándola); la imagen visible ya viene del fondo de
     .parallax-image, así que la ocultamos sin tocar el DOM. */
  .discover-scroll-mobile .box-grid img {
    display: none;
  }

  #Discover .box-grid.last {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    min-height: 280px;
    margin: 0;
  }
}

/* --------------------------------------------
   "La Villa": botón "Ver Más"
   --------------------------------------------
   Es un botón que solo aparecía en :hover — en
   pantallas táctiles no hay hover persistente, así
   que nunca llegaba a verse. Se fuerza visible con
   !important porque Webflow aplica su estado inicial
   como estilo en línea (mayor especificidad que una
   regla normal).
   -------------------------------------------- */
@media screen and (max-width: 767px) {
  .work-preview-image .button-hover {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0)
      rotateZ(0) skew(0, 0) !important;
  }
}

/* --------------------------------------------
   "Envíanos tu Mensaje": legibilidad del fondo
   --------------------------------------------
   El texto en blanco se apoyaba directamente sobre la
   foto sin ninguna capa oscura de por medio. En
   escritorio la foto ocupa poco espacio relativo y
   pasa desapercibido; en móvil, apilada a toda anchura
   detrás del texto, compite con él. Se añade un
   degradado oscuro como fondo adicional (no hace falta
   tocar el HTML: se combina con la imagen ya declarada
   en main.css usando dos capas de fondo).
   -------------------------------------------- */
@media screen and (max-width: 767px) {
  .parrallax-image.contact-us {
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.6) 100%
      ),
      url("../images/mesa-barbacoa.avif");
  }
}