/*
  Home.

  Las medidas salen de los mockups, que están tomados a 1512px de ancho. De
  1600 en adelante el contenido se queda en 1440 y se centra.
*/

/* ------------------------------------------------------------------ */
/* Los resplandores celestes                                           */
/* ------------------------------------------------------------------ */

/*
  Son manchas de luz azul, muy difusas, detrás del contenido. No decoran
  porque sí: levantan el fondo y le dan al cristal de las tarjetas algo que
  refractar. Sin ellas, las tarjetas flotarían sobre un azul plano y el
  efecto no se notaría.

  Cada resplandor cuelga de su sección, no de la página entera: así acompaña
  al contenido en vez de caer en un punto arbitrario cuando la página crece o
  se acorta. El color está medido de los mockups.
*/

.home {
  position: relative;
  isolation: isolate; /* el resplandor no se escapa por encima del navbar */
}

.tarjetas,
.encuentros {
  position: relative;
}

/*
  El hero no lleva resplandor: en el diseño original su fondo es plano, y el
  globo se recorta contra él. Es también lo que evita que la imagen del globo,
  que trae pegado su propio rectángulo azul, tape la luz.
*/

.tarjetas::before,
.encuentros::before {
  content: '';
  position: absolute;

  /*
    Dos cosas importantes de esta caja:

    · `calc(50% - 50vw)` a los lados la estira hasta el ancho completo de la
      pantalla aunque su sección esté dentro del contenedor. Sin esto, el
      resplandor se corta justo donde termina el contenedor y se ve una línea
      recta vertical en mitad del fondo.
    · Los -16rem arriba y abajo le dan aire para que el degradado llegue a
      transparente antes del borde de la caja. Si no, el corte se nota como
      una línea horizontal.

    El desbordamiento lateral no genera scroll porque .site usa
    `overflow-x: clip`.
  */
  inset: -16rem calc(50% - 50vw);
  z-index: -1;
  pointer-events: none;
}

/*
  Tarjetas: uno a la derecha acompañando a Sobre RIAL y otro a la izquierda,
  más abajo, junto a Miembros Fundadores. Siguen el vaivén de las tarjetas.
*/
.tarjetas::before {
  background-image:
    radial-gradient(34rem 24rem at 94% 30%, rgba(60, 140, 210, 0.42), transparent 72%),
    radial-gradient(32rem 24rem at 2% 72%, rgba(60, 140, 210, 0.38), transparent 72%);
}

