/* ==================================================================
   QuéHacer Chile — sistema de diseño oficial v1
   Paleta bandera: rojo principal, azul y blanco; macrozonas como
   sistema secundario (desierto·valle·bosque·hielo). Fraunces para
   títulos, Hanken Grotesk para texto, Spline Sans Mono para datos.
   La página funciona completa sin JavaScript: el JS solo mejora.
   ================================================================== */
:root{
  --t--2:.72rem; --t--1:.82rem; --t-0:1.02rem;
  --t-1:clamp(1.15rem,1.05rem + .4vw,1.32rem);
  --t-2:clamp(1.4rem,1.2rem + .9vw,1.75rem);
  --t-3:clamp(1.8rem,1.45rem + 1.7vw,2.6rem);
  --t-4:clamp(2.2rem,1.7rem + 2.6vw,3.6rem);
  --t-5:clamp(2.7rem,1.8rem + 4.6vw,5.2rem);
  --e3:.75rem;--e4:1rem;--e5:1.5rem;--e6:2.25rem;--e7:3.25rem;
  --display:'Fraunces',Georgia,serif;
  --texto:'Hanken Grotesk',system-ui,sans-serif;
  --dato:'Spline Sans Mono',ui-monospace,monospace;
  --ancho:78rem; --r:14px; --r-chico:9px;
--z-txt:color-mix(in oklab,var(--z,var(--za,var(--acento))) 70%,var(--tinta));--za-txt:color-mix(in oklab,var(--za,var(--z,var(--acento))) 70%,var(--tinta));}
:root,:root[data-piel="dia"]{
  --tinta:#1b1d21; --tinta-2:#4c4f56; --tinta-3:#5c5f66;
  --papel:#f5f1e8; --papel-2:#ebe5d6; --tarjeta:#fdfbf6;
  --borde:#d9d0bc; --borde-2:#c4b99f;
  --acento:#bd2317; --acento-osc:#951a10; --acento-suave:#f6ded9;
  --sello:#1d6b4a; --sello-suave:#dceadf;
  --sobre-acento:#fff8f1;
  --desierto:#b97a19; --valle:#2b4faf; --bosque:#2a6e52; --hielo:#33698c;
  --desierto-s:#f1e3c5; --valle-s:#dde3f5; --bosque-s:#d9e8e0; --hielo-s:#d9e6ee;
  --cielo:linear-gradient(180deg,#dfe9f0 0%,#ecebe0 55%,#f5f1e8 100%);
  --nube:#ffffff; --cordillera-1:#c9c2b0; --cordillera-2:#b3ab95; --nieve:#ffffff;
}
:root[data-piel="noche"]{
  color-scheme:dark;
  --tinta:#eef2f8; --tinta-2:#b7c0cf; --tinta-3:#8f99ab;
  --papel:#0d1524; --papel-2:#111b2e; --tarjeta:#16223a;
  --borde:#2a3a58; --borde-2:#3c4f73;
  --acento:#ff6a5b; --acento-osc:#ff8a7d; --acento-suave:#3a1713;
  --sello:#57c290; --sello-suave:#173327;
  --sobre-acento:#2c0a06;
  --desierto:#e0a33c; --valle:#7c9bff; --bosque:#4dbd8c; --hielo:#5da8ce;
  --desierto-s:#2c2310; --valle-s:#1a2340; --bosque-s:#12271e; --hielo-s:#12222e;
  --cielo:linear-gradient(180deg,#080d18 0%,#0b1120 55%,#0d1524 100%);
  --nube:#1d2a44; --cordillera-1:#1a2440; --cordillera-2:#141d33; --nieve:#3d5378;
}
@media (prefers-color-scheme:dark){
  :root[data-piel="auto"]{
    color-scheme:dark;
    --tinta:#eef2f8; --tinta-2:#b7c0cf; --tinta-3:#8f99ab;
    --papel:#0d1524; --papel-2:#111b2e; --tarjeta:#16223a;
    --borde:#2a3a58; --borde-2:#3c4f73;
    --acento:#ff6a5b; --acento-osc:#ff8a7d; --acento-suave:#3a1713;
    --sello:#57c290; --sello-suave:#173327;
    --sobre-acento:#2c0a06;
    --desierto:#e0a33c; --valle:#7c9bff; --bosque:#4dbd8c; --hielo:#5da8ce;
    --desierto-s:#2c2310; --valle-s:#1a2340; --bosque-s:#12271e; --hielo-s:#12222e;
    --cielo:linear-gradient(180deg,#080d18 0%,#0b1120 55%,#0d1524 100%);
    --nube:#1d2a44; --cordillera-1:#1a2440; --cordillera-2:#141d33; --nieve:#3d5378;
  }
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{font-family:var(--texto);font-size:var(--t-0);line-height:1.55;color:var(--tinta);background:var(--papel)}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:4px}
.env{max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1rem,3vw,2rem)}
h1,h2{font-family:var(--display);font-weight:650;line-height:1.06;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:var(--t-3)}
h3{line-height:1.2}
.kicker{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.14em;text-transform:uppercase;color:var(--z-txt,var(--acento));display:flex;align-items:center;gap:.55rem}
p{text-wrap:pretty}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.volantin{width:.85em;height:.85em}
.volantin path{fill:currentColor}

/* ==================== publicidad ==================== */
.ad{display:grid;place-items:center;position:relative;background:color-mix(in oklab,var(--tarjeta) 55%,transparent);border:1.5px dashed var(--borde-2);border-radius:var(--r-chico);color:var(--tinta-3);width:100%;margin-inline:auto}
.ad>.ad-marca{font-family:var(--dato);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.ad-billboard{max-width:970px;min-height:90px}
@media (min-width:728px){ .ad-billboard{min-height:250px} }
.ad-infeed{min-height:250px;max-width:728px}
.ad-multiplex{min-height:220px}
.ad-envoltura{padding-block:var(--e5)}

/* ==================== cabecera y navegación ==================== */
.cab{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--papel) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde)}
.cab__f{display:flex;align-items:center;gap:var(--e4);padding-block:.6rem}
.marca{display:flex;align-items:center;gap:.55rem;text-decoration:none;font-family:var(--display);font-weight:750;font-size:1.22rem;letter-spacing:-.02em;flex:0 0 auto}
.marca .volantin{width:1.2rem;height:1.2rem;color:var(--acento)}
.marca span{color:var(--acento)}
.menu{display:flex;align-items:center;gap:.15rem;margin-inline-start:auto}
.menu>li{list-style:none;position:relative}
.menu a,.menu>li>button{
  display:flex;align-items:center;gap:.35rem;text-decoration:none;font-weight:600;
  font-size:var(--t--1);padding:.5rem .85rem;border-radius:999px;color:var(--tinta-2);
}
.menu a:hover,.menu>li>button:hover,.menu>li>button[aria-expanded="true"]{background:var(--papel-2);color:var(--tinta)}
.menu a.es-actual{color:var(--acento);background:var(--acento-suave)}
.menu .caret{transition:transform .18s}
.menu>li>button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.mega{
  position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%);
  min-width:min(38rem,92vw);background:var(--tarjeta);border:1px solid var(--borde-2);
  border-radius:var(--r);box-shadow:0 26px 60px color-mix(in oklab,var(--tinta) 26%,transparent);
  padding:1rem;z-index:70;
}
.mega[hidden]{display:none}
.mega--regiones{min-width:min(46rem,92vw)}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.9rem}
.mega__fam{display:flex;flex-direction:column;gap:.15rem}
.mega__fam h4{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--z-txt);display:flex;align-items:center;gap:.45rem;padding:.3rem .5rem}
.mega__fam h4 .punto{width:.55rem;height:.55rem;border-radius:2px;background:var(--z);transform:rotate(45deg)}
.mega__fam a{display:flex;justify-content:space-between;gap:.6rem;padding:.4rem .55rem;border-radius:7px;text-decoration:none;font-size:var(--t--1)}
.mega__fam a:hover{background:var(--papel-2)}
.mega__fam a b{font-family:var(--dato);font-weight:500;font-size:var(--t--2);color:var(--tinta-3)}
.pieles{display:flex;border:1px solid var(--borde);border-radius:999px;overflow:hidden;flex:0 0 auto}
.pieles button{font-family:var(--dato);font-size:var(--t--2);padding:.4rem .65rem;color:var(--tinta-3)}
.pieles button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.btn-menu-movil{display:none;border:1px solid var(--borde-2);border-radius:999px;padding:.45rem .85rem;font-weight:700;font-size:var(--t--1)}
.hoja{position:fixed;inset:0;z-index:80;background:var(--papel);overflow:auto;padding:1rem clamp(1rem,4vw,2rem) 3rem}
.hoja[hidden]{display:none}
.hoja__cabeza{display:flex;justify-content:space-between;align-items:center;padding-block:.4rem 1rem;border-bottom:1px solid var(--borde);margin-bottom:1rem}
.hoja__cerrar{border:1px solid var(--borde-2);border-radius:999px;padding:.4rem .9rem;font-weight:700}
.hoja h4{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--z-txt);margin:1.1rem 0 .3rem;display:flex;align-items:center;gap:.45rem}
.hoja h4 .punto{width:.55rem;height:.55rem;border-radius:2px;background:var(--z);transform:rotate(45deg)}
.hoja a{display:flex;justify-content:space-between;padding:.55rem .3rem;text-decoration:none;border-bottom:1px solid var(--borde);font-weight:600}
.hoja a b{font-family:var(--dato);font-weight:500;color:var(--tinta-3)}
@media (max-width:860px){
  .menu{display:none}
  .btn-menu-movil{display:inline-flex;margin-inline-start:auto}
}

