/*!
 * Hestia — public styles (restaurant site template).
 * Designed and developed by Luis Koepke — https://www.luiskoepke.com
 *
 * Estilos públicos de los widgets de Elementor y shortcodes, pensados para
 * sobrescribirse con los controles de Estilo de Elementor. Paleta e identidad
 * de Flamante: tinta cálida, crema/hueso (var(--hestia-paper)) y terracota de marca
 * (var(--hestia-cherry)). Tipografía de la carta impresa: Cirka para títulos y Dico
 * Typewriter para cuerpo y precios.
 */

/* Cirka se sirve como fuente variable (eje de peso 300–700) bajo un solo
   nombre de familia: así cualquier peso intermedio (Regular 400, Medium 500)
   se dibuja con la fuente real y no con una negrita sintética. */
@font-face {
	font-family: 'Cirka';
	src: url('../fonts/Cirka-Variable.ttf') format('truetype');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Cirka Variable';
	src: url('../fonts/Cirka-Variable.ttf') format('truetype');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Dico Typewriter';
	src: url('../fonts/Dico-Typewriter.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--hestia-ink: #171310;
	--hestia-ink-soft: #6E6459;
	--hestia-paper: #EAE5DF;
	--hestia-cream: #F2EDE6;
	--hestia-cream-alt: #EFE8DE;
	--hestia-rose: #E7C7B6;
	--hestia-cherry: #AC3E26;
	--hestia-font-display: "Cirka", "Cirka Variable", Georgia, serif;
	--hestia-font-body: "Dico Typewriter", ui-monospace, "SF Mono", Consolas, monospace;
	--hestia-line: rgba(23, 19, 16, 0.14);
}

.hestia-dish-card,
.hestia-menu-grid,
.hestia-carousel,
.hestia-filter,
.hestia-location-selector,
.hestia-menu-tabs,
.hestia-printed-menu,
.hestia-schedule-status,
.hestia-daily-special {
	box-sizing: border-box;
	font-family: var(--hestia-font-body);
	color: var(--hestia-ink);
}
.hestia-dish-card *, .hestia-menu-grid *, .hestia-filter * { box-sizing: border-box; }

.hestia-empty { opacity: 0.65; font-style: italic; color: var(--hestia-ink-soft); }

/* Dish card */
.hestia-dish-card {
	border: 1px solid var(--hestia-line);
	border-radius: 14px;
	overflow: hidden;
	background: var(--hestia-paper);
	display: flex;
	flex-direction: column;
	transition: border-color 0.25s ease;
}
.hestia-dish-card:hover { border-color: color-mix(in srgb, var(--hestia-ink) 28%, transparent); }
.hestia-dish-card__image img { width: 100%; height: 220px; object-fit: cover; display: block; }
.hestia-dish-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.hestia-dish-card__title { margin: 0; font-family: var(--hestia-font-display); font-size: 18px; font-weight: 600; color: var(--hestia-ink); }
.hestia-dish-card__desc { margin: 0; font-size: 14px; color: var(--hestia-ink-soft); }
.hestia-dish-card__price { font-family: var(--hestia-font-display); font-weight: 700; font-size: 17px; margin-top: 4px; }
.hestia-dish-card__tags, .hestia-dish-card__allergens { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.hestia-tag, .hestia-allergen { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: color-mix(in srgb, var(--hestia-rose) 32%, transparent); color: var(--hestia-ink); }
.hestia-allergen { background: rgba(166, 58, 70, 0.1); color: var(--hestia-cherry); }

/* Menu grid */
.hestia-menu-grid { display: flex; flex-direction: column; gap: 40px; }
.hestia-menu-category__title { font-family: var(--hestia-font-display); font-size: 22px; font-weight: 700; border-bottom: 2px solid var(--hestia-rose); padding-bottom: 8px; margin-bottom: 20px; color: var(--hestia-ink); }
.hestia-menu-category__dishes { display: grid; gap: 20px; grid-template-columns: repeat(var(--hestia-columns, 3), 1fr); }
.hestia-layout-list .hestia-menu-category__dishes { grid-template-columns: 1fr; }
.hestia-layout-list .hestia-dish-card { flex-direction: row; }
.hestia-layout-list .hestia-dish-card__image img { width: 140px; height: 100%; }

@media (max-width: 900px) { .hestia-menu-category__dishes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hestia-menu-category__dishes { grid-template-columns: 1fr; } }

/* Carousel */
.hestia-carousel { position: relative; display: flex; align-items: center; gap: 12px; }
.hestia-carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; flex: 1; padding-bottom: 6px; }
.hestia-carousel__slide { flex: 0 0 260px; }
.hestia-carousel__nav { background: var(--hestia-ink); color: var(--hestia-paper); border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 18px; flex-shrink: 0; transition: background-color 0.2s ease; }
.hestia-carousel__nav:hover,
.hestia-carousel__nav:focus {
	background: var(--hestia-cherry) !important;
	color: var(--hestia-paper) !important;
}

/* Filter */
.hestia-filter__controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; border-radius: 14px; background: var(--hestia-cream); }
.hestia-filter__controls input, .hestia-filter__controls select { padding: 8px 10px; border: 1px solid var(--hestia-line); border-radius: 8px; background: var(--hestia-paper); color: var(--hestia-ink); font-family: inherit; }
.hestia-filter__allergens { border: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hestia-filter__allergens legend { font-size: 12px; color: var(--hestia-ink-soft); width: 100%; }
.hestia-filter__results { margin-top: 20px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Location selector */
.hestia-location-selector { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.hestia-location-selector select { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--hestia-line); background: var(--hestia-paper); color: var(--hestia-ink); }

/* Menu tabs */
.hestia-menu-tabs__nav { display: flex; gap: 4px; border-bottom: 2px solid var(--hestia-line); margin-bottom: 24px; flex-wrap: wrap; }
.hestia-menu-tabs__tab { background: none; border: none; padding: 12px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--hestia-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s ease, border-color 0.2s ease; }
.hestia-menu-tabs__tab:hover { color: var(--hestia-ink); }
.hestia-menu-tabs__tab.is-active { color: var(--hestia-ink); border-bottom-color: var(--hestia-cherry); }
.hestia-menu-tabs__panel { display: none; }
.hestia-menu-tabs__panel.is-active { display: block; }

/* Printed menu */
.hestia-printed-menu { max-width: 640px; margin: 0 auto; font-family: var(--hestia-font-display); color: var(--hestia-ink); }
.hestia-printed-menu__category h3 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; border-bottom: 1px solid var(--hestia-ink); padding-bottom: 6px; }
.hestia-printed-menu__item { list-style: none; display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.hestia-printed-menu__dots { flex: 1; border-bottom: 1px dotted var(--hestia-ink-soft); height: 0; margin-bottom: 4px; }
.hestia-printed-menu__desc { font-family: var(--hestia-font-body); font-size: 12px; color: var(--hestia-ink-soft); margin: 2px 0 0; flex-basis: 100%; }
.hestia-printed-menu ul { padding: 0; margin: 0 0 24px; }

/* Schedule status */
.hestia-schedule-status__badge { display: inline-block; padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; color: var(--hestia-paper); }
.hestia-schedule-status__badge--open { background: #6F8F6B; }
.hestia-schedule-status__badge--closed { background: var(--hestia-cherry); }
.hestia-schedule-status__events { list-style: none; padding: 0; margin: 12px 0 0; font-size: 13px; color: var(--hestia-ink-soft); }

/* Daily special */
.hestia-daily-special__eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; margin-bottom: 10px; color: var(--hestia-cherry); }

/* Plantillas de archivo/single del CPT de platos (sin estilo propio en el original) */
.hestia-dish-archive,
.hestia-single-dish {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 56px) 20px 64px;
	font-family: var(--hestia-font-body);
	color: var(--hestia-ink);
}
.hestia-dish-archive__title {
	font-family: var(--hestia-font-display);
	font-size: clamp(28px, 4.5vw, 44px);
	font-weight: 700;
	margin: 0 0 clamp(24px, 4vw, 40px);
}
.hestia-single-dish article { max-width: 720px; margin: 0 auto; }
.hestia-single-dish__gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
	margin: 24px 0;
}
.hestia-single-dish__gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; display: block; }
.hestia-single-dish__content { margin-top: 20px; line-height: 1.7; }

@media print {
	.hestia-dish-card__image { display: none; }
}


/* Elementor mete cada widget dentro de un contenedor flex propio de la
   página; si ese contenedor tiene `align-items` distinto de `stretch` (el
   valor por defecto que trae Elementor al crear una columna nueva es
   `center`), el widget deja de ocupar todo el ancho disponible y se
   encoge al tamaño de su contenido — entonces `--dm-maxw` (abajo) nunca
   llega a importar porque el widget mismo ya viene angosto. Pasaba
   invisible en pantallas chicas (el contenido igual ocupaba casi todo el
   ancho) pero en desktop dejaba el menú entero apretado en una columna
   angosta con medio velo verde vacío al lado. Se fuerza acá, por tipo de
   widget (no por ID de un contenedor puntual de esta página), para que
   pase lo mismo sin importar en qué contenedor de Elementor se coloque. */
.elementor-widget-hestia_dm_menu,
.elementor-widget-hestia_dm_header {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
}

/* ==========================================================================
   Menú Digital Editorial
   Réplica digital de la carta impresa: navegación fija, hero con personaje,
   secciones con degradado propio y recuadros de categoría de color.
   ========================================================================== */

.hestia-dm {
	--dm-ink: var(--hestia-ink, var(--hestia-ink));
	--dm-muted: var(--hestia-ink-soft, var(--hestia-ink-soft));
	--dm-cta: var(--hestia-cherry, var(--hestia-cherry));
	--dm-cta-text: var(--hestia-paper, var(--hestia-paper));
	--dm-nav-bg: transparent;
	--dm-serif: var(--hestia-font-display, "Cirka", "Cirka Variable", Georgia, serif);
	--dm-sans: var(--hestia-font-body, "Dico Typewriter", ui-monospace, "SF Mono", Consolas, monospace);
	--dm-maxw: 1180px;
	--dm-muted2: color-mix(in srgb, var(--hestia-ink-soft) 45%, var(--hestia-paper));
	--dm-card-border: var(--hestia-cream-alt);

	position: relative;
	color: var(--dm-ink);
	font-family: var(--dm-sans);
	/* Ojo si se retoca: NO `overflow-x: clip` acá — cualquier `overflow`
	   distinto de `visible` en un ancestro le rompe el `position:sticky` a la
	   franja de "Volver" (deja de pegarse y solo se desplaza normal con la
	   página). Si algún elemento decorativo llega a desbordar de lado,
	   hay que arreglar ESE elemento puntual, no volver a poner un clip acá. */
}
.hestia-dm *,
.hestia-dm *::before,
.hestia-dm *::after { box-sizing: border-box; }

.hestia-dm ul { list-style: none; margin: 0; padding: 0; }

/* Red de seguridad permanente contra el rojo/rosa por defecto del tema
   (Hello Elementor trae `button:hover,:focus{background:#c36;color:#fff}` y
   `a:hover,:active{color:#336}` en su reset.css, con más prioridad que nuestra
   hoja para cualquier botón/enlace que no declare explícitamente su propio
   color en `:hover`/`:focus`). El `:where()` no suma especificidad, así que
   cualquier regla puntual de más abajo (con `!important`, como corresponde
   para vencer un reset de un tema de terceros) sigue ganando sin problema —
   esto es solo el respaldo para lo que se nos escape a futuro. */
.hestia-dm :where(button):hover,
.hestia-dm :where(button):focus {
	background-color: transparent !important;
	color: inherit !important;
}
.hestia-dm :where(a):hover,
.hestia-dm :where(a):focus,
.hestia-dm :where(a):active {
	color: inherit !important;
}

/* --------------------------------------------------------------- Navegación */

.hestia-dm-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--dm-nav-bg);
}

.hestia-dm-nav__inner {
	max-width: var(--dm-maxw);
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.hestia-dm-nav__brand {
	font-family: var(--dm-serif);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	flex-shrink: 0;
}
.hestia-dm-nav__brandlink { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--dm-ink); }
.hestia-dm-nav__brandlink:hover,
.hestia-dm-nav__brandlink:focus { color: var(--dm-ink) !important; }
.hestia-dm-nav__logo { height: 38px; width: auto; max-width: 210px; object-fit: contain; display: block; flex-shrink: 0; }

.hestia-dm-nav__links {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
}
.hestia-dm-nav__links::-webkit-scrollbar { display: none; }
/* Sin degradado en los bordes (pedido del usuario): el enlace siguiente,
   cortado por el borde, ya indica que la lista se desliza. */

.hestia-dm-nav__links a {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--dm-ink);
	text-decoration: none;
	white-space: nowrap;
	opacity: 0.65;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}
.hestia-dm-nav__links a:hover,
.hestia-dm-nav__links a:focus {
	opacity: 1;
	background: color-mix(in srgb, var(--hestia-ink) 7%, transparent) !important;
	color: var(--dm-ink) !important;
}
.hestia-dm-nav__links a.is-active { opacity: 1; background: color-mix(in srgb, var(--hestia-ink) 11%, transparent); }

/* Pills con el color de cada carta: texto claro y tinte suave en reposo,
   color pleno al activarse o al pasar el cursor. Esquinas discretas. */
.hestia-dm-nav--pills .hestia-dm-nav__links a {
	opacity: 1;
	color: var(--dm-pill-idle, var(--hestia-paper));
	border-radius: 6px;
	background: color-mix(in srgb, var(--dm-pill, var(--hestia-rose)) 10%, transparent);
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.25s ease;
}
.hestia-dm-nav--pills .hestia-dm-nav__links a:hover,
.hestia-dm-nav--pills .hestia-dm-nav__links a:focus,
.hestia-dm-nav--pills .hestia-dm-nav__links a.is-active {
	background: var(--dm-pill, var(--hestia-rose)) !important;
	color: var(--dm-pill-text, var(--hestia-ink)) !important;
}

.hestia-dm-nav__cta {
	flex-shrink: 0;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--dm-cta);
	color: var(--dm-cta-text);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.hestia-dm-nav__cta:hover,
.hestia-dm-nav__cta:focus {
	transform: translateY(-1px);
	filter: brightness(1.12);
	background: var(--dm-cta) !important;
	color: var(--dm-cta-text) !important;
}

@media (max-width: 860px) {
	.hestia-dm-nav__inner { padding: 8px 14px; gap: 10px; }
	.hestia-dm-nav__brand { font-size: 15px; }
	.hestia-dm-nav__logo { height: 30px; max-width: 140px; }
	.hestia-dm-nav__cta { padding: 8px 16px; font-size: 12px; }
}

/* --------------------------------------------------------------------- Hero */
/* El marco (arco) es una pieza vertical de proporción ~0.58, igual que la página
   impresa. Por eso el hero se compone como un "póster" centrado: el arco escala
   con la altura del hero y el contenido se coloca dentro de él, con las flores
   ancladas a los bordes exteriores. */

.hestia-dm-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(600px, 94vh, 960px);
	min-height: clamp(600px, 94svh, 960px);
	padding: clamp(30px, 5vw, 60px) 20px;
	background: linear-gradient(180deg, var(--dm-hero-from, var(--hestia-rose)) 0%, var(--dm-hero-to, var(--hestia-cream-alt)) 100%);
	overflow: hidden;
	text-align: center;
}

.hestia-dm-hero__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: auto;
	max-width: none;
	transform: translate(-50%, -50%);
	object-fit: contain;
	pointer-events: none;
	z-index: 1;
}

.hestia-dm-hero__flowers {
	position: absolute;
	top: -1%;
	height: auto;
	width: clamp(120px, 21vw, 300px);
	pointer-events: none;
	will-change: transform;
	z-index: 3;
}
.hestia-dm-hero__flowers--left { left: 0; }
.hestia-dm-hero__flowers--right { right: 0; transform: scaleX(-1); }

