/* ============================================================
   FAMOSO LOMELI — MOBILE FIXES v3.0  (FINAL)
   Aplica SOLO correcciones mobile. No toca desktop.
   ============================================================ */

/* ============================================================
   0. GLOBAL — sin breakpoint (aplica siempre)
   ============================================================ */

/* Previene overflow horizontal en toda la página */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Títulos: sin romper palabras de forma fea */
.section-title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================================
   1. HERO — móvil
   ============================================================ */
@media (max-width: 768px) {
  .hero__bg-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Cancelar animación ken-burns en móvil (rendimiento) */
    animation: none !important;
    transform: scale(1) !important;
  }

  .hero .container {
    padding-top: clamp(80px, 14vh, 110px);
    padding-bottom: clamp(40px, 8vh, 60px);
  }

  .hero__content {
    max-width: 100%;
  }
}

/* ============================================================
   2. TÍTULOS DE SECCIÓN — escalado correcto
   ============================================================ */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(1.55rem, 7.5vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: .07em;
  }

  .section-eyebrow {
    font-size: .55rem;
    letter-spacing: .28em;
  }
}

@media (max-width: 480px) {
  .section-title {
    font-size: clamp(1.35rem, 8vw, 2rem);
    letter-spacing: .05em;
  }

  /* Secciones con encabezado a la izquierda */
  .services .section-header,
  .about   .section-header {
    text-align: left !important;
  }
}

/* ============================================================
   3. TARJETAS DE PRODUCTOS — corrección del "zoom"
   
   CAUSA RAÍZ: styles.css define .product-card con
   overflow:visible + aspect-ratio:unset (layout flex) y la
   imagen usa object-fit:contain con aspect-ratio:3/4.
   En móvil a 2 columnas cada tarjeta es ~170px de ancho y
   la imagen de 3/4 con contain hace que el PNG se vea
   pequeño en el centro con mucho espacio vacío, y el body
   de texto queda enorme en proporción → efecto "zoom" o
   tarjeta desproporcionada.

   SOLUCIÓN: en móvil reducir el aspect-ratio de la imagen,
   controlar el tamaño del texto y del precio, y asegurar
   overflow:hidden en la tarjeta.
   ============================================================ */
@media (max-width: 600px) {

  /* Grid: 2 columnas compactas */
  .products__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    align-items: start;
  }

  /* Tarjeta: contener overflow y limitar ancho */
  .product-card {
    overflow: hidden !important;
    width: 100%;
    min-width: 0;
  }

  /* Imagen: ratio más corto para que el PNG llene mejor
     y no deje tanto espacio vacío en tarjetas angostas */
  .product-card__img-wrap {
    aspect-ratio: 1 / 1 !important;
    min-height: 0;
  }

  /* Objeto dentro de la imagen: cover para que llene */
  .product-card__img {
    object-fit: cover !important;
    object-position: center 10% !important;
  }

  /* Badge de línea: más pequeño */
  .product-card__line-badge {
    font-size: 0.44rem !important;
    letter-spacing: 0.08em !important;
    padding: 2px 6px !important;
    top: 6px !important;
    left: 6px !important;
  }

  /* Cuerpo de la tarjeta: padding reducido */
  .product-card__body {
    padding: 8px 8px 10px !important;
    gap: 4px !important;
  }

  /* Ocultar categoría — gana espacio */
  .product-card__cat {
    display: none !important;
  }

  /* Nombre del producto: máximo 2 líneas */
  .product-card__name {
    font-size: clamp(0.68rem, 2.8vw, 0.82rem) !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-bottom: 2px !important;
  }

  /* Precio: legible pero sin desbordar */
  .product-card__price-chip {
    padding: 4px 8px !important;
    gap: 3px !important;
    max-width: 100% !important;
    width: fit-content !important;
    min-width: 0 !important;
  }

  .product-card__price-chip-amount {
    font-size: clamp(0.82rem, 3.5vw, 1rem) !important;
    white-space: nowrap !important;
  }

  .product-card__price-chip-currency {
    font-size: 0.44rem !important;
  }

  /* Si el precio usa la fila alternativa */
  .product-card__price {
    font-size: clamp(1rem, 4vw, 1.3rem) !important;
  }

  .product-card__currency {
    font-size: 0.55rem !important;
  }
}

/* ============================================================
   4. TARJETAS — pantalla muy pequeña (≤ 360px): 1 columna
   ============================================================ */
@media (max-width: 360px) {
  .products__grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .product-card__img-wrap {
    aspect-ratio: 4 / 3 !important;
  }

  .product-card__img {
    object-position: center 20% !important;
  }

  .product-card__name {
    font-size: clamp(0.78rem, 4vw, 0.9rem) !important;
    -webkit-line-clamp: 1 !important;
  }
}

