/* ======================================================================= base.css — Restaurante Aitana · reset + tipografía base + utilidades ----------------------------------------------------------------------- Consume tokens.css. Reset moderno, tipografía base, contenedores, overline, filete ornamental con rombo, botones premium, subrayado animado, foco visible y estados base de reveal (con fallback sin JS / reduced-motion). Al final: shell del backoffice (compat F0). Sin inline. ======================================================================= */ /* ----------------------------- Reset --------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } /* Lenis gestiona el scroll cuando está activo: desactiva el nativo. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--fuente-texto); font-size: var(--fs-cuerpo); line-height: var(--lh-cuerpo); color: var(--texto); background: var(--crema); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Cortar el desbordamiento horizontal SIEMPRE en , nunca en : un overflow-x en (con visible) convierte al body en su propio contenedor de scroll → segunda barra de scroll anidada, window.scrollY clavado a 0, Lenis/ScrollTrigger/sticky y el header inteligente rotos. `clip` no crea contenedor de scroll; `hidden` queda como fallback antiguo. */ html { overflow-x: hidden; overflow-x: clip; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } p, h1, h2, h3, h4, li { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding: 0; } ::selection { background: var(--terracota); color: var(--marfil); } /* --------------------------- Tipografía ------------------------------ */ h1, h2, h3, h4 { font-family: var(--fuente-display); font-weight: 700; line-height: var(--lh-display); letter-spacing: -0.015em; color: var(--tinta); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; } em, i { font-style: italic; } a { color: var(--terracota-texto); text-decoration: none; transition: color var(--dur-rapida) var(--ease-suave); } a:hover { color: var(--terracota); } /* --------------------------- Accesibilidad --------------------------- */ .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); background: var(--tinta); color: var(--crema); padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radio-sm) var(--radio-sm); z-index: var(--z-skip); transition: transform var(--dur-rapida) var(--ease-suave); } .skip-link:focus { transform: translate(-50%, 0); color: var(--crema); } :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: var(--radio-xs); } .visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------- Contenedores ---------------------------- */ .contenedor { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--gutter); } .contenedor--estrecho { max-width: 920px; } .seccion { padding-block: var(--seccion-y); } /* ----------------------------- Overline ------------------------------ */ .overline { display: inline-block; font-family: var(--fuente-texto); font-size: var(--fs-overline); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracota-texto); margin-bottom: var(--e-4); } .overline--claro { color: var(--tostado); } /* sobre fondos oscuros */ .overline__num { /* Oro más oscuro para cumplir AA (4.5:1) como texto pequeño sobre fondos claros (marfil/crema/crema-alt). Sobre fondos oscuros se usa el oro original (regla .overline--claro más abajo), donde el contraste sobra. */ color: var(--tema-overline-num-fg, #7d5f2e); font-variant-numeric: tabular-nums; margin-right: 0.5em; } .overline--claro .overline__num { color: var(--oro-viejo); } /* --------------- Filete ornamental con rombo (separador) ------------- */ .filete { display: flex; align-items: center; justify-content: center; gap: 0.9rem; color: var(--linea); } .filete::before, .filete::after { content: ""; height: 1px; width: min(120px, 22vw); background: currentColor; } .filete__rombo { width: 7px; height: 7px; background: var(--oro-viejo); transform: rotate(45deg); flex: none; } .filete--claro { color: var(--linea-clara); } /* ----------------------------- Botones ------------------------------- */ .boton { --boton-bg: var(--terracota); --boton-fg: var(--marfil); display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.6rem; border-radius: var(--tema-boton-radio, var(--radio-xs)); font-family: var(--fuente-texto); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em; line-height: 1; text-align: center; background: var(--boton-bg); color: var(--boton-fg); border-width: var(--tema-boton-borde-grosor, 1.5px); border-style: var(--tema-boton-borde-estilo, solid); border-color: var(--boton-bg); transition: background var(--dur-media) var(--ease-suave), border-color var(--dur-media) var(--ease-suave), color var(--dur-media) var(--ease-suave), transform var(--dur-rapida) var(--ease-suave), box-shadow var(--dur-media) var(--ease-suave); will-change: transform; } .boton:hover { color: var(--marfil); transform: translateY(-2px); box-shadow: var(--sombra-md); } .boton--primario:hover { --boton-bg: var(--tema-boton-primario-bg-hover, #8a3f35); border-color: var(--tema-boton-primario-borde-hover, #8a3f35); } .boton--fantasma { --boton-bg: transparent; --boton-fg: var(--tinta); border-color: var(--arena); } .boton--fantasma:hover { --boton-fg: var(--tinta); color: var(--tinta); background: var(--crema-alt); border-color: var(--tostado); } /* Fantasma sobre fondos oscuros */ .boton--fantasma-claro { --boton-bg: transparent; --boton-fg: var(--crema); border-color: var(--tema-boton-fantasma-claro-borde, rgba(248, 244, 237, 0.5)); } .boton--fantasma-claro:hover { color: var(--tinta); background: var(--crema); border-color: var(--crema); } .boton--wa { --boton-bg: var(--tema-boton-wa-bg, #158043); /* verde WhatsApp oscurecido a AA 4.5:1 con texto blanco (5.0:1) */ --boton-fg: var(--tema-boton-wa-fg, #ffffff); border-color: var(--tema-boton-wa-borde, #158043); } .boton--wa:hover { --boton-bg: var(--tema-boton-wa-bg-hover, #0f6e39); border-color: var(--tema-boton-wa-borde-hover, #0f6e39); color: var(--tema-boton-wa-fg-hover, #fff); } .boton__icono { width: 1.15em; height: 1.15em; flex: none; } /* ---------------------- Enlace con subrayado animado ------------------ */ .enlace-sub { position: relative; display: inline-block; font-weight: 600; color: var(--terracota-texto); padding-bottom: 2px; } .enlace-sub::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-media) var(--ease-suave); } .enlace-sub:hover::after, .enlace-sub:focus-visible::after { transform: scaleX(1); } .enlace-sub--claro { color: var(--tostado); } .enlace-sub .flecha { transition: transform var(--dur-media) var(--ease-suave); display: inline-block; } .enlace-sub:hover .flecha { transform: translateX(4px); } /* --------------------- Estados base de reveal (JS) -------------------- */ /* Sin JS (no hay clase .js) o con reduced-motion: SIEMPRE estado final visible. Solo cuando main.js activa .js se ocultan para animarlos. */ html.js [data-reveal] { opacity: 0; } html.js [data-reveal="up"] { transform: translateY(28px); } html.js [data-reveal="left"] { transform: translateX(-28px); } html.js [data-reveal="scale"] { transform: scale(0.96); } html.js [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity var(--dur-lenta) var(--ease-expo), transform var(--dur-lenta) var(--ease-expo); } /* Máscara/clip-path reveal para imágenes editoriales */ html.js [data-reveal="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); } html.js [data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease-expo); } /* ------------------------- WhatsApp flotante ------------------------- */ .whatsapp-flotante { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); display: inline-flex; align-items: center; gap: 0.5rem; background: var(--tema-whatsapp-flotante-bg, #158043); color: var(--tema-whatsapp-flotante-fg, #fff); padding: 0.8rem 1.1rem; border-radius: var(--radio-pill); font-weight: 600; font-size: 0.95rem; box-shadow: var(--sombra-md); z-index: var(--z-flotante); transition: transform var(--dur-rapida) var(--ease-suave), background var(--dur-rapida) var(--ease-suave); } .whatsapp-flotante:hover { background: var(--tema-whatsapp-flotante-bg-hover, #17864a); color: var(--tema-whatsapp-flotante-fg-hover, #fff); transform: translateY(-2px) scale(1.03); } .whatsapp-flotante__icono { width: 1.4em; height: 1.4em; } @media (max-width: 640px) { .whatsapp-flotante__texto { display: none; } .whatsapp-flotante { padding: 0.85rem; } } /* Con JS: el flotante aparece SOLO tras pasar el hero/primera pantalla, para no pisar el CTA «Descubrir la carta» del hero en móvil (fix F2b). Sin JS se muestra siempre (progressive enhancement). */ html.js .whatsapp-flotante { opacity: 0; visibility: hidden; transform: translateY(1.2rem); pointer-events: none; transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-suave), visibility 0s linear var(--dur-media); } html.js .whatsapp-flotante.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--dur-media) var(--ease-suave), transform var(--dur-media) var(--ease-suave); } /* ---------------------- Mapa click-to-load (RGPD) -------------------- */ /* Compartido por la home (Visítanos) y /contacto. Tile oscuro autocontenido: funciona sobre fondos claros y oscuros. El iframe de Google solo se inyecta al pulsar el botón (main.js). */ .mapa-ctl { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radio-sm); overflow: hidden; border: 1px solid var(--linea-clara); background: repeating-linear-gradient(45deg, var(--tema-mapa-ctl-textura, rgba(216,200,179,0.05)) 0 14px, transparent 14px 28px), radial-gradient(120% 120% at 70% 30%, var(--tema-mapa-ctl-bg-degradado, #222846), var(--tinta)); } .mapa-ctl__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 2rem; } .mapa-ctl__pin { width: 44px; height: 44px; color: var(--tostado); } .mapa-ctl__dir { color: var(--texto-claro-suave); font-size: 0.95rem; max-width: 30ch; } .mapa-ctl__aviso { color: var(--tema-mapa-ctl-aviso-fg, rgba(248,244,237,0.55)); font-size: 0.8rem; max-width: 32ch; } .mapa-ctl__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mapa-ctl.is-cargado .mapa-ctl__placeholder { display: none; } /* ----------------------- prefers-reduced-motion ---------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Estado final visible SIEMPRE, aunque JS esté activo. */ html.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ======================================================================= Páginas provisionales (el-restaurante, carta, blog, legal, 404) — F2b ----------------------------------------------------------------------- Estilo base decente con el nuevo design system mientras se maquetan sus vistas definitivas en F2b. Contenedor, cabecera, bloques y botón alias. ======================================================================= */ .page-hero { background: var(--crema-alt); padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .page-hero__inner, .bloque__inner, .legal__inner, .blog-entrada__inner, .error-404__inner { width: 100%; max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--gutter); } .legal__inner, .blog-entrada__inner { max-width: 780px; } .page-hero__titulo { margin-bottom: 0.5rem; } .page-hero__subtitulo { color: var(--texto-suave); font-size: var(--fs-cuerpo-lg); } .bloque { padding-block: clamp(1.5rem, 4vw, 3rem); } .bloque__titulo { margin-bottom: 0.8rem; } .bloque__cuerpo, .legal__aviso, .nota-desarrollo, .blog-listado__intro { color: var(--texto-suave); max-width: var(--ancho-texto); } .legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .legal__titulo { margin-bottom: 1.2rem; } .blog-lista, .blog-listado__lista { display: grid; gap: 1.5rem; } .error-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .error-404__titulo { margin-bottom: 0.8rem; } .error-404__texto { color: var(--texto-suave); margin-bottom: 1.8rem; } /* Alias del botón antiguo (.btn) al nuevo (.boton) para las vistas F0. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.6rem; border-radius: var(--radio-xs); font-weight: 600; font-size: 0.98rem; background: var(--terracota); color: var(--marfil); border: 1.5px solid var(--terracota); transition: background var(--dur-media) var(--ease-suave), transform var(--dur-rapida) var(--ease-suave); } .btn--primario:hover { background: var(--tema-boton-primario-bg-hover, #8a3f35); border-color: var(--tema-boton-primario-borde-hover, #8a3f35); color: var(--marfil); transform: translateY(-2px); } /* ======================================================================= Backoffice (F0): shell mínimo del panel. Diseño premium en F3. (Conservado del base.css provisional para no romper /admin.) ======================================================================= */ body.admin { background: var(--crema-alt); } .admin-shell { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; } .admin-login, .admin-dashboard { background: var(--tema-admin-panel-bg, #fff); padding: 2rem; border-radius: var(--radio-md); box-shadow: var(--sombra-md); max-width: 420px; width: 100%; margin-top: 4vh; } .admin-dashboard { max-width: 640px; } .admin-login__titulo { text-align: center; margin-bottom: 0.2rem; } .admin-login__subtitulo { text-align: center; color: var(--texto-suave); margin-top: 0; } .admin-form { display: flex; flex-direction: column; gap: 0.4rem; } .admin-form__label { font-weight: 600; margin-top: 0.6rem; } .admin-form__input { padding: 0.6rem 0.7rem; border: 1px solid var(--tema-admin-input-borde, #cbc4b6); border-radius: var(--radio-sm); } .admin-form__submit { margin-top: 1.2rem; padding: 0.7rem 1rem; background: var(--tinta); color: var(--tema-admin-boton-fg, #fff); border-radius: var(--radio-sm); font-weight: 600; } .admin-form__submit:hover { background: var(--tema-admin-boton-bg-hover, #0f1220); } .admin-alert { padding: 0.75rem 1rem; border-radius: var(--radio-sm); margin-bottom: 1rem; } .admin-alert--error { background: var(--tema-admin-alerta-error-bg, #fbe4e0); color: var(--tema-admin-alerta-error-fg, #7a241a); } .admin-alert--warning { background: var(--tema-admin-alerta-warning-bg, #fdf1d6); color: var(--tema-admin-alerta-warning-fg, #6b4e0a); }