/* ═══════════════════════════════════════════════════════════
   GESU Mobile — responsive + rendimiento (≤768px)
   Solo CSS. Se carga via media="screen and (max-width: 768px)"
   No modifica: JS, IDs, eventos, lógica de negocio.
   Clases JS protegidas: open, active, visible, hidden,
     scrolled, catalog-mode, catalog-active, sz-active,
     mi-visible, buy-btn--added, ftc-pulse, ftc-badge-pop,
     input-error, shake, receipt__icon--animated, no-gsap
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────
   ETAPA 0 — Resets globales
   ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100vw; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
p, span, label { overflow-wrap: anywhere; word-break: normal; }

/* ──────────────────────────────
   ETAPA 1 — Header y navegación
   ────────────────────────────── */
.nav { padding: 0 0.75rem; }
.nav__inner { padding: 0 0.25rem; }
.nav__brand img { width: 32px; height: 32px; }
.nav.scrolled {
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
/* Menú móvil ya se maneja con .nav__hamburger visible a 768px */

/* ──────────────────────────────
   ETAPA 2 — Hero principal
   ────────────────────────────── */
.hero { padding: 4.5rem 1rem 2.5rem; min-height: auto; }
.hero__content { padding: 1rem; }
.hero__title { font-size: clamp(2rem, 10vw, 3.2rem); }
.hero__subtitle { font-size: clamp(0.75rem, 3.5vw, 0.9rem); }
.hero__tagline { font-size: clamp(0.7rem, 3vw, 0.85rem); }
.hero__cta {
  width: 100%;
  max-width: 260px;
  text-align: center;
  padding: 0.8rem 1.5rem;
}
.hero__sizes-bar { padding: 0 0.5rem; }
.hero__sizes-track { gap: 0.5rem; }
.hero__sz { font-size: clamp(0.7rem, 2vw, 0.9rem) !important; }
.hero__sz--4xl { font-size: clamp(1.2rem, 3vw, 1.8rem) !important; }
.hero__sz--5xl { font-size: clamp(1.4rem, 3.5vw, 2rem) !important; }
.hero__scroll { display: none; }
.hero__mesh { opacity: 0.4; }
/* Orbs de sección */
.orb { max-width: 200px; max-height: 200px; opacity: 0.25; filter: blur(50px); }

/* ──────────────────────────────
   ETAPA 3 — Tarjetas de producto
   ────────────────────────────── */
/* Grids ya tienen reglas a 768px/480px, reforzamos ajuste fino */
.feat-grid { gap: 0.8rem; }
.prod-card, .shirt-card { border-radius: 10px; }
.prod-card__info { padding: 0.6rem 0.7rem 0.7rem; }
.prod-card__name { font-size: 0.82rem; line-height: 1.3; }
.prod-card__brand { font-size: 0.68rem; }
.prod-card__price { font-size: 0.88rem; }
.prod-card__original { font-size: 0.65rem; }
.shirt-card__body { padding: 0.7rem 0.8rem 0.8rem; }
.shirt-card__name { font-size: 0.95rem; }
.shirt-card__brand { font-size: 8px; }
.buy-btn {
  padding: 0.45rem 0.7rem;
  font-size: 0.72rem;
  width: 100%;
  justify-content: center;
}
/* Bear tear section */
.bear-tear { padding: 2rem 1rem; }
.bear-tear__title { font-size: clamp(1.4rem, 6vw, 2rem); }
/* Categorías */
.cat-grid__img { min-height: 160px; }
.cat-grid__name { font-size: clamp(0.85rem, 3.5vw, 1.1rem); }
.cat-grid__arrow { width: 26px; height: 26px; }
/* Section headers */
.section__header { padding: 0 0.25rem; }
.section__title { font-size: clamp(1.3rem, 5.5vw, 1.8rem); }
.section__desc { font-size: 0.82rem; }

/* ──────────────────────────────
   ETAPA 4 — Filtros y selectores
   ────────────────────────────── */
.promise { padding: 2rem 1rem; }
.promise__card { padding: 1.5rem 1rem; }
.promise__title { font-size: clamp(1.2rem, 5vw, 1.6rem); }
.promise__desc { font-size: 0.82rem; }
.promise__sizes, .promise__size-group-pills { gap: 0.3rem; }
.promise__sz { padding: 0.35rem 0.55rem; font-size: 0.72rem; }
.promise__size-group-label { font-size: 0.7rem; }
.size-filter-banner {
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
  padding: 0.5rem 0.75rem;
}
.catalog-back { font-size: 0.82rem; padding: 0.5rem 0.75rem; }
/* Shirts grid en catálogo */
.shirts-grid { gap: 0.8rem; }

/* ──────────────────────────────
   ETAPA 5 — Carrito
   ────────────────────────────── */
.cart-panel {
  width: 100%;
  right: -100%;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.cart-panel.open { right: 0; }
.cart-panel::after { display: none; } /* glow de cursor innecesario en touch */
.cart-panel::before { opacity: 0.15; } /* grain reducido */
.cart-overlay {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.cart-header { padding: 0.9rem 1rem; }
.cart-header h3 { font-size: 1.15rem; }
.cart-body { padding: 0.6rem 0.9rem; }
.cart-item { gap: 0.5rem; }
.cart-item__img { width: 52px; height: 52px; border-radius: 6px; }
.cart-item__name { font-size: 0.82rem; }
.cart-item__meta { font-size: 0.7rem; }
.cart-item__price { font-size: 0.85rem; }
.cart-item__qty button { width: 26px; height: 26px; font-size: 0.8rem; }
.cart-item__remove { width: 24px; height: 24px; font-size: 1rem; }
.cart-footer { padding: 0.8rem 1rem; }
.cart-total { font-size: 1rem; }
.cart-btn { padding: 0.65rem; font-size: 0.85rem; }
.cart-empty { font-size: 0.85rem; padding: 2rem 1rem; }
/* FABs */
.cart-fab {
  width: 48px; height: 48px;
  bottom: 4.5rem; right: 1rem;
  box-shadow: 0 3px 14px rgba(212,165,90,.35);
}
.cart-fab svg { width: 20px; height: 20px; }
.cart-fab__badge { min-width: 18px; height: 18px; font-size: 0.6rem; }
.account-fab { bottom: 1rem; left: 1rem; width: 40px; height: 40px; }

/* ──────────────────────────────
   ETAPA 6 — Checkout
   ────────────────────────────── */
.checkout-view { padding: 0 0.3rem; }
.checkout-view h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.checkout-view label { font-size: 0.78rem; }
.checkout-view input,
.checkout-view select,
.checkout-view textarea {
  width: 100%;
  min-width: 0;
  font-size: 16px; /* previene zoom en iOS */
  padding: 0.55rem 0.6rem;
}
.checkout-summary-item { font-size: 0.78rem; }
.checkout-summary-total { font-size: 0.88rem; }
#paypalButtonContainer { max-width: 100%; overflow: hidden; }
.pay-secure-badges { justify-content: center; flex-wrap: wrap; }
.pay-secure-badges span { font-size: 0.65rem; }
.pay-secure-note { font-size: 0.68rem; }
/* Receipt */
.receipt__icon { width: 48px; height: 48px; }
/* Buy modal */
.bm-overlay {
  padding: 0.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bm-card {
  max-width: 100%;
  padding: 1.2rem 1rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.bm-header { gap: 0.8rem; margin-bottom: 1rem; padding-bottom: 0.8rem; }
.bm-header img { width: 65px; height: 65px; }
.bm-header h4 { font-size: 0.85rem; }
.bm-field select {
  font-size: 16px; /* previene zoom iOS */
  padding: 0.65rem 0.8rem;
}
.bm-actions { margin-top: 1rem; padding-top: 0.8rem; }
/* Tracking / Auth / Account modales */
.track-overlay, .auth-overlay, .acct-overlay { padding: 0.75rem; }
.track-card, .auth-card, .acct-card {
  max-width: 100%;
  padding: 1.2rem;
  border-radius: 12px;
}
.track-search input, .auth-card input { font-size: 16px; }
/* Product detail */
.prod-detail { padding: 0; align-items: flex-start; }
.prod-detail__inner {
  max-width: 100%;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0;
}
.prod-detail__gallery { border-radius: 8px; max-height: 55vh; }
.prod-detail__close { top: 0.5rem; right: 0.5rem; width: 36px; height: 36px; }
.prod-detail__arrow { width: 30px; height: 30px; font-size: 0.8rem; }
.prod-detail__info { padding: 0 0.5rem 1.5rem; }
.prod-detail__info h2 { font-size: 1.1rem; }
.prod-detail__buy .buy-btn {
  width: 100%;
  padding: 0.7rem;
  font-size: 0.85rem;
}
.prod-detail__thumbs { gap: 0.25rem; }
.prod-detail__thumb { width: 38px; height: 38px; }
/* Lightbox */
.lightbox__img { max-height: 80vh; max-width: 95vw; }

/* ──────────────────────────────
   ETAPA 7 — Footer
   ────────────────────────────── */
.footer__panel { padding: 1.2rem 1rem; }
.footer__brand { gap: 0.5rem; }
.footer__brand img { width: 36px; height: 36px; }
.footer__desc { font-size: 0.8rem; }
.footer__title { font-size: 0.85rem; }
.footer__links a { font-size: 0.82rem; }
.footer__social a { width: 32px; height: 32px; }
.footer__copy { font-size: 0.7rem; padding: 0.8rem 1rem; }
/* Chatbot */
.chatbot-btn { width: 46px; height: 46px; bottom: 1rem; right: 1rem; }
.chatbot-btn svg { width: 20px; height: 20px; }
.chatbot-panel {
  width: calc(100vw - 1rem);
  max-width: 100%;
  right: 0.5rem;
  bottom: 4rem;
  max-height: 60vh;
}
.chatbot-input input { font-size: 16px; }

/* ──────────────────────────────
   ETAPA 8 — Rendimiento
   ────────────────────────────── */
/* Ambiente: desactivar animaciones continuas */
.gesu-ambient__grad {
  filter: blur(40px);
  animation: none !important;
  opacity: 0.45;
}
.gesu-ambient__hero-glow {
  width: 300px; height: 300px;
  filter: blur(30px);
  animation: none !important;
  opacity: 0.45;
}
.gesu-ambient__grain { display: none; }
.gesu-ambient__section-glow::before { display: none; }
.gesu-ambient__p:nth-child(n+5) { display: none; }
.gesu-ambient__p { animation-duration: 10s !important; }

/* Reducir blur global */
.glass, .hero__sub-glass, .hero__tagline-glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.prod-detail {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.prod-detail__close, .prod-detail__arrow {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Desactivar efectos de cursor (inútiles en touch) */
.mi-light { display: none; }
.nav__brand::after { display: none; }

/* Sombras reducidas */
.prod-card:hover, .shirt-card:hover, .cat-grid__item:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Transiciones más cortas */
.prod-card, .shirt-card, .cat-grid__item,
.buy-btn, .hero__cta, .cart-btn--primary,
.cart-fab, .account-fab, .nav__brand {
  transition-duration: 150ms !important;
}
/* Scroll reveal más rápido */
.mi-reveal { transition-duration: 0.3s !important; }

/* Fly-to-cart: conservar pero más corto */
.ftc-pulse { animation-duration: 280ms !important; }
.ftc-badge-pop { animation-duration: 280ms !important; }

/* ──────────────────────────────
   BREAKPOINT 480px — Pantallas pequeñas
   ────────────────────────────── */
@media (max-width: 480px) {
  .hero { padding: 3.5rem 0.75rem 2rem; }
  .hero__title { font-size: clamp(1.6rem, 9vw, 2.2rem); }
  .hero__cta { max-width: 100%; }
  section, .section { padding-left: 0.75rem; padding-right: 0.75rem; }
  .prod-detail__inner { padding: 0.25rem; }
  .cart-body { padding: 0.5rem 0.7rem; }
  .cart-footer { padding: 0.7rem 0.8rem; }
  .bm-card { padding: 1rem 0.75rem; }
  .bm-header img { width: 55px; height: 55px; }
  .footer__panel { padding: 1rem 0.75rem; }
  .gesu-ambient__hero-glow { width: 200px; height: 200px; filter: blur(25px); }
  .gesu-ambient__p:nth-child(n+3) { display: none; }
}

/* ──────────────────────────────
   BREAKPOINT 320px — Pantallas mínimas
   ────────────────────────────── */
@media (max-width: 360px) {
  .hero__title { font-size: 1.5rem; }
  .hero__cta { padding: 0.7rem 1rem; font-size: 0.8rem; }
  .nav__brand img { width: 28px; height: 28px; }
  .prod-card__info { padding: 0.5rem; }
  .cart-header h3 { font-size: 1rem; }
  .bm-header img { width: 48px; height: 48px; }
}

/* ──────────────────────────────
   Reduced motion (reforzado)
   ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}