/* ==================== hero con nubes y cordillera ==================== */
.hero{background:var(--cielo);border-bottom:1px solid var(--borde);position:relative;overflow:visible;z-index:30}
.hero .env{padding-block:clamp(2.2rem,5vw,3.6rem) clamp(2.4rem,5vw,3.4rem);position:relative;text-align:center;z-index:2}
.hero__fondo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__nubes{position:absolute;inset-inline:-40%;top:6%;height:46%;display:flex;color:var(--nube);opacity:.85}
.hero__nubes svg{width:60%;height:100%;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .hero__nubes{animation:nubes-pasan 90s linear infinite}
  .hero__nubes.es-lenta{animation-duration:150s;top:20%;opacity:.5}
  @keyframes nubes-pasan{from{transform:translateX(0)}to{transform:translateX(-33.33%)}}
}
.hero__cordillera{position:absolute;inset-inline:0;bottom:0;height:52%}
.hero__cordillera svg{width:100%;height:100%}
.hero__fecha{font-family:var(--dato);font-size:var(--t--1);color:var(--tinta-2);display:flex;gap:.6rem;justify-content:center;align-items:center;flex-wrap:wrap}
.hero__fecha b{color:var(--sello);font-weight:600}
.hero h1{font-size:var(--t-5);max-width:15ch;margin:.32em auto .5em}
.hero h1 em{font-style:italic;color:var(--acento)}

/* ==================== buscador ==================== */
.busca{position:relative;max-width:46rem;margin-inline:auto;text-align:left}
.busca__caja{display:flex;align-items:center;gap:.7rem;background:var(--tarjeta);border:1.5px solid var(--borde-2);border-radius:999px;padding:.4rem .5rem .4rem 1.15rem;box-shadow:0 14px 40px color-mix(in oklab,var(--tinta) 14%,transparent);transition:border-color .18s}
.busca__caja:focus-within{border-color:var(--acento)}
.busca__caja>svg{flex:0 0 auto;color:var(--tinta-3)}
.busca__caja input{flex:1;border:0;background:none;font:inherit;color:inherit;min-width:0;padding-block:.6rem}
.busca__caja input:focus{outline:none}
.busca__caja .limpiar{color:var(--tinta-3);padding:.4rem;border-radius:999px}
.busca__caja .limpiar:hover{color:var(--acento)}
.busca__caja .ir{background:var(--acento);color:var(--sobre-acento);font-weight:700;border-radius:999px;padding:.65rem 1.35rem;transition:background .18s}
.busca__caja .ir:hover{background:var(--acento-osc)}
.filtros{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.95rem}
.filtro{font-family:var(--dato);font-size:var(--t--2);border:1px solid var(--borde-2);border-radius:999px;padding:.45rem .95rem;color:var(--tinta-2);background:color-mix(in oklab,var(--tarjeta) 65%,transparent);transition:border-color .15s,background .15s,transform .15s;display:inline-flex;align-items:center;gap:.4rem}
.filtro:hover{border-color:var(--acento);color:var(--acento)}
.filtro[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);transform:scale(1.04)}
.filtro b{font-weight:500;opacity:.75}
.filtro--lugar[aria-pressed="true"]{background:var(--valle);border-color:var(--valle);color:#fff}

/* panel de resultados: con aire entre filas */
.panel{position:absolute;inset-inline:0;top:calc(100% + .55rem);z-index:50;background:var(--tarjeta);border:1px solid var(--borde-2);border-radius:var(--r);box-shadow:0 26px 60px color-mix(in oklab,var(--tinta) 26%,transparent);max-height:min(32rem,64vh);overflow:auto;padding:.6rem}
.panel[hidden]{display:none}
.panel__tit{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);padding:.7rem .8rem .35rem}
.res{display:flex;align-items:center;gap:.85rem;padding:.7rem .8rem;margin-block:.15rem;border-radius:var(--r-chico);text-decoration:none;cursor:pointer}
.res:hover,.res.es-activa{background:var(--papel-2)}
.res__ico{flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:9px;display:grid;place-items:center;background:var(--zs,var(--acento-suave));color:var(--z-txt)}
.res__ico svg{width:1.15rem;height:1.15rem}
.res__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.18rem}
.res__nom{font-weight:600;line-height:1.3}
.res__nom mark{background:none;color:var(--acento);font-weight:700}
.res__sub{font-size:var(--t--2);color:var(--tinta-3);font-family:var(--dato);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res__extra{font-family:var(--dato);font-size:var(--t--2);color:var(--sello);white-space:nowrap;text-align:right}
.res__extra.es-neutro{color:var(--tinta-3)}
.panel__pie{display:flex;justify-content:center;padding:.6rem .8rem .4rem;border-top:1px solid var(--borde);margin-top:.4rem}
.panel__pie a{font-family:var(--dato);font-size:var(--t--1);color:var(--acento);text-decoration:none}
.panel__vacio{padding:1.1rem 1rem;color:var(--tinta-2)}
.panel__vacio b{color:var(--tinta)}
.sugeridas{display:flex;gap:.5rem;flex-wrap:wrap;padding:.4rem .8rem .7rem}
.sugeridas button{font-family:var(--dato);font-size:var(--t--2);border:1px solid var(--borde);border-radius:999px;padding:.4rem .85rem;color:var(--tinta-2)}
.sugeridas button:hover{border-color:var(--acento);color:var(--acento)}

/* selector de lugar (región y comuna) */
.lugar-panel{position:absolute;top:calc(100% + .55rem);left:50%;transform:translateX(-50%);z-index:55;width:min(30rem,92vw);background:var(--tarjeta);border:1px solid var(--borde-2);border-radius:var(--r);box-shadow:0 26px 60px color-mix(in oklab,var(--tinta) 26%,transparent);padding:.9rem}
.lugar-panel[hidden]{display:none}
.lugar-panel__busca{width:100%;border:1px solid var(--borde-2);border-radius:999px;padding:.55rem 1rem;font:inherit;background:var(--papel);color:inherit;margin-bottom:.7rem}
.lugar-panel__tit{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);margin:.5rem 0 .3rem}
.lugar-panel__lista{display:flex;flex-wrap:wrap;gap:.4rem}
.lugar-panel__lista button{font-size:var(--t--2);font-family:var(--dato);border:1px solid var(--borde);border-radius:999px;padding:.35rem .8rem;color:var(--tinta-2)}
.lugar-panel__lista button:hover{border-color:var(--valle);color:var(--valle)}
.lugar-panel__gps{display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center;border:1.5px dashed var(--borde-2);border-radius:var(--r-chico);padding:.6rem;font-weight:600;margin-bottom:.5rem}
.lugar-panel__gps:hover{border-color:var(--valle);color:var(--valle)}

/* ==================== carruseles sin botones (giran solos, se arrastran) ==================== */
.marquesina{position:relative;overflow:hidden;cursor:grab}
.marquesina.es-arrastrando{cursor:grabbing}
.marquesina__pista{display:flex;gap:.75rem;width:max-content;will-change:transform}
.marquesina--fichas .marquesina__pista{gap:var(--e4)}
.marquesina::before,.marquesina::after{content:"";position:absolute;top:0;bottom:0;width:2.2rem;z-index:2;pointer-events:none}
.marquesina::before{left:0;background:linear-gradient(90deg,var(--papel),transparent)}
.marquesina::after{right:0;background:linear-gradient(270deg,var(--papel),transparent)}
.seccion-alt .marquesina::before{background:linear-gradient(90deg,var(--papel-2),transparent)}
.seccion-alt .marquesina::after{background:linear-gradient(270deg,var(--papel-2),transparent)}

