/* =====================================================================
   PCLAP SUPPORT — RESPONSIVE (celulares, tablets, laptops, All-in-One)
   ---------------------------------------------------------------------
   Se carga AL FINAL (layouts/index.blade.php) y solo CORRIGE lo que ya
   existe: si algo falla, quitar su <link> deja la web como antes.

   Rangos (ancho CSS, no importa la marca del equipo):
     ≤ 359px  iPhone SE 1ª gen, Galaxy Fold cerrado, Android pequeños
     ≤ 575px  la mayoría de celulares (Samsung, Honor, Xiaomi, iPhone)
     ≤ 767px  celulares grandes y celulares acostados
     ≤ 991px  tablets verticales (iPad, iPad mini, iPad Air, Galaxy Tab)
     ≤ 1199px tablets horizontales / iPad Pro / laptops pequeñas
     ≥ 1920px All-in-One modernas y monitores grandes
   + reglas por altura (laptops 1366×768) y por tipo de pantalla (táctil).
   ===================================================================== */


/* =====================================================================
   0. BASE (todas las pantallas)
   ===================================================================== */

/* El carrusel 3D de "Productos destacados" acomoda tarjetas invisibles
   muy a los costados: esto evitaba que la página entera se ensanchara
   (en celular escondía los íconos del menú). */
#carrusel3D { overflow: hidden; }

/* iPhone con notch / Dynamic Island acostado: el contenido no queda debajo */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Altura real de pantalla en celular (100vh "salta" en Safari al ocultar la barra) */
@supports (height: 100svh) {
  .section-hero { min-height: 100svh; }
  .ss-viewport { height: 100svh; }
}

