@charset "UTF-8";
/* =========================================================================
EL AS DE BRASAS · hoja de estilos del tema
Kit v5 · prefijo .adb- · móvil primero
El scope .adb-scope lo pone functions.php en el , una sola vez.
NO se vuelve a abrir dentro de ninguna plantilla ni fragmento (§2, §3.1).
REGLA QUE MANDA SOBRE TODO LO DEMÁS (§3.2):
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 .adb-scope.
ÍNDICE
1 · Tipografías autoalojadas
2 · Fichas de diseño (variables)
3 · Reinicio y base
4 · Accesibilidad
5 · Composición: contenedor, bandas, retícula
6 · Cabecera y navegación
7 · Botones y enlaces
8 · La línea de carta ← componente estructural del sitio
9 · Portada
10 · Páginas interiores
11 · Tabla de horarios y estado de apertura
12 · Terceros bajo demanda
13 · Blog
14 · Contenido del editor
15 · Pie
16 · Consentimiento
17 · Movimiento
18 · Utilidades
19 · Impresión
========================================================================= */
/* =========================================================================
1 · TIPOGRAFÍAS AUTOALOJADAS (§6)
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, incluida en fuentes/.
========================================================================= */
@font-face {
font-family: 'Fraunces Variable';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fuentes/fraunces-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+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo Variable';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('fuentes/archivo-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+2074, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================================
2 · FICHAS DE DISEÑO
========================================================================= */
:root {
/* --- Color -----------------------------------------------------------
Los tres de marca están MEDIDOS sobre el PNG del logotipo, no sacados
de la web anterior ni de la carta impresa. Ratios calculados en D1. */
--adb-crema: #FAF6F0; /* fondo principal, blanco cálido */
--adb-hueso: #F1EAE0; /* fondo de banda alterna */
--adb-carbon: #1A1614; /* texto y bandas oscuras */
--adb-humo: #5F564E; /* texto secundario. 6,66:1 sobre crema */
--adb-burdeos: #5C0F12; /* marca 1. 12,73:1 sobre crema */
--adb-brasa: #B4501A; /* marca 2, precios. 4,75:1 sobre crema */
/* OJO: --adb-ambar sobre crema da 1,92:1. NUNCA como texto sobre fondo
claro. Solo filetes, iconos decorativos y fondos oscuros, donde sube
a 8,70:1 sobre carbón. */
--adb-ambar: #E8A93C;
--adb-linea: #E0D6C8; /* filetes finos sobre crema */
--adb-linea-osc: #3A322C; /* filetes finos sobre carbón */
/* --- Tipografía ------------------------------------------------------
Pila de respaldo real, con métricas parecidas, no `serif` a secas. */
--adb-tipo-display: 'Fraunces Variable', Fraunces, Georgia, 'Times New Roman', serif;
--adb-tipo-texto: 'Archivo Variable', Archivo, 'Helvetica Neue', Arial, sans-serif;
/* Escala fluida. El mínimo de cuerpo es 17px: por encima del mínimo de
16px que pide §8, porque la carta se lee mucho en móvil. */
--adb-t-xs: 0.8125rem;
--adb-t-s: 0.9375rem;
--adb-t-m: 1.0625rem;
--adb-t-l: clamp(1.1875rem, 1.1rem + 0.38vw, 1.375rem);
--adb-t-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
--adb-t-2xl: clamp(2rem, 1.7rem + 1.5vw, 3rem);
--adb-t-3xl: clamp(2.5rem, 1.9rem + 3vw, 4.5rem);
--adb-t-4xl: clamp(3rem, 2rem + 5vw, 6rem);
/* --- Espaciado -------------------------------------------------------
Escala de 4px. Los saltos grandes son fluidos porque 96px fijos se
quedan cortos entre secciones bajo un titular de 6rem. */
--adb-e-1: 4px;
--adb-e-2: 8px;
--adb-e-3: 12px;
--adb-e-4: 16px;
--adb-e-5: 24px;
--adb-e-6: 32px;
--adb-e-7: 48px;
--adb-e-8: 64px;
--adb-e-9: clamp(64px, 8vw, 112px);
--adb-e-10: clamp(80px, 11vw, 160px);
/* --- Composición ---------------------------------------------------- */
--adb-ancho: 1240px;
--adb-ancho-texto: 66ch; /* 60-75 caracteres, §8 */
--adb-margen: clamp(20px, 5vw, 48px);
/* --- Movimiento ------------------------------------------------------ */
--adb-t-rapida: 120ms cubic-bezier(0.2, 0, 0.2, 1);
--adb-t-media: 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* =========================================================================
3 · REINICIO Y BASE
Todas las reglas sobre etiquetas van con :where() (§3.2). 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: 88px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body.adb-scope {
margin: 0;
background: var(--adb-crema);
color: var(--adb-carbon);
font-family: var(--adb-tipo-texto);
font-size: var(--adb-t-m);
font-weight: 400;
line-height: 1.65;
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.adb-scope :where(h1, h2, h3, h4, h5, h6) {
margin: 0;
font-family: var(--adb-tipo-display);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.015em;
text-wrap: balance;
color: var(--adb-carbon);
}
.adb-scope :where(p) { margin: 0 0 1.2em; }
.adb-scope :where(p):last-child { margin-bottom: 0; }
.adb-scope :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.4em; }
.adb-scope :where(li) { margin-bottom: 0.4em; }
.adb-scope :where(a) {
color: var(--adb-burdeos);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--adb-t-rapida), text-decoration-thickness var(--adb-t-rapida);
}
.adb-scope :where(a:hover) {
color: var(--adb-brasa);
text-decoration-thickness: 2px;
}
.adb-scope :where(img, svg, video) { max-width: 100%; height: auto; display: block; }
.adb-scope :where(strong, b) { font-weight: 650; }
.adb-scope :where(hr) {
border: 0;
border-top: 1px solid var(--adb-linea);
margin: var(--adb-e-7) 0;
}
.adb-scope :where(table) { border-collapse: collapse; width: 100%; }
/* Cifras tabulares en TODO lo numérico. Es la razón por la que la tipografía
de texto es Archivo: sin esto, «180 €» y «9 €» bailan en la columna. */
.adb-scope :where(time, td, th) { font-variant-numeric: tabular-nums lining-nums; }
/* =========================================================================
4 · ACCESIBILIDAD (§8)
========================================================================= */
.adb-scope .adb-saltar {
position: absolute;
left: var(--adb-e-4);
top: -100px;
z-index: 200;
padding: var(--adb-e-3) var(--adb-e-5);
background: var(--adb-burdeos);
color: var(--adb-crema);
font-size: var(--adb-t-s);
font-weight: 600;
text-decoration: none;
border-radius: 2px;
transition: top var(--adb-t-rapida);
}
.adb-scope .adb-saltar:focus { top: var(--adb-e-4); color: var(--adb-crema); }
/* Anillo de foco visible de verdad. Doble sombra para que se vea igual sobre
crema y sobre carbón, sin depender del color de fondo. */
.adb-scope :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--adb-brasa);
outline-offset: 2px;
border-radius: 2px;
}
.adb-scope .adb-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
========================================================================= */
.adb-scope .adb-contenedor {
width: 100%;
max-width: var(--adb-ancho);
margin-inline: auto;
padding-inline: var(--adb-margen);
}
/* Medida de lectura. Se aplica al texto largo, no al contenedor entero: la
carta y las retículas necesitan todo el ancho. */
.adb-scope .adb-medida { max-width: var(--adb-ancho-texto); }
.adb-scope .adb-seccion { padding-block: var(--adb-e-9); }
/* Banda oscura a sangre. Se usa en el horno de leña, que es la sección sin
fotografía: el color hace el trabajo que haría la imagen. */
.adb-scope .adb-banda--carbon {
background: var(--adb-carbon);
color: var(--adb-crema);
}
.adb-scope .adb-banda--carbon :where(h1, h2, h3, h4) { color: var(--adb-crema); }
.adb-scope .adb-banda--carbon :where(a) { color: var(--adb-ambar); }
.adb-scope .adb-banda--carbon :where(a:hover) { color: var(--adb-crema); }
.adb-scope .adb-banda--hueso { background: var(--adb-hueso); }
/* Antetítulo. Es el elemento que orienta en una web sin hero: dice de qué va
la sección antes del titular. */
.adb-scope .adb-antetitulo {
display: block;
margin: 0 0 var(--adb-e-4);
font-family: var(--adb-tipo-texto);
font-size: var(--adb-t-xs);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--adb-brasa);
}
.adb-scope .adb-banda--carbon .adb-antetitulo { color: var(--adb-ambar); }
/* El filete de brasa: el único gesto de marca que se anima (§17). */
.adb-scope .adb-filete {
display: block;
width: 100%;
max-width: 220px;
height: 2px;
margin: var(--adb-e-5) 0 var(--adb-e-6);
background: var(--adb-ambar);
transform-origin: left center;
}
/* =========================================================================
6 · CABECERA Y NAVEGACIÓN
========================================================================= */
.adb-scope .adb-cabecera {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--adb-crema) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--adb-linea);
}
.adb-scope .adb-cabecera__fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--adb-e-5);
min-height: 72px;
}
.adb-scope .adb-logo { display: inline-flex; color: var(--adb-carbon); }
.adb-scope .adb-logo svg { width: auto; height: 44px; }
.adb-scope .adb-logo:hover { color: var(--adb-burdeos); }
/* El logotipo del personalizador viene como ![]()
dentro de .custom-logo-link */
.adb-scope .custom-logo-link { display: inline-flex; }
.adb-scope .custom-logo { height: 44px; width: auto; }
.adb-scope .adb-nav { display: none; }
.adb-scope .adb-nav__lista {
display: flex;
align-items: center;
gap: var(--adb-e-5);
margin: 0;
padding: 0;
list-style: none;
}
.adb-scope .adb-nav__lista li { margin: 0; }
.adb-scope .adb-nav a {
display: inline-block;
padding-block: var(--adb-e-2);
font-size: var(--adb-t-s);
font-weight: 500;
line-height: 1.3;
color: var(--adb-carbon);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.adb-scope .adb-nav a:hover { color: var(--adb-burdeos); border-bottom-color: var(--adb-ambar); }
.adb-scope .adb-nav .current-menu-item > a,
.adb-scope .adb-nav .current_page_item > a {
color: var(--adb-burdeos);
border-bottom-color: var(--adb-burdeos);
}
.adb-scope .adb-cabecera__acciones { display: flex; align-items: center; gap: var(--adb-e-3); }
/* Botón hamburguesa. Solo en móvil. */
.adb-scope .adb-hamburguesa {
display: inline-flex;
align-items: center;
gap: var(--adb-e-2);
padding: var(--adb-e-2) var(--adb-e-3);
background: none;
border: 1px solid var(--adb-linea);
border-radius: 2px;
font-family: var(--adb-tipo-texto);
font-size: var(--adb-t-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--adb-carbon);
cursor: pointer;
}
.adb-scope .adb-hamburguesa__barras {
position: relative;
width: 18px; height: 2px;
background: currentColor;
}
.adb-scope .adb-hamburguesa__barras::before,
.adb-scope .adb-hamburguesa__barras::after {
content: '';
position: absolute;
left: 0;
width: 18px; height: 2px;
background: currentColor;
}
.adb-scope .adb-hamburguesa__barras::before { top: -6px; }
.adb-scope .adb-hamburguesa__barras::after { top: 6px; }
/* Panel de móvil. Es una modal y cumple §8: role=dialog, Escape, foco
atrapado y devuelto al botón. Lo gobierna scripts.js. */
.adb-scope .adb-panel-nav {
position: fixed;
inset: 0;
z-index: 150;
display: none;
background: var(--adb-crema);
padding: var(--adb-e-5) 0 var(--adb-e-8);
overflow-y: auto;
overscroll-behavior: contain;
}
.adb-scope .adb-panel-nav[data-abierto='true'] { display: block; }
.adb-scope .adb-panel-nav__cabecera {
display: flex; align-items: center; justify-content: space-between;
min-height: 48px; margin-bottom: var(--adb-e-6);
}
.adb-scope .adb-panel-nav__cerrar {
padding: var(--adb-e-2) var(--adb-e-4);
background: none;
border: 1px solid var(--adb-linea);
border-radius: 2px;
font-family: var(--adb-tipo-texto);
font-size: var(--adb-t-s);
color: var(--adb-carbon);
cursor: pointer;
}
.adb-scope .adb-panel-nav ul { margin: 0; padding: 0; list-style: none; }
.adb-scope .adb-panel-nav li { margin: 0; border-bottom: 1px solid var(--adb-linea); }
.adb-scope .adb-panel-nav a {
display: block;
padding: var(--adb-e-4) 0;
font-family: var(--adb-tipo-display);
font-size: var(--adb-t-xl);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--adb-carbon);
text-decoration: none;
}
.adb-scope .adb-panel-nav a:hover { color: var(--adb-burdeos); }
@media (min-width: 62em) {
.adb-scope .adb-nav { display: block; }
.adb-scope .adb-hamburguesa { display: none; }
.adb-scope .adb-panel-nav { display: none !important; } /* documentado:
si el panel queda abierto y se gira la tablet, tiene que desaparecer
sin depender de que el JS lo cierre a tiempo */
}
/* =========================================================================
7 · BOTONES
Se fijan familia, tamaño, interlineado y márgenes explícitamente porque el
botón se renderiza a veces como y a veces como