.hestia-dm-hero__content {
	position: relative;
	z-index: 2;
	width: min(430px, 74vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.hestia-dm-hero__eyebrow {
	font-family: var(--dm-serif);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: clamp(8px, 1.2vw, 11px);
	opacity: 0.85;
	padding-left: 0.3em;
	order: 2;
}

.hestia-dm-hero__title {
	font-family: var(--dm-serif);
	font-size: clamp(34px, 5.4vw, 62px);
	line-height: 0.94;
	margin: 0;
	font-weight: 700;
	order: 1;
}

/* Logo vertical: sustituye al título de texto sin perder el H1 semántico. */
.hestia-dm-hero__title--logo { display: block; line-height: 0; }
.hestia-dm-hero__logo {
	display: block;
	width: clamp(180px, 26vw, 300px);
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.hestia-dm-sronly {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.hestia-dm-hero__subtitle {
	font-size: clamp(12px, 1.5vw, 15px);
	margin: 2px 0 0;
	opacity: 0.82;
	line-height: 1.55;
	order: 3;
}

.hestia-dm-hero__character {
	width: clamp(190px, 27vw, 330px);
	height: auto;
	margin: clamp(6px, 1.6vw, 16px) 0 0;
	will-change: transform;
	order: 4;
}

.hestia-dm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 10px;
	order: 5;
}

.hestia-dm-btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.hestia-dm-btn:hover { transform: translateY(-2px); }
.hestia-dm-btn--primary { background: var(--dm-cta); color: var(--dm-cta-text); }
.hestia-dm-btn--primary:hover,
.hestia-dm-btn--primary:focus {
	filter: brightness(1.12);
	background: var(--dm-cta) !important;
	color: var(--dm-cta-text) !important;
}
.hestia-dm-btn--ghost { background: rgba(255, 255, 255, 0.45); color: var(--dm-ink); border: 1.5px solid currentColor; }
.hestia-dm-btn--ghost:hover,
.hestia-dm-btn--ghost:focus {
	background: rgba(255, 255, 255, 0.7) !important;
	color: var(--dm-ink) !important;
}

/* En pantallas anchas el arco no debe quedar diminuto ni desbordar en exceso. */
@media (min-aspect-ratio: 16/10) and (min-width: 1100px) {
	.hestia-dm-hero { min-height: 920px; }
}

@media (max-width: 760px) {
	.hestia-dm-hero { min-height: clamp(560px, 88vh, 760px); min-height: clamp(560px, 88svh, 760px); padding: 24px 16px; }
	.hestia-dm-hero__frame { height: auto; width: 128%; top: 46%; }
	.hestia-dm-hero__flowers { width: 40vw; }
	.hestia-dm-hero__flowers--left { left: -8%; }
	.hestia-dm-hero__flowers--right { right: -8%; }
	.hestia-dm-hero__content { width: min(330px, 78vw); }
}

/* -------------------------------------------------- Platos recomendados */

/* Sin fondo propio a propósito — hereda el de la página/sección donde se
   coloque el widget (la clienta lo define desde Elementor). */
.hestia-dm-featured {
	position: relative;
	z-index: 2;
	padding: clamp(40px, 6vw, 70px) 12px;
	max-width: var(--dm-maxw);
	margin: 0 auto;
}

/* Fondo redondeado simple, SIN la máscara de forma ondulada — se probó dos
   veces con la máscara y en ambas la clienta reportó texto recortado en
   dispositivos reales que no se pudieron reproducir acá para ajustar bien el
   margen. En vez de seguir ajustando a ciegas, se elimina el riesgo: esta
   caja no tiene tamaño fijo (depende del texto configurable "Título de la
   sección"), así que es la que más varía entre pantallas/fuentes reales — la
   forma ondulada se queda solo en el nombre de cada carta sobre su card
   (`.hestia-dm-cartacard__ribbon`), que sí tiene tamaño fijo y controlado.
   Tampoco lleva `white-space:nowrap` ni `overflow:hidden`: si en un
   dispositivo muy angosto no cupiera en una línea, pasa a dos líneas en vez
   de recortarse — nunca debe verse un texto cortado. */
.hestia-dm-featured__title {
	font-family: var(--dm-serif);
	font-size: clamp(22px, 3.6vw, 32px);
	text-align: center;
	font-weight: 700;
	display: inline-block;
	max-width: calc(100% - 16px);
	box-sizing: border-box;
	margin: 0 auto clamp(28px, 4.5vw, 48px);
	padding: clamp(16px, 3.2vw, 26px) clamp(24px, 9vw, 88px);
	color: var(--dm-featured-title-text, var(--hestia-ink));
	background-color: var(--dm-featured-title-bg, var(--hestia-rose));
	border-radius: 16px;
}
.hestia-dm-featured { text-align: center; }

/* --------------------------------------------------- Sobre la fundadora.
   Tarjeta con foto (o monograma con las iniciales si todavía no hay foto
   propia — nunca un hueco roto) e historia corta, justo debajo de
   "Platos recomendados". Columna en móvil, fila (foto a la izquierda) de
   ahí para arriba. `width: min(...)` en vez de `max-width` + `margin:auto`
   solo: así queda con el mismo respiro a los lados que el resto en móvil
   (antes tocaba borde a borde) y se sigue centrando con `--dm-maxw` en
   pantallas anchas, sin necesitar un breakpoint aparte para el cambio. */
.hestia-dm-owner {
	position: relative;
	z-index: 2;
	width: min(100% - 24px, var(--dm-maxw));
	margin: 0 auto clamp(28px, 4.5vw, 48px);
	padding: clamp(28px, 4vw, 40px) clamp(20px, 5vw, 44px);
	background: var(--hestia-paper, var(--hestia-paper));
	border-radius: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}
@media (min-width: 640px) {
	.hestia-dm-owner {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 36px;
	}
}

/* `width:100%` explícito acá (no en la foto/monograma de adentro
   directamente): en flexbox un porcentaje de ancho solo se resuelve bien
   contra el padre INMEDIATO — puesto en el nieto, sin este ancho definido
   en el medio, no tenía contra qué resolverse y no llenaba de verdad la
   columna. En desktop (media query de abajo) vuelve a `auto`: ahí la foto
   ya tiene su propio ancho fijo, no debe estirar toda la fila. */
.hestia-dm-owner__media { flex-shrink: 0; width: 100%; }
@media (min-width: 640px) {
	.hestia-dm-owner__media { width: auto; }
}

/* Rectangular vertical (retrato), no cuadrado — para que quepa una foto de
   cuerpo/medio cuerpo real sin verse forzada. El redondeado (20px) es a
   propósito MENOR que el de la tarjeta que lo envuelve (`.hestia-dm-owner`,
   26px): una esquina interior con más curva que la exterior que la
   contiene se ve "mal encajada" — la de adentro siempre va igual o más
   chica, nunca más grande.
   Ancho fluido (`100%` con un tope) en vez de un px fijo: con un ancho fijo
   angosto (180px) sobraba "aire" a los lados en la columna centrada de
   móvil, sobre todo en pantallas grandes de celular — con `100%` la foto
   usa todo el ancho disponible de la tarjeta hasta el tope, sin importar
   qué tan angosta o ancha sea esa columna. */
.hestia-dm-owner__photo {
	display: block;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 3 / 4;
	border-radius: 20px;
	object-fit: cover;
}

.hestia-dm-owner__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 3 / 4;
	border-radius: 20px;
	background: var(--hestia-rose, var(--hestia-rose));
	color: var(--dm-ink, var(--hestia-ink));
	font-family: var(--dm-serif);
	font-size: 52px;
	font-weight: 700;
}
@media (min-width: 640px) {
	.hestia-dm-owner__photo,
	.hestia-dm-owner__monogram { width: 230px; border-radius: 22px; }
	.hestia-dm-owner__monogram { font-size: 62px; }
}

.hestia-dm-owner__body { max-width: 620px; }

.hestia-dm-owner__name {
	margin: 0 0 2px;
	font-family: var(--dm-serif);
	font-size: clamp(22px, 3vw, 27px);
	font-weight: 700;
	color: var(--dm-ink);
}

.hestia-dm-owner__title {
	margin: 0 0 14px;
	font-family: var(--dm-sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dm-muted);
}

.hestia-dm-owner__bio {
	font-family: var(--dm-sans);
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--dm-ink);
}
.hestia-dm-owner__bio p { margin: 0 0 12px; }
.hestia-dm-owner__bio p:last-child { margin-bottom: 0; }
.hestia-dm-owner__bio p:first-of-type::before {
	content: "\201C";
	font-family: var(--dm-serif);
	font-size: 1.6em;
	line-height: 0;
	vertical-align: -0.32em;
	margin-right: 2px;
	color: var(--hestia-rose, var(--hestia-rose));
}

/* ----------------------------------------------------------- Secciones */

.hestia-dm-section {
	--dm-section-pad-x: 20px;
	--dm-section-pad-y: clamp(52px, 7vw, 96px);
	position: relative;
	padding: var(--dm-section-pad-y) var(--dm-section-pad-x);
	background: transparent;
	scroll-margin-top: 72px;
}

.hestia-dm-section__inner {
	max-width: var(--dm-maxw);
	margin: 0 auto;
	position: relative;
}

.hestia-dm-section__head { margin-bottom: clamp(26px, 4vw, 44px); }

.hestia-dm-section__title {
	font-family: var(--dm-serif);
	font-size: clamp(34px, 6.5vw, 68px);
	line-height: 1;
	margin: 0;
	font-weight: 700;
	color: var(--dm-title, var(--dm-ink));
}

.hestia-dm-section__intro {
	margin-top: 10px;
	max-width: 560px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--dm-muted);
}

.hestia-dm-section__illustration {
	display: block;
	width: var(--dm-ill-size, 380px);
	max-width: 100%;
	height: auto;
	margin: clamp(30px, 5vw, 56px) auto 0;
	pointer-events: none;
}
.hestia-dm-section--ill-top .hestia-dm-section__illustration { margin: 0 auto clamp(24px, 4vw, 44px); }

@media (min-width: 1000px) {
	.hestia-dm-section--ill-left .hestia-dm-section__illustration,
	.hestia-dm-section--ill-right .hestia-dm-section__illustration {
		position: absolute;
		bottom: 0;
		margin: 0;
		z-index: 0;
		opacity: 0.95;
	}
	.hestia-dm-section--ill-left .hestia-dm-section__illustration { left: -6%; }
	.hestia-dm-section--ill-right .hestia-dm-section__illustration { right: -6%; }
	.hestia-dm-section--ill-left .hestia-dm-columns,
	.hestia-dm-section--ill-right .hestia-dm-columns { position: relative; z-index: 1; }
}

/* Columnas estilo carta impresa. Desde 800px (no 900): el iPhone Duo abierto
   en horizontal mide ~890px y los iPad en vertical 810–834px. */
.hestia-dm-columns { column-count: 1; column-gap: clamp(32px, 5vw, 64px); }
@media (min-width: 800px) {
	.hestia-dm-columns--2 { column-count: 2; }
}

.hestia-dm-cat {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block;
	width: 100%;
	margin-bottom: clamp(26px, 3.5vw, 42px);
}

.hestia-dm-cat__chip {
	display: block;
	font-family: var(--dm-serif);
	font-size: clamp(16px, 2.2vw, 21px);
	font-weight: 700;
	padding: 9px 20px;
	border-radius: 9px;
	margin: 0 0 16px;
	line-height: 1.3;
}

/* Nota de categoría (Hestia → Categorías → Nota de categoría): texto libre
   del restaurante entre el título de la categoría y su primer plato. Respeta
   los saltos de línea escritos a mano en el textarea del admin. */
.hestia-dm-cat__note {
	display: block;
	margin: -6px 0 16px;
	max-width: 62ch;
	font-family: var(--dm-sans);
	font-size: 12.5px;
	font-style: italic;
	line-height: 1.55;
	color: var(--dm-cat-note, var(--dm-muted));
	white-space: pre-line;
}

.hestia-dm-cat__list { display: flex; flex-direction: column; gap: 15px; }

/* Fila de plato — fondo crema propio siempre (no solo al pasar el mouse):
   sin esto, el texto quedaba directo sobre el fondo de la página/sección
   (puede ser cualquier color, incluso oscuro) y en algunos casos costaba
   leerlo. Mismo crema que ya se usa en otras partes (cintas de categoría,
   pestaña "Calificar"). */
.hestia-dm-dish {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	/* Hardcodeado a propósito, no `var(--hestia-cream-alt)`: esa variable ya
	   existe mapeada a otro crema (var(--hestia-cream-alt)) — este es específicamente el
	   mismo var(--hestia-cream-alt) de las cintas de categoría y la pestaña "Calificar". */
	background: var(--hestia-cream-alt);
	border-radius: 14px;
	padding: 12px 14px;
}

.hestia-dm-dish--clickable { cursor: pointer; }

.hestia-dm-dish__thumb {
	flex: 0 0 auto;
	width: 68px;
	height: 68px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.5);
}
.hestia-dm-dish__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hestia-dm-dish__body { flex: 1; min-width: 0; display: block; }

.hestia-dm-dish__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	justify-content: space-between;
}

.hestia-dm-dish__name {
	font-family: var(--dm-serif);
	font-size: clamp(15px, 1.9vw, 17.5px);
	font-weight: 700;
	line-height: 1.3;
}

.hestia-dm-dish__price {
	font-family: var(--dm-serif);
	font-size: clamp(14px, 1.8vw, 16.5px);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.hestia-dm-dish__desc {
	display: -webkit-box;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--dm-dish-desc, var(--dm-muted));
	max-width: 46ch;
	/* Fila compacta: se recorta a 2 líneas con puntos suspensivos; el texto
	   completo siempre está disponible en el popup de detalle del plato. */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 600px) {
	.hestia-dm-dish__thumb { width: 58px; height: 58px; }
	.hestia-dm-dish__desc { font-size: 12px; }
}

/* ---------------------------------------- Cuadrícula de tarjetas (2 col) */
/* Diseño por defecto de cada categoría: foto, nombre, descripción, precio
   y botón "Ver". Reproduce la tarjeta del Figma (185×258 en el mock móvil),
   pero de forma fluida en vez de a tamaño fijo. */

.hestia-dm-cardgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	min-width: 0;
	width: 100%;
	/* Reinicia el `text-align:center` que trae `.hestia-dm-featured` (para
	   centrar el título "Platos recomendados") — el texto de cada card sigue
	   alineado a la izquierda, como corresponde a una fila foto+texto. */
	text-align: left;
}
@media (min-width: 640px) {
	.hestia-dm-cardgrid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 20px; }
}

.hestia-dm-cardgrid__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hestia-paper, #fff);
	border: 1px solid var(--dm-card-border, var(--hestia-cream-alt));
	border-radius: 18px;
	padding: 8px 8px 14px;
	list-style: none;
}
.hestia-dm-cardgrid__item--clickable {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.hestia-dm-cardgrid__item--clickable:hover,
.hestia-dm-cardgrid__item--clickable:focus-visible {
	transform: translateY(-3px);
	outline: none;
}
.hestia-dm-cardgrid__item--clickable:focus-visible { outline: 2px solid var(--dm-ink); outline-offset: 2px; }

.hestia-dm-cardgrid__image {
	aspect-ratio: 179 / 153;
	border-radius: 15px;
	overflow: hidden;
	background: var(--hestia-cream-alt, var(--hestia-cream-alt));
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.hestia-dm-cardgrid__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hestia-dm-cardgrid__monogram {
	font-family: var(--dm-serif);
	font-size: clamp(20px, 6vw, 34px);
	font-weight: 700;
	color: color-mix(in srgb, var(--hestia-ink) 28%, transparent);
}

.hestia-dm-cardgrid__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.hestia-dm-cardgrid__name {
	font-family: var(--dm-sans);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--dm-ink);
	margin-top: 10px;
	line-height: 1.3;
	overflow-wrap: break-word;
}
.hestia-dm-cardgrid__desc {
	font-family: var(--dm-sans);
	font-size: 11px;
	line-height: 1.4;
	color: var(--dm-dish-desc, var(--dm-muted2, color-mix(in srgb, var(--hestia-ink-soft) 45%, var(--hestia-paper))));
	margin-top: 4px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hestia-dm-cardgrid__foot {
	margin-top: auto;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	flex-wrap: wrap;
}
.hestia-dm-cardgrid__price {
	font-family: var(--dm-sans);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--dm-ink);
	white-space: nowrap;
}
.hestia-dm-cardgrid__view {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--hestia-cream-alt, var(--hestia-cream-alt));
	color: var(--dm-ink);
	font-size: 10px;
	font-weight: 600;
	white-space: nowrap;
}
.hestia-dm-cardgrid__view .hestia-icon { width: 11px; height: 11px; }

/* Móvil angosto: si dos columnas no alcanzan a caber cómodas, la tarjeta se
   acuesta — foto a la izquierda, nombre/precio/botón "Ver" a la derecha —
   en vez de desbordar o quedar apretada. */
@media (max-width: 420px) {
	.hestia-dm-cardgrid { grid-template-columns: 1fr; gap: 12px; }
	.hestia-dm-cardgrid__item { flex-direction: row; align-items: flex-start; gap: 12px; padding: 8px; }
	.hestia-dm-cardgrid__image { width: 92px; height: 92px; aspect-ratio: 1 / 1; }
	.hestia-dm-cardgrid__name { margin-top: 0; }
	.hestia-dm-cardgrid__foot { margin-top: 8px; padding-top: 0; }
}

/* Recomendados: siempre en fila (foto a la izquierda, texto a la derecha),
   en una sola columna, a cualquier ancho — como la lista de recomendados de
   Botero's, no una grilla de tarjetas. */
.hestia-dm-cardgrid--featured {
	grid-template-columns: 1fr !important;
	gap: 14px;
}
.hestia-dm-cardgrid--featured .hestia-dm-cardgrid__item {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 10px;
}
.hestia-dm-cardgrid--featured .hestia-dm-cardgrid__image {
	width: 84px;
	height: 84px;
	aspect-ratio: 1 / 1;
}
/* Todas las cards de recomendados miden lo mismo, tengan o no descripción:
   el nombre se trunca a una sola línea (con "…" si no cabe) y la descripción
   siempre reserva el alto de 2 líneas — con texto o vacía (ver el parámetro
   `$reserve_desc_space` en `digital_menu_dish_card()`), nunca se encoge. */
.hestia-dm-cardgrid--featured .hestia-dm-cardgrid__name {
	margin-top: 0;
	font-size: 15.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hestia-dm-cardgrid--featured .hestia-dm-cardgrid__desc {
	-webkit-line-clamp: 2;
	min-height: 2.8em; /* 11px × line-height 1.4 × 2 líneas */
}
.hestia-dm-cardgrid--featured .hestia-dm-cardgrid__foot { margin-top: 6px; padding-top: 0; }
/* Sin borde a propósito (pedido de la clienta) — una sombra suave basta para
   despegar la card del fondo, en vez de un contorno marcado. */
.hestia-dm-cardgrid--featured .hestia-dm-cardgrid__item {
	border: none;
}

/* ------------------------------------------- Galería (vista de discos) */
/* Vista alternativa a la lista de filas: cada plato es un disco con foto,
   pensada para una carta dedicada (ej. Tortas) donde el cliente quiere ver
   de un vistazo todas las opciones antes de abrir una y elegir su tamaño. */

.hestia-dm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: clamp(20px, 3vw, 32px) 16px;
}

