/* Jana Mates · estilos del catálogo
   Diseño base de Dani (crema + oliva, Playfair + Inter) · hero e intro del prototipo aprobado (prototipos/hero-intro.html).
   Mobile-first: se diseña para el celu y se acomoda en la compu desde 900 px. */

:root {
  --fondo: #EDE4D6;
  --tarjeta: #F8F3E9;
  --borde: #D9CDB4;
  --tinta: #2B2A24;
  --tinta-2: #6B6355;
  --tinta-3: #8A8270;
  --oliva: #4A5E2E;
  --oliva-oscuro: #3B4B24;
  --oliva-suave: rgba(74,94,46,.12);
  --oliva-sombra: rgba(74,94,46,.3);
  --wa: #2E7D4F;
  --aviso: #F3E3C3;
  --aviso-tinta: #7A5418;
  --blanco: #FFFFFF;
  --error: #A23B2A;
  /* hero e intro (prototipo aprobado) */
  --carbon: #171914;
  --verde: #28B83D;
  --monte: #526348;
  --crema: #F4ECDE;
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --p: 0;
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-texto: "Inter", -apple-system, "Segoe UI", sans-serif;
  --radio: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--f-texto); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ancho { padding-inline: 16px; }
@media (min-width: 900px) { .ancho { padding-inline: 56px; } }

/* =================== INTRO =================== */
html.con-intro, html.con-intro body { overflow: hidden; }
/* mientras corre la intro no se ve nada de abajo (en el celu la barra del navegador puede dejar una rendija) */
html.con-intro body { background: var(--crema) var(--ruido); }
html.con-intro .barra-sup, html.con-intro .hero, html.con-intro main, html.con-intro .pie { visibility: hidden; }
.intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 200; background: var(--crema) var(--ruido); flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: pointer; }
html.con-intro .intro { display: flex; }
/* el video va siempre de lado a lado y centrado: un solo formato, sin cambios de tamaño que lo hagan saltar.
   Pantalla más angosta que 16:9 → se ve entero (franjas crema arriba y abajo); más ancha → llena la pantalla. */
.intro video { position: absolute; left: 0; top: 50%; width: 100%; height: min(100vh, 56.25vw); height: min(100svh, 56.25vw); transform: translateY(-50%); object-fit: cover; display: block; }
.intro-marca { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.intro-marca::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  background: radial-gradient(closest-side, rgba(244,236,222,.94), rgba(244,236,222,.8) 55%, rgba(244,236,222,.4)); }
.intro.firmando .intro-marca::before { opacity: 1; }
/* logo sin fondo: ícono arriba, letras desde el 76,6 % (se "escriben" de izquierda a derecha) */
.logo-anim { --firma-dur: 1.3s; position: relative; width: min(22vw, 240px); aspect-ratio: 475 / 561; }
.logo-anim img { position: absolute; inset: 0; width: 100%; height: 100%; }
.icono { clip-path: inset(0 0 23.4% 0); opacity: 0; transform: scale(.82) translateY(12px);
  transition: opacity var(--firma-dur) ease-out, transform var(--firma-dur) cubic-bezier(.2,.8,.25,1.1); }
.intro.firmando .icono { opacity: 1; transform: none; }
.letras { clip-path: inset(76.6% 100% 0 0); transition: clip-path var(--firma-dur) cubic-bezier(.45,0,.3,1); }
.intro.firmando .letras { clip-path: inset(76.6% 0 0 0); }
.saltar { position: absolute; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 2; font: 500 13px var(--f-texto); letter-spacing: .14em; color: var(--carbon);
  background: rgba(244,236,222,.82); border: 1px solid rgba(23,25,20,.15); border-radius: 999px; padding: 9px 16px; backdrop-filter: blur(6px); }
