/* ═══════════════════════════════════════════════════════════════════════════
   CASA MÍA · LA COMPRA POR PASOS
   Configurador (3 pasos) y checkout (4 pasos). Mobile-first.

   Hereda la identidad de la tienda —crema, navy, la serif de la marca— desde
   landing.css. Aquí solo vive lo que la compra por pasos necesita.

   Reglas que se respetan en todo el archivo:
     · área táctil mínima 44×44
     · el estado NUNCA depende solo del color (icono + texto + aria)
     · nada tapa contenido: las barras fijas reservan su alto con padding
     · safe-area-inset-bottom en todo lo que se pega abajo
   ═══════════════════════════════════════════════════════════════════════════ */

.pz{
  /* MANUAL DE IDENTIDAD cap. 2 pág. 16-17: azul principal #014770, secundario
     #0D2A3E, fondo off-white #FFFDF9 y el principal al 12% para lo seleccionado.
     El dorado y los cremas de antes eran nuestros, no de la marca: fuera. */
  --pz-tinta:#0D2A3E; --pz-tinta-2:#4A5A68; --pz-tinta-3:#6C7A87;
  --pz-papel:#FFFFFF; --pz-papel-2:#FFFDF9; --pz-papel-3:#F4F0EA;
  --pz-linea:#E0D9CC; --pz-linea-2:#C3BCAE;
  --pz-navy:#0D2A3E; --pz-azul:#014770; --pz-azul-tx:#FFFFFF;
  --pz-azul-12:rgba(1,71,112,.12);   /* fondos suaves y estado seleccionado */
  --pz-azul-hover:#01395C;
  --pz-oro:#014770; --pz-oro-w:rgba(1,71,112,.12);   /* alias: ya no hay dorado */
  --pz-ok:#2C6E45; --pz-ok-w:#E4F1E9;
  --pz-mal:#A32E22; --pz-mal-w:#F9E8E5;
  --pz-r:12px; --pz-r-lg:16px;
  --pz-sh:0 1px 2px rgba(13,42,62,.06), 0 10px 28px -14px rgba(13,42,62,.22);
  --pz-pie:76px;                      /* alto de la barra fija de acción */
}

/* ── el lienzo: pantalla completa en móvil, tarjeta centrada en escritorio ── */
.pz-capa{
  position:fixed; inset:0; z-index:1200; display:none;
  background:rgba(13,42,62,.55);
}
.pz-capa.abierta{display:block}
.pz{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--pz-papel-2); color:var(--pz-tinta);
  font-family:var(--f-body, system-ui, -apple-system, sans-serif);
}
@media (min-width:760px){
  .pz{
    inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(560px, 94vw); height:min(88vh, 860px);
    border-radius:20px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.4);
  }
}

