/* ========================================================================= Comandas — la carta que ve el comensal. Todo lo visual sale de la PLANTILLA que eligió el negocio (paleta, tipografía, radios) más SU color de acento. Aquí no hay colores fijos: si aparece uno, es un error. Tres anchos reales, no dos: el celular en la mesa, la tablet apoyada, y el computador de quien pide desde la oficina. Cada uno cambia la disposición, no solo el tamaño. ========================================================================= */ /* En iOS el scroller real es : sin la regla de abajo, lo ancho (el arco decorativo mide 585px) deja PANEAR la página aunque el body diga hidden — la misma lección de la landing. clip donde existe; hidden de respaldo. */ html{overflow-x:hidden;overflow-x:clip} body.publico{ /* La página NUNCA se mueve de lado: lo ancho (chips, fotos, brasas del telón) se desborda dentro de su propio contenedor, no arrastra el body. */ overflow-x:hidden;overflow-x:clip; background:var(--fondo); color:var(--texto); font-family:var(--f-texto); padding-bottom:26px; -webkit-font-smoothing:antialiased; } body.publico h1,body.publico h2,body.publico h3,body.publico .tipo-titulo{ font-family:var(--f-titulo); letter-spacing:var(--ls,-0.02em); } .envoltura{max-width:1120px;margin:0 auto;padding:0 20px} /* ───────── Las superficies que pone el navegador ───────── Aquí importan más que en el panel: esta es la carta del NEGOCIO, y una selección azul de fábrica encima de una plantilla italiana o de una de jugos la delata como una plantilla genérica. Todo sale del acento del negocio, así que cada carta se selecciona en su propio color sin una línea extra. */ body.publico ::selection{ background:color-mix(in srgb, var(--acento) 26%, transparent); color:var(--texto); } body.publico{caret-color:var(--acento);scrollbar-color:var(--borde) transparent} body.publico ::-webkit-scrollbar{width:10px;height:10px} body.publico ::-webkit-scrollbar-track{background:transparent} body.publico ::-webkit-scrollbar-thumb{ background:var(--borde);border-radius:999px;border:3px solid transparent;background-clip:content-box; } /* Anillo de foco. El comensal pide desde el celular casi siempre, pero el pedido por internet entra también desde un computador, y ahí se llena el formulario con Tab. Sin anillo no se sabe en qué campo se está escribiendo. Va en el acento del negocio, con un halo del color del fondo debajo para que se despegue de cualquier plantilla, clara u oscura. */ body.publico :focus-visible{ outline:2px solid var(--acento); outline-offset:2px; border-radius:var(--radio-foto,10px); } /* ───────── Cabecera ───────── La primera pantalla decide si el comensal se queda. Lleva marca, una línea de qué es el sitio, y el estado —abierto o no— en grande: es lo primero que pregunta quien abre una carta. */ .pub-cabeza{position:relative;overflow:hidden;padding:0 0 26px} /* Dos halos y no uno: el segundo, más chico y desplazado, es lo que hace que el fondo se vea pintado y no como un degradado de plantilla. Se queda en opacidades bajas porque detrás va texto que tiene que leerse. */ .pub-cabeza::before{ content:"";position:absolute;inset:0 0 auto;height:280px;pointer-events:none; background: radial-gradient(110% 90% at 12% 0%, var(--acento) 0%, transparent 58%), radial-gradient(70% 70% at 92% 12%, var(--acento) 0%, transparent 62%); opacity:.2; } .pub-cabeza .envoltura{position:relative;padding-top:28px} /* La marca, CENTRADA como héroe de app: el logo arriba (transparente, ya sin caja), el nombre debajo, la descripción al centro. Una portada, no un membrete. */ .pub-marca{display:flex;flex-direction:column;align-items:center;text-align:center; gap:14px;margin-bottom:6px} /* contain y no cover: muchos negocios suben un logotipo ANCHO (el nombre escrito), y recortarlo dentro de un cuadrado se come la mitad de la marca. Con contain, un logo cuadrado sigue viéndose cuadrado y uno ancho se ve completo. */ .pub-logo{ height:80px;width:auto;max-width:min(260px,64vw);object-fit:contain;flex:none; filter:drop-shadow(0 6px 18px rgba(0,0,0,.28)); } .pub-nombre{ font-size:clamp(30px,6vw,50px);font-weight:800;line-height:1.02; letter-spacing:var(--ls,-.03em);text-transform:var(--tt,none); text-wrap:balance; } .pub-desc{color:var(--tenue);font-size:clamp(14.5px,2vw,17px);margin-top:8px; line-height:1.5;max-width:52ch;margin-inline:auto} .pub-cabeza .envoltura{text-align:center} .pub-datos{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px; color:var(--tenue);font-size:14px} .pub-datos span{display:inline-flex;align-items:center;gap:7px} /* ── El estado, sin franja ── Un chip del tamaño de su palabra y el tiempo aparte con su reloj. El color vive en el punto y en la letra, no en un lienzo de pared a pared: dice lo mismo, grita menos. */ .estado-linea{display:flex;align-items:center;justify-content:center;gap:10px; flex-wrap:wrap;margin-top:16px} /* ── La corona ── Una ELIPSE de lado a lado asomando del borde superior, que baja fundiéndose con el fondo — y por su arco corren dos pulsos de corriente, el mismo circuito del interruptor de la cocina: encendido se NOTA. Verde en línea, ámbar en pausa, rojo cerrado. */ .corona{ position:relative;height:104px;overflow:hidden; display:grid;justify-items:center;align-items:center; /* centrado en la banda */ --ep:#16A34A; } .corona-forma{ position:absolute;top:0;left:50%;transform:translateX(-50%); width:150vw;height:100%; border-radius:0 0 50% 50% / 0 0 100% 100%; /* el arco elíptico */ background:linear-gradient(180deg, color-mix(in srgb, var(--ep) 46%, var(--fondo)) 0%, color-mix(in srgb, var(--ep) 18%, var(--fondo)) 55%, transparent 96%); /* se funde, sin borde duro */ } /* ── La cocina en tránsito ── Cada viñeta VIAJA por el arco (translateX en vw + una parábola de translateY que calca la curva), a su propia velocidad. Y hay profundidad de campo: el grupo A nítido mientras el B pasa borroso, y cada 8 segundos el foco se intercambia — una cámara eligiendo a quién mirar. */ .ck-escena{position:absolute;inset:0;pointer-events:none;overflow:hidden} .ck{ position:absolute;left:0;top:0;width:52px;height:52px; will-change:transform; animation:ck-viaja var(--dur,12s) linear infinite var(--del,0s), ck-foco-a 8s ease-in-out infinite; } /* el grupo rápido viaja en TURBO: remolonea al entrar y CRUZA el centro de un tirón — mismo recorrido, otra personalidad. El lento va en crucero. */ .ck-fa{animation-name:ck-viaja-turbo,ck-foco-a} .ck-fb{animation-name:ck-viaja,ck-foco-b} .ck svg{width:100%;height:100%;overflow:visible;display:block; filter:drop-shadow(0 1px 4px rgba(0,0,0,.35))} .ck svg *{fill:none;stroke:#fff;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round} /* la parábola del arco: 9 paradas sobre y = 40·4t(1-t), suave al ojo */ @keyframes ck-viaja{ 0% {transform:translate(-10vw, 38px)} 12.5%{transform:translate(4vw, 31px)} 25% {transform:translate(18vw, 25px)} 37.5%{transform:translate(32vw, 20px)} 50% {transform:translate(45vw, 18px)} 62.5%{transform:translate(59vw, 20px)} 75% {transform:translate(73vw, 25px)} 87.5%{transform:translate(87vw, 31px)} 100% {transform:translate(103vw,38px)} } /* los dos planos de foco, en contrafase: cuando A enfoca, B se difumina */ @keyframes ck-viaja-turbo{ 0% {transform:translate(-10vw, 38px)} 22% {transform:translate(2vw, 32px)} /* entra con calma… */ 34% {transform:translate(14vw, 25px)} 44% {transform:translate(32vw, 20px)} /* …y aquí pisa el acelerador */ 52% {transform:translate(52vw, 18px)} 60% {transform:translate(68vw, 21px)} 74% {transform:translate(84vw, 29px)} /* frena a la salida */ 100% {transform:translate(103vw,38px)} } @keyframes ck-foco-a{ 0%,42%,100%{filter:blur(0);opacity:.95} 50%,92%{filter:blur(2.2px);opacity:.55} } @keyframes ck-foco-b{ 0%,42%,100%{filter:blur(2.2px);opacity:.55} 50%,92%{filter:blur(0);opacity:.95} } /* lo que cada una hace MIENTRAS viaja */ .ck-cuchillo{fill:rgba(255,255,255,.9);stroke-width:.7; transform-box:fill-box;transform-origin:100% 100%; animation:ck-pica 2.6s ease-in-out infinite} @keyframes ck-pica{ 0%,52%,100%{transform:rotate(0)} 8%{transform:rotate(-22deg)} 16%{transform:rotate(0)} 24%{transform:rotate(-22deg)} 32%{transform:rotate(0)} } .ck-vapor{stroke-width:.8;animation:ck-vapor 2.8s ease-out infinite} .ck-vapor-b{animation-delay:1.4s} @keyframes ck-vapor{ 0%{opacity:0;transform:translateY(3px)} 35%{opacity:.9} 100%{opacity:0;transform:translateY(-5px)} } .ck-mece{transform-box:fill-box;transform-origin:80% 60%; animation:ck-mece 2.2s ease-in-out infinite} @keyframes ck-mece{ 0%,55%,100%{transform:rotate(0)} 65%{transform:rotate(-9deg)} 78%{transform:rotate(5deg)} 88%{transform:rotate(-2deg)} } .ck-torta{fill:rgba(255,255,255,.85);stroke:none; animation:ck-salta 2.2s ease-in-out infinite} @keyframes ck-salta{ 0%,55%,100%{transform:translateY(0)} 68%{transform:translateY(-7px)} 80%{transform:translateY(0) scaleX(1.25)} 86%{transform:translateY(0) scaleX(1)} } .ck-suena{transform-box:fill-box;transform-origin:50% 100%; animation:ck-suena 3.4s ease-in-out infinite} @keyframes ck-suena{ 0%,60%,100%{transform:rotate(0)} 66%{transform:rotate(-10deg)} 72%{transform:rotate(8deg)} 78%{transform:rotate(-4deg)} 84%{transform:rotate(0)} } .ck-bolsa{transform-box:fill-box;transform-origin:center; animation:ck-sale 3s ease-in-out infinite} @keyframes ck-sale{ 0%,50%,100%{transform:translateX(0)} 62%{transform:translateX(3px)} 74%{transform:translateX(0)} } .ck-raya{stroke:rgba(255,255,255,.75);stroke-width:.8; animation:ck-raya 3s ease-in-out infinite;opacity:0} .ck-raya-b{animation-delay:.12s} @keyframes ck-raya{ 55%{opacity:0;transform:translateX(0)} 62%{opacity:.9;transform:translateX(4px)} 78%{opacity:0;transform:translateX(9px)} } /* cerrado: el tránsito se detiene del todo — arco limpio y mudo */ .corona.cerrado .ck-escena{display:none} .corona-txt{ position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px; padding-top:env(safe-area-inset-top); /* centrado real: solo el notch suma */ font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35); } .corona .bolita{ width:8px;height:8px;border-radius:50%;flex:none;position:relative; background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9); } .corona.abierto .bolita::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2px solid #fff;animation:pulso-abierto 2.6s ease-out infinite; } .corona.abierto{--ep:#16A34A} .corona.espera{--ep:#D97706} .corona.cerrado{--ep:#DC2626} @media (prefers-reduced-motion:reduce){ .ck-escena{display:none} .corona.abierto .bolita::after{animation:none;opacity:0} } /* la marca baja de verdad: la corona respira sola arriba y el nombre (o el logo del negocio) arranca despegado, con escena propia */ .corona + .envoltura{padding-top:34px} /* El chip del tiempo: color de la marca, respirando un brillo suave, y el reloj hace TIC — el dato más consultado de la carta merece estar vivo. */ .est-det{ display:inline-flex;align-items:center;gap:8px; padding:10px 18px;border-radius:999px; font-size:14.5px;font-weight:750; color:var(--acento-leible,var(--acento)); background:color-mix(in srgb, var(--acento) 14%, var(--sup)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 32%, transparent); animation:det-respira 3.2s ease-in-out infinite; } @keyframes det-respira{ 50%{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 32%, transparent), 0 0 22px -6px var(--acento)} } .est-det svg{width:17px;height:17px;flex:none;transform-origin:50% 55%; animation:det-tic 2.4s ease-in-out infinite} @keyframes det-tic{0%,58%,100%{transform:rotate(0)}66%{transform:rotate(-11deg)} 76%{transform:rotate(8deg)}86%{transform:rotate(-4deg)}} @media (prefers-reduced-motion:reduce){ .est-det,.est-det svg{animation:none} } @media (prefers-reduced-motion:reduce){ .est-chip.abierto .bolita::after{animation:none;opacity:0} } .barra-cerrado{ position:sticky;top:0;z-index:30;padding:13px 20px;text-align:center; font-weight:700;font-size:14.5px; background:#3B1114;color:#FFD9D9;border-bottom:1px solid #7F1D1D; } /* ───────── Categorías ───────── Fichas con ICONO, no solo texto. En una carta larga el pulgar desplaza esta fila sin que el ojo llegue a leer: la forma del vaso encuentra "Bebidas" antes que la palabra. El icono se deduce del nombre que ya escribió el dueño (cm_icono_categoria) — no hay que pedirle que elija nada. */ .cats-envoltura{ position:sticky;top:0;z-index:25; background:var(--vidrio);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--borde); } .cats{display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:none;-ms-overflow-style:none} .cats::-webkit-scrollbar{display:none} /* Minimalismo pedido por Alejandro (referencia Burger House): el chip es un CÍRCULO con el icono y el nombre pequeño debajo — nada de píldoras anchas. */ .cat{ display:inline-flex;flex-direction:column;align-items:center;gap:6px; padding:2px 4px;border-radius:14px; background:none;color:var(--tenue); font-weight:650;font-size:11.5px;white-space:nowrap; border:0;cursor:pointer;flex:none;font-family:inherit; transition:background-color .2s var(--ease-salida),color .2s var(--ease-salida), border-color .2s var(--ease-salida),transform .12s var(--ease-salida); } .cat-ico{ display:grid;place-items:center;width:46px;height:46px;border-radius:50%; background:var(--sup2);border:1px solid var(--borde); transition:background-color .2s var(--ease-salida),border-color .2s var(--ease-salida), color .2s var(--ease-salida),transform .14s var(--ease-salida); } .cat-ico svg{width:20px;height:20px} .cat:active{transform:scale(.96)} /* Activa: rellena en el color del negocio. El icono pasa a heredar el color del texto para que no quede un icono de acento sobre un fondo de acento. */ .cat.on{color:var(--texto)} .cat.on .cat-ico{background:var(--acento);border-color:var(--acento);color:var(--acento-txt)} .cat:active .cat-ico{transform:scale(.92)} @media (hover:hover) and (pointer:fine){ .cat:not(.on):hover .cat-ico{background:var(--acento-suave);border-color:var(--acento); color:var(--acento-leible,var(--acento))} .cat:not(.on):hover{color:var(--texto)} } .seccion{padding:38px 0 0} .seccion h2{ font-size:clamp(21px,3vw,29px);font-weight:750;letter-spacing:var(--ls,-.02em); margin-bottom:20px;text-transform:var(--tt,none); } /* ───────── Producto ───────── Reconstruida al nivel de una app de comida: la foto manda, el nombre pesa, el precio se ve desde lejos y agregar es UN toque desde la propia tarjeta. Antes el precio iba en un renglón suelto y para agregar había que abrir el detalle: tres platos costaban nueve toques en vez de tres. Dos disposiciones según la plantilla: LISTA (foto al lado, se recorre rápido, sirve para cartas largas) o REJILLA (la foto manda, para negocios donde el producto entra por los ojos). */ .prods{display:grid;gap:16px} @media (min-width:640px){ .prods{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ body.disp-rejilla .prods{grid-template-columns:repeat(3,1fr)} } .prod{ position:relative;background:var(--sup); border:1px solid var(--card-borde,var(--borde)); box-shadow:var(--card-sombra,none); cursor:pointer;overflow:hidden; /* transform y no box-shadow al pulsar: el transform no repinta la tarjeta */ transition:transform .12s var(--ease-salida),border-color .2s var(--ease-salida); } .prod:active{transform:scale(.985)} @media (hover:hover) and (pointer:fine){ .prod:hover{border-color:var(--acento)} .prod:hover .prod-foto{transform:scale(1.04)} } .prod:focus-visible{outline:2px solid var(--acento);outline-offset:3px} .prod-medio{position:relative;flex:none;overflow:hidden} .prod-foto{ width:100%;height:100%;object-fit:cover;background:var(--sup2);display:block; transition:transform .5s var(--ease-salida); } /* ── Sin foto ── La mayoría de los restaurantes arrancan sin fotos, así que este estado NO es el caso raro: es el que van a ver los primeros días y tiene que verse bien. Antes era un degradado casi blanco con un icono al 42% — se leía como que faltaba algo. Ahora es un bloque con el color del negocio, la inicial del plato en grande al fondo y el icono de su tipo de comida encima. Se lee como una decisión, no como un hueco. */ .prod-sinfoto{ position:relative;width:100%;height:100%;display:grid;place-items:center; background: radial-gradient(120% 120% at 20% 0%, var(--acento-suave) 0%, transparent 70%), linear-gradient(150deg, var(--acento-suave), var(--sup2) 85%); color:var(--acento); box-shadow:inset 0 0 0 1px var(--borde); } .prod-sinfoto svg{width:34%;height:34%;max-width:56px;max-height:56px; position:relative;z-index:1;opacity:.92} .psf-letra{ position:absolute;inset:0;display:grid;place-items:center; font-size:min(58%, 92px);font-weight:800;line-height:1; color:var(--acento);opacity:.12;user-select:none; font-family:var(--f-titulo); } /* Sello sobre la foto (agotado). Va encima de la imagen, como en las apps. */ .prod-sello{ position:absolute;left:10px;top:10px;z-index:2; padding:5px 11px;border-radius:999px; font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .prod-sello-agotado{background:rgba(15,15,18,.78);color:#FCA5A5} .prod-txt{flex:1;min-width:0;display:flex;flex-direction:column} .prod-nom{ font-family:var(--f-titulo);font-size:17.5px;font-weight:750;line-height:1.25; letter-spacing:var(--ls,-.01em);text-transform:var(--tt,none); } .prod-desc{ font-size:14px;color:var(--tenue);margin-top:6px;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* El pie se pega abajo: en una rejilla, dos tarjetas de alto distinto dejan el precio a la misma altura y la fila se lee como una fila. */ .prod-pie{ display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:12px; } .prod-precio{ font-size:19px;font-weight:800;color:var(--acento-leible,var(--acento));letter-spacing:-.02em; font-variant-numeric:tabular-nums;line-height:1; } /* El botón de agregar: círculo relleno en el color del negocio. Es el elemento más brillante de la tarjeta a propósito — es lo que hay que tocar. */ .prod-mas{ margin-left:auto;flex:none; width:40px;height:40px;border-radius:50%;display:grid;place-items:center; background:var(--acento);color:var(--acento-txt); box-shadow:0 6px 16px -6px var(--acento); transition:transform .14s var(--ease-salida); } .prod-mas svg{width:19px;height:19px} .prod:active .prod-mas{transform:scale(.9)} /* ── Disposición LISTA ── */ body.disp-lista .prod{ display:flex;gap:15px;padding:14px;border-radius:var(--radio,18px); } body.disp-lista .prod-medio{ width:118px;height:118px;border-radius:var(--radio-foto,14px);order:2; } body.disp-lista .prod-sello{left:8px;top:8px;font-size:10.5px;padding:4px 9px} /* ── Disposición REJILLA ── */ body.disp-rejilla .prod{ display:flex;flex-direction:column;border-radius:var(--radio,18px); } body.disp-rejilla .prod-medio{width:100%;aspect-ratio:4/3;height:auto;order:-1} body.disp-rejilla .prod-txt{padding:15px 16px 17px} /* Agotado: se ve que existe, se ve que hoy no hay, y no se puede tocar. */ .prod.agotado{opacity:.62;cursor:default} .prod.agotado .prod-nom{text-decoration:line-through} .prod.agotado .prod-foto,.prod.agotado .prod-sinfoto{filter:grayscale(.85)} .prod.agotado:active{transform:none} /* Se conserva la clase vieja por si quedó algún marcado sin migrar */ .etq-agotado{ display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;padding:4px 9px;border-radius:999px; background:var(--sup2);color:var(--tenue);margin-top:9px;border:1px solid var(--borde); } /* ───────── Modal ───────── */ /* ── La apertura del popup ── Dos movimientos coordinados: el fondo se FUNDE a oscuro y la hoja SUBE desde abajo con una curva fuerte. Transiciones y no keyframes: se pueden disparar seguido (producto → carrito → producto) y siempre parten de donde van, sin reiniciarse a cero. El velo vive siempre en el DOM (visibility, no display): display:none no deja animar nada. */ .velo{position:fixed;inset:0;background:rgba(4,4,6,.78); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); z-index:150;display:flex;align-items:flex-end;justify-content:center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .26s var(--ease-salida), visibility 0s linear .26s; } .velo.ver{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} .velo .modal{ transform:translateY(34px) scale(.97);opacity:0; transition:transform .32s var(--ease-salida), opacity .26s var(--ease-salida); } .velo.ver .modal{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ .velo,.velo .modal{transition:opacity .2s ease} .velo .modal{transform:none} } .modal{ background:var(--sup);color:var(--texto); /* Esta hoja SÍ flota sobre la carta: le toca sombra, y por eso no lleva borde. Es el mismo criterio, aplicado al revés. */ box-shadow:0 -18px 48px -16px rgba(0,0,0,.5); border-radius:26px 26px 0 0;width:100%;max-height:92dvh;overflow-y:auto;padding:24px 20px 26px; font-family:var(--f-texto); ; /* Solo scroll vertical: cualquier hijo que se pase de ancho (una palabra larga, una imagen, un flex sin min-width) creaba una barra horizontal dentro de la ventana, y una ventana que se mueve para los lados se siente rota. Lo que no quepa, se envuelve o se recorta. */ overflow-x:hidden;overflow-wrap:break-word} .modal h3{font-family:var(--f-titulo);font-size:23px;margin-bottom:5px;line-height:1.2} .modal .campo input,.modal .campo textarea,.modal .campo select{ background:var(--sup2);border-color:var(--borde);color:var(--texto); border-radius:var(--radio,12px); } .modal .campo label{color:var(--tenue)} .modal .ayuda{color:var(--tenue)} .op-grupo{margin:22px 0} .op-grupo h4{font-family:var(--f-titulo);font-size:16px;font-weight:700;margin-bottom:3px} .op-grupo .req{font-size:11.5px;color:var(--acento);font-weight:700; text-transform:uppercase;letter-spacing:.06em} .op-val{display:flex;align-items:center;gap:13px;padding:14px 14px; border-radius:var(--radio,12px);background:var(--sup2);margin-top:9px;cursor:pointer; border:1px solid transparent;transition:border-color .15s ease,background-color .15s ease} .op-val.on{border-color:var(--acento);background:var(--acento-suave)} body.oscura .op-val.on{background:var(--sup3,var(--sup2))} .op-val input{width:22px;height:22px;accent-color:var(--acento);flex:none} .op-val .n{flex:1} .op-val .r{color:var(--tenue);font-weight:700;font-size:14px} .op-val.agotado{opacity:.4;pointer-events:none} .cantidad{display:flex;align-items:center;gap:18px;justify-content:center;margin:24px 0} .cantidad button{width:54px;height:54px;border-radius:50%;border:1px solid var(--borde); background:var(--sup2);color:var(--texto);font-size:25px;cursor:pointer; display:grid;place-items:center;transition:transform .08s var(--ease-salida)} .cantidad button:active{transform:scale(.92)} .cantidad span{font-size:28px;font-weight:700;min-width:48px;text-align:center; font-family:var(--f-titulo)} /* Al tocar el carrito: el círculo se hunde, rebota y suelta un anillo de luz — el detalle que hace que la app se sienta cara. */ .carrito-btn.tocado .caja{animation:cb-rebote .5s var(--ease-salida)} @keyframes cb-rebote{ 0%{transform:scale(1)} 28%{transform:scale(.86)} 62%{transform:scale(1.08)} 100%{transform:scale(1)} } .carrito-btn .caja::after{ content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none; border:2px solid var(--acento);opacity:0; } .carrito-btn.tocado .caja::after{animation:cb-onda .62s var(--ease-salida)} @keyframes cb-onda{ 0%{opacity:.85;transform:scale(1)} 100%{opacity:0;transform:scale(1.85)} } /* Cuando entra algo al carrito, el globito late y el total sube. */ .carrito-btn.sumado .n{animation:cb-late .45s var(--ease-salida)} @keyframes cb-late{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}} .carrito-btn.sumado .t{animation:cb-sube .45s var(--ease-salida)} @keyframes cb-sube{0%{transform:translateY(7px);opacity:0}100%{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){ .carrito-btn.tocado .caja,.carrito-btn.tocado .caja::after, .carrito-btn.sumado .n,.carrito-btn.sumado .t{animation:none} } /* El crédito lleva a la landing: cada carta que anda por ahí es una puerta de entrada al producto (pedido de Alejandro). */ .pp-marca{transition:color .15s ease} .pp-marca b{font-weight:800;color:var(--acento-leible,var(--acento))} @media (hover:hover){ .pp-marca:hover{color:var(--texto)} } /* ───────── Carrito ───────── Botón FLOTANTE circular abajo a la derecha (pedido de Alejandro: la franja de ancho completo se comía la pantalla en el celular). El total y el conteo viven encima del círculo, no en una barra. */ .carrito-btn{ position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom)); left:auto;z-index:90;display:none;padding:0;background:none;border:0; font-family:var(--f-texto); } .carrito-btn.ver{display:block} .carrito-btn .caja{ position:relative;display:grid;place-items:center; width:64px;height:64px;border-radius:50%;padding:0; background:var(--acento);color:var(--acento-txt); box-shadow:0 14px 34px -10px rgba(0,0,0,.6), 0 0 0 6px color-mix(in srgb, var(--fondo) 70%, transparent); cursor:pointer;transition:transform .12s var(--ease-salida); } .carrito-btn:active .caja{transform:scale(.92)} .carrito-btn .cb-ico{display:grid;place-items:center} .carrito-btn .cb-ico svg{width:26px;height:26px} /* El conteo: globito rojo en la esquina, como en cualquier app. */ .carrito-btn .caja .n{ position:absolute;top:-3px;right:-3px;min-width:24px;height:24px;padding:0 6px; border-radius:999px;background:#EF4444;color:#fff; font-size:12.5px;font-weight:800;display:grid;place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.45); } /* El total: píldora debajo del círculo, para no perder el dato. */ .carrito-btn .t{ position:absolute;bottom:calc(100% + 8px);right:0;white-space:nowrap; padding:5px 12px;border-radius:999px; background:var(--sup);color:var(--texto); font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums; box-shadow:0 6px 18px -6px rgba(0,0,0,.5); } .carrito-btn .t:empty{display:none} /* "Ver pedido" no cabe en un círculo: se lee por el icono y el globito. */ .carrito-btn .caja>span:not(.cb-ico):not(.n):not(.t){ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); } /* Con el carrito flotando, el chat del cliente sube para no chocar. */ .carrito-btn.ver ~ .chat-flot{bottom:calc(96px + env(safe-area-inset-bottom))} .linea{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--borde)} .linea:last-child{border-bottom:0} .li-foto{ width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none; background:var(--sup2); } .li-sinfoto{ display:grid;place-items:center;font-family:var(--f-titulo);font-size:19px; color:var(--acento-leible,var(--acento)); background:color-mix(in srgb, var(--acento) 12%, var(--sup2)); } .linea .c{font-weight:800;color:var(--acento-leible,var(--acento));flex:none; font-variant-numeric:tabular-nums} .linea .n{flex:1;min-width:0} .linea .n b{font-weight:650;font-size:15.5px;display:block;line-height:1.25} .linea .n span{display:block;font-size:13px;color:var(--tenue);margin-top:2px} .li-nota{color:var(--tx-ojo,#FCD34D)!important} .linea .p{font-weight:750;font-variant-numeric:tabular-nums;flex:none} /* Quitar: un basurero con área de toque de verdad, centrado a la línea */ .linea .x{ flex:none;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer; display:grid;place-items:center;background:transparent;color:var(--tenue); transition:color .15s ease,background-color .15s ease,transform .12s var(--ease-salida); } .linea .x svg{width:18px;height:18px} .linea .x:active{transform:scale(.88)} @media (hover:hover){ .linea .x:hover{color:#EF4444;background:rgba(239,68,68,.1)} } .total-fila{display:flex;justify-content:space-between;align-items:center; padding:18px 0 6px;font-size:20px;font-weight:700;font-family:var(--f-titulo)} .pago-op{display:flex;align-items:flex-start;gap:13px;padding:16px 15px; border-radius:var(--radio,14px);background:var(--sup2);border:1px solid var(--borde); margin-bottom:11px;cursor:pointer;transition:border-color .15s ease} .pago-op.on{border-color:var(--acento);background:var(--acento-suave)} body.oscura .pago-op.on{background:var(--sup)} .pago-op input{width:22px;height:22px;accent-color:var(--acento);flex:none;margin-top:2px} .pago-op b{display:block;font-size:15.5px;margin-bottom:2px} .pago-op span{font-size:13.5px;color:var(--tenue);line-height:1.45} /* ───────── Estado del pedido ───────── */ .estado-pag{max-width:560px;margin:0 auto;padding:36px 20px 70px;text-align:center} .turno-etq{font-size:12px;font-weight:700;text-transform:uppercase; letter-spacing:.14em;color:var(--tenue)} .turno-gigante{font-family:var(--f-titulo);font-size:clamp(72px,18vw,104px); font-weight:800;letter-spacing:-.05em;line-height:1;margin:8px 0 4px;color:var(--acento)} .pasos{display:flex;gap:10px;margin:34px 0 28px} .paso{flex:1;text-align:center} .paso .bola{width:40px;height:40px;border-radius:50%;background:var(--sup2);margin:0 auto 9px; display:grid;place-items:center;font-weight:700;color:var(--tenue);border:1px solid var(--borde); font-variant-numeric:tabular-nums; transition:background-color .3s ease,color .3s ease,border-color .3s ease} .paso .bola-visto{width:19px;height:19px} .paso.on .bola{background:var(--acento);color:var(--acento-txt);border-color:transparent} .paso.hecho .bola{background:#22C55E;color:#04240F;border-color:transparent} /* Terminado Y donde va: cuando el pedido está listo, el tercer círculo es las dos cosas. El visto verde dice que la cocina acabó; el halo, que ahí es donde está parado el pedido ahora mismo. */ .paso.hecho.on .bola{box-shadow:0 0 0 4px rgba(34,197,94,.22)} .paso b{font-size:12.5px;color:var(--tenue);font-weight:600} .paso.on b,.paso.hecho b{color:var(--texto)} .listo-grande{background:rgba(34,197,94,.13);border:1px solid rgba(34,197,94,.36); border-radius:var(--radio,18px);padding:24px;margin-bottom:22px} .listo-grande b{display:block;font-family:var(--f-titulo);font-size:24px;color:#1E9E56;margin-bottom:5px} body.oscura .listo-grande b{color:#86EFAC} /* ── CALIFICAR AL MESERO ── Se pregunta con el postre servido delante: una línea, cinco estrellas, sin campo de texto y sin botón de enviar. Cada estrella ES el envío. */ .calif{ background:var(--sup);border:1px solid var(--card-borde,var(--borde)); border-radius:var(--radio,18px);padding:20px;margin-bottom:22px; } .calif-tit{font-size:15.5px;color:var(--tenue);margin-bottom:12px} .calif-tit b{color:var(--texto);font-weight:700} .calif-estrellas{display:flex;justify-content:center;gap:6px} .calif-e{ width:52px;height:52px;border:0;background:transparent;cursor:pointer;padding:0; font-size:34px;line-height:1;color:var(--borde2); transition:transform .16s cubic-bezier(.23,1,.32,1),color .16s ease; } .calif-e:active{transform:scale(.88)} /* Se pintan de izquierda a derecha: al apuntar la cuarta se encienden las cuatro, que es como funciona una calificación en la cabeza de cualquiera. */ .calif-estrellas:not(.calif-fija):hover .calif-e{color:#F5C842} .calif-e:hover ~ .calif-e{color:var(--borde2)} .calif-fija .calif-e{cursor:default} .calif-fija .calif-e.on{color:#F5C842} .calif-hecha .calif-tit{text-align:center;margin-bottom:8px} @media (prefers-reduced-motion:reduce){ .calif-e{transition:color .16s ease} } .resumen{text-align:left;background:var(--sup);border:1px solid var(--card-borde,var(--borde)); border-radius:var(--radio,16px);padding:20px;box-shadow:var(--card-sombra,none); font-variant-numeric:tabular-nums} .resumen h3{font-family:var(--f-titulo);font-size:17px;margin-bottom:12px} /* ═══════════ RESPONSIVE ═══════════ Los tres anchos cambian la DISPOSICIÓN, no solo el tamaño de la letra. */ /* Tablet: la carta empieza a caber en dos columnas */ @media (min-width:680px){ .envoltura{padding:0 28px} body.disp-lista .prods{grid-template-columns:repeat(2,1fr)} body.disp-rejilla .prods{grid-template-columns:repeat(2,1fr)} .pub-logo{height:80px} .seccion{padding-top:42px} .modal{border-radius:24px;max-width:560px;padding:28px} .velo{align-items:center;padding:20px} } /* iPad horizontal y computador */ @media (min-width:1000px){ body.disp-rejilla .prods{grid-template-columns:repeat(3,1fr)} .pub-cabeza .envoltura{padding-top:44px} .pub-cabeza{padding-bottom:34px} .cats{padding:16px 0} /* El botón del carrito deja de ser una barra completa y pasa a ser una pastilla flotante: en un escritorio, una barra de lado a lado se ve como un anuncio, no como el pedido de uno. */ .carrito-btn{left:auto;right:28px;bottom:28px;padding:0;background:none} .carrito-btn .caja{width:auto;min-width:320px;box-shadow:0 16px 40px -12px rgba(0,0,0,.5)} } /* Celulares angostos */ @media (max-width:400px){ .envoltura{padding:0 15px} body.disp-lista .prod{padding:12px;gap:12px} body.disp-lista .prod-foto,body.disp-lista .prod-sinfoto{width:86px;height:86px} } @media (prefers-reduced-motion:reduce){ .modal{animation:none} .prod,.cat,.op-val,.pago-op,.cantidad button{transition:none} } /* ───────── "Lo de siempre" ───────── Para quien ya pidió aquí. Va arriba de las categorías porque es el camino más corto a un pedido, y quien vuelve no quiere volver a recorrer la carta. */ /* El atributo hidden lo pone el navegador con muy poca especificidad: cualquier display: explícito lo gana y el bloque se queda visible aunque esté "oculto". Hay que decirlo a mano. */ .lo-de-siempre[hidden]{display:none} /* UNA sola línea, mínima y contenida (pedido de Alejandro: tapaba el menú y luego se salía del ancho). Tipografía del cuerpo —la de plantilla es ancha y desborda—, todo truncable con … y el pill jamás más ancho que su columna. */ .lo-de-siempre{ display:flex;gap:8px;align-items:center;flex-wrap:nowrap; max-width:100%;overflow:hidden; margin:12px 0 2px;padding:5px 5px 5px 13px;border-radius:999px; background:var(--acento-suave);border:1px solid var(--acento); } body.oscura .lo-de-siempre{background:var(--sup);border-color:var(--borde)} .lds-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lds-txt b{font-family:inherit;font-size:13.5px;font-weight:700;margin-right:5px} .lds-que{font-size:12.5px;color:var(--tenue)} .lds-nota{display:none} /* la nota no cabe en una línea; viaja igual al repetir */ .lds-btn{ background:var(--acento);color:var(--acento-txt);min-height:36px;padding:0 13px; border-radius:999px;font-weight:700;font-size:13px;flex:none;white-space:nowrap; } /* ───────── Confirmación de "agregado" ───────── Cuando se agrega desde el botón + de la tarjeta, la confirmación aparece EN la tarjeta, no en un aviso al pie. El pulgar ya está ahí y el ojo también; mandar la respuesta al otro extremo de la pantalla obliga a mirar a otro lado para saber si el toque sirvió. */ .prod.agregado{ border-color:var(--acento) } .prod.agregado::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--acento); animation:prod-ok .9s var(--ease-salida) forwards; } @keyframes prod-ok{ 0%{opacity:0} 18%{opacity:1} 100%{opacity:0} } .prod.agregado .prod-mas{ background:#16A34A;color:#fff; animation:mas-ok .5s var(--ease-salida); } @keyframes mas-ok{ 0%{transform:scale(.72)} 55%{transform:scale(1.12)} 100%{transform:scale(1)} } @media (prefers-reduced-motion:reduce){ .prod.agregado::after,.prod.agregado .prod-mas{animation:none} } /* (El botón del carrito ahora es FLOTANTE y circular — su bloque vive arriba, en "Carrito". Aquí solo queda el resplandor de marca del círculo.) */ .carrito-btn .caja{ box-shadow:0 14px 34px -10px var(--acento), 0 4px 12px -4px rgba(0,0,0,.35), 0 0 0 6px color-mix(in srgb, var(--fondo) 70%, transparent); } /* ───────── Recoger o domicilio ───────── Va primero en el checkout y no en un desplegable: cambia el tiempo, cambia lo que hay que preguntar después y a veces cambia el precio. Escondida en un desplegable obliga a abrirla para saber qué opciones hay; así se ven las dos y se toca una. */ /* Una COLUMNA por opción (recoger · domicilio · mesa), lado a lado incluso en el celular: tarjetas verticales compactas — icono arriba, título, detalle. auto-fit: con 2 opciones son 2 columnas, con 3 son 3, sin tocar nada. */ /* ═══════════ EL PEDIDO, PASO A PASO ═══════════ Tres puntos y no un porcentaje: se ve de un vistazo cuántos faltan, que es lo que decide si alguien sigue o abandona. */ .wz-pasos{display:flex;align-items:center;gap:6px;margin:0 0 16px} .wz-paso{display:flex;align-items:center;gap:7px;flex:1;min-width:0} .wz-paso i{ width:26px;height:26px;flex:none;border-radius:50%; display:grid;place-items:center;font-style:normal; font-size:12.5px;font-weight:800; background:var(--sup2);color:var(--tenue2); border:1.5px solid var(--borde); } .wz-paso b{ font-size:11.5px;font-weight:700;color:var(--tenue2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .wz-paso.on i{background:var(--acento);color:var(--acento-txt);border-color:var(--acento)} .wz-paso.on b{color:var(--texto)} /* Los ya hechos con el visto y en verde: dice «esto ya está» sin ocupar más. */ .wz-paso.hecho i{background:transparent;color:#4ADE80;border-color:#4ADE80} .wz-paso.hecho b{color:var(--tenue)} @media (max-width:380px){ .wz-paso:not(.on) b{display:none} } .wz-sub{color:var(--tenue);font-size:14.5px;margin:4px 0 18px;line-height:1.4} .wz-seguir{margin-top:18px} .op{text-transform:none;font-weight:400;color:var(--tenue2)} /* El resumen antes de confirmar: qué pidió y cómo se lo llevamos. Es el último momento para darse cuenta de algo, y antes no existía — se confirmaba a ciegas después de tres pantallas. */ .wz-resumen{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:16px 0 6px;padding:12px 14px;border-radius:14px; background:var(--sup2);border:1px solid var(--borde); } .wz-resumen > div{flex:1;min-width:0} .wz-resumen span{display:block;font-size:11.5px;color:var(--tenue)} .wz-resumen b{ display:block;font-size:13.5px;margin-top:2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .wz-resumen a{flex:none;font-size:13px;color:var(--acento-leible,var(--acento));font-weight:650} .entregas{display:grid;gap:9px;margin-bottom:18px;grid-template-columns:repeat(auto-fit,minmax(0,1fr))} .entrega-op{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px; cursor:pointer;padding:14px 8px 12px;border-radius:var(--radio,16px); background:var(--sup2);border:2px solid var(--borde); transition:border-color .18s var(--ease-salida),background-color .18s var(--ease-salida); } .entrega-op input{position:absolute;opacity:0;pointer-events:none} .eo-ico{ display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:12px; background:var(--sup);color:var(--acento-leible,var(--acento)); transition:background-color .18s ease,color .18s ease; } .eo-ico svg{width:24px;height:24px} .eo-txt{min-width:0;width:100%} .eo-txt b{display:block;font-size:13.5px;font-weight:700;line-height:1.2;text-wrap:balance} /* El detalle se recorta a dos líneas: una dirección larga no puede estirar una tarjeta más que sus hermanas. */ .eo-txt span{ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:11px;color:var(--tenue);line-height:1.3;margin-top:3px; } /* LA OPCIÓN ELEGIDA, SÓLIDA. Antes se teñía el fondo con `--acento-suave` (un amarillo claro) pero el título seguía con el color de texto de fondo oscuro: medido daba **1,02 de contraste** —el mínimo legible es 4,5— así que «Recoger en el local» sencillamente no se leía. La opción activa parecía la desactivada, y por eso la gente ni registraba que había una elección que hacer. Se rellena con el acento y TODO su texto pasa a `--acento-txt`, que es el color pensado para leerse encima del acento en cualquier plantilla. */ .entrega-op.on{border-color:var(--acento);background:var(--acento)} .entrega-op.on .eo-txt b, .entrega-op.on .eo-txt span{color:var(--acento-txt)} .entrega-op.on .eo-ico{background:var(--acento-txt);color:var(--acento)} .entrega-op:active{transform:scale(.985)} @media (hover:hover) and (pointer:fine){ .entrega-op:not(.on):hover{border-color:var(--borde2,var(--borde));background:var(--sup)} } /* En un iPhone con isla (app instalada a pantalla completa), el contenido superior baja lo que mida la muesca — en navegador env() vale 0 y no pasa nada. */ body.publico{padding-top:env(safe-area-inset-top,0px)} /* ───────── Los DESTACADOS de la portada ───────── Banner deslizable estilo app de hamburguesas: foto full-bleed, degradado para leer, y un toque abre el producto. Minimal: nada de marcos dobles. */ .dst{margin:2px 0 12px} .dst-rollo{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; border-radius:20px;scrollbar-width:none; } .dst-rollo::-webkit-scrollbar{display:none} .dst-item{ position:relative;flex:0 0 100%;scroll-snap-align:center; min-height:clamp(140px,22dvh,190px);border:0;cursor:pointer; border-radius:20px;overflow:hidden;padding:16px; display:flex;align-items:flex-end;text-align:left;font-family:inherit; background:#101014 var(--dst-foto) center/cover no-repeat; transition:transform .14s var(--ease-salida); } .dst-item:active{transform:scale(.985)} .dst-item::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(6,6,8,.12) 30%, rgba(6,6,8,.82)); } .dst-info{position:relative;display:flex;flex-direction:column;gap:3px;color:#fff;min-width:0} .dst-info i{ font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.14em; text-transform:uppercase;color:var(--acento-leible,var(--acento)); } .dst-info b{ font-family:var(--f-titulo);font-size:clamp(19px,4.8vw,24px);line-height:1.12; letter-spacing:var(--ls,0);text-transform:var(--tt,none); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .dst-cta{ align-self:flex-start;margin-top:7px;padding:8px 15px;border-radius:999px; background:var(--acento);color:var(--acento-txt);font-size:12.5px;font-weight:800; } .dst-puntos{display:flex;gap:6px;justify-content:center;margin-top:9px} .dst-puntos i{ width:6px;height:6px;border-radius:999px;background:var(--borde2,var(--borde)); transition:width .25s var(--ease-salida),background-color .2s ease; } .dst-puntos i.on{width:18px;background:var(--acento)} /* con banner arriba, las losas ceden un poco de alto para seguir cupiendo */ body.con-dst .cat-losa{min-height:clamp(88px,13dvh,150px)} /* ───────── El BANNER de la promo (referencia de Alejandro) ───────── La foto del plato en un CÍRCULO grande sangrando por la izquierda, panel negro con borde fino del color elegido, y los textos a la derecha. El color lo pone el dueño en Menú → Promoción (--pb-acento); sin elegirlo, manda el acento de la plantilla. */ /* ═══════════ LA BURBUJA DE LA PROMO ═══════════ El banner grande vive debajo de las categorías: en un teléfono hay que bajar toda la lista para verlo, y quien entra buscando un plato nunca llega. Esta burbuja lo reemplaza en cuanto el banner sale de pantalla y se retira cuando vuelve — nunca están las dos a la vez, así que no se repite el mismo aviso. Abajo a la IZQUIERDA: el carrito ya ocupa la derecha. */ .promo-bur{ --pb-acento:var(--acento); position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom)); z-index:88;width:58px;height:58px;padding:0;border-radius:50%;cursor:pointer; border:2px solid var(--pb-acento);background:#0B0B0E; box-shadow:0 12px 30px -10px rgba(0,0,0,.65); font-family:var(--f-texto); animation:pbur-entra .28s var(--ease-salida) both; } .promo-bur[hidden]{display:none} @keyframes pbur-entra{ from{opacity:0;transform:scale(.7) translateY(8px)} } .promo-bur:active{transform:scale(.92)} .pbur-foto{ display:block;width:100%;height:100%;border-radius:50%;object-fit:cover; background:#15151B center/cover no-repeat; } /* La etiqueta cuelga debajo del círculo: dentro no cabe sin tapar la foto, que es justo lo que hace que alguien quiera tocarla. */ .pbur-etq{ position:absolute;left:50%;transform:translateX(-50%);bottom:-9px; padding:2px 9px;border-radius:999px;white-space:nowrap; background:var(--pb-acento);color:var(--acento-txt); font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; } /* Un solo latido al aparecer. Repetirlo sería un cartel parpadeando al lado de la carta, que es de lo que la gente huye. */ .promo-bur.late{animation:pbur-entra .28s var(--ease-salida) both, pbur-late 1.5s .4s ease-in-out 2} @keyframes pbur-late{ 0%,100%{transform:scale(1)} 45%{transform:scale(1.09)} } @media (prefers-reduced-motion:reduce){ .promo-bur,.promo-bur.late{animation:none} } .promo-banner{ --pb-acento:var(--acento); position:relative;display:block;width:100%;margin-top:12px;overflow:hidden; min-height:118px;padding:18px 18px 18px 46%; border:1.5px solid var(--pb-acento);border-radius:22px;cursor:pointer; background:#0B0B0E;text-align:right;font-family:inherit; transition:transform .14s var(--ease-salida); } .promo-banner:active{transform:scale(.985)} .pb-foto{ position:absolute;left:-16%;top:50%;transform:translateY(-50%); width:58%;aspect-ratio:1;border-radius:50%;object-fit:cover; background:#15151B center/cover no-repeat; box-shadow:8px 0 30px -10px rgba(0,0,0,.7); } .pb-panel{display:flex;flex-direction:column;gap:3px;align-items:flex-end;min-width:0} .pb-panel i{ font-style:normal;font-size:11px;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:var(--pb-acento); } .pb-panel b{ font-family:var(--f-titulo);font-size:clamp(21px,5.6vw,28px);line-height:1.08; color:#fff;letter-spacing:var(--ls,0);text-transform:var(--tt,none); max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pb-panel em{ font-style:normal;font-size:11px;font-weight:800;letter-spacing:.22em; text-transform:uppercase;color:var(--pb-acento); } .pb-ver{ display:inline-flex;align-items:center;gap:8px;margin-top:6px; font-size:14px;font-weight:700;color:#fff; } .pb-ver span{font-size:17px;line-height:1;transition:transform .18s var(--ease-salida)} @media (hover:hover){ .promo-banner:hover .pb-ver span{transform:translateX(5px)} } /* ───────── El telón de cerrado ───────── Pantalla completa y VIVA: dos brasas del color del negocio derivando al fondo, la marca en el centro con un anillo que gira (el "estamos en eso" sin decirlo), y una frase que rota debajo del título. Cerrado no es un error: es el local respirando antes de abrir. */ .telon{ position:fixed;inset:0;z-index:220;overflow:hidden; display:grid;place-items:center; padding:calc(20px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--fondo) 94%, #000); } /* Las brasas: puro transform y opacidad — viven en la GPU, no recalculan nada */ .telon-brasa{ position:absolute;width:56vmax;height:56vmax;border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--acento) 26%, transparent), transparent 62%); filter:blur(10px);pointer-events:none; } .telon-brasa-a{top:-24vmax;left:-16vmax;animation:brasa-a 16s ease-in-out infinite alternate} .telon-brasa-b{bottom:-28vmax;right:-18vmax;animation:brasa-b 19s ease-in-out infinite alternate} @keyframes brasa-a{to{transform:translate(9vmax,7vmax) scale(1.15)}} @keyframes brasa-b{to{transform:translate(-8vmax,-6vmax) scale(1.1)}} .telon-caja{position:relative;width:100%;max-width:440px;margin:0 auto;text-align:center} /* La marca: logo del cliente o su inicial — nunca un hueco. El anillo cónico gira lento alrededor, como una hornilla encendida. */ .telon-marca{ position:relative;width:118px;height:118px;margin:0 auto 22px; display:grid;place-items:center; } .telon-anillo{ position:absolute;inset:0;border-radius:50%; background:conic-gradient(from 0deg, var(--acento), transparent 28%, transparent 72%, var(--acento)); -webkit-mask:radial-gradient(closest-side, transparent 82%, #000 83%); mask:radial-gradient(closest-side, transparent 82%, #000 83%); animation:anillo-gira 3.2s linear infinite; } @keyframes anillo-gira{to{transform:rotate(360deg)}} .telon-logo{ width:96px;height:96px;object-fit:contain;border-radius:50%; background:var(--sup);padding:10px; } .telon-mono{ width:96px;height:96px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(150deg, var(--acento), var(--acento-osc,var(--acento))); color:var(--acento-txt);font-family:var(--f-titulo);font-size:44px;font-weight:800; } .telon-nombre{ display:block;font-size:12px;font-weight:800;letter-spacing:.18em; text-transform:uppercase;color:var(--tenue);margin-bottom:10px; } .telon h2{ font-family:var(--f-titulo);font-size:clamp(28px,7.4vw,40px);line-height:1.08; letter-spacing:var(--ls,-.02em);text-transform:var(--tt,none);margin-bottom:12px; text-wrap:balance; } /* La frase que rota: cambia cada ~3 s con un fundido que sube */ .telon-rota{ color:var(--acento-leible,var(--acento));font-weight:700;font-size:16.5px; min-height:1.5em;margin-bottom:8px; transition:opacity .35s var(--ease-salida), transform .35s var(--ease-salida); } .telon-rota.saliendo{opacity:0;transform:translateY(-7px)} .telon-detalle{color:var(--tenue);font-size:14.5px;line-height:1.6;margin-bottom:26px} .telon .btn{min-height:48px} .telon.oculto{display:none} /* Entrada escalonada: la pantalla se ARMA, no aparece de golpe */ @keyframes telon-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .telon-marca{animation:telon-sube .5s var(--ease-salida) backwards} .telon-nombre{animation:telon-sube .5s var(--ease-salida) .08s backwards} .telon h2{animation:telon-sube .5s var(--ease-salida) .15s backwards} .telon-rota{animation:telon-sube .5s var(--ease-salida) .22s backwards} .telon-detalle,.telon .btn{animation:telon-sube .5s var(--ease-salida) .3s backwards} @media (prefers-reduced-motion:reduce){ .telon-brasa,.telon-anillo,.telon-marca,.telon-nombre,.telon h2, .telon-rota,.telon-detalle,.telon .btn{animation:none} } /* ───────── La portada de categorías ───────── Cuadritos como el lanzador del panel: icono, nombre y cuántos productos. Centrados, y en columnas según quepa — celular 2, tablet 3, escritorio los que entren. */ /* La PORTADA: al entrar solo se ve esto — la marca arriba, los cuadritos en el centro y un pie abajo. Estilo app. La carta completa sigue debajo: tocar un cuadrito baja directo a su categoría. */ .portada{ min-height:calc(100dvh - var(--alto-cabeza, 210px)); display:flex;flex-direction:column; } .portada-centro{ flex:1;display:grid;place-items:center;width:100%;padding:12px 20px; } /* ── LAS BANDAS ── Nada de cuadritos tímidos: cada categoría es una BANDA horizontal de borde a borde, con su plato asomando en grande, el nombre con peso de cartel y una flecha que invita. Pensadas para verse con fuerza también en una pantalla capacitiva en la puerta del negocio. La foto respira (un zoom lentísimo) y entran escalonadas. */ .cat-losas{ display:flex;flex-direction:column;gap:14px; width:100%;max-width:820px;margin:0 auto; } .cat-losa{ position:relative;overflow:hidden;cursor:pointer;font-family:inherit; display:flex;align-items:center;gap:18px;text-align:left; width:100%;min-height:clamp(104px,17dvh,170px);padding:20px 24px; color:var(--texto);border:0;border-radius:var(--radio,18px); background:var(--sup); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent), var(--card-sombra,none); transition:transform .14s var(--ease-salida),box-shadow .2s ease; } .cat-losa:active{transform:scale(.98)} @media (hover:hover) and (pointer:fine){ .cat-losa:hover{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--acento) 60%, transparent), var(--card-sombra,none)} .cat-losa:hover .cl-flecha{transform:translateX(6px)} } /* La foto: presencia de verdad, no marca de agua. Respira con un zoom de 14 s. */ .cat-losa.con-foto::before{ content:"";position:absolute;inset:0; background-image:var(--losa-foto);background-size:cover;background-position:center right; opacity:.5; animation:losa-respira 14s ease-in-out infinite alternate; } @keyframes losa-respira{from{transform:scale(1)}to{transform:scale(1.12)}} /* El velo que garantiza leer el nombre: nace del color de la superficie a la izquierda y se disuelve hacia la foto. */ .cat-losa.con-foto::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, color-mix(in srgb, var(--sup) 96%, transparent) 22%, color-mix(in srgb, var(--sup) 55%, transparent) 55%, color-mix(in srgb, var(--acento) 12%, transparent) 100%); } .cat-losa > *{position:relative;z-index:1} .cl-ico{display:grid;place-items:center;color:var(--acento-leible,var(--acento));flex:none} .cl-ico svg{width:34px;height:34px} .cl-txt{flex:1;min-width:0} .cat-losa b{ display:block;font-family:var(--f-titulo);font-size:clamp(20px,4.6vw,28px); letter-spacing:var(--ls,0);text-transform:var(--tt,none);line-height:1.1; } .cl-n{font-size:13px;color:var(--tenue);margin-top:3px;display:block} .cl-flecha{ flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%; background:var(--acento);color:var(--acento-txt); box-shadow:0 8px 20px -8px var(--acento); transition:transform .2s var(--ease-salida); } .cl-flecha svg{width:19px;height:19px} /* Entrada: una tras otra, como abriéndose el telón */ @keyframes losa-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .cat-losa{animation:losa-entra .45s var(--ease-salida) backwards} .cat-losa:nth-child(2){animation-delay:.09s} .cat-losa:nth-child(3){animation-delay:.18s} .cat-losa:nth-child(4){animation-delay:.27s} .cat-losa:nth-child(5){animation-delay:.36s} /* De borde a borde en el teléfono y el quiosco: la banda ES la pantalla */ @media (max-width:640px){ .cat-losas{width:100vw;max-width:none;margin-left:calc(50% - 50vw);gap:10px} .cat-losa{border-radius:0;padding:18px 20px} } @media (prefers-reduced-motion:reduce){ .cat-losa,.cat-losa.con-foto::before{animation:none} } /* El pie de la portada: datos mínimos y aire para la barra del teléfono — env(safe-area-inset-bottom) es lo que evita que el gesto de atrás o la barra de dirección de Safari se lo coman. */ .portada-pie{ display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap; padding:16px 20px calc(18px + env(safe-area-inset-bottom)); color:var(--tenue);font-size:13px; } .portada-pie a{color:var(--acento-leible,var(--acento));font-weight:700;text-decoration:none} .pp-marca{opacity:.6} /* UN solo material por losa: un degradado que nace del color de la marca y se funde con la superficie. El icono va DESNUDO encima — nada de icono en un recuadro dentro de otro recuadro: tres cajas anidadas se leen como interfaz armada, una superficie con degradado se lee como diseño. */ .cat-losa{ display:flex;flex-direction:column;align-items:center;gap:7px; padding:22px 14px 18px;cursor:pointer;font-family:inherit;text-align:center; color:var(--texto);border:0;border-radius:var(--radio,18px); background: linear-gradient(165deg, color-mix(in srgb, var(--acento) 20%, var(--sup)) 0%, color-mix(in srgb, var(--acento) 6%, var(--sup)) 55%, var(--sup) 100%); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--acento) 22%, transparent), var(--card-sombra,none); transition:transform .12s var(--ease-salida),box-shadow .2s ease; } .cat-losa:active{transform:scale(.96)} @media (hover:hover) and (pointer:fine){ .cat-losa:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--acento) 55%, transparent), var(--card-sombra,none)} } .cl-ico{display:grid;place-items:center;color:var(--acento-leible,var(--acento));margin-bottom:2px} .cl-ico svg{width:30px;height:30px} .cat-losa b{font-family:var(--f-titulo);font-size:16px;letter-spacing:var(--ls,0); text-transform:var(--tt,none);line-height:1.2} .cl-n{font-size:12px;color:var(--tenue)} /* ───────── La foto grande del detalle ───────── */ /* La foto del detalle: A SANGRE — de borde a borde y pegada al techo del popup, como la portada de una app de comida. El truco no son márgenes adivinados: cuando el modal trae foto, ÉL cede su padding superior (:has), y la foto solo compensa los 20px laterales exactos del modal. En navegadores sin :has, cae a foto con margen — se ve bien igual. */ .mp-foto{ width:100%;display:block;margin:0 auto 16px; aspect-ratio:16/10;object-fit:cover;object-position:center; border-radius:16px;cursor:zoom-in; } .modal.con-foto, .modal:has(.mp-foto){padding-top:0} .modal.con-foto .mp-foto, .modal:has(.mp-foto) .mp-foto{ width:calc(100% + 40px);max-width:none; margin:0 -20px 18px; border-radius:26px 26px 0 0; } /* En pantalla grande el modal tiene 28px de padding y esquinas de 24 */ @media (min-width:640px){ .modal.con-foto .mp-foto, .modal:has(.mp-foto) .mp-foto{ width:calc(100% + 56px);margin:0 -28px 18px;border-radius:24px 24px 0 0; } } /* La X respira sobre la foto cuando esta llega al techo */ /* ───────── Lightbox ───────── */ .lightbox{ position:fixed;inset:0;z-index:300;display:grid;place-items:center; background:rgba(5,5,7,.93);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:16px; } .lightbox img{ max-width:100%;max-height:92dvh;border-radius:14px;display:block; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); } .lb-cerrar{ position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px; width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.14);color:#fff;font-size:18px; display:grid;place-items:center;backdrop-filter:blur(6px); } .prod-foto{cursor:zoom-in} /* ───────── El popup de promoción ───────── */ .promo-velo{ position:fixed;inset:0;z-index:260;display:grid;place-items:center; background:rgba(5,5,7,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); padding:20px; } .promo-caja{ position:relative;width:min(420px,100%);overflow:hidden; background:var(--sup);color:var(--texto); border-radius:var(--radio,20px); box-shadow:0 30px 80px -20px rgba(0,0,0,.75); animation:promo-entra .38s var(--ease-salida) backwards; } @keyframes promo-entra{from{opacity:0;transform:translateY(18px) scale(.97)}} .promo-medio{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#000} .promo-x{ position:absolute;top:10px;right:10px;z-index:20; /* por encima del carrusel */ width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:rgba(10,10,12,.72);color:#fff;font-size:17px; display:grid;place-items:center;backdrop-filter:blur(6px); box-shadow:0 6px 18px -6px rgba(0,0,0,.6); transition:transform .12s var(--ease-salida); } .promo-x:active{transform:scale(.9)} .promo-x *{pointer-events:none} .promo-caja{position:relative;overflow:hidden} /* Carrusel: una hoja por promo, con imán al deslizar. */ .promo-rollo{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .promo-rollo::-webkit-scrollbar{display:none} .promo-hoja{ --pr-acento:var(--acento); flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column; } .promo-puntos{ position:absolute;left:0;right:0;bottom:10px;z-index:15; display:flex;gap:6px;justify-content:center; } .promo-puntos i{ width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35); transition:width .25s var(--ease-salida),background-color .2s ease; } .promo-puntos i.on{width:20px;background:var(--acento)} /* La etiqueta y el precio: lo que tiene que saltar del fondo. */ .promo-etq{ display:inline-block;margin-bottom:8px;padding:6px 13px;border-radius:999px; background:color-mix(in srgb, var(--pr-acento) 20%, transparent); color:var(--pr-acento); font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; } .promo-txt h3{ font-family:var(--f-titulo);font-size:clamp(24px,6.4vw,32px);line-height:1.08; letter-spacing:var(--ls,-.01em);text-transform:var(--tt,none); } .promo-precio{ font-family:var(--f-titulo);font-size:clamp(30px,8vw,40px);font-weight:800; line-height:1;letter-spacing:-.02em; background:linear-gradient(120deg, var(--pr-acento), color-mix(in srgb, var(--pr-acento) 45%, #FFF)); -webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 34px color-mix(in srgb, var(--pr-acento) 45%, transparent); } .promo-pie .btn-pri{ background:linear-gradient(140deg, var(--pr-acento), color-mix(in srgb, var(--pr-acento) 72%, #000)); color:#fff;border-radius:999px;min-height:52px;padding:0 26px;font-size:16px; box-shadow:0 14px 30px -12px color-mix(in srgb, var(--pr-acento) 80%, transparent); } .promo-txt{padding:18px 20px 20px} .promo-txt h3{font-family:var(--f-titulo);font-size:22px;line-height:1.15; letter-spacing:var(--ls,-.01em);text-transform:var(--tt,none)} .promo-txt p{color:var(--tenue);font-size:14.5px;line-height:1.5;margin-top:7px} .promo-pie{display:flex;align-items:center;gap:14px;margin-top:16px} .promo-precio{ font-family:var(--f-titulo);font-size:21px;font-weight:800; color:var(--acento-leible,var(--acento));font-variant-numeric:tabular-nums; } .promo-ir{flex:1;min-height:48px} @media (prefers-reduced-motion:reduce){ .promo-caja{animation:none} } /* Cerrado = vitrina: los botones de agregar no existen y el carrito tampoco. Chismosear es mirar; pedir vuelve cuando enciendan (y la página se recarga sola en ese momento). */ body.cerrada .prod-mas, body.cerrada .carrito-btn, body.cerrada .lo-de-siempre{display:none!important} /* El pie al final de la carta completa */ .carta-pie{border-top:1px solid var(--borde);margin-top:44px} /* ───────── Navegación estilo app ───────── Al entrar: SOLO la portada (marca arriba, losas al centro, pie abajo). Al elegir: SOLO esa categoría, con la barra de chips para saltar y el chip ← para volver. El botón atrás del teléfono también devuelve (history). */ body.en-portada .cats-envoltura, body.en-portada .seccion, body.en-portada .carta-pie{display:none} /* ── La portada es UNA pantalla, exacta ── Columna de 100dvh: cabecera arriba, las bandas se REPARTEN el espacio que sobra, y el pie cierra abajo. Cero scroll de página: si el negocio tuviera ocho categorías, se deslizan las bandas por dentro — la pantalla no escurre. Es lo que separa una portada de app de una página que sigue de largo. */ /* La portada fluye como página NORMAL: si el contenido (destacados + losas + promo) pasa del alto de la pantalla, desliza TODO junto — nada de una zona con su propio scroll adentro (pedido de Alejandro). min-height mantiene el pie abajo cuando el contenido es corto. */ body.en-portada{ min-height:100dvh;padding-bottom:0; display:flex;flex-direction:column; } /* Los hijos del body-flex DEBEN poder encoger: sin esto, min-width:auto los clava en su contenido mínimo y "Lo de siempre" (texto largo sin quiebre) empujaba la página a 513px — el botón Repetir quedaba fuera de pantalla. */ body.en-portada > *{min-width:0;max-width:100%} .lo-de-siempre{min-width:0} body.en-portada .pub-cabeza{flex:none;padding-bottom:10px} body.en-portada .pub-cabeza .envoltura{padding-top:20px} body.en-portada .corona{height:92px} body.en-portada .pub-marca{margin-bottom:10px} body.en-portada .pub-desc{margin-top:4px} body.en-portada .pub-datos{display:none} /* en la portada manda lo esencial */ body.en-portada .estado-linea{margin-top:12px} body.en-portada .portada{flex:1;display:flex;flex-direction:column} body.en-portada .portada-centro{ flex:1;display:flex;flex-direction:column;padding:10px 20px; } body.en-portada .dst,body.en-portada .promo-banner{flex:none} body.en-portada .cat-losas{flex:1;min-height:0} body.en-portada .cat-losa{flex:1;min-height:96px} body.en-portada .portada-pie{flex:none;padding-top:10px} body.en-categoria .portada{display:none} body.en-categoria .seccion{display:none} body.en-categoria .seccion.activa{display:block;padding-top:20px} .cat-volver{padding:11px 14px;background:var(--sup2)} .cat-volver .cat-ico{color:var(--texto)} .cat-volver .cat-ico svg{width:18px;height:18px} /* ───────── La foto detrás de la losa ───────── El primer plato de la categoría asoma al fondo, apenas: presencia, no protagonismo — el degradado de la marca sigue mandando encima. */ .cat-losa{position:relative;overflow:hidden} .cat-losa.con-foto::before{ content:"";position:absolute;inset:0;border-radius:inherit; background-image:var(--losa-foto);background-size:cover;background-position:center; opacity:.16; } .cat-losa.con-foto::after{ /* el degradado de la marca se reafirma sobre la foto */ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(165deg, color-mix(in srgb, var(--acento) 14%, transparent), color-mix(in srgb, var(--sup) 55%, transparent) 78%); } .cat-losa > *{position:relative;z-index:1} /* La X del popup: ABSOLUTA sobre la esquina, fuera del flujo. La versión anterior (sticky + float) reservaba un renglón antes de la foto en WebKit y la imagen quedaba despegada del techo — el "como con un scroll" que se veía en iPhone. Absoluta no ocupa nada: la foto ES el primer elemento y pega arriba sí o sí. En una lista larga la X se va con el scroll, como en cualquier app de comida. */ .modal{position:relative} .modal-x{ position:absolute;top:12px;right:12px;z-index:6; width:38px;height:38px; border:0;border-radius:50%;cursor:pointer; display:grid;place-items:center; background:rgba(10,10,12,.55);color:#fff; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:transform .14s var(--ease-salida); } .modal-x:active{transform:scale(.9)} .modal-x svg{width:16px;height:16px} body.clara .modal-x{background:rgba(20,20,24,.45)} /* El contador del carrito da un brinquito cada vez que entra algo: la confirmación viaja hasta donde está el total, no solo en la tarjeta. */ @keyframes cesta-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}} .carrito-btn .n.pop{animation:cesta-pop .4s var(--ease-salida)} /* Al entrar a una categoría, sus productos entran en cascada — 40 ms entre tarjetas, como las listas de las apps de comida. Solo las primeras ocho. */ body.en-categoria .seccion.activa .prod{animation:losa-entra .34s var(--ease-salida) backwards} body.en-categoria .seccion.activa .prod:nth-child(2){animation-delay:40ms} body.en-categoria .seccion.activa .prod:nth-child(3){animation-delay:80ms} body.en-categoria .seccion.activa .prod:nth-child(4){animation-delay:120ms} body.en-categoria .seccion.activa .prod:nth-child(5){animation-delay:160ms} body.en-categoria .seccion.activa .prod:nth-child(6){animation-delay:200ms} body.en-categoria .seccion.activa .prod:nth-child(7){animation-delay:240ms} body.en-categoria .seccion.activa .prod:nth-child(8){animation-delay:280ms} @media (prefers-reduced-motion:reduce){ body.en-categoria .seccion.activa .prod,.carrito-btn .n.pop{animation:none} } /* ───────── Lo que le faltaba a la tarjeta ───────── El sello del dueño, los tamaños reales y el "Desde" honesto. Información que vende, no adorno: era el vacío que se sentía entre el título y el precio. */ .prod-reco{ display:inline-flex;align-items:center;gap:5px;margin-bottom:6px; font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase; color:var(--acento-leible,var(--acento)); } .prod-reco svg{width:13px;height:13px;flex:none} .prod-vars{ display:inline-block;margin-top:7px;padding:4px 10px;border-radius:999px; font-size:12px;font-weight:650;color:var(--tenue); background:color-mix(in srgb, var(--acento) 9%, var(--sup2)); } .prod-precio .desde{ font-size:12px;font-weight:650;color:var(--tenue); text-transform:uppercase;letter-spacing:.05em; } /* La bolsa del botón de pedido */ .carrito-btn .cb-ico{display:grid;place-items:center;flex:none} .carrito-btn .cb-ico svg{width:20px;height:20px} /* El camino de vuelta al pedido en curso */ .pedido-curso{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin:0;padding:12px 18px; background:color-mix(in srgb, var(--acento) 14%, var(--sup)); color:var(--texto);font-size:14px;font-weight:650;text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--acento) 30%, transparent); } .pedido-curso.urgente{ background:color-mix(in srgb, #D97706 20%, var(--sup)); animation:pc-late 2.6s ease-in-out infinite; } @keyframes pc-late{50%{background:color-mix(in srgb, #D97706 32%, var(--sup))}} .pc-ir{flex:none;font-weight:800;color:var(--acento-leible,var(--acento))} @media (prefers-reduced-motion:reduce){ .pedido-curso.urgente{animation:none} } /* Sabores por unidad y la segunda mitad */ .mp-unidad{display:flex;align-items:center;gap:12px;padding:8px 0} .mp-unidad span{flex:none;font-size:13px;font-weight:700;color:var(--tenue);min-width:74px} .mp-unidad select,.mp-mitad-sel{ flex:1;min-height:46px;padding:10px 12px;border-radius:12px;font:inherit; background:var(--sup2);color:var(--texto);border:1px solid var(--borde); } .mp-mitad-sel{width:100%} /* La cajita de cada pizza cuando piden varias */ .mp-uni-caja{ border:1px solid var(--borde);border-radius:14px;padding:10px 14px;margin-bottom:10px; background:color-mix(in srgb, var(--acento) 4%, var(--sup)); } .mp-uni-titulo{display:block;font-size:12px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--acento-leible,var(--acento));margin-bottom:4px} /* ═══════════ El mensajero en vivo (página del pedido) ═══════════ */ .mapa-caja{ border-radius:var(--radio,18px);overflow:hidden;margin-bottom:20px; border:1px solid var(--card-borde,var(--borde));box-shadow:var(--card-sombra,none); } #mapa{height:clamp(300px,46dvh,420px);background:#F3F4F6} /* El lienzo de MapLibre se queda con el foco al tocarlo y pinta el anillo del navegador por dentro del mapa. Aquí no hay nada que enfocar con el teclado: el mapa no es un control, es una imagen que se mueve sola. */ #mapa canvas{outline:none} #mapa{position:relative} /* Volver al mensajero después de haber movido el mapa. Flota sobre el mapa porque pertenece al mapa, no al pie de la tarjeta. */ .mapa-centrar{ position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2; border:0;cursor:pointer;font:inherit;font-size:13px;font-weight:700; padding:9px 18px;border-radius:999px; background:rgba(20,20,24,.9);color:#fff; box-shadow:0 4px 16px rgba(16,16,20,.3); transition:transform .14s cubic-bezier(.23,1,.32,1); } .mapa-centrar:active{transform:translateX(-50%) scale(.96)} .mapa-centrar[hidden]{display:none} .mapa-pie{ display:flex;align-items:center;gap:10px;padding:12px 16px; background:var(--sup);font-size:14px;font-weight:650; } .mapa-punto{width:9px;height:9px;border-radius:50%;background:#22C55E;flex:none;position:relative} .mapa-punto::after{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid #22C55E;animation:pulso-abierto 2.4s ease-out infinite} /* ── El mensajero sobre el mapa ── Era un círculo azul de 22 px: sobre un mapa claro no se distinguía de cualquier chinche, y el azul no es de ningún negocio. Ahora es un disco blanco con la moto adentro y un halo del color del restaurante, que es lo que hace que el ojo caiga ahí primero y no en la avenida. El halo late para decir «esto se está moviendo ahora», no por adorno. */ .moto-marca{ --halo:#D63D00; width:42px;height:42px;border-radius:50%; display:grid;place-items:center; background:#fff;color:#15161A; box-shadow:0 0 0 4px color-mix(in srgb, var(--halo) 38%, transparent), 0 3px 12px rgba(16,16,20,.3); animation:moto-late 2.4s ease-in-out infinite; will-change:box-shadow; } .moto-marca svg{width:23px;height:23px;display:block} @keyframes moto-late{ 50%{box-shadow:0 0 0 13px color-mix(in srgb, var(--halo) 14%, transparent), 0 3px 12px rgba(16,16,20,.3)} } /* ── Los créditos del mapa ── Van SIEMPRE: OpenStreetMap y OpenMapTiles lo exigen y no es negociable. Pero van del tamaño que les corresponde — en la captura de referencia ocupaban media pantalla y tapaban la ruta. Aquí es una pastilla discreta en la esquina, que se abre al tocarla. */ /* Sin tocar padding ni display: de eso vive el modo plegado del propio MapLibre, y pisarlo era lo que dejaba el crédito abierto de par en par. */ .mapa-caja .maplibregl-ctrl-attrib{font-size:10.5px;line-height:1.5;color:#5B5C63} .mapa-caja .maplibregl-ctrl-attrib.maplibregl-compact{margin:0 8px 8px 0} .mapa-caja .maplibregl-ctrl-attrib a{color:#3F4046;text-decoration:none} .mapa-caja .maplibregl-ctrl-attrib a:hover{text-decoration:underline} .mapa-caja .maplibregl-ctrl-bottom-right{z-index:2} .mapa-caja .maplibregl-ctrl-attrib-button{background-color:rgba(0,0,0,.55)} @media (prefers-reduced-motion:reduce){ .moto-marca,.mapa-punto::after{animation:none} } /* ── Transparencia reducida (ajuste de accesibilidad del sistema): las superficies de vidrio se vuelven casi sólidas y sin blur. ── */ @media (prefers-reduced-transparency: reduce){ .cats-envoltura{background:var(--fondo);backdrop-filter:none;-webkit-backdrop-filter:none} .velo{background:rgba(4,4,6,.94);backdrop-filter:none;-webkit-backdrop-filter:none} .lightbox,.promo-velo{background:rgba(5,5,7,.97);backdrop-filter:none;-webkit-backdrop-filter:none} .prod-sello,.lb-cerrar,.promo-x,.modal-x{backdrop-filter:none;-webkit-backdrop-filter:none} } /* El renglón que quita el miedo justo debajo del botón grande: la objeción no es el precio, es "¿me van a pedir la tarjeta?". */ .ln-sinTarjeta{ margin-top:14px;text-align:center;font-size:13.5px;color:rgba(255,255,255,.55); } /* Para quien prefiere que le expliquen antes de escribir su nombre. */ .ln-prefiero{ display:inline-block;margin-top:16px;font-size:14px;font-weight:600; color:rgba(255,255,255,.6);text-decoration:underline;text-underline-offset:4px; } @media (hover:hover){ .ln-prefiero:hover{color:#fff} } /* «Quedan 3». Ámbar y no rojo: no es una mala noticia, es un empujón — el plato TODAVÍA se puede pedir. El rojo está reservado para lo que ya no hay. */ .prod-sello-quedan{ background:linear-gradient(180deg,#F59E0B,#D97706);color:#241000; font-weight:800;letter-spacing:.01em; } /* «2x1», «−25%». La chapa de la promoción va ARRIBA A LA DERECHA y no a la izquierda como las demás: así nunca choca con «Se acabó» ni con «Quedan 3», que pueden salir a la vez. El color lo elige el dueño al crear la promo (`--ps-promo`); si no eligió ninguno, usa el acento de su carta. El texto se calcula con `color-mix` contra el fondo para que se lea sobre cualquier color que escoja — incluido un amarillo claro. */ /* ═══════════ LA CINTA DE LA PROMOCIÓN ═══════════ Una cinta de verdad colgando del borde de arriba de la foto: el cuerpo con el color de la promo y dos colas más oscuras que salen por los lados, caen y llevan su muesca en V. Una chapa redonda más se pierde entre los otros sellos («Se acabó», «Quedan 3»); una cinta se lee como oferta antes de leer la letra. Centrada arriba y no en una esquina: las esquinas ya están ocupadas, y una cinta al medio es la forma en que el ojo espera ver una oferta. */ .prod-sello-promo{ left:50%;right:auto;top:0; transform:translateX(-50%); padding:8px 16px 9px; border-radius:0 0 3px 3px; /* Degradado suave en vez de un plano: es lo que le da el brillo de tela. Y aclarado con blanco para que el texto oscuro se lea sobre cualquier color que escoja el dueño, de un verde brillante a un vino oscuro. */ background:linear-gradient(180deg, color-mix(in srgb, var(--ps-promo,var(--acento)) 74%, #fff) 0%, color-mix(in srgb, var(--ps-promo,var(--acento)) 92%, #fff) 100%); color:#160B02; font-size:12.5px;font-weight:900;letter-spacing:.05em;line-height:1; /* La sombra va con `filter` y no con `box-shadow`: así sigue el contorno recortado de las colas en vez de dibujar un rectángulo alrededor. */ filter:drop-shadow(0 4px 7px rgba(0,0,0,.45)); backdrop-filter:none;-webkit-backdrop-filter:none; isolation:isolate; } /* LAS COLAS. Van DETRÁS del cuerpo (`z-index:-1`) para que se lea el doblez, y cada una lleva la muesca en V recortada en su extremo — es lo que convierte dos rectángulos en una cinta. */ .prod-sello-promo::before, .prod-sello-promo::after{ content:'';position:absolute;top:5px;z-index:-1; width:16px;height:calc(100% + 3px); background:color-mix(in srgb, var(--ps-promo,var(--acento)) 62%, #000); } .prod-sello-promo::before{ left:-14px; /* arriba recto, baja, muesca hacia dentro, y sube en diagonal al doblez */ clip-path:polygon(100% 0, 100% 100%, 45% 66%, 0 100%, 0 30%); } .prod-sello-promo::after{ right:-14px; clip-path:polygon(0 0, 0 100%, 55% 66%, 100% 100%, 100% 30%); } /* Sin color-mix la cinta sigue siendo cinta: el color tal cual y las colas oscurecidas con un filtro. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .prod-sello-promo{background:var(--ps-promo,var(--acento));color:#160B02} .prod-sello-promo::before,.prod-sello-promo::after{ background:var(--ps-promo,var(--acento));filter:brightness(.62); } } /* En lista la foto son 118 px (86 en teléfonos pequeños): la cinta se encoge para caber con sus colas dentro de la foto. */ body.disp-lista .prod-sello-promo{ left:50%;right:auto;top:0;padding:5px 10px 6px; font-size:10.5px;letter-spacing:.02em; } body.disp-lista .prod-sello-promo::before, body.disp-lista .prod-sello-promo::after{width:11px;height:calc(100% + 2px);top:4px} body.disp-lista .prod-sello-promo::before{left:-9px} body.disp-lista .prod-sello-promo::after{right:-9px} /* «Quedan 3» baja cuando hay cinta: la cinta va centrada arriba y con las colas ocupa 78 px de los 118 de la foto, así que a la misma altura se pisaban. */ .prod-sello-bajo{top:46px} body.disp-lista .prod-sello-bajo{top:36px} /* El empujón del detalle: «Agrega uno más y te cobramos 1». Discreto pero con el color del acento — no es un aviso de error, es una oportunidad. */ .mp-nudge{ margin:10px 0 0;padding:9px 12px;border-radius:12px; background:var(--acento-suave,rgba(255,255,255,.06)); border:1px dashed var(--acento); color:var(--acento);font-size:13.5px;font-weight:650;line-height:1.35; } .mp-nudge[hidden]{display:none} /* El precio de lista tachado dentro del botón de agregar. Sin él la rebaja no se ve: solo se ve un precio, y no hay con qué compararlo. */ #mp-add s{margin-left:9px;opacity:.62;font-weight:600;text-decoration-thickness:2px} /* La etiqueta de promoción en la línea del carrito. Va con `.linea .n` delante y no suelta: `.linea .n span` tiene más especificidad y le imponía `display:block` (una barra amarilla atravesada de lado a lado) y `color:var(--tenue)` (gris pálido sobre amarillo, ilegible). Escrita así gana la que corresponde. El fondo se aclara con blanco para que el texto oscuro se lea sobre cualquier acento que traiga la plantilla del negocio. */ .linea .n .li-promo{ align-self:flex-start;display:inline-block;width:auto;margin-top:4px; padding:2px 9px;border-radius:999px; background:color-mix(in srgb, var(--acento) 74%, #fff); color:#160B02; font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase; } @supports not (color: color-mix(in srgb, red 50%, blue)) { .linea .n .li-promo{background:var(--acento);color:#160B02} } /* Cuánto se rebajó en esta línea, en verde y debajo del nombre. */ .linea .n .li-dcto{ display:block;margin-top:3px; color:#4ADE80;font-size:12px;font-weight:700; } /* Lo que se ahorra, en verde y encima del total. */ /* El precio de lista tachado en la línea del carrito, encima del rebajado. */ .linea .p s{display:block;font-size:11.5px;opacity:.55;font-weight:600;margin-bottom:1px} .total-ahorro{color:#4ADE80;font-size:14.5px} .total-ahorro span:last-child{font-weight:800} /* La autorización de datos del checkout. Discreta pero legible: no es letra pequeña, es una decisión que la persona tiene que poder tomar. */ .dato-ok{ display:flex;gap:11px;align-items:flex-start;margin:18px 0 4px; padding:12px 14px;border-radius:12px;cursor:pointer; background:rgba(255,255,255,.04);border:1px solid var(--borde); font-size:13.5px;line-height:1.45;color:var(--tenue); } .dato-ok input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--acento);cursor:pointer} .dato-ok a{color:var(--acento);text-decoration:underline;text-underline-offset:2px} .dato-falta{border-color:#EF4444;background:rgba(239,68,68,.08);animation:dato-toc .4s ease} @keyframes dato-toc{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} @media (prefers-reduced-motion:reduce){ .dato-falta{animation:none} } /* El enlace a la política, en el pie de la carta. Discreto pero presente: la ley pide que esté accesible, no que grite. */ .pie-legal{ display:inline-block;margin-left:10px;padding-left:10px; border-left:1px solid var(--borde); color:var(--tenue);font-size:12.5px;text-decoration:none; } @media (hover:hover){ .pie-legal:hover{color:var(--texto)} }