/* ========================================================================= PLANTILLA V2 · la carta de un restorán — menu-resto Restó 360 · Diseñado por Operaria Esta hoja NO se edita a mano para cada cliente: la escribe el generador (`generador-v2.mjs`) reemplazando los marcadores dobles con los valores del dossier. Todo lo demás es la pieza, y es igual para todos los clientes. V2 sobre la v1 (27-ago-2026, construyendo Bar El Bajo): · Los rgba() de velos, telón, barra y sellos ya no llevan el navy de Sumaq quemado: se rellenan con tripletas RGB derivadas de los tokens del cliente (20,48,47, 239,234,224, 217,154,60, 46,125,116…). La sombra negra pura sigue siendo negra: eso es profundidad, no marca. · Dos gramáticas de contenido: `.seccion--capitulo` (riel + escena pineada, la de siempre) y `.seccion--lista` (la lista de bar compacta, para categorías grandes sin fotografía). El pin de escritorio queda acotado a los capítulos: una lista jamás se pinea, fluye. · «Libre de» tiene tokens propios (--libre/--libre-cl): en un cliente cuyo color de acción es rojo, pintar «sin gluten» con el color de acción confundía la promesa de seguridad con el botón de comprar. · Los hover de botón van a --acento, no a --accion-cl: la versión clara de la acción puede no aguantar el texto --sobre-accion encima (El Bajo: dorado bajo hueso). · Portada con wordmark oficial del cliente en imagen (en negativo por filtro: uso estándar de un monocromo, jamás un redibujo) y encuadre de portada tokenizado por orientación. CÓMO LEER ESTA HOJA. Hay tres estados y van en este orden: 1. BASE — lo que se ve SIN JavaScript, en cualquier ancho. Las secciones fluyen, las tarjetas se envuelven en grilla y muestran TODO. Este es el estado resuelto. Si algo falla, esto es lo que queda. 2. html.js — el JS confirmó que corre: las grillas se vuelven rieles con imán, la historia se recoge a dos líneas y aparece el verso. 3. .modo-web — además, el centinela #modo dijo que hay sitio para la gramática de web. Se llama `modo-web` y no `escena` porque esta clase vive en el : una llamada `.escena` matcheaba al propio elemento raíz y la regla base `.escena{display:none}` apagaba la página. El JS nunca habilita contenido, solo lo pone en movimiento. ========================================================================= */ :root{ --fondo:#14302F; --fondo-2:#1D423F; --tinta-clara:#EFEAE0; --accion:#2E7D74; --accion-cl:#86BDB4; --sobre-accion:#08211F; --acento:#D99A3C; --alergeno:#EDC9C0; --libre:#2E7D74; --libre-cl:#86BDB4; --display:'Fraunces',Georgia,serif; --sans:'Source Sans 3',-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:118px; --curva:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--fondo)} body{ font-family:var(--sans); background:var(--fondo); color:var(--tinta-clara); -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(--accion-cl);text-decoration:none} a:hover{color:var(--tinta-clara)} :focus-visible{outline:2px solid var(--accion-cl);outline-offset:3px;border-radius:4px} .saltar{ position:absolute;left:-9999px;top:0;z-index:99; padding:12px 18px;background:var(--accion);color:var(--sobre-accion); font-weight:600;font-size:14px; } .saltar:focus{left:8px;top:8px;color:var(--sobre-accion)} /* 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:9.5px;letter-spacing:.2em;text-transform:uppercase; color:rgba(239,234,224,.5); } .rotulo--acento{color:var(--accion-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:50% 50%; animation:portadaIn 14s ease-out forwards; } /* Ley 6: en retrato el recorte es severo y hay que decidirlo, no dejárselo al navegador. El encuadre por orientación viene del archivo de datos. */ @media (orientation:portrait){ .portada__foto{object-position:50% 50%} } @keyframes portadaIn{from{transform:scale(1.1)}to{transform:scale(1.01)}} .portada__velo{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(20,48,47,.72) 0%,rgba(20,48,47,.30) 34%,rgba(20,48,47,.86) 74%,var(--fondo) 100%), linear-gradient(90deg,rgba(20,48,47,.55),transparent 62%); } .portada__brillo{ position:absolute;left:-14%;bottom:-8%;width:72%;height:44%; background:radial-gradient(closest-side,rgba(217,154,60,.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; } /* El wordmark oficial como imagen. El negativo se hace con filtro —uso normal de un logo monocromo sobre fondo oscuro—, nunca redibujando el archivo. */ .portada__h1{margin:.34em 0 0;line-height:0;font-size:1rem} .portada__logo{ width:min(78vw,440px);height:auto; filter:invert(1) drop-shadow(0 6px 26px rgba(0,0,0,.4)); opacity:.97; } .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(239,234,224,.88);margin-top:.35em; } .portada__linea em{font-style:italic;color:var(--accion-cl)} .portada__lede{ font-size:clamp(13.5px,3.6vw,15.5px);line-height:1.62; color:rgba(239,234,224,.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(46,125,116,.55);background:rgba(46,125,116,.24); font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--accion-cl); } .portada__pista{position:relative;z-index:2;margin-top:1.6em} /* El pulso que respira. Es el único elemento animado en reposo de toda la página: marca que la mesa está abierta. */ .pulso{ position:relative;display:inline-flex;width:7px;height:7px;flex:none; } .pulso::before,.pulso::after{ content:'';position:absolute;border-radius:999px;background:var(--acento); } .pulso::before{inset:0;animation:pulsoLatido 3.4s ease-in-out infinite} .pulso::after{inset:-5px;opacity:.18;animation:pulsoHalo 3.4s ease-in-out infinite} @keyframes pulsoLatido{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}} @keyframes pulsoHalo{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:0;z-index:20; background:rgba(20,48,47,.88); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border-bottom:1px solid rgba(239,234,224,.13); } .barra__cats{ display:flex;gap:2px;overflow-x:auto; padding:0 clamp(10px,3vw,28px); 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:9.5px;letter-spacing:.16em;text-transform:uppercase; color:rgba(239,234,224,.56);white-space:nowrap; border-bottom:2px solid transparent; transition:color .2s ease,border-color .2s ease; } .barra__cat:hover{color:var(--tinta-clara)} .barra__cat.es-aqui{color:var(--tinta-clara);border-bottom-color:var(--acento)} /* Los grupos de la línea de secciones. En celular son separadores dentro de la misma tira que corre; en la gramática de web, el salto parte la línea y cada grupo se queda con la suya. */ .barra__grupo{ flex:none;display:flex;align-items:center; min-height:46px;padding:0 6px 0 16px; color:var(--accion-cl);opacity:.8; } .barra__salto{display: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(239,234,224,.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(239,234,224,.26); font-weight:600;font-size:12.5px;color:rgba(239,234,224,.86); white-space:nowrap; transition:background .18s ease,border-color .18s ease,color .18s ease; } .chip:hover{border-color:rgba(239,234,224,.5)} .chip[aria-pressed="true"]{background:var(--accion);border-color:var(--accion);color:var(--sobre-accion)} .barra__conteo{flex:none;white-space:nowrap} /* ========================================================================= SECCIONES — estado BASE Miden su contenido. Nada de 100dvh forzado: eso fabrica valles (ley 5). ========================================================================= */ .seccion{ position:relative; scroll-margin-top:var(--barra-h); padding:clamp(38px,7vw,64px) 0 clamp(10px,3vw,24px); } .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(239,234,224,.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 todos los 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(239,234,224,.8); } .cinta__vacio em{font-style:italic;color:var(--accion-cl)} /* ---------- la tarjeta-plato ---------- */ .plato{ position:relative;flex:none; width:min(78vw,300px); border-radius:24px;overflow:hidden; background:var(--fondo-2); isolation:isolate; transition:transform .34s var(--curva),opacity .3s ease,box-shadow .34s ease; } .plato__foto{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover; /* jamás contain: en retrato deja 74% de franja */ z-index:-2; } .plato__lamina{ position:absolute;inset:0;z-index:-2; display:grid;place-items:center; background: radial-gradient(120% 92% at 12% 106%,rgba(217,154,60,.5),transparent 62%), repeating-linear-gradient(115deg,rgba(239,234,224,.055) 0 2px,transparent 2px 11px), repeating-linear-gradient(-115deg,rgba(239,234,224,.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(239,234,224,.13); transform:translateY(-.04em); } .plato__velo{ position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(20,48,47,.20) 0%,rgba(20,48,47,.62) 42%,rgba(20,48,47,.96) 100%); } /* El velo existe para que el texto se lea sobre una FOTO. Sobre una lámina no hay nada que domar: aplicado igual apagaba el tejido y el brillo de brasa, y la tarjeta quedaba como un rectángulo vacío en vez de como una decisión. */ .plato--lamina .plato__velo{ background:linear-gradient(180deg,transparent 0%,rgba(20,48,47,.28) 46%,rgba(20,48,47,.82) 100%); } .plato--lamina .plato__inicial{color:rgba(239,234,224,.2)} .plato__cara{ position:relative; display:flex;flex-direction:column;justify-content:flex-end; min-height:min(112vw,430px); padding:clamp(16px,4vw,20px); } .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:8.5px;letter-spacing:.14em;text-transform:uppercase; white-space:nowrap; } .sello--contiene{background:rgba(237,201,192,.2);border:1px solid rgba(237,201,192,.45);color:var(--alergeno)} .sello--aji {background:rgba(217,154,60,.18); border:1px solid rgba(217,154,60,.5); color:var(--accion-cl)} .sello--libre {background:rgba(46,125,116,.22); border:1px solid rgba(46,125,116,.55); color:var(--libre-cl)} .sello--peso {background:rgba(239,234,224,.08);border:1px solid rgba(239,234,224,.24);color:rgba(239,234,224,.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(239,234,224,.72);margin-top:.6em; } .plato__hist{ font-size:12.5px;line-height:1.55; color:rgba(239,234,224,.56);margin-top:.6em; } .plato__nota{ font-size:12px;line-height:1.5;color:var(--accion-cl);margin-top:.6em; } .plato__pie{ display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:16px; } .plato__precio{font-weight:700;font-size:19px} .plato__add{ width:46px;height:46px;flex:none;border-radius:999px; background:var(--accion);color:var(--sobre-accion); 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(--acento);transform:scale(1.06)} .plato__add.es-puesto{background:var(--acento)} .plato__verso{display:none} .plato__cerrar{ margin-top:auto;align-self:flex-start; min-height:44px;display:flex;align-items:center;padding:0 18px; border-radius:999px;border:1px solid rgba(239,234,224,.3); font-weight:600;font-size:13px; } /* ========================================================================= LA LISTA DE BAR — `.seccion--lista` Para categorías grandes y sin fotografía: la pizarra del local, no un riel de huecos. Fluye siempre; jamás se pinea. El nombre de la fila NO es un encabezado (108 filas no son 108 capítulos, y el encabezado de la lista es el h2 de su categoría). ========================================================================= */ .lista{ list-style:none; padding:0 clamp(20px,5vw,56px); max-width:960px; } .fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 18px; align-items:start; padding:clamp(14px,3.4vw,20px) 0; border-bottom:1px solid rgba(239,234,224,.1); } .fila[hidden]{display:none} .fila__cab{min-width:0} .fila__nombre{ font-family:var(--display);font-weight:500; font-size:clamp(1.15rem,4vw,1.3rem);line-height:1.15; } .fila__desc{ font-size:12.5px;line-height:1.55; color:rgba(239,234,224,.66);margin-top:.35em;max-width:60ch; } .fila__desc--hist{color:rgba(239,234,224,.5)} /* El anexo: la cola en lista de un capítulo (lo que aún no tiene foto). Va pegado a su capítulo, sin cabeza propia. */ .seccion--anexo{padding-top:0} .fila__sellos{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6em} .fila__pie{display:flex;align-items:center;gap:12px;justify-content:flex-end} .fila__precio{font-weight:700;font-size:16px;white-space:nowrap} .fila__precio--aviso{ font-family:var(--mono);font-weight:400; font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--accion-cl); } .fila__add{ width:44px;height:44px;flex:none;border-radius:999px; background:var(--accion);color:var(--sobre-accion); font-size:20px;font-weight:600;line-height:1; display:grid;place-items:center; transition:transform .18s var(--curva),background .18s ease; } .fila__add:hover{background:var(--acento);transform:scale(1.06)} .fila__add.es-puesto{background:var(--acento)} /* Las variantes: cada opción con su precio y su agregar. Sin «desde». */ .fila__variantes{grid-column:1/-1;list-style:none;margin-top:4px} .variante{ display:grid;grid-template-columns:minmax(0,1fr) auto auto; align-items:center;gap:8px 14px; padding:7px 0; } .variante__txt{font-size:13px;line-height:1.45;color:rgba(239,234,224,.84)} .variante__precio{font-weight:700;font-size:14.5px;white-space:nowrap} /* Las mismas variantes, dentro de la tarjeta de capítulo. Nacieron el 7-sep-2026: sin esto, un plato en porción y grande obligaba a mandar su categoría entera a lista, aunque tuviera fotografía. */ .plato__variantes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px} .plato__variantes .variante{ padding:8px 0; border-top:1px solid rgba(239,234,224,.16); } .plato__variantes .variante__txt{font-size:14px;color:rgba(239,234,224,.92)} .plato__variantes .variante__precio{font-size:17px} .plato__add--chico{width:36px;height:36px;font-size:19px} /* ========================================================================= 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(20,48,47,.9); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); border-top:1px solid rgba(239,234,224,.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(239,234,224,.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(--accion);color:var(--sobre-accion)} .boton--lleno:hover{background:var(--acento)} .boton--hueco{border:1px solid rgba(239,234,224,.3);color:rgba(239,234,224,.86)} .boton--hueco:hover{border-color:rgba(239,234,224,.55)} /* ---------- pie ---------- */ .pie{ padding:clamp(44px,8vw,80px) clamp(20px,5vw,56px) clamp(120px,18vw,150px); border-top:1px solid rgba(239,234,224,.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(239,234,224,.55); margin-top:.8em;max-width:62ch; } .pie__nota strong{color:rgba(239,234,224,.78);font-weight:600} .pie__credito{margin-top:1.4em;font-family:var(--mono);font-size:11px;letter-spacing:.14em} /* ========================================================================= 2 · CON JS — los rieles y el verso Nada de acá agrega contenido: recoge y pone en movimiento lo que ya se veía. La lista de bar no cambia con JS: ya está resuelta. ========================================================================= */ html.js .cinta{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:clamp(14px,3vw,22px); /* el primero y el último también tienen que poder quedar al centro */ scroll-padding-inline:50%; } html.js .cinta::-webkit-scrollbar{display:none} html.js .plato{scroll-snap-align:center;cursor:pointer} /* La historia se recoge a dos líneas: la completa vive en el verso, a un toque. */ html.js .plato__hist{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden; } html.js .plato__nota{display:none} html.js .fila .plato__nota{display:block} /* en la lista no hay verso que la recoja */ /* El imán: la del centro crece, las vecinas se apagan. */ html.js .plato{transform:scale(.955);opacity:.6} html.js .plato.es-centro{ transform:scale(1);opacity:1; box-shadow:0 0 0 1px rgba(46,125,116,.9),0 22px 48px rgba(20,48,47,.6); } /* El verso: la historia entera sube sobre la foto, como se levanta el mantel. */ html.js .plato__verso{ position:absolute;inset:0;z-index:3; display:flex;flex-direction:column;gap:.7em; padding:clamp(16px,4vw,20px); background:rgba(20,48,47,.93); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transform:translateY(101%); transition:transform .42s var(--curva); overflow-y:auto; } html.js .plato__verso[hidden]{display:flex} /* el atributo es para el estado base */ html.js .plato.es-verso .plato__verso{transform:translateY(0)} .plato__versoTexto{font-size:13.5px;line-height:1.62;color:rgba(239,234,224,.86)} .plato__sellos--todos{margin-top:auto;margin-bottom:0} /* ========================================================================= 3 · GRAMÁTICA DE WEB — SOLO PARA CAPÍTULOS La escena, de atrás hacia adelante: 0. el campo — la foto del plato COMPLETA y centrada, a sangre. 1. el telón — el fondo del cliente, espeso y parejo: atmósfera de salón. 2. la pista — los platos en fila. El activo centrado en la mitad derecha. 3. el texto — mitad izquierda, centrado vertical. Solo palabras. 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. Un capítulo que no cabe no se pinea, fluye. Las listas de bar no entran acá: fluyen en cualquier gramática. ========================================================================= */ @media (min-width:900px) and (min-height:640px){ /* Lo único que hace este centinela es contestarle al JS. */ #modo{position:sticky} .barra__cats{padding-inline:clamp(28px,4vw,44px);flex-wrap:wrap;padding-block:3px} /* Una línea por grupo: el salto ocupa el ancho entero y no mide nada. Las filas son más bajas que la tira única de celular, porque ahora son varias. */ .barra__salto{display:block;flex-basis:100%;height:0} .barra__cat{font-size:10px;padding:0 16px;min-height:38px} .barra__grupo{min-height:38px} .barra__filtros{padding-inline:clamp(28px,4vw,44px);flex-wrap:nowrap} .barra__chips{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--capitulo{ /* 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 plano. */ html.modo-web .escena__campo.es-lamina{ background-image: repeating-linear-gradient(115deg,rgba(239,234,224,.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: el plato nítido es el de la pista, y si el fondo compite se lee como la misma imagen puesta dos veces. --- */ html.modo-web .escena__telon{ position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(96deg, rgba(20,48,47,.96) 0%, rgba(20,48,47,.93) 32%, rgba(20,48,47,.86) 58%, rgba(20,48,47,.83) 100%), linear-gradient(180deg, rgba(20,48,47,.72) 0%, transparent 20%, transparent 72%, rgba(20,48,47,.8) 100%); } /* --- 2 · la pista de platos --- */ html.modo-web .seccion--capitulo .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{ width:var(--carta);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; } /* 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. */ 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); } /* Toda la palabra vive a la izquierda: la tarjeta es la fotografía. */ html.modo-web .plato__cara, html.modo-web .plato__verso{display:none} html.modo-web .plato__velo{ background:linear-gradient(180deg,transparent 0%,rgba(20,48,47,.1) 62%,rgba(20,48,47,.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 gritaba más que cualquier fotografía de al lado. Velo del fondo encima: la lámina tiene que sugerir el plato que falta, no competir. */ html.modo-web .plato__lamina{ background-image: linear-gradient(0deg,rgba(20,48,47,.58),rgba(20,48,47,.58)), radial-gradient(110% 88% at 16% 104%,rgba(217,154,60,.42),transparent 64%), repeating-linear-gradient(115deg,rgba(239,234,224,.05) 0 2px,transparent 2px 15px), repeating-linear-gradient(-115deg,rgba(239,234,224,.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(239,234,224,.2)} /* En la pista, la tarjeta sin foto es solo tejido e inicial (la cara está escondida): el nombre va impreso en la lámina para que se lea como una decisión, no como una foto que falta. */ html.modo-web .plato--lamina::after{ content:attr(data-nom); position:absolute;left:0;right:0;bottom:clamp(16px,3.4vh,30px); padding:0 clamp(14px,2vw,26px); text-align:center; font-family:var(--display);font-weight:400; font-size:clamp(1.05rem,2.4vh,1.5rem);line-height:1.15; color:rgba(239,234,224,.82); } /* --- 3 · el texto: mitad izquierda, centrado vertical --- */ html.modo-web .seccion--capitulo .seccion__cabeza{ position:absolute;z-index:3;top:0;left:0; padding:clamp(16px,2.6vh,34px) 0 0 clamp(28px,4vw,56px); } /* UNA talla de h2 por ancho, para capítulos Y listas: dos h2 de tamaños distintos en la misma pantalla es exactamente lo que el piloto reprueba. */ html.modo-web .seccion h2{font-size:clamp(1.5rem,min(3vw,4vh),2.4rem)} html.modo-web .seccion--capitulo .seccion__pie{font-size:clamp(13px,1.7vh,14.5px);max-width:44ch;text-wrap:pretty} html.modo-web .seccion--capitulo .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): con clamps solo por vw, un portátil bajo revienta la escena. */ 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__hist{ font-size:clamp(13.5px,min(1.05vw,2vh),16.5px); line-height:1.62;color:rgba(239,234,224,.8); margin-top:clamp(.6em,1.6vh,1em); /* Si el alto aprieta, la historia se recorta antes que desbordar sobre el precio. Completa siempre está en la tarjeta y en la vista de celular. */ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden; } html.modo-web .escena__sellos{ display:flex;flex-wrap:wrap;gap:7px; margin-top:clamp(.8em,1.8vh,1.3em); } html.modo-web .escena__pie{ display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px; margin-top:clamp(1em,2.4vh,1.7em); } html.modo-web .escena__precio{font-weight:700;font-size:clamp(1.3rem,min(2.2vw,3.4vh),1.95rem)} /* El texto entra por el costado que corresponde al sentido del scroll. `--dir` lo pone el JS: +1 baja, -1 sube. La fila de platos no necesita animación porque ya viaja con el scroll. */ 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 .seccion--capitulo .cinta__vacio{ position:absolute;z-index:3; left:clamp(28px,4vw,56px);top:50%;transform:translateY(-50%); width:min(46ch,38vw);padding:0; } /* --- la lista de bar, con sitio: dos columnas --- */ .seccion--lista .lista{ columns:2;column-gap:clamp(40px,4.5vw,72px); max-width:1240px; } .fila{break-inside:avoid} /* 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(239,234,224,.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 JS no enciende .escena con reduced-motion, así que basta con devolver la cinta a la grilla del estado base: rieles quietos, todo legible de una. */ html.js .cinta{flex-wrap:wrap;overflow:visible;scroll-snap-type:none} html.js .plato{transform:none;opacity:1;cursor:auto} html.js .plato__hist{-webkit-line-clamp:unset;display:block;overflow:visible} html.js .plato__nota{display:block} html.js .plato__verso{display:none} .portada__foto{animation:none} } @media print{ .barra,.bandeja,.saltar,.portada__pista{display:none} body{background:#fff;color:#111} .plato,.fila{break-inside:avoid} } /* ══════════════════════════════════════════════════════════ el armador ═══ Injertado por arma.mjs. Hereda el color y la letra de la carta: es una sección más, no un widget pegado encima. */ .seccion--armador .lista{gap:0} .armador{list-style:none;padding:0 0 4px} .armador__base{margin:0 0 26px;font:400 15px/1.5 var(--sans);color:rgba(239,234,224,.72); display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline} .armador__desde{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; color:var(--acento);white-space:nowrap} .paso{margin:0 0 30px} .paso__rotulo{margin:0 0 3px;font:500 19px/1.25 var(--display);color:var(--tinta-clara); display:flex;align-items:baseline;gap:10px} .paso__n{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:23px;height:23px;border-radius:50%;background:rgba(217,154,60,.16); color:var(--acento);font:500 12px/1 var(--mono);transform:translateY(-1px)} .paso__ayuda{margin:0 0 13px 33px;font:400 13.5px/1.45 var(--sans);color:rgba(239,234,224,.58)} .paso__ops{display:flex;flex-wrap:wrap;gap:9px;margin-left:33px} .op{appearance:none;cursor:pointer;text-align:left; padding:10px 15px;border-radius:13px; border:1px solid rgba(134,189,180,.30);background:rgba(134,189,180,.06); color:var(--tinta-clara);font:400 15px/1.3 var(--sans); transition:background .18s var(--curva),border-color .18s var(--curva),transform .18s var(--curva)} .op:hover:not(:disabled){background:rgba(134,189,180,.13);border-color:rgba(134,189,180,.52)} .op:active:not(:disabled){transform:scale(.97)} .op[aria-pressed="true"]{background:var(--accion);border-color:var(--accion-cl); color:#fff;box-shadow:0 6px 20px rgba(46,125,116,.34)} .op__nom{display:block} .op__nota{display:block;margin-top:2px;font:400 12px/1.3 var(--sans);opacity:.62} .op--no{cursor:not-allowed;opacity:.42;border-style:dashed} .op--no .op__nom{text-decoration:line-through;text-decoration-thickness:1px} .op__no{display:block;margin-top:2px;font:500 10.5px/1 var(--mono);letter-spacing:.09em; text-transform:uppercase;color:var(--acento)} .fila--tuya{border-top:1px solid rgba(134,189,180,.22);margin-top:6px;padding-top:20px; display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between} .fila--tuya .fila__nombre{font-family:var(--display);font-size:20px;line-height:1.25} .tuya__cierre{display:flex;align-items:center;gap:14px;margin-left:auto} .tuya__precio{font:500 21px/1 var(--mono);color:var(--acento);white-space:nowrap} .tuya__add:disabled{opacity:.38;cursor:not-allowed;box-shadow:none} @media (max-width:560px){ .paso__ayuda,.paso__ops{margin-left:0} .fila--tuya{flex-direction:column;align-items:stretch} .tuya__cierre{margin-left:0;justify-content:space-between} .tuya__add{flex:1;margin-left:14px} } @media (prefers-reduced-motion:reduce){ .op{transition:none} .op:active:not(:disabled){transform:none} } /* ═════════════════════════════════════════════════════ los tres idiomas ═══ Injertado por arma.mjs. El claim no se traduce: viaja en español con una glosa debajo. */ .idiomas{display:flex;gap:3px;flex:none;align-items:center} .idioma{appearance:none;cursor:pointer; padding:6px 10px;border-radius:9px;border:1px solid transparent;background:none; color:rgba(239,234,224,.58);font:500 12px/1 var(--mono);letter-spacing:.09em; transition:color .18s var(--curva),background .18s var(--curva)} .idioma:hover{color:var(--tinta-clara);background:rgba(239,234,224,.09)} .idioma[aria-pressed="true"]{color:var(--sobre-accion);background:var(--acento)} .idiomas--portada{position:absolute;top:clamp(14px,3vw,26px);right:clamp(12px,3vw,28px);z-index:3; padding:4px;border-radius:13px;background:rgba(8,33,31,.42); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .idiomas--barra{padding:0 clamp(10px,3vw,28px) 6px;justify-content:flex-end} .portada__glosa{margin:6px 0 0;font:400 14.5px/1.4 var(--sans); color:rgba(239,234,224,.62);font-style:italic} @media (prefers-reduced-motion:reduce){ .idioma{transition:none} }