/* ============================================================
   danielperezcoronel.com   —   HOJA DE ESTILO   —   v30

   Version final del diseno. Archivo unico para todo el sitio,
   en los dos idiomas.

   Orden del archivo, de arriba hacia abajo:
     fuentes, variables de color, base, encabezado, indice,
     paginas de proyecto, visor, visor ampliado, pie de pagina,
     y AL FINAL los ajustes de escritorio.

   El bloque @media (min-width: 900px) va al final a proposito:
   ahi se sobrescriben los tamanos para pantalla grande. Si
   agregas una regla nueva, ponla ANTES de ese bloque.
   ============================================================ */

/* ============================================================
   FUENTES AUTOALOJADAS
   Coloca los archivos reales en /fonts/ en la raíz del sitio.
   Mientras no estén, el navegador usa el fallback (Georgia /
   Courier) — no rompe nada.
   ============================================================ */
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #111111;
  --white: #ffffff;
  --gray-mid: #6b6b6b;
  --gray-soft: #8f8f8f;
  --gray-line: #d8d8d8;
  --red: #c1121f;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--serif);
}

a { color: inherit; }

/* ---------- Header ---------- */
header {
  position: relative;
  padding: 2.5rem 1.5rem 2rem;
  max-width: 720px;
  margin: 0 auto;
}

.lang-switch {
  position: absolute;
  top: 2.5rem;
  right: 1.5rem;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  margin: 0;
  padding: 4px 2px;
  color: var(--gray-line);
}

.lang-switch a {
  color: var(--red);
  text-decoration: none;
  padding: 2px;
}

.lang-switch .lang-current {
  color: var(--gray-soft);
  text-decoration: none;
}

.name-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: 0 0 0.9rem;
}

.site-name-link {
  text-decoration: none;
  color: inherit;
}
.site-name-link:hover .site-name { color: var(--red); }

h1.site-name {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.35rem, 4.5vw, 2rem);
  white-space: nowrap;
  color: var(--black);
  margin: 0;
}

/* Icono de Instagram, sutil, junto al nombre */
.ig-link {
  display: inline-flex;
  color: var(--black);
  transition: color 0.15s;
}
.ig-link:hover { color: var(--red); }
.ig-link svg {
  width: 1rem;
  height: 1rem;
}

.email {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--gray-mid);
  margin: 0 0 1.5rem;
}

/* v42: origen y año de nacimiento, como aparece en Artsy. Va
   ARRIBA del correo, pegado a el: los dos forman un solo bloque
   de ficha bajo el nombre. */
.origin {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--gray-mid);
  margin: 0 0 0.35rem;
}

.archive-note {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--black);
  max-width: 40ch;
  margin: 0 0 1.5rem;

  /* v41: alineado a la izquierda, como estaba antes de la v37.
     Justificado se veia peor aqui: son pocas lineas y muy
     cortas, y en ese ancho los huecos entre palabras se notan.
     Los textos largos si siguen justificados. */
  text-align: left;
}

.location {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--gray-mid);
  margin: 0 0 2rem;
}

/* ---------- CV / Prensa ----------
   Base: enlace activo normal, mismo trato que el resto del
   sitio (negro, rojo al pasar el cursor).

   .pending: el archivo/contenido todavia no existe. Se ve
   gris y no responde a clics ni al teclado. Para activarlo
   cuando el archivo ya este listo, basta con quitar la
   palabra "pending" de la clase -- nada mas cambia. */
.meta-links {
  font-family: var(--mono);
  font-size: 0.9rem;
  margin: 0 0 2rem;
}
.meta-links .meta-sep {
  color: var(--gray-line);
  margin: 0 0.5rem;
}
.meta-links a {
  color: var(--black);
  text-decoration: none;
}
.meta-links a:hover { color: var(--red); }

.meta-links a.pending {
  color: var(--gray-line);
  pointer-events: none;
  cursor: default;
}

/* ---------- Índice cronológico ---------- */
.index-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--gray-mid);
  margin: 0 0 1.25rem;
}