/* boleto de categoría (con la muesca perforada) */
.boleto{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;text-decoration:none;background:var(--tarjeta);border:1px solid var(--borde-2);border-radius:var(--r-chico);padding:.55rem .95rem .55rem 1.2rem;position:relative;font-weight:600;font-size:var(--t--1);transition:border-color .16s;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,transparent 96%,#000) left/100% 100% no-repeat;
          mask:radial-gradient(circle 5px at 0 50%,transparent 96%,#000) left/100% 100% no-repeat}
.boleto::before{content:"";position:absolute;left:.55rem;top:15%;bottom:15%;border-left:1.5px dashed var(--borde-2)}
.boleto:hover{border-color:var(--z-txt)}
.boleto svg{width:1.05rem;height:1.05rem;color:var(--z-txt)}
.boleto b{font-family:var(--dato);font-weight:500;font-size:var(--t--2);color:var(--tinta-3)}
.boletera{border-bottom:1px solid var(--borde);background:var(--papel)}
.boletera .env{padding-block:var(--e4)}

/* ficha de evento (tarjeta de carrusel y grillas) */
.ficha{position:relative;flex:0 0 min(18rem,78vw);background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.5rem;border-top:4px solid var(--z,var(--acento));transition:transform .16s, box-shadow .16s}
.ficha:hover{transform:translateY(-3px);box-shadow:0 14px 30px color-mix(in oklab,var(--tinta) 14%,transparent)}
.ficha__meta{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.06em;text-transform:uppercase;color:var(--z-txt);display:flex;justify-content:space-between;gap:.6rem}
.ficha h3{font-size:var(--t-1);font-weight:700}
.ficha h3 a{text-decoration:none}
.ficha h3 a:hover{color:var(--acento)}
/* toda la tarjeta es clicable: el enlace del titulo se estira sobre ella */
.ficha h3 a::after{content:"";position:absolute;inset:0;z-index:2;border-radius:var(--r)}
.ficha:hover h3 a{color:var(--acento)}
.ficha{cursor:pointer}
.ficha__lugar{font-size:var(--t--1);color:var(--tinta-2)}
.ficha__pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;padding-top:.4rem}
.precio{font-family:var(--dato);font-weight:600;font-size:var(--t--1)}
.precio.es-gratis{color:var(--sello)}
.precio.es-pendiente{color:var(--tinta-3);font-weight:500}
.chip-fecha{font-family:var(--dato);font-size:var(--t--2);background:var(--papel-2);border-radius:999px;padding:.2rem .65rem;color:var(--tinta-2)}

/* filas del "hoy" por tipo */
.fila-tipo{margin-bottom:var(--e5)}
.fila-tipo__cab{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.7rem;flex-wrap:wrap}
.fila-tipo__cab h3{font-family:var(--display);font-weight:650;font-size:var(--t-2);display:flex;align-items:center;gap:.5rem}
.fila-tipo__cab .punto{width:.6rem;height:.6rem;border-radius:2px;background:var(--z);transform:rotate(45deg)}
.fila-tipo__cab .n{font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-3)}
.chip-cerca{font-family:var(--dato);font-size:var(--t--2);border:1px solid var(--borde-2);border-radius:999px;padding:.4rem .9rem;color:var(--tinta-2);display:inline-flex;align-items:center;gap:.4rem}
.chip-cerca:hover{border-color:var(--valle);color:var(--valle)}
.chip-cerca[aria-pressed="true"]{background:var(--valle);border-color:var(--valle);color:#fff}

/* ==================== bandas, cabezas de sección ==================== */
.banda{padding-block:clamp(2.2rem,5vw,3.4rem)}
.seccion-alt{background:var(--papel-2);border-block:1px solid var(--borde)}
.banda__cab{display:flex;align-items:end;justify-content:space-between;gap:var(--e4);margin-bottom:var(--e5);flex-wrap:wrap}
.banda__cab p.baja{color:var(--tinta-2);max-width:52ch;margin-top:.4rem}
.vermas{font-family:var(--dato);font-size:var(--t--1);text-decoration:none;white-space:nowrap;color:var(--acento);border:1px solid var(--acento);border-radius:999px;padding:.5rem 1rem;transition:background .16s,color .16s}
.vermas:hover{background:var(--acento);color:var(--sobre-acento)}

/* ==================== puertas de categorías ==================== */
.puertas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(11.5rem,44vw),1fr));gap:var(--e4)}
.puerta{position:relative;display:flex;flex-direction:column;gap:.55rem;text-decoration:none;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:1.15rem 1.15rem 1rem;overflow:hidden;min-height:9rem;transition:transform .18s, box-shadow .18s, border-color .18s}
.puerta::after{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:var(--z);transition:height .2s}
.puerta:hover{transform:translateY(-4px);box-shadow:0 18px 36px color-mix(in oklab,var(--tinta) 16%,transparent);border-color:var(--z-txt)}
.puerta:hover::after{height:9px}
.puerta__ico{width:2.9rem;height:2.9rem;border-radius:11px;display:grid;place-items:center;background:var(--zs);color:var(--z-txt);transition:transform .2s}
.puerta__ico svg{width:1.5rem;height:1.5rem}
.puerta:hover .puerta__ico{transform:translateY(-2px) rotate(-4deg)}
.puerta__nom{font-family:var(--display);font-weight:650;font-size:var(--t-1)}
.puerta__n{font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-3)}
.puerta__ir{margin-top:auto;font-family:var(--dato);font-size:var(--t--2);color:var(--z-txt);display:flex;align-items:center;gap:.35rem;opacity:0;transform:translateX(-6px);transition:opacity .18s,transform .18s}
.puerta:hover .puerta__ir{opacity:1;transform:none}
@media (hover:none){ .puerta__ir{opacity:1;transform:none} }
.puerta--doble{grid-column:span 2}
@media (max-width:560px){ .puerta--doble{grid-column:span 1} }
.familia-etq{grid-column:1/-1;margin-top:.4rem;display:flex;align-items:center;gap:.6rem}
.familia-etq:first-child{margin-top:0}
.familia-etq .punto{width:.6rem;height:.6rem;border-radius:2px;background:var(--z);transform:rotate(45deg)}
.familia-etq h3{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.familia-etq .linea{flex:1;border-top:1px solid var(--borde)}

/* ==================== Chile de corrido ==================== */
.chile{overflow:hidden}
.chile__marco{position:relative}
.chile__franja{padding-top:2.9rem;padding-bottom:.6rem}
.chile__franja .marquesina__pista{gap:.7rem}
.chile__banda-color{position:absolute;inset-inline:0;top:1.4rem;height:.55rem;border-radius:999px;background:linear-gradient(90deg,var(--desierto) 0 22%,var(--valle) 30% 48%,var(--bosque) 56% 78%,var(--hielo) 86% 100%)}
.chile__km{position:absolute;top:0;inset-inline:0;display:flex;justify-content:space-between;font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-3)}
.region{flex:0 0 11rem;text-decoration:none;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r-chico);padding:.75rem .85rem;border-top:4px solid var(--z);transition:border-color .16s}
.region:hover{border-color:var(--z-txt)}
.region .zona{font-family:var(--dato);font-size:var(--t--2);text-transform:uppercase;letter-spacing:.1em;color:var(--z-txt)}
.region .nom{font-weight:700;line-height:1.15;margin-block:.15rem}
.region .n{font-family:var(--dato);font-size:var(--t--1);color:var(--tinta-2)}

