/* ===== Tokens (tomados del Figma "fil desktop") ===== */
:root{
  --paper:#F4EFDA;        /* fondo página */
  --surface:#FBF7E7;      /* chips, inputs, toggle */
  --band:#3FA3A3;         /* franja teal */
  --teal:#3FA3A3;         /* horas */
  --red:#D84029;          /* primario */
  --red-strong:#AE2F1B;   /* separador · y hover */
  --ink:#000000;
  --on-band:#FBF7E7;
  --muted:#7E765F;
  --line:#7E765F;
  --line-soft:#DFD8BC;
  --raise:#FFFDF3;
  --c-dorada:#C79A2A; --c-roja:#C6402C; --c-azul:#2F62A8; --c-marosa:#8A5493;
  --c-campos:#2E8585; --c-alemania:#C6762C; --c-otros:#8098A7;
  --shadow:0 1px 0 rgba(0,0,0,.03), 0 10px 26px -18px rgba(60,40,0,.35);
  --fira:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --roboto:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pill:24px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#16150F; --surface:#232017; --band:#256F6F; --teal:#5BC0C0;
  --red:#EA5740; --red-strong:#F0705B; --ink:#EFE8D3; --on-band:#F4EFDA;
  --muted:#B3AB93; --line:#5B5440; --line-soft:#3A3526; --raise:#2A261B;
  --c-dorada:#D8AC3D; --c-roja:#E0654E; --c-azul:#6C96D6; --c-marosa:#B485BD;
  --c-campos:#4FB6B6; --c-alemania:#E08F48; --c-otros:#9DB0BC;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 30px -20px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#16150F; --surface:#232017; --band:#256F6F; --teal:#5BC0C0;
  --red:#EA5740; --red-strong:#F0705B; --ink:#EFE8D3; --on-band:#F4EFDA;
  --muted:#B3AB93; --line:#5B5440; --line-soft:#3A3526; --raise:#2A261B;
  --c-dorada:#D8AC3D; --c-roja:#E0654E; --c-azul:#6C96D6; --c-marosa:#B485BD;
  --c-campos:#4FB6B6; --c-alemania:#E08F48; --c-otros:#9DB0BC;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 12px 30px -20px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fira);font-size:16px;line-height:1.35;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
img,svg{max-width:100%}
.wrap{max-width:calc(1156px + 40px);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Placeholders de assets raster del Figma ===== */
.asset-slot{display:flex;align-items:center;justify-content:center;border:1px dashed var(--muted);border-radius:6px;
  color:var(--muted);font-size:11px;text-align:center;line-height:1.2;padding:4px;flex-shrink:0}

/* ===== HERO ===== */
/* Header nuevo del Figma: tres piezas gráficas + columna con fechas/horarios y país invitado */
/* Header desktop (Figma 152:238): imágenes a 110px de alto + bloque de fecha a la derecha; debajo, datos prácticos con íconos */
.hero{padding:48px 0 32px}
.hero-in{display:flex;justify-content:space-between;align-items:center;gap:32px}
.hero-art{display:flex;gap:32px;align-items:center;flex-shrink:0}
.hero-img{display:block;flex-shrink:0;object-fit:contain;object-position:left center;max-width:none}
.hi-agua{width:266px;height:110px}
.hi-fil{width:204px;height:110px}
.hi-feria{width:262px;height:110px}
.hero-side{display:flex;align-items:center;gap:24px;flex-shrink:0}
.hs-line{width:2px;height:60px;background:var(--teal);flex-shrink:0}
.hs-text{display:flex;flex-direction:column;gap:4px;white-space:nowrap;font-size:26px}
.hs-date{margin:0;font-family:var(--roboto);font-weight:700;font-size:1em;line-height:normal;color:var(--red)}
.hero-guest{margin:0;font-family:var(--roboto);font-weight:500;font-style:italic;font-size:.69em;line-height:normal;color:var(--c-roja);width:max-content}   /* proporcional a la fecha: nunca más ancho que ella */
.hero-info{margin:24px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;
  font-family:var(--roboto);font-weight:500;font-size:15px;line-height:normal;color:var(--muted)}
.hero-info li{display:flex;align-items:center;gap:4px;white-space:nowrap}
.hi-ic{width:16px;height:16px;flex-shrink:0;color:var(--teal)}
.hero-mstack{display:contents}

.sep{color:var(--red-strong);opacity:.55;font-family:var(--fira);font-weight:700;font-size:16.8px;line-height:1;margin:0 8px}

/* ===== FRANJA TEAL / TOOLBAR ===== */
.band{background:var(--band);color:var(--on-band)}
.band-note{margin:0;padding:24px 0 0;font-weight:500;font-size:18px;max-width:530px}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--band)}
.bar-in{padding:24px 20px;display:flex;flex-direction:column}
.bar-top-in{display:flex;flex-direction:column;gap:24px}
.days-row{margin-top:24px;transition:margin .22s ease}
.expandbtn{display:none}
.count-m{display:none;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;font-size:14px;color:var(--muted)}
.count-m button{border:0;background:none;padding:6px 0;color:var(--red);font-size:14px;text-decoration:underline;cursor:pointer}
.row1{display:flex;gap:24px;align-items:center}
.controls{display:flex;gap:16px;align-items:center;flex:1;min-width:0}
.toggle{display:flex;gap:4px;background:var(--surface);border-radius:var(--pill);padding:4px;width:238px;flex-shrink:0}
.toggle button{flex:1;border:0;background:transparent;color:var(--muted);font-size:15px;font-weight:400;
  padding:8px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.toggle button:hover{color:var(--ink)}
.toggle button[aria-selected="true"]{background:var(--red);color:#FBF7E7;font-weight:500}
.search{position:relative;flex:1;min-width:0}
.search > svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;pointer-events:none}
.search input{-webkit-appearance:none;appearance:none;width:100%;height:42px;border:0;border-radius:var(--pill);background:var(--surface);color:var(--ink);
  font:inherit;font-size:15px;padding:0 14px 0 32px;transition:box-shadow .12s}
.search input::placeholder{color:var(--muted)}
.search input{padding-right:40px;text-overflow:ellipsis}              /* el placeholder termina en "..." si no entra */
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;
  background:transparent;color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.search-clear[hidden]{display:none}
.search-clear:hover{background:color-mix(in srgb,var(--red) 12%,transparent)}
.search-clear svg{width:16px;height:16px}
.search input:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.search input:focus,.search input:focus:hover{outline:none;box-shadow:inset 0 0 0 2px var(--red)}
.pillbtn{border:0;background:var(--surface);color:var(--muted);font-size:15px;padding:12px;border-radius:var(--pill);
  cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:box-shadow .12s,color .12s}
.pillbtn:hover{box-shadow:inset 0 0 0 1px var(--muted);color:var(--ink)}
.pillbtn[aria-expanded="true"],.pillbtn[aria-expanded="true"]:hover{color:var(--muted);box-shadow:inset 0 0 0 2px var(--red)}
.badge{background:var(--red);color:#fff;border-radius:20px;font-size:12px;padding:1px 7px;font-variant-numeric:tabular-nums;margin-left:2px}
.linkbtn{border:0;background:none;color:var(--on-band);font-size:15px;text-decoration:underline;cursor:pointer;padding:4px;white-space:nowrap}
.linkbtn:hover{opacity:.8}
.count{font-weight:500;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}

.days-row{display:flex;gap:8px;align-items:center}
.days-wrap{flex:1;min-width:0;display:flex}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;cursor:grab;user-select:none;-webkit-user-select:none}
.days::-webkit-scrollbar{display:none}
.days.dragging{cursor:grabbing}
.days.dragging .chip{pointer-events:none}
.chip{flex-shrink:0;border:0;background:var(--surface);color:var(--muted);font-size:15px;letter-spacing:.01em;
  padding:8px 16px;border-radius:var(--pill);cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;min-width:74px;justify-content:center;transition:background .12s,color .12s,box-shadow .12s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--muted);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--red);color:#fff;font-weight:500;box-shadow:none}
