@charset "UTF-8";
/* =========================================================================
   FUSIÓN Y MALTA · hoja de estilos del tema
   Cervecería en Puente de Vallecas · prefijo fym · kit v5

   MÓVIL PRIMERO. Todos los @media son min-width, sin excepción.

   REGLA QUE NO SE PUEDE ROMPER (§3.2 del estándar):
   las reglas base sobre etiquetas van SIEMPRE dentro de :where(), que no suma
   especificidad. Sin :where(), `.fym-scope p` vale (0,1,1) y cualquier regla de
   una sola clase —.fym-guia, .fym-mt-l— se queda en (0,1,0) y PIERDE. El CSS
   parece correcto y ningún margen ni tamaño llega a aplicarse.
   Las utilidades van SIEMPRE prefijadas con .fym-scope para ganar a la base.

   ÍNDICE
    1 · Fuentes autoalojadas
    2 · Variables
    3 · Reinicio y base
    4 · Utilidades
    5 · Saltar al contenido
    6 · Cabecera y menú
    7 · Menú de móvil (modal)
    8 · Botones
    9 · Rótulo de portada
   10 · Eje horario
   11 · Secciones y rejilla asimétrica
   12 · Figuras e imágenes
   13 · Tabla de horario
   14 · Terceros bajo demanda
   15 · Blog
   16 · Paginación
   17 · Pie
   18 · Consentimiento
   19 · Foco visible
   20 · Movimiento reducido
   ========================================================================= */


/* =========================================================================
   1 · FUENTES AUTOALOJADAS
   Nunca desde un CDN: una petición a fonts.gstatic.com convierte un sitio sin
   cookies en un sitio que tiene que pedir permiso (§6).
   Ambas son variables: un archivo en lugar de cinco. Ambas OFL-1.1.
   ========================================================================= */