.hestia-dm-gallery__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	font-family: var(--dm-sans);
	color: var(--dm-ink);
	-webkit-tap-highlight-color: transparent;
}

.hestia-dm-gallery__plate {
	width: clamp(120px, 15vw, 168px);
	height: clamp(120px, 15vw, 168px);
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 40%, #ffffff 0%, color-mix(in srgb, var(--hestia-cream-alt) 70%, #fff) 78%, color-mix(in srgb, var(--hestia-rose) 20%, var(--hestia-paper)) 100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.hestia-dm-gallery__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sin foto todavía: iniciales en vez de un disco vacío, para que se vea a
   propósito ("falta la foto") y no como algo roto. */
.hestia-dm-gallery__plate--empty {
	background: radial-gradient(circle at 50% 40%, var(--hestia-cream-alt) 0%, color-mix(in srgb, var(--hestia-rose) 25%, var(--hestia-cream)) 78%, color-mix(in srgb, var(--hestia-rose) 40%, var(--hestia-paper)) 100%);
}
.hestia-dm-gallery__monogram {
	font-family: var(--dm-serif);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: color-mix(in srgb, var(--hestia-ink) 32%, transparent);
	letter-spacing: 0.02em;
}

.hestia-dm-gallery__item:hover .hestia-dm-gallery__plate,
.hestia-dm-gallery__item:focus-visible .hestia-dm-gallery__plate {
	transform: translateY(-4px) scale(1.03);
}

.hestia-dm-gallery__name {
	font-family: var(--dm-serif);
	font-size: clamp(14.5px, 1.7vw, 16.5px);
	font-weight: 700;
	line-height: 1.25;
	margin-top: 2px;
}

.hestia-dm-gallery__price {
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: 13.5px;
	opacity: 0.85;
}

.hestia-dm-gallery__item:focus-visible {
	outline: 2px solid var(--dm-ink);
	outline-offset: 4px;
	border-radius: 16px;
}

@media (max-width: 600px) {
	.hestia-dm-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* --------------------------------------------------- Barra secundaria */
/* Accesos rápidos (pestañas con icono) + selector "Saltar a categoría",
   ambos opcionales. No es fija: se desplaza con el contenido. */

.hestia-dm-quickbar {
	max-width: var(--dm-maxw);
	margin: 0 auto;
	padding: 16px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Cards de categoría: a todo el ancho de verdad (como Botero's), no solo del
   "hueco" que deja el padding de la barra — se cancela también el padding
   propio y el que meta la página/Elementor alrededor del widget. El botón
   "Ver carta completa" no entra aquí a propósito: sigue centrado como botón,
   no como card. */
.hestia-dm-quickbar:has(.hestia-dm-cartacards) {
	margin-left: auto;
	margin-right: auto;
}

.hestia-dm-quicklinks { display: flex; gap: 12px; flex-wrap: wrap; }

.hestia-dm-quicklink {
	flex: 1 1 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	border: 1.5px solid var(--dm-ink);
	border-radius: 14px;
	font-family: var(--dm-sans);
	font-weight: 600;
	font-size: 14px;
	color: var(--dm-ink) !important;
	text-decoration: none !important;
	transition: transform 0.2s ease;
}
/* Sin cambio de color al pasar el cursor, a propósito — solo un leve
   levantamiento (ver nota de `.hestia-dm-cartachip` sobre el hover del tema). */
.hestia-dm-quicklink:hover,
.hestia-dm-quicklink:focus,
.hestia-dm-quicklink:active {
	transform: translateY(-1px);
	color: var(--dm-ink) !important;
	background: transparent !important;
}
.hestia-dm-quicklink .hestia-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Botón "Horarios": un accesorio rápido más que despliega un panel con
   `<details>/<summary>` nativo — se abre/cierra solo, sin JS propio que
   inicializar ni estado que mantener. */
.hestia-dm-hours {
	position: relative;
	flex: 1 1 160px;
}
.hestia-dm-hours__toggle {
	width: 100%;
	list-style: none;
	cursor: pointer;
}
.hestia-dm-hours__toggle::-webkit-details-marker { display: none; }
.hestia-dm-hours__caret { transform: rotate(0deg); transition: transform 0.2s ease; }
.hestia-dm-hours[open] .hestia-dm-hours__caret { transform: rotate(180deg); }
.hestia-dm-hours__panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	min-width: 280px;
	background: var(--hestia-paper, var(--hestia-paper));
	border-radius: 18px;
	padding: 18px 20px;
	font-family: var(--dm-sans);
	font-size: 13px;
	line-height: 1.6;
	color: var(--dm-ink);
	text-align: left;
}
.hestia-dm-hours__panel p { margin: 0 0 10px; }
.hestia-dm-hours__panel p:last-child { margin-bottom: 0; }
.hestia-dm-hours__panel strong { color: var(--dm-ink); }
@media (max-width: 480px) {
	.hestia-dm-hours__panel { left: 0; right: 0; min-width: 0; }
}

/* Selector de cartas: fila compacta deslizable, un chip por carta, con el
   color e icono de esa carta. Con "Mostrar una carta a la vez" activo, JS la
   fija arriba de la pantalla (`.is-sticky`, `top` calculado según la altura
   real de la barra de navegación) y oculta el resto de las cartas — sin
   JavaScript, o con esa opción apagada, es una fila simple de accesos que no
   oculta nada. */

.hestia-dm-cartachips {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hestia-dm-cartachips::-webkit-scrollbar { display: none; }
.hestia-dm-cartachips.is-sticky {
	position: sticky;
	z-index: 30;
	background: none;
	padding: 12px 20px;
	margin: 0 -20px;
}

/* Los botones NO cambian de color al pasar el cursor a propósito (con
   `!important`: el tema/Elementor traen su propio color de hover para
   botones y enlaces, con más prioridad que esta hoja si no se fuerza).
   Solo se levantan un poco — el color activo lo da `.is-active`, no el hover. */
.hestia-dm-cartachip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border: none;
	border-radius: 999px;
	background: color-mix(in srgb, var(--chip-bg, var(--hestia-rose)) 22%, var(--hestia-paper, #fff)) !important;
	color: var(--dm-ink) !important;
	font-family: var(--dm-sans);
	font-weight: 600;
	font-size: 13.5px;
	white-space: nowrap;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s ease;
}
.hestia-dm-cartachip:hover,
.hestia-dm-cartachip:focus,
.hestia-dm-cartachip:active {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--chip-bg, var(--hestia-rose)) 22%, var(--hestia-paper, #fff)) !important;
	color: var(--dm-ink) !important;
}
.hestia-dm-cartachip.is-active,
.hestia-dm-cartachip.is-active:hover,
.hestia-dm-cartachip.is-active:focus {
	background: var(--chip-bg, var(--hestia-rose)) !important;
	color: var(--chip-text, var(--hestia-ink)) !important;
}
.hestia-dm-cartachip:focus-visible { outline: 2px solid var(--dm-ink); outline-offset: 2px; }
.hestia-dm-cartachip .hestia-icon { flex-shrink: 0; }

/* Selector de cartas en modo "cards": grilla de tarjetas anchas con la foto
   de portada de la carta (Hestia → Categorías y Cartas → Cartas → Imagen)
   y una cinta con el nombre y, si la carta tiene horario configurado, el
   horario debajo. Pantalla de entrada tipo Botero's, no barra pegajosa —
   por eso neutraliza `.is-sticky` aunque "Mostrar una carta a la vez" esté
   activo (esa clase la agrega el mismo JS que usan los chips). */
.hestia-dm-cartacards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	padding: 2px 2px 6px;
}
@media (min-width: 640px) {
	.hestia-dm-cartacards { grid-template-columns: repeat(2, 1fr); }
}
.hestia-dm-cartacards.is-sticky { position: static; top: auto; margin: 0; padding: 2px 2px 6px; }

.hestia-dm-cartacard {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 150px;
	border: none;
	border-radius: 18px;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	background-color: var(--card-bg, var(--hestia-rose));
	background-image: var(--card-img, none);
	background-size: cover;
	background-position: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}
.hestia-dm-cartacard::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--hestia-ink) 0%, transparent) 45%, color-mix(in srgb, var(--hestia-ink) 50%, transparent) 100%);
	pointer-events: none;
}
.hestia-dm-cartacard--no-image::before { background: color-mix(in srgb, var(--hestia-ink) 10%, transparent); }

/* Igual que `.hestia-dm-cartachip`: sin cambio de color al pasar el cursor a
   propósito, con `!important` porque el tema trae su propio color de hover
   con más prioridad que esta hoja si no se fuerza. */
.hestia-dm-cartacard:hover,
.hestia-dm-cartacard:focus {
	transform: translateY(-3px);
	background-color: var(--card-bg, var(--hestia-rose)) !important;
}
.hestia-dm-cartacard:active { transform: scale(0.98); }
.hestia-dm-cartacard:focus-visible { outline: 2px solid var(--hestia-paper); outline-offset: 3px; }

/* Etiqueta sobre la foto, centrada en el medio de la card — mismo ancho y
   alto en las 7, tengan o no horario, para que se vean consistentes entre
   sí. Recorte con la forma de "cinta" ondulada (no un pill ni una cresta
   puntiaguda) vía `mask-image`; `border-radius` de abajo es solo el
   respaldo por si el navegador no soporta máscaras CSS.
   Fondo e ink fijos (crema + marrón) a propósito, sin importar el color de
   la carta (`--ribbon-bg`/`--ribbon-text`, todavía calculados e impresos
   en línea por si algo más los llegara a necesitar): antes cada cinta
   tomaba el color propio de su carta, ahora las 7 se ven iguales — pedido
   explícito, la variedad de color de cada carta se sigue viendo en la
   franja "‹ Volver" al abrirla (`.hestia-dm-section__topbar`), que no toca
   esta regla. */
