/* Ajustes de uso táctil y pantallas estrechas. Se carga al final de la cascada. */
@media (max-width: 650px) {
  .announcement {
    gap: 5px;
    padding-inline: 8px;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
  }

  .cart-trigger, .category-nav button,
  .product-card .add-button, .category-photo-actions .add-button,
  .banner-controls > button, .icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  .category-nav {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .category-nav button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn, .hero-guide { min-height: 44px; }
  .hero h1 { overflow-wrap: break-word; }

  .banner-controls {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 18px 52px;
  }
  .banner-controls .banner-swipe-cue {
    position: static;
    order: -1;
    flex-basis: 100%;
    margin-bottom: 3px;
    text-align: center;
  }
  .banner-dots { gap: 0; margin-left: 0; }
  .banner-dots button,
  .banner-dots button.active {
    position: relative;
    width: 26px;
    height: 44px;
    border-radius: 0;
    background: transparent;
  }
  .banner-dots button::after {
    content: '';
    position: absolute;
    inset: 18px 9px;
    border-radius: 100px;
    background: #ffffff82;
  }
  .banner-dots button.active::after { inset-inline: 4px; background: #f08423; }

  .card-photo, .category-photo-cover { flex-basis: 52%; }
  .product-card .card-content { padding: 11px 14px 0; }
  .product-card .card-tag, .category-photo-caption .card-tag { margin-bottom: 4px; }
  .product-card h4 { font-size: clamp(19px, 5.5vw, 22px); line-height: 1.04; }
  .product-card .card-bottom { padding: 0 14px 11px; }
  .product-card .card-price { font-size: 21px; }
  .category-photo-caption { padding: 11px 14px 11px; }

  .mobile-cart {
    bottom: max(14px, env(safe-area-inset-bottom));
    min-height: 52px;
  }
  footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .cart-drawer { height: 100vh; height: 100dvh; bottom: auto; }
  .drawer-head { padding: 18px; }
  .cart-items { padding: 12px 18px; }
  .drawer-bottom { padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }

  .product-modal, .checkout-modal {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .product-modal textarea, #checkoutForm input,
  #checkoutForm textarea, .flavor-select,
  .promo-admin .admin-card input:not([type=checkbox]):not([type=file]),
  .promo-admin .admin-card textarea, .promo-admin .admin-card select {
    font-size: 16px;
  }
  .modal-footer .quantity button { width: 40px; height: 40px; }
  .modal-footer .btn { min-height: 48px; }
  .dog-choice-list button { min-height: 52px; }

  #toast {
    width: max-content;
    max-width: calc(100vw - 28px);
    white-space: normal;
    text-align: center;
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .hero-content { padding-top: 68px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 46px); }
  .hero-quote { margin-top: 56px; }
  .section-heading h2, .steps-copy h2 { font-size: 40px; }
  .category-header { gap: 9px; }
  .category-header h3 { font-size: 22px; }
  .category-header .category-icon { font-size: 21px; }

  .card-photo, .category-photo-cover { flex-basis: 49%; }
  .product-card .card-content { padding-top: 9px; }
  .product-card h4 { font-size: 19px; }
  .product-card .card-price { font-size: 19px; }
  .category-photo-caption strong { font-size: 21px; }

  .mobile-cart { left: 10px; right: 10px; gap: 7px; padding-inline: 12px; }
  .mobile-cart strong { font-size: 12px; }
  .product-modal, .checkout-modal { width: calc(100% - 16px); padding: 22px 16px; }
  .modal-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .modal-footer .quantity { justify-content: space-between; }
  .modal-footer .btn { width: 100%; }
  .dog-choice-list button { gap: 8px; padding-inline: 10px; }
  .dog-choice-list button strong { font-size: 16px; }
  .dog-choice-list button b { font-size: 14px; }
  .tutorial-modal { padding-inline: 13px; }
  .tutorial-scene { padding-inline: 5px; }
  .tutorial-art { transform: scale(.75); }
  .admin-promo-row { grid-template-columns: 72px minmax(0, 1fr); }
  .admin-promo-row img { width: 72px; height: 72px; }
  .admin-promo-row h3 { overflow-wrap: anywhere; }
}

@media (min-width: 590px) and (max-width: 650px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) and (max-height: 700px) {
  .tutorial-art { height: 165px; transform: scale(.7); }
  .tutorial-scene { padding-bottom: 9px; }
  .tutorial-copy h3 { font-size: 24px; }
}