@font-face {
	font-family: "Fraunces";
	src: url("fuentes/fraunces-wght.woff2") format("woff2-variations"),
	     url("fuentes/fraunces-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
	               U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("fuentes/instrument-sans-wght.woff2") format("woff2-variations"),
	     url("fuentes/instrument-sans-wght.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
	               U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("fuentes/instrument-sans-wght-italica.woff2") format("woff2-variations"),
	     url("fuentes/instrument-sans-wght-italica.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}


/* =========================================================================
   2 · VARIABLES
   ========================================================================= */

.fym-scope {
	/* Paleta. Ratios calculados sobre --fym-negro y comprobados en D1:
	   hueso 17,18:1 · humo 9,00:1 · verde 7,32:1 · ámbar 6,01:1 · rojo 4,85:1.
	   Todos pasan AA de texto normal. */
	--fym-negro:   #0C0B0A;
	--fym-carbon:  #17140F;
	--fym-hueso:   #F5EFE4;
	--fym-humo:    #B9AE9E;
	--fym-verde:   #5AB147;
	--fym-ambar:   #E96715;
	--fym-rojo:    #F71D33;
	--fym-rojo-p:  #C2142A;

	/* --fym-borde da 1,43:1 sobre el fondo: sirve para SEPARAR y para nada más.
	   Cualquier borde que comunique estado usa --fym-humo o --fym-ambar, que sí
	   pasan el 3:1 de componente de interfaz (§8). */
	--fym-borde:   #332C23;

	/* Tipografías. La pila de respaldo tiene métricas parecidas a propósito:
	   "sans-serif" a secas da un salto de maquetación al cargar la real (§6). */
	--fym-display: "Fraunces", Georgia, "Times New Roman", serif;
	--fym-texto:   "Instrument Sans", -apple-system, BlinkMacSystemFont,
	               "Segoe UI", Roboto, Arial, sans-serif;

	/* Espaciado. Escala corta a propósito: cuatro pasos se respetan, doce no. */
	--fym-e-1: 8px;
	--fym-e-2: 16px;
	--fym-e-3: 28px;
	--fym-e-4: 56px;
	--fym-e-5: 96px;

	/* Anchos. 68ch de medida: por debajo de 60 el ojo salta de línea, por
	   encima de 75 se pierde al volver (§8). */
	--fym-ancho-texto: 68ch;
	--fym-ancho-max:   1180px;
	--fym-lateral:     20px;

	--fym-t-rapida: 140ms ease;
	--fym-t-media:  260ms ease;
}

@media (min-width: 48rem) {
	.fym-scope { --fym-lateral: 40px; }
}


/* =========================================================================
   3 · REINICIO Y BASE
   Sin tema padre no hay CSS heredado con el que pelear: si una regla no
   aplica, el culpable está en este archivo (§4).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.fym-scope {
	margin: 0;
	background: var(--fym-negro);
	color: var(--fym-hueso);
	font-family: var(--fym-texto);
	font-size: 1.0625rem;             /* 17 px: mínimo del §8 con un punto más */
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

/* --- Todo lo que sigue va en :where(). Ver la cabecera del archivo. --- */

.fym-scope :where(p) { margin: 0 0 1.2em; }
.fym-scope :where(p):last-child { margin-bottom: 0; }

.fym-scope :where(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--fym-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-wrap: balance;               /* evita la línea huérfana en titulares */
}

.fym-scope :where(h1) { font-size: clamp(2.3rem, 6vw, 4rem); font-weight: 800; }
.fym-scope :where(h2) { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.fym-scope :where(h3) { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.fym-scope :where(h4) { font-size: 1.15rem; }

.fym-scope :where(a) {
	color: var(--fym-ambar);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--fym-t-rapida);
}
.fym-scope :where(a:hover) { color: var(--fym-hueso); }

.fym-scope :where(ul, ol) { margin: 0 0 1.2em; padding-left: 1.35em; }
.fym-scope :where(li) { margin-bottom: 0.4em; }

.fym-scope :where(img, svg, video) { max-width: 100%; height: auto; display: block; }

.fym-scope :where(strong, b) { font-weight: 700; color: var(--fym-hueso); }
.fym-scope :where(em, i) { font-style: italic; }

.fym-scope :where(hr) {
	border: 0;
	border-top: 1px solid var(--fym-borde);
	margin: var(--fym-e-4) 0;
}

.fym-scope :where(blockquote) {
	margin: var(--fym-e-3) 0;
	padding: 0 0 0 var(--fym-e-2);
	border-left: 3px solid var(--fym-ambar);
	font-family: var(--fym-display);
	font-size: 1.3rem;
	line-height: 1.3;
	color: var(--fym-hueso);
}

.fym-scope :where(table) { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; }
.fym-scope :where(th, td) {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--fym-borde);
	font-size: 1rem;
}
.fym-scope :where(th) { font-weight: 700; color: var(--fym-hueso); }

.fym-scope :where(figure) { margin: var(--fym-e-3) 0; }
.fym-scope :where(figcaption) {
	margin-top: var(--fym-e-1);
	font-size: 0.875rem;
	color: var(--fym-humo);
}

.fym-scope :where(code, pre) { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; }

.fym-scope :where(dialog) { border: 0; padding: 0; color: inherit; }


/* =========================================================================
   4 · UTILIDADES
   SIEMPRE prefijadas con .fym-scope: así valen (0,2,0) y ganan a la base
   de (0,1,0). Si se escribieran como `.fym-contenedor` a secas, perderían.
   ========================================================================= */

.fym-scope .fym-contenedor {
	width: 100%;
	max-width: var(--fym-ancho-max);
	margin-inline: auto;
	padding-inline: var(--fym-lateral);
}

.fym-scope .fym-medida { max-width: var(--fym-ancho-texto); }

.fym-scope .fym-guia {
	font-family: var(--fym-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fym-humo);
	margin: 0 0 var(--fym-e-2);
}

.fym-scope .fym-entradilla {
	font-family: var(--fym-texto);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fym-humo);
	margin: var(--fym-e-2) 0 0;
	max-width: 58ch;
}

.fym-scope .fym-oculto-visual {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* =========================================================================
   5 · SALTAR AL CONTENIDO
   Primer elemento de header.php. Invisible hasta que recibe el foco (§8).
   ========================================================================= */

.fym-scope .fym-saltar {
	position: absolute;
	left: var(--fym-e-2);
	top: -100px;
	z-index: 200;
	padding: 12px 18px;
	background: var(--fym-ambar);
	color: var(--fym-negro);
	font-weight: 700;
	text-decoration: none;
	transition: top var(--fym-t-rapida);
}
.fym-scope .fym-saltar:focus { top: var(--fym-e-2); color: var(--fym-negro); }


/* =========================================================================
   6 · CABECERA Y MENÚ
   Fija, con el teléfono desde el primer píxel: es la única vía de reserva,
   así que no se esconde detrás de un scroll (§11, modo teléfono).
   ========================================================================= */

.fym-scope .fym-cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--fym-negro) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--fym-borde);
}

.fym-scope .fym-cabecera__fila {
	display: flex;
	align-items: center;
	gap: var(--fym-e-2);
	min-height: 68px;
}

.fym-scope .fym-marca {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	text-decoration: none;
	color: var(--fym-hueso);
}
.fym-scope .fym-marca:hover { color: var(--fym-hueso); }

/* 44 px es el ancho al que el símbolo sigue siendo legible; por debajo de 48
   pierde los huecos interiores, así que el favicon usa la versión a un color. */
.fym-scope .fym-marca__simbolo { width: 44px; height: auto; flex: none; }

.fym-scope .fym-marca__nombre {
	font-family: var(--fym-display);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* El menú de escritorio se oculta en móvil: allí manda el modal de §7.
   ORDEN IMPORTANTE: las dos reglas base van ANTES del @media. Si el @media se
   escribe primero y la base después, la base gana por orden de aparición —las
   dos valen (0,2,0)— y el botón "Menú" sale también en escritorio. Pasó, y por
   eso está escrito aquí. */
.fym-scope .fym-nav { display: none; }

.fym-scope .fym-abrir-menu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--fym-humo);
	color: var(--fym-hueso);
	font-family: var(--fym-texto);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 9px 14px;
	cursor: pointer;
}

