/* eventos.cunix.net — réplica estática de la landing de eventos (antes cunix.net/eventos/, Elementor).
   Valores de tamaño, espaciado y animación tomados del CSS original de la página. */
@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  background: #0b2d63;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 34px;
  background-color: #0b2d63;
  background-image: url("/assets/fondo-web.jpg");
  background-image: image-set(url("/assets/fondo-web.webp") type("image/webp"), url("/assets/fondo-web.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}
/* Como el contenedor flex de Elementor: las filas se estiran para repartirse todo el alto de la pantalla. */
.inner {
  width: 100%;
  max-width: 1140px;
  min-height: calc(100vh - 34px);
  min-height: calc(100dvh - 34px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  text-align: center;
}
.title, .tagline, .subtitle, .event { width: 100%; margin: 0; line-height: 1; }
.title { font-size: 59px; font-weight: 600; }
.tagline { font-size: 21px; font-weight: 400; letter-spacing: 2px; padding-bottom: 101px; }
.subtitle { font-size: 23px; font-weight: 600; }

.logos { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.logo { width: 30%; flex: 0 0 30%; }
/* inline-block: el ancho del enlace es el natural de la imagen (limitado por la columna), y el porcentaje
   de cada logo se aplica sobre ese ancho, igual que en el widget de imagen de Elementor. */
.logo a { display: inline-block; max-width: 100%; }
.logo-eh img { width: 60%; }
.logo-cunix img { width: 92%; }
.logo-klg img { width: 44%; }
.logo img { transition: transform .3s; }
.logo a:hover img, .logo a:focus-visible img { transform: scale(1.1); }
.logo a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.event { margin-top: 147px; margin-bottom: 79px; font-size: 24px; font-weight: 300; }
.event a { text-decoration: none; }
.event a:hover, .event a:focus-visible { text-decoration: underline; }

/* Animaciones de entrada (equivalentes a zoomIn / fadeInLeft / fadeInUp / fadeInRight de Elementor) */
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
.anim-zoom { animation: zoomIn 1.25s both; }
.anim-left { animation: fadeInLeft 1.25s .2s both; }
.anim-up { animation: fadeInUp 1.25s .2s both; }
.anim-right { animation: fadeInRight 1.25s .2s both; }
@media (prefers-reduced-motion: reduce) {
  .anim-zoom, .anim-left, .anim-up, .anim-right { animation: none; }
  .logo img { transition: none; }
}

@media (max-width: 767px) {
  .hero { overflow-x: hidden; }
  .title { font-size: 40px; margin-top: 35px; padding: 0 16px; }
  .tagline { font-size: 15px; padding: 25px 50px 50px; }
  .subtitle { font-size: 20px; padding: 0 16px; }
  .logo { width: 100%; flex-basis: 100%; margin-bottom: 25px; }
  .logo-eh img { width: 60%; }
  .logo-cunix img { width: 70%; }
  .logo-klg img { width: 49%; }
  .event { margin-top: 104px; margin-bottom: 35px; }
}