/* ══════════════════════════════════════════════════════════════════════
   HELADOS OLGUÍN · San Felipe — desde 1906
   Paleta tomada del LOGO real (no de la plantilla que usa el sitio actual):
   café #8E5638 del sello · menta #42A389 del wordmark · crema de fondo.
   El burdeo #6E2A36 se conserva porque ya es parte de su identidad viva.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --crema:#FAF3E7;  --crema-2:#F3E7D2;  --crema-3:#EAD9BE;
  --cafe:#8E5638;   --cafe-osc:#5E3524; --cafe-cl:#B07A57;
  --burdeo:#6E2A36; --burdeo-osc:#4A1B24;
  --menta:#3F9E86;  --menta-osc:#2E7C68; --menta-cl:#65B49F;
  --tinta:#2B1D17;  --tinta-2:#6B584E;  --tinta-3:#9A857A;
  --blanco:#fff;
  --sombra:0 1px 2px rgba(43,29,23,.06), 0 8px 24px -12px rgba(43,29,23,.18);
  --sombra-alta:0 2px 6px rgba(43,29,23,.08), 0 24px 48px -20px rgba(43,29,23,.30);
  --radio:18px; --radio-sm:12px; --radio-xl:28px;
  /* Zoom de las fotos de producto. Las fotos suyas son un bol de greda sobre
     madera y el helado ocupa menos de la mitad del cuadro: sin acercar, la
     vitrina se ve de madera, no de helado. Cada recorte pide lo suyo. */
  --zoom:1.45;    /* círculos de la cinta  */
  --zoom-t:1.3;   /* tarjetas de la grilla */
  --zoom-h:1.16;  /* collage del hero      */
  --ancho:1180px;
  --serif:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.6vw,3.3rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--menta); outline-offset:3px; border-radius:6px}

.envoltura{width:min(100% - 2.5rem,var(--ancho)); margin-inline:auto}
@media (max-width:640px){ .envoltura{width:min(100% - 1.75rem,var(--ancho))} }

.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--burdeo);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 10px 0}
.saltar:focus{left:0}

/* ─── Franja de demostración ─────────────────────────────────────── */
.demo-tira{
  background:var(--burdeo); color:#FBEFE0; font-size:.8rem; text-align:center;
  padding:.6rem 1rem; letter-spacing:.01em; position:relative; z-index:60;
}
.demo-tira b{color:#fff}
.demo-tira a{text-decoration:underline; text-underline-offset:3px; white-space:nowrap}

/* ─── Cabecera ───────────────────────────────────────────────────── */
.cab{
  position:sticky; top:0; z-index:50; background:rgba(250,243,231,.86);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.cab.pegada{border-bottom-color:var(--crema-3); box-shadow:0 6px 20px -14px rgba(43,29,23,.35)}
.cab-in{display:flex; align-items:center; gap:1rem; padding:.7rem 0; min-height:66px}
.marca{display:flex; align-items:center; gap:.65rem; margin-right:auto; flex-shrink:0}
.marca img{width:46px; height:46px; border-radius:50%}
.marca-txt{display:flex; flex-direction:column; line-height:1.05}
.marca-txt b{font-family:var(--serif); font-size:1.16rem; color:var(--burdeo); font-weight:600}
.marca-txt span{font-size:.63rem; letter-spacing:.19em; text-transform:uppercase; color:var(--cafe-cl); font-weight:500}

.nav{display:flex; gap:.35rem; align-items:center}
.nav a{
  padding:.5rem .8rem; border-radius:999px; font-size:.92rem; font-weight:500;
  color:var(--tinta-2); transition:background .2s, color .2s;
}
.nav a:hover{background:var(--crema-2); color:var(--burdeo)}
@media (max-width:900px){ .nav{display:none} }

.btn-carro{
  display:flex; align-items:center; gap:.5rem; background:var(--burdeo); color:#fff;
  padding:.62rem 1.05rem; border-radius:999px; font-weight:600; font-size:.92rem;
  box-shadow:0 6px 16px -8px rgba(110,42,54,.7); transition:transform .2s var(--ease), background .2s;
}
.btn-carro:hover{background:var(--burdeo-osc); transform:translateY(-1px)}
.btn-carro .cuenta{
  background:var(--menta); color:#08251E; min-width:22px; height:22px; border-radius:999px;
  display:grid; place-items:center; font-size:.76rem; font-weight:700; padding:0 6px;
}
.btn-carro .cuenta:empty,.btn-carro .cuenta[data-n="0"]{display:none}
.hamb{display:none; width:44px; height:44px; border-radius:12px; place-items:center; background:var(--crema-2); color:var(--burdeo); flex-shrink:0}
@media (max-width:900px){ .hamb{display:grid} }
/* En pantalla angosta no caben marca + "Pedido" + hamburguesa: la fila se
   salía 21px por la derecha. El carro se queda en icono (ya tiene aria-label)
   y la marca pasa a poder encogerse. */
@media (max-width:560px){
  .btn-carro span:not(.cuenta){display:none}
  .btn-carro{padding:.62rem .82rem}
  .marca{flex-shrink:1; min-width:0}
  .marca-txt{min-width:0}
  .marca-txt b,.marca-txt span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* Menú móvil */
.menu-movil{
  position:fixed; inset:0; z-index:80; background:var(--crema); padding:1.5rem;
  display:flex; flex-direction:column; gap:.3rem;
  transform:translateY(-100%); transition:transform .45s var(--ease); overflow-y:auto;
}
.menu-movil.abierto{transform:none}
.menu-movil a{padding:1rem .5rem; font-family:var(--serif); font-size:1.5rem; color:var(--burdeo); border-bottom:1px solid var(--crema-2)}
.menu-movil .cerrar{align-self:flex-end; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--crema-2); margin-bottom:.5rem}

/* ─── Botones ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92rem 1.7rem; border-radius:999px; font-weight:600; font-size:1rem;
  transition:transform .25s var(--ease), box-shadow .25s, background .2s, color .2s;
  text-align:center;
}
.btn-1{background:var(--burdeo); color:#fff; box-shadow:0 10px 26px -12px rgba(110,42,54,.85)}
.btn-1:hover{background:var(--burdeo-osc); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(110,42,54,.9)}
.btn-2{background:var(--menta); color:#062A22; box-shadow:0 10px 26px -12px rgba(63,158,134,.8)}
.btn-2:hover{background:var(--menta-osc); color:#fff; transform:translateY(-2px)}
.btn-3{background:transparent; color:var(--burdeo); box-shadow:inset 0 0 0 1.6px var(--crema-3)}
.btn-3:hover{background:var(--crema-2); box-shadow:inset 0 0 0 1.6px var(--cafe-cl)}
.btn-lleno{width:100%}

/* ─── Hero ───────────────────────────────────────────────────────── */
.hero{position:relative; padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem); overflow:hidden}
.hero::before{
  content:''; position:absolute; inset:-30% -20% auto -20%; height:130%;
  background:
    radial-gradient(48% 42% at 22% 18%, rgba(63,158,134,.13), transparent 68%),
    radial-gradient(52% 48% at 84% 30%, rgba(176,122,87,.20), transparent 70%);
  pointer-events:none;
}
.hero-in{position:relative; display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(2rem,4vw,4rem); align-items:center}
@media (max-width:940px){ .hero-in{grid-template-columns:1fr; gap:2.5rem} }

.sello{
  display:inline-flex; align-items:center; gap:.6rem; background:var(--crema-2);
  color:var(--cafe-osc); padding:.45rem 1rem .45rem .5rem; border-radius:999px;
  font-size:.82rem; font-weight:600; margin-bottom:1.4rem; box-shadow:inset 0 0 0 1px var(--crema-3);
}
.sello i{
  background:var(--burdeo); color:#fff; font-style:normal; font-weight:700;
  padding:.22rem .6rem; border-radius:999px; font-size:.76rem; letter-spacing:.04em;
}
.hero h1{color:var(--burdeo)}
.hero h1 em{font-style:italic; color:var(--cafe); font-weight:500}
.hero-bajada{font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--tinta-2); max-width:34ch; margin:1.5rem 0 1.25rem}
.hero-ctas{display:flex; gap:.8rem; flex-wrap:wrap}
@media (max-width:420px){ .hero-ctas{flex-direction:column} .hero-ctas .btn{width:100%} }