@media (min-width: 62rem) {
	.fym-scope .fym-nav { display: block; }
	.fym-scope .fym-abrir-menu { display: none; }
}

.fym-scope .fym-nav__lista {
	display: flex;
	gap: var(--fym-e-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.fym-scope .fym-nav__lista li { margin: 0; }

.fym-scope .fym-nav__lista a {
	font-family: var(--fym-texto);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--fym-hueso);
	text-decoration: none;
	padding-block: 6px;
	border-bottom: 2px solid transparent;
	transition: border-color var(--fym-t-rapida), color var(--fym-t-rapida);
}
.fym-scope .fym-nav__lista a:hover { color: var(--fym-ambar); border-bottom-color: var(--fym-ambar); }

/* La página actual se marca con color Y con subrayado: nunca solo con color (§8). */
.fym-scope .fym-nav__lista .current-menu-item > a,
.fym-scope .fym-nav__lista .current_page_item > a {
	color: var(--fym-ambar);
	border-bottom-color: var(--fym-ambar);
}



/* =========================================================================
   7 · MENÚ DE MÓVIL (MODAL)
   role="dialog", aria-modal, cierre con Escape, foco atrapado dentro y
   devuelto al botón que lo abrió. Lo hace el JS; aquí solo el aspecto (§8).
   ========================================================================= */

.fym-scope .fym-menu-movil {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: none;
	background: var(--fym-negro);
	padding: var(--fym-e-3) var(--fym-lateral);
	overflow-y: auto;
}
.fym-scope .fym-menu-movil[data-abierto="si"] { display: block; }

.fym-scope .fym-menu-movil__cerrar {
	position: absolute;
	top: var(--fym-e-2);
	right: var(--fym-lateral);
	background: transparent;
	border: 1px solid var(--fym-humo);
	color: var(--fym-hueso);
	font-family: var(--fym-texto);
	font-size: 0.875rem;
	font-weight: 600;
	padding: 9px 14px;
	cursor: pointer;
}

.fym-scope .fym-menu-movil__lista {
	list-style: none;
	margin: var(--fym-e-5) 0 var(--fym-e-4);
	padding: 0;
}
.fym-scope .fym-menu-movil__lista li { margin: 0; border-bottom: 1px solid var(--fym-borde); }

.fym-scope .fym-menu-movil__lista a {
	display: block;
	padding: var(--fym-e-2) 0;
	font-family: var(--fym-display);
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--fym-hueso);
	text-decoration: none;
}
.fym-scope .fym-menu-movil__lista a:hover { color: var(--fym-ambar); }


