/* ══════════════════════════════════════════════════════════════════════
   MOVIL.CSS · Bio·Peptides · la capa del teléfono
   ══════════════════════════════════════════════════════════════════════

   Por qué existe este archivo
   ───────────────────────────
   La tienda se diseñó para un monitor y el teléfono la recibía «apilada»:
   las mismas piezas, en fila, con una hamburguesa de diez entradas y el
   botón de comprar a pie y medio de scroll. Funcionaba, pero se notaba que
   no se había pensado para el pulgar.

   Esto son las piezas que sí se piensan para el pulgar:

     · una barra inferior fija con los cinco destinos que importan
     · una cabecera de 56 px que se esconde al bajar y vuelve al subir
     · un botón pegajoso con la acción principal de cada pantalla
     · el pago por pasos, uno por pantalla
     · tipografía y espacios medidos para 375 px

   Reglas de la casa
   ─────────────────
   1. TODO va dentro de `@media (max-width:640px)`. Lo poco que queda fuera
      son las reglas que ESCONDEN en escritorio las piezas que solo existen
      para el teléfono. Así el escritorio no cambia ni un píxel.
   2. Va enlazada DESPUÉS de bp.css y del <style> de cada página, para ganar
      la cascada sin repartir !important. Donde lo lleva es porque la regla
      contra la que compite ya lo llevaba.
   3. Nada de sombras ni radios nuevos en los <style> de las páginas:
      `prueba-diseno.js` los cuenta. Aquí viven los del teléfono.
   4. Los valores de tipografía y tacto son los del encargo: H1 26/1.2/600,
      H2 20/1.25/600, cuerpo 16/1.55, rótulos 12 en versalitas con .05em,
      precio 20/700 con cifras tabulares, margen lateral 16, secciones a 28,
      tarjetas con radio 14 y sombra 0 1px 3px, y 44 px para cualquier cosa
      que se toque.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Lo que solo existe en el teléfono, escondido en escritorio ────────
   Se esconde por clase y no con `hidden`: `[hidden]` lleva !important en
   todas las páginas y no habría forma de volver a mostrarlo desde aquí. */
.bpnav, .bpmas, .bpsheet, .bpsheet-ov, .bpcta.solo-movil, .paddtxt,
.cart-cta, .pg-progreso, .pg-atras { display: none; }

