/* 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; }
}

/* ==========================================================================
 * Marquesina de logos de clientes
 *
 * Va acá y no inline porque un @keyframes no se puede expresar en un atributo
 * style. La pista se duplica y la copia lleva aria-hidden: el lector de
 * pantalla escucha la lista una sola vez, pero el loop no tiene costura.
 * ========================================================================== */
.marquesina {
  display: flex;
  gap: clamp(28px, 4vw, 56px);
  overflow: hidden;
  width: 100%;
  /* Los logos se desvanecen en los bordes en vez de cortarse de golpe. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquesina__pista {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquesina 42s linear infinite;
}

/* Una sola pista se corre el 100% de su ancho; como hay dos idénticas pegadas,
 * al terminar queda exactamente donde empezó y el salto no se ve. */
@keyframes marquesina {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - clamp(28px, 4vw, 56px))); }
}

.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }

/* Cada logo trae su propia caja (--w/--h). Un scale() sobre object-fit se
 * desborda de la caja, porque transform no recorta: acá el tamaño lo resuelve
 * la caja y object-fit sólo encaja adentro. Los cuadrados van más bajos porque
 * a igual altura pesan más que los apaisados. */
.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w, 160px);
  height: var(--h, 56px);
}

/* width/height al 100% y no auto: el <img> es flex item, y con height:auto su
 * min-height implícito es el alto intrínseco de la imagen, que le gana a
 * max-height:100%. Un logo de 447x447 se salía a 115px de alto en una caja de
 * 36. Con 100% + object-fit la caja manda y contain hace el encaje. */
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Neutraliza cualquier caja blanca sobre el fondo hueso de la sección. */
  mix-blend-mode: multiply;
}

@media (max-width: 760px) {
  .logo { width: calc(var(--w, 160px) * 0.72); height: calc(var(--h, 56px) * 0.75); }
  .marquesina__pista { animation-duration: 32s; }
}

/* Sin animación: la pista se acomoda en varias filas y la copia se oculta. */
@media (prefers-reduced-motion: reduce) {
  .marquesina { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquesina__pista { animation: none; flex-wrap: wrap; row-gap: 20px; }
  .marquesina__pista[aria-hidden="true"] { display: none; }
}