/* ========================================================================= Sumaq · la carta — v6 (v5 intacta al lado) Restó360 · Diseñado por Operaria LA CARTA FILTRADA A PEDIDO. El anfitrión manda por WhatsApp un link con ?sin=, ?pref= y ?cat=; la carta lo aplica al abrir y lo dice en una franja de la barra, con «Ver toda la carta» para deshacerlo. Sin JS la carta se ve completa y una línea de la barra avisa que el filtro necesita JavaScript. LA TARJETA ES LA FOTO. En reposo cada plato muestra su foto limpia, su nombre y su precio juntos, el «+» de la bandeja y una seña de una línea con sus alérgenos. Al tocarla aparece todo encima —sellos, descripción, historia, nota— bajo un velo claro que deja ver la foto. Tocar de nuevo, o que la tarjeta salga del centro o de la pantalla, la devuelve al reposo. CÓMO LEER ESTA HOJA. Hay cuatro estados y van en este orden: 1. BASE — lo que se ve SIN JavaScript, en cualquier ancho, y también con reduced-motion. Las tarjetas se envuelven en grilla: la foto arriba, entera, y debajo TODO lo escrito: sellos, nombre, descripción, historia, nota y precio. Nada se escribe encima de la foto. Las categorías son anclas. Este es el estado resuelto. Si algo falla, esto es lo que queda. 2. html.js — el JS confirmó que corre. Las categorías filtran: una a la vez, con «Todo» primero, y la carta muestra solo lo elegido. 3. EL RIEL — html.js fuera del modo web y sin reduced-motion. Los platos van en un riel con imán tarjeta por tarjeta, y la página se acomoda al comienzo de cada sección (proximity, nunca mandatory: un mandatory vertical atrapa la lectura). 4. .modo-web — el centinela #modo dijo que hay sitio para la gramática de web: capítulo pineado, la foto grande a la derecha y la palabra a la izquierda. Se llama `modo-web` y no `escena` porque vive en el : una `.escena` matcheaba al propio elemento raíz y la regla base `.escena{display:none}` apagaba la página entera. El JS nunca habilita contenido, solo lo pone en movimiento (ley 4 del skill + lección del 10-ago-2026: el estado por defecto tiene que ser el RESUELTO). ========================================================================= */ :root{ /* Suelo navy del mockup de design */ --navy:#0A1428; --navy-2:#132649; --navy-3:#0d1b34; --crema:#EDEAE3; /* Acción y rótulos */ --teal:#349891; --teal-cl:#7BC4BC; --tinta:#08211F; /* Irrupción. #ED5E22 lo decidió Francisco el 26-ago-2026 sobre el #c0552e que usaba menu.html; la contradicción quedó encolada en PENDIENTES. */ --brasa:#ED5E22; /* Alérgenos: rosa piel = contiene, teal = libre de */ --rosa:#EDC9C0; --display:'Cormorant Garamond',Georgia,serif; --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace; /* La mide el JS sobre la barra real y la reescribe. El valor de acá es solo el arranque: suponer el alto de una barra fue lo que tapó un titular una vez. */ --barra-h:170px; /* v7 · la barra de Restó360 (52) + la de categorías (118) */ --tope-h:52px; /* La tarjeta del riel. El alto alcanza para el abierto de casi todos los platos; el de la historia más larga corre adentro de la tarjeta. */ --tarjeta:min(78vw,300px); --tarjeta-h:min(112vw,430px); /* En reposo, la franja de abajo donde viven la seña, el nombre y el precio. La foto termina ahí, fundida en el fondo de la tarjeta: la palabra no la tapa, la sigue. */ --zona:92px; /* El borde de la tarjeta al centro. Va POR DENTRO de la tarjeta: en la v4 era una sombra por fuera y el riel, que recorta lo que desborda, se comía el lado de arriba. */ --borde-cian:rgba(52,152,145,.95); --curva:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} /* La barra fija se descuenta una sola vez, acá, para todo lo que aterriza en la página: anclas, el salto a la carta y el imán de las secciones. */ html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--navy); scroll-padding-top:var(--barra-h); } body{ font-family:var(--sans); background:var(--navy); color:var(--crema); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:var(--teal-cl);text-decoration:none} a:hover{color:var(--teal)} :focus-visible{outline:2px solid var(--teal-cl);outline-offset:3px;border-radius:4px} .saltar{ position:absolute;left:-9999px;top:0;z-index:99; padding:12px 18px;background:var(--teal);color:var(--tinta); font-weight:600;font-size:14px; } .saltar:focus{left:8px;top:8px;color:var(--tinta)} /* El centinela de modo. No se ve nunca; su única función es que el JS pueda preguntarle al CSS en qué gramática estamos, en vez de repetir el media query. */ #modo{position:static;width:0;height:0;overflow:hidden} /* ---------- una sola voz por papel ---------- */ .rotulo{ font-family:var(--mono);font-weight:400; font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:rgba(237,234,227,.5); } .rotulo--teal{color:var(--teal-cl)} /* ========================================================================= PORTADA El único capítulo que se gana la pantalla completa: es capítulo-foto (ley 5). ========================================================================= */ .portada{ position:relative; min-height:100svh; display:flex;flex-direction:column;justify-content:flex-end; padding:0 clamp(20px,5vw,64px) calc(clamp(26px,5vh,54px) + env(safe-area-inset-bottom)); overflow:hidden; } .portada__foto{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:48% 58%; /* la mesa puesta, no el techo */ animation:portadaIn 14s ease-out forwards; } /* Ley 6: en retrato el recorte es severo y hay que decidirlo, no dejárselo al navegador. La foto es apaisada (1408×768); en vertical se busca la mesa y el respaldo cálido, que es lo que da salón. */ @media (orientation:portrait){ .portada__foto{object-position:42% 72%} } @keyframes portadaIn{from{transform:scale(1.1)}to{transform:scale(1.01)}} .portada__velo{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(10,20,40,.72) 0%,rgba(10,20,40,.30) 34%,rgba(10,20,40,.86) 74%,var(--navy) 100%), linear-gradient(90deg,rgba(10,20,40,.55),transparent 62%); } .portada__brasa{ position:absolute;left:-14%;bottom:-8%;width:72%;height:44%; background:radial-gradient(closest-side,rgba(237,94,34,.34),transparent 72%); filter:blur(4px);pointer-events:none; } .portada__texto{position:relative;z-index:2;max-width:34ch} .portada h1{ font-family:var(--display);font-weight:400; font-size:clamp(3.6rem,min(17vw,13vh),7.5rem); line-height:.92;letter-spacing:.01em; margin:.18em 0 0; } .portada__linea{ font-family:var(--display);font-weight:300; font-size:clamp(1.3rem,min(6vw,4.2vh),2.1rem); line-height:1.2;color:rgba(237,234,227,.88);margin-top:.35em; } .portada__linea em{font-style:italic;color:var(--teal-cl)} .portada__lede{ font-size:clamp(13.5px,3.6vw,15.5px);line-height:1.62; color:rgba(237,234,227,.72);margin-top:1.1em;max-width:44ch; } .portada__mesa{ display:inline-flex;align-items:center;gap:9px;margin-top:1.3em; padding:8px 15px;border-radius:999px; border:1px solid rgba(52,152,145,.45);background:rgba(31,91,87,.26); font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--teal-cl); } .portada__pista{position:relative;z-index:2;margin-top:1.6em} /* La brasa que respira. Es el único elemento animado en reposo de toda la página: marca que la mesa está abierta. */ .brasa{ position:relative;display:inline-flex;width:7px;height:7px;flex:none; } .brasa::before,.brasa::after{ content:'';position:absolute;border-radius:999px;background:var(--brasa); } .brasa::before{inset:0;animation:brasaPulso 3.4s ease-in-out infinite} .brasa::after{inset:-5px;opacity:.18;animation:brasaHalo 3.4s ease-in-out infinite} @keyframes brasaPulso{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}} @keyframes brasaHalo{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.40;transform:scale(1.5)}} /* ========================================================================= LA BARRA Un solo sticky en el borde de arriba. El pin de las secciones se cuelga DEBAJO de ella, con su alto medido — dos stickies en top:0 se pisan y el de abajo pierde sus primeros píxeles (lección del 10-ago-2026). ========================================================================= */ .barra{ position:sticky;top:var(--tope-h);z-index:20; background:rgba(13,27,52,.88); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border-bottom:1px solid rgba(237,234,227,.13); } .barra__cats{ --cats-borde:clamp(10px,3vw,28px); display:flex;gap:2px;overflow-x:auto; padding:0 var(--cats-borde); scrollbar-width:none; } .barra__cats::-webkit-scrollbar{display:none} .barra__cat{ flex:none;min-height:46px;display:flex;align-items:center;padding:0 14px; font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:rgba(237,234,227,.56);white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s ease,border-color .2s ease; } .barra__cat:hover{color:var(--crema)} /* La categoría elegida. Es un estado, no un «estás aquí»: con JS la barra filtra, y lo marcado es lo que la carta está mostrando. */ .barra__cat[aria-pressed="true"]{color:var(--crema);border-bottom-color:var(--brasa)} /* «Todo» no se va nunca de la pantalla. En un teléfono la barra corre de lado para mostrar Postres o Bebidas, y la vuelta a la carta completa tiene que seguir a la vista: se queda pegada al borde izquierdo y lo que pasa por detrás se desvanece bajo ella. */ .barra__cat--todo{ /* El pegado se mide desde el relleno del riel; el left negativo lo lleva al borde mismo, para que nada asome a su izquierda. */ position:sticky;left:calc(-1 * var(--cats-borde));z-index:1; background:var(--navy-3); /* Un aire propio la separa de las categorías. En reposo, el desvanecido cae justo en ese aire y en el relleno de «Entradas»: no toca ninguna letra. */ margin-right:20px; } .barra__cat--todo::after{ content:'';position:absolute;top:0;bottom:0;left:100%;width:34px; background:linear-gradient(90deg,var(--navy-3) 30%,rgba(13,27,52,0)); pointer-events:none; } .barra__filtros{ display:flex;align-items:center;gap:8px 12px; /* Envuelve por sí solo: donde los chips y el conteo no caben juntos —un teléfono— el conteo baja a su propia línea en vez de comerse la mitad del ancho de los filtros. Sin breakpoint: lo decide el espacio, no un número. */ flex-wrap:wrap; padding:11px clamp(10px,3vw,28px); border-top:1px solid rgba(237,234,227,.08); } .barra__chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;flex:1 1 240px;min-width:0} .barra__chips::-webkit-scrollbar{display:none} .chip{ flex:none;min-height:38px;display:flex;align-items:center;padding:0 15px; border-radius:999px;border:1px solid rgba(237,234,227,.26); font-weight:600;font-size:12.5px;color:rgba(237,234,227,.86); white-space:nowrap; transition:background .18s ease,border-color .18s ease,color .18s ease; } .chip:hover{border-color:rgba(237,234,227,.5)} .chip[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--tinta)} /* Los filtros de dieta son un control: sin JS no harían nada, y un botón que no hace nada no se ofrece. La carta completa sigue a la vista. */ html:not(.js) .barra__chips{display:none} /* El conteo va en su propia línea: si compartiera la de los chips según el largo de su texto, la barra cambiaría de alto con cada filtro y la carta saltaría debajo. Con JS, además, el piso de la barra es estable. */ .barra__conteo{ flex:1 0 100%;min-width:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* La franja de la carta filtrada. Va DENTRO de la barra, como su última fila: así el alto medido de la barra la incluye, y el imán, el salto a la carta y el pin de web se cuelgan debajo de ella sin un segundo sticky que se pise con el primero. Teal: es un estado de la carta, no una alarma. */ .barra__franja{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap; gap:8px 14px; padding:8px clamp(10px,3vw,28px) 9px; background:rgba(52,152,145,.16); border-top:1px solid rgba(123,196,188,.3); } .barra__franja[hidden]{display:none} .barra__franjaTexto{ flex:1 1 200px;min-width:0; font-size:13px;line-height:1.4;color:var(--crema); } .barra__franjaRotulo{font-weight:600;color:var(--teal-cl)} .barra__franjaBoton{ flex:none;min-height:40px;padding:0 15px;font-size:12.5px; } /* Sin JS: una línea que dice por qué la carta no llega filtrada. Con JS no hace falta y se va. */ .barra__aviso{ padding:8px clamp(10px,3vw,28px) 9px; font-size:12.5px;line-height:1.45;color:rgba(237,234,227,.72); border-top:1px solid rgba(237,234,227,.08); } html.js .barra__aviso{display:none} /* ========================================================================= SECCIONES — estado BASE Miden su contenido. Nada de 100dvh forzado: eso fabrica valles (ley 5). ========================================================================= */ /* Filtrada, la carta puede quedar más corta que la pantalla (seis bebidas en un teléfono). Con este piso la barra siempre alcanza el borde de arriba y la lista empieza justo debajo, sin una franja de portada encima. */ html.js main{min-height:calc(100vh - var(--barra-h))} .seccion{ position:relative; padding:clamp(38px,7vw,64px) 0 clamp(10px,3vw,24px); } /* Lo que el filtro oculta queda fuera de verdad. Con !important porque la gramática de web le da a la cinta su propio display, y ese le ganaría al atributo. */ .seccion[hidden],.cinta[hidden],.plato[hidden]{display:none !important} .seccion__pin{position:relative} .seccion__cabeza{ position:relative;z-index:2; padding:0 clamp(20px,5vw,56px) clamp(18px,3vw,26px); } .seccion h2{ font-family:var(--display);font-weight:400; font-size:clamp(2.1rem,min(8vw,6.4vh),3.6rem); line-height:1.02; } .seccion__pie{ font-size:clamp(13px,3.4vw,15px);line-height:1.6; color:rgba(237,234,227,.62);margin-top:.5em;max-width:46ch; } .seccion__paso{margin-top:.9em;display:none} .escena{display:none} /* La cinta. En base es una grilla que envuelve: sin JS y con reduced-motion se leen los treinta platos sin arrastrar nada de lado. */ .cinta{ display:flex;flex-wrap:wrap; gap:clamp(12px,2.6vw,18px); padding:0 clamp(20px,5vw,56px); } .cinta__vacio{ padding:clamp(24px,6vw,44px) clamp(20px,5vw,56px); font-family:var(--display);font-size:clamp(1.4rem,5vw,2rem); line-height:1.2;color:rgba(237,234,227,.8); } .cinta__vacio em{font-style:italic;color:var(--teal-cl)} /* La salida del vacío: quita los filtros de dieta y deja la categoría. */ .cinta__limpiar{ display:flex;width:fit-content;margin-top:18px; font-family:var(--sans); } /* La carta entera quedó sin nada: una línea, nunca una pantalla en blanco. */ .carta__vacio{ padding:clamp(38px,7vw,64px) clamp(20px,5vw,56px) clamp(10px,3vw,24px); font-family:var(--display);font-size:clamp(1.4rem,5vw,2rem); line-height:1.2;color:rgba(237,234,227,.8); min-height:40vh; } /* ---------- la tarjeta-plato · BASE: la foto arriba, la palabra abajo ---------- */ .plato{ position:relative;flex:none; width:var(--tarjeta); display:flex;flex-direction:column; border-radius:24px;overflow:hidden; background:var(--navy-2); isolation:isolate; transition:transform .34s var(--curva),opacity .3s ease,box-shadow .34s ease; } /* El contorno. Siempre por dentro, siempre entero en sus cuatro lados: un filete tenue en todas, el cian en la del centro. Nada que lo recorte, porque no se sale de la tarjeta. */ .plato::after{ content:'';position:absolute;inset:0;z-index:5; border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(237,234,227,.13); transition:box-shadow .3s ease; } /* La foto. En base va en el flujo, cuadrada como el archivo: se ve entera. El encuadre lo declara cada plato en --pos; el zoom (--zoom) solo lo usa la foto que trae una franja muerta, y crece anclado a la mesa (abajo), así que nunca se derrama sobre lo escrito. */ .plato__foto, .plato__lamina{ position:relative;z-index:-2; width:100%;height:auto;aspect-ratio:1;flex:none; } .plato__foto{ object-fit:cover; /* jamás contain: en retrato deja 74% de franja */ object-position:var(--pos,50% 50%); transform:scale(var(--zoom,1));transform-origin:50% 100%; } .plato__lamina{ display:grid;place-items:center; background: radial-gradient(120% 92% at 12% 106%,rgba(237,94,34,.5),transparent 62%), repeating-linear-gradient(115deg,rgba(237,234,227,.055) 0 2px,transparent 2px 11px), repeating-linear-gradient(-115deg,rgba(237,234,227,.032) 0 1px,transparent 1px 9px), linear-gradient(158deg,var(--l2),var(--l1)); } .plato__inicial{ font-family:var(--display);font-weight:300; font-size:15rem;line-height:.7; color:rgba(237,234,227,.2); transform:translateY(-.04em); } /* En base el velo solo funde el borde de abajo de la foto con la tarjeta. */ .plato__velo{ position:absolute;z-index:-1;top:0;left:0;right:0;aspect-ratio:1; background:linear-gradient(180deg,transparent 62%,var(--navy-2) 100%); pointer-events:none; } .plato__cara{ position:relative; display:flex;flex-direction:column; padding:4px clamp(16px,4vw,20px) clamp(16px,4vw,20px); flex:1 1 auto; } .plato__sellos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px} .sello{ padding:5px 10px;border-radius:999px; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; white-space:nowrap; } .sello--contiene{background:rgba(237,201,192,.2);border:1px solid rgba(237,201,192,.45);color:var(--rosa)} .sello--aji {background:rgba(237,94,34,.18); border:1px solid rgba(237,94,34,.5); color:var(--brasa)} .sello--libre {background:rgba(52,152,145,.2); border:1px solid rgba(52,152,145,.5); color:var(--teal-cl)} .sello--peso {background:rgba(237,234,227,.08);border:1px solid rgba(237,234,227,.24);color:rgba(237,234,227,.7)} .plato__nombre{ font-family:var(--display);font-weight:400; font-size:clamp(1.6rem,5.6vw,2rem); line-height:1.06; } .plato__desc{ font-size:12.5px;line-height:1.55; color:rgba(237,234,227,.78);margin-top:.6em; } .plato__hist{ font-size:12.5px;line-height:1.55; color:rgba(237,234,227,.62);margin-top:.6em; } .plato__nota{ font-size:12px;line-height:1.5;color:var(--teal-cl);margin-top:.6em; } .plato__pie{ display:flex;align-items:center;gap:10px; margin-top:auto;padding-top:16px; } .plato__precio{font-weight:700;font-size:19px;margin-right:auto} .plato__add{ width:46px;height:46px;flex:none;border-radius:999px; background:var(--teal);color:var(--tinta); font-size:24px;font-weight:600;line-height:1; display:grid;place-items:center; transition:transform .18s var(--curva),background .18s ease; } .plato__add:hover{background:var(--teal-cl);transform:scale(1.06)} .plato__add.es-puesto{background:var(--brasa)} /* La seña de alérgenos y el «Ver más» los pone el JS, y solo existen donde la tarjeta se recoge. En base la tarjeta ya lo dice todo. */ .plato__sena,.plato__mas{display:none} /* ========================================================================= BANDEJA No existe sin JS porque es un control, no contenido: lo que hay que leer de cada plato ya está en su tarjeta. ========================================================================= */ .bandeja{ position:fixed;left:0;right:0;bottom:0;z-index:30; display:grid;grid-template-columns:auto 1fr;align-items:center; gap:12px clamp(12px,3vw,20px); padding:13px clamp(14px,4vw,28px) calc(15px + env(safe-area-inset-bottom)); background:rgba(13,27,52,.9); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border-top:1px solid rgba(237,234,227,.16); transform:translateY(0); transition:transform .3s var(--curva); } .bandeja[hidden]{display:none} .bandeja__total{font-weight:700;font-size:19px;margin-top:2px} .bandeja__acciones{display:flex;align-items:center;justify-content:flex-end;gap:8px} .bandeja__aviso{ grid-column:1/-1; font-size:11.5px;line-height:1.45;color:rgba(237,234,227,.55); } .boton{ min-height:46px;display:flex;align-items:center;justify-content:center; padding:0 20px;border-radius:999px;font-weight:600;font-size:14px; white-space:nowrap;transition:background .18s ease,border-color .18s ease; } .boton--lleno{background:var(--teal);color:var(--tinta)} .boton--lleno:hover{background:var(--teal-cl)} .boton--hueco{border:1px solid rgba(237,234,227,.3);color:rgba(237,234,227,.86)} .boton--hueco:hover{border-color:rgba(237,234,227,.55)} /* ---------- pie ---------- */ .pie{ padding:clamp(44px,8vw,80px) clamp(20px,5vw,56px) clamp(120px,18vw,150px); border-top:1px solid rgba(237,234,227,.12); margin-top:clamp(30px,6vw,60px); } .pie__marca{font-family:var(--display);font-size:2rem;line-height:1} .pie__nota{ font-size:13px;line-height:1.6;color:rgba(237,234,227,.55); margin-top:.8em;max-width:62ch; } .pie__nota a{color:inherit;text-decoration-color:rgba(237,234,227,.4)} .pie__nota strong{color:rgba(237,234,227,.78);font-weight:600} .pie__credito{margin-top:1.4em;font-family:var(--mono);font-size:11px;letter-spacing:.14em} /* ========================================================================= LA SEÑA Y EL ABIERTO — comunes al riel y al modo web Los dos existen solo con movimiento: con reduced-motion la carta es la base. ========================================================================= */ /* La seña: una línea de rótulo antes del nombre. Rosa si el plato contiene algún alérgeno declarado («Contiene huevo · gluten»); teal si no contiene ninguno, con lo que sí declara de libre («Vegano · Sin gluten»). Nombra lo que hay en vez de contarlo: quien tiene una alergia lo lee sin abrir nada. */ .plato__sena, .escena__sena{ font-family:var(--mono);font-weight:400; text-transform:uppercase;letter-spacing:.1em; text-wrap:balance; } .es-contiene{color:var(--rosa)} .es-libre{color:var(--teal-cl)} /* Un punto rosa delante de «Contiene»: la seña de lo que importa se ve antes de leerla. Lo libre no lleva punto. */ .plato__sena.es-contiene::before, .escena__sena.es-contiene::before{ content:'';display:inline-block;width:.62em;height:.62em;border-radius:50%; background:var(--rosa);margin-right:.7em;vertical-align:.02em; } /* El «Ver más» de la tarjeta: el mismo gesto que tocar la foto, pero con nombre, foco de teclado y aria-expanded. */ .plato__mas{ flex:none;min-height:40px;align-items:center;padding:0 14px; border-radius:999px;border:1px solid rgba(237,234,227,.3); font-weight:600;font-size:12.5px;color:rgba(237,234,227,.9); white-space:nowrap; transition:border-color .18s ease,background .18s ease; } .plato__mas:hover{border-color:rgba(237,234,227,.6)} .plato__mas[aria-expanded="true"]{background:rgba(237,234,227,.12)} @keyframes aparece{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:no-preference){ /* El abierto: el velo sube desde abajo como se levanta el mantel. Más claro que el de la v4 (.93 con blur de 14px): la foto se sigue viendo detrás. */ html.js .plato__velo::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,20,40,.56) 0%,rgba(10,20,40,.68) 55%,rgba(10,20,40,.8) 100%); -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px); transform:translateY(101%); transition:transform .42s var(--curva); } html.js .plato.es-abierto .plato__velo::after{transform:none} /* Sobre una foto la letra lleva una sombra corta, y los sellos un fondo propio: el velo es claro a propósito y una salsa amarilla detrás de un sello translúcido lo borra. */ html.js .plato.es-abierto .plato__cara{text-shadow:0 1px 2px rgba(10,20,40,.75)} html.js .plato.es-abierto .sello{box-shadow:inset 0 0 0 99px rgba(10,20,40,.5)} html.js .plato.es-abierto .plato__hist::before{ content:'De dónde viene';display:block;margin-bottom:.45em; font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase; color:rgba(237,234,227,.62); } } /* ========================================================================= 3 · EL RIEL — teléfono y ventanas angostas, con JS y con movimiento ========================================================================= */ @media (prefers-reduced-motion:no-preference){ /* --- el imán de la página: cada sección se acomoda bajo la barra --- proximity: solo acomoda si uno suelta cerca de un comienzo. La portada y el pie también son destino, o el imán no dejaría llegar al final. */ html.js:not(.modo-web){scroll-snap-type:y proximity;scroll-padding-bottom:var(--bandeja-h,0px)} html.js:not(.modo-web) .portada, html.js:not(.modo-web) .seccion{scroll-snap-align:start} html.js:not(.modo-web) .pie{scroll-snap-align:end} /* El comienzo de la carta también es destino. Si un filtro la deja sin ninguna sección, la línea del vacío tiene que quedar bajo la barra, no el imán llevándola al pie. */ html.js:not(.modo-web) main{scroll-snap-align:start} /* --- el imán del riel: una tarjeta por gesto, siempre al centro --- La v4 lo pedía con scroll-padding-inline:50%, que deja una ventana de ancho cero y el navegador no encontraba dónde detenerse: todo pasaba de largo. Ahora el relleno del riel es real y mide media pantalla menos media tarjeta, así que hasta la primera y la última pueden quedar al centro. */ html.js:not(.modo-web) .cinta{ flex-wrap:nowrap; overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; padding:0 calc((100% - var(--tarjeta)) / 2) clamp(14px,3vw,22px); } html.js:not(.modo-web) .cinta::-webkit-scrollbar{display:none} /* Arrastrar con el mouse suelta el imán mientras dura; al soltar, el JS la lleva a la tarjeta más cercana. */ html.js:not(.modo-web) .cinta.es-arrastrando{scroll-snap-type:none;cursor:grabbing} html.js:not(.modo-web) .plato{ height:var(--tarjeta-h); display:block; scroll-snap-align:center; scroll-snap-stop:always; /* un latigazo avanza una, no seis */ cursor:pointer; /* La del centro crece, las vecinas se apagan. */ transform:scale(.955);opacity:.6; } html.js:not(.modo-web) .plato.es-centro{ transform:scale(1);opacity:1; box-shadow:0 22px 48px rgba(10,20,40,.6); } html.js:not(.modo-web) .plato.es-centro::after{box-shadow:inset 0 0 0 1.5px var(--borde-cian)} /* La foto ocupa la tarjeta hasta la franja de la palabra. Casi cuadrada: en retrato el recorte de los lados es de un 6 %, no del 30 % de la v4. */ html.js:not(.modo-web) .plato__foto, html.js:not(.modo-web) .plato__lamina{ position:absolute;top:0;left:0;right:0; height:calc(100% - var(--zona));aspect-ratio:auto; } html.js:not(.modo-web) .plato__velo{ inset:0;aspect-ratio:auto; background:linear-gradient(180deg, rgba(19,38,73,0) 0%, rgba(19,38,73,0) calc(100% - var(--zona) - 120px), rgba(19,38,73,.72) calc(100% - var(--zona) - 28px), var(--navy-2) calc(100% - var(--zona) + 4px)); } /* La palabra. En reposo: seña, nombre, precio y «+», abajo. Abierta: todo, y si no cabe corre adentro de la tarjeta, nunca la agranda. */ html.js:not(.modo-web) .plato__cara{ position:absolute;inset:0; padding:16px 18px 16px; overflow:hidden; } /* Con margin-top:auto en lo primero que se ve, lo escrito se apoya abajo; y cuando desborda, el margen se anula y se lee desde arriba (justify-content:flex-end dejaría la parte de arriba fuera del scroll). Lo primero es la seña en reposo y los sellos abierta: nunca las dos. */ html.js:not(.modo-web) .plato__sena, html.js:not(.modo-web) .plato__sellos{margin-top:auto} html.js:not(.modo-web) .plato__sena{display:block;font-size:10.5px;line-height:1.45;margin-bottom:5px} html.js:not(.modo-web) .plato__mas{display:flex} html.js:not(.modo-web) .plato__pie{margin-top:12px;padding-top:0} html.js:not(.modo-web) .plato__sellos, html.js:not(.modo-web) .plato__desc, html.js:not(.modo-web) .plato__hist, html.js:not(.modo-web) .plato__nota{display:none} html.js:not(.modo-web) .plato.es-abierto .plato__cara{overflow-y:auto} html.js:not(.modo-web) .plato.es-abierto .plato__sena{display:none} html.js:not(.modo-web) .plato.es-abierto .plato__sellos{display:flex} html.js:not(.modo-web) .plato.es-abierto .plato__desc, html.js:not(.modo-web) .plato.es-abierto .plato__hist, html.js:not(.modo-web) .plato.es-abierto .plato__nota{display:block} html.js:not(.modo-web) .plato.es-abierto .plato__hist{margin-top:.9em} html.js:not(.modo-web) .plato.es-abierto .plato__sellos, html.js:not(.modo-web) .plato.es-abierto .plato__desc, html.js:not(.modo-web) .plato.es-abierto .plato__hist, html.js:not(.modo-web) .plato.es-abierto .plato__nota{animation:aparece .34s var(--curva) .08s both} html.js:not(.modo-web) .plato.es-abierto .plato__sellos .sello{font-size:10.5px;padding:4px 9px} } /* ========================================================================= 4 · GRAMÁTICA DE WEB La escena, de atrás hacia adelante: 0. el campo — la foto del plato COMPLETA y centrada, a sangre, como el hero de Restó360. Dos capas para cruzarlas al cambiar. 1. el telón — navy parejo y espeso, que la vuelve atmósfera de salón. 2. la pista — los platos en fila horizontal. El activo va centrado en la mitad derecha, con el borde cian, y el que viene asoma transparente al costado. Se mueve con el scroll de la página. 3. el texto — mitad izquierda, centrado vertical: la seña, el nombre y el precio con su botón. Lo demás está en la foto, a un click, bajo el mismo velo claro que en el teléfono. DOS CONDICIONES, UN BLOQUE. El ancho manda (900, declarado una única vez en toda la hoja), pero el alto también: una ventana ancha y BAJA no tiene sitio para un capítulo pineado, y al forzarlo el texto se desbordaba de su fila hacia arriba Y hacia abajo a la vez. Es la ley 1 en su forma menos obvia: un capítulo que no cabe no se pinea, fluye. ========================================================================= */ @media (min-width:900px) and (min-height:640px){ /* Lo único que hace este centinela es contestarle al JS. */ #modo{position:sticky} .barra__cats{--cats-borde:clamp(28px,4vw,44px)} .barra__cat{font-size:11px;padding:0 18px;min-height:52px} .barra__cat--todo::after{width:38px} .barra__filtros{padding-inline:clamp(28px,4vw,44px);flex-wrap:nowrap} .barra__chips{flex:0 1 auto} .barra__conteo{flex:0 1 auto} .barra__franja, .barra__aviso{padding-inline:clamp(28px,4vw,44px)} .barra__franja{justify-content:flex-start;gap:8px 18px} .barra__franjaTexto{flex:0 1 auto} html.modo-web{ --carta:min(36vw,58vh,540px); /* el plato grande, medido también por vh */ --hueco:clamp(18px,2.2vw,34px); --eje:68%; /* dónde se centra el plato activo */ } /* --- el riel y su pin --- */ html.modo-web .seccion{ /* el riel se gana su pista: cada plato tiene su tramo, y a lo largo de él la fila se corre de lado (ley 5, segunda mitad) */ height:calc(100dvh - var(--barra-h) + (var(--n) - 1) * 62vh); padding:0; } html.modo-web .seccion__pin{ position:sticky; top:var(--barra-h); height:calc(100dvh - var(--barra-h)); /* estrictamente menor que la pantalla (ley 1) */ overflow:hidden; display:block; /* las capas se ubican solas */ } html.modo-web .escena{display:contents} /* --- 0 · el campo: la foto entera, centrada, a sangre --- */ html.modo-web .escena__campo{ position:absolute;inset:0;z-index:0; background-size:cover;background-position:50% 50%; opacity:0;transition:opacity .7s ease; } html.modo-web .escena__campo.es-visible{opacity:1} /* Los platos que todavía no tienen foto: el mismo tejido de su categoría, apenas insinuado, para que el fondo nunca quede en negro plano. */ html.modo-web .escena__campo.es-lamina{ background-image: repeating-linear-gradient(115deg,rgba(237,234,227,.035) 0 2px,transparent 2px 16px), linear-gradient(158deg,var(--l2),var(--l1)); } /* --- 1 · el telón: espeso y parejo. La foto de atrás es salón, no plato. --- */ html.modo-web .escena__telon{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(96deg, rgba(10,20,40,.96) 0%, rgba(10,20,40,.93) 32%, rgba(10,20,40,.86) 58%, rgba(10,20,40,.83) 100%), linear-gradient(180deg, rgba(10,20,40,.72) 0%, transparent 20%, transparent 72%, rgba(10,20,40,.8) 100%); } /* --- 2 · la pista de platos --- */ html.modo-web .cinta{ position:absolute;z-index:2;inset:0; display:flex;align-items:center;flex-wrap:nowrap; overflow:visible; /* el que viene tiene que asomar */ gap:var(--hueco); padding:0 0 0 calc(var(--eje) - var(--carta) / 2); scroll-snap-type:none; cursor:default; /* La posición la dicta el scroll de la página: `--i` es fraccionario, así que la fila viaja de forma continua en vez de saltar de plato en plato. */ transform:translate3d(calc(-1 * var(--i,0) * (var(--carta) + var(--hueco))),0,0); will-change:transform; } html.modo-web .plato{ display:block; width:var(--carta);height:auto;aspect-ratio:1;flex:none; border-radius:22px;overflow:hidden; box-shadow:0 34px 80px rgba(0,0,0,.6); /* sin transición: lo mueve el scroll, y una transición encima lo retrasa */ transition:filter .35s ease,box-shadow .35s ease; transform:scale(calc(var(--s,1) * var(--roce,1))); scroll-snap-align:none; cursor:pointer; } /* El activo lleva el borde cian entero, por dentro. */ html.modo-web .plato.es-centro::after{box-shadow:inset 0 0 0 2px var(--borde-cian)} /* Se aclara y crece al pasar por encima. `--roce` se multiplica con la escala que pone el scroll en `--s`, para que los dos gestos convivan. Abierta, la foto ya no se aclara: debajo del velo hay letra. */ html.modo-web .plato:hover{ --roce:1.035; filter:brightness(1.14) saturate(1.04); box-shadow:0 40px 90px rgba(0,0,0,.68); } html.modo-web .plato.es-abierto:hover{--roce:1;filter:none} html.modo-web .plato__foto, html.modo-web .plato__lamina{ position:absolute;inset:0;height:100%;aspect-ratio:auto; } html.modo-web .plato__velo{ inset:0;aspect-ratio:auto; background:linear-gradient(180deg,transparent 0%,rgba(10,20,40,.1) 62%,rgba(10,20,40,.34) 100%); } html.modo-web .plato--lamina .plato__velo{background:none} /* A tamaño de miniatura el tinte de categoría era un acento; a medio metro de pantalla el ocre de Fondos grita más que cualquier fotografía de al lado. */ html.modo-web .plato__lamina{ background-image: linear-gradient(0deg,rgba(10,20,40,.58),rgba(10,20,40,.58)), radial-gradient(110% 88% at 16% 104%,rgba(237,94,34,.42),transparent 64%), repeating-linear-gradient(115deg,rgba(237,234,227,.05) 0 2px,transparent 2px 15px), repeating-linear-gradient(-115deg,rgba(237,234,227,.03) 0 1px,transparent 1px 13px), linear-gradient(158deg,var(--l2),var(--l1)); } html.modo-web .plato__inicial{font-size:min(24vh,14rem);color:rgba(237,234,227,.2)} /* La tarjeta en reposo es la fotografía: la palabra vive a la izquierda. */ html.modo-web .plato__cara{display:none} /* Abierta, sube encima de la foto lo que la izquierda no dice: los sellos completos, la descripción, la historia y la nota. */ html.modo-web .plato.es-abierto .plato__cara{ display:flex;position:absolute;inset:0; padding:clamp(22px,2.6vw,36px); overflow-y:auto; } html.modo-web .plato.es-abierto .plato__sellos{margin-top:auto} html.modo-web .plato__sena, html.modo-web .plato__nombre, html.modo-web .plato__pie{display:none} html.modo-web .plato.es-abierto .plato__sellos, html.modo-web .plato.es-abierto .plato__desc, html.modo-web .plato.es-abierto .plato__hist, html.modo-web .plato.es-abierto .plato__nota{animation:aparece .38s var(--curva) .1s both} html.modo-web .plato__desc{font-size:clamp(14px,min(1.1vw,1.9vh),16px);color:rgba(237,234,227,.9);margin-top:.2em} html.modo-web .plato__hist{font-size:clamp(13.5px,min(1.02vw,1.8vh),15.5px);line-height:1.6;color:rgba(237,234,227,.84);margin-top:1em} html.modo-web .plato__nota{font-size:clamp(13px,min(.95vw,1.7vh),14.5px)} html.modo-web .plato__sellos{margin-bottom:14px} /* --- 3 · el texto: mitad izquierda, centrado vertical --- */ html.modo-web .seccion__cabeza{ position:absolute;z-index:3;top:0;left:0; padding:clamp(16px,2.6vh,34px) 0 0 clamp(28px,4vw,56px); } html.modo-web .seccion h2{font-size:clamp(1.5rem,min(3vw,4vh),2.4rem)} html.modo-web .seccion__pie{font-size:clamp(13px,1.7vh,14.5px);max-width:44ch;text-wrap:pretty} html.modo-web .seccion__paso{display:block;margin-top:.7em} html.modo-web .escena__texto{ position:absolute;z-index:3; left:clamp(28px,4vw,56px);top:0;bottom:0; width:min(46ch,38vw); display:flex;flex-direction:column;justify-content:center; pointer-events:none; /* el plato de atrás sigue recibiendo el roce */ } html.modo-web .escena__texto > *{pointer-events:auto} /* Todo lo pineado mide también por vh (corolario de la ley 1). */ html.modo-web .escena__sena{ font-size:clamp(11px,min(.85vw,1.5vh),12.5px);line-height:1.5; margin-bottom:clamp(.7em,1.6vh,1.1em); } html.modo-web .escena__sena:empty{display:none} html.modo-web .escena__nombre{ font-family:var(--display);font-weight:400; font-size:clamp(2rem,min(4.6vw,7.4vh),4.4rem); line-height:.99;text-wrap:pretty; } html.modo-web .escena__pie{ display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px; margin-top:clamp(1em,2.6vh,1.8em); } html.modo-web .escena__precio{font-weight:700;font-size:clamp(1.3rem,min(2.2vw,3.4vh),1.95rem);margin-right:8px} html.modo-web .escena__pie [data-e-mas][aria-expanded="true"]{background:rgba(237,234,227,.12)} /* El texto entra por el costado que corresponde al sentido del scroll. `--dir` lo pone el JS: +1 baja, -1 sube. */ html.modo-web .escena__texto.va-entrando{animation:entraEscena .46s var(--curva) both} @keyframes entraEscena{ from{opacity:0;transform:translate3d(calc(var(--dir,1) * 2.4vw),0,0)} to {opacity:1;transform:none} } html.modo-web .cinta__vacio{ position:absolute;z-index:3; left:clamp(28px,4vw,56px);top:50%;transform:translateY(-50%); width:min(46ch,38vw);padding:0; } /* Sin platos que pasen el filtro, la escena no tiene nombre, precio ni botón que ofrecer: la línea del vacío ocupa su lugar sola. */ html.modo-web .seccion.es-vacia .escena__texto{display:none} /* La bandeja: píldora arriba a la derecha. */ .bandeja{ left:auto;right:clamp(20px,3vw,32px);bottom:auto; top:calc(var(--barra-h) + 14px); width:min(340px,32vw); grid-template-columns:1fr; border:1px solid rgba(237,234,227,.2);border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.5); } .bandeja__acciones{justify-content:flex-start} .pie{padding-bottom:clamp(60px,8vw,90px)} } /* ========================================================================= DEGRADACIONES QUE NO SE NEGOCIAN ========================================================================= */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } /* El riel vive entero dentro de no-preference y el JS no enciende el modo web con reduced-motion: acá la carta es la del estado base, en grilla, con cada plato entero y sin nada que se mueva solo. */ .portada__foto{animation:none} } @media print{ .tope,.barra,.bandeja,.saltar,.portada__pista{display:none} body{background:#fff;color:#111} .plato{break-inside:avoid} } /* ═══ v4 · 24-sep-2026 · la bandeja en el teléfono ═══════════════════════ En una sola fila no cabían el contador y los dos botones. Ahora va en filas: contador y total arriba, los botones abajo (Confirmar toma el ancho que sobra), el aviso al final. Y la página reserva el alto de la bandeja para que no tape el pie. Fuera del modo web. */ @media (max-width:899.98px), (max-height:639.98px){ .bandeja{grid-template-columns:1fr;gap:10px} .bandeja__cuenta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0} .bandeja__total{margin-top:0} .bandeja__acciones{justify-content:stretch} .bandeja__acciones .boton--lleno{flex:1 1 auto} body:has(.bandeja:not([hidden])){padding-bottom:calc(172px + env(safe-area-inset-bottom))} } /* ========================================================================= v7 · 25-sep-2026 · LA BARRA DE RESTÓ360 Y EL CIERRE Arriba, fija desde la portada: la píldora «Restó360» (la misma de la web de Sumaq y de Anfitrión360: todas vuelven a Restó360) y «Nivel 2», que lleva a la web. La barra de categorías se clava debajo (top:var(--tope-h)) y el JS suma las dos en --barra-h, que es lo que usan los pines y el imán. Al final, «Quiero una carta así», la bajada y el orbital. ========================================================================= */ .tope{ position:fixed;top:0;left:0;right:0;z-index:25; height:var(--tope-h); display:flex;align-items:center;justify-content:space-between;gap:.5rem; padding:0 clamp(10px,3vw,28px); background:rgba(10,20,40,.78); -webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15); } @media (prefers-reduced-transparency:reduce){ .tope{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none} } /* La píldora es chica a la vista; el blanco de dedo mide 44 px (el ). */ .tope__demo{display:inline-flex;align-items:center;min-height:44px;padding:0 .2rem;color:var(--crema);text-decoration:none} .tope__demo span{ font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:rgba(237,234,227,.78); padding:.28rem .6rem;border:1px solid rgba(123,196,188,.4);border-radius:99px; transition:border-color .2s,color .2s; } /* «Nivel 2», chico: el teal se dibuja en un ::before de 30 px; el dedo tiene 44 */ .tope__nivel.boton{position:relative;z-index:0;background:none;min-height:44px;padding:0 .9rem; font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--tinta)} .tope__nivel.boton::before{content:'';position:absolute;inset:7px 0;z-index:-1;background:var(--teal);transition:background .18s ease} @media (hover:hover) and (pointer:fine){ .tope__demo:hover span{border-color:var(--teal-cl);color:var(--teal-cl)} .tope__nivel.boton:hover::before{background:var(--teal-cl)} } /* la portada no esconde su primera línea detrás de la barra */ .portada{padding-top:calc(var(--tope-h) + 16px)} .pie__cierre{ display:grid;justify-items:center;text-align:center;gap:.5rem; margin-top:clamp(36px,7vw,64px);padding-top:clamp(30px,6vw,52px); border-top:1px solid rgba(237,234,227,.12); } .pie__quiero.boton{min-height:48px;padding:0 1.6rem;text-decoration:none; font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase} .pie__bajada{font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,4.4vw,1.6rem);line-height:1.2;color:var(--teal-cl);margin-top:.5rem} .pie__orbital{display:block;width:108px;height:108px;margin-top:1rem} .pie__cierre .pie__credito{margin-top:.2rem} .pie__cierre .pie__credito a{display:inline-flex;align-items:center;min-height:44px;color:var(--brasa)} /* el pie entero va centrado: la nota de la casa, la acción y la firma forman un solo cierre */ .pie{text-align:center} .pie__nota{margin-inline:auto} /* La esquina izquierda es la de la web de Sumaq: «Sumaq» en la letra de la marca y la píldora al lado, con los mismos rellenos y el mismo alto de barra. */ .tope{padding:0 16px} .tope__casa{display:flex;align-items:center;gap:.4rem;min-width:0} .tope__marca{ display:inline-flex;align-items:center;min-height:44px;padding-right:.3rem; font-family:var(--display);font-size:1.6rem;line-height:1;color:var(--crema);letter-spacing:.01em;text-decoration:none; } .tope__demo{padding:0 .3rem} @media (min-width:1025px){ :root{--tope-h:64px} .tope{padding:0 clamp(1.6rem,3vw,2.6rem)} .tope__casa{gap:.8rem} .tope__nivel.boton{padding:0 1.2rem} } @media (max-width:374.98px){ .tope{padding-inline:10px} .tope__marca{font-size:1.32rem;padding-right:.1rem} .tope__demo{padding:0 .1rem} .tope__demo span{padding:.26rem .45rem;letter-spacing:.1em;font-size:10px} }