/* ============================================================ EL BUSCADOR PÚBLICO — hoja propia. Diseño aprobado: handoff del dueño, opción "2a / Mostrador v2". POR QUÉ NO SE REUSA estilos.css (28-ago-2026) ------------------------------------------------------------ estilos.css es la hoja del RECOMENDADOR (system-ui, otra escala, otro color). Mezclarlas obligaba a pisar reglas con !important y cualquier retoque del recomendador se le caía encima al buscador. Son dos puertas distintas del mismo sitio, y cada una tiene su hoja. ============================================================ 🔴 EL SEGUNDO CAMBIO DE CARÁCTER — 2-SET-2026, A LA TARDE ============================================================ El dueño trajo un prototipo propio (design_handoff_encontratulibro/prototipo-v2-1sep.html) y pidió tomar de ahí la paleta entera, las dos tipografías con sus roles, la barra con el menú desplegado, el estante de lomos de la home y el recorrido con sendero, hitos numerados y separadores. ES UN REEMPLAZO, NO UNA CAPA ENCIMA. Del sistema anterior no queda ningún color, ninguna fuente y ninguna sombra. Lo que se fue: · el azul cobalto #1568d5 y su escala de cuatro tonos; · la BANDA DE ACERO #1d2d3d, que este mismo archivo llamaba "la marca del sitio y no se toca"; · los siete grises neutros y el fondo gris #eceef2; · Barlow y Barlow Condensed; · las tarjetas blancas de 14px de radio con dos capas de sombra; · el ☰ y el cajón de navegación, con sus diez selectores. Lo que hay ahora: papel y tinta, Fraunces para títulos y marca, Karla para el cuerpo, cajas de un filo de un píxel y 4px de radio, y las cinco entradas del menú escritas en la barra. LO QUE **NO** CAMBIÓ, Y ES LA CONDICIÓN DEL ENCARGUE: la lista de resultados NO es una grilla de portadas. La tapa sigue al costado en --alto-tapa (120px), el título sigue mandando la jerarquía y el precio BAJÓ un escalón (ver "EL PRECIO BAJA UN ESCALÓN"). Siguen entrando 3 filas enteras a 320px, dos toques hasta el precio y cero desborde horizontal: los tres están medidos con el carácter nuevo puesto (ver "EL TELÉFONO CHICO", al final del archivo). Y ni un dato en pantalla que no salga del servidor. ============================================================ 🔴 EL ORDEN SE DIO VUELTA EL 1-SET-2026, Y LO DIJO EL DUEÑO: *"acordate que primero es formato web adaptado a celular"*. Hasta ayer acá decía "MOBILE-FIRST DE VERDAD" y era cierto: todo se escribía para 320px y el monitor era lo que se agregaba después. El resultado, mirado en una pantalla grande, era un teléfono estirado — una columna de texto de 680px en el medio de 1920. La pantalla que manda el diseño ahora es LA GRANDE. LO QUE NO CAMBIA, Y ES LA CONDICIÓN: el celular no se degrada. A 320px siguen entrando 3 filas enteras de resultados, que es el número que se defiende desde el principio. La técnica sigue siendo la misma —las reglas base son las del teléfono y los @media suman— porque dar vuelta el archivo entero sería reescribir sin necesidad; lo que cambió es a quién se le da la razón cuando el ancho grande y el chico piden cosas distintas. LA COLUMNA YA NO SE TOPA EN 430px (corregido el 1-set-2026 a la noche): ocupa el ancho SIEMPRE, y el que aparta el contenido de los bordes es --margen-movil. Entre 430 y 899 la hoja de 430px dejaba 169px de gris de cada lado a 768 y 225px a 880 — el formato celular estirado, escondido en el único rango que nadie miraba. Y DESDE 760px, EL ESCRITORIO (31-ago-2026, pedido del dueño: "la idea es que sea página web, se pase a celular y se vea bien"; el corte estuvo en 900 hasta el 1-set a la noche). Está TODO junto al final del archivo, en cuatro @media —760, la franja 760-899, 1120 y 1200— y no pisa ni una regla del teléfono: hasta 759px este archivo dibuja exactamente lo que se aprobó y se probó, medido píxel por píxel contra la hoja vieja a 320, 360, 390 y 429. La guía fue la opción 1c del handoff —dos columnas— que NO está aprobada; lo que se tomó de ella es el reparto del espacio, no el detalle. LO ÚNICO DEL TELÉFONO QUE CAMBIÓ el 31 a la tarde es el TAMAÑO DE LA TAPA, que era el otro pedido del dueño y vale para todos los anchos. Medido a 320 y a 390px, en la LISTA DE RESULTADOS: mismos altos de fila (112,1 y 124,2) y las mismas filas por pantalla que antes. Donde sí se nota es en la PANTALLA DE PRECIOS a 320px: la fila pasa de 74 a 90px y "usado · ed. Planeta" se parte en dos renglones, porque ahí la tapa le saca 5px al texto. Se aceptó: esa pantalla muestra una fila por librería, no cinco. Si molesta, se baja --escala-tapa-precio y no hay que tocar nada más. Todo el tamaño de la tapa sale de --alto-tapa, acá abajo. ============================================================ EL CAMBIO DE CARÁCTER VISUAL — 2-SET-2026 ============================================================ PEDIDO DEL DUEÑO, TEXTUAL: *"quiero mejorar el UI design de la página, siento que es muy aburrido"*, con Papiora (dribbble.com/shots/26715357) como referencia. Eligió, entre tres opciones, CAMBIAR EL CARÁCTER VISUAL — no un retoque. QUÉ CAMBIÓ, y son cuatro cosas: 1. TARJETAS. (🔴 HISTORIA, y sólo a medias vigente: con la paleta de papel las secciones de TEXTO dejaron de ser tarjetas —lo que las separa es el filete con el punto— y las que quedaron —formularios, filas, avisos— son papel alto con un filo de 1px, no blanco con sombra.) Decía así: Cada bloque es una superficie BLANCA con borde redondeado y sombra suave sobre FONDO GRIS. Antes eran bloques planos sobre un fondo casi blanco, separados por filetes de 1 y 2px. El fondo de la página pasó de #f2f2f3 a --color-fondo y las superficies a blanco puro: sin esos dos movimientos juntos la tarjeta no se despega y la sombra no se ve. 🔴 LOS FILETES SE FUERON CON ELLO. Varios comentarios de este archivo hablaban del "filete separador" como el mecanismo que separa un bloque del otro: hoy lo que separa es el aire entre tarjetas (--aire-bloques). Donde el filete todavía se nombra es historia, no descripción de lo que hay. 2. EL ACENTO, DE #5980a6 A #1568d5. (🔴 HISTORIA: ese cobalto duró una tarde. Esa misma noche entró la paleta de papel y tinta del prototipo y el acento pasó a ser --vino #8C2434. Se deja escrito para que se entienda de dónde venía el archivo.) 3. MÁS AIRE. Dos perillas nuevas, --aire-tarjeta (adentro) y --aire-bloques (entre tarjetas), en vez de márgenes escritos a mano bloque por bloque. 4. EL "CÓMO FUNCIONA" EN ACORDEÓN (#p-como). Ver el bloque "EL ACORDEÓN". LO QUE NO CAMBIÓ, Y ES LA CONDICIÓN DEL ENCARGUE: la lista de resultados NO se convirtió en grilla de portadas. Cada fila es una tarjeta, pero sigue siendo una LISTA: tapa al costado en --alto-tapa (120px), el título mandando la jerarquía y el precio chico. Tampoco entró nada de la vidriera de la referencia —estrellas, contadores de ventas, sellos de confianza, badges de descuento—: este sitio no vende y lo dice por escrito, y un dibujo que afirme lo que el texto niega es el modo de falla del proyecto. Ni un dato en pantalla que no salga del servidor. ============================================================ ============================================================ LO DEL 1-SET-2026 — cuatro pedidos del dueño mirando la pantalla, más la perilla de la tapa que quedó elegida en 120. ============================================================ 1. LA HOME, CON EL TÍTULO, LA BAJADA Y EL CAMPO CENTRADOS COMO UN SOLO BLOQUE. Sólo la home: las otras seis pantallas conservan la banda compacta y todo alineado a la izquierda. Ver el bloque "LA HOME: EL BLOQUE CENTRADO". 2. EL PANEL DE NAVEGACIÓN. El MISMO cajón detrás del ☰ en las dos medidas — no hay riel fijo en ninguna (decisión del dueño, 1-sep-2026). Ver el bloque "EL PANEL DE NAVEGACIÓN". 3 y 4. Tres pantallas de texto nuevas (el "cómo funciona", librerías y recomendador): estilos en el bloque "cómo funciona y los textos largos". El "cómo funciona" ESTABA al pie de la home y se mudó a pantalla propia el 1-set — se llega sólo por el ☰. 5. LOS CUATRO RENGLONES de la home ("Un libro, todos sus precios", etc.) SE SACARON el mismo día, a pedido del dueño: "mejor sacalo todo. De mientras pienso qué se puede poner". EN SU LUGAR QUEDARON LOS TRES PORQUÉS (por qué el buscador, por qué el recomendador, por qué se pueden pedir libros), que el dueño juntó en la home el mismo día: "la idea es que todo esté en la página principal". Con ellos salieron de la home la letra chica del "no vendemos", la caja del "¿no está el libro que buscás?", la salida a las librerías y el pie. Ver el bloque "el cuerpo de la home: los tres porqués". 6. LAS TRES PANTALLAS DE TEXTO, DE ARRIBA HACIA ABAJO (mismo pedido): se fueron las dos columnas de bloques y quedó una sola lectura vertical, con el título de cada sección a la izquierda y el párrafo a su derecha. Ver el bloque "LOS TEXTOS: RÓTULO A LA IZQUIERDA". LO QUE SE MIDIÓ ANTES Y DESPUÉS, con Chrome de verdad y la búsqueda "cien años" contra la base local: filas ENTERAS en la primera pantalla antes (tapa 88) después (tapa 120 + panel) 320 × 568 ......... 3 .................. 3 390 × 844 ......... 6 .................. 5 1920 × 1080 ........ 7 .................. 5 O sea: EL CELULAR DE 320 NO SE DEGRADA —siguen entrando las 3 filas de siempre—, y lo que se paga son una fila en el teléfono grande y dos en el monitor. Las dos las paga la tapa de 120, no el panel: el panel no le saca ni un píxel de alto a la lista. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Karla:wght@400;500;700&display=swap'); :root { /* ============================================================ LA PALETA — PAPEL Y TINTA (2-set-2026) ============================================================ 🔴 ESTO REEMPLAZA AL SISTEMA VIEJO ENTERO, no lo pinta por encima. Lo que se fue, para que nadie lo reponga sin darse cuenta de que estaría eligiendo volver atrás: · el azul cobalto (#1568d5) y su escala de cuatro tonos; · la BANDA DE ACERO (#1d2d3d), que hasta ayer era "la marca del sitio y no se toca" — hoy la banda es papel hondo con tinta encima, como el prototipo; · los siete grises neutros (#f5f5f8 … #2b2b2d); · Barlow y Barlow Condensed. Los nueve colores salen del prototipo del dueño (design_handoff_encontratulibro/prototipo-v2-1sep.html, :root) y están copiados tal cual, sin retocar ninguno. CONTRASTES MEDIDOS (WCAG 2.1, sobre --papel-alto): --humo 5,15:1 → texto chico secundario (mínimo 4,5) --vino 7,77:1 → enlaces y precio destacado --tinta-suave 10,40:1 → cuerpo de texto Y al revés: --papel-alto sobre --vino da los mismos 7,77:1, que es el botón primario. 🔴 --oro NO SE USA PARA TEXTO EN NINGÚN LADO: es filo y anillo de foco sobre fondo oscuro (el lomo del estante). Sobre papel da 2,9:1 y no alcanza para leer. */ --tinta: #16241C; --tinta-suave: #2C3B32; --papel: #EDE7DA; --papel-hondo: #E1D9C7; --papel-alto: #F6F2E8; --vino: #8C2434; /* El vino apretado, para hover y activo. Es el único de acá que no está en el :root del prototipo: allá está escrito a mano en `form.buscador button:hover` y en `.accion:hover`. */ --vino-hondo: #71121F; --oro: #BE8B26; --humo: #6C6559; --linea: #D6CEBD; /* ============================================================ LAS DOS TIPOGRAFÍAS Y SUS ROLES ============================================================ FRAUNCES (serif variable) → marca y títulos, y nada más. Con sus ejes: SOFT y WONK son ejes propios de Fraunces y sin ellos la letra es otra. El prototipo usa tres ajustes distintos —marca, h1 y h2— y se copian los tres (ver .marca, h1 y h2, más abajo). KARLA → todo el cuerpo: párrafos, campos, botones, etiquetas y precios. 🔴 EL PRECIO PASÓ DE LA TIPOGRAFÍA DE TÍTULOS A LA DEL CUERPO, y es a propósito: en Barlow Condensed a 22px el precio le competía la jerarquía al título. Ahora el título es serif y grande, el precio es Karla bold y chico. El prototipo hace lo mismo (.mk-precio es Karla). Vienen de Google Fonts, que YA está declarado en la política de seguridad del sitio (servidor.ts, HOJAS_PERMITIDAS y FUENTES_PERMITIDAS). No se agregó ningún dominio: cambió la familia que pide el mismo @import, nada más. */ --font-heading: Fraunces, Georgia, "Times New Roman", serif; --font-body: Karla, system-ui, sans-serif; --space-2: 6.8px; --space-3: 10.2px; /* ============================================================ LA TARJETA — radio, sombra y aire (2-set-2026) ============================================================ Cuatro perillas y de ellas sale TODO el dibujo nuevo. Están juntas porque se miran juntas: subir el radio sin subir el aire deja el texto pegado a una esquina redonda. EL RADIO va en dos escalones y no en uno: 14px es el de las superficies (tarjeta, panel), 10px el de las cosas que viven ADENTRO de una tarjeta (campos, botones). Una caja de 40px de alto con 14px de radio se lee como una pastilla, no como un campo. (Las etiquetas ERAN pastillas y usaban --radio-pill; desde la paleta de papel son rótulos con filo. Ver .tag.) LA SOMBRA VA EN DOS CAPAS, y no es adorno: la de 1px pega la tarjeta al fondo (es lo que reemplaza al filete que había antes) y la de 16px es la que la levanta. Con una sola capa grande la tarjeta flota sin apoyarse. El color de las dos es el azul de la banda y no negro: un gris neutro sobre fondo gris ensucia. EL AIRE tiene dos números: --aire-tarjeta es el padding de adentro y --aire-bloques la separación entre una tarjeta y la siguiente. Los dos crecen en escritorio (ver el bloque de 760px). 🔴 --aire-fila ES APARTE Y MÁS CHICO, y no es un descuido: la lista de resultados tiene que seguir mostrando 3 filas enteras a 320px, que es el invariante del proyecto. Con --aire-tarjeta la fila crecería y a 320px entrarían 2. Medido, ver abajo. ACÁ ESTABA --shadow-md, que se fue el 1-set-2026 con la hoja centrada: era la sombra de la columna de 430px sobre el fondo gris. Valía `0 3px 10px` de #2b2b2d al 16%. */ /* 🔴 LOS TRES RADIOS Y LAS DOS SOMBRAS SE REESCRIBIERON CON LA PALETA NUEVA (2-set-2026). El sistema anterior era de tarjetas blancas flotando sobre gris: 14px de radio y dos capas de sombra azul. Sobre papel eso no existe — el prototipo dibuja sus cajas con `border:1px solid var(--linea)`, 4px de radio y una sombra de UN PÍXEL que es en realidad un filo (`0 1px 0 var(--linea)`). Se copian esos números. Lo que se gana no es estética: una tarjeta que flota le sube un escalón de jerarquía a lo que tiene adentro, y adentro de la fila de resultados lo que hay es una tapa y un precio. Plano, el que manda es el título. --radio-pill quedó en 999 y hoy NO LO USA NADIE: las etiquetas dejaron de ser pastillas (ver .tag). Se deja la perilla porque el día que vuelva a hacer falta, vuelve de un lugar. */ --radio: 4px; --radio-chico: 3px; --radio-pill: 999px; --sombra: 0 1px 0 var(--linea); --sombra-alta: 0 2px 0 var(--linea); --aire-tarjeta: 16px; --aire-bloques: 12px; --aire-fila: 12px; --sep-filas: 10px; /* ============================================================ LA PERILLA DE LA TAPA — un número, todo el sitio (31-ago-2026) ============================================================ `--alto-tapa` es el ALTO de la carátula en escritorio. Todo lo demás sale de acá y no se escribe a mano en ningún lado: · el ancho, por la proporción 2:3 del libro; · la tapa del teléfono y la de abajo de 360px, por --escala-tapa; · la de la pantalla de precios, por --escala-tapa-precio; · el hueco de las filas SIN tapa, porque usa la misma clase. Antes eran cuatro números sueltos (44 / 36 / 30 / 38) y tocar uno dejaba a los otros tres mintiendo. Ahora se cambia esta línea. 🔴 EL TECHO, Y NO ES ESTÉTICO — ESCRITO CON LA PERILLA EN 120 Y EL PEDIDO AL CDN EN 240 (1-set-2026: el dueño comparó 88 contra 120 y eligió 120; ANCHO_TAPA_POR_DEFECTO en src/web/sesiones.ts pasó de 160 a 240 en el mismo movimiento, palanca TAPAS_ANCHO_PX del .env). LA FÓRMULA, para que el día que se mueva el número se sepa de dónde salió y no haya que rehacer la cuenta a ojo: ancho en CSS = --alto-tapa × escala × 2/3 (proporción 2:3) píxeles reales = ancho en CSS × densidad de pantalla Y EL CASO QUE MANDA ES EL TELÉFONO, NO EL MONITOR: el monitor va a 2x y el teléfono a 3x, así que aunque la tapa del teléfono se dibuja MÁS CHICA, pide MÁS píxeles. Con la perilla en 120: monitor (escala 1) → 80 de ancho × 2 = 160 tel. ≥360 (escala .85) → 68 de ancho × 3 = 204 ← el que manda tel. ≤359 (escala .70) → 56 de ancho × 3 = 168 Con los 160 viejos, los DOS casos de teléfono se pasaban y la carátula se veía blanda justo donde es más grande. Con 240 entran los tres y sobra margen. LO QUE CUESTA, MEDIDO HOY sobre las mismas tres tapas: w160 → 18,3 / 9,4 / 8,1 KB w240 → 37,0 / 16,2 / 14,8 KB Y sobre /api/buscar de verdad, en la proporción real de librerías: una pantalla de 10 resultados pasa de 206 KB a 249 KB (+21%); buscando "borges", de 271 a 338 KB. Es el precio de la tapa grande y está pagado a propósito. LA REGLA, corregida: cada vez que se mueva --alto-tapa se rehace la cuenta de arriba y se revisa TAPAS_ANCHO_PX en el mismo movimiento. No es "si algún día pasa de 120": con 120 ya hubo que subirlo. */ --alto-tapa: 120px; /* Derivadas: NO se tocan a mano. */ --escala-tapa: .85; /* teléfono de 360px para arriba */ --escala-tapa-precio: .86; /* la pantalla de precios, un escalón menos */ --tapa-alto: calc(var(--alto-tapa) * var(--escala-tapa)); --tapa-ancho: calc(var(--tapa-alto) * 2 / 3); --tapa-precio-alto: calc(var(--tapa-alto) * var(--escala-tapa-precio)); --tapa-precio-ancho: calc(var(--tapa-precio-alto) * 2 / 3); /* LA TAPA DE LA CABEZA DE LA FICHA (2-set-2026, formato del prototipo del dueño). Es la ÚNICA tapa del sitio más grande que la de la lista, y el escalón es chico a propósito: el prototipo salta de 80px en la lista a 132px en la ficha (1,65×), acá se sube apenas un 10% sobre --alto-tapa. Motivo: en la ficha el título es un

