/* ═══════════════════════════════════════════════════════════════════════════
   ESCRITORIO Y TABLETA · todo el sitio (5-oct-2026, rama escritorio-perfecto)
   ─────────────────────────────────────────────────────────────────────────
   David, después del teléfono: «revisa ahora la versión de escritorio
   igual». Medido en 17 páginas a 1920, 1536, 1440, 1366, 1280 y 1024 px con
   Chrome, 1440 y 1024 con el motor de Safari y una tableta de 768 px.

   Todo lo de aquí vive dentro de @media (min-width: 768px): el teléfono no
   lee una sola regla. Es la ÚLTIMA hoja del <head> en las 17 páginas (la pone
   scripts/escritorio-build.py), pero la portada y la ficha traen <style>
   dentro del <body> que cargan después: por eso los selectores empiezan con
   :root (y llevan el #id cuando la regla original lo trae), como movil.css.

   La regla (DESIGN.md § Escritorio y tableta):
     · Un solo ancho de contenido: 1,272 px (la caja de 1,320 del encabezado
       y el pie, con 24 px de canal). Había seis: 1,352 en las familias y las
       páginas de servicio, 1,272 en la portada, 1,180 en /nx600, /conocenos
       y las promociones, 1,132 en financiamiento, 1,152 en la ficha y 1,072
       en /faq. A 1440 px las orillas iban de 44 a 164 px según la sección.
     · Un solo canal: 24 px a cada lado desde 768 px; de 1,320 px en
       adelante el contenido se centra y la orilla crece sola.
     · Todo arranca en la orilla izquierda del contenido: etiqueta, título,
       entrada, tarjetas y cifras. Se centra SÓLO el cierre oscuro (portada,
       /nx600, /conocenos) y la tarjeta del 404.
     · Ningún texto de menos de 12 px; nada que se toque de menos de 44 px.
     · Rejillas parejas: cifras y pasos en filas completas (nunca 3 + 1 o
       2 + 1); las tarjetas de una fila, de la misma altura.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* ── 1 · El ancho y el canal ────────────────────────────────────────── */
  :root { --e-canal: 24px; --e-caja: 1320px; --e-ancho: 1272px; }

  /* La caja de siempre (encabezado, pie y la portada): 1,320 con 24 de
     canal. Entre 769 y 1,200 px nav.css la bajaba a 20 y a 768 a 16. */
  :root .container { padding-left: var(--e-canal); padding-right: var(--e-canal); }

  /* Familias y páginas de servicio: de 1,400 a 1,320 (el contenido arranca
     donde arranca el logo del encabezado, no 40 px más afuera). */
  :root .fam-hero__caja, :root .fam-top__cab, :root .fam-top__rejilla, :root .fam-top__pie,
  :root .fam-marcas, :root .promo-zona, :root .fam-cierre__caja,
  :root .pg-hero__caja, :root .pg-heroF__caja, :root .pg-cab, :root .pg-cierre__caja,
  :root .dis-rejilla, :root .dis-benef__lista, :root .dis-pasos__lista, :root .sop-rejilla,
  :root .blog-caja, :root .faq-caja, :root .pd-wrap {
    max-width: var(--e-caja); padding-left: var(--e-canal); padding-right: var(--e-canal);
    margin-left: auto; margin-right: auto; box-sizing: border-box;
  }
  /* El catálogo de cada familia (el relleno viene escrito en el HTML). */
  :root body > div > div[style*="max-width:1400px"] {
    max-width: var(--e-caja) !important; padding-left: var(--e-canal) !important; padding-right: var(--e-canal) !important;
  }
  /* Cajas que son tarjetas dentro del contenido: su orilla es la del contenido. */
  :root .dis-espera, :root .sop-limites__caja { max-width: var(--e-ancho); }

  /* /nx600 y /conocenos: la sección trae los 24 px de canal y adentro una
     caja de 1,180. A 1,272. */
  :root .hero-inner, :root .pricing-banner-inner, :root .section-inner, :root .cn-hero__inner { max-width: var(--e-ancho); }
  :root .nxp__rejilla.section-inner { max-width: var(--e-caja); padding-left: var(--e-canal); padding-right: var(--e-canal); }

  /* Portada: lo más vendido, promociones y financiamiento iban a 1,180
     (el título de Promociones 46 px a la derecha de sus tarjetas). */
  :root .prod-avance, :root .promos-avance, :root #promos-section .promos-cab { max-width: none; margin-left: 0; margin-right: 0; }
  :root #financiamiento .container { max-width: var(--e-caja); }
  /* La ficha de la toma (abajo a la derecha) cerraba en la caja de 1,400. */
  @media (min-width: 960px) {
    :root .portada__ficha { right: max(var(--e-canal), calc((100% - var(--e-caja)) / 2 + var(--e-canal))); }
  }
  /* Las seis familias de abajo: la primera etiqueta en la orilla del texto. */
  :root .portada__fams { padding-inline: max(0px, calc((100% - var(--e-caja)) / 2)); }
  :root .portada__fam { padding-left: var(--e-canal); padding-right: var(--e-canal); }
  /* La raya turquesa de la familia al aire iba de orilla a orilla de su
     casilla, y las casillas de las puntas salen un canal (24 px) de la
     columna: la de «01» empezaba 24 px antes que todo lo demás (6-oct-2026,
     «se ve descuadrado»). Ahora va sobre la etiqueta, en la columna. */
  :root .portada__fam i { left: var(--e-canal); right: var(--e-canal); }

  /* ── 2 · Títulos: una sola escala ───────────────────────────────────── */
  /* Los títulos de sección iban de 28 a 52 px según la página (48 en la
     portada con interlineado de 1.6: «Llegamos a todo / México, y rápido»
     se leía como dos títulos), y los de la portada de cada página de 36 a
     58. Ahora: portada 72 (sin cambio), página 54, sección 40, cierre 48. */
  :root {
    --e-h1: clamp(36px, 2.6vw + 17px, 54px);
    --e-h2: clamp(30px, 1.6vw + 18px, 40px);
    --e-h2-cierre: clamp(34px, 2vw + 20px, 48px);
  }
  :root .fam-hero h1, :root .pg-hero h1, :root .pg-heroF h1, :root .nx-hero h1, :root #cn-title {
    font-size: var(--e-h1); line-height: 1.04; letter-spacing: -.03em;
  }
  :root #productos .section-title, :root #cobertura .section-title, :root #nosotros .nos-portada .section-title,
  :root #promos-section .promos-cab h2, :root #financiamiento .financing-title, :root .cd__titulo,
  :root .nx-section-title, :root #pricing-title, :root .fam-top__cab h2, :root .fam-marcas__cab h2, :root .pg-cab h2 {
    font-size: var(--e-h2); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance;
  }
  :root .cierre-cab .cta-title, :root .climax h2 { font-size: var(--e-h2-cierre); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }

  /* ── 3 · Todo a la orilla izquierda ─────────────────────────────────── */
  /* Portada · lo más vendido: la nota iba centrada debajo de un título a la
     izquierda, y «Ver todos los productos» centrado. */
  :root #productos .products-header { margin-bottom: 14px; }
  :root #productos .cotiza-nota { text-align: left; margin: 0 0 26px !important; max-width: none; }
  :root #productos div:has(> .view-all-btn) { text-align: left !important; }
  :root #productos .view-all-btn { margin: 28px 0 0 !important; }
  /* Financiamiento: los dos botones de abajo, «Cómo funciona» y el alcance
     iban centrados bajo un título a la izquierda. */
  :root .eq-otras { justify-content: flex-start; }
  :root #financiamiento .fin-pasos__t, :root #financiamiento .fin-alcance { text-align: left; }
  /* Marcas: el pie del carrusel de logos. */
  :root .mq__pie { text-align: left; }

  /* /nx600 y /conocenos: la entrada de «Qué puedes correr», «El cambio
     real», «Es para tu laboratorio», «Cuatro tipos de laboratorio» y la nota
     de la ficha iban centradas bajo títulos a la izquierda. */
  :root .menu-note { text-align: left; margin-left: 0 !important; margin-right: 0 !important; }
  /* …menos en el cierre oscuro de /conocenos, que sí va centrado. */
  :root .climax .menu-note { text-align: center; margin-left: auto !important; margin-right: auto !important; }
  /* «Confían en NORLAB»: era la única sección centrada a media página. */
  :root .trust, :root .trust .section-lead, :root .trust .mq__pie { text-align: left; }
  :root .trust .section-lead { margin-left: 0 !important; margin-right: 0 !important; }
  :root .trust .nx-section-title { text-align: left; }
  :root .trust-stats { margin-left: 0 !important; margin-right: 0 !important; justify-items: start; text-align: left; }
  :root .trust-stats > * { text-align: left; }
}

