@charset "UTF-8";
/* Componentes añadidos para el portfolio de Marcel Dioverti.
   Se apoyan en la paleta y tipografías de common.css:
   var(--tinta, #072142) titulares · var(--texto, #828c96) texto · var(--acento-2, #8c2b7a)/var(--acento, #ff4d5a) acentos. */

/* ---------- Menú con las 8 series ---------- */
/* Dos cosas que hay que corregir de la plantilla, pensada para cuatro ítems:

   1. El ritmo. `header .global-nav__list li` fija margin-top 3.2rem y los
      enlaces miden 12rem. Con nueve ítems no entra en una pantalla baja. Las
      reglas de aquí llevan el prefijo `header` a propósito: sin él tienen menos
      especificidad que las de la plantilla y no se aplican.

   2. El centrado. El menú es un flex con align-items:center; si el contenido es
      más alto que la caja, se desborda por arriba y ese trozo queda fuera de
      alcance —desaparecía INICIO—. Con `margin:auto` en la lista el sobrante se
      puede desplazar en vez de perderse.

   Y el menú cerrado está a translateY(-100%), justo encima de la pantalla:
   cualquier cosa que se salga de su caja cae dentro de la página y se ve como
   texto fantasma. El recorte lo impide pase lo que pase. */
header .global-nav {
  overflow: hidden;
}
header .global-nav__list--series {
  margin: auto;
  max-height: 100vh;
  overflow-y: auto;
  padding: 3vh 0;
}
header .global-nav__list--series li {
  margin-top: 0;
  margin-bottom: 1.8rem;
}
header .global-nav__list--series li:last-child {
  margin-bottom: 0;
  margin-top: 1.2rem;
}
header .global-nav__list--series a {
  font-size: 2.4rem;
}
@media screen and (max-height: 760px) {
  header .global-nav__list--series li {
    margin-bottom: 1.1rem;
  }
  header .global-nav__list--series a {
    font-size: 1.8rem;
  }
}