/* =========================================================================
   8 · BOTONES
   El texto va DENTRO del color, así que el par que manda es el interno.
   Comprobado: hueso sobre rojo-p 5,35:1 · negro sobre rojo 4,85:1.
   El rojo de marca con texto blanco da 3,54:1 y NO SE USA.
   ========================================================================= */

.fym-scope .fym-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fym-texto);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	padding: 13px 20px;
	border: 0;
	border-radius: 2px;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--fym-t-rapida), color var(--fym-t-rapida);
}

.fym-scope .fym-btn--principal { background: var(--fym-rojo-p); color: var(--fym-hueso); }
.fym-scope .fym-btn--principal:hover { background: var(--fym-rojo); color: var(--fym-negro); }

.fym-scope .fym-btn--secundario {
	background: transparent;
	color: var(--fym-ambar);
	box-shadow: inset 0 0 0 2px var(--fym-ambar);
}
.fym-scope .fym-btn--secundario:hover { background: var(--fym-ambar); color: var(--fym-negro); }

/* En móvil el botón de la cabecera se queda solo con el icono y el número
   corto, porque "Llamar 919 42 13 79" no cabe con el logotipo al lado. */
.fym-scope .fym-cabecera .fym-btn { padding: 10px 14px; font-size: 0.9375rem; }
.fym-scope .fym-cabecera .fym-btn__num { display: none; }

@media (min-width: 30rem) {
	.fym-scope .fym-cabecera .fym-btn__num { display: inline; }
}


/* =========================================================================
   9 · RÓTULO DE PORTADA
   Sin foto: el primer bloque es puro rótulo, como la fachada. Es la decisión
   de D1 y viene de que no hay ni una imagen del local.
   ========================================================================= */

.fym-scope .fym-rotulo { padding: var(--fym-e-5) 0 var(--fym-e-4); }

.fym-scope .fym-rotulo__nombre {
	font-family: var(--fym-display);
	font-size: clamp(2.8rem, 11vw, 7rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0;
}

.fym-scope .fym-rotulo__que {
	font-family: var(--fym-texto);
	font-size: clamp(1.05rem, 2.4vw, 1.4rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--fym-humo);
	margin: var(--fym-e-2) 0 0;
}

.fym-scope .fym-rotulo__horario {
	font-family: var(--fym-display);
	font-size: clamp(1.2rem, 3vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	margin: var(--fym-e-3) 0 0;
}
.fym-scope .fym-rotulo__horario b { color: var(--fym-ambar); font-weight: 700; }

.fym-scope .fym-rotulo__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fym-e-2);
	margin-top: var(--fym-e-3);
}


/* =========================================================================
   10 · EJE HORARIO
   El arquetipo de D1. Abren de 9:30 a 1:00, seis días: quince horas y media,
   que son cuatro bares en el mismo local. La página se organiza como la
   jornada, y eso además no necesita una foto por sección para no verse vacío.

   Los tres colores de marca solo se distinguen entre sí 1,22-1,51:1, así que
   el color NO es el único código: cada tramo lleva su hora escrita (§8).
   ========================================================================= */

