/* =========================================================================== CARTAS · Webs --------------------------------------------------------------------------- TRES FORMAS DISTINTAS DE ENSENAR UNA CARTA. Aqui esta la diferencia de verdad entre una web y otra. Cambiar los colores y las fuentes no basta: un meson castellano y una casa ecuatoriana no se leen igual, asi que no pueden maquetarse igual. Se elige con un atributo en , al lado del tema: · lista La carta impresa de un meson. Dos columnas de texto, nombre, puntitos y precio, SIN foto en cada plato. Los platos que presume la casa salen con foto grande en la PORTADA, en el anticipo, que es donde un meson pone su escaparate. · fotos Foto grande en cada plato, protagonista absoluta. Para cocinas que entran por los ojos y por el color: latina, mexicana, hamburguesas, postres. · compartir Bloques por categoria con su encabezado, tarjetas horizontales. Para mezze, tapas y cualquier cocina donde se pide para el centro de la mesa y no un plato por persona. =========================================================================== */ /* ===================================================== VARIANTE: LISTA ==== */ /* La carta de un meson. Cero cajas, cero sombras: es papel impreso. */ [data-carta="lista"] .platos { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 62rem; } @media (min-width: 820px) { [data-carta="lista"] .platos { grid-template-columns: 1fr 1fr; column-gap: 4.5rem; } } [data-carta="lista"] .plato { display: block; background: none; /* Sin caja no hay fondo propio, asi que el color lo manda la seccion. Con el color fijo heredado de .plato salia texto oscuro sobre piedra oscura. */ color: inherit; --texto: inherit; --texto-suave: inherit; border: 0; border-radius: 0; box-shadow: none; padding: .95rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--tinta) 28%, transparent); } [data-carta="lista"] .plato:hover { transform: none; box-shadow: none; } /* Sin foto: en una carta impresa no hay foto de cada plato. */ [data-carta="lista"] .plato__foto { display: none; } [data-carta="lista"] .plato__cuerpo { padding: 0; gap: .15rem; } [data-carta="lista"] .plato__nombre { font-size: 1.06rem; } [data-carta="lista"] .plato__desc { font-size: .87rem; margin-top: .1rem; } [data-carta="lista"] .plato__precio { font-size: 1.06rem; } /* ===================================================== VARIANTE: FOTOS ==== */ /* La comida entra por los ojos. Foto grande arriba, y la ficha es la foto. */ [data-carta="fotos"] .platos { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } @media (min-width: 780px) { [data-carta="fotos"] .platos { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } } @media (min-width: 1120px) { [data-carta="fotos"] .platos { grid-template-columns: repeat(3, 1fr); } } [data-carta="fotos"] .plato__foto { aspect-ratio: 4 / 3; padding: 0; background: var(--plato-fondo); } /* OJO: aqui NO se pone object-fit:cover para todo. La caja es 4/3 y el plato recortado es cuadrado, asi que cover le corta la silueta y todos los platos acaban pareciendo el mismo circulo. El recortado se ve ENTERO (contain) y solo la foto ambiental llena la caja. */ [data-carta="fotos"] .plato__foto img { object-fit: contain; padding: .6rem; } [data-carta="fotos"] .plato[data-recorte="no"] .plato__foto img { object-fit: cover; padding: 0; } [data-carta="fotos"] .plato__cuerpo { padding: 1.1rem 1.2rem 1.3rem; } [data-carta="fotos"] .plato__nombre { font-size: 1.12rem; } /* ================================================= VARIANTE: COMPARTIR ==== */ /* Para el centro de la mesa. Tarjeta horizontal, foto a la izquierda, y el grupo se lee de un vistazo. */ [data-carta="compartir"] .platos { grid-template-columns: 1fr; gap: .9rem; } @media (min-width: 900px) { [data-carta="compartir"] .platos { grid-template-columns: 1fr 1fr; gap: 1.1rem; } } [data-carta="compartir"] .plato { flex-direction: row; align-items: stretch; } [data-carta="compartir"] .plato__foto { flex: none; width: 34%; max-width: 152px; /* Cuadrada y limitada. Con aspect-ratio:auto la altura la marcaba la imagen al 40 % del ancho de la tarjeta, o sea 190 px, y en una carta de nombre, precio y una linea de descripcion sobraba medio dedo de aire debajo. */ aspect-ratio: 1 / 1; padding: .75rem; /* El arco: la forma que hace que se lea como cocina arabe sin poner ni un azulejo. Cada tema define su --arco-foto; en los demas es none. */ border-radius: var(--arco-foto); } [data-carta="compartir"] .plato__cuerpo { padding: 1.1rem 1.2rem; justify-content: center; } @media (max-width: 759px) { /* UNA COLUMNA, PASE LO QUE PASE. Va aqui y no en base.css por especificidad: [data-carta="fotos"] .platos pesa 0,2,0 y le gana a .platos aunque la otra este dentro de un media query, porque un media query no suma peso. En 390 px, dos columnas dejan la ficha en 175 px y ahi no cabe ni el nombre del plato. */ [data-carta="fotos"] .platos, [data-carta="compartir"] .platos, [data-carta="lista"] .platos { grid-template-columns: 1fr; gap: .8rem; } /* Y la ficha se lee como una carta de verdad: foto pequena a la izquierda, nombre, precio y descripcion a lo ancho de la pantalla. */ [data-carta="fotos"] .plato, [data-carta="compartir"] .plato { flex-direction: row; align-items: stretch; } [data-carta="fotos"] .plato__foto, [data-carta="compartir"] .plato__foto { flex: none; width: 112px; max-width: 112px; aspect-ratio: auto; /* el 4/3 de escritorio aqui la hacia enorme */ padding: .45rem; } [data-carta="fotos"] .plato__foto img, [data-carta="compartir"] .plato__foto img { padding: 0; } [data-carta="fotos"] .plato__cuerpo, [data-carta="compartir"] .plato__cuerpo { padding: .8rem .9rem; } [data-carta="fotos"] .plato__nombre { font-size: .98rem; } /* El plato sin foto no deja un hueco vacio a la izquierda: ocupa todo. */ .plato[data-foto="no"] .plato__foto { display: none; } } /* ============================================== BLOQUE PROPIO DE CADA UNO == La seccion que solo tiene este restaurante y ninguno de los otros: el menu del dia de un meson, el reparto a domicilio de una casa latina, la terraza de un sitio con terraza. Es lo que remata la diferencia. */ .bloque-extra { position: relative; } .bloque-extra__caja { display: grid; gap: clamp(1.8rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 880px) { .bloque-extra__caja { grid-template-columns: 1fr 1fr; } .bloque-extra--invertido .bloque-extra__figura { order: -1; } } .bloque-extra__figura { border-radius: var(--radio); overflow: hidden; } .bloque-extra__figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .bloque-extra__precio { font-family: var(--display); font-size: clamp(2.6rem, 7vw, 4.2rem); line-height: 1; color: var(--marca); margin: .6rem 0 1.2rem; } .bloque-extra__precio small { display: block; font-family: var(--cuerpo); font-size: .9rem; color: var(--tinta-suave); letter-spacing: .04em; margin-top: .3rem; } .superficie-piedra .bloque-extra__precio { color: var(--acento-claro); } .bloque-extra__precio small { color: var(--texto-suave); } .lista-marcada { list-style: none; display: grid; gap: .7rem; margin-bottom: 1.8rem; } .lista-marcada li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1rem; } .lista-marcada li::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .55rem; background: var(--marca); /* El punto de la lista tambien cambia de forma con el tema. */ border-radius: var(--radio); } .superficie-piedra .lista-marcada li::before { background: var(--acento-claro); } /* =========================================================================== TRES HEROS DISTINTOS --------------------------------------------------------------------------- El hero es lo primero que se ve, y hasta ahora era el mismo en las tres webs: foto a pantalla completa, texto centrado. Cambiando solo el color, la sensacion al entrar era identica. Ahora cada arquetipo entra distinto. =========================================================================== */ /* --- CLASICO: foto a pantalla completa, texto centrado ------------------ Para el meson. Es el registro sobrio: la foto del comedor manda y el nombre va en medio, como el cartel de la fachada. */ /* (es el comportamiento por defecto, no hace falta nada) */ /* --- PARTIDO: media pantalla de color con el logo, media de foto -------- Para la casa latina. La foto del plato entra a saco por un lado y por el otro esta la marca. Es alegre y es lo que hacen las cartas de comida latina: color plano y producto. */ @media (min-width: 900px) { [data-hero="partido"] .hero { display: grid; grid-template-columns: 1fr 1fr; place-items: stretch; text-align: left; padding: 0; min-height: 92svh; } [data-hero="partido"] .hero__fondo { position: relative; grid-column: 2; grid-row: 1; inset: auto; width: 100%; height: 100%; } [data-hero="partido"] .hero__contenido { grid-column: 1; grid-row: 1; align-self: center; padding: 3rem clamp(2rem, 5vw, 4.5rem); max-width: none; } /* El lado del texto necesita fondo propio. Sin el, el texto claro del hero caia sobre el fondo claro de la pagina y no se leia nada. */ [data-hero="partido"] .hero { background: var(--fondo-hondo); } /* La vineta solo tapa la mitad de la foto, no el texto. */ [data-hero="partido"] .hero.vineta::after { left: 50%; background: linear-gradient(90deg, var(--fondo-hondo), transparent 22%), radial-gradient(ellipse 90% 80% at 60% 50%, transparent 40%, rgba(0,0,0,.5) 100%); } [data-hero="partido"] .brasa { inset: auto -20% -40% 40%; } [data-hero="partido"] .hero__botones { justify-content: flex-start; } [data-hero="partido"] .hero__lema { margin-inline: 0; } } /* El logo propio del cliente, cuando lo tiene. */ .hero__logo { max-width: min(78%, 420px); height: auto; margin: 0 auto 1.2rem; /* El logo ya llega recortado (fondo transparente), asi que la sombra sigue su silueta real y no una caja. */ filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); } [data-hero="partido"] .hero__logo { margin-left: 0; } /* AQUI HABIA UN sr-only QUE ESCONDIA EL h1, y se ha quitado. Tenia sentido cuando el logo del cliente vivia dentro del hero: enseñar el logo y el nombre escrito uno debajo del otro es decir dos veces lo mismo. Desde que el logo esta en la cabecera, esa regla dejaba el hero SIN el nombre del restaurante, y no se notaba porque el h1 seguia en el HTML: el navegador lo pintaba de 1x1 px. La leccion: una regla que esconde algo PORQUE otro elemento ya lo dice se muere con ese elemento. Si vuelve el logo al hero, vuelve esta regla. */ /* --- PANORAMICO: banda ancha y baja, texto abajo a la izquierda --------- Para la terraza. No necesita pantalla completa: necesita ANCHO, porque lo que vende es un sitio donde sentarse, no un plato. */ [data-hero="panoramico"] .hero { min-height: 78svh; align-items: end; text-align: left; padding-bottom: clamp(3rem, 7vw, 5rem); } [data-hero="panoramico"] .hero__contenido { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2rem); } [data-hero="panoramico"] .hero__lema { margin-inline: 0; } [data-hero="panoramico"] .hero__botones { justify-content: flex-start; } [data-hero="panoramico"] .brasa { display: none; } /* una terraza no tiene brasa */ [data-hero="panoramico"] .bajar { display: none; } /* =========================================================================== LA CARTA COMO PAGINA PROPIA --------------------------------------------------------------------------- Todo lo de aqui abajo es de carta.html, que ya no es una seccion del index sino una pagina con su titulo, su direccion y su ficha para Google. Lo que cambia respecto a la seccion que habia antes: · los platos van AGRUPADOS por categoria, todos visibles, con encabezado por grupo. Antes iban en una rejilla unica con la mitad en display:none esperando a que alguien pulsara un filtro. · el indice se queda pegado arriba mientras se baja, y NAVEGA en vez de esconder. · hay buscador, que en una carta de veinte platos es la diferencia entre encontrar el chaulafan y cerrar la pestana. =========================================================================== */ /* La cabecera de una pagina interior va fija desde el primer pixel, asi que hay que dejarle sitio: sin esto, el titulo nace debajo de ella. */ :root { --alto-cabecera: 4.3rem; } .pagina-interior { padding-top: var(--alto-cabecera); } /* --------------------------------------------------- PORTADA DE LA CARTA -- */ /* Banda corta, no hero. Quien entra aqui viene a leer los platos: hacerle bajar una pantalla entera de foto antes es cobrarle un peaje. */ .carta-portada { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem); position: relative; } .carta-portada__migas { font-size: .87rem; letter-spacing: .06em; text-transform: uppercase; /* --texto-tenue es el 45% de la tinta: vale para un adorno, no para texto que hay que leer. Daba 2,73 y el minimo de WCAG es 4,5. */ color: var(--texto-suave); display: flex; gap: .5rem; align-items: center; margin-bottom: .9rem; } .carta-portada__migas a { color: var(--texto-suave); } .carta-portada__migas a:hover { color: var(--marca); text-decoration: underline; } .carta-portada h1 { /* Mas pequeno que el h1 del hero: aqui el protagonista es la carta, no el nombre del restaurante, que ya va en la cabecera. */ font-size: clamp(2.6rem, 8vw, 4.6rem); margin-bottom: .7rem; } .carta-portada__entradilla { color: var(--texto-suave); max-width: var(--ancho-texto); font-size: 1.08rem; } /* Los cuatro datos que decide la gente antes de pedir. Van en
porque son pares de dato y valor de verdad, no una rejilla decorativa. */ .carta-portada__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(1.8rem, 4vw, 2.6rem); background: var(--linea-sup); border: 1px solid var(--linea-sup); border-radius: var(--radio); overflow: hidden; } @media (min-width: 720px) { .carta-portada__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .carta-portada__datos > div { background: var(--fondo); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; } .carta-portada__datos dt { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); } .carta-portada__datos dd { font-family: var(--display); font-size: 1.15rem; line-height: 1.2; color: var(--tinta); } /* ------------------------------------------------------- INDICE PEGAJOSO -- */ .carta-indice { position: sticky; /* La altura de la cabecera depende del tema (cada uno trae sus fuentes) y del ancho de pantalla. El valor de CSS es solo el punto de partida: el JavaScript mide la cabecera de verdad y publica --alto-cabecera-real. Sin eso, en movil la cabecera tapaba dos centimetros del indice. */ top: var(--alto-cabecera-real, var(--alto-cabecera)); z-index: 40; padding-block: .55rem; border-block: 1px solid var(--linea-sup); /* Sin fondo opaco, los platos se ven pasar por debajo del indice y el texto se lee sobre la foto de un chuleton. */ background-color: var(--acento); } .carta-indice__caja { display: flex; align-items: center; gap: 1rem; } .carta-indice__lista { list-style: none; display: flex; gap: .3rem; overflow-x: auto; /* La barra de scroll horizontal en movil es fea y ademas avisa peor de que hay mas categorias a la derecha que el propio desbordamiento. */ scrollbar-width: none; -ms-overflow-style: none; padding-block: .2rem; flex: 1; scroll-snap-type: x proximity; } .carta-indice__lista::-webkit-scrollbar { display: none; } .carta-indice__lista a { display: flex; align-items: center; gap: .4rem; white-space: nowrap; padding: .45rem .9rem; border-radius: 999px; font-size: .93rem; color: var(--texto); border: 1px solid transparent; transition: background-color .25s var(--curva), color .25s var(--curva); scroll-snap-align: start; } .carta-indice__lista a:hover { background: color-mix(in srgb, currentColor 14%, transparent); } /* La categoria en la que estas ahora mismo. Lo pone el JavaScript segun lo que se ve en pantalla, no el clic: si bajas con la rueda tambien se entera. */ .carta-indice__lista a[aria-current="true"] { background: var(--marca); color: var(--sobre-marca); font-weight: 600; } .carta-indice__cuenta { font-size: .74rem; opacity: .65; font-variant-numeric: tabular-nums; } .carta-indice__lista a[aria-current="true"] .carta-indice__cuenta { opacity: .8; } /* ----------------------------------------------------------- BUSCADOR ---- */ .carta-buscador { position: relative; flex: none; display: none; } @media (min-width: 700px) { .carta-buscador { display: block; } } .carta-buscador svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; pointer-events: none; } .carta-buscador input { font: inherit; font-size: .92rem; color: var(--texto); background: color-mix(in srgb, var(--fondo) 55%, transparent); border: 1px solid var(--linea-sup); border-radius: 999px; padding: .45rem .9rem .45rem 2.1rem; width: 13rem; transition: width .3s var(--curva), background-color .25s var(--curva); } .carta-buscador input::placeholder { color: var(--texto-suave); } .carta-buscador input:focus { width: 16rem; background: var(--fondo); } /* La cruz de limpiar de Safari sale gris oscuro sobre madera oscura. */ .carta-buscador input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; } /* ------------------------------------------------------ GRUPOS DE PLATOS -- */ .carta-cuerpo { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(3rem, 8vw, 6rem); } .carta-grupo { /* Es un
dentro de otro
: si hereda el padding de section quedan ocho rem entre cada grupo y la carta se lee a cuentagotas. */ padding-block: 0; margin-bottom: clamp(2.8rem, 7vw, 4.5rem); /* Al saltar desde el indice tienen que caber ENCIMA la cabecera fija y el propio indice pegajoso, o el titulo del grupo queda tapado por el. La suma la mide el JavaScript y la publica en --alto-pegado; el 9rem es el respaldo para cuando no hay JavaScript. Con el numero fijo que habia antes el titulo quedaba diez pixeles por debajo del indice: se leia "ARNES". */ scroll-margin-top: var(--alto-pegado, 9rem); } .carta-grupo:last-of-type { margin-bottom: 0; } .carta-grupo[hidden] { display: none; } .carta-grupo__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); padding-bottom: .6rem; border-bottom: 2px solid var(--marca); } .carta-grupo__cabeza h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); } .superficie-piedra .carta-grupo__cabeza { border-bottom-color: var(--acento-claro); } .carta-grupo__cuenta { flex: none; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave); font-variant-numeric: tabular-nums; } .carta-vacio { text-align: center; color: var(--texto-suave); padding: clamp(2rem, 6vw, 4rem) 0; font-size: 1.05rem; } .carta-vacio a { color: var(--marca); text-decoration: underline; } .superficie-piedra .carta-vacio a { color: var(--acento-claro); } /* -------------------------------------------------- LEYENDA DE ALERGENOS -- */ /* El Reglamento 1169/2011 obliga a que la informacion de alergenos este disponible. Aqui, y no en una hoja plastificada detras de la barra. */ .alergenos-leyenda { margin-top: clamp(3rem, 8vw, 5rem); padding: clamp(1.4rem, 4vw, 2.2rem); border: 1px dashed var(--linea-sup); border-radius: var(--radio); max-width: var(--ancho-texto); } .alergenos-leyenda h2 { font-size: 1.25rem; margin-bottom: .5rem; } .alergenos-leyenda p { color: var(--texto-suave); font-size: .95rem; } .alergenos-leyenda ul { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; } /* --------------------------------------------------------------- CIERRE -- */ /* La carta no termina en el vacio: termina en un telefono. */ .carta-cierre__caja { display: grid; gap: 1.6rem; justify-items: start; } .carta-cierre .hero__botones { justify-content: flex-start; margin-top: 1.4rem; } .carta-cierre__vuelta a { color: var(--texto-suave); border-bottom: 1px solid currentColor; padding-bottom: .1rem; font-size: .95rem; } .carta-cierre__vuelta a:hover { color: var(--texto); } /* =========================================================================== LAS TRES VARIANTES, EN LA PAGINA NUEVA --------------------------------------------------------------------------- Los grupos por categoria cambian la forma de cada variante, asi que cada una necesita su ajuste. Sin esto, la de "lista" (el meson) volvia a salir en rejilla de tarjetas y se perdia justo lo que la diferenciaba. =========================================================================== */ /* LISTA · el meson. La carta impresa a dos columnas, y ahora ademas con el grupo como encabezado de parte, que es exactamente como esta impresa una carta de verdad: ENTRANTES, y debajo la lista. */ [data-carta="lista"] .carta-grupo__cabeza { border-bottom-width: 1px; border-bottom-style: solid; } [data-carta="lista"] .carta-grupo__cabeza h2 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: .16em; text-transform: uppercase; } /* FOTOS · la casa latina. */ [data-carta="fotos"] .carta-grupo .platos { gap: 1.1rem; } /* COMPARTIR · el mezze. Tarjeta horizontal, y el grupo se lee entero de un vistazo, que es como se pide para el centro de la mesa. */ [data-carta="compartir"] .carta-grupo__cabeza h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); } /* =========================================================================== ANTICIPO DE CARTA, EN LA PORTADA --------------------------------------------------------------------------- Lo que queda del index: tres o cuatro platos y un boton. No es una carta recortada, es un escaparate, y por eso NO usa .plato: es mas grande, mas fotografico y no lleva ni alergenos ni descripcion. =========================================================================== */ .anticipo__platos { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.8rem, 2.5vw, 1.4rem); margin-bottom: clamp(1.8rem, 4vw, 2.6rem); } @media (min-width: 820px) { .anticipo__platos { grid-template-columns: repeat(4, 1fr); } /* Con tres destacados, cuatro columnas dejan un hueco al final. Se reparten. */ .anticipo__platos:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); } } .anticipo__plato { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--fondo-hondo); color: var(--tinta-clara); transition: transform .4s var(--curva); } html.motion .anticipo__plato:hover { transform: translateY(-6px) rotate(-.4deg); } .anticipo__foto { aspect-ratio: 4 / 5; overflow: hidden; } .anticipo__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .6s var(--curva); } html.motion .anticipo__plato:hover .anticipo__foto img { transform: scale(1.05); } /* El recortado se ve entero sobre el color de marca; cover le corta la silueta y todos acaban pareciendo el mismo circulo. Es la misma regla que en .plato. */ .anticipo__plato:not([data-recorte="no"]) .anticipo__foto { background: var(--plato-fondo); } .anticipo__plato:not([data-recorte="no"]) .anticipo__foto img { object-fit: contain; padding: 1rem; opacity: 1; filter: drop-shadow(var(--sombra-plato)); } .anticipo__texto { position: absolute; inset: auto 0 0 0; padding: 2.2rem 1rem .9rem; background: linear-gradient(180deg, transparent, rgba(0,0,0,.88)); } .anticipo__nombre { font-size: clamp(.95rem, 2.2vw, 1.15rem); line-height: 1.15; color: var(--tinta-clara); } .anticipo__precio { display: block; font-family: var(--display); color: var(--acento-claro); font-size: 1rem; margin-top: .2rem; } /* Las categorias como enlaces a su trozo de carta.html. Sirven a quien ya sabe lo que quiere y de paso le dicen a Google de que va cada parte de la carta. */ .anticipo__categoria { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; margin: 0 .35rem .5rem 0; border: 1px solid var(--linea-sup); border-radius: 999px; font-size: .9rem; color: var(--texto-suave); transition: border-color .25s var(--curva), color .25s var(--curva); } .anticipo__categoria span { font-size: .75rem; opacity: .6; font-variant-numeric: tabular-nums; } .anticipo__categoria:hover { border-color: var(--marca); color: var(--texto); } .anticipo__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: clamp(1.6rem, 4vw, 2.4rem); } .anticipo__cuenta { color: var(--texto-suave); font-size: .92rem; font-variant-numeric: tabular-nums; } /* --- LISTA: la foto aparece SOLO donde existe de verdad ----------------- Un mesón no pone foto de cada plato, y por eso esta variante no las lleva. Pero esconder la única foto buena que hay del entrecot, cuando el dueño la tiene subida en su propia ficha, es tirar el mejor argumento a la basura. Así que la foto sale, pequeña y a la izquierda, y solo en los platos que traen una foto de verdad. Los demás siguen leyéndose como carta impresa. */ [data-carta="lista"] .plato[data-foto="real"] { display: flex; /* .plato base es una columna (foto arriba, texto abajo). Sin devolverla a fila, la foto salia ENCIMA del nombre y rompia la linea de la carta. */ flex-direction: row; align-items: flex-start; gap: 1rem; } [data-carta="lista"] .plato[data-foto="real"] .plato__foto { display: block; flex: none; width: 78px; aspect-ratio: 1 / 1; border-radius: var(--radio-chico); overflow: hidden; padding: 0; margin-top: .2rem; background: var(--fondo-hondo); } [data-carta="lista"] .plato[data-foto="real"] .plato__foto img { width: 100%; height: 100%; object-fit: cover; filter: none; } [data-carta="lista"] .plato[data-foto="real"] .plato__cuerpo { flex: 1; min-width: 0; } /* El sello "De la casa" se ancla a la foto, y en 78 px no cabe. */