/* ---------- Grilla de obras (páginas de serie) ---------- */
.obras {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.obras__item {
  width: 47%;
  margin-bottom: 9.6rem;
}
.obras__item:nth-child(odd) {
  margin-top: 0;
}
.obras__item:nth-child(even) {
  margin-top: 6.4rem;
}
.obras__img {
  width: 100%;
  overflow: hidden;
  background: var(--profundo, #020b16);
}
.obras__img img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.obras__item:hover .obras__img img {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}
/* Las obras muy apaisadas ocupan el ancho entero de la grilla. */
.obras__item--wide {
  width: 100%;
  margin-top: 0 !important;
}
.obras__meta {
  padding-top: 2.4rem;
}
.obras__title {
  font-size: 2.4rem;
  color: var(--tinta, #072142);
  letter-spacing: 0.2em;
  line-height: 1.2;
  font-family: "futura_de";
}
.obras__year {
  font-size: 1.6rem;
  color: var(--acento-2, #8c2b7a);
  letter-spacing: 0.2em;
  font-family: "futura_m";
  margin-top: 0.8rem;
}
.obras__tech,
.obras__coll {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--texto, #828c96);
  letter-spacing: 0.08em;
}
.obras__coll {
  color: var(--suave, #a6aeb6);
}

/* ---------- «Otras series» (pie de cada página de serie) ---------- */
.otras {
  border-top: 1px solid rgba(var(--tinta-rgb, 7, 33, 66), 0.15);
}
.otras li {
  border-bottom: 1px solid rgba(var(--tinta-rgb, 7, 33, 66), 0.15);
}
.otras a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 2.8rem 0;
  -webkit-transition: color 0.4s;
  -o-transition: color 0.4s;
  transition: color 0.4s;
}
.otras__num {
  width: 8rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--acento, #ff4d5a);
  letter-spacing: 0.2em;
  font-family: "futura_m";
}
.otras__titulo {
  font-size: 2.4rem;
  color: var(--tinta, #072142);
  letter-spacing: 0.16em;
  line-height: 1.3;
  font-family: "futura_de";
  -webkit-transition: color 0.4s;
  -o-transition: color 0.4s;
  transition: color 0.4s;
}
.otras a:hover .otras__titulo {
  color: var(--acento, #ff4d5a);
}

/* ---------- Quién soy (/about) ---------- */
/* La plantilla apila el retrato debajo de la biografía: 840px de foto colgando
   al final del bloque, con la mitad izquierda vacía. Se pasa a dos columnas
   —retrato a la izquierda, nombre y biografía a la derecha—, que además ahora
   ocupan todo el ancho: al quitarse el título WHO I AM, el flex le seguía
   guardando su hueco de 348px y el bloque empezaba descolgado en el 486. Con el
   retrato en el eje de 138px queda alineado con el 01 y con el resto de la
   página, y la sección baja de 1400px de alto a unos 630.

   El corte va en 1250px —uno de los que ya usa la plantilla— porque dos
   columnas necesitan sitio: por debajo, la biografía baja a tres palabras por
   línea. Ahí se deja el apilado original. */
.heading--top:empty {
  /* sin texto no debe reservar su columna ni su margen de 32px */
  display: none;
}
@media screen and (min-width: 1251px) {
  .who__wrap {
    /* flex:1 en vez de width:100% — si algún día vuelve el título, el bloque
       cede su ancho en vez de desbordar */
    width: auto;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: grid;
    /* las dos columnas topan en 420 y 600px —la biografía en unos 70 caracteres
       por línea— y el sobrante se va al canal del medio; por debajo de 1480px
       de ventana encogen a la par y el canal se queda en los 6.4rem */
    grid-template-columns: minmax(0, 42rem) minmax(0, 60rem);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    column-gap: 6.4rem;
    align-items: start;
  }
  .who__name,
  .who__text {
    grid-column: 2;
  }
  .who__text {
    /* el margen separaba del retrato apilado; ahora sobra */
    margin-bottom: 0;
  }
  .who__image {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    /* la sombra de la plantilla (63px de caída) estaba calculada para una foto
       de 840px de alto; a esta escala se despegaba del suelo */
    -webkit-box-shadow: 0px 40px 96px -28px rgba(var(--tinta-rgb, 7, 33, 66), 0.5);
    box-shadow: 0px 40px 96px -28px rgba(var(--tinta-rgb, 7, 33, 66), 0.5);
  }
  .who__image img {
    /* la plantilla deja el img en línea y con object-fit:fill: se salva porque
       la foto es 2:3 justo como la caja. Fijando la proporción real, cambiar el
       retrato por otro de otras medidas ya no lo deforma ni deja el hueco de
       línea base bajo la sombra. */
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ---------- Statement (/about) ---------- */
.statement__quote {
  font-size: 4rem;
  line-height: 1.4;
  color: var(--tinta, #072142);
  letter-spacing: 0.1em;
  font-family: "futura_de";
  text-align: center;
  margin-bottom: 8rem;
}
.statement__list .passion__item {
  padding: 0 1.6rem;
}
.statement__list .sub-title {
  font-size: 2.4rem;
  /* common.css usa word-break:break-all (pensado para japonés): parte las
     palabras en castellano a mitad ("DIÁLO GO"), así que lo neutralizamos. */
  word-break: normal;
  overflow-wrap: break-word;
}
.passion__text {
  font-size: 1.5rem;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: var(--texto, #828c96);
}

/* ---------- Exposiciones (/about) ---------- */
.expo__figure {
  margin-bottom: 6.4rem;
}
.expo__figure img {
  display: block;
  width: 100%;
  height: auto;
}
.expo__figure figcaption {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.16em;
  color: var(--suave, #a6aeb6);
  font-family: "futura_m";
}
.expo {
  border-top: 1px solid rgba(var(--tinta-rgb, 7, 33, 66), 0.15);
}
.expo__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  padding: 2.8rem 0;
  border-bottom: 1px solid rgba(var(--tinta-rgb, 7, 33, 66), 0.15);
}
.expo__year {
  width: 10rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--tinta, #072142);
  letter-spacing: 0.2em;
  font-family: "futura_m";
}
.expo__detail {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-right: 2.4rem;
}
.expo__title {
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--tinta, #072142);
  letter-spacing: 0.12em;
  font-family: "futura_de";
}
.expo__venue {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--texto, #828c96);
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
}
.expo__type {
  width: 12rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  text-align: right;
  font-size: 1.2rem;
  color: var(--suave, #a6aeb6);
  letter-spacing: 0.2em;
  font-family: "futura_m";
  text-transform: uppercase;
}
.expo__item--highlight .expo__year,
.expo__item--highlight .expo__title {
  color: var(--acento-2, #8c2b7a);
}
.expo__item--highlight .expo__type {
  color: var(--acento, #ff4d5a);
}

/* ---------- Prensa (/about) ---------- */
.press__list li {
  border-bottom: 1px solid rgba(var(--tinta-rgb, 7, 33, 66), 0.15);
}
.press__list a {
  display: block;
  padding: 2.4rem 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--tinta, #072142);
  letter-spacing: 0.08em;
  -webkit-transition: color 0.4s;
  -o-transition: color 0.4s;
  transition: color 0.4s;
}
.press__list a:hover {
  color: var(--acento, #ff4d5a);
}

/* ---------- Móvil ---------- */
@media screen and (max-width: 768px) {
  .obras__item {
    width: 100%;
    margin-bottom: 6.4rem;
  }
  .obras__item:nth-child(even) {
    margin-top: 0;
  }
  .statement__quote {
    font-size: 2.8rem;
    margin-bottom: 4.8rem;
  }
  .statement__list .passion__item {
    width: 100%;
    padding: 0;
    margin-bottom: 4.8rem;
  }
  .expo__item {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .expo__year {
    width: 100%;
    margin-bottom: 0.8rem;
  }
  .expo__detail {
    width: 100%;
    padding-right: 0;
  }
  .expo__type {
    width: 100%;
    text-align: left;
    margin-top: 0.8rem;
  }
}

/* ---------- Móvil: otras series ---------- */
@media screen and (max-width: 768px) {
  .otras__num {
    width: 5rem;
  }
  .otras__titulo {
    font-size: 1.8rem;
  }
}

/* ---------- La pared ----------
   Traída de portafolio-arte-2 (app/Wall.module.css, `.wall`): la superficie de
   la que cuelgan los cuadros. Son tres capas sobre el color de la pared: una
   luz desde arriba a la derecha, un oscurecimiento hacia abajo a la izquierda,
   y la trama del lienzo repetida a 108px.

   La trama se desplaza con la página —es la superficie, y moverse por la página
   es recorrer la pared— pero las dos luces van fijas al viewport: si scrollaran,
   la única luz de la sala terminaría iluminando sólo los primeros 800px de una
   página de cinco mil.

   El color sale de cada serie (ver paleta.py). Allá la pared es #8e867c fijo y
   no lleva texto encima; acá sí, y el valor está calculado para que la tinta
   siga leyéndose. */
body.pared {
  background-color: var(--pared, #c3b5aa);
  background-image:
    radial-gradient(ellipse 95% 85% at 84% -14%,
      rgba(255, 246, 226, 0.34), rgba(255, 246, 226, 0) 62%),
    linear-gradient(207deg,
      rgba(28, 22, 16, 0) 32%,
      rgba(28, 22, 16, var(--sombra-alfa, 0.105)) 100%),
    url(/assets/img/lienzo-trama.webp);
  background-size: auto, auto, 108px 108px;
  background-repeat: no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, scroll;
  background-position: center top, center top, left top;
  /* La trama va en `soft-light` porque el lienzo original es opaco y de color
     —rgb(153,114,77)—: puesto tal cual tapaba la pared en vez de texturarla, y
     ese marrón deja el texto en 3,5:1. Normalizada a gris medio y mezclada así,
     el relieve es el mismo y el color lo pone cada serie.

     La fuerza del viñeteado tampoco es fija: allá vale 0.26 y no hay texto que
     leer encima; acá la calcula paleta.py como la sombra más fuerte que la
     paleta aguanta sin que el rincón inferior baje de AA. */
  background-blend-mode: normal, normal, soft-light;
}

/* Y las obras, colgadas: la sombra las despega de la pared. Sustituye a la
   sombra plana que traía la grilla. */
body.pared .obras__img {
  box-shadow: 0 1.2vw 2.4vw -1vw rgba(var(--profundo-rgb, 2, 11, 22), 0.45);
}

/* ---------- El retrato en el lugar de la luna ----------
   Ocupa el mismo hueco de 545px que ocupaba moon.svg, en vertical (2:3) y
   centrado sin `transform`: la animación de entrada anima `.js-moon` con
   anime.js, que escribe el transform entero, y cualquier translate propio
   se perdería al arrancar.

   El borde se desvanece con una máscara: un rectángulo de canto vivo flotando
   en un cielo negro se lee como un pegote, y lo que estaba ahí antes era una
   luna que salía de la oscuridad. */
.retrato {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Los radios van por debajo de la distancia al borde (50% en horizontal,
     46/54% en vertical): con radios mayores el borde nunca entra en la zona de
     caída y la máscara no hace nada, que es lo que pasaba con 92%/88%. */
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%,
    #000 45%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%,
    #000 45%, rgba(0, 0, 0, 0) 100%);
}
.retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}



/* «ASUNCIÓN» estaba puesta al costado de la luna, que llenaba todo el hueco.
   El retrato es más angosto y centrado: al costado se montaba encima de la foto,
   y corriéndola a la izquierda chocaba con el nombre. Va debajo de la foto,
   alineada con su borde derecho, y a un cuerpo que quepa en su ancho. */
.moon__text-wrap {
  left: auto !important;
  right: 16.65%;
  top: auto !important;
  bottom: -12%;
  -webkit-transform: none !important;
  transform: none !important;
  text-align: right;
  white-space: nowrap;
}
.moon__text {
  font-size: 2.4rem !important;
  letter-spacing: 0.3em !important;
}

/* ---------- Los trazos de la pared ----------
   Traídos de portafolio-arte-2 (public/wall/marks): cuatro formas en seis
   colores, repartidas detrás de la grilla de obras como manchas que quedaron
   en la pared de tanto colgar cuadros. Los reparte construir.py, sembrando el
   azar con el nombre de la serie para que cada pared sea distinta pero no
   cambie en cada build.

   Se salen de los 1200px del contenido a propósito —una mancha cortada justo
   en el borde del texto se lee como un recuadro— y se recortan en su propia
   caja para no provocar barra horizontal. */
.obras-zona {
  position: relative;
}
.marcas {
  position: absolute;
  top: -6rem;
  bottom: -6rem;
  left: -9vw;
  right: -9vw;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.marcas img {
  position: absolute;
  display: block;
  height: auto;
  opacity: var(--op, 0.3);
  /* Se multiplican contra la pared en vez de posarse encima: así el trazo se
     mete en la trama del lienzo y no flota como una calcomanía. */
  mix-blend-mode: multiply;
  -webkit-transform: rotate(var(--giro, 0deg));
  transform: rotate(var(--giro, 0deg));
}
/* Las obras van por encima de los trazos, no al revés. */
.obras {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  /* En pantalla angosta hay menos aire: los trazos molestan más de lo que suman. */
  .marcas {
    display: none;
  }
}