/* Vinipad - Carta Web QR - Estilos (mobile first) - Jade Molano - Septiembre de 2026
   Diseño basado en la plantilla "WineSip" (Avanam Classic): paleta vino/dorado, Arimo + Cormorant Garamond, tarjetas de producto, divisor con icono */

@font-face { font-family: 'Arimo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/arimo.woff2) format('woff2'); }
@font-face { font-family: 'Arimo'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/arimo-italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/cormorant-garamond.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../fonts/cormorant-garamond-italic.woff2) format('woff2'); }

:root {
	--wl-primary: #ae194a;   /* Color principal ("granate": pestañas, categoría seleccionada, precios, icono del divisor). Se sobreescribe desde weblist.php */
	--wl-accent: #ffcc1d;    /* Color de acento ("naranja/dorado": separador del título de sección y botones) */
	--wl-hero-img: none;     /* Fondo del título (local/images/vp_img_bkg_hero.jpg, gestionado desde customimg.php); lo establece weblist.php */
	--wl-hero-veil: rgba(255, 255, 255, 0.5); /* Velado blanco sobre la foto del título (oscuro en modo oscuro) */
	--wl-hero-glow: 255, 255, 255; /* Halo (text-shadow / drop-shadow) de título, subtítulo y separador sobre la foto: blanco en claro, oscuro en modo oscuro */
	--wl-ink: #1a1a1a;
	--wl-ink-2: #666666;
	--wl-ink-3: #8a8a8a;
	--wl-bg: #ffffff;
	--wl-bkg-veil: rgba(255, 255, 255, 0.4); /* Velo sobre la imagen de fondo, para que los encabezados y los textos se lean bien */
	--wl-bkg-veil-2: rgba(255, 255, 255, 0.8); /* Velo sobre la imagen de fondo de la ficha de un artículo */
	--wl-bg-2: #f5f5f5;
	--wl-bg-3: #f0f0f0;
	--wl-line: #e5e5e5;
	--wl-new: #44b367;
	--wl-note-bg: #fff8e1;   /* Aviso de crianza */
	--wl-note-ink: #6b4d00;
	--wl-tile: #ffffff;      /* Fondo de las fotos de producto (blanco también en modo oscuro: las fotos de botellas tienen fondo blanco) */
	--wl-on-accent: #1a1a1a; /* Trazo de lo que va sobre el color de acento (ojo, estrella, +): oscuro en ambos modos */
	--wl-radius: 5px;
	--wl-shadow: 0 2px 10px rgba(0,0,0,.08);
	--wl-shadow-lg: 0 8px 30px rgba(0,0,0,.16);
	--wl-font: 'Arimo', 'Helvetica Neue', Arial, sans-serif;
	--wl-font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--wl-header-h: 56px;
	--wl-gutter: 14px;
	--wl-cols: 2;
	--wl-t: .25s ease;
	--wl-safe-b: env(safe-area-inset-bottom, 0px);
}

html.wl-dark {
	--wl-ink: #f2f2f2;
	--wl-ink-2: #c4c4c8;
	--wl-ink-3: #92929a;
	--wl-bg: #151517;
	--wl-bkg-veil: rgba(21, 21, 23, 0.4);
	--wl-bkg-veil-2: rgba(21, 21, 23, 0.8);
	--wl-bg-2: #212124;
	--wl-bg-3: #2c2c30;
	--wl-line: #36363b;
	--wl-note-bg: #3a2f08;
	--wl-note-ink: #ffe08a;
	--wl-shadow: 0 2px 10px rgba(0,0,0,.4);
	--wl-shadow-lg: 0 8px 30px rgba(0,0,0,.6);
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--wl-bg); color: var(--wl-ink);
	font-family: var(--wl-font); font-size: 15px; line-height: 1.5; letter-spacing: .2px;
	-webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.wl-lock { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--wl-font-head); font-weight: 600; line-height: 1.15; margin: 0; color: var(--wl-ink); }
a, h2 { color: var(--wl-primary); text-decoration: none; }
[hidden] { display: none !important; }

