/*
  Hoja propia del clon. Solo contiene lo que la hoja de Webflow no puede dar:
  contenedores para las secciones nuevas (calendario de conciertos, listados de
  colecciones) y avisos de contenido pendiente.

  No redefine nada de Webflow: la tipografia, los colores y los botones siguen
  saliendo de sus clases. La razon de existir de este fichero es que varias clases
  del original —.section-calendar, por ejemplo— estan puestas a display:none en la
  hoja heredada: eran secciones que el sitio dejo de usar y que, al reutilizarlas,
  se llevaban por delante el contenido nuevo.
*/

/*
  La hoja del original da estilo de marca a h1 y a h3, pero deja h2 y h4 en el Arial
  negrita de la hoja base (ver design.md, 1.1). Como el sitio usa h1 para todo, el
  clon corrige la jerarquia —un h1 por pagina— y aqui se le devuelve a h2 el aspecto
  que tenia el h1, y a h4 el de h3. Asi el marcado es correcto y el diseño no cambia.
*/
h2 {
  color: var(--white);
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Nimbussanst Condensed, sans-serif;
  font-size: 3em;
  font-weight: 700;
  line-height: 1em;
}

h4 {
  text-transform: uppercase;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: 'Nimbus sans DOT condensed 32739', Impact, sans-serif;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 30px;
}

/*
  Ficha de artista. La seccion arrancaba pegada al borde superior, debajo de la barra
  fija: el nombre quedaba tapado y la foto empezaba mas abajo que el. Con este aire
  las dos columnas arrancan a la misma altura.
*/
.section-artist {
  padding-top: 250px;
}

@media screen and (max-width: 991px) {
  .section-artist {
    padding-top: 180px;
  }
}

@media screen and (max-width: 767px) {
  .section-artist {
    padding-top: 140px;
  }
}

