/* KaraokeMaps · estilos. Identidad HidalgoUgalde grunge: tokens del módulo 08 (copia), manchas, partículas, GSAP, logotipo Founder Hub.
   Geometría propia: controles 4 px, cajas y tarjetas 8 px, marcadores del mapa en pastilla (son lo único redondo).
   Contraste: las fichas de superficie (--card, --pozo) son más oscuras que verde-2, así que el texto secundario claro se lee dentro de las tarjetas.
   Mostaza, menta y coral dentro de una tarjeta son iconos; el texto del estado va en crema. */

@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url(fuentes/open-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:600;font-display:swap;src:url(fuentes/open-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-display:swap;src:url(fuentes/open-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lora";font-weight:600;font-display:swap;src:url(fuentes/lora-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-display:swap;src:url(fuentes/cormorant-garamond-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:var(--hu-verde); --card:#233F42; --pozo:#16292C; --line:#3B5F63;
  --txt:var(--hu-crema); --muted:#D3C8BB; --acc:var(--hu-coral);
  --fill:var(--hu-ladrillo); --sobre-fill:var(--hu-crema);
  --r-ctl:4px; --r-caja:8px; --pad:20px;
  --curva:var(--hu-curva-firma); --sale:var(--hu-curva-sale); --t-rapido:var(--hu-t-rapido);
  --z-mapa:5; --z-panel:1050; --z-pastilla:1100; --z-modal:40; --z-tip:50; --z-carga:2000;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:400 16px/1.5 var(--hu-sans);height:100dvh;overflow:hidden}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--hu-menta);outline-offset:2px}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.saltar{position:absolute;left:var(--pad);top:-80px;background:var(--hu-crema);color:var(--hu-verde);padding:10px 14px;border-radius:var(--r-ctl);z-index:var(--z-tip)}
.saltar:focus{top:var(--pad)}

/* Fondo grunge: color, manchas en deriva, partículas, contenido */
.grunge{position:fixed;top:0;left:0;height:100%;width:250%;z-index:0;pointer-events:none;opacity:.5;
  background:url(grunge/fondo-manchas.webp) 0 0/auto 100% repeat-x;animation:manchas 360s linear infinite}
@keyframes manchas{to{transform:translateX(var(--mosaico,-100vw))}}
@media (prefers-reduced-motion:reduce){.grunge{animation-duration:1800s}}
#particulas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.app{position:relative;z-index:1;display:flex;flex-direction:column;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}

/* cabecera */
.cab{display:flex;align-items:center;gap:20px;padding:14px var(--pad) 8px}
.marca-hu{display:block;width:150px;min-height:44px;padding:6px 0;color:var(--txt);border-radius:var(--r-ctl);flex:none}
.marca-hu svg{width:100%;height:auto;display:block}
.cab__titulo{min-width:0}
.marca{font:600 clamp(1.5rem,3vw,2.1rem)/1.1 var(--hu-serif);letter-spacing:0}
.bajada{color:var(--muted);font-size:.9375rem}
.contexto{margin-left:auto;text-align:right;display:grid;gap:2px;justify-items:end}
.contexto__pre{font:700 .8125rem/1.2 var(--hu-sans);letter-spacing:.14em;text-transform:uppercase;color:#E8927A}
.contexto__fecha{font:600 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--hu-serif);color:#F2E9DE;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.contexto__fecha::first-letter{text-transform:uppercase}

/* filtros solo icono */
.barra{display:flex;align-items:center;gap:16px;padding:6px var(--pad) 12px;border-bottom:1px solid var(--line)}
.filtros{display:flex;gap:8px;flex-wrap:wrap}
.filtro{position:relative;width:48px;height:48px;display:grid;place-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-ctl);color:var(--txt);
  transition:background-color var(--t-rapido) var(--curva),border-color var(--t-rapido) var(--curva),color var(--t-rapido) var(--curva)}
.filtro:hover{border-color:var(--txt)}
.filtro[aria-pressed="true"]{background:var(--txt);border-color:var(--txt);color:var(--hu-verde)}
.filtro[aria-pressed="true"]::after{content:"";position:absolute;top:-5px;right:-5px;width:12px;height:12px;border-radius:50%;background:var(--fill);box-shadow:0 0 0 2px var(--bg)}
.conteo{color:var(--muted);font-size:.9375rem;margin-left:auto}

