/*
  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;
}

/* La trampa de los formularios (21-ago-2026). Un campo que una persona no ve y casi todo
   robot rellena; la regla de creacion de PocketBase exige que llegue vacio.

   No se usa `display:none` ni `visibility:hidden`: los rastreadores de formularios mas
   burdos los reconocen y saltan el campo. Sacarlo del lienzo lo esconde igual de bien y
   no da esa pista. `tabindex="-1"` y `aria-hidden` lo dejan fuera del tabulador y del
   lector de pantalla, que es lo que importa para quien navega sin raton. */
.clon-trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* El lightbox propio (22-ago-2026). Sustituye al del motor de Webflow, que ademas abria los
   videos a traves de cdn.embedly.com — un tercero que no pintaba nada.

   Es lo unico de widgets.js que necesita estilos: los desplegables, el menu de movil y el
   carrusel se apoyan en las clases que la hoja de Webflow ya trae. */
.clon-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0, 0, 0, .92);
}

.clon-lightbox-caja {
  width: min(100%, 1100px);
  /* La proporcion la fija la caja y no el iframe: asi el video no salta de alto mientras
     carga, que era lo que hacia el original al medir el embed. */
  aspect-ratio: 16 / 9;
  max-height: 100%;
}

.clon-lightbox-caja iframe,
.clon-lightbox-caja img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  display: block;
}

.clon-lightbox-cerrar {
  position: absolute;
  top: 2vmin;
  right: 2vmin;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.clon-lightbox-cerrar:hover { background: rgba(255, 255, 255, .24); }
.clon-lightbox-cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }