/* ===================================================================== FRED'S · SISTEMA VISUAL ===================================================================== Orden: tokens → base → tipografía → piezas comunes → secciones. ── LAS DECISIONES QUE EXPLICAN TODO LO DEMÁS ──────────────────────── 1 · LA WEB ES CLARA. NO ES OSCURA. ⚠️ El sitio publicado tiene `body { background: #fff }` en su propio tema, y los fondos que declara Elementor son dorado (46 veces) y blanco (13). No hay ni un fondo oscuro en toda la marca. Se montó primero sobre azul profundo y estaba mal: ese azul era una invención, no la marca. El papel es claro y el azul se queda donde le toca, como tinta y como acento. La paleta, medida sobre el sitio publicado: dorado #cc9933 (155 usos), azul petróleo #1b7892 y turquesa #009999. Un solo acento en toda la página: el dorado. Nada más. 2 · ESQUINAS RECTAS EN TODO. Botones, tarjetas, imágenes, campos: radio 0. Una sola forma para todo el sitio. Un botón redondeado dentro de una maqueta recta es lo que hace que una web parezca montada por piezas sueltas. 3 · LA PORTADA ABRE AL 100% Y SIN TEXTO ENCIMA. Regla de Grupo Anderson's: la primera pantalla es el vídeo entero, de borde a borde. Nada de heros partidos 50/50 para abrir. Y como en Señor Frog's y en Nicoletta, el vídeo no lleva titular encima: la primera palabra de la web vive en la banda azul que viene justo debajo. Así no hay texto que proteger y el vídeo se ve limpio. Lo único que se superpone es la cabecera, y ésa sí lleva velo propio: sin él, sobre el fotograma más claro del vídeo el menú en blanco se quedaba en 2,2:1 de contraste. 4 · EN MÓVIL LAS TARJETAS NO SE APILAN: SE DESLIZAN. Carrusel con anclaje y la vecina asomando, para que se vea que hay más. El scroll de la página no se alarga. 5 · UN SOLO MODO: CLARO. Todo el color sale de variables, pero NO se sigue el modo oscuro del sistema. En un Mac en oscuro la web salía negra sin que nadie lo hubiera decidido, y la identidad de la marca no la elige el sistema operativo del visitante. ===================================================================== */ /* ===================================================================== 📱 TOCAR UNA FOTO NO LA AGRANDA (2026-09-15) ===================================================================== Carlos: «aprieto una imagen y hace zoom horrible, daña la movilidad». En Safari del iPhone eso son TRES cosas distintas, y ninguna la reproduce el simulador (WebKit de Playwright tocó las 70 fotos del sitio sin que ninguna cambiara de tamaño): 1. MANTENER PULSADA una foto abre la vista previa del sistema, que la amplía encima de la página → `-webkit-touch-callout: none`. 2. DOBLE TOQUE acerca la página entera, y en un sitio lleno de fotos y tarjetas que se tocan es fácil dispararlo sin querer → `touch-action: manipulation`. ⭐ NO quita el PELLIZCO: ampliar con dos dedos sigue funcionando, que es de accesibilidad. Por eso NO se toca el `viewport` con `user-scalable=no`. 3. `:hover` PEGADO: en táctil el primer toque deja el hover puesto y la foto se queda crecida (hasta 1.16 en las cartas de Cancún). Todos los hover que escalan fotos van ya dentro de `@media (hover: hover) and (pointer: fine)`. ===================================================================== */ html { touch-action: manipulation; } img, video, picture { -webkit-touch-callout: none; -webkit-user-drag: none; } /* ── Tokens ────────────────────────────────────────────────────────── */ :root { /* ═══════════════════════════════════════════════════════════════════ LA PALETA — tomada del PSD `FS_MailingVillas.psd` (2026-08-13) ═══════════════════════════════════════════════════════════════════ ⭐ EL PSD ES LA GUÍA, no al revés. Estos cuatro colores son los que usa el mailing de las Villas y a partir de aquí mandan en la web. ⛔ Lo que había antes —dorado #cc9933, turquesa #009999 y azul pizarra #263b47, medidos en el sitio publicado— queda archivado en `_docs/paleta-anterior-2026-08-13/`. */ --arena: #d4c3b0; /* el papel del sitio */ --terracota: #a05b33; /* el acento: rellenos de botón y bloques */ --marron: #7c533e; /* las superficies oscuras */ --crema: #f3e6d8; /* el claro que se levanta */ /* ⚠️ VERSIONES PARA TINTA. Los colores del PSD NO se pueden usar como texto sobre su propio fondo: la terracota sobre arena da 3,03:1 y el marrón 3,87:1, cuando el mínimo es 4,5. En el mailing eso pasa desapercibido porque el texto es enorme; en una web con cuerpo de 16 px, no. Estas versiones bajan sólo la LUZ —mismo tono, misma saturación— hasta llegar al mínimo, así que se siguen leyendo como el mismo color. */ --terracota-tinta: #7a4527; /* 4,52:1 sobre arena */ --tinta: #483024; /* 7,10:1 sobre arena */ --tinta-suave: #6d4937; /* 4,60:1 sobre arena */ --linea: #b9a48a; /* ═══════════════════════════════════════════════════════════════════ ⭐ EL ACENTO, EN UN INTERRUPTOR (2026-09-10) ═══════════════════════════════════════════════════════════════════ Carlos vio el rojo del cartel Sea & Spice sobre los fondos del sitio y sobre los dos botones: «me gusta eso, haz esos cambios primero, pero guarda lo anterior por si quiero cambiarle». Así que el acento dejó de ser un color y pasó a ser un ROL. Todo lo que antes decía `--terracota` ahora dice `--acento`, y cambiar la web entera de vuelta es cambiar estas dos líneas: --acento: var(--terracota); --acento-tinta: var(--terracota-tinta); ⛔ La terracota NO se borró: sigue declarada ahí arriba y sigue siendo la del PSD de las Villas. La foto del CSS anterior está en `_interno/_docs/paleta-terracota-2026-09-10/`. ⚠️ EL ROJO NO NECESITA VERSIÓN PARA TINTA. La terracota sí la necesitaba: sobre arena daba 3,03:1 y había que oscurecerla hasta #7a4527 para llegar a 4,52. El rojo del cartel da **4,75 sobre arena** tal cual, 5,50 sobre arena clara, 6,65 sobre crema y 8,15 sobre blanco. Por eso las dos variables apuntan al mismo color: la segunda existe para que volver a la terracota siga siendo cambiar dos líneas, no sesenta. ⭐ PARA COMPARARLAS EN VIVO, sin tocar el archivo: cualquier página acepta `?paleta=terracota` y se pinta con la vieja. Lo monta `partials/head.php`. */ --acento: var(--rojo-spice); --acento-tinta: var(--rojo-spice); /* ⚠️ La escala de papeles se LEVANTA, no se hunde. El arena del PSD ya está en su límite: cualquier versión más honda deja el texto suave por debajo de 4,5. Así que el respiro y las superficies elevadas van hacia el claro, y el segundo escalón es la propia crema del PSD. */ --arena-clara: #e0d2c1; /* Roles: lo que usan los componentes. Cambiarlos cambia el modo. ⚠️ Los componentes usan SIEMPRE estos, nunca los crudos de arriba. */ --fondo: var(--arena); /* el papel, como en el PSD */ --fondo-alto: var(--crema); /* superficies que se levantan */ --fondo-hondo: var(--arena-clara); /* secciones de respiro */ --texto: var(--tinta); --texto-suave: var(--tinta-suave); --borde: var(--linea); /* ⚠️ BLANCO, no la crema: sobre la terracota la crema se queda en 4,24:1. El blanco da 5,20 sobre terracota y 6,64 sobre marrón, así que sirve para las dos superficies oscuras. */ --sobre-hondo: #ffffff; /* ⭐ EL PAPEL BLANCO — Carlos, 2026-08-17: «podemos aplicar algunas partes blancas en el home, por lo menos un poco». El sitio es de papel arena; el blanco entra como TERCER escalón, no como fondo general: donde la página necesita respirar entre dos bloques con mucha materia. La marca sigue siendo la arena. */ --fondo-blanco: #ffffff; /* ═══════════════════════════════════════════════════════════════════ LA LÍNEA SEA & SPICE — del PSD `FS_Sea&Spice_Invitación.psd` ═══════════════════════════════════════════════════════════════════ Carlos, 2026-09-10: «podemos generar un fondo como esa textura para usarlo, e instalar la tipografía roja, que esa es la nueva línea de Fred's». Aquí quedan las tres piezas, MEDIDAS del PSD y listas para usar. ⚠️ Nada de esto cambia todavía cómo se ve el sitio: no se aplica a ningún componente hasta que Carlos diga dónde va. ⭐ EL ROJO. #a20618 exacto, leído en el texto «ILVIC QUEVEDO» del cartel (el titular «Sea & Spice» lo da un punto más oscuro porque la textura pasa por encima). Aguanta como TINTA en los cuatro fondos del sitio sin retocarlo: 8,15:1 sobre blanco, 6,79 sobre el papel nuevo, 6,65 sobre crema y 4,75 sobre arena — el mínimo es 4,5. Y al revés, blanco sobre el rojo da 8,15, así que también sirve de relleno de botón. ⭐ EL PAPEL. La textura del cartel, convertida en una baldosa de 640 px que se repite sin costura (el salto en la unión mide 2,36 contra 2,58 del propio grano: la costura es MENOS visible que la fibra del papel). 64 KB en WebP. Su color medio es #efecea, que es el que se pinta debajo mientras la imagen carga. ⚠️ CÓMO TEÑIRLA. La baldosa es casi blanca a propósito. Para papel de otro color no se retoca la imagen: se pone el color debajo y se mezcla con `background-blend-mode: multiply`. Así una sola imagen sirve para el papel claro, el arena y la crema. ⭐ LA CALIGRÁFICA. Mr Dafoe, declarada en `fuentes.css`. Para firmar un nombre en grande, nunca para leer. */ --rojo-spice: #a20618; --papel-color: #efecea; --papel: url('../img/textura/papel-freds.webp'); --papel-lado: 640px; /* el lado de la baldosa, a 1× */ /* ⚠️ LA MISMA BALDOSA, YA EN MARRÓN. Sobre el marrón NO se usa la baldosa clara con `background-blend-mode: multiply`: el blend obliga al navegador a rasterizar la capa aparte y el borde derecho del relleno del cruce salía como una LÍNEA CLARA de un píxel —medida: pico de 126 sobre un fondo de 90—. Esta versión trae el papel ya multiplicado por el #7c533e, así que se pinta como una imagen normal, sin blend y sin línea. Su media cae en el marrón de marca al decimal, así que las superficies con papel y las lisas son el mismo color. 35 KB. */ --papel-marron: url('../img/textura/papel-marron.webp'); --caligrafia: 'Mr Dafoe', 'Snell Roundhand', cursive; /* ═══════════════════════════════════════════════════════════════════ EL COLOR DEL BOTÓN — el atardecer (2026-08-21) ═══════════════════════════════════════════════════════════════════ ⭐ Carlos: «Fred's es colores de atardecer». El RELLENO del botón deja de ser la terracota del PSD y se va al naranja del sol bajo. La terracota sigue mandando en todo lo demás —el bloque de cierre, los bordes, las tintas—: esto es sólo el botón. ⚠️ Cuanto más vivo el naranja, MENOS contraste aguanta el blanco de encima. `#c1571a` es lo más luminoso que aún llega a 4,5:1 con texto blanco. Si se sube hacia el ámbar o el amarillo, el texto tiene que voltearse a tinta honda — es lo que hace solo el afinador `?botones`. ⚠️ El relleno da 2,63:1 contra el papel arena y el mínimo para el contorno de un control es 3:1. Por eso el botón lleva SIEMPRE el borde hondo: es lo que lo dibuja contra el papel, no el relleno. */ /* ⭐ 2026-09-10 · EL BOTÓN SE VA AL ROJO. Carlos aprobó los dos botones del cartel Sea & Spice —el relleno rojo y el de contorno— tal cual: «me gusta eso, haz esos cambios primero». El naranja de atardecer NO se borra: queda aquí debajo con su nombre y vuelve entero con `?paleta=terracota`. El rojo aguanta mejor que el naranja en los dos sitios donde había que medir: blanco encima da 8,15:1 (el naranja daba 4,52, justo en el mínimo) y contra el papel arena da 4,75, así que ya no depende del borde para dibujarse — aunque el borde se queda, que es lo que lo separa de un bloque de color plano. */ --boton: var(--rojo-spice); /* el relleno: 8,15:1 con blanco */ --boton-honda: #7b0512; /* el mismo con menos luz: hover y borde */ --boton-tinta: #ffffff; /* lo que va encima */ --boton-borde: var(--boton-honda); /* 6,53:1 sobre el papel */ /* ⛔ EL ATARDECER, GUARDADO. Lo que había del 2026-08-21 al 2026-09-10: «Fred's es colores de atardecer», el naranja del sol bajo. Cuanto más vivo el naranja, menos contraste aguanta el blanco encima: #c1571a era lo más luminoso que aún llegaba a 4,5:1. */ --boton-atardecer: #c1571a; --boton-atardecer-hondo: #9c4411; /* ⚠️ EL NARANJA QUE SE PUEDE LEER SOBRE EL PAPEL. El del botón vive debajo de un texto blanco, así que su contraste se mide contra el blanco; cuando el naranja es el TEXTO y el arena el fondo, hace falta otro. `--boton-honda` da 3,77:1 —vale para un contorno, no para letras a 22px semibold, que necesitan 4,5—. Éste es el mismo tono de atardecer con la luz bajada hasta cumplir: 4,52:1, medido. Lo usan los apartados de la carta. */ /* ⭐ 2026-09-10 · también al rojo: sobre el papel arena da 4,75:1, por encima del 4,52 que daba el naranja hondo. El naranja queda al lado para el interruptor. */ --acento-titulo: var(--rojo-spice); --acento-titulo-atardecer: #873d12; /* ═══════════════════════════════════════════════════════════════════ TIPOGRAFÍA — también del PSD ═══════════════════════════════════════════════════════════════════ Georgia para los titulares y Verdana para el texto, que es lo que usa el mailing. ⚠️ Las dos son fuentes DE SISTEMA: están en todos los Windows y todos los Mac desde hace veinte años, así que no hay que descargar nada. Eso quita de la web los 1,4 MB de Montserrat y Nunito Sans que se servían antes. ⚠️ La reserva son fuentes CONCRETAS, nunca `system-ui`: eso significaría «la letra que tenga configurada este ordenador» y haría que la web se viera distinta en cada máquina. */ /* ⭐ 'Titular Freds' NO es una fuente descargada: es Georgia con los NÚMEROS en Verdana. Carlos, 2026-08-14: «donde haya número, que no sea Georgia» — los dígitos de Georgia son de estilo antiguo (bailan como minúsculas, con rabos) y en fechas y precios se ven débiles. El truco: dos @font-face con el mismo nombre; el que lleva `unicode-range` de dígitos apunta a Verdana local y GANA sólo para 0–9; el resto cae al de Georgia. Cero descargas, aplica en TODO el sitio de golpe. Definidos justo después de este bloque. */ /* ⭐ 2026-08-26 · SE FUE LA SERIF. Al cliente le mandaron quitarla, así que Georgia sale de los titulares y entra **Jost** —revival de Futura con licencia libre— en los dos papeles. El porqué de Jost y no de la Futura de verdad está en `assets/css/fuentes.css`. ⚠️ El truco de 'Titular Freds' (Georgia con los dígitos en Verdana) deja de hacer falta: Jost trae cifras de caja alta, que es justo lo que Carlos pedía el 2026-08-14 con «donde haya número, que no sea Georgia». Los dos @font-face de abajo se quedan sin usar, no se borran: si vuelve la serif, vuelven con ella. */ --titulo: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif; --cuerpo: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif; /* Escala fluida: un solo salto entre móvil y escritorio, sin saltos bruscos por el camino. ⚠️ Verdana pinta MÁS GRANDE que Nunito Sans al mismo tamaño (su ojo medio es mayor), así que los cuerpos bajan un punto respecto a lo que había. */ --t-titular: clamp(1.95rem, 5.2vw, 3.9rem); /* ⭐ UNA SOLA ESCALA DE SECCIÓN EN TODA LA WEB — Carlos, 2026-08-17: «todos los títulos tienen distintos tamaños, el de grupos y el de prensa son distintos». Estaba en tres: 34px la portada, 38px el blog y los cierres, y 54px las secciones nuevas. ⚠️ MANDA LA PEQUEÑA, la de GRUPOS. Se unificó primero hacia arriba —a la escala de Señor Frog's, 52px— y Carlos lo corrigió en el acto: «el título de grupos era el correcto, los grandes había que llevarlos al pequeño». Este sitio no es Frog's: su titular es Georgia, que a 54 px pesa mucho más que la Oswald condensada de allí. */ --t-seccion: clamp(1.38rem, 3.4vw, 2.125rem); /* ⚠️ 16px FIJOS, no un clamp que crece. Carlos, 2026-08-20, sobre la bajada de la portada en pantalla grande: «tiene que estar a 16, o sea bájale, está gigante». Antes iba de 16 en el teléfono a 18,24 a partir de ~1300px de ancho, y ese techo era lo que se veía grande. Ahora mide lo mismo en todas las pantallas. ⚠️ Queda POR DEBAJO del texto corrido (17px). Es a propósito y es lo que él pidió; si algún día la entrada tiene que volver a pesar más que el cuerpo, se sube aquí y se mueven sus 24 piezas a la vez. */ /* ⚠️ 2026-08-26 · SUBE A 17 AL CAMBIAR DE LETRA, y sigue siendo el mismo diseño. Lo que Carlos aprobó el 2026-08-20 no era el número 16 sino cómo se veía: la entrada un pelo por encima del texto corrido (16 contra 15,5 de Verdana). Al pasar a Jost el cuerpo sube a 16,5, y dejar la entrada en 16 la habría puesto POR DEBAJO del texto que acompaña — la bajada del hero se vería más pequeña que un párrafo cualquiera. Se conserva la proporción, no la cifra. */ --t-sub: 1.0625rem; /* 17px */ --t-rotulo: .7rem; /* ⭐ EL TEXTO CORRIDO, EN DOS ESCALONES Y NO EN NUEVE (2026-08-18) La auditoría de este día encontró NUEVE cuerpos distintos de Verdana para lo mismo —.92, .93, .94, .95, .96, .98, 1, 1.02 y 1.06rem—, repartidos por secciones que se fueron escribiendo por separado. Con eso no hay «buena línea» posible: cada página parecía calibrada a su manera. Ahora hay dos papeles y nada más: --t-cuerpo el texto que se lee de corrido (el mismo del body) --t-apoyo lo que acompaña: descripciones densas, notas, pies Y por encima de los dos sigue `--t-sub`, que es la ENTRADA de una página (la bajada bajo el titular). Tres tamaños, tres papeles. */ /* ⚠️ 15,5px. Carlos, 2026-08-20, sobre el cuerpo de las reseñas —que es el mismo de todo el texto corrido—: «manda todo a 15,5». Venía de 17. Cambiar la variable mueve las ~100 piezas de cuerpo del sitio a la vez, que es justo para lo que está. ⚠️ Y el APOYO baja con él, de 15,2 a 14,5: a 15,2 se quedaba a tres décimas del cuerpo y los dos papeles dejaban de distinguirse —que es el problema que se arregló el 2026-08-18, cuando había nueve cuerpos de Verdana para lo mismo—. El escalón se conserva. */ /* ⚠️ 2026-08-26 · SUBEN UN PUNTO AL CAMBIAR DE LETRA, y no es capricho. La altura de la x —lo que de verdad decide cómo de grande se ve un texto— es 54,5% del em en Verdana y 46,0% en Jost, medido en los archivos. Al mismo cuerpo, Jost se lee más pequeña. Igualarlo del todo pediría 18,4px y eso rompería la maqueta entera; el punto de más es el compromiso: 16,5 en Jost dan la misma mancha que ~15,7 de Verdana. El ESCALÓN de 1px entre cuerpo y apoyo se conserva, que es lo que mantiene los dos papeles distintos (§40). */ --t-cuerpo: 1.03125rem; /* 16,5px, el mismo que lleva el */ --t-apoyo: .96875rem; /* 15,5px */ --t-boton: .76rem; /* 12,2px: uno solo para todos los botones */ /* ⭐ EL TÍTULO DE UNA TARJETA. Uno solo para todo el sitio: la auditoría del 2026-08-17 encontró CINCO tamaños distintos para lo mismo —19px en el blog, 20 en la carta, 21 en los pases y en Kids, 23 en prensa y 26 en los planes de Cancún—. Manda el de los pases de la portada, que es el que ya estaba aprobado. */ --t-tarjeta: 1.32rem; /* ⭐ EL TÍTULO DE UNA ENTRADA DE BLOG — 16px. Carlos, 2026-08-21: «los títulos del blog, ¿por qué no lo hacemos en 16?». No es un tamaño nuevo: la fila de «Últimas del blog» de la portada y de `/cancun/` ya estaba en 16 desde que se cerró la escala el 2026-08-18 —«34 sección · 21,1 tarjeta · 16 blog»—. Lo que pasaba es que la rejilla de `/blog/` y los relacionados del pie de un post se habían quedado en el tamaño de TARJETA, 21,1, y por eso no cuadraban con los de la portada. Ahora el papel tiene nombre y está escrito en un solo sitio, así que no se pueden volver a separar. */ --t-blog: 1rem; /* EL CRUCE de la cocina a la barra (2026-08-18, reordenado el 19). Los números que mandan en su ritmo, sueltos aquí para poder tocarlos desde el afinador `?cruce` sin recompilar nada: --cruce-alto cuánto scroll dura la escena entera --cruce-sale cuándo ARRANCA la ola que cubre --cruce-tapa en qué punto (0→1) queda la pantalla toda marrón --cruce-suelta en qué punto empieza a destaparse --cruce-cierra cuándo la ola que se retira TERMINA de salir --cruce-cara cuándo enciende el texto de la cara que entra ⚠️ El orden manda y no se puede alterar sin volver a medir: sale < tapa < suelta < cierra ≤ cara. */ --cruce-alto: 215svh; /* sólo el tramo del cruce; el riel entero lo suman las piezas de las dos caras */ --cruce-sale: .12; --cruce-tapa: .35; --cruce-suelta: .64; --cruce-cierra: .91; --cruce-cara: .91; /* ⚠️ POR QUÉ EL CRUCE MIDE 215svh Y NO 170 (2026-08-19). Los dos huecos nuevos —el que usa la cocina para irse y el que espera la barra— hay que PAGARLOS con scroll, o salen del ritmo que Carlos ya aprobó. Los números están puestos para que los tres tramos de siempre midan exactamente lo que medían: barrido 51svh, tapado 61 y retirada 58. Lo que crece es la escena, no la prisa. En scroll: 25 · 51 · 61 · 58 · 19 svh. */ /* ⚠️ El tramo TAPADO pasó de un 10% del cruce a un 36% (2026-08-18): ahí vive la cita de Food&Travel y con 10svh de scroll no daba tiempo ni a leerla. Sigue siendo el 30% del cruce: ~57svh. ⭐ POR QUÉ HAY UN HUECO AL PRINCIPIO Y OTRO AL FINAL (2026-08-19). Carlos, sobre dos capturas: «cuando la ola llega al texto se ve como un error; el texto debe desaparecer ANTES de que la ola le llegue» y «el texto de la bebida aparece antes de que la ola termine de llegar». Medido con `_herramientas/medir-cruce.js`: el texto de cocina se quedaba a opacidad 1 mientras su caja pasaba de 0 a 98% cubierta de marrón, y el de la barra encendía con la suya aún 27% tapada. Por eso la ola ya no arranca en 0 sino en `--cruce-sale` —ese hueco es el que usa la cocina para irse— y ya no termina en 1 sino en `--cruce-cierra`, dejando el final limpio para que entre la barra sobre pantalla quieta. */ /* Los tres botones de la cabecera (idioma · grupos · reservar) comparten una sola altura desde el 2026-08-18; en móvil ya era 38 desde el 14. */ --alto-boton-cabecera: 38px; /* Ritmo */ --aire: 22px; /* aire lateral en móvil */ --ancho: 1240px; --medida: 62ch; /* lectura cómoda; Verdana ocupa más */ --hueco-bloque: clamp(52px, 6.5vw, 104px); /* ⭐ LA OLA DE MARCA — el mismo filo ondulado que cruza los pases de la portada, disponible para todo el sitio. Las interiores no lo usaban y por eso se leían como cajas de plantilla: el sistema tiene un motivo fuerte y ellas se salían de él. Es el polígono base que generó `_herramientas/generar-olas.py`; los pases siguen teniendo el suyo por platillo para poder interpolar. */ --ola-marca: polygon(16.11% 0%, 17.38% 2%, 17.90% 5%, 17.72% 8%, 16.97% 10%, 15.91% 12%, 14.77% 15%, 13.80% 18%, 13.12% 20%, 12.75% 22%, 12.60% 25%, 12.47% 28%, 12.17% 30%, 11.50% 32%, 10.35% 35%, 8.74% 38%, 6.79% 40%, 4.75% 42%, 2.91% 45%, 1.56% 48%, 0.93% 50%, 1.13% 52%, 2.13% 55%, 3.76% 58%, 5.76% 60%, 7.81% 62%, 9.63% 65%, 11.00% 68%, 11.84% 70%, 12.17% 72%, 12.14% 75%, 11.96% 78%, 11.84% 80%, 11.95% 82%, 12.35% 85%, 13.00% 88%, 13.74% 90%, 14.32% 92%, 14.52% 95%, 14.12% 98%, 13.03% 100%, 100% 100%, 100% 0%); /* Para lo que ENTRA o SALE: arranca rápido y frena mucho. */ --curva: cubic-bezier(.16, 1, .3, 1); /* ⚠️ Para lo que sólo cambia de COLOR. La curva de arriba es un expo-out muy marcado: en un desplazamiento se lee como energía, pero en un cambio de color hace que salte de golpe y luego no pase nada. Un color quiere una curva pareja. */ --curva-color: cubic-bezier(.4, 0, .2, 1); /* Alto real de la cabecera. Lo mide y lo publica `sitio.js`; este valor es sólo la reserva para el primer pintado y para cuando no hay JavaScript. ⛔ No escribir la altura a mano en ningún otro sitio. */ --alto-cabecera: 88px; --alto-indice: 45px; } /* Los números de los títulos, en Verdana — ver la nota de `--titulo`. */ @font-face { font-family: 'Titular Freds'; src: local('Georgia'); font-weight: normal; } @font-face { font-family: 'Titular Freds'; src: local('Georgia Bold'), local('Georgia-Bold'); font-weight: bold; } @font-face { font-family: 'Titular Freds'; src: local('Verdana'); font-weight: normal; unicode-range: U+0030-0039; } @font-face { font-family: 'Titular Freds'; src: local('Verdana Bold'), local('Verdana-Bold'); font-weight: bold; unicode-range: U+0030-0039; } /* ⛔ NO HAY MODO OSCURO. A propósito. La web de Fred's es clara, como el sitio publicado. Se probó a seguir el modo del sistema (`prefers-color-scheme`) y el resultado es que en un Mac configurado en oscuro —que son muchos— la web sale negra sin que nadie lo haya decidido. La identidad de la marca no la elige el sistema operativo del visitante. Si algún día se quiere modo oscuro, se hace con un interruptor propio en la web, no automático. */ /* ── Base ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { /* ⭐ LA WEB DECLARA SU PROPIO ESQUEMA, no hereda el del visitante. Sin esta línea, en un ordenador configurado en oscuro el navegador pinta EN OSCURO lo que él controla aunque la página sea blanca: la barra de desplazamiento, los campos de formulario, los desplegables y el fondo que asoma al rebotar el scroll. La página salía clara y el marco alrededor, negro. */ color-scheme: light; /* El color con que el navegador pinta lo seleccionado y las casillas también sale de los ajustes del sistema si no se fija aquí. */ accent-color: var(--acento); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* la cabecera fija y el índice de la carta no tapan las anclas */ scroll-padding-top: calc(var(--alto-cabecera) + var(--alto-indice) + 12px); } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--cuerpo); /* ⚠️ En píxeles y no con la variable, como estaba desde el principio: así el cuerpo base no depende de nada. Pero es EL MISMO PAPEL que `--t-cuerpo`, así que los dos números cambian juntos o se abre otra vez la brecha de cuerpos distintos para lo mismo. */ font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { max-width: 100%; display: block; height: auto; } a { color: inherit; text-underline-offset: .22em; } ::selection { background: var(--acento); color: #fff; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .salto-contenido { position: absolute; left: -9999px; background: var(--acento); color: #fff; padding: 12px 20px; z-index: 100; } .salto-contenido:focus { left: 12px; top: 12px; } .contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); } /* ── Tipografía ────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--titulo); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; margin: 0; text-wrap: balance; } /* ⭐ LA ESCALA, POR DEFECTO — Carlos, 2026-08-18 ===================================================================== Hasta hoy esta regla NO daba tamaño, así que un encabezado al que nadie hubiera puesto una clase caía en el tamaño del NAVEGADOR (1.5em para un h2) y se salía de la escala sin que se notara. Así estaban: · /groups/ «Exclusive villas» y el de contacto → 25,5px · /reservations/ «Hours» y «Address» → 13,1px Ninguno de los dos tenía una sola línea de CSS propia. Ahora el que no diga nada sale ya en la escala de la casa, y el que necesite otra cosa la pide con su clase — que es como debe ser. ⚠️ El h1 se queda fuera a propósito: los suyos ya los ponen el hero y el banner, y meterlo aquí lo dispararía a `--t-titular`. ⚠️ Los h2 de reservaciones son un caso aparte y lo dicen ellos mismos con su clase: van de rótulo, no de titular (ver `.reservas h2`). */ h2 { font-size: var(--t-seccion); } h3 { font-size: var(--t-tarjeta); } h4 { font-size: var(--t-sub); } p { margin: 0 0 1em; max-width: var(--medida); } /* ── VIUDAS ──────────────────────────────────────────────────────── ⭐ LEY DE LA CASA (Carlos, 2026-08-17): en ninguna parte de la web puede quedar una palabra sola en la última línea. Primera capa, la barata: `text-wrap: pretty` le pide al navegador que reparta las líneas para que la última no se quede huérfana. Cubre todo el texto corrido de golpe, incluidos los textos que vienen de la base de datos y que nadie va a repasar a mano. ⚠️ NO BASTA SOLA: es una petición, no una garantía, y los navegadores viejos la ignoran. La segunda capa —`sin_viuda()` en `partials/init.php`, que cose las dos últimas palabras con un espacio duro— es la que asegura los textos que sí controlamos. Las dos juntas. Se mide con `_herramientas/buscar-viudas.js`, que recorre las 23 rutas en tres anchos y cuenta las que quedan. */ p, li, figcaption, blockquote, dd, dt, address, .plato__desc, .tarjeta__extracto, .blog-home__titulo, .tarjeta__titulo { text-wrap: pretty; } /* El rótulo pequeño de sección. Se usa con cuentagotas: si aparece encima de cada bloque, deja de significar nada. */ .rotulo { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--acento-tinta); margin: 0 0 .9em; } /* ── Botones ───────────────────────────────────────────────────────── */ .boton { display: inline-block; font-family: var(--titulo); font-size: var(--t-boton); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 15px 30px; border: 1px solid currentColor; color: var(--texto); background: transparent; white-space: nowrap; transition: background .22s var(--curva-color), color .22s var(--curva-color), border-color .22s var(--curva-color), transform .16s var(--curva); } .boton:hover { background: var(--texto); color: var(--fondo); } .boton:active { transform: translateY(1px); } /* El botón principal: el NARANJA DE ATARDECER, con texto BLANCO. ⚠️ Cuando el acento era dorado, encima iba tinta oscura. Con la terracota del PSD eso ya no vale: un marrón sobre terracota da 1,8:1. El blanco da 5,20:1, que es lo único que cumple sobre aquel relleno. ⭐ 2026-08-21: el relleno pasa a `--boton` (#c1571a). El blanco sigue siendo el que va encima —4,50:1—, y el borde es el tono hondo, que es lo que dibuja el botón contra el papel arena. */ .boton--principal { background: var(--boton); border-color: var(--boton-borde); color: var(--boton-tinta); } .boton--principal:hover { background: var(--boton-honda); border-color: var(--boton-honda); color: #fff; } /* Sobre las secciones oscuras el botón de línea cambia de tinta. Sin esto hereda la tinta del modo claro y queda invisible sobre el azul. */ /* Sobre la terracota del cierre el botón va en blanco, y el principal se invierte a marrón hondo, que es lo que más resalta ahí. */ .cierre-carta .boton { color: #fff; border-color: rgb(255 255 255 / .7); } .cierre-carta .boton:hover { background: #fff; color: var(--acento-tinta); border-color: #fff; } /* ⛔ Este botón era `#4a3125` sobre terracota: **2.3:1** de contraste contra su propia banda. Se leía como un bloque plano pegado al fondo, no como un botón. Carlos, 2026-08-14: «se pierde el estilo del botón». El crema de la paleta da 4.24 contra la banda y 6.32 con su texto dentro — casi el doble por fuera y muy holgado por dentro. Es además lo que ya hacía el `:hover` de los botones de línea de esta sección. */ .cierre-carta .boton--principal { background: var(--crema); border-color: var(--crema); color: var(--acento-tinta); margin-top: clamp(18px, 3vh, 30px); /* aire propio: no lo heredaba de nadie */ } .cierre-carta .boton--principal:hover { background: #fff; border-color: #fff; color: var(--acento-tinta); } /* ⭐ EL BOTÓN NARANJA SOBRE LA ESCENA OSCURA DE GRUPOS ===================================================================== Carlos, 2026-08-21: «igual al de Book a table», así que aquí también va el relleno naranja. Pero el naranja contra el marrón del velo da **1,03:1**: el botón existía y no se veía, que es justo lo que este sitio no hace. Lo que lo dibuja es un borde CLARO —6,6:1 contra el velo—, no un cambio de relleno. El color se respeta; lo que se añade es el contorno que le faltaba. */ .grupos-home__texto .boton--principal { border-color: var(--crema); } .grupos-home__texto .boton--principal:hover { background: var(--boton-honda); border-color: #fff; } /* El botón CLARO: para las secciones oscuras, donde el relleno terracota se apaga contra el velo. Papel de la casa y tinta encima — el mismo contraste que un botón normal, pero invertido. */ .boton--claro { background: var(--crema); border-color: var(--crema); color: var(--tinta); } .boton--claro:hover { background: #fff; border-color: #fff; color: var(--acento-tinta); } /* ── Cabecera ──────────────────────────────────────────────────────── */ .cabecera { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .35s var(--curva), border-color .35s var(--curva); border-bottom: 1px solid transparent; } /* La cabecera es del color del papel, como el resto del sitio. Para eso el logo tiene una versión oscura: el original es blanco y sobre papel claro desaparecía. */ .cabecera { background: var(--fondo); border-bottom-color: var(--borde); } .cabecera.solida { background: var(--fondo); box-shadow: 0 1px 0 var(--borde); } /* ── La cabecera sobre el hero de la portada ──────────────────────── Regla de la casa: la portada abre con el vídeo ocupando el 100% de la pantalla, y la cabecera flota encima sin caja para no partirlo. Es lo que ya hacen Señor Frog's y Nicoletta. Mientras flota, el logo es el BLANCO y la tinta del menú es blanca; en cuanto se baja de 40 px entra `.solida` y todo vuelve al papel y al logo oscuro. Las dos versiones del logo viven en el HTML: cambiarlas por JS haría parpadear la imagen en cada scroll. La legibilidad no la da una cortinilla plana —eso mataría el vídeo— sino el degradado de `.hero--video::after`, oscuro sólo en la franja de arriba, que es justo donde vive este menú. */ /* ⛔ NADA DE CAJA DETRÁS DE LA CABECERA EN LA PORTADA. Hubo aquí un velo azul translúcido con desenfoque, al estilo del pill rojo de Señor Frog's. Se quitó: por muy suave que fuera, se leía como una caja gris pegada encima del vídeo y partía la imagen en dos. La legibilidad se resuelve sin caja, con dos cosas que no se ven: · el viñeteado de arriba del hero (`.hero--video::after`), que es un degradado continuo desde el borde de la pantalla y se lee como fotografía, no como interfaz; · una sombra en la propia letra, que es lo que la despega del fondo cuando el fotograma es claro. Las dos juntas, y ninguna dibuja un contorno. */ :is(.pagina-home, .con-banner) .cabecera:not(.solida) { background: transparent; border-bottom-color: transparent; box-shadow: none; } /* ⚠️ `.cabecera__grupos` YA NO ESTÁ AQUÍ. Estas tres reglas pintan de blanco y sombrean lo que es texto suelto sobre el vídeo; desde el 2026-08-21 ese botón lleva relleno naranja y letra blanca propias, y heredar de aquí le borraba el color y le metía sombra en la letra. */ :is(.pagina-home, .con-banner) .cabecera:not(.solida) .nav__enlace, :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__idioma, :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__marca { text-shadow: 0 1px 10px rgba(10, 20, 28, .75), 0 1px 2px rgba(10, 20, 28, .5); } /* El logo no es texto: se le da la misma sombra por filtro. */ :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__marca { filter: drop-shadow(0 1px 10px rgba(10, 20, 28, .75)) drop-shadow(0 1px 2px rgba(10, 20, 28, .5)); } /* Sobre el vídeo, el wordmark se pinta en blanco. */ :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__marca { background-color: #fff; } :is(.pagina-home, .con-banner) .cabecera:not(.solida) .nav__enlace, :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__idioma { color: #fff; } :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__idioma { border-color: rgba(255,255,255,.55); } :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__idioma:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); } :is(.pagina-home, .con-banner) .cabecera:not(.solida) .cabecera__hamburguesa span { background: #fff; } .cabecera__interior { max-width: var(--ancho); margin: 0 auto; padding: 6px var(--aire); /* la mitad del aire de antes (eran 12) */ display: flex; align-items: center; gap: 10px; /* ⚠️ El mínimo baja de 68 a 44 px porque si no, no serviría de nada recortar el aire: con 68 de mínimo el alto lo mandaba esta línea y no el contenido. 44 px es la zona táctil mínima, por debajo de eso los enlaces dejan de poder pulsarse con el pulgar. */ min-height: 44px; /* Por encima del velo de la portada, que se pinta en el ::before. */ position: relative; z-index: 1; } /* ⚠️ En escritorio la cabecera va A TODO EL ANCHO con 60 px de aire fijo, no metida en la caja de 1240 px del resto del sitio. Lo pidió Carlos el 2026-08-11. Consecuencia buscada: el logo YA NO queda alineado en vertical con los titulares de las secciones de abajo, que siguen dentro de la caja centrada. En pantallas anchas la diferencia es grande —a 1920 px los titulares empiezan a 340 px del borde y el logo a 60—, así que si algún día se busca esa alineación, esto es lo que hay que revertir. En móvil no cambia nada: los 22 px de `--aire` de siempre. */ @media (min-width: 900px) { /* Tres zonas: logo a la izquierda, el menú CENTRADO y las acciones (idioma + reservar) a la derecha. Va en rejilla de `1fr auto 1fr` y no en flex con márgenes automáticos porque así el menú queda en el centro REAL de la pantalla. Con flex quedaría centrado entre el logo y el botón, que miden distinto, y se vería descuadrado hacia un lado. `justify-self` en los extremos evita que el enlace del logo estire su zona clicable por toda la columna. */ .cabecera__interior { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; max-width: none; padding: 7px 60px; /* la mitad del aire de antes (eran 14) */ } .cabecera__logo { justify-self: start; } .cabecera__nav { justify-self: center; margin-left: 0; } .cabecera__acciones { justify-self: end; margin-left: 0; } } /* El wordmark, pintado con máscara. La tinta la pone `background-color`: oscura sobre papel, blanca sobre el vídeo de la portada. `aspect-ratio` con las medidas reales del archivo (2513×579) reserva el alto desde el primer pintado, así que la cabecera no salta. Tamaño: un 30 % por debajo del primer montaje (eran 150/180 px), a petición de Carlos el 2026-08-11. */ .cabecera__marca { display: block; width: 105px; aspect-ratio: 2513 / 579; background-color: var(--texto); /* ⛔ RUTA RELATIVA, NO ABSOLUTA. Esto decía `/assets/img/...` y el logo DESAPARECÍA cuando el sitio no vive en la raíz del dominio —Carlos lo subió a `157.230.218.127/fredsnewweb/` el 2026-08-21 y la cabecera salió sin logo—. El filtro `iniciar_base_url()` arregla las rutas absolutas del HTML, pero NO entra en los archivos CSS: éstos se sirven tal cual. Desde `/assets/css/` la imagen está en `../img/`, y eso vale igual en la raíz que en una subcarpeta, sin depender de ningún filtro. */ -webkit-mask: url("../img/marca/freds-wordmark.png") no-repeat center / contain; mask: url("../img/marca/freds-wordmark.png") no-repeat center / contain; } @media (min-width: 900px) { .cabecera__marca { width: 126px; } } .cabecera__nav { display: none; margin-left: auto; } .nav { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; } .nav__enlace { font-family: var(--titulo); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; /* 44px de alto: es la zona de toque mínima cómoda, y en escritorio además ensancha el blanco de la barra. */ padding: 12px 0; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid transparent; transition: border-color .25s var(--curva), color .25s var(--curva); } .nav__enlace:hover { color: var(--acento-tinta); border-bottom-color: var(--acento); } .nav__item--submenu { position: relative; } .nav__submenu { /* ⚠️ Sin `min-width: 190px` (2026-09-15): con los enlaces a 18 px del filo izquierdo, la caja dejaba 103 px vacíos a la derecha de «Food Menu». Ahora se ciñe a su enlace más largo y el aire es igual a los dos lados. */ position: absolute; top: 100%; left: -22px; width: max-content; list-style: none; margin: 0; padding: 10px 0; background: var(--fondo-alto); border: 1px solid var(--borde); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s var(--curva), transform .22s var(--curva), visibility .22s; } .nav__item--submenu:hover .nav__submenu, .nav__desplegable[aria-expanded="true"] + .nav__submenu { opacity: 1; visibility: visible; transform: none; } .nav__submenu a { display: block; padding: 9px 22px; text-decoration: none; font-size: .88rem; } .nav__submenu a:hover { background: var(--fondo-hondo); color: var(--acento-tinta); } .cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: 10px; } .cabecera__nav + .cabecera__acciones { margin-left: 0; } .cabecera__idioma { font-family: var(--titulo); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-decoration: none; padding: 10px; border: 1px solid var(--borde); transition: border-color .25s var(--curva), color .25s var(--curva); } .cabecera__idioma:hover { border-color: var(--acento); color: var(--acento-tinta); } /* El botón de Reservar está SIEMPRE visible, también en móvil: es la acción que da de comer al restaurante. Lo que cambia es la etiqueta. */ .cabecera__reserva { display: inline-block; padding: 12px 16px; } @media (min-width: 900px) { .cabecera__reserva { padding: 13px 24px; } } .cabecera__reserva-largo { display: none; } .cabecera__reserva-corto { display: inline; } .cabecera__hamburguesa { width: 40px; height: 44px; margin-right: -8px; background: none; border: 0; cursor: pointer; display: grid; gap: 5px; place-content: center; padding: 0; } .cabecera__hamburguesa span { display: block; width: 22px; height: 2px; background: var(--texto); transition: transform .3s var(--curva), opacity .2s; } .cabecera__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cabecera__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .cabecera__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Menú móvil ────────────────────────────────────────────────────── ⚠️ 2026-08-13 · ENTRA, no aparece de golpe. Antes pasaba de `hidden` a visible sin transición: un salto seco en el elemento más usado del móvil, y la hamburguesa que lo abre sí morphea. Ahora baja desde el filo de la cabecera, que es de donde viene. ⚠️ Se anima con `@starting-style`, no con `@keyframes`: así el estado se puede RETOMAR a mitad. Con keyframes, cerrar antes de que termine de abrirse reinicia la animación desde cero y da un tirón. ⚠️ `display` va en `transition-behavior: allow-discrete`, porque el panel usa el atributo `hidden`: sin eso el navegador lo quita del layout antes de que la salida haya terminado. */ .menu-movil { /* ⭐ NO LLEGA AL FILO IZQUIERDO. Deja 52px por los que se sigue viendo la página de debajo, y eso es lo que hace que el menú se lea como una hoja que se ha puesto ENCIMA y no como otra pantalla. Es lo que hace el de Frog's, y funciona por el mismo motivo. */ position: fixed; inset: var(--alto-cabecera) 0 0 52px; z-index: 45; /* Marrón de la casa: el papel arena no valía porque es el mismo color que la página, y el menú no se despegaba de lo que hay detrás. */ background: var(--marron); padding: 22px 26px calc(18px + var(--hueco-barra, 144px)); overflow-y: auto; box-shadow: -18px 0 40px rgba(26, 16, 10, .34); opacity: 1; transform: translateX(0); transition: opacity .22s var(--curva-color), transform .3s var(--curva), display .3s allow-discrete; } .menu-movil[hidden] { display: none; opacity: 0; transform: translateX(14px); } @starting-style { .menu-movil:not([hidden]) { opacity: 0; transform: translateX(14px); } } @media (prefers-reduced-motion: reduce) { .menu-movil, .menu-movil[hidden] { transform: none; } } /* ── El interruptor de idioma, arriba ─────────────────────────────── Antes era el último elemento de la lista, entre «Blog» y el final: un idioma no es un destino más, es un interruptor, y ahí abajo ni se veía. */ .menu-movil__idiomas { display: flex; gap: 8px; margin-bottom: 20px; } /* ⚠️ `.menu-movil .menu-movil__idioma`, no la clase a secas: si no, la regla de los ENLACES del menú —que es `.menu-movil a`, y pesa más que una clase suelta— le imponía su cuerpo de 1.24rem y sus versalitas. Se veía clarísimo: el «EN» pequeño dentro de su píldora y el «ES» enorme saliéndose de la suya. */ .menu-movil .menu-movil__idioma { font-family: var(--titulo); font-size: .72rem; font-weight: 700; letter-spacing: .16em; min-width: 46px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / .34); /* ⚠️ .80, no .72: sobre el marrón del panel, .72 se queda en 4,35:1 y el mínimo es 4,5. Con .80 sube a 4,95. Medido, no elegido a ojo. */ color: rgb(255 255 255 / .80); text-decoration: none; } .menu-movil .menu-movil__idioma.es-actual { background: var(--boton); border-color: var(--boton-borde); color: #fff; } .menu-movil .menu-movil__idioma:hover { padding-left: 0; } .menu-movil ul { list-style: none; margin: 0; padding: 0; } /* ── Los enlaces: peso de titular, no de párrafo ──────────────────── ⚠️ VAN EN VERSALITAS. En minúsculas y a 1.1rem —como estaban— los ocho pesaban lo mismo que el texto corrido del sitio y la lista no tenía jerarquía ninguna. */ .menu-movil a { /* ⚠️ 12px de aire y 1.14rem, no 14 y 1.24: con los ocho enlaces, las tres cartas y el botón de reservar, la lista no cabía de una vez en una pantalla de 844 y el botón quedaba escondido detrás de la barra de abajo. Medido a 390×844. */ display: block; padding: 12px 0; text-decoration: none; font-family: var(--titulo); font-size: 1.14rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgb(255 255 255 / .14); transition: color .18s var(--curva-color), padding-left .18s var(--curva); } .menu-movil a:hover, .menu-movil a:active { color: var(--boton); padding-left: 6px; } /* Las tres cartas cuelgan de «Menú»: más pequeñas, y con un filete del color de la casa que dice de quién dependen. */ .menu-movil__hijo a { font-size: .88rem; font-weight: 500; letter-spacing: .1em; /* ⚠️ .80: con .74 el nombre de la carta daba 4,48:1 sobre el panel, dos centésimas por debajo del mínimo. */ color: rgb(255 255 255 / .80); padding-left: 16px; margin-left: 2px; border-left: 2px solid var(--boton); border-bottom-color: rgb(255 255 255 / .08); } /* La acción, al final del todo y a todo el ancho. */ .menu-movil__reservar { display: block; text-align: center; margin-top: 24px; } main { padding-top: var(--alto-cabecera); } .pagina-home main { padding-top: 0; } /* la portada empieza bajo la cabecera */ /* ===================================================================== PORTADA ===================================================================== ⭐ LA REGLA DE LA CASA: la portada abre al 100%. Todas las webs de Grupo Anderson's arrancan con el vídeo ocupando la pantalla entera. Nada de heros partidos en dos columnas: el 50/50 no se usa para abrir. Comprobado en Señor Frog's (`.hero{height:100dvh}` con el vídeo en `object-fit:cover`) y en Nicoletta (slider a ancho completo). En los dos, además, el hero NO lleva titular encima: es media pura, y la primera palabra de la página vive en la banda que viene justo debajo. Aquí se hace igual. Eso resuelve de paso el problema que tenía el hero partido: no hay que proteger ningún titular del vídeo claro, porque no hay titular. Lo único que se superpone es la cabecera, y de eso se encarga la franja de arriba del degradado. ===================================================================== */ /* ── La apertura: el vídeo se retira y el texto ocupa su sitio ────── El vídeo se queda pegado arriba y la banda azul sube por encima. Lo hace `position: sticky` de CSS, no GSAP: el `pin` inyecta un `pin-spacer` que descoloca todo lo que venga después. ⛔ Nada de `overflow` en `.apertura` — anclaría el sticky a este contenedor en el Safari de iPhone. */ .apertura { position: relative; background: var(--marron); } .hero--video { position: sticky; top: 0; width: 100%; /* ⛔ `lvh`, NI `dvh` NI `svh`. Vale para TODAS las pantallas pegadas del sitio (portada, banners, propuesta, Las Villas, pases, grupos). · 2026-09-23 · Con `dvh` el vídeo cambiaba de alto al plegarse la barra de Safari —justo al empezar a bajar— y se re-encuadraba de golpe. Se pasó a `svh`. · 2026-09-28 · Carlos, con captura del iPhone: con la barra PLEGADA, `svh` (el alto con la barra desplegada) se quedaba ~80 px corto y asomaba una franja marrón vacía bajo la escena de Las Villas. `lvh` es el alto con la barra plegada: tapa siempre la pantalla y tampoco cambia con la barra. Con la barra desplegada, lo que sobra queda debajo de ella, fuera de la vista. En escritorio no hay barra que plegar: lvh = svh = vh. Es el mismo alto que mide `altoPantalla()` en sitio.js. Los RIELES siguen en `svh`. */ height: 100lvh; min-height: 520px; /* en apaisado de móvil, que no quede una ranura */ overflow: hidden; background: var(--marron); /* mientras el vídeo carga, azul, nunca blanco */ } .hero__media { position: absolute; inset: 0; } .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; /* Se va quedando atrás mientras la banda sube y se desenfoca, como si la vista se fuera del vídeo al texto. `--retirada` la publica el JS entre 0 y 1. ⚠️ El 1.12 de base no es estético, es margen de seguridad. Un `blur` difumina TAMBIÉN el borde de la imagen: sin escalar de más, por los cuatro lados asomaría un halo del fondo. La regla es margen ≥ 2× el radio del desenfoque, y en móvil ese margen es el más apretado (12 % de 390 px = 23 px de sobra por lado, para 8 px de blur). Si algún día se sube el blur, hay que subir esto también. */ transform: scale(1.12) translateY(calc(var(--retirada, 0) * -4%)); filter: blur(calc(var(--retirada, 0) * 8px)); will-change: transform, filter; } @media (min-width: 900px) { /* En escritorio hay margen de sobra para desenfocar más. */ .hero__video { filter: blur(calc(var(--retirada, 0) * 14px)); } } /* El apagado. Cuanto más sube la banda, más se hunde el vídeo en el azul de la casa. No llega a 1: el vídeo nunca desaparece del todo, sigue intuyéndose detrás. */ .hero--video::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--marron); opacity: calc(var(--retirada, 0) * .78); } .hero--video::after { z-index: 2; } /* La banda pasa POR ENCIMA del vídeo pegado. */ .bienvenida { position: relative; z-index: 3; } /* Las piezas del texto entran escalonadas cuando la banda llega. El retardo lo pone `--n` en cada una desde el JS. Igual que el resto del sitio, sólo esconde si hay JavaScript que pueda devolverlas. */ .js .bienvenida__pieza { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--n, 0) * .09s); } .js .bienvenida.visible .bienvenida__pieza { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .hero__video { transform: none; filter: none; } .hero--video::before { opacity: 0; } .js .bienvenida__pieza { opacity: 1; transform: none; transition: none; } } /* La única capa sobre el vídeo. Oscura arriba —donde vive el menú—, completamente limpia en el centro para que el vídeo se vea puro, y un punto abajo para que el vídeo no choque a hueso con la banda que sigue. `pointer-events: none` porque encima hay enlaces. ⚠️ La franja de arriba SÍ es lo que hace legible el menú, desde que se quitó la caja de la cabecera. Es larga a propósito —muere al 34 % de la pantalla— porque así se lee como el viñeteado de una fotografía y no como un rectángulo puesto encima. Acortarla la convierte en caja; aclararla deja el menú por debajo del mínimo de contraste sobre los fotogramas claros. */ .hero--video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, /* Sin la franja oscura de arriba (2026-10-09, «quitar fade de header»): el menú se sostiene con la sombra de su propia letra. */ rgba(124, 83, 62, 0) 0%, rgba(124, 83, 62, 0) 70%, rgba(124, 83, 62, .40) 100%); } /* ── La banda de bienvenida ───────────────────────────────────────── Aquí es donde empieza a hablar la web: el rótulo, el titular, la entrada y las dos acciones. Es el sitio que en Señor Frog's ocupa la banda roja del WELCOME. Va sobre el azul de la laguna para que el corte con el vídeo sea un golpe de marca y no un desvanecido. */ /* ── La banda de bienvenida, en cristal ───────────────────────────── No es un bloque opaco: es un cristal esmerilado por el que se sigue viendo el vídeo, ya desenfocado y apagado por la retirada. El azul es el de la marca (`--pizarra`), no un negro — Fred's no tiene negro en su paleta. ⚠️ El azul sólido vive en `.apertura`, no aquí. Es el respaldo: si el vídeo no llegara a estar detrás —no ha cargado, el `sticky` no se aplica, el navegador no soporta `backdrop-filter`— el texto blanco quedaría sobre el papel blanco del body y no se leería nada. Con el respaldo, lo peor que pasa es que se vea el azul plano de siempre. */ .bienvenida { position: relative; color: var(--sobre-hondo); /* Cuánto tarda el cristal en formarse. El aire de arriba se calcula a partir de aquí para que el texto empiece SIEMPRE cuando el cristal ya está hecho: si el rótulo cayera dentro del fundido, se leería sobre el vídeo a medio tapar. Cambiar el fundido mueve el aire solo. */ --fundido: 200px; padding-top: calc(var(--fundido) + 24px); padding-bottom: clamp(56px, 7vw, 96px); } @media (min-width: 900px) { .bienvenida { --fundido: 320px; padding-top: calc(var(--fundido) + 40px); } } /* ⚠️ El cristal vive en esta capa y NO en el fondo de la sección, por la máscara: `mask-image` afecta también a los hijos, así que puesta en la sección se comería el texto por arriba. Aquí sólo desvanece el cristal. El borde de arriba nace transparente y el cristal se va formando a lo largo de `--fundido`, para que la banda emerja del vídeo en vez de cortarlo con un canto recto. ⚠️ Los pasos intermedios NO son decorativos: un degradado de dos paradas sube de golpe por el medio y se ve una banda fantasma justo ahí. Con estas cuatro paradas la curva arranca lenta y cierra suave, que es lo que hace que el cristal parezca «ir llegando». */ .bienvenida::before { content: ""; position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--marron) 78%, transparent); /* ⚠️ 18px, no 22. El techo recomendado para un blur que se anima son 20px: por encima cuesta caro, y aquí el elemento ocupa la pantalla entera y su máscara se mueve con el scroll. En el Safari de iPhone es donde primero se nota. A simple vista 18 y 22 no se distinguen. */ -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); --curva-fundido: linear-gradient(180deg, transparent 0, rgba(0,0,0,.07) calc(var(--fundido) * .20), rgba(0,0,0,.26) calc(var(--fundido) * .44), rgba(0,0,0,.58) calc(var(--fundido) * .66), rgba(0,0,0,.86) calc(var(--fundido) * .86), #000 var(--fundido)); -webkit-mask-image: var(--curva-fundido); mask-image: var(--curva-fundido); } /* ── La SALIDA de la banda ───────────────────────────────────────── ⚠️ 2026-08-14 · Se veía una línea justo donde acaba la banda y empieza la escena de la propuesta. Medido: arriba #7d513a y abajo #7c533e. La diferencia es de cuatro puntos, pero es un corte ABRUPTO sobre un plano liso, y eso el ojo lo lee como una raya. El porqué: esta banda es un CRISTAL translúcido sobre el vídeo (`--marron` al 78 % más `backdrop-filter`), así que su marrón real depende del fotograma que haya detrás y nunca coincide con el marrón puro donde arranca el degradado de la escena siguiente. ⭐ No se puede igualar un color que cambia con el vídeo: lo que se hace es LLEVAR la banda al marrón exacto en sus últimos píxeles. Así los dos lados de la costura llegan al mismo `#7c533e` y no hay nada que empalmar. ⚠️ Va en `::after` y en `z-index: 0`, por encima del cristal y por debajo del contenido, que vive en `z-index: 1`. */ .bienvenida::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 0; height: clamp(90px, 13vh, 160px); pointer-events: none; background: linear-gradient(180deg, rgb(124 83 62 / 0) 0%, rgb(124 83 62 / .28) 34%, rgb(124 83 62 / .62) 62%, rgb(124 83 62 / .88) 84%, rgb(124 83 62 / 1) 100%); } /* El contenido, por encima del cristal y fuera de su máscara. */ .bienvenida__interior { position: relative; z-index: 1; } .bienvenida__interior { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); } .bienvenida .hero__marca { color: var(--crema); } .bienvenida .hero__titulo { /* El mínimo del clamp lo fija el caso más apretado: el titular INGLÉS en un móvil de 390 px, que es el texto más largo en el hueco más estrecho. Con 1,55rem caía en tres líneas ahí. */ font-size: clamp(1.38rem, 3.4vw, 2.125rem); /* techo 34px, a peticion de Carlos */ color: #fff; text-transform: uppercase; /* ⚠️ La medida está calculada para que el titular caiga en DOS LÍNEAS en los dos idiomas, que es como lo quiere Carlos. En mayúsculas ocupa bastante más ancho que en caja baja: el inglés («ENJOY THE BEST SEAFOOD AT FRED'S CANCUN») son 39 caracteres y con la medida anterior de 20ch caía en tres. `text-wrap: balance` reparte las dos líneas para que queden parecidas en vez de dejar una larga y una corta. Si algún día cambia el titular en `_datos/contenido.php`, hay que mirar que siga cayendo en dos. */ max-width: 24ch; text-wrap: balance; letter-spacing: -.005em; line-height: 1.08; } .bienvenida .hero__bajada { font-size: var(--t-sub); color: rgba(244, 241, 234, .82); /* ⚠️ Sin márgenes. Los tenía de cuando debajo iban los botones de reservar y carta; al retirarse (2026-08-11) ese hueco de 2em seguía ahí y descuadraba el nivelado: la columna quedaba centrada, pero el texto visible aparecía 9 px más alto que el titular. */ margin: 0; max-width: 52ch; } /* ── Los párrafos de la portada, justificados ─────────────────────── ⛔ NADA DE PARTIR PALABRAS. Se probó `hyphens: auto` —que es lo que normalmente acompaña al justificado para que no se abran ríos de blanco— y Carlos no quiere ver ni un guion de corte en la web (2026-08-11). Así que el justificado va sin separación silábica y el aire sobrante se reparte entre las palabras. Para que ese aire no cante, el ancho de línea es generoso: cuantos más caracteres caben por línea, menos se nota el estiramiento. Si algún párrafo queda con huecos feos, la salida es ensanchar su medida, NO volver a poner guiones. */ /* ⚠️ NO entran aquí las secciones con el texto CENTRADO —la propuesta culinaria y, desde el 2026-08-13, grupos—: justificar un párrafo centrado deja las líneas estiradas a ambos lados y la última suelta en medio. Grupos estuvo en esta lista mientras su texto iba a la izquierda. */ .pagina-home .bienvenida .hero__bajada { text-align: justify; hyphens: none; -webkit-hyphens: none; text-wrap: pretty; } .hero__acciones { display: flex; gap: 12px; flex-wrap: wrap; } /* Sobre el azul, el botón secundario va de filo blanco: el filo oscuro de siempre desaparecía. */ .bienvenida .boton:not(.boton--principal) { border-color: rgba(255,255,255,.6); color: #fff; } .bienvenida .boton:not(.boton--principal):hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; } .hero__marca { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--acento-tinta); margin: 0 0 1.5em; } /* Heros de las páginas interiores: sobrios, sin imagen. ⚠️ QUEDA SÓLO PARA EL 404. Todo lo demás lleva banner — ver abajo. */ .hero { padding: clamp(56px, 8vw, 104px) 0 clamp(32px, 4vw, 56px); max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); } .hero__titulo { font-size: var(--t-titular); } .hero__bajada { font-size: var(--t-sub); color: var(--texto-suave); margin-top: .9em; } /* ── EL SELLO DE OPENTABLE, ARRIBA A LA DERECHA ───────────────────── Carlos, 2026-08-20. Se trajo del sitio original, donde vive dentro del slider del hero a 150px pegado al filo derecho. ⚠️ Aquí la cabecera FLOTA sobre el vídeo, así que el sello arranca por debajo de ella (`--alto-cabecera` + aire) o se le mete debajo del menú. ⚠️ Y va por DEBAJO de la cabecera en `z-index`: si se pusiera encima, taparía los botones de reservar al abrir el menú de móvil. ⚠️ `pointer-events: none` — es un sello, no un control: que no robe el clic a nada de lo que hay detrás. */ .hero__sello { position: absolute; z-index: 3; top: calc(var(--alto-cabecera) + clamp(10px, 2vw, 26px)); right: clamp(var(--aire), 3.5vw, 52px); /* Carlos, 2026-09-14: «bájale 20%». Era clamp(84px, 10vw, 150px). */ width: clamp(67px, 8vw, 120px); height: auto; pointer-events: none; filter: drop-shadow(0 6px 18px rgb(30 18 12 / .28)); } .hero__antetitulo { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--acento-tinta); margin: 0 0 .8em; } .hero__dato { color: var(--texto-suave); font-size: var(--t-apoyo); } /* ===================================================================== EL BANNER DE LAS PÁGINAS INTERIORES ===================================================================== ⭐ LEY DE LA CASA (Carlos, 2026-08-17): TODA página lleva su banner, y debajo el titular escrito para SEO. Antes las interiores abrían con el h1 suelto sobre el papel y parecían a medio hacer. La anatomía es la MISMA que la portada, y por la misma razón: · la imagen manda sola, a sangre y sin texto encima (regla del grupo: media pura, nada de titulares sobre foto); · el titular vive en la banda que viene justo debajo, donde se lee siempre igual de bien pase lo que pase en la foto; · la cabecera flota encima sin caja, con su sombra de letra, y se vuelve sólida en cuanto se baja de 40 px. La diferencia con la portada: el banner no ocupa 100dvh sino algo más de medio alto, para que el titular y el arranque del contenido se vean sin tener que desplazar. Se afina en un solo sitio, `--alto-banner`. ===================================================================== */ /* ── LA APERTURA DE LAS INTERIORES ───────────────────────────────── La MISMA que la portada: la imagen se queda pegada y la banda del titular sube por encima. Antes cada interior tenía su propio hero estático y Carlos lo cortó en seco: «no puedes tener heros diferentes, todos con el efecto del hero del home». ⛔ Ningún ancestro con `overflow` (ni `clip`): eso ancla el sticky al ancestro en el Safari de iPhone y el efecto se rompe. Ya pasó en Señor Frog's y en la portada de este sitio. */ .banner-apertura { position: relative; background: var(--marron); } .banner { /* Abre al 100%, como manda la casa. */ position: sticky; top: 0; width: 100%; height: 100lvh; background: var(--marron); /* el color de espera mientras carga */ } .banner__media, .banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* El mismo viñeteado de arriba que la portada: oscurece SÓLO la franja donde vive el menú, y se lee como fotografía, no como interfaz. ⛔ Nada de cortinilla plana sobre toda la imagen. */ /* ⚠️ LOS VALORES DE ESTE DEGRADADO ESTÁN MEDIDOS, no elegidos a ojo. Con el primero que se puso (.55 arriba) el menú blanco caía a 2,8:1 sobre el punto más claro de los banners de laguna y cielo — por debajo del 4,5 que necesita. Medido con la cabecera oculta y buscando el peor píxel de la franja del menú en las ocho páginas. Si se cambia una foto de banner, se vuelve a medir. */ .banner::after { content: ''; position: absolute; inset: 0 0 auto 0; height: calc(var(--alto-cabecera) + 110px); background: linear-gradient(to bottom, rgba(18, 12, 8, .80), rgba(18, 12, 8, .62) 45%, rgba(18, 12, 8, .22) 78%, transparent); pointer-events: none; z-index: 1; } /* ── La banda del titular ──────────────────────────────────────────── */ /* ── LA BANDA: UN CRISTAL, NO UN BLOQUE ──────────────────────────── Carlos, 2026-08-17: «no veo los bloques totalmente marrones, en blur como en el hero». Tenía razón: la banda de la portada es un CRISTAL translúcido que se forma sobre el vídeo —marrón al 78 % más `backdrop-filter`— y las de las interiores eran marrón plano. Con el mismo movimiento y distinto material, se notaba que eran otra cosa. Aquí va la misma receta: el cristal en `::before` con máscara de fundido —para que se forme según sube, no de golpe— y el cierre en marrón puro en `::after`, para que la costura con lo que viene debajo no deje raya. ⚠️ 18px de desenfoque, no más: el techo de un blur que se mueve son ~20, y por encima se nota en el Safari de iPhone. Es el mismo valor que la portada. ⭐ Y el texto CENTRADO, como pidió Carlos. */ .banner-banda { position: relative; z-index: 3; color: var(--sobre-hondo); --fundido: clamp(120px, 18vh, 220px); padding-top: calc(var(--fundido) + clamp(16px, 2vw, 28px)); padding-bottom: clamp(52px, 7vw, 92px); text-align: center; } .banner-banda::before { content: ""; position: absolute; inset: 0; z-index: 0; /* ⚠️ 86 %, no el 78 % de la portada. Allí el cristal se forma sobre un VÍDEO oscuro; aquí, sobre fotos de mediodía —la laguna, el aula de Kids— que son mucho más claras. Medido en las ocho páginas con banner: al 78 % el texto blanco se quedaba entre 4,5 y 4,8:1, es decir, aprobando raspado y con algunas por debajo. Al 86 % el desenfoque se sigue viendo y el texto tiene margen. */ background: color-mix(in srgb, var(--marron) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); --curva-fundido: linear-gradient(180deg, transparent 0, rgba(0,0,0,.07) calc(var(--fundido) * .20), rgba(0,0,0,.26) calc(var(--fundido) * .44), rgba(0,0,0,.58) calc(var(--fundido) * .66), rgba(0,0,0,.86) calc(var(--fundido) * .86), #000 var(--fundido)); -webkit-mask-image: var(--curva-fundido); mask-image: var(--curva-fundido); } /* El cierre en marrón puro: el cristal depende de la foto que tenga detrás y nunca coincide con el marrón sólido de la sección siguiente. No se iguala un color que cambia — se lleva la banda al marrón exacto en sus últimos píxeles. */ .banner-banda::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 0; height: clamp(90px, 13vh, 160px); pointer-events: none; background: linear-gradient(180deg, rgb(124 83 62 / 0) 0%, rgb(124 83 62 / .28) 34%, rgb(124 83 62 / .62) 62%, rgb(124 83 62 / .88) 84%, rgb(124 83 62 / 1) 100%); } /* Sin `backdrop-filter` (navegadores viejos), el cristal se queda transparente y el texto caería sobre la foto: entonces manda el marrón sólido de siempre. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .banner-banda::before { background: var(--marron); } } /* Las piezas del texto entran escalonadas cuando la banda llega, igual que en la banda de bienvenida de la portada. El retardo lo pone `--n` desde el JS. Sólo se esconden si hay JavaScript que pueda devolverlas. */ .js .banner-banda__pieza { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--curva), transform .7s var(--curva); transition-delay: calc(var(--n, 0) * .09s); } .js .banner-banda.visible .banner-banda__pieza { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .banner-banda__pieza { opacity: 1; transform: none; transition: none; } } /* El contenido, por encima del cristal y fuera de su máscara. */ .banner-banda__interior { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); } /* ⚠️ `margin-inline: auto` — el antetítulo es un `

` y hereda el `max-width: var(--medida)` de todos los párrafos: 62ch, que a 11px son 494px. Con la banda centrada, su TEXTO salía centrado dentro de esa caja de 494, pero la caja seguía pegada a la izquierda. Se veía un eyebrow descolgado del titular. Lo mismo para el dato del pie. */ .banner-banda__antetitulo { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--crema); margin: 0 auto 1.1em; max-width: none; } /* ⚠️ A LA ESCALA DEL HOME (Carlos, 2026-08-17: «revisa los títulos de la página, que sean como los del home»). El h1 de la portada vive en la banda de bienvenida y mide 34px; éste estaba en 62 y hacía que cada interior pareciera de otro sitio. */ .banner-banda__titulo { font-size: var(--t-seccion); line-height: 1.05; max-width: 24ch; text-wrap: balance; margin: 0 auto; } .banner-banda__bajada { font-size: var(--t-sub); margin: 1em auto 0; max-width: 56ch; color: var(--crema); } .banner-banda__dato { margin: 1.4em auto 0; font-size: var(--t-apoyo); color: var(--crema); padding-top: 1.2em; border-top: 1px solid rgba(255, 255, 255, .22); display: table; /* se ajusta al texto y el `auto` lo centra */ } .banner-banda__acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.8em; justify-content: center; } /* Sobre el marrón, el botón secundario va de filo blanco (igual que en la banda de bienvenida: el filo oscuro de siempre desaparece). */ .banner-banda .boton:not(.boton--principal) { border-color: rgba(255,255,255,.6); color: #fff; } .banner-banda .boton:not(.boton--principal):hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; } /* ── SECCIONES EN BLANCO ──────────────────────────────────────────── El respiro del sitio. Se usan con cuentagotas y siempre PEGADAS a algo con materia —una escena oscura, una foto— para que el blanco se lea como aire y no como un hueco sin terminar. */ .claro { background: var(--fondo-blanco); } /* Sobre blanco, el filo de las tarjetas necesita un punto más de peso: el borde de arena se disolvía. */ .claro .tarjeta, .claro .prensa__nota { border-color: var(--linea); } /* La página con banner arranca pegada arriba, como la portada: la cabecera flota sobre la imagen en vez de empujarla. */ .con-banner main { padding-top: 0; } /* ⚠️ Aquí había un zoom de entrada de la imagen. Se retiró al pasar a la apertura de la portada: el gesto ya lo hace la banda subiendo, y dos movimientos a la vez en la primera pantalla se pisan. */ /* ── Bloques genéricos ─────────────────────────────────────────────── */ .bloque { padding-block: var(--hueco-bloque); } /* Las secciones de respiro no invierten el modo: cambian de papel, no de mundo. Arena en vez de blanco, y la misma tinta de siempre. */ .hondo { background: var(--fondo-hondo); color: var(--texto); } .hondo .rotulo { color: var(--acento-tinta); } .hondo p { color: var(--texto-suave); } /* La propuesta culinaria: una sola idea, ancha, sin adornos. */ /* ── La propuesta culinaria: escena en dos tiempos ────────────────── Primero se lee el titular solo, centrado. Al seguir bajando el titular sube, entra la descripción y el fondo cambia a la otra foto. Anatomía de siempre en este proyecto: .propuesta el RIEL. Alto y transparente: sólo mide el recorrido. .propuesta__pega la PANTALLA, pegada con `sticky`. Lleva el fondo. ⛔ Sin `pin` de GSAP: el `pin-spacer` que inyecta descoloca el start y el end de todo lo que venga después. ⛔ Ningún ancestro con `overflow`, o el `sticky` se ancla a él en el Safari de iPhone. `--p` la publica el JS de 0 a 1 a lo largo del riel. De ahí salen los tres momentos: `--sube` (el titular), `--desc` (la descripción) y `--fondo2` (el cruce de fotos). */ .propuesta { position: relative; height: 250svh; background: var(--marron); } /* ── La salida de la banda de bienvenida ──────────────────────────── El azul de la apertura moría en un canto recto contra la foto de esta escena y se veía la línea del corte. Aquí baja fundido. ⚠️ Va en el RIEL (`.propuesta`) y no en la pantalla pegada (`.propuesta__pega`): si estuviera dentro del `sticky` viajaría con él y el degradado se pasearía por toda la escena en vez de quedarse en la costura. `z-index: 2` lo pone por encima de la pantalla, que crea su propio contexto con `isolation`. ⚠️ Los alfas van explícitos hasta el cero (`rgb(124 83 62 / 0)`) y NO con la palabra `transparent`: en la interpolación, `transparent` es negro con alfa cero, y por el medio del degradado aparecería un velo gris sucio. Es el mismo azul de `--pizarra` escrito a pelo, como en el velo de aquí abajo. ⚠️ Las paradas intermedias no son adorno: con dos paradas la curva sube de golpe por el centro y se ve una banda fantasma justo ahí. */ .propuesta::before { content: ""; position: absolute; z-index: 2; pointer-events: none; inset: 0 0 auto 0; height: clamp(110px, 16vh, 220px); background: linear-gradient(180deg, rgb(124 83 62 / 1) 0%, rgb(124 83 62 / .94) 18%, rgb(124 83 62 / .74) 40%, rgb(124 83 62 / .42) 64%, rgb(124 83 62 / .14) 84%, rgb(124 83 62 / 0) 100%); } .propuesta__pega { position: sticky; top: 0; height: 100lvh; min-height: 520px; overflow: hidden; /* recorta el zoom de las fotos */ display: grid; place-items: center; isolation: isolate; } .propuesta__fondo { position: absolute; inset: 0; z-index: -2; } .propuesta__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Escalada de más para que el desplazamiento no descubra los bordes. */ transform: scale(1.1) translateY(calc(var(--p, 0) * -2.5%)); will-change: transform; } /* La segunda entra por encima. No se mueve sola: la cruza `--fondo2`. */ .propuesta__foto--segunda { opacity: var(--fondo2, 0); } /* ── LOS TRES TIEMPOS ─────────────────────────────────────────────── Carlos, 2026-08-17: «la foto bien sin overlay, luego blur la foto, luego el overlay y luego texto». El mismo esquema que Grupos. 0 → .16 la foto LIMPIA. Ni velo ni desenfoque. .14 → .46 el desenfoque y el velo, juntos. .42 → … el titular, y después la descripción. ⚠️ Los tramos se pisan a propósito: encadenados a tope se leen como tres pasos sueltos; solapados, como un solo movimiento. `--vela` es el mando de los dos primeros tiempos. Se calcula en CSS a partir de `--p`, que ya publica el JS: no hace falta tocar el motor. */ .propuesta__pega { --vela: clamp(0, calc((var(--p, 1) - .14) * 3.1), 1); } .propuesta__foto--velada { opacity: var(--vela); } /* La gemela de la SEGUNDA foto sólo aparece cuando el cruce ya ha ocurrido: si no, las dos borrosas se sumarían y el fondo se iría a plano. */ .propuesta__foto--velada2 { opacity: calc(var(--vela) * var(--fondo2, 0)); } /* ⚠️ Velo uniforme, no lateral. Con el texto centrado no hay un «lado» libre donde apoyarlo: la protección tiene que cubrir el centro. Se queda en .52 —lo justo para leer— y las esquinas de arriba y abajo suman un punto más, que es donde el cielo quema. */ .propuesta__pega::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(124, 83, 62, .34) 0%, rgba(124, 83, 62, 0) 30%, rgba(124, 83, 62, 0) 70%, rgba(124, 83, 62, .38) 100%), rgba(124, 83, 62, .68); /* El velo entra con el desenfoque, no está desde el principio. */ opacity: var(--vela, 1); } .propuesta__interior { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); width: 100%; } /* Centrado: el titular vive en mitad de la pantalla hasta que sube. ⚠️ `position: relative` porque la descripción cuelga de aquí en absoluto: si estuviera en el flujo normal, ocuparía su hueco desde el principio —aunque sea invisible— y empujaría al titular hacia arriba, que dejaría de estar centrado en el primer tiempo. */ .propuesta__texto { position: relative; /* Ancho para que el titular quepa en UNA línea en escritorio: en mayúsculas a 34 px, «NUESTRA PROPUESTA CULINARIA» pide unos 620 px. En móvil no cabe de ninguna manera y cae en dos, que es lo normal. */ max-width: 62ch; margin-inline: auto; text-align: center; } .propuesta h2 { font-size: clamp(1.38rem, 3.4vw, 2.125rem); /* techo 34px, como el de arriba */ text-transform: uppercase; letter-spacing: -.005em; line-height: 1.08; color: #fff; /* ⚠️ El titular entra DESPUÉS del velo: sobre la foto limpia caería encima de la madera clara y no se leería. Empieza en .42, cuando el velo ya está hecho (termina en .46). */ opacity: clamp(0, calc((var(--p, 1) - .42) * 5), 1); /* Sube al llegar el segundo tiempo. El desplazamiento es el que deja sitio a la descripción sin que el bloque se descentre del todo. */ transform: translateY(calc(var(--sube, 0) * -1 * clamp(38px, 7vh, 74px))); } .propuesta__desc { position: absolute; left: 0; right: 0; top: calc(100% + clamp(16px, 2.4vh, 28px)); opacity: var(--desc, 0); transform: translateY(calc((1 - var(--desc, 0)) * 26px)); } .propuesta__desc p { /* Medida calculada para que la descripción caiga en TRES líneas en escritorio. Si se cambia el texto en `_datos/contenido.php`, hay que mirar que siga cuadrando. */ max-width: 64ch; margin: 0 auto; font-size: var(--t-sub); /* el mismo cuerpo que la entrada del hero */ color: rgba(244, 241, 234, .92); text-align: center; /* centrado: aquí no se justifica */ } /* ── EN EL TELÉFONO, LA MISMA ESCENA MÁS CORTA Y CON LA FOTO VIVA ─── (2026-09-11) Medido en un iPhone de 390×664: el riel daba 1.660 px, y de los 996 de recorrido el titular no empezaba hasta los 418. Más de la mitad de la escena era pantalla velada sin nada encima —los «600 px de foto desenfocada» que salieron en la barrida de huecos del día 10—. Y al final del recorrido la pantalla acababa en MARRÓN LISO: en escritorio el desenfoque al 100 % más el velo de .68 se leen como ambiente porque hay 1.400 px de foto donde reconocer el sitio; en 390 no queda ni la lámpara ni la mesa, sólo una mancha. Aquí: · el riel baja de 250 a 220svh y todos los tiempos se adelantan; · el desenfoque se queda a MEDIA MEZCLA (.58): la foto nítida sigue debajo, así que el comedor se reconoce; · y el velo deja de ser una capa plana y pasa a ser un degradado que protege la franja del texto y suelta la de arriba. ⚠️ SÓLO MÓVIL. El escritorio se queda exactamente como está: ahí la escena está aprobada. El reparto de `--sube`, `--fondo2` y `--desc` —que lo publica el JS— tiene su propio guion en `sitio.js`. */ @media (max-width: 899px) { .propuesta { height: 220svh; } /* El velo y el desenfoque entran antes, para dejar sitio al texto. */ .propuesta__pega { --vela: clamp(0, calc((var(--p, 1) - .06) * 4.5), 1); } /* A media mezcla: lo justo para que el texto se despegue del fondo sin borrar la foto. Con el 1 de escritorio, aquí no se ve nada. */ .propuesta__foto--velada { opacity: calc(var(--vela) * .58); } .propuesta__foto--velada2 { opacity: calc(var(--vela) * var(--fondo2, 0) * .58); } /* El titular entra en cuanto el velo está hecho, no a mitad de riel. */ .propuesta h2 { opacity: clamp(0, calc((var(--p, 1) - .20) * 5.5), 1); } /* Protección por franjas en vez de capa plana: fuerte donde cae el texto —del 42 % al 70 % de la pantalla— y floja arriba, que es donde se reconoce el techo de madera y las lámparas. ⚠️ Los alfas de la franja central NO son a ojo. Con .58/.74 la descripción daba 4,29:1 contra el 3 % más claro de su propio fondo, y a su cuerpo —el de la entrada del hero, que no es texto grande— el mínimo que se le pide son 4,5. Con .66/.80 sube a 4,9 y la foto se sigue reconociendo. Medido con el comprobador de contraste, no de reojo: ver [[feedback-comprobar-que-se-ve]]. */ .propuesta__pega::before { background: linear-gradient(180deg, rgba(124, 83, 62, .40) 0%, rgba(124, 83, 62, .14) 20%, rgba(124, 83, 62, .66) 42%, rgba(124, 83, 62, .80) 70%, rgba(124, 83, 62, .72) 100%); } } @media (prefers-reduced-motion: reduce) { /* Sin escena: el riel se disuelve y se ve todo junto y quieto. */ .propuesta { height: auto; } .propuesta__pega { position: static; height: auto; padding-block: clamp(64px, 9vw, 120px); } .propuesta__foto { transform: none; } .propuesta__foto--segunda { opacity: 0; } .propuesta h2 { transform: none; } .propuesta__desc { opacity: 1; transform: none; } } /* ── Las tres fotos de la cocina ──────────────────────────────────── ⚠️ En móvil NO se apilan: se deslizan. Es la regla de la casa —tres fotos apiladas alargan el scroll y se leen como tres bloques sueltos—. La vecina asoma por el borde (el `85%` de ancho) para que se vea que hay más, y el anclaje deja cada una centrada al soltar el dedo. Todo en CSS, sin JavaScript: un carrusel con scroll nativo se maneja con el dedo mejor que cualquier cosa que se programe encima. */ .cocina { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 85%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; /* el aire lateral se recorta y se devuelve como padding para que la primera foto no quede pegada al borde de la pantalla */ margin-inline: calc(var(--aire) * -1); padding-inline: var(--aire); scrollbar-width: none; } .cocina::-webkit-scrollbar { display: none; } .cocina__foto { scroll-snap-align: center; scroll-snap-stop: always; margin: 0; overflow: hidden; /* el marco recorta el zoom del hover */ box-shadow: 0 10px 30px rgba(26, 34, 41, .13); } .cocina__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform .7s var(--curva); } /* El zoom pasa DENTRO del marco: la foto crece y el recuadro no se mueve. Al revés —escalando el marco— se empujaría a las vecinas. */ @media (hover: hover) and (pointer: fine) { .cocina__foto:hover img { transform: scale(1.06); } } @media (min-width: 900px) { /* En escritorio, el texto a la izquierda y las fotos a la derecha, en tres columnas escalonadas: la del medio sube y las de los lados bajan. Es lo que convierte tres fotos en fila en una composición. */ /* ⛔ Sin dos columnas: la sección dejó de ser «texto + fotos» y pasó a ser una escena a todo el ancho con la foto de fondo. El texto ocupa la mitad izquierda por su propia medida (`max-width` en ch), no por una rejilla. */ .cocina { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; gap: 16px; overflow: visible; margin: 0; padding: 0; align-items: center; } /* ── El escalón y la profundidad al scroll ────────────────────── Cada foto tiene una posición de reposo distinta —la del medio levantada, las de los lados bajas— y además se mueve a su propia velocidad mientras la sección cruza la pantalla. Eso es lo que da fondo: si las tres se movieran igual, se leerían como un bloque. `--p` la publica el JS entre -1 y 1 según dónde esté la sección respecto al centro de la pantalla. Las amplitudes son distintas y no simétricas a propósito: con 20 / 44 / 28 el grupo respira; con valores espejo parece un acordeón. ⛔ Sin transición en el `transform`: lo manda el scroll, y una transición lo dejaría persiguiendo al dedo con retraso. */ .cocina__foto { will-change: transform; } .cocina__foto:nth-child(1) { transform: translateY(calc(14px + var(--p, 0) * 20px)); } .cocina__foto:nth-child(2) { transform: translateY(calc(-26px + var(--p, 0) * 44px)); } .cocina__foto:nth-child(3) { transform: translateY(calc(14px + var(--p, 0) * 28px)); } .cocina__foto:nth-child(2) img { aspect-ratio: 3 / 4; } } /* ===================================================================== LAS TRES CARTAS ===================================================================== Rejilla asimétrica: la de alimentos ocupa el doble, porque es la que busca la gente. En móvil se convierte en carrusel. ===================================================================== */ .cartas-home__lista, .indice-cartas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--aire); padding-inline: var(--aire); padding-bottom: 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .cartas-home__lista::-webkit-scrollbar, .indice-cartas::-webkit-scrollbar { display: none; } .cartas-home__item, .indice-cartas__item { scroll-snap-align: start; scroll-snap-stop: always; } .cartas-home__item a, .indice-cartas__enlace { display: block; text-decoration: none; position: relative; background: var(--fondo-hondo); overflow: hidden; } /* Igual que en el viaje: el nombre se apoya en una franja, no en un velo. */ .cartas-home__item a:has(img)::after { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(to top, rgb(8 16 24 / .8), transparent); pointer-events: none; } .cartas-home__item span { z-index: 2; } .cartas-home__item img, .indice-cartas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; opacity: .78; transition: transform .26s var(--curva), opacity .26s var(--curva); } @media (hover: hover) and (pointer: fine) { .cartas-home__item a:hover img, .indice-cartas__enlace:hover img { transform: scale(1.045); opacity: .95; } } /* Cuando todavía no hay foto, la tarjeta no se rompe ni deja un hueco vacío: se resuelve con el color de la casa y una franja del alto justo. */ .cartas-home__item a:not(:has(img)) { min-height: 280px; display: grid; align-items: end; } .indice-cartas__enlace:not(:has(img)) { background: var(--fondo-hondo); min-height: 132px; display: flex; align-items: flex-end; padding: 20px 22px; border-top: 3px solid var(--acento); } .indice-cartas__enlace:not(:has(img)) h2 { color: var(--texto); margin: 0; } .cartas-home__item span, .indice-cartas h2 { position: absolute; left: 22px; right: 22px; bottom: 20px; font-family: var(--titulo); font-weight: 600; font-size: 1rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgb(0 0 0 / .7); } /* Sin foto no hay sombra que valga: la tarjeta es arena y la tinta, tinta. */ .cartas-home__item a:not(:has(img)) span { color: var(--texto); text-shadow: none; } /* En el índice, el nombre de la carta ES el título de la tarjeta: va a la escala de tarjeta del sitio, no a la del rótulo sobre foto que comparte regla con la portada. */ .indice-cartas h2 { position: static; color: inherit; text-shadow: none; margin-top: .7em; font-size: var(--t-tarjeta); letter-spacing: .06em; } .indice-cartas__enlace { background: none; } .indice-cartas__apartados { list-style: none; margin: .5em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; } .indice-cartas__apartados a { color: var(--texto-suave); text-decoration: none; padding: 3px 0; display: inline-block; } .indice-cartas__apartados a:hover { color: var(--acento-tinta); } .indice-cartas__cuenta { font-family: var(--titulo); font-size: var(--t-rotulo); letter-spacing: .12em; text-transform: uppercase; color: var(--acento-tinta); margin-top: .7em; } /* ── La cita ───────────────────────────────────────────────────────── */ /* ⛔ LA CITA SE RETIRÓ DE LA PORTADA el 2026-08-13. Este bloque ya no lo usa ninguna vista; se deja escrito como el resto de lo retirado. */ .cita { padding-block: clamp(72px, 10vw, 140px); text-align: center; } .cita blockquote { margin: 0 auto; max-width: 20ch; font-family: var(--titulo); font-weight: 300; font-size: clamp(1.5rem, 4.2vw, 2.6rem); line-height: 1.25; } .cita blockquote p { max-width: none; margin: 0; } /* Las palabras de la cita se encienden una a una con el scroll. El espacio entre ellas lo pone el propio texto, no un margen. */ .cita__palabra { display: inline-block; } .cita cite { display: block; margin-top: 1.5em; font-style: normal; font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--acento-tinta); } /* ── Grupos ────────────────────────────────────────────────────────── La foto —el interior de una villa, con la mesa larga puesta— ocupa el FONDO de la sección, y el texto va encima y CENTRADO. Rehecha cuatro veces el 2026-08-13; el porqué de cada descarte está en `_vistas/home.php` y en el RESUMEN. ⚠️ El techo de 700 px NO es un capricho: la foto mide 780 de alto —lo máximo que da sin ampliarla— y necesita un 10 % de sobra para el recorrido del parallax. Subir la sección obliga a ampliar la foto y se ve blanda. ⚠️ `overflow: hidden` es seguro aquí porque dentro no hay nada `sticky`. La prohibición de la casa es sobre los ANCESTROS de una escena pegada, que en el Safari de iPhone se anclan a él. ⚠️ `isolation: isolate` para que los `z-index` negativos del fondo y del velo se queden dentro de la sección. */ .grupos-home { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(480px, 72svh, 700px); display: grid; align-items: center; color: var(--sobre-hondo); background: var(--marron); /* mientras la foto carga, azul, nunca blanco */ } /* La foto es un 10 % más alta que la sección y ese sobrante es justo el recorrido: nunca descubre un borde. ⚠️ El 110 % y el ±5 % están emparejados: si se sube uno hay que subir el otro, y entonces hay que revisar que la foto dé esa altura. */ .grupos-home__fondo { position: absolute; inset: -5% 0; z-index: -2; } /* ⚠️ En MÓVIL no hay cinta: no hay riel ni `--avance` que la mueva, y seis fotos verticales quietas serían una tira muerta. Se enseña la primera a sangre y ya. La cinta borrosa no pinta nada ahí. */ .grupos-galeria--velada { display: none; } .grupos-galeria { position: absolute; inset: 0; display: block; overflow: hidden; } .grupos-galeria img { display: none; } /* ⚠️ En móvil sale la QUINTA, no la primera, y está ELEGIDA MIDIENDO. Aquí la foto va bajo un velo fijo con el texto encima, así que no vale cualquiera: con la primera el texto quedaba en 4,88:1 pero la escena se veía una mancha marrón; con la tercera —la luminosa— la foto lucía pero el texto caía a 3,48. Probadas las seis con el velo al .74, la quinta da 5,44:1 y además se ve de qué es la foto. */ .grupos-galeria img:nth-child(5) { display: block; width: 100%; height: 100%; object-fit: cover; } .grupos-home__foto { width: 100%; height: 100%; object-fit: cover; transform: translateY(calc((var(--desliza, .5) - .5) * 10%)); will-change: transform; } /* Velo uniforme: con el texto centrado no hay un lado libre donde apoyarlo, la protección tiene que cubrir el medio. Las esquinas de arriba y abajo suman un punto, que es donde la foto quema. ⚠️ El .74 está MEDIDO sobre esta foto, no elegido a ojo. La villa es mucho más clara que la palapa que había antes: con .66 el rótulo dorado se quedaba en 3,35:1 y el mínimo para ese tamaño es 4,5. Si se cambia la foto hay que volver a medir el rótulo, que es lo primero que se cae por ser el texto más pequeño y el de menos contraste. */ .grupos-home::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(124 83 62 / .26) 0%, rgb(124 83 62 / 0) 26%, rgb(124 83 62 / 0) 74%, rgb(124 83 62 / .30) 100%), rgb(124 83 62 / .86); } .grupos-home__interior { position: relative; max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); width: 100%; padding-block: clamp(52px, 8vh, 88px); } /* ⭐ Todo centrado, como pidió Carlos. La medida se topa para que el titular no se estire de borde a borde en pantalla ancha. */ .grupos-home__texto { max-width: 44rem; margin-inline: auto; text-align: center; } /* ⚠️ El rótulo va en BLANCO aquí, no en el dorado claro del resto de secciones oscuras. Está medido sobre esta foto: el dorado se quedaba en 3,98:1 incluso con el velo al .74, y para 11,5 px el mínimo es 4,5. Subir más el velo tapaba la foto, que es justo lo que la sección tiene que enseñar. El acento dorado no se pierde: lo lleva el botón, que es sólido y tiene su propio contraste comprobado. */ .grupos-home .rotulo { color: rgba(255, 255, 255, .92); } /* ⚠️ EN MAYÚSCULAS, como TODOS los titulares de la portada (Carlos, 2026-08-13). Estuvo en caja normal porque la frase es larga y en versales cansa más de leer, pero la coherencia manda: los otros cinco van en mayúsculas y éste desentonaba. Al pasarlo, baja al techo de 34 px de la casa —a 38 px en versales se comía la sección— y la medida sube a 26ch para que siga cayendo en tres líneas. */ .grupos-home h2 { /* el valor de esta línea es el que se convirtió en `--t-seccion` */ font-size: var(--t-seccion); text-transform: uppercase; letter-spacing: -.005em; line-height: 1.08; color: #fff; margin: .5em auto 0; max-width: 26ch; } .grupos-home p { margin: 1.1em auto 2.2em; color: rgba(244, 241, 234, .92); max-width: 54ch; } /* ⭐ LA LÍNEA ANTERIOR, A UN PARÁMETRO DE DISTANCIA. `?paleta=terracota` en cualquier página y esa visita vuelve ENTERA a como estaba antes del 2026-09-10: la terracota y el naranja de atardecer, el marrón liso sin papel y la cita en Jost. Es para mirar y comparar —Carlos: «guarda lo anterior por si quiero cambiarle»—; no cambia nada en el servidor ni se recuerda de una página a otra. */ :root[data-paleta="terracota"] { --acento: var(--terracota); --acento-tinta: var(--terracota-tinta); --boton: var(--boton-atardecer); --boton-honda: var(--boton-atardecer-hondo); --acento-titulo: var(--acento-titulo-atardecer); } /* Lo que no es un color no cabe en una variable: el papel del manto y la letra de la cita se apagan aquí. */ :root[data-paleta="terracota"] .pase__onda, :root[data-paleta="terracota"] .cruce__ola, :root[data-paleta="terracota"] .cruce__relleno { background-image: none; } @media (min-width: 900px) { :root[data-paleta="terracota"] .pases__cita blockquote { font-family: var(--titulo); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; max-width: 18ch; padding-inline: 0; margin-bottom: .6em; } } /* ===================================================================== 🧪 MUESTRA · PALETA MEDITERRANEAN (2026-09-15) ===================================================================== Carlos pasó una lámina «Mediterranean Color Palette» de Canva y pidió verla aplicada «cambiando el rojo, el crema, el rosa; las letras rojas del diseño, como acuarela, ésas déjalas, pero quiero ver qué tal». ⭐ 2026-09-17 · DEJÓ DE SER MUESTRA. Carlos eligió la B («Muestra B (8603)») y es la paleta de la web: `partials/head.php` la enciende por defecto. La A sigue viéndose con `FREDS_PALETA=mediterranea` (8602) y la línea Sea & Spice de antes con `FREDS_PALETA=sea-spice`. (Texto original: «ES UNA MUESTRA, NO UN CAMBIO. Sólo se enciende cuando el servidor local arranca con `FREDS_PALETA=mediterranea`».) Los cuatro colores, medidos de la captura: terracota #BE805B, azul agua #92B0AE, verde oliva #9B977C y arena #D4C3AF (casi idéntica al papel del sitio, #d4c3b0, así que el papel no cambia). ⚠️ LA TERRACOTA CRUDA NO SE LEE: blanco encima da 3,3:1 y sobre arena no llega a 3. Se baja SÓLO la luz, mismo tono y saturación: #a46641 relleno del botón · 4,61:1 con blanco #875436 hover y borde · 6,24:1 con blanco #73482e texto sobre arena · 4,56:1 La cruda #BE805B se queda para lo que no es letra: filetes, olas. ⛔ Las caligráficas (`.firma`, el título de la portada de los pases) leen `--rojo-spice` directo y NO cambian: así lo pidió. */ :root[data-paleta^="mediterranea"] { --med-terracota: #BE805B; --med-agua: #92B0AE; --med-oliva: #9B977C; /* ⭐ 2026-09-17, AL PASARLA A LA WEB: la terracota cruda como FONDO (reservas, paginación, botón de grupos) daba 3,27:1 con blanco encima. `buscar-contraste.js` lo midió. Acento = la terracota con 14 % menos de luz, la misma que las superficies: blanco 5,86 · crema 4,64. La cruda sigue en `--med-terracota` para quien la quiera decorativa. */ --acento: #8d5838; --acento-tinta: #73482e; --acento-titulo: #73482e; /* Carlos, 2026-09-15: «me gustaría los botones en verdes o algo». El oliva de la lámina (#9B977C) con blanco encima da 2,95:1; bajada sólo la luz: relleno #79755d (4,63:1 con blanco) y borde/hover #64614d (6,22 con blanco, 3,63 contra el papel: dibuja el contorno). La terracota de antes: #a46641 / #875436. */ --boton: #79755d; --boton-honda: #64614d; /* La crema pasa a un oliva muy claro (25 % sobre blanco): tinta encima 9,65:1, y como texto claro sobre el marrón sigue funcionando. */ --crema: #e6e5de; /* Carlos, 2026-09-15, sobre la ola: «este terracota es del que yo pasé?» — no, era el marrón de la casa (#7c533e). «Sí, cambia el marrón a terracota para ver». Va la terracota con la luz bajada (#a46641, 4,61:1 con blanco) y no la cruda #BE805B, que con la frase blanca del cruce encima se quedaba en 3,27. ⚠️ Los textos en crema sobre estas superficies bajan a 3,65:1: aceptable para mirar, no para publicar. La textura es `papel-marron.webp` reteñida a la misma media (`papel-terracota.webp`, 14 KB). */ /* ⭐ 2026-09-17: #a46641 → #8d5838. Con la crema encima daba 3,65:1 (barra de app, banners, portada) — «aceptable para mirar, no para publicar», y ya se publica. Mismo tono con 14 % menos de luz; la baldosa `papel-terracota.webp` se volvió a teñir a esta media. */ --marron: #8d5838; --papel-marron: url('../img/textura/papel-terracota.webp'); } /* Los tres fundidos que escriben el marrón a mano (`rgb(124 83 62)`): con el marrón en variable no se enteraban y dejaban una banda marrón. */ :root[data-paleta^="mediterranea"] .bienvenida::after, :root[data-paleta^="mediterranea"] .banner-banda::after { background: linear-gradient(180deg, rgb(141 88 56 / 0) 0%, rgb(141 88 56 / .28) 34%, rgb(141 88 56 / .62) 62%, rgb(141 88 56 / .88) 84%, rgb(141 88 56 / 1) 100%); } /* 2026-09-28 · Carlos: «se marca esa línea, antes no se veía». La escena de Las Villas (`.palapas`) quedó fuera de esta lista y su fundido seguía en el marrón viejo: la banda acababa en #8e5838 y la escena arrancaba en #7c533e, un corte recto a lo ancho de la pantalla. */ :root[data-paleta^="mediterranea"] .palapas::before, :root[data-paleta^="mediterranea"] .propuesta::before { background: linear-gradient(180deg, rgb(141 88 56 / 1) 0%, rgb(141 88 56 / .94) 18%, rgb(141 88 56 / .74) 40%, rgb(141 88 56 / .42) 64%, rgb(141 88 56 / .14) 84%, rgb(141 88 56 / 0) 100%); } /* La piel de la barra de app lleva `fill="#7c533e"` escrito en el SVG (`partials/app-nav.php`); una propiedad CSS le gana al atributo. */ :root[data-paleta^="mediterranea"] .app-nav__piel { fill: var(--marron); } :root[data-paleta^="mediterranea"] .hero--video::after { background: linear-gradient(180deg, /* Sin la franja oscura de arriba (2026-10-09, «quitar fade de header»): el menú se sostiene con la sombra de su propia letra. */ rgba(141, 88, 56, 0) 0%, rgba(141, 88, 56, 0) 70%, rgba(141, 88, 56, .40) 100%); } /* ⭐ 2026-09-17 · Lo que `buscar-contraste.js` seguía cazando con la terracota ya oscurecida (3,9–4,4:1): la letra CREMA sobre los fundidos de los banners y la portada, el párrafo del cristal de Las Villas y el menú de la cabecera sobre la portada. La crema de esta paleta es un oliva muy claro (#e6e5de) y sobre terracota no llega: esos textos van en blanco, el cristal de Las Villas un poco más tupido y el velo de arriba de la portada un punto más denso. */ :root[data-paleta^="mediterranea"] .bienvenida .hero__marca, :root[data-paleta^="mediterranea"] .banner-banda__antetitulo, :root[data-paleta^="mediterranea"] .banner-banda__bajada, :root[data-paleta^="mediterranea"] .banner-banda__dato { color: #fff; } :root[data-paleta^="mediterranea"] .palapas__texto { background: color-mix(in srgb, var(--marron) 88%, transparent); } :root[data-paleta^="mediterranea"] .palapas__texto > p:not(.rotulo) { color: #fff; } /* El rosa: el canto de la ola era el acento al 30 %; pasa al azul agua. */ :root[data-paleta^="mediterranea"] .pase__onda--eco, :root[data-paleta^="mediterranea"] .cruce__ola--eco { background: color-mix(in srgb, var(--med-agua) 75%, transparent); } /* ===================================================================== 🧪 MUESTRA B · MEDITERRANEAN REPARTIDA COMO LA LÁMINA (2026-09-15) ===================================================================== Carlos: «lo veo muy beige». Medido en la muestra A: el beige ocupaba el 38 % de la portada, el 51 % de /cancun/ y el 80 % de la carta, y el azul agua no pasaba del 2,5 % en ninguna. En la lámina los cuatro colores pesan lo mismo y son BLOQUES, no detalles. Hereda todo lo de la A (selector por prefijo) y además: · las secciones de respiro (`--fondo-hondo`) pasan a AZUL AGUA: el lado de la barra, el pie de las tarjetas, el índice de la carta; · las superficies claras y la sección blanca de prensa, a OLIVA CLARO; · el pie, a OLIVA OSCURO con letra clara. ⚠️ Sobre el agua #92B0AE la tinta suave (3,4:1) y la terracota de texto (3,36) no se leían: se bajan de luz hasta 4,6 sin cambiar de tono, y siguen dando 6,2 sobre el arena. El borde de botón, a #5a5745 (3,14 contra el agua: dibuja el contorno). Sólo se enciende en el 8603. */ /* ⛔ CARLOS, sobre la barra con el agua de fondo y la ola terracota encima: «no se pueden repetir doble fondo, y ese azul de fondo horrible». Así que en la B el AGUA NO ES FONDO en ningún sitio (el lado de la barra, la galería, el índice y las franjas de la carta volvieron al papel) y dos superficies de color no se tocan. Lo que queda de la B es lo que no era azul: oliva claro y el pie oliva. */ :root[data-paleta="mediterranea-b"] { --fondo-alto: #d9d8cc; /* tinta 8,5:1 · tinta suave 5,5 */ --pie-oliva: #55523f; /* crema encima 6,24:1 · blanco 7,88 */ } :root[data-paleta="mediterranea-b"] .claro { background: var(--fondo-alto); } /* El pie en oliva oscuro */ :root[data-paleta="mediterranea-b"] .pie { background: var(--pie-oliva); color: #e6e5de; border-top-color: var(--pie-oliva); } :root[data-paleta="mediterranea-b"] .pie a, :root[data-paleta="mediterranea-b"] .pie__legal, :root[data-paleta="mediterranea-b"] .pie__legal-enlace { color: #e6e5de; } :root[data-paleta="mediterranea-b"] .pie a:hover, :root[data-paleta="mediterranea-b"] .pie__legal-enlace:hover { color: #ffffff; } :root[data-paleta="mediterranea-b"] .pie__titulo { color: #ffffff; } :root[data-paleta="mediterranea-b"] .pleca__grupo { background: var(--pie-oliva); } :root[data-paleta="mediterranea-b"] .pleca__marco, :root[data-paleta="mediterranea-b"] .pie__legal { border-color: rgb(230 229 222 / .35); } /* Los logos iban en negro al 42 %: sobre oliva oscuro, en claro. */ :root[data-paleta="mediterranea-b"] .pleca__grupo img, :root[data-paleta="mediterranea-b"] .pleca__marcas img, :root[data-paleta="mediterranea-b"] .pie__marca img { filter: brightness(0) invert(1); } /* En claro al 42 % se quedaban lavados sobre el oliva. */ :root[data-paleta="mediterranea-b"] .pleca__marcas img { opacity: .72; } /* ⭐ 2026-09-17 · `scroll-snap-stop: always` acompaña a cada `scroll-snap-align` (lo recomendó `auditar-slider-movil.js`): sin él, un deslizón rápido del dedo se salta dos o tres tarjetas y se pierde la cuenta de dónde está uno. Con él, cada empujón avanza UNA. */ /* ===================================================================== LAS DOS UTILIDADES DE LA LÍNEA SEA & SPICE (2026-09-10) ===================================================================== Se declaran aquí y no se usan todavía en ninguna vista: son el material listo para cuando se decida dónde entra la línea nueva. `.papel` pinta la textura sobre el color que lleve el elemento. Si el elemento no trae color propio, sale el papel claro del cartel. La baldosa se repite a su tamaño real; en pantallas de 2× el navegador ya la pinta al doble de densidad sin que haya que hacer nada. `.firma` es la caligráfica: grande, holgada y con el rojo de la línea. ⚠️ Lleva un pelo de `padding` a los lados porque los trazos de la Mr Dafoe se salen de su propia caja —la «S» arranca a la izquierda del punto de origen— y sin ese aire se recortan contra el borde. */ .papel { background-color: var(--papel-color); background-image: var(--papel); background-size: var(--papel-lado) var(--papel-lado); background-repeat: repeat; background-blend-mode: multiply; } .firma { font-family: var(--caligrafia); font-weight: 400; color: var(--rojo-spice); font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.05; padding-inline: .12em; text-transform: none; /* ⛔ jamás en versales: no tiene mayúsculas de verdad */ } /* ===================================================================== EL PAPEL, SÓLO EN EL ESCENARIO MARRÓN (2026-09-10) ===================================================================== Carlos: «la textura no en todo, quizás en dos partes nada más, o sea quizás en el sólido marrón ese que pasa de un lado a otro». Ese sólido es UNA sola pieza contada en dos tiempos, y por eso son dos partes y no dos secciones sueltas: 1. `.pase__onda` — la ola marrón que ocupa media pantalla detrás de cada plato y de cada copa, y que cambia de lado al pasar de la cocina («Plato a plato», masa a la derecha) a la barra («Copa a copa», espejada a la izquierda). 2. `.cruce__ola` + `.cruce__relleno` — el manto que barre la pantalla entera para hacer ese cambio. Es el MISMO marrón, moviéndose. ⛔ SE PROBÓ EN `.propuesta` Y NO SIRVE. Es el riel marrón de la escena de arriba, pero encima lleva una foto a sangre desenfocada: el marrón no se ve en ningún momento, así que la textura era peso sin efecto. Medido, no supuesto: la desviación de la zona salía idéntica con textura y sin ella. Con el papel encima, el manto deja de leerse como una capa de color y pasa a leerse como una superficie que se desplaza: la materia va con él. Eso es lo que pedía Carlos. ⚠️ EL RESTO DEL SITIO NO LLEVA TEXTURA. Ni el papel arena, ni las fotos, ni las secciones con imagen de fondo. Si algún día se quiere en más sitios, se añade la clase `.papel` — no se toca esto. ⚠️ `multiply` Y NO `overlay`. Sobre un marrón hondo, `overlay` levanta las motas claras del papel y salpica el escenario de puntos blancos; `multiply` sólo deja pasar las sombras de la fibra, que es lo que se busca: materia, no ruido. ⚠️ LA COSTURA ENTRE LA OLA Y SU RELLENO. Son dos cajas pegadas, cada una con su propio origen de baldosa, así que el dibujo del papel NO continúa de una a otra. Con este grano —seis niveles de desviación sobre 255— no se ve, y medirlo no daba: se comprobó a ojo en tres momentos del barrido. Si algún día se sube el contraste de la textura, esto es lo primero que se rompe. */ @media (min-width: 900px) { .pase__onda, .cruce__ola, .cruce__relleno { background-image: var(--papel-marron); background-size: var(--papel-lado) var(--papel-lado); } /* ⛔ El eco NO lleva papel: es un canto de color translúcido pegado al filo de la ola, no una superficie. Con textura se ensuciaba. */ } /* ===================================================================== LAS VILLAS — la tarde se hace noche con el scroll (2026-09-07) (el espacio se llama Las Villas desde el 2026-09-10; la clase sigue siendo `.palapas` para no romper el JS ni el CSS ya escrito) ===================================================================== Carlos: «quiero que esté como de tarde y mientras hago scroll el sol vaya bajando». Es un TIME-LAPSE de Seedance (SU foto del atardecer → noche, cámara clavada) que avanza conforme se baja. El porqué de cada decisión —video en vez de tres fijas, sin sol, sin lámparas— está en `_vistas/home.php`. Anatomía de la casa: riel alto (`.palapas`) + pantalla pegada (`.palapas__pega`). El JS publica `--avance` (0→1) y todo lo demás es CSS. ⛔ Sin GSAP. ⛔ Sin `overflow` en los ancestros de la pantalla pegada. ⛔ Sin

` nativo: el navegador atrapa el foco dentro, cierra con Escape y apila por encima de todo sin pelear con `z-index`. ⚠️ El fondo es el AZUL PIZARRA de la marca a mucha opacidad, no negro: Fred's no tiene negro en su paleta. Es la única superficie oscura del sitio y está justificada — sobre papel claro una foto no se mira, se ojea. ===================================================================== */ .visor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; margin: 0; background: color-mix(in srgb, var(--marron) 96%, #000); color: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; gap: clamp(6px, 1.5vw, 20px); overscroll-behavior: contain; } .visor::backdrop { background: color-mix(in srgb, var(--marron) 92%, #000); } .visor:not([open]) { display: none; } /* ⚠️ 2026-08-13 · ENTRA, no aparece de golpe. Un `` que se abre sin transición es un salto seco, y éste tapa la pantalla entera. La foto sube un poco y aparece; el fondo sólo se funde. ⚠️ Con `@starting-style` y `allow-discrete`, que es lo que permite animar un elemento que pasa de `display: none` a visible. Sin `allow-discrete` el navegador lo muestra de golpe y sólo anima la salida. ⚠️ Escala desde .98, nunca desde 0: nada en el mundo real aparece de la nada. */ .visor, .visor::backdrop { transition: opacity .24s var(--curva-color), transform .28s var(--curva), display .28s allow-discrete, overlay .28s allow-discrete; } .visor { opacity: 1; transform: scale(1); } .visor:not([open]) { opacity: 0; transform: scale(.98); } @starting-style { .visor[open] { opacity: 0; transform: scale(.98); } .visor[open]::backdrop { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .visor, .visor:not([open]) { transform: none; } } /* ⛔ `minmax(0, 1fr)` y `min-height: 0`, NUNCA `1fr` a secas. Una pista `1fr` trae `min-height: auto`, así que se estira hasta el tamaño natural de la imagen: el marco llegó a medir 2108 px en una ventana de 900, la foto se salía por arriba y el pie se iba fuera de pantalla. Lo mismo vale para la columna del medio en `.visor`. */ .visor__marco { margin: 0; padding: clamp(52px, 7vh, 78px) 0 clamp(46px, 6vh, 64px); height: 100%; min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; justify-items: center; align-items: center; } .visor__foto { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; min-width: 0; object-fit: contain; display: block; /* ⭐ La foto entera SIEMPRE: aquí no se recorta nada. Es lo que distingue el visor de la cinta, donde sí se topa en móvil. */ } .visor__pie { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: center; text-align: center; padding-inline: var(--aire); font-size: .9rem; color: rgba(255,255,255,.82); max-width: 68ch; } .visor__cuenta { font-family: var(--titulo); font-size: .72rem; letter-spacing: .14em; color: var(--crema); } /* ── Los mandos ────────────────────────────────────────────────────── */ .visor__flecha, .visor__cerrar { background: none; border: 0; color: #fff; cursor: pointer; display: grid; place-items: center; width: 56px; height: 56px; /* muy por encima del mínimo táctil */ opacity: .78; transition: opacity .22s var(--curva-color), transform .22s var(--curva); } /* ⚠️ El visor alinea sus columnas con `stretch` —lo necesita el marco de la foto para ocupar el alto—, así que las flechas hay que centrarlas a mano. Sin esto se van arriba y la derecha choca con el aspa. */ .visor__flecha { align-self: center; } .visor__flecha svg { width: 28px; height: 28px; } .visor__cerrar svg { width: 22px; height: 22px; } .visor__flecha:hover, .visor__cerrar:hover { opacity: 1; } .visor__flecha:disabled { opacity: .22; cursor: default; } .visor__flecha, .visor__cerrar { outline-offset: 2px; } .visor__flecha:focus-visible, .visor__cerrar:focus-visible { outline: 2px solid var(--acento); opacity: 1; } /* ⚠️ Con fondo propio: va encima de la foto y sobre una zona clara —el agua turquesa de una cenital, por ejemplo— una equis blanca a secas desaparece. */ .visor__cerrar { position: absolute; top: clamp(8px, 1.6vh, 18px); right: clamp(8px, 1.6vw, 18px); z-index: 2; background: color-mix(in srgb, var(--marron) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* En móvil las flechas se salen del sitio: bajan sobre la foto, a los lados, donde el pulgar llega. */ @media (max-width: 699px) { .visor { grid-template-columns: 1fr; } .visor__flecha { position: absolute; bottom: clamp(10px, 2vh, 20px); z-index: 2; background: color-mix(in srgb, var(--marron) 70%, transparent); } .visor__flecha--izq { left: 10px; } .visor__flecha--der { right: 10px; } .visor__marco { padding-bottom: clamp(76px, 11vh, 96px); } } /* ── La barra de avance ──────────────────────────────────────────── Una línea fina que dice cuánto queda. La rellena `--avance`, que publica el JS de 0 a 1; sin JS se queda a cero y no molesta. */ .galeria__barra { margin-top: clamp(18px, 2.6vh, 28px); height: 2px; background: var(--linea); } .galeria__avance { display: block; height: 100%; background: var(--acento); transform: scaleX(var(--avance, 0)); transform-origin: 0 50%; transition: transform .18s linear; } /* ⛔ Aquí vivía `.galeria__cartas`, tres botones a las cartas al pie de la galería. Retirados el 2026-08-12: las tres cartas ya están en el submenú de la cabecera —que va fija toda la página— y los pases de cocina y barra llevan su propio botón. Era el cuarto sitio de la portada con el mismo enlace. */ /* ===================================================================== EL VIAJE DE LAS CARTAS · ⛔ RETIRADO EL 2026-08-12 ===================================================================== Ya no lo usa ninguna vista: la portada lo cambió por la galería de aquí arriba. Se deja escrito, como se hizo con `.cocina`, porque el patrón —riel + pantalla pegada + `translateZ` sobre `perspective`— es el que mejor ha funcionado en este proyecto y se querrá reutilizar. Riel alto + pantalla pegada + escenario con `perspective`. La perspectiva es lo que convierte el `translateZ` de cada carta en profundidad de verdad: los bordes de la foto se abren al acercarse. Con un `scale` eso no pasa, y se nota. Mientras el JavaScript no enciende el viaje (`.viaje--activo`), lo que se ve es el carrusel de siempre: en móvil, sin JavaScript o con menos movimiento, nadie se queda sin las tres cartas. ===================================================================== */ .viaje { position: relative; } .viaje__pega { display: none; } .viaje__plano { padding-block: var(--hueco-bloque); } .viaje__rotulo { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--aire); } @media (min-width: 901px) { /* El riel: una pantalla y media por carta, más media de entrada. */ .viaje { height: 500svh; } .viaje__pega { display: block; position: sticky; top: 0; height: 100lvh; overflow: hidden; } .viaje__rotulo { position: absolute; top: 96px; left: 0; right: 0; z-index: 3; } .viaje__escenario { position: absolute; inset: 0; display: grid; place-items: center; /* ⭐ La pieza clave: sin esto el translateZ no se ve como profundidad. */ perspective: 1100px; perspective-origin: 50% 46%; } .viaje__carta { grid-area: 1 / 1; /* las tres ocupan el mismo sitio */ width: min(34vw, 420px); transform-style: preserve-3d; will-change: transform, opacity, filter; opacity: 0; } .viaje__carta a { display: block; text-decoration: none; position: relative; } /* Un degradado SÓLO en la franja del nombre, no un velo sobre la foto entera. La sombra de letra sola no basta cuando debajo hay una foto clara: el nombre de la carta tiene que leerse siempre. */ .viaje__carta a::after { content: ''; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(to top, rgb(8 16 24 / .78), transparent); pointer-events: none; } .viaje__carta img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 40px 80px rgb(15 25 35 / .28); } .viaje__nombre { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; font-family: var(--titulo); font-weight: 600; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgb(0 0 0 / .75); } /* Cuando el viaje está encendido, el carrusel plano se retira. */ .viaje.viaje--activo .viaje__plano { display: none; } } /* ===================================================================== CASCADA — lo que entra, entra en orden ===================================================================== Prensa, blog, zonas del Kids Club y platos de la carta. El retardo de cada pieza lo pone el JavaScript en `--retardo`; el movimiento lo hace el navegador solo. ===================================================================== */ .js .cascada { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--curva) var(--retardo, 0ms), transform .7s var(--curva) var(--retardo, 0ms); } .js .cascada--entra { opacity: 1; transform: none; } /* La línea de avance bajo el índice de la carta: cuánto queda por leer. */ .carta__avance { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--acento); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } .carta__indice { position: sticky; } /* Utilidad: texto sólo para lectores de pantalla. */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ===================================================================== LA CARTA ===================================================================== */ .carta__cambio { border-block: 1px solid var(--borde); } .carta__cambio ul { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--aire); list-style: none; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; } .carta__cambio ul::-webkit-scrollbar { display: none; } .carta__cambio a { display: block; padding: 18px 26px; text-decoration: none; font-family: var(--titulo); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--texto-suave); border-bottom: 2px solid transparent; transition: color .25s var(--curva), border-color .25s var(--curva); } .carta__cambio a:hover { color: var(--texto); } .carta__cambio a[aria-current] { color: var(--texto); border-bottom-color: var(--acento); } /* Índice pegajoso de apartados. ⚠️ Fondo SÓLIDO, no translúcido. Se probó con `color-mix` al 94 % y `backdrop-filter`, y los nombres de los platos se leían a través de la barra mientras pasaban por detrás. Una barra de navegación no necesita efecto: necesita que se lea lo que pone. */ .carta__indice { position: sticky; top: var(--alto-cabecera); z-index: 20; background: var(--fondo); border-bottom: 1px solid var(--borde); } .carta__indice ul { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--aire); list-style: none; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; } .carta__indice ul::-webkit-scrollbar { display: none; } /* Un desvanecido al borde para que se vea que la lista sigue, en vez de cortar un rótulo por la mitad y parecer un fallo. */ .carta__indice, .carta__cambio { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%); } @media (min-width: 900px) { .carta__indice, .carta__cambio { -webkit-mask-image: none; mask-image: none; } } .carta__indice a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; text-decoration: none; white-space: nowrap; font-family: var(--titulo); font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-suave); border-bottom: 2px solid transparent; transition: color .25s var(--curva), border-color .25s var(--curva); } .carta__indice a:hover { color: var(--texto); } .carta__indice a.actual { color: var(--acento-tinta); border-bottom-color: var(--acento); } /* ── El icono de cada apartado — Carlos, 2026-08-21 ───────────────── Doce nombres en versalitas, del mismo cuerpo y en una fila que se desliza, se leen como un muro: no se distingue uno de otro sin pararse a leer. Con una silueta delante, cada apartado se reconoce de un vistazo y la fila deja de ser un bloque gris. ⚠️ Hereda el color del enlace (`currentColor`), así que se enciende con él al llegar a su apartado. Y `flex: 0 0 auto` para que no lo encoja la fila deslizante: sin eso los iconos se aplastan a 9px cuando hay muchos apartados. */ .carta__icono { width: 17px; height: 17px; flex: 0 0 auto; margin-right: 7px; opacity: .78; transition: opacity .25s var(--curva); } .carta__indice a:hover .carta__icono, .carta__indice a.actual .carta__icono { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════ EL ÍNDICE, ABAJO Y FLOTANDO — Carlos, 2026-08-21 ═══════════════════════════════════════════════════════════════════ «Baja lo de pasta y eso para abajo, con iconos, en una pill flotante slide.» Pegado bajo la cabecera se comía 45px de pantalla en un teléfono —encima de una cabecera que ya ocupa 57— y empujaba la carta hacia abajo todo el rato. Abajo no le quita sitio a nada: el pulgar llega solo y la carta se lee entera. ⭐ SE PUEDE PORQUE EN LAS CARTAS NO HAY BARRA DE APP. Es la única parte del sitio donde ese hueco de abajo está libre, y por eso aquí cabe y en el resto no. Si algún día la barra vuelve a las cartas, esto y ella se pisan. La forma es la de la barra de app —misma píldora, mismo marrón, mismo aire al borde—: no se inventa un componente nuevo para lo mismo. ⚠️ ESTE BLOQUE VA DESPUÉS de las reglas normales del índice, no antes. Puesto arriba, la regla base `.carta__indice a` —que pesa lo mismo— ganaba por ir después y el texto salía en tinta marrón sobre el marrón de la píldora: no se leía nada. */ @media (max-width: 899px) { .carta__indice { position: fixed; z-index: 44; top: auto; left: 8px; right: 8px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--marron); border: 0; border-radius: 26px; box-shadow: 0 10px 30px rgba(26, 16, 10, .38); /* ⚠️ El desvanecido del borde va SÓLO a la derecha aquí: con la píldora redondeada, el de la izquierda se comía la primera silueta y parecía que el icono estaba cortado. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%); } .carta__indice ul { gap: 4px; padding: 0 6px; scroll-snap-type: x proximity; } .carta__indice li { scroll-snap-align: center; scroll-snap-stop: always; } .carta__indice a { min-height: 46px; padding: 8px 14px; color: rgb(255 255 255 / .82); border-bottom: 0; border-radius: 20px; /* ⛔ EN FILA, NO EN COLUMNA. El primer intento puso la silueta encima y el nombre debajo, como la barra de app. Pero allí los nombres son de una palabra —HOME, BOOK— y aquí hay «TACOS & QUESADILLAS»: con `nowrap` y una columna de 46px, el texto se salía por los lados y se montaba encima de los apartados vecinos. En fila cada uno ocupa lo que mide y la píldora se desliza, que es para lo que está. */ flex-direction: row; gap: 7px; font-size: .62rem; letter-spacing: .11em; } .carta__indice a.actual { color: #fff; background: rgb(255 255 255 / .12); border-bottom-color: transparent; } .carta__icono { width: 18px; height: 18px; margin-right: 0; } /* Y la carta necesita sitio al final para que la píldora no le tape el último plato. La cuenta es la de la propia píldora. */ .pagina-food-menu main, .pagina-mixology main, .pagina-desserts main { padding-bottom: calc(46px + 16px + 14px + 22px + env(safe-area-inset-bottom, 0px)); } } /* ⚠️ Iba en TERRACOTA y era el único título de sección del sitio con otro color (auditoría 2026-08-17). Los títulos son de tinta; el acento se reserva para rótulos y enlaces. */ /* ── Los apartados, como abre una carta de verdad ────────────────── Carlos, 2026-08-24, eligiendo la maqueta C: el apartado deja de estar centrado y en tinta —donde se confundía con un titular más del sitio— y abre a la IZQUIERDA, grande, en el naranja de atardecer y con un filete que se estira hasta el borde. Es lo que marca el corte entre FRESH y HOT sin necesidad de un bloque de color. ⚠️ El filete se estira con lo que SOBRE (`flex: 1`), no con un ancho fijo: así funciona igual con «FRESH» que con «TACOS & QUESADILLAS». ⚠️ EL COLOR SE MIDIÓ, Y EL PRIMERO NO PASABA. Se puso `--boton-honda` pensando que a 24px valía la regla de texto grande (3:1) — pero el título quedó en 22,08 con peso 600, y «grande» sólo empieza en 18,66 si el peso es 700. A 3,77:1 no cumplía. Lleva `--acento-titulo`, el mismo tono de atardecer hundido hasta 4,52:1. */ .carta__grupo { font-size: var(--t-seccion); text-align: left; margin: clamp(56px, 7vw, 96px) 0 0; } .carta__seccion { padding-block: clamp(36px, 5vw, 56px); /* Que el índice pegajoso no se coma el título al saltar a un apartado. */ scroll-margin-top: calc(var(--alto-cabecera, 88px) + 16px); } /* ⚠️ EL CUERPO SALE DE LA ESCALA, NO SE INVENTA. El primer intento le puso un `clamp` propio de 24 → 29,6px y el auditor de escalas lo cazó: dos cuerpos distintos para el mismo papel. FRESH y HOT son títulos de SECCIÓN de la carta, así que llevan `--t-seccion` como los demás títulos de sección del sitio: 22,1 en el teléfono y 34 en la pantalla. Lo que lo separa de STARTERS —que es el grupo— no es el tamaño: es el color y el filete. */ .carta__titulo { display: flex; align-items: center; gap: 14px; font-size: var(--t-seccion); letter-spacing: .05em; text-transform: uppercase; text-align: left; color: var(--acento-titulo); } .carta__titulo::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--acento-titulo), transparent); } .carta__nota { color: var(--texto-suave); font-size: var(--t-apoyo); margin-top: .9em; } /* ⭐ CADA PLATO, UNA TARJETA — Carlos, 2026-08-21: «métemelos en card». Antes eran filas sueltas sobre el papel, separadas sólo por aire: con 55 platos seguidos, la vista no encontraba dónde empieza uno y acaba el otro. La tarjeta le pone borde al bocado. ⚠️ ESQUINAS RECTAS, como todo el sitio. Y papel elevado —la crema del PSD— sobre el arena: es el mismo escalón que usan las demás superficies que se levantan, no un gris inventado para esto. */ /* ⛔ LA TARJETA SE FUE — Carlos, 2026-08-24, eligiendo la maqueta C. Las tarjetas se pusieron el 21 de agosto para que la vista supiera dónde acaba un plato y empieza el otro, y ese problema lo resolvían. Pero con 31 de 55 platos sin foto, cada tarjeta enseñaba ADEMÁS su hueco vacío: una caja vacía se ve mucho más que un renglón vacío. Ahora separa una línea fina sobre el papel del sitio, que es como lo hace la carta de Frog's —la referencia que puso él— y como se separan las cosas en el resto de esta web. Lo que llena el hueco es el icono del apartado; eso vive en `.plato__silueta`, más abajo. ⚠️ Medido antes y después a 390px: la carta pasa de 13,0k a 12,8k px de alto y el plato deja de ir de 66 a 304 —los 31 sin foto ya no se encogen a la mitad de alto que sus vecinos—. ⚠️ Las tres maquetas que NO se eligieron están guardadas en `_maquetas/carta-movil/`, con el porqué de cada una. */ .carta__platos { display: grid; gap: 0; margin-top: 20px; } .plato { background: none; border: 0; border-bottom: 1px solid var(--borde); padding: 18px 0; } /* ⚠️ El último sin línea sólo donde la carta va en UNA columna: con dos, `:last-child` es el último del grid entero y dejaba la columna izquierda cerrada y la derecha abierta. Con dos columnas la línea final cierra el apartado, que es lo que se quiere. */ @media (max-width: 899px) { .plato:last-child { border-bottom: 0; } } /* ⚠️ El plato es una fila: miniatura a un lado, texto al otro. Se probó con la foto a todo el ancho de la columna y ocupaba media pantalla por platillo: en una carta de 55 platos, la foto acompaña, no manda. ⭐ TODOS LOS PLATOS LLEVAN LA REJILLA, TENGAN FOTO O NO — Carlos, 2026-08-21. Antes los que no tenían foto ocupaban la fila entera y empezaban pegados al margen, mientras los que sí la tienen empezaban 200px más adentro: la carta se leía como dos listas mezcladas. Con 31 de 55 platos sin foto, eso es más de la mitad desalineada. Ahora el hueco de la foto se RESERVA siempre. Cuando no hay imagen no se dibuja nada —nada de 31 cuadrados grises—: sólo se respeta el sitio, y todos los nombres arrancan en la misma vertical. */ .plato { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: .35em 14px; align-items: start; align-content: start; } .plato__nombre { grid-column: 2; } .plato__desc { grid-column: 2; } /* ⚠️ La foto ocupa las dos filas y el texto la segunda columna. Sin esto el nombre cae al lado de la foto pero la descripción se va DEBAJO de ella, en una columna de 96 px, y sale una palabra por línea. */ .plato__foto { grid-row: 1 / span 2; } /* ⚠️ EN VERSALITAS. Es lo que hace que la columna se lea como una carta y no como una lista de párrafos: el nombre y la descripción dejan de pesar lo mismo. Frog's lo lleva a 700; la Titular Freds a 600 ya marca igual, que es de trazo más fino. */ .plato__nombre { font-family: var(--titulo); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .35em; } /* La ración va aparte del nombre, en gris y más pequeña: es un dato, no parte de cómo se llama el plato. */ .plato__racion { font-family: var(--cuerpo); font-weight: 400; font-size: .82em; color: var(--texto-suave); margin-left: .5em; letter-spacing: 0; } /* ⛔ El precio NO va con `float: right`. Al ir después del nombre en el HTML, el texto ya está colocado cuando aparece el float y no lo esquiva: en móvil el precio se montaba encima del nombre en 23 platos (2026-08-31, al traer los precios del menú del cliente). Los dos extremos de la línea, con el precio entero y sin partir. */ .plato__nombre { display: flex; align-items: baseline; gap: .75em; flex-wrap: nowrap; } .plato__nombre-txt { flex: 1 1 auto; min-width: 0; } /* ⚠️ Sin `flex-shrink: 0` el precio se parte —«$1,\n200»— en cuanto el nombre es largo; y con `wrap` salta a una línea suya y queda suelto a la derecha. Se queda en la primera línea, que es donde lo busca quien lee una carta. */ .plato__precio { flex: 0 0 auto; margin-left: auto; white-space: nowrap; color: var(--acento-tinta); } /* ⭐ A LA IZQUIERDA, no justificado — Carlos, 2026-08-21: «todo va en el menú justificado a la izquierda». La ley de la casa manda justificar las descripciones con la última línea centrada, y eso vale para un párrafo que se lee de corrido. En una CARTA no: son 55 descripciones cortas, de dos o tres líneas, y cada una acababa con su última línea centrada — la columna quedaba con el borde izquierdo aserrado y las frases bailando. Aquí manda la lectura en lista: todo alineado por la izquierda. */ .plato__desc { color: var(--texto-suave); font-size: var(--t-apoyo); margin: 0; /* ⚠️ 1,55 y no el 1,65 del cuerpo: en dos o tres líneas dentro de una columna estrecha, el interlineado del texto corrido abre la fila de más y el plato deja de leerse como una unidad. */ line-height: 1.55; text-align: left; } /* ⚠️ 100 × 112, EN RETRATO, no cuadrada. Es la medida de la carta de Frog's, y no es capricho: el rectángulo alto enseña más plato que el cuadrado con el mismo ancho de columna. */ .plato__foto { width: 100px; height: 112px; object-fit: cover; margin: 0; background: var(--fondo-hondo); } /* ── El hueco de los platos sin foto ──────────────────────────────── ⭐ NADIE SIN CARA. Ocupa exactamente lo que ocuparía la foto, para que los nombres sigan arrancando todos en la misma vertical, y lleva el icono de su apartado en trazo fino sobre el papel hondo. ⚠️ Cuando el plato reciba su fotografía esto desaparece solo: lo decide la vista, no el CSS. */ .plato__silueta { grid-row: 1 / span 2; width: 100px; height: 112px; display: flex; align-items: center; justify-content: center; background: var(--fondo-hondo); } .plato__silueta svg { width: 42px; height: 42px; opacity: .45; } @media (min-width: 900px) { .plato { grid-template-columns: 120px minmax(0, 1fr); gap: .35em 18px; padding: 22px 0; } .plato__foto, .plato__silueta { width: 120px; height: 134px; } .plato__silueta svg { width: 50px; height: 50px; } } .plato--destacado .plato__nombre { color: var(--acento-tinta); } .aviso-vacio { text-align: center; color: var(--texto-suave); padding: 64px var(--aire); } /* Cierre de página: la llamada a reservar, en la terracota del PSD. ⚠️ Con texto BLANCO: 5,20:1. La tinta oscura que llevaba cuando el acento era dorado se queda en 1,8:1 sobre este color. */ .cierre-carta { background: var(--acento); color: #fff; text-align: center; padding: clamp(64px, 9vw, 120px) var(--aire); } /* ⚠️ El titular llevaba `--t-seccion` pero NINGÚN ancho, así que en una pantalla grande se estiraba a 1.236px en una sola línea, pegado a los bordes, mientras el párrafo de debajo iba limitado a 48ch: el bloque quedaba descompensado. Medido el 2026-08-18 en 1280px. */ .cierre-carta h2 { font-size: var(--t-seccion); max-width: 26ch; margin-inline: auto; } .cierre-carta p { margin: 1em auto 2em; color: rgb(255 255 255 / .92); max-width: 48ch; } /* ===================================================================== PRENSA ===================================================================== */ /* ⚠️ SIN CAJA, como las citas del bloque de reseñas. Eran diez recuadros iguales con filo y fondo levantado: una rejilla de tarjetas idénticas es lo que hace que una página se lea como plantilla. Lo que ordena aquí es un filete arriba y el aire. */ .prensa { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px, 3.6vw, 52px); } .prensa__nota { background: none; padding: clamp(20px, 2.2vw, 28px) 0 0; border: 0; border-top: 2px solid var(--acento); transition: transform .35s var(--curva); } @media (hover: hover) and (pointer: fine) { .prensa__nota:hover { transform: translateY(-2px); } } .prensa__medio { font-family: var(--titulo); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--acento-tinta); margin: 0 0 .7em; } /* El titular del medio es la cita: a tamaño de lectura, no de pie de foto. */ .prensa__titulo { font-size: var(--t-tarjeta); margin-bottom: .5em; } .prensa__texto { color: var(--texto-suave); font-size: var(--t-cuerpo); } .prensa__enlace { font-family: var(--titulo); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-tinta); text-decoration: none; /* Zona de toque de 44px: el enlace es la acción de la tarjeta, no una palabra suelta dentro de un párrafo. */ display: inline-flex; align-items: center; min-height: 44px; box-shadow: inset 0 -1px 0 currentColor; } .prensa__enlace:hover { color: var(--acento-tinta); } /* ===================================================================== KIDS CLUB ===================================================================== */ /* ⚠️ El bloque que había aquí (tres columnas de texto plano, con la foto suelta encima y el título en versalitas) se retiró el 2026-08-17 al rehacer la página. Lo vigente está al final del archivo, en la sección «FREDDIE'S KIDS CLUB». */ /* ===================================================================== RESERVACIONES ===================================================================== */ .reservas { display: grid; gap: 48px; padding-bottom: var(--hueco-bloque); } .reservas h2 { /* ⚠️ Estos h2 no son titulares: son ETIQUETAS de dato —«Horario», «Dirección»— y ya venían con el traje de rótulo (versalitas, mucho espaciado, terracota). Lo que no cuadraba era el cuerpo: .82rem (13,1px) cuando el rótulo de la casa es .7rem. Ahora usan la misma escala que todos los rótulos del sitio. */ font-size: var(--t-rotulo); font-family: var(--titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--acento-tinta); margin-bottom: .7em; } .reservas h2:not(:first-child) { margin-top: 2em; } .reservas address { font-style: normal; } .reservas__contacto { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; } .reservas__widget { border: 1px solid var(--borde); padding: clamp(22px, 3vw, 38px); } /* ===================================================================== BLOG ===================================================================== */ /* ── EL ÍNDICE DEL BLOG, EN TARJETAS ─────────────────────────────── Carlos, 2026-08-17: «esto tiene que ser en card». Eran foto, fecha, titular y extracto sueltos y centrados sobre el papel: sin caja que los contuviera, tres entradas seguidas se leían como un solo bloque de texto con fotos intercaladas, y el titular no se distinguía del extracto. Ahora es la MISMA tarjeta que el resto del sitio: caja de papel levantado, filo de 1px y esquinas rectas. ⭐ 2026-08-17 · Carlos: «quítale el extracto y colócale botón, centra los títulos». Sin el extracto —que era el arranque del post cortado a mitad de frase— la tarjeta se queda en fecha, titular y botón, y así el centrado sí funciona: lo que había desaconsejado el centrado era tener cuatro párrafos de largo distinto uno debajo de otro. */ .blog__rejilla { list-style: none; margin: 0 auto; display: grid; gap: clamp(18px, 2vw, 28px); /* ⚠️ La rejilla no vivía dentro de `.contenedor` y con las tarjetas puestas se veía: llegaban a tocar el filo de la pantalla. */ /* ⚠️ Con padding-top 0 las tarjetas nacían pegadas a la banda del banner, sin un respiro entre el marrón y la primera foto. */ max-width: var(--ancho); padding: clamp(36px, 5vw, 72px) var(--aire) var(--hueco-bloque); } .blog__rejilla .tarjeta { display: flex; flex-direction: column; background: var(--fondo-alto); border: 1px solid var(--borde); overflow: hidden; transition: border-color .3s var(--curva), transform .3s var(--curva); } @media (hover: hover) and (pointer: fine) { .blog__rejilla .tarjeta:hover { border-color: var(--acento); transform: translateY(-3px); } } .blog__rejilla a { text-decoration: none; display: block; } .blog__rejilla img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s var(--curva); } @media (hover: hover) and (pointer: fine) { .blog__rejilla .tarjeta:hover img { transform: scale(1.03); } } .blog__rejilla .tarjeta > a:first-child { overflow: hidden; } .tarjeta__cuerpo { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: .55em; flex: 1 1 auto; text-align: center; align-items: center; } .blog__rejilla .tarjeta__meta { margin: 0; font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--acento-tinta); } /* ⚠️ `.tarjeta__titulo` es SÓLO del blog: la llevan la rejilla de `/blog/` y los relacionados del pie de un post, y nadie más. Por eso el tamaño puede ir en la clase y vale para los dos sitios; antes lo ponía `h3 { font-size: var(--t-tarjeta) }`, la escala por defecto de los encabezados, y de ahí venía el descuadre. */ .blog__rejilla h2, .blog__rejilla h3, .tarjeta__titulo { font-size: var(--t-blog); margin: 0; line-height: 1.3; text-wrap: balance; /* centrado, las líneas se reparten parejas */ } /* El botón cierra la tarjeta y se apoya abajo: con titulares de una y de tres líneas, los botones de la fila quedan a la misma altura. */ .tarjeta__boton { /* ⚠️ Aquí había un `padding-top: 12px` que pisaba los 15 de `.boton`: con el botón vacío no se veía, pero desde que lleva relleno naranja (2026-08-21) dejaba 12 de aire arriba y 15 abajo, y el texto salía descentrado dentro de su propia caja. El aire de separación lo pone `margin-top: auto`, que es lo suyo; el de dentro, `.boton`. */ margin-top: auto; align-self: center; /* ⛔ Tenía cuerpo propio (.78rem) y era el ÚNICO botón del sitio con una letra distinta. Hereda el de `.boton` y se acabó. */ letter-spacing: .16em; } .blog__rejilla .tarjeta__extracto { margin: 0; color: var(--texto-suave); font-size: var(--t-apoyo); } .blog__rejilla a:hover h2, .blog__rejilla a:hover h3 { color: var(--acento-tinta); } @media (min-width: 720px) { .blog__rejilla { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .blog__rejilla { grid-template-columns: repeat(3, 1fr); } } /* ── LA ENTRADA DEL BLOG ──────────────────────────────────────────── Carlos, 2026-08-17: «las fotos van primero a un 80% de ocupación de pantalla, el título en dos líneas, centrado y con letras más pequeñas». Abre como abre el resto del sitio: media primero, texto después. */ .post__portada { margin: 0 0 clamp(28px, 4vw, 56px); width: 100%; height: 80svh; background: var(--marron); /* color de espera mientras carga */ } .post__portada img { width: 100%; height: 100%; object-fit: cover; display: block; } .post { max-width: 74ch; margin: 0 auto; padding: 0 var(--aire) var(--hueco-bloque); } /* La cabecera de la entrada: ancho propio, MAYOR que el de lectura. ⚠️ Dentro del artículo el titular heredaba los 74ch de la columna de texto, y con eso uno de 87 caracteres no cabía en dos líneas por mucho que se le topara la medida. Aquí tiene 980px y baja de tamaño —lo que pidió Carlos: «letras más pequeñas»—, y con las dos cosas los titulares del blog caen en DOS líneas. Los kilométricos (uno de los 562 tiene 129 caracteres) siguen cayendo en tres: para meterlos en dos habría que recortarles el titular, y el titular es del cliente. */ .post__cabeza { max-width: 980px; margin: 0 auto; padding: 0 var(--aire); text-align: center; } .post__titulo { font-size: clamp(1.3rem, 2.2vw, 1.72rem); line-height: 1.16; margin: 0 0 .5em; text-wrap: balance; } .post__cabeza .post__meta { margin-bottom: clamp(26px, 3.4vw, 44px); } .post__cuerpo { font-size: var(--t-cuerpo); } .post__cuerpo img { margin: 2em 0; width: 100%; } .post__cuerpo h2, .post__cuerpo h3 { margin-top: 1.8em; margin-bottom: .5em; } .post__cuerpo a { color: var(--acento-tinta); } .post--legal .post__cuerpo { font-size: var(--t-apoyo); color: var(--texto-suave); } .paginacion { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 var(--aire) var(--hueco-bloque); } .paginacion a, .paginacion span { min-width: 46px; min-height: 46px; display: grid; place-items: center; border: 1px solid var(--borde); text-decoration: none; font-size: .86rem; } .paginacion a:hover { border-color: var(--acento); color: var(--acento-tinta); } .paginacion .actual { background: var(--acento); border-color: var(--acento); color: #fff; } /* ===================================================================== LINKTREE (página de paso desde redes, sin cabecera ni pie) ===================================================================== */ .linktree { max-width: 440px; margin: 0 auto; padding: 56px var(--aire); text-align: center; } .linktree__logo { margin: 0 auto; width: 170px; } .linktree__lema { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--acento-tinta); margin-top: 1.4em; } .linktree__enlaces { list-style: none; margin: 34px 0; padding: 0; display: grid; gap: 10px; } .linktree__enlaces .boton { width: 100%; } .linktree__pie { color: var(--texto-suave); font-size: .86rem; } /* ── Pie ───────────────────────────────────────────────────────────── */ .pie { background: var(--fondo-hondo); color: var(--texto-suave); border-top: 1px solid var(--borde); padding: clamp(56px, 7vw, 88px) var(--aire) 32px; font-size: var(--t-apoyo); } .pie__interior { max-width: var(--ancho); margin: 0 auto; display: grid; gap: 38px; } .pie__titulo { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texto); margin: 0 0 1em; } .pie ul { list-style: none; margin: 0; padding: 0; } .pie a { color: var(--texto-suave); text-decoration: none; display: block; padding: 8px 0; } .pie a:hover { color: var(--acento-tinta); } .pie__marca img { width: 156px; margin-bottom: 16px; } .pie__lema { font-family: var(--titulo); font-size: var(--t-rotulo); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--acento-tinta); } .pie__direccion { font-style: normal; margin-bottom: 1em; } .pie__dato { display: block; padding: 4px 0; } .pie__redes { display: flex; gap: 18px; margin-top: .6em; flex-wrap: wrap; } .pie__redes a { padding: 10px 0; font-size: .86rem; } /* ===================================================================== LA PLECA DE GRUPO ANDERSON'S ===================================================================== Las 16 marcas del grupo en un marco, con el logo del grupo partiendo el filo de arriba. Traída de Señor Frog's el 2026-08-12. ⚠️ La diferencia con Frog's es el color. Allí la pleca se apoya en una banda roja y los logos se invierten a blanco. El pie de Fred's es arena claro, así que aquí se tiñen de tinta con `brightness(0)` y se apagan un poco: 16 logos negros a plena carga pesan más que el propio pie y le roban la atención al contenido. ⚠️ El logo del grupo lleva el fondo del pie a los lados para CORTAR la línea del marco. Si se cambia el fondo del pie, hay que cambiarlo también aquí o aparecerá un trozo de borde cruzándolo. ===================================================================== */ /* ⚠️ Sin margen superior desde que el pie se quedó sin las cuatro columnas (2026-08-12): la pleca es ahora lo primero del pie y el `padding` del propio `.pie` ya le da todo el aire que necesita. */ .pleca { margin-top: 0; } .pleca__marco { position: relative; max-width: var(--ancho); margin: 0 auto; border: 1px solid var(--borde); padding: clamp(40px, 5vw, 54px) clamp(18px, 3vw, 34px) clamp(24px, 3vw, 34px); } .pleca__grupo { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--fondo-hondo); /* el mismo papel del pie: tapa la línea */ padding: 2px 22px; line-height: 0; } .pleca__grupo img { height: clamp(38px, 5vw, 52px); width: auto; display: block; filter: brightness(0); opacity: .72; } .pleca__marcas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; } .pleca__marcas a { display: inline-flex; align-items: center; justify-content: center; /* Zona de toque: los logos miden 26px de alto y solos se quedarían muy por debajo del mínimo de 44px para el dedo. */ min-height: 44px; padding: 0 2px; /* ⛔ `flex: 0 0 auto` es OBLIGATORIO. Sin él, en la fila sin envolver de escritorio los enlaces se encogen —flex-shrink vale 1 por defecto— y como los SVG del grupo no traen ancho ni alto propios, sólo `viewBox`, se quedan en CERO y la pleca sale vacía. Sólo sobrevivía el PNG del Nassau Port, que sí tiene medidas. En Frog's esto se resolvió con `display: contents`, pero eso aquí se llevaría por delante la zona de toque. */ flex: 0 0 auto; } .pleca__marcas img { /* Alto fijo y ancho tope: los SVG no traen medidas propias, así que sin un `height` concreto el navegador les da su tamaño por defecto. */ /* ⚠️ ANCHO FIJO, no `auto` (2026-09-15). Los 16 logos cargan en diferido y, mientras no llegan, miden 0 de ancho: cabían todos en una fila y, al cargar, la pleca pasaba de 106 a 292 px y empujaba el pie entero mientras se bajaba en el teléfono. Con la caja reservada el logo se encaja dentro (`contain`) y no se mueve nada. */ height: 26px; width: 62px; max-width: 62px; object-fit: contain; filter: brightness(0); opacity: .42; transition: opacity .22s var(--curva-color), transform .22s var(--curva); } .pleca__marcas a:focus-visible img { opacity: .92; transform: translateY(-2px); } @media (hover: hover) and (pointer: fine) { .pleca__marcas a:hover img { opacity: .92; transform: translateY(-2px); } } @media (min-width: 1100px) { /* En pantalla ancha caben las 16 en una sola fila, que es como se lee de un vistazo que son una familia y no una lista. */ .pleca__marcas { flex-wrap: nowrap; justify-content: space-between; gap: 10px; } .pleca__marcas img { height: 30px; width: 54px; max-width: 54px; } } .pie__legal { text-align: center; margin: 40px 0 0; font-size: .8rem; color: var(--texto-suave); padding-top: 24px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; justify-content: center; /* ⚠️ Hay un `p { max-width: var(--medida) }` global —la medida de lectura— y este párrafo también lo heredaba: el copyright salía dentro de una caja de 490 px pegada a la izquierda, con la línea de arriba cortada a un tercio del ancho. Aquí no se lee un texto corrido, se cierra el pie. */ max-width: none; } /* Zona de toque de 44px para el único enlace que queda en el pie. El copyright toma la misma altura para que los dos queden a nivel. */ .pie__legal-texto, .pie__legal-enlace { display: inline-flex; align-items: center; min-height: 44px; } .pie__legal-enlace { color: var(--texto-suave); text-decoration: none; transition: color .22s var(--curva-color); } .pie__legal-enlace:hover { color: var(--acento-tinta); } /* ===================================================================== MOVIMIENTO ===================================================================== Una sola idea: lo que entra en pantalla aparece. Sin bucles infinitos, sin parallax, sin secuestrar el scroll. Lo mueve un IntersectionObserver desde sitio.js, nunca un escuchador de scroll. ===================================================================== */ /* ⚠️ Sólo se esconde si hay JavaScript que pueda devolverlo (la clase `js` la pone el head). Sin JavaScript el sitio se lee entero. */ .js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--curva), transform .8s var(--curva); } .js .revelar.visible { opacity: 1; transform: none; } /* ⚠️ EL MENÚ COMPLETO ENTRA A PARTIR DE 1000px, no de 900. Al entrar Cancún en la barra el nav creció y a 900px se metía debajo del logo. Medido forzando el nav visible a cada ancho: a 940px sobran 18px por cada lado, y a 900px FALTAN 14 en inglés y 20 en español —el español es el que manda, que sus etiquetas son más largas. Por debajo de 1000 manda la hamburguesa, que lleva los mismos enlaces. Si se añade otra entrada al menú, se vuelve a medir. */ @media (min-width: 1000px) { .cabecera__nav { display: block; } .cabecera__hamburguesa { display: none; } } /* ── Escritorio ────────────────────────────────────────────────────── */ @media (min-width: 900px) { .cabecera__reserva-largo { display: inline; } .cabecera__reserva-corto { display: none; } /* ⛔ El hero NO se parte en escritorio. Antes había aquí un `grid-template-columns` que lo dejaba en 50/50 con el texto a un lado y el vídeo al otro. En Grupo Anderson's la portada abre al 100% y ese reparto no se usa. La regla completa está en el bloque PORTADA. */ /* La bienvenida se reparte: el titular a la izquierda y la entrada a la derecha. La columna del titular pesa más que la del texto porque en mayúsculas y a dos líneas necesita sitio: con el reparto anterior (1.05fr) la línea más larga pedía 655 px donde sólo había 576, y caía en tres líneas. */ /* Centrado, no `start`: las dos columnas miden distinto —el titular son dos líneas grandes y el texto cuatro pequeñas— y ancladas arriba el titular quedaba colgando sobre un hueco vacío. Al retirarse los botones el desnivel se notaba más. 2026-08-11 */ .bienvenida__interior { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } /* ⛔ Aquí había un `margin-top: .35em` en la entrada, que servía para casar su primera línea con la del titular cuando se alineaban por arriba. Con el centrado sobra, y dejarlo descuadraba el nivelado. */ /* Las tarjetas dejan de deslizarse y se reparten. La de alimentos ocupa el doble: es la que busca la gente. */ .cartas-home__lista, .indice-cartas { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1.4fr 1fr 1fr; overflow: visible; padding-inline: var(--aire); gap: 18px; } .cartas-home__item img { aspect-ratio: 4 / 5; } .cartas-home__item:first-child img { aspect-ratio: 3 / 4.4; } /* ⚠️ SIN HUECO VERTICAL: desde el 2026-08-24 lo que separa un plato del siguiente es la línea, no el aire. Con los 34px de antes la línea quedaba flotando a media distancia de los dos y no se sabía de cuál era. El hueco entre las dos COLUMNAS se queda. */ .carta__platos { grid-template-columns: 1fr 1fr; gap: 0 60px; } /* ⛔ Aquí estaba también `.blog-home__lista` a tres columnas, de cuando eran tres tarjetas iguales. Al rehacer el bloque el 2026-08-12 esta regla —que viene DESPUÉS en el archivo— pisaba el nuevo reparto de «una manda y dos acompañan» y las tres volvían a salir en fila. El del blog completo (`.blog__rejilla`) sí sigue a tres. */ .blog__rejilla { grid-template-columns: repeat(3, 1fr); } .kids__zonas { grid-template-columns: repeat(3, 1fr); } .prensa { grid-template-columns: 1fr 1fr; gap: 18px; } .reservas { grid-template-columns: 1fr 1fr; gap: 64px; } .pie__interior { grid-template-columns: 1.4fr 1fr 1fr 1fr; } /* ⛔ Aquí había un `grid-template-columns: 1fr 1fr` para la propuesta, de cuando la sección era sólo titular y párrafo. Pisaba —por venir después en el archivo— al reparto que necesita ahora que lleva las tres fotos. El reparto vive en el bloque de LA PROPUESTA CULINARIA, junto al resto de sus reglas. */ /* ⛔ Y aquí había un `.propuesta p { margin-top: 0 }`, de cuando el titular iba en una columna y el párrafo en la otra: entonces no hacía falta separarlos. Ahora viven en la misma columna y ese cero dejaba el texto pegado al titular. */ /* ⛔ Aquí había un `.grupos-home__interior` a `1fr 1fr`, del montaje que tenía el titular en una columna y el párrafo en la otra. Al rehacer la sección el 2026-08-13 esta regla —que viene DESPUÉS en el archivo— pisaba el reparto nuevo de foto + texto. Es la segunda vez que pasa lo mismo en este archivo, después del blog: cuando se rehace un componente hay que buscar su nombre en TODO el CSS, no sólo donde vive su bloque. */ } @media (min-width: 1200px) { .carta__platos { grid-template-columns: repeat(2, 1fr); gap: 0 88px; } } /* Quien pide menos movimiento, no lo recibe. ⚠️ Esto es lo ÚNICO del ordenador del visitante que la web sigue obedeciendo, y a propósito: no es un ajuste de gusto como el modo oscuro, es un ajuste médico. Quien lo activa suele hacerlo porque el movimiento en pantalla le provoca mareo o migraña. No cambia ni un color, ni una letra, ni una medida: la web se ve exactamente igual, sólo que las cosas aparecen sin deslizarse. La identidad no se toca. ⛔ 2026-08-13 · ESTE BLOQUE MATABA DEMASIADO. Llevaba un `transition-duration: .01ms !important` sobre `*`, que apaga TODAS las transiciones, no sólo las que mueven: también el cambio de color de un botón al pasar por encima, el del enlace al recibir el foco y el del borde de una tarjeta. Eso NO es movimiento, es feedback — y sin él la interfaz deja de responder para quien más ayuda necesita. El propio comentario de aquí arriba prometía «no cambia ni un color» y el código hacía justo lo contrario. Menos movimiento significa MENOS Y MÁS SUAVE, no CERO. Ahora la transición se limita a las propiedades que NO desplazan —color, opacidad, borde, sombra—, así que nada se mueve pero la web sigue contestando cuando la tocas. ⛔ Y NO se pone `transform: none` sobre `*`. Parece la solución evidente y rompe el sitio: aquí `transform` no sólo anima, también COLOCA. El logo del grupo va centrado con `translate(-50%,-50%)`, la barra de avance de la galería se dibuja con `scaleX()`, y los platos de los pases se dimensionan con `scale(.9)`. Apagarlo a lo bruto descoloca las tres cosas. Los `transform` que sí animan los neutraliza cada escena en su propio bloque de `prefers-reduced-motion` —hay siete repartidos por este archivo—, que es donde se sabe cuál mueve y cuál coloca. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { /* Se apaga el desplazamiento, no la respuesta. */ transition-property: opacity, color, background-color, border-color, box-shadow, fill, stroke, filter !important; transition-duration: .18s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .js .revelar { opacity: 1; transform: none; } } /* ===================================================================== BOTÓN FLOTANTE DE GRUPOS ===================================================================== Fijo abajo a la derecha, en todas las páginas menos las de grupos. ⚠️ El hueco de abajo lleva `env(safe-area-inset-bottom)`: en un iPhone sin botón físico, la barra de gestos se come los últimos 34 px y el botón quedaría pisado por ella. ⚠️ El `z-index` es 40, por DEBAJO de la cabecera (50) y del menú desplegado: si se pone por encima, tapa el menú de móvil cuando está abierto. ===================================================================== */ .flotante-grupos { position: fixed; right: clamp(16px, 2.5vw, 28px); bottom: calc(clamp(16px, 2.5vw, 28px) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; /* zona táctil holgada */ padding: 0 20px; /* El turquesa de marca con letra e icono en blanco, a petición de Carlos (2026-08-11). Va en otro color que «Reservar mesa» a propósito: dos botones dorados en pantalla compiten entre sí en vez de turnarse, y reservar debe seguir siendo la acción principal. ⭐ 2026-08-21: Carlos zanjó la duda —«igual al de Book a table»—, así que este también se va al naranja. La distinción entre las dos llamadas no la lleva el color: la lleva el sitio donde vive cada una. Si algún día vuelven a competir, el que se mueve es éste. ⚠️ Aquel turquesa daba 3,5:1 con el blanco encima, por debajo del mínimo de 4,5. El naranja de atardecer llega a 4,52 y su borde hondo es lo que lo separa del papel: los dos números se miden, no se estiman. */ background: var(--boton); color: var(--boton-tinta); border: 1px solid var(--boton-borde); font-family: var(--titulo); font-size: var(--t-boton); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; box-shadow: 0 6px 20px rgba(26, 34, 41, .28); transition: background .25s var(--curva), transform .25s var(--curva), box-shadow .25s var(--curva); } .flotante-grupos:hover { background: var(--boton-honda); /* el mismo naranja, un punto más hondo */ border-color: var(--boton-honda); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26, 34, 41, .34); } .flotante-grupos:active { transform: translateY(0); } .flotante-grupos__icono { width: 22px; height: 22px; flex: 0 0 auto; } /* En móvil se queda en círculo: la palabra ocuparía media pantalla y el botón taparía el contenido. El nombre sigue en el `aria-label`. */ @media (max-width: 599px) { .flotante-grupos { width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; } .flotante-grupos__texto { display: none; } .flotante-grupos__icono { width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { .flotante-grupos, .flotante-grupos:hover { transition: none; transform: none; } } /* Quien pide menos movimiento ve las tres fotos quietas en su sitio. */ @media (prefers-reduced-motion: reduce) { .cocina__foto { transform: none !important; } .cocina__foto img, .cocina__foto:hover img { transition: none; transform: none; } } /* ===================================================================== LA PORTADA DE LOS PASES — papel claro y el título a mano (2026-09-11) ===================================================================== Carlos: «a esto hay que crearle una portada con la textura pero claro y con este texto, pero el título en la letra esa rara y lo otro normal». El texto es el de la propuesta culinaria, que se apagó esa misma mañana; sale de sus mismas claves, no copiado. ⭐ TODO EN VARIABLES `--pp-*`: son las que mueve el afinador en vivo (`?afinar=portada`). Los valores de aquí abajo son el punto de partida; los que elija Carlos con los deslizadores se pegan encima. ⚠️ LA CALIGRÁFICA TIENE DOS REGLAS PROPIAS, ya pagadas en `.firma`: ⛔ nunca en versales —no tiene mayúsculas de verdad, y `uppercase` la convierte en una mezcla ilegible—; ⚠️ `padding-inline` obligatorio: sus trazos se salen de la caja del texto y contra el borde de la columna se recortan. ⚠️ Y NO ES TEXTO PARA LEER, es una firma. Por eso el párrafo va en la Jost de siempre: es lo que Carlos llamó «lo otro normal». */ /* ⭐ LOS NÚMEROS LOS ELIGIÓ CARLOS CON EL AFINADOR (2026-09-11), a 1.440 px de ancho: firma 61, párrafo 19, hueco 56. ⚠️ Llegan en PÍXELES FIJOS y aquí no pueden quedarse así, o el título mediría lo mismo en un teléfono que en un monitor. Cada uno se ha convertido en una recta que pasa por DOS puntos: lo que la portada ya medía a 390 px —que Carlos no afinó y por tanto no se toca— y lo que él eligió a 1.440. Entre medias interpola sola, y los `clamp` la sujetan por los dos extremos. Comprobado: 390 → 41,6 / 16,5 / 18 y 1.440 → 61 / 19 / 56, al decimal. */ .portada-pases { --pp-titulo: clamp(2.6rem, calc(2.1496rem + 1.848vw), 3.8125rem); --pp-color: var(--rojo-spice); /* su tinta */ /* ⚠️ `--t-cuerpo` (16,5) y NO `--t-sub` (17). El primer intento usó la entrada del hero y el auditor de escalas lo cazó al vuelo: este párrafo no es una entrada, es texto de sección, el mismo papel que el de Las Villas o el de Grupos. Dos cuerpos para un mismo papel es justo lo que esa auditoría existe para impedir. */ /* ⭐ 19 px a 1.440, no los 16,5 del texto corrido: lo eligió Carlos con el afinador. Es una decisión de diseño, no un descuido — el párrafo de una portada pesa más que un párrafo de sección—, así que lo que se ajusta es la REGLA: se le declara papel propio en el auditor de escalas, igual que a la firma. En el teléfono sigue en 16,5, que es lo que había y él no afinó. */ --pp-texto: clamp(1.03125rem, calc(.9732rem + .238vw), 1.1875rem); --pp-hueco: clamp(18px, calc(.2429rem + 3.619vw), 56px); /* firma → párrafo */ --pp-medida: 52ch; /* la medida del párrafo */ --pp-aire: clamp(72px, 11vh, 150px); /* el alto, por arriba y abajo */ --pp-tinta: var(--tinta); /* el color del párrafo */ position: relative; padding-block: var(--pp-aire); } .portada-pases__interior { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--aire); text-align: center; } .portada-pases__titulo { font-family: var(--caligrafia); font-weight: 400; font-size: var(--pp-titulo); line-height: 1.06; color: var(--pp-color); text-transform: none; /* ⛔ jamás en versales */ letter-spacing: 0; padding-inline: .12em; /* ⚠️ el aire que piden sus trazos */ margin: 0 0 var(--pp-hueco); /* ⭐ DESGASTADO COMO EL CARTEL — Carlos, 2026-09-14: «que tenga un poquito de desgaste como el master». En el PSD «Sea & Spice» va en `multiply` con motas y rayones blancos de sello gastado. Aquí: el mismo `multiply` (el grano del papel asoma dentro de la letra) y una máscara de motas en baldosa de 512 px (`desgaste-titulo.png`, generada, sin costura). Sigue siendo TEXTO: se lee, se traduce y cuenta para SEO. Para quitarlo, borrar estas líneas. ⚠️ Una máscara recorta TODO lo que sale de la caja del elemento, y las colas de la Mr Dafoe (y, ff, g) cuelgan muy por debajo de su renglón: sin este aire se cortaban en seco. Se da caja por arriba y por abajo y se devuelve con márgenes negativos, así el título no se mueve. */ padding-block: .15em .4em; margin-top: -.15em; margin-bottom: calc(var(--pp-hueco) - .4em); mix-blend-mode: multiply; -webkit-mask-image: url('../img/textura/desgaste-titulo.png'); mask-image: url('../img/textura/desgaste-titulo.png'); -webkit-mask-size: 256px 256px; mask-size: 256px 256px; } .portada-pases__texto { font-size: var(--pp-texto); color: var(--pp-tinta); max-width: var(--pp-medida); margin-inline: auto; margin-block: 0; } /* ── 50/50: EL TEXTO A LA IZQUIERDA, LA ILUSTRACIÓN A LA DERECHA ────── Carlos, 2026-09-14. La ilustración es del estilo del cartel Sea & Spice —óleo empastado recortado sobre el papel— con la langosta de la carta. Va en PNG/WebP con transparencia: el papel es el de la sección, no uno pintado dentro de la imagen, o se vería la costura. En el teléfono se apila: texto arriba, ilustración debajo y más pequeña. El texto sigue centrado en los dos. */ /* ⭐ EL FONDO ES EL PAPEL DEL CARTEL, ENTERO — Carlos, 2026-09-14: «usa esa imagen de fondo para esa sección, la actual se ve como gigante». La de `.papel` es una baldosa de 640 px repetida y teñida: a pantalla completa el grano salía grueso. Esta es la hoja de papel del propio cartel Sea & Spice (1920 px, grano fino), puesta UNA vez a `cover`, sin repetir y sin `multiply` — ya trae su color. El original está en `_interno/_material-cliente/nueva-linea/`. */ .portada-pases.papel { background-color: #efece8; background-image: image-set(url('../img/textura/papel-seaspice-1280.webp') 1x, url('../img/textura/papel-seaspice.webp') 2x); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: normal; } @media (min-width: 900px) { .portada-pases.papel { background-image: url('../img/textura/papel-seaspice.webp'); } } /* Carlos, 2026-09-14: «bájale el tamaño a los platillos un 20 %, en grupo, al plato y bebida». Era min(78vw, 360px) en el teléfono y el 100 % de la columna en escritorio (tope 68svh / 620px): todo pasa al 80 %. Y luego «hazlo un 10 % más grande»: del 80 % al 88 %. */ .portada-pases__ilustracion { margin: var(--pp-hueco) auto 0; max-width: min(68.64vw, 317px); } .portada-pases__ilustracion img { display: block; width: 100%; height: auto; /* la misma sombra corta que el sello: la apoya en el papel sin despegarla */ filter: drop-shadow(0 14px 22px rgb(30 18 12 / .16)); } @media (min-width: 900px) { .portada-pases__interior:has(.portada-pases__ilustracion) { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 72px); width: 100%; } /* Carlos, 2026-09-14: «necesito que se justifique a la izquierda». Sólo en escritorio: en el teléfono el texto va centrado (ley de la casa para móvil) y ahí no hay columna al lado con la que alinearse. ⚠️ La firma conserva su `padding-inline`, así que su primer trazo arranca .12em más adentro que el párrafo: se compensa con un margen negativo igual para que los dos empiecen en la misma vertical. */ .portada-pases__interior:has(.portada-pases__ilustracion) .portada-pases__columna { text-align: left; } .portada-pases__interior:has(.portada-pases__ilustracion) .portada-pases__titulo { margin-inline-start: -.12em; } .portada-pases__interior:has(.portada-pases__ilustracion) .portada-pases__texto { margin-inline: 0; } /* Carlos, 2026-09-14: «plato del lado izquierdo y texto del derecho». Se cambia con `order` y no en el HTML: en el teléfono el texto sigue arriba y la ilustración debajo, y el orden de lectura no cambia. */ .portada-pases__ilustracion { order: -1; margin: 0; max-width: none; width: 100%; justify-self: center; } .portada-pases__ilustracion img { max-height: min(59.84svh, 546px); width: auto; max-width: 88%; margin-inline: auto; } } /* ── EN ESCRITORIO NO ES UNA BANDA: ES LA PRIMERA CARA DE LA ESCENA ── Carlos, 2026-09-11: «esa portada debe ir encima del efecto de los platillos, no como banner arriba». Vive DENTRO de `.pases__pega`, la pantalla que ya está pegada, y cubre la escena entera mientras dura su tramo; después se retira hacia arriba y deja ver los platillos. Es la misma ley que Carlos fijó para los propios pases el 2026-08-18: «todo debe hacerse en una misma sección, de qué vale ese efecto solo». Una banda apilada delante habría alargado la página y roto esa unidad. ⚠️ EN MÓVIL NO. Ahí la escena se deshace —los pases son sliders y `.pases__pega` deja de estar pegada—, así que la portada se queda en el flujo, como un bloque normal: es lo que hacen todas las piezas de esta escena en el teléfono. Ver [[feedback-movil-no-toca-desktop]]. ⛔ Y NO SE VA FUNDIÉNDOSE: SE RETIRA. El primer montaje la desvanecía, y a media transparencia la firma quedaba cruzada encima de «Plate after plate» y de las ostras — dos textos distintos leyéndose a la vez, que es exactamente lo que esta escena evita en el cruce relevando las caras CON LA PANTALLA TAPADA. Así que el papel sube y descubre la escena, opaco de principio a fin, igual que la banda de bienvenida se desliza sobre el vídeo del hero: un folio que se retira, no una imagen que se disuelve. ⚠️ Se está QUIETA más de la mitad de su tramo y sale en el último 40 %: el movimiento es lo último que pasa, no lo que acompaña a la lectura. */ @media (min-width: 900px) { .portada-pases { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding-block: 0; /* `--portada` la publica el JS: 0 cuando la escena asoma, 1 cuando su tramo se ha consumido. */ /* `--pp-espera`: cuánto de su tramo se queda QUIETA antes de empezar a irse. Es el mando que decide si da tiempo a leerla. */ --pp-espera: .58; --pp-sale: clamp(0, calc((var(--portada, 1) - var(--pp-espera)) / (1 - var(--pp-espera))), 1); /* ⭐ SE VA DESENFOCÁNDOSE — Carlos, 2026-09-11: «esa portada desaparece y entran los platos, eso desaparece con blur o algo». ⚠️ EN DOS TIEMPOS, Y NO A LA VEZ. Primero se va el TEXTO, con el papel todavía opaco tapando la escena; sólo cuando la firma ya no está se va el papel y aparecen los platos. Hecho de una sola pieza —todo difuminándose junto— vuelve el fallo del primer montaje: a media transparencia la firma se lee encima de «Plate after plate». ⚠️ El papel se va con `scale(1.03)`. `filter: blur()` difumina TAMBIÉN el borde de la caja, así que sin ese pelo de más se veía asomar el filo de la escena por los cuatro lados durante la salida. */ --pp-papel: clamp(0, calc((var(--pp-sale) - .48) / .52), 1); opacity: calc(1 - var(--pp-papel)); filter: blur(calc(var(--pp-papel) * 9px)); scale: calc(1 + var(--pp-papel) * .03); } /* El texto se adelanta al papel: se desenfoca y se va en la primera mitad de la salida, cuando todavía no se ve nada detrás. */ .portada-pases__interior { --pp-t: clamp(0, calc(var(--pp-sale) / .5), 1); translate: 0 calc(var(--pp-t) * -26px); opacity: calc(1 - var(--pp-t)); filter: blur(calc(var(--pp-t) * 13px)); } } /* ===================================================================== LOS PASES — de la cocina y de la barra ===================================================================== Dos bloques a mitades con las columnas invertidas entre sí. La foto, el nombre y la descripción cambian a la vez mientras se baja. Anatomía de siempre: riel alto (`.pase`) + pantalla pegada (`.pase__pega`). El alto del riel depende de cuántas piezas haya, que lo publica el PHP en `--piezas`: con cuatro platos hace falta más recorrido que con dos, o pasarían atropelladamente. ⛔ Sin `pin` de GSAP. ⛔ Sin `overflow` en los ancestros. ===================================================================== */ /* ⭐ EL RIEL, AHORA UNO SOLO (2026-08-18) Antes cada pase traía su propio riel y su propia pantalla pegada. Hoy hay un único riel para las dos caras y el cruce entre ellas: cocina (piezas × 62svh) + cruce + barra (piezas × 62svh) + la pantalla pegada (100lvh), que es lo que el sticky se «come» al final. El fondo cambia de arena a arena clara al pasar de cara — y lo hace con la pantalla TAPADA de marrón, así que nadie ve el salto. */ .pases { position: relative; /* ⭐ EL TRAMO DE LA PORTADA VA DENTRO DEL RIEL (2026-09-11). Carlos: «esa portada debe ir encima del efecto de los platillos, no como banner arriba». Así que no es una sección que se apile antes: es el PRIMER TRAMO de esta misma escena, con la pantalla ya pegada. ⚠️ El JS descuenta este tramo antes de repartir el resto, para que el cruce siga cayendo exactamente donde Carlos lo aprobó. */ --pp-riel: 70svh; height: calc((var(--piezas-a, 3) + var(--piezas-b, 3)) * 62svh + var(--cruce-alto) + 100lvh + var(--pp-riel, 0svh)); background: var(--fondo); } .pases[data-cara="barra"] { background: var(--fondo-hondo); } .pases__pega { position: sticky; top: 0; height: 100lvh; min-height: 560px; overflow: hidden; } /* Las dos caras, superpuestas en el mismo sitio. La que no toca no se ve NI SE LEE: `visibility` la saca también del lector de pantalla y del tabulador, que con `opacity: 0` seguirían entrando en ella. */ .pases .pase { position: absolute; inset: 0; display: grid; align-items: center; height: auto; background: none; } /* ⭐ CADA CARA SE VA Y VIENE CON EL MARRÓN ===================================================================== Las olas van DETRÁS de las caras —el plato y la copa se apoyan sobre la mancha, que es el diseño de siempre—, así que si las caras no se apagaran se verían FLOTANDO sobre el marrón: el titular «Glass after glass» aparecía en gris oscuro sobre marrón, ilegible, mientras el manto todavía cubría su mitad. ⭐ NO SE APAGAN A LA VEZ, Y NO SE APAGAN CUANDO LES LLEGA LA OLA, SINO ANTES (2026-08-19). La primera versión fundía la cara ENTERA de .18 al tapado, que es exactamente el rato en que el filo la estaba cruzando: el texto se veía a media tinta con media caja sobre arena y media sobre marrón, y Carlos lo leyó como lo que parecía, un error de tiempo. Medido con `_herramientas/medir-cruce.js`. Ahora cada mitad tiene su tiempo y todos caben en el hueco que hay ANTES de que la ola arranque (`--cruce-sale`): foto de cocina 0 → .07 la ola entra por la derecha y la foto es lo primero que alcanzaría texto de cocina .02 → .10 un pelo después, para que se lea como un barrido y no como un apagón El filo no toca la columna de texto hasta ~.145 (medido): quedan cuatro centésimas de margen entre que el texto termina de irse y la ola llega a donde estaba. Y se van HACIA LA IZQUIERDA, que es a donde barre la ola: se leen empujados por ella, no borrados por ella. Carlos: «quizás moverse con la ola mientras se desvanece». ⚠️ La copa sí nace sobre el marrón, y así debe ser: en la fase de la barra la ola vive justo debajo de ella. Por eso entra con un fundido y no descubriéndose con el filo — descubrirla exigiría que el manto se retirase de una zona en la que, al final, se queda. Su TEXTO es otra cosa: ése espera a `--cruce-cara`, que ahora cae al terminar la ola (`--cruce-cierra`) y no antes. */ .pases .pase[data-cara="cocina"] .pase__medios, .pases .pase[data-cara="cocina"] .pase__texto, .pases .pase[data-cara="barra"] .pase__medios, .pases .pase[data-cara="barra"] .pase__texto { opacity: var(--t, 1); translate: calc((1 - var(--t, 1)) * var(--empuje, -46px)) 0; } .pases .pase[data-cara="cocina"] .pase__medios { --t: calc(1 - clamp(0, calc(var(--avance, 0) / .07), 1)); } .pases .pase[data-cara="cocina"] .pase__texto { --t: calc(1 - clamp(0, calc((var(--avance, 0) - .02) / .08), 1)); } /* La copa entra durante la retirada —sobre el marrón, como se aprobó— y el texto sólo cuando la pantalla ya está quieta. Los dos vienen desde la derecha: la ola se retira hacia la izquierda y lo que entra detrás la sigue. */ .pases .pase[data-cara="barra"] .pase__medios { --empuje: 46px; --t: clamp(0, calc((var(--avance, 0) - calc(var(--cruce-cierra) - .10)) / .09), 1); } .pases .pase[data-cara="barra"] .pase__texto { --empuje: 46px; --t: clamp(0, calc((var(--avance, 0) - var(--cruce-cara)) / calc(1 - var(--cruce-cara))), 1); } .pases .pase[data-cara="barra"] { visibility: hidden; } .pases[data-cara="barra"] .pase[data-cara="cocina"] { visibility: hidden; } .pases[data-cara="barra"] .pase[data-cara="barra"] { visibility: visible; } /* El ancla de «Drinks» de la barra de app. Sin tamaño: sólo marca el punto del riel al que hay que bajar, y el JS le pone el `top`. */ .pases__ancla { position: absolute; left: 0; width: 1px; height: 1px; } .pase { position: relative; height: calc(var(--piezas, 4) * 62svh + 38svh); background: var(--fondo); } .pase--invertido { background: var(--fondo-hondo); } .pase__pega { position: sticky; top: 0; height: 100lvh; min-height: 560px; display: grid; align-items: center; } .pase__interior { max-width: var(--ancho); margin: 0 auto; width: 100%; padding-inline: var(--aire); display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; } /* ── La columna del texto ────────────────────────────────────────── Las fichas se apilan en la MISMA celda y sólo se ve una. Van en grid y no en absoluto para que la columna reserve el alto de la ficha más larga: si no, el bloque daría un salto cada vez que cambia el plato. */ .pase__fichas { display: grid; margin: clamp(18px, 2.4vh, 30px) 0 clamp(24px, 3vh, 38px); } .pase__ficha { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--curva), transform .5s var(--curva); pointer-events: none; } .pase__ficha.es-actual { opacity: 1; transform: none; pointer-events: auto; } .pase__ficha h3 { font-family: var(--titulo); font-weight: 600; /* ⚠️ Era un clamp que en móvil bajaba a 16,8px: el nombre del platillo medía menos que cualquier otro título de tarjeta del sitio. Una sola escala, también aquí (2026-08-18). */ font-size: var(--t-tarjeta); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .5em; } .pase__ficha p { margin: 0; color: var(--texto-suave); font-size: var(--t-cuerpo); max-width: 44ch; } .pase__texto h2 { font-size: clamp(1.38rem, 3.4vw, 2.125rem); /* techo 34px, como los demás */ text-transform: uppercase; letter-spacing: -.005em; line-height: 1.08; } /* ── La columna de la foto ───────────────────────────────────────── Las fotos también se apilan en una sola celda. La que sale entra subiendo un poco; la que se va, baja. */ .pase__medios { list-style: none; margin: 0; padding: 0; display: grid; place-items: center; } .pase__medio { grid-area: 1 / 1; opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .55s var(--curva), transform .55s var(--curva); } .pase__medio.es-actual { opacity: 1; transform: none; } .pase__medio img { width: 100%; height: auto; /* El plato es el motivo de la escena, así que va grande — pero un 20 % por debajo del primer montaje (era 88svh y escala 1.14), que llenaba demasiado y dejaba la copa tocando los bordes. */ max-height: 70svh; object-fit: contain; transform: scale(.9); } @media (min-width: 900px) { /* Se desplaza un poco hacia el borde de la pantalla, que es lo que hace que un producto recortado se lea como pieza y no como foto metida en una caja. */ /* Carlos, 2026-09-17, con los platos ya a 45°: «aumenta 20 % el tamaño». .91 × 1.2 = 1.092. Los platos a 45° son anchos y bajos y dentro del lienzo cuadrado se leían chicos. Y con las fotos a 23° («si me gustó más»), un 15 % más todavía: 1.092 × 1.15 = 1.256. Y «unos 60px más a la izquierda»: el `translateX(-60px)` va DELANTE de la escala, o la escala lo convierte en 66 px. */ .pase:not(.pase--invertido) .pase__medio img { transform: translateX(-60px) scale(1.256) translateX(4%); } /* ⚠️ Por debajo de 1200 px la columna es estrecha: con los 60 px y el tamaño grande el platillo llegaba a PISAR el texto (medido: −6 px a 1024). Ahí se mueve sólo 20 px y se queda en el tamaño anterior. */ @media (max-width: 1199px) { .pase:not(.pase--invertido) .pase__medio img { transform: translateX(-20px) scale(1.092) translateX(4%); } } /* Carlos, 2026-09-17: «todos los vasos de drinks unos 70px más a la derecha». El `translateX(70px)` va DELANTE de la escala: detrás, la escala lo encogería a 64 px. Sólo escritorio; en el teléfono son tarjetas centradas. Y luego: «un 10 % más chiquito» → .91 × .9 = .819. Escala desde el centro, así que el centro del vaso no se mueve. Y otro 10 % más: .819 × .9 = .737. */ .pase--invertido .pase__medio img { transform: translateX(70px) scale(.737) translateX(-4%); } } @media (min-width: 900px) { .pase__interior { grid-template-columns: 1fr 1fr; } /* ⭐ Las columnas invertidas: en el bloque de la barra la foto va a la izquierda y el texto a la derecha. Se hace con `order` y no reordenando el HTML para que el orden de lectura siga siendo el mismo en los dos: primero de qué se habla, después la foto. */ .pase--invertido .pase__texto { order: 2; } .pase--invertido .pase__medios { order: 1; } /* ⭐ EL BLOQUE DE TEXTO VA CENTRADO EN SU MEDIA PANTALLA (2026-09-15). Carlos: «en la descripción de las bebidas hay más espacio a la derecha que a la izquierda». La columna mide media rejilla (568 px a 1440) pero la descripción se corta a 44ch (~436 px): alineado a la izquierda, el bloque se pegaba a la ola y dejaba ~160 px muertos antes del margen. ⛔ SE PROBÓ PEGARLO AL MARGEN DE FUERA y se pasó de largo: la ola es diagonal y ocupa media pantalla, así que el aire hasta ella quedaba el doble que el del margen (242 contra 122 px a 1440). Centrado en su columna, los dos lados salen casi iguales (176 / 188 px). Va en las DOS caras: la cocina tenía el mismo hueco, espejado. El renglón sigue alineado a la izquierda: se mueve el bloque, no la lectura. La caja se ciñe a la ficha más larga, así que no salta al cambiar de plato. Medido con `_herramientas/buscar-descuadres.js`, y el cruce con `medir-cruce.js` sigue limpio. */ .pase__texto { justify-self: center; width: fit-content; max-width: 100%; } } /* Sin escena: se ve la primera pieza, quieta, y la sección deja de ser un riel. */ @media (prefers-reduced-motion: reduce) { .pase { height: auto; } .pase__pega { position: static; height: auto; padding-block: var(--hueco-bloque); } .pase__ficha, .pase__medio { transition: none; } } /* ===================================================================== EL MODAL DE RESERVA ===================================================================== El widget de OpenTable, abierto desde el botón de la cabecera sin sacar a nadie de la página. ⚠️ Este modal SÍ va sobre papel claro, al revés que el visor de la galería: allí lo oscuro sirve para mirar una foto, aquí hay que leer y rellenar un formulario. Y el widget viene con sus propios colores claros de fábrica: sobre fondo oscuro se vería un recuadro blanco flotando. ===================================================================== */ .modal-reserva { position: fixed; z-index: 61; /* sobre el velo, bajo la barra */ border: 0; padding: 0; margin: auto; inset: 0; max-width: min(560px, calc(100vw - 2 * var(--aire))); width: 100%; max-height: min(92dvh, 900px); background: var(--fondo); color: var(--texto); overflow: hidden; /* el que desplaza es la caja de dentro */ } /* ⛔ Ya no hay `::backdrop`: el modal se abre con `show()`, no con `showModal()`, para que la barra de app pueda ir POR ENCIMA. El fondo lo pinta este pseudo-elemento del `body`, que sí obedece al z-index. ⚠️ Se queda por debajo de la barra a propósito: se puede seguir cambiando de pestaña con el modal abierto. */ body.con-modal::before { content: ""; position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--marron) 74%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: velo-entra .24s var(--curva-color) both; } @keyframes velo-entra { from { opacity: 0 } to { opacity: 1 } } .modal-reserva:not([open]) { display: none; } /* Entra igual que el visor: sube un poco y aparece. Ver la nota de allí sobre `@starting-style` y `allow-discrete`. */ .modal-reserva, .modal-reserva::backdrop { transition: opacity .24s var(--curva-color), transform .28s var(--curva), display .28s allow-discrete, overlay .28s allow-discrete; } .modal-reserva { opacity: 1; transform: translateY(0); } .modal-reserva:not([open]) { opacity: 0; transform: translateY(12px); } @starting-style { .modal-reserva[open] { opacity: 0; transform: translateY(12px); } .modal-reserva[open]::backdrop { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .modal-reserva, .modal-reserva:not([open]) { transform: none; } } /* ⭐ En móvil el modal NACE DE LA BURBUJA. El botón de reservar vive en el centro de la barra, abajo, así que el modal crece desde ahí y sube en vez de aparecer suelto en mitad de la pantalla. Es la regla de la casa para todo lo que se abre desde un disparador: el movimiento tiene que explicar de dónde viene. ⚠️ `transform-origin` al 50% 100% —abajo en el centro— porque ahí es donde está la burbuja. Si el botón cambiara de sitio, esto cambia. */ /* ⭐ EN MÓVIL EL MODAL BAJA DESDE ARRIBA. Carlos lo pidió así desde el principio y yo lo monté al revés dos veces: primero creciendo desde la burbuja y luego subiendo desde el filo de abajo. ⚠️ Y viniendo de arriba se resuelve solo el otro problema: la BARRA DE APP SE QUEDA VISIBLE abajo. Cuando la hoja subía desde el filo, las dos ocupaban el mismo sitio y había que esconder la barra. */ @media (max-width: 899px) { .modal-reserva { max-width: 100vw; width: 100vw; /* Pegada al filo de ARRIBA. */ margin: 0 auto auto; max-height: 86dvh; transform-origin: 50% 0; /* Sólo las esquinas de abajo: es una hoja que baja. */ border-radius: 0 0 18px 18px; } .modal-reserva__caja { max-height: 86dvh; /* Aire arriba por la barra del navegador, y abajo para el asa. */ padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: 26px; } /* Baja desde fuera de la pantalla. */ .modal-reserva:not([open]) { transform: translateY(-100%); } @starting-style { .modal-reserva[open] { transform: translateY(-100%); } } /* El asa ya no es un `::after` decorativo: es el `