/* cuerpo dividido: lista a la izquierda, mapa a la derecha */
.split{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);position:relative}
.col-lista{overflow-y:auto;padding:16px var(--pad) calc(88px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.col-mapa{display:none;position:relative;padding:12px 12px 12px 0;min-height:0}
.titulo-noche{font:600 1.75rem/1.15 var(--hu-serif);margin-bottom:12px}
.aviso-ejemplo{margin:0 0 12px;padding:10px 12px;border:1px solid var(--muted);border-radius:var(--r-caja);font-size:.9375rem;background:var(--pozo)}
.lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}

/* tarjeta: arte con la hora, luego datos (sin texto sobre el arte que se solape con otro) */
.tarjeta{display:block;width:100%;text-align:left;background:var(--card);color:#E6D5C3;border:1.5px solid var(--line);border-radius:var(--r-caja);padding:0;overflow:hidden;
  transition:border-color var(--t-rapido) var(--curva),box-shadow .35s linear}   /* el giro lo mueve GSAP: aquí no hay transición de transform */
.tarjeta:hover,.tarjeta.resaltada{border-color:var(--txt)}
.arte{aspect-ratio:16/7;background:var(--pozo) url(grunge/fondo-manchas.webp) 0 0/auto 220% no-repeat;display:flex;align-items:flex-end;gap:12px;padding:12px 14px;position:relative}
.arte__hora{flex:1;min-width:0}
.arte .arte__logo{flex:none;align-self:center;width:76px;height:76px;font-size:1.375rem;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.arte .mf__logo{width:100%;height:100%;padding:6px;object-fit:contain;display:block}
.tarjeta:hover .arte__logo,.tarjeta.resaltada .arte__logo{transform:scale(1.08) rotate(-3deg)}
.arte__hora{font:600 2rem/1 var(--hu-serif);font-variant-numeric:tabular-nums;color:#E6D5C3}
.tarjeta__cuerpo{display:block;padding:12px 14px 14px}
.tarjeta__nombre{display:block;font:600 1.125rem/1.25 var(--hu-serif-ui)}
.tarjeta__dir{display:block;color:var(--muted);font-size:.9375rem;margin-top:2px}
.tarjeta__meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:.9375rem}
.tarjeta__meta span{display:inline-flex;align-items:center;gap:6px}
.tarjeta__verif{display:block;margin-top:8px;margin-right:56px;color:var(--muted);font-size:.875rem}

.etiqueta{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-ctl);padding:2px 8px 2px 6px;font-size:.875rem;font-weight:600;background:var(--pozo);color:#E6D5C3}
.etiqueta .ico{width:18px;height:18px}
.etiqueta--habitual .ico{color:var(--hu-menta)}
.etiqueta--especial .ico{color:var(--hu-mostaza)}
.etiqueta--pendiente .ico{color:var(--hu-coral)}
.etiqueta--ahora{background:var(--hu-crema);color:var(--hu-verde)}
.etiqueta--ahora .ico{color:var(--hu-verde)}

.vacio{padding:24px 0;display:grid;gap:12px;justify-items:start}
.vacio p{max-width:46ch}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--fill);color:var(--sobre-fill);border:0;border-radius:var(--r-ctl);min-height:48px;padding:0 20px;font-weight:600;text-decoration:none}
.boton:hover{background:#A63A2D}
.boton--sec{background:transparent;color:var(--txt);border:1.5px solid var(--muted)}
.boton--sec:hover{background:transparent;border-color:var(--txt)}
.boton .ico{width:20px;height:20px}
.otros{margin-top:32px}
.nota-otros{color:var(--muted);margin:-4px 0 14px;max-width:60ch}
.arte__hora--chica{font-size:1.25rem;line-height:1.2}
.col-lista .pt-pie{margin:32px calc(-1 * var(--pad)) calc(-88px - env(safe-area-inset-bottom))}
@media (min-width:1024px){.col-lista .pt-pie{margin-bottom:-24px}}
.pie{margin-top:28px;color:var(--muted);font-size:.875rem;display:grid;gap:4px}

/* mapa */
.mapa{position:absolute;inset:0;border-radius:var(--r-caja);overflow:hidden;background:#E6D5C3;border:1.5px solid var(--line)}
.col-mapa .mapa{inset:12px 12px 12px 0}
.mapa .leaflet-tile-pane{filter:sepia(.4) saturate(.9) contrast(1.02)}
.leaflet-container{font:inherit;background:#E6D5C3}
.leaflet-control-attribution{background:rgba(230,213,195,.92) !important;color:#1F3A3D !important;font-size:11px}
.leaflet-control-attribution a{color:#1F3A3D !important}
.leaflet-bar a,.leaflet-bar a:hover{background:#1F3A3D;color:#E6D5C3;border-color:#E6D5C3;width:40px;height:40px;line-height:40px}
.leaflet-touch .leaflet-bar a{width:40px;height:40px;line-height:40px}
.yo{width:16px;height:16px;border-radius:50%;background:#8C2F24;border:3px solid #E6D5C3;box-shadow:0 0 0 2px #1F3A3D;transform:translate(-50%,-50%)}

/* microficha del mapa: colores literales (flota sobre el mapa, no sobre el tema). Solo se animan transform y opacity. */
.leaflet-marker-icon.pin-envoltura{outline-offset:6px}
.mf{position:relative;display:inline-block;will-change:transform}   /* posición, escala y respiración las mueve GSAP (app.js); will-change: un círculo por local, pocos */
.mf__marca{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#E6D5C3;color:#1F3A3D;border:2.5px solid #1F3A3D;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.45);font:700 .9375rem/1 "Lora",Georgia,serif;transition:border-color .2s linear}
.leaflet-container .mf__marca .mf__logo{width:100%;height:100%;max-width:100% !important;max-height:100% !important;padding:5px;object-fit:contain;display:block}   /* completo, con su proporción: se encaja, no se recorta. Leaflet fuerza max-width:none y width:auto a toda imagen de un marcador; hay que ganarle con más especificidad */
.mf--pendiente .mf__marca{border-style:dashed}
.mf.activo .mf__marca,.mf.abierta .mf__marca,.mf:hover .mf__marca{border-color:#8C2F24;border-width:3px;border-style:solid}
.mf__panel{position:absolute;top:50%;left:calc(100% + 10px);width:max-content;min-width:190px;max-width:260px;display:grid;gap:2px;padding:9px 12px 10px;text-align:left;white-space:normal;
  background:#1F3A3D;color:#E6D5C3;border:2px solid #E6D5C3;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-8px,-50%);
  transition:opacity .14s linear,transform .2s cubic-bezier(.16,1,.3,1),visibility 0s linear .2s}
.mf.abierta .mf__panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-50%);transition-delay:0s}
.mf.izq .mf__panel{left:auto;right:calc(100% + 10px);transform:translate(8px,-50%)}
.mf.izq.abierta .mf__panel{transform:translate(0,-50%)}
.mf__nombre{font:700 .9375rem/1.25 "Open Sans",Arial,sans-serif}
.mf__dir,.mf__hora{font:400 .8125rem/1.3 "Open Sans",Arial,sans-serif;color:#D3C8BB}
.mf__aviso{margin-top:4px;font:600 .8125rem/1.3 "Open Sans",Arial,sans-serif;color:#E8927A}

/* pastilla para alternar lista y mapa (teléfono y tableta); colores literales porque flota sobre el mapa */
.pastilla-vista{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:var(--z-pastilla);display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 20px;background:#E6D5C3;color:#1F3A3D;border:2px solid #16292C;border-radius:var(--r-ctl);font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pastilla-vista .ico{width:20px;height:20px}
body.ver-mapa .col-lista{display:none}
body.ver-mapa .col-mapa{display:block}
body.ver-mapa .col-mapa .mapa{inset:12px}

/* modal de la ficha */
.modal{width:min(820px,calc(100vw - 24px));max-width:none;max-height:none;margin:auto;padding:0;overflow:visible;background:transparent;color:#E6D5C3;border:0;isolation:isolate}
.modal__marco{position:relative;z-index:1;max-height:calc(100dvh - 24px);overflow:auto;background:var(--card);color:#E6D5C3;border:1.5px solid transparent;border-radius:var(--r-caja);overscroll-behavior:contain;
  background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from 210deg,#E8927A,#E8B84A,#E6D5C3,#8C2F24,#455957,#E6D5C3,#E8927A) border-box}
.modal{--velo:.72}
.modal::backdrop{background:rgba(10,24,26,var(--velo,.72))}
.modal__arte{position:relative;display:flex;align-items:flex-end;min-height:clamp(170px,30vw,260px);background:var(--pozo) url(grunge/fondo-manchas.webp) 0 0/auto 260% no-repeat}
.modal__cerrar{position:absolute;top:12px;right:12px;z-index:2}
.icono-btn{width:48px;height:48px;display:grid;place-items:center;background:var(--hu-verde);border:1.5px solid var(--line);border-radius:var(--r-ctl);color:#E6D5C3}
.icono-btn:hover{border-color:#E6D5C3}
.modal__cuerpo{padding:16px 20px 24px;display:grid;gap:18px}
.modal__titulo{font:600 clamp(1.5rem,4vw,2.1rem)/1.15 var(--hu-serif);text-wrap:balance}
.modal__sub{color:var(--muted);margin-top:2px}
.modal__hora{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;font-size:1.125rem;font-weight:700}
.modal__grid{display:grid;gap:18px}
.modal h3{font:700 .9375rem/1.3 var(--hu-sans);margin-bottom:6px}
.modal dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.9375rem}
.modal dt{font-weight:600}
.modal__enlaces{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.9375rem}
.modal__enlaces a{color:#E6D5C3;text-underline-offset:3px}
.modal__nota{font-size:.875rem;color:var(--muted)}
.modal__mini{height:220px;position:relative;border-radius:var(--r-caja);overflow:hidden;border:1.5px solid var(--line);background:#E6D5C3}
.modal__mini .leaflet-tile-pane{filter:sepia(.4) saturate(.9) contrast(1.02)}
.modal__acciones{display:flex;flex-wrap:wrap;gap:10px}
.modal__dist{font-size:.9375rem}

.tip{position:fixed;z-index:var(--z-tip);pointer-events:none;background:#E6D5C3;color:#1F3A3D;font:600 .875rem/1.3 "Open Sans",Arial,sans-serif;
  padding:6px 10px;border-radius:var(--r-ctl);max-width:240px;opacity:0;transition:opacity .12s linear}
.tip.visible{opacity:1}

/* tableta: lista a una columna ancha */
@media (min-width:768px){.lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.modal__grid{grid-template-columns:1fr 1fr}}

/* escritorio: lista y mapa lado a lado; sin pastilla */
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .col-mapa{display:block}
  .col-lista{padding-bottom:24px}
  .pastilla-vista{display:none}
  body.ver-mapa .col-lista{display:block}
}
@media (max-width:767px){
  .cab{flex-wrap:wrap;gap:6px 16px}
  .contexto{margin-left:0;text-align:left;justify-items:start;flex-basis:100%}
  .marca-hu{width:120px}
  .barra{flex-wrap:wrap;gap:6px 12px}
  .conteo{margin-left:0}
  .modal{width:100vw;margin:auto 0 0}
  .modal__marco{max-height:94dvh;border-radius:var(--r-caja) var(--r-caja) 0 0;border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.filtro,.tarjeta,.mf__marca,.mf__panel{transition-duration:.12s !important}}
/* edición de posiciones (solo con ?editar en localhost): colores literales porque flota sobre el mapa */
.ed{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#1F3A3D;color:#E6D5C3;border:2px solid #E6D5C3;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.45);font:600 .875rem/1.3 "Open Sans",Arial,sans-serif}
.ed__txt{max-width:260px}
.ed__btn{width:36px;height:36px;display:grid;place-items:center;padding:0;background:#E6D5C3;color:#1F3A3D;border:0;border-radius:50%;cursor:pointer}
.ed__btn[hidden]{display:none}
.ed__btn svg{width:20px;height:20px}
.ed__btn:hover{background:#E8927A}

/* foto del local en la tarjeta: la imagen se recorta (cover) con la proporción del hueco y nunca se estira; el degradado y la sombra
   del texto son literales porque van sobre una foto cualquiera, no sobre una ficha del tema */
.arte{overflow:hidden}
.arte--foto{background:#1F3A3D}
.arte__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.arte--foto::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(14,30,32,.92) 0%,rgba(14,30,32,.55) 38%,rgba(14,30,32,0) 70%)}
.arte--foto .arte__hora{position:relative;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.arte--foto .arte__logo{position:relative;z-index:2;align-self:flex-start;width:56px;height:56px;font-size:1rem;box-shadow:0 2px 8px rgba(0,0,0,.55)}
.etiqueta--eventual{color:#E8927A}

/* ficha: el nombre y la dirección van sobre la foto, con un degradado literal (la foto puede ser cualquiera) */
.modal__arte::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(14,30,32,.94) 0%,rgba(14,30,32,.62) 42%,rgba(14,30,32,0) 78%)}
.modal__cabecera{position:relative;z-index:1;width:100%;padding:56px 24px 18px}
.modal__cabecera .modal__titulo{color:#F2E9DE;text-shadow:0 2px 14px rgba(0,0,0,.6);font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.05}
.modal__cabecera .modal__sub{color:#E6D5C3;text-shadow:0 1px 8px rgba(0,0,0,.7);margin-top:6px}
.modal__cuerpo{padding:20px 24px 28px;gap:22px}
.modal__pulso{display:grid;gap:12px}
.modal__pulso .modal__hora{margin-top:0;font-size:1.25rem}
.modal__desc{font-size:1rem;line-height:1.5;color:#D3C8BB;max-width:60ch}
.modal__dias{display:flex;flex-wrap:wrap;gap:8px}
/* cápsulas de días: en la ficha y en la barra filtran; en la tarjeta solo informan */
.cap{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:2px 13px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:#E6D5C3;font:600 .875rem/1.2 var(--hu-sans);letter-spacing:.02em;transition:background-color .2s linear,color .2s linear,border-color .2s linear,transform .35s cubic-bezier(.16,1,.3,1)}
button.cap{cursor:pointer;min-height:40px;padding:2px 16px}
button.cap:hover{border-color:#E6D5C3;transform:translateY(-2px)}
.cap--on,.cap[aria-pressed="true"]{background:#E6D5C3;border-color:#E6D5C3;color:#1F3A3D}
.tarjeta__dias{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tarjeta__dias .cap{min-height:26px;padding:0 10px;font-size:.8125rem}
.filtros__dias{display:flex;flex-wrap:wrap;gap:6px;margin-left:6px;padding-left:14px;border-left:1px solid var(--line);align-items:center}
.filtros__dias .cap{min-height:44px;min-width:48px;padding:2px 10px}
/* contacto: círculos de un solo trazo y un solo color */
.modal__redes{display:flex;flex-wrap:wrap;gap:10px}
.red{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--line);color:#E6D5C3;background:transparent;transition:background-color .25s linear,color .25s linear,border-color .25s linear,transform .4s cubic-bezier(.16,1,.3,1)}
.red svg{width:22px;height:22px}
.red:hover,.red:focus-visible{background:#E6D5C3;color:#1F3A3D;border-color:#E6D5C3;transform:translateY(-3px) scale(1.06)}
/* brillo de la ficha: un halo grande con los colores de la interfaz que gira muy despacio detrás de la tarjeta (solo transform) */
.modal::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,#E8927A,#E8B84A,#E6D5C3,#8C2F24,#455957,#E8927A);filter:blur(70px);opacity:.34;animation:halo 40s linear infinite}
@keyframes halo{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.modal::before{animation:none}}
@media (max-width:767px){.modal::before{width:130%;filter:blur(50px)}.modal__cabecera{padding:52px 18px 14px}.modal__cuerpo{padding:16px 18px 24px}}

/* tarjeta 3D: destello que sigue al puntero y brillo iridiscente con los colores de la interfaz, solo sobre la banda */
.arte__hora{position:relative;z-index:2}
.arte::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .35s linear;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(242,233,222,.5),rgba(242,233,222,0) 52%),
    linear-gradient(115deg,rgba(232,146,122,0) 16%,rgba(232,184,74,.34) 32%,rgba(230,213,195,.4) 46%,rgba(232,146,122,.34) 60%,rgba(69,89,87,0) 76%);
  background-size:100% 100%,280% 280%;background-position:0 0,var(--px,50%) 50%}
.tarjeta-lienzo.holo .tarjeta{border-color:#E6D5C3;box-shadow:0 22px 44px rgba(0,0,0,.5),0 0 0 1px rgba(230,213,195,.5)}
.tarjeta-lienzo.holo .arte::before{opacity:1}
.lista li{transform-style:preserve-3d}
/* sección «Esta noche»: un panel propio, con calidez, para que no se confunda con el resto de la guía */
.noche{position:relative;margin:0 -10px 8px;padding:18px 16px 22px;border-radius:var(--r-caja);border:1.5px solid rgba(232,146,122,.7);
  background:linear-gradient(160deg,rgba(232,146,122,.18),rgba(232,184,74,.07) 46%,rgba(230,213,195,.05));box-shadow:0 14px 44px rgba(232,146,122,.12)}
.noche .titulo-noche{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;color:#F2E9DE}
.noche__fecha{font:700 .8125rem/1.3 var(--hu-sans);letter-spacing:.08em;text-transform:uppercase;color:#E8927A}
.noche .tarjeta{border-color:rgba(232,146,122,.55)}
/* tarjeta sin resultados: misma medida, borde discontinuo */
.tarjeta--vacia{border-style:dashed;cursor:default}
.arte--vacio .arte__hora{font-size:1.5rem;line-height:1.15}
.tarjeta--vacia .tarjeta__dir{margin-top:6px;line-height:1.45}
.tarjeta--vacia .tarjeta__meta{margin-top:12px}

.lista>li{display:grid}
.lista>li>.tarjeta-lienzo{height:100%;display:grid;position:relative;border-radius:var(--r-caja)}
.tarjeta-lienzo>.tarjeta{height:100%}

.lista>li{cursor:pointer}
.lista>li:has(.tarjeta--vacia){cursor:default}
.tarjeta{pointer-events:auto}
.tarjeta:not(.tarjeta--vacia){cursor:pointer}

/* ficha 3D: el mismo destello de las tarjetas sobre la foto, y una sombra más profunda mientras se inclina */
.modal__arte::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s linear;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(242,233,222,.5),rgba(242,233,222,0) 52%),
    linear-gradient(115deg,rgba(232,146,122,0) 16%,rgba(232,184,74,.34) 32%,rgba(230,213,195,.4) 46%,rgba(232,146,122,.34) 60%,rgba(69,89,87,0) 76%);
  background-size:100% 100%,280% 280%;background-position:0 0,var(--px,50%) 50%}
.modal__marco.holo .modal__arte::before{opacity:1}
.modal__marco.holo{box-shadow:0 34px 80px rgba(0,0,0,.55)}

/* «Ver en el mapa»: brillo que cruza el botón y el pin que salta al pasar el puntero */
.boton--mapa{position:relative;overflow:hidden;isolation:isolate;transition:background-color .3s linear,box-shadow .45s cubic-bezier(.16,1,.3,1)}
.boton--mapa::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 68%);translate:-130% 0;transition:translate .9s cubic-bezier(.16,1,.3,1)}
.boton--mapa:hover,.boton--mapa:focus-visible{box-shadow:0 10px 28px rgba(140,47,36,.6)}
.boton--mapa:hover::after,.boton--mapa:focus-visible::after{translate:130% 0}
.boton--mapa:hover .ico,.boton--mapa:focus-visible .ico{animation:pin-salta .9s cubic-bezier(.16,1,.3,1)}
@keyframes pin-salta{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-6px) scale(1.18)}70%{transform:translateY(0) scale(.96)}100%{transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.boton--mapa::after{display:none}.boton--mapa:hover .ico{animation:none}}
/* el ícono que viaja de la ficha al mapa (capa superior) y el anillo con el que aterriza */
.vuelo{position:fixed;inset:auto;margin:0;padding:8px;border:0;overflow:visible;display:grid;place-items:center;border-radius:50%;background:transparent;color:#E6D5C3;pointer-events:none;box-shadow:0 6px 22px rgba(0,0,0,.5);box-sizing:border-box}
.vuelo .ico{width:100%;height:100%}
.vuelo-anillo{position:fixed;z-index:70;width:44px;height:44px;border-radius:50%;border:2.5px solid #E6D5C3;box-shadow:0 0 18px rgba(232,146,122,.8);pointer-events:none}

/* días abiertos: insignias pequeñas arriba a la izquierda de la banda (sobre la foto: fondo oscuro literal) */
.arte__dias{position:absolute;top:10px;left:12px;z-index:3;display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100% - 96px)}
.arte__dias .cap{min-height:22px;padding:0 9px;font-size:.75rem;background:rgba(14,30,32,.78);border-color:rgba(230,213,195,.55);color:#F2E9DE;box-shadow:0 1px 6px rgba(0,0,0,.4);transform-origin:center}
.arte__dias .cap--on{background:#E6D5C3;border-color:#E6D5C3;color:#1F3A3D}

/* «Esta noche» como acordeón: el encabezado es un botón; el cuerpo se pliega con la técnica de filas de rejilla */
.noche .titulo-noche{display:block;margin-bottom:0}
.noche__cab{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;width:100%;padding:0;margin:0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;position:relative}
.noche__txt{font:600 1.75rem/1.15 var(--hu-serif);color:#F2E9DE}
.noche__cuenta{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px 0 10px;border-radius:999px;background:#E6D5C3;color:#1F3A3D;font:700 .9375rem/1 var(--hu-sans)}
.noche__cuenta .ico{width:18px;height:18px}
.noche__flecha{width:26px;height:26px;margin-left:auto;color:#E6D5C3;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.noche--cerrada .noche__flecha{transform:rotate(-90deg)}
.noche__cab:focus-visible{outline:2px solid #E6D5C3;outline-offset:6px;border-radius:8px}
.noche__cuerpo{display:grid;grid-template-rows:1fr;margin-top:14px;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1),margin-top .55s cubic-bezier(.16,1,.3,1)}
.noche__interior{min-height:0;overflow:hidden;transition:opacity .35s linear}
.noche--cerrada .noche__cuerpo{grid-template-rows:0fr;margin-top:0}
.noche--cerrada .noche__interior{opacity:0}
.noche--cerrada{padding-bottom:16px}
@media (prefers-reduced-motion:reduce){.noche__cuerpo,.noche__interior,.noche__flecha{transition-duration:.01s}}

.modal__interno{border-top:1px dashed var(--line);padding-top:10px}

.arte__dias .cap{transition:none}
.arte__dias .cap--on{border-color:#E8927A}

.arte__dias .cap--hoy{background:#E8927A;border-color:#E8927A;color:#1F3A3D}

/* compartir: botón circular de un trazo en la tarjeta y menú con colores literales (flota sobre la lista) */
.lista>li{position:relative}
.compartir{position:absolute;right:12px;bottom:12px;z-index:4;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid rgba(230,213,195,.5);background:rgba(14,30,32,.72);color:#E6D5C3;cursor:pointer;transition:background-color .25s linear,color .25s linear,transform .4s cubic-bezier(.16,1,.3,1)}
.compartir svg{width:21px;height:21px}
.compartir:hover,.compartir:focus-visible,.compartir[aria-expanded="true"]{background:#E6D5C3;color:#1F3A3D;transform:scale(1.08)}
.compartir-menu{position:fixed;inset:auto;margin:0;z-index:80;min-width:230px;display:grid;gap:2px;padding:8px;background:#1F3A3D;border:1.5px solid #E6D5C3;border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.55)}
.compartir-menu[hidden]{display:none}
.compartir-op{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#E6D5C3;font:600 .9375rem/1.2 "Open Sans",Arial,sans-serif;text-decoration:none;text-align:left;cursor:pointer}
.compartir-op svg{width:22px;height:22px;flex:none}
.compartir-op:hover,.compartir-op:focus-visible{background:#E6D5C3;color:#1F3A3D}
.modal .compartir-menu{z-index:90}
.compartir-menu:not(:popover-open){display:none}
.compartir-menu:popover-open{display:grid}

.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* panel de compartir: dentro del lienzo 3D; las opciones se iluminan por completo al pasar el puntero para saber sobre cuál se está */
.compartir-panel{position:absolute;inset:0;z-index:6;display:grid;grid-template-rows:auto 1fr;align-content:start;gap:8px;padding:14px 14px 14px;border-radius:inherit;background:rgba(23,46,49,.96);color:#E6D5C3;opacity:0;transform:scale(.96);transition:opacity .25s linear,transform .35s cubic-bezier(.16,1,.3,1)}
.compartir-panel.abierto{opacity:1;transform:none}
.compartir-panel__titulo{font:700 .875rem/1.3 "Open Sans",Arial,sans-serif;letter-spacing:.04em;padding-right:52px;color:#E8927A}
.compartir-panel__x{position:absolute;top:8px;right:8px;width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid rgba(230,213,195,.5);background:transparent;color:#E6D5C3;cursor:pointer}
.compartir-panel__x svg{width:20px;height:20px}
.compartir-panel__x:hover,.compartir-panel__x:focus-visible{background:#E6D5C3;color:#1F3A3D}
.compartir-panel__ops{display:grid;gap:6px;align-content:start}
.compartir-op{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 14px;border:1.5px solid rgba(230,213,195,.35);border-radius:10px;background:rgba(230,213,195,.06);color:#E6D5C3;font:600 .9375rem/1.2 "Open Sans",Arial,sans-serif;text-decoration:none;text-align:left;cursor:pointer;transition:background-color .18s linear,color .18s linear,border-color .18s linear,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s linear}
.compartir-op svg{width:22px;height:22px;flex:none}
.compartir-op:hover,.compartir-op:focus-visible{background:#E6D5C3;border-color:#E6D5C3;color:#1F3A3D;transform:translateX(5px);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.compartir-op:focus-visible{outline:2px solid #E8927A;outline-offset:2px}
/* copiado: destello salmón que se expande desde la opción y el fondo queda en salmón un momento */
.compartir-op.copiado{background:#E8927A;border-color:#E8927A;color:#1F3A3D;animation:destello 1.1s cubic-bezier(.16,1,.3,1)}
@keyframes destello{0%{box-shadow:0 0 0 0 rgba(232,146,122,.95),0 0 0 0 rgba(242,233,222,.9)}45%{box-shadow:0 0 0 14px rgba(232,146,122,0),0 0 26px 6px rgba(242,233,222,.7)}100%{box-shadow:0 0 0 22px rgba(232,146,122,0),0 0 0 0 rgba(242,233,222,0)}}
@media (prefers-reduced-motion:reduce){.compartir-op.copiado{animation:none}.compartir-op:hover{transform:none}}
/* en la ficha el panel flota sobre el botón, dentro del mismo marco */
.compartir-panel--ficha{inset:auto;width:min(330px,calc(100% - 24px));border:1.5px solid #E6D5C3;border-radius:12px;box-shadow:0 14px 38px rgba(0,0,0,.55)}
.modal__marco .compartir-panel--ficha{z-index:6}

/* margen para el 3D: el pliegue de «Esta noche» recorta (overflow:hidden) lo que se sale de su caja, y una tarjeta inclinada, con su sombra,
   se sale unos píxeles. El interior se agranda con relleno y se compensa con márgenes negativos: la maqueta no cambia y el 3D cabe entero.
   El relleno no recibe el puntero (el encabezado de arriba sigue siendo pulsable). */
.noche__interior{padding:30px 26px 64px;margin:-30px -26px -64px;pointer-events:none}   /* 26 px a los lados: cabe en el relleno de 20 px de la columna sin crear desplazamiento horizontal */
.noche__interior>*{pointer-events:auto}
/* la ficha inclinada también necesita aire en la pantalla */
.modal{width:min(820px,calc(100vw - 48px))}
.modal__marco{max-height:calc(100dvh - 48px)}
@media (max-width:767px){.modal{width:100vw}.modal__marco{max-height:94dvh}}

/* escritorio: dos columnas de borde a borde. Izquierda: cabecera, filtros y tarjetas. Derecha: el mapa, desde el borde superior hasta el inferior */
@media (min-width:1024px){
  .app{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .split{display:contents}
  .cab,.barra{grid-column:1}
  .col-lista{grid-column:1;grid-row:3;min-height:0}
  .col-mapa{grid-column:2;grid-row:1 / -1;padding:0;min-height:0}
  .col-mapa .mapa{inset:0;border-radius:0}
}

/* La pantalla de carga la pone el módulo 12 (assets/loader-toolbox.js); aquí solo se mantiene la guía oculta mientras carga. */
html.cargando .app{opacity:0}

/* ---------- teléfono y tableta: los filtros viven en un panel desplegable bajo un botón de hamburguesa ---------- */
.filtros-btn,.filtros-panel__listo{display:none}
@media (max-width:1023px){
  .barra{position:relative;flex-wrap:nowrap;align-items:center;gap:12px;padding:6px var(--pad) 8px}
  .filtros-btn{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-ctl);color:var(--txt);cursor:pointer;padding:0}
  .filtros-btn .ico{width:24px;height:24px}
  .filtros-btn[aria-expanded="true"]{background:var(--txt);border-color:var(--txt);color:var(--hu-verde)}
  .filtros-btn__n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E8927A;color:#1F3A3D;font:700 .75rem/20px var(--hu-sans);text-align:center;box-shadow:0 0 0 2px var(--bg)}
  .conteo{flex:1;min-width:0;margin:0}
  .filtros-panel{display:none;position:absolute;left:var(--pad);right:var(--pad);max-width:560px;top:calc(100% - 2px);z-index:var(--z-panel);padding:14px;background:#1F3A3D;border:1.5px solid #E6D5C3;border-radius:var(--r-caja);box-shadow:0 18px 44px rgba(0,0,0,.55)}
  .barra.abierta .filtros-panel{display:grid;gap:12px}
  .filtros-panel .filtros{gap:8px}
  .filtros__dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0;padding:12px 0 0;border-left:0;border-top:1px solid rgba(230,213,195,.3);flex-basis:100%;width:100%}
  .filtros__dias .cap{min-width:0;min-height:44px;padding:2px 0;font-size:.8125rem}
  .filtros-panel__listo{display:inline-flex;width:100%}
  .pastilla-vista{z-index:var(--z-pastilla)}
  .mapa{isolation:isolate}
}
@media (min-width:1024px){.filtros-panel{display:contents}}

/* el botón Mapa se retira por opacidad al llegar al pie de la lista y vuelve al subir un poco */
.pastilla-vista{transition:opacity .25s linear,visibility 0s}
.pastilla-vista.oculta{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s linear,visibility 0s .25s}