.saltar:hover { background: var(--crema); }
.saltar:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; }
.intro-barra { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--verde); transform-origin: 0 50%; transform: scaleX(0); z-index: 2; }
/* fundido a carbón entre la intro y el hero (arranca antes de que termine el video, mientras todavía se mueve) */
.intro-velo { position: fixed; inset: 0; z-index: 210; background: var(--carbon); opacity: 0; pointer-events: none; transition: opacity .6s ease-in; }
.intro-velo.on { opacity: 1; }
.intro-velo.sale { transition: opacity 1.1s ease-out; }
/* celu parado: la firma va debajo del video (sin tapar el video) y el conjunto video + logo queda centrado en la pantalla.
   El logo mide 130px de alto + 22px de separación: todo sube la mitad de eso (76px). */
@media (max-aspect-ratio: 4/3) {
  .intro video { top: calc(50% - 76px); }
  .intro-marca { inset: auto 0 auto 0; top: calc(50% - 76px + 28.125vw + 22px); justify-content: flex-start; }
  .intro-marca::before { display: none; }
  .logo-anim { width: 110px; }
}

/* =================== HERO =================== */
.hero { position: relative; }
.hero-sticky { position: relative; overflow: hidden; background: #EDE2CF; }
/* celu: a todo el ancho en 3:2, recortando un poco los costados de la foto (hero.js elige el encuadre) */
.hero-escena { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
/* tablet: a todo el ancho en 16:9 (recorta un poco los costados de la foto) */
@media (min-width: 700px) { .hero-escena { aspect-ratio: 16 / 9; } }
/* compu: a todo el ancho y del alto de la pantalla como máximo. La foto (2200×1000, 2,2:1) está pensada para pantallas
   apaisadas: hero.js la recorta lo justo según la ventana, siempre centrada en la caja, el mate y el logo. */
@media (min-width: 900px) {
  .hero-escena { aspect-ratio: auto; height: min(100vh - var(--alto-sup, 0px), 45.45vw); height: min(100svh - var(--alto-sup, 0px), 45.45vw); }
}
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-foto .mov { transform-box: view-box; transform-origin: 50% 40%; transform: scale(calc(1.02 + var(--p) * .07)) translateY(calc(var(--p) * -14px)); }
#vapor { filter: blur(6px); opacity: .85; }
#vapor path { animation: sube 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
#vapor path:nth-child(2) { animation-delay: -1.7s; }
#vapor path:nth-child(3) { animation-delay: -3.3s; }
@keyframes sube { 0% { transform: translate(0, 30px) scale(.7); opacity: 0; } 30% { opacity: .8; } 100% { transform: translate(-30px, -90px) scale(1.15); opacity: 0; } }
/* luz de ventana: bandas claras y oscuras en diagonal */
.luz { position: absolute; inset: -30%; pointer-events: none; filter: blur(22px); transform: translateX(calc(var(--p) * 160px)); animation: respira 9s ease-in-out infinite alternate; }
.luz.clara { background: repeating-linear-gradient(122deg, transparent 0 120px, rgba(255,236,200,.22) 120px 210px, transparent 210px 330px); mix-blend-mode: screen; }
.luz.oscura { background: repeating-linear-gradient(122deg, transparent 0 200px, rgba(80,55,30,.10) 200px 250px, transparent 250px 330px); mix-blend-mode: multiply; animation-delay: -4s; }
@keyframes respira { from { opacity: .65; translate: -20px 0; } to { opacity: 1; translate: 20px 0; } }
/* polvo flotando en la luz */
.polvo { position: absolute; inset: 0; pointer-events: none; }
.polvo i { position: absolute; width: var(--t); height: var(--t); border-radius: 50%; background: rgba(255,248,230,.9); box-shadow: 0 0 6px rgba(255,240,210,.8); opacity: 0; animation: flota var(--d) linear infinite; animation-delay: var(--r); }
@keyframes flota { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .6; } 100% { transform: translate(var(--x), var(--y)); opacity: 0; } }
/* entrada del hero después de la intro */
.entrada .hero-escena { animation: entra 1.4s cubic-bezier(.2,.7,.2,1) both; }
/* el hero aparece un poco más abajo y sube hasta pegarse a la barra, mientras bajan el logo y el banner */
@keyframes entra { from { transform: translateY(14vh) scale(1.04); filter: brightness(.75); } to { transform: none; filter: none; } }

/* =================== CATÁLOGO =================== */
.aviso-ejemplo { background: var(--aviso); color: var(--aviso-tinta); text-align: center; font-size: 12.5px; padding: 6px 16px; }
.cartel { background: var(--tinta); color: var(--fondo); text-align: center; font-size: 12.5px; padding: 7px 16px; min-height: 33px; }
.cartel span { display: inline-block; transition: opacity .35s; }

.barra-sup { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; overflow-x: clip; }
.barra-sup.entrada { animation: baja-barra 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes baja-barra { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
/* carrito flotante arriba a la derecha (no hay header) */
.btn-carrito { position: fixed; z-index: 31; top: calc(var(--alto-sup, 0px) + 12px); right: 16px; }
html.con-intro .btn-carrito { visibility: hidden; }
.btn-carrito { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(43,42,36,.18); transition: transform .2s, box-shadow .2s; }
.btn-carrito:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(43,42,36,.22); }
@media (min-width: 900px) { .btn-carrito { width: 54px; height: 54px; top: calc(var(--alto-sup, 0px) + 18px); right: 24px; } }
.btn-carrito .cuenta { position: absolute; top: -4px; right: -4px; background: var(--oliva); color: var(--fondo); font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.btn-carrito.salta { animation: salto .45s ease; }
@keyframes salto { 40% { transform: scale(1.12); } }

main { scroll-margin-top: var(--alto-sup, 0px); }
/* ojo (celu): el alto de la capa fija es 100lvh (el más grande y estable): con 100% o 100vh dinámico, al esconderse la barra del navegador la foto se reescalaba y daba un salto */
/* fondo del catálogo: la vitrina de mates, quieta detrás y suavizada con un velo crema (28/10: antes iba oscurecida y competía con las fotos); las tarjetas pasan por delante al bajar.
   La capa es fixed y el clip-path de main la recorta a la sección: queda fija mientras todo lo demás se mueve. */
main { position: relative; isolation: isolate; clip-path: inset(0); background: var(--fondo); }
main::before { content: ""; position: fixed; top: -12px; left: -12px; width: calc(100% + 24px); height: calc(100vh + 24px); height: calc(100lvh + 24px); z-index: -2; background: linear-gradient(rgba(244,236,222,.74), rgba(244,236,222,.86)), url(../img/vitrina.webp) center / cover no-repeat; filter: blur(1px); transform: translateZ(0); transition: opacity .6s ease; }
/* fuera de la categoría Mates (termos, yerbas, accesorios…) el fondo es la mesa con yerbas, termo y caja de regalo; se funden al cambiar */
main::after { content: ""; position: fixed; top: -12px; left: -12px; width: calc(100% + 24px); height: calc(100vh + 24px); height: calc(100lvh + 24px); z-index: -2; background: linear-gradient(rgba(244,236,222,.74), rgba(244,236,222,.86)), url(../img/mesa.webp) center 58% / cover no-repeat; opacity: 0; filter: blur(1px); transform: translateZ(0); transition: opacity .6s ease; pointer-events: none; }
/* celu: la mesa entera (de lado a lado) en vez de recortada */
@media (max-width: 700px) { main::after { background-size: auto, 100% auto; background-position: center, center 30%; } }
main[data-fondo="otros"]::before { opacity: 0; }
main[data-fondo="otros"]::after { opacity: 1; }
/* la franja de filtros es sólida (sin degradé): la foto de fondo aparece recién debajo, en la grilla */
.cats, .grupos { background: var(--fondo); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
/* título de la categoría y contador: franjas sólidas, igual que los filtros */
.encabezado { background: var(--fondo); padding-top: 22px; }
.titulo-cat { font-family: var(--f-display); font-weight: 600; font-size: 34px; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 4px; text-wrap: balance; }
.bajada-cat { margin: 0; color: var(--tinta-2); }
.contador { background: var(--fondo); font-size: 13px; color: var(--tinta-2); padding-block: 2px 12px; }
.contador:empty { display: none; }
@media (min-width: 900px) { .encabezado { padding-top: 40px; text-align: center; } .titulo-cat { font-size: 46px; } .contador { text-align: center; } }
.cats { padding-block: 14px 6px; }
.grupos { padding-block: 4px 14px; }
.cats:has(+ .grupos[hidden]) { padding-bottom: 14px; }
/* compu: las categorías como menú principal, centradas y más grandes; los grupos de mates como segunda fila más liviana */
@media (min-width: 900px) {
  .cats { justify-content: center; flex-wrap: wrap; gap: 12px; padding-block: 40px 14px; overflow: visible; }
  .cats:has(+ .grupos[hidden]) { padding-bottom: 22px; }
  .cats .chip { font-size: 15px; padding: 11px 24px; border-radius: 26px; }
  .grupos { justify-content: center; flex-wrap: wrap; gap: 8px; padding-block: 2px 18px; overflow: visible; }
  .grupos .chip { font-size: 13.5px; padding: 8px 18px; background: transparent; box-shadow: none; }
  .grupos .chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); box-shadow: none; }
  .grupos .chip small { margin-left: 6px; }
}
.chip { flex: none; font-size: 13px; font-weight: 500; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta-2); box-shadow: 0 1px 2px rgba(43,42,36,.04); transition: all .2s ease; white-space: nowrap; }
.chip:hover { border-color: var(--oliva); color: var(--oliva); }
.chip[aria-pressed="true"] { background: var(--oliva); border-color: var(--oliva); color: var(--fondo); font-weight: 600; box-shadow: 0 4px 12px var(--oliva-sombra); }
.grupos .chip { font-size: 12.5px; padding: 6px 14px; }
.grupos .chip small { color: inherit; opacity: .75; font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }

.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-block: 16px 56px; }
/* tarjetas chicas: solo foto, nombre y precio; el detalle se ve al tocarlas */
@media (min-width: 700px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 900px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-block: 24px 84px; } }
@media (min-width: 1200px) { .grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.estado-carga { grid-column: 1 / -1; padding: 48px 0; text-align: center; color: var(--tinta-2); display: grid; gap: 14px; justify-items: center; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); display: flex; flex-direction: column; min-width: 0; box-shadow: 0 1px 2px rgba(43,42,36,.05), 0 10px 22px rgba(43,42,36,.07); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; animation: entra-tarjeta .5s ease both; }
@keyframes entra-tarjeta { from { transform: translateY(8px); } }
/* entrada animada de los filtros: el JS pone .oculta y la saca al entrar en pantalla (sin JS o con "reducir movimiento" se ve todo quieto) */
.chips.oculta .chip { opacity: 0; transform: translateY(14px); }
.chips.entra .chip { animation: entra-chip .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes entra-chip { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(43,42,36,.08), 0 22px 36px rgba(43,42,36,.12); }
.tarjeta.apagada .foto img { filter: grayscale(.7) opacity(.7); }
.foto { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: var(--radio) var(--radio) 0 0; background: var(--fondo); }
.foto img, .ficha-foto img, .mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* carrusel de fotos dentro de la tarjeta y de la ficha: se desliza con el dedo (o las flechas en compu); tocar la foto abre la ficha */
.ficha-foto { position: relative; }
.carrusel { position: absolute; inset: 0; }
.pistas { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.pistas::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.pts-c { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; pointer-events: none; z-index: 2; }
.pts-c i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.35); transition: background .2s, transform .2s; }
.pts-c i.on { background: #fff; transform: scale(1.25); }
.flecha-c { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(248,243,233,.9); color: var(--tinta); display: none; place-items: center; box-shadow: 0 2px 8px rgba(43,42,36,.25); opacity: 0; transition: opacity .2s; }
.flecha-c.ant { left: 6px; }
.flecha-c.sig { right: 6px; }
@media (hover: hover) { .flecha-c { display: grid; } .tarjeta:hover .flecha-c, .ficha-foto:hover .flecha-c, .flecha-c:focus-visible { opacity: 1; } }
.cinta, .etq { z-index: 2; pointer-events: none; }
/* nombre del color que se ve en la tarjeta del producto */
.etq-color { position: absolute; left: 8px; bottom: 24px; z-index: 2; pointer-events: none; background: rgba(43,42,36,.78); color: var(--fondo); font-size: 11.5px; font-weight: 500; padding: 3px 10px; border-radius: 12px; }
/* en la ficha (compu) la flecha de "mate anterior" ya ocupa el borde izquierdo: las de las fotos van un poco más adentro */
.ficha-foto .flecha-c.ant { left: 58px; }
.ficha-foto .flecha-c.sig { right: 12px; }
.ficha-foto .pts-c { bottom: 14px; }
/* sin foto todavía: el logo apagado */
.sin-foto { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(#ECE3D2, #DFD2BA); }
.sin-foto::after { content: ""; width: 42%; aspect-ratio: 475 / 561; background: url("../img/logo-transparente.png") center / contain no-repeat; opacity: .16; filter: grayscale(1); }
.etq { position: absolute; top: 10px; left: 10px; background: rgba(43,42,36,.82); backdrop-filter: blur(4px); color: var(--fondo); font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 12px; letter-spacing: .3px; }
.etq.reservado { background: var(--aviso); color: var(--aviso-tinta); }
.etq.agotado { background: var(--tarjeta); color: var(--tinta-2); }
.cinta { position: absolute; top: 14px; left: -30px; width: 110px; transform: rotate(-45deg); background: var(--oliva); color: var(--fondo); font-size: 10.5px; font-weight: 700; text-align: center; padding: 3px 0; letter-spacing: .4px; }
.cuerpo { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; gap: 2px; }
.cuerpo .precio { margin-top: auto; padding-top: 8px; }
@media (min-width: 900px) { .cuerpo { padding: 14px 16px 16px; } }
.cuerpo h3 { font-family: var(--f-display); font-size: 16.5px; font-weight: 600; line-height: 1.25; margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (min-width: 900px) { .cuerpo h3 { font-size: 17px; } }
.premium { font-family: var(--f-texto); font-size: 10.5px; font-weight: 600; background: var(--tinta); color: var(--fondo); border-radius: 10px; padding: 1px 7px; }
.cuerpo .id { font-size: 11.5px; color: var(--tinta-3); letter-spacing: .3px; }
.cuerpo p { color: var(--tinta-2); font-size: 13px; line-height: 1.5; margin: 4px 0 12px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.precio { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.precio b { font-family: var(--f-display); font-size: 17px; font-weight: 600; }
.precio s { color: var(--tinta-3); font-size: 12.5px; }
.precio small { color: var(--tinta-3); font-size: 12px; }
/* "Quedan 3": aparece solo con pocas (cantidad cargada por Jana). */
.quedan { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--aviso-tinta); }
.quedan::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ficha-cuerpo .quedan { margin: 0; font-size: 13.5px; }
.puntos { display: flex; gap: 5px; margin-top: 6px; }
.puntos i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); background-size: cover; background-position: center; }
.btn-agregar { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: var(--tinta); color: var(--fondo); border: 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 10px rgba(43,42,36,.2); transition: background .2s, box-shadow .2s; }
.btn-agregar:hover { background: #000; }
.btn-agregar.listo { background: var(--oliva); box-shadow: 0 4px 10px var(--oliva-sombra); }
.btn-agregar:disabled { background: var(--borde); color: var(--tinta-2); box-shadow: none; cursor: not-allowed; }
.btn-agregar svg { width: 15px; height: 15px; }

.pie { text-align: center; padding: 32px 20px calc(96px + env(safe-area-inset-bottom, 0px)); color: var(--tinta-3); font-size: 12.5px; border-top: 1px solid var(--borde); display: grid; gap: 8px; justify-items: center; }
.pie img { mix-blend-mode: multiply; }
.pie a { color: var(--oliva); font-weight: 500; text-decoration: none; }
.pie a:hover { color: #6E7F4A; }
/* redes y compartir: botones en el pie (WhatsApp ya no flota) */
.pie .redes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.pie .redes a, .pie .redes button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta); font: 500 13.5px var(--f-texto); text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(43,42,36,.05); transition: transform .2s, box-shadow .2s; }
.pie .redes a:hover, .pie .redes button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(43,42,36,.12); color: var(--tinta); }
.pie .redes svg { width: 18px; height: 18px; flex: none; }
.pie .redes .wa { background: var(--wa); border-color: var(--wa); color: var(--blanco); }
.pie .redes .wa:hover { color: var(--blanco); }
.pie .otra-vez { font-weight: 400; color: var(--tinta-3); text-decoration: underline; }
.legal { margin-top: 10px; font-size: 12.5px; }
.legal a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; padding: 6px 4px; }
.firma { margin-top: 10px; font-size: 11.5px; letter-spacing: .3px; }
.firma a { color: inherit; text-decoration: none; padding: 6px 4px; }
.firma a:hover em { text-decoration: underline; text-underline-offset: 3px; }


/* =================== FICHA Y CARRITO =================== */
.velo { position: fixed; inset: 0; z-index: 100; background: rgba(43,42,36,.42); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.velo.abierto { opacity: 1; pointer-events: auto; }

.hoja { position: fixed; z-index: 110; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); transform: scale(.9); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility 0s linear .42s; }
.hoja.abierto { transform: none; opacity: 1; pointer-events: auto; visibility: visible; transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
@media (min-width: 900px) { .hoja { top: 50%; left: 50%; right: auto; bottom: auto; width: min(920px, calc(100% - 96px)); height: min(640px, calc(100% - 64px)); transform: translate(-50%, -48%) scale(.96); } .hoja.abierto { transform: translate(-50%, -50%); } }
.hoja-panel { position: relative; height: 100%; background: var(--tarjeta); border-radius: 28px; box-shadow: 0 26px 70px rgba(43,42,36,.38); overflow: hidden; }
.hoja-contador { position: absolute; top: 14px; left: 14px; z-index: 3; background: rgba(255,255,255,.85); backdrop-filter: blur(4px); padding: 5px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600; color: var(--tinta-2); box-shadow: 0 4px 14px rgba(43,42,36,.1); font-variant-numeric: tabular-nums; }
.redondo { position: absolute; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borde); background: var(--tarjeta); display: grid; place-items: center; color: var(--tinta); box-shadow: 0 4px 14px rgba(43,42,36,.14); }
.hoja .cerrar { top: 14px; right: 14px; }
.hoja .flecha { top: 50%; transform: translateY(-50%); display: none; }
.hoja .flecha.ant { left: 14px; }
.hoja .flecha.sig { right: 14px; }
@media (min-width: 900px) { .hoja .flecha { display: grid; } }
.hoja .flecha:disabled { opacity: .35; cursor: default; }
.hoja-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* la ficha entra entera en la pantalla (sin scroll hacia abajo): la foto se achica o se agranda para dejar lugar al texto */
.ficha { display: flex; flex-direction: column; height: 100%; min-height: 0; }
@media (min-width: 900px) { .ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; } }
.ficha-foto { flex: 1 1 0; min-height: 26vh; width: 100%; overflow: hidden; background: var(--fondo); }
@media (min-width: 900px) { .ficha-foto { max-height: none; height: 100%; aspect-ratio: auto; } }
.ficha-cuerpo { flex: none; padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; align-content: start; }
@media (min-width: 900px) { .ficha-cuerpo { padding: 64px 48px 40px 36px; overflow-y: auto; } }
.ficha-meta { font-size: 12.5px; color: var(--tinta-3); }
.ficha-cuerpo h2 { font-family: var(--f-display); font-size: 20px; font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
.ficha-cuerpo .precio b { font-size: 22px; }
@media (min-width: 900px) { .ficha-cuerpo { gap: 14px; } .ficha-cuerpo h2 { font-size: 26px; } .ficha-cuerpo .precio b { font-size: 26px; } }
.ficha-cuerpo .precio s { font-size: 14px; }
.ficha-cuerpo p { margin: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.45; }
@media (min-width: 900px) { .ficha-cuerpo p { font-size: 14px; line-height: 1.6; } }
/* botones de la ficha en una sola fila para ahorrar alto */
.ficha-cuerpo .acciones { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ficha-cuerpo .acciones .btn { padding: 12px 16px; }
.ficha-cuerpo .acciones .btn-linea { white-space: nowrap; }
@media (min-width: 900px) { .ficha-cuerpo .acciones { grid-template-columns: 1fr; } }
.rot { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--tinta-3); font-weight: 500; margin-bottom: 8px; }
.colores { display: flex; gap: 12px; flex-wrap: wrap; }
.color { border: 0; background: transparent; padding: 0; display: grid; gap: 4px; justify-items: center; font-size: 12px; color: var(--tinta-2); }
.color .mini { width: 58px; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); display: block; }
.color[aria-pressed="true"] { color: var(--tinta); font-weight: 600; }
.color[aria-pressed="true"] .mini { border: 2px solid var(--tinta); }
.pres-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.pres { border: 1px solid var(--borde); background: var(--blanco); border-radius: 12px; padding: 8px 14px; text-align: left; font-variant-numeric: tabular-nums; }
.pres small { display: block; color: var(--tinta-3); font-size: 12px; }
.pres[aria-pressed="true"] { border-color: var(--oliva); box-shadow: inset 0 0 0 1px var(--oliva); }
.pres:disabled { cursor: not-allowed; opacity: .55; }
.pres:disabled b { text-decoration: line-through; }
.btn { border: 0; border-radius: 12px; padding: 14px 20px; font-size: 14.5px; font-weight: 600; width: 100%; transition: background .2s, color .2s; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn-oliva { background: var(--oliva); color: var(--blanco); }
.btn-oliva:hover { background: var(--oliva-oscuro); }
.btn-oliva:disabled { background: var(--borde); color: var(--tinta-2); cursor: not-allowed; }
.btn-linea { background: var(--blanco); border: 1px solid var(--oliva); color: var(--oliva); }
.btn-linea:hover { background: var(--oliva-suave); }
.btn-wa { background: var(--wa); color: var(--blanco); }
.btn-wa:hover { background: #256A42; }

.carrito { position: fixed; z-index: 110; inset: 0; background: var(--tarjeta); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .38s cubic-bezier(.22,1,.36,1), visibility 0s linear .38s; }
.carrito.abierto { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.22,1,.36,1); }
@media (min-width: 900px) { .carrito { left: auto; width: 440px; box-shadow: -20px 0 50px rgba(43,42,36,.2); } }
.carrito-cab { display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px; }
.carrito-cab button { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; }
.carrito-cab button:hover { background: var(--fondo); }
.carrito-cab h2 { font-family: var(--f-display); font-size: 24px; font-weight: 600; margin: 0; }
.carrito-cuerpo { flex: 1; overflow-y: auto; padding: 4px 16px 20px; display: grid; gap: 16px; align-content: start; }
.carrito-pie { border-top: 1px solid var(--borde); padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.carrito-pie:empty { display: none; }
.banner { background: var(--aviso); color: var(--aviso-tinta); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.ya-enviado { background: var(--oliva-suave); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.ya-enviado p { margin: 0; font-size: 14px; font-weight: 600; }
.ya-enviado-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ya-enviado-b .btn { width: 100%; padding-inline: 8px; font-size: 13px; }
.items { display: grid; gap: 4px; }
.item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; }
.item .mini { width: 46px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--fondo); }
.item .n { font-size: 14px; line-height: 1.3; }
.item .acc { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 99px; background: var(--blanco); }
.cantidad button { width: 26px; height: 26px; border: 0; background: transparent; border-radius: 50%; }
.cantidad span { min-width: 18px; text-align: center; font-size: 12.5px; }
.quitar { border: 0; background: none; color: var(--tinta-3); font-size: 12px; text-decoration: underline; padding: 0; }
.item .p { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.envio { display: grid; gap: 6px; font-size: 13.5px; }
.barra { height: 6px; border-radius: 99px; background: var(--borde); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--oliva); border-radius: 99px; transition: width .4s ease; }
.sugerencia { background: var(--oliva-suave); border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.sugerencia p { margin: 0; font-weight: 600; font-size: 14px; }
/* sugerencias en una sola fila que se desliza: ocupan poco alto y dejan ver los totales y el botón */
.sug-lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; scroll-snap-type: x proximity; }
.sug-lista::-webkit-scrollbar { display: none; }
.sug { flex: none; scroll-snap-align: start; border: 0; background: var(--blanco); border-radius: 12px; padding: 5px 12px 5px 5px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; text-align: left; box-shadow: 0 1px 3px rgba(43,42,36,.08); }
.sug .mini { width: 32px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; display: block; flex: none; }
.sug-n { white-space: nowrap; }
.sug-p { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cupon { display: flex; gap: 8px; }
.cupon input { flex: 1; min-width: 0; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; background: var(--blanco); text-transform: uppercase; }
.cupon button { border: 1px solid var(--oliva); background: var(--blanco); color: var(--oliva); border-radius: 10px; padding: 0 14px; font-weight: 600; }
.cupon button:hover { background: var(--oliva-suave); }
.msg-cupon { font-size: 13px; margin-top: 6px; color: var(--oliva); }
.msg-cupon.error { color: var(--error); }
.totales { display: grid; gap: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.totales div { display: flex; justify-content: space-between; gap: 12px; }
.totales .gratis { color: var(--oliva); font-weight: 600; }
.totales .total { font-weight: 700; font-size: 15.5px; }
.pagos-t { font-size: 12px; color: var(--tinta-2); margin: 0 0 6px; }
.pagos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(43,42,36,.08); }
.pago { border: 0; background: none; border-radius: 999px; padding: 8px; font-weight: 600; font-size: 13.5px; color: var(--tinta-2); transition: background-color .15s, color .15s; }
.pago[aria-pressed="true"] { background: var(--blanco); color: var(--oliva); box-shadow: 0 1px 2px rgba(43,42,36,.12); }
.pago-nota { font-size: 12.5px; color: var(--tinta-2); margin: 6px 0 0; }
.datos-guardados { font-size: 13px; color: var(--tinta-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.datos-guardados button { border: 0; background: none; color: var(--oliva); font-weight: 600; padding: 0; font-size: 13px; }
.campos { display: grid; gap: 8px; }
.campo { display: grid; gap: 3px; font-size: 12.5px; color: var(--tinta-2); }
.campo input, .campo textarea { border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; background: var(--blanco); font-size: 16px; color: var(--tinta); font-family: inherit; }
.campo textarea { resize: vertical; }
.campos-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.campos-2 input { width: 100%; min-width: 0; }
.regalo { display: grid; gap: 8px; }
.regalo-si { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.regalo-si input { width: 18px; height: 18px; accent-color: var(--oliva); margin: 0; }
.carrito-vacio { text-align: center; padding: 48px 0; color: var(--tinta-2); display: grid; gap: 16px; justify-items: center; }
.carrito-vacio .btn { width: auto; }
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); z-index: 130; background: var(--tinta); color: var(--fondo); padding: 10px 18px; border-radius: 99px; font-size: 13.5px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* =================== Reducir movimiento =================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .polvo, #vapor { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* mensajes de la grilla vacía / cargando: sobre una tarjeta, porque el fondo ahora es oscuro */
.grilla .estado-carga { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px 20px; grid-column: 1 / -1; text-align: center; }