/* Base móvil: evita desbordamientos en contenido dinámico. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.site-shell,
.site-shell main,
.site-shell section,
.site-shell form {
  min-width: 0;
}

.site-shell img,
.site-shell iframe,
.site-shell .v24-map {
  max-width: 100%;
}

@media (max-width: 560px) {
  .site-shell .form-row,
  .site-shell .delivery-details-row,
  .site-shell .quote-actions,
  .site-shell .discount-input-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-shell .payment-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-shell .payment-options .payment-choice:last-child {
    grid-column: 1 / -1;
  }

  .site-shell .hero.hero-has-cover-image {
    width: auto;
  }

  .site-shell .hero-has-cover-image .store-status-badge {
    max-width: min(100%, 270px);
  }

  .site-shell .hero-has-cover-image .hero-copy {
    min-width: 0;
  }

  .site-shell .hero-has-cover-image h1 {
    overflow-wrap: break-word;
  }

  .v24-map {
    height: 240px;
  }
}

/* Tablet: se abandona la columna angosta de teléfono. */
@media (min-width: 641px) {
  body {
    padding: 22px;
  }

  .site-shell {
    border-radius: 34px;
    width: min(100%, 1280px);
  }

  .site-shell .topbar {
    border-radius: 34px 34px 0 0;
    min-height: 82px;
    padding: 13px 30px;
  }

  .site-shell .brand {
    font-size: 15px;
  }

  .site-shell .hero {
    margin: 18px 24px 0;
    min-height: 500px;
    padding: 44px 42px;
  }

  .site-shell .hero.hero-has-cover-image {
    aspect-ratio: 4 / 3;
    min-height: 500px;
    padding: 44px 42px;
  }

  .site-shell .hero-has-cover-image::before {
    background:
      linear-gradient(90deg, rgba(7, 30, 21, .84) 0%, rgba(7, 30, 21, .55) 48%, rgba(7, 30, 21, .05) 100%),
      linear-gradient(0deg, rgba(7, 30, 21, .62) 0%, rgba(7, 30, 21, 0) 58%);
  }

  .site-shell .hero-has-cover-image .hero-copy {
    max-width: 470px;
  }

  .site-shell .hero:not(.hero-has-cover-image) .hero-food-art {
    bottom: 75px;
    right: 60px;
    transform: scale(1.35);
    transform-origin: 100% 100%;
  }

  .site-shell .hero h1 {
    font-size: clamp(50px, 7vw, 68px);
  }

  .site-shell .hero p {
    font-size: 16px;
    max-width: 430px;
  }

  .site-shell .quick-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 16px 24px 38px;
  }

  .site-shell .quick-info div:first-child {
    grid-column: auto;
  }

  .site-shell .section-block {
    padding: 12px 30px 38px;
  }

  .site-shell .section-title h2 {
    font-size: 19px;
  }

  .site-shell .category-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    overflow: visible;
  }

  .site-shell .category-card {
    flex: initial;
    min-width: 0;
    width: 100%;
  }

  .site-shell .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-shell .product-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-shell .promo-card {
    min-height: 180px;
  }

  .site-shell .product-card {
    grid-template-columns: minmax(145px, 42%) minmax(0, 1fr);
    min-height: 205px;
  }

  .site-shell .product-photo {
    min-height: 205px;
  }

  .site-shell .product-content {
    padding: 20px 18px;
  }

  .site-shell .benefit-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .site-shell .order-section form {
    margin-inline: auto;
    max-width: 900px;
    padding: 26px;
  }

  .site-shell .find-us .map-card,
  .site-shell .branches-public-grid {
    margin-inline: auto;
    max-width: 980px;
  }

  .site-shell .map-embed,
  .v24-map {
    height: 390px;
  }

  .site-shell .social-card {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 30px;
  }

  .site-shell .social-actions {
    min-width: 360px;
  }

  .site-shell footer {
    margin: 10px 24px 24px;
  }

  .site-shell .floating-whatsapp {
    right: 30px;
  }
}

@media (min-width: 820px) {
  .site-shell .product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Escritorio: Hero panorámico y catálogo en dos columnas cómodas. */
@media (min-width: 1024px) {
  body {
    padding: 28px;
  }

  .site-shell .topbar {
    padding-inline: 44px;
  }

  .site-shell .hero {
    margin-inline: 32px;
    min-height: 560px;
    padding: 56px 58px;
  }

  .site-shell .hero.hero-has-cover-image {
    aspect-ratio: 16 / 8;
    max-height: 680px;
    min-height: 560px;
    padding: 56px 58px;
  }

  .site-shell .hero-has-cover-image .hero-copy {
    max-width: 590px;
  }

  .site-shell .hero:not(.hero-has-cover-image) .hero-food-art {
    bottom: 105px;
    right: 115px;
    transform: scale(1.8);
  }

  .site-shell .hero h1 {
    font-size: clamp(62px, 6.2vw, 82px);
    max-width: 590px;
  }

  .site-shell .hero p {
    font-size: 18px;
    max-width: 520px;
  }

  .site-shell .primary-button {
    font-size: 15px;
    padding: 15px 22px;
  }

  .site-shell .quick-info {
    margin-inline: 32px;
  }

  .site-shell .quick-info div {
    min-height: 82px;
  }

  .site-shell .section-block {
    padding-inline: 44px;
  }

  .site-shell .product-list {
    gap: 18px;
  }

  .site-shell .product-card {
    min-height: 235px;
  }

  .site-shell .product-photo {
    min-height: 235px;
  }

  .site-shell .product-content h3 {
    font-size: 22px;
  }

  .site-shell .product-content p {
    font-size: 13px;
  }

  .site-shell .benefits {
    margin-inline: 32px;
  }

  .site-shell .order-section form {
    max-width: 960px;
    padding: 32px;
  }

  .site-shell .map-embed,
  .v24-map {
    height: 440px;
  }

  .site-shell footer {
    margin-inline: 32px;
  }

  .site-shell .floating-whatsapp {
    right: max(30px, calc((100vw - 1280px) / 2 + 38px));
  }
}

/* Escritorios muy anchos: limita las líneas y mantiene el contenido centrado. */
@media (min-width: 1400px) {
  .site-shell {
    width: 1280px;
  }
}