.index-list {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.index-list li {
  margin: 0 0 0.9rem;
}

/* Afordancia de enlace sin subrayado ni color:
   línea de puntos guía + flecha, como en el índice
   de un catálogo impreso. */
.index-list a {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.index-list a::before {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--gray-line);
}

.index-list a::after {
  content: "\2192";
  order: 2;
  flex: 0 0 auto;
  font-size: 1.6em;
  line-height: 1;
  color: var(--black);
}

.index-list a:hover::after,
.index-list a:focus-visible::after {
  color: var(--red);
}

.index-list a:hover::before,
.index-list a:focus-visible::before {
  border-bottom-color: var(--gray-mid);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============================================================
   v31 — PAGINAS DE TEXTO
   Prensa, Textos y cada texto individual. Sin visor, sin
   flechas, sin JS: solo lectura.
   ============================================================ */

/* El contenedor. En escritorio se alinea con el titulo del
   encabezado; sin esto el texto arrancaria 1.5rem antes. */
main.text-page {
  padding-bottom: 1rem;
}

/* El cuerpo del texto. La medida esta limitada a proposito:
   una linea de mas de 70 caracteres cansa la vista, y el
   sitio esta pensado para lectores de edad. */
.text-body {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--black);
  max-width: 64ch;
  margin: 0;

  /* v37: texto justificado.
     La particion de palabras NO es opcional aqui. Justificar
     sin ella deja huecos y "rios" de blanco entre palabras,
     sobre todo en celular, donde la linea es corta. Con
     hyphens: auto el navegador parte las palabras usando el
     diccionario del idioma que cada pagina declara en su
     etiqueta <html lang="es"> o <html lang="en">. */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.text-body p {
  margin: 0 0 1.2rem;
}

.text-body p:last-child {
  margin-bottom: 0;
}

/* Cita o fragmento destacado dentro de un texto */
.text-body blockquote {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  border-left: 1px solid var(--gray-line);
  color: var(--gray-mid);
}

/* Linea de credito o procedencia, al final de un texto */
.text-meta {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--gray-mid);
  max-width: 64ch;
  margin: 2rem 0 0;
}

/* Enlace real dentro de un texto: la fuente de la nota, el
   articulo original. Rojo del sitio, sin subrayado grueso:
   una linea fina que se enciende al pasar encima. */
.text-body a,
.text-meta a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-line);
}

.text-body a:hover,
.text-meta a:hover {
  border-bottom-color: var(--red);
}

/* Dos lineas de credito seguidas van juntas, no separadas */
.text-meta + .text-meta {
  margin-top: 0.4rem;
}

/* ============================================================
   v38 — TEXTO EN FORMATO DE AUTOR

   El texto de Inés Maldonado se compuso con una tipografia
   deliberada: tamanos distintos, negritas, cursivas,
   subrayados, una letra por renglon y la firma a la derecha.
   Fue decision de la autora que se leyera asi. Por eso esa
   pagina NO usa el cuerpo de texto normal del sitio.

   Dos diferencias con .text-body:

     - NO va justificado. El original tiene el margen derecho
       suelto; justificarlo borraria la composicion.
     - Los tamanos van en em, relativos al cuerpo de la
       pagina, para que la proporcion entre los 10, 11, 12,
       14 y 18 puntos del documento se conserve igual en
       cualquier pantalla.
   ============================================================ */
.text-artwork {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--black);
  max-width: 60ch;
  margin: 0;
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}

.text-artwork p {
  margin: 0 0 0.9rem;
}

.text-artwork p:last-child {
  margin-bottom: 0;
}

/* Los tamanos del documento original. El cuerpo, 11 pt, es
   el tamano base: por eso no lleva clase. */
.text-artwork .t10 { font-size: 0.91em; }
.text-artwork .t12 { font-size: 1.09em; }
.text-artwork .t13 { font-size: 1.18em; }
.text-artwork .t14 { font-size: 1.27em; }
.text-artwork .t18 { font-size: 1.64em; line-height: 1.15; }

/* C A O S: una letra por renglon, apiladas y sin aire entre
   ellas, como en el original. */
.text-artwork .caos { margin: 0.5rem 0 0; }
.text-artwork .caos + .caos { margin-top: 0; }
.text-artwork .caos:last-of-type { margin-bottom: 0.9rem; }