/* ---------- Botones ---------- */
.wl-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border-radius: var(--wl-radius); border: 1px solid transparent;
	font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: background var(--wl-t), color var(--wl-t), border-color var(--wl-t);
}
.wl-btn-primary { background: var(--wl-primary); color: #fff; }
.wl-btn-primary:hover, .wl-btn-primary:focus-visible { background: var(--wl-accent); color: var(--wl-on-accent); }
.wl-btn-accent { background: var(--wl-accent); color: var(--wl-on-accent); }
.wl-btn-accent:hover, .wl-btn-accent:focus-visible { background: var(--wl-primary); color: #fff; }
.wl-btn-outline { background: transparent; color: var(--wl-ink-2); border-color: var(--wl-line); }
.wl-btn-outline:hover, .wl-btn-outline:focus-visible { border-color: var(--wl-primary); color: var(--wl-primary); }
.wl-btn:disabled { opacity: .5; cursor: default; }
.wl-btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-added { animation: wl-added .5s ease; }
@keyframes wl-added { 0% { transform: scale(1); } 35% { transform: scale(1.15); background: var(--wl-new); color: #fff; } 100% { transform: scale(1); } }
.wl-iconbtn {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; border-radius: 50%; color: var(--wl-ink); position: relative; flex: 0 0 auto;
	transition: background var(--wl-t), color var(--wl-t);
}
.wl-iconbtn:hover, .wl-iconbtn:focus-visible { background: var(--wl-bg-3); color: var(--wl-primary); }
.wl-iconbtn.active { color: var(--wl-primary); }
.wl-iconbtn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-badge {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--wl-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
	transition: transform .2s ease;
}
.wl-badge.bump { animation: wl-bump .35s ease; }
@keyframes wl-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* ---------- Cabecera ---------- */
html.wl-dark .wl-ico-sun, html:not(.wl-dark) .wl-ico-moon { display: none; } /* Botón de modo oscuro: sol en modo claro, luna en modo oscuro */
.wl-header {
	position: sticky; top: 0; z-index: 40; background: var(--wl-bg); border-bottom: 1px solid var(--wl-line);
	box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.wl-header-row { display: flex; align-items: center; height: var(--wl-header-h); padding: 0 6px; gap: 2px; }
.wl-brand { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; height: 100%; padding: 8px 6px 8px 2px; }
.wl-brand img { max-height: 40px; max-width: 42vw; width: auto; object-fit: contain; transition: opacity var(--wl-t); }
.wl-brand.wl-zoomed img { opacity: 0; } /* Mientras está ampliado, el de la cabecera se oculta (parece que es el mismo el que crece) */
.wl-header-spacer { flex: 1; }
/* Logotipo ampliado: velo + imagen que se desplaza desde la cabecera al centro de la pantalla */
.wl-logo-zoom { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,0); transition: background .35s ease; cursor: pointer; }
.wl-logo-zoom.show { background: rgba(0,0,0,.62); }
.wl-logo-zoom img { position: fixed; object-fit: contain; border-radius: 6px; background: var(--wl-tile); box-shadow: 0 12px 40px rgba(0,0,0,.35); transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; }

.wl-search { display: flex; align-items: center; margin: 0 var(--wl-gutter) 10px; border: 2px solid var(--wl-primary); border-radius: var(--wl-radius); background: var(--wl-bg); overflow: hidden; }
.wl-search input { flex: 1; min-width: 0; height: 42px; border: 0; padding: 0 14px; font: inherit; font-size: 16px; background: transparent; outline: none; }
.wl-search input::-webkit-search-cancel-button { display: none; }
.wl-search-clear { width: 42px; height: 42px; border: 0; background: transparent; color: var(--wl-ink-3); font-size: 16px; }

/* Filtros por características (desplegables en cascada) */
.wl-filters { padding: 4px var(--wl-gutter) 12px; border-top: 1px solid var(--wl-line); background: var(--wl-bg-2); }
.wl-filters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } /* Dos columnas ya en móvil: con el filtro de precio son varios desplegables */
.wl-filter-wide { grid-column: 1 / -1; }
.wl-filter-col { display: flex; flex-direction: column; min-width: 0; } /* Carta de comidas: característica (izquierda) y alérgeno (derecha), un desplegable por valor elegido */ /* Sólo en móvil: en vinos, la Denominación de origen ocupa la fila entera (tiene los nombres más largos) */
.wl-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; margin: 6px 0 3px; } /* Altura fija: el aspa del filtro activo no debe mover los desplegables de las demás columnas */
.wl-filter label
{
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--wl-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	height: 1.3em;
}
.wl-filter.wl-filter-on label { color: var(--wl-primary); }
.wl-filter-x { flex: 0 0 auto; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: var(--wl-primary); display: flex; align-items: center; justify-content: center; }
.wl-filter-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.wl-filter-x:hover, .wl-filter-x:focus-visible { background: color-mix(in srgb, var(--wl-primary) 12%, transparent); }
.wl-filter select
{
	width: 100%; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); background: var(--wl-bg) no-repeat right 10px center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-size: 16px; font: inherit; font-size: 14px; color: var(--wl-ink); -webkit-appearance: none; appearance: none; outline: none;
}
.wl-filter select:focus { border-color: var(--wl-primary); }
.wl-filter.wl-filter-on select { border-color: var(--wl-primary); color: var(--wl-primary); font-weight: 600; }
.wl-filters-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.wl-filters-foot .wl-btn { min-height: 36px; font-size: 12px; }

/* Barras con desplazamiento horizontal: pista visual (degradado + flecha animada) mientras quede contenido a la derecha */
.wl-scrollwrap { position: relative; }
.wl-scrollhint
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 56px;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--wl-t);
	background: linear-gradient(90deg,
		transparent,
		var(--wl-bg) 120%)
	;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 6px;
	cursor: pointer;
}
.wl-scrollhint::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--wl-primary); border-bottom: 2px solid var(--wl-primary); transform: rotate(-45deg); animation: wl-nudge 1.4s ease-in-out infinite; }
.wl-scrollwrap.wl-canscroll .wl-scrollhint:not(.wl-scrollhint-l) { opacity: 1; pointer-events: auto; } /* Al pulsarla se avanza casi una pantalla */
@keyframes wl-nudge { 0%, 100% { transform: translateX(0) rotate(-45deg); opacity: .55; } 50% { transform: translateX(6px) rotate(-45deg); opacity: 1; } }
.wl-scrollhint-l
{
	right: auto;
	left: 0;
	justify-content: flex-start;
	padding-right: 0;
	padding-left: 6px;
	background: linear-gradient(270deg,
		transparent,
		var(--wl-bg) 120%)
	;
}
.wl-scrollhint-l::after { transform: rotate(135deg); animation-name: wl-nudge-l; }
.wl-scrollwrap.wl-canscroll-l .wl-scrollhint-l { opacity: 1; pointer-events: auto; }
@keyframes wl-nudge-l { 0%, 100% { transform: translateX(0) rotate(135deg); opacity: .55; } 50% { transform: translateX(-6px) rotate(135deg); opacity: 1; } }
/* Pista vertical (resumen de las tarjetas) */
.wl-scrollhint-v { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 22px; pointer-events: none; opacity: 0; transition: opacity var(--wl-t); background: linear-gradient(180deg, transparent, var(--wl-bg-2) 300%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; cursor: pointer; }
.wl-scrollhint-v::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--wl-primary); border-bottom: 2px solid var(--wl-primary); transform: rotate(45deg); animation: wl-nudge-v 1.4s ease-in-out infinite; }
.wl-card-metawrap.wl-canscroll .wl-scrollhint-v:not(.wl-scrollhint-t) { opacity: 1; pointer-events: auto; }
@keyframes wl-nudge-v { 0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: .55; } 50% { transform: translateY(2px) rotate(45deg); opacity: 1; } }
.wl-scrollhint-t { bottom: auto; top: 0; align-items: flex-start; padding-bottom: 0; padding-top: 3px; background: linear-gradient(0deg, transparent, var(--wl-bg-2) 300%); }
.wl-scrollhint-t::after { transform: rotate(-135deg); animation-name: wl-nudge-t; }
.wl-card-metawrap.wl-canscroll-t .wl-scrollhint-t { opacity: 1; pointer-events: auto; }
@keyframes wl-nudge-t { 0%, 100% { transform: translateY(3px) rotate(-135deg); opacity: .55; } 50% { transform: translateY(-2px) rotate(-135deg); opacity: 1; } }

.wl-cats { display: flex; gap: 4px; padding: 0 var(--wl-gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--wl-line); }
.wl-cats::-webkit-scrollbar { display: none; }
.wl-cats button {
	flex: 0 0 auto; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--wl-ink-2);
	font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; position: relative;
}
.wl-cats button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--wl-primary); transform: scaleX(0); transition: transform var(--wl-t); }
.wl-cats button.active { color: var(--wl-primary); }
.wl-cats button.active::after { transform: scaleX(1); }
.wl-cats button.wl-cat-menu { color: var(--wl-ink); }
.wl-cats button.wl-cat-menu.active { color: var(--wl-primary); }

