/* ============================================================
   app.css — el sitio público

   DECISIÓN DE FONDO: esta página se abre en un celular, adentro de
   WhatsApp, mientras la persona hace otra cosa. Son dos bloques y
   nada más: arriba qué es, cuándo, dónde y cuánto sale; abajo el
   formulario para pedir la entrada. Todo lo que no sea eso es
   scroll entre la persona y el botón.

   LO QUE HACE EL TRABAJO VISUAL ES EL FONDO, no el contenido:
   blanco con manchas celestes difuminadas que se mueven al
   scrollear. Eso deja que el texto sea poco y grande, que es lo que
   se lee en un celular con una mano.
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root{
  /* El celeste. Está en estas cuatro líneas: si mañana se quiere
     otro tono, se cambian estas y listo.

     Cada tono tiene su lugar y no son intercambiables:
       --celeste      las manchas del fondo y los rellenos. NO para
                      texto: sobre blanco da 2.6:1 y no se lee.
       --celeste-osc  TODO el texto y los bordes celestes (5.3:1).
       --celeste-sua  fondos suaves de avisos y píldoras. */
  --celeste:     #5FA8DC;
  --celeste-osc: #1F6FB2;
  --celeste-cla: #9FCBEC;
  --celeste-sua: #EAF3FB;

  /* Oscuros apenas azulados, no neutros: al lado del celeste, un
     gris puro se ve sucio y amarillento. */
  --tinta:   #0F1A24;
  --tinta-2: #4A5A67;
  /* El gris de los rótulos chicos: 5.3:1 sobre blanco. El valor
     "lindo" (#8294A2) daba 3.1:1 y los rótulos en mayúscula de
     11 px eran justo los que menos se leían. */
  --tinta-3: #5C6E7E;

  --blanco:  #FFFFFF;
  --papel:   #F4F8FC;
  --linea:   #DDE6EE;
  --linea-2: #EDF2F7;

  --verde:   #17754C;
  --ambar:   #8A5A00;
  --rojo:    #B32D24;

  /* Tipografía. Syne para los títulos: geométrica, con carácter, y
     no es ninguna de las dos o tres caras que aparecen en todas las
     páginas de evento. Inter para leer. */
  --display: "Syne", "Trebuchet MS", sans-serif;
  --texto:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho:  1080px;
  --radio:  14px;
  --radio-g:22px;
  --sombra: 0 1px 2px rgba(15,26,36,.03), 0 18px 48px rgba(15,26,36,.07);
  --hdr-h:  66px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 16px);
}
body{
  margin:0;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
p{ margin:0 0 1rem; }
dl,dd,dt{ margin:0; }

h1,h2{
  font-family:var(--display); font-weight:800;
  line-height:1.03; margin:0; letter-spacing:-.025em;
}
h1 em, h2 em{ font-style:normal; color:var(--celeste-osc); }

:focus-visible{ outline:2px solid var(--celeste-osc); outline-offset:3px; border-radius:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--tinta); color:#fff; padding:.9rem 1.4rem;
}
.skip:focus{ left:0; }

.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   El fondo
   ============================================================ */
/* Tres manchas celestes sobre blanco, que se mueven a distinta
   velocidad al scrollear.

   SON RADIAL-GRADIENT Y NO filter:blur(). Un blur de 90 px sobre un
   elemento de 800 px lo recalcula el navegador en cada cuadro, y en
   un celular de hace tres años eso es un scroll a tirones. Un
   degradado radial que termina en transparente se ve igual y es
   gratis.

   Va en un elemento fijo aparte y no en el fondo del body para que
   el JS pueda moverlo sin tocar nada más. Si el JS no corre, quedan
   quietas y la página se ve igual de bien: es decoración, no
   estructura. */
.fondo{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:var(--blanco);
}
.fondo__mancha{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;
}
.fondo__mancha--1{
  width:min(120vw, 1000px); aspect-ratio:1;
  top:-22vh; right:-26vw;
  background:radial-gradient(circle at 50% 50%,
    rgba(95,168,220,.42) 0%, rgba(95,168,220,.16) 42%, rgba(95,168,220,0) 70%);
}
.fondo__mancha--2{
  width:min(110vw, 860px); aspect-ratio:1;
  top:46vh; left:-32vw;
  background:radial-gradient(circle at 50% 50%,
    rgba(120,196,235,.34) 0%, rgba(120,196,235,.12) 45%, rgba(120,196,235,0) 72%);
}
.fondo__mancha--3{
  width:min(130vw, 1100px); aspect-ratio:1;
  bottom:-34vh; right:-18vw;
  background:radial-gradient(circle at 50% 50%,
    rgba(70,150,210,.30) 0%, rgba(70,150,210,.10) 48%, rgba(70,150,210,0) 74%);
}