/* La firma de la autora, a la derecha */
.text-artwork .firma {
  text-align: right;
  margin-top: 1.6rem;
}

.text-artwork u {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* ============================================================
   v41 — CV

   Un CV es una lista de años con entradas, no prosa. Se arma
   en dos columnas: el año en monoespaciada, como las fichas
   tecnicas del resto del sitio, y la entrada en serif.

   Las entradas que continuan el mismo año dejan la columna del
   año vacia, igual que en un CV impreso.
   ============================================================ */
.cv-heading {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--gray-line);
}

.cv-heading:first-of-type {
  margin-top: 0;
}

.cv-entry {
  display: flex;
  gap: 1.25rem;
  margin: 0 0 0.7rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black);
}

.cv-year {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--gray-mid);
  flex: 0 0 3.5em;
  padding-top: 0.15em;
}

.cv-text {
  flex: 1 1 auto;
  max-width: 58ch;
}

.cv-text a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid var(--gray-line);
}

.cv-text a:hover {
  border-bottom-color: var(--red);
}

/* ============================================================
   v41 — NEWS

   Misma mecanica que una pagina de proyecto: una publicacion a
   la vez, flechas laterales, swipe y visor ampliado. La
   diferencia es que cada publicacion trae SU PROPIA nota, no
   una nota comun al final, asi que la nota vive dentro de cada
   figura y cambia al pasar de una a otra.
   ============================================================ */
.post-note {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-soft);
  max-width: 46ch;
  margin: 0.8rem auto 0;
  text-align: center;
}

/* Nota de estado: «In compilation» y similares */
.text-note {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--gray-soft);
  margin: 0;
}

footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--gray-mid);
  border-top: 1px solid var(--gray-line);
  margin-top: 2rem;
}

/* ---------- Página de proyecto: encabezado ---------- */
.back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--red);
  text-decoration: none;
  padding: 0.3rem 0;
  margin-bottom: 1.5rem;
}
.back-link:hover { color: var(--black); }
.back-link::before { content: "\2190 "; }

/* Titulo como enlace al inicio, en paginas de proyecto */
/* Titulo del proyecto como enlace al inicio */
.project-title-link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.project-title-link:hover .project-title { color: var(--red); }

.project-title {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0 0 0.5rem;
}

.project-meta {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--gray-mid);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0 0 1.5rem;
}

/* ---------- Visor de obra: una imagen a la vez ---------- */
/* ---------- Reproductor de video ---------- */
.video-shell {
  padding: 1rem 0 2rem;
}

.video-shell video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  background: #000;
}

.video-caption {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-mid);
  margin-top: 1rem;
  text-align: center;
}

.carousel-shell {
  position: relative;
  padding: 1rem 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.carousel {
  flex: 1 1 auto;
  min-width: 0;
}

.slide {
  display: none;
  margin: 0;
}

.slide.active {
  display: block;
}

.slide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  cursor: zoom-in;
}

/* ---------- v32: video dentro del recorrido de piezas ----------
   Un proyecto puede mezclar fotografia y video en la misma
   secuencia: el video es una pieza mas, y se recorre con las
   mismas flechas.

   A diferencia de la foto, aqui NO se fuerza el ancho al 100%:
   un video vertical se deformaria o se volveria gigante. Se
   deja a su proporcion, centrado, con el mismo tope de altura
   que las fotos. Tampoco lleva cursor de lupa: el video no se
   amplia a 1:1, ya trae su propio boton de pantalla completa. */
.slide video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  background: #000;
  cursor: default;
}

/* ---------- Visor ampliado (lightbox) ----------
   Un clic en la imagen del visor la abre directo a
   resolucion nativa (1:1) — el mismo archivo, sin
   recomprimir ni recortar, sin paso intermedio. Si no
   cabe en pantalla, el contenedor hace scroll. La flecha
   "Regresar" cierra y vuelve al visor normal. */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(17, 17, 17, 0.94);
  padding: 4vh 4vw;
  overflow: auto;
  cursor: zoom-out;
}
.lightbox.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
}
.lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--mono);
  font-size: 1.1rem;
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
}
.lightbox-hint {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  z-index: 101;
  text-align: center;
  pointer-events: none;
}

