/* ═══════════════════════════════════════════════════════════════════════════
   TELÉFONO · todo el sitio (5-oct-2026, rama movil-perfecto)
   ─────────────────────────────────────────────────────────────────────────
   David, desde su iPhone: «la versión móvil se ve muy mal, no centradas,
   etc. Revisa bien que quede a la perfección».

   Todo lo de aquí vive dentro de @media (max-width: 767px): escritorio y
   tableta no leen una sola regla. Es la ÚLTIMA hoja del <head> en las 17
   páginas (la pone scripts/movil-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).

   La regla de alineación (DESIGN.md § Teléfono):
     · Un solo canal: 20 px a cada lado en todas las páginas. Antes había
       10, 12, 16, 20, 24 y 28 según la sección.
     · Todo arranca en la orilla izquierda del canal: etiqueta, título,
       entrada, listas, tarjetas, cifras y el pie. Se centra SÓLO el cierre
       oscuro (la llamada final de la portada, /nx600 y /conocenos).
     · Los botones de acción van a todo lo ancho del canal, uno debajo del
       otro: ni centrados a medias ni sueltos a la izquierda.
     · Cifras en rejilla pareja: las tres en una fila. Nunca dos arriba y
       una sola abajo.
     · Ningún texto menor de 12 px; nada que se toque mide menos de 44 px.

   Lo que se mueve con JavaScript en el teléfono vive en /js/movil.js (el
   botón flotante de WhatsApp y el pie plegable) y en /js/portada.js (la
   pasarela de equipos sin tramo de scroll).
   ═══════════════════════════════════════════════════════════════════════════ */

/* La red del botón flotante: si movil.js no carga, sale a los 2.5 s. */
@keyframes movil-flota-red { to { opacity: 1; visibility: visible; } }

