/* =============================================
   HARVESTCHILE — MOBILE UX PATCH
   <link rel="stylesheet" href="/assets/style_mobile_patch.css">
   Colocar después de los otros CSS en header.php
   ============================================= */


/* ══════════════════════════════════════════════════
   1. PRODUCT CARDS
   Cada card ocupa 1/3 del espacio disponible bajo
   el hero. Usamos dvh para medición real del viewport
   (descuenta barra del navegador móvil).

   Navbar móvil  = 68px
   Hero aprox    = 42% del viewport visible
   Products      = 58% restante  → cada card = 58%/3
══════════════════════════════════════════════════ */
@media (max-width: 640px) {

  .product-card__circle {
    display: none !important;
  }

  /* Cada card: 1/3 de los 58% del viewport bajo la navbar */
  .product-card {
    grid-template-columns: 88px 1fr 20px !important;
    padding: 0 16px !important;
    gap: 14px !important;
    height: calc((100dvh - 68px) * 0.58 / 3) !important;
    min-height: 0 !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Imagen: usa el alto disponible de la card */
  .product-card__img {
    /* Ancho generoso, alto = casi toda la card menos padding */
    width: 100px !important;
    height: calc((100dvh - 68px) * 0.58 / 3 - 16px) !important;
    max-height: 100px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-card__img img {
    /* La imagen llena el ancho, el alto se ajusta solo */
    width: 100px !important;
    height: auto !important;
    max-height: calc((100dvh - 68px) * 0.58 / 3 - 16px) !important;
    max-width: 100px !important;
    object-fit: contain !important;
    display: block !important;
  }

  .product-card__body {
    padding: 0 !important;
    min-width: 0 !important;
  }
  .product-card__body h3 {
    font-size: .88rem !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
  }
  .product-card__body p {
    font-size: .7rem !important;
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .product-card__cta {
    font-size: .68rem !important;
    gap: 3px !important;
    font-weight: 700 !important;
  }
  .product-card__chevron {
    font-size: 1.2rem !important;
    align-self: center !important;
  }
}

@media (max-width: 380px) {
  .product-card {
    grid-template-columns: 72px 1fr 16px !important;
    padding: 0 12px !important;
    gap: 10px !important;
    height: calc((100dvh - 68px) * 0.60 / 3) !important;
  }
  .product-card__img {
    width: 80px !important;
    height: calc((100dvh - 68px) * 0.60 / 3 - 16px) !important;
    max-height: 84px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .product-card__img img {
    width: 80px !important;
    height: auto !important;
    max-height: calc((100dvh - 68px) * 0.60 / 3 - 16px) !important;
    max-width: 80px !important;
    object-fit: contain !important;
    display: block !important;
  }
  .product-card__body h3 { font-size: .78rem !important; }
  .product-card__body p  { font-size: .62rem !important; }
  .product-card__cta     { font-size: .6rem !important; }
}


/* ══════════════════════════════════════════════════
   2. APLICACIONES POR INDUSTRIA — más compacto
══════════════════════════════════════════════════ */
@media (max-width: 640px) {

  .section.section--alt {
    padding: 24px 0 !important;
  }
  .section.section--alt .section-header {
    margin-bottom: 14px !important;
  }
  .section.section--alt .section-header h2 {
    font-size: .7rem !important;
    letter-spacing: .08em !important;
  }
  .industries-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .industry-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    margin-bottom: 5px !important;
  }
  .industry-card {
    padding: 6px 2px !important;
  }
  .industry-card h4 {
    font-size: .58rem !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 380px) {
  .industries-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .industry-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: .85rem !important;
  }
  .industry-card h4 { font-size: .52rem !important; }
}


/* ══════════════════════════════════════════════════
   3. BRANDS BAR — más compacta en móvil
══════════════════════════════════════════════════ */
@media (max-width: 640px) {

  .brands-bar {
    padding: 12px 16px !important;
  }
  .brands-bar-inner {
    gap: 8px !important;
  }
  .brands-label {
    font-size: .58rem !important;
  }
  .brands-logos {
    gap: 12px !important;
  }
  .brand-logo {
    font-size: .82rem !important;
  }
  .brands-certifs {
    gap: 6px !important;
    margin-top: 0 !important;
    flex-wrap: wrap !important;
  }
  .brands-certifs .badge {
    padding: 3px 6px !important;
    font-size: .52rem !important;
    line-height: 1.3 !important;
  }
  .certif-text {
    font-size: .62rem !important;
  }
}


/* ══════════════════════════════════════════════════
   4. FOOTER BRANDS (marquee) — visible en móvil
══════════════════════════════════════════════════ */
@media (max-width: 640px) {

  .footer-brands {
    display: block !important;
  }
  .footer-brands__track {
    animation-duration: 12s !important;
    gap: 0 !important;
  }
  .footer-brand-card {
    padding: 4px 10px !important;
    gap: 6px !important;
  }
  .footer-brand-card__logo {
    width: 34px !important;
    height: 26px !important;
    border-radius: 4px !important;
  }
  .footer-brand-card__info strong {
    font-size: .62rem !important;
  }
  .footer-brand-card__info span {
    font-size: .54rem !important;
  }
  .footer-brand-tagline {
    padding: 4px 10px !important;
    gap: 6px !important;
  }
  .footer-brand-tagline strong {
    font-size: .62rem !important;
  }
  .footer-brand-tagline span {
    font-size: .54rem !important;
    display: block !important;
  }
  .footer-brands__dot {
    margin: 0 8px !important;
  }
  .footer-brands::before,
  .footer-brands::after {
    width: 28px !important;
  }
}

@media (max-width: 380px) {
  .footer-brand-card__logo {
    width: 28px !important;
    height: 22px !important;
  }
  .footer-brand-card__info strong { font-size: .58rem !important; }
  .footer-brand-card__info span   { font-size: .5rem !important; }
  .footer-brand-tagline strong    { font-size: .58rem !important; }
}


/* ══════════════════════════════════════════════════
   5. SPACER — el JS (below_fold_spacer.js) le asigna
   height inline. En desktop/tablet invisible.
══════════════════════════════════════════════════ */
.below-fold-spacer {
  display: none;
  pointer-events: none;
}

@media (max-width: 640px) {
  .below-fold-spacer {
    display: block;
  }
}