/* ==========================================================================
   tuNFC · capa móvil (1-nov-2026, tarea P3)
   Se carga la ÚLTIMA (header.php), después del bundle, portada.css y nfc.css,
   así que gana la cascada sin tocar ni regenerar tunfc.bundle*.css.

   Qué resuelve:
   1. Ancho de layout de 608 px en un viewport de 430. Medido en Chromium
      (iPhone 15 Pro Max): lo ensanchaban img.pv-hero__tarjeta (520 px) y
      a.pv-producto__imagen (600 px), hijos de rejillas con columnas 1fr (mínimo
      auto = ancho intrínseco). Las rejillas de la portada fijan minmax(0,1fr) y
      sus hijos min-width:0. La marquesina nace con basis 0 como refuerzo.
      html/body usan overflow-x:clip (no hidden): clip no crea contenedor de
      scroll, así que position:sticky del header sigue funcionando.
   2. Áreas seguras (viewport-fit=cover está en header.php).
   3. Flotante del chat con safe-area y apilado sobre la barra de compra.
   4. Toques >= 44x44 px.
   NO TOCA /r/<código> (r.php no carga esta hoja).
   ========================================================================== */

/* ── 1. ANCHO ─────────────────────────────────────────────────────────── */
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; }

.topbar, .topbar__inner { min-width: 0; max-width: 100%; }
.topbar__left.marquee { flex: 1 1 0; min-width: 0; max-width: 100%; overflow: clip; }
.marquee__vista { contain: paint; }
.topbar__whatsapp { flex: 0 0 auto; }

.pv-hero__rejilla,
.pv-partido,
.pv-productos,
.pv-pasos { grid-template-columns: minmax(0, 1fr); }
/* Pasos del distribuidor con foto: dos por fila en el celular (12-nov). */
.pv-venta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-venta > * { min-width: 0; }
@media (min-width: 900px) {
  .pv-hero__rejilla { grid-template-columns: 1.05fr .95fr; }
  .pv-partido { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 860px) { .pv-productos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) {
  .pv-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-venta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pv-hero__rejilla > *, .pv-partido > *, .pv-productos > *, .pv-pasos > * { min-width: 0; }
.pv h1, .pv h2, .pv h3, .pv p, .pv li { overflow-wrap: anywhere; }

/* ── 2. ÁREAS SEGURAS ─────────────────────────────────────────────────── */
.topbar__inner,
.header__container {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.header { padding-top: env(safe-area-inset-top, 0px); }
.header__mobile-nav {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}
.footer-premium__bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* ── 3. FLOTANTE DEL CHAT (abajo a la derecha) ────────────────────────── */
.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, calc(10px + env(safe-area-inset-bottom, 0px)));
}
/* Con la barra fija de compra visible (producto), el flotante sube sobre ella
   en lugar de taparla o taparle el botón. ~72 px = alto de .barra-compra. */
body:has(.barra-compra.is-visible) .wa-float {
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
}
.wa-bubble-sm { min-width: 56px; min-height: 56px; }
.barra-compra {
  padding-left: max(14px, env(safe-area-inset-left, 0px));
  padding-right: max(14px, env(safe-area-inset-right, 0px));
}

/* ── 4. TOQUES >= 44 px ───────────────────────────────────────────────── */
.header__hamburger,
.header__cart,
.header__btn-store {
  min-width: 44px;
  min-height: 44px;
}
.header__hamburger { width: 44px; height: 44px; }
.header__cart { display: inline-flex; align-items: center; justify-content: center; position: relative; }

/* Pausa de la marquesina: el círculo visual sigue de 26 px (::after) dentro
   de un área táctil de 44x44. */
.marquee__pausa {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.marquee__pausa::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1px solid var(--outline-variant);
  border-radius: 50%;
  pointer-events: none;
}
.marquee__pausa::before { position: relative; z-index: 1; }
.marquee { gap: 0; }

.header__desktop-nav a,
.header__mobile-nav a,
.topbar__whatsapp,
.footer-premium__column a,
.footer-premium__social a,
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.header__mobile-nav a { display: flex; }
.footer-premium__social a { justify-content: center; min-width: 44px; }

.pv-faq summary { min-height: 44px; align-items: center; }

/* Muestras de color de la portada: punto de 26 px dentro de un toque de 44. */
.pv-muestras:not(.pv-muestras--disenos) a {
  width: 44px;
  height: 44px;
  padding: 9px;
  background-clip: content-box !important; /* el color va en style="background:" y su shorthand reinicia el clip */
  box-shadow: none;
}
.pv-muestras--disenos a { min-width: 44px; min-height: 44px; }

.pv-btn, .btn, button.btn { min-height: 44px; }
.mini-diseno { min-height: 44px; }

/* Tocar fuera: sin retraso de doble toque y sin resaltado gris de iOS. */
a, button, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* Página de gracias (13-nov-2026): el enlace del pedido se cortaba por los lados en el celular.
   .gracias-card es hijo flex de .gracias-wrap; el código de confirmación (64 caracteres sin
   espacios) le subía el ancho mínimo hasta su max-width de 540 px y la tarjeta se salía del
   viewport. La tarjeta ocupa el ancho disponible y el valor de cada dato puede partirse. */
.gracias-card { width: 100%; min-width: 0; }
.gracias-datos > div { gap: 12px; }
.gracias-datos > div > span:last-child { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.gracias-card input[type="file"] { max-width: 100%; min-width: 0; }