.slide-caption {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-mid);
  margin-top: 1rem;
  text-align: center;
}

.carousel-arrow {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20vh;
  min-width: 1.6rem;
  background: none;
  border: none;
  padding: 0 0.25rem;
  font-family: var(--mono);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gray-mid);
  cursor: pointer;
}
.carousel-arrow:hover { color: var(--black); }
.carousel-arrow:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}
.carousel-arrow[disabled] {
  opacity: 0.2;
  cursor: default;
}

/* ---------- Nota de método bajo el visor ---------- */
.project-note {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-soft);
  max-width: 46ch;
  margin: 1.5rem auto 0;
  text-align: center;
}

/* ---------- Navegación entre proyectos ---------- */
.project-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  font-family: var(--mono);
  font-size: 1rem;
  text-align: center;
}

.project-nav a {
  text-decoration: none;
  color: var(--gray-mid);
  padding: 0.4rem 0;
}
.project-nav a:hover { color: var(--black); }
.project-nav .nav-arrow { color: var(--red); }
.project-nav .nav-separator { color: var(--gray-line); }
.project-nav .nav-empty { visibility: hidden; }

/* ============================================================
   ESCRITORIO — este bloque va AL FINAL del archivo a propósito.
   Si se coloca antes de las reglas base, éstas lo anulan.
   ============================================================ */
@media (min-width: 900px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }

  header, main, footer {
    max-width: 980px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  header {
    padding: 3rem 3rem 3.5rem;
  }

  .lang-switch {
    top: 3rem;
    right: 3rem;
    font-size: clamp(1rem, 1.05vw, 1.25rem);
  }

  h1.site-name {
    font-size: clamp(1.8rem, 2.3vw, 2.5rem);
  }

  .name-row {
    margin-bottom: 1rem;
  }

  .ig-link svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .email {
    font-size: clamp(0.85rem, 0.9vw, 1rem);
    margin-bottom: 1.75rem;
  }

  .origin {
    font-size: clamp(0.85rem, 0.9vw, 1rem);
    margin: 0 0 0.45rem;
  }

  .archive-note {
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    line-height: 1.5;
    max-width: 44ch;
    margin-bottom: 2rem;
  }

  .location {
    font-size: clamp(0.85rem, 0.9vw, 1rem);
    margin-bottom: 2rem;
  }

  .meta-links {
    font-size: clamp(0.85rem, 0.9vw, 1rem);
    margin-bottom: 2rem;
  }

  .index-label {
    font-size: clamp(0.85rem, 0.9vw, 1rem);
    margin-bottom: 1.25rem;
  }

  .index-list a {
    font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  }

  .index-list li {
    margin-bottom: 0.8rem;
  }

  /* Alinea el texto con el titulo del encabezado */
  main.text-page {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .text-body {
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.65;
    max-width: 68ch;
  }

  .carousel-shell {
    gap: 1rem;
  }

  .carousel-arrow {
    min-height: 24vh;
    min-width: 3rem;
    padding: 0 0.5rem;
    font-size: 3rem;
  }

  .project-note {
    font-size: 0.8rem;
    line-height: 1.45;
    max-width: 62ch;
    margin-top: 1.1rem;
  }

  .project-nav {
    max-width: 980px;
    padding: 0 3rem;
    font-size: 1.15rem;
  }
}

/* ============================================================
   CELULAR EN HORIZONTAL (paginas de proyecto)

   Con la pantalla acostada, el alto disponible es lo que
   escasea, no el ancho. El encabezado se comprime para
   dejarle mas alto a la imagen o al video.
   ============================================================ */
@media (max-width: 899px) and (orientation: landscape) {
  header {
    padding: 1rem 1.25rem 0.75rem;
  }

  .back-link {
    margin-bottom: 0.6rem;
  }

  .project-title {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
  }

  .project-meta {
    margin-bottom: 0.5rem;
  }

  .carousel-shell,
  .video-shell {
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
  }

  .slide img,
  .slide video,
  .video-shell video {
    max-height: 62vh;
  }

  .carousel-arrow {
    min-height: 50vh;
  }

  .project-note {
    margin-top: 0.75rem;
  }
}