/* ==================== componentes de landing ==================== */
.hero-landing{position:relative;overflow:hidden;border-bottom:1px solid var(--borde);color:var(--hl-tinta,var(--tinta))}
.hero-landing .env{position:relative;z-index:2;padding-block:clamp(2.4rem,6vw,4rem);text-align:left}
.hero-landing h1{font-size:var(--t-4);max-width:20ch}
.hero-landing .baja{max-width:56ch;margin-top:.7rem;font-size:var(--t-1);color:var(--hl-tinta2,var(--tinta-2))}
.hero-landing__deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.migas{font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-3);display:flex;gap:.5rem;align-items:center;padding-block:.8rem}
.migas a{text-decoration:none}
.migas a:hover{color:var(--acento)}
.lobby-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.lobby-chips a,.lobby-chips button{font-family:var(--dato);font-size:var(--t--2);border:1px solid var(--hl-borde,var(--borde-2));border-radius:999px;padding:.45rem .95rem;color:var(--hl-tinta2,var(--tinta-2));text-decoration:none;background:color-mix(in oklab,var(--tarjeta) 30%,transparent)}
.lobby-chips a:hover,.lobby-chips button:hover{border-color:var(--za-txt);color:var(--za-txt)}
.lobby-chips [aria-pressed="true"]{background:var(--za,var(--acento));border-color:var(--za-txt);color:#fff}

/* cartelera por fecha (conciertos) */
.cartelera{display:flex;flex-direction:column;gap:.35rem}
.cartelera__dia{font-family:var(--dato);font-size:var(--t--1);letter-spacing:.08em;text-transform:uppercase;color:var(--za-txt);padding:1.1rem .2rem .4rem;border-bottom:2px solid var(--za,var(--acento));display:flex;justify-content:space-between}
.cartelera__dia small{color:var(--tinta-3);letter-spacing:0;text-transform:none}
.evento-linea{display:flex;align-items:center;gap:1rem;padding:.75rem .4rem;border-bottom:1px solid var(--borde);text-decoration:none;transition:background .15s}
.evento-linea:hover{background:var(--papel-2)}
.evento-linea__tit{flex:1;min-width:0;font-weight:600}
.evento-linea__tit small{display:block;font-weight:400;color:var(--tinta-3);font-size:var(--t--2);margin-top:.15rem}
.evento-linea__lugar{font-size:var(--t--2);color:var(--tinta-2);font-family:var(--dato);text-align:right;white-space:nowrap}
.evento-linea__region{font-size:var(--t--2);font-family:var(--dato);border:1px solid var(--borde-2);border-radius:999px;padding:.15rem .6rem;color:var(--tinta-3);white-space:nowrap}

/* grilla de tarjetas grandes (parques/termas) */
.grilla-lugares{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:var(--e4)}
.lugar-carta{position:relative;display:flex;flex-direction:column;gap:.4rem;text-decoration:none;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:1.05rem 1.1rem;overflow:hidden;transition:transform .16s, box-shadow .16s}
.lugar-carta::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--z,var(--za,var(--acento)))}
.lugar-carta:hover{transform:translateY(-3px);box-shadow:0 14px 30px color-mix(in oklab,var(--tinta) 14%,transparent)}
.lugar-carta__tipo{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.06em;text-transform:uppercase;color:var(--z-txt)}
.lugar-carta h3{font-family:var(--display);font-weight:650;font-size:var(--t-1)}
.lugar-carta__dato{font-size:var(--t--1);color:var(--tinta-2)}
.lugar-carta__pie{margin-top:auto;padding-top:.4rem;display:flex;justify-content:space-between;align-items:center;font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-3)}
.zona-cab{display:flex;align-items:center;gap:.6rem;margin:1.6rem 0 .9rem}
.zona-cab:first-child{margin-top:0}
.zona-cab .punto{width:.65rem;height:.65rem;border-radius:2px;background:var(--z);transform:rotate(45deg)}
.zona-cab h3{font-family:var(--dato);font-size:var(--t--1);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.zona-cab .linea{flex:1;border-top:1px solid var(--borde)}
.zona-cab .n{font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-3)}

/* línea de tiempo (fiestas tradicionales) */
.calendario{position:relative;padding-left:1.6rem}
.calendario::before{content:"";position:absolute;left:.5rem;top:.4rem;bottom:.4rem;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--za,var(--acento)),var(--desierto))}
.cal-mes{font-family:var(--display);font-weight:650;font-size:var(--t-2);margin:1.4rem 0 .7rem;position:relative}
.cal-mes:first-child{margin-top:0}
.cal-mes::before{content:"";position:absolute;left:-1.52rem;top:.45em;width:.85rem;height:.85rem;border-radius:99px;background:var(--za,var(--acento));border:3px solid var(--papel)}
.cal-item{display:flex;gap:1rem;align-items:baseline;padding:.6rem .2rem;border-bottom:1px dashed var(--borde);text-decoration:none}
.cal-item:hover{background:var(--papel-2)}
.cal-item__fecha{font-family:var(--dato);font-size:var(--t--1);color:var(--za-txt);white-space:nowrap;min-width:5.2rem}
.cal-item__tit{flex:1;font-weight:600}
.cal-item__tit small{display:block;font-weight:400;color:var(--tinta-3);font-size:var(--t--2)}

/* banner de ficha destacada dentro de una landing */
.destacada{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;background:var(--tarjeta);border:1px solid var(--za,var(--acento));border-left-width:6px;border-radius:var(--r);padding:1.3rem 1.4rem;text-decoration:none;transition:transform .16s, box-shadow .16s}
.destacada:hover{transform:translateY(-3px);box-shadow:0 16px 34px color-mix(in oklab,var(--tinta) 15%,transparent)}
.destacada__txt{flex:1;min-width:14rem}
.destacada__kick{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase;color:var(--za-txt)}
.destacada h3{font-family:var(--display);font-weight:650;font-size:var(--t-2);margin-top:.2rem}
.destacada p{color:var(--tinta-2);font-size:var(--t--1);margin-top:.3rem}
.destacada__ir{font-family:var(--dato);color:var(--za-txt);white-space:nowrap}