/* Punto de color = qué sala dentro de la Intendencia (no es un ícono de ubicación) */
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sala);flex-shrink:0}
.chip .sdot{width:9px;height:9px}
/* Seleccionado: el punto pasa a blanco para no competir con el naranja del fondo */
.chip[aria-pressed="true"] .sdot{background:currentColor}
.spin,.legend .spin,.ev-room .spin{display:inline-flex;flex-shrink:0;color:var(--sala)}   /* gana sobre el gris de los textos que la contienen */
.spin svg{width:16px;height:16px}
.chip .spin{margin-left:-4px}
.chip[aria-pressed="true"] .spin{color:currentColor}   /* seleccionado: el ícono pasa a blanco sobre el naranja */
.scrollbtn{width:40px;height:40px;flex-shrink:0;border:0;background:transparent;color:var(--on-band);border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}
.scrollbtn:hover{background:color-mix(in srgb,var(--on-band) 18%,transparent)}
.scrollbtn[hidden]{display:none}
.scrollbtn svg{width:24px;height:24px;transition:transform .2s ease}
.scrollbtn.back svg{transform:rotate(180deg)}

.panel{display:none;flex-direction:column;gap:16px}
.panel.open{display:flex}
.panel{padding-bottom:4px}
.sheet-head,.sheet-foot{display:none}
.sheet-body{display:flex;flex-direction:column;gap:16px}
.plabel{font-size:12px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;margin:0 0 8px;opacity:.9}
.pchips{display:flex;flex-wrap:wrap;gap:8px}
.pchips .chip{min-width:0}