/* ============================================================
   5. TOUCH — cancelar hover-transform en dispositivos táctiles
   Sin bloquear la animación reveal (translateY de entrada)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {

  /* Estado reveal (antes de aparecer): mantener translateY del reveal */
  .product-card.reveal:not(.visible) {
    transform: translateY(28px) !important;
  }

  /* Ya visible: sin translate, sin hover */
  .product-card.visible,
  .product-card.visible:hover,
  .product-card.visible:active {
    transform: translateY(0) !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Sin clase reveal */
  .product-card:not(.reveal):hover,
  .product-card:not(.reveal):active {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* Touch feedback visual */
  .product-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(194, 144, 74, 0.08);
  }

  /* Cancelar efecto hover en imagen en touch */
  .product-card:hover .product-card__img,
  .product-card:active .product-card__img {
    transform: none !important;
    filter: brightness(.92) saturate(1.15) sepia(.04) !important;
  }
}

/* ============================================================
   6. FILTROS DE LÍNEA — compactos
   ============================================================ */
@media (max-width: 600px) {
  .filter-bar {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 0;
  }

  .filter-pill {
    font-size: 0.5rem;
    padding: 7px 12px;
    letter-spacing: 0.15em;
    min-height: 36px;
  }

  .filter-pill__dot {
    width: 6px;
    height: 6px;
  }
}

/* ============================================================
   7. BANNERS — envío y mayoristas
   ============================================================ */
@media (max-width: 600px) {
  .envio-gratis-banner {
    font-size: 0.72rem;
    gap: 6px;
    padding: 8px 14px;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .mayoristas-banner {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }

  .mayoristas-banner__title {
    font-size: clamp(0.78rem, 3.5vw, 0.95rem);
  }

  .mayoristas-banner__sub {
    font-size: 0.68rem;
  }

  .mayoristas-banner__deco {
    display: none;
  }

  .mayoristas-banner__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   8. GALERÍA — touch
   ============================================================ */
@media (max-width: 480px) {
  .gallery__masonry-item .gallery__img-wrap {
    min-height: clamp(120px, 36vw, 180px);
  }

  .gallery__item-overlay {
    opacity: .3;
  }
}

/* ============================================================
   9. MODAL — scroll en móvil
   ============================================================ */
@media (max-width: 600px) {
  .product-modal__box {
    max-height: 96svh;
    overflow-y: auto;
  }

  .product-modal__name {
    font-size: clamp(1.05rem, 5vw, 1.4rem);
    word-break: break-word;
  }
}

/* ============================================================
   10. CONTACTO — heading y layout
   ============================================================ */
@media (max-width: 768px) {
  .contact__cta-heading {
    font-size: clamp(1.4rem, 6.5vw, 2.2rem);
    line-height: 1.15;
    word-break: break-word;
  }

  .contact__inner {
    gap: clamp(24px, 6vw, 40px);
  }
}

/* ============================================================
   11. FOOTER
   ============================================================ */
@media (max-width: 480px) {
  .footer__copy {
    font-size: clamp(0.6rem, 2.6vw, 0.72rem);
    text-align: center;
    word-break: break-word;
  }

  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
  }
}

/* ============================================================
   12. LÍNEAS — paneles en móvil
   ============================================================ */
@media (max-width: 480px) {
  .lines__panels {
    grid-template-columns: 1fr !important;
  }

  .line-panel {
    min-height: 200px !important;
    border-right: none !important;
  }

  .line-panel__name {
    font-size: clamp(1rem, 5vw, 1.3rem);
  }
}

/* ============================================================
   13. PARALLAX CTA — botones en columna en pantallas muy angostas
   ============================================================ */
@media (max-width: 420px) {
  .parallax-cta__title {
    font-size: clamp(1.4rem, 8vw, 2rem);
  }

  .parallax-cta__content > div[style] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ============================================================
   14. SERVICIOS — stack vertical
   ============================================================ */
@media (max-width: 768px) {
  .services__inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .services__img-frame {
    max-width: min(380px, 100%);
  }
}

/* ============================================================
   15. NOSOTROS — stack vertical
   ============================================================ */
@media (max-width: 768px) {
  .about__inner {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .about__img-stack {
    max-width: 100%;
  }

  .about__value-tag {
    font-size: clamp(0.58rem, 2.6vw, 0.7rem);
    padding: 6px 12px;
    min-height: 36px;
  }
}

/* ============================================================
   16. MANIFIESTO — pilares en columna en móvil
   ============================================================ */
@media (max-width: 480px) {
  .manifesto__quote {
    font-size: clamp(1rem, 5vw, 1.5rem);
  }
}