/* ==========================================================================
   DRAGON CLOCK · PARCHE CELULAR (Android + iPhone)  — v7
   Se carga DESPUÉS de styles.css. No cambia nada en PC salvo las rutas de
   imágenes (que quedan iguales, solo que absolutas).
   ========================================================================== */

/* 1) Sin desplazamiento lateral de la página (en iPhone la página "bailaba"
      hacia los lados y cortaba "Volver" y el menú). */
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* 2) Imágenes con RUTA ABSOLUTA. Safari/iPhone resuelve distinto las rutas
      relativas guardadas en variables CSS (url("../assets/...")); con la ruta
      absoluta funcionan igual en todos los navegadores. */
.logo-mark::after { background-image: url("/assets/media/media-313.png"); }
.logo-mark .logo-shine {
  -webkit-mask-image: url("/assets/media/media-313.png");
          mask-image: url("/assets/media/media-313.png");
}
.style-catalog-wrap--cat  > .section-bg { background-image: url("/assets/media/media-315.webp"); }
.style-catalog-wrap--shop > .section-bg { background-image: url("/assets/media/media-316.webp"); }
.style-catalog-wrap--ship > .section-bg { background-image: url("/assets/media/media-318.webp"); }
#nosotros .section-bg                   { background-image: url("/assets/media/media-316.webp"); }
#reseñas .section-bg                    { background-image: url("/assets/media/media-317.webp"); }
.photo-band-img-inner                   { background-image: url("/assets/media/media-314.webp"); }
.courier-shalom .courier-visual         { background-image: url("/assets/media/media-320.webp"); }
.courier-olva .courier-visual           { background-image: url("/assets/media/media-319.webp"); }
.welcome-photo                          { background-image: url("/assets/media/media-321.webp"); }

/* 2b) Animación "vuela al carrito": la imagen pequeña que salta hacia el carrito
       al tocar "Añadir al carrito" (el JS ya la creaba, pero faltaba su estilo). */
.fly-to-cart {
  position: fixed; z-index: 99999; pointer-events: none;
  border-radius: 50%; overflow: hidden;
  border: 2px solid #d4a836; background: #0a0f0c;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 14px rgba(212,168,54,.45);
  transition: transform .55s cubic-bezier(.55,-0.15,.75,.9), opacity .55s ease-in;
  will-change: transform, opacity;
}
.fly-to-cart img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-bump { animation: dcCartBump .5s ease; }
@keyframes dcCartBump {
  0% { transform: scale(1); }  35% { transform: scale(1.35); }
  65% { transform: scale(.92); } 100% { transform: scale(1); }
}


/* 2c) Botón "Compartir" en la ficha del reloj (lo agrega js/dc-extras.js). */
.pp-topbar .dc-share-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 10px;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(212,168,54,.6); background: rgba(212,168,54,.08); color: #d4a836;
  font: 600 12px/1 Manrope, system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap;
}
.pp-topbar .dc-share-btn:hover { background: rgba(212,168,54,.18); }
.pp-topbar .dc-share-btn svg { width: 15px; height: 15px; }

/* ==========================  SOLO CELULAR  ========================== */
@media (max-width: 760px) {

  /* 3) Cabecera: entraba 18px más ancha que la pantalla. */
  .brand { gap: 8px !important; }
  .brand-word { font-size: 16px !important; letter-spacing: 1.6px !important; }
  .header-actions { gap: 11px !important; }
  .brand-logo-img { width: 34px !important; height: 41px !important; }

  /* 4) Desenfoque de fondo (backdrop-filter): es lo MÁS pesado que hay para un
        celular y en iPhone hace que capas con imágenes dejen de pintarse.
        Se reemplaza por un fondo casi sólido: se ve igual, pesa nada. */
  .site, .pp-topbar, .modal-overlay, .welcome-overlay, .ship-card, .cart-overlay {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .site      { background-color: rgba(10,15,12,.97) !important; }
  .pp-topbar { background-color: rgba(10,15,12,.97) !important; }

  /* 5) Fondos de sección: en celular se mantiene el MISMO efecto que en PC (la foto
        viaja con el scroll, lo maneja data-main.js). No se toca aquí. */

  /* 6) Bloques que aparecían "con animación al hacer scroll" (.reveal): se muestran
        directo. En celular algunos son tan altos que nunca llegaban al % de
        pantalla necesario para aparecer -> quedaban invisibles. Las fotos que
        entran deslizando (Pieza destacada y Reseñas) SÍ conservan su animación. */
  .reveal {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }

  /* 7) Animaciones infinitas decorativas apagadas (consumen GPU todo el tiempo). */
  .logo-mark::before, .logo-mark .logo-shine, .lux-text {
    animation: none !important; will-change: auto !important;
  }
  .logo-mark .logo-shine { display: none !important; }
  .logo-mark::after { filter: none !important; }
  .modal-thumb, .modal-thumb * { animation: none !important; }

  /* 8) VIDEOS DEL PRODUCTO -> tira compacta de miniaturas debajo de los botones
        de compra (la JS los mueve ahí). Precio y métodos de pago quedan visibles
        sin bajar. Tocar una miniatura abre el video en pantalla completa. */
  #productModal { overflow-x: hidden !important; }
  #ppVideoSlot.dc-moved { margin: 16px 0 4px; }
  #ppVideoSlot .ppx-vid-wrap { margin: 0 !important; padding: 0 !important; }
  #ppVideoSlot .ppx-vid-label {
    display: block !important; text-align: left !important; margin: 0 0 8px !important;
    font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase;
    color: var(--gold, #c9a227);
  }
  #ppVideoSlot .ppx-vid-nav { display: none !important; }
  #ppVideoSlot .ppx-vid-carousel { padding: 0 !important; margin: 0 !important; }
  #ppVideoSlot .ppx-vid-grid {
    display: flex !important; justify-content: flex-start !important; gap: 10px !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    scroll-snap-type: x proximity !important; -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px !important; scrollbar-width: none;
  }
  #ppVideoSlot .ppx-vid-grid::-webkit-scrollbar { display: none; }
  #ppVideoSlot .ppx-vid-item {
    width: 96px !important; flex: 0 0 96px !important; aspect-ratio: 9 / 16;
    border-radius: 12px !important; box-shadow: 0 6px 16px rgba(0,0,0,.35) !important;
    transition: none !important; transform: none !important; opacity: 1 !important;
  }
  #ppVideoSlot .ppx-vid-mute { display: none !important; }
  #ppVideoSlot .ppx-vid-item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
  .dc-vid-expand {
    position: absolute; right: 6px; top: 6px; width: 24px; height: 24px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.5); color: #fff; pointer-events: none;
  }
  .dc-vid-expand svg { width: 13px; height: 13px; }

  /* Mini video encima de la foto principal: fuera SOLO en celular (en PC sigue igual). */
  #ppPhotoVidPreview, .ppx-photo-vid-preview { display: none !important; }
  .dc-vid-num {
    position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 700;
    color: #fff; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 8px;
    pointer-events: none;
  }
}