/* ---------- Portada ---------- */
.wl-hero {
	text-align: center; padding: 26px var(--wl-gutter) 18px;
	background-color: var(--wl-bg-3); /* Foto del título con un velado encima para que se lean los textos */
	background-image: linear-gradient(var(--wl-hero-veil), var(--wl-hero-veil)), var(--wl-hero-img);
	background-size: cover; background-position: right center; background-repeat: no-repeat; /* Como antes (cover), anclada a la derecha para que la botella se vea en todos los anchos */
}
html.wl-dark .wl-hero
{
	--wl-hero-veil: rgba(30, 30, 34, 0.4);
	--wl-hero-glow: 128, 128, 128;
	background-color: #3c3c42;
}
.wl-title
{
	font-size: 34px;
	font-weight: 600;
	letter-spacing: .3px;
	text-shadow: 0 0 8px rgb(var(--wl-hero-glow)), 0 0 40px rgb(var(--wl-hero-glow));
}
.wl-subtitle
{
	margin: 4px 0 0;
	color: var(--wl-ink);
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase; min-height: 1.4em;
	font-weight: bold;
	text-shadow: 0 0 4px rgb(var(--wl-hero-glow)), 0 0 20px rgb(var(--wl-hero-glow));
}
.wl-divider
{
	display: block;
	margin: 8px auto 0;
	width: 180px;
	height: 22px;
	color: var(--wl-primary);
}
.wl-divider svg
{
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter:
		drop-shadow(-1px -1px 0px rgba(var(--wl-hero-glow), 0.2))
		drop-shadow(1px -1px 0px rgba(var(--wl-hero-glow), 0.2))
		drop-shadow(1px 1px 0px rgba(var(--wl-hero-glow), 0.2))
		drop-shadow(-1px 1px 0px rgba(var(--wl-hero-glow), 0.2));
}

