@charset "UTF-8"; /* ========================================================================= MIRADOR DON JOSÉ · hoja de estilos del tema Kit v5 · prefijo .mdj- · móvil primero Dirección visual: «Brasa y cal» (guardada y activa en Novamira) El scope .mdj-scope lo pone functions.php en el , UNA sola vez. NO se vuelve a abrir dentro de ninguna plantilla ni fragmento. REGLA QUE MANDA SOBRE TODO LO DEMÁS: las reglas base sobre etiquetas van SIEMPRE con :where(), que no suma especificidad, para que se queden en (0,1,0) y cualquier clase pueda ganarles. Las utilidades van SIEMPRE prefijadas con .mdj-scope. ÍNDICE 1 · Tipografías autoalojadas 2 · Fichas de diseño (variables) 3 · Reinicio y base 4 · Accesibilidad 5 · Composición: contenedor, secciones 6 · Cabecera y navegación 7 · Botones 8 · Portada: hero 9 · Cabecera de página interior y migas 10 · Pie 11 · Flotantes: WhatsApp y barra de móvil 12 · Consentimiento 13 · Movimiento 14 · Utilidades 15 · Impresión ========================================================================= */ /* ========================================================================= 1 · TIPOGRAFÍAS AUTOALOJADAS Solo WOFF2 y solo variables: un archivo en lugar de cinco. Nunca desde CDN: una petición a fonts.gstatic.com convertiría un sitio sin cookies en un sitio que tiene que pedir permiso. Subconjunto latino. Licencia OFL-1.1. ========================================================================= */ @font-face { font-family: 'Oswald Variable'; font-style: normal; font-weight: 200 700; font-display: swap; src: url('fuentes/oswald-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Jost Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fuentes/jost-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= 2 · FICHAS DE DISEÑO Contrastes calculados sobre la cal #F4EDE4 y sobre el vino #5C2E2E. ========================================================================= */ :root { /* --- Color ---------------------------------------------------------- */ --mdj-cal: #F4EDE4; /* fondo principal, blanco de cal */ --mdj-superficie: #FBF7F2; /* superficie apenas levantada */ --mdj-carbon: #1E1A18; /* texto y bandas oscuras. 14,87:1 sobre cal */ --mdj-vino: #5C2E2E; /* mancha de color. 9,59:1 sobre cal */ --mdj-vino-claro: #8A5A5A; /* apoyo. 4,90:1 sobre cal */ /* OJO CON ESTOS TRES. El terracota de marca da 3,90:1 sobre cal: NO vale para texto de menos de 24px. Para eso está el fuerte, que da 4,68:1. Y sobre vino el terracota se hunde a 2,46:1: ahí manda el ámbar, 4,74:1. */ --mdj-terracota: #C0563A; /* decorativo: filetes, iconos, hover */ --mdj-terracota-fuerte: #B04A2E; /* texto y botones sobre cal */ --mdj-ambar: #E09A57; /* acento sobre vino y sobre carbón */ --mdj-piedra: #A89684; /* 2,46:1. Solo bordes, nunca texto */ --mdj-apagado: #E9E2D8; /* fondo de banda alterna */ --mdj-tinta-suave: #6A5E56; /* texto secundario. 5,40:1 sobre cal */ --mdj-linea: #DCD3C8; /* filetes finos sobre cal */ --mdj-linea-osc: rgba(244, 237, 228, 0.15); /* filetes sobre oscuro */ /* Velos de foto. El del hero es el del prototipo, medido en vino. */ --mdj-velo-hero: linear-gradient( to top, rgba(92, 46, 46, 0.92) 0%, rgba(92, 46, 46, 0.55) 45%, rgba(92, 46, 46, 0) 100% ); /* --- Tipografía ------------------------------------------------------ Pila de respaldo real, con métricas parecidas, no `sans-serif` a secas. Oswald es condensada: el respaldo tiene que serlo también. */ --mdj-tipo-display: 'Oswald Variable', Oswald, 'Arial Narrow', 'Helvetica Neue Condensed', Arial, sans-serif; --mdj-tipo-texto: 'Jost Variable', Jost, 'Century Gothic', 'Helvetica Neue', Arial, sans-serif; /* Escala. Las dos grandes son las del prototipo, tal cual. */ --mdj-t-xs: 0.75rem; --mdj-t-s: 0.875rem; --mdj-t-m: 1rem; --mdj-t-l: 1.125rem; --mdj-t-xl: 1.5rem; --mdj-t-2xl: 2rem; --mdj-t-titulo: clamp(2rem, 5.5vw, 3.75rem); --mdj-t-hero: clamp(3rem, 11vw, 7rem); /* --- Espaciado. Escala de 4px, saltos grandes fluidos. -------------- */ --mdj-e-1: 4px; --mdj-e-2: 8px; --mdj-e-3: 12px; --mdj-e-4: 16px; --mdj-e-5: 24px; --mdj-e-6: 32px; --mdj-e-7: 48px; --mdj-e-8: 64px; --mdj-e-9: clamp(64px, 8vw, 112px); --mdj-e-10: clamp(96px, 11vw, 128px); /* aire entre secciones */ /* --- Composición ---------------------------------------------------- */ --mdj-ancho: 1280px; /* max-w-7xl del prototipo */ --mdj-ancho-medio: 1152px; /* max-w-6xl */ --mdj-ancho-texto: 66ch; --mdj-margen: 20px; --mdj-cabecera: 88px; /* alto de la cabecera fija */ /* --- Movimiento ----------------------------------------------------- */ --mdj-t-rapida: 160ms cubic-bezier(0.2, 0, 0.2, 1); --mdj-t-media: 320ms cubic-bezier(0.16, 1, 0.3, 1); --mdj-t-lenta: 500ms cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 640px) { :root { --mdj-margen: 32px; } } /* ========================================================================= 3 · REINICIO Y BASE Todas las reglas sobre etiquetas van con :where(). Si alguna se escribe sin él, las clases dejan de poder ganarle y el fallo no se ve. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* La cabecera es fija: sin esto, un enlace ancla deja el titular debajo. */ scroll-padding-top: var(--mdj-cabecera); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.mdj-scope { margin: 0; background: var(--mdj-cal); color: var(--mdj-carbon); font-family: var(--mdj-tipo-texto); font-size: var(--mdj-t-m); font-weight: 300; line-height: 1.65; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Las páginas que no abren con foto a sangre necesitan el hueco de la cabecera fija. La clase la pone seo-minimo.php a partir de _mdj_hero. */ .mdj-scope:not(.mdj-tiene-hero) #mdj-contenido { padding-top: var(--mdj-cabecera); } .mdj-scope :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--mdj-tipo-display); font-weight: 500; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; text-wrap: balance; color: inherit; } .mdj-scope :where(p) { margin: 0 0 1.2em; } .mdj-scope :where(p):last-child { margin-bottom: 0; } .mdj-scope :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; } .mdj-scope :where(li) { margin-bottom: 0.4em; } .mdj-scope :where(a) { color: var(--mdj-terracota-fuerte); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--mdj-t-rapida); } .mdj-scope :where(a:hover) { color: var(--mdj-vino); } .mdj-scope :where(img, svg, video, iframe) { max-width: 100%; height: auto; display: block; } .mdj-scope :where(strong, b) { font-weight: 500; } .mdj-scope :where(hr) { border: 0; border-top: 1px solid var(--mdj-linea); margin: var(--mdj-e-7) 0; } .mdj-scope :where(table) { border-collapse: collapse; width: 100%; } /* Cifras tabulares en TODO lo numérico. Es la razón por la que hay que vigilar la carta: sin esto, «18,90 €» y «9,00 €» bailan en la columna. */ .mdj-scope :where(time, td, th) { font-variant-numeric: tabular-nums lining-nums; } /* Nada de radios en ningún sitio. Es una decisión, no un descuido. */ .mdj-scope :where(img, button, input, select, textarea, video) { border-radius: 0; } /* ========================================================================= 4 · ACCESIBILIDAD ========================================================================= */ .mdj-scope .mdj-saltar { position: absolute; left: var(--mdj-e-4); top: -100px; z-index: 200; padding: var(--mdj-e-3) var(--mdj-e-5); background: var(--mdj-vino); color: var(--mdj-cal); font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-s); text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; transition: top var(--mdj-t-rapida); } .mdj-scope .mdj-saltar:focus { top: var(--mdj-e-4); color: var(--mdj-cal); } /* Anillo de foco visible de verdad, en terracota fuerte para que se vea igual sobre cal y sobre vino. */ .mdj-scope :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--mdj-terracota-fuerte); outline-offset: 3px; } /* Sobre fondos oscuros el terracota no se ve: ahí, ámbar. */ .mdj-cabecera :where(a, button):focus-visible, .mdj-panel-nav :where(a, button):focus-visible, .mdj-pie :where(a, button):focus-visible, .mdj-hero :where(a, button):focus-visible { outline-color: var(--mdj-ambar); } .mdj-scope .mdj-oculto-visual { position: absolute !important; /* documentado: no hay alternativa para sacarlo del flujo sin ocultarlo al lector de pantalla */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================= 5 · COMPOSICIÓN ========================================================================= */ .mdj-scope .mdj-contenedor { width: 100%; max-width: var(--mdj-ancho); margin-inline: auto; padding-inline: var(--mdj-margen); } .mdj-scope .mdj-contenedor--medio { max-width: var(--mdj-ancho-medio); } .mdj-scope .mdj-contenedor--estrecho { max-width: 760px; } .mdj-scope .mdj-seccion { padding-block: var(--mdj-e-10); } .mdj-scope .mdj-seccion--cal { background: var(--mdj-cal); color: var(--mdj-carbon); } .mdj-scope .mdj-seccion--apagada { background: var(--mdj-apagado); color: var(--mdj-carbon); } .mdj-scope .mdj-seccion--vino { background: var(--mdj-vino); color: var(--mdj-cal); } .mdj-scope .mdj-seccion--carbon { background: var(--mdj-carbon); color: var(--mdj-cal); } /* Cejilla. Racionada: como mucho una cada tres secciones. */ .mdj-scope .mdj-cejilla { margin: 0; font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xs); font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mdj-terracota-fuerte); } .mdj-seccion--vino .mdj-cejilla, .mdj-seccion--carbon .mdj-cejilla, .mdj-cabecera-pagina .mdj-cejilla { color: var(--mdj-ambar); } .mdj-scope .mdj-titulo { font-size: var(--mdj-t-titulo); line-height: 0.98; margin-top: var(--mdj-e-5); max-width: 22ch; } .mdj-scope .mdj-cejilla + .mdj-titulo { margin-top: var(--mdj-e-5); } .mdj-scope .mdj-entradilla { margin-top: var(--mdj-e-6); max-width: var(--mdj-ancho-texto); font-size: var(--mdj-t-l); line-height: 1.7; } .mdj-scope .mdj-botonera { display: flex; flex-wrap: wrap; gap: var(--mdj-e-4); margin-top: var(--mdj-e-7); } /* ========================================================================= 6 · CABECERA Y NAVEGACIÓN Fija y transparente sobre la foto. scripts.js le pone data-fondo="1" al pasar de 80px de scroll y entonces cambia a vino. ========================================================================= */ .mdj-scope .mdj-cabecera { position: fixed; inset-inline: 0; top: 0; z-index: 50; padding-block: var(--mdj-e-5); background: transparent; transition: padding var(--mdj-t-lenta), background-color var(--mdj-t-lenta), box-shadow var(--mdj-t-lenta); } .mdj-scope .mdj-cabecera[data-fondo="1"] { padding-block: var(--mdj-e-3); background: rgba(92, 46, 46, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgba(30, 26, 24, 0.25); } /* Sin JS, o en páginas sin foto de apertura, la cabecera necesita fondo desde el primer momento: si no, el texto cal cae sobre cal. */ .mdj-scope:not(.mdj-tiene-hero) .mdj-cabecera { padding-block: var(--mdj-e-3); background: var(--mdj-vino); } .mdj-cabecera__fila { width: 100%; max-width: var(--mdj-ancho); margin-inline: auto; padding-inline: var(--mdj-margen); display: flex; align-items: center; justify-content: space-between; gap: var(--mdj-e-5); } /* --- Marca en dos líneas --------------------------------------------- */ .mdj-scope .mdj-marca { display: block; font-family: var(--mdj-tipo-display); color: var(--mdj-cal); text-decoration: none; line-height: 1; margin: 0; } .mdj-scope .mdj-marca:hover { color: var(--mdj-cal); } .mdj-marca__1 { display: block; font-size: 1.25rem; letter-spacing: 0.12em; text-transform: uppercase; } .mdj-marca__2 { display: block; font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase; margin-top: 2px; } @media (min-width: 640px) { .mdj-marca__1 { font-size: 1.5rem; } .mdj-marca__2 { font-size: 0.75rem; } } /* --- Navegación de escritorio ---------------------------------------- */ .mdj-nav { display: none; } @media (min-width: 1024px) { .mdj-nav { display: block; } } .mdj-scope .mdj-nav__lista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--mdj-e-6); } .mdj-scope .mdj-nav__lista li { margin: 0; } .mdj-scope .mdj-nav__lista a { position: relative; display: block; padding-block: 4px; font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xs); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; color: rgba(244, 237, 228, 0.85); transition: color var(--mdj-t-rapida); } .mdj-scope .mdj-nav__lista a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 1px; background: var(--mdj-ambar); transform: scaleX(0); transform-origin: left; transition: transform var(--mdj-t-media); } .mdj-scope .mdj-nav__lista a:hover { color: var(--mdj-ambar); } .mdj-scope .mdj-nav__lista a:hover::after { transform: scaleX(1); } .mdj-scope .mdj-nav__lista .current-menu-item > a, .mdj-scope .mdj-nav__lista .current_page_item > a { color: var(--mdj-cal); } .mdj-scope .mdj-nav__lista .current-menu-item > a::after, .mdj-scope .mdj-nav__lista .current_page_item > a::after { transform: scaleX(1); } /* --- Acciones de la cabecera ----------------------------------------- */ .mdj-cabecera__acciones { display: flex; align-items: center; gap: var(--mdj-e-3); } @media (min-width: 640px) { .mdj-cabecera__acciones { gap: var(--mdj-e-5); } } .mdj-social { display: flex; align-items: center; gap: var(--mdj-e-3); } .mdj-social--cabecera { display: none; } @media (min-width: 640px) { .mdj-social--cabecera { display: flex; } } .mdj-scope .mdj-social a { color: rgba(244, 237, 228, 0.7); text-decoration: none; transition: color var(--mdj-t-rapida); } .mdj-scope .mdj-social a:hover { color: var(--mdj-ambar); } .mdj-scope .mdj-cabecera__reservar { padding: 10px var(--mdj-e-4); font-size: 0.68rem; letter-spacing: 0.2em; } @media (min-width: 640px) { .mdj-scope .mdj-cabecera__reservar { padding: 10px var(--mdj-e-5); font-size: var(--mdj-t-xs); } } .mdj-scope .mdj-hamburguesa { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--mdj-cal); cursor: pointer; } @media (min-width: 1024px) { .mdj-scope .mdj-hamburguesa { display: none; } } /* --- Panel de navegación de móvil ------------------------------------ */ .mdj-scope .mdj-panel-nav { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; background: var(--mdj-vino); color: var(--mdj-cal); } .mdj-scope .mdj-panel-nav[data-abierto="true"] { display: flex; } @media (min-width: 1024px) { .mdj-scope .mdj-panel-nav[data-abierto="true"] { display: none; } } .mdj-panel-nav__cabecera { display: flex; justify-content: flex-end; padding: var(--mdj-e-5) var(--mdj-margen); } .mdj-scope .mdj-panel-nav__cerrar { padding: 0; border: 0; background: none; color: var(--mdj-cal); cursor: pointer; } .mdj-panel-nav__nav { flex: 1; display: flex; align-items: center; justify-content: center; } .mdj-scope .mdj-panel-nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: var(--mdj-e-6); } .mdj-scope .mdj-panel-nav__lista li { margin: 0; } .mdj-scope .mdj-panel-nav__lista a { font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xl); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--mdj-cal); } .mdj-scope .mdj-panel-nav__lista a:hover { color: var(--mdj-ambar); } .mdj-scope .mdj-panel-nav__lista .current-menu-item > a, .mdj-scope .mdj-panel-nav__lista .current_page_item > a { color: var(--mdj-ambar); } .mdj-panel-nav__pie { display: flex; flex-direction: column; align-items: center; gap: var(--mdj-e-5); padding: 0 var(--mdj-e-6) var(--mdj-e-8); } .mdj-scope .mdj-panel-nav__tel { display: inline-flex; align-items: center; gap: var(--mdj-e-2); font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xs); letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: rgba(244, 237, 228, 0.8); } .mdj-scope .mdj-panel-nav__tel:hover { color: var(--mdj-ambar); } /* ========================================================================= 7 · BOTONES Rectángulos. Sin radio, sin sombra. El principal SIEMPRE en terracota fuerte: el de marca no llega a 4,5:1 con la etiqueta a 12px. ========================================================================= */ .mdj-scope .mdj-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mdj-e-2); padding: var(--mdj-e-4) var(--mdj-e-6); border: 1px solid transparent; font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xs); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; line-height: 1; cursor: pointer; transition: background-color var(--mdj-t-rapida), color var(--mdj-t-rapida), border-color var(--mdj-t-rapida); } .mdj-scope .mdj-btn--principal { background: var(--mdj-terracota-fuerte); color: var(--mdj-cal); border-color: var(--mdj-terracota-fuerte); } .mdj-scope .mdj-btn--principal:hover { background: #983F26; border-color: #983F26; color: var(--mdj-cal); } /* Botón de línea sobre foto: el borde a 0.7 de opacidad ya separa, y el texto va en cal pleno sobre el velo vino. */ .mdj-scope .mdj-btn--linea { background: transparent; color: var(--mdj-cal); border-color: rgba(244, 237, 228, 0.7); } .mdj-scope .mdj-btn--linea:hover { background: rgba(244, 237, 228, 0.12); color: var(--mdj-cal); border-color: var(--mdj-cal); } /* Variante sobre cal, para el 404 y las páginas interiores claras. */ .mdj-seccion--cal .mdj-btn--linea, .mdj-seccion--apagada .mdj-btn--linea { color: var(--mdj-vino); border-color: var(--mdj-vino); } .mdj-seccion--cal .mdj-btn--linea:hover, .mdj-seccion--apagada .mdj-btn--linea:hover { background: var(--mdj-vino); color: var(--mdj-cal); } .mdj-scope .mdj-btn--ancho { width: 100%; max-width: 320px; } /* Enlace de sección: subrayado propio de 1px, no el del navegador. */ .mdj-scope .mdj-enlace { display: inline-flex; align-items: center; gap: var(--mdj-e-3); padding-bottom: 4px; border-bottom: 1px solid currentColor; font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xs); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--mdj-terracota-fuerte); } .mdj-scope .mdj-enlace:hover { color: var(--mdj-vino); } .mdj-seccion--vino .mdj-enlace, .mdj-seccion--carbon .mdj-enlace { color: var(--mdj-ambar); } .mdj-seccion--vino .mdj-enlace:hover, .mdj-seccion--carbon .mdj-enlace:hover { color: var(--mdj-cal); } @media (min-width: 640px) { .mdj-scope .mdj-enlace { font-size: var(--mdj-t-s); } } /* ========================================================================= 8 · PORTADA: HERO Alto de pantalla completo, contenido abajo, foto con Ken Burns lento y velo vino de abajo arriba. 100svh y no 100vh: en móvil la barra del navegador se come 100vh y el botón se queda fuera. ========================================================================= */ .mdj-scope .mdj-hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; background: var(--mdj-carbon); color: var(--mdj-cal); } .mdj-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: mdj-ken-burns 20s ease-in-out infinite alternate; } .mdj-hero__velo { position: absolute; inset: 0; background: var(--mdj-velo-hero); } .mdj-hero__cuerpo { position: relative; z-index: 1; width: 100%; max-width: var(--mdj-ancho); margin-inline: auto; padding-inline: var(--mdj-margen); padding-top: 128px; padding-bottom: var(--mdj-e-9); text-align: center; } @media (min-width: 1024px) { .mdj-hero__cuerpo { text-align: left; padding-bottom: 112px; } } .mdj-hero__cejilla { color: var(--mdj-cal); } .mdj-scope .mdj-hero__titulo { margin: var(--mdj-e-5) auto 0; max-width: 18ch; font-size: var(--mdj-t-hero); line-height: 0.92; letter-spacing: 0.02em; color: var(--mdj-cal); } .mdj-hero__bajada { margin: var(--mdj-e-6) auto 0; max-width: 34ch; font-size: var(--mdj-t-l); font-weight: 300; line-height: 1.6; color: rgba(244, 237, 228, 0.95); } .mdj-hero__botones { display: flex; flex-direction: column; align-items: center; gap: var(--mdj-e-4); margin-top: 40px; } .mdj-hero__botones .mdj-btn { width: 100%; padding-inline: var(--mdj-e-8); } @media (min-width: 640px) { .mdj-hero__botones { flex-direction: row; justify-content: center; } .mdj-hero__botones .mdj-btn { width: auto; } } @media (min-width: 1024px) { .mdj-scope .mdj-hero__titulo, .mdj-hero__bajada { margin-inline: 0; } .mdj-hero__botones { justify-content: flex-start; } } /* Flecha de bajada. Es un enlace real a la siguiente página, no un adorno. */ .mdj-scope .mdj-hero__flecha { position: absolute; bottom: var(--mdj-e-5); left: 50%; transform: translateX(-50%); z-index: 1; color: rgba(244, 237, 228, 0.8); text-decoration: none; } .mdj-scope .mdj-hero__flecha:hover { color: var(--mdj-cal); } .mdj-hero__flecha svg { animation: mdj-rebote 2.4s ease-in-out infinite; } /* ========================================================================= 9 · CABECERA DE PÁGINA INTERIOR Y MIGAS ========================================================================= */ .mdj-scope .mdj-cabecera-pagina { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: 40vh; min-height: 280px; overflow: hidden; padding: 0 var(--mdj-margen) var(--mdj-e-7); color: var(--mdj-cal); } @media (min-width: 640px) { .mdj-scope .mdj-cabecera-pagina { padding-bottom: var(--mdj-e-8); } } .mdj-cabecera-pagina__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .mdj-cabecera-pagina__velo { position: absolute; inset: 0; z-index: -1; background: rgba(92, 46, 46, 0.85); } .mdj-cabecera-pagina__cuerpo { width: 100%; max-width: var(--mdj-ancho-medio); margin-inline: auto; } .mdj-scope .mdj-cabecera-pagina__titulo { margin-top: var(--mdj-e-4); font-size: 2.25rem; letter-spacing: 0.14em; color: var(--mdj-cal); } @media (min-width: 640px) { .mdj-scope .mdj-cabecera-pagina__titulo { font-size: 3.75rem; } } .mdj-cabecera-pagina__bajada { margin-top: var(--mdj-e-4); max-width: 40ch; font-size: var(--mdj-t-m); color: rgba(244, 237, 228, 0.85); } @media (min-width: 640px) { .mdj-cabecera-pagina__bajada { font-size: var(--mdj-t-l); } } .mdj-scope .mdj-migas { background: var(--mdj-cal); border-bottom: 1px solid var(--mdj-linea); } .mdj-scope .mdj-migas ol { list-style: none; margin: 0; padding: var(--mdj-e-3) var(--mdj-margen); max-width: var(--mdj-ancho-medio); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(92, 46, 46, 0.75); } .mdj-scope .mdj-migas li { margin: 0; display: flex; align-items: center; gap: 6px; } .mdj-scope .mdj-migas li + li::before { content: "\203A"; color: var(--mdj-piedra); } .mdj-scope .mdj-migas a { color: inherit; text-decoration: none; } .mdj-scope .mdj-migas a:hover { color: var(--mdj-terracota-fuerte); text-decoration: underline; text-underline-offset: 4px; } .mdj-scope .mdj-migas [aria-current] { color: var(--mdj-vino); } /* ========================================================================= 10 · PIE ========================================================================= */ .mdj-scope .mdj-pie { background: var(--mdj-carbon); color: var(--mdj-cal); padding-block: var(--mdj-e-8); } .mdj-pie__rejilla { display: grid; gap: var(--mdj-e-7); } @media (min-width: 768px) { .mdj-pie__rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--mdj-e-7); } } .mdj-pie .mdj-marca__1 { font-size: 1.5rem; letter-spacing: 0.14em; } .mdj-pie .mdj-marca__2 { font-size: 0.7rem; } .mdj-pie__lema { margin-top: var(--mdj-e-5); max-width: 32ch; font-size: var(--mdj-t-s); line-height: 1.7; color: rgba(244, 237, 228, 0.72); } .mdj-pie .mdj-social { margin-top: var(--mdj-e-5); gap: var(--mdj-e-4); } .mdj-scope .mdj-pie__titulo { font-size: 0.7rem; letter-spacing: 0.28em; color: rgba(244, 237, 228, 0.55); } .mdj-scope .mdj-pie__lista { list-style: none; margin: var(--mdj-e-5) 0 0; padding: 0; display: grid; gap: var(--mdj-e-3); } .mdj-scope .mdj-pie__lista li { margin: 0; } .mdj-scope .mdj-pie__lista a { font-size: var(--mdj-t-s); color: rgba(244, 237, 228, 0.78); text-decoration: none; } .mdj-scope .mdj-pie__lista a:hover { color: var(--mdj-ambar); } .mdj-scope .mdj-pie__contacto { list-style: none; margin: var(--mdj-e-5) 0 0; padding: 0; display: grid; gap: var(--mdj-e-4); font-size: var(--mdj-t-s); color: rgba(244, 237, 228, 0.78); } .mdj-scope .mdj-pie__contacto li { margin: 0; display: flex; align-items: flex-start; gap: var(--mdj-e-3); line-height: 1.6; } .mdj-pie__contacto .mdj-icono { color: var(--mdj-ambar); flex: none; margin-top: 3px; } .mdj-scope .mdj-pie__contacto a { color: inherit; text-decoration: none; } .mdj-scope .mdj-pie__contacto a:hover { color: var(--mdj-cal); } .mdj-pie__legal { margin-top: var(--mdj-e-9); padding-top: var(--mdj-e-5); border-top: 1px solid var(--mdj-linea-osc); display: flex; flex-direction: column; gap: var(--mdj-e-4); font-size: var(--mdj-t-xs); } @media (min-width: 768px) { .mdj-pie__legal { flex-direction: row; align-items: center; justify-content: space-between; } } .mdj-pie__copy { margin: 0; color: rgba(244, 237, 228, 0.55); } .mdj-scope .mdj-pie__legales { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--mdj-e-3); } .mdj-scope .mdj-pie__legales li { margin: 0; } .mdj-scope .mdj-pie__legales a { color: rgba(244, 237, 228, 0.62); text-decoration: none; } .mdj-scope .mdj-pie__legales a:hover { color: var(--mdj-cal); } .mdj-scope .mdj-pie__preferencias { padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit; color: rgba(244, 237, 228, 0.62); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .mdj-scope .mdj-pie__preferencias:hover { color: var(--mdj-cal); } /* ========================================================================= 11 · FLOTANTES El botón de WhatsApp es la única pieza redonda y el único color fuera de paleta de toda la web: es la señal de marca del propio WhatsApp y el visitante la reconoce antes de leer nada. Decisión declarada. ========================================================================= */ .mdj-scope .mdj-whatsapp { position: fixed; right: var(--mdj-e-5); bottom: var(--mdj-e-5); z-index: 45; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #1EA855; color: #FFFFFF; box-shadow: 0 8px 24px rgba(30, 26, 24, 0.28); transition: transform var(--mdj-t-media), opacity var(--mdj-t-media), background-color var(--mdj-t-rapida); opacity: 0; transform: translateY(24px); pointer-events: none; } .mdj-scope .mdj-whatsapp[data-visible="1"] { opacity: 1; transform: none; pointer-events: auto; } .mdj-scope .mdj-whatsapp:hover { background: #17914A; color: #FFFFFF; } .mdj-scope .mdj-whatsapp:focus-visible { outline-color: #1EA855; } /* Cuando la barra de móvil está fuera, el botón sube para no taparla. */ @media (max-width: 767px) { .mdj-scope .mdj-whatsapp[data-visible="1"] { bottom: 92px; } } .mdj-scope .mdj-barra-movil { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: none; gap: var(--mdj-e-2); padding: var(--mdj-e-3) var(--mdj-e-4); border-top: 1px solid var(--mdj-linea-osc); background: rgba(92, 46, 46, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(100%); transition: transform var(--mdj-t-media); } @media (max-width: 767px) { .mdj-scope .mdj-barra-movil { display: grid; grid-template-columns: auto 1fr; } } .mdj-scope .mdj-barra-movil[data-visible="1"] { transform: none; } .mdj-scope .mdj-barra-movil__tel, .mdj-scope .mdj-barra-movil__reserva { display: inline-flex; align-items: center; justify-content: center; gap: var(--mdj-e-2); padding: 14px var(--mdj-e-4); font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-xs); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; } .mdj-scope .mdj-barra-movil__tel { color: var(--mdj-cal); border: 1px solid rgba(244, 237, 228, 0.5); } .mdj-scope .mdj-barra-movil__reserva { background: var(--mdj-terracota-fuerte); color: var(--mdj-cal); letter-spacing: 0.25em; } /* ========================================================================= 12 · CONSENTIMIENTO Rechazar cuesta exactamente lo mismo que aceptar: mismo nivel, mismo tamaño, misma jerarquía. Nada premarcado. ========================================================================= */ .mdj-scope .mdj-cookies { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; display: none; padding: var(--mdj-e-5) var(--mdj-margen); background: var(--mdj-carbon); color: var(--mdj-cal); border-top: 1px solid var(--mdj-linea-osc); } .mdj-scope .mdj-cookies[data-abierto="true"] { display: block; } .mdj-scope .mdj-cookies__titulo { font-size: var(--mdj-t-m); letter-spacing: 0.2em; } .mdj-cookies__texto { margin-top: var(--mdj-e-3); max-width: 70ch; font-size: var(--mdj-t-s); color: rgba(244, 237, 228, 0.82); } .mdj-cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--mdj-e-3); margin-top: var(--mdj-e-5); } .mdj-scope .mdj-panel-cookies { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: var(--mdj-e-4); background: rgba(30, 26, 24, 0.72); } .mdj-scope .mdj-panel-cookies[data-abierto="true"] { display: flex; } .mdj-panel-cookies__caja { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; padding: var(--mdj-e-6); background: var(--mdj-carbon); color: var(--mdj-cal); } .mdj-cookies__grupo { display: flex; gap: var(--mdj-e-3); margin-top: var(--mdj-e-5); padding-top: var(--mdj-e-5); border-top: 1px solid var(--mdj-linea-osc); } .mdj-cookies__grupo label { font-family: var(--mdj-tipo-display); font-size: var(--mdj-t-s); letter-spacing: 0.16em; text-transform: uppercase; } .mdj-cookies__grupo p { margin: 4px 0 0; font-size: var(--mdj-t-s); color: rgba(244, 237, 228, 0.72); } /* ========================================================================= 13 · MOVIMIENTO Todo colapsa a estático con prefers-reduced-motion. No negociable. ========================================================================= */ @keyframes mdj-ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } } @keyframes mdj-rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Revelado al entrar en pantalla. Lo enciende scripts.js con IntersectionObserver; el