/* estructura-base.css — CAPA DE APARIENCIA COMPARTIDA DE LA FLOTA */ /* COMPONENTES DE APP — formulario de reservas, botones de reserva, botón */ html { color: var(--color-texto-tema); /* Evita el scroll horizontal en toda la app. El logo animado del index */ overflow-x: hidden; } body { width: 100%; /* La tipografía (familia + tamaño + interlineado) va TODA junta en el bloque */ /* Fondo negro de base: evita destellos blancos al hacer overscroll en móvil */ background-color: var(--fondo-negro); } /* .visually-hidden vive UNA sola vez, junto a la TIPOGRAFÍA BASE (más abajo). */ /* fadeIn - En el de cada página */ .fade-in { animation: fadeIn ease 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Títulos de las familias de comidas y bebidas */ p { font-size: 1rem; /* white-space: pre-line; Valida los saltos de linea \n que inserto en los textos largos que tengo en la data*/ white-space: pre-line; color: var(--color-texto-tema); } h2 { font-size: 1.1rem; font-weight: 600; color: var(--color-texto-tema); } h3 { font-size: 1rem; color: var(--color-texto-tema); } h4 { color: var(--color-texto-tema); /* tamaño y padding: estructura-base */ } /* ICONOS BOOTSTRAP */ i { font-size: 1.7rem; padding: 0 0.8rem; /* color: var(--color-secundario); */ } /* Iconos Cartas */ .bi-house-fill, .bi-heart-pulse, /* */ /* ******************** FOOTER ****************************** */ /* FOOTER. Da estilos a todos los footers */ /* El estilo de .baner__alergenos vive en cartas.css (única definición), */ .footer__imagen-alergenos { width: 90%; } .footer__boton-alergenos { width: auto; border-radius: var(--border-radius); margin: 0 auto; padding: 0.3rem 1rem; text-align: center; box-shadow: var(--sombra); color: var(--color-texto-tema); /* Degradado de marca por token (convención): en apps CLARAS pinta */ background-image: var(--color-degradado2); } /* Fondo interior (.logo__fondo + media query) ahora en estructura-base.css */ /* ***************** LOGO (imagen transparente) *********** */ /* Logos limpios: lo gobierna la BASE (.hero-img--logo, con la feature opt-in */ /* ***************** ANIMACIONES *************************** */ @keyframes rotation { from { transform: rotateX(180deg); } to { transform: rotateX(360deg); } } /* ***************** LUCES QUE BRILLAN ********************* */ /* Campo de puntos de luz que parpadean por toda la pantalla (mismo efecto */ @keyframes parpadeo-luz { 0% { width: 1px; height: 1px; background: powderblue; box-shadow: 0 0 0.8125rem #fff; } 10% { background: #b0e5de; } 20% { background: #b0e5cc; } 30% { background: #cce5b0; } 40% { background: #dae5b0; } 50% { width: 0.25rem; height: 0.25rem; background: #e5ddb0; box-shadow: 0 0 0.8125rem var(--luz-destello, #d3bd3d); } 100% { width: 1px; height: 1px; background: powderblue; box-shadow: 0 0 0.8125rem #fff; } } .luz { position: fixed; width: 1px; height: 1px; border-radius: 0.3125rem; background: powderblue; box-shadow: 0 0 0.8125rem #fff; pointer-events: none; } .luz.activa { animation: parpadeo-luz 2s infinite; } /* ********* FORMULARIO RESERVAS *************************** */ .form { position: fixed; top: 0; left: 0; z-index: 3; width: 90vw; max-width: 35rem; /* dvh, no vh: en iOS 100vh incluye la barra del navegador y el final del formulario quedaba cortado */ height: 100vh; height: 100dvh; padding: 2.5rem 2rem; padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); background: var(--form-fondo); border-right: 0.125rem solid var(--color-primario); transition: all 0.5s ease-in-out; /* Columna flex que scrollea entera: los botones siguen al contenido, nunca quedan inalcanzables */ display: flex; flex-direction: column; overflow-y: auto; /* Ocultar menú lateral */ opacity: 0; visibility: hidden; transform: translateX(-100%); box-shadow: 1.875rem 0.625rem 2.5rem rgba(0, 0, 0, 0.7); } .form.active { opacity: 1; visibility: visible; transform: translateX(0); } .form div { display: flex; flex-direction: column; gap: 0.2rem; } .form label { font-size: 1rem; font-weight: 600; color: var(--form-texto); display: inline-block; margin: 0.5rem 0 0.2rem; } .input-small { width: 65%; } .form .form__fila { flex-direction: row; gap: 1rem; /* Alinea los inputs al pie de la fila para que queden a la misma altura */ align-items: flex-end; & > div { flex: 1; min-width: 0; } & input, & select, & .input-small { width: 100%; min-width: 0; } } /* En iOS el input de fecha trae un ancho mínimo intrínseco que ignora el width y se montaba sobre la hora */ .form input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; } .form input, .form select { padding: 0.6rem 0.8rem; background: var(--form-input-fondo); border: 1px solid var(--color-form-borde); border-radius: 0.625rem; font-size: 1rem; color: var(--form-texto); transition: border-color 0.3s ease; } .form input::placeholder { color: var(--form-placeholder); } .form input[type="date"]::-webkit-calendar-picker-indicator { filter: var(--form-datepicker-filtro); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0.5rem var(--color-form-borde-focus); } .form textarea { width: 100%; padding: 0.6rem 0.8rem; background: var(--form-input-fondo); border: 1px solid var(--color-form-borde); border-radius: 0.625rem; font-size: 1rem; color: var(--form-texto); transition: border-color 0.3s ease; resize: vertical; } .form select { cursor: pointer; } .form select option { color: var(--color-secundario); } .form span { color: var(--form-placeholder); font-size: 0.85rem; } .warning { /* Aviso del formulario: color tema-aware (claro sobre panel oscuro, oscuro */ color: var(--form-warning); font-weight: 600; opacity: 0; padding: 0.5rem 0; transition: all 0.7s ease-in-out; transform: translateX(-100%); } .active-warning { opacity: 1; transform: translateX(0); } /* Guard del formulario: el JS genera el

"aviso" sin clase. Lo forzamos */ .form p { color: var(--form-texto); } .warning p { color: var(--form-warning); } .reservar { width: fit-content; margin: 1.5rem auto 0; display: flex; justify-content: center; align-items: center; padding: 0.5rem 1.5rem; /* Fluido y en una sola línea: el texto más largo es el neerlandés (22 caracteres) y a 1.5rem fijo se partía en móviles pequeños */ font-size: clamp(0.95rem, 3.6vw, 1.25rem); white-space: nowrap; font-weight: 800; text-decoration: none; border-radius: var(--border-radius); cursor: pointer; } /* ********* FORMULARIO DE RESERVAS EN DOS PASOS ******************************* */ /* Con 8 campos el formulario se salía por debajo de la pantalla en móvil */ /* [hidden] gana SIEMPRE dentro del formulario: las apps traen `.form div { display: flex }` y esa regla de autor pisa el display:none del navegador */ .form [hidden] { display: none !important; } .form__paso { display: flex; flex-direction: column; gap: 0.6rem; /* NO estira: el botón va pegado al último campo y baja solo cuando sale un aviso */ flex: 0 1 auto; padding-bottom: 0.5rem; } /* Al cambiar de paso el foco va a la SECCIÓN por script, y el navegador pinta su anillo alrededor del bloque entero: en iOS sale un marco azul rodeando los campos nada más abrir. Se apaga el del foco programático y se DEVUELVE en :focus-visible, que solo salta cuando se navega con teclado — quitarlo del todo dejaría a ciegas a quien tabula. */ .form__paso:focus { outline: none; } .form__paso:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 0.25rem; } /* Migas, aviso y navegación no se comprimen cuando el sitio aprieta */ .form .progreso, .form__pie, .form__navegacion { flex-shrink: 0; } /* Migas de pan (como emmax): círculos unidos por una línea que se va llenando */ .form .progreso { display: flex; justify-content: space-between; position: relative; margin: 0 0 0.8rem; padding: 0; list-style: none; &::before, &::after { content: ""; position: absolute; top: 13px; left: 13px; right: 13px; height: 2px; background: var(--color-form-borde, rgba(255, 255, 255, 0.25)); } /* La parte recorrida: el ancho lo pone reservas.js en --avance */ &::after { right: auto; width: calc((100% - 26px) * var(--avance, 0%) / 100%); background: var(--color-primario); transition: width 0.3s ease; } } .progreso__paso { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; flex: 1; } .progreso__numero { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-form-borde, rgba(255, 255, 255, 0.25)); /* Fondo SÓLIDO propio, nunca var(--form-fondo): ese token puede ser una imagen y aquí pintaría la foto dentro del círculo */ background: var(--progreso-numero-fondo, rgba(0, 0, 0, 0.35)); /* El número SIEMPRE en blanco (Manu, 24 ago 2026): el fondo del círculo es oscuro o de marca en los dos estados */ color: var(--progreso-numero-texto, #ffffff); font-size: 0.78rem; font-weight: 600; transition: background 0.2s, border-color 0.2s, color 0.2s; } .progreso__texto { font-size: 0.62rem; letter-spacing: 0.03em; text-transform: uppercase; opacity: 0.65; text-align: center; } /* Hecho y actual van en el color de marca; el actual además con halo */ .progreso__paso.hecho .progreso__numero, .progreso__paso.actual .progreso__numero { background: var(--color-primario); border-color: var(--color-primario); color: var(--progreso-numero-texto, #ffffff); } .progreso__paso.actual .progreso__numero { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primario) 25%, transparent); } .progreso__paso.actual .progreso__texto { opacity: 1; font-weight: 600; } .form__navegacion { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; /* El de enviar ya trae su propio margen superior */ & > .reservar { margin-top: 0.75rem; } } /* Atrás es secundario: no compite con la acción principal */ .form__atras { padding: 0.5rem 1rem; margin-top: 0.75rem; font-size: 1rem; font-weight: 600; color: inherit; background: none; border: 1px solid var(--color-form-borde, rgba(255, 255, 255, 0.25)); border-radius: var(--border-radius); cursor: pointer; &[hidden] { display: none; } } /* ********* BOTONES DE RESERVA CON DEGRADADO ANIMADO *************************** */ /* Los 3 botones de reserva, con el degradado moviéndose en bucle */ .index__boton-reservar, .carta__boton-reservar, .reservar { /* --reservar-texto: decláralo OSCURO si el color de marca es claro, o el texto no se lee */ color: var(--reservar-texto, var(--blanco)); /* --reservar-brillo: banda que barre el botón. Declárala si primario y secundario son el mismo color */ background: linear-gradient( 270deg, var(--color-secundario), var(--color-primario), var( --reservar-brillo, color-mix(in srgb, var(--color-primario) 30%, var(--color-secundario)) ), var(--color-secundario) ); /* 300% = (4 paradas - 1) × 100%: espacio para que background-position se mueva */ background-size: 300% 100%; border: 1px solid var(--blanco); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2); text-shadow: none; animation: degradadoMovil 3s ease infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; &:hover { transform: scale(1.05); box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3); } } @keyframes degradadoMovil { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Cerrar formulario de reservas */ .cerrar-formulario { position: absolute; top: 0.8rem; right: 1rem; /* Disco verde con la X en blanco: el glifo es solo la X (bi-x-lg) y */ display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; /* anula el padding del selector global `i` (si no, sería un óvalo) */ font-size: 1.4rem; color: var(--blanco); background: var(--color-primario); border-radius: 50%; cursor: pointer; transition: transform 0.3s ease; } .cerrar-formulario:hover { transform: scale(1.2); } .cerrar-formulario-desde-fuera { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; } /* Position absolute */ /* Botón Llamada */ .boton-whatsapp { display: none; justify-content: center; align-items: center; position: fixed; bottom: 1rem; left: 50%; padding: 0.3rem 2rem; transform: translate(-45%, -50%); font-size: 1.2rem; border: 1px solid var(--blanco); border-radius: 1.25rem; box-shadow: var(--sombra); cursor: pointer; z-index: 2; } .booking { color: var(--blanco); text-shadow: none; } #booking { color: var(--blanco); font-size: 1.5rem; font-weight: bold; } .boton-whatsapp-img { width: 2rem; } .boton-whatsapp span { font-size: 1.5rem; font-weight: bold; } /* Animaciones fade-in: en estructura-base (estándar de flota) */ /* TOKENS ESTRUCTURALES (universales, iguales en toda la flota). */ :root { /* Escala de tamaños de fuente (de la distribución real de la flota) */ --fs-xs: 0.8rem; --fs-sm: 0.9rem; --fs-base: 1rem; --fs-md: 1.1rem; --fs-lg: 1.2rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.8rem; /* Grosores */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Escala de espaciado (gaps, paddings, márgenes) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; /* Desenfoque de los headers transparentes */ /* ⚠️ LOS TOKENS DE ESTRUCTURA YA NO SE DECLARAN AQUÍ (10 ago 2026). */ /* Contenido (columna central de las páginas de carta) */ /* Aside (barra lateral de iconos). */ /* Header (barra superior con logo/banderas) */ /* Botones del index (estándar jul 2026 = El Ancla) */ /* Familias (secciones de la carta) */ /* Platos */ /* Animación de aparición de modales (crecer desde el centro con rebote) */ } /* TIPOGRAFÍA BASE — la FAMILIA la pone la app (--tipo-principal). */ body { font-family: var(--tipo-principal); font-size: var(--fs-base); line-height: 1.5; } /* Oculta visualmente pero accesible a lectores de pantalla y SEO. El PUNTO_DE_ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* HEADERS TRANSPARENTES — quita el fondo sólido y aplica solo desenfoque. */ .main__header, .main__header2, /* FIX iOS/SAFARI (jul 2026): sin color de fondo en html, Safari pinta sus */ html { background-color: var(--fondo-app, #000); } /* Las decoraciones con z-index NEGATIVO (ancla flotante .movimiento, fondos */ body { isolation: isolate; } .main__header, .main__header2, .allergens__header, .reviews__header { /* Los headers son superficie LIQUID GLASS: mismo tinte translúcido del tema */ background-color: var(--lg-bg-color, color-mix(in srgb, var(--fondo-app, #000) 40%, transparent)); backdrop-filter: blur(var(--blur-header, 0.45rem)); -webkit-backdrop-filter: blur(var(--blur-header, 0.45rem)); /* Altura FIJA de flota (4rem): el header mide lo mismo lleve botón */ height: var(--alto-header, 4rem); align-items: center; } /* BANDERAS DE IDIOMA — interacción universal de flota (jul 2026). */ .bandera { cursor: pointer; user-select: none; -webkit-user-drag: none; } /* Contenedores de la página de alérgenos (estándar = tarjeta El Ancla): */ .allergens__info { width: 90dvw; max-width: 50rem; display: flex; flex-direction: column; gap: 1rem; margin: 2rem auto; padding: 1rem; border-radius: var(--border-radius); box-shadow: var(--sombra); } .allergens__info h1 { font-size: 1.6rem; font-weight: 700; text-align: center; } /* Tipografía y ritmo de la carta (estándar de flota, jul 2026): */ .platos__familia-h2 { font-size: 1.5rem; } .container h4 { font-size: var(--tam-nombre-plato, 1.2rem); /* Interlineado propio: el container hereda line-height 1rem (menor que */ line-height: 1.15; /* padding inferior SOLO cuando hay descripción debajo (ver :not de abajo) */ /* COLORES DE CARTA (estándar Manu, jul 2026 — sustituye a la convención */ color: var(--color-nombre-plato, inherit); } .container h4.sin-descripcion { color: var(--color-nombre-plato, inherit); /* sin distinción de color ya */ } .container h4:not(.sin-descripcion) { padding-bottom: 0.2rem; /* aire nombre→descripción; sin descripción no suma */ } .product__description { color: var(--color-acento-carta, inherit); font-size: 1.1rem; /* estándar Ancla */ padding-left: 1rem; /* sangría respecto al nombre del plato */ line-height: 1.25; /* descripciones multilínea legibles (mismo mal del container) */ } .cont__prices { color: var(--color-acento-carta, inherit); } /* Regla tipográfica de flota (Manu, jul 2026) — por CSS, la data no se toca: */ #comidas .container h4, #postres .container h4 { text-transform: uppercase; } #bebidas .container h4:not(.sin-descripcion) { text-transform: uppercase; } /* Bebidas sin descripción: la DATA manda (tipo frase con los nombres */ #bebidas .container h4.sin-descripcion { text-transform: none; } /* Subcabeceras dentro de una familia (ej. "VINOS BLANCOS") — estándar de flota: */ .new__header { font-size: 1.3rem; /* un punto por encima de los nombres de plato: separa */ font-weight: bold; text-align: center; text-transform: uppercase; color: var(--color-acento-carta, inherit); } /* Nota de la subcabecera: vale para todos los platos del sub-bloque */ .new__header-texto { margin: -0.5rem 0 0.75rem; font-size: 0.95rem; text-align: center; color: var(--color-texto-tema, inherit); } .platos__familia { margin: 1.5rem 0; /* aire entre familias (first-child lo anula tras el hero) */ } /* Imagen de familia (estándar = Hippie Chippy): redondeo COMPLETO con */ .platos__familia-img { width: 100%; height: var(--img-familia, 8rem); margin-bottom: 0.8rem; border-radius: var(--border-radius); box-shadow: var(--sombra); object-fit: cover; } /* Tarjeta del bloque de platos (estándar = El Ancla): el título de familia */ .cont-platos { border-radius: var(--border-radius); padding: 1rem; box-shadow: var(--sombra); } /* Separación entre platos: 0.3rem sobre el aire natural de la tipografía */ .nuevo__producto { margin-top: var(--gap-platos, 0.3rem); } /* Rejilla nombre/precios de cada plato (estándar Ancla: columnas 1fr auto). */ .container { display: grid; grid-template-columns: 1fr auto; align-items: center; line-height: 1rem; gap: 1rem; margin-bottom: 0; } .nuevo__producto:last-of-type { margin-bottom: 1rem; } /* Cabeceras de columnas de precios (copa/botella o textos): cada imagen ocupa */ .cabeceras__columnas { display: flex; justify-content: end; align-items: baseline; gap: 0.5rem; /* mismo gap que .cont__prices */ margin-bottom: 0.6rem; } /* cartaMaster crea las dos filas de cabeceras (iconos y textos) en TODOS */ .cabeceras__columnas:empty { display: none; } .cabecera__columnas-imagen { width: 3.5rem; /* ancho de columna: centrado exacto sobre los precios */ margin: 0; object-fit: contain; } .cabecera__columnas-imagen:nth-child(1) { height: 1.5rem; } .cabecera__columnas-imagen:nth-child(2) { height: 1.8rem; } .cabecera__columnas-imagen:nth-child(3) { height: 2.1rem; } .cabecera__columnas-imagen:nth-child(4) { height: 2.4rem; } .cabecera__columnas-imagen:nth-child(5) { height: 2.7rem; } .cabecera__columna-texto { width: 3.5rem; text-align: center; /* Convención de cabeceras portada desde la app de imprimir (jul 2026): más */ font-size: calc(1em - 4px); font-weight: 700; hyphens: auto; overflow-wrap: break-word; } /* Estrellas de la página de reseñas (estándar de flota, referencia Hippie */ .reviews-stars { display: block; height: 4rem; width: auto; margin: 4rem auto 1rem; } /* Logo de la barra de header (allergens/reviews): MISMA ALTURA en toda */ .allergens__header-logo-img, .reviews__header-logo-img { height: 3.5rem; width: auto; padding: 0.2rem; } /* ASIDE — aspecto compartido: degradado + sombra + flex column + espaciado. */ .aside { background: var(--color-degradado2); box-shadow: var(--sombra); display: flex; flex-direction: column; align-items: center; gap: var(--aside-gap, 1.25rem); /* separación entre iconos */ padding: var(--aside-padding, 5rem 0.4rem); } /* FAMILIAS DE LA CARTA — APARIENCIA (degradado + sombra + radio) + padding */ .platos__familia { background: var(--color-degradado2); box-shadow: var(--sombra); border-radius: var(--border-radius); padding: 0.4rem; /* aire del título/productos dentro de la tarjeta (estándar El Ancla) */ } /* ICONOS DE NAVEGACIÓN — sistema de MÁSCARA + currentColor (estándar de flota). */ .icono { display: inline-block; width: 2rem; height: 2rem; vertical-align: middle; background-color: var(--color-icono-nav); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; } .icono--home { --icono: url(/images/icon_home.svg); } .icono--menu { --icono: url(/images/icon_menu.svg); } .icono--drink { --icono: url(/images/icon_drink.svg); } .icono--sugerencias { --icono: url(/images/icon_sugerencias.svg); } .icono--desayuno { --icono: url(/images/icon_desayuno.svg); } .icono--dessert { --icono: url(/images/icon_dessert.svg); } .icono--batido { --icono: url(/images/icon_batido.svg); } .icono--allergen { --icono: url(/images/icon_allergen.svg); } .icono--stars { --icono: url(/images/icon_stars.svg); } .icono--map { --icono: url(/images/icon_map.svg); } .icono--call { --icono: url(/images/icon_call.svg); } .icono--cerrar { --icono: url(/images/cerrar.svg); } /* MODALES — animación de aparición compartida: CRECER DESDE EL CENTRO + rebote. */ /* Modal de promo del index: la imagen crece desde el centro (tras 3s, junto */ @keyframes modalImgIn { from { transform: translate(-50%, -50%) scale(0); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .modal__index-img { animation: modalImgIn var(--modal-crecer-dur, 1s) var(--ease-rebote, cubic-bezier(0.34, 1.56, 0.64, 1)) 3s both; } /* Modal de mapas: el contenido crece desde el centro con rebote al abrir */ .maps-modal-content { transform: scale(0.5); transition: transform var(--modal-crecer-dur, 1s) var(--ease-rebote, cubic-bezier(0.34, 1.56, 0.64, 1)), opacity 0.3s ease-out; } .maps-modal.active .maps-modal-content { transform: scale(1); } /* FONDO INTERIOR (páginas que NO son el index) — estándar de flota. */ .logo__fondo { /* Unidades de viewport (dvw/dvh), no %: el % de un fijo depende del bloque */ width: 100dvw; /* lvh (no dvh): el viewport GRANDE, el de las barras retraídas. Con dvh */ height: 100dvh; height: 100lvh; position: fixed; top: 0; left: 0; /* ESCALA DE CAPAS DE LA FLOTA (regla 25 jul, tras el bug de Mely): */ z-index: -2; /* Es decorativo: que no intercepte clics pase lo que pase con el orden */ pointer-events: none; background-color: var(--fondo-negro, #000); background-image: var(--logo-fondo, none), var(--fondo-interior, url(/images/fondo.webp)); background-repeat: no-repeat, no-repeat; background-position: center, center; /* Fondo: 100% 100% ESTIRA la imagen para llenar SIEMPRE ancho y alto (igual */ background-size: 50dvw auto, 100% 100%; } /* En pantallas grandes el logo flotante se reduce (a 50dvw se ve demasiado). */ @media (min-width: 64rem) { .logo__fondo { background-size: 20dvw auto, 100% 100%; } } /* Imagen de cabecera (HERO) — MISMA en todas las páginas */ /* HERO ÚNICO DE FLOTA (referencia: index de Hippie Chippy, jul 2026). */ .hero-img { width: calc(100% - 2rem); /* Tope DURO por viewport: si el hero vive en un contenedor que se encoge a */ max-width: min(var(--ancho-contenido, 50rem), calc(100dvw - 2rem)); height: auto; /* --hero-alto-max: altura del hero por app (respaldo = el estandar de flota) */ max-height: var(--hero-alto-max, 10rem); margin: var(--hero-top, 1rem) auto 2rem; border-radius: var(--border-radius); box-shadow: var(--sombra); object-fit: cover; } /* Hero de las páginas de carta: va dentro de .main (que ya baja 3rem), le */ .carta, .drinks { --hero-top: 0.5rem; } /* La PRIMERA familia de la carta no suma su margen al del hero: el hueco */ .platos__familia:first-child { margin-top: 0; } /* Header del index: MISMA altura fija que los interiores (4rem), lleve */ .index__buttons { gap: var(--btn-index-sep, 1rem); } .index__buttons-btn { padding: var(--btn-index-padding, 0.6rem 0.4rem 0.6rem 1.2rem); gap: var(--btn-index-gap, 0.75rem); } .index__header { display: flex; align-items: center; height: var(--alto-header, 4rem); } /* En el index el CONTENEDOR (body.index) ya pone el rem de aire por lado. */ .index .hero-img { width: calc(100% - 1rem); margin-left: 1rem; margin-right: 0; } /* Hero de las cabeceras de carta/bebidas = MISMO ancho que el contenido (los */ .carta .hero-img, .drinks .hero-img { width: 100%; } /* Logos del index: pegados al header (sin el despeje de páginas interiores). */ .index .hero-img--logo { margin-top: 0; } .hero-img--logo { object-fit: contain; /* Sin padding superior (empujaba el logo hacia abajo). El margin-top NO se */ padding: 0 1rem 1rem; /* Regla de flota: los LOGOS van limpios, flotando sobre el fondo — sin */ border-radius: 0; box-shadow: none; background: none; } /* FEATURE OPT-IN "marco" (nació en Decades, jul 2026): logo enmarcado */ .hero-img--marco { padding: 1rem; border-radius: var(--border-radius); box-shadow: var(--sombra); background-color: var(--lg-bg-color); -webkit-backdrop-filter: blur(var(--lg-blur, 0.25rem)) saturate(120%) brightness(1.15); backdrop-filter: blur(var(--lg-blur, 0.25rem)) saturate(120%) brightness(1.15); } /* Guardarraíl de la regla anterior: en las páginas de alérgenos y reviews */ .allergens .hero-img--marco, .reviews .hero-img--marco { padding: 0 1rem 1rem; border-radius: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* COLUMNAS DE PRECIOS EN MÓVIL (fix nacido en Lanis, jul 2026). */ .cont__prices span { font-variant-numeric: tabular-nums; } /* Resaltar columnas pares cuando hay 4 precios (lectura en tabla) */ .precios-cuatro-columnas span:nth-child(even) { font-weight: bold; } @media (max-width: 60rem) { h4.producto-cuatro-precios { font-size: 1.175rem; } .precios-cuatro-columnas { gap: 0.3rem; } .precios-cuatro-columnas span { font-size: 0.975rem; width: 2.8rem; } /* Solo cabeceras de 4 columnas (:has cuenta los hijos) */ .cabeceras__columnas:has(> :nth-child(4)) { gap: 0.3rem; } .cabeceras__columnas:has(> :nth-child(4)) > .cabecera__columna-texto { width: 2.8rem; } .cabeceras__columnas:has(> :nth-child(4)) > .cabecera__columnas-imagen { width: 2.8rem; height: auto; } } @media (max-width: 30rem) { h4.producto-cuatro-precios { font-size: 0.85rem; } .precios-cuatro-columnas { gap: 0.2rem; } /* El gap de las cabeceras tiene que bajar CON el de los precios: si */ .cabeceras__columnas:has(> :nth-child(4)) { gap: 0.2rem; } .precios-cuatro-columnas span { font-size: 0.75rem; width: 2.3rem; } /* El `:has` NO es decorativo, es lo que hace que esto llegue a aplicarse. */ .cabeceras__columnas:has(> :nth-child(4)) > .cabecera__columna-texto { width: 2.3rem; font-size: 0.75rem; } .cabeceras__columnas:has(> :nth-child(4)) > .cabecera__columnas-imagen { width: 2.3rem; height: auto; margin: 0; object-fit: contain; } } /* PRECIOS EN SU PROPIA LÍNEA EN MÓVIL, CON 3+ COLUMNAS (Manu, 3 ago 2026). */ @media (max-width: 37.5rem) { .container:has(.cont__prices > span:nth-child(3)) { grid-template-columns: 1fr; align-items: start; gap: 0.35rem; } /* Los precios ya no compiten por el ancho → caja y tamaño normales. */ .container:has(.cont__prices > span:nth-child(3)) .cont__prices { gap: 0.5rem; } .container:has(.cont__prices > span:nth-child(3)) .cont__prices span { width: 3.5rem; font-size: 1.1rem; } /* Las cabeceras acompañan: mismo ancho y gap que los precios, o la columna */ .cabeceras__columnas:has(> :nth-child(3)) { gap: 0.5rem; } .cabeceras__columnas:has(> :nth-child(3)) > .cabecera__columna-texto, .cabeceras__columnas:has(> :nth-child(3)) > .cabecera__columnas-imagen { width: 3.5rem; } /* El nombre recupera su tamaño: ya no hay que encogerlo para hacer sitio. */ h4.producto-cuatro-precios { font-size: inherit; } } /* ANIMACIONES FADE-IN AL SCROLL (estándar de flota = El Ancla, jul 2026). */ .fade-in-element { opacity: 0; transform: translateY(1.875rem); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-element.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-3.125rem); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(3.125rem); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .fade-in-scale { opacity: 0; transform: scale(0.9); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-scale.visible { opacity: 1; transform: scale(1); } /* Títulos de cada alérgeno en la lista (estándar = El Ancla): 1.2rem. */ .allergen__allergen h3 { font-size: 1.2rem; } /* Tarjeta de la lista de alérgenos (.contenido, la crea allergen.js): */ .contenido { width: 90dvw; max-width: 50rem; border-radius: var(--border-radius); box-shadow: var(--sombra); } /* FOOTER (estándar de flota = estilo Hippie Chippy, jul 2026): */ .footer { display: flex; flex-direction: column; text-align: center; padding: 0.5rem; padding-bottom: 3rem; } .footer__div { font-weight: bold; margin: 1rem; text-align: center; } .footer__div h3 { text-transform: uppercase; color: var(--color-footer-acento, inherit); } .footer__creditos { font-size: 0.8rem; text-align: center; color: var(--color-footer-acento, inherit); } .footer__creditos span { font-size: 0.8rem; } .footer .email { text-align: center; padding: 1rem; color: var(--color-footer-acento, inherit); } .footer .restaurant123 { color: var(--color-footer-acento, inherit); font-size: 0.8rem; } /* PASTILLAS DE OPCIONES del formulario de reservas (zona, primera visita). */ .form .opciones { display: flex; /* fila explícita: el `.form div { flex-direction: column }` del tema apila */ flex-direction: row; gap: 0.5rem; } .form .opciones input[type="radio"] { /* Oculto pero accesible (el foco se ve en la píldora). */ position: absolute; opacity: 0; pointer-events: none; } .form .opciones__pildora { flex: 1; text-align: center; margin: 0; /* anula el margin de .form label para alinear las pastillas */ padding: 0.5rem 0.6rem; border: 1px solid var(--color-form-borde); border-radius: 50px; font-size: 0.95rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Hover de las pastillas SIN seleccionar ("las suaves"): leve tinte de marca + */ .form .opciones input[type="radio"]:not(:checked) + .opciones__pildora:hover { border-color: var(--color-primario); background: color-mix(in srgb, var(--color-primario) 10%, transparent); } .form .opciones input[type="radio"]:checked + .opciones__pildora { background: var(--color-primario); border-color: var(--color-primario); color: var(--color-texto-invertido, #fff); } .form .opciones input[type="radio"]:focus-visible + .opciones__pildora { box-shadow: 0 0 0 3px var(--color-form-borde-focus); } /* ENTRADA SUAVE de los avisos del formulario (día cerrado, grupo grande, */ .nota-reserva { animation: nota-aparece 0.28s ease; } @keyframes nota-aparece { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: translateY(0); } } /* El fundido del cambio de paso, corto (el del navegador es más lento) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; } @media (prefers-reduced-motion: reduce) { .nota-reserva { animation: none; } /* Accesibilidad: sin animación de transición para quien las desactiva */ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---------------------------------------------------------------------------- CARTA EN REJILLA (feature opt-in: modulos.estiloCarta. = "rejilla") ---------------------------------------------------------------------------- */ /* Tarjetas con foto en vez de filas plato+precio */ .rejilla { display: grid; grid-template-columns: repeat(var(--rejilla-columnas, 2), 1fr); gap: var(--rejilla-gap, 1rem); margin-bottom: 1.5rem; } .rejilla__tarjeta { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: var(--rejilla-padding, 0.75rem); border-radius: var(--border-radius); box-shadow: var(--sombra); background-image: var(--color-degradado2); text-align: center; } .rejilla__img { width: 100%; max-width: var(--rejilla-img, 10rem); aspect-ratio: 1; object-fit: contain; order: -1; } .rejilla__nombre { font-size: var(--tam-nombre-plato, 1.2rem); line-height: 1.15; color: var(--color-nombre-plato, inherit); } .rejilla__texto { font-size: 0.95rem; line-height: 1.25; color: var(--color-acento-carta, inherit); } .rejilla__precio { font-weight: 700; color: var(--color-acento-carta, inherit); } /* Una sola columna cuando no cabe la foto a tamaño legible */ @media (max-width: 26rem) { .rejilla { grid-template-columns: repeat(var(--rejilla-columnas-movil, 1), 1fr); } }