/*
  Encuentros: dos resplandores. El primero a la izquierda, a la altura de la
  rejilla. El segundo abajo a la derecha, pegado al final de la sección.

  Ese segundo se corta en seco contra el pie, que es opaco, y ese corte es
  parte del diseño: avisa de que se llegó al final de la página. Por eso esta
  capa no desborda por abajo (el `0` del inset): su borde inferior tiene que
  coincidir con el arranque del pie.
*/
.encuentros::before {
  inset: -16rem calc(50% - 50vw) 0;
  background-image:
    radial-gradient(32rem 22rem at 2% 46%, rgba(60, 140, 210, 0.46), transparent 72%),
    radial-gradient(38rem 24rem at 84% 100%, rgba(60, 140, 210, 0.60), transparent 72%);
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero__grid {
  display: grid;
  /*
    minmax(0, …) y no 1fr a secas: sin el mínimo en cero, un texto largo sin
    posibilidad de cortarse ensancha su columna y descuadra las dos.
  */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2rem;
  align-items: center;
  min-height: calc(100vh - var(--navbar-h));
  padding-block: 3rem 5rem;
}

.hero__titulo {
  /*
    El 4.89vw está calculado para que el título llegue a su tamaño máximo
    justo a 1440px. Más allá deja de crecer.
  */
  font-size: clamp(2.2rem, 4.89vw, 4.4rem);
  line-height: 1.3;
  color: var(--text-1);
  margin-bottom: 1.75rem;
}

.hero__bajada {
  max-width: 25rem;
  margin-bottom: 2.25rem;
  color: var(--text-2);
}

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero__globo {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero__globo-img {
  width: 100%;
  max-width: 40rem;
  height: auto;
  transition: opacity 0.8s ease;
}

/*
  El globo 3D (assets/js/globo/globo.js) va encima de la imagen, centrado en
  ella y un 30 % más grande: así la esfera mide lo mismo que en la imagen y la
  constelación tiene lugar para asomarse sin cortarse en un borde recto. Lo
  que se sale de la pantalla lo recorta el `overflow-x: clip` de .site.

  Aparece cuando su primer cuadro está listo, y la imagen se desvanece.
*/
.hero__globo-3d {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(130%, 52rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero__globo-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__globo--3d .hero__globo-3d {
  opacity: 1;
}

.hero__globo--3d .hero__globo-img {
  opacity: 0;
}

/* El texto, por encima de la constelación cuando se asoma a su columna. */
.hero__texto {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ */
/* Botones                                                             */
/* ------------------------------------------------------------------ */

/* El botón relleno vive en layout.css: lo usan también otras páginas. */

/*
  Variante ancha.

  Los dos botones del final de Encuentros van apilados, y con el mismo padding
  el de abajo queda estrecho y el par se ve desequilibrado. En el diseño
  original el segundo es casi el doble de ancho: eso es lo que sostiene el
  apilado. La altura no cambia, solo respira más a los lados.
*/
.button--ancho {
  padding-inline: 2.75rem;
}

/* ------------------------------------------------------------------ */
/* Tarjetas de cristal                                                 */
/* ------------------------------------------------------------------ */

/*
  Las dos tarjetas viven dentro del contenedor del sitio. Si se las deja
  sueltas a ancho completo, la segunda (que se alinea a la derecha) se va
  contra el borde de la pantalla y se le corta el texto.
*/
.tarjetas {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  width: var(--container-width);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: 4rem 7rem;
}

/*
  El cristal de las tarjetas: blanco al 10 % y desenfoque. Nada más.

  El valor está medido del mockup: dentro de la tarjeta el color es #31334E
  sobre un fondo de #171C38, que es exactamente blanco al 10 %.

  Se probó a enriquecerlo con saturación, borde y brillo en el canto; no
  imitaba el diseño y se veía recargado. Este es el efecto que va.
*/
.tarjeta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;

  /*
    Cada tarjeta ocupa unos dos tercios del contenedor y se pega a un lado:
    la primera a la izquierda, la segunda a la derecha. Ese vaivén se hace
    con márgenes, no con `transform`, que la sacaría del contenedor.
  */
  width: min(100%, 864px);
  margin-right: auto;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);

  border-radius: 20px;

  background-color: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

  /* El halo claro que rodea la tarjeta en el diseño original. */
  box-shadow: var(--brillo-tarjeta);
}

/* Sin desenfoque disponible, el velo se hace opaco para no perder contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tarjeta {
    background-color: rgba(49, 51, 78, 0.96);
  }
}

/*
  La segunda tarjeta es la primera en espejo. El orden del marcado no cambia
  (imagen, texto): solo se intercambian las columnas y se alinea el texto al
  otro lado.
*/
.tarjeta--espejo {
  margin-right: 0;
  margin-left: auto;

  /*
    La segunda tarjeta no es de cristal: en el mockup su interior es
    exactamente el azul del fondo, es decir, tapa el resplandor en lugar de
    dejarlo pasar. Es un panel opaco, y así se ve el contraste entre las dos.
  */
  background-color: var(--bg-dark);
}

.tarjeta__imagen {
  order: 2; /* en escritorio, la imagen va a la derecha */
}

.tarjeta--espejo .tarjeta__imagen {
  order: 1;
}

.tarjeta__texto {
  order: 1;
}

.tarjeta--espejo .tarjeta__texto {
  order: 2;
  text-align: right;
}

.tarjeta__img {
  width: 100%;
  height: auto;
}

.tarjeta__titulo {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--text-1);
  margin-bottom: 1.25rem;
}

.tarjeta__parrafo {
  color: var(--text-2);
  margin-bottom: 1.75rem;
}

/* ------------------------------------------------------------------ */
/* Encuentros                                                          */
/* ------------------------------------------------------------------ */

.encuentros__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 2rem 7rem;
}

.encuentros__cabecera {
  text-align: center; /* centrado en todos los tamaños */
  margin-bottom: 3.5rem;
}

.encuentros__titulo {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--text-1);
  margin-bottom: 1.25rem;
}

