/* ==========================================================================
Hoja de estilos principal de elchesemueve.es (/httpdocs/css/style.css)
Versión v25: Tema Luminoso (Hoy y Catálogo Claros) + Botones Cabecera Gris/Amarillo-Verde
========================================================================== */

/* 1. Reset base y tipografía */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e2e8f0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
body { margin: 0; font-family: inherit; background-color: #f1f5f9; color: #0f172a; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; }
button { background-color: transparent; background-image: none; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }

/* 2. Accesibilidad y Layout */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { align-items: center; justify-content: space-between; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
[class~="top-1.5"] { top: 0.375rem; }
[class~="top-2.5"] { top: 0.625rem; }
[class~="top-1/2"] { top: 50%; }
[class~="right-1.5"] { right: 0.375rem; }
[class~="right-2.5"] { right: 0.625rem; }
.right-5 { right: 1.25rem; }
.bottom-5 { bottom: 1.25rem; }
.left-3 { left: 0.75rem; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* 3. Grid, Columnas y Espaciado */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-full { grid-column: 1 / -1; }
[class~="gap-0.5"] { gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
[class~="gap-1.5"] { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
[class~="gap-2.5"] { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
[class~="gap-3.5"] { gap: 0.875rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }

.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
[class~="space-y-1.5"] > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.space-y-12 > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }

/* 4. Dimensiones, Márgenes y Rellenos */
[class~="w-1.5"] { width: 0.375rem; }
.w-2 { width: 0.5rem; }
[class~="w-2.5"] { width: 0.625rem; }
[class~="w-3.5"] { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-12 { width: 3rem; }
.w-24 { width: 6rem; }
.w-40 { width: 10rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0px; }
[class~="min-w-[290px]"] { min-width: 290px; }
.max-w-xs { max-width: 20rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-7xl { max-width: 80rem; }

[class~="h-1.5"] { height: 0.375rem; }
.h-2 { height: 0.5rem; }
[class~="h-2.5"] { height: 0.625rem; }
[class~="h-3.5"] { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-12 { height: 3rem; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
[class~="max-h-[78vh]"] { max-height: 78vh; }

.m-0 { margin: 0; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
[class~="mt-0.5"] { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
[class~="mt-1.5"] { margin-top: 0.375rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-14 { margin-top: 3.5rem; }
[class~="mb-0.5"] { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
[class~="mb-1.5"] { margin-bottom: 0.375rem; }
[class~="mb-2.5"] { margin-bottom: 0.625rem; }
.mb-6 { margin-bottom: 1.5rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
[class~="p-1.5"] { padding: 0.375rem; }
.p-2 { padding: 0.5rem; }
[class~="p-2.5"] { padding: 0.625rem; }
.p-3 { padding: 0.75rem; }
[class~="p-3.5"] { padding: 0.875rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-12 { padding: 3rem; }
[class~="px-1.5"] { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
[class~="px-2.5"] { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
[class~="px-3.5"] { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
[class~="py-0.5"] { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
[class~="py-1.5"] { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
[class~="py-2.5"] { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pl-9 { padding-left: 2.25rem; }
.pr-3 { padding-right: 0.75rem; }
[class~="pt-0.5"] { padding-top: 0.125rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
[class~="pt-2.5"] { padding-top: 0.625rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-5 { padding-bottom: 1.25rem; }

/* 5. Tipografía */
[class~="text-[10px]"] { font-size: 10px; }
[class~="text-[11px]"] { font-size: 11px; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration-line: underline; }
.underline-offset-4 { text-underline-offset: 4px; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.align-top { vertical-align: top; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.list-none { list-style-type: none; }

/* 6. Colores de Texto y Fondo */
.text-white { color: #ffffff; }
[class~="text-white/80"] { color: rgba(255, 255, 255, 0.8); }
[class~="text-white/90"] { color: rgba(255, 255, 255, 0.9); }
.text-slate-100 { color: #f1f5f9; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-slate-950 { color: #020617; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-900 { color: #78350f; }
.text-amber-950 { color: #451a03; }
[class~="text-emerald-200/90"] { color: rgba(167, 243, 208, 0.9); }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-400 { color: #34d399; }
.text-emerald-700 { color: #047857; }
[class~="text-[#1e3a8a]"] { color: #1e3a8a; }

.bg-white { background-color: #ffffff; }
[class~="bg-white/20"] { background-color: rgba(255, 255, 255, 0.2); }
[class~="bg-white/95"] { background-color: rgba(255, 255, 255, 0.95); }
[class~="bg-black/25"] { background-color: rgba(0, 0, 0, 0.25); }
[class~="bg-black/35"] { background-color: rgba(0, 0, 0, 0.35); }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-400 { background-color: #94a3b8; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-800 { background-color: #1e293b; }
[class~="bg-slate-800/90"] { background-color: rgba(30, 41, 59, 0.9); }
.bg-slate-900 { background-color: #0f172a; }
[class~="bg-slate-900/80"] { background-color: rgba(15, 23, 42, 0.8); }
[class~="bg-slate-900/90"] { background-color: rgba(15, 23, 42, 0.9); }
[class~="bg-slate-900/95"] { background-color: rgba(15, 23, 42, 0.95); }
.bg-slate-950 { background-color: #020617; }
[class~="bg-slate-950/65"] { background-color: rgba(2, 6, 23, 0.65); }
[class~="bg-slate-950/80"] { background-color: rgba(2, 6, 23, 0.8); }
[class~="bg-slate-950/90"] { background-color: rgba(2, 6, 23, 0.9); }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-400 { background-color: #fbbf24; }
[class~="bg-amber-500/25"] { background-color: rgba(245, 158, 11, 0.25); }
[class~="bg-amber-600/95"] { background-color: rgba(217, 119, 6, 0.95); }
.bg-emerald-400 { background-color: #34d399; }
[class~="bg-emerald-600/95"] { background-color: rgba(5, 150, 105, 0.95); }
[class~="bg-sky-600/95"] { background-color: rgba(2, 132, 199, 0.95); }
[class~="bg-rose-600/95"] { background-color: rgba(225, 29, 72, 0.95); }
.bg-red-600 { background-color: #dc2626; }
.bg-red-900 { background-color: #7f1d1d; }
.bg-blue-50 { background-color: #eff6ff; }
[class~="bg-blue-950/10"] { background-color: rgba(23, 37, 84, 0.1); }
[class~="bg-[#1e3a8a]"] { background-color: #1e3a8a; }
.bg-gradient-to-r { background-image: linear-gradient(to right, rgba(2, 6, 23, 0.95), rgba(2, 6, 23, 0.8), rgba(74, 25, 12, 0.75)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, #020617, rgba(2, 6, 23, 0.35), rgba(2, 6, 23, 0.5)); }

/* 7. Bordes, Esquinas y Sombras */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-t { border-top-width: 1px; }
.border-t-4 { border-top-width: 4px; }
.border-b { border-bottom-width: 1px; }
.border-b-4 { border-bottom-width: 4px; }
.border-l-4 { border-left-width: 4px; }
.border-dashed { border-style: dashed; }
[class~="border-white/10"] { border-color: rgba(255, 255, 255, 0.1); }
[class~="border-white/15"] { border-color: rgba(255, 255, 255, 0.15); }
[class~="border-white/70"] { border-color: rgba(255, 255, 255, 0.7); }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
[class~="border-slate-200/80"] { border-color: rgba(226, 232, 240, 0.8); }
[class~="border-slate-200/90"] { border-color: rgba(226, 232, 240, 0.9); }
.border-slate-300 { border-color: #cbd5e1; }
.border-slate-600 { border-color: #475569; }
.border-slate-700 { border-color: #334155; }
.border-slate-800 { border-color: #1e293b; }
[class~="border-slate-800/90"] { border-color: rgba(30, 41, 59, 0.9); }
.border-amber-300 { border-color: #fcd34d; }
[class~="border-amber-400/50"] { border-color: rgba(251, 191, 36, 0.5); }
[class~="border-amber-400/80"] { border-color: rgba(251, 191, 36, 0.8); }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-600 { border-color: #d97706; }
[class~="border-emerald-500/50"] { border-color: rgba(16, 185, 129, 0.5); }
.border-blue-200 { border-color: #bfdbfe; }
[class~="border-blue-900/20"] { border-color: rgba(30, 58, 138, 0.2); }
[class~="border-[#1e3a8a]"] { border-color: #1e3a8a; }

.rounded { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-r-xl { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* 8. Efectos e Interacción */
.opacity-0 { opacity: 0; }
.opacity-75 { opacity: 0.75; }
.opacity-85 { opacity: 0.85; }
.opacity-100 { opacity: 1; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center { object-position: center; }
.fill-current { fill: currentColor; }
.fill-none { fill: none; }
.stroke-current { stroke: currentColor; }
[class~="stroke-[2.2]"] { stroke-width: 2.2; }
[class~="stroke-[2.5]"] { stroke-width: 2.5; }
[class~="stroke-[3]"] { stroke-width: 3; }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[class~="-translate-y-1/2"] { transform: translateY(-50%); }
.translate-y-0 { transform: translateY(0); }
.translate-y-4 { transform: translateY(1rem); }
.rotate-180 { transform: rotate(180deg); }
.transition { transition: all 0.15s ease-in-out; }
.transition-all { transition: all 0.3s ease-in-out; }
.transition-transform { transition: transform 0.2s ease-in-out; }

[class~="hover:bg-amber-300"]:hover { background-color: #fcd34d; }
[class~="hover:bg-amber-400"]:hover { background-color: #fbbf24; }
[class~="hover:bg-amber-500"]:hover { background-color: #f59e0b; }
[class~="hover:bg-amber-600"]:hover { background-color: #d97706; }
[class~="hover:bg-amber-50"]:hover { background-color: #fffbeb; }
[class~="hover:bg-slate-700"]:hover { background-color: #334155; }
[class~="hover:bg-slate-900"]:hover { background-color: #0f172a; }
[class~="hover:bg-slate-900/85"]:hover { background-color: rgba(15, 23, 42, 0.85); }
[class~="hover:bg-black/40"]:hover { background-color: rgba(0, 0, 0, 0.4); }
[class~="hover:bg-blue-50"]:hover { background-color: #eff6ff; }
[class~="hover:text-white"]:hover { color: #ffffff; }
[class~="hover:text-slate-950"]:hover { color: #020617; }
[class~="hover:text-amber-300"]:hover { color: #fcd34d; }
[class~="hover:text-amber-600"]:hover { color: #d97706; }
[class~="hover:text-amber-900"]:hover { color: #78350f; }
[class~="hover:text-emerald-900"]:hover { color: #064e3b; }
[class~="hover:underline"]:hover { text-decoration-line: underline; }
[class~="focus:outline-none"]:focus { outline: 2px solid transparent; outline-offset: 2px; }
[class~="focus:border-amber-400"]:focus { border-color: #fbbf24; }
[class~="focus:border-amber-600"]:focus { border-color: #d97706; }
[class~="focus:border-emerald-400"]:focus { border-color: #34d399; }
[class~="focus:bg-white"]:focus { background-color: #ffffff; }

@keyframes pulse { 50% { opacity: 0.5; } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* 9. Media Queries Responsivas (sm, md, lg) */
@media (min-width: 640px) {
  [class~="sm:inline"] { display: inline; }
  [class~="sm:flex-row"] { flex-direction: row; }
  [class~="sm:items-center"] { align-items: center; }
  [class~="sm:justify-start"] { justify-content: flex-start; }
  [class~="sm:self-center"] { align-self: center; }
  [class~="sm:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class~="sm:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [class~="sm:col-span-2"] { grid-column: span 2 / span 2; }
  [class~="sm:w-14"] { width: 3.5rem; }
  [class~="sm:h-14"] { height: 3.5rem; }
  [class~="sm:w-28"] { width: 7rem; }
  [class~="sm:w-52"] { width: 13rem; }
  [class~="sm:p-5"] { padding: 1.25rem; }
  [class~="sm:p-6"] { padding: 1.5rem; }
  [class~="sm:p-7"] { padding: 1.75rem; }
  [class~="sm:px-4"] { padding-left: 1rem; padding-right: 1rem; }
  [class~="sm:px-6"] { padding-left: 1.5rem; padding-right: 1.5rem; }
  [class~="sm:py-3"] { padding-top: 0.75rem; padding-bottom: 0.75rem; }
  [class~="sm:py-12"] { padding-top: 3rem; padding-bottom: 3rem; }
  [class~="sm:gap-1"] { gap: 0.25rem; }
  [class~="sm:gap-4"] { gap: 1rem; }
  [class~="sm:text-sm"] { font-size: 0.875rem; line-height: 1.25rem; }
  [class~="sm:text-base"] { font-size: 1rem; line-height: 1.5rem; }
  [class~="sm:text-xl"] { font-size: 1.25rem; line-height: 1.75rem; }
  [class~="sm:text-2xl"] { font-size: 1.5rem; line-height: 2rem; }
  [class~="sm:text-3xl"] { font-size: 1.875rem; line-height: 2.25rem; }
  [class~="sm:text-4xl"] { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 768px) {
  [class~="md:flex-row"] { flex-direction: row; }
  [class~="md:items-center"] { align-items: center; }
  [class~="md:self-center"] { align-self: center; }
  [class~="md:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class~="md:w-64"] { width: 16rem; }
  [class~="md:text-right"] { text-align: right; }
}
@media (min-width: 1024px) {
  [class~="lg:hidden"] { display: none; }
  [class~="lg:block"] { display: block; }
  [class~="lg:flex-row"] { flex-direction: row; }
  [class~="lg:items-center"] { align-items: center; }
  [class~="lg:justify-between"] { justify-content: space-between; }
  [class~="lg:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [class~="lg:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [class~="lg:grid-cols-8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  [class~="lg:grid-cols-12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  [class~="lg:col-span-1"] { grid-column: span 1 / span 1; }
  [class~="lg:col-span-2"] { grid-column: span 2 / span 2; }
  [class~="lg:col-span-3"] { grid-column: span 3 / span 3; }
  [class~="lg:p-8"] { padding: 2rem; }
  [class~="lg:px-8"] { padding-left: 2rem; padding-right: 2rem; }
  [class~="lg:py-14"] { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  [class~="lg:text-3xl"] { font-size: 1.875rem; line-height: 2.25rem; }
  [class~="lg:text-5xl"] { font-size: 3rem; line-height: 1; }
}

/* ==========================================================================
10. COMPONENTES DEL PORTAL CULTURAL (VERSIÓN CLARA + BOTONES CABECERA GRIS/AMARILLO)
========================================================================== */
.hero-cover-img { image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); will-change: transform; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Botones de Espacios Culturales en la Cabecera (#venue-stats-bar) */
#venue-stats-bar > button,
.venue-stat-btn {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background-color: rgba(71, 85, 105, 0.9) !important; /* Gris pizarra en reposo */
  color: #ffffff !important;
  border: 1.5px solid rgba(203, 213, 225, 0.55) !important;
  box-shadow: 0 4px 10px rgba(2, 6, 23, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.18s ease;
  cursor: pointer;
}

/* Hover solo para botones NO seleccionados */
#venue-stats-bar > button:not(.venue-stat-btn--active):not(.bg-amber-400):not([aria-pressed="true"]):hover,
.venue-stat-btn:not(.venue-stat-btn--active):hover {
  background-color: rgba(100, 116, 139, 0.98) !important;
  border-color: #f8fafc !important;
  transform: translateY(-2px);
}

/* Estado ACTIVO / SELECCIONADO (y su propio hover): Verde Esmeralda intenso */
#venue-stats-bar > button.venue-stat-btn--active,
#venue-stats-bar > button.venue-stat-btn--active:hover,
#venue-stats-bar > button[aria-pressed="true"],
#venue-stats-bar > button[aria-pressed="true"]:hover,
#venue-stats-bar > button.bg-amber-400,
#venue-stats-bar > button.bg-amber-400:hover,
.venue-stat-btn--active,
.venue-stat-btn--active:hover {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%) !important;
  background-color: #10b981 !important;
  color: #022c22 !important;
  border: 2px solid #a7f3d0 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.45), 0 8px 20px rgba(2, 6, 23, 0.5) !important;
  transform: translateY(-2px);
}

#venue-stats-bar > button.venue-stat-btn--active span,
#venue-stats-bar > button.venue-stat-btn--active small,
#venue-stats-bar > button[aria-pressed="true"] span,
#venue-stats-bar > button[aria-pressed="true"] small,
#venue-stats-bar > button.bg-amber-400 span,
#venue-stats-bar > button.bg-amber-400 small {
  color: #022c22 !important;
  opacity: 1 !important;
}

.venue-stat-btn__title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.95;
}
.venue-stat-btn__count {
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1;
  margin-top: 0.25rem;
}

/* Botón Oficial de Visitar Perfil de Instagram en Cabecera y Pie */
.ig-profile-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.85rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 800; color: #ffffff; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 4px 14px rgba(220, 39, 67, 0.4); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; text-decoration: none; }
.ig-profile-pill:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 8px 20px rgba(220, 39, 67, 0.55); }

/* Tablero "HOY EN ELCHE" en versión Clara, Cálida y Luminosa */
#today-section.today-board,
.today-board {
  position: relative;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fff7ed 100%) !important;
  color: #0f172a !important;
  border: 2px solid #f59e0b !important;
  border-radius: 1.5rem;
  box-shadow: 0 16px 36px -12px rgba(217, 119, 6, 0.18);
  overflow: hidden;
}
.today-board__header { border-bottom: 1px solid rgba(217, 119, 6, 0.25); }
#today-heading-title { color: #0f172a !important; }
#today-heading-date { color: #b45309 !important; text-decoration-color: rgba(180, 83, 9, 0.45) !important; }
#today-subtitle { color: #334155 !important; }
#today-subtitle strong { color: #92400e !important; }
.today-board__pill { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); color: #090d16; font-weight: 900; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.today-board__nav-btn { background-color: #ffffff; color: #0f172a; border: 1.5px solid #cbd5e1; transition: all 0.2s ease; }
.today-board__nav-btn:hover { background-color: #fbbf24; color: #090d16; border-color: #10b981; }

/* Tablero "CATÁLOGO DE EVENTOS" en versión Clara y Luminosa */
#catalog-section.catalog-board,
.catalog-board {
  position: relative;
  background: linear-gradient(160deg, #f8fafc 0%, #e2e8f0 60%, #ecfdf5 100%) !important;
  color: #0f172a !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 1.5rem;
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.catalog-board__header { background-color: #1e293b; border: 1px solid #334155; color: #ffffff; }
.catalog-board__counter { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); color: #022c22; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35); }
#load-more-status { color: #047857 !important; }

.weekend-quick-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 900; color: #7c2d12; background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); border: 1.5px solid #f97316; box-shadow: 0 2px 8px rgba(249, 115, 22, 0.18); cursor: pointer; transition: all 0.18s ease; white-space: nowrap; }
.weekend-quick-btn:hover { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: #ffffff; border-color: #ea580c; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(234, 88, 12, 0.32); }
.weekend-quick-btn--active { background: linear-gradient(135deg, #ea580c 0%, #e11d48 100%) !important; color: #ffffff !important; border-color: #fda4af !important; box-shadow: 0 4px 16px rgba(225, 29, 72, 0.45) !important; }
.weekend-quick-btn__badge { font-size: 0.65rem; font-weight: 900; padding: 0.08rem 0.42rem; border-radius: 9999px; background-color: rgba(124, 45, 18, 0.14); color: inherit; }
.weekend-quick-btn:hover .weekend-quick-btn__badge, .weekend-quick-btn--active .weekend-quick-btn__badge { background-color: rgba(0, 0, 0, 0.28); color: #ffffff; }

.view-switch-group { display: inline-flex; align-items: center; background-color: rgba(2, 6, 23, 0.75); padding: 0.22rem; border-radius: 0.85rem; border: 1px solid rgba(16, 185, 129, 0.45); }
.view-switch-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 0.65rem; font-size: 0.75rem; font-weight: 800; color: #cbd5e1; background: transparent; border: none; cursor: pointer; transition: all 0.18s ease; }
.view-switch-btn:hover { color: #ffffff; }
.view-switch-btn--active { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: #022c22 !important; box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35); }

.calendar-panel { background-color: #0f172a; border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 1.25rem; padding: 0.75rem; color: #ffffff; }
@media (min-width: 640px) { .calendar-panel { padding: 1.25rem; } }
.calendar-nav-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 800; background-color: rgba(30, 41, 59, 0.95); color: #f8fafc; border: 1px solid rgba(148, 163, 184, 0.3); cursor: pointer; transition: all 0.18s ease; }
.calendar-nav-btn:hover { background-color: #10b981; color: #022c22; border-color: #6ee7b7; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; margin-bottom: 0.35rem; }
@media (min-width: 640px) { .calendar-weekdays { gap: 0.45rem; margin-bottom: 0.45rem; } }
.calendar-weekday { text-align: center; font-size: 0.65rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #6ee7b7; padding: 0.25rem 0; }
@media (min-width: 640px) { .calendar-weekday { font-size: 0.72rem; padding: 0.35rem 0; } }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
@media (min-width: 640px) { .calendar-grid { gap: 0.45rem; } }
.calendar-cell { min-height: 4.1rem; background-color: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.65rem; padding: 0.3rem 0.25rem; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; transition: all 0.18s ease; cursor: pointer; position: relative; }
@media (min-width: 640px) { .calendar-cell { min-height: 5.4rem; border-radius: 0.85rem; padding: 0.45rem; align-items: stretch; text-align: left; } }
@media (min-width: 768px) { .calendar-cell { min-height: 6.8rem; padding: 0.6rem; } }
.calendar-cell:hover { border-color: #34d399; background-color: rgba(30, 41, 59, 0.95); transform: translateY(-2px); }
.calendar-cell--empty { background-color: rgba(2, 6, 23, 0.35); border: 1px dashed rgba(148, 163, 184, 0.12); cursor: default; pointer-events: none; }
.calendar-cell--has-events { background-color: rgba(6, 78, 59, 0.28); border-color: rgba(16, 185, 129, 0.45); }
.calendar-cell--today { border: 2px solid #f59e0b !important; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35); }
.calendar-cell--selected { background: linear-gradient(135deg, rgba(16, 185, 129, 0.32) 0%, rgba(15, 23, 42, 0.95) 100%) !important; border: 2px solid #34d399 !important; box-shadow: 0 0 18px rgba(52, 211, 153, 0.4); }
.calendar-cell__day { font-size: 0.78rem; font-weight: 900; color: #f8fafc; line-height: 1; }
.calendar-cell__count { font-size: 0.6rem; font-weight: 900; padding: 0.08rem 0.34rem; border-radius: 9999px; background-color: #10b981; color: #022c22; }
@media (min-width: 640px) { .calendar-cell__count { font-size: 0.65rem; padding: 0.1rem 0.42rem; } }
.calendar-dot { width: 0.45rem; height: 0.45rem; border-radius: 9999px; display: inline-block; border: 1px solid rgba(255, 255, 255, 0.65); flex-shrink: 0; }
@media (min-width: 640px) { .calendar-dot { width: 0.55rem; height: 0.55rem; } }
.calendar-mini-pill { display: none; font-size: 0.65rem; font-weight: 700; color: #ffffff; padding: 0.12rem 0.38rem; border-radius: 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
@media (min-width: 1024px) { .calendar-mini-pill { display: block; } }

/* ==========================================================================
REDISEÑO MODERNO DE TARJETAS DE EVENTOS (UI 2026) + CALENDARIO FLOTANTE iOS
========================================================================== */
.event-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  background-color: #ffffff;
  color: #0f172a;
  border-radius: 1.25rem;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px -6px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
  content-visibility: auto;
  contain-intrinsic-size: 290px;
}
.event-card:hover {
  transform: translateY(-5px);
  border-color: #10b981;
  box-shadow: 0 20px 34px -8px rgba(15, 23, 42, 0.18), 0 0 0 2px rgba(16, 185, 129, 0.35);
}
.event-card--today {
  background-color: #ffffff;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 14px 28px -8px rgba(217, 119, 6, 0.22), 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.event-card--today:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 36px -8px rgba(217, 119, 6, 0.32), 0 0 0 3px rgba(251, 191, 36, 0.35);
}

.event-card__accent-bar { height: 5px; width: 100%; flex-shrink: 0; }

.event-card__header { padding: 1.1rem 1.15rem 0.85rem 1.15rem; border-bottom: 1px solid #f1f5f9; background: linear-gradient(180deg, rgba(248, 250, 252, 0.8) 0%, #ffffff 100%); display: flex; flex-direction: column; gap: 0.55rem; }
.event-card__header--today { background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%) !important; border-bottom: 1px solid #fef3c7 !important; }

.card-header-top-row { padding-right: 4.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.card-venue-pill { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.22rem 0.62rem; border-radius: 0.45rem; color: #ffffff; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12); }

.card-category-pill { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; color: #334155; background-color: #f1f5f9; border: 1px solid #e2e8f0; padding: 0.2rem 0.58rem; border-radius: 9999px; }

.card-price-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 800; padding: 0.22rem 0.65rem; border-radius: 9999px; background-color: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; flex-shrink: 0; }
.card-price-pill--today { background-color: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; }

.badge-today { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.18rem 0.5rem; border-radius: 0.4rem; background-color: #d97706; color: #ffffff; box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35); }

/* WIDGET DE CALENDARIO FLOTANTE (Estilo iOS / Dice / Eventbrite) en esquina superior derecha */
.card-date-corner-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.45rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.95);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  text-align: center;
}
.card-date-corner-badge--today {
  box-shadow: 0 8px 22px -4px rgba(217, 119, 6, 0.38), 0 0 0 1.5px #f59e0b;
}
.card-date-corner-badge__month {
  width: 100%;
  padding: 0.22rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  line-height: 1.1;
}
.card-date-corner-badge__day {
  padding: 0.32rem 0.45rem 0.36rem;
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.card-date-corner-badge__day--range {
  font-size: 0.78rem;
  padding: 0.38rem 0.42rem;
}

.event-card__footer {
  padding: 0.7rem 1.15rem;
  background-color: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}
.event-card__footer--today {
  background-color: #fffbeb !important;
  border-top: 1px solid #fef3c7 !important;
  color: #78350f !important;
}
.event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 800;
  color: #0f172a;
  transition: transform 0.18s ease, color 0.18s ease;
}
.event-card:hover .event-card__cta {
  color: #059669;
  transform: translateX(2px);
}

/* Botones circulares en tarjeta: Favoritos y Compartir en Instagram */
.fav-card-btn, .ig-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: all 0.18s ease;
  cursor: pointer;
  padding: 0;
}
.fav-card-btn:hover { transform: scale(1.1); color: #e11d48; border-color: #fda4af; background-color: #fff1f2; }
.fav-card-btn--active { background-color: #ffe4e6; color: #e11d48; border: 1px solid #fb7185; box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25); }

.ig-card-btn {
  color: #c13584;
  border-color: #fbcfe8;
  background-color: #fdf2f8;
}
.ig-card-btn:hover {
  transform: scale(1.12);
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  box-shadow: 0 3px 10px rgba(220, 39, 67, 0.35);
}

.fav-filter-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 800; border: 1px solid rgba(251, 113, 133, 0.45); background-color: rgba(30, 41, 59, 0.9); color: #fecdd3; transition: all 0.2s ease; cursor: pointer; }
.fav-filter-btn:hover { background-color: rgba(225, 29, 72, 0.22); border-color: #fb7185; color: #ffffff; }
.fav-filter-btn--active { background: linear-gradient(135deg, #e11d48 0%, #be123c 100%); color: #ffffff; border-color: #fda4af; box-shadow: 0 4px 14px rgba(225, 29, 72, 0.45); }

.load-more-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.9rem 2rem; border-radius: 1rem; font-size: 0.875rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%); color: #ffffff; border: 2px solid #10b981; box-shadow: 0 10px 25px -5px rgba(2, 6, 23, 0.5); transition: all 0.2s ease; cursor: pointer; }
.load-more-btn:hover { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); color: #022c22; border-color: #6ee7b7; transform: translateY(-2px); box-shadow: 0 16px 30px -6px rgba(16, 185, 129, 0.45); }
.load-more-btn__badge { font-size: 0.75rem; font-weight: 900; padding: 0.15rem 0.6rem; border-radius: 9999px; background-color: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.5); transition: all 0.2s ease; }
.load-more-btn:hover .load-more-btn__badge { background-color: #022c22; color: #34d399; border-color: #022c22; }

.action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 800; text-decoration: none; transition: all 0.18s ease; cursor: pointer; box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08); }
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.14); }
.action-btn--gcal { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.action-btn--gcal:hover { background-color: #2563eb; color: #ffffff; border-color: #1d4ed8; }
.action-btn--ics { background-color: #f8fafc; color: #0f172a; border: 1px solid #cbd5e1; }
.action-btn--ics:hover { background-color: #0f172a; color: #ffffff; border-color: #0f172a; }
.action-btn--maps { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.action-btn--maps:hover { background-color: #059669; color: #ffffff; border-color: #047857; }
.action-btn--fav { background-color: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.action-btn--fav:hover, .action-btn--fav-active { background-color: #e11d48; color: #ffffff; border-color: #be123c; }

/* Botones de Compartir en la Ficha Modal: Solo Icono en 1 sola fila */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 0.75rem;
  color: #ffffff !important;
  text-decoration: none;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  flex-shrink: 0;
}
.share-btn:hover {
  transform: translateY(-2px) scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.24);
}
.share-btn--whatsapp { background-color: #16a34a !important; }
.share-btn--instagram {
  background-color: #d62976 !important;
  background-image: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
.share-btn--facebook { background-color: #1877f2 !important; }
.share-btn--x { background-color: #0f172a !important; }

/* Aviso flotante (Toast) al compartir en Instagram */
.ig-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  z-index: 60;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  color: #ffffff;
  border: 1.5px solid #ec4899;
  border-radius: 1rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 20px 35px -10px rgba(2, 6, 23, 0.75);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.ig-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 11. Tarjetas del Directorio de Centros Culturales (Pie de Página) */
.venue-dir-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 768px) { .venue-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .venue-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.venue-dir-card { position: relative; background-color: #1b2230; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 1.5rem; padding: 1.75rem; color: #e2e8f0; overflow: hidden; box-shadow: 0 20px 35px -10px rgba(2, 6, 23, 0.6); display: flex; flex-direction: column; justify-content: flex-start; }
.venue-dir-watermark { position: absolute; top: 1.15rem; right: 1.25rem; width: 5.5rem; height: 5.5rem; color: rgba(255, 255, 255, 0.045); pointer-events: none; user-select: none; z-index: 0; }
.venue-dir-title { position: relative; z-index: 1; font-size: 1.35rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff; margin-bottom: 1.25rem; }
.venue-dir-info-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.875rem; color: #e2e8f0; }
.venue-dir-info-item { display: flex; align-items: flex-start; gap: 0.75rem; line-height: 1.4; }
.venue-dir-icon { width: 1.1rem; height: 1.1rem; color: #60a5fa; flex-shrink: 0; margin-top: 0.15rem; }
.venue-dir-link { color: #60a5fa; font-weight: 600; text-decoration: none; transition: color 0.15s ease; }
.venue-dir-link:hover { color: #93c5fd; text-decoration: underline; }
.venue-dir-subtext { display: block; font-size: 0.78rem; color: #64748b; margin-top: 0.2rem; font-weight: 500; }
.venue-dir-divider { border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 1.35rem 0 1.15rem; position: relative; z-index: 1; }
.venue-dir-section-label { position: relative; z-index: 1; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: #ffffff; margin-bottom: 0.75rem; display: block; }
.venue-dir-table { position: relative; z-index: 1; display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.venue-dir-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.52rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.82rem; color: #cbd5e1; }
.venue-dir-row:last-child { border-bottom: none; }
.venue-dir-val-white { font-weight: 800; color: #ffffff; white-space: nowrap; }
.venue-dir-val-green { font-weight: 800; color: #34d399; white-space: nowrap; }
.venue-dir-meta-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; display: block; margin-bottom: 0.25rem; }
.venue-dir-callout { position: relative; z-index: 1; border-radius: 0.9rem; padding: 1rem 1.1rem; margin-top: auto; font-size: 0.78rem; line-height: 1.5; }
.venue-dir-callout__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.venue-dir-callout--blue { background-color: rgba(30, 58, 138, 0.24); border: 1px solid rgba(59, 130, 246, 0.32); color: #e2e8f0; }
.venue-dir-callout--blue .venue-dir-callout__title { color: #93c5fd; }
.venue-dir-callout--red { background-color: rgba(127, 29, 29, 0.22); border: 1px solid rgba(239, 68, 68, 0.28); color: #cbd5e1; }
.venue-dir-callout--red .venue-dir-callout__title { color: #f87171; }
.venue-dir-callout--amber { background-color: rgba(120, 53, 15, 0.22); border: 1px solid rgba(245, 158, 11, 0.28); color: #cbd5e1; }
.venue-dir-callout--amber .venue-dir-callout__title { color: #fbbf24; }

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mt-3 { margin-top: 0.75rem; }
[class~="bg-[#003666]"] { background-color: #003666; }
[class~="p-1.5"] { padding: 0.375rem; }

.card-rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 10px;
  font-weight: 800;
  padding: 0.16rem 0.5rem;
  border-radius: 0.4rem;
  background-color: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
  letter-spacing: 0.01em;
}
/* === FIN DE STYLE.CSS === */