/* ============================================
   JG MODA · AJUSTES DE ESCRITORIO
   ============================================
   La web se diseñó primero para el celular, que es como la usa la
   mayoría de las clientas. Ese diseño se conserva tal cual.

   Este archivo SOLO añade lo que faltaba en pantallas grandes.

   ⚠️ IMPORTANTE
   Todo va dentro de @media (min-width: 641px) o parecidos. NO hay
   ninguna regla suelta fuera de una condición de ancho.

   ¿Por qué? Porque este archivo se carga DESPUÉS de movil.css. Si
   aquí hubiera una regla sin condición (por ejemplo «:root { ... }»),
   ganaría por orden y anularía los arreglos del celular. Justo lo
   que pasaba antes con la altura del encabezado.

   Se puede quitar borrando una línea del HTML sin que nada se rompa.
   ============================================ */

/* ============================================
   1. LA ALTURA DEL ENCABEZADO
   ============================================
   La barra de filtros del catálogo se pega justo debajo del
   encabezado. Su posición se calcula con una variable.

   En el celular esa variable la define movil.css y suma el hueco de
   la cámara (env(safe-area-inset-top)). Aquí solo se redefine para
   pantallas grandes, donde no hay cámara que esquivar. */

@media (min-width: 641px) {
  :root { --jg-header-h: 81px; }
}

@media (min-width: 1024px) {
  :root { --jg-header-h: 89px; }
}

@media (min-width: 641px) {
  /* La barra de búsqueda y categorías, siempre pegada bajo el
     encabezado. Antes tenía 69 px fijos, que era la altura del
     celular: en escritorio quedaba TAPADA por el encabezado. */
  .filters-wrapper {
    top: var(--jg-header-h);
  }

  /* Los enlaces internos (#seccion) no quedan tapados al saltar. */
  [id] {
    scroll-margin-top: calc(var(--jg-header-h) + 20px);
  }
}

/* ============================================
   2. EL BANNER DEL INICIO
   ============================================
   En un monitor ancho, una foto de 16/9 a pantalla completa crece
   tanto que empuja todo lo demás fuera de la vista: hay que bajar
   para ver cualquier cosa. Se le pone un tope de altura. */

@media (min-width: 1024px) {
  .carousel {
    max-height: 620px;
  }
}

@media (min-width: 1440px) {
  .carousel {
    max-height: 680px;
  }
}

/* Un banner vertical (los que se suben pensando en el celular)
   dentro de un recuadro ancho se recortaba por el centro y perdía
   la parte de arriba: la cabeza de la niña, justo lo que se mira.
   Enfocando un poco más arriba se ve el vestido entero. */
@media (min-width: 1024px) {
  .carousel-slide {
    background-position: center 28% !important;
  }
}

/* El texto del banner lleva un degradado oscuro para que se lea
   sobre una foto clara. En escritorio se refuerza abajo, que es
   donde va el texto. */
@media (min-width: 1024px) {
  .carousel-slide {
    background-image: linear-gradient(
      175deg,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.16) 38%,
      rgba(0, 0, 0, 0.62) 100%
    );
  }
}

/* La franja de puntos y el contador del banner: más cómodos de
   leer y de pulsar con el ratón. */
@media (min-width: 1024px) {
  .carousel-dot {
    height: 4px;
    cursor: pointer;
  }

  .carousel-dot:hover {
    background: rgba(255, 255, 255, 0.55);
  }
}

/* ============================================
   3. APROVECHAR EL ANCHO
   ============================================
   En monitores grandes (1440 px o más) el contenido se quedaba
   estrecho y con mucho aire a los lados. */

@media (min-width: 1440px) {
  .container {
    max-width: 1360px;
  }

  .site-footer-inner,
  .site-footer-bottom {
    max-width: 1360px;
  }

  /* La pasarela del inicio gana una columna. */
  .preview-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* El catálogo, también. */
  .catalog-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }

  /* El buscador respira mejor y no queda desproporcionado. */
  .search-field {
    max-width: 720px;
  }
}

/* En pantallas muy anchas, un poco más de aire entre tarjetas para
   que no parezca una sola masa. */
@media (min-width: 1800px) {
  .preview-grid,
  .catalog-grid {
    gap: 24px;
  }
}

/* ============================================
   4. LA FICHA DEL VESTIDO
   ============================================
   En el celular la ficha sube desde abajo y ocupa toda la pantalla.
   En escritorio hay sitio de sobra: se aprovecha para que la foto y
   el formulario se vean a la vez, sin bajar. */

@media (min-width: 1440px) {
  .modal-content {
    max-width: 1180px;
  }

  .modal-info {
    padding: 56px 48px;
  }
}

/* Las flechas de la galería: en escritorio conviene que se vean
   siempre, aunque sea tenues, para saber que hay más fotos. */
@media (min-width: 641px) and (hover: hover) {
  .gallery-nav {
    opacity: 0.6;
  }

  .modal-main-image:hover .gallery-nav,
  .gallery-nav:focus-visible {
    opacity: 1;
  }
}

/* ============================================
   5. RESPONDER AL RATÓN
   ============================================
   En el celular se toca; en la computadora se pasa el cursor por
   encima. Ahí conviene que las cosas reaccionen: así se entiende
   qué se puede pulsar. */

@media (hover: hover) and (pointer: fine) {
  /* Tarjetas del catálogo: se levantan un poco al pasar por encima. */
  .look-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
  }

  .look-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -16px rgba(44, 34, 38, 0.36);
  }

  /* Se ve bien dónde está el foco al navegar con el teclado (Tab). */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .look-card:focus-visible,
  .filter-btn:focus-visible {
    outline: 2px solid var(--color-wine, #6B2D4A);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* El enlace «Ver catálogo» del encabezado. */
  .header-link {
    cursor: pointer;
  }
}

/* ============================================
   6. LA SECCIÓN «CÓMO FUNCIONA»
   ============================================
   Tiene sus propios ajustes en main.css (a 640 y 960 px). Aquí solo
   se remata en monitores anchos para que el mapa de Panamá no se
   desproporcione. */

@media (min-width: 1440px) {
  .jx-ship-inner {
    max-width: 1300px;
  }

  .jx-cta {
    max-width: 1100px;
  }
}

/* ============================================
   7. DATOS DE LA CASA
   ============================================
   Las tres cifras de la portada (seguidores, pedidos, artesanía)
   en una sola fila cómoda. */

@media (min-width: 1440px) {
  .stats-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
  }
}

/* ============================================
   8. IMPRESIÓN
   ============================================
   Si alguien imprime una ficha o el catálogo, que salga limpio:
   sin menús, sin botones y sin animaciones. */

@media print {
  .header,
  .filters-wrapper,
  .search-bar,
  .site-footer,
  .carousel-indicators,
  .carousel-counter,
  .gallery-nav,
  .preview-cta,
  .cta-section,
  .ig-banner {
    display: none !important;
  }

  .carousel {
    aspect-ratio: auto;
    max-height: none;
  }

  .look-card {
    break-inside: avoid;
  }

  body {
    background: #fff;
  }
}