.hestia-dm-cartacard__ribbon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	max-width: 86%;
	height: 86px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 8px 22px;
	border-radius: 40px;
	background: var(--hestia-cream-alt) !important;
	color: var(--hestia-ink) !important;
	box-shadow: none;
	transition: transform 0.2s ease;
}
@supports ( mask-image: none ) or ( -webkit-mask-image: none ) {
	.hestia-dm-cartacard__ribbon {
		border-radius: 0;
		-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU5MyIgaGVpZ2h0PSI0NjIiIHZpZXdCb3g9IjAgMCAxNTkzIDQ2MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1NjEgMEMxNTY1LjQyIDAgMTU2OSAzLjU4MTcyIDE1NjkgOEMxNTY5IDE3LjQ0NjYgMTU3NS4wNSAyNy4yNTU3IDE1ODEuMDcgMzQuNTMyMUMxNTgxLjYxIDM1LjE4MTEgMTU4Mi4xNCAzNS44MTA5IDE1ODIuNjggMzYuNDA0M0MxNTg4LjcgNDMuMTA0MiAxNTkyLjM3IDUxLjk5NTQgMTU5Mi4zNyA2MS43NTJDMTU5Mi4zNyA3MS4yODUxIDE1ODguODcgNzkuOTkyNyAxNTgzLjA5IDg2LjYzNjdDMTU3OC43NyA5MS41OTkzIDE1NzUuMTUgOTcuNTAyMiAxNTc1LjE1IDEwNC4wNzlDMTU3NS4xNSAxMTAuNjU2IDE1NzguNzcgMTE2LjU1OSAxNTgzLjA5IDEyMS41MjFDMTU4OC44NyAxMjguMTY2IDE1OTIuMzcgMTM2Ljg3NCAxNTkyLjM3IDE0Ni40MDhDMTU5Mi4zNyAxNTUuOTQxIDE1ODguODcgMTY0LjY0OSAxNTgzLjA5IDE3MS4yOTNDMTU3OC43NyAxNzYuMjU2IDE1NzUuMTUgMTgyLjE1OCAxNTc1LjE1IDE4OC43MzVDMTU3NS4xNSAxOTUuMzEyIDE1NzguNzcgMjAxLjIxNSAxNTgzLjA5IDIwNi4xNzhDMTU4OC44NyAyMTIuODIyIDE1OTIuMzcgMjIxLjUzMSAxNTkyLjM3IDIzMS4wNjRDMTU5Mi4zNyAyNDAuNjMzIDE1ODguODQgMjQ5LjM3IDE1ODMuMDIgMjU2LjAyM0MxNTc4LjczIDI2MC45MjkgMTU3NS4xNSAyNjYuNzc3IDE1NzUuMTUgMjczLjI5M0MxNTc1LjE1IDI3OS44MDkgMTU3OC43MyAyODUuNjU4IDE1ODMuMDIgMjkwLjU2M0MxNTg4Ljg0IDI5Ny4yMTcgMTU5Mi4zNyAzMDUuOTU1IDE1OTIuMzcgMzE1LjUyNEMxNTkyLjM3IDMyNS4wNTggMTU4OC44NyAzMzMuNzY1IDE1ODMuMDkgMzQwLjQwOUMxNTc4Ljc3IDM0NS4zNzIgMTU3NS4xNSAzNTEuMjc1IDE1NzUuMTUgMzU3Ljg1MkMxNTc1LjE1IDM2NC40MjkgMTU3OC43NyAzNzAuMzMxIDE1ODMuMDkgMzc1LjI5NEMxNTg4Ljg3IDM4MS45MzggMTU5Mi4zNyAzOTAuNjQ3IDE1OTIuMzcgNDAwLjE4MUMxNTkyLjM3IDQwOS44OTcgMTU4OC43MyA0MTguNzU0IDE1ODIuNzUgNDI1LjQ0M0MxNTgyLjE5IDQyNi4wNzUgMTU4MS42MiA0MjYuNzQ4IDE1ODEuMDUgNDI3LjQ0MkMxNTc1LjA2IDQzNC43NDkgMTU2OSA0NDQuNTUyIDE1NjkgNDU0QzE1NjkgNDU4LjQxOCAxNTY1LjQyIDQ2MiAxNTYxIDQ2MkgyOS45OTlDMjUuNTgwNyA0NjIgMjEuOTk5IDQ1OC40MTggMjEuOTk5IDQ1NEMyMS45OTkgNDQ0LjU0MSAxNS43ODYzIDQzNC43ODcgMTAuNDM4MyA0MjYuOTg0QzkuNTE4MDEgNDI1LjY0MiA4LjYyMDcyIDQyNC4zMjkgNy43MjE2OCA0MjMuMTQ3QzIuODc4OTQgNDE2Ljc4NSAwLjAwMDIxNjg1OCA0MDguODIyIDAgNDAwLjE4MUMzLjI5MDg0ZS0wNSAzOTEuNTcyIDIuODU2MjQgMzgzLjYzNyA3LjY2NTA0IDM3Ny4yODZDMTIuMDA5OSAzNzEuNTQ4IDE1Ljg2MDMgMzY1LjA0OSAxNS44NjA0IDM1Ny44NTJDMTUuODYwNCAzNTAuNjU0IDEyLjAwOTkgMzQ0LjE1NSA3LjY2NTA0IDMzOC40MTdDMi44NTY0NyAzMzIuMDY3IDAuMDAwMjE2MDEzIDMyNC4xMzIgMCAzMTUuNTI0QzYuMzU0NDllLTA1IDMwNi44ODEgMi44Nzk5OSAyOTguOTE1IDcuNzI0NjEgMjkyLjU1MkMxMi4wNDcgMjg2Ljg3NCAxNS44NjA0IDI4MC40MjkgMTUuODYwNCAyNzMuMjkzQzE1Ljg2MDIgMjY2LjE1NyAxMi4wNDcgMjU5LjcxMyA3LjcyNDYxIDI1NC4wMzVDMi44ODAxOSAyNDcuNjcyIDAuMDAwMjc1MzYxIDIzOS43MDggMCAyMzEuMDY0QzAgMjIyLjQ1NiAyLjg1NjI0IDIxNC41MjEgNy42NjUwNCAyMDguMTdDMTIuMDA5OSAyMDIuNDMyIDE1Ljg2MDMgMTk1LjkzMyAxNS44NjA0IDE4OC43MzVDMTUuODYwNCAxODEuNTM4IDEyLjAwOTkgMTc1LjAzOSA3LjY2NTA0IDE2OS4zMDFDMi44NTY0OCAxNjIuOTUxIDAuMDAwMjQzODU4IDE1NS4wMTYgMCAxNDYuNDA4QzAgMTM3LjggMi44NTYyMyAxMjkuODY0IDcuNjY1MDQgMTIzLjUxNEMxMi4wMDk5IDExNy43NzYgMTUuODYwMyAxMTEuMjc2IDE1Ljg2MDQgMTA0LjA3OUMxNS44NjA0IDk2Ljg4MTkgMTIuMDA5OSA5MC4zODIzIDcuNjY1MDQgODQuNjQ0NUMyLjg1NjQ3IDc4LjI5NDQgMC4wMDAyMTYwMTMgNzAuMzYgMCA2MS43NTJDMS4yNzUyNWUtMDUgNTMuMDc4NSAyLjg5OTcxIDQ1LjA4ODIgNy43NzQ0MSAzOC43MTM5QzguNjUxMiAzNy41NjczIDkuNTI2NjggMzYuMjk2OCAxMC40MjM3IDM0Ljk5NjVDMTUuNzk0MiAyNy4yMTE1IDIxLjk5OSAxNy40NTc3IDIxLjk5OSA4QzIxLjk5OSAzLjU4MTczIDI1LjU4MDcgMS4zMTYyZS0wNyAyOS45OTkgMEgxNTYxWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L3N2Zz4K");
		mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTU5MyIgaGVpZ2h0PSI0NjIiIHZpZXdCb3g9IjAgMCAxNTkzIDQ2MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1NjEgMEMxNTY1LjQyIDAgMTU2OSAzLjU4MTcyIDE1NjkgOEMxNTY5IDE3LjQ0NjYgMTU3NS4wNSAyNy4yNTU3IDE1ODEuMDcgMzQuNTMyMUMxNTgxLjYxIDM1LjE4MTEgMTU4Mi4xNCAzNS44MTA5IDE1ODIuNjggMzYuNDA0M0MxNTg4LjcgNDMuMTA0MiAxNTkyLjM3IDUxLjk5NTQgMTU5Mi4zNyA2MS43NTJDMTU5Mi4zNyA3MS4yODUxIDE1ODguODcgNzkuOTkyNyAxNTgzLjA5IDg2LjYzNjdDMTU3OC43NyA5MS41OTkzIDE1NzUuMTUgOTcuNTAyMiAxNTc1LjE1IDEwNC4wNzlDMTU3NS4xNSAxMTAuNjU2IDE1NzguNzcgMTE2LjU1OSAxNTgzLjA5IDEyMS41MjFDMTU4OC44NyAxMjguMTY2IDE1OTIuMzcgMTM2Ljg3NCAxNTkyLjM3IDE0Ni40MDhDMTU5Mi4zNyAxNTUuOTQxIDE1ODguODcgMTY0LjY0OSAxNTgzLjA5IDE3MS4yOTNDMTU3OC43NyAxNzYuMjU2IDE1NzUuMTUgMTgyLjE1OCAxNTc1LjE1IDE4OC43MzVDMTU3NS4xNSAxOTUuMzEyIDE1NzguNzcgMjAxLjIxNSAxNTgzLjA5IDIwNi4xNzhDMTU4OC44NyAyMTIuODIyIDE1OTIuMzcgMjIxLjUzMSAxNTkyLjM3IDIzMS4wNjRDMTU5Mi4zNyAyNDAuNjMzIDE1ODguODQgMjQ5LjM3IDE1ODMuMDIgMjU2LjAyM0MxNTc4LjczIDI2MC45MjkgMTU3NS4xNSAyNjYuNzc3IDE1NzUuMTUgMjczLjI5M0MxNTc1LjE1IDI3OS44MDkgMTU3OC43MyAyODUuNjU4IDE1ODMuMDIgMjkwLjU2M0MxNTg4Ljg0IDI5Ny4yMTcgMTU5Mi4zNyAzMDUuOTU1IDE1OTIuMzcgMzE1LjUyNEMxNTkyLjM3IDMyNS4wNTggMTU4OC44NyAzMzMuNzY1IDE1ODMuMDkgMzQwLjQwOUMxNTc4Ljc3IDM0NS4zNzIgMTU3NS4xNSAzNTEuMjc1IDE1NzUuMTUgMzU3Ljg1MkMxNTc1LjE1IDM2NC40MjkgMTU3OC43NyAzNzAuMzMxIDE1ODMuMDkgMzc1LjI5NEMxNTg4Ljg3IDM4MS45MzggMTU5Mi4zNyAzOTAuNjQ3IDE1OTIuMzcgNDAwLjE4MUMxNTkyLjM3IDQwOS44OTcgMTU4OC43MyA0MTguNzU0IDE1ODIuNzUgNDI1LjQ0M0MxNTgyLjE5IDQyNi4wNzUgMTU4MS42MiA0MjYuNzQ4IDE1ODEuMDUgNDI3LjQ0MkMxNTc1LjA2IDQzNC43NDkgMTU2OSA0NDQuNTUyIDE1NjkgNDU0QzE1NjkgNDU4LjQxOCAxNTY1LjQyIDQ2MiAxNTYxIDQ2MkgyOS45OTlDMjUuNTgwNyA0NjIgMjEuOTk5IDQ1OC40MTggMjEuOTk5IDQ1NEMyMS45OTkgNDQ0LjU0MSAxNS43ODYzIDQzNC43ODcgMTAuNDM4MyA0MjYuOTg0QzkuNTE4MDEgNDI1LjY0MiA4LjYyMDcyIDQyNC4zMjkgNy43MjE2OCA0MjMuMTQ3QzIuODc4OTQgNDE2Ljc4NSAwLjAwMDIxNjg1OCA0MDguODIyIDAgNDAwLjE4MUMzLjI5MDg0ZS0wNSAzOTEuNTcyIDIuODU2MjQgMzgzLjYzNyA3LjY2NTA0IDM3Ny4yODZDMTIuMDA5OSAzNzEuNTQ4IDE1Ljg2MDMgMzY1LjA0OSAxNS44NjA0IDM1Ny44NTJDMTUuODYwNCAzNTAuNjU0IDEyLjAwOTkgMzQ0LjE1NSA3LjY2NTA0IDMzOC40MTdDMi44NTY0NyAzMzIuMDY3IDAuMDAwMjE2MDEzIDMyNC4xMzIgMCAzMTUuNTI0QzYuMzU0NDllLTA1IDMwNi44ODEgMi44Nzk5OSAyOTguOTE1IDcuNzI0NjEgMjkyLjU1MkMxMi4wNDcgMjg2Ljg3NCAxNS44NjA0IDI4MC40MjkgMTUuODYwNCAyNzMuMjkzQzE1Ljg2MDIgMjY2LjE1NyAxMi4wNDcgMjU5LjcxMyA3LjcyNDYxIDI1NC4wMzVDMi44ODAxOSAyNDcuNjcyIDAuMDAwMjc1MzYxIDIzOS43MDggMCAyMzEuMDY0QzAgMjIyLjQ1NiAyLjg1NjI0IDIxNC41MjEgNy42NjUwNCAyMDguMTdDMTIuMDA5OSAyMDIuNDMyIDE1Ljg2MDMgMTk1LjkzMyAxNS44NjA0IDE4OC43MzVDMTUuODYwNCAxODEuNTM4IDEyLjAwOTkgMTc1LjAzOSA3LjY2NTA0IDE2OS4zMDFDMi44NTY0OCAxNjIuOTUxIDAuMDAwMjQzODU4IDE1NS4wMTYgMCAxNDYuNDA4QzAgMTM3LjggMi44NTYyMyAxMjkuODY0IDcuNjY1MDQgMTIzLjUxNEMxMi4wMDk5IDExNy43NzYgMTUuODYwMyAxMTEuMjc2IDE1Ljg2MDQgMTA0LjA3OUMxNS44NjA0IDk2Ljg4MTkgMTIuMDA5OSA5MC4zODIzIDcuNjY1MDQgODQuNjQ0NUMyLjg1NjQ3IDc4LjI5NDQgMC4wMDAyMTYwMTMgNzAuMzYgMCA2MS43NTJDMS4yNzUyNWUtMDUgNTMuMDc4NSAyLjg5OTcxIDQ1LjA4ODIgNy43NzQ0MSAzOC43MTM5QzguNjUxMiAzNy41NjczIDkuNTI2NjggMzYuMjk2OCAxMC40MjM3IDM0Ljk5NjVDMTUuNzk0MiAyNy4yMTE1IDIxLjk5OSAxNy40NTc3IDIxLjk5OSA4QzIxLjk5OSAzLjU4MTczIDI1LjU4MDcgMS4zMTYyZS0wNyAyOS45OTkgMEgxNTYxWiIgZmlsbD0iI0Q5RDlEOSIvPgo8L3N2Zz4K");
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
	}
}
.hestia-dm-cartacard:active .hestia-dm-cartacard__ribbon { transform: translate(-50%, -50%) scale(0.97); }
.hestia-dm-cartacard__name {
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.hestia-dm-cartacard__schedule {
	font-family: var(--dm-sans);
	font-weight: 500;
	font-size: 12.5px;
	opacity: 0.85;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Con "Mostrar una carta a la vez" activo (JS agrega esta clase solo si
   logró inicializar todo, para nunca dejar el menú en blanco si algo falla),
   se oculta todo menos la carta elegida. */
.hestia-dm--single-carta .hestia-dm-sections > .hestia-dm-section {
	display: none;
}
.hestia-dm--single-carta .hestia-dm-sections > .hestia-dm-section.is-active-carta {
	display: block;
}

/* Modo "Cards" (Botero's/Cluvi): Inicio (recomendados + cards) o una carta
   abierta a pantalla completa con botón de volver — nunca los dos a la vez,
   nunca a media página. `initDmCardaHome` agrega/quita esta clase en el JS. */
.hestia-dm--carta-open .hestia-dm-featured,
.hestia-dm--carta-open .hestia-dm-owner,
.hestia-dm--carta-open .hestia-dm-cartacards,
.hestia-dm--carta-open .hestia-dm-viewall {
	display: none;
}
/* "Ver carta completa": todas las cartas se muestran seguidas, no solo la
   activa — pisa el ocultamiento de `.hestia-dm--single-carta` a propósito. */
.hestia-dm--all-cartas .hestia-dm-sections > .hestia-dm-section {
	display: block !important;
}

.hestia-dm-viewall {
	display: flex;
	width: 100%;
	max-width: 360px;
	margin: 24px auto 0;
	justify-content: center;
	text-align: center;
	/* Sin esto, el tema (Hello Elementor `reset.css`) le mete su borde rosa/rojo
	   de marca (#c36) a TODO `button`, sin que ninguna regla nuestra lo pidiera. */
	border: none;
}

/* Franja de color estilo Botero's/Cluvi: fondo con el color de la carta,
   botón de volver y título de la categoría en la misma barra. Vive dentro de
   cada `.hestia-dm-section`, así que solo se ve cuando esa carta está activa
   (la visibilidad la controla `.hestia-dm--single-carta` más arriba). */
.hestia-dm-section__topbar {
	background-color: var(--topbar-bg, var(--dm-ink));
	color: var(--topbar-text, #fff);
	padding: clamp(14px, 3vw, 20px) calc(var(--dm-section-pad-x, 20px) + var(--dm-outer-gutter, 0px));
	margin: calc(-1 * var(--dm-section-pad-y, 52px)) calc(-1 * (var(--dm-section-pad-x, 20px) + var(--dm-outer-gutter, 0px))) clamp(26px, 4vw, 44px);
	/* Pegada justo debajo del header del sitio (que sí es fijo) — así se
	   puede volver al inicio de la carta sin tener que subir del todo, sin
	   que el header tape esta franja ni al revés. `--dm-header-height` lo
	   mide `public.js` en vivo (ver `syncHeaderHeight`), no es un valor fijo. */
	position: sticky;
	top: var(--dm-header-height, 0px);
	z-index: 25;
}
.hestia-dm-section__topbar-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: var(--dm-maxw);
	margin: 0 auto;
}
.hestia-dm-section__topbar-title {
	margin: 0;
	color: inherit;
	font-family: var(--dm-serif);
	font-weight: 700;
	font-size: clamp(20px, 4vw, 26px);
	line-height: 1.2;
}

.hestia-dm-back {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.2s ease;
}
.hestia-dm-back:hover,
.hestia-dm-back:focus {
	background-color: rgba(255, 255, 255, 0.32) !important;
	color: inherit !important;
	outline: none;
}
.hestia-dm-back__icon { transform: rotate(-90deg); transition: transform 0.2s ease; }
.hestia-dm-back:hover .hestia-dm-back__icon,
.hestia-dm-back:focus .hestia-dm-back__icon {
	transform: rotate(-90deg) translateX(-3px);
}

/* --------------------------------------------------------------- Lightbox */

.hestia-dm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(20, 25, 45, 0.86);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.hestia-dm-lightbox[hidden] { display: none; }

.hestia-dm-lightbox__inner {
	background: var(--hestia-cream-alt);
	border-radius: 16px;
	overflow: hidden;
	max-width: 520px;
	width: 100%;
	margin: 0;
}
.hestia-dm-lightbox__media { position: relative; }
.hestia-dm-lightbox__image { width: 100%; height: auto; max-height: 62vh; object-fit: cover; display: block; background: var(--hestia-cream-alt, var(--hestia-cream-alt)); }
.hestia-dm-lightbox__caption { display: block; padding: 20px 24px 24px; }
.hestia-dm-lightbox__title { font-family: var(--dm-serif); font-size: 22px; font-weight: 700; display: block; }
.hestia-dm-lightbox__price { font-family: var(--dm-serif); font-size: 17px; font-weight: 700; display: block; margin-top: 4px; }
.hestia-dm-lightbox__price[hidden] { display: none; }
.hestia-dm-lightbox__desc { font-size: 14px; line-height: 1.6; color: var(--dm-muted2, var(--dm-muted)); margin: 10px 0 0; }
.hestia-dm-lightbox__desc:empty { display: none; }
.hestia-dm-lightbox__image[hidden] { display: none; }
.hestia-dm-lightbox__tags,
.hestia-dm-lightbox__allergens,
.hestia-dm-lightbox__extra { display: block; font-size: 12.5px; margin-top: 10px; }
.hestia-dm-lightbox__tags { color: var(--dm-ink); font-weight: 600; }
.hestia-dm-lightbox__allergens { color: var(--hestia-cherry, var(--hestia-cherry)); }
.hestia-dm-lightbox__extra { color: var(--dm-muted); }
.hestia-dm-lightbox__tags[hidden],
.hestia-dm-lightbox__allergens[hidden],
.hestia-dm-lightbox__extra[hidden] { display: none; }

.hestia-dm-lightbox__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--hestia-paper, var(--hestia-paper));
	color: var(--hestia-ink, var(--hestia-ink));
	cursor: pointer;
}
.hestia-dm-lightbox__close:hover,
.hestia-dm-lightbox__close:focus {
	background: var(--hestia-paper, var(--hestia-paper)) !important;
	color: var(--hestia-cherry, var(--hestia-cherry)) !important;
}
.hestia-dm-lightbox__close .hestia-icon { width: 16px; height: 16px; }

/* ------------------------------------------------------- Botón flotante */

