/* ========================================================================= Sumaq · la carta — v2 Restó 360 · Diseñado por Operaria 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: nombre, descripción, historia completa, sellos y precio. 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: rieles largos, capítulo pineado y el plato a pantalla. 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 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:118px; --cinta-h:190px; --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(--navy)} 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:9.5px;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:0;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{ 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(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)} .barra__cat.es-aqui{color:var(--crema);border-bottom-color:var(--brasa)} .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)} .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(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 tarjeta-plato ---------- */ .plato{ position:relative;flex:none; width:min(78vw,300px); border-radius:24px;overflow:hidden; background:var(--navy-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(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,.13); transform:translateY(-.04em); } .plato__velo{ position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,20,40,.20) 0%,rgba(10,20,40,.62) 42%,rgba(10,20,40,.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(10,20,40,.28) 46%,rgba(10,20,40,.82) 100%); } .plato--lamina .plato__inicial{color:rgba(237,234,227,.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(--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,.72);margin-top:.6em; } .plato__hist{ font-size:12.5px;line-height:1.55; color:rgba(237,234,227,.56);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;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(--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)} .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(237,234,227,.3); font-weight:600;font-size:13px; } /* ========================================================================= 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 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} /* ========================================================================= 2 · CON JS — los rieles y el verso Nada de acá agrega contenido: recoge y pone en movimiento lo que ya se veía. ========================================================================= */ 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} /* 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(52,152,145,.9),0 22px 48px rgba(10,20,40,.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(10,20,40,.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(237,234,227,.86)} .plato__sellos--todos{margin-top:auto;margin-bottom:0} /* ========================================================================= 3 · 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 y el que viene asoma transparente al costado. Se mueve con el scroll de la página, no con una barra. 3. el texto — mitad izquierda, centrado vertical. Solo palabras. No hay cinta abajo: la pista de la derecha ES el selector, y sacarla del suelo devolvió la pantalla completa al texto, que estaba corrido hacia abajo con una franja muerta encima. 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, pisando el «01 / 03» y dejando el precio debajo de la cinta. 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{padding-inline:clamp(28px,4vw,44px)} .barra__cat{font-size:10px;padding:0 18px;min-height:52px} .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{ /* 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: 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(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{ 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(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. Velo navy encima: la lámina tiene que sugerir el plato que falta, no competir con los que sí tienen foto. */ 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)} /* --- 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): 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(237,234,227,.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 .cinta__vacio{ position:absolute;z-index:3; left:clamp(28px,4vw,56px);top:50%;transform:translateY(-50%); width:min(46ch,38vw);padding:0; } /* 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 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{break-inside:avoid} }