/* Los carruseles de la portada: con el contenido a 1,272 caben cuatro
   productos y tres promociones completos; el siguiente se asoma por la
   derecha. (El 100 % es el ancho del contenido: la pista sale hasta la
   orilla de la pantalla con su relleno, ver movimiento.js.) */
@media (min-width: 768px) {
  /* Las tarjetas de una fila, de la misma altura: el height:100% de la
     tarjeta no se puede resolver dentro de la pista y le quitaba el
     estiramiento (609, 616 y 653 px lado a lado). Los botones, al pie. */
  :root #productos #products-grid > .feat-card { height: auto; }
  :root #productos .feat-card .product-content { flex: 1 1 auto; }
  :root #productos .feat-card .product-footer { margin-top: auto; }
  /* El nombre completo: «Panel multidrogas 5 parámetros THC/ COC/ AM…». */
  :root #productos .feat-card .product-title { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; max-height: none; }
}
@media (min-width: 1024px) {
  :root #productos.carrusel-listo .feat-card { flex-basis: calc((100% - 48px) / 4); }
  :root #promos-section.carrusel-listo .promo-pieza { flex-basis: calc((100% - 32px) / 3); }
}
/* …pero desde 1,024 px no se asoma nada fuera del ancho del contenido.
   David, 6-oct-2026, en una pantalla de ~2,500 px: «se ve descuadrado». La
   pista sale hasta la orilla de la pantalla y ahí asomaban dos tarjetas y
   media a la derecha, con el margen izquierdo vacío. Ahora el carrusel
   empieza y termina en las mismas orillas que el encabezado, el título y las
   flechas, a cualquier ancho. Se recorta (clip-path) en vez de quitar el
   relleno: movimiento.js mide --orilla para que las flechas avancen lo que
   cabe completo. Los 8 px de más dejan ver la sombra de las tarjetas de la
   orilla; la siguiente tarjeta empieza 16 px afuera y no se asoma. En la
   tableta y el teléfono la pista sigue asomándose: ahí se arrastra con el
   dedo. */