/* ===== LISTA ===== */
main{padding:32px 0 80px;min-height:60vh}
.list{display:flex;flex-direction:column;gap:8px;max-width:800px;margin:0 auto}   /* lectura cómoda en desktop */
.acc-head{width:100%;display:flex;align-items:center;gap:24px;padding:12px;border:0;border-bottom:1px solid var(--line);
  background:transparent;cursor:pointer;text-align:left;transition:background .12s}
.acc-head:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.acc-head h2{flex:1;margin:0;font-family:var(--roboto);font-weight:500;font-size:22px;color:var(--ink)}
.acc-head .acc-n{font-family:var(--roboto);font-size:15px;color:var(--muted);white-space:nowrap}
.acc-head .chev{width:24px;height:24px;color:var(--muted);transition:transform .15s;flex-shrink:0}
.acc-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-body{display:flex;flex-direction:column;gap:0;padding:0 12px}
.acc-body[hidden]{display:none}
.oitem{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.oitem:last-child{border-bottom:0}

.ev{display:flex;gap:24px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.ev:last-child{border-bottom:0}
.ev-time{min-width:80px;white-space:nowrap;flex-shrink:0;font-weight:500;font-size:28px;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.ev-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ev-room{display:flex;gap:4px;align-items:center;font-size:14px;line-height:normal;color:var(--muted)}
.ev-room svg{width:16px;height:16px;flex-shrink:0}
.ev-title{margin:0;font-weight:400;font-size:18px;line-height:1.3;color:var(--ink)}
.ev-title em,.ev-details em{font-style:italic}
.ev-details strong{font-weight:600}
.ev-details{margin:0;color:var(--muted);font-size:16px;line-height:1.4;max-width:80ch}
.ev-details.clamp .txt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.more{border:0;background:none;padding:0;margin-top:2px;color:var(--muted);font-weight:500;font-size:16px;
  text-decoration:underline;cursor:pointer}
.more:hover{color:var(--ink)}
.ev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-family:var(--roboto);font-size:14px;letter-spacing:.01em;color:var(--muted)}
.ev-meta .sep{font-size:16.8px}
.conflict{display:inline-flex;align-items:center;gap:5px;font-family:var(--fira);font-size:13px;color:var(--c-roja);
  background:color-mix(in srgb,var(--c-roja) 12%,transparent);padding:3px 10px;border-radius:var(--pill);font-weight:500;margin-left:10px}
.ev-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.act{border:.5px solid var(--line);background:transparent;color:var(--ink);font-size:15px;letter-spacing:.01em;
  padding:8px 16px;border-radius:var(--pill);cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.act:hover{border-color:var(--ink);background:color-mix(in srgb,var(--surface) 80%,transparent)}
.act svg{width:16px;height:16px;flex-shrink:0}
.act-save[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
/* Las dos etiquetas ocupan la misma celda: el botón toma el ancho de la más larga y no cambia al alternar */
.sv{display:grid}
.sv>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.sv-on{font-weight:500}
.act-save[aria-pressed="true"] .sv-off,.act-save[aria-pressed="false"] .sv-on{visibility:hidden}
.act-save[aria-pressed="true"]:hover{background:var(--red-strong);border-color:var(--red-strong)}
.act .caret{transition:transform .15s}
.cal{position:relative}
.cal.open .caret{transform:rotate(180deg)}
.cal.open{z-index:35}
.cal.open .js-caltoggle,.cal.open .js-caltoggle:hover{background:var(--raise);border-color:var(--line);border-bottom-color:transparent;
  border-radius:18px 18px 0 0}
/* El menú continúa el botón: mismo ancho, sin separación, esquinas inferiores redondeadas */
.cal-menu{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:30;min-width:100%;background:var(--raise);
  border:.5px solid var(--line);border-top:0;border-radius:0 0 18px 18px;box-shadow:var(--shadow);padding:0 6px 6px;display:none}
.cal-menu::before{content:"";display:block;height:1px;background:var(--line-soft);margin:0 8px 4px}
.cal.open .cal-menu{display:block}
.cal-menu a,.cal-menu button{display:flex;width:100%;align-items:center;gap:10px;text-align:left;border:0;background:transparent;
  color:var(--ink);font-size:15px;padding:9px 10px;border-radius:12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.cal-menu a:hover,.cal-menu button:hover{background:var(--surface)}
.cal-menu svg{width:16px;height:16px;flex-shrink:0}
.cal-menu .sub{display:block;font-size:12px;color:var(--muted)}

.recbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--surface);
  border-radius:var(--pill);padding:16px 20px;margin-bottom:16px}
.rc-t{display:flex;align-items:center;gap:16px;font-family:var(--roboto);font-weight:500;font-size:22px;line-height:1.2}
.rc-t span{font-size:15px;font-weight:400;line-height:1.2;color:var(--muted)}
.recbar-actions{display:flex;gap:8px;flex-wrap:wrap}
.info-note{display:flex;gap:6px;align-items:flex-start;margin:0 0 16px;padding:0 4px;font-size:14px;line-height:1.4;color:var(--muted)}
.info-note svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.dlg{border:.5px solid var(--line);border-radius:20px;background:var(--raise);color:var(--ink);padding:24px;
  width:min(400px,calc(100% - 40px));box-shadow:var(--shadow)}
.dlg:focus,.dlg:focus-visible{outline:none}
.dlg::backdrop{background:rgba(20,16,8,.45)}
.dlg h2{margin:0 0 8px;font-family:var(--roboto);font-weight:500;font-size:20px}
.dlg p{margin:0 0 20px;color:var(--muted);font-size:15px;line-height:1.4}
.dlg-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.dlg-actions .act{justify-content:center}
html.dlg-open{overflow:hidden}
@media (max-width:640px){.dlg-actions{display:grid;grid-template-columns:1fr 1fr}
  /* Mobile: marcas compactas; cada grupo va en línea (etiqueta + logos) para no alargar el scroll */
  /* Mobile: dos filas (Organizan + Invita / Apoyan) */
  .sponsors.sp-head .eyebrow{font-size:9px}
  .sponsors.sp-head{--s:.5;justify-content:flex-start;column-gap:20px;row-gap:14px;margin-top:16px;padding-top:16px}   /* mismo aire arriba y abajo del divisor */
  .sponsors.sp-head .sgroup{gap:8px}
  .sponsors.sp-head .slogos{gap:6px;row-gap:6px}
  .sp-head .sgroup:nth-child(2){order:3}
  .sp-head .asset-slot{font-size:7px}
  .social a svg{width:36px;height:36px}   /* redes: +4px en mobile */}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:90;
  width:min(480px,calc(100% - 40px));display:flex;gap:8px;align-items:flex-start;background:var(--raise);color:var(--ink);
  border:.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:12px 8px 12px 14px;font-size:14px;line-height:1.4;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--muted)}
.toast p{margin:0;flex:1}
.toast button{border:0;background:transparent;color:var(--muted);width:28px;height:28px;margin:-4px 0;border-radius:50%;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.toast button:hover{color:var(--ink);background:var(--surface)}
html.toast-on .themebtn{opacity:0;pointer-events:none}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-strong);border-color:var(--red-strong)}

