/* ==========================================================================
   Hijos de la Gran Fruta · la página (14/10/2026, segunda vuelta)
   Móvil primero. Mosaico de colores de la marca, botellas dibujadas en SVG que
   flotan, y movimiento con propósito (Apple / Emil Kowalski).
   ========================================================================== */

:root {
  --naranja: #FF7F00;
  --naranja-hondo: #F26F00;   /* el de la portada: letra blanca grande a 3:1 o más */
  --menta: #36C188;
  --morado: #6732CB;
  --rosa: #EA005B;
  --botella: #1F4D2B;
  --rojo: #C8213A;
  --coral: #F26B4E;
  --amarillo: #F7C531;
  --verde: #4E9A3C;
  --crema: #F3E3B3;
  --accion: #6732CB;        /* lo que se toca: morado de la marca, letra blanca a 6.7:1 */
  --accion-hondo: #5326AD;

  --fondo: #FBF7F2;
  --superficie: #FFFFFF;
  --superficie-2: #F3EDE6;
  --tinta: #1B1916;
  --tinta-suave: #5B544C;
  --borde: rgba(27, 25, 22, 0.12);
  --sombra: 0 1px 2px rgba(27, 25, 22, 0.06), 0 8px 24px rgba(27, 25, 22, 0.08);
  --sombra-alta: 0 18px 50px rgba(27, 25, 22, 0.22);
  --error: #B4232C;
  --bien: #1E7A47;

  --display: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --cuerpo: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --radio: 22px;
  --ancho: 1160px;
  --lado: 16px;
  --alto-barra: 60px;
  color-scheme: light;
}

@media (min-width: 768px) { :root { --lado: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-barra) + 12px); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1rem/1.55 var(--cuerpo); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; border-radius: 10px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: var(--tinta); color: var(--fondo); font-weight: 700; transform: translateY(-200%); }
.saltar:focus { transform: none; }

/* La botella SVG llena su caja */
[data-botella] { display: block; }
[data-botella] .bot { display: block; width: 100%; height: auto; overflow: visible; }

/* ── Botones ────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border-radius: 999px; border: 0;
  font: 700 1rem/1 var(--cuerpo); text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.boton:active, .paso:active, .paso-grande:active, .barra-pedido:active, .chip:active, .boton-pedido:active, .hamburguesa:active { transform: scale(0.97); }
.boton-claro { background: #fff; color: #2A1600; box-shadow: 0 6px 20px rgba(80, 30, 0, 0.2); }
.boton-borde { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9); }
.boton-principal { background: var(--accion); color: #fff; }
.boton-principal[disabled] { opacity: 0.5; cursor: progress; }
.boton-whatsapp { background: var(--menta); color: #062A19; }
.boton-texto { border: 0; background: none; padding: 12px; font-weight: 700; color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.icono-boton { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--superficie-2); color: var(--tinta); transition: transform 160ms var(--ease-out); }
.icono-boton:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .boton-claro:hover { box-shadow: 0 10px 28px rgba(80, 30, 0, 0.28); }
  .boton-borde:hover { background: rgba(255, 255, 255, 0.14); }
  .boton-principal:hover:not([disabled]) { background: var(--accion-hondo); }
}

/* ── La barra de arriba: franja de colores, logo chico al bajar, navegación ── */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 40; padding-top: env(safe-area-inset-top); }
.barra-franja {
  display: block; height: 4px;
  background: linear-gradient(90deg, var(--naranja) 0 12.5%, var(--menta) 0 25%, var(--morado) 0 37.5%, var(--rosa) 0 50%,
    var(--rojo) 0 62.5%, var(--coral) 0 75%, var(--amarillo) 0 87.5%, var(--verde) 0 100%);
}
.barra-dentro {
  display: flex; align-items: center; gap: 10px; height: var(--alto-barra); padding: 0 var(--lado);
  background: rgba(251, 247, 242, 0.78); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease;
}
.barra[data-bajo] .barra-dentro { border-bottom-color: var(--borde); }

@media (prefers-reduced-transparency: reduce) { .barra-dentro { background: var(--fondo); backdrop-filter: none; } }
.barra-marca {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; margin-left: -6px; border-radius: 12px;
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s 240ms;
}
.barra-marca img { width: 30px; height: auto; }
/* El logo chico aparece cuando el grande de la portada ya no se ve (no repetir la marca). */
.barra[data-logo] .barra-marca { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s; }
.barra-nav { display: none; margin-left: auto; gap: 2px; }
.barra-nav a { display: grid; place-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; font-weight: 700; text-decoration: none; color: var(--tinta-suave); transition: color 160ms ease, background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .barra-nav a:hover { color: var(--tinta); background: var(--superficie-2); } }
.boton-pedido {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--accion); color: #fff; font-weight: 700; transition: transform 160ms var(--ease-out);
}
.contador { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--naranja); color: #2A1400; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.hamburguesa { margin-left: auto; position: relative; width: 48px; height: 48px; border: 0; border-radius: 14px; background: transparent; transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.hamburguesa span { position: absolute; left: 13px; right: 13px; height: 2.5px; border-radius: 2px; background: var(--tinta); transition: transform 220ms var(--ease-out), opacity 160ms ease; }
.hamburguesa span:nth-child(1) { top: 16px; }
.hamburguesa span:nth-child(2) { top: 23px; }
.hamburguesa span:nth-child(3) { top: 30px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) {
  .barra-nav { display: flex; }
  .boton-pedido { display: inline-flex; }
  .hamburguesa { display: none; }
}

/* El panel del teléfono: baja de la hamburguesa (nace de ella, no del centro). */
.panel-fondo { position: fixed; inset: 0; z-index: 35; background: rgba(12, 10, 8, 0.35); opacity: 0; transition: opacity 200ms ease; }
.panel-fondo[data-abierto] { opacity: 1; }
.panel-nav {
  position: fixed; z-index: 38; top: calc(env(safe-area-inset-top) + var(--alto-barra) + 10px); left: 12px; right: 12px;
  display: grid; gap: 6px; padding: 10px; border-radius: 24px; background: var(--superficie); box-shadow: var(--sombra-alta);
  transform-origin: top right; opacity: 0; transform: translateY(-8px) scale(0.97);
  transition: opacity 150ms ease, transform 150ms var(--ease-out);
}
.panel-nav[data-abierto] { opacity: 1; transform: none; transition-duration: 220ms; }
.panel-nav a:not(.boton) { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border-radius: 16px; font: 400 1.5rem/1 var(--display); text-decoration: none; }
.panel-nav a:not(.boton):active { background: var(--superficie-2); }
.panel-nav a span { font-family: var(--cuerpo); color: var(--tinta-suave); }
.panel-nav .boton { width: 100%; }

