/* PROTOTIPO nivel Awwwards (solo Inicio): estilos de aw.js y datos.js. */
:root { --aw-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* El scroll suave lo maneja aw.js: el navegador no debe sumar su propio suavizado */
html.aw-smooth { scroll-behavior: auto; overflow-anchor: none; }

/* Portada: el título se arma letra por letra y lo demás entra después */
.hero h1 .pal { display: inline-block; white-space: nowrap; }
.aw-intro .hero h1 .ch {
  display: inline-block; animation: ch-in 1s var(--aw-ease) both;
  animation-delay: calc(var(--i) * 32ms + 150ms); transform-origin: 50% 100%;
}
.aw-intro .hero-side, .aw-intro .hero-window { animation: aw-up 1.1s var(--aw-ease) both; animation-delay: .75s; }
.aw-intro .hero-window { animation-delay: .95s; }
@keyframes ch-in { from { opacity: 0; transform: translateY(.55em) rotate(10deg); filter: blur(8px); } }
@keyframes aw-up { from { opacity: 0; transform: translateY(36px); } }

/* Puntos de datos: más presentes que el fondo anterior, siempre detrás del contenido */
.fondo.datos { z-index: -1; }

/* Cursor propio */
.aw-cursor body, .aw-cursor a, .aw-cursor button, .aw-cursor [role="button"], .aw-cursor .program, .aw-cursor .letter-paper { cursor: none; }
.aw-cursor input, .aw-cursor textarea, .aw-cursor select, .aw-cursor dialog, .aw-cursor dialog * { cursor: auto; }
.cur-punto, .cur-aro { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity .25s; }
.cur-on .cur-punto, .cur-on .cur-aro { opacity: 1; }
.cur-texto .cur-punto, .cur-texto .cur-aro, html:has(dialog[open]) .cur-punto, html:has(dialog[open]) .cur-aro { opacity: 0; }
.cur-punto { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--brand); }
.cur-aro { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.cur-aro::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--brand) 70%, transparent);
  transition: transform .35s var(--aw-ease), background-color .3s, border-color .3s;
}
.cur-link .cur-aro::before { transform: scale(1.7); background: color-mix(in srgb, var(--brand) 14%, transparent); border-color: transparent; }
.cur-link .cur-punto { transform-origin: center; }
.cur-down .cur-aro::before { transform: scale(.8); }
.cur-link.cur-down .cur-aro::before { transform: scale(1.4); }

/* Botones magnéticos: se acercan al mouse y vuelven con un rebote suave */
.magnet { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .45s var(--aw-ease), background .2s, border-color .2s; }
.magnet:hover { transition: transform .12s linear, background .2s, border-color .2s; }

/* Profundidad: las tarjetas se inclinan hacia el mouse con un brillo que lo sigue */
.tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--aw-ease); }
.tilt:hover { transition: transform .15s linear; }
.program.tilt, .jornadas-card.tilt { position: relative; }
.program.tilt::after, .jornadas-card.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%);
}
.program.tilt:hover::after, .jornadas-card.tilt:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aw-intro .hero h1 .ch, .aw-intro .hero-side, .aw-intro .hero-window { animation: none; }
  .magnet, .tilt { transform: none; }
}
.btn.magnet, .btn.magnet:hover { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); }
/* El camino al certificado deja ver el pronóstico del fondo */
.path { background: color-mix(in srgb, var(--sky) 55%, transparent); }