.empty{text-align:center;padding:64px 20px;color:var(--muted)}
.empty h3{font-family:var(--roboto);font-weight:500;font-size:22px;color:var(--ink);margin:0 0 8px}
.empty p{margin:0 auto;max-width:44ch;font-size:16px;line-height:1.45}

/* ===== MAPA DE LA FERIA ===== */
.maps{padding:8px 0 64px;scroll-margin-top:190px}   /* que la barra fija no tape el título al llegar por el enlace */
.maps-in{display:flex;flex-direction:column;gap:20px}
.maps-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:0 12px 12px}
.maps-head h2{margin:0;font-family:var(--roboto);font-weight:500;font-size:22px}
.maps-tabs{width:auto;box-shadow:inset 0 0 0 1px var(--line-soft)}
.maps-tabs button{padding:8px 18px}
.map-panel[hidden]{display:none}
.map-panel{display:flex;flex-direction:column;gap:20px}
.map-img{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:12px;overflow:hidden}
.map-img img{display:block;width:100%;height:auto}
.map-zoom{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:var(--raise);color:var(--ink);
  border:.5px solid var(--line);border-radius:var(--pill);padding:6px 12px;font-size:14px;box-shadow:var(--shadow)}
.map-zoom svg{width:16px;height:16px}
.map-img:hover .map-zoom{border-color:var(--ink)}
.map-legend{margin:0;padding:0 12px;list-style:none;columns:3 220px;column-gap:32px;font-size:15px;line-height:1.35;color:var(--ink)}
.map-legend li{display:flex;gap:8px;break-inside:avoid;padding:3px 0}
.mk-n{min-width:24px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}
/* Visor de mapas en capa: modal en desktop, hoja desde abajo en mobile. Al cerrar, la persona vuelve donde estaba */
.mapv{border:0;padding:0;width:min(1100px,calc(100% - 48px));max-width:none;max-height:min(92dvh,900px);border-radius:20px;background:var(--paper);color:var(--ink);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden}
.mapv[open]{display:flex}
.mapv{position:fixed}
.mapv-zoom{position:absolute;right:28px;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--raise);color:var(--ink);
  border:.5px solid var(--line);border-radius:var(--pill);padding:8px 14px;font:inherit;font-size:14px;box-shadow:var(--shadow);cursor:pointer}