/* ── cabecera con el paso ── */
.pz-cab{
  flex-shrink:0; background:var(--pz-papel); border-bottom:1px solid var(--pz-linea);
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.pz-cab-fila{display:flex; align-items:center; gap:10px}
.pz-atras,.pz-cerrar{
  width:44px; height:44px; flex-shrink:0; border:0; background:none; cursor:pointer;
  border-radius:50%; display:grid; place-items:center; color:var(--pz-tinta-2);
  font-size:1.15rem; line-height:1;
}
.pz-atras:hover,.pz-cerrar:hover{background:var(--pz-papel-3); color:var(--pz-tinta)}
.pz-cab-t{flex:1; min-width:0}
.pz-paso{
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--pz-oro); display:block;
}
.pz-tit{
  font-family:var(--f-display, Georgia, serif); font-size:1.06rem; line-height:1.25;
  margin:1px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* barra de progreso: además del color, cada tramo dice su número */
.pz-barra{display:flex; gap:5px; margin-top:9px}
.pz-tramo{
  flex:1; height:5px; border-radius:99px; background:var(--pz-linea);
  transition:background .18s;
}
.pz-tramo.hecho{background:var(--pz-ok)}
.pz-tramo.activo{background:var(--pz-azul)}

/* ── cuerpo ── */
.pz-cuerpo{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 14px calc(var(--pz-pie) + 18px);
  overscroll-behavior:contain;
}

/* ── foto compacta del plato ── */
.pz-plato{
  display:flex; gap:12px; align-items:center; background:var(--pz-papel);
  border:1px solid var(--pz-linea); border-radius:var(--pz-r-lg);
  padding:10px; margin-bottom:16px;
}
.pz-plato img{
  width:66px; height:66px; border-radius:10px; object-fit:cover; flex-shrink:0;
  background:var(--pz-papel-3);
}
.pz-plato-t{min-width:0; flex:1}
.pz-plato-n{font-family:var(--f-display,Georgia,serif); font-size:1rem; line-height:1.25}
.pz-plato-inc{font-size:.78rem; color:var(--pz-tinta-3); margin-top:2px}
.pz-plato-p{
  font-weight:700; font-size:.95rem; margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.pz-plato-p small{font-weight:500; color:var(--pz-tinta-3); font-size:.74rem; margin-left:6px}

/* ── bloque de sección ── */
.pz-sec{margin-bottom:20px}
.pz-sec-cab{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px}
.pz-sec-t{font-weight:700; font-size:.98rem}
.pz-cuenta{
  font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pz-cuenta.falta{background:var(--pz-azul); color:var(--pz-azul-tx)}
.pz-cuenta.lista{background:var(--pz-ok-w); color:var(--pz-ok)}
.pz-cuenta.tope{background:var(--pz-oro-w); color:var(--pz-oro)}
.pz-sec-ayuda{font-size:.79rem; color:var(--pz-tinta-2); margin:0 0 10px; line-height:1.45}

/* ── opciones ── */
.pz-lista{display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none}
.pz-op{
  display:flex; align-items:center; gap:11px; width:100%; min-height:60px;
  padding:9px 12px; background:var(--pz-papel); border:1.5px solid var(--pz-linea);
  border-radius:var(--pz-r); cursor:pointer; text-align:left; font:inherit;
  color:inherit; transition:border-color .14s, background .14s;
}
.pz-op:hover:not(:disabled){border-color:var(--pz-linea-2)}
.pz-op:focus-visible{outline:3px solid var(--pz-azul); outline-offset:2px}
.pz-op img,.pz-op .pz-ph{
  width:44px; height:44px; border-radius:9px; object-fit:cover; flex-shrink:0;
  background:var(--pz-papel-3); display:grid; place-items:center; font-size:1.1rem;
}
/* el nombre y su etiqueta en líneas propias: en línea, un chip «CAMBIAR»
   se montaba encima del nombre del plato */
.pz-op-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.pz-op-n{font-size:.9rem; line-height:1.3; display:block}
.pz-op-s{font-size:.73rem; color:var(--pz-tinta-3); display:flex; gap:6px; align-items:center}
.pz-op-p{
  font-size:.85rem; font-weight:700; color:var(--pz-oro); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pz-op-p.inc{color:var(--pz-ok); font-weight:600; font-size:.76rem}
/* la marca: cuadrado para «elige varias», círculo para «elige una» */
.pz-marca{
  width:24px; height:24px; flex-shrink:0; border:2px solid var(--pz-linea-2);
  border-radius:7px; display:grid; place-items:center; color:transparent;
  font-size:.8rem; font-weight:700; transition:background .14s, border-color .14s;
}
.pz-op[data-una="1"] .pz-marca{border-radius:50%}
/* seleccionado = azul institucional al 12%, como pauta el manual (pág. 16) */
.pz-op[aria-checked="true"]{border-color:var(--pz-azul); background:var(--pz-azul-12)}
.pz-op[aria-checked="true"] .pz-marca{
  background:var(--pz-azul); border-color:var(--pz-azul); color:var(--pz-azul-tx);
}
/* AGOTADO ≠ MÁXIMO ALCANZADO. Son dos cosas distintas y se ven distintas. */
.pz-op[data-estado="agotado"]{opacity:.5; cursor:not-allowed; background:var(--pz-papel-2)}
.pz-op[data-estado="agotado"] .pz-op-n{text-decoration:line-through}
.pz-op[data-estado="tope"]{border-style:dashed; border-color:var(--pz-oro)}
.pz-op[data-estado="tope"] .pz-marca{border-style:dashed; border-color:var(--pz-oro)}
.pz-eti{
  font-size:.64rem; font-weight:700; padding:2px 7px; border-radius:99px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.pz-eti.ago{background:var(--pz-mal-w); color:var(--pz-mal)}
.pz-eti.poco{background:var(--pz-oro-w); color:var(--pz-oro)}
.pz-eti.reco{background:var(--pz-ok-w); color:var(--pz-ok)}
.pz-eti.cambiar{background:var(--pz-oro); color:#fff}

/* ── «¿cuál quieres reemplazar?» ── */
.pz-cambio{
  background:var(--pz-oro-w); border:1.5px solid var(--pz-oro);
  border-radius:var(--pz-r); padding:12px; margin-bottom:10px;
}
.pz-cambio-t{font-size:.86rem; font-weight:700; color:var(--pz-oro); margin-bottom:8px}
.pz-cambio-ops{display:flex; gap:8px; flex-wrap:wrap}
.pz-cambio-b{
  display:flex; align-items:center; gap:7px; min-height:44px; padding:6px 12px;
  background:var(--pz-papel); border:1.5px solid var(--pz-linea-2);
  border-radius:99px; font:inherit; font-size:.84rem; cursor:pointer; color:inherit;
}
.pz-cambio-b:hover{border-color:var(--pz-oro)}
.pz-cambio-b img{width:26px; height:26px; border-radius:50%; object-fit:cover}
.pz-cambio-x{
  background:none; border:0; font:inherit; font-size:.78rem; color:var(--pz-tinta-2);
  text-decoration:underline; cursor:pointer; min-height:44px; padding:0 4px;
}

/* ── «ya incluido» ── */
.pz-inc{
  background:var(--pz-ok-w); border-radius:var(--pz-r); padding:12px 14px;
  margin-bottom:18px;
}
.pz-inc-t{font-size:.8rem; font-weight:700; color:var(--pz-ok); margin-bottom:7px}
.pz-inc ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px}
.pz-inc li{font-size:.84rem; display:flex; align-items:center; gap:8px; line-height:1.35}
.pz-inc li b{font-weight:600}
.pz-inc .tick{color:var(--pz-ok); flex-shrink:0; font-weight:700}
.pz-inc .pend{color:var(--pz-tinta-3); font-style:italic}

/* ── resumen del paso 3 ── */
.pz-rev{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
.pz-rev-b{
  background:var(--pz-papel); border:1px solid var(--pz-linea);
  border-radius:var(--pz-r); padding:12px 14px;
}
.pz-rev-cab{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.pz-rev-t{font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--pz-tinta-3)}
.pz-rev-x{
  background:none; border:0; font:inherit; font-size:.82rem; font-weight:600;
  color:var(--pz-azul); text-decoration:underline; cursor:pointer;
  min-height:44px; padding:0 2px;
}
.pz-rev-b ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px}
.pz-rev-b li{font-size:.88rem; display:flex; justify-content:space-between; gap:10px}
.pz-rev-b li span:last-child{color:var(--pz-tinta-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.pz-tot{
  background:var(--pz-navy); color:#fff; border-radius:var(--pz-r);
  padding:14px 16px; display:flex; flex-direction:column; gap:6px;
}
.pz-tot-f{display:flex; justify-content:space-between; font-size:.86rem; opacity:.85}
.pz-tot-f.grande{
  font-size:1.15rem; font-weight:700; opacity:1; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.18); font-variant-numeric:tabular-nums;
}
.pz-tot-cup{font-size:.76rem; opacity:.7; text-align:right}

/* ── barra fija de acción ── */
.pz-pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:var(--pz-papel); border-top:1px solid var(--pz-linea);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
}
.pz-cant{
  display:flex; align-items:center; gap:2px; border:1.5px solid var(--pz-linea-2);
  border-radius:99px; flex-shrink:0; background:var(--pz-papel);
}
.pz-cant button{
  width:40px; height:44px; border:0; background:none; font:inherit; font-size:1.15rem;
  cursor:pointer; color:var(--pz-tinta); border-radius:99px;
}
.pz-cant button:disabled{opacity:.3; cursor:not-allowed}
.pz-cant span{min-width:22px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.pz-cta{
  flex:1; min-height:52px; border:0; border-radius:var(--pz-r); cursor:pointer;
  background:var(--pz-azul); color:var(--pz-azul-tx); font:inherit; font-weight:700;
  font-size:.98rem; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 16px; text-align:left;
}
.pz-cta:focus-visible{outline:3px solid var(--pz-navy); outline-offset:2px}
/* «falta algo» NO es un botón muerto: dice qué falta y al pulsarlo lleva allí */
.pz-cta[data-falta="1"]{background:var(--pz-papel-3); color:var(--pz-tinta-2)}
.pz-cta-p{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.pz-cta-p small{display:block; font-weight:500; opacity:.8; font-size:.7rem}

/* ── checkout: pasos ── */
/* el resumen es lo último y lo más importante: la barra fija no puede
   comerse su última línea */
.pz-cheq .pz-cuerpo{padding-bottom:calc(var(--pz-pie) + 40px)}
.pz-campo{margin-bottom:14px}
.pz-campo label{display:block; font-size:.82rem; font-weight:600; margin-bottom:5px}
.pz-campo .req{color:var(--pz-mal)}
.pz-campo input,.pz-campo select,.pz-campo textarea{
  width:100%; min-height:48px; padding:11px 13px; font:inherit; font-size:1rem;
  background:var(--pz-papel); border:1.5px solid var(--pz-linea-2);
  border-radius:10px; color:var(--pz-tinta);
}
.pz-campo textarea{min-height:76px; resize:vertical}
.pz-campo input:focus,.pz-campo select:focus,.pz-campo textarea:focus{
  outline:3px solid rgba(31,70,118,.28); outline-offset:0; border-color:var(--pz-azul);
}
.pz-campo[data-mal="1"] input,.pz-campo[data-mal="1"] select{border-color:var(--pz-mal)}
.pz-error{
  display:flex; gap:6px; align-items:flex-start; font-size:.79rem; color:var(--pz-mal);
  margin-top:5px; line-height:1.4;
}
.pz-ops{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.pz-linea{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--pz-linea)}
.pz-linea:last-child{border-bottom:0}
.pz-linea img{width:56px; height:56px; border-radius:9px; object-fit:cover; flex-shrink:0; background:var(--pz-papel-3)}
.pz-linea-t{flex:1; min-width:0}
.pz-linea-n{font-size:.92rem; font-weight:600; line-height:1.3}
.pz-linea-d{font-size:.76rem; color:var(--pz-tinta-3); margin-top:3px; line-height:1.45}
.pz-linea-a{display:flex; gap:6px; align-items:center; margin-top:7px; flex-wrap:wrap}
.pz-mini{
  background:none; border:1px solid var(--pz-linea-2); border-radius:8px;
  font:inherit; font-size:.78rem; cursor:pointer; color:var(--pz-tinta-2);
  /* 44 px de alto SIEMPRE (el dedo), pero estrecho: en un teléfono de 375 las
     cuatro acciones se partían en dos filas y la línea del pedido crecía el
     doble de lo necesario */
  min-height:44px; padding:0 10px; white-space:nowrap; flex-shrink:0;
}
.pz-mini[data-menos],.pz-mini[data-mas]{min-width:44px; padding:0; font-size:1rem}
.pz-linea-a{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
.pz-linea-a::-webkit-scrollbar{display:none}
.pz-mini:hover{border-color:var(--pz-azul); color:var(--pz-azul)}
.pz-mini.mal:hover{border-color:var(--pz-mal); color:var(--pz-mal)}
.pz-linea-p{text-align:right; font-weight:700; font-size:.9rem; white-space:nowrap; font-variant-numeric:tabular-nums}
.pz-linea-p small{display:block; font-weight:500; color:var(--pz-tinta-3); font-size:.72rem}

/* progreso de la promoción */
.pz-promo{background:var(--pz-oro-w); border-radius:var(--pz-r); padding:12px 14px; margin:14px 0}
.pz-promo-t{font-size:.85rem; font-weight:700; color:var(--pz-oro)}
.pz-promo-b{height:7px; background:rgba(138,106,47,.18); border-radius:99px; margin:8px 0 6px; overflow:hidden}
.pz-promo-b i{display:block; height:100%; background:var(--pz-oro); border-radius:99px; transition:width .3s}
.pz-promo-s{font-size:.76rem; color:var(--pz-oro)}

/* upsell del carrito: dos como mucho, compacto */
.pz-sug{display:flex; flex-direction:column; gap:8px}
.pz-sug-b{
  display:flex; align-items:center; gap:11px; padding:9px 12px; background:var(--pz-papel);
  border:1.5px dashed var(--pz-linea-2); border-radius:var(--pz-r); cursor:pointer;
  font:inherit; color:inherit; text-align:left; min-height:60px; width:100%;
}
.pz-sug-b:hover{border-color:var(--pz-oro); border-style:solid}
.pz-sug-b img{width:42px; height:42px; border-radius:8px; object-fit:cover; flex-shrink:0}
.pz-sug-t{flex:1; min-width:0}
.pz-sug-n{font-size:.88rem; font-weight:600}
.pz-sug-s{font-size:.74rem; color:var(--pz-tinta-3)}
.pz-sug-p{font-size:.85rem; font-weight:700; color:var(--pz-oro); white-space:nowrap}
.pz-sug-b[data-puesto="1"]{border-style:solid; border-color:var(--pz-ok); background:var(--pz-ok-w)}
.pz-sug-b[data-puesto="1"] .pz-sug-p{color:var(--pz-ok)}

/* resumen de dinero */
.pz-cuentas{background:var(--pz-papel); border:1px solid var(--pz-linea); border-radius:var(--pz-r); padding:12px 14px}
.pz-cuentas .f{display:flex; justify-content:space-between; gap:10px; font-size:.86rem; padding:3px 0}
.pz-cuentas .f span:last-child{font-variant-numeric:tabular-nums}
.pz-cuentas .f.desc{color:var(--pz-ok); font-weight:600}
.pz-cuentas .f.total{
  font-size:1.06rem; font-weight:700; border-top:1px solid var(--pz-linea);
  margin-top:7px; padding-top:9px;
}
.pz-cuentas .nota{font-size:.75rem; color:var(--pz-tinta-3); margin-top:5px; line-height:1.4}

/* confirmación final */
.pz-conf-b{background:var(--pz-papel); border:1px solid var(--pz-linea); border-radius:var(--pz-r); padding:12px 14px; margin-bottom:10px}
.pz-conf-cab{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:7px}
.pz-conf-d{font-size:.86rem; line-height:1.55; color:var(--pz-tinta-2)}
.pz-conf-d b{color:var(--pz-tinta); font-weight:600}
.pz-tras{font-size:.78rem; color:var(--pz-tinta-3); text-align:center; margin-top:10px; line-height:1.45}
.pz-wa{
  width:100%; min-height:48px; margin-top:10px; background:none; cursor:pointer;
  border:1.5px solid var(--pz-linea-2); border-radius:var(--pz-r); font:inherit;
  font-size:.88rem; color:var(--pz-tinta-2);
}
.pz-wa:hover{border-color:#25D366; color:#128C4A}

/* aviso accesible que no ocupa espacio */
.pz-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion:reduce){
  .pz-op,.pz-cta,.pz-tramo,.pz-promo-b i{transition:none}
}
@media (max-width:340px){
  .pz-cuerpo{padding-left:10px; padding-right:10px}
  .pz-op{padding:8px 9px; gap:9px}
  .pz-op img,.pz-op .pz-ph{width:38px; height:38px}
  .pz-cta{font-size:.9rem; padding:0 12px}
}

/* ── el botón de la tarjeta dice lo que hace ──────────────────────────────
   El «+» redondo no avisaba de que una completa abre un configurador. Los
   platos que se arman llevan palabra; los que se añaden y ya, siguen con su
   «+». Misma altura que el «+» para que la banda de la tarjeta no baile. */
body.tienda-light .cart-add.cart-add-arma{
  width:auto; min-width:auto; padding:0 14px; height:40px; border-radius:99px;
  font-size:.76rem; font-weight:700; letter-spacing:.01em; white-space:nowrap;
}
@media (max-width:360px){ body.tienda-light .cart-add.cart-add-arma{padding:0 10px; font-size:.71rem} }

/* ── nada tapa el contenido ───────────────────────────────────────────────
   La barra del carrito y el aviso de «repetir pedido» flotan; el catálogo
   reserva su alto para que no se coman la última fila ni los filtros. */
body.tienda-light .menu-section:last-of-type{
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}
.cart-bar,.t-reorder{ padding-bottom:calc(10px + env(safe-area-inset-bottom)) }

/* ── cerrar la venta sin salir del carrito ────────────────────────────────
   La barra del descuento mandaba al catálogo a buscar. Ahora enseña las
   completas concretas que faltan: foto, nombre y precio, a un toque. */
body.tienda-light .pz-falta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0 8px;
}
body.tienda-light .pz-falta-c{
  display:flex; flex-direction:column; align-items:stretch; gap:4px;
  padding:0 0 8px; border:1px solid var(--pz-linea); border-radius:12px;
  background:var(--pz-papel); cursor:pointer; overflow:hidden; text-align:left;
  transition:border-color .12s, transform .12s;
}
body.tienda-light .pz-falta-c:hover{ border-color:var(--pz-azul); transform:translateY(-1px); }
body.tienda-light .pz-falta-c img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
body.tienda-light .pz-falta-n{
  font-size:.72rem; font-weight:600; line-height:1.25; padding:6px 8px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body.tienda-light .pz-falta-p{ font-size:.78rem; font-weight:700; padding:0 8px; color:var(--pz-azul); }
@media (max-width:360px){ body.tienda-light .pz-falta{ grid-template-columns:repeat(2,1fr) } }

/* ── volver, donde está el pulgar ─────────────────────────────────────── */
body.tienda-light .pz-atras-pie{
  flex:0 0 auto; min-height:48px; padding:0 16px; border-radius:12px;
  border:1px solid var(--pz-linea); background:var(--pz-papel);
  color:var(--pz-tinta); font-size:.85rem; font-weight:600; cursor:pointer;
}
body.tienda-light .pz-atras-pie:hover{ border-color:var(--pz-azul); }

/* ── atajo al pago para el que ya tiene lo que quiere ─────────────────── */
body.tienda-light .pz-cta-2{
  flex:0 0 100%; min-height:44px; margin-top:8px; border-radius:12px;
  border:1px solid var(--pz-azul); background:transparent;
  color:var(--pz-azul); font-size:.85rem; font-weight:700; cursor:pointer;
}
body.tienda-light .pz-cta-2:hover{ background:var(--pz-azul); color:#fff; }
body.tienda-light .pz-pie{ flex-wrap:wrap; }

@media (prefers-reduced-motion:reduce){
  body.tienda-light .pz-falta-c{ transition:none }
  body.tienda-light .pz-falta-c:hover{ transform:none }
}

/* ── «no, gracias»: la recomendación se puede quitar de en medio ────────── */
body.tienda-light .pz-sug{ position:relative }
body.tienda-light .pz-sug-b{ padding-right:40px }
body.tienda-light .pz-sug-x{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:50%; background:transparent;
  color:var(--pz-tinta-3); font-size:1.05rem; line-height:1; cursor:pointer;
}
body.tienda-light .pz-sug-x:hover{ background:var(--pz-papel-3); color:var(--pz-tinta) }
body.tienda-light .pz-sug-x:focus-visible{ outline:2px solid var(--pz-azul); outline-offset:2px }

/* ── lo oculto está oculto de verdad ──────────────────────────────────────
   El `hidden` de HTML lo tumbaba cualquier display inline. Aquí no. */
body.tienda-light [hidden]{ display:none !important }
body.tienda-light .pz-prog{ display:flex; gap:8px; margin-top:8px }
body.tienda-light .pz-prog input{ flex:1 }

/* ── el método de pago explica qué pasa al elegirlo ────────────────────── */
body.tienda-light .pz-op-s{
  display:block; font-size:.74rem; line-height:1.35; color:var(--pz-tinta-2);
  font-weight:400; margin-top:2px;
}
body.tienda-light .pz-nota-pago{
  margin:10px 0 0; padding:10px 12px; border-radius:10px;
  background:var(--pz-azul-12); color:var(--pz-tinta);
  font-size:.8rem; line-height:1.45;
}

/* ── puente a la pasarela: la espera también es de Casa Mía ─────────────── */
.cm-puente{
  position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background:#FFFDF9; padding:24px;
}
.cm-puente-c{ text-align:center; max-width:340px }
.cm-puente-logo{ width:200px; max-width:70vw; height:auto; margin:0 auto 26px; display:block }
.cm-puente-sp{
  width:34px; height:34px; margin:0 auto 18px; border-radius:50%;
  border:2px solid rgba(1,71,112,.18); border-top-color:#014770;
  animation:cmGira .8s linear infinite;
}
@keyframes cmGira{ to{ transform:rotate(360deg) } }
.cm-puente-t{ margin:0; font-size:1rem; font-weight:700; color:#0D2A3E }
.cm-puente-n{ margin:6px 0 0; font-size:.9rem; color:#014770; font-weight:700 }
.cm-puente-s{ margin:10px 0 0; font-size:.8rem; color:#4A5A68; line-height:1.5 }
@media (prefers-reduced-motion:reduce){
  .cm-puente-sp{ animation:none; border-top-color:rgba(1,71,112,.18) }
}

/* ── pausa larga (obra): un solo mensaje, en marca, sin vender nada ────── */
body.tienda-light .t-pausa{ padding:26px 16px 6px }
body.tienda-light .t-pausa-caja{
  max-width:560px; margin:0 auto; text-align:center;
  background:#fff; border:1px solid var(--pz-linea); border-radius:var(--pz-r-lg);
  padding:30px 22px; box-shadow:var(--pz-sh);
}
body.tienda-light .t-pausa-ico{ font-size:2rem; display:block; margin-bottom:8px }
body.tienda-light .t-pausa-t{ margin:0 0 10px; font-size:1.35rem; color:var(--pz-navy) }
body.tienda-light .t-pausa-x{ margin:0 0 8px; font-size:.95rem; line-height:1.55; color:var(--pz-tinta) }
body.tienda-light .t-pausa-s{ margin:0 0 18px; font-size:.85rem; color:var(--pz-tinta-2) }
body.tienda-light .t-pausa-wa{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:12px; text-decoration:none;
  background:var(--pz-azul); color:#fff; font-weight:700; font-size:.92rem;
}
body.tienda-light .t-pausa-wa:hover{ background:var(--pz-navy) }