/* Todo lo que no es el fondo va por encima. */
.hdr, main, .pie{ position:relative; z-index:1; }

/* ── Estructura ──────────────────────────────────────────── */
.wrap{         width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }
.wrap--angosto{ width:min(100% - 2.5rem, 620px); margin-inline:auto; }

.seccion{ padding-block:clamp(3rem, 7vw, 6rem); position:relative; }
.seccion--centro{ text-align:center; }

/* El mínimo del clamp lo manda la palabra más larga del título, no
   el gusto: a 360 px "Diciembre" en Syne ExtraBold a 3.1rem mide
   más que la pantalla y se sale por la derecha. A 2.6rem entra con
   aire. El máximo es para que en un monitor grande el título siga
   siendo un título y no un cartel de ruta. */
.h1{ font-size:clamp(2.6rem, 10.5vw, 6.4rem); }
.h2{ font-size:clamp(1.9rem, 6vw, 3rem); }

/* Red de seguridad: si algún día el nombre es una palabra más larga
   que esta, se parte antes de salirse de la pantalla. Un título
   cortado se lee; uno que desborda rompe la página entera, porque
   arrastra el scroll horizontal con él. */
.h1,.h2{ overflow-wrap:break-word; }

.volanta{
  font-size:.74rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--celeste-osc); margin:0 0 1rem;
}
.bajada{
  color:var(--tinta-2); max-width:46ch; margin:1.1rem 0 0; font-size:1.06rem;
}
.bajada--centro{ margin-inline:auto; }
.cabecera{ margin-bottom:1.8rem; }

.acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.2rem; margin-top:2rem; }
.acciones--centro{ justify-content:center; }