.hestia-dm-fab {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 45;
	display: none;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--dm-cta);
	color: var(--dm-cta-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.hestia-dm-fab:hover,
.hestia-dm-fab:focus,
.hestia-dm-fab:active {
	background: var(--dm-cta) !important;
	color: var(--dm-cta-text) !important;
}
@media (max-width: 860px) {
	.hestia-dm-fab { display: block; }
}

/* ----------------------------------------------------------- Footer */

.hestia-dm-footer {
	background: var(--dm-footer-bg, var(--dm-ink));
	color: var(--dm-footer-color, var(--hestia-cream-alt));
	padding: 26px 20px;
}
.hestia-dm-footer__inner { max-width: var(--dm-maxw); margin: 0 auto; text-align: center; }
.hestia-dm-footer__text { margin: 0; font-size: 13px; letter-spacing: 0.04em; line-height: 1.7; }
.hestia-dm-footer__text a { color: inherit; text-decoration: underline; }

/* ----------------------------------------------------- Accesibilidad */

@media (prefers-reduced-motion: reduce) {
	.hestia-dm-hero__flowers,
	.hestia-dm-hero__character { transform: none !important; }
	.hestia-dm *,
	.hestia-dm *::before,
	.hestia-dm *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.hestia-dm-nav__links,
	.hestia-dm-featured__track { scroll-behavior: auto; }
}

@media print {
	.hestia-dm-nav, .hestia-dm-fab, .hestia-dm-rail__nav, .hestia-dm-lightbox { display: none !important; }
	.hestia-dm-section { background: none !important; padding: 20px 0; }
	.hestia-dm-columns--2 { column-count: 2; }
}

/* ==========================================================================
   Capa premium: intro "puerta", fondo continuo, reveals y microinteracciones.
   Se declara al final para ganar la cascada sobre los estilos base.
   ========================================================================== */

.hestia-dm { isolation: isolate; }

/* El popup de plato (`.hestia-dm-lightbox`) vive dentro de `.hestia-dm`, que
   aísla su propio stacking context. Eso significa que su z-index nunca gana
   de verdad contra la barra inferior fija (`.hestia-bn-root`), que es OTRO
   widget fuera de ese aislamiento — sin esto, la barra y el cajón de
   calificar quedaban visibles y clickeables encima del popup. Se oculta la
   barra inferior mientras el popup está abierto (clase que pone/quita
   `initDmLightbox` en `public.js`). */
body.hestia-dm-lightbox-open .hestia-bn-root {
	display: none;
}

/* Ancho completo: rompe el contenedor del tema para pegarse a los bordes
   del viewport (activable desde el widget, pensado para el hero). */
.hestia-dm--bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Capa de fondo continuo: JS interpola el color entre secciones al hacer scroll.
   Sin JS la capa queda invisible y cada sección conserva su degradado propio. */
.hestia-dm-bgflow {
	/* Absoluta, no fija: la capa queda contenida dentro de SU widget y nunca
	   pinta el resto de la página (hero hecho a mano, header u otros bloques). */
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: transparent;
	transition: background-color 0.25s linear;
}
.hestia-dm--flowbg .hestia-dm-hero,
.hestia-dm--flowbg .hestia-dm-featured,
.hestia-dm--flowbg .hestia-dm-section { background: transparent; }

/* ------------------------------------------------------- Intro "la puerta" */
/* Coreografía de keyframes puros: el marco (la puerta) se abre primero, las
   flores brotan desde los bordes, el logo se asienta, y solo después entran
   personaje, textos y botones. Sin JS también funciona. */

.hestia-dm--intro .hestia-dm-hero__frame {
	animation: hestiaDmDoor 1.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hestiaDmDoor {
	from { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.hestia-dm--intro .hestia-dm-hero__flowers--left {
	animation: hestiaDmBloomL 1.1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hestiaDmBloomL {
	from { opacity: 0; transform: translate(-46px, -30px) rotate(-4deg); }
	to   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

.hestia-dm--intro .hestia-dm-hero__flowers--right {
	animation: hestiaDmBloomR 1.1s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hestiaDmBloomR {
	from { opacity: 0; transform: translate(46px, -30px) rotate(4deg) scaleX(-1); }
	to   { opacity: 1; transform: translate(0, 0) rotate(0deg) scaleX(-1); }
}

.hestia-dm--intro .hestia-dm-hero__title {
	animation: hestiaDmSettle 0.95s 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hestiaDmSettle {
	from { opacity: 0; transform: translateY(22px) scale(1.04); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* El personaje cruza la puerta al final, seguido por los textos y botones. */
.hestia-dm--intro .hestia-dm-hero__character {
	animation: hestiaDmRise 1.05s 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hestiaDmRise {
	from { opacity: 0; transform: translateY(48px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hestia-dm--intro .hestia-dm-hero__eyebrow,
.hestia-dm--intro .hestia-dm-hero__subtitle {
	animation: hestiaDmFade 0.8s 1.2s ease both;
}
.hestia-dm--intro .hestia-dm-hero__actions {
	animation: hestiaDmFade 0.8s 1.38s ease both;
}
@keyframes hestiaDmFade {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------ Aparición al hacer scroll */
/* El estado oculto sólo se aplica cuando JS está activo (clase --js): sin
   JavaScript todo el contenido es visible desde el primer render. */

.hestia-dm--js:not(.hestia-dm--no-reveal) [data-dm-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--dm-d, 0ms);
}
.hestia-dm--js:not(.hestia-dm--no-reveal) [data-dm-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ---------------------------------------------------- Microinteracciones */

/* Sin efecto de hover en los platos a propósito (pedido de la clienta) —
   el fondo crema de `.hestia-dm-dish` ya es fijo, no hace falta un cambio
   al pasar el mouse para distinguirlo del resto. El foco por teclado sigue
   señalado por el anillo genérico de accesibilidad (ver más abajo,
   `.hestia-dm [role="button"]:focus-visible`), que es aparte de esto. */

.hestia-dm-btn:active,
.hestia-dm-nav__cta:active,
.hestia-dm-fab:active { transform: translateY(0) scale(0.97); }

.hestia-dm-nav__links a { transition: opacity 0.25s ease, background-color 0.25s ease, transform 0.25s ease; }
.hestia-dm-nav__links a:hover { transform: translateY(-1px); }

.hestia-dm-cat__chip { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.hestia-dm-cat:hover .hestia-dm-cat__chip { transform: translateX(3px); }

/* Accesibilidad: anillo de foco visible y consistente en todo el widget. */
.hestia-dm a:focus-visible,
.hestia-dm button:focus-visible,
.hestia-dm [role="button"]:focus-visible {
	outline: 2px solid var(--dm-ink);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ------------------------------------------- Botón flotante con entrada */
/* Aparece deslizándose cuando el usuario supera el hero. */
@media (max-width: 860px) {
	.hestia-dm--js .hestia-dm-fab {
		opacity: 0;
		transform: translateY(76px);
		pointer-events: none;
		transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.hestia-dm--js .hestia-dm-fab.is-visible {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* -------------------------------------------------- Popup rediseñado */

.hestia-dm-lightbox {
	opacity: 0;
	transition: opacity 0.32s ease;
	background: rgba(16, 20, 38, 0.78);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.hestia-dm-lightbox.is-open { opacity: 1; }

.hestia-dm-lightbox__inner {
	max-width: 540px;
	border-radius: 28px;
	transform: translateY(16px) scale(0.965);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.hestia-dm-lightbox.is-open .hestia-dm-lightbox__inner { transform: none; }

.hestia-dm-lightbox__image { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; max-height: 46vh; }

.hestia-dm-lightbox__caption { padding: 24px 28px 28px; }
.hestia-dm-lightbox__title { font-size: 25px; line-height: 1.15; }
.hestia-dm-lightbox__price { font-size: 18px; margin-top: 6px; opacity: 0.85; }
.hestia-dm-lightbox__desc { font-size: 14.5px; margin-top: 12px; }

/* Selector de variantes: una fila-píldora por tamaño, con un círculo numerado
   que escala según el número — el mismo lenguaje del popup de tortas del Figma. */
.hestia-dm-lightbox__variants {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
	max-height: 44vh;
	overflow-y: auto;
	padding: 2px 2px 4px;
	/* Se corta con un desvanecido en vez de un borde duro, para dar la pista
	   de que la lista sigue si hay más tamaños. */
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
.hestia-dm-lightbox__variants[hidden] { display: none; }

.hestia-dm-variant {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	background: var(--hestia-cream-alt, var(--hestia-cream-alt));
	border: none;
	border-radius: 999px;
	padding: 8px 18px 8px 8px;
	cursor: pointer;
	font-family: var(--dm-sans);
	color: var(--dm-ink);
	text-align: left;
	-webkit-tap-highlight-color: transparent;
	transition: box-shadow 0.25s ease;
}
.hestia-dm-variant__badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, var(--hestia-ink-soft) 0%, var(--hestia-ink) 62%, color-mix(in srgb, var(--hestia-ink) 60%, #000) 100%);
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow 0.25s ease;
}
.hestia-dm-variant__num {
	font-family: var(--dm-sans);
	font-weight: 600;
	font-size: 22px;
	color: var(--hestia-cream-alt, var(--hestia-cream-alt));
}
.hestia-dm-variant__body { flex: 1; min-width: 0; }
.hestia-dm-variant__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}
.hestia-dm-variant__label { font-size: 15px; font-weight: 600; }
.hestia-dm-variant__sub { font-size: 11px; opacity: 0.62; }
.hestia-dm-variant__price { display: block; font-weight: 700; font-size: 15px; margin-top: 2px; }

.hestia-dm-variant.is-active { box-shadow: 0 0 0 2px var(--hestia-cherry, var(--hestia-cherry)) inset; }
.hestia-dm-variant.is-active .hestia-dm-variant__badge { box-shadow: inset 0 0 0 2px var(--hestia-cream-alt, var(--hestia-cream-alt)); }
.hestia-dm-variant:focus-visible {
	outline: 2px solid var(--dm-ink);
	outline-offset: 2px;
}

.hestia-dm-lightbox .hestia-dm-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	margin: 3px 6px 3px 0;
	background: color-mix(in srgb, var(--hestia-ink) 8%, transparent);
	color: var(--dm-ink);
}
.hestia-dm-lightbox__allergens .hestia-dm-pill { background: rgba(166, 58, 70, 0.12); color: var(--hestia-cherry, var(--hestia-cherry)); }
.hestia-dm-lightbox__tags { margin-top: 14px; }
.hestia-dm-lightbox__allergens { margin-top: 4px; }
.hestia-dm-lightbox__extra { margin-top: 10px; font-size: 12.5px; }

.hestia-dm-lightbox__cta {
	display: inline-block;
	margin-top: 18px;
	padding: 13px 30px;
	border-radius: 999px;
	background: var(--dm-cta);
	color: var(--dm-cta-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.hestia-dm-lightbox__cta:hover,
.hestia-dm-lightbox__cta:focus {
	transform: translateY(-2px);
	filter: brightness(1.12);
	background: var(--dm-cta) !important;
	color: var(--dm-cta-text) !important;
}

.hestia-dm-lightbox__close {
	width: 46px;
	height: 46px;
	transition: color 0.2s ease, transform 0.25s ease;
}
.hestia-dm-lightbox__close:hover,
.hestia-dm-lightbox__close:focus {
	transform: rotate(90deg);
}

@media (max-width: 560px) {
	.hestia-dm-lightbox { padding: 16px; }
	.hestia-dm-lightbox__inner {
		max-height: 90vh;
		overflow-y: auto;
	}
}

/* --------------------------------------- Blindaje del popup ante el tema */
/* El popup vive dentro de la página del tema: estos resets garantizan que
   ningún estilo externo (figcaption en italic, botones con borde, line-height
   del tema) pueda desarmarlo. */

.hestia-dm-lightbox,
.hestia-dm-lightbox * {
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	box-sizing: border-box;
}
.hestia-dm-lightbox {
	font-family: var(--dm-sans);
	color: var(--dm-ink);
	align-items: center;
	justify-content: center;
	text-align: left;
}
.hestia-dm-lightbox__inner {
	margin: 0;
	line-height: 1.5;
}
.hestia-dm-lightbox__title { font-family: var(--dm-serif); font-weight: 700; font-style: normal; }
.hestia-dm-lightbox__price { font-family: var(--dm-serif); font-weight: 700; }
.hestia-dm-lightbox__desc { font-family: var(--dm-sans); }
.hestia-dm-lightbox__close {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-family: inherit;
	box-shadow: none;
	text-shadow: none;
}
.hestia-dm-lightbox__cta { border: none; box-shadow: none; }
.hestia-dm-lightbox__image { display: block; margin: 0; border: none; }

/* ------------------------------------------------ Horarios de apertura */

.hestia-dmh {
	--dmh-ink: var(--hestia-ink, var(--hestia-ink));
	--dmh-accent: var(--hestia-rose, var(--hestia-rose));
	color: var(--dmh-ink);
	font-family: var(--hestia-font-body, "Dico Typewriter", ui-monospace, "SF Mono", Consolas, monospace);
	text-align: center;
}
.hestia-dmh * { box-sizing: border-box; }

.hestia-dmh__title {
	font-family: var(--hestia-font-display, "Cirka", "Cirka Variable", Georgia, serif);
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	margin: 0 0 6px;
}
.hestia-dmh__subtitle {
	font-size: 14px;
	opacity: 0.75;
	margin: 0 auto 20px;
}
.hestia-dmh__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}
.hestia-dmh__row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-align: left;
}
.hestia-dmh__day { font-weight: 600; font-size: 15.5px; }
.hestia-dmh__dots { flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.35; height: 0; margin-bottom: 4px; }
.hestia-dmh--no-dots .hestia-dmh__dots { border-bottom: none; }
.hestia-dmh__hours { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hestia-dmh__row--highlight .hestia-dmh__day,
.hestia-dmh__row--highlight .hestia-dmh__hours { font-weight: 700; }
.hestia-dmh__row--highlight .hestia-dmh__day::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dmh-accent);
	margin-right: 8px;
	vertical-align: 2px;
}

.hestia-dmh__note {
	font-size: 12.5px;
	opacity: 0.65;
	margin: 18px auto 0;
	line-height: 1.6;
}

/* ------------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.hestia-dm--intro .hestia-dm-hero__frame,
	.hestia-dm--intro .hestia-dm-hero__flowers,
	.hestia-dm--intro .hestia-dm-hero__title,
	.hestia-dm--intro .hestia-dm-hero__character,
	.hestia-dm--intro .hestia-dm-hero__eyebrow,
	.hestia-dm--intro .hestia-dm-hero__subtitle,
	.hestia-dm--intro .hestia-dm-hero__actions { animation: none !important; }
	.hestia-dm--js [data-dm-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hestia-dm-lightbox, .hestia-dm-lightbox__inner { transition: none !important; }
	.hestia-dm-variant__disc { transition: none !important; }
}


/* =========================================================================
   Barra inferior (hestia-bn) — Inicio / Menú / Buscar / Reservar + cajón de
   "Calificar tu experiencia" + buscador modal. Widget independiente del
   menú digital.
   ========================================================================= */

.hestia-bn-root {
	--bn-bg: var(--hestia-rose);
	--bn-ink: var(--hestia-ink);
	--bn-ink-muted: color-mix(in srgb, var(--hestia-ink) 58%, transparent);
	--bn-accent: var(--hestia-ink);
	--bn-rate-tab-bg: var(--hestia-cream-alt);
	--bn-rate-tab-ink: var(--hestia-ink);
	--bn-rate-panel-bg: var(--hestia-paper);
	--bn-rate-ink: var(--hestia-ink);
	--bn-rate-muted: var(--hestia-ink-soft);
	--bn-rate-num-bg: var(--hestia-cream-alt);
	--bn-rate-num-selected-bg: var(--hestia-ink);
	--bn-rate-num-selected-ink: var(--hestia-paper);
	--bn-search-backdrop: color-mix(in srgb, var(--hestia-ink) 55%, transparent);
	--bn-search-card-bg: var(--hestia-paper);
	--bn-search-ink: var(--hestia-ink);
	--bn-search-muted: var(--hestia-ink-soft);
	--bn-focus-ring: color-mix(in srgb, var(--hestia-rose) 65%, transparent);
	--bn-h: 68px;
	--bn-font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--bn-font-head: var(--hestia-font-display);
	font-family: var(--bn-font-body);
}

.hestia-bn-root,
.hestia-bn-root *,
.hestia-bn-root *::before,
.hestia-bn-root *::after {
	box-sizing: border-box;
}

.hestia-bn-root button,
.hestia-bn-root input {
	font-family: inherit;
}

/* Anula cualquier estilo de foco/acento heredado del tema o de Elementor
   (incl. su color de marca) y lo reemplaza por un anillo propio, suave, en
   el rosa de la marca — nunca rojo. */
.hestia-bn-root a,
.hestia-bn-root button,
.hestia-bn-root input {
	-webkit-tap-highlight-color: transparent;
	outline: none;
}
.hestia-bn-root a:focus-visible,
.hestia-bn-root button:focus-visible,
.hestia-bn-root input:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bn-focus-ring);
	border-radius: 10px;
}

/* El tema (Hello Elementor `reset.css`) pinta TODO `button:hover`/`:focus`
   con su rosa/rojo de marca (#c36) — de ahí el "rojo Elementor" que se veía
   al tocar los botones. Esa regla tiene baja especificidad, pero como
   ninguna de nuestras reglas declaraba fondo/color en `:hover`/`:focus`
   para algunos botones, la del tema ganaba esa propiedad puntual. Se anula
   aquí con un reset neutro (por si se nos escapa alguno) y cada botón de
   abajo además declara su propio fondo/color en cada estado. */
.hestia-bn-root :where(button):hover,
.hestia-bn-root :where(button):focus {
	background-color: transparent !important;
	color: inherit !important;
}

body.hestia-bn-lock { overflow: hidden; }

/* --------------------------------------------------- Pantalla de bienvenida.
   Overlay a pantalla completa (logo + 4 accesos + redes) que se ve un
   instante al cargar la página, antes de dejar ver el resto del sitio.
   Mientras está abierta se oculta la barra fija (`.is-splash-open` en el
   root, ver más abajo) — no hace falta verla todavía. */
.hestia-bn-splash {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 32px 20px calc(32px + env(safe-area-inset-bottom, 0));
	background: linear-gradient(160deg, var(--splash-from, var(--hestia-rose)), var(--splash-to, var(--hestia-cream-alt)));
	opacity: 1;
	transition: opacity 0.3s ease;
}
.hestia-bn-splash[hidden] { display: none; }
.hestia-bn-splash.is-closing { opacity: 0; pointer-events: none; }

.hestia-bn-splash__inner {
	width: 100%;
	max-width: 360px;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	text-align: center;
	color: var(--splash-ink, var(--hestia-ink));
}

.hestia-bn-splash__logo {
	width: 190px;
	max-width: 70%;
	height: auto;
}

.hestia-bn-splash__buttons {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hestia-bn-splash__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--hestia-paper) 85%, transparent);
	color: var(--splash-ink, var(--hestia-ink)) !important;
	font-family: var(--bn-font-body);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none !important;
	transition: transform 0.2s ease;
}
.hestia-bn-splash__btn:hover,
.hestia-bn-splash__btn:focus {
	transform: translateY(-1px);
	color: inherit !important;
}
.hestia-bn-splash__btn .hestia-icon { width: 20px; height: 20px; flex-shrink: 0; }

.hestia-bn-splash__btn--primary {
	background: var(--splash-btn-bg, var(--hestia-ink));
	color: var(--splash-btn-ink, var(--hestia-paper)) !important;
}

.hestia-bn-splash__social {
	display: flex;
	gap: 18px;
	align-items: center;
	justify-content: center;
}
.hestia-bn-splash__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hestia-paper) 60%, transparent);
	color: var(--splash-ink, var(--hestia-ink)) !important;
	transition: transform 0.2s ease;
}
.hestia-bn-splash__social a:hover,
.hestia-bn-splash__social a:focus {
	transform: translateY(-1px);
}
.hestia-bn-splash__social .hestia-icon { width: 22px; height: 22px; }

.hestia-bn-splash__skip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--splash-ink, var(--hestia-ink));
	opacity: 0.75;
	font-family: var(--bn-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 6px 10px;
}
.hestia-bn-splash__skip .hestia-icon { width: 14px; height: 14px; }

/* Mientras la pantalla de bienvenida está abierta se oculta la barra fija y
   el cajón de calificar — se revelan solos al cerrarla ("Menú"/"Continuar"). */
.hestia-bn-root.is-splash-open .hestia-bn,
.hestia-bn-root.is-splash-open .hestia-bn-rate {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hestia-bn-splash { transition: none; }
}

/* ------------------------------------------------------------- Barra. */
.hestia-bn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	align-items: stretch;
	background: var(--bn-bg);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.hestia-bn__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 12px 4px 10px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--bn-ink-muted);
	text-decoration: none;
	text-align: center;
	transition: color 0.22s ease;
}

.hestia-bn__icon {
	display: flex;
	line-height: 0;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.22s ease;
}
.hestia-bn__icon .hestia-icon { width: 22px; height: 22px; }

.hestia-bn__label {
	font-size: 11px;
	letter-spacing: 0.02em;
	font-weight: 500;
	transition: color 0.22s ease, font-weight 0.22s ease;
}

.hestia-bn__item::after {
	content: "";
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--bn-accent);
	opacity: 0;
	transform: translate(-50%, 4px) scale(0.4);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.hestia-bn__item:hover,
.hestia-bn__item:focus {
	color: var(--bn-ink) !important;
	background: none !important;
}
.hestia-bn__item:hover .hestia-bn__icon { transform: translateY(-2px); }
.hestia-bn__item:active .hestia-bn__icon { transform: scale(0.86); }

.hestia-bn__item.is-active { color: var(--bn-ink); }
.hestia-bn__item.is-active .hestia-bn__icon { color: var(--bn-accent); transform: translateY(-2px); }
.hestia-bn__item.is-active .hestia-bn__label { font-weight: 600; }
.hestia-bn__item.is-active::after { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* En pantallas angostas (celular) la barra ocupa todo el ancho a propósito
   — es lo esperado en una app. De acá para arriba (tablet apaisada y
   desktop) esa misma barra a todo lo ancho se ve gigante y con los 4
   accesos exageradamente separados entre sí. Se convierte en una pill
   flotante centrada, del ancho de su contenido — mismos accesos, mismo
   comportamiento (JS no distingue breakpoints, solo cambia el CSS). */
@media (min-width: 768px) {
	.hestia-bn {
		left: 50%;
		right: auto;
		bottom: 22px;
		transform: translateX(-50%);
		width: auto;
		max-width: calc(100vw - 40px);
		border-radius: 999px;
		padding-bottom: 0;
	}
	.hestia-bn__item {
		flex: 0 0 auto;
		padding: 13px 26px;
	}
}

/* ------------------------------------------------- Cajón de calificar. */
.hestia-bn-rate {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--bn-h);
	z-index: 59;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	pointer-events: none;
}
@media (min-width: 768px) {
	.hestia-bn-rate {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: auto;
		align-items: center;
		margin-bottom: 10px;
	}
}

.hestia-bn-rate__tab {
	pointer-events: auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	background: var(--bn-rate-tab-bg);
	color: var(--bn-rate-tab-ink);
	font-family: var(--bn-font-body);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 12px 16px;
	transition: filter 0.2s ease, transform 0.16s ease;
}
@media (min-width: 768px) {
	.hestia-bn-rate__tab {
		align-self: center;
		border-radius: 999px;
		padding: 11px 22px;
	}
}
.hestia-bn-rate__tab:hover,
.hestia-bn-rate__tab:focus {
	background: var(--bn-rate-tab-bg) !important;
	color: var(--bn-rate-tab-ink) !important;
	filter: brightness(0.97);
}
.hestia-bn-rate__tab:active { transform: scale(0.985); }

.hestia-bn-rate__staricon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hestia-bn-rate.is-open .hestia-bn-rate__staricon { transform: rotate(-16deg) scale(1.08); }

.hestia-bn-rate__caret { transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hestia-bn-rate.is-open .hestia-bn-rate__caret { transform: rotate(180deg); }

.hestia-bn-rate__panel {
	pointer-events: none;
	background: var(--bn-rate-panel-bg);
	color: var(--bn-rate-ink);
	padding: 0 20px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(6px);
	transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), padding 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hestia-bn-rate.is-open .hestia-bn-rate__panel {
	pointer-events: auto;
	max-height: 480px;
	opacity: 1;
	transform: translateY(0);
	padding: 22px 20px 26px;
	overflow-y: auto;
}
@media (min-width: 768px) {
	.hestia-bn-rate__panel {
		align-self: center;
		width: min(380px, calc(100vw - 40px));
		border-radius: 22px;
		margin-top: 10px;
	}
}

.hestia-bn-rate__step { display: none; }
.hestia-bn-rate__step.is-current { display: block; animation: hestiaBnFade 0.35s ease; }

.hestia-bn-rate__question {
	margin: 0 0 16px;
	font-family: var(--bn-font-head);
	font-size: 18px;
	font-weight: 600;
	color: var(--bn-rate-ink);
}

.hestia-bn-rate__scale {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.hestia-bn-rate__num {
	flex: 1;
	aspect-ratio: 1;
	max-width: 58px;
	border-radius: 15px;
	border: 1.5px solid color-mix(in srgb, var(--hestia-ink) 14%, transparent);
	background: var(--bn-rate-num-bg);
	color: var(--bn-rate-ink);
	font-family: var(--bn-font-body);
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hestia-bn-rate__num:hover,
.hestia-bn-rate__num:focus {
	background: var(--bn-rate-num-bg) !important;
	color: var(--bn-rate-ink) !important;
	border-color: var(--bn-rate-tab-bg) !important;
	transform: translateY(-2px);
}
.hestia-bn-rate__num:active { transform: scale(0.92); }
.hestia-bn-rate__num.is-selected,
.hestia-bn-rate__num.is-selected:hover,
.hestia-bn-rate__num.is-selected:focus {
	background: var(--bn-rate-num-selected-bg) !important;
	border-color: var(--bn-rate-num-selected-bg) !important;
	color: var(--bn-rate-num-selected-ink) !important;
	transform: scale(1.08);
}
.hestia-bn-rate__num.is-selected { animation: hestiaBnPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

.hestia-bn-rate__scalelabels {
	display: flex;
	justify-content: space-between;
	font-size: 11.5px;
	color: var(--bn-rate-muted);
	margin-bottom: 4px;
}

.hestia-bn-rate__step p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--bn-rate-muted); }

.hestia-bn-rate__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--bn-rate-ink);
	color: var(--hestia-paper);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.hestia-bn-rate__cta:hover,
.hestia-bn-rate__cta:focus {
	background: var(--bn-rate-ink) !important;
	color: var(--hestia-paper) !important;
	transform: translateY(-2px);
}
.hestia-bn-rate__cta:active { transform: scale(0.96); }

.hestia-bn-rate__cta--ghost {
	background: transparent;
	border: 1.5px solid var(--bn-rate-ink);
	color: var(--bn-rate-ink);
}
.hestia-bn-rate__cta--ghost:hover,
.hestia-bn-rate__cta--ghost:focus {
	background: color-mix(in srgb, var(--hestia-ink) 6%, transparent) !important;
	color: var(--bn-rate-ink) !important;
}

/* ------------------------------------------------------- Buscar (modal). */
.hestia-bn-search {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--bn-search-backdrop);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.hestia-bn-search.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.28s ease;
}

.hestia-bn-search__card {
	width: 100%;
	max-width: 420px;
	max-height: min(78vh, 560px);
	background: var(--bn-search-card-bg);
	color: var(--bn-search-ink);
	border-radius: 22px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: scale(0.94) translateY(10px);
	opacity: 0;
	transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.36, 1.1), opacity 0.26s ease;
}
.hestia-bn-search.is-open .hestia-bn-search__card { transform: scale(1) translateY(0); opacity: 1; }

.hestia-bn-search__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 18px 14px;
	border-bottom: 1px solid color-mix(in srgb, var(--hestia-ink) 10%, transparent);
	flex-shrink: 0;
}

.hestia-bn-search__icon { color: var(--bn-search-muted); display: flex; flex-shrink: 0; }
.hestia-bn-search__icon .hestia-icon { width: 18px; height: 18px; }

.hestia-bn-search__input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: none;
	font-family: var(--bn-font-body);
	font-size: 16px;
	color: var(--bn-search-ink);
}
.hestia-bn-search__input::placeholder { color: color-mix(in srgb, var(--hestia-ink) 40%, transparent); }

.hestia-bn-search__close {
	border: none;
	background: color-mix(in srgb, var(--hestia-ink) 7%, transparent);
	color: var(--bn-search-ink);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}
.hestia-bn-search__close:hover,
.hestia-bn-search__close:focus {
	background: color-mix(in srgb, var(--hestia-ink) 14%, transparent) !important;
	color: var(--bn-search-ink) !important;
}
.hestia-bn-search__close:active { transform: scale(0.88); }

.hestia-bn-search__body { padding: 8px 18px 18px; overflow-y: auto; }

.hestia-bn-search__hint { color: var(--bn-search-muted); font-size: 13px; margin: 14px 2px; }
.hestia-bn-search__hint[hidden] { display: none; }

.hestia-bn-search__results { list-style: none; margin: 0; padding: 0; }

.hestia-bn-search__result { border-bottom: 1px solid color-mix(in srgb, var(--hestia-ink) 8%, transparent); animation: hestiaBnFade 0.22s ease; }
.hestia-bn-search__result:last-child { border-bottom: none; }

.hestia-bn-search__result a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	text-decoration: none;
	color: var(--bn-search-ink);
	border-radius: 12px;
	transition: background 0.18s ease;
}
.hestia-bn-search__result a:hover,
.hestia-bn-search__result a:focus {
	background: color-mix(in srgb, var(--hestia-ink) 5%, transparent) !important;
	color: var(--bn-search-ink) !important;
}

.hestia-bn-search__thumb {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	flex-shrink: 0;
	background-color: color-mix(in srgb, var(--hestia-ink) 8%, transparent);
	background-size: cover;
	background-position: center;
}

.hestia-bn-search__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.hestia-bn-search__name {
	font-weight: 600;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hestia-bn-search__cat {
	font-size: 11px;
	color: var(--bn-search-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.hestia-bn-search__price { font-weight: 600; font-size: 13px; flex-shrink: 0; }

.hestia-bn-search__empty {
	list-style: none;
	padding: 16px 4px;
	color: var(--bn-search-muted);
	font-size: 13.5px;
	text-align: center;
}

/* ------------------------------------------------------------- Animaciones. */
@keyframes hestiaBnFade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes hestiaBnPop {
	0% { transform: scale(0.85); }
	60% { transform: scale(1.14); }
	100% { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.hestia-bn-root * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==== Flamante brand fonts ==== */

/* ==========================================================================
   FLAMANTE — Sistema editorial (v2.2)
   Dirección: sobria, oscura y neutra, con secciones claras de contraste.
   Tipografía natural: sin mayúsculas forzadas ni espaciado artificial entre
   letras. Cirka (variable 300–700) lleva títulos, nombres y textos; Dico
   Typewriter queda solo para detalles funcionales (precios, rótulos).
   Sin degradados. El color de marca (var(--hestia-cherry)) no se usa como relleno.
   ========================================================================== */

:root {
	--fl-ink: var(--hestia-ink);
	--fl-ink-2: color-mix(in srgb, var(--hestia-ink) 92%, #fff);
	--fl-cream: var(--hestia-paper);
	--fl-muted-dark: var(--hestia-ink-soft);
	--fl-muted-light: color-mix(in srgb, var(--hestia-ink-soft) 60%, var(--hestia-paper));
	--fl-line-dark: color-mix(in srgb, var(--hestia-ink) 12%, transparent);
	--fl-line-light: color-mix(in srgb, var(--hestia-paper) 16%, transparent);
	--fl-serif: var(--hestia-font-display);
	--fl-mono: var(--hestia-font-body);
	--fl-header-h: 78px;
	--fl-subnav-h: 58px;
}
@media (max-width: 767px) {
	:root { --fl-header-h: 64px; --fl-subnav-h: 52px; }
}

/* Lenis (desplazamiento suave). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------ Header ---- */
/* Contenedor de Elementor con la clase `fl-header`. Fijo y transparente;
   `mix-blend-mode: difference` hace que el logotipo y los botones (en tono
   claro) se inviertan según lo que pasa por detrás: claros sobre fotos y
   fondos oscuros, oscuros sobre las secciones crema. */
.fl-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	mix-blend-mode: difference;
	background: transparent !important;
	pointer-events: none;
}
.fl-header .elementor-widget,
.fl-header a,
.fl-header button { pointer-events: auto; }
.fl-header > .e-con-inner,
.fl-header.e-con-full {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.fl-header .fl-h-start { justify-self: start; }
.fl-header .fl-h-center { justify-self: center; }
.fl-header .fl-h-end { justify-self: end; }

/* Icono hamburguesa de dos líneas finas, dibujado a la izquierda del texto
   "Menú" del botón (el texto se edita desde Elementor). */
.fl-menu-toggle .elementor-button-text::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 7px;
	margin-right: 12px;
	vertical-align: 0.2em;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

/* Aspa de "Cerrar" dentro del menú: dos líneas finas cruzadas. */
.fl-menu-close .elementor-button-text { position: relative; padding-left: 30px; }
.fl-menu-close .elementor-button-text::before,
.fl-menu-close .elementor-button-text::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 19px;
	border-top: 1px solid currentColor;
}
.fl-menu-close .elementor-button-text::before { transform: rotate(45deg); }
.fl-menu-close .elementor-button-text::after { transform: rotate(-45deg); }

@media (max-width: 767px) {
	.fl-header .fl-hide-mobile { display: none !important; }
	.fl-menu-toggle .elementor-button-text { font-size: 0 !important; }
	.fl-menu-toggle .elementor-button-text::before { margin-right: 0; }
}

/* ------------------------------------------------------ Menú (overlay) ---- */
/* Contenedor de Elementor con la clase `fl-overlay`: el menú a pantalla
   completa que abre el botón hamburguesa. Fuera del header a propósito,
   para que no herede la mezcla de colores. */
.fl-overlay {
	position: fixed !important;
	inset: 0;
	z-index: 1100;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.5s;
	overflow-x: hidden;
}
/* El menú tiene altura fija: sus bloques no se encogen ni se parten en
   columnas (antes la lista de cartas saltaba a la derecha en móvil). */
.fl-overlay .e-con { flex-shrink: 0; }
.fl-overlay,
.fl-overlay .e-con,
.fl-overlay .e-con-inner { flex-wrap: nowrap !important; }

/* Con sesión iniciada, la barra de administración de WordPress ocupa la
   parte superior (32px; 46px en tablet). En móvil (≤600px) esa barra se
   desplaza con la página, así que no se compensa. */
@media (min-width: 601px) {
	.admin-bar .fl-header,
	.admin-bar .fl-overlay,
	.admin-bar .fl-subnav { top: 32px; }
}
@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar .fl-header,
	.admin-bar .fl-overlay,
	.admin-bar .fl-subnav { top: 46px; }
}
html.fl-menu-open .fl-overlay {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.fl-menu-open,
html.fl-menu-open body { overflow: hidden; }

/* Barra superior del menú (cerrar · logo · reservar): tres columnas, con el
   logo siempre centrado aunque los botones de los lados midan distinto. */
.fl-overlay .fl-header-row {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.fl-overlay .fl-header-row > .elementor-element:first-child { justify-self: start; }
.fl-overlay .fl-header-row > .elementor-element:last-child { justify-self: end; }

/* Cartas dentro del menú: el mismo widget "Header de carta", como lista. */
.fl-overlay .hestia-dm-nav {
	position: static;
	background: transparent;
	border: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.fl-overlay .hestia-dm-nav__inner { padding: 0; max-width: none; display: block; }
.fl-overlay .hestia-dm-nav__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}
.fl-overlay .hestia-dm-nav__links a,
.fl-overlay .hestia-dm-nav__links a:hover,
.fl-overlay .hestia-dm-nav__links a:focus,
.fl-overlay .hestia-dm-nav__links a.is-active {
	font-family: var(--fl-serif);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	color: inherit !important;
	opacity: 1;
}
.fl-overlay .hestia-dm-nav__links a:hover { opacity: 0.6; }
.fl-overlay .hestia-dm-nav__cta { display: none; }

/* En el editor de Elementor, header y menú se ven en su sitio para poder
   editarlos (sin fijarse ni ocultarse). */
.elementor-editor-active .fl-header {
	position: relative !important;
	mix-blend-mode: normal;
	background: var(--fl-ink) !important;
}
.elementor-editor-active .fl-overlay {
	position: relative !important;
	inset: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

/* -------------------------------------------- Barra de cartas (sticky) ---- */
/* Contenedor `fl-subnav`: se fija arriba al llegar a la carta. El relleno
   superior (alto del header) queda detrás del header transparente para que
   el contenido no se vea pasar por ese hueco; el margen negativo compensa
   ese relleno mientras la barra está en su posición normal. */
.fl-subnav {
	position: sticky !important;
	top: 0;
	z-index: 40;
	padding-top: var(--fl-header-h) !important;
	margin-top: calc(-1 * var(--fl-header-h)) !important;
	background: var(--fl-cream) !important;
	border-bottom: 1px solid var(--fl-line-dark);
}
.fl-subnav .hestia-dm-nav {
	position: static;
	background: transparent;
	border: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.fl-subnav .hestia-dm-nav__inner {
	max-width: 1180px;
	padding: 0 24px;
	justify-content: center;
}
.fl-subnav .hestia-dm-nav__links {
	flex: 0 1 auto;
	justify-content: center;
	gap: clamp(20px, 3.4vw, 44px);
	-webkit-mask-image: none;
	mask-image: none;
}
.fl-subnav .hestia-dm-nav__links a,
.fl-subnav .hestia-dm-nav__links a:hover,
.fl-subnav .hestia-dm-nav__links a:focus {
	font-family: var(--fl-serif);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: 18px 0 17px;
	border: 0;
	border-radius: 0;
	background: transparent !important;
	color: var(--fl-muted-dark) !important;
	box-shadow: inset 0 -1px 0 transparent;
	opacity: 1;
	transition: color 0.25s ease, box-shadow 0.25s ease;
}
.fl-subnav .hestia-dm-nav__links a:hover { color: var(--fl-ink) !important; }
.fl-subnav .hestia-dm-nav__links a.is-active {
	background: transparent !important;
	color: var(--fl-ink) !important;
	box-shadow: inset 0 -1px 0 var(--fl-ink);
}
.fl-subnav .hestia-dm-nav__cta { display: none; }
@media (max-width: 767px) {
	.fl-subnav .hestia-dm-nav__inner { justify-content: flex-start; padding: 0 16px; }
	.fl-subnav .hestia-dm-nav__links { justify-content: flex-start; gap: 22px; }
	.fl-subnav .hestia-dm-nav__links a { font-size: 15px; padding: 15px 0 14px; white-space: nowrap; }
}

/* ------------------------------------------------------------- Carta ---- */

.hestia-dm {
	--dm-nav-bg: transparent;
	--dm-ink: var(--fl-ink);
	--dm-muted: var(--fl-muted-dark);
	--dm-serif: var(--fl-serif);
	--dm-sans: var(--fl-mono);
	-webkit-font-smoothing: antialiased;
}

.hestia-dm-section {
	--dm-section-pad-y: clamp(56px, 7vw, 104px);
	scroll-margin-top: calc(var(--fl-header-h) + var(--fl-subnav-h) + 12px);
}
.hestia-dm-section__head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.hestia-dm-section__title {
	font-family: var(--fl-serif);
	font-weight: 300;
	font-size: clamp(44px, 6vw, 80px);
	line-height: 1;
	letter-spacing: -0.015em;
	text-transform: none;
	color: var(--fl-ink);
}
.hestia-dm-section__intro {
	margin: 16px auto 0;
	max-width: 52ch;
	font-family: var(--fl-serif);
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-muted-dark);
}

.hestia-dm-columns { column-gap: clamp(40px, 6vw, 96px); }
.hestia-dm-cat { margin-bottom: clamp(60px, 7vw, 100px); }

/* Categoría: titular tipográfico, sin pastilla de color. Jerarquía:
   carta (44–80px) > categoría (30–40px, trazo fino) > plato (17–18px, medio). */
.hestia-dm-cat__chip {
	background: transparent !important;
	color: var(--fl-ink) !important;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-family: var(--fl-serif);
	font-weight: 400;
	font-size: clamp(32px, 3.5vw, 44px);
	line-height: 1.08;
	padding: 0 0 18px;
	margin: 0 0 6px;
	border-radius: 0;
	border-bottom: 1px solid var(--fl-line-dark);
}
.hestia-dm-cat__note {
	margin: 12px 0 4px;
	max-width: 60ch;
	text-align: left;
	font-family: var(--fl-serif);
	font-style: normal;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-muted-dark);
}

/* Plato. */
.hestia-dm-cat__list { gap: 0; }
.hestia-dm-dish {
	padding: 17px 0;
	margin: 0;
	gap: 16px;
	background: transparent;
	border-radius: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--hestia-ink) 7%, transparent);
}
.hestia-dm-cat__list > .hestia-dm-dish:last-child { border-bottom: 0; }
.hestia-dm-dish--clickable:hover,
.hestia-dm-dish--clickable:focus-visible { background: transparent; }
.hestia-dm-dish--clickable:hover .hestia-dm-dish__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}
.hestia-dm-dish__head { gap: 18px; align-items: baseline; }
.hestia-dm-dish__name {
	font-family: var(--fl-serif);
	font-weight: 500;
	font-size: clamp(17px, 1.5vw, 18px);
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-ink);
}

/* Precio: sin fondo ni recuadro, un punto más de peso que el texto. */
.hestia-dm-dish__price {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font-family: var(--fl-mono);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--fl-ink);
	-webkit-text-stroke: 0.35px currentColor;
	font-variant-numeric: tabular-nums;
}

.hestia-dm-dish__desc {
	margin-top: 6px;
	max-width: 58ch;
	font-family: var(--fl-serif);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-muted-dark);
	-webkit-line-clamp: 3;
}

.hestia-dm-dish__thumb {
	width: 64px;
	height: 64px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--hestia-ink) 6%, transparent);
}

/* Tarjetas con foto (aparecen solas cuando un plato tiene imagen). */
.hestia-dm-cardgrid { gap: 28px 20px; }
.hestia-dm-cardgrid__item {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.hestia-dm-cardgrid__image { border-radius: 2px; }
.hestia-dm-cardgrid__name {
	font-family: var(--fl-serif);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 14px;
}
.hestia-dm-cardgrid__desc {
	font-family: var(--fl-serif);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-muted-dark);
}
.hestia-dm-cardgrid__price {
	font-family: var(--fl-mono);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--fl-ink);
	-webkit-text-stroke: 0.35px currentColor;
}
.hestia-dm-cardgrid__view { display: none; }

/* Popup de detalle del plato. */
.hestia-dm-lightbox__inner { border-radius: 3px; background: var(--fl-cream); }
.hestia-dm-lightbox__title {
	font-family: var(--fl-serif);
	font-weight: 400;
	letter-spacing: -0.005em;
	text-transform: none;
}
.hestia-dm-lightbox__desc {
	font-family: var(--fl-serif);
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-muted-dark);
}
.hestia-dm-lightbox__price {
	font-family: var(--fl-mono);
	letter-spacing: 0;
	color: var(--fl-ink);
	-webkit-text-stroke: 0.35px currentColor;
}
.hestia-dm-lightbox__cta {
	font-family: var(--fl-serif);
	font-size: 16px;
	letter-spacing: 0;
	text-transform: none;
	border-radius: 8px;
	background: var(--fl-ink) !important;
	color: var(--fl-cream) !important;
}
.hestia-dm-lightbox__allergens,
.hestia-dm-lightbox__tags { letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------- Sedes ---- */

.hestia-sedes {
	--sede-ink: currentColor;
	--sede-muted: var(--fl-muted-light);
	color: inherit;
}
.hestia-sedes--full { display: flex; flex-direction: column; gap: clamp(72px, 10vw, 140px); }
.hestia-sedes--full .hestia-sede {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}
.hestia-sedes--full .hestia-sede--has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hestia-sede__media { margin: 0; overflow: hidden; }
.hestia-sede__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.hestia-sedes--full .hestia-sede__city {
	margin: 0 0 18px;
	font-family: var(--fl-mono);
	font-size: 13px;
	letter-spacing: 0;
	color: var(--sede-muted);
}
.hestia-sedes--full .hestia-sede__name {
	margin: 0 0 28px;
	font-family: var(--fl-serif);
	font-weight: 300;
	font-size: clamp(44px, 5.4vw, 76px);
	line-height: 1;
	letter-spacing: -0.015em;
	color: var(--sede-ink);
}
.hestia-sede__address,
.hestia-sede__contact {
	margin: 0 0 6px;
	font-family: var(--fl-serif);
	font-size: 19px;
	line-height: 1.5;
	color: var(--sede-ink);
}
.hestia-sede__contact a { color: inherit; text-decoration: none; margin-right: 20px; }
.hestia-sede__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	margin-top: 40px;
}
.hestia-sede__btn,
.hestia-sede__link {
	font-family: var(--fl-serif);
	font-size: 17px;
	line-height: 1;
	color: var(--sede-ink);
	text-decoration: none;
	transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.hestia-sede__btn {
	display: inline-block;
	padding: 16px 34px;
	border: 1px solid currentColor;
	border-radius: 8px;
}
.hestia-sede__btn:hover { background: var(--fl-cream); color: var(--fl-ink); border-color: var(--fl-cream); }
.hestia-sede__link { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.hestia-sede__link:hover { opacity: 0.6; }
@media (max-width: 767px) {
	.hestia-sedes--full .hestia-sede--has-image { grid-template-columns: 1fr; }
}

.hestia-sedes--compact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.hestia-sedes--compact .hestia-sede__row { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.hestia-sedes--compact .hestia-sede__name {
	font-family: var(--fl-serif);
	font-weight: 300;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.1;
	letter-spacing: -0.005em;
}
.hestia-sedes--compact .hestia-sede__city {
	font-family: var(--fl-serif);
	font-size: 17px;
	color: var(--sede-muted);
}
.hestia-sedes--compact a.hestia-sede__row:hover .hestia-sede__name { opacity: 0.6; }

/* ------------------------------------------------- Utilidades de página ---- */

/* Texto vertical (katakana). */
.fl-vertical,
.fl-vertical .elementor-heading-title {
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 1;
}

/* Fotografías de Elementor con recorte controlado desde CSS: la imagen llena
   su contenedor sin deformarse. La proporción se elige con la clase:
   `fl-photo--tall` (3:4), `fl-photo--portrait` (4:5), `fl-photo--wide` (16:10). */
.fl-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.fl-photo--tall img { aspect-ratio: 3 / 4; }
.fl-photo--portrait img { aspect-ratio: 4 / 5; }
.fl-photo--wide img { aspect-ratio: 16 / 10; }
@media (max-width: 767px) {
	.fl-photo--wide img { aspect-ratio: 4 / 5; }
}

/* Enlaces de texto con subrayado fino (footer, créditos, enlaces sueltos). */
.fl-link a,
a.fl-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	padding-bottom: 1px;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.fl-link a:hover,
a.fl-link:hover { border-bottom-color: currentColor; }

/* Botones de Elementor: transición discreta al pasar el cursor. */
.fl-btn .elementor-button { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

/* Secciones con ancla (#filosofia, #chef, #carta, #sede…): frenan bajo el
   header fijo al llegar desde un enlace. */
.e-con[id] { scroll-margin-top: var(--fl-header-h); }

/* Firma del chef (trazo claro en el archivo original) en tono oscuro, para
   usarla sobre las secciones crema. */
.fl-sign-dark img { filter: brightness(0.16); }

/* Páginas legales (privacidad, cookies, términos): el texto se edita en un
   solo widget "Editor de texto" con la clase `fl-legal`. */
.elementor .fl-legal h2 {
	font-family: var(--fl-serif);
	font-weight: 400;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-ink);
	margin: 56px 0 16px;
}
.elementor .fl-legal h2:first-child { margin-top: 0; }
.elementor .fl-legal p { margin: 0 0 16px; }
.elementor .fl-legal ul { margin: 0 0 16px; padding-left: 1.2em; }
.elementor .fl-legal li { margin-bottom: 8px; }
.elementor .fl-legal strong { font-weight: 500; color: var(--fl-ink); }
.elementor .fl-legal a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* ==========================================================================
   FLAMANTE — Movimiento, microinteracciones y plegables (v2.3)
   Todo lo animado depende de `html.fl-motion`, que solo añade public.js en el
   sitio publicado (nunca en el editor ni con "reducir movimiento"): sin JS la
   página se ve igual que antes.
   ========================================================================== */

/* ---------------------------------------------- iPhone Duo y plegables ---- */
/* Pantalla exterior ~466×678 y pantalla interior ~626×890 (890×626 en
   horizontal). Safari no expone el pliegue: la página se adapta por ancho y
   por márgenes seguros, que en el iPhone Duo son distintos a cada lado (por
   eso se declaran por separado, nunca con el atajo `padding-inline`). */
@supports (height: 100svh) {
	/* Entrada a pantalla completa sin quedar tapada por la barra de Safari. */
	#inicio.e-con { --min-height: 100svh; }
}
.fl-header,
.fl-overlay .fl-header-row {
	padding-left: max(var(--padding-left, 16px), env(safe-area-inset-left)) !important;
	padding-right: max(var(--padding-right, 16px), env(safe-area-inset-right)) !important;
}
.elementor-location-footer > .e-con:last-child,
.elementor-location-footer .e-con.e-parent:last-child {
	padding-bottom: calc(var(--padding-bottom, 28px) + env(safe-area-inset-bottom)) !important;
}

/* Aviso "Enhanced for iPhone Duo" (solo la primera visita desde un iPhone Duo). */
.fl-duo-toast {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 1200;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 12px 20px 12px 16px;
	border: 1px solid color-mix(in srgb, var(--hestia-paper) 16%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--hestia-ink) 84%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	color: var(--fl-cream);
	font-family: var(--fl-serif);
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-50%, 14px, 0);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fl-duo-toast.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }
/* Icono: el contorno de un plegable abierto, con su pliegue. */
.fl-duo-toast__icon {
	position: relative;
	flex: none;
	width: 17px;
	height: 13px;
	border: 1px solid currentColor;
	border-radius: 3px;
	opacity: 0.75;
}
.fl-duo-toast__icon::after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: 50%;
	border-left: 1px solid currentColor;
}

/* ----------------------------------------------------- Aparición al scroll */
.fl-motion .fl-reveal {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--fl-delay, 0s);
}
.fl-motion .fl-reveal.is-in { opacity: 1; transform: none; }

/* Escritura: los títulos con `fl-type` aparecen palabra por palabra. */
.fl-motion .fl-type .fl-w {
	display: inline-block;
	opacity: 0;
	transform: translate3d(0, 0.42em, 0);
	filter: blur(6px);
	transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
	transition-delay: calc(var(--i, 0) * 55ms + var(--fl-delay, 0s));
}
.fl-motion .fl-type.is-in .fl-w { opacity: 1; transform: none; filter: none; }

/* Lectura: los textos con `fl-scrub` se "escriben" a medida que se hace
   scroll (cada palabra pasa de tenue a plena). */
.fl-motion .fl-scrub .fl-w {
	opacity: var(--o, 0.16);
	transition: opacity 0.3s linear;
}

/* Foto del chef: de blanco y negro a color según avanza en pantalla. */
.fl-motion .fl-reveal-color img {
	filter: grayscale(var(--fl-gray, 1));
	transition: filter 0.3s linear;
}

/* Fotografías con `fl-photo`: leve desplazamiento (parallax) al hacer scroll. */
.fl-motion .fl-photo { overflow: hidden; }
.fl-motion .fl-photo img {
	transform: translate3d(0, var(--fl-shift, 0px), 0) scale(1.1);
	will-change: transform;
}

/* Enlaces de texto: el subrayado tenue se completa de izquierda a derecha. */
.fl-link a,
a.fl-link {
	border-bottom: 0 !important;
	padding-bottom: 2px;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(color-mix(in srgb, currentColor 40%, transparent), color-mix(in srgb, currentColor 40%, transparent));
	background-size: 0% 1px, 100% 1px;
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fl-link a:hover,
a.fl-link:hover,
.fl-link a:focus-visible { background-size: 100% 1px, 100% 1px; }

/* Botones: respuesta suave al pasar y al pulsar. */
.fl-btn .elementor-button { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fl-btn .elementor-button:active { transform: scale(0.97); }

/* --------------------------------------------------- Menú (hamburguesa) ---- */
/* Lista principal numerada automáticamente (01, 02…): se edita en Elementor
   como una "Lista de iconos" con la clase `fl-menu-main`. */
.fl-overlay .fl-menu-main .elementor-icon-list-items { counter-reset: flmenu; }
.fl-overlay .fl-menu-main .elementor-icon-list-item {
	counter-increment: flmenu;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--fl-line-dark);
}
.fl-overlay .fl-menu-main .elementor-icon-list-item:first-child { border-top: 1px solid var(--fl-line-dark); }
.fl-overlay .fl-menu-main .elementor-icon-list-item > a {
	display: flex;
	align-items: baseline;
	width: 100%;
	padding: 16px 0;
}
.fl-overlay .fl-menu-main .elementor-icon-list-text {
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.3s ease;
}
.fl-overlay .fl-menu-main .elementor-icon-list-text::before {
	content: counter(flmenu, decimal-leading-zero);
	display: inline-block;
	width: 44px;
	font-family: var(--fl-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	vertical-align: 0.95em;
	color: var(--fl-muted-dark);
}
.fl-overlay .fl-menu-main .elementor-icon-list-item > a:hover .elementor-icon-list-text,
.fl-overlay .fl-menu-main .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text { transform: translateX(10px); }
@media (max-width: 767px) {
	.fl-overlay .fl-menu-main .elementor-icon-list-item > a { padding: 12px 0; }
	.fl-overlay .fl-menu-main .elementor-icon-list-text::before { width: 34px; }
}

/* Columna lateral del menú: cartas, dirección e Instagram, más discretas. */
.fl-overlay .fl-menu-aside .hestia-dm-nav__links { gap: 4px; }
.fl-overlay .fl-menu-aside .hestia-dm-nav__links a,
.fl-overlay .fl-menu-aside .hestia-dm-nav__links a:hover,
.fl-overlay .fl-menu-aside .hestia-dm-nav__links a:focus,
.fl-overlay .fl-menu-aside .hestia-dm-nav__links a.is-active {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.35;
}

/* Entrada escalonada de los elementos del menú al abrirlo. */
.fl-motion .fl-overlay .fl-menu-item {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.fl-menu-open.fl-motion .fl-overlay .fl-menu-item {
	opacity: 1;
	transform: none;
	transition-delay: calc(0.12s + var(--i, 0) * 45ms);
}

/* Márgenes seguros en todas las secciones (con `viewport-fit=cover` el fondo
   llega de borde a borde y el contenido se aparta de la cámara y del pliegue
   en horizontal). Con márgenes 0 (vertical, escritorio) no cambia nada. */
.e-con.e-parent:not(.fl-header) {
	padding-left: max(var(--padding-left, 0px), env(safe-area-inset-left)) !important;
	padding-right: max(var(--padding-right, 0px), env(safe-area-inset-right)) !important;
}

/* Entrada: los elementos del hero suben y aparecen al cargar (solo CSS, así
   no hay parpadeo antes de que cargue el JavaScript). */
@keyframes fl-rise {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
	body:not(.elementor-editor-active) #inicio > .elementor-element {
		animation: fl-rise 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	body:not(.elementor-editor-active) #inicio > .elementor-element:nth-child(1) { animation-delay: 0.35s; }
	body:not(.elementor-editor-active) #inicio > .elementor-element:nth-child(2) { animation-delay: 0.2s; }
	body:not(.elementor-editor-active) #inicio > .elementor-element:nth-child(3) { animation-delay: 0.32s; }
	body:not(.elementor-editor-active) #inicio > .elementor-element:nth-child(4) { animation-delay: 0.5s; }
}

/* ==========================================================================
   FLAMANTE — Picante, producto destacado y horarios (v2.5)
   ========================================================================== */

/* Picante: tres fueguitos pequeños junto al nombre del plato. */
.hestia-spicy {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	margin-left: 9px;
	vertical-align: 0.06em;
	color: var(--hestia-cherry);
	white-space: nowrap;
}
.hestia-spicy__fire { display: inline-flex; width: 11px; height: 11px; }
.hestia-spicy__fire svg { width: 100%; height: 100%; }
.hestia-spicy__fire:not(.is-on) { color: color-mix(in srgb, var(--hestia-ink) 26%, transparent); }

/* Un plato enlazado desde la portada se ubica bajo la cabecera y se resalta. */
.hestia-dm-dish[id] { scroll-margin-top: calc(var(--fl-header-h) + var(--fl-subnav-h) + 28px); }
.hestia-dm-dish.is-spotlit { animation: fl-spotlit 2.6s ease; }
@keyframes fl-spotlit {
	0%, 45% { background-color: color-mix(in srgb, var(--hestia-cherry) 8%, transparent); }
	100% { background-color: transparent; }
}

/* Producto destacado de la portada (widget "Hestia – Producto destacado"). */
.hestia-spot { color: var(--fl-cream); }
.hestia-spot__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 7vw, 96px);
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(96px, 11vw, 150px) max(36px, env(safe-area-inset-right)) clamp(96px, 11vw, 150px) max(36px, env(safe-area-inset-left));
}
.hestia-spot--text .hestia-spot__inner { grid-template-columns: minmax(0, 720px); justify-content: center; text-align: center; }
.hestia-spot__media { margin: 0; }
.hestia-spot__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hestia-spot__eyebrow { margin: 0 0 18px; font-family: var(--fl-mono); font-size: 13px; color: var(--fl-muted-light); }
.hestia-spot__title {
	margin: 0 0 22px;
	font-family: var(--fl-serif);
	font-size: clamp(44px, 5.2vw, 72px);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--fl-cream);
}
.hestia-spot__desc { color: var(--fl-muted-light); font-family: var(--fl-serif); font-size: 19px; line-height: 1.65; }
.hestia-spot__desc p { margin: 0 0 14px; }
.hestia-spot__availability {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 26px;
	font-family: var(--fl-mono);
	font-size: 13px;
	color: var(--fl-muted-light);
}
.hestia-spot__availability::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.hestia-spot__cta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px 26px; }
.hestia-spot--text .hestia-spot__cta { justify-content: center; }
.hestia-spot__price { font-family: var(--fl-mono); font-size: 18px; color: var(--fl-cream); -webkit-text-stroke: 0.35px currentColor; }
.hestia-spot__link {
	padding-bottom: 2px;
	color: var(--fl-cream);
	font-family: var(--fl-serif);
	font-size: 17px;
	text-decoration: none;
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(color-mix(in srgb, currentColor 40%, transparent), color-mix(in srgb, currentColor 40%, transparent));
	background-size: 0% 1px, 100% 1px;
	background-position: 0 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hestia-spot__link:hover,
.hestia-spot__link:focus-visible { color: var(--fl-cream); background-size: 100% 1px, 100% 1px; }
@media (max-width: 767px) {
	.hestia-spot__inner { grid-template-columns: 1fr; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
	.hestia-spot__desc { font-size: 17px; }
}

/* Horarios (widget "Hestia – Horarios"): menú y pie. */
.hestia-hours { color: var(--hours-ink, currentColor); }
.hestia-hours__label { margin: 0 0 14px; font-family: var(--fl-mono); font-size: 12px; color: var(--hours-muted, currentColor); }
.hestia-hours__list { margin: 0; }
.hestia-hours__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 2px 16px;
	padding: 7px 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	font-family: var(--fl-serif);
	font-size: 16px;
	line-height: 1.35;
}
.hestia-hours__row:last-child { border-bottom: 0; }
/* Si el horario no cabe junto al día, pasa a la línea siguiente (sin
   desbordar la página en columnas estrechas). */
.hestia-hours__row dt { font-weight: 400; white-space: nowrap; }
.hestia-hours__row dd { margin: 0 0 0 auto; font-family: var(--fl-mono); font-size: 13px; text-align: right; }
.hestia-hours__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--hours-muted, currentColor); }