/* ── Portada compacta en mosaico ────────────────────────────────────────── */
.portada { padding: calc(env(safe-area-inset-top) + var(--alto-barra) + 16px) var(--lado) 0; }
.portada-marco { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 10px; }
.portada-intro {
  background: var(--naranja-hondo); color: #fff; border-radius: 28px; padding: 18px;
  display: grid; grid-template-columns: 88px 1fr; gap: 14px 16px; align-items: center;
}
.portada-logo { width: 88px; height: auto; grid-row: 1 / span 2; align-self: center; }
.sobretitulo { margin: 0 0 4px; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #3B1D00; }
.portada h1 { margin: 0; font: 400 clamp(1.7rem, 7.2vw, 3.6rem)/1 var(--display); letter-spacing: -0.005em; text-wrap: balance; color: #fff; }
.portada h1 span { display: block; color: #331900; }
.portada-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.portada-acciones .boton { flex: 1 1 0; padding: 0 12px; white-space: nowrap; }
.estado-local { grid-column: 1 / -1; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: #2A1400; }
.estado-local::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.estado-local[data-abierto="si"]::before { background: #0F6B3A; box-shadow: 0 0 0 4px rgba(15, 107, 58, 0.2); }
/* En el teléfono, los botones y el estado van debajo del logo y el título. */
.portada-copia { display: contents; }
.portada-copia > .sobretitulo, .portada-copia > h1 { grid-column: 2; }
.portada-copia > .sobretitulo { grid-row: 1; align-self: end; }
.portada-copia > h1 { grid-row: 2; align-self: start; }

.estante { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 30px; }
.baldosa { position: relative; height: 78px; border-radius: 18px; background: var(--b); }
.baldosa .flota { position: absolute; left: 50%; bottom: 6px; width: 70%; margin-left: -35%; }
@media (min-width: 600px) { .baldosa { height: 104px; } .estante { margin-top: 44px; } }
@media (min-width: 900px) {
  .portada-marco { grid-template-columns: 1.45fr 1fr; gap: 14px; align-items: stretch; }
  .portada-intro { padding: 34px; grid-template-columns: 140px 1fr; gap: 24px 30px; }
  .portada h1 { font-size: clamp(2.3rem, 3.6vw, 3.3rem); }
  .portada-logo { width: 140px; align-self: center; grid-row: auto; }
  .portada-copia { display: block; }
  .portada-acciones { margin-top: 20px; }
  .portada-acciones .boton { flex: 0 0 auto; }
  .estado-local { margin-top: 16px; }
  .estante { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; margin-top: 0; gap: 14px; padding-top: 40px; }
  .baldosa { height: auto; min-height: 120px; border-radius: 24px; }
  .baldosa .flota { width: 44%; margin-left: -22%; bottom: 14px; }
}

/* Las botellas: entran escalonadas una vez, flotan suave, se ladean al pasar. */
.flota { animation: flotar 4.6s ease-in-out infinite; animation-delay: calc(var(--f, 0) * -0.75s); }
.flota > [data-botella], .desfile-b > [data-botella] { transition: transform 320ms var(--ease-out); transform-origin: 50% 90%; }
.flota > [data-botella] { animation: entrar-botella 700ms var(--ease-out) backwards; animation-delay: calc(var(--f, 0) * 70ms + 200ms); }
@keyframes flotar { 50% { transform: translateY(-5px); } }
@keyframes entrar-botella { from { opacity: 0; transform: translateY(26px) rotate(-4deg); } }
@media (hover: hover) and (pointer: fine) {
  .baldosa:hover .flota > [data-botella] { transform: rotate(-7deg) translateY(-4px); }
  .desfile-b:hover > [data-botella] { transform: rotate(6deg) translateY(-6px); }
}

.entra { animation: entrar 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 60ms + 60ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }

/* ── Secciones ──────────────────────────────────────────────────────────── */
.menu, .como, .contacto { max-width: var(--ancho); margin: 0 auto; padding: 36px var(--lado) 12px; }
.seccion-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 16px; }
.seccion-cabeza h2 { margin: 0; font: 400 clamp(1.9rem, 6.5vw, 2.9rem)/1 var(--display); letter-spacing: -0.005em; }
.seccion-cabeza p { margin: 0; color: var(--tinta-suave); font-weight: 500; }
@media (min-width: 900px) { .menu, .como, .contacto { padding-top: 56px; } }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
/* En el teléfono, una sola fila que se desliza (con el borde difuminado para que se note que hay más). */
@media (max-width: 599px) {
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--lado)) 14px; padding: 2px var(--lado);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .filtros::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); font-weight: 700; color: var(--tinta-suave); transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.chip[aria-selected="true"] { background: var(--accion); color: #fff; border-color: transparent; }

/* ── Las tarjetas de sabor: toda la tarjeta se toca ─────────────────────── */
.sabores { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .sabores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sabores { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.sabor {
  --c: var(--naranja); --t: #2A1400; --t2: rgba(42, 20, 0, 0.74);
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 164px; padding: 18px 96px 16px 18px; border-radius: var(--radio);
  background: var(--c); color: var(--t);
  display: grid; grid-template-rows: auto 1fr auto; gap: 4px;
  transition: transform 160ms var(--ease-out);
}
.sabor[data-oscuro] { --t: #FFFFFF; --t2: rgba(255, 255, 255, 0.85); }
.sabor:has(.agregar:active) { transform: scale(0.985); }
.sabor-bot { position: absolute; right: 16px; bottom: -14px; width: 66px; z-index: -1; transform: rotate(6deg); transform-origin: 50% 100%; transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .sabor:hover .sabor-bot { transform: rotate(-2deg) translateY(-8px); } }
.sabor h3 { margin: 0; font: 400 1.7rem/1.02 var(--display); text-wrap: balance; }
.sabor-desc { margin: 0; color: var(--t2); font-weight: 500; font-size: 0.95rem; line-height: 1.4; }
.sabor-pie { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.sabor-precio { display: grid; line-height: 1.1; }
.sabor-precio strong { font: 400 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
.sabor-precio span { font-size: 0.8rem; font-weight: 700; color: var(--t2); }
.sabor[data-agotado] { filter: saturate(0.25); }
.sabor-agotado { font-weight: 700; padding: 8px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.18); color: var(--t); }
.agregar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 0;
  background: #fff; color: #1B1916; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
/* El botón se estira sobre toda la tarjeta: tocar el jugo es lo mismo que «Agregar». */
.agregar::after { content: ''; position: absolute; inset: 0; border-radius: var(--radio); }
.agregar:focus-visible { outline: none; }
.agregar:focus-visible::after { outline: 3px solid #fff; outline-offset: -5px; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.25); }
.en-pedido { position: absolute; top: 14px; right: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; color: #1B1916; font-size: 0.8rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.en-pedido svg { color: var(--bien); }
.sabor.revela { opacity: 0; transform: translateY(14px); }
.sabor.revela[data-visto] { opacity: 1; transform: none; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--n, 0) * 45ms); }
.cargando { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: center; padding: 40px 0; }
.cargando span { width: 12px; height: 12px; border-radius: 50%; background: var(--naranja); animation: puntito 900ms ease-in-out infinite; }
.cargando span:nth-child(2) { background: var(--menta); animation-delay: 120ms; }
.cargando span:nth-child(3) { background: var(--rosa); animation-delay: 240ms; }
@keyframes puntito { 50% { transform: translateY(-6px); } }
.menu-error { padding: 16px; border-radius: 16px; background: var(--superficie-2); font-weight: 600; }

/* ── Cómo pedir + el desfile de botellas ───────────────────────────────── */
.pasos-pedido { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 768px) { .pasos-pedido { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.pasos-pedido li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.paso-num { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--b); color: #fff; font: 400 1.5rem/1 var(--display); }
.pasos-pedido h3 { margin: 0; font: 400 1.35rem/1.1 var(--display); }
.pasos-pedido p { margin: 0; color: var(--tinta-suave); font-weight: 500; font-size: 0.95rem; line-height: 1.4; }
.desfile { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 2.4vw, 22px); margin: 28px 0 0; padding: 0 0 2px; border-bottom: 3px solid var(--borde); }
.desfile-b { width: clamp(34px, 9vw, 64px); transform: translateY(18px); opacity: 0; }
.desfile-b:nth-child(odd) [data-botella] { transform: rotate(-4deg); }
.desfile-b:nth-child(even) [data-botella] { transform: rotate(3deg); }
.desfile[data-visto] .desfile-b { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--d) * 70ms); }

/* ── Contacto ───────────────────────────────────────────────────────────── */
.contacto { padding-bottom: 72px; }
.contacto-rejilla { display: grid; gap: 12px; }
@media (min-width: 768px) { .contacto-rejilla { grid-template-columns: repeat(3, 1fr); } }
.tarjeta-contacto { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 4px; align-content: start; padding: 20px 92px 20px 20px; border-radius: var(--radio); text-decoration: none; min-height: 150px; transition: transform 160ms var(--ease-out); }
a.tarjeta-contacto:active { transform: scale(0.98); }
.tarjeta-contacto svg { margin-bottom: 6px; }
.tc-botella { position: absolute; z-index: -1; right: 14px; bottom: -22px; width: 62px; transform: rotate(10deg); transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.tarjeta-contacto:hover .tc-botella { transform: rotate(0) translateY(-8px); } }
.tc-titulo { font: 400 1.4rem/1.05 var(--display); }
.tc-dato { font-weight: 600; line-height: 1.4; }
.tc-accion { margin-top: 8px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tc-whatsapp { background: var(--menta); color: #062A19; }
.tc-mapa { background: var(--morado); color: #fff; }
.tc-horario { background: var(--superficie-2); color: var(--tinta); }

.pie { background: linear-gradient(120deg, var(--naranja) 0%, #FF9A2E 45%, var(--amarillo) 100%); color: #2A1400; text-align: center; padding: 36px var(--lado) calc(env(safe-area-inset-bottom) + 108px); display: grid; justify-items: center; gap: 6px; }
.pie p { margin: 0; font-weight: 600; }
.pie-nezpos { font-size: 0.8125rem; opacity: 0.75; }
@media (min-width: 900px) { .pie { padding-bottom: 40px; } }

/* ── La barra del pedido (teléfono) ─────────────────────────────────────── */
.barra-pedido {
  position: fixed; z-index: 30; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px);
  width: min(calc(100% - 2 * var(--lado)), 520px); min-height: 60px; padding: 8px 10px 8px 8px;
  display: flex; align-items: center; gap: 12px; border: 0; border-radius: 20px;
  background: var(--accion); color: #fff; box-shadow: 0 10px 30px rgba(83, 38, 173, 0.35);
  transform: translateX(-50%); translate: 0 0;
  transition: translate 400ms var(--ease-drawer), transform 160ms var(--ease-out);
}
.barra-pedido:active { transform: translateX(-50%) scale(0.97); }
.barra-pedido[data-escondida] { translate: 0 calc(100% + 40px); }
@media (min-width: 900px) { .barra-pedido { display: none; } }
.bp-cuantos { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px; background: var(--naranja); color: #2A1400; font: 400 1.25rem/1 var(--display); font-variant-numeric: tabular-nums; }
.bp-texto { font-weight: 700; font-size: 1.0625rem; }
.bp-total { margin-left: auto; padding-right: 8px; font: 400 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; }

/* ── ¿Cuántos querés? (diálogo nativo: foco, Escape y fondo de serie) ──── */
.cantidad {
  border: 0; padding: 0; width: min(calc(100% - 24px), 420px); max-height: calc(100dvh - 24px); border-radius: 26px;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-alta);
  margin: max(12px, 6dvh) auto auto; overscroll-behavior: contain;
  opacity: 1; transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), overlay 200ms allow-discrete, display 200ms allow-discrete;
}
@media (min-width: 600px) { .cantidad { margin: auto; } }
.cantidad:not([open]) { opacity: 0; transform: scale(0.97); transition-duration: 140ms; }
@starting-style { .cantidad[open] { opacity: 0; transform: scale(0.96) translateY(6px); } }
.cantidad::backdrop { background: rgba(12, 10, 8, 0.5); transition: background-color 200ms ease, overlay 200ms allow-discrete, display 200ms allow-discrete; }
@starting-style { .cantidad[open]::backdrop { background: rgba(12, 10, 8, 0); } }
.cantidad-form { padding: 20px; display: grid; gap: 12px; }
.cantidad-cabeza { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; }
.cantidad-botella { width: 52px; }
.cantidad[open] .cantidad-botella [data-botella] { animation: saltito 420ms var(--ease-out) backwards 60ms; }
@keyframes saltito { from { opacity: 0; transform: translateY(12px) rotate(-6deg); } }
.cantidad h2 { margin: 0; font: 400 1.75rem/1.02 var(--display); }
.cantidad-precio { margin: 4px 0 0; color: var(--tinta-suave); font-weight: 600; }
.cantidad fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cantidad legend { font-weight: 700; margin-bottom: 4px; }
.cantidad small { font-weight: 500; color: var(--tinta-suave); }
.opcion { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--superficie-2); font-weight: 600; cursor: pointer; }
.opcion input { width: 20px; height: 20px; accent-color: var(--accion); }
.cantidad-etiqueta { font-weight: 700; font-size: 1.05rem; margin-top: 2px; }
.cantidad-fila { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; }
.paso-grande { display: grid; place-items: center; height: 64px; border: 0; border-radius: 18px; background: var(--superficie-2); color: var(--tinta); transition: transform 160ms var(--ease-out), background-color 160ms ease; }
.paso-grande:disabled { opacity: 0.35; cursor: not-allowed; }
.cantidad-n { width: 100%; height: 64px; border-radius: 18px; border: 2px solid var(--borde); background: var(--fondo); text-align: center; font: 400 2.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.cantidad-n:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 4px rgba(103, 50, 203, 0.18); }
.cantidad-n[aria-invalid="true"] { border-color: var(--error); }
.cantidad-ayuda { margin: -4px 0 0; font-size: 0.85rem; color: var(--tinta-suave); font-weight: 500; }
.cantidad-total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: var(--superficie-2); font-weight: 700; color: var(--tinta-suave); }
.cantidad-total strong { font: 400 1.7rem/1 var(--display); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cantidad-botones { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }

/* ── La hoja del pedido ─────────────────────────────────────────────────── */
.fondo-hoja { position: fixed; inset: 0; z-index: 50; background: rgba(12, 10, 8, 0.45); opacity: 0; transition: opacity 400ms var(--ease-drawer); }
.fondo-hoja[data-abierta] { opacity: 1; }
.hoja {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: min(92dvh, 860px); display: flex; flex-direction: column;
  background: var(--superficie); border-radius: 26px 26px 0 0; box-shadow: var(--sombra-alta);
  transform: translateY(100%); transition: transform 300ms var(--ease-drawer);
}
.hoja[data-abierta] { transform: translateY(0); transition-duration: 500ms; }
.hoja[data-arrastrando] { transition: none; }
.hoja-asa { display: grid; place-items: center; padding: 10px 0 2px; cursor: grab; touch-action: none; }
.hoja-asa span { width: 40px; height: 5px; border-radius: 3px; background: var(--borde); }
.hoja-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 4px var(--lado) 8px; touch-action: none; }
.hoja-cabeza h2 { margin: 0; font: 400 1.75rem/1 var(--display); }
.hoja-cuerpo { overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--lado) 16px; flex: 1; }
.hoja-pie { padding: 12px var(--lado) calc(env(safe-area-inset-bottom) + 14px); border-top: 1px solid var(--borde); display: grid; gap: 10px; background: var(--superficie); }
.hoja-pie .boton { width: 100%; }
.hoja-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.hoja-total strong { font: 400 1.6rem/1 var(--display); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .hoja { left: auto; top: 0; width: 440px; max-height: none; border-radius: 26px 0 0 26px; transform: translateX(100%); }
  .hoja[data-abierta] { transform: translateX(0); }
  .hoja-asa { display: none; }
  .hoja-cabeza { padding-top: 22px; }
}
.lineas { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.linea { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.linea-bot { width: 26px; }
.linea-nombre { font-weight: 700; line-height: 1.25; }
.linea-precio { font-size: 0.9rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.pasos { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--superficie-2); }
.paso { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--superficie); color: var(--tinta); transition: transform 160ms var(--ease-out); }
.pasos output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.vacio { padding: 28px 0; text-align: center; color: var(--tinta-suave); font-weight: 600; }
.formulario { display: grid; gap: 14px; margin-top: 12px; }
.entrega { border: 0; padding: 0; margin: 0; }
.entrega legend { font-weight: 700; margin-bottom: 8px; }
.segmentos { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: var(--superficie-2); }
.segmentos label { position: relative; z-index: 1; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos span { display: grid; place-items: center; min-height: 46px; border-radius: 12px; font-weight: 700; color: var(--tinta-suave); cursor: pointer; transition: color 200ms ease; }
.segmentos input:checked + span { color: var(--tinta); }
.segmentos input:focus-visible + span { outline: 3px solid var(--morado); outline-offset: 1px; }
.segmento-fondo { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--superficie); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 240ms var(--ease-out); }
.segmentos[data-canal="delivery"] .segmento-fondo { transform: translateX(100%); }
.campo { display: grid; gap: 6px; }
.campo label { font-weight: 700; }
.opcional { font-weight: 500; color: var(--tinta-suave); }
.campo input, .campo textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--borde); background: var(--fondo); font-size: 1rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
.campo textarea { resize: vertical; min-height: 76px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--morado); box-shadow: 0 0 0 4px rgba(103, 50, 203, 0.18); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.error { margin: 0; color: var(--error); font-weight: 600; font-size: 0.9rem; }
.error:empty { display: none; }

/* El estado del pedido enviado: la botella espera, y se sella al confirmar */
.estado { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 14px 0 8px; outline: none; }
.estado-figura { position: relative; width: 64px; }
.estado-bot { transform-origin: 50% 92%; }
.estado[data-estado="pendiente"] .estado-bot { animation: esperar 1.5s ease-in-out infinite; }
@keyframes esperar { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.estado-sello { position: absolute; right: -16px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); color: #7A3D00; }
.estado-sello svg { width: 22px; height: 22px; }
.estado[data-estado="confirmado"] .estado-sello { background: #D6F5E3; color: #0F6B3A; }
.estado[data-estado="rechazado"] .estado-sello, .estado[data-estado="vencido"] .estado-sello { background: #FBE0E2; color: #9E1C25; }
.estado h3 { margin: 6px 0 0; font: 400 1.9rem/1.02 var(--display); }
.estado p { margin: 0; color: var(--tinta-suave); font-weight: 500; max-width: 32ch; }
.estado .estado-total { color: var(--tinta); font-weight: 700; }
.estado .boton-whatsapp { margin-top: 10px; width: 100%; }

/* ── Avisos (toasts) ────────────────────────────────────────────────────── */
.avisos { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 88px); display: grid; gap: 8px; width: min(calc(100% - 32px), 420px); pointer-events: none; }
.aviso { justify-self: center; padding: 12px 18px; border-radius: 16px; background: var(--accion); color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); opacity: 1; transform: translateY(0); transition: opacity 400ms ease, transform 400ms ease; }
@starting-style { .aviso { opacity: 0; transform: translateY(100%); } }
.aviso[data-sale] { opacity: 0; transform: translateY(100%); transition-duration: 240ms; }

/* ── Menos movimiento: se queda la opacidad, se va el movimiento ────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { animation: aparecer 240ms ease both; animation-delay: 0ms; }
  @keyframes aparecer { from { opacity: 0; } }
  .flota, .estado[data-estado="pendiente"] .estado-bot, .cargando span { animation: none; }
  .flota > [data-botella], .cantidad[open] .cantidad-botella [data-botella] { animation: aparecer 240ms ease backwards; }
  .baldosa:hover .flota > [data-botella], .desfile-b:hover > [data-botella], .sabor:hover .sabor-bot, a.tarjeta-contacto:hover .tc-botella { transform: none; }
  .desfile-b, .desfile[data-visto] .desfile-b { transform: none; transition: opacity 240ms ease; }
  .sabor.revela { transform: none; }
  .sabor.revela[data-visto] { transition: opacity 240ms ease; transition-delay: 0ms; }
  .hoja, .hoja[data-abierta] { transition: opacity 200ms ease; }
  .hoja:not([data-abierta]) { opacity: 0; }
  .panel-nav, .panel-nav[data-abierto] { transform: none; }
  .cantidad, .cantidad:not([open]) { transform: none; }
  @starting-style { .cantidad[open] { transform: none; } }
  .barra-pedido { transition: opacity 200ms ease; }
  .barra-pedido[data-escondida] { translate: 0 0; opacity: 0; }
  .segmento-fondo, .hamburguesa span { transition: none; }
  .aviso, .aviso[data-sale] { transform: none; transition: opacity 200ms ease; }
  @starting-style { .aviso { transform: none; } }
  .boton:active, .paso:active, .paso-grande:active, .chip:active, .boton-pedido:active, .hamburguesa:active, .sabor:has(.agregar:active) { transform: none; }
  .barra-pedido:active { transform: translateX(-50%); }
}

/* ==========================================================================
   EL FONDO: colorido, fresco y de calidad (14/10/2026)
   Cada sección con su degradado de frutas, grano sutil (empaque de calidad),
   frutas, hielo, gotas y burbujas que flotan muy suave en los bordes.
   Todo SVG/CSS: sin imágenes pesadas. El texto queda sobre tonos claros (AA).
   ========================================================================== */
:root {
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url%28%23g%29' opacity='.10'/%3E%3C/svg%3E");
  --fondo-portada: radial-gradient(60% 50% at 8% 12%, rgba(255, 127, 0, 0.20), transparent 70%),
    radial-gradient(45% 45% at 95% 8%, rgba(234, 0, 91, 0.13), transparent 70%),
    radial-gradient(50% 60% at 88% 95%, rgba(54, 193, 136, 0.18), transparent 70%),
    linear-gradient(180deg, #FFF4E4 0%, #FFEEDC 100%);
  --fondo-menu: radial-gradient(40% 30% at 0% 20%, rgba(255, 197, 49, 0.30), transparent 70%),
    radial-gradient(40% 30% at 100% 45%, rgba(255, 92, 122, 0.20), transparent 70%),
    radial-gradient(45% 30% at 10% 85%, rgba(54, 193, 136, 0.20), transparent 70%),
    linear-gradient(180deg, #FFF7E8 0%, #FFFBF4 50%, #FFF3F6 100%);
  --fondo-como: radial-gradient(45% 50% at 0% 10%, rgba(143, 216, 255, 0.30), transparent 70%),
    radial-gradient(40% 50% at 100% 80%, rgba(54, 193, 136, 0.22), transparent 70%),
    linear-gradient(180deg, #FFF0F2 0%, #EAF8F3 30%, #E7F4FC 100%);
  --fondo-contacto: radial-gradient(45% 50% at 100% 10%, rgba(103, 50, 203, 0.14), transparent 70%),
    radial-gradient(40% 50% at 0% 90%, rgba(234, 0, 91, 0.12), transparent 70%),
    linear-gradient(180deg, #E7F4FC 0%, #F3EEFF 40%, #FFEFF5 100%);
}

.portada, .menu, .como, .contacto { position: relative; isolation: isolate; }
/* El fondo va de borde a borde aunque el contenido tenga ancho máximo. */
.portada::before, .menu::before, .como::before, .contacto::before {
  content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--grano), var(--f);
}
.portada { --f: var(--fondo-portada); padding-bottom: 8px; }
.portada::before { top: calc(-1 * (env(safe-area-inset-top) + var(--alto-barra) + 4px)); }
.menu { --f: var(--fondo-menu); }
.como { --f: var(--fondo-como); padding-bottom: 28px; }
.contacto { --f: var(--fondo-contacto); }


.decos { position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); overflow: hidden; pointer-events: none; }
.deco {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); overflow: visible;
  transform: rotate(var(--r)); opacity: 0.9;
  animation: deriva var(--t) ease-in-out var(--d) infinite alternate;
}
.deco.ancha { display: none; }
@media (min-width: 768px) { .deco.ancha { display: block; } .deco { --s2: 1.25; width: calc(var(--s) * 1.25); height: calc(var(--s) * 1.25); } }
@keyframes deriva { to { transform: translate(6px, -12px) rotate(calc(var(--r) + 9deg)); } }
.deco.brilla { opacity: 0; animation: brillar var(--t) ease-in-out var(--d) infinite; }
@keyframes brillar { 0%, 70%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); } 82% { opacity: 0.95; transform: scale(1) rotate(25deg); } }


/* Brillo de envase en las tarjetas (calidad), detrás del texto. */
.sabor::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 38%), radial-gradient(120% 80% at 100% 100%, rgba(0, 0, 0, 0.10), transparent 60%); }
.pasos-pedido li, .tarjeta-contacto { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pasos-pedido li { background: color-mix(in srgb, var(--superficie) 86%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .deco, .deco.brilla { animation: none; }
  .deco.brilla { opacity: 0.5; }
}
@media (prefers-reduced-transparency: reduce) { .pasos-pedido li { background: var(--superficie); backdrop-filter: none; } }

/* ==========================================================================
   AL POR MAYOR (14/10/2026): pedido mínimo, avance, atajos y «Para tu negocio»
   ========================================================================== */
.mayoreo { grid-column: 1 / -1; margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; justify-self: start;
  padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); color: #2A1400; font-weight: 600; font-size: 0.95rem; box-shadow: 0 4px 14px rgba(120, 50, 0, 0.18); }
.mayoreo strong { color: #B34A00; }
@media (min-width: 900px) { .mayoreo { margin-top: 16px; } }
.mayoreo-menu { flex-basis: 100%; margin: 6px 0 0 !important; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--superficie) 88%, transparent);
  color: var(--tinta) !important; font-weight: 600 !important; box-shadow: var(--sombra); }
.mayoreo-menu strong { color: var(--rosa); }


.cantidad-rapidos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rapido { min-height: 48px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--menta) 22%, var(--superficie)); color: var(--tinta);
  font: 400 1.35rem/1 var(--display); transition: transform 160ms var(--ease-out); }
.rapido:active { transform: scale(0.96); }

.avance { margin: 4px 0 12px; padding: 12px 14px; border-radius: 16px; background: var(--superficie-2); }
.avance-texto { margin: 0 0 8px; font-weight: 600; }
.avance-texto strong { font-variant-numeric: tabular-nums; }
.avance-pista { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--tinta) 10%, transparent); overflow: hidden; }
.avance-barra { display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--naranja), var(--rosa)); transition: transform 360ms var(--ease-out); }
.avance[data-listo="si"] .avance-barra { background: linear-gradient(90deg, var(--menta), #1E9E62); }
.avance[data-listo="si"] .avance-texto strong { color: var(--bien); }
.falta-minimo { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--amarillo) 26%, var(--superficie)); color: var(--tinta); font-weight: 600; font-size: 0.92rem; }