/* Paneles laterales de destacados: la lista interna (en PC se ve igual que antes) */
.side-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* Galería del producto: contador "1 / 3" sobre la foto */
.pd-main-img { position: relative; }
.pd-count {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  background: rgba(6, 10, 20, .72); color: #fff; font-size: .75rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}

/* Barra fija de compra y panel de filtros: ocultos en PC */
.pd-sticky, .btn-filtros, .sheet-head, .sheet-foot, .sheet-backdrop { display: none; }

/* Botón de WhatsApp flotante: respeta la barra inferior del iPhone */
body .wa-float { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* Menú móvil y carrito: no quedan debajo de la barra inferior del iPhone */
.mobile-menu { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.cart-footer { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }

/* Animación 3D en modo "imagen fija" (datos móviles / iPhone / celular básico) */
.hero-3d-off .hero-canvas {
  background: url('../assets/img/hero-3d-poster.jpg') center 55% / cover no-repeat;
}
.hero-3d-play {
  position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vh, 2.5rem); z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: 999px;
  background: rgba(6, 10, 20, .6); border: 1px solid var(--border-hover);
  color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  transition: background .2s, transform .15s;
}
.hero-3d-play i { color: var(--primary-light); }
.hero-3d-play:hover { background: rgba(31, 147, 255, .25); transform: translateY(-2px); }

/* Aviso de datos móviles (tipo cookies) */
.aviso-datos {
  position: fixed; left: 12px; right: 12px; z-index: 10050;
  bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: center;
  padding: .9rem 1rem; border-radius: 16px;
  background: #0b1120; border: 1px solid var(--border-hover); color: var(--text);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  transform: translateY(140%); opacity: 0;
  transition: transform .35s var(--ease-out-expo), opacity .35s;
}
.aviso-datos.is-on { transform: none; opacity: 1; }
.aviso-datos-ico { font-size: 1.3rem; color: var(--accent); }
.aviso-datos-txt { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; line-height: 1.35; }
.aviso-datos-txt strong { font-size: .95rem; }
.aviso-datos-txt span { color: var(--text-secondary); }
.aviso-datos-btns { grid-column: 1 / -1; display: flex; gap: .6rem; justify-content: flex-end; margin-top: .3rem; }
.aviso-datos-btns button {
  min-height: 42px; padding: 0 1.1rem; border-radius: 10px; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.aviso-no { background: transparent; border: 1px solid rgba(255, 255, 255, .2); color: var(--text-secondary); }
.aviso-si { background: var(--grad-brand); border: 0; color: #fff; }


/* =====================================================================
   1. LAPTOPS Y ALL-IN-ONE
   ===================================================================== */

/* Laptops "bajitas" (1366×768, 1280×720, All-in-One antiguas): menos alto desperdiciado */
@media (min-width: 1024px) and (max-height: 760px) {
  .ss-title { font-size: clamp(2rem, 4vw, 3.1rem); }
  .ss-media { height: 54vh; }
  .hero-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 1rem; }
  .hero-lead { margin-bottom: 1.6rem; }
  .coverflow { height: 540px; }
}

/* Laptops / iPad horizontal (992–1199): el catálogo pasa de 4 a 3 columnas (antes quedaban apretadas) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .catalog .cards-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =====================================================================
   2. TABLETS Y MENOS (≤ 1099px): "Productos destacados"
   ===================================================================== */
@media (max-width: 1099.98px) {
  .featured-grid { grid-template-columns: minmax(0, 1fr); }
  .featured-grid > * { min-width: 0; }
  .coverflow { order: -1; } /* primero el carrusel, luego las filas */
  .featured-note { margin-top: .6rem; }

  /* Paneles laterales -> filas horizontales que se deslizan con el dedo */
  .side-panel { display: block; padding: 1rem; }
  .side-panel .side-title { margin-bottom: .7rem; }
  .side-list {
    flex-direction: row; gap: .7rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .2rem;
  }
  .side-list::-webkit-scrollbar { display: none; }
  .side-list .side-item { flex: 0 0 31%; scroll-snap-align: start; }
  .side-item:hover { transform: none; }
  .side-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 767.98px) {
  .side-list .side-item { flex-basis: 62%; }
}
@media (max-width: 479.98px) {
  .side-list .side-item { flex-basis: 82%; }
}


/* =====================================================================
   3. TABLETS VERTICALES Y CELULARES (≤ 991px)
   ===================================================================== */
@media (max-width: 991.98px) {

  /* ---- Buscador: filtros en panel que sube desde abajo ---- */
  .catalog-tools { display: flex; align-items: center; gap: .6rem; }
  .btn-filtros {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 40px; padding: 0 1rem; border-radius: 10px;
    background: #fff; color: #16294f; border: 1px solid #d8dce6;
    font-weight: 700; font-size: .9rem; cursor: pointer;
  }
  .btn-filtros-n {
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: #1f93ff; color: #fff; font-size: .72rem; display: inline-grid; place-items: center;
  }
  .catalog-order select { min-height: 40px; }

  .catalog-sidebar {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto;
    z-index: 10020;
    max-height: 86vh; max-height: 86svh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 18px 18px 0 0; border: 0;
    padding: 0 1.25rem;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
    transform: translateY(105%); visibility: hidden;
    transition: transform .35s var(--ease-out-expo), visibility .35s;
  }
  .catalog-sidebar.is-open { transform: none; visibility: visible; }
  .catalog-sidebar .btn-clear { display: none; }

  .sheet-head {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .6rem;
    margin: 0 -1.25rem 1rem; padding: 1rem 1.25rem .8rem; background: #fff;
    border-bottom: 1px solid #eef0f5;
  }
  .sheet-head::before { /* "manija" del panel */
    content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px;
    margin-left: -20px; border-radius: 4px; background: #d5dae4;
  }
  .sheet-head strong { font-size: 1.05rem; }
  .sheet-head span { font-size: .8rem; color: #6b7a90; margin-left: auto; }
  .sheet-close {
    width: 38px; height: 38px; border-radius: 10px; border: 0;
    background: #f1f3f9; color: #16294f; font-size: 1rem; cursor: pointer;
  }
  .sheet-foot {
    position: sticky; bottom: 0; z-index: 2; display: flex; gap: .6rem;
    margin: 1rem -1.25rem 0; padding: .8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #eef0f5;
  }
  .sheet-clear {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 1.1rem; border-radius: 12px; border: 1px solid #d8dce6;
    color: #16294f; font-weight: 700; text-decoration: none;
  }
  .sheet-apply {
    flex: 1; min-height: 46px; border-radius: 12px; border: 0; cursor: pointer;
    background: linear-gradient(120deg, #1f93ff, #0b6fd6); color: #fff; font-weight: 800; font-size: .98rem;
  }
  .sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 10010;
    background: rgba(3, 6, 13, .55); opacity: 0; visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  body.filtros-open .sheet-backdrop { opacity: 1; visibility: visible; }
  body.filtros-open .wa-float { opacity: 0; pointer-events: none; }

  /* ---- Producto: barra fija de compra ---- */
  .pd-sticky {
    display: flex; align-items: center; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    padding: .6rem max(.9rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left));
    background: rgba(6, 10, 20, .96); border-top: 1px solid var(--border-hover);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
    transform: translateY(110%); transition: transform .3s var(--ease-out-expo);
  }
  .pd-sticky.is-on { transform: none; }
  .pd-sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .pd-sticky-name { font-size: .78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-sticky-price { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; white-space: nowrap; }
  .pd-sticky-price s { font-size: .75rem; color: var(--text-muted); font-weight: 500; }
  .pd-sticky-wa, .pd-sticky-cart {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 46px; padding: 0 1rem; border-radius: 12px; border: 0;
    font-weight: 800; font-size: .92rem; text-decoration: none; cursor: pointer;
  }
  .pd-sticky-wa { background: #25d366; color: #fff; }
  .pd-sticky-wa i { font-size: 1.25rem; }
  .pd-sticky-cart { background: var(--grad-brand); color: #fff; }
  body.has-pd-sticky { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  body.pd-sticky-on .wa-float { bottom: calc(82px + env(safe-area-inset-bottom)); }

  /* ---- Hero del inicio: estadísticas en 2×2 ---- */
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.5rem; max-width: 520px; }
  .stat::after { display: none; }
  .stat-value { font-size: clamp(1.3rem, 5vw, 1.8rem); }
}


/* =====================================================================
   4. CARRUSEL PRINCIPAL (banners) en pantallas angostas o verticales
      (celulares, iPad vertical): se ve el banner completo (2:1)
   ===================================================================== */
@media (max-width: 1023.98px), (max-aspect-ratio: 4/3) {
  .hero-car {
    height: auto;
    aspect-ratio: 2 / 1;
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100svh - var(--nav-height));
  }
  .hc-arrow { width: 36px; height: 36px; font-size: .78rem; }
  .hc-prev { left: .6rem; }
  .hc-next { right: .6rem; }
  .hc-dots { bottom: .7rem; padding: .3rem .5rem; gap: .35rem; }
  .hc-dot { width: 7px; height: 7px; }
  .hc-dot.is-active { width: 26px; }
}


/* =====================================================================
   5. CELULARES (≤ 767px)
   ===================================================================== */
@media (max-width: 767.98px) {

  /* ---- Barra superior compacta: todo cabe incluso en 320px ---- */
  :root { --nav-height: 60px; }
  .site-nav {
    gap: .5rem;
    padding: 0 max(.75rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
  }
  .nav-logo { min-width: 0; }
  .nav-logo-img { height: 38px; max-width: 46vw; }
  .nav-logo-fallback { font-size: 1.1rem; }
  .nav-logo-fallback span { font-size: .58rem; letter-spacing: .22em; }
  .nav-actions { gap: .1rem; }
  .nav-icon-btn, .nav-burger { width: 40px; height: 40px; }
  .site-nav .nav-user-btn { width: 40px !important; padding: 0 !important; justify-content: center; }
  .nav-search-overlay { padding: 0 .75rem; }
  .nav-search-form { gap: .6rem; }

  /* ---- Secciones ---- */
  .section-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); margin-bottom: 1rem; }
  .section-lead { font-size: 1rem; }

  /* ---- Hero 3D ---- */
  .section-hero { min-height: min(100vh, 740px); padding-top: calc(var(--nav-height) + 1.5rem); padding-bottom: 3rem; }
  @supports (height: 100svh) { .section-hero { min-height: min(100svh, 740px); } }
  .hero-car + .section-hero { padding-top: 2.5rem; }
  .hero-overlay { background: linear-gradient(180deg, rgba(6, 10, 20, .55) 0%, rgba(6, 10, 20, .82) 100%); }
  .hero-badge { margin-bottom: 1.3rem; font-size: .62rem; letter-spacing: .14em; }
  .hero-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .hero-lead { margin-bottom: 1.6rem; }
  .scroll-hint { display: none; }
  .hero-3d-play { left: 50%; right: auto; transform: translateX(-50%); bottom: 1.2rem; }
  .hero-3d-play:hover { transform: translateX(-50%) translateY(-2px); }

  /* ---- Galería "showcase" ---- */
  .scroll-slideshow { height: 260vh; }
  .ss-slide { padding: calc(var(--nav-height) + 1rem) 1rem 3.5rem; gap: 1rem; }
  .ss-media { height: 34vh; }
  @supports (height: 1svh) { .ss-media { height: 34svh; } }
  .ss-title { font-size: clamp(1.6rem, 7.5vw, 2.2rem); margin-bottom: .8rem; }
  .ss-desc { font-size: .95rem; }
  .ss-dots { bottom: 1.4rem; }

  /* ---- Productos destacados: tarjeta plana que se desliza (ver carousel.js) ---- */
  .featured-head { margin-bottom: 1.4rem; }
  .coverflow { height: 545px; perspective: none; }
  .cf-stage { transform-style: flat; }
  .coverflow .cf-card { width: min(300px, calc(100vw - 96px)); margin-left: calc(min(300px, calc(100vw - 96px)) / -2); }
  .coverflow .cf-media { height: 170px; }
  .coverflow .cf-body { padding: 1rem 1.1rem 1.2rem; }
  .coverflow .cf-name { font-size: 1.1rem; min-height: 2.5em; }
  .coverflow .cf-price-now { font-size: 1.6rem; }
  .cf-arrow { width: 38px; height: 38px; top: 32%; font-size: .85rem; }
  .cf-prev { left: -.4rem; }
  .cf-next { right: -.4rem; }

  /* ---- Ofertas ---- */
  .ofertas-parallax { padding: 3rem 0; }
  .ofertas-item { flex-basis: 220px; }

  /* ---- Ubícanos ---- */
  .location-circle { padding: 1rem; gap: 1rem; }
  .location-circle .circle-icon { width: 46px; height: 46px; }

  /* ---- Marcas ---- */
  .brands { padding: 28px 0; }
  .brands__track { gap: 30px; }
  .brands__track span { font-size: 1.15rem; }

  /* ---- Tarjetas de producto en grilla (buscador / relacionados): 2 por fila, compactas ---- */
  .cards-grid { gap: .7rem; }
  .cards-grid .cf-media { height: 135px; }
  .cards-grid .cf-body { padding: .7rem .75rem .8rem; }
  .cards-grid .cf-brand { font-size: .6rem; letter-spacing: .1em; }
  .cards-grid .cf-name {
    font-size: .95rem; min-height: 2.4em; margin: .15rem 0 .25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .cards-grid .cf-model { font-size: .72rem; margin-bottom: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cards-grid .cf-price { gap: .1rem .4rem; margin-bottom: .3rem; }
  .cards-grid .cf-price-now { font-size: 1.22rem; }
  .cards-grid .cf-price-old { font-size: .72rem; }
  .cards-grid .cf-stock { font-size: .7rem; margin-bottom: .6rem; line-height: 1.25; }
  .cards-grid .cf-actions { gap: .4rem; }
  .cards-grid .btn-wa-product,
  .cards-grid .btn-add-cart { padding: .55rem .4rem; font-size: .82rem; gap: .35rem; min-height: 38px; }
  .cards-grid .t-largo { display: none; }
  .cards-grid .cf-card:hover { transform: none; }

  /* ---- Buscador ---- */
  .catalog { padding: calc(var(--nav-height) + 1.2rem) .9rem 3rem; }
  .catalog-header { gap: .8rem; margin-bottom: 1rem; }
  .catalog-title { font-size: 1.35rem; }
  .catalog-tools { width: 100%; }
  .catalog-order { flex: 1; justify-content: flex-end; }
  .catalog .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-pagination { gap: .5rem; flex-wrap: wrap; }
  .catalog-pagination a, .catalog-pagination span { padding: .55rem .8rem; font-size: .82rem; }

  /* ---- Detalle de producto ---- */
  .pd { padding: calc(var(--nav-height) + 1rem) .9rem 3rem; }
  .pd-title { font-size: 1rem; margin-bottom: 1rem; padding-bottom: .7rem; }
  .pd-top { gap: 1.4rem; }
  .pd-gallery { flex-direction: column-reverse; gap: .7rem; }
  .pd-thumbs { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: .5rem; padding: .2rem .1rem; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb { width: 58px; height: 58px; flex: 0 0 auto; border-radius: 10px; }
  .pd-main-img { width: 100%; border-radius: 16px; }
  .pd-name { font-size: 1.35rem; }
  .pd-price { font-size: 1.75rem; }
  .pd-actions { max-width: none; }
  .pd-desc { margin-top: 2rem; padding: 1.2rem; }
  .pd-reco { margin-top: 2rem; }
  .pd-reco h3 { font-size: 1.15rem; }
  /* Relacionados: fila que se desliza con el dedo */
  .pd-reco .cards-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .4rem;
  }
  .pd-reco .cards-grid::-webkit-scrollbar { display: none; }
  .pd-reco .cards-grid .cf-card { scroll-snap-align: start; }

  /* ---- Contáctenos ---- */
  .ct { padding: calc(var(--nav-height) + 1.5rem) .9rem 3rem; }
  .ct-title { font-size: 1.9rem; }
  .ct-wa { font-size: 1.1rem; padding: 1rem 1.6rem; width: 100%; justify-content: center; }
  .ct-wa i { font-size: 1.5rem; }
  .ct-cols { margin-top: 2rem; }
  .ct-box, .ct-pagos { padding: 1.2rem; }
  .ct-horario li { flex-wrap: wrap; gap: .1rem 1rem; }

  /* ---- Políticas ---- */
  .pol { padding: calc(var(--nav-height) + 1.5rem) .9rem 3rem; }
  .pol-title { font-size: 1.6rem; }
  .pol-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .3rem; margin-bottom: 1.6rem; }
  .pol-nav::-webkit-scrollbar { display: none; }
  .pol-nav a { flex: 0 0 auto; padding: .45rem .9rem; }
  .pol-section { padding: 1.1rem 1.1rem; }
  .pol-section h2 { font-size: 1.1rem; }

  /* ---- Libro de reclamaciones ---- */
  .lr { padding: calc(var(--nav-height) + 1.5rem) .9rem 3rem; }
  .lr-head h1 { font-size: 1.6rem; }
  .lr-card { padding: 1.2rem; }

  /* ---- Mi cuenta ---- */
  .gc { padding: calc(var(--nav-height) + 1.2rem) .9rem 3rem; }

  /* ---- Ventanas: login y carrito ---- */
  .login-modal { width: calc(100vw - 1.5rem); max-height: calc(100vh - 1.5rem); max-height: calc(100svh - 1.5rem); overflow-y: auto; }
  .login-modal-inner { padding: 2.2rem 1.2rem 1.4rem; }
  .login-modal-body { max-height: none; }
  .cart-header, .cart-body { padding-left: 1.1rem; padding-right: 1.1rem; }
  .cart-footer { padding-left: 1.1rem; padding-right: 1.1rem; }

  /* ---- Botón flotante de WhatsApp: más chico ---- */
  body .wa-float { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  body .wa-float .wa-btn { width: 52px; height: 52px; font-size: 28px; }

  /* ---- Aviso de datos ---- */
  .aviso-datos { left: 10px; right: 10px; }
}


/* =====================================================================
   6. CELULARES PEQUEÑOS (≤ 479px y ≤ 359px)
   ===================================================================== */
@media (max-width: 479.98px) {
  .catalog-order label { display: none; }
  .catalog-order select { width: 100%; max-width: 210px; }
  body .cw-row { flex-direction: column; gap: .5rem; }
  .pd-sticky-wa .t-largo { display: none; }
  .pd-sticky-wa { padding: 0 .85rem; }
  .ct-pagos-grid { gap: .8rem; }
}

@media (max-width: 359.98px) {
  .nav-logo-fallback { font-size: .95rem; }
  .nav-logo-fallback span { font-size: .5rem; letter-spacing: .15em; }
  .nav-icon-btn, .nav-burger { width: 36px; }
  .site-nav { padding-left: .6rem; padding-right: .6rem; }
  .cards-grid .cf-media { height: 115px; }
  .cards-grid .cf-price-now { font-size: 1.08rem; }
  .cards-grid .btn-wa-product, .cards-grid .btn-add-cart { font-size: .76rem; }
  .pd-sticky-name { display: none; }
  .pd-sticky-cart { padding: 0 .8rem; }
  .hero-stats { gap: 1rem; }
}


/* =====================================================================
   7. TABLETS (768–991): ajustes finos
   ===================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .catalog .cards-grid { grid-template-columns: repeat(3, 1fr); }
  .catalog-tools { margin-left: auto; }
  .pd-sticky { padding-left: 1.5rem; padding-right: 1.5rem; }
  .pd-sticky-info { max-width: 50%; }
}


/* =====================================================================
   8. PANTALLAS TÁCTILES (celulares, tablets, laptops táctiles)
   ===================================================================== */
@media (pointer: coarse) {
  /* iPhone no hace zoom al tocar un campo si la letra es de 16px o más */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }

  /* Zonas fáciles de tocar con el dedo */
  .filter-check { padding: .45rem 0; }
  .filter-check input { width: 20px; height: 20px; }
  body .cw-qty-btn { width: 34px; height: 34px; }
  body .cw-cart-remove { min-width: 36px; min-height: 36px; }
  .price-sliders input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
  .price-sliders input[type=range]::-moz-range-thumb { width: 26px; height: 26px; }
  .m-sub a { padding: .7rem .75rem; }

  a, button { -webkit-tap-highlight-color: rgba(31, 147, 255, .15); }
}

/* Sin mouse (dedo): los efectos de "pasar el mouse" no se quedan pegados */
@media (hover: none) {
  .location-circle:hover { transform: none; box-shadow: none; }
  .location-circle:hover .circle-icon { transform: none; animation: none; }
  .ss-media:hover img { transform: none; }
  .cards-grid .cf-card:hover .cf-media img { transform: none; }
}


/* =====================================================================
   9. CELULARES DE GAMA BAJA / AHORRO DE DATOS (clase puesta en el layout)
      Se apagan animaciones decorativas que gastan batería.
   ===================================================================== */
html.gama-baja .aurora,
html.gama-baja .hc-slide.is-active img,
html.gama-baja .wa-float .wa-btn,
html.gama-baja .wa-float .wa-btn::before,
html.gama-baja .wa-float .wa-bubble { animation: none !important; transform: none !important; }
html.gama-baja .site-nav,
html.gama-baja .mobile-menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 10, 20, .97); }


/* =====================================================================
   10. PANTALLAS GRANDES (≥ 1920px): All-in-One modernas, 2K / 4K
   ===================================================================== */
@media (min-width: 1920px) {
  .catalog, .pd { max-width: 1400px; }
  .catalog .cards-grid { grid-template-columns: repeat(5, 1fr); }
}