.mapv-zoom:hover{border-color:var(--ink)}
.mapv-zoom svg{width:16px;height:16px}

.mapv::backdrop{background:rgba(20,16,8,.5)}
.mapv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 10px 20px}
.mapv-head h2{margin:0;font-family:var(--roboto);font-weight:500;font-size:20px}
.mapv-x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.mapv-x:hover{background:var(--surface)}
.mapv .mapv-tabs{margin:0 20px;width:auto;align-self:flex-start;box-shadow:inset 0 0 0 1px var(--line-soft);flex-shrink:0}
.mapv-tabs button{padding:8px 18px}
.mapv-note{display:flex;align-items:center;gap:6px;margin:12px 20px 0;font-size:15px;color:var(--ink)}
.mapv-note[hidden]{display:none}
.mapv-note svg{width:16px;height:16px;color:var(--red);flex-shrink:0}
.mapv-note strong{font-weight:600}
.mapv-body{overflow:auto;padding:16px 20px 72px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain;min-height:0}
.mapv-body>*{flex-shrink:0}
.mapv-img{position:relative;display:block;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:12px;overflow:hidden;align-self:flex-start;width:100%}
.mapv-img img{display:block;width:100%;height:auto}
.mapv.zoomed .mapv-img{width:140%;max-width:none;cursor:zoom-out}
.mapv.zoomed .mapv-legend{display:none}
.mk-hl{background:color-mix(in srgb,var(--red) 12%,transparent);border-radius:6px;margin:0 -6px;padding-left:6px!important;padding-right:6px!important;font-weight:600}
@media (max-width:640px){
  .mapv{width:100%;max-width:100%;margin:auto 0 0;max-height:94dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:sheetUp .25s ease}
  .mapv-head{padding:12px 8px 8px 16px}
  .mapv .mapv-tabs{margin:0 16px;align-self:stretch;width:auto}
  .mapv-tabs button{flex:1;font-size:16px;padding:6px 8px}
  .mapv-note{margin:10px 16px 0;font-size:14px}
  .mapv-body{padding:12px 16px 72px}
  .mapv-zoom{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .mapv.zoomed .mapv-img{width:190%}
}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mapv{animation:none}}
/* Sala de cada actividad: enlace al mapa */
.room-link{display:inline-flex;align-items:center;gap:4px;border:0;background:none;padding:2px 0;margin:-2px 0;font:inherit;color:inherit;cursor:pointer;text-align:left;border-radius:4px}
.room-link:hover span:not(.room-pin):not(.sdot):not(.spin){text-decoration:underline;text-underline-offset:2px}
/* Enlace "Ver mapa" en la línea de ubicación del header */
.hi-map{color:var(--red);text-decoration:underline;text-underline-offset:2px;margin-left:6px;white-space:nowrap}
.hi-map:hover{color:var(--red-strong)}
@media (max-width:640px){
  .maps-head{padding:0 4px 12px}
  .maps-head h2{font-size:19px}
  .maps-tabs{width:100%}
  .maps-tabs button{flex:1;font-size:16px;padding:6px 8px}
  .map-legend{columns:2 150px;column-gap:16px;font-size:14px;padding:0 4px}
  .mk-n{min-width:20px}
  .maps{scroll-margin-top:170px}
  .map-zoom{right:8px;bottom:8px;font-size:13px;padding:5px 10px}
}