.encuentros__bajada {
  max-width: 36rem;
  margin-inline: auto;
  color: var(--text-2);
}

/*
  `align-items: center` en el contenedor encoge a sus hijos al ancho de su
  contenido. La rejilla tiene que pedir el ancho completo de forma explícita.
*/
.encuentros__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.encuentros__botones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
}

/* ---------- Tarjeta de evento ---------- */

/* Mismo cristal y mismo halo que las tarjetas grandes. El radio está medido
   del mockup. */
.evento {
  border-radius: 24px;

  background-color: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--brillo-tarjeta);

  transition: background-color 0.25s ease;
}

.evento:hover,
.evento:focus-within {
  background-color: rgba(255, 255, 255, 0.16);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .evento {
    background-color: rgba(49, 51, 78, 0.96);
  }
}

.evento__enlace {
  display: block;
  padding: 1rem 1rem 1.5rem;
  color: inherit;
  text-decoration: none;
}

.evento__imagen {
  margin-bottom: 1.25rem;
  border-radius: 10px;
  overflow: hidden;
}

.evento__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;      /* cuadrada, pase lo que pase con el original */
  object-fit: cover;
}

.evento__nombre {
  /*
    Una sola línea con puntos suspensivos: los nombres de los eventos varían
    mucho de largo y, sin esto, unas tarjetas quedan más altas que otras.
  */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 1.0625rem;
  text-align: center;
  color: var(--text-1);
  margin-bottom: 0.75rem;
}

.evento__fecha {
  text-align: center;
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* El año, en su propia línea debajo del día. */
.evento__dia,
.evento__anio {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Tablet: 991px o menos                                               */
/* ------------------------------------------------------------------ */

@media (max-width: 991px) {

  /*
    Texto y globo comparten celda: el globo pasa a ser un fondo atenuado y el
    texto va encima. El texto NO se angosta por eso.
  */
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-block: 2rem 4rem;
  }

  .hero__texto,
  .hero__globo {
    grid-area: 1 / 1;
  }

  .hero__texto {
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 3rem;
  }

  .hero__bajada {
    max-width: 32rem;
  }

  .hero__globo {
    z-index: 0;
    opacity: 0.35;
    align-items: center;
  }

  .hero__botones {
    justify-content: center;
  }

  /* Las tarjetas ocupan el ancho y dejan de estar desplazadas. */
  .tarjeta,
  .tarjeta--espejo {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-inline: 0;
    transform: none;
  }

  .tarjetas {
    gap: 3rem;
  }

  /* La imagen va arriba en las dos tarjetas. */
  .tarjeta__imagen,
  .tarjeta--espejo .tarjeta__imagen {
    order: 1;
  }

  .tarjeta__texto,
  .tarjeta--espejo .tarjeta__texto {
    order: 2;
    text-align: left; /* el centrado llega solo a 479px */
  }

  .encuentros__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ */
/* Móvil horizontal                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
  .tarjetas {
    padding-block: 2rem 4rem;
  }

  .encuentros__inner {
    padding-bottom: 4rem;
  }
}

/* ------------------------------------------------------------------ */
/* Móvil vertical: 479px o menos                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 479px) {

  /*
    Apilados y centrados, cada uno del ancho de su texto. Estirarlos al ancho
    de la pantalla los convierte en dos barras y deja de leerse cuál es el
    principal.
  */
  .hero__botones {
    flex-direction: column;
    align-items: center;
  }

  .encuentros__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}