@media (min-width: 1024px) {
  :root #productos.carrusel-listo #products-grid,
  :root #promos-section.carrusel-listo #promos-grid.promos-mosaico {
    clip-path: inset(-24px calc(var(--orilla, 16px) - 8px) -24px calc(var(--orilla, 16px) - 8px));
  }
}

/* La promoción del NX600: título, texto y botón a la izquierda; las dos
   formas de pago a la derecha (todo iba centrado en una columna de 840). */
@media (min-width: 768px) {
  :root .pricing-banner, :root .pricing-banner-inner { text-align: left; }
  :root .pricing-banner-inner > p, :root .pricing-banner-inner > .pricing-options { margin-left: 0 !important; margin-right: 0 !important; }
  :root .pricing-banner div[style*="text-align:center"] { text-align: left !important; }
}
@media (min-width: 1280px) {
  /* Cada tarjeta necesita 348 px (la cifra a 44 px): la columna de la
     derecha mide 744 y la de la izquierda lo que sobra. */
  :root .pricing-banner-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) 744px; column-gap: 56px; align-items: center;
  }
  :root .pricing-banner-inner > * { grid-column: 1; justify-self: start; }
  :root .pricing-banner-inner > .pricing-options { grid-column: 2; grid-row: 1 / span 5; max-width: none; width: 100%; justify-self: stretch; }
}

/* ── 4 · El encabezado: una sola barra de 64 px desde 768 px ─────────────
   Desde 1,280 px es la barra con las siete familias (cabecera.css, antes
   desde 1,281). Entre 768 y 1,279 px quedaba el encabezado viejo: 102 px de
   alto, el logo de 70 px y un buscador de 280 px; a 768, las etiquetas de
   «Mi Cuenta» y «Mi lista» a 10.5 px debajo del icono. Ahora es la misma
   barra (logo de 38 px, botones de 44) con las familias en el menú. */