@media (max-width: 767px) {

  /* ── 1 · El canal ───────────────────────────────────────────────────── */
  :root { --canal: 20px; }
  :root .container { padding-left: var(--canal); padding-right: var(--canal); }
  /* El encabezado: la imagen del logo trae 8 px de aire a la izquierda, así
     que la caja va a 12 para que la TINTA quede en el canal; a la derecha, el
     botón de «Mi lista» es una caja llena y va en el canal exacto. */
  :root .header > .container { padding-left: 12px; padding-right: var(--canal); }
  :root .footer > .container { padding-left: var(--canal); padding-right: var(--canal); }

  /* Titulares sin una palabra sola en el último renglón. */
  :root h1, :root h2, :root h3 { text-wrap: balance; }

  /* ── 2 · Encabezado y menú ──────────────────────────────────────────── */
  /* «Mi Cuenta» y «Mi lista» medían 10.5 px. */
  :root .header-content .header-btn span { font-size: 12px; letter-spacing: 0; }
  :root .header-content .header-btn { padding: 6px 7px; min-width: 52px; min-height: 48px; }
  :root .header-content .header-actions { gap: 4px; }
  :root .header-content .cart-btn .cart-badge { font-size: 12px !important; }
  /* El menú cerrado vivía justo fuera de la pantalla y su sombra se metía
     20 px por la orilla derecha: una franja gris en todas las páginas. */
  html #mobileMenu:not(.active) { box-shadow: none !important; }
  /* 100vh en Safari es la pantalla SIN la barra de abajo: el pie del menú
     (WhatsApp) quedaba detrás de ella. */
  html #mobileMenu { height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important; }
  :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; }
  /* Los iconos del menú iban pegados al nombre («✎Pruebas Rápidas») y cada
     uno de un ancho: los nombres no arrancaban en la misma línea. */
  :root .mobile-nav-link > span > i:first-child { display: inline-block; width: 22px; margin-right: 8px; text-align: center; }
  /* «Saltar al contenido» (sólo con teclado) */
  :root .nl-skip { min-height: 44px; display: inline-flex; align-items: center; }

  /* ── 3 · El pie ─────────────────────────────────────────────────────── */
  /* Uno solo para todas las páginas, el de la portada: a la izquierda («es
     una lista, no un poema»), con los grupos plegables (movil.js) y
     Contacto abierto. En las demás páginas iba centrado, con los enlaces a
     la izquierda y casi tres pantallas de alto. */
  :root .footer { padding: 44px 0 24px; }
  :root .footer .footer-content {
    display: grid; grid-template-columns: 1fr !important; gap: 0 !important;
    text-align: left !important; margin-bottom: 22px !important;
  }
  :root .footer .footer-brand {
    text-align: left; margin: 0 0 26px; padding: 0 0 26px; border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  :root .footer .footer-logo { text-align: left; margin-bottom: 16px; }
  :root .footer .footer-logo img { margin: 0 !important; max-width: 200px !important; }
  :root .footer .footer-desc { margin: 0 0 18px; font-size: 14px; line-height: 1.6; text-align: left; }
  :root .footer .footer-social { justify-content: flex-start !important; gap: 12px; }
  :root .footer .footer-social a { width: 44px; height: 44px; }
  :root .footer .footer-column { border-top: 1px solid rgba(255, 255, 255, .1); padding: 0; margin: 0; text-align: left; }
  :root .footer .footer-brand + .footer-column { border-top: 0; }
  :root .footer .footer-column h4 {
    margin: 0; padding: 0; min-height: 52px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 14px; letter-spacing: .12em; text-align: left;
  }
  :root .footer .footer-column ul { margin: 0; padding: 0 0 12px; }
  :root .footer .footer-column li { margin: 0; }
  :root .footer .footer-column a {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0;
    font-size: 15px; line-height: 1.4; text-align: left; justify-content: flex-start;
  }
  :root .footer .footer-column a:hover { padding-left: 0; }
  /* Las flechitas sólo se veían con el mouse encima: en el teléfono eran un
     hueco invisible de distinto ancho en cada renglón. */
  :root .footer .footer-column a > i.fa-chevron-right { display: none; }
  /* Contacto: los iconos se ven y miden lo mismo, así el texto de los cuatro
     renglones arranca en la misma línea (antes: 12, 9, 12 y 12 px). */
  :root .footer .footer-column a > i:not(.fa-chevron-right) {
    flex: 0 0 18px; width: 18px; text-align: center; font-size: 15px; opacity: .7;
  }
  :root .footer .footer-bottom {
    display: flex; flex-direction: column; align-items: flex-start !important;
    text-align: left !important; gap: 14px !important; padding-top: 22px;
  }
  :root .footer .legal-envio { font-size: 12px; line-height: 1.55; opacity: .75; margin: 0; text-align: left; }
  :root .footer .legal-envio sup { font-size: 12px; }
  :root .footer .footer-copyright { font-size: 13px; text-align: left; }
  :root .footer .footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; justify-content: flex-start !important; }
  :root .footer .footer-links a { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
  :root .footer .footer-payment {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    justify-content: flex-start !important; padding-right: 0;
  }
  :root .footer .footer-payment > span { font-size: 13px; }
  /* Seis medios de pago: en dos filas parejas de tres (tarjetas arriba,
     transferencia y efectivo abajo). Antes 4 + 2 o 5 + 1 según el ancho. */
  :root .footer .footer-payment-icons { display: grid; grid-template-columns: repeat(3, 74px); gap: 8px; justify-content: flex-start; }
  :root .footer .footer-payment-icons .nl-tarj { width: 100%; min-width: 0; padding: 0 6px; box-sizing: border-box; }
  :root .footer-payment .nl-tarj--oxxo,
  :root .footer-payment .nl-tarj--seven { font-size: 12px; }
}

/* El pliegue (mismo corte que la portada: 760 px). La clase la pone movil.js
   (o financiamiento-v2.js en la portada): sin script, todo queda abierto. */
@media (max-width: 760px) {
  :root .footer.pie-plegable .footer-column--plegable h4 { cursor: pointer; user-select: none; }
  :root .footer.pie-plegable .footer-column--plegable h4::after {
    content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
    border-right: 2px solid rgba(255, 255, 255, .5); border-bottom: 2px solid rgba(255, 255, 255, .5);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--mov-medio, 200ms) cubic-bezier(.23, 1, .32, 1);
  }
  :root .footer.pie-plegable .footer-column--plegable[data-abierto="1"] h4::after { transform: rotate(-135deg) translateY(-2px); }
  :root .footer.pie-plegable .footer-column--plegable ul {
    display: grid; grid-template-rows: 0fr; grid-auto-rows: 0fr;
    transition: grid-template-rows var(--mov-medio, 200ms) cubic-bezier(.23, 1, .32, 1), grid-auto-rows var(--mov-medio, 200ms) cubic-bezier(.23, 1, .32, 1);
  }
  :root .footer.pie-plegable .footer-column--plegable[data-abierto="1"] ul { grid-template-rows: 1fr; grid-auto-rows: 1fr; }
  :root .footer.pie-plegable .footer-column--plegable ul li { overflow: hidden; min-height: 0; }
  :root .footer.pie-plegable .footer-column--plegable[data-abierto="0"] ul { padding-bottom: 0; }
  :root .footer.pie-plegable .footer-column--plegable[data-abierto="0"] ul li a { min-height: 0; padding-block: 0; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  :root .footer.pie-plegable .footer-column--plegable ul,
  :root .footer.pie-plegable .footer-column--plegable h4::after { transition: none; }
}