/* Si una sede aún no tiene horarios, el bloque (y su columna) no ocupa espacio. */
.elementor-widget-hestia_hours:not(:has(.hestia-hours, .hestia-spot-placeholder)) { display: none; }
.e-con:has(> .elementor-widget-hestia_hours):not(:has(.hestia-hours, .hestia-spot-placeholder)),
.e-con:has(> .e-con-inner > .elementor-widget-hestia_hours):not(:has(.hestia-hours, .hestia-spot-placeholder)) { display: none; }

/* Aviso solo dentro del editor de Elementor (nunca en la web publicada). */
.hestia-spot-placeholder {
	margin: 0;
	padding: 18px 20px;
	border: 1px dashed currentColor;
	font-family: var(--fl-mono);
	font-size: 12px;
	opacity: 0.6;
}

/* Bebidas con varias presentaciones (trago, botella…): una al lado de la
   otra, con su nombre encima. Solo aparecen las marcadas como disponibles. */
.hestia-dm-dish__head:has(.hestia-dm-dish__price--variants) { align-items: flex-end; }
.hestia-dm-dish__price--variants {
	display: inline-flex;
	align-items: flex-end;
	gap: 20px;
	-webkit-text-stroke: 0;
}
/* Se anulan los estilos de píldora del selector de tamaños del popup, que
   comparte la clase .hestia-dm-variant. */