/* ---------- Modo maridaje (vinos que maridan con un plato / platos que maridan con un vino) ---------- */
.wl-searchbar > svg { stroke-width: 2; }
.wl-pairbar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px var(--wl-gutter); background: color-mix(in srgb, var(--wl-primary) 10%, var(--wl-bg)); border-bottom: 1px solid var(--wl-line); color: var(--wl-primary); }
.wl-pairbar > svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wl-pairbar-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.wl-map .wl-pairbar { flex: 0 0 auto; } /* Barra de maridaje / filtros sobre el mapa */
.wl-detail-pair { margin-top: 14px; }
.wl-detail-pair .wl-btn { width: 100%; color: var(--wl-primary); border-color: var(--wl-primary); }
.wl-detail-pair .wl-btn:hover, .wl-detail-pair .wl-btn:focus-visible { background: var(--wl-primary); color: #fff; }
.wl-btn-pair .wl-picon { height: 22px; width: 22px; stroke-width: 1.5px; color: currentColor; }

/* ---------- Tipos de la categoría (carrusel de portada, al estilo de las categorías de WineSip) ---------- */
.wl-typebar { border-bottom: 1px solid var(--wl-line); background: var(--wl-bg); }
.wl-types { display: flex; gap: 6px; padding: 14px var(--wl-gutter) 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Sin scroll-snap: el encaje al soltar impedía reposar en el tope izquierdo */
.wl-types::-webkit-scrollbar { display: none; }
.wl-types button { flex: 0 0 auto; width: 88px; padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--wl-ink-2); }
.wl-type-img { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; background: var(--wl-bg-2); border: 2px solid var(--wl-line); display: flex; align-items: center; justify-content: center; transition: border-color var(--wl-t), transform var(--wl-t), box-shadow var(--wl-t); }
.wl-type-img img { width: 100%; height: 100%; object-fit: cover; }
.wl-type-img.wl-bottle img { object-fit: contain; padding: 6px; background: var(--wl-tile); }
.wl-types button.wl-type-tag .wl-type-img { border-color: color-mix(in srgb, var(--wl-accent) 70%, var(--wl-line)); border-style: dashed; }
.wl-types button.wl-type-tag.active .wl-type-img { border-color: var(--wl-primary); border-style: solid; }
.wl-type-img > svg { width: 44%; height: 44%; fill: none; stroke: var(--wl-ink-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.wl-type-img figure.wl-ph { background-size: auto 80%; border-radius: 50%; }
.wl-types button:hover .wl-type-img { transform: translateY(-2px); box-shadow: var(--wl-shadow); }
.wl-types button.active { color: var(--wl-primary); }
.wl-types button.active .wl-type-img { border-color: var(--wl-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wl-primary) 22%, transparent); }
.wl-type-name { font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; max-width: 88px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-type-name small { display: block; font-weight: 400; color: var(--wl-ink-3); font-size: 11px; }

/* ---------- Destacados ("Selección del sumiller") ---------- */
.wl-highlights { padding: 18px 0 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--wl-accent) 14%, var(--wl-bg)), var(--wl-bg)); border-bottom: 1px solid var(--wl-line); }
.wl-hl-title { font-size: 26px; text-align: center; padding: 0 var(--wl-gutter); }
.wl-hl-title::before { content: '★'; color: var(--wl-accent); margin-right: 8px; font-size: .8em; }
.wl-hl-title::after { content: ''; display: block; width: 46px; height: 2px; margin: 8px auto 12px; background: var(--wl-accent); }
.wl-hl-list { display: flex; gap: 12px; padding: 4px var(--wl-gutter) 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Sin scroll-snap (ver .wl-types) */
.wl-hl-list::-webkit-scrollbar { display: none; }
.wl-hl-list .wl-card { flex: 0 0 auto; width: min(68vw, 240px); border-color: color-mix(in srgb, var(--wl-accent) 60%, var(--wl-line)); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.wl-hl-list .wl-card .wl-flag { background: var(--wl-accent); color: var(--wl-on-accent); }

/* ---------- Lista ---------- */
.wl-main { padding: var(--wl-gutter) var(--wl-gutter) 30px; max-width: 1430px; margin: 0 auto; min-height: 50vh; }
/* Imagen de fondo de la carta (customimg.php): fija, recortada a pantalla y con un velo encima para no restar legibilidad */
.wl-hasbkg .wl-main { background-image: linear-gradient(var(--wl-bkg-veil), var(--wl-bkg-veil)), var(--wl-bkg-img); background-attachment: fixed; background-position: center center; background-size: cover; background-repeat: no-repeat; }
.wl-hasbkg .wl-card { background: color-mix(in srgb, var(--wl-bg-2) 50%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Las tarjetas dejan ver el fondo sin perder legibilidad */
.wl-status
{
	text-align: center;
	color: var(--wl-ink-1);
	padding: 40px 10px;
	background: color-mix(in srgb, var(--wl-bg-2) 50%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
	border-radius: 10px;
	font-weight: 600;
}
.wl-status .wl-btn { margin-top: 14px; }
.wl-status.wl-loading::before { content: ''; display: block; width: 32px; height: 32px; margin: 0 auto 12px; border: 3px solid var(--wl-line); border-top-color: var(--wl-primary); border-radius: 50%; animation: wl-spin .8s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }

.wl-list { display: grid; grid-template-columns: repeat(var(--wl-cols), minmax(0, 1fr)); gap: var(--wl-gutter); }
.wl-sect { grid-column: 1 / -1; margin: 10px 0 -2px; }
.wl-sect h2
{
	font-size: 30px;
	text-align: center;
	padding-bottom: 6px;
	position: relative;
	text-shadow:0 0 8px rgb(var(--wl-hero-glow)), 0 0 40px rgb(var(--wl-hero-glow));
}
.wl-sect h2::after { content: ''; display: block; width: 46px; height: 2px; margin: 8px auto 0; background: var(--wl-accent); }
.wl-sect h3
{
	font-size: 28px; color: var(--wl-primary);
	text-shadow: 0 0 2px var(--wl-primary),
		0 0 4px rgb(var(--wl-hero-glow)),
		0 0 15px rgba(var(--wl-hero-glow), 0.8)
	;
	background-color: rgba(222, 222, 222, 0.35);
    border-radius: var(--wl-radius);
    padding: 3px 8px;
}
html.wl-dark .wl-sect h3
{
	text-shadow: 0 0 2px var(--wl-primary),
		0 0 10px rgba(var(--wl-hero-glow))
	;
}
.wl-sect h4
{
	font-family: var(--wl-font);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--wl-ink);
	background-color: rgba(222, 222, 222, 0.35);
    border-radius: var(--wl-radius);
    padding: 3px 8px;
}
.wl-sect + .wl-sect { margin-top: 0; }

.wl-card {
	position: relative; display: flex; flex-direction: column; background: var(--wl-bg-2); border: 1px solid var(--wl-line); border-radius: var(--wl-radius);
	overflow: hidden; transition: box-shadow var(--wl-t), transform var(--wl-t); cursor: pointer;
}
.wl-card:hover { box-shadow: var(--wl-shadow-lg); }
.wl-card:active { transform: scale(.985); }
.wl-card-img { position: relative; aspect-ratio: 4 / 5; background: var(--wl-tile); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wl-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform .4s ease; }
.wl-card-img.wl-square img { object-fit: cover; padding: 0; }
.wl-card-img.wl-photo img { object-fit: cover; padding: 0; }
.wl-card:hover .wl-card-img img { transform: scale(1.04); }
.wl-card-img.wl-noimg { background: var(--wl-tile); }
.wl-card-img.wl-noimg > svg { width: 42%; height: 42%; stroke: var(--wl-line); stroke-width: 1.2; fill: none; }
/* Siluetas genéricas sin marco (hojas vp-public_weblist_ph_ct*.css y vp-public_menulist_img.css, cargadas según la categoría) */
figure.wl-ph { margin: 0; width: 100%; height: 100%; background-color: var(--wl-tile); background-repeat: no-repeat; background-position: center; background-size: auto 92%; } /* Las siluetas tienen fondo blanco opaco: baldosa blanca también en modo oscuro, como las fotos */
.wl-ph-menu { width: 100%; height: 100%; }
.wl-ph-menu ul { list-style: none; margin: 0; padding: 0; width: 100%; height: 100%; }
.wl-ph-menu li { width: 100%; height: 100%; background-size: cover !important; background-position: center; }
.wl-cart-line-img figure.wl-ph { background-size: auto 86%; }
.wl-detail-cover figure.wl-ph { background-size: auto 78%; }
.wl-menu .wl-card-img { aspect-ratio: 4 / 3; }
.wl-flag { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 3px; background: var(--wl-new); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; z-index: 2; }
.wl-flag.wl-flag-aging { background: var(--wl-accent); color: var(--wl-on-accent); }
.wl-card-body { padding: 10px 10px 12px; display: flex; flex-direction: column; flex: 1; gap: 3px; background: none; }
.wl-card-brand { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--wl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-card-name { font-family: var(--wl-font); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--wl-ink); } /* Nombre completo (sin recortes) */
.wl-card-name .wl-vintage { color: var(--wl-ink-2); font-weight: 400; font-size: .85em; white-space: nowrap; }
.wl-card-metawrap { position: relative; }
.wl-card-meta { font-size: 12px; color: var(--wl-ink); line-height: 1.35; max-height: calc(1.35em * 4 + 2px); overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* Cuatro líneas; el resto se desplaza */
.wl-card-meta::-webkit-scrollbar { display: none; }
.wl-card-metawrap.wl-canscroll .wl-card-meta { padding-bottom: 14px; }
.wl-card-metawrap.wl-canscroll-t .wl-card-meta { padding-top: 12px; }
.wl-card-meta span { display: block; }
.wl-card-meta b { font-weight: 500; color: var(--wl-ink-2); }
.wl-card-prices { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.wl-price { display: inline-flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.wl-price b { font-size: 16px; font-weight: 700; color: var(--wl-primary); white-space: nowrap; }
.wl-price small { font-size: 10px; color: var(--wl-ink-2); text-transform: uppercase; letter-spacing: .4px; }
.wl-price .wl-plabel { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; }
.wl-price .wl-sec { font-size: 11px; color: var(--wl-ink); text-transform: none; letter-spacing: 0; }
.wl-price.wl-price-alt b { font-size: 13px; color: var(--wl-ink-2); }
/* Iconos de consumo (caja 40x64): el color es el del texto y el grosor de trazo se fija aquí */
.wl-picon { height: 18px; width: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; color: var(--wl-ink-2); }
.wl-picon path, .wl-picon polyline, .wl-picon line, .wl-picon rect, .wl-picon circle, .wl-picon ellipse { vector-effect: non-scaling-stroke; } /* Trazo en píxeles: igual de fino en botellas altas y en dibujos anchos */
.wl-card-view {
	position: absolute; right: 8px; top: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0;
	background: var(--wl-accent); color: var(--wl-on-accent); box-shadow: 0 2px 8px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center;
	transition: background var(--wl-t), color var(--wl-t), transform .15s ease; z-index: 2;
}
.wl-card-view svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wl-card-view:hover, .wl-card-view:focus-visible { background: var(--wl-primary); color: #fff; }
.wl-card-view:active { transform: scale(.9); }

.wl-more { text-align: center; padding: 20px 0 8px; grid-column: 1 / -1; }
.wl-sentinel { height: 1px; }

.wl-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px var(--wl-gutter) calc(26px + var(--wl-safe-b)); border-top: 1px solid var(--wl-line); background: var(--wl-bg-2); font-size: 12px; color: var(--wl-ink-3); text-align: center; }
.wl-footer a { color: var(--wl-ink-3); }
.wl-footer a b { color: var(--wl-primary); font-weight: 700; }

/* ---------- Paneles laterales ---------- */
.wl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 60; opacity: 0; transition: opacity var(--wl-t); }
.wl-overlay.show { opacity: 1; }
.wl-drawer, .wl-cart {
	position: fixed; top: 0; bottom: 0; width: min(88vw, 360px); background: var(--wl-bg); z-index: 70; display: flex; flex-direction: column;
	box-shadow: var(--wl-shadow-lg); transition: transform .3s ease; overflow: hidden;
}
.wl-drawer { left: 0; transform: translateX(-105%); overflow-y: auto; }
.wl-drawer.open { transform: translateX(0); }
.wl-cart { right: 0; transform: translateX(105%); width: min(92vw, 400px); }
.wl-cart.open { transform: translateX(0); }
.wl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--wl-line); min-height: var(--wl-header-h); }
.wl-drawer-title { cursor: pointer; }
.wl-drawer-by { text-decoration: none; color: inherit; cursor: pointer; }
.wl-drawer-by:hover { text-decoration: underline; }
.wl-drawer-title { font-family: var(--wl-font-head); font-size: 24px; font-weight: 700; font-style: italic; color: var(--wl-primary); line-height: 1.1; }
.wl-drawer-by { display: block; font-family: var(--wl-font); font-style: normal; font-weight: 400; font-size: 11px; letter-spacing: .6px; color: var(--wl-ink-3); margin-top: 2px; }
.wl-drawer-sect { font-family: var(--wl-font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--wl-ink-3); padding: 18px 18px 6px; }
.wl-drawer-list { list-style: none; margin: 0; padding: 0; }
.wl-drawer-list button { display: flex; align-items: center; width: 100%; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--wl-line); background: none; text-align: left; font-size: 15px; font-weight: 500; color: var(--wl-ink); }
.wl-drawer-list button.active { color: var(--wl-primary); font-weight: 700; }
.wl-drawer-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 18px 24px; }
.wl-drawer-langs button { width: auto; padding: 7px 12px; border: 1px solid var(--wl-line); border-radius: 16px; font-size: 13px; font-weight: 500; }
.wl-drawer-langs button.active { background: var(--wl-primary); border-color: var(--wl-primary); color: #fff; }

/* ---------- Carrito ---------- */
.wl-cart-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wl-cart-empty { text-align: center; padding: 60px 24px; color: var(--wl-ink-2); }
.wl-cart-empty svg { width: 64px; height: 64px; stroke: var(--wl-line); stroke-width: 1.3; fill: none; margin: 0 auto 14px; }
.wl-cart-empty h3 { font-size: 24px; margin-bottom: 6px; }
.wl-cart-line { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--wl-line); }
.wl-cart-line-img { width: 54px; height: 68px; flex: 0 0 auto; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); background: var(--wl-tile); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wl-cart-line-img img { width: 100%; height: 100%; object-fit: contain; }
.wl-cart-line-img.wl-photo img { object-fit: cover; }
.wl-cart-line-img > svg { width: 45%; height: 60%; fill: none; stroke: var(--wl-line); stroke-width: 1.4; }
.wl-cart-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wl-cart-line-name { font-size: 14px; font-weight: 500; line-height: 1.3; }
.wl-cart-line-type { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--wl-ink-3); display: flex; align-items: center; gap: 5px; }
.wl-cart-line-type .wl-picon { height: 16px; width: 16px; color: var(--wl-ink-3); }
.wl-cart-line-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 8px; }
.wl-qty { display: inline-flex; align-items: center; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); overflow: hidden; }
.wl-qty button { width: 34px; height: 32px; border: 0; background: var(--wl-bg-2); font-size: 18px; line-height: 1; color: var(--wl-ink); }
.wl-qty button:hover { background: var(--wl-bg-3); }
.wl-qty span { min-width: 32px; text-align: center; font-weight: 600; font-size: 14px; }
.wl-cart-line-price { text-align: right; line-height: 1.2; }
.wl-cart-line-price b { display: block; color: var(--wl-primary); font-size: 15px; }
.wl-cart-line-price small { color: var(--wl-ink-3); font-size: 11px; }
.wl-cart-line-remove { align-self: flex-start; width: 30px; height: 30px; border: 0; background: none; color: var(--wl-ink-3); font-size: 16px; margin: -4px -6px 0 0; }
.wl-cart-line-remove:hover { color: var(--wl-primary); }
.wl-cart-foot { border-top: 2px solid var(--wl-line); padding: 12px 16px calc(12px + var(--wl-safe-b)); background: var(--wl-bg-2); }
.wl-cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--wl-ink-2); }
.wl-cart-total-num { text-align: right; text-transform: none; letter-spacing: 0; }
.wl-cart-total-num b { font-size: 24px; color: var(--wl-ink); }
.wl-cart-total-num small { display: block; font-size: 12px; color: var(--wl-ink-3); }
.wl-cart-actions { display: flex; gap: 10px; }
.wl-cart-actions .wl-btn-outline { flex: 0 0 auto; }
.wl-cart-actions .wl-btn-primary { flex: 1; }

/* ---------- Ficha de artículo ---------- */
.wl-detail { position: fixed; inset: 0; z-index: 50; background: var(--wl-bg); display: flex; flex-direction: column; animation: wl-slide .6s cubic-bezier(.22, .61, .36, 1); } /* La ficha (y el mapa) entran deslizándose desde el borde derecho, pantalla completa, en 600 ms */
@keyframes wl-slide { from { transform: translateX(100%); } to { transform: none; } }
.wl-detail-bar { display: flex; align-items: center; gap: 4px; height: var(--wl-header-h); padding: 0 6px; border-bottom: 1px solid var(--wl-line); flex: 0 0 auto; }
.wl-detail-bar-title { flex: 1; min-width: 0; text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--wl-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-detail-scrollwrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wl-detail-body
{
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: calc(24px + var(--wl-safe-b));
	background-image: linear-gradient(var(--wl-bkg-veil-2),
		var(--wl-bkg-veil-2)),
		var(--wl-bkg-img)
	;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* Flecha animada de la ficha, justo sobre el botón "Añadir": visible mientras quede contenido por debajo */
.wl-detail-hint { height: 36px; padding-bottom: 6px; background: linear-gradient(180deg, transparent, var(--wl-bg) 65%); }
.wl-detail-hint::after { width: 11px; height: 11px; }
.wl-detail-scrollwrap.wl-canscroll .wl-detail-hint { opacity: 1; pointer-events: auto; }
.wl-detail-inner { max-width: 1100px; margin: 0 auto; }
.wl-detail-gallery { position: relative; background: var(--wl-bg-2); }
.wl-detail-cover { height: 52vh; max-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wl-detail-cover img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.wl-detail-cover.wl-photo img { object-fit: cover; padding: 0; }
.wl-detail-cover { background: var(--wl-tile); }
.wl-detail-cover.wl-photo { background: var(--wl-bg-2); }
.wl-detail-cover.wl-noimg > svg { width: 30%; height: 30%; stroke: var(--wl-line); stroke-width: 1.2; fill: none; }
.wl-detail-menu .wl-detail-cover { height: auto; max-height: none; aspect-ratio: 4 / 3; } /* Fotos de platos (apaisadas): sin hueco vertical */
.wl-detail-thumbs { display: flex; gap: 8px; justify-content: center; padding: 10px; }
.wl-detail-thumbs button { width: 56px; height: 56px; padding: 0; border: 2px solid var(--wl-line); border-radius: var(--wl-radius); background: var(--wl-bg); overflow: hidden; }
.wl-detail-thumbs button.active { border-color: var(--wl-primary); }
.wl-detail-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.wl-detail-info { padding: 18px var(--wl-gutter) 0; }
.wl-detail-brand { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--wl-ink-3); margin-bottom: 6px; }
.wl-detail-name { font-size: 30px; line-height: 1.1; }
.wl-detail-name .wl-vintage { color: var(--wl-ink-3); font-weight: 400; font-size: .75em; margin-left: 6px; }
.wl-detail-desc
{
	margin: 0 0 18px;
	color: var(--wl-ink-2);
	line-height: 1.7;
	white-space: pre-wrap;
	padding-top: 10px;
}
.wl-detail-aging { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--wl-radius); background: var(--wl-note-bg); color: var(--wl-note-ink); font-size: 14px; }
.wl-detail-aging b { display: block; font-size: 15px; }
/* Opciones de consumo (botella, copa, tienda, chupito...): cada fila es un botón que añade al pedido, como en la app de tablet */
.wl-detail-prices { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.wl-detail-price { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); background: var(--wl-bg); text-align: left; transition: border-color var(--wl-t), background var(--wl-t); }
.wl-detail-price.wl-pmain { border-color: var(--wl-primary); box-shadow: inset 3px 0 0 var(--wl-primary); }
button.wl-detail-price:hover, button.wl-detail-price:focus-visible { border-color: var(--wl-primary); background: var(--wl-bg-2); }
button.wl-detail-price:active { transform: scale(.99); }
.wl-detail-price-icon { flex: 0 0 auto; width: 34px; display: flex; justify-content: center; }
.wl-detail-price-icon .wl-picon { height: 34px; width: 34px; stroke-width: 1.7px; color: var(--wl-ink-2); }
.wl-detail-price.wl-pmain .wl-detail-price-icon .wl-picon { color: var(--wl-primary); }
.wl-detail-price-label { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--wl-ink); }
.wl-detail-price-num { text-align: right; line-height: 1.15; }
.wl-detail-price-num b { font-size: 21px; color: var(--wl-primary); white-space: nowrap; }
.wl-detail-price-num small { display: block; font-size: 12px; color: var(--wl-ink-3); }
.wl-detail-price-add { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--wl-accent); color: var(--wl-on-accent); display: flex; align-items: center; justify-content: center; }
.wl-detail-price-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
button.wl-detail-price:hover .wl-detail-price-add { background: var(--wl-primary); color: #fff; }
.wl-detail-vat { margin: 8px 0 0; font-size: 12px; color: var(--wl-ink-3); }
.wl-detail-table { margin: 22px var(--wl-gutter) 0; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); overflow: hidden; }
.wl-detail-table h3 { font-family: var(--wl-font); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; padding: 10px 14px; background: var(--wl-bg-2); border-bottom: 1px solid var(--wl-line); }
.wl-detail-table dl { margin: 0; display: grid; grid-template-columns: minmax(96px, 36%) 1fr; }
.wl-detail-table dt, .wl-detail-table dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--wl-line); font-size: 14px; }
.wl-detail-table dt { color: var(--wl-ink-3); font-weight: 500; }
.wl-detail-table dd { color: var(--wl-ink); }
.wl-detail-table dt:nth-last-of-type(1), .wl-detail-table dd:last-of-type { border-bottom: 0; }
.wl-detail-table dd.wl-full { grid-column: 1 / -1; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wl-chips li { padding: 4px 10px; border-radius: 14px; background: var(--wl-bg-3); font-size: 12px; color: var(--wl-ink-2); }

/* ---------- Carta de comidas: los platos sin foto van en una tarjeta en fila que ocupa todo el ancho de la rejilla (sin imagen ni silueta): nombre, alérgenos
   y descripción a la izquierda; características arriba y precios abajo a la derecha. Los platos con foto conservan la tarjeta en columna. Fuera de la lista
   principal (carrusel de destacados) los bloques "main"/"side" no participan en la maquetación (display: contents) ---------- */
.wl-card-main, .wl-card-side { display: contents; }
.wl-list > .wl-card-row { grid-column: 1 / -1; }
.wl-list > .wl-card-row .wl-card-body { flex: 1 1 auto; min-width: 0; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px 16px; }
.wl-list > .wl-card-row .wl-card-main { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; }
.wl-list > .wl-card-row .wl-card-main > .wl-flag { position: static; align-self: flex-start; margin-bottom: 2px; } /* Destacado: delante del nombre */
.wl-list > .wl-card-row .wl-card-side { display: flex; flex: 0 1 auto; max-width: 45%; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; text-align: right; }
.wl-list > .wl-card-row .wl-card-feats { margin: 0; align-items: flex-end; }
.wl-list > .wl-card-row .wl-card-feats li { justify-content: flex-end; text-align: right; }
.wl-list > .wl-card-row .wl-card-prices { margin-top: auto; padding-top: 0; justify-content: flex-end; }
.wl-list > .wl-card-row .wl-card-meta { max-height: none; overflow: visible; } /* Descripción completa, sin desplazamiento */
@media (max-width: 539px) { /* Móvil: características y precios en una fila bajo el texto (características a la izquierda, precios a la derecha) */
	.wl-list > .wl-card-row .wl-card-side { flex: 1 1 100%; max-width: none; flex-direction: row; align-items: flex-end; justify-content: space-between; text-align: left; }
	.wl-list > .wl-card-row .wl-card-feats { align-items: flex-start; }
	.wl-list > .wl-card-row .wl-card-feats li { justify-content: flex-start; text-align: left; }
	.wl-list > .wl-card-row .wl-card-prices { margin-left: auto; }
}

/* ---------- Alérgenos de los platos: iconos del sprite de la carta clásica (public/img/vp-public_allergens.png, 25x25, clases allg_NN de vp-public_menulist.css) ---------- */
.wl-allg { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; } /* Tarjeta: sólo iconos, bajo el nombre y antes de la descripción */
.wl-card-feats { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--wl-ink); } /* Tarjeta: características con icono, una por línea, tras la descripción */
.wl-card-feats li { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wl-allg [class^="allg_"], .wl-allg-item [class^="allg_"], .wl-allg-item [class^="feat_"], .wl-card-feats [class^="feat_"] { display: block; flex: 0 0 auto; width: 25px; height: 25px; border-radius: 13px; background-color: #ffffff; background-image: url('../img/vp-public_allergens.png'); background-repeat: no-repeat; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.35); } /* Propiedades sueltas: el atajo "background" pisaría la posición de las clases allg_NN */
.allg_01 { background-position: 0 0; }
.allg_02 { background-position: -25px 0; }
.allg_03 { background-position: -50px 0; }
.allg_04 { background-position: -75px 0; }
.allg_05 { background-position: -100px 0; }
.allg_06 { background-position: -125px 0; }
.allg_07 { background-position: -150px 0; }
.allg_08 { background-position: 0 -25px; }
.allg_09 { background-position: -25px -25px; }
.allg_10 { background-position: -50px -25px; }
.allg_11 { background-position: -75px -25px; }
.allg_12 { background-position: -100px -25px; }
.allg_13 { background-position: -125px -25px; }
.allg_14 { background-position: -150px -25px; }
.allg_15 { background-position: -25px 0; } /* "Marisco" (alérgeno 15 de la base de datos): el sprite sólo tiene los 14 de la UE, se usa el de crustáceos */
.wl-feat-list [class^="feat_"], .wl-card-feats [class^="feat_"] { background-image: url('../img/vp-public_features.png'); } /* Características: img/te-panel_ico_feat00..04.png en fila (25x25) */
.feat_00 { background-position: 0 0; }
.feat_01 { background-position: -25px 0; }
.feat_02 { background-position: -50px 0; }
.feat_03 { background-position: -75px 0; }
.feat_04 { background-position: -100px 0; }
.wl-feat-list { margin-top: 10px; }
.wl-allg-list + .wl-detail-desc { margin-top: 10px; }
.wl-allg-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; } /* Ficha: icono y nombre, alineados a la izquierda y saltando de línea */
.wl-allg-item { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--wl-ink-2); min-width: 0; }
/* Pestañas: la barra tiene pista de desplazamiento y los paneles se apilan en la misma celda para que la altura sea la del más largo */
.wl-tabs { margin: 22px var(--wl-gutter) 0; }
.wl-tabs .wl-scrollwrap { border-bottom: 2px solid var(--wl-line); }
.wl-tabs-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.wl-tabs-nav::-webkit-scrollbar { display: none; }
.wl-tabs-nav button { flex: 0 0 auto; padding: 10px 14px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--wl-ink-2); position: relative; white-space: nowrap; }
.wl-tabs-nav button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--wl-primary); transform: scaleX(0); transition: transform var(--wl-t); }
.wl-tabs-nav button.active { color: var(--wl-primary); }
.wl-tabs-nav button.active::after { transform: scaleX(1); }
.wl-tabs-panes { display: grid; }
.wl-tabs-pane { grid-area: 1 / 1; padding: 16px 2px 0; color: var(--wl-ink-2); line-height: 1.75; white-space: pre-line; visibility: hidden; }
.wl-tabs-pane.active { visibility: visible; }
.wl-detail-cta { flex: 0 0 auto; padding: 10px var(--wl-gutter) calc(10px + var(--wl-safe-b)); background: var(--wl-bg); border-top: 1px solid var(--wl-line); display: flex; justify-content: center; gap: 10px; } /* Pie fijo de la ficha: nada de la página asoma por debajo */
.wl-detail-cta .wl-btn { flex: 1 1 auto; max-width: 480px; }