/* ==================== ficha de detalle (evento / lugar) ==================== */
.detalle-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--borde)}
.detalle-hero .env{position:relative;z-index:2;padding-block:clamp(2rem,5vw,3.2rem)}
.detalle-hero .cat{font-family:var(--dato);font-size:var(--t--1);letter-spacing:.1em;text-transform:uppercase;color:var(--za-txt)}
.detalle-hero h1{font-size:var(--t-4);max-width:22ch;margin-top:.25em}
.detalle-hero .lugar{margin-top:.6rem;font-size:var(--t-1);color:var(--tinta-2)}
/* aviso de panorama que ya ocurrió: se ve antes que cualquier otra cosa */
.ver-mas{max-width:56rem;margin:.9rem auto 0;font-size:var(--t--1);color:var(--tinta-2);text-align:center}
.ver-mas a{color:var(--za-txt);font-weight:600}
.aviso-paso{background:var(--acento-suave,#fbe3e0);border:1px solid var(--acento);border-left-width:5px;border-radius:var(--r-chico);padding:1rem 1.1rem;margin-top:1.2rem;color:var(--tinta)}
.aviso-paso p{margin:0}
.aviso-paso b{color:var(--acento)}
.aviso-paso__ir{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem!important}
.aviso-paso__ir a{font-size:var(--t--1)}
.aviso-dato{display:flex;gap:.7rem;align-items:flex-start;background:var(--papel-2);border:1px solid var(--borde-2);border-radius:var(--r-chico);padding:.8rem 1rem;font-size:var(--t--1);color:var(--tinta-2);margin-top:1.2rem}
.aviso-dato b{color:var(--tinta)}
.datos-duros{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:var(--e4);margin-block:var(--e5)}
.dato-caja{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.3rem}
.dato-caja .etq{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);display:flex;align-items:center;gap:.45rem}
.dato-caja .etq svg{width:1rem;height:1rem;color:var(--za-txt)}
.dato-caja .val{font-weight:700;font-size:var(--t-1);font-family:var(--display)}
.dato-caja .val.es-pendiente{color:var(--tinta-3);font-weight:500;font-family:var(--texto);font-size:var(--t-0)}
.dato-caja small{color:var(--tinta-3);font-size:var(--t--2)}
.bloque{background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r);padding:1.3rem 1.4rem;margin-bottom:var(--e4)}
.bloque h2{font-size:var(--t-2);margin-bottom:.7rem}
.bloque p{color:var(--tinta-2);margin-bottom:.5rem}
.bloque ul{margin:.3rem 0 .3rem 1.2rem;color:var(--tinta-2)}
.bloque li{margin-block:.3rem}
.botones-accion{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.btn-p{display:inline-flex;align-items:center;gap:.5rem;background:var(--za,var(--acento));color:#fff;font-weight:700;border-radius:999px;padding:.75rem 1.4rem;text-decoration:none;transition:transform .16s,filter .16s}
.btn-p:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-s{display:inline-flex;align-items:center;gap:.5rem;border:1.5px solid var(--borde-2);color:var(--tinta);font-weight:600;border-radius:999px;padding:.7rem 1.3rem;text-decoration:none}
.btn-s:hover{border-color:var(--za-txt);color:var(--za-txt)}
.relacionados{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:var(--e4)}

/* ==================== pie ==================== */
.pie{background:#101828;color:#e8ecf4;margin-top:var(--e7);border-top:1px solid var(--borde)}
.pie .env{padding-block:var(--e6);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:var(--e5)}
.pie .marca{color:#fff}
.pie p{max-width:38ch;color:#9aa6bb;font-size:var(--t--1);margin-top:.6rem}
.pie h4{font-family:var(--dato);font-size:var(--t--2);letter-spacing:.12em;text-transform:uppercase;color:#9aa6bb;margin-bottom:.6rem}
.pie ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:.35rem;font-size:var(--t--1)}
.pie a{color:#cdd6e4;text-decoration:none}
.pie a:hover{color:#fff}
.pie__legal{border-top:1px solid #263349;padding-block:1rem;font-family:var(--dato);font-size:var(--t--2);color:#8391a8;text-align:center}

/* ==================== aparición al hacer scroll ==================== */
@media (prefers-reduced-motion:no-preference){
  .js-anim [data-surgir]{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
  .js-anim [data-surgir].es-visible{opacity:1;transform:none}
  .js-anim .puertas [data-surgir]{transition-delay:calc(var(--orden,0)*45ms)}
}

/* ==================== portadas ilustradas ==================== */
.portada{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--papel-2)}
.portada__svg{width:100%;height:100%;display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
a:hover .portada__svg,.ficha:hover .portada__svg,.lugar-carta:hover .portada__svg{transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){ .portada__svg{transition:none} a:hover .portada__svg,.ficha:hover .portada__svg,.lugar-carta:hover .portada__svg{transform:none} }
.hoja-fecha{
  position:absolute;top:.6rem;left:.6rem;z-index:2;
  background:var(--tarjeta);border-radius:9px;padding:.3rem .55rem .35rem;
  text-align:center;line-height:1;box-shadow:0 6px 18px rgba(10,12,20,.35);
  border-top:3px solid var(--z,var(--acento));min-width:2.9rem;
}
.hoja-fecha b{display:block;font-family:var(--display);font-weight:750;font-size:1.25rem;color:var(--tinta)}
.hoja-fecha span{display:block;font-family:var(--dato);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3);margin-top:.15rem}
.cinta-gratis{
  position:absolute;top:.65rem;right:-2.1rem;z-index:2;transform:rotate(38deg);
  background:var(--sello);color:#fff;font-family:var(--dato);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;padding:.28rem 2.4rem;
}
/* la ficha ahora abre con su portada */
.ficha{padding:0;border-top:0}
.ficha .portada{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.ficha .portada::after{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--z,var(--acento))}
.ficha__cuerpo{display:flex;flex-direction:column;gap:.5rem;padding:.85rem 1.05rem 1rem;flex:1}
.lugar-carta{padding:0}
.lugar-carta::before{display:none}
.lugar-carta .portada{aspect-ratio:16/9;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.lugar-carta .portada::after{content:"";position:absolute;inset-inline:0;top:0;height:4px;background:var(--z,var(--za,var(--acento)))}
.lugar-carta__cuerpo{display:flex;flex-direction:column;gap:.4rem;padding:.8rem 1rem .9rem;flex:1}
/* héroes de ficha con la escena de fondo */
.detalle-hero__fondo{position:absolute;inset:0;z-index:0}
.detalle-hero__fondo .portada{position:absolute;inset:0;aspect-ratio:auto}
.detalle-hero__fondo .portada__svg{height:100%}
.detalle-hero__fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,18,.25) 0%,rgba(8,10,18,.72) 78%)}
.detalle-hero--confondo .env{padding-top:clamp(4rem,10vw,7rem)}
.detalle-hero--confondo h1,.detalle-hero--confondo .lugar,.detalle-hero--confondo .migas{color:#f4f6fb;position:relative}
.detalle-hero--confondo .migas a:hover{color:#fff}
.detalle-hero--confondo .cat{position:relative}

/* ==================== el mapa de Chile ==================== */
/* ==================== el mapa propio: Chile flotando ==================== */
.mapa-caja{position:relative;border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;background:var(--papel-2);height:clamp(430px,62vh,640px);
  --m2-tierra:#fffdfa; --m2-borde:#ddd6c6; --m2-texto:#8d8779; --m2-sombra:rgba(27,29,33,.16)}
:root[data-piel="noche"] .mapa-caja{--m2-tierra:#1b2740; --m2-borde:#33445f; --m2-texto:#7e8ba1; --m2-sombra:rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){ :root[data-piel="auto"] .mapa-caja{--m2-tierra:#1b2740; --m2-borde:#33445f; --m2-texto:#7e8ba1; --m2-sombra:rgba(0,0,0,.5)} }
/* el logo como marca de agua: multiply hace invisible su fondo blanco */
.mapa-caja::before{content:"";position:absolute;inset:0;background:url("/assets/img/logo.jpg") center/min(64%,460px) no-repeat;opacity:.09;mix-blend-mode:multiply;pointer-events:none}
:root[data-piel="noche"] .mapa-caja::before{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;opacity:.07}
@media (prefers-color-scheme:dark){ :root[data-piel="auto"] .mapa-caja::before{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen;opacity:.07} }
.mapa-cargando{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:1.5rem;color:var(--tinta-2);font-size:var(--t--1)}
.m2 .mapa-cargando{display:none}
.m2-canvas{position:absolute;inset:0;cursor:grab;touch-action:none}
.m2-canvas:active{cursor:grabbing}
.mapa-caja:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

/* la página /mapa/: el mapa ES la pantalla */
.mapa-full-titulo{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:.55rem clamp(1rem,3vw,1.6rem)}
.mapa-full-titulo h1{font-size:var(--t-1);font-weight:750}
.mapa-full-titulo .migas{margin:0}
.mapa-caja--full,.mapa-full-marco .mapa-caja{height:calc(100dvh - 7.2rem);min-height:430px;border-radius:0;border-inline:0}

/* píldoras de filtro flotantes */
.m2-pills{position:absolute;top:.65rem;left:.65rem;right:3.6rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;z-index:5}
.m2-pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--dato);font-size:var(--t--2);letter-spacing:.02em;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--borde-2);border-radius:999px;padding:.42rem .8rem;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.m2-pill span{font-size:.6rem;opacity:.7}
.m2-pill:hover{border-color:var(--acento)}
.m2-pill[aria-expanded="true"],.m2-pill--toggle[aria-pressed="true"]{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.m2-pill b{background:var(--acento);color:#fff;border-radius:999px;font-size:.62rem;min-width:1.05rem;height:1.05rem;display:inline-grid;place-content:center;padding-inline:.2rem}
.m2-busca{flex:1 1 9rem;min-width:8rem;max-width:16rem}
.m2-busca input{width:100%;font:inherit;font-size:var(--t--1);border:1px solid var(--borde-2);border-radius:999px;padding:.4rem .85rem;background:var(--tarjeta);color:var(--tinta);box-shadow:0 2px 10px rgba(0,0,0,.08)}

/* paneles que cuelgan de las píldoras */
.m2-panel{position:absolute;top:3.1rem;left:.65rem;z-index:6;background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:.55rem;min-width:14.5rem;max-width:min(19rem,calc(100% - 1.3rem));max-height:min(62%,21rem);overflow:auto}
.m2-panel__fam{font-family:var(--dato);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);padding:.5rem .4rem .2rem}
.m2-panel__fam:first-child{padding-top:.15rem}
.m2-check{display:flex;align-items:center;gap:.5rem;padding:.34rem .45rem;border-radius:8px;font-size:var(--t--1);cursor:pointer}
.m2-check:hover{background:var(--papel-2)}
.m2-check span{flex:1}
.m2-check b{font-family:var(--dato);font-weight:500;font-size:var(--t--2);color:var(--tinta-3)}
.m2-check input{accent-color:var(--acento)}
.m2-check--btn{width:100%;border:0;background:none;text-align:left;font:inherit;color:inherit}
.m2-check--btn.es-activa{background:var(--acento-suave);color:var(--acento);font-weight:700}
.m2-check--btn.es-activa b{color:var(--acento)}
.m2-panel__pie{border-top:1px solid var(--borde);margin-top:.4rem;padding-top:.45rem;text-align:center}
.m2-panel__pie button{border:0;background:none;font-family:var(--dato);font-size:var(--t--2);color:var(--acento);cursor:pointer;text-decoration:underline}

/* zoom, contador y leyenda */
.m2-zoom{position:absolute;right:.65rem;top:.65rem;display:flex;flex-direction:column;gap:.3rem;z-index:5}
.m2-zoom button{width:2.15rem;height:2.15rem;border:1px solid var(--borde-2);border-radius:10px;background:var(--tarjeta);color:var(--tinta);font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.m2-zoom button:hover{border-color:var(--acento);color:var(--acento)}
.m2-contador{position:absolute;left:.65rem;bottom:.65rem;z-index:5;display:flex;align-items:center;gap:.55rem;background:var(--tarjeta);border:1px solid var(--borde-2);border-radius:999px;padding:.36rem .8rem;font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-2);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.m2-contador button{border:0;background:none;font:inherit;color:var(--acento);cursor:pointer;text-decoration:underline;padding:0}
.m2-leyenda{position:absolute;right:.65rem;bottom:.65rem;z-index:4;display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;justify-content:flex-end;max-width:min(58%,30rem);background:color-mix(in oklab,var(--tarjeta) 82%,transparent);backdrop-filter:blur(5px);border:1px solid var(--borde);border-radius:10px;padding:.42rem .7rem;font-family:var(--dato);font-size:var(--t--2);color:var(--tinta-2)}
.m2-leyenda span{display:inline-flex;align-items:center;gap:.35rem}
.m2-leyenda i{width:.66rem;height:.66rem;border-radius:99px;display:inline-block}
.m2-leyenda__lugar i{border:2.5px solid var(--tinta-3);background:transparent;width:.56rem;height:.56rem}
.m2-leyenda small{flex-basis:100%;text-align:right;color:var(--tinta-3);font-size:.6rem}

/* pista al pasar el mouse y tarjeta del punto */
.m2-osm{position:absolute;left:.65rem;bottom:2.6rem;z-index:4;font-family:var(--dato);font-size:.58rem;color:var(--tinta-3);background:color-mix(in oklab,var(--tarjeta) 80%,transparent);border-radius:6px;padding:.14rem .45rem;text-decoration:none}
.m2-osm:hover{color:var(--acento)}
.m2-tip{position:absolute;z-index:7;background:var(--tinta);color:var(--papel);font-family:var(--dato);font-size:var(--t--2);padding:.32rem .6rem;border-radius:8px;pointer-events:none;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2-pop{position:absolute;z-index:8;left:0;top:0;width:252px;will-change:transform;background:var(--tarjeta);color:var(--tinta);border:1px solid var(--borde);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);overflow:hidden;line-height:1.4}
.m2-pop__x{position:absolute;top:.4rem;right:.4rem;z-index:2;width:1.65rem;height:1.65rem;border:0;border-radius:99px;background:color-mix(in oklab,var(--tarjeta) 78%,transparent);backdrop-filter:blur(3px);color:var(--tinta);cursor:pointer;font-size:.8rem}
.m2-pop__portada{aspect-ratio:16/8;overflow:hidden}
.m2-pop__portada .portada__svg{width:100%;height:100%}
.m2-pop__cat{font-family:var(--dato);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:.55rem .8rem 0}
.m2-pop h3{font-family:var(--display);font-weight:650;font-size:1rem;padding:.15rem .8rem 0}
.m2-pop__sub{font-size:.76rem;color:var(--tinta-2);padding:.15rem .8rem 0}
.m2-pop__pie{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-family:var(--dato);font-size:.7rem;padding:.35rem .8rem 0}
.m2-pop__pie small{color:var(--tinta-3);font-size:.62rem}
.m2-pop__ir{display:block;text-align:center;font-family:var(--dato);font-size:.76rem;color:var(--acento);text-decoration:none;padding:.55rem .8rem .7rem}
.m2-pop--hoja{left:.6rem;right:.6rem;bottom:.6rem;top:auto;width:auto;transform:none!important}
.m2-pop--hoja .m2-pop__portada{aspect-ratio:16/5}
.m2-hint{position:absolute;left:50%;bottom:3rem;transform:translateX(-50%);z-index:7;background:var(--tinta);color:var(--papel);font-family:var(--dato);font-size:var(--t--2);padding:.4rem .85rem;border-radius:999px;pointer-events:none;white-space:nowrap}
.m2-error{padding:2.5rem 1.5rem;text-align:center;color:var(--tinta-2)}

/* en el celular: el mapa gigante y la interfaz sin estorbar */
@media (max-width:700px){
  .mapa-caja{height:min(78vh,700px)}
  .mapa-caja--full,.mapa-full-marco .mapa-caja{height:calc(100dvh - 7.6rem)}
  .m2-leyenda{display:none}
  .m2-busca{flex-basis:100%;max-width:none}
  .m2-panel{left:.65rem;right:.65rem;max-width:none}
}


/* ==================== landings v2: estadísticas, subnav, FAQ ==================== */
.subnav{display:flex;gap:.4rem;flex-wrap:wrap;border-bottom:1px solid var(--borde);background:var(--papel);position:sticky;top:3.4rem;z-index:40;padding-block:.5rem}
.subnav a{font-family:var(--dato);font-size:var(--t--2);text-decoration:none;border:1px solid var(--borde-2);border-radius:999px;padding:.4rem .9rem;color:var(--tinta-2)}
.subnav a:hover{border-color:var(--za-txt);color:var(--za-txt)}
.estadisticas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10rem,45vw),1fr));gap:var(--e4)}
.estadistica{background:var(--tarjeta);border:1px solid var(--borde);border-left:4px solid var(--za,var(--acento));border-radius:var(--r-chico);padding:.9rem 1.05rem}
.estadistica b{display:block;font-family:var(--display);font-weight:750;font-size:var(--t-3);line-height:1;color:var(--za-txt)}
.estadistica span{font-size:var(--t--1);color:var(--tinta-2)}
.faq{max-width:52rem}
.faq details{border:1px solid var(--borde);border-radius:var(--r-chico);background:var(--tarjeta);margin-bottom:.6rem;overflow:hidden}
.faq summary{cursor:pointer;font-weight:700;padding:.85rem 1.1rem;list-style:none;display:flex;justify-content:space-between;gap:.8rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--dato);color:var(--za-txt);font-size:1.1rem}
.faq details[open] summary::after{content:"−"}
.faq .faq__cuerpo{padding:0 1.1rem .95rem;color:var(--tinta-2)}
.texto-seo{max-width:52rem;color:var(--tinta-2)}
.texto-seo p{margin-bottom:.8rem}
.enlaces-hermanas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:var(--e3)}
.enlaces-hermanas a{display:flex;align-items:center;gap:.6rem;text-decoration:none;background:var(--tarjeta);border:1px solid var(--borde);border-radius:var(--r-chico);padding:.75rem .95rem;font-weight:600;transition:transform .15s,border-color .15s}
.enlaces-hermanas a:hover{transform:translateY(-2px);border-color:var(--z-txt)}
.enlaces-hermanas svg{width:1.1rem;height:1.1rem;color:var(--z-txt)}

/* ==================== hero del home con la imagen de la cordillera ==================== */
.hero--foto{background:#bfe0f2}
.hero__foto{position:absolute;inset:0;background:url('/assets/img/hero-home.jpg?v=20260827c') center bottom/cover no-repeat}
.hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 45%)}
:root[data-piel="noche"] .hero__foto::after{background:linear-gradient(180deg,rgba(7,11,20,.62) 0%,rgba(7,11,20,.44) 60%,rgba(7,11,20,.58) 100%)}
@media (prefers-color-scheme:dark){ :root[data-piel="auto"] .hero__foto::after{background:linear-gradient(180deg,rgba(7,11,20,.62) 0%,rgba(7,11,20,.44) 60%,rgba(7,11,20,.58) 100%)} }
.hero--foto h1{text-shadow:0 2px 26px rgba(255,255,255,.55)}
:root[data-piel="noche"] .hero--foto h1{text-shadow:0 2px 22px rgba(0,0,0,.55)}
@media (prefers-color-scheme:dark){ :root[data-piel="auto"] .hero--foto h1{text-shadow:0 2px 22px rgba(0,0,0,.55)} }
.hero--foto .hero__fecha{background:color-mix(in oklab,var(--papel) 72%,transparent);border-radius:999px;padding:.35rem 1rem;width:fit-content;margin-inline:auto;backdrop-filter:blur(4px)}

/* ==================== el logo de la casa ==================== */
.marca img{height:2.45rem;width:auto;display:block;border-radius:8px}
.cab .marca img{height:2.3rem}
.pie .marca img{height:2.8rem}
:root[data-piel="noche"] .marca img{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
@media (prefers-color-scheme:dark){ :root[data-piel="auto"] .marca img{box-shadow:0 0 0 1px rgba(255,255,255,.16)} }
.pie .marca img{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
@media (max-width:420px){ .cab .marca img{height:2rem} }

/* ═══════════════════════════════════════════════════════════════════
   Tarjetas de evento — retoque
   ═══════════════════════════════════════════════════════════════════ */

/* TODA la tarjeta es clicable. Antes solo el <h3> era enlace: se podía
   hacer clic en la foto, en el recinto o en el precio y no pasaba nada,
   que es justo donde la gente apunta. El enlace se estira sobre la
   tarjeta con un pseudo-elemento en vez de envolverla en otro <a>: así
   el título sigue siendo el nombre accesible del enlace y no se anidan
   enlaces, que es marcado inválido. */
.ficha h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ficha h3 a { text-decoration: none; }
/* el texto se sigue pudiendo seleccionar y los chips siguen encima */
.ficha .ficha__pie, .ficha .ficha__meta { position: relative; z-index: 2; pointer-events: none; }

.ficha:focus-within { border-color: var(--z, var(--acento)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--z, var(--acento)) 35%, transparent); }
.ficha h3 a:focus-visible { outline: none; }

/* la subcategoría: lo que distingue una tarjeta de otra en una fila
   donde todas dicen «Conciertos» */
.ficha__sub { font-weight: 600; color: var(--z-txt, var(--acento)); }
.ficha__sub::before { content: "· "; opacity: .5; }

/* Más aire y mejor jerarquía: el título manda, el resto acompaña. */
.ficha__cuerpo { gap: .35rem; }
.ficha h3 { font-size: var(--t-1); line-height: 1.18; letter-spacing: -.01em; }
.ficha__lugar { font-size: var(--t--1); color: var(--tinta-2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha__pie { margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ficha .precio { font-family: var(--dato); font-size: var(--t--1); }
.ficha .precio.es-pendiente { color: var(--tinta-3); }
.ficha .precio.es-gratis { color: var(--sello); font-weight: 600; }

/* la foto se acerca un poco al pasar el mouse: dice «esto se toca» */
.ficha .portada { overflow: hidden; border-radius: calc(var(--r) - 5px); }
.ficha .portada > * { transition: transform .45s ease; }
.ficha:hover .portada > * { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .ficha .portada > *, .ficha { transition: none !important; }
  .ficha:hover .portada > * { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Bloques de macrozona — cada una con su paisaje
   ═══════════════════════════════════════════════════════════════════
   Los cuatro bloques se veían idénticos y había que leer el rótulo para
   saber si estabas en el norte o en Magallanes. Ahora cada uno lleva su
   color y una silueta de horizonte propia: dunas en el norte, cordillera
   con viñas en el centro, araucarias en el sur y témpanos en el austral.
   El dibujo va en el fondo, muy bajito, para que no compita con las
   tarjetas. */

.zona-bloque {
  position: relative;
  margin-block: 1.6rem;
  padding: 1.1rem clamp(.7rem, 2vw, 1.4rem) 1.3rem;
  border-radius: var(--r);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--z) 13%, transparent) 0%,
    color-mix(in oklab, var(--z) 4%, transparent) 42%,
    transparent 100%);
  overflow: hidden;
  isolation: isolate;
}
.zona-bloque::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 132px;
  z-index: -1;
  opacity: .5;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 100%;
  pointer-events: none;
}
.zona-bloque .zona-cab { margin-top: .2rem; }

/* Norte: dunas y altiplano */
.zona-bloque--d::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 132' preserveAspectRatio='none'%3E%3Cpath d='M0 132V96c120-34 210 12 320-6s170-52 290-40 190 58 310 44 190-30 280-38v76z' fill='%23b97a19' opacity='.42'/%3E%3Cpath d='M0 132v-22c150-26 250 10 380-4s210-34 330-26 210 40 320 30 130-18 170-22v44z' fill='%23b97a19' opacity='.26'/%3E%3Ccircle cx='980' cy='34' r='19' fill='%23b97a19' opacity='.3'/%3E%3C/svg%3E");
}
/* Zona central: cordillera y valle */
.zona-bloque--v::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 132' preserveAspectRatio='none'%3E%3Cpath d='M0 132V72l130-52 96 40 118-64 128 82 104-46 150 88 118-62 136 74 110-40 110 46v54z' fill='%232b4faf' opacity='.34'/%3E%3Cpath d='M0 132v-30l150-34 120 30 110-30 140 44 116-26 140 40 128-30 156 38 40-8v6z' fill='%232b4faf' opacity='.2'/%3E%3C/svg%3E");
}
/* Zona sur: bosque y araucarias */
.zona-bloque--b::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 132' preserveAspectRatio='none'%3E%3Cg fill='%232a6e52' opacity='.34'%3E%3Cpath d='M60 132 96 54l36 78zM150 132l30-62 30 62zM250 132l42-88 42 88zM370 132l28-58 28 58zM470 132l38-80 38 80zM590 132l30-64 30 64zM690 132l44-92 44 92zM820 132l30-62 30 62zM920 132l40-84 40 84zM1040 132l32-66 32 66zM1130 132l28-58 28 58z'/%3E%3C/g%3E%3Cpath d='M0 132v-16c160-18 280 8 420-2s220-20 340-12 200 22 300 16 100-10 140-12v26z' fill='%232a6e52' opacity='.2'/%3E%3C/svg%3E");
}
/* Zona austral: hielo y canales */
.zona-bloque--h::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 132' preserveAspectRatio='none'%3E%3Cpath d='M0 132V86l140-48 84 34 96-56 118 70 92-40 138 76 104-54 122 64 96-34 110 40v54z' fill='%2333698c' opacity='.34'/%3E%3Cpath d='M120 132l60-30 60 30zM520 132l70-34 70 34zM900 132l56-28 56 28z' fill='%23ffffff' opacity='.22'/%3E%3Cpath d='M0 132v-14c170-12 290 6 430 0s230-12 350-6 190 14 290 10 90-6 130-8v18z' fill='%2333698c' opacity='.2'/%3E%3C/svg%3E");
}

:root[data-piel="noche"] .zona-bloque::before { opacity: .34; }
@media (prefers-color-scheme: dark) { :root[data-piel="auto"] .zona-bloque::before { opacity: .34; } }

/* ═══════════════════════════════════════════════════════════════════
   El logo
   ═══════════════════════════════════════════════════════════════════
   Era un .jpg con el fondo de papel pegado: sobre la cabecera oscura se
   veía como un rectángulo claro. Ahora es un .webp con transparencia.

   Y hay dos versiones. La tinta granate del original mide 5,5:1 sobre
   papel pero solo 2,95:1 sobre el azul de la cabecera nocturna: se
   perdía. La versión aclarada llega a 6,22:1. No se puede resolver con
   <picture> porque el sitio tiene TRES estados de piel (día, noche y
   auto) y las media queries solo ven el del sistema: se cambia con las
   mismas reglas que usa el resto del sitio. */

.marca img { height: 3.1rem; width: auto; display: block; border-radius: 0; }

/* OJO CON LA ESPECIFICIDAD. Estas reglas se escribieron primero como
   `.marca__noche { display:none }`, una sola clase, y NO ganaban: hay
   dos reglas `.marca img { display:block }` (clase + elemento, mas
   especifica) que las pisaban. Resultado: el logo salia DOS VECES en la
   cabecera, el de dia y el de noche uno al lado del otro.
   Por eso van calificadas con `img`: quedan a la par en especificidad y
   ganan por venir despues. */
.marca img.marca__noche { display: none; }
:root[data-piel="noche"] .marca img.marca__dia { display: none; }
:root[data-piel="noche"] .marca img.marca__noche { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-piel="auto"] .marca img.marca__dia { display: none; }
  :root[data-piel="auto"] .marca img.marca__noche { display: block; }
}
/* La misma trampa de especificidad, otra vez: `.cab .marca img` (dos
   clases + elemento) le ganaba a `.marca img`, asi que el logo de la
   cabecera —el que mas se ve— seguia en 2,3rem mientras el del pie si
   crecia. Se califica igual para que el tamaño nuevo mande. */