@media (min-width: 768px) and (max-width: 1279px) {
  html.cab-una .header { padding: 10px 0 !important; }
  html.cab-una .header .logo-img, html.cab-una .header .logo img { height: 38px !important; width: auto !important; }
  html.cab-una .header .header-content { gap: 12px; }
  html.cab-una .header .header-content .header-btn {
    flex-direction: row; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  }
  html.cab-una .header .header-content .header-btn i { font-size: 18px; }
  html.cab-una .header .header-content .cart-btn span:not(.cart-badge) { display: block; font-size: 14px; letter-spacing: 0; line-height: 1.2; }
  html.cab-una .header .header-catalogo { min-height: 44px; padding: 10px 14px; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* El buscador se queda a la vista (sin las familias sobra lugar). A 768
     se escondía (y en el menú no hay buscador): la tableta no podía buscar. */
  html.cab-una .header .search-box { display: block !important; }
  html.cab-una .header .search-box { flex: 1 1 auto; max-width: 440px; }
  html.cab-una .header .search-box input { height: 44px; padding: 0 16px 0 44px; font-size: 14px; border-radius: 10px; border-width: 1px; }
  html.cab-una .header .search-box i { left: 16px; font-size: 16px; }
}
@media (min-width: 768px) {
  /* Todo lo que se toca en la barra mide 44 px (los enlaces medían 42 y el
     logo 36). */
  html.cab-una .header .logo { min-height: 44px; align-items: center; }
  html.cab-una .cab-nav .nav-list > .nav-item > .nav-link { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; }
  html.cab-una .header .header-catalogo { min-height: 44px; box-sizing: border-box; }
  html.cab-una .header .header-content .header-btn { min-height: 44px; box-sizing: border-box; }
  /* Las etiquetas que se esconden («Mi Cuenta», «Catálogo Digital») se
     quedan para el lector de pantalla: con display:none el botón se
     quedaba sin nombre. */
  html.cab-una .header .header-content .header-btn:not(.cart-btn) span,
  html.cab-una .header .header-catalogo span {
    display: block !important; position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  html.cab-una .header .header-btn, html.cab-una .header .header-catalogo { position: relative; }
}
@media (min-width: 1440px) {
  /* A 1440 y más, «Catálogo Digital» sí se lee. */
  html.cab-una .header .header-catalogo span {
    position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
  }
}

/* ── 5 · El pie ─────────────────────────────────────────────────────────
   · Los títulos de las columnas iban 23 px adentro para alinearse con un
     icono que no se ve (la flechita sólo salía con el mouse encima): a
     1024 px «SOLUCIONES» quedaba 23 px a la derecha del logo de arriba.
     Sin el hueco invisible, columna y título arrancan en la misma orilla.
   · De 768 a 1,199 px eran dos columnas desparejas (logo + Productos,
     Soluciones + Empresa y Contacto sola) y a 768 el pie del teléfono viejo,
     centrado con los enlaces a la izquierda. Ahora: la marca en un renglón
     y las cuatro listas en cuatro columnas.
   · El aviso del envío iba a 11 px, OXXO a 10.5 y 7-Eleven a 11. */
@media (min-width: 768px) {
  :root .footer .footer-column h4 { padding-left: 0; text-align: left; }
  :root .footer .footer-column a > i { display: none; }
  :root .footer .footer-column a { gap: 0; justify-content: flex-start; text-align: left; }
  :root .footer .legal-envio { font-size: 12px; }
  :root .footer .legal-envio sup { font-size: 12px; }
  :root .footer-payment .nl-tarj--oxxo, :root .footer-payment .nl-tarj--seven { font-size: 12px; }
}
@media (min-width: 1200px) {
  /* De 1,200 a 1,280 px nav.css dejaba el pie en dos columnas (2 + 2 + 1):
     las cinco, como de 1,281 en adelante. */
  :root .footer .footer-content { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  :root .footer .footer-content {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 30px 24px !important;
    text-align: left !important;
  }
  :root .footer .footer-brand {
    grid-column: 1 / -1; padding: 0 0 28px; margin: 0; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end;
  }
  :root .footer .footer-logo { grid-column: 1 / -1; text-align: left; margin-bottom: 16px; }
  :root .footer .footer-logo img { margin: 0 !important; max-width: 220px; height: auto; }
  :root .footer .footer-desc { margin: 0; max-width: 60ch; text-align: left; }
  :root .footer .footer-social { justify-content: flex-start !important; margin: 0; }
  :root .footer .footer-column { text-align: left; padding: 0; border: 0; }
  :root .footer .footer-column ul { padding: 0; }
  :root .footer .footer-bottom {
    display: flex; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start !important; align-items: center !important;
    text-align: left !important; gap: 12px 24px !important;
  }
  :root .footer .footer-links { justify-content: flex-start !important; }
  :root .footer .footer-payment { justify-content: flex-start !important; flex: 1 1 100%; }
}

/* Con el dedo (tableta, iPad en cualquier ancho): las listas de enlaces —el
   pie, el índice de /faq— van de 44 px por renglón. Con mouse se quedan
   compactas: David pidió el pie corto en escritorio (30-jul, «el footer se
   me hace eterno»); ahí cada enlace mide 24 px con 26 de paso. */
@media (min-width: 768px) and (pointer: coarse) {
  :root .footer .footer-column li { margin: 0; }
  :root .footer .footer-column a { display: flex; width: 100%; min-height: 44px; align-items: center; line-height: 1.35; padding: 0; }
  :root .footer .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
  :root .footer .footer-social a { width: 44px; height: 44px; }
}
@media (min-width: 768px) and (pointer: fine) {
  :root .footer .footer-social a { width: 44px; height: 44px; }
}

/* ── 6 · Ningún texto de menos de 12 px ─────────────────────────────────
   Medido a 1440 px: 1,980 renglones en /reactivos, 482 en toxicología, 307
   en consumibles, 288 en pruebas rápidas, 151 en equipos, 88 en
   veterinaria, 39 en /nx600, 19 en la portada, 16 en /faq. Casi todos son
   las etiquetas de las tarjetas del catálogo (marca a 10 px, presentación a
   11 y SKU a 10.5) y las etiquetas en mayúsculas (11-11.5). */
@media (min-width: 768px) {
  /* Catálogo de las familias (el estilo lo escribe catalog.v5.js en cada
     tarjeta; el navegador lo guarda como «font-size: 10px», con espacio). */
  :root #catalog-grid [data-ficha] [style*="font-size: 10px"],
  :root #catalog-grid [data-ficha] [style*="font-size: 10.5px"],
  :root #catalog-grid [data-ficha] [style*="font-size: 11px"] { font-size: 12px !important; }
  :root .cat-grupo h3, :root .cat-ficha b { font-size: 12px; }
  :root .fam-prod__rank, :root .fam-prod__marca { font-size: 12px; }
  :root .promo-zona__t, :root .promo-pieza__sku { font-size: 12px; }
  /* Portada */
  :root .portada__fam b, :root .portada__ficha-n, :root .portada__ojo, :root .portada__cifras small { font-size: 12px; }
  :root #promos-section .promos-cab__ojo, :root .cierre-tel__ojo { font-size: 12px; }
  :root .eq__salto { font-size: 12px; }
  :root .eq__dato b > i, :root .eq__dato-t { font-size: 12px; }
  :root .header .cart-btn .cart-badge { font-size: 12px !important; }
  /* /nx600 y /conocenos */
  :root .section-tag, :root .menu-panel .cuenta, :root .crosssell-card .tag, :root .nx-hero-stat .lbl,
  :root .nxc__fila small, :root .price-card .lbl, :root .pricing-option .lbl-top, :root .vs-col .sub,
  :root .badge-promo, :root .hero-video-cap, :root .pricing-banner-tag, :root .pricing-option .ribbon { font-size: 12px; }
  /* /faq y /blog */
  :root .faq-chip b, :root .blog-chip b, :root .faq-indice__grupo, :root .faq-indice__t, :root .faq-grupo__t { font-size: 12px; }
  /* «Mi lista» (lista.js escribe el estilo en cada renglón) */
  html #nl-panel-items [style*="font-size: 10px"], html #nl-panel-items [style*="font-size: 10.5px"],
  html #nl-panel-items [style*="font-size: 11px"], html #nl-panel-items [style*="font-size: 11.5px"] { font-size: 12px !important; }
}

/* ── 7 · Todo lo que se toca, de 44 px ──────────────────────────────────
   Botones, fichas de filtro y controles: 44 px en cualquier ancho (había
   de 16 a 42). */
@media (min-width: 768px) {
  :root .eq__salto { width: 44px; height: 44px; }
  /* «Saltar al contenido» (sólo con teclado) medía 38 px; en el teléfono ya
     tenía 44 (movil.css). Visto en producción el 5-oct. */
  :root .nl-skip { min-height: 44px; display: inline-flex; align-items: center; }
  /* Familias: miga de pan, «Ver ficha», «Agregar a mi lista», el buscador,
     las fichas de filtro y el nombre de cada tarjeta. */
  :root .fam-hero__miga { gap: 2px; }
  :root .fam-hero__miga a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  :root .fam-prod__nom a { display: inline-flex; align-items: center; min-height: 44px; }
  :root .fam-prod__ir { min-height: 44px; }
  :root .fam-prod__add { min-height: 44px; }
  :root .cat-ficha { min-height: 44px; align-items: center; }
  :root .cat-limpiar { min-height: 44px; }
  :root #catalog-search { min-height: 44px; }
  :root div:has(> #catalog-search) { padding-top: 4px !important; padding-bottom: 4px !important; }
  :root #catalog-grid [data-ficha] h3 a { display: block; flex: 1 1 100%; min-width: 0; min-height: 44px; }
  /* /faq y /blog: las fichas de filtro medían 34 px; «Abrir el catálogo…» 22. */
  :root .faq-chip, :root .blog-chip { min-height: 44px; align-items: center; }
  :root .faq-item__ir { display: inline-flex; align-items: center; min-height: 44px; }
  /* /nx600: «Haz la cuenta» (etiquetas de 23 px y el control de 28) y el
     correo del cierre (17 px). */
  :root .nxc__campo label, :root .nxc__campo .nxc__lbl { min-height: 44px; align-items: center; }
  :root .nxc__campo input[type="range"] { height: 44px; }
  :root .climax-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  /* /conocenos: las ligas de la ficha del almacén (17-22 px). */
  :root .cn-ficha__ir { display: inline-flex; align-items: center; min-height: 44px; }
  :root dl dd a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Ficha de producto: «Volver a…» (22 px) y la miga de pan (16 px). */
  :root .pd-back { display: inline-flex; align-items: center; min-height: 44px; }
  :root .pd-breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* «Mi lista»: cantidades y «Quitar» de 32 px. */
  html #nl-panel-items button { min-width: 44px !important; min-height: 44px !important; }
  html #nl-panel-items a { display: inline-flex; align-items: center; min-height: 44px; }
  html #nl-panel-pie button { min-height: 44px !important; }
  /* El menú del teléfono vive fuera de la pantalla: cerrado no se debe
     poder tabular hacia él, y desde 1,280 px no hay botón que lo abra. */
  html body #mobileMenu:not(.active) { visibility: hidden !important; transition: transform var(--mov-medio, 200ms) var(--curva, ease), visibility 0s linear var(--mov-medio, 200ms) !important; }
  html body #mobileMenu.active { visibility: visible !important; transition: transform var(--mov-medio, 200ms) var(--curva, ease), visibility 0s !important; }
}
@media (min-width: 1280px) {
  html body #mobileMenu, html body #mobileOverlay, html body .mobile-menu-overlay { display: none !important; }
}
@media (min-width: 768px) and (pointer: coarse) {
  /* Con el dedo, también las listas de enlaces: el índice de /faq. */
  :root .faq-indice a { display: flex; align-items: center; min-height: 44px; }
}

/* ── 8 · El botón flotante de WhatsApp, nunca encima de algo ────────────
   A 1440 px tapaba un texto o un botón en 12 de 24 paradas de la portada
   (la banda de familias al cargar, las tarjetas de lo más vendido, las
   promociones, el pie) y en 4 de 5 de la ficha de producto. Mismo trato
   que en el teléfono (/js/movil.js, ahora en todos los anchos): no sale
   con otro botón de WhatsApp a la vista ni con «Mi lista» abierta, y si al
   detenerse quedaría encima de un texto o un botón, se hace a un lado. */
@keyframes escritorio-flota-red { to { opacity: 1; visibility: visible; } }
@media (min-width: 768px) {
  :root .whatsapp-float:not(.flota-lista),
  :root .float-wa:not(.flota-lista) {
    opacity: 0; visibility: hidden;
    animation: escritorio-flota-red 0s linear 2.5s forwards;
  }
  :root .whatsapp-float.flota-lista,
  :root .float-wa.flota-lista {
    transition: opacity .22s ease, transform .22s cubic-bezier(.22, .8, .2, 1), visibility 0s;
  }
  :root .whatsapp-float.flota-aparte,
  :root .float-wa.flota-aparte {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(16px) scale(.86);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
}

/* ── 9 · Familias, servicios, /nx600 y la ficha ─────────────────────────── */
@media (min-width: 768px) {
  /* La promoción ancha de una sola pieza (reactivos, toxicología, equipos)
     iba centrada bajo su etiqueta a la izquierda. */
  :root .promo-ancha { margin-left: 0; margin-right: auto; }
  /* /blog: el resumen de cada artículo se cortaba a tres renglones con
     puntos suspensivos (12 a 1440 px). Completo; la fecha se queda al pie
     de la tarjeta y las de cada fila miden lo mismo. */
  :root .soro-blog-card-excerpt { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset; overflow: visible !important; }
  :root .blog-mas { text-align: left; }
  /* /faq: las respuestas corrían hasta 99 caracteres por renglón. */
  :root .faq-lista { max-width: 42em; }
}

/* /nx600 · «Qué puedes correr»: ocho tarjetas en columnas de periódico
   (cada una de su alto, la segunda fila escalonada). En rejilla: cuatro por
   fila desde 1,100 px y dos antes; las de cada fila, del mismo alto. */
@media (min-width: 768px) {
  :root .menu-grid { display: grid; columns: auto; column-gap: 16px; row-gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  :root .menu-grid > .menu-panel { margin: 0; break-inside: auto; }
}
@media (min-width: 1100px) {
  :root .menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* /nx600 · «Así se usa» (cuadro fijo, ver nx-pieza.css): la escena era un
   cuadrado de 620 px centrado en una pantalla entera, con 64 px de reserva
   para el encabezado aunque el encabezado ya se hubiera ido. A 1920×1080
   quedaban 238 px vacíos arriba y abajo de la escena todo el recorrido; a
   1440, 203 px al entrar y al salir. Ahora el cuadro se pega DEBAJO del
   encabezado (en vez de reservarle relleno) y la escena crece con la
   pantalla. */
@media (min-width: 768px) {
  :root .nxp--vivo .nxp__fijo {
    top: var(--nxp-cab, 0px); height: calc(100vh - var(--nxp-cab, 0px)); height: calc(100svh - var(--nxp-cab, 0px));
    padding-top: 0;
  }
}
@media (min-width: 900px) {
  :root .nxp__rejilla { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  :root .nxp--vivo .nxp__rejilla { padding-top: 0; padding-bottom: 0; }
  :root .nxp--vivo .nxp__escena { width: min(100%, 760px, calc(100svh - var(--nxp-cab, 0px) - 48px)); }
}
@media (min-width: 768px) and (max-width: 899px) {
  :root .nxp--vivo .nxp__escena { width: min(100%, 58svh); }
}
@media (min-width: 1600px) and (min-height: 1000px) {
  /* Pantallas altas y anchas (1920×1080): la escena centrada en el cuadro
     dejaba 225 px vacíos al entrar y al salir. La escena toma el 70 % de la
     fila y crece hasta 880 px; el texto (tres pasos cortos) cabe en el 30. */
  :root .nxp__rejilla { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); }
  :root .nxp--vivo .nxp__escena { width: min(100%, 880px, calc(100svh - var(--nxp-cab, 0px) - 48px)); }
}

/* Portada · financiamiento: los datos de cada equipo («10 µL de muestra»,
   «128 pruebas por hora», «40 laminillas…») quedaban 2 arriba y 1 abajo en
   cualquier ancho de escritorio. Uno por renglón: se leen como la lista de
   lo que trae el equipo. */
@media (min-width: 768px) {
  :root .eq__chips { flex-direction: column; align-items: flex-start; }
}

/* ── 10 · Rejillas parejas ──────────────────────────────────────────────
   Ninguna fila con una pieza suelta: medido de 768 a 1920 px. */
@media (min-width: 1024px) {
  /* Portada · los cinco pilares (stock, precio, envío…): a 1024 y 1280 iban
     3 + 2 con una celda gris vacía. Los cinco en una fila. */
  :root #marcas .pilares { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  /* /nx600 y /conocenos · los cuatro perfiles: a 1024 eran 3 + 1. */
  :root .perfiles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* En la tableta, los pilares en una lista: icono a la izquierda, título y
     texto al lado (eran 3 + 2 con una celda vacía). */
  :root #marcas .pilares { grid-template-columns: minmax(0, 1fr) !important; }
  :root #marcas .pilar { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; }
  :root #marcas .pilar__ico { grid-row: 1 / span 2; }
  :root .perfiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* /nx600 · las seis cifras de la ficha: 5 + 1 a 768. */
  :root .ficha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* /nx600 · garantía, distribuidor y entrega: 2 + 1 a 1024. Uno por renglón. */
  :root .hero-meta { flex-direction: column; gap: 8px; }
}

/* ── 11 · Detalles de la portada que también se veían en escritorio ─────
   (los mismos que David vio en su iPhone, arreglados ahí el 5-oct). */
@media (min-width: 768px) {
  /* «Servicio» + «al cliente» en otro renglón y en chiquito: un solo título
     como los otros cuatro pilares. */
  :root .pilar h3 small { display: inline; font-size: inherit; font-weight: inherit; color: inherit; margin: 0 0 0 .26em; }
  /* La «o» suelta entre las tres vías y el teléfono se leía como un
     circulito: separador «— o —» del ancho de la tarjeta del teléfono. */
  :root .cierre-tel-o {
    display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
    font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: none; color: rgba(255, 255, 255, .6);
  }
  :root .cierre-tel-o::before, :root .cierre-tel-o::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .16); }
}

/* ── 12 · Privacidad y términos ─────────────────────────────────────────
   El banner iba centrado y el texto en una columna de 800 px centrada: era
   la única página con el título al centro. Ahora el título arranca en la
   orilla de todo el sitio y la columna de lectura (800 px, ~75 caracteres
   por renglón) también. */
@media (min-width: 768px) {
  :root .page-hero { text-align: left; }
  :root .page-hero h1 { font-size: var(--e-h1); line-height: 1.08; letter-spacing: -.03em; }
  :root .page-hero p { margin-left: 0 !important; margin-right: 0 !important; }
  :root .page-content > .container {
    max-width: calc(800px + 2 * var(--e-canal));
    margin-left: max(0px, calc((100% - var(--e-caja)) / 2)); margin-right: auto;
  }
}

/* ── 13 · La tableta (768 a 1,023 px) ───────────────────────────────────
   768 px exactos caían en las reglas viejas de «max-width: 768px» (pensadas
   para teléfono, antes de movil.css): canal de 16 px, el título de lo más
   vendido a la derecha, el catálogo en dos columnas con los filtros
   escondidos tras un botón, el pie centrado. Aquí 768 se ve como 769. */
@media (min-width: 768px) {
  :root #productos .products-header { flex-direction: row; align-items: flex-end; text-align: left; }
  :root #productos .products-header > div:first-child, :root #productos .section-title { text-align: left; }
  :root #productos .feat-card { border-radius: 20px; }
  :root #productos .feat-card .product-title { font-size: 16px; line-height: 1.4; }
  :root #financiamiento .financing-desc { font-size: 18px; line-height: 1.8; }
  :root .cierre-cab .cta-desc { font-size: 20px; line-height: 1.7; }
  html.cab-una .header .cart-btn span:not(.cart-badge) { font-weight: 600; }
  /* El catálogo de las familias: la barra de filtros abierta y la rejilla
     de 220 px por columna (a 768 eran dos columnas y un botón «Filtros»). */
  :root #mob-filter-btn { display: none !important; }
  :root .cat-filtros--plegable .cat-barra { display: flex !important; }
  :root .cat-filtros { padding: 16px 18px 14px; }
  :root .cat-filtros--plegable .cat-resumen { margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEF3F7; }
  :root #catalog-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
  /* El pie: el relleno de escritorio (a 769-820 px eran 100 px arriba). */
  :root .footer { padding: 56px 0 24px !important; }
  :root .footer .footer-bottom { padding-top: 22px !important; }
}

/* Conjuntos fijos de cuatro (perfiles, servicios, vías de contacto, la
   ficha del almacén, lo que pedimos al distribuidor): con columnas de
   «lo que quepa» quedaban 3 + 1 a 1024 px. Cuatro por fila desde 1024 y
   dos por fila en la tableta. Los tres pasos del alta, siempre tres. */
@media (min-width: 1024px) {
  :root .dis-rejilla, :root .sop-rejilla, :root .cn-contacto, :root .cn-ficha__grid--2, :root .dis-espera ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root .dis-rejilla, :root .sop-rejilla, :root .cn-contacto, :root .cn-ficha__grid--2, :root .dis-espera ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  :root .dis-pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Flechas del carrusel de promociones de las familias: 42 px. */
  :root .promo-zona__flecha { width: 44px; height: 44px; }
}

/* El menú de la hamburguesa (tableta y hasta 1,279 px): cerrar, el logo y
   el teléfono y el correo de abajo medían 36-40 px; los iconos iban
   pegados al nombre (mismo arreglo que en el teléfono). */
@media (min-width: 768px) and (max-width: 1279px) {
  :root #mobileMenuClose { width: 44px; height: 44px; }
  :root .mobile-menu-header .logo { min-height: 44px; display: inline-flex; align-items: center; }
  :root .mobile-menu-contact .mobile-contact-item { min-height: 44px; }
  :root .mobile-nav-link > span > i:first-child { display: inline-block; width: 22px; margin-right: 8px; text-align: center; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* El cierre de la portada: las tres vías una junto a otra (en la tableta
     iban apiladas, cada tarjeta de 720 px para dos renglones de texto). */
  :root .cierre-vias { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ── 14 · Imágenes sin estirarse ────────────────────────────────────────
   La foto del BioSSays 240 Plus mide 460 px y la pasarela la ampliaba a
   606 (1.3×, borrosa). scale-down: nunca más grande que su archivo; las que
   sí son grandes (NX600, DF55) se ven igual que antes. */
@media (min-width: 768px) {
  :root .eq__foto { object-fit: scale-down; }
}

/* ── 15 · La página 404 ─────────────────────────────────────────────────
   La tarjeta iba centrada a lo alto: a 1440×900 quedaban 220 px vacíos
   arriba (y 270 a 1920×1080). Sube al centro óptico (un poco arriba). */
@media (min-width: 768px) {
  :root body:has(> .caja) { align-items: flex-start; padding-top: clamp(48px, 15vh, 170px); }
}