@media (max-width: 640px) {

  /* ── Medidas compartidas ─────────────────────────────────────────── */
  :root {
    --bp-barra: 56px;                              /* alto de la barra inferior */
    --bp-safe: env(safe-area-inset-bottom, 0px);   /* la franja del gesto de iOS */
    --bp-cta-alto: 72px;                           /* botón de 52 + sus márgenes */
    --bp-ink: #172336;
    --bp-sec: #5c6d85;
    --bp-linea: #cdd6e3;
    --bp-fondo: #eef2f7;
    --bp-acento: #3a66a3;
    --bp-sombra: 0 1px 3px rgba(13, 34, 64, .06);
  }

  /* El cuerpo deja sitio a la barra; si además hay botón pegajoso, a los
     dos. `!important` porque index.html trae `body{padding-bottom:74px}`
     en una consulta de 760 px que ganaría por orden. */
  body { padding-bottom: calc(var(--bp-barra) + var(--bp-safe)) !important; }
  body.bp-cta-on { padding-bottom: calc(var(--bp-barra) + var(--bp-cta-alto) + var(--bp-safe)) !important; }
  /* En el pago no hay barra: el botón pegajoso la sustituye. */
  body.bp-sin-barra { padding-bottom: calc(var(--bp-cta-alto) + 28px + var(--bp-safe)) !important; }

  /* ── Tipografía y espacio para 375 px ────────────────────────────── */
  body { font-size: 16px; line-height: 1.55; color: var(--bp-ink); }
  h1, .h1, .pagehead h1, .fname2, .ok-wrap h1 {
    font-size: 26px !important; line-height: 1.2 !important; font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
  h2, .stitle, .labband h2, .verbox h2, .ctcard h3, .card h2 {
    font-size: 20px !important; line-height: 1.25 !important; font-weight: 600 !important;
  }
  /* Rótulos en versalitas: 12 px y .05em. bp.css ya sube el tamaño con
     !important; aquí solo se ajusta el espaciado al valor del encargo. */
  .kick, .pcat, .fcat, .fszlabel, .lablogos-t, .cattag, .mn-t, .pg-paso-txt,
  .fmetabox .l, .vfield .l, .cc-niv-t, .bpsheet-t {
    font-size: 12px !important; letter-spacing: .05em !important; text-transform: uppercase;
  }
  /* Precios: 20/700 y cifras tabulares, para que «$190» y «$1.045» no
     bailen de ancho en una lista. */
  .pprice .pv, .citprice, .csumrow.tot, .labpur .p, .total .vl, .tot-chip, .lvl .tot {
    font-size: 20px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums;
  }
  .fprice { font-size: 24px !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
  .wrap2, .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .sec { padding: 28px 0 !important; }
  .sechead { margin-bottom: 20px; }
  .slead, .hsub, .pagehead p, .lead, .sub { font-size: 16px; line-height: 1.55; }
  /* Tarjetas: radio 14 y una sombra sola, la misma en todas. */
  .pcard, .catcard, .scicard, .tb, .labcard, .fbuybox, .fbene, .ctcard, .verbox,
  .buyband, .labcert, .acacard, .gatecard, .card, .lvl, .ctacuenta, .guiacta, .disc {
    border-radius: 14px !important; box-shadow: var(--bp-sombra);
  }
  /* Deshabilitados: la regla de la casa. El motivo lo pone el texto del
     propio botón («Preparando el pago…»), no un tono de gris. */
  .btn[disabled], button[disabled] {
    opacity: .4 !important; background: #f1f5f9 !important; color: var(--bp-ink) !important;
    box-shadow: none !important; cursor: not-allowed;
  }
  /* En el teléfono nada depende del hover: no hay ratón que pase por
     encima. Se anulan los desplazamientos «al pasar» para que un toque no
     mueva la tarjeta antes de abrirla. */
  .pcard:hover, .catcard:hover, .labcard:hover, .btn:hover, .paddbtn:hover,
  .borja-card:hover { transform: none !important; box-shadow: var(--bp-sombra) !important; }
  .pcard:hover .pimg img, .catcard:hover .catfoto img { transform: none !important; }

  /* ── Cabecera compacta de 56 px ──────────────────────────────────── */
  /* Portada (`.hdr`). A ≤1100 px estaba en `position:relative` porque el
     desplegable colgaba de ella; en el teléfono ese desplegable ya no se
     usa —lo sustituye el sheet de «Más»—, así que puede volver a pegarse. */
  /* Se esconde moviendo `top`, NO con transform: un transform (o un
     will-change) en la cabecera convierte a la cabecera en el marco de
     referencia de todo `position:fixed` que lleve dentro, y dentro vive el
     menú de la cuenta, que en el teléfono es una hoja fija al fondo de la
     pantalla. Con transform, esa hoja se pegaba al fondo de la cabecera. */
  .hdr {
    position: sticky !important; top: 0; z-index: 40;
    transition: top .22s ease;
  }
  .hdrin { height: 56px !important; gap: 8px !important; }
  /* La franja de arriba, a una línea: solo el envío gratis. */
  .annc { padding: 7px 12px; font-size: 11px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .annc-mas { display: none; }
  .bplogo { height: 26px !important; }
  /* La hamburguesa y el icono de «verificar lote» ceden el sitio: lo que
     había detrás vive ahora en «Más» y en la barra de abajo. */
  .navtog, .iconbtn.ic-ver { display: none !important; }
  .nav { display: none !important; }
  /* El botón «Más»: 44 px de alto, texto y tres puntos. */
  .bpmas {
    display: inline-flex; align-items: center; gap: 5px; min-height: 44px; min-width: 44px;
    padding: 0 10px 0 8px; border-radius: 11px; color: var(--navy, #0d2240);
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px;
  }
  .bpmas svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .bpmas:active { background: var(--bg2, #e3edfa); }
  /* Se esconde al bajar y reaparece al subir. La clase la pone un scroll
     de diez líneas; sin JavaScript la cabecera simplemente se queda. */
  body.hdr-oculta .hdr, body.hdr-oculta .top { top: -64px; }
  /* Páginas sueltas (`.top`: pago y cuenta). */
  .top {
    position: sticky; top: 0; z-index: 40; min-height: 56px; padding: 6px 16px !important;
    flex-wrap: nowrap !important; transition: top .22s ease;
  }
  .top .brand { font-size: 13px !important; }
  .top .top-volver, .top .top-sep { display: none; }

  /* ── Barra de navegación inferior ────────────────────────────────── */
  .bpnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    height: calc(var(--bp-barra) + var(--bp-safe)); padding-bottom: var(--bp-safe);
    background: #fff; border-top: 1px solid #e2e8f0;
  }
  .bpnav a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; min-height: var(--bp-barra); padding: 0 2px;
    color: var(--bp-sec); text-decoration: none; -webkit-tap-highlight-color: transparent;
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; line-height: 1;
    white-space: nowrap;
  }
  .bpnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bpnav a.on { color: var(--bp-acento); font-weight: 600; }
  .bpnav a.on svg { stroke-width: 2.1; }
  /* Con el carrito, el menú de la cuenta o el sheet abiertos, la barra
     sobra: son pantallas completas y ya tienen su propio cierre. */
  body.cart-open .bpnav, body.cart-open .bpcta { display: none; }

  /* Lo que flotaba abajo sube por encima de la barra. El lanzador del
     asistente se declara en una hoja que se carga al final del cuerpo,
     por eso aquí hace falta !important. */
  .toast { bottom: calc(var(--bp-barra) + 16px + var(--bp-safe)) !important; }
  /* Con el carrito abierto el aviso sube por encima de «Ir a pagar». */
  body.cart-open .toast { bottom: calc(var(--bp-cta-alto) + 30px + var(--bp-safe)) !important; }
  body .bpa-lanz { bottom: calc(var(--bp-barra) + 14px + var(--bp-safe)) !important; }
  body.bp-cta-on .bpa-lanz { bottom: calc(var(--bp-barra) + var(--bp-cta-alto) + 14px + var(--bp-safe)) !important; }
  body.bp-sin-barra .bpa-lanz { bottom: calc(var(--bp-cta-alto) + 40px + var(--bp-safe)) !important; }

  /* ── El sheet de «Más» ───────────────────────────────────────────── */
  .bpsheet-ov { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(13, 34, 64, .45); }
  /* `max-width:none` porque mejoras-globales.css recorta cualquier
     [role="dialog"] a `100vw - 24px` en el teléfono: el sheet salía con
     un hueco de 24 px por la derecha. */
  .bpsheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 66; max-width: none;
    background: #fff; border-radius: 16px 16px 0 0; padding: 6px 8px calc(12px + var(--bp-safe));
    max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 40px rgba(13, 34, 64, .3);
  }
  .bpsheet-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 4px 12px; }
  .bpsheet-t { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--bp-sec); }
  .bpsheet-x { width: 44px; height: 44px; border-radius: 10px; font-size: 26px; line-height: 1; color: var(--navy, #0d2240); display: flex; align-items: center; justify-content: center; }
  /* Cada fila es un objetivo de 48 px, con texto de lectura, sin versalitas. */
  .bpsheet .navlink {
    display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 12px;
    border-radius: 10px; border: 0; background: none; text-align: left; white-space: normal;
    font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 16px; color: var(--bp-ink);
  }
  .bpsheet .navlink.on { color: var(--bp-acento); font-weight: 600; background: var(--bg2, #e3edfa); }
  .bpsheet .navlink.navcuenta { color: var(--cta, #136f44); font-weight: 600; }
  /* La primera entrada de la cuenta lleva una línea encima: no es una
     sección de la tienda, es tuya. La clase la pone renderVals(). */
  .bpsheet .navlink.navcuenta-primera { border-top: 1px solid var(--bp-linea); border-radius: 0; margin-top: 6px; padding-top: 6px; }

  /* ── Botón pegajoso con la acción principal ──────────────────────── */
  .bpcta {
    position: fixed; left: 0; right: 0; z-index: 57;
    bottom: calc(var(--bp-barra) + var(--bp-safe));
    padding: 10px 16px; margin: 0 !important;
    background: linear-gradient(180deg, rgba(238, 242, 247, 0) 0%, var(--bp-fondo) 35%);
  }
  /* El de la ficha solo cuando el botón real de la ficha salió de la
     pantalla (`bp-cta-on` la pone el observador del bloque de móvil). */
  body.bp-cta-on .bpcta.solo-movil { display: block; }
  /* En el pago (sin barra) el botón va al fondo y absorbe la franja del gesto. */
  body.bp-sin-barra .bpcta {
    bottom: 0; padding-bottom: calc(10px + var(--bp-safe));
    background: rgba(238, 242, 247, .96); backdrop-filter: blur(8px); border-top: 1px solid #e2e8f0;
  }
  .bpcta-btn, .bpcta .btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100% !important; min-height: 52px !important; height: 52px; padding: 0 18px !important;
    border-radius: 12px !important; border: 0;
    font-family: 'Poppins', sans-serif !important; font-size: 16px !important; font-weight: 600 !important;
    line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bpcta-btn { background: var(--cta, #136f44); color: #fff; box-shadow: 0 8px 18px rgba(31, 157, 99, .28); }
  .bpcta-btn.wa { background: #25d366; color: #08331b; box-shadow: none; }
  .bpcta-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .bpcta-btn .sep { opacity: .7; font-weight: 500; }
  .bpcta .hint { display: none; }

  /* ── Portada: el hero ────────────────────────────────────────────── */
  /* Un titular, UNA frase de apoyo, UN botón. La segunda frase y el botón
     secundario siguen en el marcado para el escritorio y el buscador. */
  .heroin { padding: 28px 16px 64px !important; }
  .htag { margin-bottom: 14px; font-size: 11px; letter-spacing: .12em; padding: 6px 12px; }
  .hsub { margin: 12px 0 18px; max-width: none; }
  .hsub-mas { display: none; }
  .hctas .btn.bo { display: none; }
  .hctas .btn { width: 100%; min-height: 52px; font-size: 16px; border-radius: 12px; }
  .herofloat { display: none !important; }
  .hstats { margin-top: 20px; padding-top: 16px; gap: 10px 18px; }
  .hstat .v { font-size: 20px; }
  .hstat .k { font-size: 12px; }

  /* ── Tarjetas de producto ────────────────────────────────────────── */
  /* Dos columnas hasta 640 y una a partir de 420 (el corte lo lleva
     index.html en su propia consulta). La foto con proporción fija: el
     alto sigue al ancho de la tarjeta y la rejilla no da saltos. */
  .pgrid, .pgrid.cat5 { gap: 12px !important; }
  .pimg { height: auto !important; aspect-ratio: 1 / 1; }
  .pbody { padding: 12px 12px 12px; }
  .pname { font-size: 15px !important; font-weight: 600 !important; line-height: 1.2; margin: 4px 0; }
  .phook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .goalrow { margin-top: 8px; }
  /* Precio y botón en la misma fila: el botón ocupa lo que sobra y mide
     48 px de alto, que es lo que el pulgar necesita. */
  .pfooter { margin-top: 12px; gap: 8px; }
  .pprice { flex: none; min-width: 0; }
  .pprice .pl { font-size: 12px !important; }
  .prow { flex-wrap: wrap; gap: 4px 6px; }
  .pwas { font-size: 12px; }
  .paddbtn {
    flex: 1 1 auto; width: auto !important; height: 48px !important; min-height: 48px; min-width: 48px;
    padding: 0 12px; gap: 6px; border-radius: 12px;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: #fff;
  }
  .paddbtn svg { width: 18px; height: 18px; flex: none; }
  .paddbtn .paddtxt { display: inline; white-space: nowrap; }
  .paddbtn[style*="25d366"] .paddtxt { color: #0a3d1f; }

  /* ── Ficha de producto ───────────────────────────────────────────── */
  /* Las presentaciones como chips de 36 px en fila. El área que responde
     al toque se estira a 44 con un pseudoelemento: se ve fino, se pulsa
     ancho. */
  /* `minmax(0,1fr)` y no `1fr`: `1fr` es `minmax(auto,1fr)` y deja que un
     hijo ancho —la caja del COA, que es una fila flex sin envolver: sello
     «Lab tested in the USA» más botón «Ver certificado»— estire la columna
     entera a 373 px. Medido: la ficha ganaba 14 px de scroll lateral. */
  .fichawrap { grid-template-columns: minmax(0, 1fr) !important; }
  .finfo, .fgal { min-width: 0; }
  .fmetabox { flex-wrap: wrap; gap: 10px; }
  .fmetabox .btn { width: 100%; }
  .fsizes { gap: 8px; margin-bottom: 14px; }
  .fsz {
    position: relative; flex-direction: row; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px;
  }
  .fsz::before { content: ""; position: absolute; inset: -4px; }
  .fsz small { font-size: 12px; opacity: .85; }
  .fsz.on small { opacity: .9; }
  .fbuybox { padding: 14px !important; }
  .fbuyrow .btn { min-height: 52px; font-size: 16px; border-radius: 12px; }
  .fbenes { gap: 8px; }
  .fmeta { gap: 8px; }
  .fhook2 { font-size: 16px; line-height: 1.55; }

  /* ── El carrito: un botón, y luego las formas de pagar ──────────── */
  /* La caja de acción del carrito traía la garantía, el rótulo «Elige cómo
     pagar» y tres botones, todo a la vista y con scroll propio dentro del
     scroll del carrito. En el teléfono se enseña UN botón —«Ir a pagar»
     con el total— y las tres formas de pago aparecen al pulsarlo. Las
     funciones de pago son las mismas; solo cambia cuándo se ven. */
  .cartaction { max-height: none !important; overflow: visible !important; padding: 10px 16px calc(12px + var(--bp-safe)) !important; }
  .cartaction:not(.pagos-abiertos) > :not(.cart-cta) { display: none !important; }
  .cartaction.pagos-abiertos .cart-cta { display: none; }
  .cartaction.pagos-abiertos { max-height: 60dvh !important; overflow-y: auto !important; }
  .cart-cta { display: block; }
  .cartitems, .cartsummary, .shipbar { padding-left: 16px; padding-right: 16px; }
  .shipbar { margin-left: 16px; margin-right: 16px; }
  .carthead { padding-left: 16px; padding-right: 16px; }
  .qty button { width: 44px !important; height: 44px !important; }
  .cpaybtns .btn { min-height: 52px; font-size: 16px; border-radius: 12px; }

  /* ── El pago por pasos (pagar.html) ──────────────────────────────── */
  /* Indicador de progreso: tres segmentos y el nombre del paso. */
  .pg-progreso { display: block; margin: 0 0 14px; }
  .pg-segs { display: flex; gap: 6px; margin-bottom: 8px; }
  .pg-seg { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--bp-linea); }
  .pg-seg.on { background: var(--bp-acento); }
  .pg-seg.hecho { background: var(--navy, #0d2240); }
  .pg-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
  .pg-paso-txt { color: var(--bp-sec); font-family: 'Poppins', sans-serif; font-weight: 600; }
  /* «Atrás» es texto, no un botón: lo que pesa en la pantalla es Continuar. */
  .pg-atras {
    display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px 0 0;
    background: none; border: 0; color: var(--bp-acento); font: 600 15px 'Poppins', sans-serif; cursor: pointer;
  }
  .pg-atras[hidden] { display: none !important; }
  /* Un paso por pantalla: solo la tarjeta activa se pinta. Antes de que
     corra el JavaScript se ven las tres, que es el comportamiento de
     siempre y sirve de red. */
  body.pg-movil .card[data-paso] { display: none; }
  body.pg-movil .card[data-paso].pg-activo { display: block; }
  body.pg-movil .card h2 .n { display: none; }   /* el número ya lo dice el indicador */
  body.pg-movil h1 { margin-bottom: 2px; }
  body.pg-movil .lead { margin-bottom: 14px; }
  /* Campos: 48 px de alto y 16 px de letra —iOS amplía la página si son
     más pequeños—, etiquetas encima en versalitas. */
  body.pg-movil input:not([type="checkbox"]):not([type="radio"]), body.pg-movil select {
    min-height: 48px; padding: 12px 14px; font-size: 16px !important; border-radius: 12px;
    border-color: var(--bp-linea);
  }
  body.pg-movil label { font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--bp-sec); }
  body.pg-movil .hf { min-height: 48px; border-radius: 12px; border-color: var(--bp-linea); padding: 3px 8px; }
  body.pg-movil .hf iframe { height: 42px !important; }
  body.pg-movil .f { margin-bottom: 14px; }
  body.pg-movil .card { padding: 16px; margin-bottom: 14px; }
  /* Los datos guardados de la cuenta, ofrecidos con un toque. */
  .pg-guardados {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: #f4f8fd; border: 1px solid var(--bp-linea); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px;
    font-size: 14px; color: var(--bp-ink);
  }
  .pg-guardados .btn { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
  /* El botón pegajoso de Continuar / Pagar, con la letra pequeña de los
     términos solo en el último paso. */
  body.pg-movil .pg-cta .hint { display: none; }
  body.pg-movil.pg-ultimo .pg-cta .hint { display: block; font-size: 11px; margin: 6px 0 0; line-height: 1.4; }
  /* El resumen del pedido arriba, plegado: se abre con un toque de 48 px. */
  body.pg-movil .res summary { min-height: 48px; }
  body.pg-movil .res-card { margin-bottom: 12px; }

  /* ── Mi cuenta (cuenta.html) ─────────────────────────────────────── */
  body.pg-cuenta .wrap { padding-top: 14px; }
  /* `minmax(0,1fr)`: la tabla del historial pide 520 px de mínimo dentro de
     su caja con scroll, y con `1fr` a secas esa exigencia subía hasta la
     columna de la rejilla: la página entera medía 584 px y se arrastraba
     de lado. Medido antes de esta capa; aquí se corta. */
  body.pg-cuenta .grid { grid-template-columns: minmax(0, 1fr) !important; }
  body.pg-cuenta .grid > div { min-width: 0; }
  body.pg-cuenta input:not([type="checkbox"]):not([type="file"]), body.pg-cuenta select, body.pg-cuenta textarea {
    min-height: 48px; padding: 12px 14px; font-size: 16px !important; border-radius: 12px; border-color: var(--bp-linea);
  }
  /* `:not(.btn)`: «Cambiar foto» es un <label> vestido de botón y no debe
     salir en versalitas de 12 px. */
  body.pg-cuenta label:not(.btn) { font-family: 'Poppins', sans-serif; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--bp-sec); margin-top: 14px; }
  body.pg-cuenta .card { padding: 16px; margin-bottom: 14px; }
  body.pg-cuenta .btn { min-height: 48px; border-radius: 12px; font-size: 15px; }
  body.pg-cuenta .phb .btn { min-height: 44px; }
  body.pg-cuenta .lvl { padding: 18px 16px; }
  /* «Guardar cambios» siempre a mano: los tres bloques se guardan a la
     vez y el botón vivía al fondo del tercero. */
  body.pg-cuenta .bpcta { display: block; }
  body.pg-cuenta .bpcta .btn { width: 100%; min-height: 52px; font-size: 16px; }
  body.pg-cuenta .bpcta span { display: none; }

  /* ── La calculadora (calculadora.html) ───────────────────────────── */
  /* Se quedó fuera del rediseño de septiembre: no enlazaba esta hoja, tenía
     la cabecera de escritorio, no tenía barra abajo y las cinco pestañas
     eran una fila que no cabía en 390 px. Aquí se pone al día. Nada de lo
     que sigue toca una fórmula: la aritmética de la jeringa vive en
     jeringa.js y se comparte con el panel médico. Esto es presentación. */

  /* Cabecera compacta de 56 px: logotipo + «Ir a la tienda». El chip de la
     cuenta lo cuelga sesion-chip.js de `.hd .wrap`, igual que en las demás
     páginas, y `flex-wrap:nowrap` evita que salte a una segunda línea. */
  body.pg-calc .hd {
    position: sticky; top: 0; z-index: 40; padding: 0; transition: top .22s ease;
  }
  body.pg-calc .hd .wrap { min-height: 56px; flex-wrap: nowrap; gap: 8px; }
  body.pg-calc.hdr-oculta .hd { top: -64px; }
  /* «← Ir a la tienda» se queda en una línea y cede el ancho al chip. */
  body.pg-calc .hd a.tienda { flex: none; white-space: nowrap; }
  /* Incrustada en la tienda dentro de un iframe (`body.dentro`) la cabecera
     y la barra las pone la tienda: aquí saldrían por duplicado. */
  body.pg-calc.dentro .bpnav { display: none; }

  /* La entradilla: un titular y su frase, sin ocupar media pantalla. */
  body.pg-calc main { padding: 16px 0 40px; }
  body.pg-calc .intro { margin-bottom: 14px; }

  /* Las cinco pestañas: una tira que se desliza, con señal de que hay más.
     No se esconden ni se pliegan —son el índice de la herramienta—, así que
     lo que se arregla es que se vea que continúan. */
  body.pg-calc .tabs-wrap { position: relative; }
  /* El degradado va en el ENVOLTORIO y no en `.tabs`: dentro del elemento
     que hace scroll, un ::after viaja con el contenido y desaparecería al
     primer deslizamiento. `pointer-events:none` para que no robe el toque
     de la última pestaña, que es justo la que tapa. */
  /* El degradado se funde con el fondo de ESTA página (`--bg:#eef4fc`), no
     con el `--bp-fondo` de la tienda (#eef2f7): son dos azules distintos y
     a 34 px la diferencia se ve como una banda gris. */
  body.pg-calc .tabs-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 4px; width: 34px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(238, 244, 252, 0), var(--bg, #eef4fc) 78%);
  }
  body.pg-calc .tabs {
    gap: 8px; margin-bottom: 14px; padding-right: 30px;
    scroll-snap-type: x proximity; scroll-padding-left: 4px;
    scrollbar-width: none;
  }
  /* La barra de scroll nativa dentro de una tira de 44 px se come el tacto y
     en el teléfono no sirve de señal: la señal es el degradado. */
  body.pg-calc .tabs::-webkit-scrollbar { display: none; }
  body.pg-calc .tab {
    min-height: 44px; padding: 0 14px; scroll-snap-align: center;
  }

  /* Campos y selects: 48 px de alto y 16 px de letra. Menos de 16 y iOS
     amplía la página al enfocar, que es el salto que descoloca al escribir
     los miligramos con el vial en la mano. Etiquetas encima, ya lo estaban. */
  body.pg-calc input:not([type="checkbox"]):not([type="radio"]),
  body.pg-calc select {
    min-height: 48px; padding: 12px 14px; font-size: 16px !important;
  }
  body.pg-calc .seg button { min-height: 48px; }
  /* Una columna en todo lo que en escritorio son dos: los dos selectores del
     compuesto, los pares de campos, las fichas de datos y las opciones de
     protocolo. `.row` es `auto-fit minmax(150px,1fr)` y a 358 px de ancho
     útil todavía metía dos columnas de 173, que para «Péptido en el vial
     (mg)» y su ayuda es media palabra por línea. */
  body.pg-calc .row, body.pg-calc .datos, body.pg-calc .opciones,
  body.pg-calc .loque { grid-template-columns: 1fr !important; }

  /* ── El muro de acceso ────────────────────────────────────────────
     Esto es lo PRIMERO que ve quien llega sin sesión, y se estaba
     saliendo de la pantalla por la derecha. `.loque` pide columnas de
     238 px mínimo: en 390 px, con los 16 de margen a cada lado y el
     padding de la tarjeta, ese mínimo ya no entra y la rejilla desborda
     en vez de colapsar.

     La regla de arriba lo arregla, pero solo si el `.loque` está dentro
     de la calculadora; el muro vive en su propia tarjeta y hay que
     nombrarlo. Se añade además un cinturón: nada dentro del muro puede
     ser más ancho que su contenedor, pase lo que pase con el contenido. */
  body.pg-calc .muro { overflow-x: hidden; }
  body.pg-calc .muro .loque { grid-template-columns: 1fr !important; }
  body.pg-calc .muro .item { max-width: 100%; }
  body.pg-calc .muro .item b,
  body.pg-calc .muro .item p { overflow-wrap: anywhere; }
  /* El botón de crear cuenta, a ancho completo y con área táctil. */
  body.pg-calc .muro .btn { width: 100%; min-height: 48px; }
  body.pg-calc .btns .btn, body.pg-calc .pedido-btns .btn { flex: 1 1 100%; min-height: 48px; }

  /* Los resultados: lo que la calculadora DEVUELVE es lo que se ha venido a
     ver, así que en el teléfono es lo más legible de la pantalla. Una
     columna, cifras grandes y tabulares —«48» y «11» ocupan lo mismo, así
     la cifra no baila al recalcular mientras se mira. */
  body.pg-calc .mx { grid-template-columns: 1fr !important; gap: 10px; }
  body.pg-calc .m .v { font-size: 26px !important; font-variant-numeric: tabular-nums; }
  body.pg-calc .m.hero .v { font-size: 40px !important; font-variant-numeric: tabular-nums; }
  body.pg-calc .sug-num, body.pg-calc .compra .tot b, body.pg-calc .op-d,
  body.pg-calc .uu, body.pg-calc .esc-u { font-variant-numeric: tabular-nums; }
  /* El dibujo de la jeringa y la escalera de dosis, a ancho completo: son
     figuras, y en 390 px una figura centrada con aire a los lados se lee
     peor que la misma figura ocupando la caja. */
  body.pg-calc .jer { padding: 12px; }
  body.pg-calc .jer-v, body.pg-calc #jeringa-v { width: 100%; }
  body.pg-calc #jeringa-v svg { width: 100%; height: auto; display: block; }
  body.pg-calc .esc { padding-left: 0; padding-right: 0; }

  /* Nada depende de pasar el ratón por encima: en el teléfono no hay ratón,
     y un :hover que se queda pegado tras el toque miente sobre qué pestaña
     está activa. */
  body.pg-calc .tab:hover, body.pg-calc .ps:hover, body.pg-calc .btn:hover,
  body.pg-calc .sug-btn:hover, body.pg-calc tbody tr:hover {
    border-color: inherit; color: inherit; background: inherit;
  }
  body.pg-calc .tab.on:hover { background: var(--navy, #0d2240); color: #fff; }

  /* ── Quien pide menos movimiento ─────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .hdr, .top, .bpcta, .bpsheet { transition: none !important; }
    body.pg-calc .hd { transition: none !important; }
    /* La cabecera no se esconde ni se asoma: se queda. */
    body.hdr-oculta .hdr, body.hdr-oculta .top { top: 0; }
    body.pg-calc.hdr-oculta .hd { top: 0; }
    /* La tira de pestañas se recoloca de golpe, sin deslizamiento. */
    body.pg-calc .tabs { scroll-behavior: auto; }
  }
}