.cab .marca img { height: 3.1rem; }

/* en el pie tiene más aire, así que puede ir un poco más grande */
.pie .marca img { height: 3.6rem; }

@media (max-width: 720px) {
  .marca img { height: 2.7rem; }
  .cab .marca img { height: 2.7rem; }
}
@media (max-width: 420px) {
  .cab .marca img { height: 2.4rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Agenda por calendario, navegación por tipo y recomendados
   ═══════════════════════════════════════════════════════════════════ */

/* El día de hoy tiene que saltar a la vista en la cartelera: es el
   ancla desde la que el visitante lee todo lo demás. */
.cartelera__dia em { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--tinta-3); font-weight: 400; }
.cartelera__dia.es-hoy { border-bottom-width: 3px; }
.cartelera__dia.es-hoy > span:first-child { color: var(--za, var(--acento)); font-weight: 700; }
.cartelera__dia.es-hoy > span:first-child::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--za, var(--acento)); margin-inline-end: .45rem; vertical-align: middle;
}

/* Chips de subcategoría: la cuenta va en negrita porque es el dato que
   decide si vale la pena entrar. */
.lobby-chips--sub a b { font-weight: 700; opacity: .65; margin-inline-start: .2rem; }

/* ── recomendados ────────────────────────────────────────────────────
   Fila de tarjetas chicas con foto. El motivo («también techno», «a 3
   km») va arriba y en color: una recomendación sin motivo visible se
   lee como relleno y nadie la toca. */