.hestia-dm-dish__price--variants .hestia-dm-variant {
	flex: 0 0 auto;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	width: auto;
	background: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	cursor: inherit;
	text-align: right;
}
.hestia-dm-dish__price--variants .hestia-dm-variant__label {
	font-weight: 400;
	font-family: var(--fl-mono);
	font-size: 10.5px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fl-muted-dark);
}
.hestia-dm-dish__price--variants .hestia-dm-variant__price {
	display: inline;
	margin-top: 0;
	font-weight: inherit;
	font-family: var(--fl-mono);
	font-size: 14px;
	line-height: 1.2;
	color: var(--fl-ink);
	-webkit-text-stroke: 0.35px currentColor;
	white-space: nowrap;
}
@media (max-width: 480px) {
	.hestia-dm-dish__price--variants { gap: 14px; }
}

/* ==========================================================================
   Popup del plato — v2.6, editorial Flamante
   Crema, Cirka y Dico, filetes finos en vez de rellenos. En el celular es una
   hoja que sube desde abajo. Las bebidas con varias presentaciones muestran
   cada una en su columna con un ícono de línea (vaso, copa, botella).
   ========================================================================== */

.hestia-dm-lightbox {
	z-index: 10050;
	padding: 32px;
	background: color-mix(in srgb, var(--hestia-ink) 56%, transparent);
	backdrop-filter: blur(10px) saturate(0.85);
	-webkit-backdrop-filter: blur(10px) saturate(0.85);
	font-family: var(--fl-mono);
	color: var(--fl-ink);
	transition: opacity 0.4s ease;
}
.hestia-dm-lightbox__inner {
	position: relative;
	width: 100%;
	max-width: 580px;
	max-height: calc(100vh - 64px);
	max-height: calc(100dvh - 64px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: none;
	background: var(--fl-cream);
	color: var(--fl-ink);
	border-radius: 2px;
	box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--hestia-ink) 60%, transparent);
	opacity: 0;
	transform: translateY(26px);
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.hestia-dm-lightbox__inner::-webkit-scrollbar { display: none; }
.hestia-dm-lightbox.is-open .hestia-dm-lightbox__inner { opacity: 1; transform: none; }
.hestia-dm-lightbox__inner.is-dragging { transition: none; }

