/* =====================================================================
   Parafeno. Hoja de estilos unica.
   Todo el aspecto del sitio sale de las variables de :root.
   Cambia --acento y cambia el color de todo el sitio.
   ===================================================================== */

:root {
  --fondo:       #ffffff;
  --tinta:       #000000;
  --tinta-suave: #7a7a7a;
  /* El acento tiene dos tonos porque hace dos trabajos distintos:
     escribir titulos sobre blanco (necesita algo de fuerza para leerse)
     y pintar el fondo del proyecto activo (necesita ser palido). */
  --acento:       #5f92c4;  /* titulos y enlaces */
  --acento-fondo: #d3e4f5;  /* fondo del item activo en el indice */
  --sobre-acento: #16324a;  /* texto encima de ese fondo */
  --marco:       #f2f2f2;   /* fondo de las imagenes mientras cargan */
  --linea:       #e0e0e0;   /* filetes de separacion */

  --tipo: "Times New Roman", Times, Georgia, serif;
  --cuerpo: 17px;
  --interlinea: 1.45;

  --lateral: 210px;         /* ancho de la columna del indice */
  --ancho-contenido: 1200px;/* limite del ancho de las imagenes y el video */
  --hueco: 48px;            /* separacion entre indice y contenido */
  --margen: 26px;           /* margen exterior de la pagina */
  --ancho-texto: 68ch;
  --proporcion-miniatura: 4 / 3;
  --alto-max: 76vh;         /* ninguna pieza pasa de esta altura en pantalla */
}

/* ---- Fondo oscuro: descomenta y comenta el bloque de arriba --------
:root {
  --fondo: #0d0d0d;
  --tinta: #f2f2f2;
  --tinta-suave: #8a8a8a;
  --acento: #8fb6dd;
  --acento-fondo: #24425e;
  --sobre-acento: #e8f1fa;
  --marco: #1a1a1a;
  --linea: #262626;
}
--------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo);
  font-size: var(--cuerpo);
  line-height: var(--interlinea);
}

img, video, iframe { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--acento); }

p { margin: 0 0 1.15em; }

/* ---------- Armazon: indice a la izquierda, contenido a la derecha --- */

.marco {
  display: flex;
  align-items: flex-start;
  gap: var(--hueco);
  padding: var(--margen);
}

.lateral {
  flex: 0 0 var(--lateral);
  position: sticky;
  top: var(--margen);
  max-height: calc(100vh - var(--margen) * 2);
  overflow-y: auto;
}

.contenido {
  flex: 1 1 auto;
  min-width: 0;
  max-width: var(--ancho-contenido);
  padding-bottom: 25vh;
}

/* ---------- Indice lateral ------------------------------------------ */

.marca {
  display: inline-block;
  border: 1px solid var(--tinta);
  border-radius: 14px;
  padding: 7px 20px 9px;
  font-size: 1.25em;
  line-height: 1;
  margin-bottom: 1.8em;
}
.marca:hover { color: var(--tinta); border-color: var(--acento); }

.indice ul {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 0;
}

.indice li { margin-bottom: 0.15em; }

.indice a {
  display: inline;
  padding: 1px 4px;
}

.indice a.activo,
.indice a.activo:hover {
  background: var(--acento-fondo);
  color: var(--sobre-acento);
}

.indice-titulo {
  display: block;
  padding: 0 0 0.35em 4px;
  color: var(--tinta-suave);
  font-style: italic;
}

.indice-fijo { margin-top: 2em; }

/* Exposicion conjunta dentro del indice: <details> nativo, sin JS. El
   titulo (dentro de <summary>) es un enlace normal a la ficha de la
   exposicion; la flecha del <summary> abre y cierra las piezas. El +/-
   va pegado al titulo, no al borde del indice: por eso no se reparte el
   ancho entero (nada de justify-content: space-between). */
.indice-expo summary {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  cursor: pointer;
  list-style: none;
}
.indice-expo summary::-webkit-details-marker { display: none; }
.indice-expo summary::after {
  content: "+";
  color: var(--acento);
  font-weight: bold;
  flex: 0 0 auto;
}
.indice-expo[open] summary::after { content: "−"; }

.indice-expo ul {
  margin: 0.15em 0 0.15em 0;
  padding-left: 1.4em;
}

/* "+" al final de los 5 primeros proyectos de cada apartado del indice:
   lleva a la rejilla completa de esa categoria (/art/ o /commissions/). */
.indice-mas {
  color: var(--acento);
  font-weight: bold;
}
.indice-mas:hover { color: var(--tinta); }

/* ---------- Pagina de proyecto --------------------------------------- */

.proyecto-titulo {
  color: var(--acento);
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 1.15em;
}

.proyecto-datos { margin-bottom: 1.6em; }

.proyecto-media {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  margin-bottom: 2em;
}

.media { margin: 0; }
/* Ninguna pieza debe pasar de --alto-max. Sin esto, un vertical a lo ancho
   de la columna mide tres pantallas de alto y hay que hacer scroll para
   verlo entero, que es justo lo contrario de lo que quiere un portfolio.

   Las imagenes se limitan solas por altura, porque el navegador conoce sus
   proporciones. Los videos y los incrustados de YouTube no, asi que cada
   uno declara su proporcion en --ratio y de ahi sale su ancho maximo:
   un 9/16 limitado a 76vh de alto no puede medir mas de 76vh * 9/16. */

.media img {
  display: block;
  max-width: 100%;
  max-height: var(--alto-max);
  width: auto;
  height: auto;
}

.media video {
  display: block;
  width: 100%;
  max-width: calc(var(--alto-max) * var(--ratio, 16 / 9));
}

.media .marco {
  position: relative;
  width: 100%;
  max-width: calc(var(--alto-max) * var(--ratio, 16 / 9));
  background: var(--marco);
}
.media .marco iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media figcaption {
  padding-top: 0.5em;
  color: var(--tinta-suave);
}

.proyecto-texto { margin-bottom: 2em; }

.proyecto-creditos { margin-bottom: 3.5em; }
.proyecto-creditos p { white-space: pre-line; }

/* ---------- Listas de proyectos en texto ----------------------------- */

.etiqueta { color: var(--tinta-suave); font-style: italic; }

.lista-proyectos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-proyectos li { margin-bottom: 0.15em; }
.lista-proyectos .lista-meta { color: var(--tinta-suave); }

/* ---------- Rejilla de miniaturas ------------------------------------ */

.pagina-titulo {
  color: var(--acento);
  font-size: 1em;
  font-weight: normal;
  margin: 0 0 1.15em;
}

.rejilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.tarjeta a { display: block; }
.tarjeta a:hover { color: inherit; }

.tarjeta-imagen {
  aspect-ratio: var(--proporcion-miniatura);
  background: var(--marco);
  overflow: hidden;
}

.tarjeta-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.tarjeta a:hover .tarjeta-imagen img { opacity: 0.7; }

.tarjeta-texto { padding-top: 5px; }
.tarjeta a:hover .tarjeta-titulo { color: var(--acento); }
.tarjeta-meta { color: var(--tinta-suave); }

/* Tarjeta de exposicion conjunta: mismo aspecto que un proyecto, con un
   icono junto al titulo que avisa de que agrupa varias piezas. */
.tarjeta-icono {
  display: inline-block;
  color: var(--acento);
  font-size: 0.85em;
  vertical-align: 2px;
}

/* ---------- Pagina About --------------------------------------------- */

.bio { margin-bottom: 3.5em; }

.bloque { margin-bottom: 3.5em; }

.clientes {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5em 4em;
}

.clientes-titulo { color: var(--tinta-suave); font-style: italic; margin-bottom: 0.4em; }
.clientes ul { list-style: none; margin: 0; padding: 0; }

.prensa { list-style: none; margin: 0; padding: 0; }

.prensa-fila {
  display: flex;
  gap: 2em;
  padding: 1.2em 0;
  border-top: 1px solid var(--linea, #e0e0e0);
}

.prensa-cuando {
  flex: 0 0 7em;
  color: var(--tinta-suave);
}

.prensa-que { flex: 1 1 auto; max-width: var(--ancho-texto); }
.prensa-que p { margin: 0; }
.prensa-donde { }
.prensa-donde a { text-decoration: none; }
.prensa-donde a:hover { color: var(--acento); }
.prensa-enlace {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.35em;
  color: var(--acento);
  vertical-align: -1px;
}
.prensa-tipo { color: var(--tinta-suave); font-style: italic; margin-bottom: 0.5em !important; }

@media (max-width: 600px) {
  .prensa-fila { display: block; }
  .prensa-cuando { margin-bottom: 0.4em; }
}

/* ---------- Texto corrido -------------------------------------------- */

.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: 1em; font-weight: normal; color: var(--acento); margin: 1.8em 0 1.15em; }
.prosa a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Movil ----------------------------------------------------- */

@media (max-width: 760px) {
  :root { --margen: 18px; --hueco: 0px; }

  /* "display: contents" hace que la columna lateral desaparezca como caja
     y que la marca y el indice pasen a ser hijos directos del marco. Asi
     se pueden reordenar: marca arriba, contenido en medio, indice al
     final. Con 40 proyectos, tenerlos arriba obligaria a hacer scroll
     antes de ver nada. */
  .marco { display: flex; flex-direction: column; }
  .lateral { display: contents; }

  .marca    { order: 1; margin-bottom: 1.8em; }
  .contenido { order: 2; max-width: none; padding-bottom: 3em; }
  .indice   { order: 3; border-top: 1px solid var(--tinta-suave); padding-top: 1.8em; }

  .rejilla { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

  /* En la portada no hay contenido entre la marca y el indice: el filete
     de separacion solo tiene sentido cuando el indice viene detras de un
     proyecto. Aqui se quita y el indice sube justo debajo del logo. */
  .portada .marca  { margin-bottom: 0.6em; }
  .portada .indice { border-top: none; padding-top: 0; }
}