/* ---------- Modal ---------- */
/* Mapa interactivo de Denominaciones de Origen (botón bajo el encabezado del país; ventana a pantalla completa con zoom) */
.wl-map-btn { display: flex; width: calc(100% - 2 * var(--wl-gutter)); margin: 24px var(--wl-gutter) 16px; justify-content: center; font-size: 15px; padding: 12px 16px; }
.wl-map { position: fixed; inset: 0; z-index: 70; background: var(--wl-bg); display: flex; flex-direction: column; animation: wl-slide .6s cubic-bezier(.22, .61, .36, 1); }
.wl-map > .wl-detail-bar { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; } /* Pulsación larga en la barra de título: activa todas las D.O. (como Alt+D) sin seleccionar texto ni abrir menús */
.wl-map-view { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--wl-bg-2); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.wl-map-view.dragging { cursor: grabbing; }
.wl-map-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wl-map-canvas svg { display: block; }
.wl-map svg .land { fill: var(--wl-bg); stroke: var(--wl-ink-3); stroke-width: .6; }
.wl-map svg .inset { fill: none; stroke: var(--wl-ink-3); stroke-width: 1; } /* Recuadro de Canarias */
.wl-map svg .do { fill: var(--wl-bg-3); stroke: var(--wl-ink-3); stroke-width: .5; pointer-events: none; transition: fill .15s; }
#map-title { white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* El título del mapa puede ocupar dos líneas */
.wl-map svg .do.on { fill: color-mix(in srgb, var(--wl-primary) 40%, var(--wl-bg)); stroke: var(--wl-primary); pointer-events: auto; cursor: pointer; } /* Zonas con vinos: color principal pálido */
.wl-map svg .do.on:hover { fill: color-mix(in srgb, var(--wl-primary) 60%, var(--wl-bg)); }
.wl-map svg .do.sel, .wl-map svg .do.sel:hover { fill: var(--wl-accent); stroke: var(--wl-on-accent); stroke-width: 1; } /* Zona pulsada: color de acento (también con el ratón encima) */
/* Zonas que engloban a otras (Cataluña, Cava, Valencia, Islas Canarias): sólo contorno grueso con margen; se pulsa sobre el trazo o en su rótulo */
.wl-map svg .do.do-frame { fill: none; stroke: var(--wl-ink-3); stroke-width: 2.5px; stroke-linejoin: round; pointer-events: none; }
.wl-map svg .do.do-frame.on, .wl-map svg .do.do-frame.on:hover { fill: none; stroke: var(--wl-primary); stroke-width: 6px; pointer-events: stroke; cursor: pointer; }
.wl-map svg .do.do-frame.sel, .wl-map svg .do.do-frame.sel:hover { fill: none; stroke: var(--wl-accent); stroke-width: 8px; }
/* Rótulos de las zonas con vinos, con línea hacia fuera (los crea el JS al abrir el mapa) */
.wl-map svg .wl-map-lbl { cursor: pointer; }
.wl-map svg .wl-map-lbl line { stroke: var(--wl-ink-2); stroke-width: 1.5px; fill: none; }
.wl-map svg .wl-map-lbl circle { fill: var(--wl-ink); stroke: none; } /* Punto en el extremo de la línea que toca la zona */
.wl-map svg .wl-map-lbl text { font-family: var(--wl-font); font-size: 22px; font-weight: 600; fill: var(--wl-ink); paint-order: stroke; stroke: var(--wl-bg-2); stroke-width: 6px; stroke-linejoin: round; }
.wl-map svg .wl-map-lbl.sel text { fill: var(--wl-accent); stroke: var(--wl-on-accent); stroke-width: 4px; } /* Rótulo de la zona pulsada: acento con halo oscuro para que se lea */
.wl-map svg .wl-map-lbl.sel line { stroke: var(--wl-ink); stroke-width: 2.5px; }
.wl-map-foot { flex: 0 0 auto; padding: 12px var(--wl-gutter) calc(14px + var(--wl-safe-b)); border-top: 1px solid var(--wl-line); text-align: center; background: var(--wl-bg); }
.wl-map-hint { color: var(--wl-ink-2); font-size: 14px; padding: 6px 0; white-space: pre-line; } /* El aviso lleva un salto de línea antes de "Denominación de Origen" */
.wl-map-sel strong { display: block; font-size: 18px; line-height: 1.3; margin-bottom: 10px; color: var(--wl-primary); }
.wl-map-sel .wl-btn { width: 100%; justify-content: center; font-size: 15px; padding: 12px 16px; }
.wl-modal { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: wl-fade .2s ease; }
@keyframes wl-fade { from { opacity: 0; } to { opacity: 1; } }
.wl-modal-box { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: var(--wl-bg); border-radius: 14px 14px 0 0; padding: 22px 20px calc(20px + var(--wl-safe-b)); animation: wl-up .25s ease; }
@keyframes wl-up { from { transform: translateY(30px); } to { transform: none; } }
.wl-modal-box h3 { font-size: 26px; margin-bottom: 6px; }
.wl-modal-box p { margin: 0 0 14px; color: var(--wl-ink-2); }
.wl-modal-box label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--wl-ink-3); margin: 14px 0 6px; }
.wl-modal-box input, .wl-modal-box textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); font: inherit; font-size: 16px; outline: none; background: var(--wl-bg); }
.wl-modal-box input:focus, .wl-modal-box textarea:focus { border-color: var(--wl-primary); }
.wl-modal-box input.wl-invalid { border-color: #ef2d2d; }
.wl-modal-box textarea { min-height: 80px; resize: vertical; }
.wl-modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.wl-modal-actions .wl-btn { flex: 1; }
.wl-modal-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--wl-new); display: flex; align-items: center; justify-content: center; }
.wl-modal-icon svg { width: 34px; height: 34px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wl-modal-center { text-align: center; }
.wl-modal-summary { margin: 0 0 6px; padding: 0; list-style: none; font-size: 14px; color: var(--wl-ink-2); max-height: 30vh; overflow-y: auto; }
.wl-modal-summary li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--wl-line); }
.wl-modal-summary li span:last-child { color: var(--wl-ink); font-weight: 600; white-space: nowrap; }