.dato-suelto{ font-weight:600; margin:1.2rem 0 0; }

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.98rem;
  padding:.85rem 1.6rem; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1.2;
  transition:background .16s, color .16s, border-color .16s, transform .12s;
}
.btn:active{ transform:translateY(1px); }
.btn--celeste{ background:var(--celeste-osc); color:#fff; }
.btn--celeste:hover{ background:#175A93; }
.btn--linea{
  background:rgba(255,255,255,.92); color:var(--tinta); border-color:var(--linea);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--linea:hover{ border-color:var(--celeste); color:var(--celeste-osc); }
.btn--g{ font-size:1.06rem; padding:1.05rem 2.2rem; }
.btn--chico{ font-size:.88rem; padding:.6rem 1.1rem; }
.hdr .btn{ white-space:nowrap; flex:none; }
.btn--ancho{ width:100%; }
.btn--off{ background:var(--linea); color:var(--tinta-3); cursor:not-allowed; pointer-events:none; }

/* ============================================================
   Header
   ============================================================ */
/* EL FONDO VA CASI OPACO Y EL VIDRIO ES UN EXTRA. La barra se queda
   pegada arriba y el contenido le pasa por abajo: con un blanco al
   72 % se leía el texto de atrás cruzado con el nombre, y si el
   navegador no soporta backdrop-filter —un Android viejo, que es
   justo el que va a abrir esto— se ve nítido y encimado. Primero el
   blanco que se lee siempre; el desenfoque, solo donde existe. */
.hdr{
  position:sticky; top:0; z-index:90; height:var(--hdr-h);
  background:rgba(255,255,255,.97);
  border-bottom:1px solid transparent;
  transition:border-color .2s, background .2s;
}
.hdr.is-pegado{ border-bottom-color:var(--linea-2); }

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{
    background:rgba(255,255,255,.80);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
  }
  .hdr.is-pegado{ background:rgba(255,255,255,.90); }
}
.hdr__in{ height:100%; display:flex; align-items:center; gap:1rem; justify-content:space-between; }

.marca{
  display:flex; flex-direction:column; text-decoration:none;
  color:var(--tinta); min-width:0; overflow:hidden;
}
.marca__nombre{
  font-family:var(--display); font-weight:800; font-size:1.18rem;
  letter-spacing:-.02em; line-height:1.1;
  /* Red de seguridad para el día que el nombre definitivo sea más
     largo que "Diciembre Fest": se corta con puntos suspensivos en
     vez de empujar el botón fuera de la barra. Con el nombre de hoy
     no se activa en ninguna pantalla. */
  overflow:hidden; text-overflow:ellipsis;
}
.marca__bajada{
  font-size:.66rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-3);
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding-block:clamp(3rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); }
.hero__in{ display:grid; gap:clamp(2rem, 5vw, 4rem); align-items:center; }
.hero__in--flyer{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.hero__txt{ min-width:0; }
.hero__h1{ margin:0; }
.hero__falta{
  margin:0; font-size:.9rem; font-weight:600; color:var(--tinta-3);
  font-variant-numeric:tabular-nums;
}

.flyer{ margin:0; }
.flyer img{
  width:100%; border-radius:var(--radio-g);
  border:1px solid var(--linea); box-shadow:var(--sombra);
}

/* ── Los datos: cuándo, dónde, cuánto ────────────────────── */
.datos{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem;
  margin:clamp(2rem, 4vw, 2.8rem) 0 0;
  padding-top:clamp(1.6rem, 3vw, 2.2rem);
  border-top:1px solid var(--linea);
}
.datos__i{ min-width:0; }
.datos dt{
  font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:.3rem;
}
.datos dd{ font-weight:600; font-size:1.08rem; line-height:1.35; overflow-wrap:anywhere; }
.datos dd span{ display:block; font-weight:400; font-size:.9rem; color:var(--tinta-2); }
.datos dd a{ color:var(--celeste-osc); text-decoration:none; border-bottom:1px solid #BFDAF0; }
.datos dd a:hover{ border-bottom-color:var(--celeste-osc); }

/* ============================================================
   La caja del formulario y los carteles
   ============================================================ */
.caja{
  /* Casi blanca, y el vidrio solo donde el navegador lo soporta: el
     formulario se tiene que leer igual en un Android que no conoce
     backdrop-filter. El efecto es decoración; el contraste, no. */
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--linea); border-radius:var(--radio-g);
  box-shadow:var(--sombra); padding:clamp(1.4rem, 4vw, 2.4rem);
}
.caja--centro{ text-align:center; }
.caja__ico{
  width:58px; height:58px; border-radius:50%; margin:0 auto 1.2rem;
  display:grid; place-items:center;
  background:var(--celeste-sua); color:var(--celeste-osc);
}
/* En ámbar y no en celeste: quedar en lista de espera no es lo mismo
   que tener la entrada, y el cartel no puede decir lo mismo con el
   mismo color. */
.caja__ico--espera{ background:#FDF3DF; color:var(--ambar); }

.campos{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem; }
.campo{ display:flex; flex-direction:column; min-width:0; }
.campo--ancho{ grid-column:1 / -1; }
.campo > label,.campo__lbl{
  font-size:.82rem; font-weight:600; margin-bottom:.4rem;
  display:flex; align-items:baseline; gap:.4rem;
}
.campo__opc{ font-weight:400; color:var(--tinta-3); font-size:.76rem; }

.campo input[type=text],.campo input[type=tel],.campo input[type=email],.campo textarea{
  font:inherit;
  /* 1rem (16px) y no menos: con una fuente más chica, iOS hace zoom
     solo al tocar el campo y deja la página corrida. */
  font-size:1rem; color:var(--tinta);
  background:#fff; border:1.5px solid var(--linea); border-radius:11px;
  padding:.75rem .9rem; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.campo textarea{ resize:vertical; min-height:72px; line-height:1.55; }
/* El borde de foco va en --celeste-osc y no en --celeste: el celeste
   de marca da 2.6:1 contra el blanco y un foco que no se ve es lo
   mismo que no tener foco. */
.campo :is(input,textarea):focus{
  outline:none; border-color:var(--celeste-osc); box-shadow:0 0 0 3px rgba(31,111,178,.2);
}

/* El contador de entradas.

   Sin JavaScript es un <input type=number> común, que funciona
   perfecto y en el celular abre el teclado numérico. El JS lo
   esconde y pone los botones de − y +, más fáciles de tocar con el
   pulgar. Al revés —los botones en el HTML y el valor en un hidden—
   el formulario queda roto para quien tenga el JS bloqueado. */
.contador{ display:flex; align-items:center; gap:.85rem; }
.contador input[type=number]{
  font:inherit; font-size:1rem; width:5.5rem;
  border:1.5px solid var(--linea); border-radius:11px; padding:.75rem .9rem;
}
.contador input[type=number]:focus{
  outline:none; border-color:var(--celeste-osc); box-shadow:0 0 0 3px rgba(31,111,178,.2);
}
.contador__btn{
  width:46px; height:46px; border-radius:12px; border:1.5px solid var(--linea);
  background:#fff; cursor:pointer; display:grid; place-items:center;
  transition:border-color .15s, color .15s;
}
.contador__btn:hover:not(:disabled){ border-color:var(--celeste); color:var(--celeste-osc); }
.contador__btn:disabled{ opacity:.4; cursor:not-allowed; }
.contador__n{
  font-family:var(--display); font-weight:800; font-size:1.7rem;
  min-width:1.6ch; text-align:center; font-variant-numeric:tabular-nums;
}
.contador__t{ font-size:.9rem; color:var(--tinta-2); }

.caja form > .btn{ margin-top:1.5rem; }
.form-nota{ font-size:.82rem; color:var(--tinta-3); margin:.9rem 0 0; }

/* El honeypot. Invisible para una persona y bien visible para un
   bot, que completa todo lo que encuentra. No va display:none porque
   algunos bots lo detectan; esto lo saca de la pantalla y del orden
   de tabulación igual. */
.miel{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.aviso{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.95rem 1.1rem; border-radius:var(--radio); margin:0 0 1.4rem;
  font-size:.94rem; line-height:1.5;
}
.aviso .ico{ flex:none; margin-top:.15rem; }
.aviso--mal{ background:#FBEAE8; color:#8E2A22; }
.aviso--ok{  background:#E8F6EF; color:#13613F; }

.otra-via{
  text-align:center; font-size:.92rem; color:var(--tinta-2); margin:1.5rem 0 0;
}
.otra-via a{ color:var(--celeste-osc); font-weight:600; }

/* ============================================================
   Pie
   ============================================================ */
.pie{
  border-top:1px solid var(--linea);
  background:rgba(255,255,255,.92);
  padding-block:2.4rem 1.8rem;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pie{
    background:rgba(255,255,255,.68);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }
  .caja{ background:rgba(255,255,255,.86); }
}
.pie__in{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.5rem;
  justify-content:space-between; align-items:center;
}
.pie__marca{
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  letter-spacing:-.02em; margin:0;
}
.pie__dato{ margin:.25rem 0 0; font-size:.9rem; color:var(--tinta-2); }
.pie__links{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; }
.pie__link{
  color:var(--tinta-2); text-decoration:none; font-size:.92rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.pie__link:hover{ color:var(--celeste-osc); }
.pie__legal{
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between;
  margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--linea-2);
  font-size:.8rem; color:var(--tinta-3);
}
.pie__legal p{ margin:0; max-width:64ch; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px){
  .hero__in--flyer{ grid-template-columns:1fr; }
  /* El flyer arriba del texto: es la imagen, y es lo que hace que
     alguien siga scrolleando. */
  .hero__in--flyer .flyer{ order:-1; max-width:480px; }
}

@media (max-width:620px){
  :root{ --hdr-h:60px; }
  .campos{ grid-template-columns:1fr; }
  .datos{ gap:1.3rem 2rem; }
  .pie__in{ flex-direction:column; align-items:flex-start; }

  /* EL FONDO, MÁS SUAVE EN EL CELULAR. Las manchas están medidas en
     vw, así que en una pantalla de 390 px las tres se superponen
     sobre la pantalla entera y lo que en el monitor es "blanco con
     unos toques celestes" acá era una pantalla celeste. La opacidad
     va en las manchas y no en el contenedor para no volver
     transparente también el blanco de abajo. */
  .fondo__mancha{ opacity:.55; }

  /* EL NOMBRE Y EL BOTÓN TIENEN QUE ENTRAR EN UN RENGLÓN. La barra
     tiene alto fijo: si el nombre se parte en dos, se desborda y el
     botón le queda encima. Son tres ajustes chicos y entran los dos
     desde 360 px —abajo de eso el botón se esconde, más abajo. */
  .hdr__in{ gap:.7rem; }
  .marca__nombre{ font-size:1rem; white-space:nowrap; }
  .marca__bajada{ display:none; }
  .hdr .btn{ font-size:.84rem; padding:.55rem .85rem; }
}

@media (max-width:360px){
  /* Abajo de 360 px el nombre y el botón ya no entran juntos aunque
     el botón sea corto, y partir el nombre en dos renglones rompe la
     barra. Gana el nombre: el botón está dos dedos más abajo, en el
     hero, y es el grande. */
  .hdr .btn{ display:none; }
}

/* ── Preferencias del sistema ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media print{
  .fondo,.hdr .btn,.otra-via{ display:none !important; }
  body{ background:#fff; }
  .caja{ border:1px solid #ccc; box-shadow:none; backdrop-filter:none; }
}