/* ═══════════════════════════════════════════════════════════════════════════ Restó360 · Landing comercial V1 — hoja v3 QUÉ CAMBIÓ EN v3 (26-ago-2026, brief aprobado por Francisco) · Sale la aberración operativa: es un mecanismo de la casa madre y metido acá rompe el mundo propio de la landing. Sale también «cómo funciona» como capítulo aparte: su hilo de siete estaciones pasa a ser el revelado del demo, donde se enciende con lo que pasó en TU conversación. · Entran dos capítulos: el contador de tiempo (7) y la mesa (8), que es el demo jugable y el clímax de la pieza. · Ningún campo petrol, crema ni rosa. Todo el pulso en el eje frío del sistema, con `--navy-mid #1D396D` (token `--op-navy-mid` del DS) como escalón final antes del destello. · El rebelde pasa a ser el naranjo de Sumaq `#ED5E22`, que es lo que usan las dos cartas del handoff. La divergencia con el expediente (que declara `#C0552E`) está encolada con evidencia en canon/PENDIENTES/2026-08-26-rebelderesto.md Paleta y tipografía: expediente/03-identidad-visual.md (Do + Iris). QUÉ CAMBIÓ EN v2 (26-ago-2026, encargo de Francisco) · El pulso entero se queda en el registro Flow: el suelo nunca sale del eje frío (navy → navy-alto → navy-halo → petrol) y la luz que el canon pide («la pieza avanza hacia las superficies claras») entra por SUPERFICIE, no por campo — la pantalla del teléfono, el panel de los medidores, la losa de la aberración, y la brasa como destello al pie. Ninguna sección cae de la luz a la oscuridad, que es lo que la ley prohíbe. · Cap. 3 · el cliente: la carta se filtra dentro del teléfono, que es el escenario que manda la identidad visual §5.6. Antes era un panel flotando. · Cap. 4 · los meseros: la foto pasa a ser el suelo del capítulo y las ocho propiedades dejan de ser viñetas: son un pliego numerado. · Cap. 6 · los territorios: tarjetas altas sobre panel navy, con la foto usada de verdad y su encuadre decidido una por una. Arquitectura de escena: landing-pro · resources/leyes.md. LAS SEIS LEYES, y dónde vive cada una en esta hoja: 1 · ningún sticky más alto que la pantalla → .cap__pin (100dvh o menos) 2 · el riel por fuera, el sticky por dentro → .cap--riel > .cap__pin 3 · UN solo breakpoint: 1025px → un único @media de layout 4 · el CSS manda y el JS obedece → el JS lee position del pin 5 · los capítulos miden su contenido → sin min-height en lectura 6 · en vertical, cover con object-position → cada foto decide su encuadre ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* base = sistema Operaria (tokens.css del Design System) */ --navy-noche:#080E1C; --navy:#132649; --navy-alto:#15294A; --navy-halo:#16335A; --navy-mid:#1D396D; /* --op-navy-mid del Design System */ --petrol:#1F5B57; /* ya NO es campo: solo superficie (cabecera de chat, burbuja) */ --teal:#349891; --teal-claro:#7BC4BC; /* --op-h-teal-aliento */ --navy-carta:#0A1428; /* el fondo de pantalla de las cartas de Sumaq */ --off:#EDEAE3; --crema:#F0E4D2; /* irrupción = la brasa, rebeldía nombrada de la línea. Acento, nunca campo. v3 · el naranjo de Sumaq, que es lo que usan sus dos cartas y el mockup. */ --brasa:#ED5E22; /* --op-naranjo */ --brasa-clara:#F0883C; /* --op-naranjo-claro */ --brasa-honda:#E2652A; /* --op-naranjo-deep */ --ocre:#D49A45; --rosa-piel:#EDC9C0; /* solo pastillas de alérgenos, como en la carta de Sumaq */ --oliva:#6B7A3A; --serif:'Cormorant Garamond', Georgia, serif; --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono:'Space Mono', ui-monospace, Menlo, Consolas, monospace; /* medida con `piloto medir`, no supuesta. La nav va fixed: si fuera sticky compartiría el borde top:0 con los pines y les comería sus primeros px. */ /* Cuánto se monta el pie dentro del cuadro de la mesa. Una sola declaración para dos reglas: el relleno inferior del capítulo lo reserva y el pie lo sube. No es un número a ojo: es la suma de las piezas del pie —orbital, hueco, crédito, relleno— más un dedo de aire, así que sigue calzando si alguna cambia. Con un clamp por vh se pasaba 7px a 900 y 22 a 720. */ --pie-monta:calc(108px + 1rem + 1.75rem + clamp(1.6rem, 4vh, 2.6rem) + 1.2rem); --nav-h:64px; --aire:clamp(1.4rem, 4vw, 3.4rem); --col:min(1240px, 92vw); } *,*::before,*::after{ box-sizing:border-box } /* scroll-behavior:auto — `smooth` interpola por su cuenta y le pelea al scrub; además rompe toda medición automatizada (un scrollTo mide a mitad de camino). */ html{ scroll-behavior:auto; -webkit-text-size-adjust:100% } body{ margin:0; /* el suelo de la página es la noche del hero: si el pie se pasa de su sitio, o el visitante rebota el scroll, lo que asoma es noche y no una franja azul */ background:var(--navy-noche); color:var(--off); font-family:var(--sans); font-size:clamp(.95rem, min(1.12vw, 1.5vh), 1.06rem); line-height:1.62; overflow-x:hidden; } img,svg{ max-width:100% } img{ height:auto } /* height:auto NO es opcional: el atributo height actúa como CSS de baja prioridad y estira */ a{ color:inherit } ul,ol{ margin:0; padding:0; list-style:none } p{ margin:0 } .saltar{ position:absolute; left:-9999px; top:0; z-index:200; /* tinta oscura sobre el naranjo, como el resto de los botones: con tinta clara el enlace de salto daba 2,81:1 */ background:var(--brasa); color:var(--navy-noche); padding:.7rem 1.1rem; font-family:var(--mono); font-size:.78rem; } .saltar:focus{ left:.6rem; top:.6rem } /* El foco tiene que verse. Sobre estos suelos el contorno por defecto del navegador desaparece, y toda la página se recorre con teclado: el demo de la mesa se juega a punta de botones. */ :focus-visible{ outline:2px solid var(--brasa); outline-offset:3px; border-radius:2px; } .btn:focus-visible, .opcion:focus-visible{ outline-offset:4px } input[type="range"]:focus-visible{ outline-offset:6px } /* ── UNA SOLA ESCALA POR ROL ────────────────────────────────────────────── El defecto que aparece solo es que cada capítulo declare su propio clamp y los h2 terminen midiendo entre 51 y 64px. Una regla, no cinco. Los tres miden también por vh: si solo midieran por vw, un portátil bajo revienta el pin (ley 1). */ h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:500; letter-spacing:.004em } h1{ font-size:clamp(2.35rem, min(6.4vw, 8vh), 5rem); line-height:1.03 } h2{ font-size:clamp(1.85rem, min(4.4vw, 5.2vh), 3.3rem); line-height:1.07 } h3{ font-size:clamp(1.08rem, min(1.9vw, 2.1vh), 1.42rem); line-height:1.2 } h1 em, h2 em{ font-style:italic; color:var(--brasa-clara) } .rotulo{ font-family:var(--mono); font-weight:700; font-size:clamp(.6rem, min(.95vw, 1.15vh), .72rem); letter-spacing:.2em; text-transform:uppercase; color:var(--ocre); margin-bottom:.9rem; } .bajada{ max-width:44ch; font-size:1.06em; color:rgba(237,234,227,.82) } /* la línea suelta bajo un título es serif, no sans (una sola voz por rol) */ .suelta{ font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem, min(2.1vw, 2.5vh), 1.6rem); line-height:1.28; color:var(--brasa-clara); max-width:32ch; margin-top:.9rem; text-shadow:0 1px 8px rgba(8,14,28,.75); /* en meseros y cliente va sobre foto */ } /* ── BOTONES ───────────────────────────────────────────────────────────── */ .acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem } .acciones--centro{ justify-content:center } .btn{ display:inline-block; text-decoration:none; font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.92rem 1.5rem; border:1px solid transparent; transition:background .22s ease, color .22s ease, border-color .22s ease; } /* Tinta oscura sobre el naranjo, no clara. Medido: #EDEAE3 sobre #ED5E22 da 2,81 de contraste y reprueba WCAG hasta para texto grande; #080E1C da 5,71. Es además lo que hace la carta de Sumaq con su botón «+» (fondo #349891, tinta #08211F): el acento lleva tinta oscura. */ .btn--brasa{ background:var(--brasa); color:var(--navy-noche); border-color:var(--brasa) } .btn--brasa:hover{ background:var(--brasa-clara); border-color:var(--brasa-clara) } .btn--linea{ border-color:rgba(237,234,227,.42); color:var(--off) } .btn--linea:hover{ border-color:var(--off); background:rgba(237,234,227,.08) } .btn--grande{ padding:1.15rem 2.2rem; font-size:.86rem } /* ── NAV ───────────────────────────────────────────────────────────────── */ .nav{ position:fixed; inset:0 0 auto 0; z-index:90; height:var(--nav-h); display:flex; align-items:center; gap:1.6rem; padding:0 clamp(1rem, 3.4vw, 2.4rem); background:transparent; transition:background .3s ease, border-color .3s ease; border-bottom:1px solid transparent; will-change:transform; transform:translateZ(0); /* la única capa promovida */ } .nav.is-posada{ background:rgba(8,14,28,.9); backdrop-filter:blur(10px); border-bottom-color:rgba(237,234,227,.1) } .nav__marca{ font-family:var(--serif); font-size:1.24rem; font-weight:600; text-decoration:none; line-height:1; display:flex; flex-direction:column; gap:.18rem; } .nav__casa{ font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; opacity:.62 } .nav__links{ display:none; gap:1.4rem; margin-left:auto } .nav__links a{ font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; opacity:.72 } .nav__links a:hover{ opacity:1; color:var(--ocre) } .nav__cta{ margin-left:auto; font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; border:1px solid currentColor; padding:.5rem .95rem; } /* ── EL PATRÓN DE CAPÍTULO ───────────────────────────────────────────────── Ley 2: el riel por fuera, el sticky por dentro. Nunca .cap{position:sticky}. Ley 5: sin min-height forzado — un capítulo de texto mide lo que dice. Ley 4: el estado por defecto es el seguro, o sea APILADO. El pin entra por media query y el JS lo consulta, no lo replica. */ .cap{ position:relative; padding:calc(var(--nav-h) + var(--aire)) 0 var(--aire) } .cap--sangre{ padding:0 } .cap__pin{ position:static; width:var(--col); margin:0 auto } .cap--sangre .cap__pin{ width:100%; margin:0 } /* EL PULSO, todo en registro Flow. Cada suelo es igual o más luminoso que el anterior — nunca al revés, que es lo único que la ley prohíbe. La luz que el canon pide entra por superficie (la pantalla del teléfono, el panel de los medidores, la losa de la cita) y culmina en el destello de brasa del cierre. */ #hero{ background:var(--navy-noche) } #noche{ background:var(--navy) } #cliente{ background:var(--navy) } #meseros{ background:var(--navy-alto) } #administrador{ background:var(--navy-alto) } #restaurante{ background:var(--navy-halo) } #tiempo{ background:var(--navy-halo) } /* --navy-mid se probó como campo en la mesa y el cierre: se lee azul rey, borra la escena y rompe el registro nocturno que sostiene toda la pieza. Queda como SUPERFICIE (bordes, paneles) y el suelo se mantiene en el halo. El pulso no cae —halo → halo es plano, no descendente— y quien sube es la brasa, que es lo que el canon pide como destello final. */ #mesa{ background:var(--navy-halo) } /* La entrada a la mesa era un filo de brasa de 3px: bloque sólido, no degradado, por la nota de canon del 6-jun-2026 —«el gradient suave colapsa la marca en wellness corporativo»—. Francisco pidió transición (26-ago-2026) y se hace con el propio navy del capítulo anterior disolviéndose en la noche de la foto, NO con un lavado claro: el registro nocturno se sostiene y la nota de canon sigue cubierta en lo que le importa. La brasa se conserva entera en el destello de la firma, al pie del mismo capítulo. */ /* ═══════════ 1 · HERO ═══════════ */ .hero__pin{ position:relative; display:grid; align-items:end; min-height:100dvh; overflow:hidden } .hero__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; /* ley 6: la posición se decide por escena. En retrato hay que traer el plato al cuadro; en horizontal el plato ya entra y manda la profundidad. */ object-position:72% 74%; } .hero__velo{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(8,14,28,.94) 6%, rgba(8,14,28,.55) 46%, rgba(8,14,28,.34) 100%), linear-gradient(90deg, rgba(8,14,28,.82), rgba(8,14,28,.12) 62%); } .hero__cuerpo{ position:relative; width:var(--col); margin:0 auto; padding:0 0 clamp(4.4rem, 12vh, 7.5rem); max-width:100%; } .hero__cuerpo h1{ max-width:15ch } .hero__pie{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(1.1rem, 3vh, 2rem); font-family:var(--mono); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(237,234,227,.72); text-shadow:0 1px 6px rgba(8,14,28,.9); /* va sobre foto: el peor píxel manda */ } /* El motivo de la línea: la retícula del QR que se afloja y se vuelve conversación. Va POR TIEMPO, no con el scroll — la coreografía va con el tiempo, la secuencia va con el dedo (rendimiento.md). */ .motivo{ display:none } .motivo__grilla{ --n:13; display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:2px; width:clamp(160px, min(15vw, 21vh), 232px); aspect-ratio:1; } .motivo__celda{ background:transparent } .motivo__celda.on{ background:rgba(237,234,227,.9) } .motivo__celda.warm{ background:var(--brasa) } /* la burbuja de conversación en la que se convierte la esquina del código */ .motivo__burbuja{ position:absolute; right:-6%; bottom:-8%; width:56%; aspect-ratio:1.5; background:var(--brasa); border-radius:14px 14px 2px 14px; display:flex; align-items:center; justify-content:center; gap:7px; opacity:0; transform:scale(.86); transform-origin:100% 100%; box-shadow:0 12px 34px rgba(8,14,28,.55); } .motivo__burbuja i{ width:7px; height:7px; border-radius:50%; background:rgba(237,234,227,.92) } /* ═══════════ 2 · UNA NOCHE ═══════════ */ .noche__pin{ position:relative; min-height:100dvh; overflow:hidden; display:grid } .noche__escena{ position:absolute; inset:0; overflow:hidden } .noche__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; } .noche__foto.is-on{ opacity:1 } /* ley 6: encuadre decidido escena por escena, no el 50% 50% del navegador. Ocho tiempos, ocho fotos, ocho encuadres: antes cuatro fotos cubrían los ocho momentos y el primer tercio del capítulo no cambiaba de imagen. */ .noche__foto[data-escena="0"]{ object-position:40% 72% } /* la mano y el teléfono */ .noche__foto[data-escena="1"]{ object-position:50% 34% } /* la cara del comensal */ .noche__foto[data-escena="2"]{ object-position:50% 48% } /* el plato, centrado en su loza */ .noche__foto[data-escena="3"]{ object-position:52% 46% } /* el pase de cocina */ .noche__foto[data-escena="4"]{ object-position:50% 30% } /* el cóctel en la barra */ .noche__foto[data-escena="5"]{ object-position:36% 44% } /* el mesero en la mesa */ .noche__foto[data-escena="6"]{ object-position:52% 46% } /* la mesa, no el techo */ .noche__foto[data-escena="7"]{ object-position:50% 44% } /* las copas del brindis */ .noche__velo{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(8,14,28,.9) 4%, rgba(8,14,28,.42) 55%, rgba(8,14,28,.5) 100%), linear-gradient(90deg, rgba(8,14,28,.9), rgba(8,14,28,.16) 66%), /* la orilla derecha también se vela: ahí vive la capa de sala, y con una escena clara —la barra, el brindis— el mono de .hito se perdía */ linear-gradient(270deg, rgba(8,14,28,.5), rgba(8,14,28,0) 32%); } .noche__marco{ position:relative; width:var(--col); margin:0 auto; padding:calc(var(--nav-h) + var(--aire)) 0 var(--aire); align-self:center; } .noche__intro{ margin-bottom:clamp(1.2rem, 3vh, 2.2rem) } .noche__intro h2{ max-width:16ch } .linea{ position:relative; display:grid; gap:.55rem; max-width:56ch } .beat{ display:grid; grid-template-columns:auto 1fr; gap:.2rem .95rem; align-items:baseline; transition:opacity .35s ease; } .beat__hora{ font-family:var(--mono); font-weight:700; font-size:.82rem; color:var(--ocre); letter-spacing:.04em; } .beat__dice{ font-size:1.02em } .beat__detalle{ grid-column:2; font-size:.94em; line-height:1.5; color:rgba(237,234,227,.86); border-left:2px solid var(--brasa); padding:.5rem .9rem; background:rgba(8,14,28,.5); } .beat__detalle[data-voz="sala"]{ font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; border-left-color:var(--teal); color:var(--teal); text-transform:uppercase; } .beat__detalle[data-voz="comensal"]{ border-left-color:var(--ocre) } /* el hueco fijo del momento activo. Vacío no existe: sin pin, el detalle de cada tiempo se lee dentro de su propio beat y contar dos veces sobraría. */ .noche__burbuja{ width:fit-content; max-width:52ch; font-size:.95em; line-height:1.5; color:rgba(237,234,227,.9); border-left:3px solid var(--brasa); padding:.75rem 1rem; background:rgba(8,14,28,.55); } .noche__burbuja:empty{ display:none } .noche__burbuja[data-voz="sala"]{ font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase; border-left-color:var(--teal); color:var(--teal); } .noche__burbuja[data-voz="comensal"]{ border-left-color:var(--ocre) } /* La capa de sala. Apilada es una lista más; pineada vive sobre la escena, a la derecha, y se acumula con la noche. */ .sala__rot{ font-family:var(--mono); font-weight:700; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ocre); margin-top:.9rem; margin-bottom:.5rem; } .sala{ display:grid; gap:.32rem; margin-top:.4rem } .hito{ display:grid; grid-template-columns:3.6rem minmax(0,1fr); gap:.6rem; align-items:baseline; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:rgba(237,234,227,.62); } .hito__h{ color:var(--ocre) } .noche__remate{ font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem, min(2.3vw, 2.8vh), 1.85rem); line-height:1.24; color:var(--off); max-width:26ch; margin-top:clamp(1.2rem, 3vh, 2rem); border-top:1px solid rgba(212,154,69,.45); padding-top:1rem; } /* ═══════════ 3 · EL CLIENTE ═══════════ El escenario de la línea es el teléfono (identidad visual §5.6: «ahí vive el producto»). En v1 la carta era un panel claro flotando sobre un campo plano y el capítulo —el que hay que vender— se caía. Acá la carta se filtra DENTRO del chat, sobre la escena de la mesa. */ .cliente__pin{ position:relative; min-height:100dvh; overflow:hidden; display:grid } .cliente__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:46% 34%; /* las caras, no el techo */ } .cliente__velo{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(8,14,28,.92) 4%, rgba(8,14,28,.5) 56%, rgba(8,14,28,.62) 100%), linear-gradient(90deg, rgba(8,14,28,.93), rgba(8,14,28,.26) 58%); } .cliente__marco{ position:relative; width:var(--col); margin:0 auto; align-self:center; padding:calc(var(--nav-h) + min(var(--aire), 2.4vh)) 0 min(var(--aire), 2.4vh); min-height:0; display:grid; gap:clamp(1.6rem, 4vw, 3rem); } .cliente__dice h2{ max-width:13ch } /* Las nueve cosas que puede hacer, en tres actos. Nueve viñetas sueltas se leen como una lista de funciones; en tres actos se leen como el arco de la mesa: llegar, elegir, cerrar. */ .poderes{ display:grid; gap:.85rem; margin-top:clamp(1.1rem, 3vh, 1.9rem); max-width:48ch } .poderes li{ display:grid; gap:.28rem; border-top:1px solid rgba(212,154,69,.3); padding-top:.6rem } .poderes__rot{ font-family:var(--mono); font-weight:700; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ocre); } .poderes__q{ font-size:.95em; line-height:1.5; color:rgba(237,234,227,.87) } /* ── EL TELÉFONO ───────────────────────────────────────────────────────── COPIA DERIVADA del editor de mockups de la casa · apps.operaria.cl/mupp (repo Operaria/apps · carpeta mupp). Van verbatim las medidas del chasis (412×870, radio 56, padding 11), la pantalla (390×844), la isla (118×33), la cabecera (62px), los globos (radio 9, 15.5px, máx 80%) y sobre todo LOS COLORES DEL CANAL —fondo #0b141a, barra #161f26, entrante #202c33, saliente #005c4b—, que es lo que hace que se lea como WhatsApp y no como «un chat». Lo propio de esta pieza es el contenido de la conversación y la tarjeta de carta que va dentro de un globo entrante. Si la fuente cambiara, la cascada cross-repo es de Up. ───────────────────────────────────────────────────────────────────────── */ .cliente__muestra{ display:grid; gap:.9rem; justify-items:center; align-content:center; min-height:0 } .ph-scope{ --bg:#0b141a; --bar:#161f26; --in:#202c33; --out:#005c4b; --txt:#e9edef; --txt2:#8696a0; --sys:#a7c4b5; --pill:#182229; } .ph-scope *{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased } /* El chasis se escala para caber en el pin sin deformarse: la geometría del teléfono es la de un teléfono de verdad y no se estira, se achica entera. El JS afina --esc midiendo; este valor por defecto es el que cabe en el pin más bajo que la pieza admite (656px), para que sin JS igual entre. */ .fono{ --esc:.70; width:calc(412px * var(--esc)); height:calc(870px * var(--esc)) } .fono .ph-scope{ transform:scale(var(--esc)); transform-origin:top left; width:412px; height:870px } /* El chasis de la fuente es negro sobre claro. Acá el fondo también es oscuro y el teléfono desaparecía: se leía un rectángulo de chat flotando, no un aparato. El canto de luz y el halo son lo que le devuelven el borde; el contenido de adentro sigue siendo el de la fuente. */ .device{ position:relative; width:412px; height:870px; background:#0a0a0c; border-radius:56px; padding:11px; box-shadow: inset 0 0 0 1px rgba(237,234,227,.16), 0 0 0 1px rgba(0,0,0,.6), 0 2px 0 rgba(237,234,227,.07), 0 44px 90px rgba(0,0,0,.62); } .island{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:118px; height:33px; background:#000; border-radius:20px; z-index:30; } .phone{ display:flex; flex-direction:column; height:844px; width:390px; position:relative; overflow:hidden; background:var(--bg); color:var(--txt); border-radius:2px; font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif; } .status{ padding-top:6px; display:flex; align-items:center; justify-content:space-between; padding-inline:26px; height:44px } .time{ display:flex; align-items:center; gap:7px; font-size:17px; font-weight:600 } .sysicons{ display:flex; align-items:center; gap:7px } .bars{ display:flex; align-items:flex-end; gap:2px; height:12px } .bars i{ width:3px; border-radius:1px; background:#3b454c } .bars i.on{ background:#fff } .bars i:nth-child(1){ height:5px } .bars i:nth-child(2){ height:7.5px } .bars i:nth-child(3){ height:9.5px } .bars i:nth-child(4){ height:12px } .batt{ display:flex; align-items:center; gap:4px; font-size:13px; font-weight:600 } .battglyph{ width:25px; height:13px; border:1.4px solid #fff; border-radius:4px; position:relative; padding:1.5px } .battglyph::after{ content:""; position:absolute; right:-3px; top:3.5px; width:2px; height:5px; background:#fff; border-radius:0 1px 1px 0; opacity:.7 } .battfill{ height:100%; background:#fff; border-radius:2px } .header{ height:62px; display:flex; align-items:center; gap:10px; padding:0 14px; background:var(--bar); flex:0 0 auto } .back{ font-size:26px; color:#e9edef; font-weight:300; line-height:1 } .avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 46%; background:#7a4a2e; flex:0 0 auto } .hmeta{ display:flex; flex-direction:column; line-height:1.15 } .hname{ display:flex; align-items:center; gap:5px; font-size:17px; font-weight:600 } .hsub{ font-size:13px; color:var(--txt2) } .verified{ width:15px; height:15px } .chat{ flex:1; position:relative; overflow:hidden; background:var(--bg) } .msgs{ position:absolute; inset:0; padding:14px 14px 8px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; scrollbar-width:thin; } /* La conversación se apoya abajo, como en el teléfono de verdad: el demo empieza con dos mensajes y dejaba media pantalla de vacío sobre la barra. Va por `margin-top:auto` en el primer hijo y NO por `justify-content:flex-end`, que en un contenedor con scroll recorta el tope del contenido cuando pasa de alto y deja mensajes inalcanzables. */ .msgs > :first-child{ margin-top:auto } .pill{ align-self:center; background:var(--pill); color:#cfd9de; font-size:12.5px; padding:6px 12px; border-radius:8px; margin:6px 0; font-weight:500 } .mrow{ display:flex; width:100% } .mrow.in{ justify-content:flex-start } .mrow.out{ justify-content:flex-end } .bub{ max-width:80%; padding:7px 9px 8px 10px; border-radius:9px; font-size:15.5px; line-height:1.32; position:relative } .in .bub{ background:var(--in); border-top-left-radius:2px } .out .bub{ background:var(--out); border-top-right-radius:2px } .meta{ float:right; margin:6px 0 -2px 10px; font-size:11px; color:#ffffff80; display:flex; align-items:center; gap:3px; line-height:1 } .check{ width:16px; height:11px } .inputbar{ height:56px; display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--bg); flex:0 0 auto } .field{ flex:1; height:40px; background:#202c33; border-radius:22px } .iconbtn{ width:24px; height:24px; flex:0 0 auto } /* la tarjeta de carta va DENTRO de un globo entrante: es un mensaje, no un panel aparte. Por eso se le suelta el 80% y se le da su propio aire. */ .bub--carta{ max-width:97%; padding:9px 9px 10px 10px } .carta__rot{ font-family:var(--mono); font-weight:700; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sys); margin-bottom:8px; } .carta__chips{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px } .chip{ font-family:var(--mono); font-size:8.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:3px 7px; border-radius:999px; background:var(--brasa); color:var(--navy-noche); transition:background .3s ease, color .3s ease, box-shadow .3s ease; } /* molde editorial de la carta de Sumaq: nombre en serif, precio en sans pesado a la derecha, pastillas de alérgenos en rosa piel debajo */ .carta{ display:grid; gap:1px; list-style:none } .plato{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px .6rem; align-items:baseline; padding:3px 4px; border-radius:5px; transition:opacity .38s ease, background .38s ease; } .plato__n{ font-family:var(--serif); font-size:15px; line-height:1.24; color:var(--txt) } .plato__p{ font-family:var(--sans); font-weight:700; font-size:11px; color:rgba(233,237,239,.72) } .plato__tags{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:3px; margin-top:3px } .tag{ font-family:var(--mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; padding:2px 6px; border-radius:999px; background:rgba(237,201,192,.18); border:1px solid rgba(237,201,192,.42); color:var(--rosa-piel); } .tag--aji{ background:rgba(237,94,34,.2); border-color:rgba(237,94,34,.6); color:#F5A867 } /* la pastilla que avisa, no la que tranquiliza: callar el gluten en el único plato que lo lleva, en la pantalla que presume de filtrar alérgenos, era una omisión con consecuencias */ .tag--aviso{ background:rgba(212,154,69,.16); border-color:rgba(212,154,69,.55); color:var(--ocre) } /* ESTADO POR DEFECTO = RESUELTO. Sin JS, sin pin, en vertical o con reduced-motion, lo que queda en pantalla es la respuesta: la carta ya filtrada. El JS retrocede la escena para poder contarla (lecciones.md). */ .plato[data-va="no"]{ opacity:.55 } .plato[data-va="no"] .plato__n{ text-decoration:line-through; text-decoration-color:var(--brasa) } .plato[data-va="si"]{ background:rgba(237,94,34,.13) } .carta__pie{ margin-top:8px; padding-top:7px; border-top:1px solid rgba(233,237,239,.14); font-family:var(--mono); font-size:9.5px; line-height:1.55; color:rgba(233,237,239,.62); } .pantalla__cuenta{ color:#F5A867; font-weight:700 } /* el único enlace externo del capítulo: la carta viva de Sumaq, que está en vivo */ .cliente__enlace{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase } .cliente__enlace a{ display:inline-block; color:var(--ocre); text-decoration:none; border-bottom:1px solid rgba(212,154,69,.5); padding:.55rem 0 .3rem } .cliente__enlace a:hover{ color:var(--brasa-clara); border-bottom-color:var(--brasa-clara) } .cliente__enlace a::after{ content:' →' } /* ═══════════ 4 · LOS MESEROS ═══════════ La foto es el suelo del capítulo, no una franja apretada bajo una columna de viñetas. Y las ocho propiedades se leen como pliego numerado. */ .meseros__pin{ position:relative; min-height:100dvh; overflow:hidden; display:grid } .meseros__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; /* la cara del mesero, no las lámparas */ } .meseros__velo{ position:absolute; inset:0; background: linear-gradient(0deg, rgba(21,41,74,.86) 4%, rgba(21,41,74,.3) 56%, rgba(21,41,74,.5) 100%), linear-gradient(90deg, rgba(21,41,74,.93) 8%, rgba(21,41,74,.1) 44%, rgba(21,41,74,.74) 78%); } .meseros__marco{ position:relative; width:var(--col); margin:0 auto; align-self:center; padding:calc(var(--nav-h) + min(var(--aire), 2.4vh)) 0 min(var(--aire), 2.4vh); display:grid; gap:clamp(1.6rem, 4vw, 3rem); } .meseros__dice h2{ max-width:12ch } .meseros__muestra{ display:grid; gap:.9rem; align-content:center } .pliego{ display:grid; margin-top:clamp(1.1rem, 3vh, 1.9rem); max-width:34ch } .pliego li{ display:grid; grid-template-columns:2.3rem minmax(0,1fr); gap:.8rem; align-items:baseline; padding:clamp(.24rem, .7vh, .42rem) 0; border-top:1px solid rgba(237,234,227,.15); font-size:.92em; color:rgba(237,234,227,.9); } .pliego li:last-child{ border-bottom:1px solid rgba(237,234,227,.15) } .pliego__n{ font-family:var(--mono); font-weight:700; font-size:.62rem; letter-spacing:.08em; color:var(--ocre); } /* ── el reparto de sala (cap. 4) ── */ .turno{ background:rgba(8,14,28,.62); border:1px solid rgba(237,234,227,.12); padding:clamp(.9rem,2vw,1.4rem) } .turno__barra{ display:flex; align-items:baseline; gap:.8rem; margin-bottom:1rem } .turno__titulo{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ocre) } .turno__estado{ margin-left:auto; font-family:var(--mono); font-size:.68rem; color:rgba(237,234,227,.55) } .turno__filas{ display:grid; gap:.5rem } .mozo{ --carga:2; display:grid; grid-template-columns:5.6rem auto 1fr 1.6rem; align-items:center; gap:.7rem; } /* el estado resuelto: quien está en pausa o fuera de turno no carga mesas. Va en CSS y no inline para que el número exista una sola vez. */ .mozo[data-estado="pausa"], .mozo[data-estado="fuera"]{ --carga:0 } .mozo__nombre{ font-size:.92em } .mozo__chip{ font-family:var(--mono); font-size:.55rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.2rem .45rem; border:1px solid rgba(52,152,145,.5); color:var(--teal-claro); white-space:nowrap; } /* el oliva del canon da 3,76:1 en .55rem; se aclara para el chip y se deja el oliva para lo que no lleva texto chico */ .mozo[data-estado="pausa"] .mozo__chip{ border-color:rgba(107,122,58,.7); color:#A8B87A } .mozo[data-estado="fuera"] .mozo__chip{ border-color:rgba(237,234,227,.3); color:rgba(237,234,227,.72) } .mozo__barra{ display:block; height:7px; background:rgba(237,234,227,.1) } .mozo__barra i{ display:block; height:100%; background:var(--teal); width:calc(var(--carga) / 5 * 100%); transition:width .5s ease, background .5s ease; } .mozo__n{ font-family:var(--mono); font-size:.78rem; text-align:right; color:rgba(237,234,227,.8) } /* quien está en pausa o fuera de turno y aun así carga mesas: eso es exactamente lo que la coordinación deja de hacer. Se marca por fila y no por clase del panel, porque la carga baja a destiempo en cada fila. */ .mozo--indebido .mozo__barra i{ background:var(--brasa) } .mozo--indebido .mozo__n{ color:var(--brasa-clara) } .turno__pie{ display:grid; gap:.25rem; margin-top:1rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em } .turno__antes{ color:rgba(237,234,227,.62); text-decoration:line-through; text-decoration-color:var(--brasa); transition:color .4s ease, opacity .4s ease } .turno__ahora{ color:var(--teal-claro); transition:opacity .4s ease } .turno--caos .turno__antes{ color:var(--brasa-clara); text-decoration:none } .turno--caos .turno__ahora{ opacity:.32 } /* la cola de solicitudes: «organiza solicitudes» y «mantiene el orden de atención» dejan de ser dos viñetas y se ven */ .cola{ margin-top:.9rem; background:rgba(8,14,28,.62); border:1px solid rgba(237,234,227,.12); padding:clamp(.9rem,2vw,1.4rem) } .cola__barra{ margin-bottom:.75rem } .cola__filas{ display:grid; gap:.4rem } .cola__filas li{ display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.7rem; align-items:baseline; font-size:.9em } .cola__hora{ font-family:var(--mono); font-size:.72rem; color:var(--ocre) } .cola__quien{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--teal-claro) } .cola__pie{ margin-top:.8rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; color:rgba(237,234,227,.5) } /* ═══════════ 5 · EL ADMINISTRADOR ═══════════ */ .admin{ display:grid; gap:clamp(1.2rem, 3vh, 2rem); align-content:center } .admin__intro h2{ max-width:18ch } .tablero{ background:rgba(8,14,28,.6); border:1px solid rgba(237,234,227,.13) } .tablero__barra{ display:flex; align-items:center; gap:.8rem; padding:.65rem .9rem; border-bottom:1px solid rgba(237,234,227,.1); } .tablero__marca{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ocre) } .tablero__pulso{ margin-left:auto; display:flex; align-items:center; gap:.45rem; font-family:var(--mono); font-size:.68rem; color:rgba(237,234,227,.62) } /* la brasa late, no parpadea */ .brasa{ width:7px; height:7px; border-radius:50%; background:var(--brasa); box-shadow:0 0 0 0 rgba(237,94,34,.6); animation:latir 3.2s ease-in-out infinite; } @keyframes latir{ 0%,100%{ box-shadow:0 0 0 0 rgba(237,94,34,.55); opacity:.8 } 50% { box-shadow:0 0 0 6px rgba(237,94,34,0); opacity:1 } } .tablero__grilla{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px; background:rgba(237,234,227,.09) } .ficha{ background:#0C1830; padding:.7rem .8rem; display:grid; gap:.22rem; transition:opacity .4s ease, background .4s ease; } .ficha__rot{ font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(237,234,227,.52) } .ficha__val{ font-family:var(--mono); font-size:.86rem; color:var(--off) } .delego{ border-top:1px solid rgba(212,154,69,.4); padding-top:clamp(.9rem, 2.4vh, 1.4rem) } .delego__dice{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem, min(2vw,2.4vh), 1.5rem); line-height:1.26; color:var(--brasa-clara); max-width:34ch } .delego__filas{ display:grid; gap:.55rem; margin-top:.9rem } .delego__filas li{ display:grid; gap:.4rem; align-content:start; border-left:2px solid rgba(237,234,227,.16); padding-left:.85rem; font-size:.92em; } .delego__quien{ justify-self:start; font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.24rem .55rem; border:1px solid; } .delego__quien--agente{ color:var(--teal-claro); border-color:rgba(52,152,145,.55) } .delego__quien--humano{ color:var(--ocre); border-color:rgba(212,154,69,.6) } /* ═══════════ 6 · EL RESTAURANTE ═══════════ */ .resto{ display:grid; gap:clamp(1.4rem, 3.4vh, 2.4rem); align-content:center } .resto__intro h2{ max-width:20ch } .territorios{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(.8rem, 1.8vw, 1.4rem) } /* la tarjeta es una superficie propia y la foto llega a su borde: en v1 la imagen era una franja de 96px recortada al centro geométrico y las cuatro se leían como iconos, no como fotografía */ .terr{ background:rgba(8,14,28,.5); border:1px solid rgba(237,234,227,.1); display:grid; align-content:start; overflow:hidden; transition:opacity .45s ease, filter .45s ease, border-color .45s ease; } .terr img{ display:block; width:100%; height:clamp(190px, 31vh, 340px); object-fit:cover; } /* ley 6: encuadre decidido uno por uno. A 250px de alto el plato del primero y el plato del tercero quedaban cortados por abajo; con la tarjeta más alta el sujeto entra entero y el encuadre se vuelve a decidir. */ .terr[data-i="0"] img{ object-position:50% 52% } /* el tiradito entero en su loza */ .terr[data-i="1"] img{ object-position:50% 46% } /* la copa completa, con su pie */ .terr[data-i="2"] img{ object-position:52% 38% } /* la cara Y el plato que recibe */ .terr[data-i="3"] img{ object-position:56% 44% } /* el cocinero y su pantalla */ .terr__cuerpo{ padding:clamp(.75rem, 1.5vw, 1.1rem); display:grid; gap:.45rem; align-content:start } .terr h3{ color:var(--off) } .terr p{ font-size:.88em; line-height:1.5; color:rgba(237,234,227,.78) } .terr__cuerpo::after{ content:''; display:block; height:2px; width:2.4rem; background:var(--brasa); margin-top:.15rem } .terr.is-al-frente{ border-color:rgba(237,94,34,.5) } /* ═══════════ 7 · CUÁNTO TIEMPO SE TE VA ═══════════ Reemplaza a los cuatro medidores tramados y a la aberración operativa. La cifra no la ponemos nosotros: la calcula delante del visitante con los números que él declara. */ .tiempo{ display:grid; gap:clamp(1.2rem, 3vh, 2rem); align-content:center } .tiempo__intro h2{ max-width:18ch } .tiempo__nota{ font-size:.94em; color:rgba(237,234,227,.72); max-width:62ch; margin-top:.9rem } .calc{ display:grid; gap:clamp(1.2rem, 3vw, 2.4rem) } .calc__mandos{ display:grid; gap:clamp(.7rem, 1.8vh, 1.1rem); align-content:center } .mando{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.2rem .8rem; align-items:baseline; border-top:1px solid rgba(237,234,227,.15); padding-top:.55rem; } .mando__q{ font-size:.9em; color:rgba(237,234,227,.86) } .mando__v{ font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--brasa-clara) } .mando input[type="range"]{ /* 44px de alto y no 20: el pulgar necesita blanco de toque, y el navegador centra la pista fina dentro de esa zona. Medido en el teléfono. */ grid-column:1 / -1; width:100%; height:2.75rem; margin:0; accent-color:var(--brasa); background:transparent; cursor:pointer; } .calc__cifra{ background:rgba(8,14,28,.5); border:1px solid rgba(237,234,227,.13); padding:clamp(1rem, 2.4vw, 1.6rem); display:grid; gap:.5rem; align-content:center; } .calc__rot{ font-family:var(--mono); font-weight:700; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-claro); } .calc__n{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--mono); font-weight:700; line-height:.95; font-size:clamp(3rem, min(7vw, 9vh), 5.6rem); color:var(--brasa); } .calc__n em{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.2rem, min(2.4vw, 2.8vh), 1.9rem); color:var(--off); } .calc__cuenta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:rgba(237,234,227,.6); line-height:1.7; } .calc__pie{ font-size:.86em; line-height:1.55; color:rgba(237,234,227,.66); border-left:2px solid var(--brasa); padding-left:.8rem; max-width:46ch; } .gana4{ display:grid; gap:.6rem; border-top:1px solid rgba(237,234,227,.15); padding-top:clamp(.8rem, 2vh, 1.3rem) } .gana4 li{ display:grid; gap:.15rem } .gana4__q{ font-family:var(--serif); font-size:1.06rem; color:var(--off) } .gana4__d{ font-size:.84em; line-height:1.5; color:rgba(237,234,227,.66) } /* ═══════════ 8 · SIÉNTATE EN UNA MESA ═══════════ No se pinea: es un capítulo con el que se interactúa, y el alto de un chat cambia con cada turno. Un sticky de alto fijo lo cortaría. Mide su contenido (ley 5) y la presencia se la da la escena a sangre. */ .cap--mesa{ position:relative; overflow:hidden; padding:clamp(3.4rem, 10vh, 6rem) 0 calc(clamp(2rem, 5vh, 3rem) + var(--pie-monta)) } .mesa__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%; /* la mesa puesta, no el techo */ } .mesa__velo{ position:absolute; inset:0; background: /* la disolución de entrada: el halo del capítulo anterior se apaga dentro de la foto en poco más de una franja de nav */ linear-gradient(180deg, #16335A 0, rgba(22,51,90,.72) 34%, rgba(22,51,90,0) 100%) top / 100% clamp(88px, 14vh, 168px) no-repeat, linear-gradient(0deg, rgba(8,14,28,.9) 2%, rgba(8,14,28,.46) 48%, rgba(8,14,28,.82) 100%), linear-gradient(90deg, rgba(8,14,28,.62), rgba(8,14,28,.1) 50%, rgba(8,14,28,.62)); } .mesa__marco{ position:relative; width:var(--col); margin:0 auto; display:grid; gap:clamp(1.6rem, 4vh, 2.6rem) } .mesa__intro{ text-align:center; display:grid; justify-items:center; transition:opacity .5s ease } .mesa__intro h2{ max-width:16ch } .mesa__bajada{ max-width:48ch; color:rgba(237,234,227,.8); margin-top:.9rem } /* Ley 4 · el estado por defecto es el seguro. Sin JS o con reduced-motion no hay demo, así que tampoco hay botón que lo prometa: queda la conversación entera y el otro lado, escritos y legibles. El botón lo enciende el bloque de movimiento de más abajo. */ .mesa__intro #entrar{ display:none } .mesa__puede{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; line-height:2; color:var(--teal-claro); max-width:56ch; margin-top:1.4rem; text-shadow:0 1px 6px rgba(8,14,28,.9); /* va sobre foto */ } .mesa__nota{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,234,227,.64); margin-top:1.1rem; } .mesa__escena{ display:grid; gap:clamp(1.4rem, 3vw, 2.4rem); justify-items:center; align-items:start } /* Los dos teléfonos acotan su conversación por ALTO DE PANTALLA. Sin esto el del capítulo 3 medía 924px pasara lo que pasara —nada de esa columna consultaba el vh— y el overflow:hidden del pin se comía el enlace de salida. Ley 1, corolario: lo pineado mide también por vh. */ .fono--mesa{ --esc:.78 } .cliente__muestra .msgs{ overscroll-behavior:contain } /* Las opciones ocupan el lugar de la barra de escritura: en el demo no se escribe, se elige. Van DENTRO del teléfono, con su tipografía, para que no se lean como un control de la página encima de un mockup. */ .fono__opciones{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:10px 12px 12px; background:var(--bar); border-top:1px solid rgba(233,237,239,.08); flex:0 0 auto; } .fono__opciones:empty{ display:none } .fono__opciones:not(:empty) + .inputbar{ display:none } .opcion{ font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif; font-size:14px; font-weight:500; line-height:1.2; /* 27px de alto era muy poco para un pulgar: el demo se juega en el teléfono */ padding:11px 15px; min-height:44px; border-radius:999px; display:inline-flex; align-items:center; background:rgba(237,94,34,.16); border:1px solid rgba(237,94,34,.55); color:#F5A867; cursor:pointer; transition:background .2s ease, color .2s ease; } .opcion:hover{ background:var(--brasa); color:#0a0a0c; border-color:var(--brasa) } /* el otro lado. Sin JS está desde el principio, que es lo correcto: el contenido no depende del movimiento. Con JS se guarda y se revela al final, que es donde está el golpe. */ .tras{ width:100%; background:rgba(8,14,28,.62); border:1px solid rgba(237,234,227,.14); padding:clamp(1rem, 2.4vw, 1.6rem); display:grid; gap:.9rem; align-content:start; } .tras__rot{ font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem, min(2vw, 2.4vh), 1.45rem); line-height:1.26; color:var(--brasa-clara); } .tras__filas{ display:grid; gap:.5rem } .paso{ display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:.7rem; align-items:baseline; border-left:2px solid rgba(52,152,145,.45); padding-left:.7rem; } .paso__h{ font-family:var(--mono); font-size:.68rem; color:var(--ocre) } .paso__q{ font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--teal-claro) } .tras__remate{ font-size:.86em; line-height:1.55; color:rgba(237,234,227,.7) } /* la tesis de la pieza, dicha donde por fin es verdad: acabas de ver todo lo que tu restorán ya hace, funcionando junto */ .tras__tesis{ font-family:var(--serif); font-size:clamp(1.2rem, min(2.2vw, 2.6vh), 1.62rem); line-height:1.22; color:var(--off); border-top:1px solid rgba(237,94,34,.42); padding-top:.9rem; } .tras__tesis em{ font-style:italic; color:var(--brasa-clara) } .tras .btn{ text-align:center } /* la puerta de vuelta a la mesa: sin ella, is-sentado escondía la invitación para siempre y el CTA del cierre aterrizaba en una mesa ya jugada */ .volver{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; background:none; border:0; border-bottom:1px solid rgba(237,234,227,.35); color:rgba(237,234,227,.78); cursor:pointer; padding:.5rem 0 .3rem; } .volver:hover{ color:var(--off); border-bottom-color:var(--off) } /* ═══════════ EL CIERRE, DENTRO DE LA MESA ═══════════ Era el capítulo 9, en campo plano y con un tercer botón. Ahora es la firma del último capítulo: se ve en los tres estados, no lleva acción propia —las dos acciones están juntas arriba— y hereda el suelo fotográfico de la mesa, que es más fuerte que el navy liso que tenía. */ .mesa__cierre{ position:relative; text-align:center; display:grid; justify-items:center; gap:.5rem; margin-top:clamp(1.4rem, 4vh, 2.6rem); padding-top:clamp(1.6rem, 4.5vh, 2.8rem); border-top:1px solid rgba(237,234,227,.14); } /* El destello de brasa al pie del pulso: el único lugar donde la brasa manda. Se mide contra el bloque y no en píxeles sueltos: cuando vivía en su propia sección podía desbordar sin consecuencia, pero `.cap--mesa` recorta —tiene una foto a sangre— y un halo de 420px se salía 98px por abajo. Ahora cubre su propio bloque, centrado, y no se pasa a ningún tamaño. */ .mesa__brasa{ position:absolute; inset:-14% -10%; z-index:0; background:radial-gradient(ellipse at 50% 42%, rgba(237,94,34,.30), rgba(237,94,34,0) 68%); pointer-events:none; } .cierre__frase{ position:relative; color:var(--off); font-family:var(--serif); font-size:clamp(1.55rem, min(4vw, 4.4vh), 2.7rem); line-height:1.12; max-width:22ch; text-shadow:0 1px 10px rgba(8,14,28,.8); } .cierre__frase em{ font-style:italic; color:var(--brasa-clara) } .cierre__marca{ position:relative; margin-top:clamp(.9rem, 2.6vh, 1.5rem); font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem, min(2.8vw, 3.2vh), 1.95rem); letter-spacing:.01em; } .cierre__linea{ position:relative; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,234,227,.72) } /* ═══════════ PIE ═══════════ */ /* Era una franja de navy bajo la foto y ahora no es franja: se monta dentro del cuadro de la mesa, sin fondo ni filo. Sigue siendo