.hestia-dm-lightbox__image {
	aspect-ratio: 4 / 3;
	max-height: 50vh;
	width: 100%;
	object-fit: cover;
	border-radius: 0;
	background: color-mix(in srgb, var(--hestia-ink-soft) 15%, var(--hestia-paper));
}

.hestia-dm-lightbox__caption { padding: 40px 44px 44px; }

/* Rótulo superior: categoría + nivel de picante. */
.hestia-dm-lightbox__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
	min-height: 18px;
}
.hestia-dm-lightbox__inner:not(.has-image) .hestia-dm-lightbox__meta { padding-right: 48px; }
.hestia-dm-lightbox__meta[hidden],
.hestia-dm-lightbox__heat[hidden] { display: none; }
.hestia-dm-lightbox__eyebrow {
	font-family: var(--fl-mono);
	font-size: 12px;
	line-height: 1.3;
	color: var(--fl-muted-dark);
}
.hestia-dm-lightbox__heat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	font-family: var(--fl-mono);
	font-size: 11px;
	color: var(--fl-muted-dark);
	white-space: nowrap;
}
.hestia-dm-lightbox__heat .hestia-spicy { margin: 0; vertical-align: 0; }
.hestia-dm-lightbox__heat .hestia-spicy__fire { width: 12px; height: 12px; }

.hestia-dm-lightbox__title {
	display: block;
	margin: 0;
	font-family: var(--fl-serif);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.012em;
	color: var(--fl-ink);
}
.hestia-dm-lightbox__desc {
	max-width: 44ch;
	margin: 16px 0 0;
	font-family: var(--fl-serif);
	font-size: 17px;
	line-height: 1.6;
	color: var(--fl-muted-dark);
}

/* Precio único: fila con filete arriba y rótulo a la izquierda. */
.hestia-dm-lightbox__price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 32px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--fl-line-dark);
	font-family: var(--fl-mono);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	opacity: 1;
	color: var(--fl-ink);
	-webkit-text-stroke: 0.35px currentColor;
}
.hestia-dm-lightbox__price::before {
	content: "Precio";
	font-size: 11.5px;
	color: var(--fl-muted-dark);
	-webkit-text-stroke: 0;
}
.hestia-dm-lightbox__price[hidden] { display: none; }

/* Presentaciones (trago, copa, botella…). */
.hestia-dm-lightbox__variants {
	display: grid;
	grid-template-columns: repeat(var(--pres-n, 2), minmax(0, 1fr));
	gap: 0;
	max-height: none;
	margin: 32px 0 0;
	padding: 0;
	overflow: visible;
	border-top: 1px solid var(--fl-line-dark);
	border-bottom: 1px solid var(--fl-line-dark);
	-webkit-mask-image: none;
	mask-image: none;
}
.hestia-dm-lightbox__variants[hidden] { display: none; }
.hestia-dm-pres {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 26px 12px 24px;
	text-align: center;
}
.hestia-dm-pres + .hestia-dm-pres { border-left: 1px solid var(--fl-line-dark); }
.hestia-dm-pres__icon {
	display: block;
	width: 40px;
	height: 54px;
	color: var(--fl-ink);
}
.hestia-dm-pres__icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hestia-dm-pres__icon .is-liquid { stroke: var(--hestia-cherry); }
.hestia-dm-pres__label {
	margin-top: 16px;
	font-family: var(--fl-mono);
	font-size: 11.5px;
	line-height: 1;
	color: var(--fl-muted-dark);
}
.hestia-dm-pres__price {
	margin-top: 8px;
	font-family: var(--fl-mono);
	font-size: 19px;
	line-height: 1.2;
	color: var(--fl-ink);
	-webkit-text-stroke: 0.35px currentColor;
	white-space: nowrap;
}

/* Los íconos se dibujan al abrir, uno tras otro. */
.hestia-dm-pres__icon path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1);
	transition-delay: calc(0.25s + var(--pres-i, 0) * 0.16s);
}
.hestia-dm-pres__icon .is-liquid { transition-delay: calc(0.75s + var(--pres-i, 0) * 0.16s); }
.hestia-dm-lightbox.is-open .hestia-dm-pres__icon path { stroke-dashoffset: 0; }

/* Etiquetas y alérgenos: filete fino, sin relleno. */
.hestia-dm-lightbox .hestia-dm-pill {
	margin: 0 6px 6px 0;
	padding: 6px 11px;
	border: 1px solid var(--fl-line-dark);
	border-radius: 999px;
	background: none;
	font-family: var(--fl-mono);
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: var(--fl-muted-dark);
}
.hestia-dm-lightbox__allergens .hestia-dm-pill { border-color: color-mix(in srgb, var(--hestia-cherry) 35%, transparent); background: none; color: var(--hestia-cherry); }
.hestia-dm-lightbox__tags { margin-top: 24px; }
.hestia-dm-lightbox__extra { margin-top: 14px; font-family: var(--fl-mono); font-size: 11.5px; color: var(--fl-muted-dark); }

.hestia-dm-lightbox__cta {
	margin-top: 28px;
	padding: 13px 26px;
	border: 1px solid var(--fl-ink);
	border-radius: 8px;
	font-family: var(--fl-serif);
	font-size: 16px;
	font-weight: 400;
}

/* Cerrar: círculo crema con filete, siempre en la esquina de la tarjeta. */
.hestia-dm-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 42px;
	height: 42px;
	border: 1px solid var(--fl-line-dark);
	border-radius: 50%;
	background: color-mix(in srgb, var(--hestia-paper) 94%, transparent);
	color: var(--fl-ink);
	cursor: pointer;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.hestia-dm-lightbox__close:hover,
.hestia-dm-lightbox__close:focus {
	background: var(--fl-cream) !important;
	color: var(--fl-ink) !important;
	border-color: var(--fl-ink);
	transform: rotate(90deg);
}
.hestia-dm-lightbox__close:focus:not(:focus-visible) { border-color: var(--fl-line-dark); transform: none; }
.hestia-dm-lightbox__close svg { width: 16px; height: 16px; }

/* Celular: hoja que sube desde abajo, con asa para deslizar. */
@media (max-width: 600px) {
	.hestia-dm-lightbox {
		align-items: flex-end;
		padding: 0;
	}
	.hestia-dm-lightbox__inner {
		max-width: none;
		max-height: 90vh;
		max-height: 90dvh;
		border-radius: 14px 14px 0 0;
		transform: translateY(100%);
		opacity: 1;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	}
	.hestia-dm-lightbox__inner::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		z-index: 3;
		width: 36px;
		height: 4px;
		margin-left: -18px;
		border-radius: 4px;
		background: color-mix(in srgb, var(--hestia-ink) 18%, transparent);
	}
	.hestia-dm-lightbox__inner.has-image::before { background: color-mix(in srgb, var(--hestia-paper) 85%, transparent); }
	.hestia-dm-lightbox__image { aspect-ratio: 5 / 4; max-height: 44vh; }
	.hestia-dm-lightbox__caption { padding: 30px 24px calc(34px + env(safe-area-inset-bottom)); }
	.hestia-dm-lightbox__inner:not(.has-image) .hestia-dm-lightbox__caption { padding-top: 34px; }
	.hestia-dm-lightbox__title { font-size: 30px; }
	.hestia-dm-lightbox__desc { font-size: 16px; }
	.hestia-dm-lightbox__close { top: 14px; right: 14px; width: 38px; height: 38px; }
	.hestia-dm-pres { padding: 22px 6px 20px; }
	.hestia-dm-pres__price { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
	.hestia-dm-lightbox__inner { transform: none !important; transition: opacity 0.2s ease; }
	.hestia-dm-pres__icon path { stroke-dashoffset: 0; transition: none; }
}

/* ==========================================================================
   FLAMANTE — Alimentación y rótulos del plato (v2.8)
   Íconos de Phosphor Icons (peso «fill»). Alimentación en verde oliva junto al
   nombre, como el picante; «Nuevo» y «Recomendado del chef» sobre el nombre.
   ========================================================================== */
.hestia-diet {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 9px;
	vertical-align: 0.06em;
	color: #4f6b4a;
	white-space: nowrap;
}
.hestia-spicy + .hestia-diet { margin-left: 8px; }
.hestia-diet__item { display: inline-flex; width: 12px; height: 12px; }
.hestia-diet__item svg { width: 100%; height: 100%; }

.hestia-dm-dish__flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.hestia-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px 4px 8px;
	border: 1px solid var(--fl-line-dark);
	border-radius: 999px;
	font-family: var(--fl-mono);
	font-size: 10.5px;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fl-ink);
	white-space: nowrap;
}
.hestia-flag svg { flex: none; width: 11px; height: 11px; }
.hestia-flag--chef { border-color: color-mix(in srgb, var(--hestia-cherry) 38%, transparent); color: var(--hestia-cherry); }

/* En el popup: alimentación junto al picante (ícono + nombre) y rótulos sobre el nombre. */
.hestia-dm-lightbox__meta { flex-wrap: wrap; row-gap: 8px; }
.hestia-dm-lightbox__diet {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	font-family: var(--fl-mono);
	font-size: 11px;
	color: var(--fl-muted-dark);
}
.hestia-dm-lightbox__diet[hidden],
.hestia-dm-lightbox__flags[hidden] { display: none; }
.hestia-dm-lightbox__diet-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hestia-dm-lightbox__diet-item .hestia-diet__item { color: #4f6b4a; }
.hestia-dm-lightbox__flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
/* El popup anula text-transform en todos sus hijos: el rótulo lo recupera. */
.hestia-dm-lightbox .hestia-flag,
.hestia-dm-lightbox .hestia-flag * { text-transform: uppercase; }

/* ---------- Atributos del plato (corte, término, origen…) ---------- */
.hestia-attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hestia-attr {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border: 1px solid color-mix(in srgb, var(--hestia-ink) 18%, transparent);
	border-radius: 999px;
	color: var(--hestia-ink-soft);
	font-family: var(--hestia-font-body);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ---------- Cabecera de dos estados (portada / al hacer scroll) ---------- */
.fl-header .fl-logo-scrolled { display: none; }
.fl-scrolled .fl-header .fl-logo-top { display: none; }
.fl-scrolled .fl-header .fl-logo-scrolled { display: block; }
.fl-header .fl-logo-top, .fl-header .fl-logo-scrolled { animation: fl-logo-in 0.45s ease both; }
@keyframes fl-logo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }