/* ==========================================================================
   Yohana Storage — estilos de la tienda
   Se apoya en yohana-site.css (tokens, nav, footer). Aqui solo va lo que la
   tienda necesita y el sitio no tenia: rejilla de productos, ficha, carrito,
   pasos del pago.
   ========================================================================== */

/* El atributo hidden del HTML lo aplica el navegador con su propia hoja
   ([hidden] { display: none }), y esa hoja pierde contra cualquier regla que
   escribamos nosotros. Como .aviso, .carro, .elegido y .resumen .r ponen
   display, todo lo que escondiamos con hidden se seguia viendo: la caja
   naranja vacia, la linea "Costo de pagar con tarjeta" con un guion, el
   resumen del carrito vacio... Esta linea lo zanja de una vez y para todo. */
[hidden] { display: none !important; }

:root {
  --verde: #1F9E56;
  --verde-claro: #E8F6EE;
  --ambar: #B7791F;
  --ambar-claro: #FEF6E7;
  --sombra-1: 0 1px 2px rgba(10, 42, 85, .06), 0 2px 8px rgba(10, 42, 85, .05);
  --sombra-2: 0 2px 6px rgba(10, 42, 85, .07), 0 12px 28px rgba(10, 42, 85, .10);
  --radio: 16px;
}

/* ---------------------------------------------------- barra de la tienda */
.tnav { display: flex; align-items: center; gap: 6px; }
.tnav .carrito-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: var(--blue-900); color: #fff;
  font-weight: 600; font-size: .9rem; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.tnav .carrito-btn:hover { background: var(--blue-700); transform: translateY(-1px); }
.tnav .carrito-btn svg { width: 19px; height: 19px; }
.carrito-num {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: none; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--red-600); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
}
.carrito-num.hay { display: inline-flex; }

/* ------------------------------------------------------------- cabeceras */
.t-hero {
  background: linear-gradient(160deg, var(--blue-900) 0%, var(--blue-700) 100%);
  color: #fff; padding: 56px 0 64px; position: relative; overflow: hidden;
}
.t-hero::after {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 360px; height: 360px; border-radius: 50%;
  background: rgba(255,255,255,.05);
}
.t-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.15; }
.t-hero .kicker { color: #FFD966; }
.t-hero p { color: #C9DBF2; max-width: 620px; margin: 14px 0 0; font-size: 1.05rem; }

.t-cab { padding: 38px 0 6px; }
.t-cab h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.t-cab p { color: var(--slate); margin: 8px 0 0; }

.miga { font-size: .84rem; color: var(--slate-light); padding: 18px 0 0; }
.miga a { color: var(--slate); text-decoration: none; }
.miga a:hover { color: var(--blue-700); }

/* --------------------------------------------------------- tiras de aviso */
.t-tira {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  padding: 16px 28px; background: var(--paper-alt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .88rem; color: var(--slate);
}
.t-tira b { color: var(--ink); font-weight: 600; }
.t-tira span { display: inline-flex; align-items: center; gap: 8px; }
.t-tira svg { width: 17px; height: 17px; color: var(--verde); flex: none; }

/* ------------------------------------------------------ las cuatro puertas */
.puertas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 34px 0 10px; }
@media (max-width: 900px) { .puertas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .puertas { grid-template-columns: 1fr; } }

.puerta {
  display: block; text-decoration: none; padding: 26px 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--paper); box-shadow: var(--sombra-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative;
}
.puerta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: #C9D9EE; }
.puerta-ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-100); color: var(--blue-700);
}
.puerta-ico svg { width: 24px; height: 24px; }
.puerta h3 { font-size: 1.12rem; margin-bottom: 6px; }
.puerta p { color: var(--slate); font-size: .9rem; margin: 0; line-height: 1.5; }
.puerta-flecha { color: var(--red-600); font-weight: 700; font-size: .86rem; margin-top: 14px; display: block; }
.puerta.pronto { opacity: .62; pointer-events: none; }
.puerta .etiqueta {
  position: absolute; top: 16px; right: 16px;
  background: var(--ambar-claro); color: var(--ambar);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
}

/* -------------------------------------------------------------- rejilla */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 22px; }

.tcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--paper); overflow: hidden; box-shadow: var(--sombra-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.tcard-foto { position: relative; display: block; aspect-ratio: 1/1; background: var(--paper-alt); }
.tcard-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Un combo no tiene foto, tiene emoji: se arma en Cuba y no hay nada que
   fotografiar todavia. Antes salia un cuadro blanco que ponia "Sin foto",
   que al lado de un producto con foto parecia que la pagina estaba rota. */
.tcard-emoji {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 4.6rem; line-height: 1;
  background: linear-gradient(150deg, #F3F6FC 0%, #E7EDF8 100%);
}
.tcard-sin {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #F5F7FA 0%, #EAEFF6 100%);
  color: #B3BECE;
}
.tcard-sin svg { width: 62px; height: 62px; }
.tcard-agotado {
  position:absolute; top:20px; left:-34px; z-index:3;
  display:flex; align-items:center; justify-content:center;
  width:142px; padding:7px 8px;
  background:#E89A18; color:#fff;
  border-top:1px solid rgba(255,255,255,.45);
  border-bottom:1px solid rgba(124,72,0,.18);
  font-size:.7rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; transform:rotate(-38deg);
  box-shadow:0 4px 12px rgba(191,112,0,.3);
  animation:ys-agotado-pulso 1.9s ease-in-out infinite;
}
@keyframes ys-agotado-pulso {
  0%, 100% { background:#E89A18; box-shadow:0 4px 12px rgba(191,112,0,.25); }
  50% { background:#F5B32D; box-shadow:0 5px 18px rgba(232,154,24,.58); }
}
@media (prefers-reduced-motion: reduce) {
  .tcard-agotado { animation:none; }
}
.tcard-cinta {
  position: absolute; top: 12px; left: 12px;
  background: var(--verde); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.tcard-cuerpo { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.tcard-grupo { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
.tcard h3 { font-size: 1rem; line-height: 1.35; margin: 2px 0 0; }
.tcard h3 a { text-decoration: none; }
.tcard h3 a:hover { color: var(--blue-700); }
.tcard-precio {
  font-family: var(--font-head); font-weight: 700; color: var(--blue-900);
  font-size: 1.3rem; margin-top: 10px; display: flex; align-items: baseline; gap: 5px;
}
.tcard-precio small { font-size: .7rem; font-weight: 600; color: var(--slate-light); letter-spacing: .06em; }
.tcard-quedan { font-size: .8rem; color: var(--slate); margin-top: 2px; }
.tcard-quedan.poco { color: var(--red-600); font-weight: 600; }
.tcard .btn-add { margin-top: 14px; }
.tcard .btn-comprar-ahora { margin-top: 8px; }
.tcard-entrega { display:flex; align-items:center; gap:5px; margin-top:4px; color:#1a7f4b; font-size:.78rem; font-weight:700; }
.tcard-entrega span { font-size:.9rem; }
.productos-agotados { background:#f7f9fc; border-top:1px solid var(--line); }
.productos-agotados .tcard-foto img { filter:saturate(.78); }
.aviso-stock {
  width:100%; margin-top:10px; padding:10px 11px; border:1px solid var(--line);
  border-radius:12px; background:#fff; color:var(--blue-900); cursor:pointer;
  display:flex; align-items:center; gap:10px; text-align:left; font-family:var(--font-body);
}
.aviso-stock:hover { border-color:#E89A18; background:#fffaf0; }
.aviso-stock > span:last-child { display:flex; flex-direction:column; line-height:1.25; }
.aviso-stock b { font-size:.84rem; }
.aviso-stock small { color:var(--slate); font-size:.7rem; margin-top:2px; }
.aviso-stock-interruptor {
  width:40px; height:23px; flex:none; padding:2px; border-radius:999px;
  background:#cbd4e1; transition:background .18s ease;
}
.aviso-stock-interruptor i {
  display:block; width:19px; height:19px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(10,42,85,.24); transition:transform .18s ease;
}
.aviso-stock.activo { border-color:#55b884; background:#f1fbf5; }
.aviso-stock.activo .aviso-stock-interruptor { background:#16945a; }
.aviso-stock.activo .aviso-stock-interruptor i { transform:translateX(17px); }
.aviso-stock:disabled { opacity:.65; cursor:wait; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; width: auto;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; }
.btn-rojo { background: var(--red-600); color: #fff; }
.btn-rojo:hover { background: var(--red-700); transform: translateY(-1px); }
.btn-azul { background: var(--blue-900); color: #fff; }
.btn-azul:hover { background: var(--blue-700); transform: translateY(-1px); }
.btn-linea { background: var(--paper); color: var(--blue-900); border-color: var(--line); }
.btn-linea:hover { border-color: var(--blue-500); color: var(--blue-700); }
.btn-wa { background: var(--whatsapp); color: #fff; }
.btn-wa:hover { filter: brightness(.94); transform: translateY(-1px); }
.btn[disabled], .btn.apagado { background: #E7ECF3; color: var(--slate-light); cursor: not-allowed; transform: none; }
.btn-ancho { width: 100%; }
.btn.hecho { background: var(--verde); }

/* ----------------------------------------------------------- ficha */
/* align-items:start es obligatorio para que el sticky de abajo funcione: por
   defecto la rejilla estira las columnas a la misma altura y entonces no hay
   nada que pegar. */
.ficha { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px;
  padding: 28px 0 60px; align-items: start; }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; gap: 28px; } }

/* La columna de fotos es mucho mas corta que la del texto, asi que dejaba un
   pegote de blanco debajo. Pegandola, la foto baja contigo mientras lees y el
   hueco desaparece. En el telefono no, que ahi va todo en una sola columna. */
@media (min-width: 861px) {
  .ficha-fotos { position: sticky; top: 88px; }
}

.ficha-fotos .grande {
  border: 1px solid var(--line); border-radius: var(--radio); overflow: hidden;
  background: var(--paper-alt); aspect-ratio: 1/1;
}
.ficha-fotos .grande img { width: 100%; height: 100%; object-fit: cover; }
.ficha-tiras { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ficha-tiras button {
  width: 68px; height: 68px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--line); border-radius: 10px; background: var(--paper-alt);
}
.ficha-tiras button.activa { border-color: var(--blue-700); }
.ficha-tiras img { width: 100%; height: 100%; object-fit: cover; }

.ficha-datos h1 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2; }
.ficha-precio {
  font-family: var(--font-head); font-weight: 700; color: var(--blue-900);
  font-size: 2.3rem; margin: 16px 0 2px; display: flex; align-items: baseline; gap: 8px;
}
.ficha-precio small { font-size: .82rem; font-weight: 600; color: var(--slate-light); letter-spacing: .08em; }
.ficha-desc { color: var(--slate); margin: 16px 0 0; line-height: 1.65; }

.aviso {
  display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px;
  font-size: .9rem; line-height: 1.5; margin: 18px 0 0;
}
.aviso svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.aviso-verde { background: var(--verde-claro); color: #145C34; }
.aviso-verde svg { color: var(--verde); }
.aviso-ambar { background: var(--ambar-claro); color: #7A5310; }
.aviso-ambar svg { color: var(--ambar); }
.aviso-azul { background: var(--blue-100); color: var(--blue-800); }
.aviso-azul svg { color: var(--blue-700); }
.aviso b { font-weight: 700; }

.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cantidad button {
  width: 42px; height: 46px; border: 0; background: var(--paper); cursor: pointer;
  font-size: 1.25rem; color: var(--blue-900); line-height: 1;
}
.cantidad button:hover { background: var(--paper-alt); }
.cantidad input {
  width: 54px; height: 46px; border: 0; text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--ink);
  -moz-appearance: textfield;
}
.cantidad input::-webkit-outer-spin-button,
.cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ficha-acciones { display: flex; gap: 12px; align-items: center; margin: 22px 0 0; flex-wrap: wrap; }

/* ------------------------------------------------------------- secciones */
.t-sec { padding: 44px 0; }
.t-sec.alt { background: var(--paper-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.t-sec-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.t-sec-cab h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.t-sec-cab a { color: var(--red-600); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.t-sec-cab a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ vacio */
.vacio { text-align: center; padding: 64px 20px; color: var(--slate); }
.vacio svg { width: 54px; height: 54px; color: var(--slate-light); margin-bottom: 14px; }
.vacio h3 { margin-bottom: 8px; }

/* ------------------------------------------------- aviso flotante */
.tostada {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 140%);
  background: var(--blue-900); color: #fff; padding: 13px 22px; border-radius: 999px;
  font-weight: 600; font-size: .92rem; box-shadow: var(--sombra-2);
  z-index: 200; transition: transform .28s cubic-bezier(.2,.9,.3,1.2);
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
}
.tostada.ver { transform: translate(-50%, 0); }
.tostada svg { width: 18px; height: 18px; color: #6EE7A8; flex: none; }

/* ======================================================================
   Menu de telefono. El sitio esconde los enlaces bajo 760px y no pone
   nada en su lugar: en el telefono no habia forma de navegar. La tienda
   vive en el telefono, asi que aqui si hay menu.
   ====================================================================== */
.hamburguesa {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--paper); cursor: pointer; color: var(--blue-900);
}
.hamburguesa svg { width: 22px; height: 22px; margin: 0 auto; }
.hamburguesa .equis { display: none; }
.hamburguesa[aria-expanded="true"] .rayas { display: none; }
.hamburguesa[aria-expanded="true"] .equis { display: block; }

.menu-tel {
  display: none; border-top: 1px solid var(--line);
  background: var(--paper); padding: 10px 28px 18px;
}
.menu-tel.abierto { display: block; }
.menu-tel a {
  display: block; padding: 13px 4px; text-decoration: none;
  font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line);
}
.menu-tel a:last-child { border-bottom: 0; }
.menu-tel a.activo { color: var(--red-600); }

@media (max-width: 760px) {
  .hamburguesa { display: flex; align-items: center; justify-content: center; }
  .tnav .carrito-btn span.txt { display: none; }
  .tnav .carrito-btn { padding: 9px 13px; }
  .nav-inner { padding: 10px 18px; gap: 10px; }
  .wrap { padding: 0 18px; }
}
@media (min-width: 761px) { .menu-tel { display: none !important; } }

/* ======================================================================
   El carrito
   ====================================================================== */
.carro { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; padding: 26px 0 60px; }
.carrito-contenido { padding: 26px 0 60px; }
.carro-principal { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 900px) {
  .carro { grid-template-columns: 1fr; }
  .carro-principal { grid-template-columns: 1fr; }
}

.carro-lista { border: 1px solid var(--line); border-radius: var(--radio); background: var(--paper); overflow: hidden; }
.carro-fila { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; padding: 18px; border-bottom: 1px solid var(--line); align-items: center; }
.carro-fila:last-child { border-bottom: 0; }
.carro-fila .foto { width: 92px; height: 92px; border-radius: 12px; overflow: hidden; background: var(--paper-alt); }
.carro-fila .foto img { width: 100%; height: 100%; object-fit: cover; }
.carro-fila h3 { font-size: 1rem; margin: 0 0 3px; }
.carro-fila h3 a { text-decoration: none; }
.carro-fila .uni { color: var(--slate); font-size: .86rem; }
.carro-fila .der { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.carro-fila .importe { font-family: var(--font-head); font-weight: 700; color: var(--blue-900); font-size: 1.12rem; }
.carro-fila .quitar { background: none; border: 0; color: var(--slate-light); font-size: .84rem; cursor: pointer; padding: 0; text-decoration: underline; }
.carro-fila .quitar:hover { color: var(--red-600); }
@media (max-width: 560px) {
  .carro-fila { grid-template-columns: 72px 1fr; }
  .carro-fila .foto { width: 72px; height: 72px; }
  .carro-fila .der { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  /* medía 15 px de alto: el alto justo de la letra. Con el dedo se falla. */
  .carro-fila .quitar {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 6px; margin: -10px -6px;
  }
}

.resumen { border: 1px solid var(--line); border-radius: var(--radio); background: var(--paper); padding: 22px; box-shadow: var(--sombra-1); position: sticky; top: 90px; }
@media (max-width: 900px) { .resumen { position: static; } }
.resumen h3 { font-size: 1.05rem; margin-bottom: 16px; }
.resumen .r { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .94rem; color: var(--slate); }
.resumen .r b { color: var(--ink); font-weight: 600; }
.resumen .total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 14px; font-family: var(--font-head); font-size: 1.28rem; color: var(--blue-900); font-weight: 700; }
.resumen .nota { font-size: .82rem; color: var(--slate-light); line-height: 1.5; margin-top: 12px; }

.barra-gratis { margin: 14px 0 0; }
.barra-gratis .pista { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.barra-gratis .llena { height: 100%; background: var(--verde); border-radius: 999px; transition: width .4s ease; }
.barra-gratis p { font-size: .84rem; color: var(--slate); margin: 8px 0 0; }
.barra-gratis p b { color: var(--verde); }

.cargando { text-align: center; padding: 50px; color: var(--slate-light); }

/* ======================================================================
   Combos. El sitio ya tenia .pcard para estos; aqui solo se anade lo que
   hace falta para que se puedan comprar en vez de mandar a WhatsApp.
   ====================================================================== */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }

.ccard { display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: var(--radio); background: var(--paper); overflow: hidden;
  box-shadow: var(--sombra-1); transition: transform .16s ease, box-shadow .16s ease; }
.ccard:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }

.ccard-top { position: relative; padding: 26px 22px 20px;
  background: linear-gradient(150deg, var(--blue-900), var(--blue-700)); color: #fff; }
.ccard-emoji { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: 12px; }
.ccard-top h3 { color: #fff; font-size: 1.22rem; margin: 0; }
.ccard-precio { position: absolute; right: 18px; bottom: -17px;
  background: var(--red-600); color: #fff; font-family: var(--font-head); font-weight: 700;
  font-size: 1.16rem; padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(200,16,46,.32); display: flex; align-items: baseline; gap: 5px; }
.ccard-precio small { font-size: .64rem; font-weight: 600; opacity: .85; letter-spacing: .06em; }

.ccard-cuerpo { padding: 28px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.ccard-cuerpo ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.ccard-cuerpo li { position: relative; padding: 6px 0 6px 24px; font-size: .92rem;
  color: var(--slate); border-bottom: 1px dashed var(--line); }
.ccard-cuerpo li:last-child { border-bottom: 0; }
.ccard-cuerpo li::before { content: ""; position: absolute; left: 4px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.ccard-cuentas { font-size: .8rem; color: var(--slate-light); margin: 0 0 14px; }

/* ======================================================================
   Pagar
   ====================================================================== */
.pasos { display: flex; gap: 8px; align-items: center; font-size: .82rem;
  color: var(--slate-light); margin: 0 0 6px; flex-wrap: wrap; }
.pasos b { color: var(--blue-900); }

.bloque { border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--paper); padding: 24px; margin-bottom: 20px; box-shadow: var(--sombra-1); }
.bloque > h2 { font-size: 1.12rem; margin: 0 0 4px; display: flex; align-items: center; gap: 11px; }
.bloque > h2 .n { width: 27px; height: 27px; border-radius: 50%; background: var(--blue-900);
  color: #fff; font-size: .84rem; display: inline-flex; align-items: center;
  justify-content: center; flex: none; }
.bloque > .pie { color: var(--slate); font-size: .89rem; margin: 0 0 18px 38px; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .campos { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-size: .84rem; font-weight: 600; color: var(--ink); }
.campo label .opt { font-weight: 400; color: var(--slate-light); }
.campo input, .campo select, .campo textarea {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: var(--paper); width: 100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
}
.campo .ayuda { font-size: .78rem; color: var(--slate-light); }
.campo.malo input, .campo.malo select { border-color: var(--red-600); }
.campo .error { font-size: .78rem; color: var(--red-600); display: none; }
.campo.malo .error { display: block; }

.opciones { display: flex; flex-direction: column; gap: 11px; }
.opcion { display: flex; gap: 13px; padding: 15px 16px; border: 1.5px solid var(--line);
  border-radius: 13px; cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.opcion:hover { border-color: var(--blue-500); }
.opcion.elegida { border-color: var(--blue-700); background: var(--blue-100); }
.opcion input { margin: 3px 0 0; accent-color: var(--blue-700); flex: none; }
.opcion .t { font-weight: 600; font-size: .95rem; display: block; }
.opcion .d { color: var(--slate); font-size: .85rem; display: block; margin-top: 2px; }
.opcion .precio { margin-left: auto; font-family: var(--font-head); font-weight: 700;
  color: var(--blue-900); white-space: nowrap; align-self: center; }
.opcion .precio small { display: block; font-size: .66rem; color: var(--slate-light);
  font-weight: 600; text-align: right; }

.buscador { position: relative; }
.sugerencias { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sombra-2); max-height: 290px; overflow: auto; display: none; }
.sugerencias.ver { display: block; }
.sugerencias button { display: block; width: 100%; text-align: left; padding: 11px 15px;
  border: 0; background: none; cursor: pointer; border-bottom: 1px solid var(--line);
  font-family: var(--font-body); }
.sugerencias button:last-child { border-bottom: 0; }
.sugerencias button:hover { background: var(--paper-alt); }
.sugerencias .p { font-weight: 600; font-size: .93rem; color: var(--ink); }
.sugerencias .m { font-size: .8rem; color: var(--slate); }
.sugerencias .sin { padding: 15px; color: var(--slate); font-size: .9rem; text-align: center; }

.elegido { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  background: var(--verde-claro); border-radius: 12px; color: #145C34; font-size: .92rem; }
.elegido b { font-weight: 700; }
.elegido button { margin-left: auto; background: none; border: 0; color: #145C34;
  text-decoration: underline; cursor: pointer; font-size: .84rem; }

.pagos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .pagos { grid-template-columns: 1fr; } }
.pago { border: 1.5px solid var(--line); border-radius: 14px; padding: 18px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease; position: relative; }
.pago:hover { border-color: var(--blue-500); }
.pago.elegida { border-color: var(--blue-700); background: var(--blue-100); }
.pago .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pago .cab input { accent-color: var(--blue-700); }
.pago .cab b { font-size: .98rem; }
.pago .d { color: var(--slate); font-size: .85rem; line-height: 1.5; }
.pago .tot { font-family: var(--font-head); font-weight: 700; font-size: 1.44rem;
  color: var(--blue-900); margin-top: 12px; }
.pago .tot small { font-size: .66rem; color: var(--slate-light); letter-spacing: .07em; margin-left: 4px; }
.pago .sello { position: absolute; top: -10px; right: 14px; background: var(--verde); color: #fff;
  font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; }
.pago.apagada { opacity: .5; pointer-events: none; }

.enviando { display: none; align-items: center; gap: 10px; color: var(--slate); font-size: .9rem; }
.enviando.ver { display: flex; }
.giro { width: 17px; height: 17px; border: 2.4px solid var(--line);
  border-top-color: var(--blue-700); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ pedido listo */
.listo-caja { max-width: 640px; margin: 0 auto; text-align: center; padding: 50px 0 60px; }
.listo-caja.listo-transferencia { max-width: 920px; }
.listo-transferencia > :not(.nu-presentacion) {
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.nu-presentacion {
  position: relative; margin: 28px 0 30px; overflow: hidden;
  border: 1px solid rgba(111, 35, 206, .22); border-radius: 24px;
  background: #fff; text-align: left;
  box-shadow: 0 24px 60px rgba(52, 22, 105, .16), 0 4px 14px rgba(10, 42, 85, .08);
}
.nu-presentacion picture { display: block; overflow: hidden; }
.nu-presentacion img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
}
.nu-confianza {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
  align-items: center; padding: 17px 20px;
  background: linear-gradient(115deg, #fff 0%, #f8f2ff 55%, #f1e5ff 100%);
  border-top: 1px solid rgba(111, 35, 206, .15);
}
.nu-confianza-ico {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(145deg, #101f54, #6f23ce);
  box-shadow: 0 7px 18px rgba(111, 35, 206, .25);
}
.nu-confianza-ico svg { width: 24px; height: 24px; }
.nu-confianza strong {
  display: block; color: var(--blue-900); font-family: var(--font-head); font-size: .96rem;
}
.nu-confianza span:not(.nu-sello) {
  display: block; color: var(--slate); font-size: .82rem; line-height: 1.45; margin-top: 2px;
}
.nu-confianza .nu-sello {
  white-space: nowrap; color: #5c16a7; background: #fff; border: 1px solid rgba(111, 35, 206, .2);
  border-radius: 999px; padding: 7px 12px; font-size: .74rem; font-weight: 700;
  box-shadow: 0 4px 12px rgba(52, 22, 105, .08);
}
@media (max-width: 640px) {
  .listo-caja.listo-transferencia { padding-top: 36px; }
  .nu-presentacion { margin: 22px 0 26px; border-radius: 17px; }
  .nu-confianza { grid-template-columns: auto 1fr; padding: 14px; gap: 11px; }
  .nu-confianza-ico { width: 39px; height: 39px; border-radius: 12px; }
  .nu-confianza .nu-sello { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
.listo-ico { width: 78px; height: 78px; border-radius: 50%; margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde-claro); color: var(--verde); }
.listo-ico svg { width: 40px; height: 40px; }
.listo-ico.espera { background: var(--ambar-claro); color: var(--ambar); }
.listo-num { display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.32rem; letter-spacing: .05em; background: var(--paper-alt);
  border: 1px dashed var(--line); border-radius: 12px; padding: 12px 24px; margin: 16px 0 6px; }

.datos-banco { text-align: left; border: 1px solid var(--line); border-radius: var(--radio);
  padding: 20px; margin: 24px 0; background: var(--paper); }
.datos-banco .fila { display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .93rem; align-items: center; }
.datos-banco .fila:last-child { border-bottom: 0; }
.datos-banco .fila span { color: var(--slate); }
.datos-banco .fila b { font-family: var(--font-head); color: var(--ink); text-align: right;
  word-break: break-all; }
.copiar { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px;
  font-size: .78rem; cursor: pointer; color: var(--blue-700); font-weight: 600; margin-left: 8px; }
.copiar:hover { border-color: var(--blue-500); }

.escalera { display: flex; flex-direction: column; gap: 0; text-align: left; margin: 26px 0; }
.escalon { display: flex; gap: 15px; padding-bottom: 22px; position: relative; }
.escalon:last-child { padding-bottom: 0; }
.escalon::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0;
  width: 2px; background: var(--line); }
.escalon:last-child::before { display: none; }
.escalon .bolita { width: 28px; height: 28px; border-radius: 50%; flex: none; z-index: 1;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700;
  background: var(--paper-alt); color: var(--slate-light); border: 2px solid var(--line); }
.escalon.hecho .bolita { background: var(--verde); border-color: var(--verde); color: #fff; }
.escalon.ahora .bolita { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.escalon.hecho::before { background: var(--verde); }
.escalon .qh { font-weight: 600; font-size: .96rem; }
.escalon .cu { color: var(--slate); font-size: .85rem; }
.escalon.pendiente .qh { color: var(--slate-light); font-weight: 500; }

/* ======================================================================
   Escaparate: precio tachado, % OFF, insignias, envio gratis.
   Es lo que de verdad mueve una venta cuando todavia no hay datos para
   recomendar nada.
   ====================================================================== */
.tcard-off {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--red-600); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .74rem;
  letter-spacing: .02em; padding: 5px 10px; border-radius: 8px;
  box-shadow: 0 3px 10px rgba(200,16,46,.3);
}
.tcard-cinta.cinta-pedido { background: var(--ambar); }
.tcard-cinta.cinta-otra { background: var(--blue-700); }

.tcard-antes {
  color: var(--slate-light); font-size: .86rem; text-decoration: line-through;
  margin-top: 8px; line-height: 1;
}
.tcard-precio { margin-top: 3px; flex-wrap: wrap; }
.tcard-baja {
  color: var(--verde); font-family: var(--font-head); font-weight: 700;
  font-size: .8rem; letter-spacing: .01em;
}
.tcard-envio {
  color: var(--verde); font-weight: 700; font-size: .84rem; margin-top: 4px;
}

/* --------------------------------------------------------------- la ficha */
.ficha-antes {
  color: var(--slate-light); font-size: 1.02rem; text-decoration: line-through;
  margin: 14px 0 0;
}
.ficha-precio { margin-top: 2px; flex-wrap: wrap; }
.ficha-baja {
  background: var(--verde-claro); color: #145C34; font-family: var(--font-head);
  font-weight: 700; font-size: .88rem; padding: 5px 12px; border-radius: 999px;
  align-self: center;
}
.ficha-insignia {
  display: inline-block; background: var(--ambar-claro); color: var(--ambar);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 10px;
}

/* ------------------------------------------- aprovecha el mismo reparto */
.cross { border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--paper); padding: 22px; margin-top: 22px; }
.cross h3 { font-size: 1.05rem; margin: 0 0 3px; }
.cross .sub { color: var(--slate); font-size: .88rem; margin: 0 0 18px; }
.cross .tgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.cross .tcard-cuerpo { padding: 12px 12px 14px; }
.cross .tcard h3 { font-size: .9rem; }
.cross .tcard-precio { font-size: 1.08rem; }

.empujon { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border-radius: 12px; background: var(--ambar-claro); color: #7A5310;
  font-size: .9rem; line-height: 1.5; margin-bottom: 18px; }
.empujon svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--ambar); }
.empujon b { font-weight: 700; }

/* ======================================================================
   La galeria del producto: miniaturas, lupa y pantalla completa
   ====================================================================== */

/* --- miniaturas: eran de 68px y se perdian, por eso parecia que habia
       una sola foto. Ahora son mas grandes y se ven de lejos. --- */
.ficha-tiras { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ficha-tiras button {
  width: 84px; height: 84px; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid var(--line); border-radius: 12px; background: var(--paper-alt);
  transition: border-color .14s ease, transform .14s ease;
}
.ficha-tiras button:hover { border-color: var(--blue-500); transform: translateY(-2px); }
.ficha-tiras button.activa { border-color: var(--blue-700); }
.ficha-tiras img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) {
  .ficha-tiras button { width: 64px; height: 64px; }
}

/* --- la foto grande, con lupa --- */
.ficha-fotos .grande {
  position: relative; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: var(--radio);
  background: var(--paper-alt); aspect-ratio: 1/1;
}
.ficha-fotos .grande img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease;
}
/* la lupa solo en pantalla grande: en el telefono no hay raton que seguir */
@media (min-width: 861px) {
  .ficha-fotos .grande.acercada img { transform: scale(2.2); transition: none; }
}
.lupa-pista {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(10,42,85,.78); color: #fff; backdrop-filter: blur(4px);
  font-size: .76rem; font-weight: 600; padding: 7px 12px; border-radius: 999px;
  pointer-events: none; opacity: 1; transition: opacity .2s ease;
}
.lupa-pista svg { width: 14px; height: 14px; }
.ficha-fotos .grande.acercada .lupa-pista { opacity: 0; }

/* --- pantalla completa --- */
.visor {
  position: fixed; inset: 0; z-index: 900; display: none;
  background: rgba(8, 14, 24, .96);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.visor.abierto { display: block; }
body.sin-scroll { overflow: hidden; }

.visor-lienzo {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; overflow: hidden;
}
.visor-lienzo img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; will-change: transform;
  -webkit-user-drag: none;
}
.visor-lienzo img.suave { transition: transform .25s ease; }

.visor-x, .visor-flecha {
  position: absolute; z-index: 2; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
  backdrop-filter: blur(6px); transition: background .15s ease;
}
.visor-x:hover, .visor-flecha:hover { background: rgba(255,255,255,.26); }
.visor-x { top: 16px; right: 16px; width: 46px; height: 46px; }
.visor-x svg { width: 24px; height: 24px; }
.visor-flecha { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.visor-flecha.atras { left: 16px; }
.visor-flecha.alante { right: 16px; }
.visor-flecha svg { width: 26px; height: 26px; }
.visor-flecha[hidden] { display: none !important; }

.visor-cuenta {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  background: rgba(255,255,255,.12); padding: 7px 16px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.visor-ayuda {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.72); font-size: .82rem; text-align: center;
  background: rgba(255,255,255,.1); padding: 8px 16px; border-radius: 999px;
  backdrop-filter: blur(6px); max-width: calc(100vw - 32px);
}
.visor-tiras {
  position: absolute; bottom: 68px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 8px; padding: 8px; border-radius: 14px;
  background: rgba(255,255,255,.1); backdrop-filter: blur(6px); max-width: calc(100vw - 32px);
  overflow-x: auto;
}
.visor-tiras button {
  width: 52px; height: 52px; flex: none; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: 9px; background: none;
}
.visor-tiras button.activa { border-color: #fff; }
.visor-tiras img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
  .visor-flecha { width: 42px; height: 42px; }
  .visor-flecha.atras { left: 8px; }
  .visor-flecha.alante { right: 8px; }
  .visor-tiras { bottom: 60px; }
  .visor-ayuda { font-size: .76rem; bottom: 14px; }
}

/* ======================================================================
   La barra de pasos. Va en carrito, pagar y listo, para que el cliente
   sepa siempre donde esta y cuanto le falta. Un cliente que no sabe en
   que paso va, se va.
   ====================================================================== */
.ruta { padding: 26px 0 4px; }
.ruta-pistas {
  display: flex; align-items: flex-start; max-width: 620px; margin: 0 auto;
}
.ruta-paso {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  position: relative; text-align: center; gap: 8px;
}
/* la linea entre bolas */
.ruta-paso::before, .ruta-paso::after {
  content: ""; position: absolute; top: 15px; height: 3px;
  background: var(--line); z-index: 0;
}
.ruta-paso::before { left: 0; right: 50%; }
.ruta-paso::after { left: 50%; right: 0; }
.ruta-paso:first-child::before, .ruta-paso:last-child::after { display: none; }
.ruta-paso.hecho::before, .ruta-paso.hecho::after,
.ruta-paso.aqui::before { background: var(--verde); }

.ruta-bola {
  width: 32px; height: 32px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 3px solid var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: .82rem;
  color: var(--slate-light); transition: all .3s ease;
}
.ruta-bola svg { width: 15px; height: 15px; }
.ruta-paso.hecho .ruta-bola {
  background: var(--verde); border-color: var(--verde); color: #fff;
}
.ruta-paso.aqui .ruta-bola {
  background: var(--red-600); border-color: var(--red-600); color: #fff;
  transform: scale(1.14);
  animation: latido 2.2s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.42); }
  50%      { box-shadow: 0 0 0 9px rgba(200,16,46,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ruta-paso.aqui .ruta-bola { animation: none; }
}

.ruta-nombre {
  font-size: .78rem; font-weight: 600; color: var(--slate-light);
  line-height: 1.25; max-width: 92px;
}
.ruta-paso.hecho .ruta-nombre { color: var(--verde); }
.ruta-paso.aqui .ruta-nombre { color: var(--blue-900); font-weight: 700; }
@media (max-width: 480px) {
  .ruta-nombre { font-size: .68rem; max-width: 70px; }
  .ruta-bola { width: 28px; height: 28px; font-size: .74rem; }
  .ruta-paso::before, .ruta-paso::after { top: 13px; }
}

/* ======================================================================
   Lo que se hace ahora: la caja de "y ahora que"
   ====================================================================== */
.ahora {
  border: 2px solid var(--blue-500); border-radius: var(--radio);
  background: var(--blue-100); padding: 22px; margin: 26px 0; text-align: left;
}
.ahora h3 {
  font-size: 1.04rem; margin: 0 0 14px;
  display: flex; align-items: center; gap: 9px;
}
.ahora h3 svg { width: 19px; height: 19px; color: var(--blue-700); flex: none; }
.ahora ol { margin: 0; padding-left: 20px; color: var(--ink); }
.ahora ol li { padding: 5px 0; line-height: 1.5; }
.ahora ol li b { color: var(--blue-900); }

.acciones {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px;
}
.acciones .btn { flex: 1 1 210px; max-width: 320px; }
@media (max-width: 520px) { .acciones .btn { flex: 1 1 100%; max-width: none; } }

/* el boton que importa, que se note */
.btn-grande { padding: 15px 26px; font-size: 1.02rem; }
.btn-late { animation: respira 2.6s ease-in-out infinite; }
@keyframes respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,165,89,.45); }
  50%      { box-shadow: 0 0 0 11px rgba(34,165,89,0); }
}
@media (prefers-reduced-motion: reduce) { .btn-late { animation: none; } }

/* ======================================================================
   Ayuda flotante: el boton de WhatsApp que sigue al cliente
   ====================================================================== */
.wa-flota {
  position: fixed; right: 18px; bottom: 18px; z-index: 300;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px; border-radius: 999px;
  background: var(--whatsapp); color: #fff; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  box-shadow: 0 6px 22px rgba(34,165,89,.38);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-flota:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(34,165,89,.5); }
.wa-flota svg { width: 21px; height: 21px; flex: none; }
@media (max-width: 520px) {
  .wa-flota { right: 14px; bottom: 14px; padding: 13px; }
  .wa-flota span { display: none; }
}

/* ======================================================================
   El panel que entra al agregar algo al carrito.
   Antes el cliente agregaba y se quedaba en la misma pagina sin saber si
   habia pasado algo ni como volver a la tienda. Esto le dice que paso, le
   ensena lo que mas hay, y le da las dos salidas: seguir o pagar.
   ====================================================================== */
.panel-fondo {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(8, 14, 24, .5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.panel-fondo.abierto { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 810;
  width: min(420px, 100vw);
  background: var(--paper); box-shadow: -8px 0 40px rgba(10, 42, 85, .2);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.3,1);
  display: flex; flex-direction: column;
}
.panel.abierto { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .panel { transition: none; } }

.panel-cab {
  padding: 20px 20px 16px; border-bottom: 1px solid var(--line);
  display: flex; gap: 13px; align-items: flex-start;
}
.panel-ok {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--verde-claro); color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  animation: brinca .45s cubic-bezier(.2,.9,.3,1.4);
}
.panel-ok svg { width: 20px; height: 20px; }
@keyframes brinca {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .panel-ok { animation: none; } }

.panel-cab .t { font-family: var(--font-head); font-weight: 700; color: var(--blue-900);
  font-size: 1rem; line-height: 1.3; }
.panel-cab .q { color: var(--slate); font-size: .88rem; margin-top: 3px; line-height: 1.4; }
.panel-x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--slate-light); padding: 2px; flex: none;
}
.panel-x svg { width: 22px; height: 22px; }
.panel-x:hover { color: var(--ink); }

.panel-cuerpo { flex: 1; overflow-y: auto; padding: 18px 20px; }
.panel-resumen {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 15px; background: var(--paper-alt); border-radius: 12px;
  font-size: .92rem; color: var(--slate);
}
.panel-resumen b { font-family: var(--font-head); font-size: 1.16rem; color: var(--blue-900); }

.panel-nota {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 12px 14px; background: var(--verde-claro); border-radius: 12px;
  color: #145C34; font-size: .85rem; line-height: 1.45;
}
.panel-nota svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--verde); }

.panel-sug-titulo {
  font-family: var(--font-head); font-weight: 700; color: var(--blue-900);
  font-size: .96rem; margin: 22px 0 4px;
}
.panel-sug-pie { color: var(--slate); font-size: .83rem; margin: 0 0 14px; }

.panel-sug { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.psug {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
  transition: border-color .14s ease, transform .14s ease;
}
.psug:hover { border-color: var(--blue-500); transform: translateY(-2px); }
.psug > a { display: block; aspect-ratio: 1/1; background: var(--paper-alt); position: relative; }
.psug img { width: 100%; height: 100%; object-fit: cover; }
.psug .off {
  position: absolute; top: 7px; right: 7px; background: var(--red-600); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .64rem;
  padding: 3px 7px; border-radius: 6px;
}
.psug .cuerpo { padding: 10px 11px 12px; display: flex; flex-direction: column; flex: 1; }
.psug .n { font-size: .82rem; line-height: 1.3; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.psug .n:hover { color: var(--blue-700); }
.psug .antes { font-size: .72rem; color: var(--slate-light); text-decoration: line-through;
  margin-top: 6px; }
.psug .p { font-family: var(--font-head); font-weight: 700; color: var(--blue-900);
  font-size: 1rem; margin-top: 2px; }
.psug button {
  margin-top: 9px; width: 100%; padding: 8px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--paper); cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .8rem; color: var(--blue-900);
  transition: background .14s ease, border-color .14s ease;
}
.psug button:hover { background: var(--blue-100); border-color: var(--blue-500); }
.psug button.hecho { background: var(--verde); border-color: var(--verde); color: #fff; }

.panel-pie {
  padding: 16px 20px 20px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px; background: var(--paper);
}
.panel-vacio { color: var(--slate); font-size: .88rem; text-align: center;
  padding: 18px 10px; line-height: 1.5; }

@media (max-width: 520px) {
  .panel { width: 100vw; }
  .panel-sug { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ======================================================================
   Que se vea donde hay que tocar.
   Un boton que existe pero no llama la atencion es un boton que no existe:
   el de "Ver los productos" del carrito vacio medía 181x50 en una pantalla
   de 390 y Nelson no lo encontro.
   ====================================================================== */

/* ---------------------------------------------------- el carrito vacio */
.vacio-fuerte { text-align: center; padding: 40px 20px 30px; }
.vacio-fuerte .dibujo {
  width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-alt); color: var(--slate-light);
  animation: flotar 3.4s ease-in-out infinite;
}
.vacio-fuerte .dibujo svg { width: 42px; height: 42px; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.vacio-fuerte h2 { font-size: 1.32rem; margin-bottom: 8px; }
.vacio-fuerte p { color: var(--slate); margin: 0 auto; max-width: 420px; line-height: 1.55; }

.vacio-botones {
  display: flex; flex-direction: column; gap: 11px; align-items: center;
  margin: 26px auto 0; max-width: 340px;
}
.vacio-botones .btn { width: 100%; }

/* el boton grande que hay que tocar: late hasta que lo tocas */
.btn-mirame {
  padding: 16px 28px; font-size: 1.05rem;
  animation: mirame 2.4s ease-in-out infinite;
}
@keyframes mirame {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.5); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 14px rgba(200,16,46,0); transform: translateY(-2px); }
}
.btn-mirame:hover { animation: none; }
@media (prefers-reduced-motion: reduce) { .btn-mirame, .vacio-fuerte .dibujo { animation: none; } }

/* una flechita que baja, para decir "sigue por aqui" */
.abajo {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--slate-light); font-size: .8rem; margin-top: 22px;
}
.abajo svg { width: 18px; height: 18px; animation: bajando 1.8s ease-in-out infinite; }
@keyframes bajando {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .abajo svg { animation: none; } }

/* ------------------------------------- la barra de comprar, en el telefono
   En el telefono la ficha es larga y el boton de comprar se queda arriba,
   perdido. Esta barra baja contigo con el precio y el boton, como en
   cualquier tienda seria. */
.barra-comprar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: none; align-items: center; gap: 12px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(10,42,85,.09);
  transform: translateY(110%); transition: transform .25s ease;
}
.barra-comprar.ver { transform: translateY(0); }
.barra-comprar .precio {
  font-family: var(--font-head); font-weight: 700; color: var(--blue-900);
  font-size: 1.18rem; line-height: 1.1; white-space: nowrap;
}
.barra-comprar .precio small {
  display: block; font-size: .64rem; color: var(--slate-light); letter-spacing: .06em;
}
.barra-comprar .btn { flex: 1; padding: 13px 16px; }
@media (max-width: 860px) {
  .barra-comprar { display: flex; }
  body.con-barra { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .barra-comprar { transition: none; } }

/* ------------------------------- la fila de acciones despues del producto */
.siguiente {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-alt); padding: 26px 0;
}
.siguiente .dentro {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.siguiente .texto {
  font-family: var(--font-head); font-weight: 600; color: var(--blue-900);
  font-size: 1.02rem; margin-right: 6px;
}
@media (max-width: 620px) {
  .siguiente .dentro { flex-direction: column; align-items: stretch; }
  .siguiente .texto { text-align: center; margin: 0 0 4px; }
  .siguiente .btn { width: 100%; }
}

/* el boton de WhatsApp no puede taparse con la barra de comprar */
@media (max-width: 860px) {
  body.con-barra .wa-flota { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------- sitio para el dedo (18 sep)
   En el telefono estos enlaces median 22 px de alto, que es lo que mide la
   letra. Se falla el toque y parece que la pagina no responde. Se les da
   altura sin cambiar como se ven. */
@media (max-width: 720px) {
  .t-sec-cab a,
  .puerta-flecha,
  .foot-links a,
  .miga a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 4px 2px;
  }
  .foot-links { row-gap: 0; }
}