/* Eventos · Perpetuo — base compartida (colores y tipografía del brandbook) */
:root{
  --azul:#074990; --rojo:#e2543b; --lima:#C3D73A; --tinta:#0D1114; --papel:#FAF6F1;
  --papel-2:#F0E9DE; --papel-3:#E6DDCF; --gris:rgba(13,17,20,.62); --linea:rgba(13,17,20,.14);
  --fondo:var(--azul);
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mano:"Nanum Pen Script","Bradley Hand",cursive;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --fondo:#04305f; } }
:root[data-theme="dark"]{ --fondo:#04305f; }
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--fondo); color:var(--tinta);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh;
}
.grano::before{ /* grano de papel sobre el azul */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.22; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
button,input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--lima); outline-offset:3px; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
a{ color:inherit; }
[hidden]{ display:none!important; }

.logo{ display:block; width:150px; aspect-ratio:900/153; background:currentColor;
  -webkit-mask:url("logo.webp") left center/contain no-repeat; mask:url("logo.webp") left center/contain no-repeat; }

/* colores de evento */
.c-azul{ --c:var(--azul); --ct:var(--papel); }
.c-rojo{ --c:var(--rojo); --ct:var(--papel); }
.c-lima{ --c:var(--lima); --ct:var(--tinta); }
.c-tinta{ --c:var(--tinta); --ct:var(--papel); }

/* botones */
.btn{
  appearance:none; border:0; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:800; font-size:17px; letter-spacing:-.01em; padding:15px 28px; background:var(--tinta); color:var(--papel);
  transition:transform .18s var(--ease-out), background-color .2s, color .2s, opacity .2s; text-decoration:none; white-space:nowrap;
}
.btn:hover:not(:disabled){ transform:translateY(-2px); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:progress; }
.btn--lima{ background:var(--lima); color:var(--tinta); }
.btn--red{ background:var(--rojo); color:var(--papel); }
.btn--ghost{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.btn--sm{ font-size:14px; padding:9px 16px; gap:7px; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn--sm svg{ width:15px; height:15px; }
.btn .gira{ width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:gira .7s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }

/* campos */
.field{ display:block; margin-bottom:18px; min-width:0; }
.field > .lbl{ display:block; font-size:14px; font-weight:700; margin-bottom:6px; }
.field > .lbl small{ font-weight:500; opacity:.6; margin-left:4px; }
.input{
  display:block; width:100%; padding:13px 14px; border:1.5px solid var(--linea); border-radius:3px; background:#fff;
  font-size:16px; color:var(--tinta); transition:border-color .15s, box-shadow .15s;
}
textarea.input{ resize:vertical; min-height:120px; line-height:1.5; }
.input::placeholder{ color:rgba(13,17,20,.38); }
.input:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(7,73,144,.15); }
.field.bad .input{ border-color:var(--rojo); }
.msg{ display:none; margin-top:6px; font-size:13.5px; font-weight:700; color:var(--rojo); }
.field.bad .msg{ display:block; }

/* muñecos: cuerpo + brazos y piernas sueltos que giran sobre su articulación */
.bicho{ display:block; position:relative; width:100%; --t:.7s; }
.bicho img{ position:absolute; inset:0; width:100%; height:100%; }
.bicho .c{ animation:bob calc(var(--t) / 2) var(--d,0s) ease-in-out infinite alternate; }
.bicho .p{ transform-origin:var(--ox) var(--oy); animation:paso var(--t) var(--d,0s) ease-in-out infinite alternate; }
.bicho .p.b{ animation-direction:alternate-reverse; }
@keyframes paso{ from{ transform:rotate(calc(var(--a) * -1)); } to{ transform:rotate(var(--a)); } }
@keyframes bob{ from{ transform:translateY(0); } to{ transform:translateY(-2.5%); } }
@keyframes flota{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-10px) rotate(-4deg); } }

/* aviso flotante */
.toast{ position:fixed; left:50%; bottom:24px; z-index:90; transform:translate(-50%,calc(100% + 40px)); max-width:calc(100% - 32px); visibility:hidden;
  background:var(--tinta); color:var(--papel); padding:13px 20px; border-radius:999px; font-weight:700; font-size:15px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5); transition:transform .45s var(--ease-spring), visibility 0s .45s; }
.toast.on{ transform:translate(-50%,0); visibility:visible; transition:transform .45s var(--ease-spring); }
.toast.mal{ background:var(--rojo); }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ transition:none!important; animation:none!important; } }