/* SAGAR · web nueva (demo, 01/10/2026). Hecha sobre la home de Redondo (29/09), que venía de la de Lima Nikkei (23/09): las piezas son las mismas; la piel es suya, al final, en «SAGAR». Letras: Cormorant Garamond (títulos) y Manrope (texto), las dos SIL OFL (fuentes/OFL-*.txt). */ /* Lima Nikkei · home de marca (demo, 23/09/2026) Negro tinta y crema (briefing de Eloy); un solo acento: dorado (Eloy, vídeo 23/09: «el rojo le quita prestigio… tirar por el dorado y el cremita»; referencia, restaurantetoki.com). Letra (28/09/2026, lo pidió Ernesto el 27/09 con su manual de identidad v2, apartado 2.1): títulos en KyivType Sans, la variante Regular3, la misma que usa su manual; texto en D-DIN, gemela libre de su DINPro (comercial: licencia web aparte). «Los títulos no pueden ir en negrita»: la de títulos se declara para TODOS los grosores con un solo archivo regular, así ninguna regla que pida 600 u 800 la engorda ni el navegador se inventa una negrita. Licencias y origen de cada archivo: fuentes/LICENCIAS.txt. KyivType Sans © Dmitry Rastvortsev, CC BY-ND 4.0. */ @font-face { font-family: "Titulos"; src: url("fuentes/cormorant-garamond-300-700.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Titulos"; src: url("fuentes/cormorant-garamond-italic-500.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: "Texto"; src: url("fuentes/manrope-400-700.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } :root { --tinta: #0e1721; --tinta-2: #131e2b; --tinta-3: #26344a; --crema: #f6f1e7; --crema-2: #aeb7c2; --acento: #ffc999; --display: "Titulos", Georgia, serif; --texto: "Texto", "Helvetica Neue", Arial, sans-serif; --ancho: 1240px; --lado: clamp(16px, 5vw, 56px); --curva: cubic-bezier(.2, .7, .1, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; } body { margin: 0; background: var(--tinta); color: var(--crema); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; } h2 { font-size: clamp(2rem, 5.2vw, 3.7rem); text-wrap: balance; } .sangre h2 em { display: block; } /* «Al centro de la mesa. / Y que pasen los palillos.»: la Y baja con su frase */ h2 em, h1 em { font-style: normal; color: var(--acento); } p { margin: 0 0 1em; } figure { margin: 0; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .saltar { position: absolute; left: 12px; top: -60px; background: var(--crema); color: var(--tinta); padding: 10px 14px; z-index: 100; border-radius: 6px; } .saltar:focus { top: 12px; } .ceja { font-family: var(--texto); font-size: .74rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--crema-2); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .8em; } .ceja::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .seccion { padding: clamp(80px, 12vw, 150px) var(--lado); } .cabeza-seccion { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; } .cabeza-seccion .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .cabeza-seccion--izq { text-align: left; margin-left: max(0px, calc((100% - var(--ancho)) / 2)); } .cabeza-seccion--izq .ceja::after { display: none; } .cabeza-seccion > p:not(.ceja) { color: var(--crema-2); margin-top: 1.2rem; max-width: 52ch; } /* Botones */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.6em; border-radius: 999px; font-family: var(--texto); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .3s, color .3s, border-color .3s, transform .3s var(--curva); } .boton--crema { background: var(--crema); color: var(--tinta); } .boton--crema:hover { background: #fff8ea; transform: translateY(-2px); } .boton--linea { border: 1px solid rgba(239, 229, 210, .45); color: var(--crema); } .boton--linea:hover { border-color: var(--crema); background: rgba(239, 229, 210, .08); } .boton--peque { min-height: 40px; padding: 0 1.2em; font-size: .7rem; } .boton--ancho { width: 100%; } /* Sello 日系: el hanko de la casa */ .sello { font-family: "Sello", var(--display); font-weight: 600; display: inline-grid; place-items: center; width: 44px; padding: 8px 0; line-height: 1.05; font-size: 1.15rem; text-align: center; background: var(--tinta); color: var(--acento); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--acento), 0 10px 26px rgba(0, 0, 0, .45); } .sello--grande { width: 64px; font-size: 1.7rem; padding: 12px 0; margin-bottom: 1.4rem; } .sello--flota { position: absolute; right: -14px; top: 28px; width: 58px; font-size: 1.55rem; padding: 12px 0; } /* ───────── Carta y Reserva, flotantes (Eloy, 23/09; como lampadini.es) ───────── */ .flotante { position: fixed; z-index: 50; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; padding: 6px; gap: 6px; border-radius: 999px; background: rgba(12, 10, 9, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(239, 229, 210, .16); } .flotante a { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 132px; padding: 0 1.6em; border-radius: 999px; text-decoration: none; font: 700 .78rem/1 var(--texto); letter-spacing: .26em; text-transform: uppercase; color: var(--crema); transition: background .3s, color .3s; } .flotante a:hover { background: rgba(239, 229, 210, .1); } .flotante a:last-child { background: var(--acento); color: var(--tinta); } .flotante a:last-child:hover { background: #d6b986; } @media (max-width: 560px) { .flotante { left: 12px; right: 12px; transform: none; } .flotante a { flex: 1; min-width: 0; } } /* ───────── 1 · Portada ───────── */ .portada { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 140px var(--lado) 200px; overflow: hidden; isolation: isolate; } .portada__videos { position: absolute; inset: 0; z-index: -2; } .portada__movil, .portada__ancho, .portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* En el móvil, debajo del vídeo, su primer fotograma como imagen normal (el mismo archivo que el póster), un píxel más baja que la pantalla: Google no cuenta el póster de un vídeo y una imagen a pantalla exacta la toma por fondo. Con el aviso de cookies del grupo, sin ella «lo principal» era el aviso, que llega el último (Lima Nikkei, 30/09: de 76 a 97). */ .portada__foto { height: calc(100% - 1px); } .portada__ancho { display: none; } @media (min-width: 900px) { .portada__ancho { display: block; animation: acerca 2.4s var(--curva) both; } .portada__movil, .portada__foto { display: none; } } @keyframes acerca { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } } .portada__velo { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 55%, rgba(12, 10, 9, .78), rgba(12, 10, 9, .4) 80%), linear-gradient(to bottom, rgba(12, 10, 9, .7), transparent 22%, transparent 70%, var(--tinta)); } .portada__texto { text-align: center; max-width: 1180px; } .marca { margin: 0; text-align: center; line-height: 1; text-decoration: none; } /* Su logotipo oficial con el isotipo (Ernesto, 27/09: «usemos el isotipo para resaltar la marca»), en el crema de su paleta: su manual no deja pintarlo en dorado. Sustituye al de letra «LIMA NIKKEI · MADRID» del 23/09. */ .marca__logo { display: block; width: auto; height: 76px; margin: 0 auto; } .portada__logo { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; } .portada__logo .marca__logo { height: clamp(84px, 8.4vw, 118px); } .portada h1 .ceja { display: flex; justify-content: center; color: var(--crema); } .portada h1 .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .portada__nombre { display: block; font-size: clamp(2.5rem, 6.4vw, 5.6rem); line-height: 1.02; letter-spacing: -.015em; } .portada__nombre em { display: block; } .portada__lema { max-width: 46ch; margin: 1.6rem auto 2.2rem; color: var(--crema); font-size: clamp(1rem, 1.6vw, 1.15rem); } .portada__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .sellos { list-style: none; padding: 0; margin: 2.6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .sellos li { display: grid; gap: 2px; padding: 10px 18px; border: 1px solid rgba(239, 229, 210, .28); border-radius: 6px; background: rgba(12, 10, 9, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-decoration: none; font-size: .72rem; letter-spacing: .08em; color: var(--crema-2); text-align: center; } .sellos a { display: grid; gap: 2px; text-decoration: none; color: inherit; } .sellos__marca { font-family: var(--display); font-size: 1.05rem; color: var(--crema); letter-spacing: .02em; } .portada__bajar { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; text-decoration: none; font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--crema-2); } .portada__bajar i { width: 1px; height: 44px; background: linear-gradient(var(--crema), transparent); animation: gota 2.2s ease-in-out infinite; transform-origin: top; } @keyframes gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } /* Entrada del texto de portada */ .js .portada__texto > * { opacity: 0; transform: translateY(22px); animation: sube 1.1s var(--curva) forwards; } .js .portada__texto > :nth-child(2) { animation-delay: .25s; } .js .portada__texto > :nth-child(3) { animation-delay: .4s; } .js .portada__texto > :nth-child(4) { animation-delay: .55s; } @keyframes sube { to { opacity: 1; transform: none; } } /* ───────── Aparecer al bajar ───────── */ .js .aparece { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--curva), transform 1s var(--curva); } .js .aparece.visible { opacity: 1; transform: none; } /* ───────── 2 · La casa ───────── */ .casa { display: grid; gap: clamp(40px, 7vw, 100px); max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; align-items: center; } .casa__foto { position: relative; aspect-ratio: 4 / 5; } .casa__pase { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; } .casa__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; opacity: 0; transition: opacity 2.2s ease; } .casa__foto img.activa { opacity: 1; animation: lento 9s linear both; } @keyframes lento { from { transform: scale(1.06); } to { transform: none; } } .casa__texto > p:not(.ceja) { color: var(--crema-2); max-width: 54ch; } .casa__texto h2 { margin-bottom: 1.6rem; } .cita { margin: 2.2rem 0 0; padding-left: 22px; border-left: 1px solid var(--acento); } .cita p { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.45; color: var(--crema); margin: 0 0 .6rem; } .cita footer, .prensa__cita footer, .plato footer { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--crema-2); } cite { font-style: normal; color: var(--crema); } @media (min-width: 900px) { .casa { grid-template-columns: 5fr 6fr; } } @media (max-width: 899px) { .sello--flota { right: 12px; top: 12px; } } /* ───────── 4 · Banda ───────── */ .banda { background: var(--acento); overflow: hidden; } .banda__pista { display: flex; align-items: center; gap: 28px; width: max-content; padding: 20px 0; animation: desliza 45s linear infinite; } /* Ojo: esta animación vivía junto al carrusel de platos y se fue con él al quitarlo (23/09): va aquí, con la banda. */ @keyframes desliza { to { transform: translateX(-50%); } } .banda span { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); white-space: nowrap; } .banda { color: var(--tinta); } .banda b { font-weight: 400; color: var(--tinta); opacity: .55; } /* ───────── 5 · La carta ───────── */ .carta__fichas { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho); display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } .carta__fichas a { display: grid; gap: 6px; text-decoration: none; } .carta__fichas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: 8px; transition: filter .5s, opacity .5s, transform .6s var(--curva); } .carta__fichas b { font-family: var(--display); font-weight: 600; font-size: 1.12rem; line-height: 1.2; } .carta__fichas small { color: var(--crema-2); font-size: .85rem; line-height: 1.4; } /* Dos líneas y el corte donde se lee (Eloy, doc 4: «que nunca sobrepase dos líneas»): lo marca un
en cada texto. */ .carta__fichas small { display: block; white-space: nowrap; } @media (min-width: 700px) { .carta__fichas { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .carta__fichas { grid-template-columns: repeat(6, 1fr); } } @media (hover: hover) { .carta__fichas:hover li:not(:hover) img { filter: grayscale(1) brightness(.55); } .carta__fichas li:hover img { transform: scale(1.03); } } .carta__todo { text-align: center; margin-top: 56px; } /* ───────── 6 · Foto a sangre ───────── */ .sangre { position: relative; min-height: 88svh; display: grid; place-items: center; overflow: hidden; isolation: isolate; text-align: center; padding: 0 var(--lado); } .sangre__foto { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; } .sangre__foto img { width: 100%; height: 100%; object-fit: cover; } /* Más oscura (Eloy, doc 3: «dale un poco de opacidad negra… si no las letras no destacan») */ .sangre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(65% 60% at 50% 50%, rgba(12, 10, 9, .74), rgba(12, 10, 9, .5)); } .sangre .ceja { color: var(--crema); } .sangre .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .sangre h2 { font-size: clamp(2.4rem, 7vw, 5.4rem); } /* El bloque de eventos (30/09): la misma banda, con su frase y el botón que lleva a la landing. */ .sangre--eventos { min-height: 78svh; } .sangre--eventos h2 { font-size: clamp(2.2rem, 6vw, 4.6rem); } /* Lo que viene detrás de la banda de eventos respira como cualquier sección (Angel, 30/09: «la foto de arriba que va a sangre queda pegada a la galería de abajo»): Celebraciones venía sin aire arriba porque en Lima Nikkei la precedían las cifras, que ya lo dejaban. */ .sangre--eventos + .pisco { padding-top: clamp(80px, 12vw, 150px); } .sangre__entrada { max-width: 34rem; margin: 1.1rem auto 1.6rem; color: var(--crema-2); font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.55; } /* ───────── 7 · Platos con titular ───────── */ .platos__rejilla { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 16px; } .plato { position: relative; overflow: hidden; border-radius: 4px; background: var(--tinta-2); min-height: 380px; display: flex; align-items: flex-end; isolation: isolate; } .plato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--curva); } .plato:hover img { transform: scale(1.05); } .plato::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 10, 9, .95) 5%, rgba(12, 10, 9, .35) 55%, transparent); } .plato__texto { padding: 26px; } .plato h3 { font-size: 1.4rem; margin-bottom: 14px; } .plato blockquote { margin: 0; } .plato blockquote p { font-family: var(--display); font-size: 1.05rem; color: var(--crema); line-height: 1.45; margin-bottom: .5rem; } /* La tarjeta sin foto, en papel washi con olas seigaiha en dorado que suben desde abajo (Angel, 23/09: «el fondo es muy básico… estaría bueno que tuviera textura»). Las olas recuerdan a las de su logo; todo en SVG, sin fotos. */ .plato--letra { background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23w)'/%3E%3C/svg%3E"); color: var(--tinta); align-items: center; } .plato--letra::before { display: block; inset: auto 0 0 0; height: 62%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Ccircle cx='30' cy='0' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='30' cy='0' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='0' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='0' cy='15' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='15' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='60' cy='15' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='15' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='30' cy='30' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='30' cy='30' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='0' cy='45' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='45' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='30' fill='%23efe5d2'/%3E%3Ccircle cx='60' cy='45' r='30' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='24' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='18' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='12' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3Ccircle cx='60' cy='45' r='6' fill='none' stroke='%23b8955c' stroke-opacity='.55' stroke-width='1.1'/%3E%3C/svg%3E") 0 100% / 60px 30px repeat; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 100%); } .plato--letra .plato__texto { align-self: center; } /* En el móvil la tarjeta mide lo que su contenido, y las olas quedan como una franja abajo (Angel, 23/09: «se siente súper vacía») */ @media (max-width: 699px) { .plato--letra { min-height: 0; } .plato--letra .plato__texto { padding: 34px 26px 96px; } .plato--letra::before { height: 58%; } } .plato--letra h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); } .plato--letra { container-type: inline-size; } /* La cita de una palabra, tan grande como quepa en SU tarjeta (en PC la tarjeta es estrecha y «Imprescindible.» se salía) */ .plato--letra blockquote p { color: var(--tinta); font-size: min(2.2rem, 8.6cqi); line-height: 1.15; white-space: nowrap; } .plato--letra footer, .plato--letra cite { color: #5b5047; } @media (min-width: 700px) { .platos__rejilla { grid-template-columns: repeat(2, 1fr); } .plato--grande { grid-column: span 2; min-height: 520px; } } @media (min-width: 1000px) { .platos__rejilla { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 330px; } .plato { min-height: 0; } .plato--grande { grid-column: span 2; grid-row: span 2; min-height: 0; } .plato--grande h3 { font-size: 2rem; } .plato--grande blockquote p { font-size: 1.35rem; } } /* ───────── 8 · Cifras ───────── */ .cifras { padding-top: 0; } .cifras__lista { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho); display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--tinta-3); border-radius: 4px; } .cifras li { padding: 34px 16px; text-align: center; display: grid; gap: 8px; border-right: 1px solid var(--tinta-3); border-bottom: 1px solid var(--tinta-3); } .cifras li:nth-child(2n) { border-right: 0; } .cifras li:nth-child(n+3) { border-bottom: 0; } .cifras b { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; font-variant-numeric: tabular-nums; } .cifras span { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-2); } @media (min-width: 800px) { .cifras__lista { grid-template-columns: repeat(4, 1fr); } .cifras li { border-bottom: 0; } .cifras li:nth-child(2n) { border-right: 1px solid var(--tinta-3); } .cifras li:last-child { border-right: 0; } } /* ───────── 9 · Pisco ───────── */ .pisco { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: 56px; align-items: center; padding-top: 0; } .pisco__texto > p:not(.ceja) { color: var(--crema-2); max-width: 50ch; } .pisco__texto h2 { margin-bottom: 1.6rem; } .pisco__texto .boton { margin-top: 1rem; } .pisco__mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pisco__mosaico figure { overflow: hidden; border-radius: 4px; } .pisco__mosaico img, .pisco__mosaico video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; } .pisco__video { grid-row: span 2; } .pisco__video video { aspect-ratio: auto; } @media (min-width: 900px) { .pisco { grid-template-columns: 5fr 6fr; } } /* ───────── 10 · Prensa ───────── */ /* LA TEXTURA (Eloy, doc 4, 23/09: «que sorprendieses con algo de textura de fondo… enfocado en lo japo, nikkei… sutil, para lograr ese efecto de "vaya detallitos"»; referencias, el mármol de restaurantetoki.com y elbohio.net). Mármol negro con vetas doradas finas —el oro en las grietas, como el kintsugi—, dibujado por nosotros (lima-nikkei/texturas/generar-marmol.html), 25 KB. Los bordes se funden a negro para que no haga corte. */ .prensa { background: linear-gradient(var(--tinta), rgba(12, 10, 9, 0) 22%, rgba(12, 10, 9, 0) 78%, var(--tinta)), linear-gradient(rgba(12, 10, 9, .38), rgba(12, 10, 9, .38)), url("texturas/marmol.webp") center / cover no-repeat, var(--tinta-2); } .prensa__carrusel { max-width: 980px; margin: 0 auto; text-align: center; } .prensa__diapos { display: grid; } .prensa__cita { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .8s var(--curva), transform .8s var(--curva), visibility 0s .8s; } .prensa__cita.activa { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .prensa__cita p { font-family: var(--display); font-size: clamp(1.7rem, 4.2vw, 3.1rem); line-height: 1.28; margin-bottom: 1.6rem; } .prensa__cita a { text-decoration: none; border-bottom: 1px solid rgba(239, 229, 210, .35); } .prensa__mandos { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; } .flecha { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(239, 229, 210, .35); background: none; color: var(--crema); cursor: pointer; font-size: 1rem; } .flecha:hover { border-color: var(--crema); } .puntos { display: flex; gap: 4px; } .puntos button { width: 28px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; } .puntos button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 229, 210, .3); transition: background .3s, transform .3s; } .puntos button[aria-selected="true"]::before { background: var(--acento); transform: scale(1.3); } .prensa__cinta { margin: clamp(56px, 8vw, 90px) auto 0; max-width: var(--ancho); border-top: 1px solid var(--tinta-3); padding-top: 40px; overflow: hidden; } .prensa__medios { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; } .prensa__medios .duplicado { display: none; } /* En el móvil, los logos pasan en fila en vez de amontonarse (Angel, 23/09) */ @media (max-width: 799px) { .prensa__cinta { margin-left: calc(-1 * var(--lado)); margin-right: calc(-1 * var(--lado)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .prensa__medios { flex-wrap: nowrap; justify-content: flex-start; gap: 44px; width: max-content; padding-right: 44px; animation: desliza 26s linear infinite; } .prensa__medios .duplicado { display: list-item; } .prensa__medios .medio { height: 26px; } } .prensa__medios a { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.5rem); text-decoration: none; color: var(--crema-2); transition: color .3s; } .prensa__medios a:hover { color: var(--crema); } .prensa__extra { text-align: center; color: var(--crema-2); margin-top: 28px; font-size: .95rem; } /* ───────── 11 · Reservar ───────── */ .reservar__tarjetas { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; } .tarjeta { padding: clamp(26px, 4vw, 44px); border: 1px solid var(--tinta-3); border-radius: 6px; background: var(--tinta-2); display: flex; flex-direction: column; } .tarjeta h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 12px; } .tarjeta > p:not(.ceja) { color: var(--crema-2); } .tarjeta .boton { margin-top: auto; } .tarjeta__nota { margin: 16px 0 0; font-size: .9rem; text-align: center; } .tarjeta__nota a { color: var(--crema); } @media (min-width: 800px) { .reservar__tarjetas { grid-template-columns: 1fr 1fr; } } /* ───────── 12 · Pie ───────── */ /* Abajo, 110 px de hueco para la barra flotante: sin él tapaba el aviso legal en el móvil (la regla suelta de arriba quedaba pisada) */ .pie { padding: 40px var(--lado) 110px; overflow: hidden; border-top: 1px solid var(--tinta-3); } .pie__gigante { font-family: var(--display); font-weight: 800; text-transform: uppercase; text-align: center; white-space: nowrap; font-size: clamp(3rem, 12.4vw, 13rem); line-height: .9; letter-spacing: -.01em; margin: 24px 0 56px; /* En dorado (Eloy, doc 3): del dorado claro arriba al acento, que se apaga abajo */ background: linear-gradient(180deg, #e2c894 0%, var(--acento) 45%, rgba(197, 165, 114, .22) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Los enlaces de dentro del texto, sin subrayado (Eloy, 05/10/2026, «muy importante para todos los restaurantes»: «que no se vea el subrayado… la negrita pasable… pero que no sea tan cantoso que sea un link y se nos vayan»). Se distinguen por la negrita y un tono más claro; el subrayado solo sale al pasar el ratón o al llegar con el teclado. */ .enlace { color: var(--crema); font-weight: 600; text-decoration: none; } .enlace:hover, .enlace:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--acento); } .pie__legal { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .8rem; color: var(--crema-2); border-top: 1px solid var(--tinta-3); padding-top: 20px; } .pie__legal a { color: var(--crema-2); } /* Eloy, doc 4 (23/09): la firma, «Diseño por Gastromaps», en lugar del ©; y las redes, «encájalo por algún lado que no ensucie»: tres iconos pequeños al final de la línea legal, en el mismo tono apagado. */ .pie__firma a { text-decoration: none; font-weight: 600; } .pie__redes { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; } .pie__redes a { display: inline-flex; color: var(--crema-2); opacity: .8; transition: opacity .3s, color .3s; } .pie__redes a:hover, .pie__redes a:focus-visible { opacity: 1; color: var(--acento); } /* En el móvil: la firma en su línea y, debajo, los tres legales con el icono de Instagram en la misma línea. Antes «Cookies» caía sola y el icono, solo en otra más abajo (Eloy, 02/10/2026: «se queda ahí como bailando»; regla para todas). */ @media (max-width: 640px) { .pie__legal { justify-content: center; } .pie__firma { width: 100%; text-align: center; } .pie__redes { margin-left: 0; } } /* ───────── 日系 que se escribe solo (Eloy, 23/09: como restaurantenintai.com, en bucle y despacio) ───────── Trazos de KanjiVG en su orden de caligrafía; cada uno ocupa su tramo del mismo ciclo de 12,5 s. */ .sello--trazos { width: 58px; padding: 10px 0; } .sello__trazos { display: block; margin: 0 auto; overflow: visible; } .sello__trazos .k { fill: none; stroke: var(--acento); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; animation: 12.5s linear infinite; } .sello__trazos .k0 { animation-name: k0; } @keyframes k0 { 0%, 0.00% { stroke-dashoffset: 1; opacity: 0; } 0.01% { stroke-dashoffset: 1; opacity: 1; } 5.60% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k1 { animation-name: k1; } @keyframes k1 { 0%, 5.60% { stroke-dashoffset: 1; opacity: 0; } 5.61% { stroke-dashoffset: 1; opacity: 1; } 11.20% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k2 { animation-name: k2; } @keyframes k2 { 0%, 11.20% { stroke-dashoffset: 1; opacity: 0; } 11.21% { stroke-dashoffset: 1; opacity: 1; } 16.80% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k3 { animation-name: k3; } @keyframes k3 { 0%, 16.80% { stroke-dashoffset: 1; opacity: 0; } 16.81% { stroke-dashoffset: 1; opacity: 1; } 22.40% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k4 { animation-name: k4; } @keyframes k4 { 0%, 22.40% { stroke-dashoffset: 1; opacity: 0; } 22.41% { stroke-dashoffset: 1; opacity: 1; } 28.00% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k5 { animation-name: k5; } @keyframes k5 { 0%, 28.00% { stroke-dashoffset: 1; opacity: 0; } 28.01% { stroke-dashoffset: 1; opacity: 1; } 33.60% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k6 { animation-name: k6; } @keyframes k6 { 0%, 33.60% { stroke-dashoffset: 1; opacity: 0; } 33.61% { stroke-dashoffset: 1; opacity: 1; } 39.20% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k7 { animation-name: k7; } @keyframes k7 { 0%, 39.20% { stroke-dashoffset: 1; opacity: 0; } 39.21% { stroke-dashoffset: 1; opacity: 1; } 44.80% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k8 { animation-name: k8; } @keyframes k8 { 0%, 44.80% { stroke-dashoffset: 1; opacity: 0; } 44.81% { stroke-dashoffset: 1; opacity: 1; } 50.40% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k9 { animation-name: k9; } @keyframes k9 { 0%, 50.40% { stroke-dashoffset: 1; opacity: 0; } 50.41% { stroke-dashoffset: 1; opacity: 1; } 56.00% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } .sello__trazos .k10 { animation-name: k10; } @keyframes k10 { 0%, 56.00% { stroke-dashoffset: 1; opacity: 0; } 56.01% { stroke-dashoffset: 1; opacity: 1; } 61.60% { stroke-dashoffset: 0; opacity: 1; } 85.60% { stroke-dashoffset: 0; opacity: 1; } 93.60%, 100% { stroke-dashoffset: 0; opacity: 0; } } /* ───────── 10bis · Galería de vídeos ───────── */ .galeria { padding-left: 0; padding-right: 0; } .galeria .cabeza-seccion { padding: 0 var(--lado); } .galeria__pista { list-style: none; margin: 0; display: flex; gap: clamp(14px, 2vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(var(--lado), calc((100% - var(--ancho)) / 2)) 24px; scroll-padding: 0 max(var(--lado), calc((100% - var(--ancho)) / 2)); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .galeria__pista::-webkit-scrollbar { display: none; } .galeria__ficha { flex: none; width: 72vw; max-width: 300px; scroll-snap-align: center; } .galeria__mandos { display: flex; justify-content: center; gap: 14px; margin-top: 18px; } @media (max-width: 899px) { .galeria__pista { padding-left: max(14vw, calc((100% - 300px) / 2)); padding-right: max(14vw, calc((100% - 300px) / 2)); } } /* En PC caben los cuatro: rejilla centrada, sin desplazamiento ni flechas (Angel, 23/09: «ha quedado descentrada»; Eloy, doc 3: «quitar las flechas porque no hacen función» — la regla base iba debajo y las volvía a enseñar) */ @media (min-width: 900px) { .galeria__pista { display: grid; grid-template-columns: repeat(4, minmax(0, 280px)); justify-content: center; overflow: visible; padding: 10px var(--lado) 24px; } .galeria__ficha { width: auto; } .galeria__mandos { display: none; } } .galeria__ficha figure { margin: 0; } .galeria__ficha video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; background: var(--tinta-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transition: transform .8s var(--curva); } .galeria__ficha:hover video { transform: translateY(-6px); } .galeria__ficha figcaption { margin-top: 14px; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; } /* Movimiento reducido */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .js .aparece, .js .portada__texto > *, .portada__ancho { opacity: 1 !important; transform: none !important; } .banda__pista { width: auto; flex-wrap: wrap; justify-content: center; padding: 20px var(--lado); } .prensa__medios { width: auto; flex-wrap: wrap; justify-content: center; } } /* ───────── Páginas de reservar y gracias (23/09) ───────── */ .pagina-reserva { min-height: 100svh; } .reserva { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 32px var(--lado) 48px; overflow: hidden; isolation: isolate; } .reserva__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .reserva__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 9, .78), rgba(12, 10, 9, .92)); } .reserva__contenido { width: 100%; max-width: 34rem; display: grid; justify-items: center; gap: 22px; } .reserva__logo { display: block; } .reserva__tarjeta { width: 100%; padding: clamp(22px, 4vw, 34px); border-radius: 8px; background: var(--tinta-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(239, 229, 210, .1); } .reserva__tarjeta h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); text-align: center; margin-bottom: 12px; text-wrap: balance; } .reserva__tarjeta > p { color: var(--crema-2); text-align: center; } .reserva__social { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: .9rem; padding-bottom: 16px; margin-bottom: 18px !important; border-bottom: 1px solid var(--tinta-3); } .reserva__nota { color: var(--crema); font-weight: 700; letter-spacing: .04em; } .reserva__nota span { color: var(--acento); letter-spacing: .1em; } /* El calendario es de CoverManager, en su propio marco: nuestro estilo no entra. Eloy lo quiere negro y crema (23/09): se invierten sus colores desde fuera y se calientan hacia el crema. Los colores exactos (el rojo en los botones) solo se podrían poner desde el panel de CoverManager del restaurante, si lo permite. */ .reserva__modulo iframe { display: block; width: 100%; min-height: 34rem; border: 0; border-radius: 6px; background: transparent; /* Virado al azul noche de la tarjeta (Eloy, 30/09: «los cover siempre con el color de la marca»); antes, marrón */ filter: invert(.92) hue-rotate(180deg) sepia(.45) hue-rotate(172deg) saturate(1.6) brightness(.9); } .reserva__pie { margin: 16px 0 0; font-size: .85rem; } .reserva__legal { display: flex; justify-content: center; gap: 22px; padding: 18px var(--lado) 28px; font-size: .8rem; background: var(--tinta); } .reserva__legal a { color: var(--crema-2); } /* En la carta hay barra flotante: sin este hueco tapaba los enlaces legales (23/09) */ .reserva__legal--barra { padding-bottom: 110px; } .reserva__sub { font-size: 1.25rem; text-align: center; margin: 26px 0 6px; } .reserva__nota-pequena { font-size: .9rem; } .reserva__lista { list-style: none; padding: 0; margin: 14px 0 24px; display: grid; gap: 8px; } .reserva__lista li { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; border: 1px solid var(--tinta-3); border-radius: 6px; } .reserva__lista b { font-family: var(--display); font-weight: 600; font-size: 1.1rem; } .reserva__lista span { color: var(--crema-2); font-size: .85rem; } /* Logos oficiales de los medios (Eloy, 23/09: «da más autoridad»), en crema sobre el negro */ .cita footer, .prensa__cita footer, .plato footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .prensa__cita footer { justify-content: center; } .medio { display: block; width: auto; height: 18px; filter: brightness(0) invert(1); opacity: .9; } .plato--letra .medio { filter: brightness(0); opacity: .75; } .prensa__cita .medio { height: 24px; } .prensa__cita footer a { border: 0; } .prensa__medios { align-items: center; } .prensa__medios .medio { height: 28px; opacity: .55; transition: opacity .3s; } .prensa__medios a:hover .medio, .prensa__medios a:focus-visible .medio { opacity: 1; } /* El logo del medio dentro de la tarjeta NO es la foto de fondo: sin esto, «.plato img» lo estiraba a toda la tarjeta */ .plato .medio { position: static; inset: auto; width: auto; height: 18px; z-index: auto; object-fit: contain; transform: none; transition: none; } .plato:hover .medio { transform: none; } /* ───────── Páginas legales (Eloy, 23/09: «las nuestras, con el fondo negro») ───────── */ .legal { max-width: 760px; margin: 0 auto; padding: 40px var(--lado) 90px; } .legal__logo { display: block; width: max-content; margin: 0 auto 36px; } .legal__volver { font-size: .85rem; margin-bottom: 26px; } .legal__volver a, .legal__otros a { color: var(--crema-2); text-underline-offset: 4px; } .legal h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: 8px; } .legal__fecha { color: var(--crema-2); font-size: .85rem; margin-bottom: 40px; } .legal__apartado { padding: 26px 0; border-top: 1px solid var(--tinta-3); } .legal__apartado h2 { font-size: 1.45rem; margin-bottom: 14px; } .legal__apartado p { color: var(--crema-2); } .legal__apartado strong { color: var(--crema); font-weight: 500; } .legal__apartado a { color: var(--crema); text-decoration-color: var(--acento); text-underline-offset: 3px; } .legal__datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 14px 0 0; padding: 18px 20px; border: 1px solid var(--tinta-3); border-radius: 6px; background: var(--tinta-2); font-size: .95rem; } .legal__datos dt { color: var(--crema-2); } .legal__datos dd { margin: 0; color: var(--crema); } .legal__tabla { overflow-x: auto; margin-top: 14px; border: 1px solid var(--tinta-3); border-radius: 6px; } .legal__tabla table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; } .legal__tabla th, .legal__tabla td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--tinta-3); vertical-align: top; } .legal__tabla th { color: var(--crema); font-weight: 500; background: var(--tinta-2); } .legal__tabla td { color: var(--crema-2); } .legal__otros { display: flex; flex-wrap: wrap; gap: 12px 28px; padding-top: 26px; border-top: 1px solid var(--tinta-3); font-size: .9rem; } @media (max-width: 560px) { .legal__datos { grid-template-columns: 1fr; gap: 2px 0; } .legal__datos dd { margin-bottom: 10px; } } /* ───────── Página de la carta (Eloy, 23/09: «fusilarla con nuestro estilo») ───────── */ .carta-pagina { max-width: 1000px; margin: 0 auto; padding: 40px var(--lado) 120px; } .carta-pagina__marca { display: block; margin: 0 auto 44px; width: max-content; } .carta-pagina h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: 0 0 34px; text-wrap: balance; } .carta-pagina > .ceja { display: flex; } .carta-pestanas { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--tinta-3); width: max-content; max-width: 100%; margin-bottom: 18px; } .carta-pestanas button { border: 0; background: none; color: var(--crema-2); cursor: pointer; min-height: 44px; padding: 0 1.4em; border-radius: 999px; font: 700 .78rem/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; transition: background .3s, color .3s; } .carta-pestanas button[aria-selected="true"] { background: var(--acento); color: var(--tinta); } .carta-chips { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 14px 0; margin-bottom: 8px; background: linear-gradient(var(--tinta) 80%, transparent); } .carta-chips::-webkit-scrollbar { display: none; } /* La carta de vinos (30/09): las regiones dentro de cada apartado, el precio por copa y el enlace entre carta y vinos */ .carta-subgrupo { margin: 1.8rem 0 .3rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); } .vino-copa { display: inline-block; margin-right: .4em; padding: 0 .5em; border: 1px solid var(--tinta-3); border-radius: 999px; font-size: .78em; font-style: normal; color: var(--crema); white-space: nowrap; } .carta-pagina__enlace { margin: -.4rem 0 1.4rem; text-align: center; } .carta-pagina__enlace a { color: var(--acento); text-underline-offset: 3px; } /* En PC, todas a la vista (Angel, 30/09: «tiene cortada la píldora de "el arte del complemento"»): con los 9 apartados de la carta nueva no caben en una fila de 888 px y la sexta quedaba partida en el borde. Bajan a una segunda línea, centradas. En el móvil se siguen deslizando con el dedo. */ @media (min-width: 900px) { .carta-chips { flex-wrap: wrap; justify-content: center; overflow: visible; } } .carta-chips a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--tinta-3); color: var(--crema-2); text-decoration: none; font-size: .85rem; white-space: nowrap; } .carta-chips a:hover { border-color: var(--acento); color: var(--crema); } .carta-apartado { padding: 34px 0 10px; scroll-margin-top: 70px; } .carta-apartado h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--tinta-3); } .carta-apartado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px 48px; } @media (min-width: 800px) { .carta-apartado ul { grid-template-columns: 1fr 1fr; } } .plato-carta__linea { display: flex; align-items: baseline; gap: 12px; } .plato-carta__linea::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--tinta-3); transform: translateY(-4px); } .plato-carta h3 { font-size: 1.12rem; font-weight: 600; line-height: 1.3; } .plato-carta__precio { order: 2; color: var(--acento); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .98rem; } .plato-carta p { margin: 6px 0 0; color: var(--crema-2); font-size: .92rem; line-height: 1.55; } /* ───────── Ronda de Eloy del 24/09 (doc 5) ───────── */ /* La tarjeta de papel con solo la frase del medio (Con El Morro Fino): la frase en el sitio del nombre del plato, en dos líneas, y el logo debajo. */ /* «en estado puro.»» va unido (espacio irrompible) y mide 7,85 veces la letra: el tamaño sale del ancho de la tarjeta para que quepa entera. Igual que en las landings (Angel, 24/09: «agrándalo en la home también»): menos margen a los lados, la frase más grande y el logo a 72 px; cabe en dos líneas hasta en la tarjeta más estrecha (218 px, a 1024). */ .plato--solo-cita .plato__texto { padding-left: 1.15rem; padding-right: 1.15rem; } .plato--solo-cita blockquote p { white-space: normal; font-size: min(2.6rem, 10.3cqi); line-height: 1.12; margin-bottom: 1rem; } /* Su logo es un sello redondo con letras: a los 18-28 px de los logos apaisados no se lee. */ .plato .medio--conelmorrofino { height: 72px; } @media (max-width: 699px) { .plato--solo-cita .plato__texto { padding-top: 1.8rem; padding-bottom: 5rem; } } .prensa__cita .medio--conelmorrofino { height: 44px; } .prensa__medios .medio--conelmorrofino { height: 46px; } @media (max-width: 799px) { .prensa__medios .medio--conelmorrofino { height: 42px; } } .sin-corte { white-space: nowrap; } /* «japo-peruana» no se parte por el guion */ /* La estrella de las notas, con una letra de sistema: la KyivType dibuja «★» como una flor (28/09). */ .estrella, .sellos__marca [aria-hidden="true"], .reserva__nota [aria-hidden="true"] { font-family: "Helvetica Neue", Arial, sans-serif; } /* La carta de su PDF v6 (28/09): una línea bajo el título de algunos apartados (la Experiencia Nikkei de mediodía, con su precio por persona) y el aviso de alergias de su carta, al final. */ .carta-apartado__nota { margin: -6px 0 22px; color: var(--acento); font-size: .98rem; max-width: 62ch; } .carta-pagina__alergias { margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var(--tinta-3); color: var(--crema-2); font-size: .85rem; max-width: 80ch; } /* Cuatro pestañas desde la carta v6 (carta, vinos, cócteles y bebidas): en el móvil, menos aire para que quepan. */ @media (max-width: 520px) { .carta-pestanas { width: 100%; gap: 4px; } .carta-pestanas button { flex: 1 1 auto; padding: 0 .6em; letter-spacing: .1em; } } /* La firma del pie con el nombre exacto de su logotipo (28/09; Angel: «¿podemos poner la fuente del logo?»). Su letra no es una fuente que se pueda cargar: va como imagen, en el dorado de antes (Angel, 28/09): recursos/marca/firma-dorada.svg. */ .pie__gigante--img { background: none; line-height: 0; } .pie__gigante--img img { display: block; width: min(100%, 1100px); height: auto; margin: 0 auto; } /* ─── REDONDO (29/09) ───────────────────────────────────────────────────────────────── */ /* La carta en cuatro fichas: 2 en el móvil, 4 desde tableta */ @media (min-width: 700px) { .carta__fichas--cuatro { grid-template-columns: repeat(4, 1fr); } } /* Las citas son reseñas de Google: firma con la «G» en su color, sin logos de medios */ .resena { display: inline-flex; align-items: center; gap: 8px; } .resena b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--crema); color: #4285f4; font: 700 .7rem/1 var(--texto); letter-spacing: 0; } .prensa__extra b { color: var(--acento); font-weight: 600; } /* En celebraciones no hay vídeo: la foto grande ocupa las dos filas */ .pisco__video img { aspect-ratio: auto; height: 100%; } .pisco__texto .cita { margin: 1.4rem 0 0; } /* Su logo: más ancho que alto, en la portada y en el pie */ .portada__logo .marca__logo { width: clamp(150px, 16vw, 210px); height: auto; } .pie__gigante--img img { width: min(100%, 720px); height: auto; margin: 0 auto; } /* Preguntas frecuentes (nuevo respecto a Lima Nikkei) */ .preguntas__lista { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--tinta-3); } .preguntas details { border-bottom: 1px solid var(--tinta-3); } .preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.3; } .preguntas summary::-webkit-details-marker { display: none; } .preguntas summary::after { content: "+"; font-family: var(--texto); font-size: 1.5rem; color: var(--acento); transition: transform .3s var(--curva); flex: none; } .preguntas details[open] summary::after { transform: rotate(45deg); } .preguntas details p { margin: 0 4px 24px; color: var(--crema-2); max-width: 62ch; } .preguntas summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; } h2 em, h1 em { font-style: italic; } /* Redondo: la cursiva de su logo, en el acento */ .pendiente { background: #b3261e; color: #fff; padding: 1px 6px; border-radius: 3px; font-weight: 600; } /* dato legal que falta: no se publica así */ /* La tarjeta de solo cita («Tomate y ya!»): en melocotón y con el escudo de su logo de marca de agua, en lugar de las olas japonesas de Lima Nikkei */ .plato--letra { background: var(--acento); } .plato--letra::before { -webkit-mask-image: none; mask-image: none; inset: auto -8% -10% auto; width: 62%; height: 70%; background: url("marca/escudo-tinta.svg") right bottom / contain no-repeat; opacity: .12; } .plato--letra .resena b { background: var(--tinta); } /* La portada: el velo de Lima Nikkei tapaba el vídeo; aquí se ve el chuletón que se trincha */ .portada__velo { background: radial-gradient(70% 60% at 50% 55%, rgba(14, 23, 33, .6), rgba(14, 23, 33, .25) 80%), linear-gradient(to bottom, rgba(14, 23, 33, .6), transparent 22%, transparent 70%, var(--tinta)); } /* «Antes de venir, / lo que suele preguntarse.»: la segunda parte baja entera */ .preguntas h2 em { display: block; } .prensa { background: linear-gradient(var(--tinta), var(--tinta-2) 22%, var(--tinta-2) 78%, var(--tinta)); } /* Redondo: sin el mármol japonés de Lima Nikkei (daba 404) */ /* LA ANFITRIONA (Redondo, 29/09): tres fotos suyas en mosaico —una alta y dos cuadradas— y su texto al lado. Antes, un retrato en círculo con aro melocotón; Eloy pidió cambiarlo por varias fotos de su Instagram (feedback del 29/09). Las cuentas: columnas 3:2 y alto 4/5 del ancho dan la grande en 3:4 y las pequeñas cuadradas. */ .anfitriona { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: 40px; align-items: center; } .anfitriona__fotos { margin: 0 auto; width: min(100%, 480px); aspect-ratio: 5 / 4; display: grid; gap: 10px; grid-template-columns: 3fr 2fr; grid-template-rows: 1fr 1fr; } .anfitriona__fotos figure { margin: 0; overflow: hidden; border-radius: 14px; min-height: 0; box-shadow: 0 18px 44px rgba(0, 0, 0, .4); } .anfitriona__fotos figure:first-child { grid-row: 1 / span 2; box-shadow: 0 0 0 2px var(--acento), 0 18px 44px rgba(0, 0, 0, .4); } .anfitriona__fotos img { display: block; width: 100%; height: 100%; object-fit: cover; } .anfitriona__texto > p:not(.ceja) { color: var(--crema-2); max-width: 56ch; } .anfitriona__texto h2 { margin-bottom: 1.4rem; } .anfitriona__texto .cita { margin-top: 1.4rem; } @media (min-width: 900px) { .anfitriona { grid-template-columns: 5fr 7fr; gap: 72px; } } /* ═══ SAGAR (01/10/2026) ══════════════════════════════════════════════════════════════════════════════════════════ «Como templos indios» (Raju, 29/09) y «oscuro y dorado» (Angel, 01/10): el verde casi negro y el oro de su logo nuevo (medidos en el JPG: fondo #021e1b, oro #efb85b / #d3a44f, naranja #d07424, rojo #bf3313, granate #54070b), arcos de hornacina como los de la decoración que viene y una celosía (jali) dorada muy tenue de fondo. Todo dibujado en SVG aquí mismo: nada se carga de fuera. */ :root { --tinta: #04110f; --tinta-2: #0a1d1a; --tinta-3: #1d3832; --crema: #f5ecd9; --crema-2: #bdb6a4; --acento: #e9b35a; --oro-claro: #f7d38d; --oro-linea: rgba(233, 179, 90, .55); --turquesa: #1f7a70; --granate: #6b1020; --jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e9b35a' stroke-opacity='.075'%3E%3Cpath d='M28 3 53 28 28 53 3 28Z'/%3E%3Cpath d='M28 15 41 28 28 41 15 28Z'/%3E%3Ccircle cx='28' cy='28' r='3.5'/%3E%3Ccircle cx='0' cy='0' r='11'/%3E%3Ccircle cx='56' cy='0' r='11'/%3E%3Ccircle cx='0' cy='56' r='11'/%3E%3Ccircle cx='56' cy='56' r='11'/%3E%3C/g%3E%3C/svg%3E"); /* El arco de hornacina (conopial), en dos versiones: relleno para recortar fotos y en línea para el marco. Y una tercera (02/10, noche): el relleno con la MISMA forma que la línea, para que la foto llegue justo hasta ella (Angel: «se sale por abajo… se queda corta por los laterales»); la usan la portada y «Lo más pedido». */ --arco-justo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M.6 129.4V52C.6 34.4 14.4 26.5 28.3 18.5 38.3 12.6 46 7.8 50 1.2 54 7.8 61.7 12.6 71.7 18.5 85.6 26.5 99.4 34.4 99.4 52V129.4Z'/%3E%3C/svg%3E"); --arco-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130V52C0 34 14 26 28 18 38 12 46 7 50 0 54 7 62 12 72 18 86 26 100 34 100 52V130Z'/%3E%3C/svg%3E"); --arco-linea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 130' preserveAspectRatio='none'%3E%3Cpath d='M.6 129.4V52C.6 34.4 14.4 26.5 28.3 18.5 38.3 12.6 46 7.8 50 1.2 54 7.8 61.7 12.6 71.7 18.5 85.6 26.5 99.4 34.4 99.4 52V129.4Z' fill='none' stroke='%23e9b35a' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); --arco-tarjeta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M.5 30.5V24C.5 15 15 12 30 7.5 39 4.8 46 2.6 50 .6 54 2.6 61 4.8 70 7.5 85 12 99.5 15 99.5 24V30.5' fill='%230a1d1a' fill-opacity='.92' stroke='%23e9b35a' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } body { background: var(--tinta) var(--jali); } h1, h2, h3 { font-weight: 600; letter-spacing: 0; } h2 { font-size: clamp(2.2rem, 5.6vw, 4rem); line-height: 1.06; } .estrella { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .8em; } .boton--oro { background: var(--acento); color: var(--tinta); } .boton--oro:hover { background: var(--oro-claro); transform: translateY(-2px); } .boton--linea { border-color: var(--oro-linea); } .flotante a:last-child:hover { background: var(--oro-claro); } .cita { border-left-color: var(--acento); } /* 1 · PORTADA (02/10/2026, noche; documento de Eloy del 01/10): el nombre «Sagar» de su logo, en vectorial y en su oro, con «Indian Cuisine» debajo (en lugar del logo redondo), y la foto de Fran a media pantalla: la mitad derecha entera en el PC y media pantalla de alto en el móvil, con el arco del templo arriba, su filo dorado y la gota en lo alto. */ .portada--media { min-height: 0; display: grid; place-items: initial; grid-template-areas: "marca" "media" "texto"; padding: 22px 0 clamp(64px, 10vw, 110px); gap: 0; background: radial-gradient(70% 34% at 50% 40%, rgba(208, 116, 36, .26), transparent 72%), var(--jali), var(--tinta); } .portada__marca { grid-area: marca; justify-self: center; display: grid; justify-items: center; gap: 8px; margin: 0 0 30px; line-height: 1; } .portada__nombre-sagar { width: clamp(150px, 42vw, 200px); /* el tamaño de antes (Angel y Eloy, 02/10: «más pequeñito, como el de Lima Nikkei»: el suyo, 164 px en PC) */ height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); } .portada__cocina { font-family: var(--display); font-weight: 500; font-size: .8rem; letter-spacing: .44em; text-transform: uppercase; color: var(--acento); padding-left: .44em; font-size: .8rem; } /* el espaciado deja aire a la derecha: se compensa para que quede centrado */ .portada__media { grid-area: media; position: relative; margin: 0 var(--lado); height: clamp(230px, 50svh - 20px, 480px); } /* media pantalla; en un iPhone pequeño, algo menos, para que asome el titular */ .portada__media picture { display: contents; } /* La foto llega justo hasta la línea dorada por los tres lados (Angel, 02/10: «se sale por abajo unos píxeles, y se queda corta por los laterales»): se recorta con la MISMA forma que la línea (no con la del arco de las otras fotos, que va 0,6 más fuera), y el trazo tapa el canto. Antes llevaba 9 px de aire a los lados y arriba, y ninguno abajo. */ .portada__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--arco-justo) center / 100% 100% no-repeat; mask: var(--arco-justo) center / 100% 100% no-repeat; } .portada__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--arco-linea) center / 100% 100% no-repeat; pointer-events: none; } .portada__media::after { content: ""; position: absolute; left: 50%; top: -16px; width: 9px; height: 14px; transform: translateX(-50%); background: var(--acento); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; } .js .portada__media { animation: acerca 1.8s var(--curva) both; } .portada--media .portada__texto { grid-area: texto; padding: 30px var(--lado) 0; } .portada--media .portada__nombre { font-size: clamp(2.9rem, 9vw, 5.6rem); } .portada--media .portada__lema { color: var(--crema-2); margin: 1.2rem auto 1.6rem; } .portada--media .sellos { margin: 0 0 1.8rem; } .portada--media .sellos li { background: rgba(4, 17, 15, .55); border-color: var(--oro-linea); } .portada--media .sellos__marca { color: var(--acento); font-size: 1.25rem; font-weight: 600; } @media (min-width: 900px) { .portada--media { --izq: max(var(--lado), calc((100vw - var(--ancho)) / 2)); min-height: 100svh; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "marca media" "texto media"; grid-template-rows: auto 1fr; padding: 0; background: radial-gradient(42% 60% at 75% 55%, rgba(208, 116, 36, .26), transparent 72%), var(--jali), var(--tinta); } .portada__marca { justify-self: start; margin: 0; padding: 44px 0 0 var(--izq); } /* «Indian Cuisine» centrado bajo el nombre, como en su logo */ .portada__nombre-sagar { width: clamp(180px, 15vw, 230px); } .portada__cocina { font-size: .82rem; } .portada__media { align-self: end; height: min(100svh - 34px, 78vw); margin: 34px clamp(16px, 2.6vw, 40px) 0 0; } /* tope: en una tableta en vertical el arco no se estira como una aguja */ .portada--media .portada__texto { align-self: center; justify-self: start; text-align: left; padding: 24px clamp(32px, 5vw, 80px) 96px var(--izq); } .portada--media h1 .ceja { justify-content: flex-start; } .portada--media h1 .ceja::after { display: none; } .portada--media .portada__lema { margin-left: 0; } .portada--media .sellos, .portada--media .portada__botones { justify-content: flex-start; } } /* 2 · Los menús, la reina: tres hornacinas con su arco dorado y una luz dentro */ .menus { background: linear-gradient(var(--tinta), rgba(10, 29, 26, .85) 30%, var(--tinta)); } .menus__lista { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 34px 24px; } .menu { position: relative; isolation: isolate; text-align: center; padding: calc(30% + 4px) clamp(22px, 3vw, 34px) 32px; border: 1px solid var(--oro-linea); border-top: 0; border-radius: 0 0 6px 6px; background: linear-gradient(to bottom, rgba(10, 29, 26, 0), rgba(10, 29, 26, .92) 26%); } .menu::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; aspect-ratio: 100 / 30; background: var(--arco-tarjeta) top / 100% 100% no-repeat; } .menu::after { content: ""; position: absolute; z-index: -1; left: 15%; right: 15%; top: 4%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(208, 116, 36, .22), transparent); pointer-events: none; } .menu__cabeza { margin-top: -14%; } .menu__etiqueta { display: inline-block; margin: 0 0 .7rem; padding: 3px 12px; border-radius: 999px; background: var(--turquesa); color: #f2fbf8; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .menu h3 { font-size: clamp(2rem, 3.4vw, 2.5rem); line-height: 1.05; } .menu__precio { margin: .9rem 0 1.4rem; display: grid; gap: 2px; } .menu__precio b { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 5vw, 3.2rem); line-height: 1; color: var(--acento); font-variant-numeric: lining-nums; } .menu__precio span { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--crema-2); } .menu__elige { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--crema); margin: 0 0 1.2rem; } .menu__platos { margin: 0; text-align: left; border-top: 1px solid rgba(233, 179, 90, .25); padding-top: 1.1rem; } .menu__platos dt { font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--acento); margin: 0 0 .2rem; } .menu__platos dd { margin: 0 0 1rem; color: var(--crema-2); font-size: .95rem; line-height: 1.55; } .menu__platos dd:last-child { margin-bottom: 0; } .menus__cita { max-width: 760px; margin: clamp(48px, 7vw, 72px) auto 0; padding: 0; border: 0; text-align: center; } .menus__cita footer { display: flex; justify-content: center; } .menus__boton { text-align: center; margin: 2rem 0 0; } @media (min-width: 900px) { .menus__lista { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } /* 3 · Cinta, en oro con estrellas */ .banda b { opacity: .7; font-size: .8em; } /* 4 · La carta: las fichas rematadas en cúpula */ .carta__fichas img { aspect-ratio: 4 / 5; border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px; } /* 5 · Platos: las tarjetas de solo cita, en verde con la celosía y un marco de oro (sin las olas ni el escudo de antes) */ .plato--letra { background: var(--tinta-2) var(--jali); border: 1px solid rgba(233, 179, 90, .35); } .plato--letra::before { display: none; } .plato--letra h3 { color: var(--acento); font-size: clamp(1.5rem, 2.4vw, 1.9rem); } .plato--letra blockquote p, .plato--solo-cita blockquote p { color: var(--crema); white-space: normal; font-size: min(1.45rem, 7.4cqi); line-height: 1.3; } .plato--letra footer { color: var(--crema-2); } .plato--letra .resena b { background: var(--crema); } @media (max-width: 699px) { .plato--solo-cita .plato__texto { padding: 30px 24px 34px; } } /* 6 · Cifras */ .cifras b { color: var(--acento); } .cifras__lista { border-color: var(--tinta-3); } /* 7 · La terraza, a sangre */ .sangre--terraza { min-height: 80svh; } .sangre--terraza::after { background: radial-gradient(65% 60% at 50% 50%, rgba(4, 17, 15, .72), rgba(4, 17, 15, .42)); } /* 8 · Catorce años después: la placa en su arco y los recortes de prensa con su enlace */ .historia__foto { aspect-ratio: auto; width: min(100%, 360px); display: block; } .historia__foto figure { border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; box-shadow: 0 0 0 1px var(--oro-linea), 0 0 0 9px var(--tinta), 0 0 0 10px rgba(233, 179, 90, .3), 0 24px 50px rgba(0, 0, 0, .45); } .historia__foto img { aspect-ratio: 3 / 4; } .recortes { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 14px; } .recortes a { display: grid; gap: 6px; padding: 14px 0 14px 20px; border-left: 1px solid var(--acento); text-decoration: none; transition: background .3s; } .recortes a:hover { background: rgba(233, 179, 90, .06); } .recortes q { font-family: var(--display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.35; color: var(--crema); quotes: "«" "»"; } .recortes span { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); } /* 9-11 · Opiniones, preguntas y reserva */ .prensa { background: linear-gradient(var(--tinta), var(--tinta-2) 22%, var(--tinta-2) 78%, var(--tinta)); } .prensa__cita p { font-weight: 500; } .tarjeta { background: rgba(10, 29, 26, .9); border-color: var(--tinta-3); } /* 12 · Pie: el logo nuevo, redondo, en lugar de la firma gigante */ .pie__gigante--logo { background: none; -webkit-background-clip: border-box; background-clip: border-box; line-height: 0; margin: 16px 0 40px; } .pie__gigante--logo img { display: inline-block; width: min(56vw, 230px); height: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(233, 179, 90, .3); } /* Los separadores de la cinta, rombos dibujados (el «✦» cambia de forma según el sistema y el revisor lo marca) */ .banda b { display: inline-block; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); opacity: .6; flex: none; } /* Ajustes tras las primeras capturas (01/10) */ /* Números de forma moderna: la Cormorant los trae «antiguos» y «1.777» se leía «I.777» */ body, h1, h2, h3, .cifras b, .sellos__marca, .menu__precio b, .cita p, .prensa__cita p, .plato blockquote p { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .cifras b { font-variant-numeric: lining-nums tabular-nums; } /* En PC, el logo y el texto en la misma vertical */ /* La cúpula va ENCIMA de la tarjeta, no dentro: así los lados de la tarjeta empiezan donde acaba el arco y no suben por fuera de él. El hueco de arriba (30 % del ancho, el alto de la cúpula) lo da el margen; el título sube dentro. */ .menu { margin-top: 30%; padding-top: 6px; background: rgba(10, 29, 26, .92); } .menu::before { top: auto; bottom: calc(100% - 1px); } .menu::after { top: -24%; } .menu__cabeza { margin-top: -19%; position: relative; } @media (min-width: 900px) { .menus__lista { row-gap: 0; } } /* La pregunta con cursiva: el texto, entero en un solo bloque */ .preguntas summary > span { flex: 1; } /* La luz de la hornacina, por encima del relleno de la cúpula: si no, la cúpula la tapaba y hacía un corte recto */ .menu::before { z-index: -2; } .menu::after { z-index: -1; } /* La carta (01/10): su logo redondo arriba y, en las salsas, el precio según con qué la pidas */ .carta-pagina__marca--logo { display: inline-block; line-height: 0; margin-bottom: 18px; } .carta-pagina__marca--logo img { width: 88px; height: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(233, 179, 90, .35); } .salsa-precios { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; } .salsa-precios li { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border: 1px solid rgba(233, 179, 90, .3); border-radius: 999px; font-size: .82rem; color: var(--crema-2); } .salsa-precios b { color: var(--acento); font-weight: 600; font-variant-numeric: tabular-nums; } /* La lista de precios de cada salsa va dentro de un plato: sin esto heredaba la rejilla de la carta (una por fila) */ .carta-apartado .salsa-precios { display: flex; grid-template-columns: none; gap: 6px 8px; } .plato-carta--salsa .plato-carta__linea::after { display: none; } /* ═══ LA PARTE DE ABAJO, CON FORMA PROPIA (01/10, tarde) ═══════════════════════════════════════════════════════════════ Angel, al ver la demo: «veo muchas similitudes con la de Redondo y Lima Nikkei, sobre todo las de abajo». Mismo esqueleto por dentro; por fuera, cada bloque con una forma india: la carta en un thali, los platos en una arcada, las cifras en un friso granate, la terraza tras tres arcos, la historia en una línea del tiempo, las opiniones en una pared y la reserva como la puerta de un templo. */ :root { --granate-fondo: #3d0912; --turquesa-fondo: #0b3a36; --tres-arcos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0.0 200V56C0.0 36.6 12.9 28.0 25.8 19.4 35.0 12.9 42.3 7.5 46.0 0.0 49.7 7.5 57.0 12.9 66.2 19.4 79.1 28.0 92.0 36.6 92.0 56.0V200ZM104.0 200V56C104.0 36.6 116.9 28.0 129.8 19.4 139.0 12.9 146.3 7.5 150.0 0.0 153.7 7.5 161.0 12.9 170.2 19.4 183.1 28.0 196.0 36.6 196.0 56.0V200ZM208.0 200V56C208.0 36.6 220.9 28.0 233.8 19.4 243.0 12.9 250.3 7.5 254.0 0.0 257.7 7.5 265.0 12.9 274.2 19.4 287.1 28.0 300.0 36.6 300.0 56.0V200Z'/%3E%3C/svg%3E"); --tres-arcos-linea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0.0 200V56C0.0 36.6 12.9 28.0 25.8 19.4 35.0 12.9 42.3 7.5 46.0 0.0 49.7 7.5 57.0 12.9 66.2 19.4 79.1 28.0 92.0 36.6 92.0 56.0V200ZM104.0 200V56C104.0 36.6 116.9 28.0 129.8 19.4 139.0 12.9 146.3 7.5 150.0 0.0 153.7 7.5 161.0 12.9 170.2 19.4 183.1 28.0 196.0 36.6 196.0 56.0V200ZM208.0 200V56C208.0 36.6 220.9 28.0 233.8 19.4 243.0 12.9 250.3 7.5 254.0 0.0 257.7 7.5 265.0 12.9 274.2 19.4 287.1 28.0 300.0 36.6 300.0 56.0V200Z' fill='none' stroke='%23e9b35a' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); --loto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cg fill='none' stroke='%23e9b35a' stroke-width='1.2'%3E%3Cpath d='M20 2c4 5 4 12 0 18-4-6-4-13 0-18z'/%3E%3Cpath d='M20 20c-3-6-9-9-15-9 1 6 7 10 15 9z'/%3E%3Cpath d='M20 20c3-6 9-9 15-9-1 6-7 10-15 9z'/%3E%3Cpath d='M4 22h32'/%3E%3C/g%3E%3C/svg%3E"); --feston: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'%3E%3Cpath d='M0 1h28M0 11c7 0 7-8 14-8s7 8 14 8' fill='none' stroke='%23e9b35a' stroke-opacity='.7'/%3E%3Ccircle cx='14' cy='7' r='1.4' fill='%23e9b35a' fill-opacity='.8'/%3E%3C/svg%3E"); --estrellas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg fill='%23e9b35a'%3E%3Cpath id='e' d='M9 1l2.5 5.3 5.8.7-4.3 4 1.1 5.7L9 13.9 3.9 16.7 5 11 .7 7l5.8-.7z'/%3E%3Cuse href='%23e' x='20.5'/%3E%3Cuse href='%23e' x='41'/%3E%3Cuse href='%23e' x='61.5'/%3E%3Cuse href='%23e' x='82'/%3E%3C/g%3E%3C/svg%3E"); } /* 4 · El thali: bandeja de latón martillado con un cuenco por apartado */ .thali { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; } .thali__texto > p:not(.ceja) { color: var(--crema-2); max-width: 46ch; } .thali__leyenda { list-style: none; margin: 1.6rem 0 2rem; padding: 0; border-top: 1px solid var(--tinta-3); } .thali__leyenda a { display: grid; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--tinta-3); text-decoration: none; transition: background .3s, padding .3s var(--curva); } .thali__leyenda a:hover { background: rgba(233, 179, 90, .06); padding-left: 12px; } .thali__leyenda b { font-family: var(--display); font-weight: 600; font-size: 1.35rem; color: var(--acento); line-height: 1.2; } .thali__leyenda small { color: var(--crema-2); font-size: .9rem; } .thali__bandeja { position: relative; width: min(92vw, 540px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #f6dc9c 0%, #d3a24c 24%, #9a6a26 58%, #5a3a12 100%); box-shadow: inset 0 0 0 5px rgba(255, 236, 190, .28), inset 0 0 0 12px rgba(80, 52, 16, .4), inset 0 -20px 44px rgba(0, 0, 0, .45), 0 34px 70px rgba(0, 0, 0, .6); } .thali__bandeja::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 232, 175, .1) 0 2px, transparent 2px 10px); box-shadow: 0 0 0 1.5px rgba(255, 232, 175, .4), inset 0 0 30px rgba(60, 38, 10, .45); } .cuenco { position: absolute; width: 33%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); box-shadow: 0 0 0 4px #e0b25a, 0 0 0 7px #74501a, 0 14px 26px rgba(0, 0, 0, .55); text-decoration: none; transition: transform .5s var(--curva); } .cuenco:hover { transform: translate(-50%, -50%) scale(1.05); } .cuenco img { width: 100%; height: 100%; object-fit: cover; } .cuenco::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 80%, rgba(4, 17, 15, .7), transparent 60%); } .cuenco span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 3.6vw, 1.3rem); color: var(--crema); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); } .cuenco--arriba { left: 50%; top: 21%; } .cuenco--derecha { left: 79%; top: 50%; } .cuenco--abajo { left: 50%; top: 79%; } .cuenco--izquierda { left: 21%; top: 50%; } .cuenco--centro { left: 50%; top: 50%; width: 22%; display: grid; place-items: center; background: radial-gradient(circle, var(--tinta-2), var(--tinta)); } .cuenco--centro::after { display: none; } .cuenco--centro span { position: static; font-size: clamp(.8rem, 2.6vw, 1rem); font-style: italic; color: var(--acento); } @media (min-width: 900px) { .thali { grid-template-columns: 5fr 6fr; } } /* 5 · La arcada: cada plato en su arco (en el móvil, una fila que se pasa con el dedo) */ .arcada__fila { max-width: var(--ancho); margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 300px); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 6px 18px; scrollbar-width: thin; scrollbar-color: var(--tinta-3) transparent; } .arco { position: relative; scroll-snap-align: center; text-align: center; } .arco::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; aspect-ratio: 100 / 130; background: var(--arco-linea) center / 100% 100% no-repeat; pointer-events: none; } .arco__ventana { position: relative; aspect-ratio: 100 / 130; display: grid; place-items: center; background: var(--tinta-2); -webkit-mask: var(--arco-justo) center / 100% 100% no-repeat; mask: var(--arco-justo) center / 100% 100% no-repeat; } /* justa hasta la línea (02/10) */ .arco__ventana img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .arco--sin-foto .arco__ventana { background: radial-gradient(circle at 50% 40%, rgba(208, 116, 36, .28), transparent 65%), var(--jali), linear-gradient(#5a1220, var(--granate-fondo)); } .arco__ventana span { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 6vw, 2.4rem); line-height: 1.05; color: var(--acento); padding-top: 22%; } .arco h3 { margin: 22px 0 10px; font-size: 1.3rem; } .arco blockquote { margin: 0; } .arco blockquote p { font-family: var(--display); font-size: 1.08rem; line-height: 1.4; color: var(--crema); margin: 0 0 .6rem; } .arco footer { display: flex; justify-content: center; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--crema-2); } @media (min-width: 1000px) { .arcada__fila { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: 10px 0 0; max-width: 1040px; } } /* 4 desde el 02/10: los Tiger tacos tienen su bloque */ /* 6 · El friso: banda granate con festón dorado arriba y abajo, y las cifras separadas por flores de loto */ .friso { position: relative; background: var(--jali), linear-gradient(#4a0c17, var(--granate-fondo)); padding: clamp(46px, 7vw, 70px) var(--lado); } .friso::before, .friso::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--feston) 0 0 / 28px 12px repeat-x; } .friso::before { top: 10px; } .friso::after { bottom: 10px; transform: scaleY(-1); } .friso__lista { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho); display: grid; grid-template-columns: 1fr 1fr; gap: 34px 12px; text-align: center; } .friso li { position: relative; display: grid; gap: 8px; align-content: start; } .friso b { font-family: var(--display); font-weight: 600; font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; color: var(--acento); font-variant-numeric: lining-nums tabular-nums; } .friso span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #e3d3c2; line-height: 1.6; } @media (min-width: 900px) { .friso__lista { grid-template-columns: repeat(4, 1fr); } .friso li + li::before { content: ""; position: absolute; left: -20px; top: 18px; width: 40px; height: 24px; background: var(--loto) center / contain no-repeat; } } /* 7 · La terraza, tras tres arcos */ .celosia-terraza { max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; display: grid; gap: 36px; align-items: center; } .celosia-terraza__texto > p:not(.ceja) { color: var(--crema-2); max-width: 44ch; } .celosia-terraza__arcos { position: relative; margin: 0; aspect-ratio: 1; } .celosia-terraza__arcos img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--tres-arcos) center / 100% 100% no-repeat; mask: var(--tres-arcos) center / 100% 100% no-repeat; } .celosia-terraza__arcos::after { content: ""; position: absolute; inset: 0; background: var(--tres-arcos-linea) center / 100% 100% no-repeat; pointer-events: none; } @media (min-width: 900px) { .celosia-terraza { grid-template-columns: 4fr 7fr; } .celosia-terraza__arcos { aspect-ratio: 16 / 11; } } /* 8 · La historia, en una línea del tiempo */ .historia { max-width: 900px; margin: 0 auto; } .historia__cabeza { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: center; margin-bottom: clamp(36px, 5vw, 56px); } .historia__placa { margin: 0; } .historia__placa img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px; box-shadow: 0 0 0 1px var(--oro-linea), 0 14px 30px rgba(0, 0, 0, .45); } .historia__cabeza .ceja { margin-bottom: .6rem; } .linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; } .linea-tiempo::before { content: ""; position: absolute; left: 35px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(var(--acento), var(--oro-linea)); } .linea-tiempo li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 20px; align-items: start; padding-bottom: 30px; } .linea-tiempo__ano { position: relative; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 1px var(--acento), 0 0 0 6px var(--tinta), 0 0 0 7px rgba(233, 179, 90, .25); font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--acento); font-variant-numeric: lining-nums; } .linea-tiempo li > div { padding-top: 14px; display: grid; gap: 14px; } .linea-tiempo p { margin: 0; color: var(--crema); font-size: 1.05rem; } .linea-tiempo a, .linea-tiempo__titular { display: grid; gap: 4px; text-decoration: none; } /* desde el 05/10 los titulares no son enlaces */ .linea-tiempo q { font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.3; color: var(--crema); quotes: "«" "»"; transition: color .3s; } .linea-tiempo a:hover q { color: var(--oro-claro); } .linea-tiempo a span, .linea-tiempo__titular span { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); } .linea-tiempo__hoy .linea-tiempo__ano { background: var(--acento); color: var(--tinta); font-size: 1.05rem; } .linea-tiempo__hoy p strong { color: var(--acento); font-weight: 600; } @media (min-width: 900px) { .historia__cabeza { grid-template-columns: 130px 1fr; } } /* 9 · La pared de reseñas: dos filas en sentidos contrarios, sin costura (dos grupos iguales, el segundo oculto) */ .pared { overflow: hidden; } .pared .cabeza-seccion { margin-bottom: clamp(30px, 5vw, 50px); } .pared__fila { margin: 0 calc(-1 * var(--lado)) 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .pared__pista { display: flex; width: max-content; animation: desliza 70s linear infinite; } .pared__fila--vuelta .pared__pista { animation-direction: reverse; animation-duration: 80s; } .pared__fila:hover .pared__pista, .pared__fila:focus-within .pared__pista { animation-play-state: paused; } .pared__grupo { display: flex; gap: 16px; padding-right: 16px; } .resena-tarjeta { flex: none; width: min(78vw, 300px); margin: 0; padding: 22px 22px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; border: 1px solid rgba(233, 179, 90, .28); border-radius: 18px 18px 6px 6px; background: rgba(10, 29, 26, .85); } .resena-tarjeta blockquote { margin: 0; } .resena-tarjeta p { margin: 0; font-family: var(--display); font-size: 1.18rem; line-height: 1.35; color: var(--crema); } .resena-tarjeta figcaption { display: grid; gap: 8px; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--crema-2); } .resena-tarjeta__estrellas { display: block; width: 80px; height: 14px; background: var(--estrellas) left center / contain no-repeat; } @media (prefers-reduced-motion: reduce) { .pared__pista { animation: none; } .pared__fila { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .pared__grupo[aria-hidden] { display: none; } } /* 11 · La reserva, como la puerta de un templo: cúpula y cuerpo sobre turquesa */ .puerta { background: var(--jali), radial-gradient(60% 50% at 50% 45%, rgba(233, 179, 90, .1), transparent 70%), var(--turquesa-fondo); text-align: center; } .puerta__arco { max-width: 560px; margin: 0 auto; } .puerta__cupula { aspect-ratio: 100 / 30; margin: 0 -1px -1px; background: var(--arco-tarjeta) bottom / 100% 100% no-repeat; } .puerta__cupula { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M.5 30.5V24C.5 15 15 12 30 7.5 39 4.8 46 2.6 50 .6 54 2.6 61 4.8 70 7.5 85 12 99.5 15 99.5 24V30.5' fill='%2304110f' fill-opacity='.55' stroke='%23e9b35a' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); } .puerta__cuerpo { padding: 0 clamp(22px, 5vw, 48px) clamp(32px, 5vw, 48px); border: 1.2px solid var(--acento); border-top: 0; background: rgba(4, 17, 15, .55); } .puerta__cuerpo > .ceja { margin-top: -12%; position: relative; } .puerta h2 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1rem; } .puerta__cuerpo > p:not(.ceja) { color: var(--crema-2); } .puerta__telefono { min-height: 60px; padding: 0 2.2em; font-size: 1.05rem; letter-spacing: .14em; margin: .6rem 0 1.2rem; } /* El botón de reservar de la puerta (Eloy, 02/10/2026: «en lugar de teléfono, al botón de reservas») */ .puerta__reservar { min-height: 60px; padding: 0 2.2em; margin: .6rem 0 1.2rem; } .puerta__horario { margin: 0; } .puerta__llegar { margin: 30px auto 0; max-width: 560px; display: grid; gap: 14px; justify-items: center; color: var(--crema-2); } .puerta__llegar p { margin: 0; } .puerta__llegar b { color: var(--crema); font-weight: 600; } .puerta + .pie, .preguntas + .puerta { border-top: 0; } /* Aire entre el titular y su texto, y menos hueco entre el thali y la arcada (01/10) */ .thali__texto h2, .celosia-terraza__texto h2 { margin-bottom: 1.3rem; } .thali + .arcada { padding-top: clamp(30px, 5vw, 60px); } /* En tableta (una sola columna) las hornacinas no pasan de 560 px: a todo lo ancho la cúpula quedaba enorme y el texto, perdido */ @media (min-width: 600px) and (max-width: 899px) { .menus__lista { max-width: 560px; } } /* La pared, sin huecos (01/10, Angel: «se queda medio vacía la cinta y luego vuelve de repente»): con 4 tarjetas por fila, un grupo medía menos que una pantalla de PC y, al final de la vuelta, asomaba el vacío. Ahora 8 por fila, tres grupos iguales (dos ocultos) y la pista avanza exactamente uno: hace falta una pantalla de más de dos grupos (~5.000 px) para ver un hueco. Misma velocidad que antes, unos 20 px por segundo. */ .pared__pista { animation: pared 125s linear infinite; } .pared__fila--vuelta .pared__pista { animation-direction: reverse; animation-duration: 140s; } @keyframes pared { to { transform: translateX(-33.3333%); } } /* Los platos sin reseña de 5★ del último año llevan la descripción de su carta en lugar de una cita (02/10/2026) */ .arco__carta { font-family: var(--display); font-style: italic; font-size: 1.08rem; line-height: 1.4; color: var(--crema-2); margin: 0; } /* La entradilla de las cabeceras centradas iba pegada a la izquierda en el PC (su caja de 52ch no se centraba): arreglo, 02/10 */ .cabeza-seccion:not(.cabeza-seccion--izq) > p:not(.ceja) { margin-left: auto; margin-right: auto; } /* ═════════ 02/10/2026 (tarde) · MÁS VISUAL Y CON EL SEO LOCAL ═════════ Angel: «la siento un poco vacía en sentido de imágenes… fotos grandes, algún bloque más visual, algún efecto parallax… transiciones entre bloques interesantes… darle algo de personalidad». La firma: las ventanas del templo. */ /* La ceja dentro del h2 (SEO local de Eloy): se ve igual que la suelta, en su línea y alineada como el bloque */ h2 > .ceja { display: flex; width: fit-content; max-width: 100%; line-height: 1.65; margin-left: auto; margin-right: auto; } .thali__texto h2 > .ceja, .historia__cabeza h2 > .ceja, .cerca__texto h2 > .ceja { margin-left: 0; } .historia__cabeza h2 > .ceja { margin-bottom: .6rem; } .preguntas summary h3 { font: inherit; letter-spacing: inherit; margin: 0; } /* LAS VENTANAS DEL TEMPLO: una foto a todo lo ancho vista a través de arcos conopiales recortados en la pared de celosía. La foto se mueve más despacio que la pared (data-parallax). Móvil: un arco; PC: tres, y la foto sigue de uno a otro. */ .ventanal { --vw: min(84vw, 430px); --vh: calc(var(--vw) * 1.3); position: relative; padding: clamp(36px, 6vw, 70px) 0 clamp(64px, 9vw, 110px); background: radial-gradient(60% 50% at 50% 40%, rgba(208, 116, 36, .24), transparent 72%), var(--jali), var(--tinta); } .ventanal__marco { position: relative; width: var(--vw); height: var(--vh); margin: 0 auto; } .ventanal__ventanas { position: absolute; inset: 0; overflow: hidden; background: var(--tinta-2); -webkit-mask: var(--arco-mascara) 0 0 / 100% 100% no-repeat; mask: var(--arco-mascara) 0 0 / 100% 100% no-repeat; } .ventanal__foto { position: absolute; left: 0; right: 0; top: -40%; height: 180%; will-change: transform; } /* foto de sobra arriba y abajo para el parallax */ .ventanal__foto picture, .ventanal__foto img { display: block; width: 100%; height: 100%; } .ventanal__foto img { object-fit: cover; object-position: 50% 45%; } /* el marco dorado, 8 px por fuera de la foto, con la gota en lo alto de cada arco */ .ventanal__arcos { position: absolute; inset: -8px; display: grid; grid-template-columns: 1fr; pointer-events: none; } .ventanal__arcos i { position: relative; background: var(--arco-linea) center / 100% 100% no-repeat; } .ventanal__arcos i::after { content: ""; position: absolute; left: 50%; top: -15px; width: 9px; height: 14px; transform: translateX(-50%); background: var(--acento); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; } .ventanal__arcos i:nth-child(n+2) { display: none; } .ventanal__texto { max-width: 640px; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0 var(--lado); text-align: center; } .ventanal__texto h2 { margin-bottom: 1.1rem; } .ventanal .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .ventanal__texto p { color: var(--crema-2); margin: 0 auto; max-width: 46ch; } .ventanal__texto h2 em, .mesa h2 em, .cerca h2 em { font-style: italic; } @media (min-width: 900px) { .ventanal { --gap: clamp(22px, 2.6vw, 38px); --vw: min(100vw - 2 * var(--lado), var(--ancho)); --arco: calc((var(--vw) - 2 * var(--gap)) / 3); --vh: calc(var(--arco) * 1.22); } /* tres arcos repartidos de borde a borde: «space» los separa justo lo que mide el hueco */ .ventanal__ventanas { -webkit-mask: var(--arco-mascara) 0 0 / var(--arco) 100% space no-repeat; mask: var(--arco-mascara) 0 0 / var(--arco) 100% space no-repeat; } .ventanal__arcos { grid-template-columns: repeat(3, calc(var(--arco) + 16px)); column-gap: calc(var(--gap) - 16px); } .ventanal__arcos i:nth-child(n+2) { display: block; } } /* LA MESA: la galería grande. Sin degradado: el 02/10 se calentaba hacia el granate del friso y Angel lo quitó («me gustaba más antes, la banda granate sola daba mejor sensación»). Fondo de la página. */ .mesa { padding-left: 0; padding-right: 0; } .mesa .cabeza-seccion { padding: 0 var(--lado); } .mesa__mosaico { list-style: none; margin: 0; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(var(--lado), 12vw) 26px; scroll-padding: 0 12vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mesa__mosaico::-webkit-scrollbar { display: none; } .mesa__foto { flex: none; width: 76vw; max-width: 360px; aspect-ratio: 4 / 5; scroll-snap-align: center; position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(233, 179, 90, .35), 0 24px 50px rgba(0, 0, 0, .5); } .mesa__foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); will-change: transform; } /* se desliza al pasar (data-deriva) */ @media (min-width: 900px) { .mesa__mosaico { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(16px, 1.8vw, 24px); overflow: visible; max-width: calc(var(--ancho) + 2 * var(--lado)); margin: 0 auto; padding: 8px var(--lado) 0; } .mesa__foto { width: auto; max-width: none; } .mesa__foto--alta { grid-row: span 2; aspect-ratio: auto; } .mesa { padding-bottom: clamp(110px, 12vw, 150px); } } /* CERCA DE DIEGO DE LEÓN: el texto a un lado y los minutos a pie al otro; el fondo baja al turquesa de la puerta */ .cerca { display: grid; gap: 36px; align-items: center; background: linear-gradient(var(--tinta) 55%, var(--turquesa-fondo)); } .cerca > * { width: 100%; max-width: var(--ancho); margin-left: auto; margin-right: auto; } .cerca__texto h2 { margin-bottom: 1.2rem; } .cerca__texto > p { color: var(--crema-2); max-width: 52ch; } .cerca__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--oro-linea); } .cerca__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 17px 4px; border-bottom: 1px solid rgba(233, 179, 90, .25); } .cerca__lista span { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.25; } .cerca__lista small { display: block; font-family: var(--texto); font-size: .78rem; color: var(--crema-2); letter-spacing: .02em; } .cerca__lista b { font-family: var(--texto); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--acento); white-space: nowrap; } @media (min-width: 900px) { .cerca { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; padding-left: max(var(--lado), calc((100% - var(--ancho)) / 2)); padding-right: max(var(--lado), calc((100% - var(--ancho)) / 2)); } .cerca > * { max-width: none; } } .cerca + .puerta { border-top: 0; } /* EL TORAN: guirnalda de caléndulas y hojas de mango colgada sobre la puerta de la reserva. Se mece despacio desde arriba. */ .puerta { position: relative; padding-top: clamp(150px, 16vw, 190px); /* al mecerse, el toran asomaba 2-3 px por la derecha y la página se desbordaba en el móvil: se recorta aquí, en la sección, nunca en html/body (scroll infinito de Safari iOS) */ overflow: hidden; overflow: clip; } .toran { position: absolute; top: 0; left: 0; right: 0; height: 120px; pointer-events: none; transform-origin: 50% 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='92' viewBox='0 0 72 92'%3E%3Cdefs%3E%3CradialGradient id='m' cx='.4' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23ffd36b'/%3E%3Cstop offset='.6' stop-color='%23f0a12b'/%3E%3Cstop offset='1' stop-color='%23c8641a'/%3E%3C/radialGradient%3E%3ClinearGradient id='h' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%232f6b3a'/%3E%3Cstop offset='1' stop-color='%23508f45'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 5C18 17 54 17 72 5' fill='none' stroke='%23e9b35a' stroke-width='1.6'/%3E%3Cpath d='M0 5v36' stroke='%23e9b35a' stroke-opacity='.5'/%3E%3Cpath d='M0 41c-5-9-5-21 0-30 5 9 5 21 0 30Z' fill='url(%23h)'/%3E%3Cpath d='M72 41c-5-9-5-21 0-30 5 9 5 21 0 30Z' fill='url(%23h)'/%3E%3Cpath d='M0 13v26M72 13v26' stroke='%231d4a28' stroke-width='.6'/%3E%3Cpath d='M36 14v60' stroke='%23e9b35a' stroke-opacity='.45'/%3E%3Cg fill='url(%23m)'%3E%3Ccircle cx='36' cy='22' r='5.2'/%3E%3Ccircle cx='36' cy='33' r='5.2'/%3E%3Ccircle cx='36' cy='44' r='5.2'/%3E%3Ccircle cx='36' cy='55' r='5.2'/%3E%3Ccircle cx='36' cy='66' r='5.2'/%3E%3C/g%3E%3Cpath d='M36 72l-3.2 8h6.4Z' fill='%23e9b35a'/%3E%3Ccircle cx='36' cy='82' r='2.2' fill='%23e9b35a'/%3E%3C/svg%3E") 50% 0 / 94px 120px repeat-x; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); animation: toran-mece 7s ease-in-out infinite alternate; } @keyframes toran-mece { from { transform: skewX(-1.1deg); } to { transform: skewX(1.1deg); } } @media (prefers-reduced-motion: reduce) { .toran { animation: none; } .ventanal__foto { transform: none !important; top: 0; height: 100%; } .mesa__foto img { transform: none !important; } } /* EL PLATO ESTRELLA (02/10/2026, tarde): los Tiger tacos sobre su tigre, la foto entera fundida en un negro como el suyo. Móvil: la foto arriba, a todo lo ancho; PC: la foto a la izquierda, hasta el borde, y el texto a la derecha. */ .plato-estrella { position: relative; display: grid; align-items: center; overflow: hidden; background: linear-gradient(var(--tinta), #030303 16%, #030303 84%, var(--tinta)); padding: clamp(40px, 6vw, 70px) 0 clamp(70px, 9vw, 110px); } .plato-estrella__foto { margin: 0; } .plato-estrella__foto img { width: 100%; height: auto; -webkit-mask: radial-gradient(62% 58% at 50% 52%, #000 55%, transparent 100%); mask: radial-gradient(62% 58% at 50% 52%, #000 55%, transparent 100%); } .plato-estrella__texto { padding: 0 var(--lado); max-width: 560px; } .plato-estrella__texto h2 { margin-bottom: 1.1rem; } .plato-estrella__texto h2 em { display: block; font-style: italic; } .plato-estrella__texto > p { color: var(--crema-2); } .plato-estrella__precio { margin: 0 0 1.4rem; } .plato-estrella__precio b { font-family: var(--display); font-weight: 600; font-size: 1.9rem; color: var(--acento); } .plato-estrella .cita { margin: 0; } .plato-estrella h2 > .ceja { margin-left: 0; } @media (min-width: 900px) { .plato-estrella { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: 0; padding-right: max(var(--lado), calc((100% - var(--ancho)) / 2)); } .plato-estrella__foto { margin-left: -4vw; } .plato-estrella__texto { padding: 0; } } /* LOS GUARDIANES: dos elefantes sobre su pedestal, a los lados de la puerta y mirando hacia ella, como las estatuas que flanquean la entrada de un templo */ .puerta__arco { position: relative; } .puerta__guardian { position: absolute; z-index: 1; bottom: -2px; width: 112px; pointer-events: none; } .puerta__guardian img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); } .puerta__guardian::after { content: ""; display: block; height: 12px; margin: -9% 10% 0; /* el pedestal; -9 %: la foto trae un 12 % de aire bajo las patas */ background: linear-gradient(rgba(233, 179, 90, .22), rgba(4, 17, 15, .6)); border-top: 1px solid var(--acento); box-shadow: 0 10px 18px rgba(0, 0, 0, .35); } .puerta__guardian--izq { left: -16px; } .puerta__guardian--izq img { transform: scaleX(-1); } /* la foto mira a la izquierda: este se da la vuelta */ .puerta__guardian--dcha { right: -16px; } .puerta__cuerpo { padding-bottom: 112px; } @media (min-width: 900px) { .puerta__guardian { width: clamp(200px, 18vw, 260px); } .puerta__guardian--izq { left: auto; right: calc(100% + 10px); } .puerta__guardian--dcha { right: auto; left: calc(100% + 10px); } .puerta__cuerpo { padding-bottom: clamp(32px, 5vw, 48px); } } /* LOS MENÚS, MÁS SENCILLOS (02/10/2026; documento de Eloy del 01/10): en la tarjeta, título, precio, lo que incluye y un botón; cada plato, en su ventana. Todo centrado y los tres precios a la misma altura: la etiqueta «Vegano» va encima del título sin empujarlo, y el título cabe en una línea en los tres. Los botones, al pie de la tarjeta. (Se probó a alinear con subgrid: descolocaba la cúpula, que cuelga del margen de la tarjeta.) */ .menu { display: flex; flex-direction: column; align-items: center; } .menu__cabeza { align-self: stretch; } .menu__etiqueta { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin: 0 0 .6rem; white-space: nowrap; } .menu__precio { margin-bottom: 1.1rem; } .menu__resumen { max-width: 32ch; margin: 0 auto 1.7rem; color: var(--crema-2); font-size: .98rem; line-height: 1.6; } .menu__ver { margin-top: auto; min-width: 12rem; background: transparent; cursor: pointer; } html:not(.js) .menu__ver { display: none; } @media (min-width: 900px) { .menu h3 { font-size: clamp(1.75rem, 2.9vw, 2.5rem); white-space: nowrap; } } /* LA VENTANA DE CADA MENÚ: centrada en el PC; en el móvil, una hoja que sube desde abajo, a lo ancho, con el botón de reservar siempre a la vista. Solo se desplaza el listado de dentro (nada de overflow en html o body: en Safari iOS provoca el «scroll infinito»). */ .ventana-menu { width: min(100% - 32px, 34rem); max-width: none; max-height: min(86svh, 46rem); margin: auto; padding: 0; border: 1px solid var(--oro-linea); border-radius: 10px; overflow: hidden; background: var(--tinta-2) var(--jali); color: var(--crema); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .ventana-menu::backdrop { background: rgba(2, 10, 9, .76); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .ventana-menu[open] { display: flex; flex-direction: column; animation: ventana-entra .3s var(--curva); } /* UNA VENTANA Y LOS MENÚS EN FILA (05/10/2026; Eloy: «puedes desplazar y ver los otros sin que tengas que salir y entrar al otro»). Cada menú ocupa la ventana entera y el dedo pasa de uno a otro (desplazamiento del navegador, con imán en cada menú). El marco mide lo que el menú más largo y no cambia al pasar. Abajo, las flechas y los puntos. */ .ventana-menu__pase { display: flex; flex: 1 1 auto; width: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .ventana-menu__pase::-webkit-scrollbar { display: none; } .ventana-menu__caja { position: relative; display: flex; flex-direction: column; flex: 0 0 100%; min-width: 0; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; } .ventana-menu__cuerpo.hay-mas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); } .ventana-menu__nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 16px max(12px, env(safe-area-inset-bottom)); background: var(--tinta-2); } .ventana-menu__flecha { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(233, 179, 90, .3); border-radius: 50%; background: none; color: var(--crema); cursor: pointer; } .ventana-menu__flecha:disabled { opacity: .3; cursor: default; } .ventana-menu__flecha:not(:disabled):hover { border-color: var(--acento); color: var(--acento); } .ventana-menu__puntos { display: flex; align-items: center; gap: 7px; } .ventana-menu__puntos i { width: 7px; height: 7px; border-radius: 999px; background: var(--crema-2); opacity: .45; transition: width .25s ease, opacity .25s ease, background-color .25s ease; } .ventana-menu__puntos i.activo { width: 20px; background: var(--acento); opacity: 1; } @media (prefers-reduced-motion: reduce) { .ventana-menu__puntos i { transition: none; } } /* 06/10/2026 — CON EL DEDO NO SE PASABA DE MENÚ (Angel, en su Android: «que se pueda desplazar swipeando lateralmente de menú en menú en lugar de estar obligado a tapear los botones de abajo»). La lista de platos tenía `overscroll-behavior: contain` en los dos ejes: el gesto de lado empezaba sobre ella (ocupa casi toda la ventana), no tenía hacia dónde ir y no se lo pasaba a la fila de menús de detrás. Ahora solo se contiene en vertical. Medido con un móvil táctil simulado: antes, tres pasadas de dedo y seguía en el menú 1; ahora pasa al 2, al 3 y vuelve. */ .ventana-menu__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: auto contain; -webkit-overflow-scrolling: touch; padding: 46px clamp(22px, 6vw, 44px) 10px; text-align: center; } .ventana-menu__cuerpo .ceja { margin-bottom: .9rem; } .ventana-menu__cuerpo .ceja::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .ventana-menu h3 { font-size: clamp(2.1rem, 7vw, 2.7rem); line-height: 1.05; } .ventana-menu .menu__precio { margin: .8rem 0 1.2rem; } .ventana-menu .menu__platos { text-align: center; } .ventana-menu .menu__platos dd { margin-bottom: 1.15rem; } .ventana-menu__pie { flex: none; margin: 0; padding: 14px clamp(22px, 6vw, 44px) 12px; border-top: 1px solid rgba(233, 179, 90, .2); background: var(--tinta-2); } .ventana-menu__cerrar { position: absolute; z-index: 2; top: 6px; right: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--crema); font: 400 1.9rem/1 var(--texto); cursor: pointer; } .ventana-menu__cerrar:hover { background: rgba(239, 229, 210, .08); } @media (max-width: 599px) { .ventana-menu { width: 100%; max-height: 88svh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 18px 18px 0 0; } .ventana-menu[open] { animation-name: ventana-sube; } .ventana-menu::before { content: ""; position: absolute; z-index: 2; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(239, 229, 210, .25); } } @keyframes ventana-entra { from { opacity: 0; transform: translateY(14px) scale(.98); } } @keyframes ventana-sube { from { transform: translateY(100%); } } @media (prefers-reduced-motion: reduce) { .ventana-menu[open] { animation: none; } } /* LAS PÁGINAS DE RESERVA Y GRACIAS (02/10/2026), con la piel de Sagar: el logo redondo arriba, la tarjeta en verde con filo dorado, y el calendario de muestra tapado (no se puede reservar en otro restaurante por error) con su aviso. */ .reserva__logo-img { width: 96px; height: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(233, 179, 90, .35), 0 12px 30px rgba(0, 0, 0, .45); } .pagina-reserva .reserva__velo { background: linear-gradient(180deg, rgba(4, 17, 15, .8), rgba(4, 17, 15, .93)); } .pagina-reserva .reserva__tarjeta { background: var(--tinta-2) var(--jali); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--oro-linea); } .pagina-reserva .reserva__pie { text-align: center; color: var(--crema-2); } .pagina-reserva .reserva__pie + .reserva__pie { margin-top: 6px; } .reserva__modulo { position: relative; } .reserva__muestra { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed var(--oro-linea); border-radius: 6px; color: var(--oro-claro); font-size: .85rem; line-height: 1.5; text-align: center; } .reserva__tapa { position: absolute; inset: 0; z-index: 1; cursor: not-allowed; background: rgba(4, 17, 15, .18); border-radius: 6px; } /* LAS VENTANAS, A SANGRE EN EL PC (02/10/2026, noche; Angel: «la sección de parallax con las tres cúpulas no me convence en PC, en móvil está guay… luce poco la foto»). En el PC la foto ocupa todo el ancho, sin arcos, con el mismo parallax; en el móvil sigue el arco, tal cual. */ @media (min-width: 900px) { .ventanal { padding-top: 0; background: var(--tinta); } .ventanal__marco { width: 100%; height: clamp(520px, 80vh, 880px); } .ventanal__ventanas { -webkit-mask: none; mask: none; } .ventanal__arcos { display: none; } } /* FOTO A SANGRE: los Tiger tacos de cerca, a todo el ancho y con parallax (foto de sobra arriba y abajo, como las ventanas). Sin texto: un respiro entre las reseñas y las preguntas. */ .respiro { position: relative; overflow: hidden; height: clamp(420px, 72svh, 640px); background: #000; } .respiro__foto { position: absolute; left: 0; right: 0; top: -25%; height: 150%; will-change: transform; } /* menos sobrante que en las ventanas: con 180 % el plato salía tan ampliado que no se veía el tigre */ .respiro__foto picture, .respiro__foto img { display: block; width: 100%; height: 100%; } .respiro__foto img { object-fit: cover; object-position: 50% 50%; } @media (min-width: 700px) { .respiro { height: clamp(480px, 78vh, 860px); } } @media (prefers-reduced-motion: reduce) { .respiro__foto { transform: none !important; top: 0; height: 100%; } } /* EL NOMBRE «SAGAR» EN TODAS LAS PÁGINAS (02/10/2026, noche; Angel: «el nombre Sagar también en las demás… y un poco más grande»): carta, legales, reserva y gracias. En el pie, el logo redondo (Angel: «déjalo en el pie, me gustaba»). El mismo bloque que la portada: el nombre de su logo, en vectorial, y «Indian Cuisine» debajo, centrado. */ .marca-sagar { display: grid; justify-items: center; gap: 9px; width: max-content; margin-left: auto; margin-right: auto; line-height: 1; text-decoration: none; } .marca-sagar img { display: block; width: clamp(230px, 62vw, 260px); height: auto; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); } .marca-sagar span { font-family: var(--display); font-weight: 500; font-size: .85rem; letter-spacing: .42em; padding-left: .42em; /* como en su logo: algo más estrecho que el nombre */ text-transform: uppercase; color: var(--acento); white-space: nowrap; } .reserva__logo.marca-sagar img { width: clamp(220px, 58vw, 240px); } /* LAS VENTANAS DE LOS MENÚS, EN LISTA (02/10/2026, noche; vídeo de Eloy: «no parece como que haya que elegir dos… ellos lo tienen así enlistado… que no sea un parrafazo»): un plato por línea, como en su web, y «Elige 2» al lado del apartado. */ .menu__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .menu__lista li { color: var(--crema); font-size: .98rem; line-height: 1.45; } .menu__elige-n { display: inline-block; margin-left: .5em; padding: 1px 9px 2px; border: 1px solid var(--oro-linea); border-radius: 999px; font-size: .64rem; letter-spacing: .16em; color: var(--oro-claro); vertical-align: 1px; } .menu__nota { margin: .35rem 0 0; color: var(--crema-2); font-size: .88rem; } .ventana-menu .menu__platos dt { margin-bottom: .45rem; } /* LA CINTA EN «BALDA» (02/10/2026, noche; Eloy: «pon una balda tipo como esta >> vidaycomida.com»): el nombre de su logo y «Indian Cuisine», grandes y en contorno dorado sobre la tinta, pasando despacio. */ .banda--balda { background: var(--tinta); color: var(--acento); border-top: 1px solid rgba(233, 179, 90, .22); border-bottom: 1px solid rgba(233, 179, 90, .22); } .banda--balda .banda__pista { gap: clamp(30px, 4.4vw, 72px); padding: clamp(20px, 2.8vw, 34px) 0; animation-duration: 70s; } .banda--balda img { flex: none; height: clamp(50px, 6.6vw, 96px); width: auto; } .banda--balda span { font-family: var(--display); font-weight: 700; font-size: clamp(2.5rem, 6.6vw, 6.2rem); line-height: 1; text-transform: uppercase; letter-spacing: .05em; color: transparent; -webkit-text-stroke: 1.2px var(--acento); paint-order: stroke; } /* LA BANDEJA, DE LATÓN DE VERDAD (02/10/2026, noche): debajo de los cuencos, la foto de una bandeja labrada en lugar del degradado dibujado; se queda el filo (las sombras de dentro) y fuera los anillos pintados, que ya los trae la foto. */ .thali__bandeja--laton { background: radial-gradient(circle at 34% 28%, #f6dc9c 0%, #d3a24c 30%, #8a5d20 70%, #4f3310 100%); } .thali__bandeja--laton::before { display: none; } .thali__laton { position: absolute; inset: 5.5%; width: 89%; height: 89%; border-radius: 50%; object-fit: cover; will-change: transform; box-shadow: 0 0 0 1.5px rgba(255, 232, 175, .45), inset 0 0 30px rgba(60, 38, 10, .45); } .thali__bandeja--laton .cuenco { z-index: 1; } @media (prefers-reduced-motion: reduce) { .thali__laton { transform: none !important; } } /* LA PORTADA, SIN CÚPULA (02/10/2026, noche; Eloy, por Angel: «la foto completa a media pantalla, sin la cúpula»): en el móvil, a todo el ancho y media pantalla de alto; en el PC, la mitad derecha entera, de arriba abajo y hasta el borde. */ .portada__media { margin: 0; height: clamp(260px, 50svh, 480px); } .portada__media img { -webkit-mask: none; mask: none; } .portada__media::before, .portada__media::after { display: none; } @media (min-width: 900px) { .portada__media { align-self: stretch; height: auto; margin: 0; } } /* LAS VENTANAS DE LOS MENÚS, SIN BARRA (02/10/2026, noche; Angel: «ha aparecido una barra lateral bastante fea… que entre todo… gana espacio de donde puedas»). Entrantes y principales lado a lado (y «Con» e «Incluye»), la cabecera más recogida, fuera la frase en cursiva (ya lo dice «Elige 2») y, en el móvil, la hoja algo más alta. Medido en 1440×900, 1366×768, iPhone 15 Pro y iPhone SE. Si en una pantalla rara no cupiera, la barra es fina y dorada. */ .ventana-menu__cuerpo { padding-top: 34px; scrollbar-width: thin; scrollbar-color: var(--oro-linea) transparent; } .ventana-menu__cuerpo .ceja { margin-bottom: .55rem; } .ventana-menu h3 { font-size: clamp(1.9rem, 6vw, 2.35rem); } .ventana-menu .menu__precio { margin: .45rem 0 1rem; } .ventana-menu .menu__precio b { font-size: clamp(2.1rem, 6.5vw, 2.6rem); } .menu__platos--rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(14px, 4vw, 30px); padding-top: 1rem; } .menu__platos--rejilla dd { margin: 0 !important; } .menu__platos--rejilla .menu__lista { gap: 1px; } .menu__platos--rejilla .menu__lista li { font-size: .92rem; line-height: 1.38; } .menu__platos--rejilla dt { line-height: 1.5; } .ventana-menu .menu__elige-n { margin-left: .35em; padding: 0 7px 1px; font-size: .58rem; } @media (max-width: 599px) { .ventana-menu { max-height: 92svh; } } /* …y en pantallas bajas (iPhone SE), algo más recogida todavía */ @media (max-height: 620px) { .ventana-menu__cuerpo { padding-top: 26px; } .ventana-menu__cuerpo .ceja { margin-bottom: .3rem; } .ventana-menu h3 { font-size: 1.75rem; } .ventana-menu .menu__precio { margin: .3rem 0 .7rem; } .ventana-menu .menu__precio b { font-size: 1.95rem; } .menu__platos--rejilla { padding-top: .8rem; gap: .8rem 14px; } .menu__platos--rejilla .menu__lista li { font-size: .87rem; line-height: 1.32; } .ventana-menu__pie { padding-top: 10px; } } /* EL PIE, CON EL NOMBRE EN GRANDE (02/10/2026, noche; Eloy: «el Sagar así en grande con el difuminado, sin el Indian Cuisine», como el «LIMA NIKKEI» de su pie): el nombre de su logo con el mismo degradado, que se apaga hacia abajo. */ .pie__gigante--nombre { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; line-height: 0; white-space: normal; margin: 28px auto 52px; } .pie__gigante--nombre img { display: block; width: min(80vw, 980px); height: auto; margin: 0 auto; } /* LOS FAROLILLOS (02/10/2026, noche): en lugar del toran, las lámparas de latón calado de los renders de Raju, colgadas sobre la puerta de la reserva, con su halo cálido y las estrellitas que proyectan (la «calidez» de los renders). Se mecen desde la anilla, cada una a su ritmo. */ .toran { display: none; } .farolillos { position: absolute; inset: 0 0 auto; height: 300px; pointer-events: none; } .farolillo { position: absolute; top: 0; width: clamp(38px, 4vw, 56px); height: calc(var(--cuerda) + clamp(74px, 7.8vw, 108px)); transform-origin: 50% 0; animation: farol-mece var(--ritmo, 7s) ease-in-out infinite alternate; } .farolillo::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: var(--cuerda); background: rgba(233, 179, 90, .55); } .farolillo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 60 / 116; background: url("adornos/farolillo.svg") center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(255, 186, 84, .55)) drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); } /* el halo de luz y las estrellas, alrededor del cuerpo del farolillo */ .farolillos::before, .farolillos::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .farolillo { --halo: radial-gradient(circle at 50% calc(100% - 46px), rgba(255, 176, 70, .3), transparent 62%); } .farolillo span { display: none; } .farolillo--1 { left: 9%; --cuerda: 54px; --ritmo: 6.4s; } .farolillo--2 { left: 25%; --cuerda: 112px; --ritmo: 7.6s; animation-delay: -2s; } .farolillo--3 { left: 71%; --cuerda: 86px; --ritmo: 6.9s; animation-delay: -4s; } .farolillo--4 { left: 87%; --cuerda: 40px; --ritmo: 8.2s; animation-delay: -1s; } .farolillos { background: radial-gradient(150px 150px at 9% 120px, rgba(255, 176, 70, .22), transparent 70%), radial-gradient(170px 170px at 25% 185px, rgba(255, 176, 70, .22), transparent 70%), radial-gradient(160px 160px at 71% 160px, rgba(255, 176, 70, .22), transparent 70%), radial-gradient(140px 140px at 87% 105px, rgba(255, 176, 70, .22), transparent 70%); } .farolillos::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='%23ffd27a'%3E%3Cpath d='M8 4l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M31 13l.7 2.2 2.3.8-2.3.8-.7 2.2-.7-2.2-2.3-.8 2.3-.8z'/%3E%3Cpath d='M18 30l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9z'/%3E%3Ccircle cx='40' cy='36' r='.9'/%3E%3Ccircle cx='4' cy='24' r='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 46px 46px; -webkit-mask: radial-gradient(130px 130px at 9% 120px, #000, transparent 70%), radial-gradient(150px 150px at 25% 185px, #000, transparent 70%), radial-gradient(140px 140px at 71% 160px, #000, transparent 70%), radial-gradient(120px 120px at 87% 105px, #000, transparent 70%); mask: radial-gradient(130px 130px at 9% 120px, #000, transparent 70%), radial-gradient(150px 150px at 25% 185px, #000, transparent 70%), radial-gradient(140px 140px at 71% 160px, #000, transparent 70%), radial-gradient(120px 120px at 87% 105px, #000, transparent 70%); opacity: .55; } @keyframes farol-mece { from { transform: translateX(-50%) rotate(-2.2deg); } to { transform: translateX(-50%) rotate(2.2deg); } } @media (max-width: 899px) { .farolillo--1 { left: 12%; --cuerda: 34px; } .farolillo--2 { display: none; } .farolillo--3 { left: 50%; --cuerda: 14px; } .farolillo--4 { left: 88%; --cuerda: 52px; } .farolillos { background: radial-gradient(120px 120px at 12% 82px, rgba(255, 176, 70, .22), transparent 70%), radial-gradient(110px 110px at 50% 62px, rgba(255, 176, 70, .22), transparent 70%), radial-gradient(120px 120px at 88% 100px, rgba(255, 176, 70, .22), transparent 70%); } .farolillos::after { -webkit-mask: radial-gradient(100px 100px at 12% 82px, #000, transparent 70%), radial-gradient(90px 90px at 50% 62px, #000, transparent 70%), radial-gradient(100px 100px at 88% 100px, #000, transparent 70%); mask: radial-gradient(100px 100px at 12% 82px, #000, transparent 70%), radial-gradient(90px 90px at 50% 62px, #000, transparent 70%), radial-gradient(100px 100px at 88% 100px, #000, transparent 70%); } } @media (prefers-reduced-motion: reduce) { .farolillo { animation: none; transform: translateX(-50%); } } /* LA DIOSA DEL OCÉANO (02/10/2026, noche): Lakshmi en una hornacina, junto a «Sagar significa océano». En el PC, a la derecha del texto; en el móvil, debajo. Con la línea dorada y la gota de las otras hornacinas. */ .ventanal__texto--diosa { max-width: 980px; display: grid; justify-items: center; gap: clamp(30px, 5vw, 56px); } .diosa { margin: 0; width: min(62vw, 300px); } .diosa__arco { position: relative; aspect-ratio: 100 / 130; } .diosa__arco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--arco-justo) center / 100% 100% no-repeat; mask: var(--arco-justo) center / 100% 100% no-repeat; } .diosa__arco::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--arco-linea) center / 100% 100% no-repeat; pointer-events: none; } .diosa__arco::after { content: ""; position: absolute; left: 50%; top: -16px; width: 9px; height: 14px; transform: translateX(-50%); background: var(--acento); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; } .diosa figcaption { margin-top: 14px; font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1.4; color: var(--crema-2); text-align: center; } @media (min-width: 900px) { .ventanal__texto--diosa { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; text-align: left; } .ventanal__texto--diosa h2 > .ceja { margin-left: 0; } .ventanal__texto--diosa .ceja::after { display: none; } .ventanal__texto--diosa .ventanal__frase p { margin-left: 0; } } /* LA CENEFA (02/10/2026, noche; los renders: «una cenefa»; el logo: «las flores esas»): banda turquesa con filos dorados y flores de loto rojas y naranjas. De borde en la banda granate de las cifras, y de techo del que cuelgan los farolillos. */ .friso::before, .friso::after { height: 26px; background: url("adornos/cenefa.svg") 0 0 / 64px 26px repeat-x; } .friso::before { top: 0; } .friso::after { bottom: 0; transform: none; } .friso { padding-top: clamp(62px, 8vw, 86px); padding-bottom: clamp(62px, 8vw, 86px); } .farolillos { top: 0; } .puerta::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 26px; background: url("adornos/cenefa.svg") 0 0 / 64px 26px repeat-x; } .farolillo { top: 26px; } /* LA CINTA, CON LAS PALABRAS DE ANTES (02/10/2026, noche; Angel: «me gusta el aspecto pero las palabras de antes me gustaban más»): los platos y la terraza, en contorno dorado, separados por un rombo. */ .banda--balda b { display: inline-block; flex: none; width: 11px; height: 11px; background: var(--acento); transform: rotate(45deg); opacity: .75; } /* SIN EL RECUADRO AZUL AL TOCAR (02/10/2026, noche; Angel: «una caja azul flashea en cada item al tapearlo», el mismo fallo que ya se quitó en el molde de las landings). El foco con teclado sigue viéndose (:focus-visible). */ html { -webkit-tap-highlight-color: transparent; } /* LAS CÚPULAS, SIN ESCALÓN EN EL HOMBRO (02/10/2026, noche; Angel: «hay un pequeño desajuste en las líneas de estas cúpulas, se aprecia que hay un corte»). La cúpula (un dibujo) y los lados (el borde de la tarjeta) los redondeaba el navegador cada uno a su píxel: según dónde cayera la tarjeta, medio píxel o uno de escalón, medido píxel a píxel. Ahora los lados también son un dibujo, en una pieza con LA MISMA posición y el mismo ancho que la cúpula: se redondean igual y las líneas coinciden siempre. El brillo de detrás del título pasa a la cabecera de la tarjeta. */ .menu { border: 0; } .menu::after { left: -1px; right: -1px; top: 0; bottom: 0; aspect-ratio: auto; border-radius: 0; z-index: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M.5 0V99.5H99.5V0' fill='none' stroke='%23e9b35a' stroke-opacity='.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .menu__cabeza::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -58%); border-radius: 50%; background: radial-gradient(closest-side, rgba(208, 116, 36, .22), transparent); pointer-events: none; } /* …y las tres tarjetas en píxeles enteros: con 24 px de hueco medían 397,33 px y la del medio caía a un tercio de píxel, donde el navegador pinta la línea recta más gruesa y apagada que la de la cúpula. Con 26 px, en 1280, 1366, 1440, 1536 y 1920 miden 372 o 396 px justos. */ @media (min-width: 900px) { .menus__lista { column-gap: 26px; } } /* La puerta de la reserva, igual que las tarjetas: sin borde recto, y los lados dibujados con la misma posición y el mismo ancho que su cúpula (que va 1 px más ancha por cada lado), para que las líneas coincidan siempre. */ .puerta__cuerpo { position: relative; border: 0; } .puerta__cuerpo::after { content: ""; position: absolute; left: -1px; right: -1px; top: 0; bottom: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M.5 0V99.5H99.5V0' fill='none' stroke='%23e9b35a' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } /* …y sin la rayita oscura en la base de la cúpula: la cúpula pisa 1 px el cuerpo y los dos fondos son semitransparentes; el del cuerpo empieza medio píxel más abajo (medido: la junta queda a 4 puntos de brillo del fondo, sobre 255). */ .puerta__cuerpo { background: linear-gradient(rgba(4, 17, 15, .55), rgba(4, 17, 15, .55)) 0 .5px / 100% calc(100% - .5px) no-repeat; } /* ═════════ 2.ª RONDA DE ELOY (documento del 02/10/2026, 16:04-16:32; hecho el 05/10) ═════════ */ /* Nota 7, regla para todas: «lo que quepa en el móvil en una misma línea, encajarlo… cuanto menos scroll, mejor». Los dos sellos de la portada, uno al lado del otro. */ @media (max-width: 560px) { .sellos { flex-wrap: nowrap; gap: 8px; margin-top: 2rem; } .sellos li { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: .66rem; letter-spacing: .02em; align-content: start; } } /* Notas 2 y 8, regla para todas: «4 botones nada más entrar a una web es mucho lío». Mientras se ven los dos botones de la portada, la barra de Carta y Reservar se retira; vuelve al pasarlos (app.js). */ .flotante { transition: opacity .3s, visibility .3s; } .flotante--oculta { opacity: 0; visibility: hidden; pointer-events: none; } /* Nota 5: la dirección en una línea y lo del metro en la suya, entera */ .puerta__metro { display: block; } /* Nota 10: en el móvil no se sabía que había más fotos al lado. La siguiente asomaba 33 px y, además, invisible: cada foto esperaba a entrar un 12 % en pantalla para aparecer. Ahora están todas a la vista y la siguiente asoma de verdad. */ @media (max-width: 899px) { .js .mesa__mosaico .aparece { opacity: 1; transform: none; } .mesa__mosaico { padding-left: var(--lado); padding-right: var(--lado); scroll-padding: 0 var(--lado); } .mesa__foto { width: 74vw; } } /* Nota 9: la pared de reseñas se mueve sola y, al tocarla o arrastrarla, la lleva quien la mira (app.js) */ .pared--amano .pared__pista { animation: none; will-change: transform; } .pared--amano .pared__fila { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; } .pared--amano .pared__fila.sujeta { cursor: grabbing; } /* Nota 1: el logotipo de «Pesadilla en la cocina» (el clásico, sobre pergamino; lo eligió Angel el 05/10) en lugar de la foto de la placa. Es apaisado: su columna es más ancha que la de la placa (96 px en el móvil y 130 en PC). */ .historia__cabeza { grid-template-columns: minmax(0, 100px) 1fr; gap: 14px; } /* a 360 px, con 112 el titular se partía en tres líneas */ .historia__logo { margin: 0; } .historia__logo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--oro-linea), 0 14px 30px rgba(0, 0, 0, .45); } /* como una placa: filo dorado y sombra */ @media (min-width: 400px) { .historia__cabeza { grid-template-columns: minmax(0, 116px) 1fr; gap: 18px; } } @media (min-width: 900px) { .historia__cabeza { grid-template-columns: 190px 1fr; gap: 30px; } } /* La bandeja de latón, al girar, asomaba medio píxel por la derecha en el móvil y la página medía 391 px de ancho en vez de 390 (medido el 05/10/2026 a la altura de «Salió en la tele»). Se recorta en su sección, no en html ni en body. */ .thali { overflow-x: clip; } /* EL LOGO DE LA PORTADA EN EL ORDENADOR, MÁS PEQUEÑO Y CON MÁS AIRE HASTA EL TITULAR (Eloy, 05/10/2026: «el logo de la home se sigue quedando muy grande en el ordenador… y muy junto con el título de Restaurante indio en Madrid… más pequeño el logo y más separado… en el móvil perfecto»). Medido antes: 216 × 69 px a 1.440 de ancho y a 24 px de la ceja en un portátil (a 1.366 × 768 y más bajo). Ahora va al tamaño del móvil (164 px; 176 en pantallas muy anchas) y el hueco es de 56 px como mínimo. En pantallas bajas el aire sale de arriba (el logo sube 14 px), para no empujar los botones fuera de la primera pantalla. El móvil no se toca. */ @media (min-width: 900px) { .portada__nombre-sagar { width: clamp(164px, 10.2vw, 176px); } /* 164 px: el del móvil, con «Indian Cuisine» en la misma proporción (1,06) */ .portada__cocina { font-size: .8rem; } .portada--media .portada__texto { padding-top: clamp(56px, 9vh, 96px); } } @media (min-width: 900px) and (max-height: 720px) { .portada__marca { padding-top: 30px; } } /* ════ 06/10/2026 — EL LUNCH BOX Y EL RAILWAY LAMB CURRY (los cambios que pidió el cliente el 05 y el 06/10) ════ */ /* La etiqueta del Lunch box dice CUÁNDO vale (la de «Vegano» dice qué es): en línea dorada sobre el fondo, no en turquesa, para que no se lean como lo mismo. */ .menu--mediodia .menu__etiqueta { background: var(--tinta); color: var(--acento); border: 1px solid var(--oro-linea); letter-spacing: .14em; } /* Las fotos del menú, en su ventana: la que eligió el cliente, grande, y dos más pequeñas a su derecha. Apaisadas 3:2. */ .menu__fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; max-width: 26rem; margin: 0 auto 1rem; } .menu__fotos img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; background: var(--tinta); } .menu__fotos img:first-child { grid-row: 1 / 3; aspect-ratio: 3 / 2; } .menu__fotos img:not(:first-child) { min-height: 0; } /* El horario, en la ceja de la ventana. En el móvil va en una línea, sin las dos rayas de las cejas (no cabía) y con la letra algo más junta. En el PC, al lado de la foto, en dos líneas: los días y las horas. */ .ceja--cuando { white-space: nowrap; } .ceja--cuando i { font-style: normal; } .ventana-menu__cuerpo .ceja--cuando::before, .ventana-menu__cuerpo .ceja--cuando::after { display: none; } @media (max-width: 599px) { .ceja--cuando { letter-spacing: .14em; } } /* EN EL PC, LA FOTO AL LADO DEL NOMBRE, no encima de los platos. El marco de la ventana mide lo que el menú más largo: con las tres fotos apiladas (probado el 06/10) el Lunch box dejaba a los otros dos menús con un tercio de la ventana vacío. Así el marco mide lo mismo que antes. A ese tamaño va solo la foto que eligió el cliente; las otras dos, en el móvil. */ @media (min-width: 600px) { .ventana-menu__cuerpo--fotos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(18px, 3vw, 26px); align-items: center; } .ventana-menu__cuerpo--fotos .menu__fotos { grid-column: 1; grid-row: 1; display: block; max-width: none; margin: 0 0 1.1rem; } .ventana-menu__cuerpo--fotos .menu__fotos img:not(:first-child) { display: none; } .ventana-menu__cuerpo--fotos .menu__titulo { grid-column: 2; grid-row: 1; margin-bottom: 1.1rem; } .ventana-menu__cuerpo--fotos .menu__titulo .menu__precio { margin-bottom: 0; } .ventana-menu__cuerpo--fotos .menu__platos { grid-column: 1 / 3; } .ceja--cuando { display: block; } .ceja--cuando span { display: block; } .ceja--cuando i { display: none; } } /* El tikka masala lleva la descripción de su carta y, debajo, la reseña: un respiro entre las dos */ .arco__carta + blockquote { margin-top: .8rem; } /* El plato estrella, en espejo (el railway lamb curry): en el PC, el texto a la izquierda y la foto a la derecha, hasta el borde. En el móvil, igual que el de los Tiger tacos: la foto arriba. */ .plato-estrella__boton { margin: 1.4rem 0 0; } .plato-estrella__boton .boton { background: transparent; cursor: pointer; } /* Su foto no tiene el fondo negro de la del tigre, sino pizarra oscura: los cuatro bordes se funden con el bloque (el círculo de la otra dejaba ver el canto de la foto). */ .plato-estrella--espejo .plato-estrella__foto img { -webkit-mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; } @media (min-width: 900px) { .plato-estrella--espejo { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); padding-right: 0; padding-left: max(var(--lado), calc((100% - var(--ancho)) / 2)); } .plato-estrella--espejo .plato-estrella__foto { order: 2; margin-left: 0; margin-right: -4vw; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ LAS FLORES Y LOS COLORES DE SU DISEÑO (07/10/2026). Raju, grupo «Gastromaps📍Sagar»: «más volumen de mucho colores y flores… de momento quiero en página que convierte este tono»; Eloy: «Sí, hemos quedado en eso. Más flores y adaptación de colores que tenemos en diseño. Ok @Angel» (el estilo de la sala reformada, entero, cuando esté hecha). Angel: opción A. La referencia, su cartel del Lunch box y sus renders (sagar/fotos-origen/cliente-07oct/): flores rajastaníes rojas y naranjas con perfil dorado y centro turquesa, sobre el verde petróleo de sus paredes, y cenefas rojas con flores. Las piezas, dibujadas por nosotros: generar-flores.py → recursos/adornos/flores/. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { --verde-pared: #0f3b34; /* el verde petróleo de sus paredes */ --verde-pared-2: #0b2d28; --rojo-cenefa: #931f13; /* el rojo de sus marcos */ --rojo: #c8401f; --naranja: #f28b2d; /* 07/10, tarde (Angel, con recortes de los renders de Raju): flores pintadas como las de su sala, no rosetas planas */ --flor-roseta: url("adornos/flores/rosa.svg"); --flor-ramillete: url("adornos/flores/ramillete.svg"); --flor-nicho: url("adornos/flores/nicho.svg"); --flor-cenefa: url("adornos/flores/cenefa.svg"); /* LAS CÚPULAS, LOBULADAS COMO LAS DE SU SALA (Angel, 07/10: «cuando metamos cúpulas, que sean como estas»): generar-arcos.py. Sustituyen a las de bulbo en la portada, «Lo más pedido», las ventanas y reservar; los MENÚS siguen con la de antes (Angel, 07/10: «las de los menús no me convencen, casi me gustaban más las de antes»). */ --arco-justo: url("adornos/arcos/nicho.svg"); --arco-mascara: url("adornos/arcos/nicho.svg"); --arco-linea: url("adornos/arcos/nicho-linea.svg"); --arco-mural: url("adornos/arcos/mural.svg"); --arco-mural-linea: url("adornos/arcos/mural-linea.svg"); } .puerta__cupula { background-image: url("adornos/arcos/puerta.svg"); } /* La portada: un ramillete en cada esquina de arriba */ .flores-esquina { position: absolute; top: 0; z-index: 0; width: clamp(104px, 17vw, 250px); aspect-ratio: 1; pointer-events: none; background: var(--flor-ramillete) 0 0 / contain no-repeat; opacity: .95; } .flores-esquina--izq { left: 0; } .flores-esquina--der { right: 0; transform: scaleX(-1); } /* En el ordenador el logo va arriba a la izquierda y a la derecha está la foto: un solo ramillete, abajo a la izquierda */ @media (min-width: 900px) { .flores-esquina--izq { top: auto; bottom: 0; transform: scaleY(-1); width: clamp(120px, 11vw, 170px); } .flores-esquina--der { display: none; } } .portada--media > :not(.flores-esquina) { position: relative; z-index: 1; } /* «Sagar significa océano»: la pared verde de su sala, con su cenefa roja arriba y abajo, y la Durga entre dos árboles */ .ventanal { background: radial-gradient(60% 50% at 50% 70%, rgba(242, 139, 45, .16), transparent 72%), var(--jali), linear-gradient(var(--tinta), var(--verde-pared) 22%, var(--verde-pared-2)); } .ventanal::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: var(--flor-cenefa) 0 0 / 90px 30px repeat-x; } .ventanal__texto--diosa { position: relative; } .diosa { position: relative; } .diosa__flores { display: none; } /* LA DURGA, GRANDE Y ENTERA (07/10, tarde; Angel: «luce poco y además está bastante encajonada en la cúpula»): bajo un arco lobulado ancho, como el mural de su sala, con su luz cálida; el texto, encima y centrado */ .ventanal__texto--diosa { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: clamp(34px, 5vw, 56px); } .ventanal__texto--diosa .ventanal__frase p { margin-inline: auto; } .ventanal__texto--diosa h2 > .ceja { justify-content: center; } .diosa { width: min(90vw, 440px); } .diosa__arco { aspect-ratio: 100 / 104; filter: drop-shadow(0 0 26px rgba(242, 139, 45, .42)) drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); } .diosa__arco img { -webkit-mask: var(--arco-mural) center / 100% 100% no-repeat; mask: var(--arco-mural) center / 100% 100% no-repeat; } .diosa__arco::before { background: var(--arco-mural-linea) center / 100% 100% no-repeat; } @media (min-width: 900px) { .ventanal { background: radial-gradient(45% 50% at 50% 66%, rgba(242, 139, 45, .2), transparent 72%), var(--jali), linear-gradient(var(--verde-pared), var(--verde-pared-2)); } .ventanal::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: clamp(520px, 80vh, 880px); height: 30px; background: var(--flor-cenefa) 0 0 / 90px 30px repeat-x; } .ventanal__texto--diosa { max-width: 1120px; grid-template-columns: 1fr; column-gap: 0; text-align: center; } .ventanal__texto--diosa .ventanal__frase p { margin-left: auto; } .ventanal__texto--diosa h2 > .ceja { margin-left: auto; } .diosa { width: min(520px, 40vw); } /* A cada lado, un nicho de su sala con su ramo */ .diosa::before, .diosa::after { content: ""; position: absolute; bottom: 0; width: clamp(120px, 11vw, 160px); aspect-ratio: 120 / 300; background: var(--flor-nicho) center bottom / contain no-repeat; pointer-events: none; filter: drop-shadow(0 0 18px rgba(242, 139, 45, .28)); } .diosa::before { right: calc(100% + clamp(28px, 4vw, 64px)); } .diosa::after { left: calc(100% + clamp(28px, 4vw, 64px)); } } /* En el móvil, un ramillete en cada esquina de abajo del arco */ @media (max-width: 899px) { .diosa::before, .diosa::after { content: ""; position: absolute; z-index: 2; bottom: -14px; width: 84px; aspect-ratio: 1; pointer-events: none; background: var(--flor-ramillete) 0 0 / contain no-repeat; } .diosa::before { left: -16px; transform: scaleY(-1); } .diosa::after { right: -16px; transform: scale(-1, -1); } } /* Los menús: una roseta en lo alto de cada arco */ .menu__flor { position: absolute; z-index: 2; left: 50%; top: auto; bottom: 100%; width: 46px; aspect-ratio: 1; transform: translateX(-50%); /* La cúpula va encima de la tarjeta y mide el 30 % de su ancho (los márgenes en % se cuentan sobre el ancho): así la roseta queda en la punta del arco, a cualquier anchura */ margin-bottom: calc(30% - 23px); background: var(--flor-roseta) center / contain no-repeat; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); pointer-events: none; } /* Las cifras: en el rojo de sus marcos, con su cenefa arriba y abajo y una roseta entre cifra y cifra */ .friso { background: var(--jali), linear-gradient(#a3281a, var(--rojo-cenefa) 55%, #7a170e); padding-block: clamp(62px, 8vw, 86px); } .friso::before, .friso::after { top: 0; height: 26px; background: var(--flor-cenefa) 0 0 / 78px 26px repeat-x; filter: brightness(.82); } .friso::after { top: auto; bottom: 0; transform: none; } .friso span { color: #f6e6d4; } @media (min-width: 900px) { .friso li + li::before { width: 30px; height: 30px; left: -15px; top: 14px; background: url("adornos/flores/rosa-amarilla.svg") center / contain no-repeat; } } /* El pie: la cenefa en lo alto */ .pie { position: relative; padding-top: 58px; border-top: 0; } .pie::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: var(--flor-cenefa) 0 0 / 90px 30px repeat-x; } /* ─── LA PÁGINA INGLESA (10/10/2026) ─────────────────────────────────────────────────── */ /* Una reseña traducida lo dice debajo de su autor, en su propia línea, como en las landings («Translated from Spanish»). Solo la usa /en/: en la española no hay ninguna. */ footer.con-traducida { flex-wrap: wrap; row-gap: 5px; } .resena__traducida { flex-basis: 100%; font-size: .92em; opacity: .7; } /* Los titulares de prensa, con las comillas del idioma: en la española son «»; en /en/, las inglesas. */ :lang(en) .linea-tiempo q, :lang(en) .recortes q { quotes: "“" "”"; }