.similares { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: 1rem; }
.similar {
  display: flex; gap: .7rem; align-items: center; text-decoration: none;
  border: 1px solid var(--borde); border-radius: var(--r); padding: .55rem;
  background: var(--tarjeta); transition: border-color .18s, transform .18s;
}
.similar:hover { border-color: var(--z, var(--acento)); transform: translateY(-2px); }
.similar__foto { flex: 0 0 4.2rem; height: 4.2rem; border-radius: calc(var(--r) - 6px); overflow: hidden; position: relative; }
.similar__foto > * { width: 100%; height: 100%; object-fit: cover; }
.similar__txt { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.similar__motivo {
  font-family: var(--dato); font-size: var(--t--2); text-transform: uppercase; letter-spacing: .06em;
  color: var(--z-txt, var(--z, var(--acento)));
}
.similar__txt b { font-size: var(--t--1); line-height: 1.2; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.similar__txt small { color: var(--tinta-3); font-size: var(--t--2); }

@media (prefers-reduced-motion: reduce) { .similar { transition: none; } .similar:hover { transform: none; } }

/* La foto real de la tarjeta, cuando existe. Ocupa el mismo marco que
   el SVG de respaldo para que la grilla no se descuadre según haya
   afiche o no. */
.portada__foto { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── el logo como H1 de la portada ───────────────────────────────────
   Javier pidió la marca en vez del «¿Qué hacemos hoy?». El H1 se
   mantiene —es la señal más fuerte que lee Google— pero ahora contiene
   la imagen, y el texto que antes se veía vive en el `alt`, que sí
   describe de qué va el sitio. La frase se queda debajo como lema,
   porque es lo que le da voz a la portada. */
.hero-marca { margin: 0 0 .5rem; line-height: 0; }
.hero-marca img { width: min(28rem, 78vw); height: auto; display: block; }
.hero-marca__noche { display: none; }
:root[data-piel="noche"] .hero-marca img.hero-marca__dia { display: none; }
:root[data-piel="noche"] .hero-marca img.hero-marca__noche { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-piel="auto"] .hero-marca img.hero-marca__dia { display: none; }
  :root[data-piel="auto"] .hero-marca img.hero-marca__noche { display: block; }
}
.hero-lema { font-family: var(--display); font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 650;
  letter-spacing: -.02em; margin: 0 0 1.1rem; color: var(--tinta); }
.hero-lema em { font-style: italic; color: var(--acento); }
@media (max-width: 640px) { .hero-marca img { width: min(20rem, 84vw); } }

/* ── señales de la tarjeta ───────────────────────────────────────────
   Reemplazan al «$ por confirmar» que salía en todas. Cada una es un
   dato que el evento SÍ tiene: la hora, cuántos días dura, dónde se
   compran las entradas. Se diferencian por color para que la grilla no
   se lea como una repetición. */
.senales { display: inline-flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.senal {
  font-family: var(--dato); font-size: var(--t--2); line-height: 1;
  padding: .26rem .5rem; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--tinta-2); white-space: nowrap;
}
.senal.es-gratis { color: var(--sello); border-color: color-mix(in oklab, var(--sello) 45%, transparent); font-weight: 600; }
.senal.es-hora { color: var(--z-txt, var(--acento)); border-color: color-mix(in oklab, var(--z, var(--acento)) 40%, transparent); font-weight: 600; }
.senal.es-dias { color: var(--tinta-2); border-style: dashed; }
.senal.es-tienda, .senal.es-lugar { color: var(--tinta-3); }
.senal.es-siempre { color: var(--tinta-3); border-style: dashed; }
.evento-linea__lugar .senales { justify-content: flex-end; }

/* ── barra de filtros de landing ─────────────────────────────────────
   Nace con `hidden` y la muestra el script: si el JavaScript no carga,
   no queda una barra muerta en pantalla y las tarjetas se ven todas,
   que es exactamente lo que ve Google. */
.filtros-landing { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.filtros-landing__busca {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--borde-2); border-radius: 999px; padding: .5rem .95rem;
  background: var(--tarjeta); max-width: 34rem;
}
.filtros-landing__busca svg { color: var(--tinta-3); flex: 0 0 auto; }
.filtros-landing__busca input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--tinta);
  font: inherit; font-size: var(--t--1); outline: none;
}
.filtros-landing__limpiar {
  border: 0; background: none; color: var(--za, var(--acento)); font-family: var(--dato);
  font-size: var(--t--2); cursor: pointer; padding: .2rem .3rem;
}
.filtros-landing__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.fchip {
  font-family: var(--dato); font-size: var(--t--2); cursor: pointer;
  border: 1px solid var(--borde-2); border-radius: 999px; padding: .42rem .85rem;
  background: color-mix(in oklab, var(--tarjeta) 40%, transparent); color: var(--tinta-2);
  min-height: 2.05rem;   /* objetivo tactil comodo, WCAG 2.5.8 */
}
.fchip:hover { border-color: var(--za, var(--acento)); color: var(--za-txt, var(--acento)); }
.fchip[aria-pressed="true"] { background: var(--za, var(--acento)); border-color: var(--za, var(--acento)); color: #fff; font-weight: 600; }
.filtros-landing__cuenta { font-family: var(--dato); font-size: var(--t--2); color: var(--tinta-3); margin: 0; }
.filtros-landing.es-vacio .filtros-landing__cuenta { color: var(--acento); }
@media (prefers-reduced-motion: reduce) { .fchip { transition: none; } }

/* ── formularios de contacto y reporte ───────────────────────────── */
.form-qhc { max-width: 40rem; display: grid; gap: .9rem; }
.form-qhc__t { font-family: var(--display); font-size: var(--t1); margin: 0; }
.form-qhc__ayuda { color: var(--tinta-2); font-size: var(--t--1); margin: 0; }
.form-qhc__campo { display: grid; gap: .3rem; margin: 0; }
.form-qhc__campo label { font-family: var(--dato); font-size: var(--t--2); color: var(--tinta-2); }
.form-qhc__campo .req { color: var(--acento); }
.form-qhc__campo .opt { color: var(--tinta-3); }
.form-qhc__campo input, .form-qhc__campo textarea {
  font: inherit; font-size: var(--t--1); color: var(--tinta);
  background: var(--tarjeta); border: 1px solid var(--borde-2); border-radius: 12px;
  padding: .7rem .85rem; width: 100%; resize: vertical;
}
.form-qhc__campo input:focus-visible, .form-qhc__campo textarea:focus-visible {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--acento) 28%, transparent);
}
.form-qhc__pie { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: .2rem 0 0; }
.form-qhc__estado { font-family: var(--dato); font-size: var(--t--2); color: var(--tinta-3); }
.form-qhc__estado.es-mal { color: var(--acento); }
.form-qhc__nota { font-size: var(--t--2); color: var(--tinta-3); margin: 0; }
.form-qhc__gracias { font-size: var(--t0); line-height: 1.5; padding: 1.2rem;
  border: 1px solid color-mix(in oklab, var(--sello) 40%, transparent); border-radius: var(--r);
  background: color-mix(in oklab, var(--sello) 8%, transparent); }