@media (max-width: 767px) {

  /* ── 4 · El botón flotante de WhatsApp ─────────────────────────────── */
  /* movil.js decide cuándo sale (nunca encima de un texto, de un botón,
     del menú o de «Mi lista»). Mientras no arranca, espera escondido; si
     nunca arranca, la animación lo saca a los 2.5 s. */
  :root .whatsapp-float, :root .float-wa { z-index: 1250; }
  :root .whatsapp-float:not(.flota-lista),
  :root .float-wa:not(.flota-lista) {
    opacity: 0; visibility: hidden;
    animation: movil-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;
  }

  /* ── 5 · Mi lista ───────────────────────────────────────────────────── */
  /* La barra de abajo partía «3 productos en tu lista · Los mandas todos en
     un solo mensaje» en seis renglones y medía 129 px. Un renglón. */
  html #nl-barra { left: 12px; right: 12px; bottom: 12px; gap: 8px; padding: 10px 10px 10px 16px; }
  html #nl-barra > div:first-child { display: none !important; }
  html #nl-barra-cuenta { font-size: 14px !important; line-height: 1.25; }
  html #nl-barra-cuenta + div { display: none; }
  html #nl-barra button { padding: 0 12px !important; font-size: 13.5px !important; flex: none; }
  /* El panel: cantidades y «Quitar» de 32 px; marca a 10 px y SKU a 11. */
  html #nl-panel-items button { min-width: 44px !important; min-height: 44px !important; }
  /* (el navegador guarda el estilo escrito por JS como «font-size: 10px»,
     con espacio: así hay que buscarlo) */
  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; }
  html #nl-panel-items a { display: inline-flex; align-items: center; min-height: 44px; }
  html #nl-panel-pie button { min-height: 48px !important; }
  html #nl-panel { height: 88vh; height: 88dvh; }

  /* ── 6 · Portada ────────────────────────────────────────────────────── */
  /* Arriba: etiqueta, cifras y ficha medían 11-11.5 px. */
  :root .portada__ojo { font-size: 12px; letter-spacing: .12em; }
  :root .portada__ficha-n { font-size: 12px; }
  :root .portada__cifras small { font-size: 12px; }
  /* Con el canal de 20 px «Tu laboratorio surtido» ya no cabía en un renglón
     y el titular crecía a tres: «Ver productos» se salía de la primera
     pantalla. 6 % más chico y se queda en dos renglones de 360 a 430 px. */
  :root .portada__titulo { font-size: clamp(30px, 8.8vw, 46px); }
  :root .portada__ctas { flex-direction: column; }
  :root .portada__cta { width: 100%; }

  /* Lo más vendido: la etiqueta y el título quedaban a la derecha y la nota
     centrada (columna con align-items:flex-end de portada.css). Todo al
     canal; las flechas se van, como en Promociones: en el teléfono se
     desliza con el dedo y la barra de abajo dice cuánto falta. */
  :root #productos .products-header { flex-direction: column; align-items: stretch !important; gap: 0; text-align: left; }
  :root #productos .products-header > div:first-child { text-align: left; }
  :root #productos .products-header .section-title { text-align: left; }
  :root #productos .prod-ctl { display: none !important; }
  :root #productos .cotiza-nota { text-align: left; margin: 10px 0 16px !important; max-width: none; }
  :root #productos .view-all-btn { display: flex; width: 100%; justify-content: center; margin: 18px 0 0 !important; box-sizing: border-box; }
  :root #productos .view-all-btn + *, :root #productos div:has(> .view-all-btn) { text-align: left; }

  /* Promociones: la etiqueta medía 11.5 px y el SKU 10.5. */
  :root #promos-section .promos-cab__ojo { font-size: 12px; }
  :root .promo-pieza__sku { font-size: 12px; }

  /* Financiamiento: sin tramo de scroll en el teléfono (portada.js pone
     .eq--toque; las reglas de la pasarela viven en portada.css). Aquí sólo
     tamaños: 01 · 02 · 03 medían 34 px y las cifras de abajo 10-11 px. */
  :root .eq__salto { width: 44px; height: 44px; font-size: 13px; }
  :root .eq__dato b > i { font-size: 12px; }
  :root .eq__dato-t { font-size: 12px; }
  :root .eq__cotiza { width: 100%; justify-content: center; }
  :root .eq__acc { flex-direction: column; align-items: stretch; }
  :root .eq__ver { align-self: flex-start; }

  /* Nosotros: las tres cifras en una fila (antes 2 arriba y 1 sola abajo). */
  :root #nosotros .nos-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 18px 0; }
  :root #nosotros .nos-cifra { padding-left: 14px; border-left: 1px solid #E2E8F0; border-top: 0; padding-top: 0; grid-column: auto; }
  :root #nosotros .nos-cifra:first-child { padding-left: 0; border-left: 0; }
  :root #nosotros .nos-cifra:nth-child(3) { padding-left: 14px; border-left: 1px solid #E2E8F0; border-top: 0; padding-top: 0; grid-column: auto; }
  :root #nosotros .nos-cifra strong { font-size: 26px; }
  :root #nosotros .nos-cifra span { font-size: 12.5px; line-height: 1.35; }

  /* Marcas: «Servicio» + «al cliente» en otro renglón y en chiquito. Un
     solo título. Y los cinco pilares en una columna en TODOS los teléfonos
     (a 412 y 430 px eran dos columnas: 2 + 2 + 1 suelto). */
  :root .pilar h3 small { display: inline; font-size: inherit; font-weight: inherit; color: inherit; margin: 0 0 0 .26em; }
  :root .pilares { grid-template-columns: 1fr !important; }
  :root .mq__pie { text-align: left; }

  /* Catálogo digital: el botón a todo lo ancho. */
  :root .cd__cta { display: flex; width: 100%; justify-content: center; box-sizing: border-box; }

  /* Cierre: es la llamada final y SÍ va centrado. La «o» entre las tres
     vías y el teléfono era una letra suelta de 12 px: se leía como un
     circulito. Ahora es un separador «— o —». */
  :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); }
  :root .cierre-tel__ojo { font-size: 12px; }
}

