/* ============================================
   JG MODA · AJUSTES DE CELULAR
   ============================================
   La web se usa sobre todo desde el celular. Este archivo corrige
   cosas que en pantalla pequeña se rompen o incomodan.

   Es una capa ADITIVA: va después de main.css y catalog.css, y no
   reescribe nada que ya funcionara. Se puede quitar borrando una
   línea del HTML sin que nada más se rompa.

   Corrige tres fallos reales:
     1. En iPhone con cámara frontal (notch), la barra de filtros
        quedaba ESCONDIDA detrás del encabezado al bajar por el
        catálogo.
     2. Los campos del formulario de la ficha hacían ZOOM en iPhone
        al tocarlos: el navegador amplía todo por debajo de 16 px.
     3. En horizontal, el banner del inicio era más alto que la
        pantalla y había que bajar a ciegas para ver algo.
   ============================================ */

/* ============================================
   1. LA ALTURA REAL DEL ENCABEZADO
   ============================================
   El encabezado lleva relleno arriba igual al hueco de la cámara
   (env(safe-area-inset-top)). En un iPhone con notch son unos 47 px
   MÁS de alto que en un teléfono normal.

   La barra de filtros se pega justo debajo del encabezado. Si se le
   da una altura fija de 69 px (la del celular sin cámara), en un
   iPhone con notch se pega DEMASIADO ARRIBA y el encabezado la tapa.

   Aquí se calcula la altura de verdad, sumando ese hueco. */

@media (max-width: 640px) {
  :root {
    --jg-header-h: calc(69px + env(safe-area-inset-top, 0px));
  }
}

/* ============================================
   2. QUE EL IPHONE NO HAGA ZOOM AL ESCRIBIR
   ============================================
   iOS agranda la pantalla cuando se toca un campo con letra menor
   de 16 px. La clienta toca la talla, la pantalla se le agranda y
   tiene que alejarla con dos dedos.

   Pasa en TODOS los campos del formulario de la ficha. Se veía en
   el buscador, que sí tenía 16 px puestos a propósito, pero no en
   los demás.

   Con 16 px ya no ocurre, y de paso se lee mejor. */

@media (max-width: 640px) {
  .form-control,
  .search-field input,
  .request-form input,
  .request-form select,
  .request-form textarea,
  input[type="text"],
  input[type="search"],
  input[type="date"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px;
  }

  /* La fecha del iPhone trae su propio aspecto y descuadra si no se
     le da espacio. */
  input[type="date"] {
    min-height: 48px;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* ============================================
   3. HORIZONTAL: QUE EL BANNER QUEPA
   ============================================
   El banner tiene forma vertical (9/14) porque se pensó para el
   teléfono de pie. Girado, el ancho manda: en un teléfono de
   844 × 390 el banner saldría de más de 1.200 px de alto y no se
   vería nada sin bajar a ciegas.

   En horizontal pasa a una forma más ancha y se limita su altura. */

@media (max-width: 900px) and (orientation: landscape) {
  .carousel {
    aspect-ratio: 16 / 9;
    max-height: 78vh;
  }

  .carousel-slide {
    padding: 20px 24px;
  }

  .slide-title {
    font-size: 26px;
    margin-bottom: 6px;
  }

  .slide-desc {
    font-size: 13px;
    margin-bottom: 12px;
    max-width: 44ch;
  }

  /* Al girar, el hueco de la cámara deja de importar. */
  :root {
    --jg-header-h: 69px;
  }
}

/* ============================================
   4. LOS PUNTOS DEL BANNER
   ============================================
   Los puntos que marcan en qué banner estás miden 3 px de alto.
   Son pulsables, pero un dedo no acierta en 3 px: se le da una
   zona sensible más grande SIN cambiar cómo se ven. */

@media (max-width: 640px) {
  .carousel-dot {
    position: relative;
  }

  .carousel-dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    bottom: -11px;
  }
}

/* ============================================
   5. ZONAS CÓMODAS PARA EL DEDO
   ============================================
   Todo lo que se toca debería medir al menos 44 px de alto: es la
   medida que Apple y Google consideran mínima para no fallar. */

@media (max-width: 640px) {
  /* Las categorías del catálogo. */
  .filter-btn {
    min-height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
  }

  /* El botón de borrar la búsqueda. */
  .search-clear {
    width: 44px;
    height: 44px;
    right: 0;
  }

  /* Las miniaturas de la ficha. */
  .modal-thumb {
    width: 62px;
    height: 78px;
  }

  /* La fila que despliega las medidas. */
  .measures-toggle {
    min-height: 48px;
  }

  /* Los enlaces del pie, que no queden uno pegado a otro. */
  .site-footer-col a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================
   6. EL FORMULARIO DE LA FICHA
   ============================================
   Es donde la clienta escribe sus datos para pedir la cotización.
   Cuanto más cómodo sea, más mensajes llegan. */

@media (max-width: 640px) {
  /* Campos más altos: se acierta mejor con el pulgar. */
  .form-control {
    min-height: 48px;
    padding: 13px 15px;
  }

  /* El desplegable de talla, que es el campo que más se usa. */
  select.form-control {
    background-position: right 15px center;
    padding-right: 42px;
  }

  /* El botón de enviar por WhatsApp: el más importante de todos. */
  .modal-whatsapp {
    min-height: 54px;
    font-size: 16px;
  }

  /* Aire abajo, para que el teclado del celular no tape el botón. */
  .modal-info {
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  }

  /* Los avisos de precio y medidas, con aire para poder leerlos. */
  .size-price-note,
  .measures-note {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ============================================
   7. LEER CON LUZ DEL DÍA
   ============================================
   El taller y la calle tienen mucha luz. Un poco más de contraste
   en los textos pequeños ayuda a leerlos sin esfuerzo. */

@media (max-width: 640px) {
  .catalog-subtitle,
  .preview-desc,
  .modal-description,
  .search-status,
  .catalog-empty p {
    color: #5A5A5A;
  }

  /* El nombre del vestido: es lo que la clienta lee para decidir si
     abre la ficha o no. Un punto más grande. */
  .look-name {
    font-size: 16px;
  }

  .look-price {
    font-size: 12px;
  }
}

/* ============================================
   8. TELÉFONOS PEQUEÑOS
   ============================================
   En pantallas de menos de 360 px (iPhone SE, Android económicos)
   hay que apretar un poco para que todo quepa. */

@media (max-width: 360px) {
  .slide-title {
    font-size: 28px;
  }

  .preview-title,
  .jx-title {
    font-size: 28px;
  }

  .catalog-title {
    font-size: 30px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   9. SIN MOVIMIENTO
   ============================================
   Quien pidió a su teléfono menos animaciones, no las recibe. */

@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .look-card {
    transition: none;
  }
}