/* Wö Kàpi · la carta (menu.html y en/menu.html; la arma construir-menu.py). 1 de octubre de 2026,
desde la maqueta aprobada del juez. Usa solo el sistema (ajustes.css, SISTEMA.md): variables,
.contenedor, letras, .boton, .boton--contorno, .nota, .con-dibujo y .dibujo; la marca de JS es
html.js y la barra del sitio mide var(--barra-alto). js/carta.js no cambió: sus ganchos son
#carta, .carta-barra, .carta-vista, .carta-vistas a, #carta-q, .carta-buscar-estado, .carta-item,
.carta-pieza, .carta-ingredientes, .carta-combo, .carta-extra, .carta-promo y
.carta-sin-resultados.
Referencia: las cartas web de Ole & Steen, Tatte, Lune y Buvette. Arriba solo el título, una
línea y una barra (pestañas y buscador); abajo, la carta en dos columnas de lectura desde 992 y
en una por debajo, con foto chica solo en la repostería. Nada alrededor.
Jerarquía (escritorio / celular), dos pesos (400 y 700), cinco tamaños por pantalla:
h1 «Menú» Recoleta 48 / 32
grupo (Desayunos, Café…) Recoleta 30 / 24, con su dibujo a 20 px
sección (Tostadas, Dulces, Tacos) Recoleta 20
bajada, botones del cierre Helvetica 20 / Recoleta 20
plato y precio Helvetica 18 / 17, 700; el precio en café (var(--precio))
pestañas, tamaños, enlaces Helvetica 18 / 17, 400 (la pestaña activa, 700)
descripción, ingredientes, notas Helvetica 16
Nada en mayúscula; ningún rótulo espaciado; ninguna caja ni sombra; radio 8 en fotos y campo.
1. Cromo de la página 2. Cabecera 3. Barra (pestañas y buscador) 4. Vistas y grupos
5. Platos 6. Repostería 7. Extras, combos y promo 8. Cierre
9. Búsqueda y sin JS */
/* ── 1. Cromo de la página ─────────────────────────────────────────────── */
/* Tinta suave: solo los ingredientes abiertos de la repostería (5,6:1 sobre crema). */
.pagina-carta { --tinta-suave: rgba(43, 43, 43, .72); }
/* La barra del sitio no se esconde en la carta: las pestañas van pegadas debajo. */
.pagina-carta .navbar { transform: none !important; }
html:has(> body.pagina-carta) { scroll-padding-top: calc(var(--barra-alto) + 72px); }
@media (max-width: 767px) {
html:has(> body.pagina-carta) { scroll-padding-top: calc(var(--barra-alto) + 64px); }
}
/* ── 2. Cabecera: título, la línea y el idioma ─────────────────────────── */
.carta-cabecera { padding-top: calc(var(--barra-alto) + var(--aire-lectura)); }
.carta-titular {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: var(--canal);
align-items: baseline;
}
.carta-titular .titulo-pagina { grid-column: 1; grid-row: 1; }
.carta-idioma { grid-column: 2; grid-row: 1; margin: 0; }
.carta-idioma a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--tinta);
font-size: var(--t-cuerpo);
}
.carta-titular .bajada { grid-column: 1 / -1; margin-top: 12px; }
/* ── 3. Barra: pestañas y buscador en una sola fila ────────────────────── */
/* Escritorio y tableta: una fila pegada debajo de la barra del sitio. .carta-barra (las
pestañas) también es sticky para que js/carta.js mida la pila con su alto. */
.carta-herramientas { margin-top: var(--aire-zona); }
.carta-vistas { display: flex; gap: 0 32px; }
.carta-vistas a {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
min-height: 56px;
color: var(--tinta);
font-size: var(--t-cuerpo);
font-weight: 400;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
/* reserva el ancho del 700 para que la fila no salte al cambiar de pestaña */
.carta-vistas a::after {
content: attr(data-texto);
height: 0;
overflow: hidden;
visibility: hidden;
font-weight: 700;
}
.carta-vistas a[aria-current] { font-weight: 700; }
.carta-vistas a[aria-current]::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background-color: var(--carbon);
}
/* el subrayado al pasar, solo con mouse: con el dedo quedaba pegado en la pestaña tocada */
@media (hover: hover) {
.carta-vistas a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.carta-vistas a[aria-current]:hover { text-decoration: none; }
}
.carta-buscar { position: relative; }
.carta-buscar input {
box-sizing: border-box;
display: block;
width: 100%;
height: 44px;
margin: 0;
padding: 0 14px;
border: 1.5px solid rgba(43, 43, 43, .55); /* 3,3:1 sobre crema */
border-radius: var(--radio);
background-color: transparent;
color: var(--tinta);
font-family: var(--sans);
font-size: var(--t-cuerpo);
line-height: 1.2;
-webkit-appearance: none;
appearance: none;
}
.carta-buscar input::placeholder { color: rgba(43, 43, 43, .72); opacity: 1; }
.carta-buscar input:focus-visible { outline: 3px solid var(--carbon); outline-offset: 1px; }
.carta-buscar-estado { margin: 0; }
.carta-buscar-estado:empty { display: none; }
/* normalize.css pone [hidden] { display: none }, que pierde contra cualquier display de la
carta (un plato filtrado seguía a la vista). hidden="until-found" deja que el buscar del
navegador encuentre platos de otra vista. */
.carta [hidden]:not([hidden="until-found"]) { display: none !important; }
.carta .carta-vista[hidden="until-found"] { display: block; }
/* sin JS no hay buscador; con JS su lugar queda reservado desde el primer pintado */
html.js .carta .carta-buscar[hidden] { display: block !important; visibility: hidden; }
@media (min-width: 992px) {
.carta-herramientas {
position: sticky;
top: var(--barra-alto);
z-index: 20;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: var(--canal);
border-bottom: 1px solid var(--linea);
background-color: var(--crema);
}
.carta-barra { position: sticky; top: var(--barra-alto); order: 1; display: flex; }
/* El marcado va buscador y pestañas, el orden que se ve hasta 991 y el del teclado en todos los
anchos; desde 992 el buscador pasa a la derecha. Cualquier otro orden del marcado haría que el
teclado saltara en celular, donde se usa la carta desde la mesa.
Cuatro columnas de la grilla, y nunca menos de lo que mide el texto de ayuda (a 1024 se cortaba). */
.carta-buscar { order: 2; display: flex; flex-direction: column; justify-content: center; flex: 0 0 max(360px, calc((100% - 11 * var(--canal)) / 12 * 4 + 3 * var(--canal))); }
.carta-buscar-estado { padding-top: 4px; }
}
/* Celular y tableta (hasta 991, donde la barra del sitio pasa al panel): el buscador va arriba,
en el flujo y a todo el ancho; solo las pestañas quedan pegadas (48 px). */
@media (max-width: 991px) {
.carta-herramientas { display: contents; }
.carta-buscar { margin-top: var(--aire-zona); }
.carta-buscar input { height: 48px; }
.carta-buscar-estado { padding-top: 8px; }
.carta-barra {
position: sticky;
top: var(--barra-alto);
z-index: 20;
margin-top: 8px;
border-bottom: 1px solid var(--linea);
background-color: var(--crema);
}
.carta-vistas a { min-height: 48px; }
}
@media (max-width: 767px) {
.carta-vistas { justify-content: space-between; gap: 0 12px; }
/* el texto va al centro del ancho que reserva su versión en 700: los cuatro huecos se ven iguales */
.carta-vistas a { align-items: center; }
}
@media (max-width: 374px) {
.carta-vistas { gap: 0 8px; }
.carta-vistas a { font-size: var(--t-nota); }
}
/* zoom al 200 % o pantallas de 320: las cuatro pestañas pasan a dos renglones */
@media (max-width: 359px) {
.carta-vistas { flex-wrap: wrap; justify-content: flex-start; gap: 0 16px; }
.carta-vistas a { min-height: 44px; }
}
/* ── 4. Vistas y grupos ────────────────────────────────────────────────── */
/* Con JS se ve una vista por vez y la pestaña dice cuál; sin JS se apilan con su título. */
html.js .carta-vista-titulo {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.carta-vista-titulo { margin: var(--aire-seccion) 0 0; font-size: var(--t-pagina); }
.carta-vista:not([hidden]) { padding-top: var(--aire-zona); } /* una vista con hidden="until-found" no ocupa lugar */
.carta-vista > .carta-grupo, .carta-vista > .carta-par { margin-top: var(--aire-seccion); }
.carta-vista > .carta-vista-titulo + * { margin-top: 32px; }
html.js .carta-vista > .carta-vista-titulo + * { margin-top: 0; }
/* Dos grupos chicos lado a lado (Cócteles y Vinos, Repostería salada y Panadería): cada uno en
una columna de la grilla; en celular y tableta, uno debajo del otro. */
.carta-par > .carta-grupo + .carta-grupo { margin-top: var(--aire-seccion); }
.carta-cabeza { margin: 0; }
.carta-cabeza .titulo-seccion { margin: 0; }
.carta-cabeza .dibujo { height: 64px; max-width: 30%; }
.carta-grupo > .carta-nota { margin: 8px 0 0; max-width: var(--medida); }
.carta-grupo > .carta-nota + .carta-nota { margin-top: 0; }
.carta-cuerpo { margin-top: 32px; }
/* Desde 992 la carta va en dos columnas de lectura que caen en la grilla: la segunda arranca
en la columna 7. Sin cajas ni filetes entre platos; el aire separa. */
@media (min-width: 992px) {
.carta-cuerpo { column-count: 2; column-gap: var(--canal); }
.carta-cuerpo--extras { column-count: 3; }
.carta-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--canal); align-items: start; }
.carta-par > .carta-grupo + .carta-grupo { margin-top: 0; }
.carta-par .carta-cuerpo { column-count: 1; }
.carta-cuerpo--por-seccion { column-count: 1; }
.carta-cuerpo--por-seccion :is(.carta-piezas, .carta-lista--nombres) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(var(--filas, 1), auto);
grid-auto-flow: column;
column-gap: var(--canal);
align-items: start;
}
/* Especial de almuerzos: los platos a la izquierda con el almuerzo completo debajo, los
tacos a la derecha (las dos caras de la tarjeta impresa). En celular, uno debajo del otro
y el almuerzo completo al final, después de los tacos. */
.carta-cuerpo--especial { column-count: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--canal); align-items: start; }
.carta-cuerpo--especial > .carta-lista { grid-column: 1; grid-row: 1; }
.carta-cuerpo--especial > .carta-seccion { grid-column: 2; grid-row: 1 / span 2; }
.carta-cuerpo--especial > .carta-seccion > .carta-subtitulo { margin-top: 0; }
.carta-cuerpo--especial > .carta-combo { grid-column: 1; grid-row: 2; }
}
@media (max-width: 767px) {
.carta-cuerpo { margin-top: 24px; }
}
/* Título de una sección dentro de un grupo (Tostadas, Wraps, Matcha, Dulces). */
.carta-subtitulo {
margin: 32px 0 16px; /* arriba de una columna el margen se trunca solo */
font-family: var(--serif);
font-size: var(--t-pieza);
font-weight: 700;
line-height: 1.25;
break-after: avoid;
}
.carta-cuerpo > :first-child > .carta-subtitulo:first-child { margin-top: 0; }
.carta-cuerpo .carta-seccion > .carta-nota { margin: -8px 0 16px; font-size: var(--t-nota); break-after: avoid; }
/* Una sección corta no se parte entre las dos columnas (si es más alta que la columna, sí). */
.carta-cuerpo .carta-seccion, .carta-cuerpo .carta-subseccion { break-inside: avoid; }
/* ── 5. Platos ─────────────────────────────────────────────────────────── */
.carta-lista, .carta-piezas, .carta-extras, .carta-variantes { margin: 0; padding: 0; list-style: none; }
.carta-item, .carta-combo { padding-bottom: 20px; break-inside: avoid; }
.carta-item--corto { padding-bottom: 14px; } /* sin descripción: un renglón (los cafés) */
.carta-linea {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 0;
}
.carta-nombre { font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.35; }
.carta-porcion { font-weight: 400; }
.carta-precio {
flex: 0 0 auto;
color: var(--precio);
font-size: var(--t-cuerpo);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.35;
white-space: nowrap;
}
.carta-desc { margin: 4px 0 0; max-width: var(--medida); font-size: var(--t-nota); line-height: 1.5; }
.carta-variantes { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 4px; font-size: var(--t-cuerpo); line-height: 1.35; }
.carta-variantes li { white-space: nowrap; }
/* Sin precio base ni descripción (los cafés por tamaño): los tamaños van en el renglón del
nombre, a la derecha; si no entran, bajan solos al renglón siguiente. */
.carta-item--compacto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.carta-item--compacto .carta-variantes { margin-top: 0; }
@media (max-width: 767px) {
.carta-item, .carta-combo { padding-bottom: 16px; }
.carta-item--corto { padding-bottom: 12px; }
}
/* ── 6. Repostería: foto chica, nombre y precio; los ingredientes al abrir ── */
.carta-pieza { padding-bottom: 16px; break-inside: avoid; }
.carta-pieza summary, .carta-pieza-fila {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
column-gap: 20px;
align-items: center;
min-height: 88px;
list-style: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.carta-pieza-fila { cursor: default; }
.carta-pieza summary::-webkit-details-marker { display: none; }
.carta-pieza summary::marker { content: ""; }
.carta-pieza img {
display: block;
width: 88px;
height: 88px;
border-radius: var(--radio);
object-fit: cover;
}
.carta-pieza-texto { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.carta-pieza-nombre { font-size: var(--t-cuerpo); font-weight: 700; line-height: 1.35; }
@media (hover: hover) {
.carta-pieza summary:hover .carta-pieza-nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
}
.carta-pieza summary:focus-visible { outline: 3px solid var(--carbon); outline-offset: 3px; border-radius: var(--radio); }
.carta-ingredientes > p { margin: 8px 0 0 108px; max-width: var(--medida); color: var(--tinta-suave); font-size: var(--t-nota); line-height: 1.5; }
/* Las medialunas sin foto (la de almendra, las saladas): solo el nombre, en una lista aparte
después de las fotos de su sección. Dentro de la grilla de fotos dejaban un hueco a la izquierda. */
.carta-lista--nombres .carta-item { padding-bottom: 12px; }
.carta-piezas + .carta-lista--nombres { margin-top: 4px; }
@media (max-width: 767px) {
.carta-pieza summary, .carta-pieza-fila { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; min-height: 72px; }
.carta-pieza img { width: 72px; height: 72px; }
.carta-ingredientes > p { margin-left: 88px; }
}
/* ── 7. Extras, combos y promo ─────────────────────────────────────────── */
.carta-familia { break-inside: avoid; padding-bottom: 24px; }
.carta-familia .carta-subtitulo { margin-top: 0; }
#extras-cafe { margin-top: 32px; padding-bottom: 0; }
.carta-extra {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 2px 0;
font-size: var(--t-cuerpo);
line-height: 1.35;
}
.carta-extras--fila { display: flex; flex-wrap: wrap; gap: 0 24px; }
.carta-extras--fila .carta-extra { justify-content: flex-start; gap: 8px; }
/* En celular los extras siguen en lista, con el precio a la derecha (como en escritorio): la
versión seguida ahorraba alto pero dejaba renglones dentados sin columna de precios. */
@media (max-width: 767px) {
.carta-familia { padding-bottom: 16px; }
}
/* Un combo se suma a cualquier plato del grupo: cierra el grupo con un filete. */
.carta-combo { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--linea); }
.carta-promo { margin: 0 0 16px; max-width: var(--medida); }
.carta-promo p { margin: 0; }
/* ── 8. Cierre: un solo bloque ─────────────────────────────────────────── */
.carta-cierre {
margin-top: var(--aire-seccion);
padding-top: var(--aire-zona);
padding-bottom: var(--aire-banda);
border-top: 1px solid var(--linea);
}
.carta-cierre > * { margin: 0; max-width: var(--medida); }
.carta-cierre > * + * { margin-top: var(--aire-bloque); }
.carta-acciones { display: flex; flex-wrap: wrap; gap: 16px; max-width: none !important; margin-bottom: 8px !important; }
.carta-cierre > .nota + .nota { margin-top: 8px; }
/* el enlace al portal sigue en línea con el texto; el relleno le da 44 px de toque sin mover renglones */
.carta-negocios a { padding: 16px 0; }
/* La línea del portal se dice solo en Repostería (R8: el único lugar de la carta que lo nombra). */
.carta:not(:has(#reposteria:not([hidden]))) .carta-negocios { display: none; }
@media (max-width: 767px) {
.carta-acciones { gap: 12px; }
.carta-acciones .boton { width: 100%; }
}
/* ── 9. Búsqueda y sin JS ──────────────────────────────────────────────── */
/* Mientras se busca se ven todas las vistas con lo que coincide: las pestañas no se dibujan
(carta.js mide la pila sin ellas) y el campo con su cuenta queda arriba. */
.carta-buscando .carta-barra { display: none; }
/* Desde 992 la barra va pegada; mientras se busca vuelve al flujo, arriba de los resultados.
Pegada, el campo ya estaba arriba y js/carta.js no movía nada: con la carta bajada, los
resultados quedaban por encima de la pantalla o debajo de la barra (y a 1024 la barra cortaba
el botón de WhatsApp del cierre). Suelta, carta.js sube el campo y los resultados arrancan
debajo. El campo se queda a la derecha: sin las pestañas, el space-between lo llevaba al
principio de la fila, un salto de 800 px mientras se escribe. */
@media (min-width: 992px) {
.carta-buscando .carta-herramientas { position: static; }
.carta-buscando .carta-buscar { margin-left: auto; }
}
.carta-sin-resultados { padding-top: var(--aire-zona); }
.carta-sin-resultados p { margin: 0; max-width: var(--medida); }
.carta-sin-resultados a { padding: 14px 0; }
@media print {
.carta-herramientas, .carta-cierre .carta-acciones { display: none !important; }
.carta .carta-vista[hidden] { display: block !important; content-visibility: visible; }
.carta-ingredientes > p { display: block; }
}
/* Los resultados llevan el mismo aire arriba de cada grupo (56 / 40): también el primero, que
quedaba pegado al campo, y el primero de cada vista, que quedaba a 15 px del último plato de la
anterior. Un par sin resultados no ocupa lugar; desde 992 sus dos grupos siguen lado a lado. */
.carta-buscando .carta-vista { padding-top: 0; }
html.js .carta-buscando .carta-vista > :is(.carta-grupo, .carta-par) { margin-top: var(--aire-zona); }
.carta-buscando .carta-par:not(:has(> .carta-grupo:not([hidden]))) { display: none; }
.carta-buscando .carta-par > .carta-grupo + .carta-grupo { margin-top: 0; }
@media (max-width: 991px) {
.carta-buscando .carta-par > .carta-grupo:not([hidden]) + .carta-grupo { margin-top: var(--aire-zona); }
}