.wl-toast { position: fixed; left: 50%; bottom: calc(24px + var(--wl-safe-b)); transform: translate(-50%, 20px); z-index: 90; background: var(--wl-ink); color: var(--wl-bg); padding: 12px 20px; border-radius: 24px; font-size: 14px; font-weight: 500; box-shadow: var(--wl-shadow-lg); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; }
.wl-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (min-width: 540px) {
	:root { --wl-cols: 3; --wl-gutter: 16px; }
	.wl-title { font-size: 40px; }
	.wl-card-name { font-size: 15px; }
	.wl-filters-grid { grid-template-columns: 1fr 1fr; }
	.wl-filter-wide { grid-column: auto; } /* A partir de aquí todos los desplegables ocupan una columna */
}
@media (min-width: 768px) {
	:root { --wl-header-h: 64px; --wl-gutter: 20px; }
	.wl-brand img { max-height: 48px; }
	.wl-brand-text { font-size: 28px; }
	.wl-cats button { font-size: 14px; padding: 0 16px; height: 48px; }
	.wl-search { max-width: 560px; margin-left: auto; margin-right: auto; }
	.wl-hero { padding: 40px var(--wl-gutter) 26px; }
	.wl-title { font-size: 46px; }
	.wl-sect h2 { font-size: 36px; }
	.wl-detail-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 30px; padding: 24px var(--wl-gutter); align-items: start; }
	.wl-detail-gallery { grid-row: 1 / span 4; border: 1px solid var(--wl-line); border-radius: var(--wl-radius); position: sticky; top: 16px; }
	.wl-detail-cover { height: auto; aspect-ratio: 3 / 4; max-height: none; }
	.wl-detail-menu .wl-detail-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
	.wl-detail-inner.wl-detail-nogallery { grid-template-columns: minmax(0, 1fr); max-width: 760px; } /* Plato sin foto: sin galería, el texto en una sola columna */
	.wl-detail-info { padding: 0; }
	.wl-detail-name { font-size: 38px; }
	.wl-detail-table, .wl-tabs { margin-left: 0; margin-right: 0; }
	.wl-modal { align-items: center; padding: 20px; }
	.wl-modal-box { border-radius: 14px; }
}
@media (min-width: 992px) {
	:root { --wl-cols: 4; }
	.wl-card-body { padding: 14px 14px 16px; }
	.wl-price b { font-size: 17px; }
	.wl-filters-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
	:root { --wl-cols: 5; --wl-gutter: 24px; }
	.wl-filters-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (hover: none) {
	.wl-card:hover { box-shadow: none; }
	.wl-card:hover .wl-card-img img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}
@media print {
	.wl-header, .wl-footer, .wl-card-view, .wl-more, .wl-drawer, .wl-cart, .wl-overlay, .wl-logo-zoom, .wl-scrollhint, .wl-scrollhint-v { display: none !important; }
}