/* ==========================================================================
Ramma Terraza — hoja de estilos
Paleta tomada de la carta impresa oficial del restaurante.
========================================================================== */
/* Paleta de Ramma, entregada por el disenador de Monchis el 28-ago-2026
("Paleta de colores Hex Ramma"). Sustituye al verde anterior por completo.
El logo dice MAR & TIERRA y por eso vienen varias familias. El fondo lo
escogio Oswaldo de la rampa mostaza: la terracota se leia rojiza en
pantalla y no era lo que la marca queria. El aqua sigue declarada como
acento y sin usar, esperando a que el disenador diga donde va.
Los tonos NO se inventan, salen tal cual de las rampas del cliente. El
unico criterio propio es cual escalon va en cada lugar, y ese se decidio
midiendo contraste, no a ojo: el salmon del logo sobre el papel claro da
2.18:1 y es ilegible, igual que le pasaba al naranja anterior. Por eso
existe --salmon-deep, que es la misma familia mas abajo en la rampa. */
:root {
/* --sobre-fondo: el color de lo que se pinta DIRECTO sobre el fondo de la
pagina. Hasta hoy reusaba --papel, que funciona mientras el fondo sea
oscuro. Miau Miau pidio fondo verde claro y con el mismo --papel esos
textos quedaban en 2.2:1, ilegibles. Sin definir, cae en --papel y nada
cambia para quien ya estaba bien. */
--papel: #fbf1c7; /* el claro de la mostaza — fondo de pagina */
--papel-logo: #dcca68; /* mostaza — 7.01:1 sobre el fondo oscuro */
--papel-soft: #f9eeec; /* un pelo mas claro — solo el hover de un boton */
--tierra-deep: #174144; /* el aqua profundo — fondo oscuro de marca */
--tierra-mid: #29656a; /* un escalon arriba — tarjetas sobre el oscuro */
--salmon: #E09176; /* la familia del monograma */
--salmon-deep: #844e3a; /* 5.90:1 sobre el papel — el que SI se lee */
--salmon-light: #ebc3b8;
--mar: #4eb3bc; /* el mar — 6.87:1 sobre el fondo oscuro */
--mar-deep: #29656a; /* 5.84:1 sobre el papel */
--ink: #1e1f1f; /* rampa neutra — 14.53:1 sobre el papel */
/* Ramma pinta su logotipo en #f6f8f8. Solo funciona con marcas de tinta
plana; una ilustracion a color se vuelve una mancha. */
--logo-filtro: brightness(0) invert(1) brightness(0.973) saturate(0.06);
--ink-soft: #5c6060; /* 5.60:1, el minimo que aun se lee */
--line: rgba(30, 31, 31, 0.14);
--line-dark: rgba(251, 241, 199, 0.18);
--font-display: 'Outfit', system-ui, -apple-system, sans-serif;
--font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
--shell: 30rem; /* ancho de la columna movil */
--radius: 14px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
/* El buscador oculta renglones y grupos con el atributo hidden.
Sin esto, display:grid y display:flex ganan y el filtro no surte efecto. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.55;
color: var(--ink);
background: var(--tierra-deep);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* height:auto es obligatorio: sin el, el atributo height del HTML se aplica
como altura CSS y deforma la imagen. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
/* Se elimino un patron decorativo que iba aqui. Pintaba crema al 5% sobre el
fondo y ensuciaba el verde de marca: donde caian las manchas el fondo
media #2D3E2F en vez de #223425. El verde del cliente va limpio y plano. */
/* --------------------------------------------------------------------------
Shell — columna centrada tipo app movil
-------------------------------------------------------------------------- */
.shell {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--shell);
margin: 0 auto;
padding: 0 20px 48px;
}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.hero { padding: 40px 0 28px; text-align: center; }
/* El logotipo va sin sombra ni recuadro: es PNG transparente y se sienta
directo sobre el fondo de marca.
height:auto no es adorno. El ![]()
declara sus medidas reales para que el
navegador aparte el espacio antes de descargarlo y la pagina no salte;
sin height:auto esa proporcion se vuelve la altura usada, y el dia que
cambie el archivo -- ya paso al llegar el logotipo nuevo, de 906x382 a
1202x378 -- el logo del cliente se estira. Un logo deformado no es un
detalle: es la marca mal puesta. */
.hero__logo {
/* width:auto y no 100%: asi la imagen decide su tamano DENTRO de los dos
topes, en vez de estirarse al ancho y dejar aire arriba y abajo. Uno
apaisado toca el tope de ancho, uno vertical el de alto, y ninguno se
deforma. */
/* El filtro NO va aqui escrito: esta hoja la copian los seis linktrees
de Grupo Gula, y aclarar el logo solo tiene sentido cuando la marca es
de tinta plana, como Ramma. Al ponerlo directo, el gato de Miau Miau y
el nopal de Nopalito se volvieron siluetas blancas. Ahora es una
variable que cada sitio decide. */
filter: var(--logo-filtro, none);
width: auto;
max-width: 320px;
/* Y un tope de ALTO. Los logotipos no vienen todos apaisados: el de
Nopalito es mas alto que ancho y con solo max-width se comia media
pantalla antes de que el comensal viera un solo boton. object-fit
lo mete dentro de la caja sin deformarlo. */
max-height: 160px;
height: auto;
object-fit: contain;
margin: 0 auto 20px;
}
.hero__tagline {
font-family: var(--font-display);
font-weight: 300;
font-size: 15px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--papel-logo);
opacity: 0.82;
margin: 0 0 14px;
}
.hero__meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--sobre-fondo, var(--papel));
opacity: 0.78;
}
.hero__meta svg { width: 15px; height: 15px; flex: none; }
/* --------------------------------------------------------------------------
Bloques y titulos de seccion
-------------------------------------------------------------------------- */
/* Las secciones que llena el panel no se dibujan hasta que llegan sus datos.
Sin esto aparecen todas al instante y las vacias se van medio segundo
despues, que es lo que se veia como un parpadeo. Va detras de .js: si el
JavaScript no corre, esta regla nunca aplica y se ve todo lo del HTML.
Son CUATRO marcadores, no uno: la primera version solo cubrio
data-necesita y Reservaciones y Tu experiencia siguieron parpadeando
porque usan data-seccion-enlaces. */
/* Fondo ilustrado, cuando la marca trae uno. Va en una capa fija detras de
todo, no en background-attachment: fixed del body: esa propiedad se
comporta mal en Safari de iOS, que es donde se ve esto.
La ruta se declara en :root con --fondo-imagen. Ojo: una url() dentro de
una variable se resuelve contra la HOJA DE ESTILOS, no contra la pagina,
asi que armar.py la escribe como 'assets/fondo.png' y aqui se usa tal
cual desde assets/css/ -- por eso lleva ../../ delante. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-image: var(--fondo-imagen, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
html.js:not(.datos-listos) [data-necesita],
html.js:not(.datos-listos) [data-seccion-enlaces],
html.js:not(.datos-listos) [data-enlace],
html.js:not(.datos-listos) [data-reservar] { display: none; }
.section { margin-bottom: 30px; }
.section__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--titulo-seccion, var(--salmon-light));
margin: 0 0 12px 2px;
display: flex;
align-items: center;
gap: 10px;
}
.section__title::after {
content: "";
flex: 1;
height: 1px;
background: var(--line-dark);
}
/* --------------------------------------------------------------------------
Botones de enlace
-------------------------------------------------------------------------- */
.link {
/* Safari pinta un rectangulo gris encima de cualquier cosa que se toque.
Sobre un boton con foto se ve como un lavado. El estado de tocado ya
lo da :active con su propio movimiento. */
-webkit-tap-highlight-color: transparent;
display: flex;
align-items: center;
gap: 14px;
width: 100%;
/* position y z-index existen para los stickers: sin ellos, un adorno que
se sale del boton queda tapado por el boton de abajo. */
position: relative;
z-index: 1;
padding: 16px 18px;
margin-bottom: 10px;
background: var(--papel);
border: 1px solid transparent;
border-radius: var(--radius);
color: var(--ink);
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: 16px;
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background-color 0.22s var(--ease);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}
/* El hover solo para raton. En tactil el navegador lo dispara al tocar y
lo deja pegado, que es lo que hacia ver los botones "lavados" despues
del tap. El dedo se atiende con :active, mas abajo. */
@media (hover: hover) {
.link:hover, .link:focus-visible {
/* background-color y NO la forma corta: `background` reinicia tambien la
imagen, asi que al tocar el boton perdia su foto y se quedaba en blanco.
Se veia como un parpadeo raro en el telefono. */
background-color: var(--papel-soft);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
outline: none;
}
.link:focus-visible { border-color: var(--salmon); }
}
.link:focus-visible { background-color: var(--papel-soft); }
.link:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
/* --------------------------------------------------------------------------
Hoja de resena (inline, sin cambiar de pagina)
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Area infantil: un boton con foto
La foto que dio el restaurante es vertical y el boton es una franja
ancha, asi que se recorto una banda centrada en las caras de los ninos.
background-position: center la vuelve a centrar en cada pantalla, para
que al angostarse no se quede con un codo y una resbaladilla.
El velo oscuro encima no es adorno: sin el, el texto blanco cae sobre
una playera clara y desaparece. Va con degradado para que la parte de
arriba deje ver la foto.
-------------------------------------------------------------------------- */
.link--foto {
position: relative;
/* Mas alto que un boton normal: la foto necesita aire para que se vean
las caras arriba del texto. */
min-height: 132px;
align-items: flex-end;
padding: 14px 18px 13px;
/* La foto llega en --foto y su ruta va DESDE LA RAIZ, con diagonal al
principio. Una url relativa dentro de una variable se resuelve contra
la HOJA DE ESTILOS, no contra la pagina: escrita como
"assets/area-infantil.jpg" el navegador la buscaba en
assets/css/assets/ y no cargaba nada. No fallaba de forma visible,
solo se veia el degradado.
El velo va de ARRIBA hacia abajo, no de lado a lado. El boton es una
franja ancha y baja: con el velo horizontal, el texto ocupaba la mitad
izquierda y tapaba a dos de los tres ninos. Asi las caras quedan
arriba, limpias, y el texto se apoya abajo sobre la parte oscura. */
background-image:
linear-gradient(to bottom,
rgba(23, 65, 68, 0.10) 0%,
rgba(23, 65, 68, 0.30) 38%,
rgba(23, 65, 68, 0.82) 76%,
rgba(23, 65, 68, 0.94) 100%),
var(--foto, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid var(--line-dark);
color: var(--papel);
}
/* La sombra es lo que deja bajar el velo. Sin ella, el texto blanco cae
sobre una playera clara y se pierde justo donde empieza la foto. */
.link--foto .link__label { color: #fff; text-shadow: 0 1px 8px rgba(8, 32, 34, 0.9); }
.link--foto .link__sub { color: rgba(255, 255, 255, 0.92);
text-shadow: 0 1px 7px rgba(8, 32, 34, 0.9); }
.link--foto .link__chev { color: var(--papel); }
/* El estado de presionado. En el telefono NO existe el hover: el navegador
lo simula al tocar y se queda pegado hasta que tocas otra cosa. Por eso
la foto "se quedaba" de blanco en vez de parpadear. Ahora el hover vive
detras de @media (hover: hover) — solo raton — y el tacto usa :active,
que si se suelta al levantar el dedo.
El crema va como capa ENCIMA de la foto, no en lugar de ella: se pinta
en ::after y se desvanece. La foto nunca se va. */
.link--foto::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--papel-soft);
opacity: 0;
transition: opacity 90ms ease-out;
pointer-events: none;
}
.link--foto:active::after { opacity: 0.3; }
@media (hover: hover) {
.link--foto:hover, .link--foto:focus-visible { border-color: var(--salmon); }
}
.link--foto:focus-visible { border-color: var(--salmon); }
.link__icon {
flex: none;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--tierra-deep);
color: var(--sobre-fondo, var(--papel));
}
.link__icon svg { width: 19px; height: 19px; }
.link__text { flex: 1; min-width: 0; }
.link__label {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.3;
}
.link__sub {
display: block;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
margin-top: 2px;
}
.link__chev { flex: none; width: 16px; height: 16px; opacity: 0.4; }
/* Boton principal — reservacion.
Texto en verde sobre naranja: la crema sobre naranja da 2.71:1 y no se lee.
Verde sobre naranja da 4.49:1 y ademas es la pareja de la carta impresa. */
.link--primary {
background: var(--salmon);
color: var(--tierra-deep);
padding: 20px 18px;
box-shadow: 0 3px 0 var(--salmon-deep);
}
.link--primary:hover, .link--primary:focus-visible {
background: var(--salmon-light);
box-shadow: 0 10px 26px rgba(231, 112, 39, 0.42);
}
.link--primary:active { box-shadow: 0 1px 0 var(--salmon-deep); }
.link--primary .link__icon { background: var(--tierra-deep); color: var(--papel-logo); }
.link--primary .link__sub { color: rgba(34, 52, 37, 0.8); }
.link--primary .link__label { font-size: 17px; }
.link--primary .link__chev { opacity: 0.7; }
/* --------------------------------------------------------------------------
Tarjetas de menu
-------------------------------------------------------------------------- */
.menu-cards { display: grid; gap: 10px; }
.menu-card {
position: relative;
display: flex;
align-items: flex-end;
min-height: 116px;
padding: 16px 18px;
border-radius: var(--radius);
overflow: hidden;
background: var(--tierra-mid);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.menu-card:hover, .menu-card:focus-visible {
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
outline: none;
}
.menu-card:focus-visible { outline: 2px solid var(--salmon); outline-offset: 2px; }
.menu-card:active { transform: translateY(1px); }
.menu-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.menu-card:hover .menu-card__img { transform: scale(1.06); opacity: 0.68; }
.menu-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(34, 52, 37, 0.95) 12%, rgba(34, 52, 37, 0.45) 62%, rgba(34, 52, 37, 0.28) 100%);
}
.menu-card__body { position: relative; z-index: 1; display: block; }
.menu-card__name {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--papel);
margin: 0;
line-height: 1.2;
}
.menu-card__desc {
display: block;
font-size: 13px;
color: rgba(245, 245, 220, 0.76);
margin: 4px 0 0;
line-height: 1.4;
}
/* --------------------------------------------------------------------------
Horario
-------------------------------------------------------------------------- */
.hours {
background: rgba(245, 245, 220, 0.06);
border: 1px solid var(--line-dark);
border-radius: var(--radius);
padding: 6px 18px;
}
.hours__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--line-dark);
color: var(--sobre-fondo, var(--papel));
font-size: 14px;
}
.hours__row:last-child { border-bottom: none; }
.hours__day {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.09em;
text-transform: uppercase;
font-size: 12px;
opacity: 0.72;
}
.hours__time { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* --------------------------------------------------------------------------
Mapa y ubicacion
-------------------------------------------------------------------------- */
.map {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line-dark);
background: var(--tierra-mid);
margin-bottom: 10px;
line-height: 0;
}
.map iframe { width: 100%; height: 190px; border: 0; display: block; filter: saturate(0.92); }
.address {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--sobre-fondo, var(--papel));
font-size: 14px;
opacity: 0.8;
margin: 0 0 12px 2px;
}
.address svg { width: 17px; height: 17px; flex: none; margin-top: 2px; opacity: 0.8; }
/* --------------------------------------------------------------------------
Redes sociales
-------------------------------------------------------------------------- */
.socials {
display: flex;
justify-content: center;
gap: 12px;
margin: 6px 0 0;
}
.social {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(245, 245, 220, 0.09);
border: 1px solid var(--line-dark);
color: var(--sobre-fondo, var(--papel));
transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.social:hover, .social:focus-visible {
background: var(--salmon);
border-color: var(--salmon);
color: var(--tierra-deep);
outline: none;
}
.social svg { width: 21px; height: 21px; }
/* --------------------------------------------------------------------------
Hoja de resena (inline, sin cambiar de pagina)
-------------------------------------------------------------------------- */
.regla { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 13px; }
.regla:last-child { margin-bottom: 0; }
.regla__n {
flex: none; width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center;
background: var(--salmon); color: var(--tierra-deep);
font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
}
.regla__t { font-size: 14px; line-height: 1.5; color: var(--papel); margin: 0; }
.regla__t b { color: var(--salmon-light); font-weight: 600; }
.sheet__logo { display: block; height: 30px; width: auto; margin: 0 auto 14px;
filter: var(--logo-filtro, none); }
.sheet__intro { font-size: 14px; line-height: 1.55; color: rgba(251,241,199,0.9);
margin: 0 0 16px; text-align: center; }
.sheet__cierre { font-size: 13px; line-height: 1.5; text-align: center;
color: rgba(251,241,199,0.72); margin: 16px 0 0;
padding-top: 14px; border-top: 1px solid var(--line-dark); }
.sheet__horas { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-dark); }
.sheet__horas h4 { font-family: var(--font-display); font-weight: 600; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--salmon-light);
margin: 0 0 10px; text-align: center; }
.sheet__hora { display: flex; justify-content: space-between; gap: 12px;
font-size: 14px; color: var(--papel); padding: 5px 0; }
.sheet__hora span:last-child { color: rgba(251,241,199,0.82); }
.sheet {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.38s var(--ease), opacity 0.28s var(--ease), margin 0.38s var(--ease);
}
.sheet[data-open="true"] { max-height: 260px; opacity: 1; margin-bottom: 10px; }
/* El reglamento es mas largo que la hoja de resenas y necesita su propio
tope. Va DESPUES de la regla de arriba a proposito: las dos tienen la
misma especificidad, asi que gana la ultima. Puesta antes, la hoja se
cortaba a la mitad. */
.sheet--largo[data-open="true"] { max-height: 1600px; }
.sheet__inner {
background: rgba(245, 245, 220, 0.07);
border: 1px solid var(--line-dark);
border-radius: var(--radius);
padding: 16px;
}
.sheet__q {
font-family: var(--font-display);
font-weight: 400;
font-size: 14px;
letter-spacing: 0.05em;
color: var(--sobre-fondo, var(--papel));
margin: 0 0 12px;
text-align: center;
}
.sheet__opts { display: grid; gap: 8px; }
.sheet__opt {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
border-radius: 10px;
background: var(--papel);
border: none;
font-family: var(--font-body);
font-size: 14px;
color: var(--ink);
cursor: pointer;
text-align: left;
transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.sheet__opt:hover, .sheet__opt:focus-visible { background: #fff; outline: none; }
.sheet__opt:focus-visible { box-shadow: 0 0 0 2px var(--salmon); }
.sheet__opt:active { transform: translateY(1px); }
.sheet__opt svg { width: 18px; height: 18px; flex: none; color: var(--salmon); }
/* --------------------------------------------------------------------------
Pie
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Stickers: adornos que se salen del boton
Idea de Rene para Miau Miau: que un gatito se asome agarrando el boton.
El adorno va DENTRO del boton en el marcado y se sale por fuera con
position:absolute, para que se mueva con el y no haya que acomodarlo a
mano en cada pantalla.
pointer-events:none es lo que hace que siga siendo un boton: sin eso, el
gatito se come el toque justo en la esquina donde esta.
No lleva alt ni rol: es decoracion. Un lector de pantalla que lo anuncie
solo estorba a quien navega con el.
-------------------------------------------------------------------------- */
.sticker {
position: absolute;
pointer-events: none;
z-index: 2;
width: var(--sticker-ancho, 64px);
height: auto;
}
/* Las cuatro esquinas. El adorno sobresale del boton a proposito: por eso
los valores son negativos. */
.sticker--ad { top: var(--sticker-y, -22px); right: var(--sticker-x, -6px); }
.sticker--ai { top: var(--sticker-y, -22px); left: var(--sticker-x, -6px); }
.sticker--bd { bottom: var(--sticker-y, -18px); right: var(--sticker-x, -6px); }
.sticker--bi { bottom: var(--sticker-y, -18px); left: var(--sticker-x, -6px); }
/* En pantallas angostas se encogen: un sticker de 64px sobre un boton de
320 se come el texto. */
@media (max-width: 380px) {
.sticker { width: calc(var(--sticker-ancho, 64px) * 0.8); }
}
@media (prefers-reduced-motion: reduce) {
.sticker { transition: none; }
}
.footer {
text-align: center;
padding-top: 26px;
margin-top: 12px;
border-top: 1px solid var(--line-dark);
color: var(--sobre-fondo, var(--papel));
color: color-mix(in srgb, var(--sobre-fondo, var(--papel)) 72%, transparent);
font-size: 12px;
letter-spacing: 0.05em;
}
/* La firma va al final y en voz baja: el sitio es de Ramma, no nuestro.
El isologo de Codesmic es azul abeto sobre transparente y sobre este
fondo desaparece; se aclara con filter sobre el PNG, que es como se
hace en toda la casa. Nunca recrearlo con CSS. */
.firma {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 14px;
font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--sobre-fondo, var(--papel));
color: color-mix(in srgb, var(--sobre-fondo, var(--papel)) 72%, transparent);
}
.firma img {
height: 13px; width: auto;
filter: var(--firma-filtro, brightness(0) invert(1));
opacity: 0.72;
}
.firma a { display: flex; align-items: center; gap: 7px; color: inherit; }
.firma a:hover img { opacity: 0.85; }
/* La carta va sobre papel claro, y ahi la firma en crema desaparece.
El isologo vuelve a su azul abeto original -- sin filtro -- porque para
eso esta hecho: es un PNG transparente en tinta oscura. */
body.menu-page .footer { border-top-color: var(--line); }
body.menu-page .firma { color: rgba(30, 31, 31, 0.42); }
body.menu-page .firma img { filter: none; opacity: 0.55; }
/* El tercer crema de Ramma escrito a mano. Sobre el verde de Miau Miau
daba 1.65:1. Va mas fuerte que el texto del pie porque es una liga. */
.footer a { color: var(--sobre-fondo, var(--papel));
color: color-mix(in srgb, var(--sobre-fondo, var(--papel)) 84%, transparent); border-bottom: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.footer a:hover { color: var(--salmon-light); border-bottom-color: var(--salmon-light); }
/* ==========================================================================
PAGINA DE MENU
========================================================================== */
body.menu-page { background: var(--papel); color: var(--ink); }
.menu-top {
position: sticky;
top: 0;
z-index: 20;
background: var(--tierra-deep);
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.menu-top__bar {
max-width: var(--shell);
margin: 0 auto;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.menu-top__back {
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 9px;
background: rgba(245, 245, 220, 0.1);
color: var(--papel);
flex: none;
transition: background-color 0.2s var(--ease);
}
.menu-top__back:hover, .menu-top__back:focus-visible { background: var(--salmon); color: var(--tierra-deep); outline: none; }
.menu-top__back svg { width: 17px; height: 17px; }
.menu-top__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--papel);
margin: 0;
}
.menu-top__title span { color: var(--salmon); margin: 0 2px; }
/* Pestanas de carta */
.tabs {
display: flex;
gap: 6px;
padding: 0 20px 12px;
max-width: var(--shell);
margin: 0 auto;
overflow-x: auto;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
flex: 1 0 auto;
padding: 9px 16px;
border-radius: 999px;
border: 1px solid var(--line-dark);
background: transparent;
color: rgba(245, 245, 220, 0.72);
font-family: var(--font-display);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.tab:hover { color: var(--papel); border-color: rgba(245, 245, 220, 0.4); }
.tab[aria-selected="true"] {
background: var(--salmon);
border-color: var(--salmon);
color: var(--tierra-deep);
}
.tab:focus-visible { outline: 2px solid var(--salmon-light); outline-offset: 2px; }
/* Buscador */
.search-wrap {
max-width: var(--shell);
margin: 0 auto;
padding: 14px 20px 0;
}
.search {
position: relative;
display: flex;
align-items: center;
}
.search svg {
position: absolute;
left: 14px;
width: 17px; height: 17px;
color: var(--ink-soft);
pointer-events: none;
}
.search input {
width: 100%;
padding: 12px 14px 12px 40px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
}
.search input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.search input:focus { outline: none; border-color: var(--salmon); box-shadow: 0 0 0 3px rgba(231, 112, 39, 0.18); }
/* Contenido de la carta */
/* El padding inferior deja aire para el boton flotante de reserva. */
.menu-body {
max-width: var(--shell);
margin: 0 auto;
padding: 20px 20px 110px;
}
.panel[hidden] { display: none; }
/* La foto de cada carta. Va antes de la intro, del ancho de la columna y
con las mismas esquinas que los demas bloques. La proporcion se declara
con aspect-ratio ademas de width/height en el HTML: reserva el espacio
antes de que baje la imagen, para que el texto no brinque. */
.panel__foto {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1100 / 440;
object-fit: cover;
border-radius: 14px;
margin: 0 0 18px;
background: var(--tierra-mid, #29656a);
}
.panel__foto[hidden] { display: none; }
.panel__intro {
font-size: 14px;
color: var(--ink-soft);
margin: 0 0 22px;
}
/* Aparece solo con el buscador activo, para ubicar de que carta es el resultado */
.panel__carta {
font-family: var(--font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--salmon-deep);
margin: 0 0 14px;
padding-bottom: 8px;
border-bottom: 2px solid var(--salmon-deep);
}
.group { margin-bottom: 30px; }
.group__head {
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--ink);
margin-bottom: 4px;
}
.group__title {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0;
line-height: 1.15;
}
.group__nota {
font-size: 12px;
color: var(--salmon-deep);
letter-spacing: 0.04em;
margin: 6px 0 12px;
}
/* Bloque destacado, como el recuadro verde de la carta impresa */
.group--destacado {
background: var(--tierra-deep);
color: var(--papel);
border-radius: var(--radius);
padding: 20px 18px 6px;
}
.group--destacado .group__head { border-bottom-color: var(--line-dark); }
.group--destacado .group__title { color: var(--papel); }
.group--destacado .group__nota { color: var(--salmon-light); }
.group--destacado .item { border-bottom-color: var(--line-dark); }
.group--destacado .item__desc { color: rgba(245, 245, 220, 0.7); }
.group--destacado .item__price { color: var(--papel); }
.group--destacado .item__meta { color: rgba(245, 245, 220, 0.55); }
/* Renglon de platillo */
.item {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 3px 14px;
padding: 12px 0;
border-bottom: 1px dotted var(--line);
}
.item:last-child { border-bottom: none; }
/* Los traen margen por defecto y desalinean el precio del nombre. */
.item > p { margin: 0; }
.item__name {
font-family: var(--font-display);
font-weight: 400;
font-size: 15px;
letter-spacing: 0.07em;
text-transform: uppercase;
line-height: 1.35;
}
.item__price {
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
line-height: 1.35;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
.item__desc {
grid-column: 1 / -1;
font-size: 13px;
line-height: 1.45;
color: var(--ink-soft);
margin: 0;
}
.item__meta {
grid-column: 1 / -1;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: 0.75;
margin: 0;
}
/* Encabezado copa / botella para destilados */
.group__cols {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
font-family: var(--font-display);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
padding: 8px 0 2px;
}
.group__cols span:last-child { display: flex; gap: 18px; }
.group--destacado .group__cols { color: rgba(245, 245, 220, 0.6); }
.price-pair { display: flex; gap: 18px; align-items: baseline; }
.price-pair span { min-width: 58px; text-align: right; }
/* Estado sin resultados */
.empty {
text-align: center;
padding: 40px 20px;
color: var(--ink-soft);
font-size: 15px;
}
.legal {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: 12px;
line-height: 1.6;
color: var(--ink-soft);
}
.pdf-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--salmon-deep);
border-bottom: 1px solid transparent;
transition: border-color 0.2s var(--ease);
}
.pdf-link:hover { border-bottom-color: var(--salmon-deep); }
.pdf-link svg { width: 15px; height: 15px; }
/* Boton flotante de reserva en la carta */
.fab {
position: fixed;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 30;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 14px 26px;
border-radius: 999px;
background: var(--salmon);
color: var(--tierra-deep);
font-family: var(--font-display);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap; /* en pantallas angostas se partia en dos renglones */
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.32);
transition: background-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.fab:hover, .fab:focus-visible { background: var(--salmon-light); outline: none; }
.fab:active { transform: translateX(-50%) translateY(1px); }
.fab svg { width: 16px; height: 16px; }
/* --------------------------------------------------------------------------
Animacion de entrada
-------------------------------------------------------------------------- */
/* El contenido NO nace invisible. Antes cada seccion empezaba en
opacity:0 y aparecia al entrar en pantalla; se veia bonito y dejaba
~1100px de nada entre la carta y el pie cada vez que algo no disparaba:
una captura de pagina completa, un scroll rapido, iOS que no atiende al
observador mientras el dedo sigue empujando.
En un linktree ese trato no sale a cuenta. La pagina existe para
ensenar ligas; si el adorno puede esconderlas, se va el adorno.
La entrada se conserva como un desplazamiento minimo que NUNCA
oculta: si el JS no corre, se ve igual. */
.js .reveal {
transform: translateY(10px);
transition: transform 0.5s var(--ease);
}
.js .reveal.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------------------
Pantallas grandes — la columna se mantiene, el fondo respira
-------------------------------------------------------------------------- */
@media (min-width: 700px) {
.hero { padding: 56px 0 32px; }
.hero__logo { max-width: 340px; }
.map iframe { height: 230px; }
}
/* --------------------------------------------------------------------------
Impresion — la carta debe poder imprimirse limpia
-------------------------------------------------------------------------- */
@media print {
body.menu-page { background: #fff; }
.menu-top, .tabs, .search-wrap, .fab, .pdf-link { display: none !important; }
.panel[hidden] { display: block !important; }
.group--destacado { background: none; color: var(--ink); border: 1px solid var(--ink); }
.group--destacado .group__title,
.group--destacado .item__price { color: var(--ink); }
.group--destacado .item__desc { color: var(--ink-soft); }
.item { break-inside: avoid; }
.group { break-inside: avoid-page; }
}