/*
  Logo de la barra. El original solo tiene la version blanca, que sobre las secciones
  de fondo claro desaparecia. Aqui el PNG se usa como mascara y el color lo pone el
  fondo del enlace, asi que la misma imagen sirve en blanco y en azul.
  Quien decide cual toca es assets/js/clon-logo.js, mirando lo que hay debajo.
*/
.brand-new {
  background-color: var(--white, #fff);
  -webkit-mask: url('/assets/imagenes/5f2dc67ea3f1eb293f5c8214-logo-iniciales-white.png') no-repeat center / contain;
  mask: url('/assets/imagenes/5f2dc67ea3f1eb293f5c8214-logo-iniciales-white.png') no-repeat center / contain;
  transition: background-color 0.3s ease;
}

/* La imagen sigue en el marcado —da tamaño al enlace y texto alternativo— pero lo
   que se ve es la mascara. */
.brand-new .logo-mipfa {
  visibility: hidden;
}

.navbar-total.clon-sobre-claro .brand-new {
  background-color: var(--mipfa24-blue1, #427693);
}

.clon-seccion {
  padding: 5vw 5vw 6vw;
}

/* Azul oscuro de la paleta del sitio (--mipfa24-blue4), no uno inventado. */
.clon-seccion.oscura {
  background-color: #294d62;
  color: #fff;
}

/* Los nombres largos —"Brandon Goldberg & Luis Urbina"— se salian de la tarjeta. */
.clon-ficha h3 {
  font-size: 1.5em;
  line-height: 1em;
  overflow-wrap: anywhere;
}

.clon-titulo {
  margin: 0 0 2.5vw;
}

.clon-subtitulo {
  margin: 0 0 2vw;
  max-width: 60ch;
  font-size: 1rem;
}

/* Los enlaces heredan tipografia de titular; dentro de un parrafo tienen que medir
   lo que el parrafo. */
.clon-subtitulo a,
.clon-pendiente a {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

/* Los titulares heredados traen el color escrito (negro sobre blanco). Dentro de
   una seccion oscura hay que devolverles el contraste, o desaparecen. */
.clon-seccion.oscura .clon-titulo,
.clon-seccion.oscura .mini-headline,
.clon-seccion.oscura .clon-subtitulo,
.clon-seccion.oscura .clon-ficha h2,
.clon-seccion.oscura .clon-ficha h3,
.clon-seccion.oscura .clon-ficha h4,
.clon-seccion.oscura .clon-ficha p,
.clon-seccion.oscura .clon-pendiente {
  color: #fff;
}

/* Calendario: dos columnas en escritorio, una en movil. */
.clon-calendario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5vw;
}

.clon-ficha {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 1.5rem;
}

.clon-seccion:not(.oscura) .clon-ficha {
  border-color: rgba(10, 30, 60, 0.2);
}

/* Las fotos heredan medidas fijas de las plantillas de Webflow (.artist-pic mide lo
   que medía en su rejilla original): dentro de una tarjeta del clon hay que
   recortarlas o se salen y empujan la pagina a lo ancho. */
.clon-ficha {
  overflow: hidden;
}

/* La hoja subraya todos los enlaces; dentro de una tarjeta el subrayado se comia
   los nombres. Se quita en la tarjeta y se deja en el enlace de accion. */
a.clon-ficha,
.clon-ficha h2,
.clon-ficha h3,
.clon-ficha h4 {
  text-decoration: none;
}

.clon-ficha img {
  display: block;
  position: static; /* .artist-pic va en absolute dentro de su rejilla original */
  width: 100%;
  height: 240px;
  max-width: none;
  min-height: 0;
  object-fit: cover;
  object-position: top center;
}

/* Hueco de foto que falta: rayado, sin rotulo. */
.clon-sinfoto {
  height: 100%;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0 12px, transparent 12px 24px);
}

/* Ficha de artista: retrato arriba, siempre del mismo alto, y debajo nombre y pais
   con su propio aire. Sin esto cada tarjeta medía lo que midiera su foto. */
.clon-ficha-artista {
  gap: 0;
  padding: 0;
}

.clon-ficha-artista .clon-foto {
  aspect-ratio: 3 / 4;
  width: 100%;
  overflow: hidden;
}

.clon-ficha-artista .clon-foto img {
  height: 100%;
}

/*
  Animacion de las fichas de artista y de faculty. El original animaba estas tarjetas
  con interacciones de Webflow (barras de color que crecian y el texto apareciendo);
  aqui se hace con CSS, que no depende del motor de animaciones ni de que la pagina
  este registrada en el.

  Dos gestos:
   · al entrar en pantalla, la tarjeta sube y aparece, con un retraso escalonado que
     recorre la rejilla;
   · al pasar el raton, la foto se acerca despacio, el velo se aclara y asoma una
     linea dorada bajo los datos.
*/
.clon-ficha-artista {
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.clon-ficha-artista .clon-foto img,
.clon-ficha-artista .clon-sinfoto {
  transition:
    transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
    filter 0.45s ease;
}

.clon-ficha-artista:hover {
  transform: translateY(-6px);
  border-color: var(--mipfa24-tile2, #c79c51);
  background-color: rgba(255, 255, 255, 0.04);
}

.clon-ficha-artista:hover .clon-foto img {
  transform: scale(1.07);
  filter: saturate(1.08);
}

.clon-ficha-artista:hover .clon-sinfoto {
  transform: scale(1.07);
}

/* La linea dorada crece de izquierda a derecha bajo el nombre. */
.clon-ficha-datos {
  padding: 1.1rem 1.2rem 1.3rem;
  position: relative;
}

.clon-ficha-datos::after {
  content: '';
  position: absolute;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 0.7rem;
  height: 2px;
  background-color: var(--mipfa24-tile2, #c79c51);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.clon-ficha-artista:hover .clon-ficha-datos::after {
  transform: scaleX(1);
}

/* Entrada al aparecer en pantalla. Se apoya en las animaciones ligadas al scroll;
   donde el navegador no las tenga, la tarjeta simplemente ya esta visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .clon-rejilla .clon-ficha-artista {
      animation: clon-asomar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* La entrada mueve `translate` y no `transform`, que es lo que usa el hover: si las
   dos animaran la misma propiedad, la de scroll —que se queda fija al terminar— se
   comeria el desplazamiento del raton. */
@keyframes clon-asomar {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.clon-ficha-datos h3 {
  margin: 0 0 0.45rem;
}

.clon-ficha-datos p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.clon-ficha-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Rejilla de tarjetas: artistas, alumni, galerias. */
.clon-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5vw;
}

/* En movil, una tarjeta por fila con foto vertical convertia el directorio en una
   tira interminable: dos columnas lo dejan en algo recorrible. */
@media screen and (max-width: 767px) {
  .clon-rejilla {
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
  }

  .clon-ficha-datos {
    padding: 0.8rem 0.8rem 1rem;
  }
}


/*
  Dos bloques que el original tenia escritos en el HTML pero apagados con
  display:none en la hoja. Los detecta tools/revisar-ocultos.mjs y aqui se
  encienden, porque en el clon si hacen falta:
    · .link-apply-23 es la llamada "how to apply / apply now" del detalle del
      programa de invierno: la pagina vende un programa y el boton no se veia.
    · .explanation es el parrafo de historia de la pagina de apoyo.
*/
.link-apply-23 {
  display: flex;
}

.explanation {
  display: flex;
}

/*
  Galerias. En el original los albumes de todos los encuentros iban seguidos, con el
  titulo de cada encuentro en dorado sobre el azul —ilegible— y sin nada que separase
  un encuentro del siguiente. Aqui cada encuentro es un bloque con su linea y su
  titulo en blanco.
*/
.clon-encuentro {
  padding-top: 3rem;
  padding-bottom: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.clon-galerias .clon-encuentro:first-child {
  border-top: 0;
  padding-top: 1rem;
}

.clon-encuentro-titulo {
  color: #fff;
  margin: 0 0 1.5rem;
  font-size: 1.7em;
  line-height: 1.1em;
}

/* Los albumes van en la rejilla del clon: la heredada dejaba media fila vacia cuando
   un encuentro solo tenia un album. */
.clon-rejilla-albumes {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.clon-rejilla-albumes .block-gallery {
  position: relative;
  display: block;
  overflow: hidden;
}

.clon-rejilla-albumes .gallery-thumbnail {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* El pie del album iba flotando bajo la miniatura; aqui va pegado a ella y ocupa la
   tarjeta entera. */
.clon-rejilla-albumes .under-gallery {
  position: static;
  width: 100%;
  margin: 0;
  padding: 0.9rem 1rem 1rem;
}

.clon-rejilla-albumes .block-gallery,
.clon-rejilla-albumes .mini-headline-inter {
  text-decoration: none;
}

.clon-rejilla-albumes .mini-headline-inter {
  color: #fff;
}

.clon-rejilla-albumes .mini-headline-inter.sub {
  opacity: 0.85;
}

/* Aviso de contenido que falta. Se ve, a proposito: esta para molestar hasta que
   alguien lo rellene. */
.clon-pendiente {
  border-left: 3px solid #f8002e;
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}