.fym-scope .fym-eje { position: relative; padding: var(--fym-e-4) 0; }

.fym-scope .fym-eje__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

/* El carril: un degradado de verde a rojo que recorre la jornada, igual que el
   símbolo del logotipo recorre de verde a rojo de izquierda a derecha. */
.fym-scope .fym-eje__lista::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: var(--fym-borde);
}

/* La parte "recorrida" se rellena al desplazar. La variable la escribe el JS;
   sin JS se queda a 0 y el carril sigue siendo legible porque las horas están
   escritas. */
.fym-scope .fym-eje__lista::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 12px;
	width: 2px;
	height: calc(var(--fym-eje-avance, 0) * (100% - 24px));
	background: linear-gradient(var(--fym-verde), var(--fym-ambar), var(--fym-rojo));
	transition: height var(--fym-t-media);
}

.fym-scope .fym-tramo {
	position: relative;
	margin: 0;
	padding: 0 0 var(--fym-e-4) 42px;
}
.fym-scope .fym-tramo:last-child { padding-bottom: 0; }

.fym-scope .fym-tramo::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: currentColor;
}

.fym-scope .fym-tramo--manana { color: var(--fym-verde); }
.fym-scope .fym-tramo--tarde  { color: var(--fym-ambar); }
.fym-scope .fym-tramo--noche  { color: var(--fym-rojo); }

.fym-scope .fym-tramo__hora {
	display: block;
	font-family: var(--fym-display);
	font-size: clamp(1.7rem, 4.5vw, 2.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* El título del tramo puede ser h2 o h3 según dónde se use, así que fija todo
   lo heredable de forma explícita (§3.2, segunda parte). */
.fym-scope .fym-tramo__titulo {
	font-family: var(--fym-display);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--fym-hueso);
	margin: 4px 0 6px;
}

.fym-scope .fym-tramo__texto {
	font-family: var(--fym-texto);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--fym-humo);
	margin: 0;
	max-width: 52ch;
}

.fym-scope .fym-tramo__enlace {
	display: inline-block;
	margin-top: var(--fym-e-1);
	font-family: var(--fym-texto);
	font-size: 0.9375rem;
	font-weight: 600;
	color: currentColor;
}

/* A partir de tableta, el eje se va a un tercio y el texto respira al otro
   lado: la retícula es asimétrica a propósito, no centrada. */
@media (min-width: 56rem) {
	.fym-scope .fym-eje__lista { padding-left: 0; }
	.fym-scope .fym-tramo {
		display: grid;
		grid-template-columns: 8.5rem 1fr;
		gap: var(--fym-e-3);
		padding-left: 42px;
	}
	.fym-scope .fym-tramo__hora { padding-top: 2px; }
}


/* =========================================================================
   11 · SECCIONES Y REJILLA ASIMÉTRICA
   Nunca tres tarjetas en fondo: la rejilla es de dos columnas desiguales y
   alterna el lado, que es lo que la hace no parecer una plantilla (§D1).
   ========================================================================= */

.fym-scope .fym-seccion { padding: var(--fym-e-4) 0; }
.fym-scope .fym-seccion + .fym-seccion { border-top: 1px solid var(--fym-borde); }

.fym-scope .fym-seccion__cabeza { margin-bottom: var(--fym-e-3); }

.fym-scope .fym-dupla { display: grid; gap: var(--fym-e-3); }

@media (min-width: 56rem) {
	.fym-scope .fym-dupla { grid-template-columns: 7fr 5fr; gap: var(--fym-e-4); align-items: start; }
	.fym-scope .fym-dupla--invertida { grid-template-columns: 5fr 7fr; }
	.fym-scope .fym-dupla--invertida > :first-child { order: 2; }
	.fym-scope .fym-dupla--invertida > :last-child  { order: 1; }
}

.fym-scope .fym-lista-platos { list-style: none; margin: 0; padding: 0; }
.fym-scope .fym-lista-platos li {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--fym-borde);
}
.fym-scope .fym-lista-platos b {
	display: block;
	font-family: var(--fym-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fym-hueso);
}
.fym-scope .fym-lista-platos span {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fym-humo);
}


/* =========================================================================
   12 · FIGURAS E IMÁGENES
   Todas las fotos disponibles son descargas de Instagram: ninguna pasa de
   1440 px y NUNCA se amplía un original pequeño (§9). Por eso las figuras
   tienen tope de ancho y el diseño no depende de ellas.
   ========================================================================= */

.fym-scope .fym-figura { margin: 0; }
.fym-scope .fym-figura img { width: 100%; border-radius: 2px; }

/* aspect-ratio no aplica a elementos en línea: la imagen va display:block
   desde la base de §3, así que aquí funciona. */
.fym-scope .fym-figura--cuadrada img { aspect-ratio: 1 / 1; object-fit: cover; }
.fym-scope .fym-figura--vertical img { aspect-ratio: 3 / 4; object-fit: cover; }
.fym-scope .fym-figura--ancha img    { aspect-ratio: 16 / 9; object-fit: cover; }


/* =========================================================================
   13 · TABLA DE HORARIO
   Día por día, con el cierre marcado con texto y no solo con color.
   ========================================================================= */

.fym-scope .fym-horario { max-width: 30rem; }
.fym-scope .fym-horario th,
.fym-scope .fym-horario td { padding: 11px 0; }
.fym-scope .fym-horario td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fym-scope .fym-horario tr[data-hoy="si"] th,
.fym-scope .fym-horario tr[data-hoy="si"] td { color: var(--fym-ambar); font-weight: 700; }
.fym-scope .fym-horario__cerrado { color: var(--fym-humo); }


/* =========================================================================
   14 · TERCEROS BAJO DEMANDA
   En el HTML no hay <iframe>: hay un contenedor con el aspecto YA reservado
   —para que no salte la maquetación— y un botón que dice con quién se va a
   conectar. Ese clic es el consentimiento para ese incrustado (§11).
   ========================================================================= */

.fym-scope .fym-tercero {
	position: relative;
	aspect-ratio: 16 / 10;          /* calculado, no estimado: 640x400 del embed */
	background: var(--fym-carbon);
	border: 1px solid var(--fym-borde);
	display: grid;
	place-content: center;
	text-align: center;
	padding: var(--fym-e-3);
	gap: var(--fym-e-2);
}
.fym-scope .fym-tercero__aviso {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fym-humo);
	margin: 0;
	max-width: 40ch;
	margin-inline: auto;
}
.fym-scope .fym-tercero iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* =========================================================================
   15 · BLOG
   Listado, tarjeta, entrada y —lo que siempre se olvida— los estilos de lo
   que de verdad se escribe en el editor (§13).
   ========================================================================= */

.fym-scope .fym-listado {
	display: grid;
	gap: var(--fym-e-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 44rem) { .fym-scope .fym-listado { grid-template-columns: repeat(2, 1fr); } }

.fym-scope .fym-tarjeta { margin: 0; }
.fym-scope .fym-tarjeta__figura { margin: 0 0 var(--fym-e-2); }
.fym-scope .fym-tarjeta__figura img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

/* La tarjeta es h2 en el listado y h3 en las relacionadas. Por eso fija
   EXPLÍCITAMENTE todo lo heredable: si no, se ve de un tamaño en un sitio y de
   otro en el otro y nadie entiende por qué (§3.2). */
.fym-scope .fym-tarjeta__titulo {
	font-family: var(--fym-display);
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 6px;
}
.fym-scope .fym-tarjeta__titulo a { color: var(--fym-hueso); text-decoration: none; }
.fym-scope .fym-tarjeta__titulo a:hover { color: var(--fym-ambar); }

.fym-scope .fym-meta {
	font-family: var(--fym-texto);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fym-humo);
	margin: 0 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.fym-scope .fym-meta a { color: var(--fym-ambar); text-decoration: none; }

.fym-scope .fym-tarjeta__extracto {
	font-family: var(--fym-texto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fym-humo);
	margin: 0;
}

.fym-scope .fym-entrada { padding: var(--fym-e-4) 0; }
.fym-scope .fym-entrada__cabeza { max-width: var(--fym-ancho-texto); margin-bottom: var(--fym-e-3); }
.fym-scope .fym-entrada__portada { margin: 0 0 var(--fym-e-4); }
.fym-scope .fym-entrada__portada img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }

/* El cuerpo de la entrada: aquí sí se limita la medida, porque es texto largo. */
.fym-scope .fym-prosa { max-width: var(--fym-ancho-texto); }
.fym-scope .fym-prosa > :where(h2) { margin-top: var(--fym-e-4); margin-bottom: var(--fym-e-1); }
.fym-scope .fym-prosa > :where(h3) { margin-top: var(--fym-e-3); margin-bottom: var(--fym-e-1); }
.fym-scope .fym-prosa :where(figure) { margin: var(--fym-e-3) 0; }
.fym-scope .fym-prosa :where(ul, ol) { color: var(--fym-hueso); }

.fym-scope .fym-relacionadas { border-top: 1px solid var(--fym-borde); padding-top: var(--fym-e-3); margin-top: var(--fym-e-4); }


/* =========================================================================
   16 · PAGINACIÓN
   ========================================================================= */

.fym-scope .fym-paginacion { margin-top: var(--fym-e-4); }
.fym-scope .fym-paginacion__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fym-e-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.fym-scope .fym-paginacion__item { margin: 0; }
.fym-scope .fym-paginacion a,
.fym-scope .fym-paginacion span {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--fym-borde);
	font-family: var(--fym-texto);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--fym-hueso);
}
.fym-scope .fym-paginacion a:hover { border-color: var(--fym-ambar); color: var(--fym-ambar); }
/* La página actual se marca con borde ámbar Y con aria-current en el HTML. */
.fym-scope .fym-paginacion .current { border-color: var(--fym-ambar); color: var(--fym-ambar); }


/* =========================================================================
   17 · PIE
   ========================================================================= */

.fym-scope .fym-pie {
	border-top: 1px solid var(--fym-borde);
	background: var(--fym-carbon);
	padding: var(--fym-e-4) 0 var(--fym-e-3);
	margin-top: var(--fym-e-5);
}

.fym-scope .fym-pie__rejilla { display: grid; gap: var(--fym-e-3); }
@media (min-width: 48rem) {
	.fym-scope .fym-pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--fym-e-4); }
}

.fym-scope .fym-pie__titulo {
	font-family: var(--fym-display);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--fym-hueso);
	margin: 0 0 var(--fym-e-1);
}

.fym-scope .fym-pie__lista { list-style: none; margin: 0; padding: 0; }
.fym-scope .fym-pie__lista li { margin: 0 0 6px; }
.fym-scope .fym-pie__lista a { font-size: 1rem; text-decoration: none; color: var(--fym-humo); }
.fym-scope .fym-pie__lista a:hover { color: var(--fym-ambar); text-decoration: underline; }

.fym-scope .fym-pie__legal {
	margin-top: var(--fym-e-3);
	padding-top: var(--fym-e-2);
	border-top: 1px solid var(--fym-borde);
	font-size: 0.875rem;
	color: var(--fym-humo);
	display: flex;
	flex-wrap: wrap;
	gap: var(--fym-e-2);
	align-items: center;
}
.fym-scope .fym-pie__legal a { color: var(--fym-humo); text-decoration: none; }
.fym-scope .fym-pie__legal a:hover { color: var(--fym-ambar); text-decoration: underline; }

/* Botón de texto: retirar el consentimiento tiene que ser tan fácil como
   darlo, así que este enlace vive en el pie de todas las páginas (§10). */
.fym-scope .fym-pie__preferencias {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--fym-humo);
	cursor: pointer;
	text-decoration: underline;
}
.fym-scope .fym-pie__preferencias:hover { color: var(--fym-ambar); }


/* =========================================================================
   18 · CONSENTIMIENTO
   Se monta, pero en este sitio queda APAGADO: con las tipografías
   autoalojadas y los iframes bajo demanda no se instala ninguna cookie no
   esencial, así que lo correcto es la página informativa sin banner (§10).
   La constante que lo enciende está en scripts.js.

   Rechazar cuesta LO MISMO que aceptar: mismo nivel, mismo tamaño, misma
   jerarquía visual. Nada de un "Aceptar" de color y un "Rechazar" en gris.
   ========================================================================= */

.fym-scope .fym-cookies {
	position: fixed;
	left: var(--fym-e-2);
	right: var(--fym-e-2);
	bottom: var(--fym-e-2);
	z-index: 160;
	display: none;
	background: var(--fym-carbon);
	border: 1px solid var(--fym-humo);
	padding: var(--fym-e-3);
}
.fym-scope .fym-cookies[data-visible="si"] { display: block; }

@media (min-width: 48rem) {
	.fym-scope .fym-cookies { max-width: 34rem; left: auto; right: var(--fym-e-3); bottom: var(--fym-e-3); }
}

.fym-scope .fym-cookies__texto { font-size: 0.9375rem; line-height: 1.5; margin: 0 0 var(--fym-e-2); }

.fym-scope .fym-cookies__acciones { display: flex; flex-wrap: wrap; gap: var(--fym-e-1); }
/* Los dos botones comparten clase y tamaño a propósito. */
.fym-scope .fym-cookies__acciones .fym-btn { flex: 1 1 auto; justify-content: center; }

.fym-scope .fym-panel {
	position: fixed;
	inset: 0;
	z-index: 170;
	display: none;
	background: color-mix(in srgb, var(--fym-negro) 82%, transparent);
	padding: var(--fym-e-2);
	overflow-y: auto;
}
.fym-scope .fym-panel[data-abierto="si"] { display: grid; place-items: center; }

.fym-scope .fym-panel__caja {
	background: var(--fym-carbon);
	border: 1px solid var(--fym-humo);
	padding: var(--fym-e-3);
	width: 100%;
	max-width: 34rem;
}

.fym-scope .fym-panel__grupo { border-top: 1px solid var(--fym-borde); padding: var(--fym-e-2) 0; }
.fym-scope .fym-panel__fila { display: flex; gap: var(--fym-e-2); align-items: flex-start; }
.fym-scope .fym-panel__fila input { margin-top: 4px; flex: none; width: 20px; height: 20px; accent-color: var(--fym-ambar); }
.fym-scope .fym-panel__fila label { font-weight: 700; color: var(--fym-hueso); }
.fym-scope .fym-panel__fila p { font-size: 0.9375rem; color: var(--fym-humo); margin: 4px 0 0; }


/* =========================================================================
   19 · FOCO VISIBLE
   Ámbar sobre el fondo da 6,01:1, muy por encima del 3:1 que pide un
   componente de interfaz. --fym-borde daría 1,43:1 y NO sirve para esto (§8).
   ========================================================================= */

.fym-scope :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--fym-ambar);
	outline-offset: 2px;
	border-radius: 1px;
}

/* Se quita el foco por defecto SOLO cuando el navegador soporta :focus-visible,
   para no dejar sin foco a los que no. */
@supports selector(:focus-visible) {
	.fym-scope :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
		outline: none;
	}
}

.fym-scope [aria-current="page"] { font-weight: 700; }


/* =========================================================================
   20 · MOVIMIENTO REDUCIDO
   Anula el relleno del eje y todas las transiciones. El eje sigue siendo
   legible porque las horas están escritas, no dibujadas (§8).
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.fym-scope *,
	.fym-scope *::before,
	.fym-scope *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
	.fym-scope .fym-eje__lista::after { height: calc(100% - 24px); }
}