.negocios { max-width: var(--ancho); margin: 0 auto; padding: 40px var(--lado) 12px; position: relative; isolation: isolate; --f: var(--fondo-negocios); }
.negocios::before { content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--grano), var(--f); }
:root { --fondo-negocios: radial-gradient(45% 50% at 0% 20%, rgba(255, 127, 0, 0.16), transparent 70%), radial-gradient(40% 50% at 100% 80%, rgba(103, 50, 203, 0.12), transparent 70%), linear-gradient(180deg, #E7F4FC 0%, #FFF4E4 100%); }

.contacto::before { background: var(--grano), linear-gradient(180deg, #FFF4E4 0%, #F3EEFF 40%, #FFEFF5 100%); }

.negocios-rejilla { display: grid; gap: 12px; }
@media (min-width: 768px) { .negocios-rejilla { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.negocio-tarjeta { position: relative; overflow: hidden; isolation: isolate; padding: 18px 86px 18px 18px; border-radius: var(--radio);
  background: color-mix(in srgb, var(--superficie) 90%, transparent); box-shadow: var(--sombra); border-top: 5px solid var(--b); }
.negocio-tarjeta h3 { margin: 0 0 6px; font: 400 1.35rem/1.1 var(--display); }
.negocio-tarjeta p { margin: 0; color: var(--tinta-suave); font-weight: 500; line-height: 1.45; }
.nt-bot { position: absolute; z-index: -1; right: 14px; bottom: -20px; width: 56px; transform: rotate(8deg); transition: transform 320ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .negocio-tarjeta:hover .nt-bot { transform: rotate(-2deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .negocio-tarjeta:hover .nt-bot { transform: none; } .avance-barra { transition: none; } }


/* En la portada las botellas van directo sobre el fondo, sin cuadros. */
.portada .baldosa { background: transparent; }
.portada .baldosa .flota { filter: drop-shadow(0 10px 12px rgba(120, 80, 0, 0.22)); }
@media (max-width: 899px) { .portada .estante { margin-top: 18px; } .portada .baldosa { height: 96px; } .portada .baldosa .flota { width: 80%; margin-left: -40%; bottom: 2px; } }
@media (min-width: 900px) { .portada .baldosa .flota { width: 52%; margin-left: -26%; } }


/* ==========================================================================
   COLORES Y TEXTURAS DIBUJADAS (14/10/2026): azul cielo, amarillo piña y
   verde sandía, con patrones ilustrados (rodajas, semillas, gotas, burbujas,
   hielo, pulpa, rayas de empaque). Nada oscuro; texto oscuro a más de 7:1.
   ========================================================================== */
:root {
  --cielo: #12B5E8; --pina: #F4D96B; --sandia: #86D6C4;
  /* Borde ondulado arriba de cada sección: como gotas de jugo. */
  --onda: radial-gradient(circle at 16px 0, transparent 15px, #000 15.5px) top left / 32px 16px repeat-x, linear-gradient(#000 0 0) 0 16px / 100% calc(100% - 16px) no-repeat;
}
.portada::before { background: var(--grano), var(--t-rodajas), radial-gradient(70% 60% at 85% 20%, rgba(255, 255, 255, 0.45), transparent 70%), var(--pina) !important; }
.menu::before { background: var(--grano), var(--t-semillas), radial-gradient(60% 40% at 10% 10%, rgba(255, 255, 255, 0.35), transparent 70%), var(--sandia) !important; }
.como::before { background: var(--grano), var(--t-burbujas), radial-gradient(60% 50% at 90% 10%, rgba(255, 255, 255, 0.30), transparent 70%), var(--cielo) !important; }
.negocios::before { background: var(--grano), var(--t-pulpa), radial-gradient(60% 50% at 10% 90%, rgba(255, 255, 255, 0.40), transparent 70%), var(--pina) !important; }
.contacto::before { background: var(--grano), var(--t-semillas), radial-gradient(60% 50% at 90% 0%, rgba(255, 255, 255, 0.35), transparent 70%), var(--sandia) !important; }
.menu::before, .como::before, .negocios::before, .contacto::before { top: -16px; -webkit-mask: var(--onda); mask: var(--onda); }
.menu, .como, .negocios, .contacto { padding-top: 48px; }
@media (min-width: 900px) { .menu, .como, .negocios, .contacto { padding-top: 64px; } }
/* Sobre el color, los títulos van en tinta (7:1); lo secundario, más oscuro que de costumbre. */
.menu .seccion-cabeza p, .como .seccion-cabeza p, .negocios .seccion-cabeza p, .contacto .seccion-cabeza p { color: #2A2620; }
.portada .estado-local { color: #2A1400; }
.pasos-pedido li, .negocio-tarjeta { background: #fff; }
.tc-horario { background: #fff; }
.desfile { border-bottom-color: rgba(255, 255, 255, 0.85); }
.decos { opacity: 0.85; }

/* Las cintas entre secciones: rayas de empaque y lo que es la marca, sin moverse. */
.cinta { position: relative; z-index: 1; margin: 0 calc(50% - 50vw); padding: 14px 0; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--naranja) 0 16px, var(--rosa) 16px 32px, var(--morado) 32px 48px, var(--menta) 48px 64px, var(--amarillo) 64px 80px); }
.cinta-dentro { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px; }
.cinta-item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; color: var(--tinta);
  font: 400 1.05rem/1 var(--display); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); white-space: nowrap; }
.cinta-item svg { width: 26px; height: 26px; flex: none; }
@media (max-width: 599px) { .cinta-item:nth-child(n+5) { display: none; } .cinta-item { font-size: 0.95rem; } }

/* El basurero de cada renglón y el aviso con «Deshacer». */
.linea { grid-template-columns: 26px 1fr auto 44px; gap: 10px; }
.basurero { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--tinta-suave);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.basurero:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .basurero:hover { background: #FDE3E6; color: #B4232C; } }
.aviso-accion { display: flex; align-items: center; gap: 12px; pointer-events: auto; padding: 8px 8px 8px 16px; }
.aviso-accion button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: var(--accion); font-weight: 700; }
/* Con el pedido abierto, los avisos van arriba para no tapar el total ni el botón de pedir. */
body:has(.hoja[data-abierta]) .avisos { bottom: auto; top: calc(env(safe-area-inset-top) + 16px); }
/* La barra de avance cambia de color con suavidad (el color lo pone el avance). */
.avance-barra { background: #E5243B; transition: transform 360ms var(--ease-out), background-color 360ms ease; }
.avance[data-listo="si"] .avance-barra { background: #1E9E62; }
@media (max-width: 380px) { .linea { grid-template-columns: 22px 1fr auto 44px; gap: 6px; } .linea .paso { width: 36px; height: 36px; } }

/* Texturas más visibles (vuelta 2): se notan sin competir con el texto. */
:root { --t-rodajas: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Ccircle cx=%2256%22 cy=%2260%22 r=%2230%22 fill=%22%23fff%22 fill-opacity=%22.22%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%223.5%22/%3E%3Ccircle cx=%2256%22 cy=%2260%22 r=%2225.2%22 fill=%22%23FFB547%22 fill-opacity=%22.30%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M56 60 L80.2 64.3%22/%3E%3Cpath d=%22M56 60 L70.1 80.2%22/%3E%3Cpath d=%22M56 60 L51.7 84.2%22/%3E%3Cpath d=%22M56 60 L35.8 74.1%22/%3E%3Cpath d=%22M56 60 L31.8 55.7%22/%3E%3Cpath d=%22M56 60 L41.9 39.8%22/%3E%3Cpath d=%22M56 60 L60.3 35.8%22/%3E%3Cpath d=%22M56 60 L76.2 45.9%22/%3E%3C/g%3E%3Ccircle cx=%22170%22 cy=%22160%22 r=%2222%22 fill=%22%23fff%22 fill-opacity=%22.22%22 stroke=%22%23fff%22 stroke-opacity=%22.85%22 stroke-width=%223.5%22/%3E%3Ccircle cx=%22170%22 cy=%22160%22 r=%2218.5%22 fill=%22%23FFB547%22 fill-opacity=%22.30%22/%3E%3Cg stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M170 160 L187.4 155.3%22/%3E%3Cpath d=%22M170 160 L185.6 169.0%22/%3E%3Cpath d=%22M170 160 L174.7 177.4%22/%3E%3Cpath d=%22M170 160 L161.0 175.6%22/%3E%3Cpath d=%22M170 160 L152.6 164.7%22/%3E%3Cpath d=%22M170 160 L154.4 151.0%22/%3E%3Cpath d=%22M170 160 L165.3 142.6%22/%3E%3Cpath d=%22M170 160 L179.0 144.4%22/%3E%3C/g%3E%3Cellipse cx=%22140%22 cy=%2240%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2830 140 40%29%22 fill=%22%23B97A00%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%22150%22 cy=%2258%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%28-20 150 58%29%22 fill=%22%23B97A00%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%2230%22 cy=%22170%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2850 30 170%29%22 fill=%22%23B97A00%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%2248%22 cy=%22190%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2810 48 190%29%22 fill=%22%23B97A00%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%22110%22 cy=%22120%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%280 110 120%29%22 fill=%22%23B97A00%22 fill-opacity=%22.45%22/%3E%3Cellipse cx=%22196%22 cy=%2260%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2840 196 60%29%22 fill=%22%23B97A00%22 fill-opacity=%22.45%22/%3E%3Ccircle cx=%22110%22 cy=%2230%22 r=%223%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Ccircle cx=%2220%22 cy=%22110%22 r=%222.5%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Ccircle cx=%22200%22 cy=%22110%22 r=%222%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Ccircle cx=%2290%22 cy=%22200%22 r=%223%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3Ccircle cx=%22130%22 cy=%2290%22 r=%221.8%22 fill=%22%23fff%22 fill-opacity=%22.8%22/%3E%3C/svg%3E"); --t-semillas: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cellipse cx=%2230%22 cy=%2230%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2820 30 30%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%2290%22 cy=%2260%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%28-30 90 60%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%22160%22 cy=%2224%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2810 160 24%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%22130%22 cy=%22120%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2840 130 120%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%2240%22 cy=%22140%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%28-10 40 140%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%22180%22 cy=%22170%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2825 180 170%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%22100%22 cy=%22180%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%28-40 100 180%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cellipse cx=%2270%22 cy=%22100%22 rx=%222.8%22 ry=%225%22 transform=%22rotate%2815 70 100%29%22 fill=%22%231F4D2B%22 fill-opacity=%22.34%22/%3E%3Cpath d=%22M60 50.9 C53.5 60 52.2 63.9 60 67.8 C67.8 63.9 66.5 60 60 50.9z%22 fill=%22%23fff%22 fill-opacity=%22.75%22/%3E%3Ccircle cx=%2257.9%22 cy=%2262.0%22 r=%221.6%22 fill=%22%23fff%22/%3E%3Cpath d=%22M170 82.3 C164.5 90 163.4 93.3 170 96.6 C176.6 93.3 175.5 90 170 82.3z%22 fill=%22%23fff%22 fill-opacity=%22.75%22/%3E%3Ccircle cx=%22168.2%22 cy=%2291.7%22 r=%221.3%22 fill=%22%23fff%22/%3E%3Cpath d=%22M120 150.2 C113.0 160 111.6 164.2 120 168.4 C128.4 164.2 127.0 160 120 150.2z%22 fill=%22%23fff%22 fill-opacity=%22.75%22/%3E%3Ccircle cx=%22117.8%22 cy=%22162.1%22 r=%221.7%22 fill=%22%23fff%22/%3E%3Cpath d=%22M20 183 C15 190 14 193 20 196 C26 193 25 190 20 183z%22 fill=%22%23fff%22 fill-opacity=%22.75%22/%3E%3Ccircle cx=%2218.4%22 cy=%22191.5%22 r=%221.2%22 fill=%22%23fff%22/%3E%3C/svg%3E"); --t-burbujas: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Ccircle cx=%2240%22 cy=%2250%22 r=%2216%22 fill=%22%23fff%22 fill-opacity=%22.16%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M31.2 47.6 a9.6 9.6 0 0 1 7.2 -6.4%22 stroke=%22%23fff%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22130%22 cy=%2230%22 r=%229%22 fill=%22%23fff%22 fill-opacity=%22.16%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M125.0 28.6 a5.4 5.4 0 0 1 4.0 -3.6%22 stroke=%22%23fff%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22200%22 cy=%2290%22 r=%2222%22 fill=%22%23fff%22 fill-opacity=%22.16%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M187.9 86.7 a13.2 13.2 0 0 1 9.9 -8.8%22 stroke=%22%23fff%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2290%22 cy=%22140%22 r=%2212%22 fill=%22%23fff%22 fill-opacity=%22.16%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M83.4 138.2 a7.2 7.2 0 0 1 5.4 -4.8%22 stroke=%22%23fff%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2230%22 cy=%22200%22 r=%228%22 fill=%22%23fff%22 fill-opacity=%22.16%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M25.6 198.8 a4.8 4.8 0 0 1 3.6 -3.2%22 stroke=%22%23fff%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22170%22 cy=%22200%22 r=%2214%22 fill=%22%23fff%22 fill-opacity=%22.16%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Cpath d=%22M162.3 197.9 a8.4 8.4 0 0 1 6.3 -5.6%22 stroke=%22%23fff%22 stroke-width=%222.4%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Crect x=%2296%22 y=%2270%22 width=%2234%22 height=%2234%22 rx=%228%22 transform=%22rotate%2814 113 87%29%22 fill=%22%23fff%22 fill-opacity=%22.22%22 stroke=%22%23fff%22 stroke-opacity=%22.8%22 stroke-width=%222.4%22/%3E%3Crect x=%22190%22 y=%22150%22 width=%2224%22 height=%2224%22 rx=%226%22 transform=%22rotate%28-12 202 162%29%22 fill=%22%23fff%22 fill-opacity=%22.2%22 stroke=%22%23fff%22 stroke-opacity=%22.75%22 stroke-width=%222.4%22/%3E%3Ccircle cx=%2270%22 cy=%2290%22 r=%222.2%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3Ccircle cx=%22160%22 cy=%22130%22 r=%222.2%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3Ccircle cx=%22220%22 cy=%2230%22 r=%222.2%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3Ccircle cx=%2260%22 cy=%22230%22 r=%222.2%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3Ccircle cx=%22140%22 cy=%22220%22 r=%222.2%22 fill=%22%23fff%22 fill-opacity=%22.9%22/%3E%3C/svg%3E"); --t-pulpa: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%227%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%222.9%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%2280%22 cy=%2250%22 r=%226%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%2280%22 cy=%2250%22 r=%222.5%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%22140%22 cy=%2230%22 r=%228%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%22140%22 cy=%2230%22 r=%223.4%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%2250%22 cy=%22100%22 r=%228%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%2250%22 cy=%22100%22 r=%223.4%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%22120%22 cy=%22100%22 r=%226%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%22120%22 cy=%22100%22 r=%222.5%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%22160%22 cy=%22140%22 r=%227%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%22160%22 cy=%22140%22 r=%222.9%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%2220%22 cy=%22160%22 r=%226%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%2220%22 cy=%22160%22 r=%222.5%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3Ccircle cx=%2290%22 cy=%22160%22 r=%228%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%2290%22 cy=%22160%22 r=%223.4%22 fill=%22%233B2A10%22 fill-opacity=%22.38%22/%3E%3C/svg%3E"); }

/* ==========================================================================
   SIN ARCOÍRIS Y SIN TRASLAPES (14/10/2026)
   Solo los tres colores por sección (cielo, piña, sandía) + crema y blanco.
   Las secciones ya no suben sobre la anterior: el borde ondulado es un
   separador propio, en el flujo, que no tapa nada.
   ========================================================================== */
.barra-franja { display: none; }
.menu::before, .como::before, .negocios::before, .contacto::before { top: 0; -webkit-mask: none; mask: none; }
.onda { position: relative; height: 18px; margin: 0 calc(50% - 50vw);
  background: radial-gradient(circle at 16px 0, var(--arriba) 15px, transparent 15.5px) top left / 32px 18px repeat-x, var(--abajo); }
.cinta { background: #FFF7E8; border-block: 2px solid rgba(27, 25, 22, 0.08); }
.cinta-item { box-shadow: none; border: 1.5px solid rgba(27, 25, 22, 0.12); }
.pie { background: var(--cielo); color: var(--tinta); }
/* Las frutas flotantes solo donde hay margen libre a los lados: nunca detrás del texto. */
.deco, .deco.ancha { display: none; }
@media (min-width: 1360px) { .deco, .deco.ancha { display: block; } }
.decos, .foto-fondo { pointer-events: none; }
/* Las botellas de la portada no crecen con el cuadro (entre 600 y 900 px montaban sobre el aviso de mayoreo). */
@media (max-width: 899px) {
  .portada .baldosa .flota { width: min(80%, 50px); margin-left: calc(min(80%, 50px) / -2); }
  .portada .baldosa { height: 112px; }
}
/* Contacto: las tarjetas que haya (el horario solo si la tienda lo da), sin huecos. */
@media (min-width: 768px) { .contacto-rejilla { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.estado[data-estado="whatsapp"] .estado-sello { background: #D7F7E9; color: #0F6B3A; }
.consulta { margin: 16px 0 0; text-align: center; }
.consulta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); color: var(--tinta); font-weight: 600; font-size: 0.95rem; text-underline-offset: 3px; }
/* Sin descripción, la tarjeta es más baja (sin hueco entre el nombre y el precio). */
.sabor:not(:has(.sabor-desc)) { min-height: 132px; }