/* la trampa para robots: fuera de la vista pero no `display:none`, que
   algunos robots detectan y saltan */
.form-qhc__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pie__legales { display: flex; gap: .2rem 1.1rem; flex-wrap: wrap; justify-content: center;
  padding: 1.2rem 1rem .2rem; font-size: var(--t--2); font-family: var(--dato); }
.pie__legales a { color: rgba(255,255,255,.72); text-decoration: none; }
.pie__legales a:hover { color: #fff; text-decoration: underline; }

/* ── el aviso de «hay algo mal» en las fichas ────────────────────────
   Javier lo pidió discreto: tiene que estar, pero sin competir con el
   contenido. Va al final, en tono menor, y se enciende al pasar. */
.avisar-dato {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-block-start: 1.4rem; padding: .8rem 1rem;
  border: 1px dashed var(--borde-2); border-radius: var(--r);
  font-size: var(--t--2); color: var(--tinta-3);
}
.avisar-dato a { color: var(--tinta-2); }
.avisar-dato:hover { border-color: var(--acento); }
.avisar-dato:hover a { color: var(--acento); }

/* ── familias de género ──────────────────────────────────────────────
   Trece chips en fila obligan a leerlos todos. Agrupados por familia se
   elige en dos pasos: primero el tipo de noche, después el género. */
.grupos-sub { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grupo-sub { border: 1px solid var(--borde); border-radius: var(--r); padding: .9rem 1rem 1rem;
  background: color-mix(in oklab, var(--tarjeta) 55%, transparent); }
.grupo-sub__cab { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0 0 .1rem; }
.grupo-sub__cab b { font-family: var(--display); font-size: var(--t0); font-weight: 650; }
.grupo-sub__cab span { font-family: var(--dato); font-size: var(--t--2); color: var(--tinta-3); }
.grupo-sub__intro { font-size: var(--t--2); color: var(--tinta-3); margin: 0 0 .6rem; }
.grupo-sub .lobby-chips { gap: .35rem; }

/* El logo del hero va sobre una foto que cambia cada 5 segundos, así que
   no se puede confiar en el contraste de ninguna en particular: la doble
   sombra —un halo claro pegado y una sombra suave abajo— lo despega
   igual de un cielo blanco que de un cerro oscuro. */
.hero-marca img {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .55)) drop-shadow(0 3px 16px rgba(10, 14, 26, .35));
}