/* Collage del hero */
.hero-art{position:relative; aspect-ratio:1/1; max-width:520px; margin-inline:auto; width:100%}
.hero-art figure{
  position:absolute; margin:0; border-radius:50%; overflow:hidden;
  box-shadow:var(--sombra-alta); background:var(--crema-2);
}
.hero-art figure img{width:100%; height:100%; object-fit:cover; transform:scale(var(--zoom-h))}
.hero-art .f1{inset:0 22% 24% 0; z-index:3}
.hero-art .f2{width:44%; aspect-ratio:1; right:0; top:8%; z-index:2}
.hero-art .f3{width:38%; aspect-ratio:1; right:2%; bottom:2%; z-index:4}
/* El medallón vive en la muesca de abajo a la izquierda: si se centra,
   se come la tercera foto y el collage pierde la tercera bola. */
.hero-medalla{
  position:absolute; left:4%; bottom:2%; z-index:5; width:112px; height:112px; border-radius:50%;
  background:var(--burdeo); color:#FBEFE0; display:grid; place-content:center; text-align:center;
  box-shadow:var(--sombra-alta); line-height:1.05; padding:.4rem;
}
.hero-medalla b{display:block; font-family:var(--serif); font-size:2.05rem; color:#fff}
.hero-medalla span{font-size:.62rem; letter-spacing:.16em; text-transform:uppercase}
@media (max-width:520px){ .hero-medalla{width:92px; height:92px} .hero-medalla b{font-size:1.7rem} }

/* ─── Tira de cifras ─────────────────────────────────────────────── */
.cifras{background:var(--burdeo); color:#F7E8D8; padding:clamp(1.6rem,3vw,2.2rem) 0; position:relative}
.cifras-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center}
@media (max-width:720px){ .cifras-in{grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem} }
.cifra b{display:block; font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.5rem); color:#fff; line-height:1}
.cifra span{font-size:.79rem; color:#E0BFA8; letter-spacing:.05em; display:block; margin-top:.3rem}
.cifra a{text-decoration:underline; text-underline-offset:3px}

/* ─── Secciones ──────────────────────────────────────────────────── */
.sec{padding:clamp(3.5rem,7vw,6rem) 0}
.sec-crema{background:var(--crema-2)}
.sec-cabeza{max-width:56ch; margin-bottom:clamp(2rem,4vw,3rem)}
.sec-cabeza.centro{margin-inline:auto; text-align:center}
.ojillo{
  display:inline-block; font-size:.73rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--menta-osc); font-weight:700; margin-bottom:.9rem;
}
.sec-cabeza h2{color:var(--burdeo)}
.sec-cabeza p{color:var(--tinta-2); margin-top:1rem; font-size:1.06rem}
.parrafo-suave{color:var(--tinta-2); margin-top:1rem}
.ojillo-claro{color:var(--menta-cl)}
.linea-tiempo a{text-decoration:underline; text-underline-offset:3px}

/* ─── Tienda ─────────────────────────────────────────────────────── */
.tienda-barra{
  position:sticky; top:66px; z-index:40; background:var(--crema);
  padding:.9rem 0; margin-bottom:1.8rem; border-bottom:1px solid var(--crema-3);
}
.tienda-barra-in{display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}
.filtros{display:flex; gap:.45rem; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; flex:1; min-width:0}
.filtros::-webkit-scrollbar{display:none}
/* El difuminado avisa que la fila SIGUE, y sólo aparece cuando de verdad hay
   más que ver (lo pone tienda.js midiendo): si no, come el borde de la última
   categoría cuando todas caben. */
.filtros.hay-mas{
  --corta:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:var(--corta); mask-image:var(--corta);
}
.chip{
  white-space:nowrap; padding:.52rem 1rem; border-radius:999px; font-size:.88rem; font-weight:600;
  background:var(--crema-2); color:var(--tinta-2); box-shadow:inset 0 0 0 1px var(--crema-3);
  transition:background .2s, color .2s, box-shadow .2s; flex-shrink:0;
}
.chip:hover{background:var(--crema-3)}
.chip[aria-pressed="true"]{background:var(--burdeo); color:#fff; box-shadow:none}
.busca{position:relative; flex-shrink:0}
.busca input{
  width:210px; padding:.6rem 1rem .6rem 2.4rem; border-radius:999px; border:1px solid var(--crema-3);
  background:var(--blanco); font-size:.9rem;
}
.busca input:focus{outline:none; border-color:var(--menta); box-shadow:0 0 0 3px rgba(63,158,134,.18)}
.busca svg{position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:var(--tinta-3)}
/* En móvil el buscador y el dado comparten fila: el dado solo ocupa lo suyo. */
@media (max-width:620px){
  .busca{flex:1 1 130px; width:auto}
  .busca input{width:100%}
  .tienda-barra{top:60px}
}

.aviso-precio{
  display:flex; gap:.7rem; align-items:flex-start; background:#FFF8E8; border:1px solid #F0DCA8;
  color:#7A5A16; border-radius:var(--radio-sm); padding:.8rem 1rem; font-size:.85rem; margin-bottom:1.6rem;
}
.aviso-precio b{color:#5A420F}

.grilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:1.15rem}
@media (max-width:480px){ .grilla{grid-template-columns:repeat(2,1fr); gap:.8rem} }

/* Las tarjetas entran escalonadas al llegar el scroll (anima.js pone .dentro).
   El :hover cuelga de .dentro: si no, pelea con el transform de la entrada. */
.tarjeta{
  background:var(--blanco); border-radius:var(--radio); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sombra); opacity:0; transform:translateY(22px) scale(.97);
  transition:opacity .55s var(--ease), transform .55s var(--ease), box-shadow .3s;
}
.tarjeta.dentro{opacity:1; transform:none}
.tarjeta.dentro:hover{transform:translateY(-6px); box-shadow:var(--sombra-alta)}
.tarjeta-foto{position:relative; aspect-ratio:1; background:var(--crema-2); overflow:hidden}
.tarjeta-foto img{width:100%; height:100%; object-fit:cover; transform:scale(var(--zoom-t)); transition:transform .6s var(--ease)}
.tarjeta:hover .tarjeta-foto img{transform:scale(calc(var(--zoom-t) + .1)) rotate(-1.2deg)}
/* Barrido de brillo, como la luz de la vitrina pasando por encima */
.tarjeta-foto::after{
  content:''; position:absolute; inset:-10%; pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-130%); transition:transform .85s var(--ease);
}
.tarjeta:hover .tarjeta-foto::after{transform:translateX(130%)}
.tarjeta-mas{
  position:absolute; right:.55rem; bottom:.55rem; width:38px; height:38px; border-radius:50%;
  background:var(--burdeo); color:#fff; display:grid; place-items:center; font-size:1.4rem; line-height:1;
  box-shadow:0 10px 22px -10px rgba(110,42,54,.95); pointer-events:none;
  opacity:0; transform:translateY(12px) scale(.75); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.tarjeta:hover .tarjeta-mas,.tarjeta:focus-within .tarjeta-mas{opacity:1; transform:none}
.tarjeta-etq{
  position:absolute; top:.6rem; left:.6rem; background:rgba(255,255,255,.94); color:var(--cafe-osc);
  padding:.22rem .58rem; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.03em;
}
.tarjeta-cuerpo{padding:.85rem .9rem 1rem; display:flex; flex-direction:column; flex:1; gap:.3rem}
.tarjeta h3{font-size:1.02rem; color:var(--burdeo); line-height:1.2}
.tarjeta .nota{font-size:.79rem; color:var(--tinta-3); line-height:1.4; margin:0}
.tarjeta .precio{margin-top:auto; padding-top:.6rem; font-weight:700; color:var(--cafe-osc); font-size:.95rem}
.tarjeta .precio small{font-weight:500; color:var(--tinta-3); font-size:.76rem; display:block; letter-spacing:0}
.tarjeta .add{
  margin-top:.6rem; width:100%; padding:.6rem; border-radius:999px; background:var(--crema-2);
  color:var(--burdeo); font-weight:600; font-size:.88rem; transition:background .2s, color .2s;
}
.tarjeta .add:hover{background:var(--burdeo); color:#fff}
.vacio{text-align:center; padding:3rem 1rem; color:var(--tinta-3)}

/* ─── Modal de formato ───────────────────────────────────────────── */
.velo{
  position:fixed; inset:0; z-index:90; background:rgba(43,29,23,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:grid; place-items:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity .3s;
}
.velo.abierto{opacity:1; pointer-events:auto}
.modal{
  background:var(--crema); border-radius:var(--radio-xl); width:min(100%,470px); max-height:88vh;
  overflow-y:auto; box-shadow:var(--sombra-alta); transform:translateY(18px) scale(.98);
  transition:transform .35s var(--ease);
}
.velo.abierto .modal{transform:none}
.modal-cab{display:flex; gap:1rem; padding:1.2rem 1.3rem; align-items:center; border-bottom:1px solid var(--crema-3)}
.modal-cab img{width:66px; height:66px; border-radius:16px; object-fit:cover; flex-shrink:0}
.modal-cab h3{color:var(--burdeo); font-size:1.25rem}
.modal-cab p{margin:.15rem 0 0; font-size:.83rem; color:var(--tinta-3)}
.modal-cab .x{margin-left:auto; align-self:flex-start; width:36px; height:36px; border-radius:50%; background:var(--crema-2); display:grid; place-items:center; flex-shrink:0}
.modal-cuerpo{padding:1.2rem 1.3rem}
.campo{margin-bottom:1.15rem}
.campo>label{display:block; font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.55rem}
.formatos{display:flex; flex-direction:column; gap:.5rem}
.formato{
  display:flex; align-items:center; gap:.8rem; padding:.75rem .9rem; border-radius:14px;
  background:var(--blanco); box-shadow:inset 0 0 0 1.5px var(--crema-3); cursor:pointer; transition:box-shadow .2s, background .2s;
}
.formato:hover{box-shadow:inset 0 0 0 1.5px var(--cafe-cl)}
.formato input{accent-color:var(--burdeo); width:19px; height:19px; flex-shrink:0}
.formato .f-txt{flex:1; min-width:0}
.formato .f-txt b{display:block; font-size:.95rem; color:var(--tinta)}
.formato .f-txt span{font-size:.78rem; color:var(--tinta-3)}
.formato .f-p{font-weight:700; color:var(--cafe-osc); white-space:nowrap}
.formato:has(input:checked){box-shadow:inset 0 0 0 2px var(--burdeo); background:var(--crema-2)}

.extra-sabores{display:flex; flex-direction:column; gap:.5rem}
.extra-sabores select{
  width:100%; padding:.7rem .9rem; border-radius:12px; border:1.5px solid var(--crema-3);
  background:var(--blanco); font-size:.92rem;
}
.extra-sabores select:focus{outline:none; border-color:var(--menta)}

.cantidad{display:flex; align-items:center; gap:.85rem}
.cantidad button{width:40px; height:40px; border-radius:50%; background:var(--crema-2); color:var(--burdeo); font-size:1.25rem; font-weight:700; display:grid; place-items:center}
.cantidad button:hover{background:var(--crema-3)}
.cantidad b{font-size:1.15rem; min-width:2ch; text-align:center}

.modal-pie{padding:1rem 1.3rem 1.3rem; border-top:1px solid var(--crema-3); display:flex; gap:.9rem; align-items:center}
.modal-pie .total{font-family:var(--serif); font-size:1.5rem; color:var(--burdeo)}
.modal-pie .btn{flex:1}

/* ─── Carrito ────────────────────────────────────────────────────── */
.carro{
  position:fixed; top:0; right:0; bottom:0; width:min(100%,430px); z-index:95; background:var(--crema);
  box-shadow:-24px 0 60px -30px rgba(43,29,23,.5); display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .42s var(--ease);
}
.carro.abierto{transform:none}
.carro-cab{display:flex; align-items:center; gap:.8rem; padding:1.2rem 1.3rem; border-bottom:1px solid var(--crema-3)}
.carro-cab h3{color:var(--burdeo); margin-right:auto; font-size:1.3rem}
.carro-cab .x{width:38px; height:38px; border-radius:50%; background:var(--crema-2); display:grid; place-items:center}
.carro-lista{flex:1; overflow-y:auto; padding:1rem 1.3rem; display:flex; flex-direction:column; gap:.9rem}
.carro-vacio{text-align:center; color:var(--tinta-3); padding:3rem 1rem}
.carro-vacio .em{font-size:3rem; display:block; margin-bottom:.6rem}
.linea{display:flex; gap:.8rem; align-items:flex-start; background:var(--blanco); border-radius:var(--radio-sm); padding:.7rem; box-shadow:var(--sombra)}
.linea img{width:54px; height:54px; border-radius:10px; object-fit:cover; flex-shrink:0}
.linea .l-txt{flex:1; min-width:0}
.linea .l-txt b{display:block; font-size:.93rem; color:var(--burdeo); line-height:1.25}
.linea .l-txt span{font-size:.77rem; color:var(--tinta-3); display:block; line-height:1.4}
.linea .l-der{text-align:right; flex-shrink:0}
.linea .l-der b{display:block; font-size:.92rem; color:var(--cafe-osc)}
.linea .quitar{font-size:.75rem; color:var(--tinta-3); text-decoration:underline; margin-top:.25rem}
.linea .quitar:hover{color:#B3261E}
.carro-pie{border-top:1px solid var(--crema-3); padding:1.1rem 1.3rem 1.3rem; background:var(--crema-2)}
.entrega{display:flex; gap:.5rem; margin-bottom:.9rem}
.entrega label{
  flex:1; text-align:center; padding:.6rem .4rem; border-radius:12px; background:var(--blanco);
  box-shadow:inset 0 0 0 1.5px var(--crema-3); cursor:pointer; font-size:.85rem; font-weight:600; transition:box-shadow .2s;
}
.entrega label:has(input:checked){box-shadow:inset 0 0 0 2px var(--burdeo); background:var(--crema)}
.entrega input{position:absolute; opacity:0; pointer-events:none}
.entrega label span{display:block; font-size:.72rem; font-weight:500; color:var(--tinta-3)}
.sumas{font-size:.9rem; color:var(--tinta-2); margin-bottom:.8rem}
.sumas div{display:flex; justify-content:space-between; padding:.18rem 0}
.sumas .tot{border-top:1px solid var(--crema-3); margin-top:.4rem; padding-top:.5rem; font-family:var(--serif); font-size:1.35rem; color:var(--burdeo); font-weight:600}
.nota-min{font-size:.75rem; color:var(--tinta-3); text-align:center; margin-top:.7rem; line-height:1.45}

/* ─── Pasos ──────────────────────────────────────────────────────── */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media (max-width:800px){ .pasos{grid-template-columns:1fr} }
.paso{background:var(--crema); border-radius:var(--radio); padding:1.6rem; box-shadow:var(--sombra); position:relative}
.sec-crema .paso{background:var(--blanco)}
.paso .n{
  width:42px; height:42px; border-radius:50%; background:var(--menta); color:#062A22;
  display:grid; place-items:center; font-family:var(--serif); font-size:1.3rem; font-weight:700; margin-bottom:1rem;
}
.paso h3{color:var(--burdeo); font-size:1.15rem; margin-bottom:.5rem}
.paso p{font-size:.94rem; color:var(--tinta-2); margin:0}

/* ─── Gift card ──────────────────────────────────────────────────── */
.gift{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center;
  background:linear-gradient(135deg,var(--burdeo),var(--burdeo-osc)); color:#F7E8D8;
  border-radius:var(--radio-xl); padding:clamp(1.8rem,4vw,3rem); overflow:hidden; position:relative;
}
@media (max-width:800px){ .gift{grid-template-columns:1fr} }
.gift h2{color:#fff}
.gift p{color:#E4C9B4}
.gift-montos{display:flex; gap:.6rem; flex-wrap:wrap; margin:1.4rem 0}
.gift-montos button{
  padding:.65rem 1.15rem; border-radius:999px; background:rgba(255,255,255,.1); color:#fff;
  font-weight:600; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); transition:background .2s, box-shadow .2s;
}
.gift-montos button:hover{background:rgba(255,255,255,.2)}
.gift-montos button[aria-pressed="true"]{background:var(--menta); color:#062A22; box-shadow:none}
.gift-art{
  aspect-ratio:1.6/1; border-radius:var(--radio); background:linear-gradient(135deg,var(--cafe),var(--cafe-osc));
  display:grid; place-content:center; text-align:center; padding:1.5rem; box-shadow:var(--sombra-alta);
  position:relative; overflow:hidden;
}
.gift-art::after{content:''; position:absolute; inset:auto -30% -60% -30%; height:120%; background:radial-gradient(50% 50% at 50% 0,rgba(255,255,255,.16),transparent 70%)}
.gift-art img{width:76px; margin:0 auto .7rem; border-radius:50%}
.gift-art b{font-family:var(--serif); font-size:1.5rem; color:#fff; display:block}
.gift-art span{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#EFD4BE}

/* ─── Historia ───────────────────────────────────────────────────── */
.historia{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,4vw,4rem); align-items:center}
@media (max-width:860px){ .historia{grid-template-columns:1fr} }
.linea-tiempo{list-style:none; margin:1.8rem 0 0; padding:0; position:relative}
.linea-tiempo::before{content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--crema-3)}
.linea-tiempo li{position:relative; padding:0 0 1.5rem 2.4rem}
.linea-tiempo li:last-child{padding-bottom:0}
.linea-tiempo li::before{
  content:''; position:absolute; left:2px; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--crema); box-shadow:inset 0 0 0 3px var(--menta);
}
.linea-tiempo b{display:block; font-family:var(--serif); font-size:1.2rem; color:var(--burdeo)}
.linea-tiempo span{font-size:.94rem; color:var(--tinta-2)}
.foto-historia{border-radius:var(--radio-xl); overflow:hidden; box-shadow:var(--sombra-alta); aspect-ratio:4/3}
.foto-historia img{width:100%; height:100%; object-fit:cover}

/* ─── Reseñas ────────────────────────────────────────────────────── */
.resenas{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
@media (max-width:860px){ .resenas{grid-template-columns:1fr} }
.resena{background:var(--blanco); border-radius:var(--radio); padding:1.5rem; box-shadow:var(--sombra)}
.estrellas{color:#E8A33D; font-size:1rem; letter-spacing:.12em; margin-bottom:.7rem}
.resena p{font-size:.97rem; color:var(--tinta-2); margin-bottom:1rem}
.resena footer{font-size:.83rem; color:var(--tinta-3)}
.resena footer b{color:var(--burdeo); display:block; font-family:var(--serif); font-size:.98rem}

/* ─── Visítanos ──────────────────────────────────────────────────── */
.visita{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.5rem)}
@media (max-width:800px){ .visita{grid-template-columns:1fr} }
.datos{display:flex; flex-direction:column; gap:1.1rem}
.dato{display:flex; gap:.9rem; align-items:flex-start}
.dato .ic{width:44px; height:44px; border-radius:14px; background:var(--crema-2); display:grid; place-items:center; flex-shrink:0; font-size:1.2rem}
.sec-crema .dato .ic{background:var(--crema)}
.dato b{display:block; color:var(--burdeo); font-family:var(--serif); font-size:1.06rem}
.dato span,.dato a{font-size:.94rem; color:var(--tinta-2)}
.dato a{text-decoration:underline; text-underline-offset:3px}
.mapa{border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); min-height:290px; background:var(--crema-3)}
.mapa iframe{width:100%; height:100%; min-height:290px; border:0; display:block}

/* ─── Pie ────────────────────────────────────────────────────────── */
.pie{background:var(--burdeo-osc); color:#D9BCA9; padding:clamp(2.5rem,5vw,4rem) 0 1.5rem; font-size:.92rem}
.pie-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem}
@media (max-width:760px){ .pie-in{grid-template-columns:1fr; gap:1.8rem} }
.pie h4{color:#fff; font-size:1.02rem; margin-bottom:.8rem; font-family:var(--sans); font-weight:600; letter-spacing:.02em}
.pie a:hover{color:#fff}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem}
.pie-marca{display:flex; align-items:center; gap:.7rem; margin-bottom:1rem}
.pie-marca img{width:52px; height:52px; border-radius:50%}
.pie-marca b{font-family:var(--serif); font-size:1.2rem; color:#fff; display:block}
.pie-marca span{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#B99A86}
.pie-abajo{
  margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#B99A86;
}
.pie-abajo a{text-decoration:underline; text-underline-offset:3px}

/* ─── WhatsApp flotante ──────────────────────────────────────────── */
.wa{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:70; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px -10px rgba(37,211,102,.8);
  transition:transform .25s var(--ease);
}
.wa:hover{transform:scale(1.08)}
@media (max-width:620px){ .wa{bottom:5.2rem} }

/* Barra inferior móvil con el total */
.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:75; background:var(--burdeo); color:#fff;
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); display:none;
  align-items:center; gap:1rem; box-shadow:0 -8px 24px -12px rgba(43,29,23,.5);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.barra-movil.visible{transform:none}
@media (max-width:620px){ .barra-movil{display:flex} }
.barra-movil .bm-txt{flex:1; min-width:0; line-height:1.2}
.barra-movil .bm-txt b{display:block; font-family:var(--serif); font-size:1.2rem}
.barra-movil .bm-txt span{font-size:.75rem; color:#E0BFA8}
.barra-movil .btn{padding:.7rem 1.2rem; font-size:.92rem}

/* ─── Aviso emergente (toast) ────────────────────────────────────── */
/* ⚠️ El translateY solo no basta para esconderlo: como el toast es bajito,
   140% de su propia altura son ~55px y en móvil (bottom:5.5rem) seguía
   asomando como una píldora oscura vacía sobre las tarjetas. */
.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translate(-50%,140%); z-index:120;
  background:var(--tinta); color:#fff; padding:.8rem 1.3rem; border-radius:999px; font-size:.9rem;
  box-shadow:var(--sombra-alta); max-width:90vw; text-align:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .4s var(--ease), opacity .3s, visibility .3s;
}
.toast.visible{transform:translate(-50%,0); opacity:1; visibility:visible}
@media (max-width:620px){ .toast{bottom:5.5rem} }

/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO
   Regla de la casa: nada se mueve por moverse. Cada animación existe
   para mostrar helado (la vitrina que rota, la cinta), para premiar
   una acción (la bola que vuela al carro) o para dar ritmo de lectura
   (máscaras, revelados, contadores).
   ══════════════════════════════════════════════════════════════════ */

/* Máscaras y revelados */
.wm{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; margin-bottom:-.06em}
.w{display:inline-block; transform:translateY(110%) rotate(3deg); transition:transform 1.05s var(--ease)}
.listo .w{transform:none}
.rev{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rev.dentro{opacity:1; transform:none}

/* Barra de progreso de lectura, pegada al borde de la cabecera */
.progreso{
  position:absolute; left:0; right:0; bottom:-1px; height:3px; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--menta),var(--cafe-cl),var(--burdeo));
}

/* El collage flota. Se usa la propiedad `translate` (no `transform`) a
   propósito: así el paralaje del puntero puede escribir `transform`
   encima sin pisar la flotación. Las dos se componen. */
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes deriva{0%,100%{translate:0 0}33%{translate:3% -2%}66%{translate:-2% 2%}}
.hero::before{animation:deriva 26s ease-in-out infinite}
.hero-art .f1{animation:flota 8s ease-in-out infinite}
.hero-art .f2{animation:flota 6.2s ease-in-out infinite -1.5s}
.hero-art .f3{animation:flota 7.4s ease-in-out infinite -3s}
.hero-medalla{animation:flota 9s ease-in-out infinite -2s}

/* La bola grande va cambiando de sabor sola */
.hero-art .f1 .hf{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(calc(var(--zoom-h) + .1)) rotate(1.5deg);
  transition:opacity 1.1s var(--ease), transform 1.7s var(--ease);
}
.hero-art .f1 .hf.act{opacity:1; transform:scale(var(--zoom-h))}

/* Rótulo que nombra el sabor que se está mostrando */
.hero-vitrina{
  display:inline-flex; align-items:center; gap:.55rem; background:var(--blanco);
  border-radius:999px; padding:.5rem 1.15rem .5rem .95rem; font-size:.92rem; color:var(--tinta-2);
  box-shadow:var(--sombra); margin:0 0 1.7rem;
}
.hero-vitrina b{color:var(--burdeo); font-weight:600; transition:opacity .25s, transform .25s var(--ease)}
.hero-vitrina b.cambia{opacity:0; transform:translateY(-9px)}
.punto{width:9px; height:9px; border-radius:50%; background:var(--menta); flex-shrink:0; animation:late 2.2s infinite}
@keyframes late{
  0%{box-shadow:0 0 0 0 rgba(63,158,134,.55)}
  70%{box-shadow:0 0 0 11px rgba(63,158,134,0)}
  100%{box-shadow:0 0 0 0 rgba(63,158,134,0)}
}

/* Borde derretido. La forma va por máscara y el color por fondo, así el
   mismo elemento sirve para cualquier franja con sólo cambiar el color. */
/* La baldosa es ancha (340px) y las gotas van de distinto tamaño y a distinta
   altura a propósito: con 4 gotas iguales cada 160px el borde se lee como una
   greca de festón, no como algo que se está derritiendo. */
.goteo{
  position:absolute; left:0; right:0; bottom:-34px; height:46px; background:var(--burdeo); pointer-events:none;
  --gota:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 46'%3E%3Cpath d='M0 0h340v12H0z'/%3E%3Ccircle cx='26' cy='13' r='12'/%3E%3Ccircle cx='74' cy='20' r='19'/%3E%3Ccircle cx='120' cy='12' r='11'/%3E%3Ccircle cx='158' cy='17' r='16'/%3E%3Ccircle cx='208' cy='11' r='10'/%3E%3Ccircle cx='252' cy='21' r='21'/%3E%3Ccircle cx='302' cy='14' r='13'/%3E%3Ccircle cx='332' cy='11' r='10'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--gota); mask-image:var(--gota);
  -webkit-mask-size:340px 46px; mask-size:340px 46px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}

/* ─── La vitrina que nunca para ──────────────────────────────────── */
/* Abajo va corto: la sección siguiente ya trae su propio aire y si no,
   queda un hueco muerto de 10rem entre la cinta y "Elige tus sabores". */
.vitrina{padding:clamp(3rem,6vw,4.5rem) 0 clamp(.5rem,1.5vw,1.2rem); overflow:hidden}
.vitrina-tit{color:var(--burdeo); text-align:center}
.vitrina-bajada{text-align:center; color:var(--tinta-2); max-width:54ch; margin:1rem auto clamp(1.8rem,3vw,2.6rem)}
.cinta{
  overflow:hidden; padding:.5rem 0;
  --difumina:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:var(--difumina); mask-image:var(--difumina);
}
.cinta+.cinta{margin-top:.6rem}
/* La separación va como margen del ítem, NO como `gap`: con `gap` el
   translateX(-50%) cae medio hueco corrido y la cinta da un salto visible
   en cada vuelta. */
.cinta-tren{display:flex; width:max-content; animation:corre 64s linear infinite}
.cinta-rev .cinta-tren{animation-direction:reverse; animation-duration:78s}
@keyframes corre{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.cinta:hover .cinta-tren,.cinta:focus-within .cinta-tren{animation-play-state:paused}
.cinta-item{
  flex-shrink:0; width:126px; margin-right:1.1rem; text-align:center; padding:0;
  transition:transform .32s var(--ease);
}
.ci-foto{
  display:block; width:110px; height:110px; border-radius:50%; overflow:hidden; margin:0 auto .55rem;
  background:var(--crema-2); box-shadow:var(--sombra); transition:box-shadow .32s;
}
.ci-foto img{width:100%; height:100%; object-fit:cover; transform:scale(var(--zoom)); transition:transform .5s var(--ease)}
.ci-nom{display:block; font-size:.79rem; line-height:1.25; color:var(--tinta-2); font-weight:500}
.cinta-item:hover{transform:translateY(-8px) scale(1.06)}
.cinta-item:hover .ci-foto{box-shadow:var(--sombra-alta)}
.cinta-item:hover .ci-foto img{transform:scale(calc(var(--zoom) + .12))}
.cinta-item:hover .ci-nom{color:var(--burdeo)}
@media (max-width:520px){
  .cinta-item{width:100px; margin-right:.8rem}
  .ci-foto{width:88px; height:88px}
}

/* ─── Sorpréndeme ────────────────────────────────────────────────── */
.btn-sorpresa{
  display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1.1rem; border-radius:999px;
  background:var(--menta); color:#062A22; font-weight:600; font-size:.88rem; flex-shrink:0; white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(63,158,134,.9); transition:transform .2s var(--ease), background .2s, color .2s;
}
.btn-sorpresa:hover{background:var(--menta-osc); color:#fff; transform:translateY(-2px)}
.btn-sorpresa .dado{display:inline-block; transition:transform .45s var(--ease)}
.btn-sorpresa:hover .dado{transform:rotate(26deg) scale(1.18)}

.ruleta{
  position:fixed; inset:0; z-index:110; background:rgba(43,29,23,.66);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  display:grid; place-items:center; padding:1.5rem; opacity:0; pointer-events:none; transition:opacity .28s;
}
.ruleta.abierto{opacity:1; pointer-events:auto}
.ruleta-caja{text-align:center; color:#fff; max-width:22rem}
.ruleta-foto{
  width:168px; height:168px; border-radius:50%; overflow:hidden; margin:0 auto 1.2rem;
  background:var(--crema-2); box-shadow:0 30px 60px -22px rgba(0,0,0,.7);
  animation:tiembla .55s ease-in-out infinite; transition:transform .4s var(--ease);
}
.ruleta-foto img{width:100%; height:100%; object-fit:cover}
.ruleta.parado .ruleta-foto{animation:none; transform:scale(1.06)}
@keyframes tiembla{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.05) rotate(2deg)}}
.ruleta b{display:block; font-family:var(--serif); font-size:clamp(1.7rem,5vw,2.3rem); line-height:1.1}
.ruleta span{display:block; margin-top:.5rem; font-size:.9rem; color:#E0BFA8}

/* ══════════════════════════════════════════════════════════════════
   CHECKOUT CON PASARELA (simulado)
   Ocupa la pantalla entera a propósito: pagar es un momento aparte, y
   así se parece a lo que el cliente ya vivió comprando en otros sitios.
   ══════════════════════════════════════════════════════════════════ */
.pago{
  position:fixed; inset:0; z-index:130; background:var(--crema); overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.pago.abierto{opacity:1; pointer-events:auto}
.pago-cab{background:var(--blanco); border-bottom:1px solid var(--crema-3); position:sticky; top:0; z-index:2}
.pago-cab-in{display:flex; align-items:center; gap:1rem; padding:.85rem 0; min-height:62px}
.pago-marca{display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-size:1.1rem; color:var(--burdeo); font-weight:600}
.pago-marca img{border-radius:50%}
.pago-sim{
  margin-left:auto; background:#FFF8E8; border:1px solid #F0DCA8; color:#7A5A16;
  border-radius:999px; padding:.3rem .8rem; font-size:.75rem; font-weight:600;
}
.pago-cab .x{width:38px; height:38px; border-radius:50%; background:var(--crema-2); display:grid; place-items:center; flex-shrink:0}
.pago-cuerpo{padding:clamp(1.5rem,4vw,2.8rem) 0 4rem}
@media (max-width:520px){ .pago-sim{font-size:.68rem; padding:.25rem .55rem} .pago-marca span{display:none} }

/* Los tres pasos */
.pg-pasos{list-style:none; display:flex; gap:.5rem; margin:0 0 clamp(1.5rem,3vw,2.2rem); padding:0; flex-wrap:wrap}
.pg-pasos li{
  display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--tinta-3);
  background:var(--blanco); border-radius:999px; padding:.4rem .95rem .4rem .4rem; box-shadow:inset 0 0 0 1px var(--crema-3);
}
.pg-pasos b{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--crema-2); color:var(--tinta-3); font-size:.76rem;
}
.pg-pasos li.act{color:var(--burdeo); box-shadow:inset 0 0 0 1.6px var(--burdeo)}
.pg-pasos li.act b{background:var(--burdeo); color:#fff}
.pg-pasos li.ok b{background:var(--menta); color:#062A22}

.pg-cols{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start}
@media (max-width:860px){ .pg-cols{grid-template-columns:1fr} }
.pg-form h2{color:var(--burdeo); font-size:clamp(1.5rem,3vw,2rem); margin-bottom:.5rem}
.pg-ayuda{color:var(--tinta-2); font-size:.95rem; margin-bottom:1.5rem}

.pg-campo{display:block; margin-bottom:1rem}
.pg-campo span{display:block; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:.4rem}
.pg-campo input{
  width:100%; padding:.8rem 1rem; border-radius:12px; border:1.5px solid var(--crema-3);
  background:var(--blanco); font-size:1rem;
}
.pg-campo input:focus{outline:none; border-color:var(--menta); box-shadow:0 0 0 3px rgba(63,158,134,.18)}
.pg-nota-datos{
  font-size:.83rem; color:var(--tinta-2); background:var(--crema-2); border-radius:var(--radio-sm);
  padding:.8rem 1rem; margin:1.2rem 0 1.4rem; line-height:1.55;
}

/* Pasarelas */
.pg-vias{display:flex; flex-direction:column; gap:.6rem; margin-bottom:.4rem}
.pg-via{
  display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; border-radius:14px; cursor:pointer;
  background:var(--blanco); box-shadow:inset 0 0 0 1.5px var(--crema-3); transition:box-shadow .2s, background .2s;
}
.pg-via:hover{box-shadow:inset 0 0 0 1.5px var(--cafe-cl)}
.pg-via.on{box-shadow:inset 0 0 0 2px var(--burdeo); background:var(--crema-2)}
.pg-via input{accent-color:var(--burdeo); width:19px; height:19px; flex-shrink:0}
.pg-via-txt b{display:block; font-size:1rem; color:var(--tinta)}
.pg-via-txt span{font-size:.83rem; color:var(--tinta-3)}
.pg-botones{display:flex; gap:.7rem; flex-wrap:wrap}
.pg-botones .btn{flex:1; min-width:9rem}

/* Resumen lateral */
.pg-resumen{background:var(--blanco); border-radius:var(--radio); padding:1.3rem; box-shadow:var(--sombra); position:sticky; top:88px}
@media (max-width:860px){ .pg-resumen{position:static} }
.pg-resumen h3{color:var(--burdeo); font-size:1.15rem; margin-bottom:.9rem}
.pg-linea{display:flex; justify-content:space-between; gap:.8rem; font-size:.88rem; padding:.4rem 0; color:var(--tinta-2)}
.pg-linea i{display:block; font-style:normal; font-size:.76rem; color:var(--tinta-3)}
.pg-linea b{color:var(--cafe-osc); white-space:nowrap}
.pg-sum{display:flex; justify-content:space-between; font-size:.88rem; color:var(--tinta-2); padding:.25rem 0; border-top:1px solid var(--crema-2); margin-top:.4rem}
.pg-tot{font-family:var(--serif); font-size:1.35rem; color:var(--burdeo); font-weight:600; border-top:1px solid var(--crema-3); padding-top:.6rem}

/* Salto a la pasarela */
.pg-salto{text-align:center; max-width:34rem; margin:clamp(2rem,6vw,4rem) auto}
.pg-salto h2{color:var(--burdeo); font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:.8rem}
.pg-salto p{color:var(--tinta-2); font-size:.98rem}
.pg-spin{
  width:52px; height:52px; margin:0 auto 1.6rem; border-radius:50%;
  border:4px solid var(--crema-3); border-top-color:var(--burdeo); animation:vuelta 1s linear infinite;
}
@keyframes vuelta{to{transform:rotate(360deg)}}
.pg-sim{
  display:inline-block; margin-top:1.2rem; background:#FFF8E8; border:1px solid #F0DCA8; color:#7A5A16;
  border-radius:var(--radio-sm); padding:.6rem 1rem; font-size:.85rem;
}

/* Comprobante */
.pg-listo{max-width:40rem; margin:clamp(1rem,4vw,2.5rem) auto; text-align:center}
.pg-tic{
  width:70px; height:70px; border-radius:50%; background:var(--menta); color:#fff;
  display:grid; place-items:center; font-size:2.2rem; margin:0 auto 1.2rem;
  box-shadow:0 14px 34px -14px rgba(63,158,134,.9);
}
.pg-listo h2{color:var(--burdeo); font-size:clamp(1.7rem,4vw,2.4rem)}
.pg-folio{font-family:var(--dato,var(--sans)); font-size:1.05rem; color:var(--tinta-2); letter-spacing:.1em; margin-top:.5rem}
.pg-recibo{background:var(--blanco); border-radius:var(--radio); padding:1.2rem 1.4rem; box-shadow:var(--sombra); margin:1.8rem 0; text-align:left}
.pg-fila{display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.92rem; color:var(--tinta-2); border-bottom:1px solid var(--crema-2)}
.pg-fila:last-child{border-bottom:0}
.pg-fila b{color:var(--tinta); text-align:right}
.pg-fila.fuerte{font-family:var(--serif); font-size:1.2rem; color:var(--burdeo); padding-top:.8rem}
.pg-fila.fuerte b{color:var(--burdeo)}
.pg-detras{
  background:linear-gradient(135deg,var(--burdeo),var(--burdeo-osc)); color:#F0DBC9;
  border-radius:var(--radio); padding:1.4rem 1.5rem; text-align:left; margin-bottom:1.4rem;
}
.pg-detras b{color:#fff; display:block; margin-bottom:.7rem; font-family:var(--serif); font-size:1.1rem}
.pg-detras ul{margin:0 0 1.2rem; padding-left:1.1rem; display:flex; flex-direction:column; gap:.5rem}
.pg-detras li{font-size:.92rem; line-height:1.55}
.pg-detras li b{display:inline; margin:0; font-family:var(--sans); font-size:inherit}

/* Botón de WhatsApp secundario en el carrito */
.btn-wa{margin-top:.6rem; font-size:.92rem; padding:.75rem 1.2rem}

/* ─── La bola que vuela al carro ─────────────────────────────────── */
.vuela{
  position:fixed; z-index:200; border-radius:18px; object-fit:cover; pointer-events:none;
  box-shadow:var(--sombra-alta);
}
@keyframes pop{0%{transform:scale(1)} 40%{transform:scale(1.6)} 100%{transform:scale(1)}}
.btn-carro .cuenta.pop{animation:pop .55s var(--ease)}
@keyframes sacude{
  0%,100%{transform:translateY(0)} 25%{transform:translateY(-4px) rotate(-3deg)}
  60%{transform:translateY(-1px) rotate(2deg)}
}
.btn-carro.sacude{animation:sacude .5s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; animation-iteration-count:1 !important}
  .w{transform:none !important}
  .rev,.tarjeta{opacity:1 !important; transform:none !important}
  /* Sin animación la cinta se queda quieta: se deja arrastrable a mano. */
  .cinta{overflow-x:auto}
  .cinta-tren{animation:none}
}

@media print{ .cab,.wa,.barra-movil,.carro,.velo,.demo-tira{display:none !important} }

/* ═══ Asistente de la heladería ═══════════════════════════════════════
   El botón va abajo a la DERECHA. El de WhatsApp ya vive ahí, así que
   este se apila encima en vez de taparlo: dos flotantes peleando la
   misma esquina es la forma más rápida de que ninguno se toque.
   Y nada flotante puede tapar el CTA: se midió con elementFromPoint. */
.oc-btn{position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:60; display:flex; align-items:center; gap:9px; border:0; cursor:pointer;
  background:var(--burdeo,#6E2A36); color:#fff; font:700 14px/1 var(--sans,inherit);
  padding:13px 18px; border-radius:40px; box-shadow:0 10px 26px rgba(110,42,54,.34);
  transition:transform .18s, box-shadow .18s, opacity .18s}
.oc-btn:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(110,42,54,.45)}
.oc-btn-ico{font-size:19px}
.oc-btn.oculto{opacity:0; pointer-events:none; transform:scale(.9)}

.oc-panel{position:fixed; right:16px; bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:61; width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100dvh - 150px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--crema,#FAF3E7); color:var(--tinta,#2B1D17);
  border:1px solid rgba(43,29,23,.14); border-radius:20px;
  box-shadow:0 24px 60px rgba(43,29,23,.34);
  opacity:0; transform:translateY(12px) scale(.98); transition:opacity .22s, transform .22s}
.oc-panel.abierto{opacity:1; transform:none}
/* 🔴 SIN esta línea el panel cerrado SIGUE ocupando la esquina y se come el
   clic del botón: el atributo `hidden` se implementa como `[hidden]{display:none}`
   en la hoja del navegador, y CUALQUIER `display` de autor lo pisa — el
   `display:flex` de arriba lo dejaba visible-pero-transparente. Con un
   .click() programático el bug no aparece; sólo se ve midiendo quién recibe
   el clic con elementFromPoint. */
.oc-panel[hidden]{display:none}

.oc-cab{display:flex; align-items:center; gap:10px; padding:13px 15px;
  background:var(--burdeo,#6E2A36); color:#fff; flex:0 0 auto}
.oc-cab-ico{font-size:20px}
.oc-cab-txt{flex:1; line-height:1.25}
.oc-cab-txt b{display:block; font-size:14.5px}
.oc-cab-txt small{font-size:11.5px; opacity:.75}
.oc-x{background:transparent; border:0; color:#fff; font-size:16px; cursor:pointer;
  opacity:.8; padding:4px 6px; border-radius:8px}
.oc-x:hover{opacity:1; background:rgba(255,255,255,.14)}

.oc-cuerpo{flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:10px}
.oc-msg{max-width:86%; padding:10px 13px; border-radius:15px; font-size:14.3px; line-height:1.55;
  overflow-wrap:anywhere}
.oc-bot{align-self:flex-start; background:#fff; border:1px solid rgba(43,29,23,.1);
  border-bottom-left-radius:5px}
.oc-yo{align-self:flex-end; background:var(--cafe,#8E5638); color:#fff; border-bottom-right-radius:5px}

.oc-pensando{display:flex; gap:5px; align-items:center; padding:14px}
.oc-pensando i{width:7px; height:7px; border-radius:50%; background:var(--cafe,#8E5638);
  opacity:.45; animation:oc-late 1.2s infinite}
.oc-pensando i:nth-child(2){animation-delay:.15s}
.oc-pensando i:nth-child(3){animation-delay:.3s}
@keyframes oc-late{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.oc-chips{display:flex; flex-wrap:wrap; gap:7px}
.oc-chip{font:600 12.8px/1.3 inherit; cursor:pointer; text-align:left;
  background:#fff; color:var(--tinta,#2B1D17); border:1px solid rgba(43,29,23,.16);
  padding:8px 12px; border-radius:20px; transition:.15s}
.oc-chip:hover{border-color:var(--cafe,#8E5638); background:rgba(142,86,56,.07)}

.oc-sugs{display:flex; flex-direction:column; gap:6px}
.oc-sug{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(43,29,23,.12); border-radius:13px; padding:8px 11px;
  transition:.15s}
.oc-sug:hover{border-color:var(--cafe,#8E5638); transform:translateX(2px)}
.oc-sug img{width:40px; height:40px; border-radius:9px; object-fit:cover; flex:0 0 auto}
.oc-sug-txt{display:flex; flex-direction:column; line-height:1.3; min-width:0}
.oc-sug-txt b{font-size:13.6px}
.oc-sug-txt small{font-size:11.5px; opacity:.6}

.oc-wa{align-self:flex-start; text-decoration:none; font-weight:700; font-size:13.5px;
  background:#25D366; color:#0a3d1f; padding:10px 15px; border-radius:22px}

.oc-pie{display:flex; gap:8px; padding:11px 12px; border-top:1px solid rgba(43,29,23,.1);
  background:#fff; flex:0 0 auto}
.oc-input{flex:1; min-width:0; font:inherit; font-size:14px; padding:10px 13px;
  border:1px solid rgba(43,29,23,.18); border-radius:22px; background:var(--crema,#FAF3E7);
  color:inherit}
.oc-input:focus{outline:2px solid var(--menta,#3F9E86); outline-offset:1px; border-color:transparent}
.oc-enviar{flex:0 0 auto; width:40px; border:0; cursor:pointer; border-radius:50%;
  background:var(--burdeo,#6E2A36); color:#fff; font-size:17px; font-weight:700}
.oc-enviar:hover{background:var(--cafe,#8E5638)}

.oc-aviso{padding:0 14px 11px; font-size:10.8px; line-height:1.45; opacity:.62;
  background:#fff; flex:0 0 auto}

@media(max-width:560px){
  /* El botón de WhatsApp vive en bottom≈83px y mide 56: medido, el del chat
     a 78px se le montaba encima. Se apila ARRIBA de él, no al lado. */
  .oc-panel{right:8px; left:8px; width:auto; bottom:calc(150px + env(safe-area-inset-bottom));
    height:min(68dvh, calc(100dvh - 210px))}
  .oc-btn{right:12px; bottom:calc(150px + env(safe-area-inset-bottom)); padding:11px 15px; font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .oc-panel,.oc-btn,.oc-sug{transition:none}
  .oc-pensando i{animation:none}
}
@media print{ .oc-btn,.oc-panel{display:none !important} }