/* =========================================================
   FESTIVAL DE COMETAS XVII — web de inscripción
   Paleta tomada del afiche: verde institucional, cielo del
   fondo y los cuatro colores de las cometas de la foto.
   ========================================================= */
:root{
  --verde:#025A2F;
  --verde-2:#0B7A42;
  --cielo:#E7F1FB;
  --cielo-2:#C6E0F7;
  --papel:#FFFFFF;
  --tinta:#123326;
  --tinta-2:#4B6157;
  --coral:#F2685C;
  --sol:#F5B92E;
  --agua:#2FB6C8;
  --lila:#7A5CD1;
  --linea:#DDE7E1;
  --sombra:0 10px 30px rgba(18,51,38,.10);
  --radio:20px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--tinta);
  background:var(--cielo);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:url('fondo.png') center top/cover no-repeat;
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(231,241,251,.72) 0%,rgba(231,241,251,.86) 42%,rgba(255,255,255,.94) 100%);
}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:14px;
  background:linear-gradient(180deg,var(--cielo) 0%,#fff 100%)}
.loader-kite{width:130px;height:auto;animation:volar 3.2s ease-in-out infinite}
.loader .hilo{stroke:var(--tinta-2);stroke-width:2;stroke-dasharray:5 6;animation:hilo 1.4s linear infinite}
.loader .monos rect{animation:volar 3.2s ease-in-out infinite}
.loader-txt{font-family:'Fredoka',sans-serif;font-size:1.05rem;color:var(--verde);letter-spacing:.02em;margin:0}
@keyframes volar{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(5deg)}}
@keyframes hilo{to{stroke-dashoffset:-22}}

/* ---------- estructura ---------- */
#app{max-width:560px;margin:0 auto;padding:26px 18px calc(30px + env(safe-area-inset-bottom))}

.cabecera{text-align:center;margin-bottom:22px}
.eyebrow{font-size:.72rem;letter-spacing:.20em;text-transform:uppercase;color:var(--verde-2);margin:0 0 8px;font-weight:600}
.cabecera h1{
  font-family:'Fredoka',sans-serif;font-weight:600;line-height:1.02;
  font-size:clamp(1.75rem,7.4vw,2.5rem);color:var(--verde);margin:0;text-wrap:balance;
}
.lema{font-family:'Fredoka',sans-serif;font-size:.92rem;letter-spacing:.06em;color:var(--tinta);margin:10px 0 0}
.homenaje{font-size:.85rem;color:var(--tinta-2);font-style:italic;margin:6px 0 0}

/* ---------- tarjetas ---------- */
.tarjeta{
  background:var(--papel);border-radius:var(--radio);padding:22px 20px;
  box-shadow:var(--sombra);border:1px solid var(--linea);margin-bottom:16px;
  animation:entra .45s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tarjeta h2{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.28rem;margin:6px 0 16px;color:var(--tinta)}
.tarjeta h3{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.1rem;margin:0 0 4px}
.paso{display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--verde-2);font-weight:600}

/* ---------- campos ---------- */
.campo{display:block;margin:0 0 16px;border:0;padding:0}
.etq{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);margin-bottom:6px}
.campo input{
  width:100%;font:inherit;font-size:1.05rem;padding:13px 14px;color:var(--tinta);
  background:#F7FAF8;border:1.5px solid var(--linea);border-radius:14px;transition:border-color .18s,box-shadow .18s,background .18s;
}
.campo input:focus{outline:none;border-color:var(--verde-2);background:#fff;box-shadow:0 0 0 4px rgba(11,122,66,.14)}
.campo input::placeholder{color:#A9B8B0}
.ayuda{display:block;margin-top:7px;font-size:.82rem;color:var(--tinta-2);line-height:1.35}
.doc-fijo{font-size:.9rem;color:var(--tinta-2);margin:0 0 16px}
.enlace{background:none;border:0;padding:0;font:inherit;color:var(--verde-2);text-decoration:underline;cursor:pointer}

/* los dos acuerdos: hay que atar los dos nudos antes de soltar la cometa */
.acuerdos{background:#F4F9F6;border:1.5px solid var(--linea);border-radius:16px;padding:14px 14px 6px;margin:0 0 18px}
.acuerdos-titulo{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-2);font-weight:600;margin:0 0 10px}
.acuerdo{display:flex;gap:11px;align-items:flex-start;cursor:pointer;margin-bottom:12px;line-height:1.35;font-size:.9rem}
.acuerdo input{position:absolute;opacity:0;width:0;height:0}
.acuerdo .tick{flex:0 0 22px;width:22px;height:22px;border:1.5px solid #C3D4CA;border-radius:7px;background:#fff;
  position:relative;transition:background .18s,border-color .18s,transform .12s;margin-top:1px}
.acuerdo .tick::after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;
  border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .15s,transform .15s}
.acuerdo input:checked + .tick{background:var(--verde);border-color:var(--verde)}
.acuerdo input:checked + .tick::after{opacity:1;transform:rotate(45deg) scale(1)}
.acuerdo input:focus-visible + .tick{outline:3px solid var(--agua);outline-offset:2px}
.acuerdo b{font-weight:600}
.acuerdo.falta .tick{border-color:var(--coral);background:#FDEDEB;animation:tiron .35s ease}
@keyframes tiron{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* categorías como moños de la cola de la cometa */
.categorias{display:grid;gap:9px;margin-top:10px}
.cat{
  display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:12px 14px;border:1.5px solid var(--linea);border-radius:14px;background:#F7FAF8;
  transition:border-color .18s,background .18s,transform .12s;
}
.cat:active{transform:scale(.99)}
.cat input{position:absolute;opacity:0;pointer-events:none}
.cat .moño{width:20px;height:20px;flex:0 0 20px;border-radius:5px;transform:rotate(45deg);transition:transform .2s}
.cat span{font-size:.98rem;line-height:1.25}
.cat.sel{border-color:var(--verde-2);background:#EEF7F1}
.cat.sel .moño{transform:rotate(45deg) scale(1.18)}
.cat:nth-child(1) .moño{background:var(--coral)}
.cat:nth-child(2) .moño{background:var(--sol)}
.cat:nth-child(3) .moño{background:var(--agua)}
.cat:nth-child(4) .moño{background:var(--verde-2)}
.cat:nth-child(5) .moño{background:var(--lila)}

/* ---------- botones ---------- */
.btn{
  display:block;width:100%;text-align:center;font-family:'Fredoka',sans-serif;font-size:1.05rem;
  padding:14px 18px;border:0;border-radius:16px;cursor:pointer;text-decoration:none;
  transition:transform .12s,box-shadow .2s,opacity .2s;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn:focus-visible{outline:3px solid var(--agua);outline-offset:3px}
.btn-primario{background:var(--verde);color:#fff;box-shadow:0 8px 18px rgba(2,90,47,.28)}
.btn-primario:hover{background:var(--verde-2)}
.btn-suave{background:#EEF7F1;color:var(--verde);margin-top:10px}
.btn-texto{background:none;color:var(--tinta-2);text-decoration:underline;font-size:.95rem;margin-top:4px}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.cargando{position:relative;color:transparent}
.btn.cargando::after{
  content:'';position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:gira .7s linear infinite;
}
.btn-suave.cargando::after{border-color:rgba(2,90,47,.3);border-top-color:var(--verde)}
@keyframes gira{to{transform:rotate(360deg)}}

.error{background:#FDEDEB;color:#A6291C;border-radius:12px;padding:11px 13px;font-size:.9rem;margin:0 0 14px}

/* ---------- aviso de cierre ---------- */
.tarjeta-aviso{text-align:center}
.aviso-kite{width:96px;animation:volar 3.4s ease-in-out infinite;margin-bottom:6px}
.tarjeta-aviso p{color:var(--tinta-2);line-height:1.5;margin:0 0 16px}

/* ---------- confirmación ---------- */
.tarjeta-ok{border-left:6px solid var(--verde)}
.ok-eyebrow{font-family:'Fredoka',sans-serif;color:var(--verde-2);margin:0 0 4px;font-size:1rem}
.tarjeta-ok h2{margin:0 0 10px}
.ok-linea{margin:2px 0;font-size:.95rem;color:var(--tinta-2)}
.chip{display:inline-block;background:#EEF7F1;color:var(--verde);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600;letter-spacing:.05em}
.chip.activo{background:#FFF3D6;color:#8A5A00}

/* ---------- conteo: la cometa y sus moños ---------- */
.cuenta{text-align:center;margin:6px 0 20px}
.cuenta-kite{width:170px;height:auto;overflow:visible}
.cuenta-kite .vuela{transform-origin:100px 58px;animation:volar 4s ease-in-out infinite}
.hilo-cuenta{stroke:var(--tinta-2);stroke-width:2;stroke-dasharray:4 6}
.cuenta-titulo{font-family:'Fredoka',sans-serif;color:var(--verde);margin:0 0 12px;font-size:1.05rem}
.monos-cuenta{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mono{
  background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:12px 4px;box-shadow:var(--sombra);
  position:relative;
}
.mono::before{content:'';position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:4px;transform:rotate(45deg)}
.mono:nth-child(1)::before{background:var(--coral)}
.mono:nth-child(2)::before{background:var(--sol)}
.mono:nth-child(3)::before{background:var(--agua)}
.mono:nth-child(4)::before{background:var(--lila)}
.mono b{display:block;font-family:'Fredoka',sans-serif;font-size:1.7rem;line-height:1;color:var(--verde);font-variant-numeric:tabular-nums}
.mono span{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-2);margin-top:5px}
.cuenta-fecha{font-size:.85rem;color:var(--tinta-2);margin:12px 0 0}

/* ---------- mapa ---------- */
.lugar{font-size:.95rem;color:var(--tinta-2);margin:0 0 14px}
.mapa-marco{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--linea);height:210px;margin-bottom:14px;background:#EDF3F0}
.mapa-marco iframe{width:100%;height:100%;border:0;display:block}
.pin{
  position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 0 6px rgba(242,104,92,.28);pointer-events:none;animation:latir 1.8s ease-out infinite;
}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(242,104,92,.5)}70%{box-shadow:0 0 0 18px rgba(242,104,92,0)}100%{box-shadow:0 0 0 0 rgba(242,104,92,0)}}

/* ---------- pie ---------- */
.pie{display:flex;align-items:center;gap:10px;justify-content:center;text-align:left;
  font-size:.76rem;color:var(--tinta-2);margin-top:22px;line-height:1.35}
.pie img{border-radius:8px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:14px;font-size:.92rem;
  z-index:70;opacity:0;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center;
}
.toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:600px){
  #app{padding-top:40px}
  .monos-cuenta{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}