/* ===== FOOTER ===== */
footer{border-top:2px solid var(--teal);padding:48px 0 60px}
.foot{display:flex;flex-direction:column;gap:48px}
.foot-cols{display:flex;gap:16px}
.fcol{display:flex;flex-direction:column;gap:16px}
.fcol h3{margin:0;font-weight:500;font-size:18px;line-height:normal}
.contact-top{display:flex;flex-direction:column;gap:16px}
.follow{display:flex;flex-direction:column;gap:8px}
.fcol p{margin:0;color:var(--muted);font-size:15px;line-height:normal}
.fstack{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fcol-1{width:280px}.fcol-2{width:248px}.fcol-3{width:386px}.fcol-4{flex:1;min-width:0}
.maplink{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-size:15px;letter-spacing:.01em;text-decoration:underline}
.maplink:hover{color:var(--red-strong)}
.maplink svg{width:16px;height:16px}
.legend{display:flex;flex-direction:column;gap:16px}
.legend-row{display:flex;flex-wrap:wrap;gap:16px}
.legend span{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:normal;color:var(--muted)}
.legend svg{width:16px;height:16px}
.mail{color:var(--red);font-size:15px;line-height:normal;text-decoration:none}
.mail:hover{color:var(--red-strong);text-decoration:underline}
.eyebrow,.fcol p.eyebrow{margin:0;font-weight:700;font-size:12px;line-height:normal;letter-spacing:.01em;text-transform:uppercase;color:var(--muted)}
.social{display:flex;gap:4px}
.social a{display:flex;border-radius:50%;color:var(--ink);transition:background .12s}
.social a:hover{background:var(--surface)}
.social svg{width:32px;height:32px}
.sponsors{--s:1;display:flex;gap:calc(80px * var(--s));flex-wrap:wrap}
.sgroup{display:flex;flex-direction:column;gap:calc(16px * var(--s))}
.slogos{display:flex;gap:calc(24px * var(--s));align-items:center;flex-wrap:wrap}
/* Cada logo declara su tamaño base (--w/--h) y se escala con --s: 1 en el footer, más chico en el header y aún más en mobile */
.lg{width:calc(var(--w) * 1px * var(--s));height:calc(var(--h) * 1px * var(--s));flex-shrink:0}
.sponsors .asset-slot{font-size:calc(11px * var(--s));padding:0 2px}
.lg-diaria{display:block;color:var(--ink)}
.lg-img{display:block;object-fit:contain}
/* Logos de sponsors en negro (100%): el archivo del logo se usa como máscara y se pinta con el color de texto */
.lg-mask{display:block;background-color:var(--ink);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
/* Modo oscuro: logos en versión clara (monocromo) para que se lean sobre fondo oscuro */
/* Footer: logos al 82% (entre el header y el tamaño base) y etiquetas en tipo oración */
.sp-foot{--s:.74;align-items:flex-start}
/* todas las filas de logos con el mismo alto: los logos de cada grupo quedan centrados en la misma línea */
.sp-foot .slogos{min-height:calc(44px * var(--s))}
.sp-head{--s:.6;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);column-gap:36px;row-gap:10px;align-items:center;justify-content:space-between}   /* cada grupo (etiqueta + sus logos) junto; los tres grupos repartidos en los 1156px */
/* Marcas del header con poco protagonismo: etiqueta en la misma línea que sus logos, tamaño chico */
@media (min-width:861px){
  /* margen lateral que crece con la pantalla: los grupos quedan más centrados y más cerca entre sí */
  .sp-head{padding-left:clamp(0px,calc((100vw - 900px) / 6),48px);padding-right:clamp(0px,calc((100vw - 900px) / 6),48px)}
}
.sp-head .sgroup{flex-direction:row;align-items:center;gap:26px}
.sp-head .slogos{gap:34px;row-gap:8px}
@media (min-width:861px) and (max-width:1000px){   /* header entre tablet y desktop: piezas algo más chicas para que entren */
  .hero-in,.hero-art{gap:24px}
  .hi-fil{width:176px;height:95px}
  .hi-feria{width:226px;height:95px}
}
@media (min-width:861px) and (max-width:1100px){.sp-head .slogos{gap:16px}.sp-head .sgroup{gap:14px}.sponsors.sp-head{column-gap:24px}}   /* pantallas medianas: sigue en una línea */   /* más aire entre logos del mismo grupo */
/* Etiquetas subordinadas a los logos: más chicas y livianas que ellos */
.sp-head .eyebrow{font-size:10px;flex-shrink:0;color:var(--muted);text-transform:uppercase;font-weight:700;letter-spacing:.02em}
/* Embajada de Alemania un poco más grande en el header */
.sp-head .lg-emb{width:calc(var(--w) * 1.18px * var(--s));height:calc(var(--h) * 1.18px * var(--s))}
.sp-head .asset-slot{padding:0;font-size:8px}
.foot-note{border-top:1px solid var(--line-soft);padding-top:16px;margin:0;color:var(--muted);font-size:14px;line-height:normal}

.themebtn{position:fixed;right:max(16px,calc((100vw - 1156px) / 2));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;width:42px;height:42px;border-radius:50%;
  border:.5px solid var(--line);background:var(--raise);color:var(--muted);cursor:pointer;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center}
.themebtn:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.band :focus-visible{outline-color:var(--on-band)}

/* ===== Responsive ===== */
@media (max-width:1180px){
  .hi-agua{display:none}                 /* la ilustración es decorativa: se oculta antes de apretar el resto */
  .hero-info{flex-wrap:wrap;justify-content:flex-start;column-gap:24px}
  .foot-cols{flex-wrap:wrap;row-gap:32px}
  .fcol-4{flex:1 1 200px}
}
@media (max-width:860px){
  .band-note{padding-top:20px}
  /* Barra compacta siempre completa: vista, búsqueda, filtros y días a la mano (~150px) */
  .bar{box-shadow:0 6px 14px -10px rgba(0,0,0,.4)}
  .bar-in{padding-top:10px;padding-bottom:10px}
  .bar-top-in{gap:8px}
  .row1{flex-direction:column;align-items:stretch;gap:8px}
  .controls{flex-wrap:wrap;gap:8px}
  .toggle{width:100%;padding:3px}
  .toggle button{padding:6px 8px;font-size:16px}
  .search{flex:1;flex-basis:0}
  .search input{font-size:16px;height:40px}       /* 16px evita el zoom automático de iOS */
  .pillbtn{padding:10px 12px;font-size:16px}
  #count,#clearfilt{display:none!important}       /* pasan a la línea de resultados, fuera de la barra */
  .days-row{margin-top:8px}
  .days{margin-left:-20px;margin-right:-20px;padding:0 20px;scroll-padding-left:20px}
  .chip{padding:6px 14px;min-width:64px;font-size:16px}
  /* Filtros en mobile: pantalla completa, se aplican con "Ver N actividades" */
  .panel.open{position:fixed;inset:0;z-index:100;background:var(--band);color:var(--on-band);display:flex;flex-direction:column;gap:0;
    padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 12px 14px 20px;
    border-bottom:1px solid color-mix(in srgb,var(--on-band) 25%,transparent)}
  .sheet-head h2{margin:0;font-weight:500;font-size:20px}
  .sheet-x{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--on-band);cursor:pointer;
    display:flex;align-items:center;justify-content:center}
  .sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:20px;gap:24px}
  .sheet-foot{display:flex;align-items:center;gap:16px;padding:12px 20px 16px;
    border-top:1px solid color-mix(in srgb,var(--on-band) 25%,transparent)}
  .sheet-apply{flex:1;height:48px;border:0;border-radius:var(--pill);background:var(--red);color:#fff;font-size:16px;font-weight:500;cursor:pointer}
  .sheet-apply:disabled{opacity:.6;cursor:default}
  html.sheet-open,html.sheet-open body{overflow:hidden}
  html.sheet-open .themebtn{display:none}
  .count-m{display:flex}
  .count-m[hidden]{display:none}
  .ev-actions{display:grid;grid-template-columns:1fr;width:100%}
  .ev-actions .act,.cal{width:100%}
  .ev-actions .act{justify-content:center}
  .cal-menu{right:0}
  .recbar{padding:16px}
  .recbar-actions{display:grid;grid-template-columns:1fr;width:100%}
  .recbar-actions .act{justify-content:center}
  .fcol-1,.fcol-2,.fcol-3,.fcol-4{width:100%;flex:none}
  .foot-cols{gap:32px;flex-wrap:wrap}
  .sp-foot{gap:32px}
  /* Footer mobile: logos al 66% para que Apoyan entre en una línea; Organizan e Invita comparten fila */
  .sponsors.sp-foot{--s:.66;column-gap:40px;row-gap:24px}
  .sp-foot .sgroup:nth-child(2){order:3}
}
@media (max-width:640px){
  .hero{padding:32px 0 30px}
  .band-note{font-size:16px}
  .days{cursor:auto}
  /* Hora y sala en la misma línea; el resto del evento ocupa todo el ancho */
  .ev{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px;align-items:center}
  .ev-main{display:contents}
  .ev-time{grid-column:1;grid-row:1;min-width:0;width:auto;font-size:24px}
  .ev-room{grid-column:2;grid-row:1;min-width:0}
  .ev-room span:not(.room-pin):not(.sdot):not(.spin){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .room-link{min-width:0;max-width:100%;min-height:44px;padding:0 10px 0 0;margin:-12px 0}   /* área táctil de 44px sin cambiar el layout */
  .ev-main>*:not(.ev-room){grid-column:1/-1;justify-self:start}
  .ev-main>.ev-actions{justify-self:stretch}
  .acc-head{padding:12px 4px;gap:12px}
  .acc-head h2{font-size:19px}
  .acc-body{padding:0 4px}
  .scrollbtn{display:none!important}
}
@media (hover:none){
  .chip:hover,.pillbtn:not([aria-expanded="true"]):hover,.search input:not(:focus):hover{box-shadow:none}
  .chip:hover,.pillbtn:hover{color:var(--muted)}
  .chip[aria-pressed="true"]:hover{color:#fff}
  .act:hover{border-color:var(--line);background:transparent}
  .act-save[aria-pressed="true"]:hover{background:var(--red);border-color:var(--red)}
  .acc-head:hover,.scrollbtn:hover{background:transparent}
}
@media (max-width:860px){
  .hero{padding:32px 0 30px}
  /* Header mobile (referencia 376px): márgenes de 20px, FIL y "48.ª Feria…" a todo el ancho en proporción 141:179,
     con 16px entre ambos; debajo, los datos de la feria */
  .hero-in{display:block}
  /* Mismo estilo que desktop, apilado: fecha e invitado debajo de las imágenes y los datos en columna */
  .hero-side{margin-top:20px;gap:16px}
  .hs-line{height:auto;align-self:stretch}   /* acompaña el alto del texto */
  .hs-text{font-size:22px;gap:0}
  .hero-art{display:grid;grid-template-columns:141fr 179fr;column-gap:16px;align-items:center;width:100%;max-width:560px;margin:0 auto}   /* tope para tablets */
  .hero-art .hero-img{width:100%;height:auto}
  .hero-mstack{display:flex;flex-direction:column;gap:8px;min-width:0}
    .hero-info{flex-direction:column;align-items:flex-start;flex-wrap:nowrap;gap:8px;margin-top:16px}
  .hero-info li{white-space:normal;align-items:flex-start}
  .hero-info .hi-ic{margin-top:1px}
  .hi-txt{display:flex;flex-direction:column}   /* horarios en dos líneas propias */
  .hi-sep{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}