/* Viviendo La Manga — paleta y tipografía extraídas del prototipo Claude
   Design (Viviendo La Manga.dc.html): navy #243746, gris-azulado #47637A,
   dorado arena #DBC27A, crema #F7F2E8, azul medio #6B8FA8, tipografía Poppins. */

/* font-display:optional (no swap): con las fuentes precargadas en el
   <head> (ver layout.templ), el navegador las tiene listas antes del primer
   pintado y las usa directamente. Si por lo que sea no llegaran a tiempo,
   optional se queda con la fuente del sistema para ESE pintado en vez de
   cambiarla a media carga — sin salto visible de tipografía en ningún caso. */
@font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:optional; src:url('/static/fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:optional; src:url('/static/fonts/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:optional; src:url('/static/fonts/poppins-700-latin.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:optional; src:url('/static/fonts/poppins-800-latin.woff2') format('woff2'); }

:root{
  --ink:#243746;        /* navy — texto principal, fondos oscuros */
  --ink-deep:#1A2833;    /* header/footer aún más oscuro */
  --ink-deepest:#0F1922;
  --accent:#47637A;      /* gris-azulado — enlaces, iconos */
  --gold:#DBC27A;        /* dorado arena — acentos, patrocinado, selección */
  --cream:#F7F2E8;       /* crema — fondos claros */
  --blue-mid:#6B8FA8;    /* azul medio — scrollbar, detalles */
  --paper:#fff;
  --line:rgba(36,55,70,.14);
  --muted:#5A6E7D;
  --danger:#C0524A;
  --radius:14px;
}

html,body{margin:0;padding:0}
/* Cortafuegos anti-scroll-horizontal: cualquier fila con overflow propio
   (topbar de clima, nav de móvil, carruseles...) puede desbordar su propia
   caja por bugs de flex/centrado — sin este límite, ese desborde se propaga
   y toda la página gana un scroll horizontal fantasma (visto en producción:
   el botón "Añade tu negocio" quedaba cortado en el header). Cada fila
   horizontal sigue pudiendo hacer scroll POR DENTRO; lo único que se
   bloquea es que la página entera se desplace lateralmente.
   Puesto en html, NUNCA en un div interior como #vlm-app: cualquier overflow
   distinto de visible en un contenedor interior lo convierte en el
   "scroll container" de referencia para sus descendientes sticky, y como
   ese div nunca llega a desbordar por sí mismo (quien scrollea es la
   ventana), el sticky deja de engancharse — comprobado en Chrome: tanto el
   header como la barra lateral de horario/contacto de la ficha dejaban de
   quedarse fijos con overflow-x en #vlm-app. En el elemento html no pasa:
   el navegador lo trata como el propio viewport, no como una caja anidada,
   así que sigue bloqueando el scroll horizontal sin romper ningún sticky. */
html{overflow-x:hidden}
#vlm-app{max-width:100vw}
*{box-sizing:border-box}
/* El atributo hidden nativo NO lleva !important en la hoja del navegador,
   así que cualquier display:flex/block puesto inline en el propio elemento
   (patrón habitual de los desplegables data-toggle/data-menu: hidden por
   defecto + display:flex en el style="" para cuando vlm.js lo revela) le
   gana por especificidad y el menú aparece SIEMPRE abierto, aunque
   hidden=true. Bug real visto en el menú de cuenta y en el nav de móvil. */
[hidden]{display:none !important}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
input,select,textarea,button{font:inherit;color:inherit}
button{border-radius:10px;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--ink)}
* { scrollbar-width:thin; scrollbar-color:var(--blue-mid) var(--cream); }

@keyframes vlmPing{0%{transform:scale(.7);opacity:.95}70%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}
@keyframes vlmBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* Envoltorio de ancho estándar de TODO el sitio: 1280px + el mismo
   padding lateral clamp que ya usaban la cabecera y el hero de home.
   Única fuente de verdad para centrar contenido a ancho de página —
   así no puede volver a pasar lo de agosto de 2026 (una sección con
   padding propio + un div interior con su propio max-width+margin:auto,
   doble inset horizontal, contenido desalineado del menú). */
.wrap{max-width:1280px;width:100%;min-width:0;margin:0 auto;padding:0 clamp(18px,4vw,32px)}

/* width:100%/min-width:0 arriba: cuando .wrap es hijo directo de un
   contenedor display:flex (p.ej. la sección del hero de portada), sin esto
   el navegador lo dimensiona por "shrink-to-fit" usando el ancho máximo de
   TODO su contenido como si nunca hiciera flex-wrap (así calcula el
   intrinsic size de un flex container multilínea), en vez de llenar el
   ancho real disponible — así es como el panel "por km" del buscador se
   salía y se veía cortado en móvil: en cuanto su contenido dejaba de estar
   oculto, .wrap se ensanchaba hasta su max-width (1280px) aunque la sección
   real solo tuviera ~360px. */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:10px;border:none;font-weight:700;font-size:14.5px;cursor:pointer}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-outline{background:transparent;border:1.5px solid rgba(247,242,232,.4);color:#fff}
.btn-outline:hover{background:rgba(247,242,232,.1)}
.btn-ink{background:var(--ink);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Header/footer del prototipo — el estado base va en estilos inline
   (calcados 1:1 de Viviendo La Manga.dc.html); estas clases solo cubren los
   :hover que el HTML no puede expresar inline. !important porque un style=""
   inline siempre gana de specificidad sobre una clase, incluso en :hover. */
.vlm-navlink:hover{color:#fff !important;border-bottom-color:#DBC27A !important}
.vlm-entrar:hover{color:#fff !important}
.vlm-anadir:hover{background:#F7F2E8 !important;color:#243746 !important}
.vlm-menuitem:hover{background:rgba(255,255,255,.08) !important}
.vlm-footlink:hover{color:#fff !important}

/* Home — buscador, popover de km, filas de negocios (mismo criterio: base
   inline calcada del prototipo, clase solo para lo que style="" no puede
   expresar). */
.vlm-search-input:focus{border-color:#47637A !important;box-shadow:0 0 0 3px rgba(107,143,168,.14)}
.vlm-cta-gold:hover{background:#243746 !important;color:#fff !important}
.vlm-verTodos:hover{color:#243746 !important}
.vlm-card-link:hover{opacity:.94}
.vlm-hueco:hover{border-color:#DBC27A !important;background:rgba(219,194,122,.18) !important}
.vlm-mesLink:hover{color:#47637A !important}
.vlm-sug-close:hover{background:rgba(36,55,70,.16) !important}
.vlm-sug-all:hover{background:#DBC27A !important;color:#243746 !important}
.vlm-sug-row:hover{background:#ECE8DF !important}
.vlm-chip-outline:hover{border-color:#243746 !important;background:#ECE8DF !important}
.vlm-fav-btn:hover{background:rgba(20,32,40,.7) !important}
[data-vlm-sugcat]:hover{border-color:#243746 !important}

/* Cards de negocio */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px}
.card{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(36,55,70,.35)}
.card.sponsored{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold)}
.card-photo{aspect-ratio:4/3;background:linear-gradient(135deg,var(--blue-mid),var(--ink));position:relative}
.card-badge{position:absolute;top:10px;left:10px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px;letter-spacing:.03em}
.card-body{padding:14px 16px 16px}
.card-title{font-weight:700;font-size:16px;margin:0 0 4px}
.card-meta{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rating{color:var(--gold);font-weight:700}

/* Filtros de directorio */
.dir-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.filters{position:sticky;top:90px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.filters h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:18px 0 10px}
.filters h3:first-child{margin-top:0}
.chip-list{display:flex;flex-direction:column;gap:2px}
/* chip-row: usado solo para "Recoger/Delivery" del sidebar de filtros —
   antes era una fila con casilla nativa visible; ahora es un botón-píldora
   con el texto centrado y la casilla oculta (sigue en el DOM y funcional,
   solo invisible, para no tocar el envío del formulario). */
.chip-row{position:relative;flex:1;display:flex;align-items:center;justify-content:center;text-align:center;gap:0;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:600;color:#243746;border:1px solid rgba(36,55,70,.16);transition:background .12s,color .12s,border-color .12s}
.chip-row:hover{background:var(--cream)}
.chip-row.active{background:#243746;border-color:#243746;color:#F7F2E8;font-weight:700}
.vlm-chip-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* Formularios */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.field input[type=text],.field input[type=search],.field input[type=email],.field input[type=tel],.field input[type=password],
.field input[type=url],.field input[type=time],.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--cream);
}
.field textarea{min-height:110px;resize:vertical}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px;position:relative}
.form-pill{position:absolute;top:0;left:22px;transform:translateY(-50%);background:var(--ink);color:#fff;font-weight:700;font-size:12.5px;padding:5px 14px;border-radius:99px}
.prof-activity-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.prof-services-label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.prof-services-dropdown{position:relative}
.prof-services-dropdown>summary,.prof-services-disabled{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;cursor:pointer;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--cream);min-height:48px;font:inherit;text-align:left}
.prof-services-disabled{cursor:not-allowed;color:#636057;background:#ECE8DF}
.prof-services-dropdown>summary::-webkit-details-marker{display:none}
.prof-services-dropdown>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prof-services-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:20;box-sizing:border-box;width:min(420px,calc(100vw - 64px));max-height:340px;overflow-y:auto;margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);box-shadow:0 4px 12px rgba(36,55,70,.12)}
.prof-services-legend{float:left;width:100%;font-size:12.5px;color:#636057;margin-bottom:8px}
.prof-zones-dropdown>.prof-services-panel{left:0;right:auto}
.prof-services-option[hidden]{display:none}
[data-languages-caption]{display:flex;align-items:center;flex-wrap:wrap;min-width:0}
.prof-language-search{position:sticky;top:-14px;padding-top:14px;background:var(--paper);z-index:1}
.prof-day-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--cream)}
.prof-day-toggle{display:flex;align-items:center;gap:10px;flex:0 0 120px;font-size:13.5px;font-weight:600;cursor:pointer}
.prof-day-hours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;flex:1 1 460px;min-width:0}
.prof-day-hours[hidden]{display:none}
.prof-day-part{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;padding:0;margin:0;min-width:0}
.prof-day-part legend{font-size:12.5px;color:#636057;margin-bottom:8px}
@media(max-width:600px){.prof-day-hours{grid-template-columns:minmax(0,1fr)}}
.field label.prof-services-option{display:flex;align-items:center;gap:10px;padding:9px 4px;margin:0;font-weight:400;font-size:13.5px;cursor:pointer;clear:both}
@media(max-width:1000px){.prof-activity-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.prof-activity-row{grid-template-columns:minmax(0,1fr)}}

input[type=checkbox].vlm-cb{appearance:none;margin:0;width:18px;height:18px;border:1.5px solid rgba(36,55,70,.3);border-radius:4px;background:#fff;cursor:pointer;flex:none}
input[type=checkbox].vlm-cb:checked{background:var(--accent);border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:13px 13px;background-repeat:no-repeat;background-position:center}

/* Tabs (panel negocio / superadmin / mi cuenta) */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap}
.tabs a{padding:12px 16px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--ink);border-bottom-color:var(--gold)}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}
.badge-gold{background:rgba(219,194,122,.25);color:#8a6d1f}
.badge-green{background:rgba(74,158,110,.16);color:#2f7a51}
.badge-muted{background:rgba(36,55,70,.08);color:var(--muted)}

table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;font-size:12px;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
table.data td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}

.section-title{display:flex;align-items:center;gap:14px;margin:36px 0 18px}
.section-title h2{font-size:22px;margin:0}
.section-title .rule{flex:1;height:1px;background:var(--line)}

.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;font-size:14px;z-index:200}

/* Mapa de viento/lluvia en pantalla completa (informacion-de-interes) —
   lightbox CSS-only vía :target, sin JS de estado nuevo (mismo criterio que
   el resto del sitio, ver nota en directorio.templ). El enlace "mapa de
   viento y lluvia" de la home apunta directo a #vlm-map-full. */
.vlm-map-full{display:none;position:fixed;inset:0;z-index:600}
.vlm-map-full:target{display:block}
.vlm-map-full-backdrop{position:absolute;inset:0;background:rgba(15,25,32,.94);display:block}
.vlm-map-full-panel{position:relative;height:100%;display:flex;flex-direction:column}
.vlm-map-full-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:#F7F2E8;font-weight:700;font-size:14px}
.vlm-map-back{display:inline-flex;align-items:center;gap:8px;background:#DBC27A;color:#243746;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:10px;text-decoration:none}
.vlm-map-back:hover{background:#F7F2E8;color:#243746}
.vlm-map-close{color:#F7F2E8;font-weight:700;font-size:13px}
.vlm-map-close:hover{color:#DBC27A}
.vlm-map-full-iframe{flex:1;width:100%;border:0}

/* Mapa propio (MapLibre GL + teselas vectoriales gratis de OpenFreeMap +
   rejillas de datos propias de Open-Meteo): sin iframe de terceros, sin
   logo ajeno — sustituye al embed de Windy. El color continuo (heatmap) y
   las partículas se pintan en canvas propios sobre el mapa (ver
   makeHeat/makeParticles en vlm.js). Antes era Leaflet + teselas raster de
   OpenStreetMap; se cambió a MapLibre (WebGL) + teselas vectoriales para un
   look limpio "solo costa + nombres" y partículas más fluidas.

   26-sep-2026: los controles (capas a la derecha, pills oscuras estilo
   Windy) copiaban a propósito el mapa de la competencia — documentado así
   en el historial. Se cambia aquí a la paleta propia de la marca (crema
   #F7F2E8 / dorado #DBC27A / marino #243746) y los botones de capa pasan a
   la izquierda, para que no se lea como el mismo mapa con otro logo. */
.vlm-owm-map{width:100%;background:#eef5f9}
.vlm-owm-layers{position:absolute;top:14px;left:14px;z-index:500;display:flex;gap:6px;flex-wrap:wrap;background:rgba(247,242,232,.92);padding:6px;border-radius:12px;box-shadow:0 2px 10px rgba(36,55,70,.18)}
.vlm-owm-layer-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:8px;padding:8px 14px;font-weight:700;font-size:12.5px;letter-spacing:.02em;background:transparent;color:#243746;cursor:pointer}
.vlm-owm-layer-btn[aria-pressed="true"]{background:#DBC27A;color:#243746}
.vlm-owm-layer-ic{flex:none}
/* Punto azul en «Lluvia» cuando llueve o va a llover pronto (vlm.js, markRainButtons). */
.vlm-owm-layer-btn{position:relative}
.vlm-owm-layer-btn--alerta::after{content:"";position:absolute;top:4px;right:5px;width:8px;height:8px;border-radius:50%;background:#2F8FE0;box-shadow:0 0 0 2px rgba(247,242,232,.95);animation:vlmLluviaPing 1.8s ease-in-out infinite}
@keyframes vlmLluviaPing{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.vlm-owm-layer-btn--alerta::after{animation:none}}
/* Números de Aire y Agua sobre el mapa (vlm.js, paintValueLabels). */
.vlm-owm-map .maplibregl-marker.vlm-owm-val{z-index:462 !important}
.vlm-owm-val{display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 8px 3px;border-radius:10px;background:rgba(15,25,32,.82);color:#F7F2E8;font-family:'Poppins',system-ui,sans-serif;line-height:1.05;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.vlm-owm-val strong{font-size:15px;font-weight:700}
.vlm-owm-val span{font-size:9.5px;font-weight:600;color:rgba(247,242,232,.75);white-space:nowrap}
/* Botón "Vista 3D" (inclina la cámara + edificios reales en relieve, altura
   real de OpenStreetMap vía render_height/render_min_height) — misma
   esquina que el resto de controles secundarios (derecha), fila propia. */
.vlm-owm-3d-toggle{position:absolute;top:14px;right:14px;z-index:500;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:8px 14px;font-weight:700;font-size:12.5px;letter-spacing:.02em;background:rgba(247,242,232,.92);color:#243746;cursor:pointer;box-shadow:0 2px 10px rgba(36,55,70,.18)}
.vlm-owm-3d-toggle[aria-pressed="true"]{background:#DBC27A;color:#243746}
/* Selector "Clásico/Detallado" del mapa base — segunda fila a la derecha,
   para poder comparar el estilo con carreteras/vegetación de hoy contra el
   mapa más limpio de siempre y quedarse con el que guste más. */
.vlm-owm-style-toggle{position:absolute;top:58px;right:14px;z-index:500;display:flex;gap:6px;background:rgba(247,242,232,.92);padding:6px;border-radius:10px;box-shadow:0 2px 10px rgba(36,55,70,.18)}
.vlm-owm-style-btn{border:0;border-radius:7px;padding:6px 11px;font-weight:700;font-size:11.5px;letter-spacing:.02em;background:transparent;color:#243746;cursor:pointer}
.vlm-owm-style-btn[aria-pressed="true"]{background:#DBC27A;color:#243746}
/* Botón "Negocios": pinta los negocios del directorio como puntos/clústeres
   sobre este mismo mapa (mismo patrón que el mapa de /directorio/), para
   quien quiera ubicarse — tercera fila a la derecha, bajo el selector de
   estilo. Al activarse oculta el heatmap/partículas (compiten visualmente
   con los puntos), y los devuelve al desactivarse. */
.vlm-owm-biz-toggle{position:absolute;top:58px;right:14px;z-index:500;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:8px 14px;font-weight:700;font-size:12.5px;letter-spacing:.02em;background:rgba(247,242,232,.92);color:#243746;cursor:pointer;box-shadow:0 2px 10px rgba(36,55,70,.18)}
.vlm-owm-biz-toggle[aria-pressed="true"]{background:#DBC27A;color:#243746}
.vlm-owm-map .maplibregl-ctrl-top-right{top:144px}
.vlm-owm-map .maplibregl-ctrl-top-left{top:8px;left:8px}
.vlm-owm-map .vlm-owm-home{margin:0 0 8px 0!important;border-radius:50%!important;overflow:hidden;background:#F7F2E8!important;opacity:1!important;box-shadow:0 2px 8px rgba(15,25,34,.35)!important}
.vlm-owm-map .vlm-owm-home button{width:36px!important;height:36px!important;display:grid;place-items:center;color:#243746;background:#F7F2E8!important}
.vlm-owm-map .vlm-owm-home button:hover{background:#DBC27A!important}
.vlm-owm-map .maplibregl-ctrl-attrib{font-size:10.5px;background:rgba(247,242,232,.75)}

/* Lienzos del mapa (heatmap de color + partículas de viento) —
   pointer-events:none para no robarle el arrastre/zoom al mapa de debajo;
   por encima del mapa base y por debajo de los controles propios
   (.vlm-owm-layers en 500). El heatmap va debajo de las partículas. */
.vlm-owm-heat{position:absolute;inset:0;z-index:440;pointer-events:none}
.vlm-owm-is3d .vlm-owm-heat{opacity:.4}
.vlm-owm-particles{position:absolute;inset:0;z-index:450;pointer-events:none}

/* Tarjeta "bajo el cursor" (solo pantalla completa, solo escritorio):
   valores interpolados de las mismas rejillas que pintan el mapa. bottom
   deja sitio a la barra de reproducción (.vlm-owm-timeline) que ocupa el
   borde inferior; right ya no necesita esquivar un control de zoom (ahora
   arriba, no abajo-derecha). */
.vlm-owm-cursor{position:absolute;left:14px;top:14px;z-index:500;min-width:190px;padding:14px 16px;border-radius:14px;background:rgba(15,25,32,.88);backdrop-filter:blur(6px);color:#F7F2E8;pointer-events:none}
.vlm-owm-cursor-row{display:flex;justify-content:space-between;gap:18px;font-size:12.5px;padding:3px 0}
.vlm-owm-cursor-row span{color:rgba(247,242,232,.62)}
.vlm-owm-cursor-row strong{font-variant-numeric:tabular-nums;font-weight:700}
.vlm-owm-cursor--mini{min-width:168px;padding:10px 12px;border-radius:12px}
.vlm-owm-cursor--mini .vlm-owm-cursor-row{font-size:12px;padding:2px 0}
@media (hover:none){.vlm-owm-cursor{display:none}}

/* Leyenda de escala (solo pantalla completa): igual que la esquina
   "Escala km/h" de la competencia — la rampa de color de la capa activa con
   sus números, poblada por JS (buildScale en vlm.js) cada vez que cambia de
   capa u hora. */
.vlm-owm-scale{position:absolute;left:14px;bottom:96px;z-index:500;width:190px;padding:10px 14px;border-radius:14px;background:rgba(15,25,32,.88);backdrop-filter:blur(6px);color:#F7F2E8}
.vlm-owm-scale-title{margin:0 0 6px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#DBC27A}
.vlm-owm-scale-bar{height:8px;border-radius:4px}
.vlm-owm-scale-nums{display:flex;justify-content:space-between;margin-top:4px;font-size:10.5px;font-variant-numeric:tabular-nums;color:rgba(247,242,232,.75)}
@media (hover:none){.vlm-owm-scale{display:none}}

/* Barra de reproducción del mapa (solo pantalla completa): botón de play +
   slider de horas + etiqueta, para adelantar la previsión hora a hora al
   estilo del mapa de la competencia (que también deja "darle al play").
   Debajo del slider va una regla de horas (.vlm-owm-time-ticks, poblada por
   JS) para saber en qué hora estás sin depender solo de la etiqueta suelta. */
.vlm-owm-timeline{position:absolute;left:14px;right:14px;bottom:14px;z-index:500;display:flex;align-items:center;gap:12px;padding:10px 16px 8px;border-radius:14px;background:rgba(15,25,32,.88);backdrop-filter:blur(6px);color:#F7F2E8}
.vlm-owm-play{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#DBC27A;color:#243746;cursor:pointer;font-size:13px;line-height:1}
.vlm-owm-play[aria-pressed="true"] .vlm-owm-play-icon{display:none}
.vlm-owm-play[aria-pressed="true"]::after{content:"❚❚";font-size:12px}
.vlm-owm-time-track{flex:1 1 auto;min-width:0}
.vlm-owm-time-range{width:100%;display:block;accent-color:#DBC27A;cursor:pointer}
.vlm-owm-time-ticks{position:relative;height:13px;margin-top:2px}
.vlm-owm-tick{position:absolute;top:0;transform:translateX(-50%);font-size:9.5px;font-weight:600;letter-spacing:.02em;color:rgba(247,242,232,.62);white-space:nowrap}
.vlm-owm-tick.vlm-owm-tick-day{color:#DBC27A;font-weight:700}
.vlm-owm-tick:first-child{transform:translateX(0)}
.vlm-owm-tick:last-child{transform:translateX(-100%)}
.vlm-owm-time-label{flex:none;min-width:100px;text-align:right;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Slider "Banderas por playa" (informacion-de-interes): flechas + input
   range que mueven el carril tarjeta a tarjeta (ver vlm-flags-* en vlm.js),
   más el arrastre directo con ratón/dedo como atajo. Sin inclinación 3D —
   solo scroll-snap para que quede centrada la tarjeta al soltar;
   overscroll-behavior-x:contain para que el gesto no arrastre toda la
   página en móvil (mismo criterio que los carruseles de la home). */
.vlm-flags-controls{display:flex;align-items:center;gap:12px;margin-top:18px}
.vlm-flags-arrow{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(36,55,70,.18);background:#F7F2E8;color:#243746;font-size:18px;line-height:1;cursor:pointer}
.vlm-flags-arrow:hover{background:#DBC27A;border-color:#DBC27A}
.vlm-flags-scale{flex:1;display:flex;flex-direction:column;gap:6px}
/* Un input range nativo mueve el centro del thumb entre thumb/2 y
   100%-thumb/2, no entre el borde 0% y 100% del elemento — por eso cada
   número va posicionado con la misma fórmula (ver flagsTickStyle en
   info_live.templ), no con un simple space-between que quedaría
   descentrado respecto al pin. */
.vlm-flags-ticks{position:relative;height:12px}
.vlm-flags-tick{position:absolute;top:0;transform:translateX(-50%);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(36,55,70,.4);line-height:1;white-space:nowrap}
.vlm-flags-range{display:block;width:100%;margin:0;padding:0;border:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(36,55,70,.16);outline:none}
.vlm-flags-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:20px;height:20px;border-radius:50%;background:#DBC27A;border:2px solid #243746;cursor:pointer;margin-top:-8px}
.vlm-flags-range::-moz-range-track{height:4px;border-radius:2px;background:rgba(36,55,70,.16)}
.vlm-flags-range::-moz-range-thumb{box-sizing:border-box;width:20px;height:20px;border-radius:50%;background:#DBC27A;border:2px solid #243746;cursor:pointer}
.vlm-flags-stage{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:26px 0 44px;margin-top:16px;background:linear-gradient(165deg,#243746 0%,#1A2833 100%);cursor:grab;touch-action:pan-y}
.vlm-flags-stage::-webkit-scrollbar{display:none}
.vlm-flags-stage.vlm-dragging{cursor:grabbing}
.vlm-flags-track{display:inline-flex;align-items:stretch;gap:14px}
.vlm-flags-pad{flex:none;width:calc(clamp(18px,4vw,48px) - 14px);scroll-snap-align:none}
.vlm-flag-card{position:relative;scroll-snap-align:center;flex:none;width:172px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),linear-gradient(160deg,#2c4759,#1a2833);border:1px solid rgba(219,194,122,.28);border-radius:16px;padding:18px 17px;box-shadow:0 22px 40px -26px rgba(0,0,0,.65);user-select:none}
.vlm-flag-card:hover{border-color:rgba(219,194,122,.5)}
.vlm-flag-km{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:#DBC27A;background:rgba(219,194,122,.14);padding:3px 7px;border-radius:20px}
.vlm-flag-icon{display:block;transform-origin:8px 26px;animation:vlmFlagWave 2.6s ease-in-out infinite}
@keyframes vlmFlagWave{
  0%,100%{transform:rotate(0deg) skewY(0deg)}
  50%{transform:rotate(-1.5deg) skewY(-2.5deg)}
}

@media (max-width:860px){
  .dir-layout{grid-template-columns:1fr}
  .filters{position:static}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .nav{display:none}
}

/* Franja de clima (topbar): en pantallas donde el contenido no cabe en una
   línea, justify-content:center desborda el texto por IGUAL a los dos lados
   del centro — con overflow-x:auto eso dej el arranque ("Mar Menor 30°...")
   fuera del rango que se puede alcanzar haciendo scroll, permanentemente
   oculto (bug real visto en producción a 390px de ancho). flex-start deja
   el arranque siempre visible y el resto se alcanza haciendo scroll. */
.vlm-topbar-track{display:flex;align-items:center;gap:16px;flex:none}
.vlm-topbar-track--copia,.vlm-topbar-fin{display:none}
@keyframes vlmTopbar{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:640px){
  /* La franja se desliza sola y sin parar: dos copias seguidas de los
     datos, cada una se desplaza su propio ancho y el bucle no se nota. */
  #vlm-topbar{overflow:hidden !important}
  .vlm-topbar-row{justify-content:flex-start !important;gap:0 !important;padding:0 !important;max-width:none !important}
  .vlm-topbar-track{padding-right:16px;animation:vlmTopbar 26s linear infinite;will-change:transform}
  .vlm-topbar-track--copia{display:flex}
  .vlm-topbar-fin{display:inline}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  #vlm-topbar{overflow-x:auto !important}
  .vlm-topbar-row{padding:0 18px !important}
  .vlm-topbar-track{animation:none}
  .vlm-topbar-track--copia,.vlm-topbar-fin{display:none}
}

/* Cabecera en móvil (2026-10-07): solo el logo y el icono de entrar. El
   menú, el idioma y el resto viven en el menú inferior ("Más"). */
.vlm-entrar-ico{display:none}
.vlm-mas-nav{display:none}
@media (max-width:640px){
  header .vlm-nav-mobile,header .vlm-lang-header{display:none !important}
  .vlm-bottom-nav{z-index:80 !important}
  .vlm-header-hueco{display:block !important}
  .vlm-logo{height:46px !important}
  .vlm-entrar{display:grid !important;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(247,242,232,.28);color:#F7F2E8 !important}
  .vlm-entrar-ico{display:flex}
  .vlm-entrar-txt,.vlm-acc-name{display:none}
  .vlm-acc-avatar{width:36px !important;height:36px !important;font-size:15px !important}
  .vlm-mas-nav:not([hidden]){position:absolute;right:8px;bottom:calc(100% + 8px);display:flex;flex-direction:column;min-width:214px;padding:6px;background:#243746;border:1px solid rgba(247,242,232,.18);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
  .vlm-mas-item{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:9px;color:#F7F2E8;font-size:14.5px;font-weight:500;text-decoration:none}
  .vlm-mas-item:active{background:rgba(247,242,232,.1)}
  .vlm-mas-item svg{flex:none;color:#DBC27A}
  .vlm-mas-item--cta{margin-top:4px;border-top:1px solid rgba(247,242,232,.14);border-radius:0 0 9px 9px;color:#DBC27A;font-weight:600}
  .vlm-mas-lang{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px;padding:11px 12px 9px;border-top:1px solid rgba(247,242,232,.14);font-size:12.5px;color:rgba(247,242,232,.62)}
  .vlm-mas-lang>span:last-child{font-size:14px !important}
  /* Pie: la marca arriba y los cuatro bloques de enlaces de dos en dos. */
  .vlm-foot-cols{display:grid !important;grid-template-columns:1fr 1fr;gap:28px 18px !important}
  .vlm-foot-cols>*{min-width:0 !important}
  .vlm-foot-marca{grid-column:1 / -1}
  .vlm-foot-marca img{height:auto !important;width:min(100%,300px) !important}
  .vlm-foot-legal{flex-direction:column;gap:10px !important}
  .vlm-contacto-directo{flex-basis:100% !important;max-width:none !important}
}

/* Nav principal del header: tira horizontal con scroll propio en escritorio
   y tablet, pero por debajo de 640px el resto de la fila (logo+Entrar+CTA)
   ya no le deja sitio real — se quedaba en 0px de ancho, inalcanzable con
   scroll (nada que agarrar). Se sustituye por el mismo patrón de
   desplegable data-toggle/data-menu que ya usa el menú de cuenta (vlm.js),
   sin JS nuevo. */
@media (max-width:1120px){
  /* Subido de 640 a 1120px al entrar «Mapa» y el selector ES | EN: entre
     esos anchos la tira ya no cabía y «Blog» salía cortado. */
  .vlm-nav-desktop{display:none !important}
  .vlm-nav-mobile{display:flex !important}
}
.vlm-burger:hover{background:rgba(255,255,255,.08)}

/* Desplegable ☰ del header vs. menú inferior fijo estilo app (solo móvil,
   ver bottomNav): en móvil Directorio y Guía ya tienen su propio icono
   abajo, así que mostrarlos también dentro del ☰ era el mismo destino
   duplicado dos veces en dos sitios distintos de la pantalla. Por debajo de
   640px se ocultan del desplegable y solo quedan las rutas que el menú
   inferior no cubre (Información, Blog, Añade tu negocio). En escritorio
   (sin menú inferior) el ☰ sigue mostrando las cinco. */
@media (max-width:640px){
  .vlm-menu-in-bottomnav{display:none !important}
}

/* Cabecera de "Sobre nosotros"/"Contacto" (instHeader): min-height:300px da
   presencia en escritorio, pero en móvil deja un bloque azul casi vacío de
   ~170-180px entre el título y el contenido — se quita la altura mínima y
   que el bloque se ajuste al contenido real (miga de pan + título). */
@media (max-width:640px){
  .inst-hero{min-height:0 !important}
}

/* Panel Superadmin: la barra lateral fija (220px) no cabe en móvil y dejaba
   el contenido aplastado en una columna minúscula. Por debajo de 760px se
   oculta y se sustituye por el botón+desplegable de adminMobileNav (mismo
   patrón data-toggle/data-menu, sin JS nuevo). */
@media (max-width:760px){
  .vlm-admin-sidebar{display:none !important}
  .vlm-admin-nav-mobile{display:block !important}
}
.vlm-admin-burger:hover{background:rgba(36,55,70,.04)}

/* Rejilla de "01 Comer / 02 Dormir..." de la home: en móvil, una tarjeta por
   fila obligaba a mucho scroll para ver una sección entera — a 2 columnas se
   ve el bloque casi completo de un vistazo, igual que en el resto de webs de
   directorio. */
@media (max-width:640px){
  .vlm-cardgrid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
}
@media (max-width:400px){
  .vlm-cardgrid h4{font-size:14.5px !important}
}

/* Panel de clima de la home: Mar Menor/Mediterráneo/Banderas hoy tienen
   border-right como separador vertical en escritorio (3 columnas en fila);
   en móvil se apilan uno debajo de otro y ese border-right ya no separa
   nada visualmente — el bloque de banderas necesita su propia línea
   horizontal encima, como el resto de bloques. */
@media (max-width:640px){
  .vlm-weather-banderas{border-top:1px solid rgba(247,242,232,.22) !important;padding-top:14px !important;margin-top:2px}
}

/* CTA "Añade tu negocio": lo usan solo negocios nuevos (poco tráfico), así
   que en móvil deja de ir fijo en el header —quitaba sitio al nav— y pasa a
   ser una entrada más, destacada en dorado, dentro del propio desplegable
   de navegación (mismo data-toggle="mobile-nav"). Sigue disponible también
   en el footer y en /anadir-negocio/. */
@media (max-width:640px){
  .vlm-anadir{display:none !important}
}

/* Barra de categorías del directorio: "Todo" va fuera del carril de scroll
   (columna fija a la izquierda) y el resto de categorías se desplazan por
   debajo — mismo patrón que los chips de categoría del buscador de portada,
   para no perder nunca de vista el filtro "sin categoría" al hacer scroll
   horizontal en móvil. */

/* Panel de "Filtros" del directorio: en escritorio (>860px, el mismo punto
   de corte donde .dir-layout deja de apilar la sidebar) siempre visible; en
   móvil arranca plegado y el botón "Filtros" lo abre/cierra con el mismo
   mecanismo data-toggle/data-menu del resto del sitio, en vez de obligar a
   bajar por 8 selects antes de llegar a la rejilla de resultados. */
@media (min-width:861px){
  [data-menu="dir-filters"]{display:block !important}
  .vlm-dir-filters-toggle{cursor:default}
  .vlm-dir-filters-chevron{display:none}
}
@media (max-width:860px){
  [data-menu="dir-filters"]{margin-top:14px}
}

/* Desplegable "Servicios" del sidebar de filtros: quita la marca nativa del
   <summary> (varía de un navegador a otro) por un chevron propio que gira al
   abrirse, coherente con el resto de iconografía del sitio. */
.vlm-servicios-summary{cursor:pointer;font-size:13px;font-weight:600;color:#243746;display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none}
.vlm-servicios-summary::-webkit-details-marker{display:none}
.vlm-servicios-chevron{flex:none;transition:transform .15s ease}
.vlm-servicios-details[open] .vlm-servicios-chevron{transform:rotate(180deg)}

/* Tarjeta "Noticias de la zona" de informacion-de-interes: cada titular es
   su propia fila con hover propio (fondo + flecha), por eso necesita clases
   en vez de solo estilos inline como el resto del bloque de datos en vivo. */
.vlm-news-item{display:flex;align-items:flex-start;gap:10px;padding:10px;margin:0 -10px;border-radius:10px;text-decoration:none;transition:background .15s ease}
.vlm-news-item:hover{background:var(--cream)}
.vlm-news-item:hover .vlm-news-arrow{opacity:1;transform:translate(1px,-1px)}
.vlm-news-badge{display:inline-block;padding:2px 9px;border-radius:10px;background:rgba(36,55,70,.08);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.vlm-news-arrow{flex:none;margin-top:2px;opacity:0;transition:opacity .15s ease,transform .15s ease}
/* Foto de los comunicados oficiales (CARM/ayuntamientos) — alojada en
   nuestro propio servidor, nunca hotlinkeada; la prensa privada no tiene
   ImageURL y por eso nunca pinta este bloque (ver info_live.templ). */
.vlm-news-thumb{flex:none;width:64px;height:64px;border-radius:10px;object-fit:cover;background:rgba(36,55,70,.06)}

/* Índice "En esta guía" de la guía pilar: en escritorio es una sidebar
   angosta (max-width:300px) al lado del contenido; por debajo de donde el
   flex-wrap la manda a su propia fila (~800px) ese max-width se quedaba
   puesto y dejaba un hueco vacío a la derecha del cuadro. También se quita
   el sticky en móvil: fijar en pantalla una lista de 9 enlaces mientras se
   lee el resto de la guía se come media pantalla para nada. */
@media (max-width:800px){
  .vlm-guia-toc{max-width:none !important;width:100%;position:static !important}
}

/* Menú inferior fijo estilo app (Inicio/Directorio/Guía/Buscar/Cuenta): solo
   se muestra en móvil, mismo corte que el resto de patrones "app" del sitio
   (burger del header, sidebar de Superadmin...). #vlm-app gana un hueco al
   final igual a la altura real del menú para que no tape el pie de página ni
   el último tramo de contenido al hacer scroll hasta abajo. */
@media (max-width:640px){
  .vlm-bottom-nav{display:flex !important}
  #vlm-app{padding-bottom:calc(54px + env(safe-area-inset-bottom))}
}

/* Buscador de portada en móvil: el select de Zona (flex:0 1 220px) y el
   botón Buscar (flex:0 0 auto) dejaban hueco/descompensado al pasar a su
   propia fila bajo el input, en vez de repartirse el ancho completo como en
   el diseño de referencia. */
@media (max-width:640px){
  /* Sin esto, entre ~430-640px el campo "Qué buscas" no llegaba a ocupar
     toda la fila y dejaba justo el hueco necesario para que Zona (con
     min-width:0 de aquí abajo) se colara en la MISMA fila como una tira de
     pocos px — su etiqueta "ZONA" se quedaba cortada por el overflow:hidden
     del recuadro. Forzar el 100% aquí garantiza el salto de línea siempre. */
  .vlm-search-q{flex:1 1 100% !important}
  .vlm-search-zona{flex:1 1 0 !important;min-width:0 !important}
  .vlm-search-buscar{flex:1 1 0 !important;padding:0 clamp(14px,4vw,22px) !important}
}

/* Fila superior del panel "por km" (Toca tu kilómetro / Quitar / Filtrar por
   el km): en escritorio cabe en una línea porque el span central absorbe el
   espacio sobrante, pero en móvil (<480px) la suma de los tres textos con
   white-space:nowrap supera el ancho disponible y el botón "Filtrar por el
   km" queda cortado por el padding-right reservado para la X de cerrar.
   Con flex-wrap el rótulo pasa a su propia línea y Quitar/Filtrar bajan
   alineados a la derecha en la siguiente. */
@media (max-width:480px){
  .vlm-km-toprow{flex-wrap:wrap !important;justify-content:flex-end !important;row-gap:8px !important}
  .vlm-km-toprow>span{flex:1 1 100% !important;min-width:0 !important}
}

/* Selector de estrellas del formulario "Deja tu reseña" (ficha.templ): 5
   botones reales en vez de un <select> nativo, porque el desplegable de un
   <select> lo pinta el sistema operativo y no admite CSS — siempre sale con
   los colores por defecto del navegador. vlm.js pinta/despinta .is-active
   al pasar el ratón y al hacer click. */
.vlm-star-btn{border:0;background:none;padding:0;margin:0;font-size:21px;line-height:1;color:#DCD3C0;cursor:pointer;transition:color .1s}
.vlm-star-btn.is-active{color:#DBC27A}

/* Acciones rápidas de la ficha: una franja compacta de iconos útiles que
   mantiene el contacto despejado y prioriza llamar, redes, web y mapa. */
.vlm-ficha-actions{display:flex;justify-content:space-between;gap:5px;align-items:flex-start}
.vlm-ficha-action{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;color:#243746;text-decoration:none;padding:0;background:transparent;border:0}
.vlm-ficha-action-icon{width:48px;max-width:100%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#243746;color:#F7F2E8}
.vlm-ficha-action:hover .vlm-ficha-action-icon{background:#47637A;color:#F7F2E8}
.vlm-ficha-action-primary .vlm-ficha-action-icon{background:#DBC27A;color:#243746}
.vlm-ficha-action-primary:hover .vlm-ficha-action-icon{background:#D1B566;color:#243746}
.vlm-ficha-action-instagram .vlm-ficha-action-icon{background:#713447}
.vlm-ficha-action-instagram:hover .vlm-ficha-action-icon{background:#8B4358}
.vlm-ficha-action-directions .vlm-ficha-action-icon{background:#47637A}
.vlm-ficha-share{font:inherit;cursor:pointer}
.vlm-ficha-share .vlm-ficha-action-icon{background:#304D65}
.vlm-ficha-action-label{font-size:9.5px;font-weight:600;line-height:1.05;text-align:center;overflow-wrap:anywhere}
.vlm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Ficha: la galería ocupa la columna principal; las miniaturas se superponen
   sobre la imagen de portada para dejar acciones, horario y mapa visibles
   desde el inicio de la ficha en escritorio. */
.vlm-ficha-layout{display:flex;flex-wrap:wrap;gap:clamp(18px,2vw,28px);align-items:flex-start}
.vlm-ficha-primary{flex:999 1 520px;min-width:0}
.vlm-ficha-aside{flex:1 1 380px;min-width:320px;max-width:440px;align-self:stretch;position:relative;display:flex;flex-direction:column;gap:12px}
.vlm-ficha-actions-card{position:sticky;top:99px;z-index:4}
.vlm-ficha-gallery{margin-bottom:clamp(18px,2.5vw,28px)}
.vlm-ficha-gallery-stage{position:relative;width:100%;overflow:hidden;isolation:isolate;border-radius:14px}
.vlm-ficha-gallery-stage>div[data-vlm-gallery-open]{width:100%}
.vlm-ficha-gallery-cover{filter:brightness(.84)}
.vlm-ficha-gallery-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(10,18,23,.84) 0%,rgba(10,18,23,.46) 34%,rgba(10,18,23,.08) 65%,transparent 100%)}
.vlm-ficha-gallery-thumbs{position:absolute;right:12px;top:12px;z-index:2;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;width:clamp(112px,17%,154px);height:218px;padding:5px;background:rgba(26,40,51,.62);border-radius:10px}
.vlm-ficha-gallery-thumbs:has(.vlm-ficha-gallery-thumb:nth-child(2):last-child){grid-template-rows:repeat(2,minmax(0,1fr));height:150px}
.vlm-ficha-gallery-thumbs-single{grid-template-rows:1fr;width:clamp(112px,17%,154px);height:106px}
.vlm-ficha-gallery-thumb{min-width:0;height:100%;border:1px solid rgba(247,242,232,.82);border-radius:6px;overflow:hidden}
.vlm-ficha-gallery-all{position:absolute;top:238px;right:12px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(26,40,51,.82);color:#F7F2E8;border:0;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:600;cursor:pointer}
.vlm-ficha-gallery-all-solo{top:12px}
.vlm-ficha-gallery-thumbs-single + .vlm-ficha-gallery-all{top:126px}
.vlm-ficha-gallery-thumbs:has(.vlm-ficha-gallery-thumb:nth-child(2):last-child) + .vlm-ficha-gallery-all{top:170px}
.vlm-ficha-gallery-info{position:absolute;z-index:2;left:clamp(16px,2.5vw,28px);right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);max-width:760px}
.vlm-ficha-gallery-info button[aria-label*="favoritos"]{color:#F7F2E8 !important}
.vlm-ficha-header-empty{position:relative;background:#243746;padding:24px;border-radius:14px}
.vlm-ficha-header-empty .vlm-ficha-gallery-info{position:static}
@media (max-width:900px){
  .vlm-ficha-primary{flex-basis:100%}
  .vlm-ficha-aside{position:static;max-width:none;width:100%}
  .vlm-ficha-actions-card{position:static}
}
@media (max-width:520px){
  .vlm-ficha-gallery-thumbs{right:9px;top:9px;width:104px;height:172px;padding:4px;gap:4px}
  .vlm-ficha-gallery-thumbs:has(.vlm-ficha-gallery-thumb:nth-child(2):last-child){height:116px}
  .vlm-ficha-gallery-thumbs-single{width:104px;height:84px}
  .vlm-ficha-gallery-all{top:190px;right:9px;padding:7px 9px;font-size:11px}
  .vlm-ficha-gallery-all-solo{top:9px}
  .vlm-ficha-gallery-thumbs-single + .vlm-ficha-gallery-all{top:101px}
  .vlm-ficha-gallery-thumbs:has(.vlm-ficha-gallery-thumb:nth-child(2):last-child) + .vlm-ficha-gallery-all{top:133px}
  .vlm-ficha-gallery-info{left:16px;right:16px;bottom:16px}
}

/* Tarjeta de "Sol y luna" con recorrido animado (info_live.templ +
   vlmSunArcInit en vlm.js). El SVG llega ya pintado desde el servidor en la
   posición inicial; el botón lo destapa el JS, así que sin JS no aparece un
   control que no haría nada. */
.vlm-sunarc-stage{border:1px solid rgba(36,55,70,.12);border-radius:10px;overflow:hidden;background:#243746}
.vlm-sunarc-sun{filter:drop-shadow(0 0 10px rgba(242,193,78,.75));transition:opacity .3s}
.vlm-sunarc-moon{transition:opacity .3s}
.vlm-sunarc-play{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(36,55,70,.16);background:#FCFAF5;color:#243746;font-family:inherit;font-size:13px;font-weight:600;padding:9px 15px;border-radius:9px;cursor:pointer}
.vlm-sunarc-play:hover{background:#F2ECDF}
.vlm-sunarc-play-icon{font-size:11px;color:#47637A}
/* Descripciones editoriales: el texto de ficha se convierte en bloques
   seguros del lado del servidor para conservar lectura y jerarquía. */
.vlm-rich-desc > :first-child{margin-top:0}
.vlm-rich-desc > :last-child{margin-bottom:0}
.vlm-rich-desc p{margin:0 0 14px}
.vlm-rich-desc h3{margin:22px 0 8px;font-size:1.12em;line-height:1.35;color:#243746}
.vlm-rich-desc ul{margin:0 0 14px;padding-left:20px}
.vlm-rich-desc li+li{margin-top:4px}

/* ---------- Directorio: categorías fijas + barra horizontal de filtros ----------
   La barra de categorías se queda pegada justo debajo de la cabecera. Antes
   usaba solo la altura del header y olvidaba los 34px de la franja superior,
   así que al hacer scroll quedaba medio tapada. */
.vlm-dir-cats{background:#E6DCC8;border-bottom:1px solid rgba(36,55,70,.09);position:sticky;top:calc(34px + clamp(60px,7vw,76px));z-index:40}
.vlm-dir-filterbar{background:#F1EADB;border-bottom:1px solid rgba(36,55,70,.09)}
.vlm-dir-filterbar-head{display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.vlm-dir-filters-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(36,55,70,.18);background:#FCFAF5;color:#243746;border-radius:10px;padding:9px 14px;font:600 13.5px Poppins,system-ui,sans-serif;cursor:pointer}
.vlm-dir-filters-n{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#243746;color:#F7F2E8;font-size:11px;font-weight:700}
.vlm-dir-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:12px 0 14px}
.vlm-f{display:flex;flex-direction:column;gap:5px;flex:1 1 110px;min-width:104px;max-width:230px;position:relative}
.vlm-f--sm{flex:0 1 94px;min-width:90px}
.vlm-f--q{flex:1.3 1 145px;min-width:140px;max-width:260px}
.vlm-f--zona{flex-basis:130px;min-width:126px}
.vlm-f--com{flex-basis:132px;min-width:130px}
.vlm-f--cat{flex:1.3 1 170px;min-width:166px}
.vlm-f-qbox{position:relative;display:block}
.vlm-f-qbox svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);pointer-events:none}
.vlm-f-qbox .vlm-f-control{padding-left:33px}
.vlm-f-qbox .vlm-f-control::placeholder{color:#8C8A82}
.vlm-f--km{flex:1.2 1 170px;max-width:250px}
.vlm-f-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5C5A54;white-space:nowrap}
.vlm-f-label label{font:inherit;color:inherit;letter-spacing:inherit}
.vlm-f-kmval{font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none;color:#47637A}
.vlm-f-control{box-sizing:border-box;width:100%;height:40px;border:1px solid rgba(36,55,70,.18);border-radius:10px;background:#FCFAF5;color:#243746;font:500 13.5px Poppins,system-ui,sans-serif;padding:0 11px;outline:none}
select.vlm-f-control{cursor:pointer}
.vlm-f-control:focus-visible,.vlm-fdrop[open]>.vlm-fdrop-btn{border-color:#47637A;box-shadow:0 0 0 3px rgba(107,143,168,.22)}
.vlm-f-kmbox{display:flex;align-items:center;gap:8px}
.vlm-f-kmbox input[type=range]{flex:1 1 auto;min-width:0;accent-color:#47637A;margin:0}
.vlm-f-kmclear{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(36,55,70,.1);color:#243746;font-size:15px;line-height:1;text-decoration:none}
.vlm-fdrop{position:relative}
.vlm-fdrop-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;user-select:none}
.vlm-fdrop-btn::-webkit-details-marker{display:none}
.vlm-fdrop-btn--on{background:#243746;border-color:#243746;color:#F7F2E8;font-weight:600}
.vlm-fdrop-txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlm-fdrop-chev{flex:none;transition:transform .15s ease}
.vlm-fdrop[open] .vlm-fdrop-chev{transform:rotate(180deg)}
.vlm-fdrop-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:45;min-width:max(100%,230px);max-height:min(340px,60vh);overflow-y:auto;background:#FCFAF5;border:1px solid rgba(36,55,70,.18);border-radius:12px;box-shadow:0 18px 44px -18px rgba(36,55,70,.45);padding:8px 12px}
.vlm-fdrop-hint{margin:2px 0 6px;font-size:11.5px;line-height:1.4;color:#636057;white-space:normal}
.vlm-fdrop-opt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;color:#3B3B39;cursor:pointer;white-space:nowrap}
.vlm-dir-clear{font-size:12.5px;font-weight:600;color:#47637A;text-decoration:underline;white-space:nowrap}
.vlm-dir-clear--desktop{align-self:center;margin-top:16px}
.vlm-dir-clear--mobile{display:none}
/* Rejilla: 41 negocios + la casilla de alta = 42, que cuadra en 6, 3 y 2 columnas. */
.vlm-dir-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.vlm-dir-altatile{display:flex;flex-direction:column;justify-content:center;gap:7px;aspect-ratio:1/1;box-sizing:border-box;border:2px dashed rgba(36,55,70,.3);border-radius:14px;background:#ECE8DF;padding:clamp(12px,1.4vw,16px);text-decoration:none;overflow:hidden}
@media (min-width:861px){
  .vlm-dir-filterbar [data-menu="dir-filters"]{display:block !important}
}
@media (max-width:1180px){
  .vlm-dir-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .vlm-dir-filterbar-head{display:flex}
  .vlm-dir-filters{padding-top:2px}
  .vlm-f,.vlm-f--sm,.vlm-f--km{flex:1 1 calc(50% - 6px);max-width:none;min-width:0}
  .vlm-f--km,.vlm-f--q{flex-basis:100%}
  .vlm-f--q,.vlm-f--cat,.vlm-f--zona,.vlm-f--com{max-width:none;min-width:0}
  .vlm-dir-clear--desktop{display:none}
  .vlm-dir-clear--mobile{display:inline}
  .vlm-fdrop-panel{min-width:100%}
}
@media (max-width:640px){
  .vlm-dir-cats{top:94px}
  .vlm-dir-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* ---------- Portada: accesos directos encima del buscador ---------- */
.vlm-home-quickcats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.vlm-home-quickcat{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 12px;border:1px solid rgba(36,55,70,.16);border-radius:10px;background:#FCFAF5;color:#243746;font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.vlm-home-quickcat:hover,.vlm-home-quickcat:focus-visible{background:#243746;border-color:#243746;color:#F7F2E8}
.vlm-rowtitle:hover{text-decoration:underline !important;text-underline-offset:5px;text-decoration-thickness:2px !important}
@media (max-width:640px){
  .vlm-home-quickcats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .vlm-home-quickcat{font-size:13.5px;min-height:44px}
  .vlm-weather-col{border-right:0 !important;padding-left:0 !important;padding-right:0 !important}
}

/* Tarjetas del directorio: al pasar a 6 columnas son pequeñas y el texto
   ocupa casi toda la foto, así que el velo oscuro cubre la tarjeta entera
   (suave arriba, denso abajo) en vez de solo el tercio inferior. */
.vlm-dir-tile-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,26,34,.30) 0%,rgba(16,26,34,.48) 30%,rgba(16,26,34,.80) 60%,rgba(16,26,34,.94) 100%)}
.vlm-dir-tile-txt{text-shadow:0 1px 3px rgba(10,18,24,.75)}
/* Rótulos de los filtros: que no se pisen entre sí cuando la fila va justa. */
.vlm-f-label{overflow:hidden}
.vlm-f-label>label,.vlm-f-label{text-overflow:ellipsis}
.vlm-f-kmval{flex:none;margin-left:6px}
.vlm-f--km{flex:1 1 150px;min-width:140px}
/* Nombre de la tarjeta: hasta dos líneas antes de cortar con puntos. */
.vlm-dir-tile-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}

/* ---------- Portada: tarjeta del tiempo (homeWeatherPanel) ---------- */
.vlm-wx{margin:clamp(16px,2.2vw,24px) auto 0;max-width:860px;text-align:left;color:#F7F2E8;background:rgba(20,32,40,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(247,242,232,.18);border-radius:18px;padding:clamp(16px,2.4vw,24px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px clamp(16px,2.6vw,28px);align-items:center}
.vlm-wx{position:relative;overflow:hidden;isolation:isolate}
.vlm-wx>*{position:relative;z-index:1}
.vlm-wx p{margin:0}
/* -- Efectos de la tarjeta: cielo según data-cielo, estelas de viento y
      recorrido del sol. Lentos a propósito: detrás ya se mueve el vídeo. -- */
.vlm-wx>.vlm-wx-fx{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.vlm-wx-fx>*{position:absolute;display:block}
.vlm-wx-cielo-fx{inset:0;opacity:0}
.vlm-wx-nube{display:none;top:var(--y);left:0;width:var(--w);height:calc(var(--w) * .34);border-radius:50%;background:radial-gradient(closest-side,rgba(247,242,232,.26),rgba(247,242,232,.12) 55%,rgba(247,242,232,0));filter:blur(6px);animation:vlmWxNube var(--t) linear infinite;animation-delay:var(--d)}
.vlm-wx-nube--1{--y:4%;--w:46%;--t:64s;--d:-12s}
.vlm-wx-nube--2{--y:34%;--w:62%;--t:92s;--d:-58s}
.vlm-wx-nube--3{--y:62%;--w:38%;--t:76s;--d:-30s}
@keyframes vlmWxNube{from{transform:translateX(-110%)}to{transform:translateX(280%)}}
[data-cielo="nubes"] .vlm-wx-nube,[data-cielo="sol-nubes"] .vlm-wx-nube,[data-cielo="luna-nubes"] .vlm-wx-nube,[data-cielo="lluvia"] .vlm-wx-nube,[data-cielo="tormenta"] .vlm-wx-nube,[data-cielo="niebla"] .vlm-wx-nube,[data-cielo="nieve"] .vlm-wx-nube{display:block}
[data-cielo="sol-nubes"] .vlm-wx-nube--2,[data-cielo="luna-nubes"] .vlm-wx-nube--2{display:none}
/* niebla: bancos anchos y bajos que apenas se mueven */
[data-cielo="niebla"] .vlm-wx-nube{--w:120%;height:26%;filter:blur(14px);animation-duration:140s}
/* sol: resplandor arriba a la izquierda y rayos que giran muy despacio */
[data-cielo="sol"] .vlm-wx-cielo-fx,[data-cielo="sol-nubes"] .vlm-wx-cielo-fx{opacity:1;inset:auto;left:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(245,196,81,.34),rgba(245,196,81,.10) 45%,rgba(245,196,81,0) 70%),repeating-conic-gradient(from 0deg,rgba(245,196,81,.065) 0deg 5deg,rgba(245,196,81,0) 5deg 20deg);-webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);animation:vlmWxGira 90s linear infinite}
@keyframes vlmWxGira{to{transform:rotate(360deg)}}
/* noche despejada: estrellas que titilan */
[data-cielo="luna"] .vlm-wx-cielo-fx,[data-cielo="luna-nubes"] .vlm-wx-cielo-fx{opacity:1;background-image:radial-gradient(2.2px 2.2px at 8% 18%,#fff 50%,transparent 51%),radial-gradient(2.0px 2.0px at 23% 62%,#fff 50%,transparent 51%),radial-gradient(2.4px 2.4px at 41% 12%,#fff 50%,transparent 51%),radial-gradient(1.9px 1.9px at 57% 44%,#fff 50%,transparent 51%),radial-gradient(2.3px 2.3px at 72% 20%,#fff 50%,transparent 51%),radial-gradient(2.0px 2.0px at 88% 58%,#fff 50%,transparent 51%),radial-gradient(2.1px 2.1px at 94% 9%,#fff 50%,transparent 51%),radial-gradient(1.8px 1.8px at 33% 84%,#fff 50%,transparent 51%),radial-gradient(2.0px 2.0px at 66% 78%,#fff 50%,transparent 51%);animation:vlmWxTitila 5.5s ease-in-out infinite}
@keyframes vlmWxTitila{0%,100%{opacity:.35}50%{opacity:.9}}
/* lluvia, llovizna, chubascos y tormenta: trazos que caen inclinados */
[data-cielo="lluvia"] .vlm-wx-cielo-fx,[data-cielo="tormenta"] .vlm-wx-cielo-fx{opacity:.5;inset:-40% -20%;background-image:repeating-linear-gradient(100deg,rgba(190,220,240,0) 0 22px,rgba(190,220,240,.34) 22px 23px,rgba(190,220,240,0) 23px 46px);background-size:92px 130px;animation:vlmWxLluvia .9s linear infinite}
@keyframes vlmWxLluvia{to{background-position:-23px 130px}}
[data-cielo="tormenta"]>.vlm-wx-fx{animation:vlmWxRayo 9s linear infinite}
@keyframes vlmWxRayo{0%,91%,95%,100%{background:transparent}92%,94%{background:rgba(255,255,255,.16)}}
/* nieve: copos lentos */
[data-cielo="nieve"] .vlm-wx-cielo-fx{opacity:.7;inset:-40% 0;background-image:radial-gradient(2px 2px at 12% 20%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 38% 60%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 61% 30%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 84% 72%,#fff 50%,transparent 51%);background-size:100% 140px;animation:vlmWxNieve 9s linear infinite}
@keyframes vlmWxNieve{to{background-position:0 140px}}
/* estelas de viento: un cuadrado girado hacia donde sopla; dentro, trazos
   que suben (arriba = sentido del viento) a la velocidad de --wx-dur */
.vlm-wx-estelas{left:50%;top:50%;width:150vmax;max-width:1300px;aspect-ratio:1;margin:0;transform:translate(-50%,-50%) rotate(var(--wx-deg,0deg))}
.vlm-wx-estelas i{position:absolute;left:var(--x);bottom:-12%;width:1.5px;height:var(--l);border-radius:2px;background:linear-gradient(to top,rgba(247,242,232,0),rgba(247,242,232,.34));animation:vlmWxEstela var(--wx-dur,7s) linear infinite;animation-delay:calc(var(--wx-dur,7s) * var(--k))}
.vlm-wx-estelas i:nth-child(1){--x:22%;--l:90px;--k:-.05}
.vlm-wx-estelas i:nth-child(2){--x:31%;--l:60px;--k:-.48}
.vlm-wx-estelas i:nth-child(3){--x:40%;--l:110px;--k:-.82}
.vlm-wx-estelas i:nth-child(4){--x:49%;--l:70px;--k:-.27}
.vlm-wx-estelas i:nth-child(5){--x:58%;--l:100px;--k:-.63}
.vlm-wx-estelas i:nth-child(6){--x:67%;--l:56px;--k:-.14}
.vlm-wx-estelas i:nth-child(7){--x:76%;--l:84px;--k:-.93}
@keyframes vlmWxEstela{from{transform:translateY(0)}to{transform:translateY(-1500px)}}
/* la veleta junto al viento se mece un poco */
.vlm-wx-veleta{transform-origin:50% 50%;animation:vlmWxVeleta 3.2s ease-in-out infinite}
@keyframes vlmWxVeleta{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
/* el icono del cielo flota */
.vlm-wx-icono svg{animation:vlmWxFlota 6s ease-in-out infinite}
@keyframes vlmWxFlota{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
[data-cielo="sol"] .vlm-wx-icono svg{animation:vlmWxGira 40s linear infinite}
/* el sol recorre su línea al cargar la página */
.vlm-wx-pista-hecho{animation:vlmWxHecho 2.2s cubic-bezier(.2,.7,.2,1) both}
.vlm-wx-pista-sol{animation:vlmWxSol 2.2s cubic-bezier(.2,.7,.2,1) both,vlmWxLate 3s ease-in-out 2.2s infinite}
@keyframes vlmWxHecho{from{width:0}}
@keyframes vlmWxSol{from{left:0}}
@keyframes vlmWxLate{0%,100%{box-shadow:0 0 0 4px rgba(245,196,81,.25),0 0 14px rgba(245,196,81,.7)}50%{box-shadow:0 0 0 7px rgba(245,196,81,.12),0 0 22px rgba(245,196,81,.9)}}
.vlm-wx-pista-luna{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#C9D6E2;box-shadow:0 0 10px rgba(201,214,226,.6)}
@media (prefers-reduced-motion:reduce){
  .vlm-wx-fx *,.vlm-wx-fx,.vlm-wx-veleta,.vlm-wx-icono svg,.vlm-wx-pista-hecho,.vlm-wx-pista-sol{animation:none !important}
  .vlm-wx-estelas{display:none}
}
.vlm-wx-rotulo{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#DBC27A;margin-bottom:10px !important}
.vlm-wx-main{display:flex;align-items:center;gap:12px;min-width:0}
.vlm-wx-icono{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(219,194,122,.14)}
.vlm-wx-temp{flex:none;font-size:clamp(40px,5vw,52px);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.vlm-wx-estado{min-width:0;display:flex;flex-direction:column;gap:3px}
.vlm-wx-cielo{font-size:17px;font-weight:600;line-height:1.2}
.vlm-wx-viento{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:rgba(247,242,232,.78);white-space:nowrap}
.vlm-wx-casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:8px}
.vlm-wx-casilla{display:flex;flex-direction:column;gap:4px;min-width:0;padding:10px 12px;border-radius:12px;background:rgba(247,242,232,.08);border:1px solid rgba(247,242,232,.1)}
.vlm-wx-k{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,242,232,.58)}
.vlm-wx-v{font-size:14px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.vlm-wx-sol{grid-column:1 / -1;display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid rgba(247,242,232,.14)}
.vlm-wx-solhora{flex:none;display:flex;flex-direction:column;gap:2px}
.vlm-wx-solhora strong{font-size:22px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.vlm-wx-solhora--fin{text-align:right;align-items:flex-end}
.vlm-wx-pista{position:relative;flex:1 1 auto;height:4px;border-radius:4px;background:rgba(247,242,232,.2)}
.vlm-wx-pista-hecho{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,#DBC27A,#F0A44B)}
.vlm-wx-pista-sol{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#F5C451;box-shadow:0 0 0 4px rgba(245,196,81,.25),0 0 14px rgba(245,196,81,.7)}
.vlm-wx-pie{grid-column:1 / -1;font-size:11px;color:rgba(247,242,232,.5);text-align:center}
.vlm-wx-pie a{color:#DBC27A;text-decoration:underline}
@media (max-width:720px){
  .vlm-wx{grid-template-columns:minmax(0,1fr)}
  .vlm-wx-rotulo{text-align:center}
  .vlm-wx-main{justify-content:center}
  .vlm-wx-casilla{padding:10px 8px}
  .vlm-wx-v{font-size:13px;overflow-wrap:normal}
}
@media (max-width:380px){
  .vlm-wx-icono{width:52px;height:52px}
  .vlm-wx-casilla{padding:9px 6px}
  .vlm-wx-v{font-size:12px}
  .vlm-wx-k{font-size:9.5px;letter-spacing:.06em}
}

/* Mapa pequeño de Información en móvil: con siete capas (2026-10-07) la
   barra pasa a una fila deslizable y los botones de la derecha bajan a una
   segunda fila, para que no se pisen. */
@media (max-width:640px){
  #vlm-owm-mini-controls .vlm-owm-layers{top:10px;left:10px;right:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #vlm-owm-mini-controls .vlm-owm-layers::-webkit-scrollbar{display:none}
  #vlm-owm-mini-controls .vlm-owm-layer-btn{flex:1 0 auto}
  #vlm-owm-mini-controls .vlm-owm-3d-toggle{top:60px;right:auto;left:10px;padding:7px 10px;font-size:12px}
  #vlm-owm-mini-controls .vlm-owm-biz-toggle{top:60px;right:auto;left:118px;padding:7px 10px;font-size:12px}
}

/* Panel del negocio · pestaña Profesionales (internal/ui/panel_profesional.templ) */
.vlm-pro-fieldset{border:0;margin:0;padding:0;min-width:0}
.vlm-pro-fieldset legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:700;color:#243746}
.vlm-pro-help{margin:0 0 10px;font-size:12.5px;color:#636057}
.vlm-pro-chips{display:flex;flex-wrap:wrap;gap:8px}
.vlm-pro-chip{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#243746;background:#fff;border:1px solid rgba(36,55,70,.16);border-radius:999px;padding:8px 14px;cursor:pointer}
.vlm-pro-chip:has(input:checked){border-color:#47637A;background:rgba(71,99,122,.08)}
.vlm-pro-chip:has(input:focus-visible){outline:2px solid #47637A;outline-offset:2px}
/* Ficha: bloque de profesional y «Avisar de un problema» */
.vlm-ficha-pro{background:#FCFAF5;border:1px solid rgba(36,55,70,.16);border-radius:14px;padding:20px 22px;margin-top:clamp(20px,3vw,28px)}
.vlm-ficha-pro h2{margin:0 0 12px;font-size:clamp(19px,2.3vw,23px);font-weight:600;color:#243746}
.vlm-ficha-pro dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:8px 14px;font-size:14px;color:#3B3B39}
.vlm-ficha-pro dt{font-weight:600;color:#47637A}
.vlm-ficha-pro dd{margin:0}
@media (max-width:560px){.vlm-ficha-pro dl{grid-template-columns:1fr}.vlm-ficha-pro dd{margin-bottom:6px}}
.vlm-ficha-report summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;color:#636057;padding:6px}
.vlm-ficha-report summary::-webkit-details-marker{display:none}
.vlm-ficha-report form{margin-top:10px;display:flex;flex-direction:column;gap:10px;background:#FCFAF5;border:1px solid rgba(36,55,70,.16);border-radius:12px;padding:16px}
.vlm-ficha-report label.opt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#243746}
.vlm-ficha-report textarea,.vlm-ficha-report input[type=text]{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(36,55,70,.16);background:#fff;font-size:13.5px;font-family:inherit;border-radius:8px}
.prof-services-group{margin:10px 0 4px;font-size:12px;font-weight:700;color:#47637A;text-transform:uppercase;letter-spacing:.05em}