/* =================================================================== Winter Garden — hoja de estilos principal Fuentes autoalojadas (sin llamadas a Google Fonts en tiempo de ejecución, font-display: swap, sin cookies de terceros). =================================================================== */ /* Pareja tipográfica "Restaurant Menu" (skill ui-ux-pro-max, dominio typography): serif elegante para titulares + sans humanista y muy legible para el texto — el par pensado específicamente para restauración/hostelería, en vez del grotesco genérico de antes. */ @font-face{ font-family: 'Playfair Display'; src: url('../fonts/playfair-display-variable.woff2') format('woff2-variations'), url('../fonts/playfair-display-variable.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face{ font-family: 'Playfair Display'; src: url('../fonts/playfair-display-italic-variable.woff2') format('woff2-variations'), url('../fonts/playfair-display-italic-variable.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; } @font-face{ font-family: 'Karla'; src: url('../fonts/karla-variable.woff2') format('woff2-variations'), url('../fonts/karla-variable.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; } /* ---------- reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* overflow-x solo en html (no también en body): si se pone en los dos, el navegador puede acabar tratando body como su propia caja de scroll independiente de html — cada una con su propia barra, una pegada a la otra. Con overflow-x solo en html hay una única barra, la nativa. */ body{ margin:0; max-width:100%; } /* ---------- transición entre páginas ---------- View Transitions API "cross-document": el navegador hace un fundido entre la foto de la página vieja y la nueva sin JS ni router. En navegadores que no la soportan (Firefox, Safari antiguo) simplemente no pasa nada — la navegación normal sigue funcionando igual. */ @view-transition{ navigation: auto; } ::view-transition-old(root){ animation: wg-page-out .32s cubic-bezier(.4,0,.2,1) both; } ::view-transition-new(root){ animation: wg-page-in .42s cubic-bezier(.16,1,.3,1) both; } @keyframes wg-page-out{ to{ opacity:0; transform: scale(.985); } } @keyframes wg-page-in{ from{ opacity:0; transform: translateY(14px) scale(.99); } } @media (prefers-reduced-motion: reduce){ ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } } img, picture, svg, video, canvas{ display:block; max-width:100%; } button, input, textarea, select{ font: inherit; color: inherit; } a{ color: inherit; } ul, ol{ list-style: none; margin:0; padding:0; } h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; } /* ---------- fundamentos ---------- */ body{ background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; padding-inline: clamp(16px, 4vw, 40px); } main{ display:block; } .wrap{ max-width: var(--content-w); margin-inline:auto; } /* Ramas de olivo repartidas por las secciones, mismo estilo acuarela que las hojas de los menús. Ancladas a cada sección, a cada titular y al "wrap" de contenido (position:absolute, no fixed) para que viajen con la página al hacer scroll en vez de perseguir la pantalla. z-index negativo + que ningún ancestro de por medio tenga su propio contexto de apilamiento hace que pinten siempre por detrás del texto y de las tarjetas, nunca por encima — por eso la opacidad puede ser alta sin que la lectura se resienta. El hero, la franja del logo y las tapas de madera de los menús también llevan decoración (para que se vea desde el primer pantallazo y no quede vacía la zona de las tapas) — solo se excluyen la galería y el aviso de "visítanos", que ya traen su propio fondo. La hoja de papel del menú (.menu-paper) es opaca, así que aunque su sección ya no esté excluida, la decoración de la sección nunca se nota por detrás de ella ni compite con sus propias hojas de olivo. Por sección: 2 ramas en esquinas opuestas + 1 junto al titular + 2 ramas largas en diagonal que cruzan el ancho del contenido (una alta, otra baja, en sentidos opuestos) — 6 combinaciones de ramas/ángulos/posiciones distintas para que al bajar por la página no se note el patrón ni se repita siempre igual. */ main section:not(.gallery):not(.visit-section), .site-footer{ position:relative; } main section:not(.gallery):not(.visit-section) > .section-head, main section:not(.gallery):not(.visit-section) > .wrap{ position:relative; } main section:not(.gallery):not(.visit-section)::before, main section:not(.gallery):not(.visit-section)::after, main section:not(.gallery):not(.visit-section) > .section-head::before, main section:not(.gallery):not(.visit-section) > .wrap::before, main section:not(.gallery):not(.visit-section) > .wrap::after, .site-footer::before, .site-footer::after{ content:""; position:absolute; z-index:-1; pointer-events:none; background-repeat:no-repeat; background-size:contain; } main section:nth-of-type(6n+1)::before{ background-image:url('../img/branch-a.webp'); opacity:.65; width:calc(260px * var(--branch-scale,1)); height:calc(244px * var(--branch-scale,1)); top:-36px; left:-10px; transform:rotate(-6deg); } main section:nth-of-type(6n+1)::after{ background-image:url('../img/branch-d.webp'); opacity:.6; width:calc(240px * var(--branch-scale,1)); height:calc(227px * var(--branch-scale,1)); bottom:-34px; right:-10px; transform:rotate(6deg); } main section:nth-of-type(6n+1) > .section-head::before{ background-image:url('../img/branch-b.webp'); opacity:.42; width:calc(130px * var(--branch-scale,1)); height:calc(104px * var(--branch-scale,1)); top:-16px; right:-10px; transform:rotate(14deg) scaleX(-1); } main section:nth-of-type(6n+1) > .wrap::before{ background-image:url('../img/branch-e.webp'); opacity:.4; width:min(560px,62%); aspect-ratio:685/315; top:8%; left:-8px; transform:rotate(-4deg); } main section:nth-of-type(6n+1) > .wrap::after{ background-image:url('../img/branch-f.webp'); opacity:.32; width:min(480px,52%); aspect-ratio:694/334; bottom:4%; right:-8px; transform:rotate(3deg) scaleX(-1); } main section:nth-of-type(6n+2)::before{ background-image:url('../img/branch-d.webp'); opacity:.62; width:calc(270px * var(--branch-scale,1)); height:calc(256px * var(--branch-scale,1)); bottom:-34px; right:-10px; top:auto; transform:rotate(4deg); } main section:nth-of-type(6n+2)::after{ background-image:url('../img/branch-a.webp'); opacity:.55; width:calc(230px * var(--branch-scale,1)); height:calc(216px * var(--branch-scale,1)); top:-30px; left:-10px; transform:rotate(-10deg); } main section:nth-of-type(6n+2) > .section-head::before{ background-image:url('../img/branch-c.webp'); opacity:.4; width:calc(120px * var(--branch-scale,1)); height:calc(111px * var(--branch-scale,1)); bottom:-46px; left:-10px; top:auto; transform:rotate(-16deg); } main section:nth-of-type(6n+2) > .wrap::before{ background-image:url('../img/branch-f.webp'); opacity:.4; width:min(540px,58%); aspect-ratio:694/334; bottom:10%; left:-8px; transform:rotate(5deg); } main section:nth-of-type(6n+2) > .wrap::after{ background-image:url('../img/branch-e.webp'); opacity:.3; width:min(420px,46%); aspect-ratio:685/315; top:6%; right:-8px; transform:rotate(-8deg) scaleX(-1); } main section:nth-of-type(6n+3)::before{ background-image:url('../img/branch-b.webp'); opacity:.55; width:calc(230px * var(--branch-scale,1)); height:calc(184px * var(--branch-scale,1)); top:-24px; right:-10px; transform:rotate(10deg) scaleX(-1); } main section:nth-of-type(6n+3)::after{ background-image:url('../img/branch-c.webp'); opacity:.58; width:calc(250px * var(--branch-scale,1)); height:calc(231px * var(--branch-scale,1)); bottom:-32px; left:-10px; transform:rotate(8deg); } main section:nth-of-type(6n+3) > .section-head::before{ background-image:url('../img/branch-a.webp'); opacity:.4; width:calc(115px * var(--branch-scale,1)); height:calc(108px * var(--branch-scale,1)); top:-14px; left:0; transform:rotate(100deg); } main section:nth-of-type(6n+3) > .wrap::before{ background-image:url('../img/branch-e.webp'); opacity:.38; width:min(500px,56%); aspect-ratio:685/315; top:45%; right:-8px; transform:rotate(-170deg); } main section:nth-of-type(6n+3) > .wrap::after{ background-image:url('../img/branch-f.webp'); opacity:.3; width:min(400px,44%); aspect-ratio:694/334; top:2%; left:2%; transform:rotate(-6deg); } main section:nth-of-type(6n+4)::before{ background-image:url('../img/branch-c.webp'); opacity:.62; width:calc(255px * var(--branch-scale,1)); height:calc(236px * var(--branch-scale,1)); bottom:-34px; left:-10px; top:auto; transform:rotate(-5deg); } main section:nth-of-type(6n+4)::after{ background-image:url('../img/branch-b.webp'); opacity:.5; width:calc(210px * var(--branch-scale,1)); height:calc(168px * var(--branch-scale,1)); top:-22px; right:-10px; transform:rotate(16deg) scaleX(-1); } main section:nth-of-type(6n+4) > .section-head::before{ background-image:url('../img/branch-d.webp'); opacity:.4; width:calc(125px * var(--branch-scale,1)); height:calc(119px * var(--branch-scale,1)); bottom:-42px; right:0; top:auto; transform:rotate(100deg) scaleX(-1); } main section:nth-of-type(6n+4) > .wrap::before{ background-image:url('../img/branch-f.webp'); opacity:.4; width:min(520px,58%); aspect-ratio:694/334; top:12%; left:-8px; transform:rotate(-3deg); } main section:nth-of-type(6n+4) > .wrap::after{ background-image:url('../img/branch-e.webp'); opacity:.3; width:min(440px,48%); aspect-ratio:685/315; bottom:6%; right:-8px; transform:rotate(174deg); } main section:nth-of-type(6n+5)::before{ background-image:url('../img/branch-a.webp'); opacity:.5; width:calc(200px * var(--branch-scale,1)); height:calc(188px * var(--branch-scale,1)); top:-22px; right:0; transform:rotate(128deg) scaleX(-1); } main section:nth-of-type(6n+5)::after{ background-image:url('../img/branch-d.webp'); opacity:.58; width:calc(245px * var(--branch-scale,1)); height:calc(232px * var(--branch-scale,1)); bottom:-32px; left:-10px; transform:rotate(-6deg) scaleX(-1); } main section:nth-of-type(6n+5) > .section-head::before{ background-image:url('../img/branch-c.webp'); opacity:.4; width:calc(120px * var(--branch-scale,1)); height:calc(111px * var(--branch-scale,1)); top:-16px; left:0; transform:rotate(-120deg) scaleX(-1); } main section:nth-of-type(6n+5) > .wrap::before{ background-image:url('../img/branch-e.webp'); opacity:.4; width:min(540px,60%); aspect-ratio:685/315; bottom:8%; left:-8px; transform:rotate(2deg) scaleX(-1); } main section:nth-of-type(6n+5) > .wrap::after{ background-image:url('../img/branch-f.webp'); opacity:.3; width:min(430px,46%); aspect-ratio:694/334; top:10%; right:-8px; transform:rotate(178deg); } main section:nth-of-type(6n)::before{ background-image:url('../img/branch-d.webp'); opacity:.6; width:calc(275px * var(--branch-scale,1)); height:calc(261px * var(--branch-scale,1)); bottom:-36px; left:-10px; top:auto; transform:rotate(-10deg) scaleX(-1); } main section:nth-of-type(6n)::after{ background-image:url('../img/branch-b.webp'); opacity:.5; width:calc(215px * var(--branch-scale,1)); height:calc(172px * var(--branch-scale,1)); top:-24px; right:-10px; transform:rotate(-8deg); } main section:nth-of-type(6n) > .section-head::before{ background-image:url('../img/branch-a.webp'); opacity:.4; width:calc(125px * var(--branch-scale,1)); height:calc(117px * var(--branch-scale,1)); top:-14px; right:4px; transform:rotate(60deg); } main section:nth-of-type(6n) > .wrap::before{ background-image:url('../img/branch-f.webp'); opacity:.38; width:min(500px,56%); aspect-ratio:694/334; top:40%; left:-8px; transform:rotate(8deg) scaleX(-1); } main section:nth-of-type(6n) > .wrap::after{ background-image:url('../img/branch-e.webp'); opacity:.3; width:min(400px,44%); aspect-ratio:685/315; bottom:2%; right:-8px; transform:rotate(166deg); } .site-footer::before{ background-image:url('../img/branch-c.webp'); opacity:.55; width:calc(260px * var(--branch-scale,1)); height:calc(241px * var(--branch-scale,1)); bottom:-10px; left:-10px; } .site-footer::after{ background-image:url('../img/branch-d.webp'); opacity:.55; width:calc(260px * var(--branch-scale,1)); height:calc(246px * var(--branch-scale,1)); bottom:-10px; right:-10px; } /* En móvil no se recorta ni se aplana nada: --branch-scale encoge de forma proporcional las ramas de esquina/titular/pie manteniendo cada giro y cada diferencia de tamaño entre variantes; las diagonales que cruzan el wrap ya son responsive solas (min(px, %)), así que no necesitan tocarse. Resultado: en el móvil se aprecia la misma composición rica que en escritorio, solo que a escala. */ @media (max-width:640px){ main, .site-footer{ --branch-scale: 0.58; } main section:nth-of-type(6n+1) > .wrap::before, main section:nth-of-type(6n+2) > .wrap::before, main section:nth-of-type(6n+3) > .wrap::before, main section:nth-of-type(6n+4) > .wrap::before, main section:nth-of-type(6n+5) > .wrap::before, main section:nth-of-type(6n) > .wrap::before{ width:min(300px,72%); } main section:nth-of-type(6n+1) > .wrap::after, main section:nth-of-type(6n+2) > .wrap::after, main section:nth-of-type(6n+3) > .wrap::after, main section:nth-of-type(6n+4) > .wrap::after, main section:nth-of-type(6n+5) > .wrap::after, main section:nth-of-type(6n) > .wrap::after{ width:min(250px,60%); } } h1,h2,h3,h4{ font-family: var(--font-display); text-wrap: balance; line-height:1.08; letter-spacing:-0.01em; color: var(--ink); overflow-wrap: break-word; } h1{ font-size: var(--step-5); font-weight: 700; } h2{ font-size: var(--step-3); font-weight: 700; } h3{ font-size: var(--step-2); font-weight: 600; } p{ max-width: var(--measure); } p.wide{ max-width: none; } .lede{ color: var(--ink-muted); font-size: var(--step-1); margin-top: var(--space-2); } /* Aire entre un título y el texto/lista/tabla que viene justo debajo — sin esto, cualquier h1-h3 seguido de contenido queda pegado (el reset de arriba les pone margin:0). Selectores de baja especificidad para que .card, .board, etc. con su propio ritmo (flex gap, etc.) manden. */ h1 + p, h2 + p, h2 + ul, h2 + ol, h2 + table, h3 + p, h3 + ul{ margin-top: 0.6em; } .eyebrow{ font-family: var(--font-body); font-weight:700; font-size: var(--step--1); letter-spacing:0.14em; text-transform:uppercase; color: var(--amber-strong); display:inline-flex; align-items:center; gap:.5em; } .eyebrow::before{ content:""; width:1.4em; height:2px; background: currentColor; border-radius:2px; } .eyebrow__sprig{ width:1.1em; height:1.1em; flex:none; } a.link{ color: var(--brand-strong); text-decoration-thickness: 1.5px; text-underline-offset: .2em; } :focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; } .skip-link{ position:absolute; left:1rem; top:-4rem; background:var(--surface); color:var(--ink); padding:.7em 1.2em; border-radius: var(--radius-s); box-shadow: var(--shadow-2); z-index:200; transition: top .2s ease; } .skip-link:focus{ top:1rem; } .tabular{ font-variant-numeric: tabular-nums; } ::selection{ background: var(--amber-soft); color: var(--brand-strong); } /* ---------- utilidades de sección ---------- */ section{ padding-block: var(--space-6); } section + section{ border-top: 1px solid var(--border); } .section-head{ max-width: 46rem; margin-bottom: var(--space-4); } .section-head h2{ margin-top:.3em; } /* Banda con matiz cálido para que el cierre de la página no sea un plano más de "var(--bg)" detrás de otro — un pequeño respiro visual. */ .visit-section{ margin-inline: calc(-1 * clamp(16px,4vw,40px)); padding-inline: clamp(16px,4vw,40px); background: var(--surface-2); } .reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } } /* --------------------------------------------------------- TRANSICIÓN ENTRE PÁGINAS — fundido suave al hacer clic en un enlace interno y al cargar cada página. Se activa solo con JS (clase puesta por el script inline del ): sin JS, la página se ve siempre normal, sin quedarse en blanco. --------------------------------------------------------- */ html.js-transitions body{ opacity:0; transition: opacity .38s ease; } html.js-transitions body.is-ready{ opacity:1; } html.js-transitions body.is-leaving{ opacity:0; } @media (prefers-reduced-motion: reduce){ html.js-transitions body{ opacity:1; transition:none; } } .grid{ display:grid; gap: var(--space-3); } .grid--3{ grid-template-columns: repeat(3, 1fr); } .grid--2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ .grid--3{ grid-template-columns: 1fr 1fr; } } @media (max-width: 640px){ .grid--3, .grid--2{ grid-template-columns: 1fr; } } /* ========================================================= NAV ========================================================= */ /* Antes flotaba sin fondo (solo con text-shadow) porque solo se veía sobre la foto del Hero. Ahora que hay contenido/ramas decorativas pasando por detrás al hacer scroll (sticky = se queda fija arriba), necesita su propio fondo para no dejar ver "lo que se va dejando atrás" — cristal esmerilado (semitransparente + blur) a juego con el resto de la web, a pantalla completa aunque el resto de la página tenga márgenes (mismo truco que .visit-section). El fondo/blur van en ::before (no directamente en .nav): un elemento con backdrop-filter se convierte en el "contenedor" de posición para sus hijos position: fixed, y .nav__links (el menú de móvil) es precisamente position: fixed respecto a la pantalla — si el blur fuera directo en .nav, el menú de móvil se desplegaría mal, pegado a la propia barra en vez de a toda la pantalla. */ .nav{ position: sticky; top:0; z-index: 100; isolation:isolate; display:flex; align-items:center; justify-content:space-between; gap: var(--space-2); flex-wrap:nowrap; padding-block: var(--space-2); margin-inline: calc(-1 * clamp(16px,4vw,40px)); padding-inline: clamp(16px,4vw,40px); text-shadow: 0 1px 1px color-mix(in srgb, var(--bg) 65%, transparent), 0 1px 12px color-mix(in srgb, var(--bg) 75%, transparent); } .nav::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px) saturate(1.15); -webkit-backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 1px 0 var(--border); } .nav__brand{ display:flex; align-items:center; gap:.6em; font-family: var(--font-display); font-weight:700; font-size:1.2rem; text-decoration:none; min-width:0; flex:none; cursor:pointer; } .nav__brand img{ height: 54px; width:auto; flex:none; filter: drop-shadow(0 2px 5px rgba(0,0,0,.35)) drop-shadow(0 0 10px color-mix(in srgb, var(--bg) 55%, transparent)); transition: transform .25s ease; } .nav__brand:hover img{ transform: scale(1.06) rotate(-2deg); } @media (max-width:480px){ .nav__brand img{ height:44px; } } .nav__brand-text{ white-space:nowrap; } .nav__actions{ flex:none; } .nav__links{ display:flex; align-items:center; gap: var(--space-4); } .nav__links a{ text-decoration:none; font-weight:600; font-size: var(--step--1); letter-spacing:.02em; position:relative; padding-block:.3em; } .nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--amber); transition: right .25s ease; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after{ right:0; } .nav__dropdown{ position:relative; } .nav__dropdown summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.3em; text-decoration:none; font-weight:600; font-size: var(--step--1); letter-spacing:.02em; padding-block:.3em; } .nav__dropdown summary::-webkit-details-marker{ display:none; } .nav__dropdown summary::after{ content:"▾"; font-size:.7em; opacity:.65; transition: transform .2s ease; } .nav__dropdown[open] summary::after{ transform: rotate(180deg); } .nav__dropdown-panel{ position:absolute; top:100%; left:0; margin-top:.6em; min-width:230px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding:.4em; display:flex; flex-direction:column; gap:.15em; z-index:50; } .nav__dropdown-panel a{ text-decoration:none; padding:.65em .8em; border-radius: var(--radius-s); font-weight:600; font-size: var(--step--1); color: var(--ink); white-space:nowrap; } .nav__dropdown-panel a:hover{ background: var(--brand-soft); color: var(--brand-strong); } .nav__actions{ display:flex; align-items:center; gap: var(--space-2); } .nav__phone{ display:flex; align-items:center; gap:.4em; text-decoration:none; color: var(--ink); font-weight:600; font-size: var(--step--1); white-space:nowrap; } .nav__phone svg{ color: var(--brand-strong); flex:none; } .nav__phone:hover{ color: var(--brand-strong); } .nav__toggle{ display:none; } .theme-toggle{ display:inline-grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--ink); cursor:pointer; box-shadow: var(--relief), var(--shadow-1); transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .theme-toggle:hover{ border-color:var(--brand); transform:translateY(-1px); box-shadow: var(--relief), var(--shadow-2); } .theme-toggle:active{ box-shadow: var(--relief-pressed); transform:translateY(0); } .theme-toggle svg{ width:19px; height:19px; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; } .lang-switch{ position:relative; flex:none; } .lang-switch summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.3em; height:38px; padding:0 .85em; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--ink); font-weight:700; font-size:.74rem; letter-spacing:.03em; box-shadow: var(--relief), var(--shadow-1); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } .lang-switch summary::-webkit-details-marker{ display:none; } .lang-switch summary::after{ content:"▾"; font-size:.7em; opacity:.65; transition: transform .2s ease; } .lang-switch[open] summary::after{ transform: rotate(180deg); } .lang-switch summary:hover{ border-color:var(--brand); transform:translateY(-1px); box-shadow: var(--relief), var(--shadow-2); } .lang-switch__panel{ position:absolute; top:100%; right:0; margin-top:.6em; min-width:150px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding:.4em; display:flex; flex-direction:column; gap:.15em; z-index:50; } .lang-switch__panel a{ text-decoration:none; padding:.55em .8em; border-radius: var(--radius-s); font-weight:600; font-size: var(--step--1); color: var(--ink); white-space:nowrap; } .lang-switch__panel a:hover{ background: var(--brand-soft); color: var(--brand-strong); } .lang-switch__panel a[aria-current="true"]{ color: var(--brand-strong); font-weight:800; } @media (max-width:480px){ .lang-switch summary{ padding:0 .6em; font-size:.68rem; } } @media (max-width: 1080px){ .nav__phone{ display:none; } } @media (max-width: 860px){ .nav__links{ position: fixed; inset: 82px 0 0 0; flex-direction:column; align-items:flex-start; gap:0; background: var(--surface); padding: var(--space-3) clamp(16px,6vw,40px); transform: translateY(-8px); opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease; border-top: 1px solid var(--border); } .nav__links a{ padding-block: var(--space-2); width:100%; border-bottom:1px solid var(--border); } .nav.is-open .nav__links{ opacity:1; transform:none; pointer-events:auto; } .nav__dropdown{ width:100%; } .nav__dropdown summary{ padding-block: var(--space-2); border-bottom:1px solid var(--border); } .nav__dropdown-panel{ position:static; margin-top:0; box-shadow:none; border:0; border-radius:0; background:transparent; padding:0 0 0 var(--space-3); } .nav__dropdown-panel a{ border-bottom:1px solid var(--border); border-radius:0; padding-block: var(--space-2); } .nav__toggle{ display:inline-flex; flex-direction:column; gap:5px; width:34px; height:26px; background:none; border:0; cursor:pointer; padding:0; } .nav__toggle span{ height:2px; background:var(--ink); border-radius:2px; transition: transform .25s ease, opacity .25s ease; } .nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__toggle span:nth-child(2){ opacity:0; } .nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .nav__actions .btn span.btn-label-long{ display:none; } } @media (max-width: 480px){ .nav__brand-text{ display:none; } .nav__actions{ gap: var(--space-1); } .nav__actions .btn--sm{ padding:.6em .85em; font-size:.72rem; } } /* ========================================================= BOTONES — clicables con intención, nada de cajas planas ========================================================= */ .btn{ --btn-fg: var(--surface); position: relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:.6em; justify-content:center; font-family: var(--font-body); font-weight:700; font-size: var(--step--1); padding: .9em 1.5em; border-radius: 999px; border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap; transition: transform .35s cubic-bezier(.2,.9,.2,1.2), box-shadow .3s ease, background .3s ease, color .3s ease; } .btn:active{ transform: scale(.97); box-shadow: var(--relief-pressed) !important; } .btn--primary{ background: linear-gradient(135deg, var(--amber-strong), var(--amber)); color: var(--btn-fg); box-shadow: var(--relief), var(--shadow-1); } .btn--primary::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%); transform: translateX(-120%); transition: transform .7s ease; } .btn--primary:hover{ box-shadow: var(--relief), var(--shadow-2); transform: translateY(-2px); } .btn--primary:hover::before{ transform: translateX(120%); } .btn--ghost{ background: var(--surface); color: var(--brand-strong); border-color: var(--border); box-shadow: var(--relief), var(--shadow-1); } .btn--ghost::before{ content:""; position:absolute; inset:0; z-index:-1; background: var(--brand-soft); clip-path: circle(0% at 12% 50%); transition: clip-path .45s ease; } .btn--ghost:hover{ border-color: var(--brand); box-shadow: var(--relief), var(--shadow-2); transform: translateY(-2px); } .btn--ghost:hover::before{ clip-path: circle(140% at 12% 50%); } .btn--sm{ padding:.65em 1.1em; font-size: .82rem; } .btn[disabled]{ opacity:.55; cursor:not-allowed; } .icon-leaf{ width:1.1em; height:1.1em; flex:none; } .icon-leaf path{ transition: stroke-dashoffset .5s ease; } /* ========================================================= HERO ========================================================= */ /* Hero corto tipo banner (referencia de la propietaria) — va al grano en vez de ocupar casi toda la pantalla. Velo oscuro real (fijo, no depende del tema claro/oscuro) sobre la fachada, con texto claro encima — mucho más nítido que el lavado blanco de antes. */ /* El Hero ya no lleva el texto ENCIMA de la foto — chocaba de forma literal con el rótulo "WINTER GARDEN 2009" tallado en la fachada. Ahora es una composición en dos columnas: foto con insignias flotantes (como una ficha de datos reales) a un lado, texto grande al otro — nada se superpone a la foto en sí. */ .hero{ padding-block: clamp(20px,3vw,32px); } /* Variante de pruebas ("Inicio 2"): solo la franja de madera del rótulo, ocupando todo el ancho del Hero, sin texto encima. */ .hero--photo-only{ padding:0; } .hero--photo-only img{ display:block; width:100%; max-width:1100px; height:auto; margin-inline:auto; border-radius: var(--radius-l); box-shadow: var(--shadow-2); } .hero__grid{ display:grid; gap: var(--space-4); align-items:center; } @media (min-width: 900px){ .hero__grid{ grid-template-columns: 1fr 1.05fr; gap: var(--space-5); } .hero__photo{ order:2; } .hero__content{ order:1; } } .hero__photo{ position:relative; } .hero__photo::before{ /* mancha orgánica detrás de la foto, asomando por una esquina */ content:""; position:absolute; z-index:0; inset:-16px -16px auto auto; width:62%; height:56%; background: var(--brand-soft); border-radius: 42% 58% 55% 45% / 46% 40% 60% 54%; } .hero__photo-frame{ position:relative; z-index:1; overflow:hidden; isolation:isolate; border-radius: var(--radius-l); box-shadow: var(--shadow-2); } .hero__photo-frame img{ display:block; width:100%; height:clamp(220px, 30vw, 420px); object-fit:cover; object-position:center 28%; filter: saturate(1.1) contrast(1.02); } .hero__inner{ max-width: 34rem; } .hero__photo-caption{ position:absolute; left: var(--space-3); bottom: var(--space-3); z-index:2; font-family: var(--font-display); font-style:italic; font-weight:500; font-size: var(--step--1); color: rgba(247,245,236,.9); text-shadow: 0 1px 4px rgba(0,0,0,.5); max-width: 18ch; line-height:1.3; } @media (max-width:640px){ .hero__photo-caption{ display:none; } } .hero__badge{ position:absolute; z-index:3; display:flex; align-items:center; gap:.6em; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); padding:.65em .9em; box-shadow: var(--relief), var(--shadow-2); font-size:.72rem; font-weight:700; line-height:1.25; color: var(--ink-muted); text-transform:uppercase; letter-spacing:.02em; } .hero__badge strong{ font-family: var(--font-display); font-size:1.35rem; font-weight:700; text-transform:none; letter-spacing:0; color: var(--amber-strong); } .hero__badge svg{ width:22px; height:22px; flex:none; color: var(--brand); } .hero__badge--rating{ top:-14px; left: var(--space-3); } .hero__badge--space{ bottom:-14px; right: var(--space-3); } @media (max-width:640px){ .hero__badge{ position:static; margin:.6em auto 0; width:fit-content; box-shadow: var(--relief), var(--shadow-1); } .hero__photo{ display:flex; flex-direction:column; align-items:center; } .hero__photo::before{ display:none; } } .hero__kicker{ font-family: var(--font-body); font-weight:700; font-size: var(--step--1); letter-spacing:.1em; text-transform:uppercase; color: var(--ink-muted); margin-top:.6em; } .hero__brand{ display:flex; align-items:center; gap:.3em; margin-top:.15em; font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4.1rem); font-weight:700; letter-spacing:-0.01em; line-height:1; color: var(--ink); } .hero__sprig{ width:.62em; height:.78em; flex:none; color: var(--amber); } .hero__flourish{ display:block; width:min(220px, 60%); height:auto; color: var(--amber); margin:.2em 0 -.2em; } .hero__tagline{ font-family: var(--font-display); font-style:italic; font-weight:500; font-size: var(--step-1); color: var(--ink-muted); margin-top: var(--space-2); } .hero__tagline em{ font-style:normal; font-weight:700; color: var(--amber-strong); } .hero__actions{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-3); } .hero__meta{ display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-3); } .hero__meta li{ display:flex; align-items:center; gap:.5em; color: var(--ink-muted); font-size: var(--step--1); } .hero__meta strong{ color: var(--ink); } /* El logo ya no se apoya sobre la fachada: es un pequeño escudo/sello que abre el bloque de texto, siempre sobre la franja oscura, nunca sobre la foto ni sobre el rótulo real del local. */ .hero__crest{ position:relative; width: 132px; aspect-ratio: 1/1; margin-bottom: var(--space-3); perspective: 700px; cursor: pointer; } .hero__crest::before{ content:""; position:absolute; inset:-8%; z-index:0; border-radius:50%; opacity:.5; background: radial-gradient(closest-side, color-mix(in srgb, var(--amber) 30%, transparent), transparent 74%); filter: blur(9px); transition: opacity .4s ease; } .hero__crest:hover::before{ opacity:.85; } .hero__crest canvas{ position:absolute; inset:0; width:100%; height:100%; will-change: transform; } .logo-layer--rays{ z-index:1; filter: drop-shadow(0 3px 7px rgba(0,0,0,.4)); } .logo-layer--mark{ z-index:2; filter: drop-shadow(0 5px 9px rgba(0,0,0,.5)); } .hero__crest .shine{ position:absolute; inset:0; z-index:3; border-radius:50%; pointer-events:none; mix-blend-mode: screen; background: radial-gradient(44px 44px at var(--mx,50%) var(--my,35%), rgba(255,255,255,.55), transparent 60%); opacity:.6; } .hero__crest noscript img{ width:100%; } /* Escudo del logo, ahora fuera del Hero: su propia franja tranquila, sobre fondo liso, sin ninguna foto ni rótulo real detrás. */ .brand-mark{ text-align:center; padding-block: var(--space-3) var(--space-4); } .brand-mark .hero__crest--standalone{ width:128px; margin-inline:auto; } .brand-mark__motto{ font-family: var(--font-display); font-style:italic; font-weight:500; color: var(--ink-muted); font-size: var(--step-0); margin-top: var(--space-2); } /* ========================================================= GALERÍA — franja clara con un fondo ilustrado (generado en Canva, con un marco dorado fino tipo "pared de galería/exposición"), en vez del verde oscuro sólido de antes, para que combine con el resto de la web en lugar de romper su armonía visual. ========================================================= */ .gallery{ /* colores fijos, igual que antes: la franja no cambia con el modo claro/oscuro del resto de la web. El fondo ilustrado se aplica en ::before con un degradado de máscara, para que se "disuelva" en el verde pálido del resto de la web en vez de cortar en seco con un recuadro — así se nota el detalle de las ramas pero no el borde. */ position:relative; overflow:hidden; isolation:isolate; background:#EBEEE3; color:#16210F; padding-block: var(--space-5); } .gallery::before{ /* PNG con las 4 ramas recortadas (fondo 100% transparente) en vez de la foto con "cover": así nunca se recortan por los lados al cambiar el ratio ancho/alto (lo que pasaba en móvil, donde la sección es mucho más alta que ancha y "cover" las sacaba fuera del encuadre). "contain" + el mismo color de fondo que .gallery hace que siempre se vean enteras las 4, sea cual sea el tamaño de pantalla. */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-color:#EBEEE3; background-image: url('../img/gallery-bg-clean.webp'); background-size: contain; background-position: center; background-repeat: no-repeat; } .gallery .wrap{ position:relative; z-index:1; } .gallery .eyebrow{ color:#7A4E05; } .gallery h2{ color:#16210F; } /* ========================================================= RESEÑAS — cinta de reseñas reales de Google en bucle continuo. Técnica del "marquee" sin JS: la lista de tarjetas está duplicada una vez en el HTML (con aria-hidden en la copia) y la animación mueve el track un -50% exacto, así que cuando la copia "real" sale por la izquierda, la duplicada ocupa su sitio en un punto idéntico — el ojo no nota el salto y parece que gira sin fin. Se para al pasar el ratón por encima para poder leer con calma. ========================================================= */ .reviews__viewport{ overflow:hidden; margin-top: var(--space-4); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .reviews__track{ display:flex; gap: var(--space-3); width:max-content; animation: reviews-scroll 48s linear infinite; } .reviews__viewport:hover .reviews__track{ animation-play-state: paused; } @keyframes reviews-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .review-card{ flex:0 0 auto; width: min(320px, 82vw); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); padding: var(--space-3); box-shadow: var(--shadow-1); display:flex; flex-direction:column; gap:.65em; } .review-card__stars{ color: var(--amber); font-size:1.05rem; letter-spacing:.12em; } .review-card__text{ font-size: var(--step--1); line-height:1.65; color: var(--ink); max-width:none; flex:1; } .review-card__author{ font-weight:700; font-size: var(--step--1); color: var(--ink); } .review-card__author span{ display:block; font-weight:500; color: var(--ink-muted); font-size:.82em; margin-top:.1em; } @media (prefers-reduced-motion: reduce){ .reviews__track{ animation:none; } } .carousel{ position:relative; display:flex; align-items:center; gap: var(--space-3); max-width: 46rem; margin-inline:auto; } .carousel--sm{ max-width: 30rem; } .carousel--sm .carousel__track{ aspect-ratio: 4/3; } .carousel__track{ position:relative; flex:1; aspect-ratio: 16/10; border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow-2); } .carousel__slide{ position:absolute; inset:0; margin:0; opacity:0; pointer-events:none; transition: opacity .45s ease; } .carousel__slide.is-active{ opacity:1; pointer-events:auto; } .carousel__slide img, .carousel__slide video{ width:100%; height:100%; object-fit:cover; display:block; } .carousel__arrow{ flex:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(35,32,26,.14); background: rgba(255,255,255,.75); color:#16210F; display:grid; place-items:center; cursor:pointer; box-shadow: var(--relief), var(--shadow-1); transition: box-shadow .2s ease, transform .2s ease, background .2s ease; } .carousel__arrow:hover{ background: rgba(255,255,255,.95); transform: translateY(-1px); } .carousel__arrow:active{ box-shadow: var(--relief-pressed); transform:translateY(0); } .carousel__dots{ display:flex; justify-content:center; gap:.5em; margin-top: var(--space-3); } .carousel__dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background: rgba(35,32,26,.22); transition: background .2s ease, transform .2s ease; } .carousel__dot.is-active{ background:#C4881A; transform: scale(1.2); } @media (max-width:640px){ .carousel{ gap: var(--space-2); } .carousel__arrow{ width:36px; height:36px; } } /* ========================================================= TARJETAS — no son cajas aburridas ========================================================= */ .card{ position:relative; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-l); padding: var(--space-4); box-shadow: var(--shadow-1); overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap: .7em; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; transform-style: preserve-3d; } .card:hover{ box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); transform: translateY(-3px); } .card__icon{ width:72px; height:72px; border-radius: 16px; display:grid; place-items:center; background: var(--brand-soft); color: var(--brand-strong); overflow:hidden; } .card__icon img{ width:100%; height:100%; object-fit:cover; display:block; } .card__media{ margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; width: calc(100% + var(--space-4) * 2); aspect-ratio: 16/10; overflow:hidden; background: var(--brand-soft); } .card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; } .card:hover .card__media img{ transform: scale(1.05); } .card h3{ margin:0; } .card p{ color: var(--ink-muted); margin:0; } .card > .btn{ margin-top:.3em; } .card--photo{ min-height:240px; justify-content:flex-end; color:#fff; } .card__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform .5s ease; } .card:hover .card__bg{ transform: scale(1.06); } .card__scrim{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(8,12,8,.4) 0%, rgba(8,12,8,.58) 45%, rgba(8,12,8,.9) 100%); } .card--photo h3, .card--photo p, .card--photo .eyebrow, .card--photo .num, .card--photo .btn{ position:relative; z-index:2; } .card--photo h3{ color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .card--photo p{ color:rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); } .card--photo .eyebrow{ color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .card--photo .num{ color:#fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); } .card--photo a.link{ color:#fff; text-decoration-color: rgba(255,255,255,.6); } .card--photo a.link:hover{ color: var(--amber-soft); } .card__credit{ position:absolute; z-index:2; top:.7em; right:.9em; font-size:.62rem; color:rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.5); } .card--stat{ text-align:left; } .card--stat .num{ font-family: var(--font-display); font-size: var(--step-4); font-weight:700; color: var(--brand-strong); } .card--photo.card--stat .num{ color:#fff; } /* ========================================================= MENÚ DEL DÍA — "hoja de papel", misma composición que la carta impresa real del local (título fino en mayúsculas, apartados en caligrafía con su raya debajo, listado en versalitas, fecha y precio manuscritos al final). ========================================================= */ @font-face{ font-family: 'Alex Brush'; src: url('../fonts/alex-brush.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } .menu-paper{ --paper-bg: #F8F2E4; --paper-ink: #23201A; --paper-muted: #6B6455; --paper-rule: #8FA37C; --paper-leaf: #B9C7A8; position:relative; overflow:hidden; isolation:isolate; text-align:center; background: var(--paper-bg); color: var(--paper-ink); border-radius: var(--radius-l); box-shadow: var(--shadow-2); padding: var(--space-4); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .menu-paper{ --paper-bg:#EDE6D4; --paper-ink:#221E17; } } :root[data-theme="dark"] .menu-paper{ --paper-bg:#EDE6D4; --paper-ink:#221E17; } .menu-paper::before{ /* grano de papel sutil, como el plástico gofrado de la carta real */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); } .menu-paper::after{ /* segunda ramita, más pequeña y tenue, cruzando desde la esquina opuesta — da la sensación de profundidad que pedía Paqui sin tocar el HTML de ninguna de las hojas de menú */ content:""; position:absolute; z-index:0; pointer-events:none; top:-4%; right:-8%; width:26%; max-width:118px; aspect-ratio: 170/192; opacity:.4; transform: scaleX(-1) rotate(8deg); background-image: url('../img/menus/leaf-br.webp'); background-repeat:no-repeat; background-size:contain; background-position:top right; } .menu-paper__leaf{ /* rama de olivo ilustrada (acuarela real, generada en Canva a partir de las fotos de la carta física) en vez del trazo fino en SVG de antes */ position:absolute; top:-5%; left:-7%; width:42%; max-width:190px; aspect-ratio: 135/192; z-index:0; opacity:.85; color: transparent; pointer-events:none; background-image: url('../img/menus/leaf-tl.webp'); background-repeat:no-repeat; background-size:contain; background-position:top left; } .menu-paper__leaf--lateral{ top:3%; left:-9%; bottom:auto; width:38%; max-width:165px; opacity:.5; transform:none; } .menu-paper__leaf--price, .menu-paper__leaf--corner{ top:auto; left:auto; bottom:-5%; right:-7%; width:42%; max-width:190px; aspect-ratio: 170/192; opacity:.85; transform:none; background-image: url('../img/menus/leaf-br.webp'); background-position:bottom right; } .menu-paper__watermark{ position:absolute; inset:0; z-index:0; display:grid; place-items:center; font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size: clamp(2.4rem, 9vw, 4.2rem); line-height:.95; text-align:center; color: var(--paper-leaf); opacity:.28; pointer-events:none; } .menu-paper__body{ position:relative; z-index:1; } .menu-paper__title{ font-family: var(--font-body); font-weight:300; text-transform:uppercase; letter-spacing:.08em; font-size: var(--step-2); line-height:1.15; margin: 0 auto var(--space-3); color: var(--paper-ink); } .menu-paper__title strong{ font-weight:600; } .menu-paper__section{ margin-bottom: var(--space-3); } .menu-paper__section:last-of-type{ margin-bottom: var(--space-2); } .menu-paper__section h4{ font-family: 'Alex Brush', cursive; font-weight:700; font-size: 2.1rem; line-height:1; margin-bottom:.35em; padding-bottom:.15em; color: var(--paper-ink); border-bottom: 1.5px solid var(--paper-rule); display:inline-block; } .menu-paper__section p{ font-family: var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size: var(--step--1); line-height:1.7; color: var(--paper-muted); max-width:none; } .menu-paper__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55em; font-family: var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size: var(--step--1); line-height:1.4; color: var(--paper-muted); } .menu-paper__footer{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3em; margin-top: var(--space-4); padding-top: var(--space-3); border-top:1px dashed color-mix(in srgb, var(--paper-rule) 60%, transparent); } .menu-paper__date{ font-family:'Alex Brush', cursive; font-size:1.9rem; color: var(--paper-ink); } .menu-paper__price{ font-family: var(--font-display); font-weight:700; font-size:1.6rem; color: var(--amber-strong); white-space:nowrap; } @media (max-width:640px){ .menu-paper{ padding: var(--space-3); } .menu-paper__section h4{ font-size: 1.65rem; } .menu-paper__title{ font-size: var(--step-1); } } /* ========================================================= PESTAÑAS DE ACCESO RÁPIDO A LOS MENÚS — botones píldora que se usan tanto en la portada como dentro de menus.html. ========================================================= */ .menu-tabs__nav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); } .menu-tabs__nav a{ display:flex; align-items:center; justify-content:center; gap:.4em; text-align:center; text-decoration:none; cursor:pointer; padding:.7em 1.2em; border-radius:999px; border:1px solid var(--border); font-size:var(--step--1); font-weight:700; background:var(--surface); color:var(--ink); box-shadow: var(--relief), var(--shadow-1); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, color .2s ease, background-color .2s ease; } .menu-tabs__nav a:hover, .menu-tabs__nav a:focus-visible{ border-color:var(--brand); color:var(--brand-strong); transform: translateY(-2px); box-shadow: var(--relief), var(--shadow-2); } .menu-tabs__nav a:active{ transform: translateY(0); } @media (max-width:640px){ .menu-tabs__nav{ gap: var(--space-1); } .menu-tabs__nav a{ padding:.6em .9em; font-size:.78rem; } } /* ========================================================= PORTADAS DE MENÚ — dos tapas de madera clicables (Menú Diario / Menú Especial), réplica digital de la carpeta física real del local: madera de verdad (foto de la tapa real, no un degradado CSS) con el logo del sol grabado a fuego en el centro. Al abrir una, se revela su(s) hoja(s) de papel con transición suave; los IDs de cada hoja (#diario, #sabados, #diario-especial, #sabados-especial) se mantienen para que los enlaces del desplegable "Menús" de la cabecera sigan funcionando. ========================================================= */ .menu-covers{ display:grid; grid-template-columns:repeat(2, minmax(200px, 1fr)); gap: var(--space-4); max-width: 42rem; margin-inline:auto; } .menu-covers[hidden]{ display:none; } .menu-cover{ appearance:none; border:0; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap: var(--space-2); font:inherit; color:inherit; width:100%; text-decoration:none; } .menu-cover__face{ position:relative; width:100%; aspect-ratio: 3/4; border-radius: var(--radius-l); display:grid; place-items:center; overflow:hidden; background-image: radial-gradient(130% 90% at 24% 4%, rgba(255,224,178,.22), transparent 55%), radial-gradient(120% 100% at 80% 100%, rgba(20,10,3,.45), transparent 60%), url('../img/menus/wood-texture.webp'); background-size: cover; background-position: center; box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255,224,178,.18), inset 0 3px 6px rgba(255,224,178,.3), inset 0 -10px 22px rgba(20,10,3,.55); transition: transform .35s cubic-bezier(.2,.9,.2,1.2), box-shadow .35s ease; } .menu-cover__face::before{ /* grano fino superpuesto a la foto de madera, para que se note la corteza incluso en pantallas grandes donde una sola foto se ve demasiado lisa al estirarla */ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .menu-cover__face::after{ /* biselado en los bordes, como el canto de la tapa dura real */ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow: inset 0 0 0 1.5px rgba(255,224,178,.12), inset 0 0 14px 2px rgba(20,10,3,.35); } .menu-cover__logo{ position:relative; z-index:3; width:52%; color:#241206; mix-blend-mode:multiply; opacity:.92; filter: drop-shadow(1px 1.5px 0 rgba(255,214,150,.5)) drop-shadow(-1px -1px .5px rgba(20,10,3,.6)); transform: translateY(-14%); } .wg-sunmark__word{ font-family: var(--font-display); } .wg-sunmark__sub{ font-family: var(--font-body); } /* Grabado a fuego en la parte baja de la tapa, mismo acabado que el sello del sol (tinta oscura + mix-blend-mode:multiply para que el grano de la madera se note A TRAVÉS de la letra, en vez de una etiqueta plana pegada encima). */ .menu-cover__label{ position:absolute; left:6%; right:6%; bottom:9%; z-index:3; text-align:center; font-family: var(--font-display); font-weight:700; text-transform:uppercase; font-size: clamp(.92rem, 3.6vw, 1.2rem); letter-spacing:.05em; line-height:1.15; color:#241206; mix-blend-mode:multiply; opacity:.92; filter: drop-shadow(1px 1.5px 0 rgba(255,214,150,.5)) drop-shadow(-1px -1px .5px rgba(20,10,3,.6)); pointer-events:none; } .menu-cover__hint{ display:inline-flex; align-items:center; gap:.35em; color: var(--ink-muted); font-size: var(--step--1); font-weight:600; } .menu-cover__hint svg{ width:.9em; height:.9em; transition: transform .25s ease; } .menu-cover:hover .menu-cover__face, .menu-cover:focus-visible .menu-cover__face{ transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255,224,178,.18), inset 0 3px 6px rgba(255,224,178,.35), inset 0 -10px 22px rgba(20,10,3,.55), 0 18px 30px -14px rgba(20,14,4,.5); } .menu-cover:hover .menu-cover__hint svg, .menu-cover:focus-visible .menu-cover__hint svg{ transform: translateX(3px); } .menu-cover:active .menu-cover__face{ transform: translateY(-1px) scale(.98); } .menu-open[hidden]{ display:none; } .menu-open:not([hidden]){ animation: wgMenuOpen .5s cubic-bezier(.16,1,.3,1) both; } @keyframes wgMenuOpen{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } } .menu-back{ appearance:none; border:0; background:none; cursor:pointer; font:inherit; color: var(--brand-strong); display:inline-flex; align-items:center; gap:.4em; font-weight:700; font-size: var(--step--1); padding-block:.4em; margin-bottom: var(--space-3); } .menu-back:hover{ text-decoration:underline; } .menu-open__head{ margin-bottom: var(--space-3); } .menu-open__head h2{ margin-top:.25em; font-size: var(--step-2); } .menu-slot{ scroll-margin-top:100px; } .menu-group{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4); align-items:start; } @media (max-width:760px){ .menu-group{ grid-template-columns:1fr; } } @media (max-width:560px){ .menu-covers{ grid-template-columns:1fr; max-width:280px; } .menu-tabs__nav{ grid-template-columns:1fr; } } /* ========================================================= CARTA — acordeón accesible (details/summary progresivamente mejorado) ========================================================= */ .carta-nav{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-4); position:sticky; top:82px; z-index:20; padding-block:.6rem; } .carta-nav a{ text-decoration:none; padding:.5em 1.1em; border-radius:999px; border:1px solid var(--border); font-size:var(--step--1); font-weight:600; background:var(--surface); box-shadow: var(--relief), var(--shadow-1); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, color .2s ease; } .carta-nav a:hover{ border-color:var(--brand); color:var(--brand-strong); box-shadow: var(--relief), var(--shadow-2); transform: translateY(-1px); } .carta-nav a:active{ box-shadow: var(--relief-pressed); transform: translateY(0); } .accordion{ display:flex; flex-direction:column; gap: var(--space-2); } .accordion__item{ border-bottom:0; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); padding-inline: var(--space-3); box-shadow: var(--relief), var(--shadow-1); transition: box-shadow .25s ease; } .accordion__item[open]{ box-shadow: var(--relief), var(--shadow-2); } .accordion__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1em; padding: var(--space-3) 0; font-family: var(--font-display); font-size: var(--step-2); font-weight:700; } .accordion__item summary::-webkit-details-marker{ display:none; } .accordion__item summary .plus{ width:26px; height:26px; flex:none; position:relative; } .accordion__item summary .plus::before, .accordion__item summary .plus::after{ content:""; position:absolute; background: var(--brand-strong); border-radius:2px; transition: transform .3s ease; } .accordion__item summary .plus::before{ inset:11px 2px; height:3px; } .accordion__item summary .plus::after{ inset:2px 11px; width:3px; } .accordion__item[open] summary .plus::after{ transform: rotate(90deg); opacity:0; } /* Sin JS:
se abre/cierra de forma nativa e instantánea (accesible por defecto). Con JS: app.js anima la propiedad "height" en línea sobre este mismo elemento. */ .accordion__panel{ overflow:hidden; transition: height .35s ease; } .accordion__panel-inner{ padding-bottom: var(--space-4); } .dish-list{ display:grid; gap: var(--space-2); } .dish-list.two-col{ grid-template-columns:1fr 1fr; column-gap: var(--space-4); } @media (max-width:700px){ .dish-list.two-col{ grid-template-columns:1fr; } } .dish{ display:flex; gap:1em; align-items:baseline; padding-block:.5em; border-bottom:1px dashed var(--border); } .dish__name{ font-weight:700; } .dish__desc{ display:block; color: var(--ink-muted); font-size: var(--step--1); margin-top:.3em; } .dish__allergens{ display:inline-flex; gap:.25em; margin-left:.45em; vertical-align:middle; } .dish__fill{ flex:1; border-bottom:1px dotted var(--border); transform: translateY(-.4em); } .dish__price{ font-family: var(--font-display); font-weight:700; white-space:nowrap; color: var(--amber-strong); } .dish--new{ flex-wrap:wrap; } .dish__badge{ display:inline-flex; align-items:center; gap:.3em; flex-basis:100%; order:-1; margin-bottom:.35em; background: linear-gradient(135deg, #EFC15C, #C4881A); color:#241206; font-family: var(--font-body); font-weight:800; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:.3em .75em; border-radius:999px; box-shadow: 0 2px 6px rgba(0,0,0,.3); width:fit-content; } @media (max-width:480px){ .dish{ flex-wrap:wrap; } .dish__fill{ display:none; } .dish__price{ flex-basis:100%; text-align:right; } } .tag{ display:inline-flex; align-items:center; justify-content:center; min-width:1.7em; height:1.5em; padding:0 .3em; border-radius:5px; background: var(--brand-soft); color: var(--brand-strong); border:1px solid var(--brand); font-size:.62rem; font-weight:800; letter-spacing:.02em; text-decoration:none; cursor:help; } /* --------------------------------------------------------- PIZARRAS — la carta recreando, tal cual, la cartelera real del local: madera, pizarra negra y tiza, con sus dibujos. --------------------------------------------------------- */ @font-face{ font-family:'Permanent Marker'; src:url('../fonts/permanent-marker.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Caveat'; src:url('../fonts/caveat-variable.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } .accordion.boards{ border-top:0; display:flex; flex-direction:column; gap: var(--space-4); } .board{ /* Marco de madera real: listones horizontales + veta diagonal sutil + cuatro remaches en las esquinas, como el listón que sujeta una pizarra de verdad. */ position:relative; background: radial-gradient(circle, rgba(40,25,10,.6) 0 40%, rgba(255,224,178,.45) 40% 60%, transparent 60%) 14px 14px/9px 9px no-repeat, radial-gradient(circle, rgba(40,25,10,.6) 0 40%, rgba(255,224,178,.45) 40% 60%, transparent 60%) calc(100% - 14px) 14px/9px 9px no-repeat, radial-gradient(circle, rgba(40,25,10,.6) 0 40%, rgba(255,224,178,.45) 40% 60%, transparent 60%) 14px calc(100% - 14px)/9px 9px no-repeat, radial-gradient(circle, rgba(40,25,10,.6) 0 40%, rgba(255,224,178,.45) 40% 60%, transparent 60%) calc(100% - 14px) calc(100% - 14px)/9px 9px no-repeat, repeating-linear-gradient(115deg, rgba(70,42,16,.1) 0 3px, transparent 3px 9px), repeating-linear-gradient(180deg, rgba(0,0,0,.08) 0 2px, transparent 2px 3px, transparent 3px 44px, rgba(255,255,255,.06) 44px 46px), linear-gradient(100deg, #DCB27C 0%, #C7975E 38%, #C0904F 62%, #D6AA73 100%); border-radius: var(--radius-l); padding:12px; box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(40,25,10,.35); border-bottom:0; overflow:hidden; } /* El "polvo de tiza": manchurrones de borrador, veladuras irregulares y una viñeta en los bordes, como una pizarra usada de verdad — igual que las fotos de cabecera — encima de la textura granulada fina de siempre. */ .board > summary, .board .accordion__panel{ background: radial-gradient(ellipse 55% 40% at 12% 18%, rgba(245,239,223,.07), transparent 70%), radial-gradient(ellipse 45% 35% at 88% 82%, rgba(245,239,223,.055), transparent 70%), radial-gradient(ellipse 35% 25% at 65% 12%, rgba(245,239,223,.045), transparent 70%), radial-gradient(ellipse 40% 30% at 30% 95%, rgba(245,239,223,.04), transparent 70%), radial-gradient(rgba(245,239,223,.07) 1px, transparent 1.3px) 0 0/3px 3px, radial-gradient(rgba(245,239,223,.05) 1px, transparent 1.3px) 1.5px 1.5px/3px 3px, radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.3) 100%), #1E1B16; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); } .board > summary{ color:#FDFDFB; margin:0; border-radius: var(--radius-m); padding: 1rem 1.3rem; font-family:'Permanent Marker', cursive; font-weight:400; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.05rem); letter-spacing:.01em; line-height:1.15; } .board__head > span:first-child{ /* Doble trazo de tiza, igual que en las fotos reales: blanco encima, un eco blanco roto justo debajo — sin ningún tinte dorado. El filtro de rugosidad (definido en el SVG del head) le da el temblor de la tiza de verdad sobre pizarra, sin afectar a la foto ni al icono +. */ display:inline-block; filter: url(#chalkRough); text-shadow: 1.5px 1.5px 0 rgba(255,255,255,.55), 2.5px 2.5px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.45); } .board > summary .plus::before, .board > summary .plus::after{ background:#FDFDFB; } .board[open] > summary{ border-radius: var(--radius-m) var(--radius-m) 0 0; } .board .accordion__panel{ border-radius: 0 0 var(--radius-m) var(--radius-m); } .board .accordion__panel-inner{ padding: .2rem 1.3rem 1.5rem; } .board__head{ display:flex; align-items:center; gap:.8em; min-width:0; } .board .board__photo{ display:block; flex:none; height:clamp(64px, 7vw, 112px); width:auto; max-width:280px; aspect-ratio:2000/1091; object-fit:cover; mix-blend-mode:screen; opacity:.95; } @media (max-width:640px){ .board .board__photo{ height:clamp(46px, 15vw, 70px); max-width:170px; } } .board h3{ font-family:'Caveat', cursive; font-weight:700; font-size:1.5rem; color:#EFC15C; border-bottom:0; margin: 1em 0 .4em; filter: url(#chalkRough); text-shadow: 1px 1px 0 rgba(255,235,180,.5), 1.8px 1.8px 0 rgba(255,235,180,.22), 0 0 8px rgba(239,193,92,.3); } .board h3 small{ font-family: var(--font-body); font-weight:600; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(245,239,223,.55); } .board .dish{ border-bottom-color: rgba(245,239,223,.18); } /* Ligerísimo desnivel alterno, como si cada línea se hubiese escrito a mano en un momento distinto — evita el aspecto "tipeado" perfecto. */ .board .dish:nth-child(odd) .dish__name{ display:inline-block; transform: rotate(-.5deg); } .board .dish:nth-child(even) .dish__name{ display:inline-block; transform: rotate(.4deg); } .board .dish__name{ font-family:'Caveat', cursive; font-weight:700; font-size:1.4rem; color:#F5EFDF; text-shadow: 1px 1px 0 rgba(255,255,255,.32), 1.6px 1.6px 0 rgba(255,255,255,.14), 0 0 6px rgba(245,239,223,.18); } .board .dish__desc{ font-family: var(--font-body); color: rgba(245,239,223,.6); } .board .dish__fill{ border-bottom-color: rgba(245,239,223,.28); } .board .dish__price{ font-family:'Caveat', cursive; font-weight:700; font-size:1.5rem; color:#EFC15C; text-shadow: 1px 1px 0 rgba(255,235,180,.4), 1.6px 1.6px 0 rgba(255,235,180,.18), 0 0 6px rgba(239,193,92,.28); } @media (max-width:640px){ .board{ border-radius: var(--radius-l); padding:8px; } .board > summary{ padding:.85rem 1rem; border-radius: var(--radius-s); } .board[open] > summary{ border-radius: var(--radius-s) var(--radius-s) 0 0; } .board .accordion__panel{ border-radius: 0 0 var(--radius-s) var(--radius-s); } .board .accordion__panel-inner{ padding:.2rem 1rem 1.2rem; } } .allergen-legend{ display:flex; flex-wrap:wrap; gap:.6em; padding: var(--space-3); border-radius: var(--radius-m); background: var(--brand-soft); border:1px solid var(--border); } .allergen-legend .chip{ display:inline-flex; align-items:center; gap:.4em; font-size:.8rem; font-weight:700; padding:.45em .9em; border-radius:999px; background:var(--surface); border:1px solid var(--brand); color:var(--brand-strong); box-shadow: var(--relief); cursor:default; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } .allergen-legend .chip svg{ width:14px; height:14px; flex:none; } .allergen-legend .chip b{ font-weight:800; letter-spacing:.03em; opacity:.75; } .allergen-legend .chip:hover, .allergen-legend .chip:focus-visible{ background: var(--brand); color:#fff; outline:none; transform: translateY(-2px) scale(1.06); box-shadow: var(--relief), var(--shadow-2); } /* ========================================================= FORMULARIOS ========================================================= */ .form{ display:grid; gap: var(--space-3); max-width: 40rem; } .field{ display:grid; gap:.4em; } .field label{ font-weight:700; font-size: var(--step--1); } .field input, .field textarea{ background: var(--surface); border:1.5px solid var(--border); border-radius: var(--radius-s); padding: .8em 1em; font-size:1rem; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; } .field input:focus, .field textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); outline:none; } .field small{ color: var(--ink-muted); } .field.has-error input, .field.has-error textarea{ border-color: var(--critical); } .field__error{ color: var(--critical); font-size: var(--step--1); display:none; } .field.has-error .field__error{ display:block; } .consent-check{ display:flex; gap:.7em; align-items:flex-start; font-size: var(--step--1); color: var(--ink-muted); } .consent-check input{ margin-top:.3em; width:1.1em; height:1.1em; accent-color: var(--brand); flex:none; } .form__legal-note{ font-size:.8rem; color: var(--ink-muted); background: var(--surface-2); border-radius: var(--radius-s); padding: var(--space-2); line-height:1.5; } .form__status{ padding: var(--space-2); border-radius: var(--radius-s); display:none; } .form__status.is-success{ display:block; background: var(--success-soft); color: var(--success); } .form__status.is-error{ display:block; background: var(--critical-soft); color: var(--critical); } .honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ========================================================= FOOTER ========================================================= */ footer.site-footer{ border-top:1px solid var(--border); padding-block: var(--space-5) var(--space-4); margin-top: var(--space-5); } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--space-4); } @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } } .footer-grid h4{ font-family: var(--font-body); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-muted); margin-bottom: var(--space-2); } .footer-grid ul{ display:grid; gap:.6em; } .footer-grid a{ text-decoration:none; } .footer-grid a:hover{ color: var(--brand-strong); } .footer-bottom{ display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:space-between; margin-top: var(--space-5); padding-top: var(--space-3); border-top:1px solid var(--border); color: var(--ink-muted); font-size:.8rem; } .footer-bottom nav{ display:flex; gap:1.2em; flex-wrap:wrap; } .social-row{ display:flex; gap:.6em; } .social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; transition: background .2s ease, transform .2s ease; } .social-row a:hover{ background: var(--brand-soft); transform: translateY(-2px); } /* ========================================================= COOKIE CONSENT ========================================================= */ .consent-banner{ position: fixed; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); z-index: 1000; max-width: 640px; margin-inline:auto; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding: var(--space-4); transform: translateY(140%); transition: transform .5s cubic-bezier(.2,.9,.2,1); } .consent-banner.is-visible{ transform:none; } .consent-banner p{ font-size: var(--step--1); color: var(--ink-muted); } .consent-banner__actions{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-top: var(--space-3); } .consent-banner__actions .btn{ flex:1; min-width:9rem; } .consent-modal{ position: fixed; inset:0; z-index:1001; display:none; place-items:center; padding: var(--space-3); background: rgba(10,16,10,.55); backdrop-filter: blur(3px); } .consent-modal.is-visible{ display:grid; } .consent-modal__panel{ background: var(--surface); border-radius: var(--radius-l); padding: var(--space-4); max-width: 34rem; width:100%; max-height: 85vh; overflow:auto; box-shadow: var(--shadow-2); } .consent-row{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom:1px solid var(--border); } .consent-row:last-of-type{ border-bottom:0; } .switch{ position:relative; width:44px; height:26px; flex:none; } .switch input{ opacity:0; position:absolute; inset:0; margin:0; cursor:pointer; } .switch .track{ position:absolute; inset:0; background: var(--border); border-radius:999px; transition: background .2s ease; } .switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .switch input:checked + .track{ background: var(--brand); } .switch input:checked ~ .thumb{ transform: translateX(18px); } .switch input:disabled + .track{ opacity:.6; } /* ========================================================= 404 ========================================================= */ .error-page{ min-height:60vh; display:grid; place-items:center; text-align:center; gap: var(--space-3); padding-block: var(--space-6); } .error-page .code{ font-family: var(--font-display); font-size: clamp(4rem,14vw,8rem); font-weight:800; color: var(--brand-soft); -webkit-text-stroke: 2px var(--brand-strong); } /* ========================================================= LEGAL ========================================================= */ .legal h2{ margin-top: var(--space-4); font-size: var(--step-2); } .legal h3{ font-size: var(--step-1); margin-top: var(--space-3); } .legal p, .legal li{ color: var(--ink-muted); } .legal .placeholder{ background: var(--amber-soft); color: var(--amber-strong); padding:.15em .5em; border-radius:6px; font-weight:700; } .legal table{ width:100%; border-collapse:collapse; margin-block: var(--space-2); } .legal th, .legal td{ border:1px solid var(--border); padding:.6em .8em; text-align:left; font-size: var(--step--1); } .legal th{ background: var(--surface-2); } /* ========================================================= AVISO DE EVENTO (Expo Reus) — cartel destacado en la portada. - Entrada en cadena al llegar a la sección: el cartel sube y se "asienta" con un ligero giro, la etiqueta rebota y el texto entra escalonado. Un destello cruza el cartel una sola vez. - Solo se anima si hay JS y el usuario no pidió "reducir movimiento"; si no, se ve ya colocado. - Se oculta solo pasada la fecha de data-hasta (ver app.js). - Es un