/* Responsive del sitio.
 *
 * El HTML viene de un design doc y tiene los estilos inline, así que estas
 * reglas necesitan !important para ganarle a un atributo style. No es elegante:
 * es el precio de no reescribir 46 KB de markup. Todo lo que se pudo arreglar
 * cambiando el valor inline (la grilla del equipo, los clamp de tipografía) se
 * arregló ahí, no acá. Esto es sólo lo que de verdad pide un breakpoint.
 */

/* ---------------------------------------------------------------- header
 * A menos de 760px el nav se parte en varias líneas y se monta sobre el logo.
 * Se apila: logo arriba, links abajo, centrados y en una sola fila scrollable.
 */
@media (max-width: 760px) {
  header > div {
    flex-direction: column !important;
    gap: 14px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* Dos filas centradas en vez de una scrollable: con justify-content:center
   * y overflow-x, el primer link queda cortado y no hay forma de llegar a él. */
  header nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 22px !important;
    width: 100%;
  }
  header nav a { white-space: nowrap; }
  header svg { width: 104px !important; height: 24px !important; }
}

/* ------------------------------------------------------------ formulario
 * El grupo de WhatsApp es prefijo + número en flex. A menos de 420px el
 * selector de prefijo aprieta el input a un ancho inusable.
 */
@media (max-width: 420px) {
  form [style*="align-items:flex-end"] { gap: 10px !important; }
  form select[name="prefijo"] { flex: 0 0 78px !important; }
}

/* ------------------------------------------------------- miniaturas de producto
 * El iframe mide 1440x900 fijo y lo escala el JS según el ancho de la card.
 * Hasta que eso pasa se mantiene invisible, para que no se vea un frame del
 * mockup a tamaño real dentro de la card. El JS marca data-listo al escalar.
 */
[data-mini]:not([data-listo]) { opacity: 0; }
[data-mini] { transition: opacity .3s ease; }

/* --------------------------------------------------------------- equipo
 * La grilla ya es auto-fit. Abajo de 380px una sola columna deja las fotos
 * enormes: se limita el alto para que la sección no se estire.
 */
@media (max-width: 380px) {
  #equipo img { max-height: 260px !important; object-fit: cover !important; }
}

/* ------------------------------------------------------------- impresión */
@media print {
  header, [data-mini], #agenda { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}