@media (max-width: 767px) {

  /* Financiamiento: «Cómo funciona» y el alcance iban centrados entre
     títulos y pasos a la izquierda. */
  :root #financiamiento .fin-pasos__t,
  :root #financiamiento .fin-alcance { text-align: left; }

  /* ── 7 · Las seis familias (el CSS vive en scripts/familias_css.py) ─── */
  /* El canal: el banner iba a 20, lo más pedido y el cierre a 24, las
     marcas a 16 y el catálogo a 24 (con el relleno escrito en el HTML). */
  :root .fam-hero__caja { padding-left: var(--canal); padding-right: var(--canal); }
  :root .fam-top__cab, :root .fam-top__rejilla, :root .fam-top__pie,
  :root .fam-cierre__caja, :root .fam-marcas,
  :root .promo-zona, :root #promo-zona-piezas { padding-left: var(--canal); padding-right: var(--canal); }
  :root body > div[style*="background:#F4F7FA"] > div[style*="padding:0 24px"] { padding-left: var(--canal) !important; padding-right: var(--canal) !important; }
  /* La miga de pan: enlaces de 18 px de alto. */
  :root .fam-hero__miga { margin-bottom: 10px; }
  :root .fam-hero__miga a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  /* Cifras del banner: las tres en una fila pareja, de orilla a orilla. */
  :root .fam-hero__cifras { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px 12px; }
  /* Lo más pedido: el rótulo, la marca y «Ver ficha» medían 10.5-12.5 px;
     «Agregar a mi lista» 40 px de alto y «Ver ficha» 20. */
  :root .fam-prod__rank { font-size: 12px; }
  :root .fam-prod__marca { font-size: 12px; }
  :root .fam-prod__add { min-height: 44px; }
  :root .fam-prod__ir { min-height: 44px; font-size: 13.5px; }
  /* En la 2.ª y 3.ª tarjeta el rótulo («3.º MÁS PEDIDO») va arriba a la
     derecha y una marca larga («VITAL SCIENTIFIC») se metía debajo de él. La
     marca baja un renglón y deja libre esa esquina. */
  :root .fam-prod:not(.fam-prod--1) .fam-prod__cuerpo { padding-top: 30px; }
  :root .fam-prod--1 .fam-prod__acciones { flex-direction: column; align-items: stretch; gap: 4px; }
  :root .fam-prod--1 .fam-prod__add { width: 100%; justify-content: center; }
  :root .fam-prod--1 .fam-prod__ir { align-self: flex-start; }
  /* «Dinos qué necesitas y te cotizamos» y el cierre: a todo lo ancho. */
  :root .fam-top__pie { flex-direction: column; align-items: stretch; }
  :root .fam-top__cta { width: 100%; justify-content: center; min-height: 48px; }
  :root .fam-cierre__caja { flex-direction: column; align-items: stretch; gap: 20px; }
  :root .fam-cierre__cta { width: 100%; justify-content: center; }
  /* El catálogo: tarjetas con marca a 10 px, presentación a 11 y SKU a 10.5. */
  :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 #catalog-search { min-height: 44px; }
  /* El nombre de cada tarjeta es un enlace de 18-35 px de alto. */
  /* (el <h3> de la tarjeta es flex: el enlace va a lo ancho, sin desbordarse) */
  :root #catalog-grid [data-ficha] h3 a, :root .fam-prod__nom a { display: block; flex: 1 1 100%; width: 100%; min-width: 0; min-height: 44px; }
  :root .promo-zona__t { font-size: 12px; }
  :root .cat-grupo h3, :root .cat-ficha b { font-size: 12px; }
  :root .cat-ficha { min-height: 44px; align-items: center; }
  :root .cat-limpiar { min-height: 44px; }

  /* ── 8 · Páginas de servicio: faq, soporte, distribuidores, blog ───── */
  /* (el CSS vive en scripts/paginas_css.py) */
  :root .pg-hero__caja, :root .pg-heroF__caja, :root .pg-cab, :root .pg-cierre__caja,
  :root .faq-caja, :root .blog-caja, :root .dis-rejilla, :root .dis-benef__lista,
  :root .dis-pasos__lista, :root .sop-rejilla, :root .sop-limites__caja { padding-left: var(--canal); padding-right: var(--canal); }
  /* Las cifras del banner en una fila que va de orilla a orilla del canal
     (en tres columnas iguales «Naucalpan» no cabía y se montaba en la de al
     lado). */
  :root .pg-heroF__cifras { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px 12px; }
  :root .pg-cifra b { font-size: 23px; }
  /* Los filtros en una sola fila que se desliza (antes 2 + 2 + 1 y
     2 + 2 + 1 + 1 + 1 renglones de píldoras de 34 px). */
  :root .faq-chips, :root .blog-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--canal)); padding: 2px var(--canal) 4px; scroll-padding-inline: var(--canal);
  }
  :root .faq-chips::-webkit-scrollbar, :root .blog-chips::-webkit-scrollbar { display: none; }
  :root .faq-chip, :root .blog-chip { flex: none; min-height: 44px; align-items: center; white-space: nowrap; }
  :root .faq-chip b, :root .blog-chip b { font-size: 12px; }
  :root .faq-grupo__t { font-size: 12px; }
  :root .faq-item__ir { display: inline-flex; align-items: center; min-height: 44px; }
  :root .pg-cierre__acc { flex-direction: column; align-items: stretch; width: 100%; }
  /* Beneficios de /distribuidores: columnas de 320 px como mínimo; en un
     teléfono de menos de 360 px se salían de la pantalla. Una columna. */
  :root .dis-benef__lista { grid-template-columns: minmax(0, 1fr); }
  :root .pg-btn { width: 100%; justify-content: center; }

  /* ── 9 · /nx600 y /conocenos (CSS en su propio <style>) ─────────────── */
  /* Todo a la izquierda menos el cierre oscuro (.climax): el bloque de la
     promoción, «El cambio real», el menú de pruebas y «Confían en NORLAB»
     iban centrados entre secciones alineadas a la izquierda. */
  :root .pricing-banner, :root .trust, :root .menu-note, :root .hero-video-cap,
  :root .pricing-fine, :root .trust .section-lead, :root .trust .mq__pie { text-align: left; }
  :root .menu-note, :root .trust .section-lead { margin-left: 0 !important; margin-right: 0 !important; }
  :root .pricing-banner { padding-left: var(--canal); padding-right: var(--canal); }
  :root .pricing-banner div[style*="text-align:center"] { text-align: left !important; }
  :root .pricing-banner div[style*="text-align:center"] > a { display: flex !important; justify-content: center; width: 100%; box-sizing: border-box; }
  :root .nx-hero-ctas, :root .climax-ctas { flex-direction: column; align-items: stretch; }
  :root .nx-hero-ctas .nx-btn, :root .nx-hero-ctas .btn,
  :root .climax-ctas .btn, :root .climax-ctas .nx-btn { width: 100%; max-width: none; justify-content: center; box-sizing: border-box; }
  :root .climax .nx-btn, :root .climax .btn-wa { width: 100%; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
  :root .nxc__entrada .nx-btn, :root .nxc .btn-wa { width: 100%; text-align: center; }
  /* Letra chica: 10-11.5 px en etiquetas y cifras. */
  :root .badge-promo, :root .price-card .lbl, :root .nx-hero-stat .lbl, :root .pricing-banner-tag,
  :root .pricing-option .lbl-top, :root .pricing-option .ribbon, :root .section-tag,
  :root .menu-panel .cuenta, :root .nxc__fila small, :root .vs-col .sub, :root .crosssell-card .tag,
  :root .hero-video-cap { font-size: 12px; }
  /* Las tres fichas del banner: a 12 px en mayúsculas «PARÁMETROS» no cabe
     en un tercio de pantalla y empujaba «min» a otro renglón. Mismo texto,
     en minúsculas como las cifras de la portada. */
  :root .nx-hero-stat .lbl { text-transform: none; letter-spacing: 0; }
  /* Las dos opciones de precio: la cifra no debe empujar la tarjeta fuera
     de la pantalla en los teléfonos chicos. */
  :root .pricing-options { grid-template-columns: minmax(0, 1fr); }
  /* Ficha técnica y «Haz la cuenta»: columnas «1fr» que no bajan de su
     contenido; en teléfonos de menos de 360 px se salían 7 px. */
  :root .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .nxc__caja { grid-template-columns: minmax(0, 1fr); }
  /* «Así se usa»: las tres cifras del último cuadro quedaban 2 + 1. */
  :root .nxp__datos { gap: 6px; flex-wrap: nowrap; left: 8px; right: 8px; }
  :root .nxp__dato { padding: 8px 10px; }
  :root .nxp__dato b { font-size: 16px; }
  :root .nxp__dato span { font-size: 12px; }
  /* «Haz la cuenta»: las etiquetas medían 23 px y el control 28. */
  :root .nxc__campo label, :root .nxc__campo .nxc__lbl { min-height: 44px; align-items: center; margin-bottom: 4px; }
  :root .nxc__campo input[type="range"] { height: 44px; }
  :root .climax-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  /* /conocenos: las cuatro cifras sin aire entre renglones; ligas de 17-22 px. */
  :root .cn-cifras { row-gap: 18px; }
  :root .cn-ficha__ir { min-height: 44px; display: inline-flex; align-items: center; }
  :root dl dd a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── 10 · La ficha de producto ─────────────────────────────────────── */
  :root .pd-wrap { padding-left: var(--canal); padding-right: var(--canal); }
  :root .pd-back { min-height: 44px; margin-bottom: 12px; }
  :root .pd-breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  :root .pd-breadcrumb { row-gap: 0; }

  /* ── 11 · Privacidad y términos ───────────────────────────────────── */
  :root .page-hero { text-align: left; padding: 40px 0 34px; }
  :root .page-hero p { margin: 0; }
  :root .page-card { padding: 24px 20px; }
}

/* Teléfonos de menos de 360 px (iPhone SE de primera generación y Android
   chicos): el encabezado no cabía y «Mi lista» quedaba cortado en la orilla;
   la cifra de los precios del NX600 se salía de su tarjeta. */
@media (max-width: 359px) {
  :root .header .logo-img { width: 112px !important; height: auto !important; }
  :root .header-content .header-btn { min-width: 44px; padding: 6px 4px; }
  :root .pricing-option { padding: 24px 18px; }
  :root .pricing-option .amount { font-size: 30px; }
  :root .spec-card { padding: 22px 12px; }
  :root .nxc__entrada, :root .nxc__salida { padding: 20px 14px; }
  :root .nxc__entrada > *, :root .nxc__dias > * { min-width: 0; }
  :root .nxc__dias span { min-width: 48px; padding: 0 8px; }
}