/* La Calle Más Navideña — Arte en el Parque A.C. */
:root{
  --rojo:#E2342B;
  --rojo-hondo:#C2241D;
  --rojo-sombra:#A81B15;
  --crema:#FFF3E0;
  --crema-2:#F7E6CB;
  --tinta:#3A0D0A;
  --verde:#0E5A3A;
  --verde-hondo:#0A4830;
  --noche:#0A1424;
  --oro:#FFC64A;

  --display:"Alfa Slab One","Rockwell","Georgia",serif;
  --texto:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;

  --margen:clamp(18px,4vw,32px);
  --aire:clamp(88px,13vw,190px);
  --salida:cubic-bezier(.23,1,.32,1);
  --entra-sale:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--rojo);color:var(--crema);
  font-family:var(--texto);font-size:clamp(1rem,.95rem + .3vw,1.2rem);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.08em}
:focus-visible{outline:3px solid var(--oro);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:0}

.skip{position:absolute;left:var(--margen);top:-80px;z-index:100;background:var(--crema);color:var(--tinta);padding:12px 18px;border-radius:999px;font-weight:700}
.skip:focus{top:12px}

.titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.3rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.02em;
  text-wrap:balance;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:.7em 1.35em;border-radius:999px;border:0;
  font:700 1rem/1.1 var(--texto);text-decoration:none;cursor:pointer;
  transition:transform .16s var(--salida),background-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn svg{transition:transform .25s var(--salida)}