de 26 a 34px y no puede perder la jerarquía contra la portada. Sale de la misma perilla que todo lo demás, o sea que mover --alto-tapa la mueve con él. */ --escala-tapa-ficha: 1.1; --tapa-ficha-alto: calc(var(--tapa-alto) * var(--escala-tapa-ficha)); --tapa-ficha-ancho: calc(var(--tapa-ficha-alto) * 2 / 3); /* ============================================================ EL ANCHO DE LA PÁGINA EN ESCRITORIO (31-ago-2026) ============================================================ Patrón de diario: la barra y el fondo llegan a los dos bordes del monitor; lo que va ADENTRO —marca, buscador, lista, pie— se estira hasta --ancho-contenido y ahí topa, alineado todo con el mismo borde. `--margen-lateral` es ese cálculo, en una sola pieza: nunca menos que el borde de 40px, y en un monitor ancho lo que sobre repartido en dos. Va como PADDING de cada bloque que tiene fondo propio (la banda) — no como max-width de un envoltorio— porque la banda tiene que pintar de punta a punta y su contenido no. El `100%` se resuelve contra .columna, que hoy es la pantalla entera en todas las medidas. Abajo de 760px NADA DE ESTO SE USA: ahí manda --margen-movil, unas líneas más abajo. */ /* EL RÓTULO DE LAS PANTALLAS DE TEXTO — la casilla angosta de la izquierda donde cae el título de cada sección (1-set-2026). Sólo lo usan las reglas de 760px para arriba: abajo de eso el título va apilado arriba del párrafo y esta medida no entra en juego. 🔴 Y sólo lo usan TRES pantallas: #p-como, #p-librerias y #p-recomendador. La home no —desde el 1-set su título va centrado arriba del texto—, así que tocar este número no le cambia nada a la home. Se ensancha a 340px desde 1120px, donde ya hay página para eso. `--gap-rotulo` es la canaleta entre el rótulo y el párrafo: está acá y no escrita a mano en cada regla porque desde el 1-set hay algo más que la grilla que tiene que alinearse con la columna de lectura (el lugar del acceso del recomendador), y dos números sueltos se desincronizan a la primera. */ --col-rotulo: 210px; --gap-rotulo: 40px; --ancho-contenido: 1400px; --borde-lateral: 40px; --margen-lateral: max(var(--borde-lateral), (100% - var(--ancho-contenido)) / 2); /* ============================================================ LA COLUMNA DE LAS DOS PANTALLAS DE LIBROS (3-set-2026) ============================================================ 🔴 MEDIDO EN EL PROTOTIPO DEL DUEÑO: `.cuerpo { width: min(1000px, 100%); padding: 1.6rem clamp(1rem,4vw,2.5rem) 3rem }`. O sea: la caja topa en 1000px y adentro quedan 920px de contenido, centrados. Los 1400px de --ancho-contenido son del resto del sitio (la barra, el pie, las pantallas de texto) y ahí se quedan: acá lo que se calca es la lista, que en el prototipo es más angosta. POR QUÉ IMPORTA Y NO ES UN NÚMERO SUELTO: con 1400 la fila medía 964px a 1920 y el ojo tenía que cruzar el monitor entero para juntar el título con su precio. Con 920 el renglón se lee de una mirada, que es lo que hace el prototipo. LO USAN: la lista de resultados, la lista de precios y la cabeza de la ficha —las tres viven adentro del mismo `.cuerpo` del prototipo, así que las tres se alinean con el mismo borde. */ --ancho-libros: 1000px; /* LA CUENTA ES LA DEL PROTOTIPO, EN UNA SOLA PIEZA. Allá son dos: la caja topa en 1000px y se centra (`width: min(1000px,100%); margin: 0 auto`) y ADENTRO lleva un padding de `clamp(1rem, 4vw, 2.5rem)`. O sea que el contenido mide 920px en un monitor y el borde nunca baja de 16px en lo angosto. Acá va como padding de la lista, así que las dos partes se suman: lo que sobra de los 1000, más el borde. Medido: a 768 da 30,7px de borde y 706,6 de contenido, y a 1920 da 500 y 920 — los mismos números que el prototipo. */ --margen-libros: calc(max(0px, (100% - var(--ancho-libros)) / 2) + clamp(16px, 4vw, 40px)); /* EL MARGEN DE LAS MEDIDAS CHICAS (1-set-2026, ver el bloque "LA PÁGINA DE PUNTA A PUNTA TAMBIÉN ABAJO DE 900"). Es el mismo recurso que --margen-lateral pero con el tope del teléfono: nunca menos que los 20px de siempre, y lo que sobre repartido en dos. A 430px da 20px EXACTOS —o sea, el teléfono no se entera— y recién a partir de 504px empieza a apartar el contenido de los bordes. */ --contenido-movil: 464px; --margen-movil: max(20px, (100% - var(--contenido-movil)) / 2); /* EL PANEL NO TIENE ANCHO PROPIO EN EL LAYOUT, y eso es a propósito desde la corrección del 1-set: es un CAJÓN en todas las medidas, así que flota por encima y no le saca ni un píxel a la banda ni al contenido. El riel fijo que se probó antes se comía 228px en el monitor y cortaba la barra a mitad de pantalla. */ } *, *::before, *::after { box-sizing: border-box; } /* EL `hidden` GANA SIEMPRE. Sin esto, cualquier regla nuestra con `display:flex` le pasa por encima al atributo hidden del navegador. Apareció mirando la pantalla de pedido en 320px: el formulario y el "Quedó pedido ✓" se veían A LA VEZ. Todo lo que esta página muestra y esconde lo hace con `hidden`, así que va una vez y vale para todo. */ [hidden] { display: none !important; } body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--font-body); font-size: 15px; line-height: 1.55; /* El iPhone infla el texto al girar el teléfono y descoloca la home (se vio con los cuatro renglones, que ya no están; vale igual para los bloques de texto). Se apaga sin tocar el zoom de la persona. */ -webkit-text-size-adjust: 100%; } /* LOS TÍTULOS, CON LOS EJES DE FRAUNCES DEL PROTOTIPO. SOFT redondea los remates y WONK inclina la 'g' y la 'y'. El prototipo usa DOS ajustes distintos y acá se copian los dos: el h1 va más blando y con WONK (SOFT 40, WONK 1), el h2 más sobrio y sin WONK (SOFT 20). No es un capricho de detalle: sin los ejes, Fraunces se dibuja en su instancia por defecto y se parece a cualquier serif. */ h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0; } h1 { font-variation-settings: "SOFT" 40, "WONK" 1; line-height: 1.08; letter-spacing: -.025em; } h2, h3 { font-variation-settings: "SOFT" 20; letter-spacing: -.015em; } a { color: var(--vino); text-underline-offset: 3px; } a:hover { color: var(--vino-hondo); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--vino); outline-offset: 2px; } /* ACÁ ESTABA `.banda :focus-visible { outline-color: … }`, que existía porque el anillo azul no se veía sobre la banda de acero. Sin banda oscura no hace falta: el anillo de vino se lee sobre papel igual que sobre el resto de la página. Una excepción menos. */ /* ============================================================ EL MARCO: LA PÁGINA DE PUNTA A PUNTA, TAMBIÉN ABAJO DE 900 ============================================================ 🔴 ARREGLADO EL 1-SET-2026 A LA NOCHE. Acá decía `width: min(430px, 100%)` + sombra, o sea: una hoja de 430px centrada arriba del fondo gris. De 430 a 899px eso dejaba, MEDIDO con Chrome, 169px de gris de cada lado a 768 (iPad vertical) y 225px a 880 — 470px de rango en formato celular estirado, que es justo lo que el dueño rechazó dos veces. AHORA LA COLUMNA OCUPA SIEMPRE EL ANCHO: es el mismo patrón de diario que ya regía de 900 para arriba (la barra y el fondo llegan a los dos bordes, el contenido topa adentro), sólo que el tope de adentro ya no empieza recién a los 900. ABAJO DE 430px NO CAMBIA UN PÍXEL, y es fácil de ver: ahí `min(430px, 100%)` YA daba 100%, y la sombra no se veía porque no había fondo a los costados. Medido a 320 y a 390: mismos anchos, mismos altos, las mismas 3 filas. QUIÉN PONE EL MARGEN AHORA: --margen-movil, en cada bloque que pinta fondo (las bandas, el cuerpo, la lista, el pie). Mismo recurso que --margen-lateral en escritorio y por el mismo motivo: un envoltorio con max-width le cortaría el fondo a la barra. ============================================================ */ .marco { min-height: 100vh; display: flex; justify-content: center; } .columna { width: 100%; background: var(--papel); display: flex; flex-direction: column; min-height: 100vh; /* `overflow-x: clip` Y NO `overflow: hidden` (2-set-2026). Los dos recortan igual de bien la animación de entrada de pantalla (los 28px de `translateX`, que era para lo que estaba el hidden), pero `hidden` convierte a la columna en un contenedor de scroll y eso ANULA el `position: sticky` de la barra: el navegador la pega al borde de ESE contenedor, que no se mueve, así que no pasa nada. `clip` recorta sin crear ese contenedor. Si algún día esto vuelve a `hidden`, la barra deja de seguir al que baja — y en silencio. */ overflow-x: clip; } /* ============================================================ LA BARRA CON EL MENÚ DESPLEGADO — EN TODAS LAS MEDIDAS ============================================================ 🔴 SE FUE EL ☰ Y SE FUE EL CAJÓN. Lo que había hasta hoy era un panel que entraba desde la izquierda con fondo oscuro atrás, con su ✕, su Escape, su trampa de foco y su `visibility:hidden`. Nada de eso existe más: las cinco entradas están escritas en la barra y se ven sin tocar nada, que es lo que pidió el dueño mirando el prototipo. LO QUE SE BORRÓ, PARA QUE NADIE LO BUSQUE: .fondo-panel, .panel, .panel-cabeza, .panel-marca, .panel-cerrar, .panel-lista, .panel-item, .panel-nota, .panel-pie y .btn-menu. En buscador.js se fueron con ellas abrirPanel, cerrarPanel, focoables y la trampa de Tab (unas ochenta líneas). LO QUE NO SE PIERDE AL SACAR EL CAJÓN, y era lo bueno que tenía: · dónde estoy parado → sigue marcado con aria-current, ahora sobre el ítem de la barra (ver .menu a[aria-current]); · teclado → cinco con href de verdad: se tabulan y se abren con Enter sin una línea de JS; · lector de pantalla → la barra es