.btn:active{transform:scale(.97)}
.btn--crema{background:var(--crema);color:var(--rojo-hondo)}
.btn--grande{min-height:60px;padding:.9em 1.7em;font-size:clamp(1.02rem,.95rem + .35vw,1.25rem)}
@media (hover:hover){
  .btn--crema:hover{background:#fff}
  .btn:hover svg{transform:translateX(4px)}
}

/* ---------- Navegación ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:24px;
  padding:12px var(--margen);
  background:var(--rojo);
  transition:background-color .3s ease;
}
.nav__marca{font-weight:700;text-decoration:none;font-size:1rem;margin-right:auto;min-height:44px;display:inline-flex;align-items:center}
.nav__links{display:none;gap:clamp(18px,2.4vw,34px)}
.nav__links a{text-decoration:none;font-weight:600;font-size:1rem;min-height:44px;display:inline-flex;align-items:center;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--salida)}
@media (hover:hover){.nav__links a:hover::after{transform:scaleX(1)}}
.nav__cta{min-height:44px;padding:.55em 1.15em}
.nav.en-noche{background:var(--noche)}
.nav.en-verde{background:var(--verde)}
@media (min-width:820px){.nav__links{display:flex}}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(150px,21vh,210px) var(--margen) clamp(180px,27vh,290px);
  background:var(--rojo);
}
.hero__nieve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__guirnalda{position:absolute;top:52px;left:0;width:100%;height:clamp(84px,11vw,150px);pointer-events:none;overflow:visible}
.hero__guirnalda .cable{fill:none;stroke:var(--rojo-sombra);stroke-width:3}
.hero__calle{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(150px,22vh,230px);pointer-events:none}
.foco{animation:parpadeo 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:.35}}

.hero__texto{position:relative;z-index:2;max-width:1500px;width:100%;margin:0 auto}
.hero__titulo{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.3rem,9.1vw,10.2rem);line-height:.92;letter-spacing:-.025em;white-space:nowrap;
  text-transform:uppercase;
}
.hero__titulo .linea{display:block;overflow:hidden;padding:.14em 0 .06em;margin-top:-.14em}
.hero__titulo .linea>span{display:block;transform:translateY(105%);animation:sube .9s var(--salida) forwards}
.hero__titulo .linea:nth-child(2)>span{animation-delay:.09s}
@keyframes sube{to{transform:none}}

.hero__pie{
  margin-top:clamp(22px,3.4vw,44px);
  display:grid;gap:clamp(20px,3vw,36px);
  opacity:0;transform:translateY(14px);animation:aparece .7s var(--salida) .35s forwards;
}
@keyframes aparece{to{opacity:1;transform:none}}
.hero__bajada{font-size:clamp(1.1rem,1rem + .9vw,1.7rem);font-weight:600;line-height:1.3;max-width:24ch}
.hero__accion{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cuenta{font-size:1rem;font-weight:600;min-height:1.6em}
.cuenta__num{display:inline-flex;gap:.9em;font-variant-numeric:tabular-nums}
.cuenta__num[hidden]{display:none}
.cuenta__num b{font-family:var(--display);font-weight:400;font-size:1.5em;margin-right:.12em}
@media (min-width:820px){
  .hero__pie{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .hero__accion{align-items:flex-end;text-align:right}
}

/* ---------- Secciones ---------- */
.seccion{padding:var(--aire) var(--margen)}
.seccion>*{max-width:1500px;margin-left:auto;margin-right:auto}

/* Descripción */
.calle{background:var(--crema);color:var(--tinta)}
.calle .titulo{color:var(--rojo)}
.calle__grid{display:grid;gap:clamp(32px,5vw,72px)}
.calle__cuerpo{display:grid;gap:1.1em;max-width:60ch}
.calle__grande{font-family:var(--display);font-size:clamp(1.5rem,1.1rem + 1.7vw,2.2rem);line-height:1.1;color:var(--verde);margin-bottom:.3em}
@media (min-width:900px){
  .calle__grid{grid-template-columns:1.15fr 1fr;align-items:start}
  .calle__cuerpo{padding-top:.6em}
}

/* Bases */
.bases{background:var(--rojo);color:var(--crema)}
.pasos{margin-top:clamp(40px,6vw,88px);display:grid;gap:clamp(14px,1.6vw,22px)}
.paso{
  background:var(--rojo-hondo);border-radius:clamp(18px,2vw,28px);
  padding:clamp(22px,3vw,40px);
  display:grid;gap:14px;
}
.paso__fecha{font-family:var(--display);font-size:clamp(1.5rem,1.1rem + 1.7vw,2.2rem);line-height:1.02;color:var(--oro)}
.paso h3{font-size:1.2em;font-weight:700;line-height:1.2;margin-bottom:.3em}
.paso p{max-width:44ch}
@media (min-width:900px){
  .paso{grid-template-columns:minmax(220px,.42fr) 1fr;align-items:center;gap:40px}
  .paso:nth-child(2){margin-left:7%}
  .paso:nth-child(3){margin-left:14%}
  .paso:nth-child(1){margin-right:14%}
  .paso:nth-child(2){margin-right:7%}
}
.bases__zona{margin-top:clamp(36px,5vw,64px);max-width:62ch;margin-left:auto;margin-right:auto}
.bases__zona a{font-weight:700;white-space:nowrap}
@media (min-width:900px){.bases__zona{margin-left:max(0px,calc((100% - 1500px)/2))}}

/* ---------- Mapa ---------- */
.mapa{
  position:relative;background:var(--noche);color:var(--crema);
  min-height:min(100svh,980px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(88px,10vw,120px) var(--margen) clamp(20px,3vw,32px);
  overflow:hidden;
}
.mapa__escena{position:absolute;inset:0}
.mapa__escena canvas{width:100%;height:100%;touch-action:pan-y;cursor:grab}
.mapa__escena canvas:active{cursor:grabbing}
.mapa__estado{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:600;text-align:center;max-width:30ch;transition:opacity .4s ease}
.mapa__estado.oculto{opacity:0;pointer-events:none}
.mapa__etiquetas{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.etq{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-size:.82rem;font-weight:700;line-height:1;color:var(--noche);background:var(--crema);
  padding:.45em .7em;border-radius:999px;will-change:transform;
  transition:opacity .25s ease;
}
.etq--oro{background:var(--oro)}
.mapa__cabecera,.mapa__panel{position:relative;z-index:2;pointer-events:none}
.mapa__cabecera{max-width:min(92vw,640px)}
.mapa__cabecera .titulo{font-size:clamp(2rem,5vw,4.2rem)}
.mapa__cabecera p{margin-top:.8em;max-width:34ch;font-weight:600}
.mapa__panel{display:grid;gap:14px;margin-top:34svh}
.mapa__panel>*{pointer-events:auto}
.mapa__progreso{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;max-width:520px}
.mapa__barra{flex:1;height:6px;border-radius:999px;background:#22344f;overflow:hidden}
.mapa__barra i{display:block;height:100%;width:100%;background:var(--oro);transform:scaleX(0);transform-origin:left}
.mapa__controles{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  min-height:46px;padding:.6em 1.15em;border-radius:999px;border:0;cursor:pointer;
  background:#1B2B45;color:var(--crema);font:700 1rem/1 var(--texto);
  transition:transform .16s var(--salida),background-color .2s ease,color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.chip:active{transform:scale(.97)}
.chip.is-on{background:var(--oro);color:var(--noche)}
@media (hover:hover){.chip:not(.is-on):hover{background:#263b5e}}
.mapa__nota{font-size:.82rem;line-height:1.45;color:#B9C6DC;max-width:70ch}

/* ---------- Premios ---------- */
.premios{background:var(--verde);color:var(--crema)}
.premios__grid{margin-top:clamp(40px,6vw,88px);display:grid;gap:clamp(14px,1.6vw,22px)}
.premio{background:var(--verde-hondo);border-radius:clamp(18px,2vw,28px);padding:clamp(24px,3.2vw,48px);display:flex;flex-direction:column;gap:.5em}
.premio__lugar{font-weight:700;color:var(--oro)}
.premio__valor{font-family:var(--display);font-size:clamp(3rem,2rem + 5vw,5.6rem);line-height:.95;letter-spacing:-.02em;margin:.08em 0 .18em}
.premio h3{font-size:1.2em;font-weight:700;line-height:1.2}
.premio p:last-child{max-width:40ch}
.premio--uno{background:var(--crema);color:var(--tinta)}
.premio--uno .premio__lugar{color:var(--rojo-hondo)}
.premio--uno .premio__valor{color:var(--rojo);font-size:clamp(4.2rem,2rem + 13vw,12rem)}
@media (min-width:900px){
  .premios__grid{grid-template-columns:1fr 1fr}
  .premio--uno{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:clamp(32px,5vw,80px);align-items:end}
  .premio--uno .premio__lugar{grid-column:1/-1}
  .premio--uno .premio__valor{grid-row:2/4;margin:0}
  .premio--uno h3{font-size:1.5em;align-self:end}
}

/* ---------- Cierre ---------- */
.cierre{
  background:var(--rojo);color:var(--crema);
  padding:var(--aire) var(--margen);
  display:grid;gap:clamp(28px,5vw,80px);align-items:center;
}
.cierre__cupo{display:flex;align-items:flex-end;gap:clamp(12px,2vw,24px)}
.cierre__num{font-family:var(--display);font-size:clamp(8rem,30vw,22rem);line-height:.78;letter-spacing:-.04em;color:var(--oro)}
.cierre__lbl{font-weight:700;line-height:1.2;padding-bottom:.4em}
.cierre__texto{display:grid;gap:1.3em;justify-items:start;max-width:560px}
.cierre__texto a:not(.btn){font-weight:700}
@media (min-width:900px){
  .cierre{grid-template-columns:auto 1fr;max-width:calc(1500px + 2*var(--margen));margin:0 auto}
}

/* ---------- Pie ---------- */
.pie{
  background:var(--crema);color:var(--tinta);
  padding:clamp(40px,6vw,72px) var(--margen) clamp(28px,4vw,40px);
  display:grid;gap:28px;
}
.pie__logo{display:inline-block;width:min(240px,70vw)}
.pie__aliados p{max-width:48ch}
.pie__aliados ul{display:flex;flex-wrap:wrap;gap:.3em 1.6em;margin-top:.7em;font-family:var(--display);font-size:clamp(1.3rem,1rem + 1.4vw,2.2rem);line-height:1.15;color:var(--rojo)}
.pie__legal{font-size:.9rem}
.pie__legal a{display:inline-flex;min-height:44px;align-items:center}
@media (min-width:900px){
  .pie{grid-template-columns:auto 1fr;column-gap:clamp(40px,7vw,120px);align-items:start}
  .pie__legal{grid-column:1/-1}
}

/* ---------- Revelado al hacer scroll ---------- */
.js .rev{opacity:0;transform:translateY(18px);transition:opacity .7s var(--salida),transform .7s var(--salida);transition-delay:var(--d,0ms)}
.js .rev.visto{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .foco{animation:none}
  .hero__titulo .linea>span,.hero__pie{animation:none;transform:none;opacity:1}
  .js .rev{opacity:1;transform:none;transition:none}
  .btn,.chip,.btn svg{transition:none}
}

/* ---------- Ajustes finales ---------- */
/* Velo neutro bajo el texto que va sobre el mapa */
.mapa__escena::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,20,36,.88) 0,rgba(10,20,36,0) 34%,rgba(10,20,36,0) 58%,rgba(10,20,36,.92) 88%);
}
.mapa__etiquetas{z-index:1}
/* En celular el título va en tres renglones, a todo lo ancho */
@media (max-width:640px){
  .hero__titulo{font-size:14.6vw;white-space:normal;line-height:.94}
  .hero{padding-top:150px}
}