/* ---------------------------------------------------
   Virginia Chacon Dorr — Portfolio editorial
--------------------------------------------------- */

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --magenta: #E6007E;

  /* Courier Prime es monoespaciada y de altura de x chica: al mismo tamaño en
     píxeles se lee más chica que una proporcional, así que los tamaños de
     texto van por encima de los de la versión anterior del sitio.
     Los títulos gigantes son la excepción: ahí manda el ancho, porque cada
     carácter ocupa ~0.6em y una línea larga se va de pantalla. */
  --fs-giant: clamp(1.75rem, 6.5vw, 5.5rem);
  --fs-xl: clamp(1.5rem, 3.4vw, 2.75rem);
  --fs-lg: clamp(1.15rem, 1.8vw, 1.45rem);
  --fs-md: clamp(1.2rem, 1.5vw, 1.4rem);
  --fs-body: 1.2rem;
  --fs-small: 1rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --nav-height: 72px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

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

/* ---------------------------------------------------
   Reveal-on-scroll
--------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------
   Nav
--------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--black);
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.nav[data-theme="light"] {
  color: var(--black);
  border-bottom-color: rgba(10, 10, 10, 0.1);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.nav[data-theme="dark"] {
  color: var(--white);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
}

.nav__brand {
  display: flex;
  align-items: center;
}

.nav__logo {
  height: 34px;
  width: auto;
  display: block;
  transition: filter 0.5s var(--ease);
}

/* Sobre fondo negro el gris del "MV" casi desaparece, así que el logo se
   resuelve como silueta blanca. El PNG tiene fondo transparente: sin eso, el
   filtro pintaría un rectángulo blanco entero. */
.nav[data-theme="dark"] .nav__logo {
  filter: brightness(0) invert(1);
}

.nav__list {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.nav__list a {
  font-size: var(--fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  padding-bottom: 4px;
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--magenta);
  transition: width 0.35s var(--ease);
}

.nav__list a:hover::after {
  width: 100%;
}

.nav__toggle {
  display: none;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  position: relative;
  cursor: pointer;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav__toggle span { top: 50%; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }

/* ---------------------------------------------------
   Sections — base
--------------------------------------------------- */

.section {
  position: relative;
  padding: calc(var(--nav-height) + 4rem) var(--gutter) 4rem;
  min-height: 100vh;
}

.section--hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Video de fondo del hero: cubre toda la sección y queda muy atenuado.
   .section ya trae position: relative, que es lo que lo ancla acá. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* El contenido del hero va por encima del video. */
.section--hero > *:not(.hero__video) {
  position: relative;
  z-index: 1;
}

/* Refuerzo del chequeo que hace main.js, por si el video llegara a existir. */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    display: none;
  }
}

.section--statement,
.section--collab {
  background: var(--black);
  color: var(--white);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* ---------------------------------------------------
   Hero
--------------------------------------------------- */

/* Retrato circular, arriba del nombre.
   El redondeo lo hace el CSS y no el archivo: así el asset queda en JPEG, que
   para una foto pesa una fracción de lo que pesaría un PNG con transparencia.
   El tamaño baja en pantallas chicas, donde se comería media pantalla. */
.hero__retrato {
  display: block;
  width: clamp(130px, 28vw, 230px);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.hero__retrato img {
  width: 100%;
  height: auto;
  border-radius: 50%;
  /* La foto está sobre fondo blanco y el hero también: sin el borde, el
     recorte circular no se lee y la cabeza queda flotando. */
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.12);
}

.hero__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex: 1;
}

.hero__name {
  font-size: var(--fs-giant);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0;
}

.hero__name span {
  display: block;
}

.hero__roles {
  padding-top: clamp(0.5rem, 2vw, 1.25rem);
  text-align: right;
}

.hero__roles li {
  font-size: var(--fs-md);
  font-weight: 400;
  color: rgba(10, 10, 10, 0.55);
  line-height: 1.6;
}

.hero__statement {
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: 1.8;
  margin-top: 3rem;
  color: rgba(10, 10, 10, 0.8);
}

/* ---------------------------------------------------
   Statement (bloque negro)
--------------------------------------------------- */

.section--statement {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: var(--nav-height);
  padding-bottom: 0;
}

.statement {
  font-size: var(--fs-giant);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
}

/* ---------------------------------------------------
   Sobre mí
--------------------------------------------------- */

.section--about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  min-height: auto;
  padding-top: calc(var(--nav-height) + 6rem);
  padding-bottom: 8rem;
}

.about__copy {
  max-width: 500px;
  width: 100%;
}

.about__copy p {
  font-size: var(--fs-body);
  line-height: 1.85;
  margin-bottom: 1.75rem;
  color: rgba(10, 10, 10, 0.85);
}

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

/* ---------------------------------------------------
   Publicaciones
--------------------------------------------------- */

.section--pubs {
  min-height: auto;
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* ---------------------------------------------------
   Notas — tarjetas en grilla de 4 columnas
--------------------------------------------------- */

.notas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 2.4vw, 2rem);
}

.nota {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(10, 10, 10, 0.16);
  padding-top: 1rem;
  transition: border-color 0.4s var(--ease);
}

a.nota:hover {
  border-top-color: var(--magenta);
}

.nota__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(10, 10, 10, 0.06);
  margin-bottom: 1rem;
}

/* Nota sin imagen: se reserva el mismo alto igual, para que las tarjetas de
   una fila arranquen el texto a la misma altura. */
.nota__media:empty {
  background: repeating-linear-gradient(
    -45deg,
    rgba(10, 10, 10, 0.04) 0 6px,
    transparent 6px 12px
  );
}

.nota__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

a.nota:hover .nota__media img {
  transform: scale(1.05);
}

.nota__cuerpo {
  display: block;
  min-width: 0;
  flex: 1;
}

.nota__fecha {
  display: block;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--magenta);
  margin-bottom: 0.5rem;
}

.nota__titulo {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
  transition: color 0.3s var(--ease);
}

a.nota:hover .nota__titulo {
  color: var(--magenta);
}

/* La bajada no usa --fs-md: en una columna de ~300px ese tamaño deja unas
   20 letras por renglón y la tarjeta se vuelve una escalera. */
.nota__bajada {
  display: block;
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(10, 10, 10, 0.55);
}

.nota__link {
  display: block;
  margin-top: 1rem;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--magenta);
}

.nota__link i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

a.nota:hover .nota__link i {
  transform: translateX(6px);
}

/* Link al listado completo, al pie del bloque del home.
   fit-content + margin auto lo centra sin estirar el subrayado a todo el
   ancho, y max-width deja que el texto baje de línea en pantallas chicas. */
.ver-todas {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: clamp(5rem, 9vw, 8rem) auto 0;
  padding-bottom: 0.35rem;
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  border-bottom: 2px solid var(--magenta);
  transition: color 0.3s var(--ease);
}

.ver-todas:hover {
  color: var(--magenta);
}

.ver-todas i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

.ver-todas:hover i {
  transform: translateX(6px);
}

/* ---------------------------------------------------
   /publicaciones — listado completo
--------------------------------------------------- */

.section--listado {
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 6rem;
}

.listado__encabezado {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.listado__titulo {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
}

.listado__conteo {
  margin-top: 0.75rem;
  font-size: var(--fs-md);
  color: rgba(10, 10, 10, 0.55);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(10, 10, 10, 0.16);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.paginacion__salto i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

a.paginacion__salto:hover { color: var(--magenta); }
a.paginacion__salto[rel="next"]:hover i { transform: translateX(5px); }
a.paginacion__salto[rel="prev"]:hover i { transform: translateX(-5px); }

.paginacion__salto--inerte {
  opacity: 0.28;
  cursor: default;
}

.paginacion__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.paginacion__num {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.4rem;
  border: 1px solid rgba(10, 10, 10, 0.16);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

a.paginacion__num:hover {
  border-color: var(--black);
}

.paginacion__num--activo {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* ---------------------------------------------------
   /publicaciones/<slug> — página propia de una nota
--------------------------------------------------- */

.section--single {
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 6rem;
}

/* Dos columnas: el contenido a la izquierda y los datos duros a la derecha.
   La segunda es fija en rem y no en fracciones: adentro va una fecha y un
   nombre de archivo, que no ganan nada con más ancho, y lo que sobra le queda
   al texto. minmax(0, …) en la primera para que un título largo sin espacios
   no estire la grilla. */
.single__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.single__titulo {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* El cuerpo es texto corrido y en monoespaciada una línea de ancho completo
   se vuelve ilegible, así que se corta antes aunque la columna dé para más. */
.single__bajada {
  max-width: 60ch;
  margin-top: 1.75rem;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(10, 10, 10, 0.7);
}

.single__imagen {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(10, 10, 10, 0.04);
}

.single__imagen img {
  width: 100%;
  height: auto;
}

/* Queda pegada al scroll mientras dura la columna de al lado: en una nota con
   imagen alta, el link al PDF se iría de pantalla enseguida. */
.single__detalles {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
  display: grid;
  gap: 2rem;
}

.single__dato {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 10, 10, 0.16);
}

.single__etiqueta {
  display: block;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 0.75rem;
}

.single__valor {
  font-size: var(--fs-small);
  line-height: 1.7;
}

.single__boton {
  display: block;
  padding: 1.1rem 1.5rem;
  background: var(--black);
  color: var(--white);
  text-align: center;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  transition: background 0.3s var(--ease);
}

.single__boton:hover {
  background: var(--magenta);
}

.single__boton i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

.single__boton:hover i {
  transform: translate(4px, -4px);
}

.single__meta {
  margin-top: 1rem;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: rgba(10, 10, 10, 0.55);
  overflow-wrap: anywhere;
}

/* La columna de datos se apila abajo. El corte es propio de esta grilla y va
   antes del breakpoint general de 860px: con 20rem fijos de columna derecha,
   la izquierda se vuelve una escalera bastante antes que el resto del sitio. */
@media (max-width: 980px) {
  .single__grilla {
    grid-template-columns: 1fr;
  }

  .single__detalles {
    position: static;
    max-width: 60ch;
  }
}

.single__volver {
  display: inline-block;
  margin-top: clamp(3rem, 6vw, 5rem);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  transition: color 0.3s var(--ease);
}

.single__volver:hover {
  color: var(--magenta);
}

.single__volver i {
  font-style: normal;
  display: inline-block;
  transition: transform 0.35s var(--ease);
}

.single__volver:hover i {
  transform: translateX(-6px);
}

/* ---------------------------------------------------
   /contacto
--------------------------------------------------- */

.section--contacto {
  min-height: 100vh;
  padding-top: calc(var(--nav-height) + 5rem);
  padding-bottom: 6rem;
}

.contacto__titulo {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.contacto__intro {
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: rgba(10, 10, 10, 0.7);
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* La fila se sangra hacia afuera para que el fondo del hover invada el
   gutter. La sangría no puede pasarse del gutter, que en pantallas chicas
   baja a 20px: con un -1.5rem fijo, la fila se salía de la pantalla. */
.contacto__link {
  --sangria: min(1.5rem, var(--gutter));

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem) var(--sangria);
  margin: 0 calc(var(--sangria) * -1);
  border-top: 1px solid rgba(10, 10, 10, 0.16);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), padding 0.4s var(--ease);
}

.contacto__links .contacto__link:last-child {
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
}

.contacto__link:hover {
  background: var(--black);
  color: var(--white);
  padding-left: calc(var(--sangria) + 0.75rem);
  padding-right: calc(var(--sangria) + 0.75rem);
}

.contacto__etiqueta {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 0.5rem;
}

/* El correo entero mide 24 caracteres: en monoespaciada eso se va de
   pantalla en un teléfono si el cuerpo no baja lo suficiente. */
.contacto__valor {
  font-size: clamp(1.15rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.contacto__flecha {
  font-size: var(--fs-lg);
  color: var(--magenta);
  transition: transform 0.35s var(--ease);
  display: inline-block;
  justify-self: end;
}

.contacto__link:hover .contacto__flecha {
  transform: translateX(6px);
}

/* ---------------------------------------------------
   Empty state — cuando todavía no hay notas cargadas
--------------------------------------------------- */

.empty-state {
  border-top: 1px solid rgba(10, 10, 10, 0.15);
  padding-top: 2rem;
  max-width: 640px;
}

.empty-state__tag {
  display: inline-block;
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 1rem;
}

.empty-state__text {
  font-size: var(--fs-body);
  line-height: 1.8;
  opacity: 0.75;
}

/* ---------------------------------------------------
   Colaboraciones
--------------------------------------------------- */

.section--collab {
  min-height: auto;
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 6rem;
}

.collab__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
}

.collab__grid li {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Los medios con página de autor propia se linkean */
.collab__grid a {
  transition: color 0.3s var(--ease);
}

.collab__grid a:hover {
  color: var(--magenta);
}

/* ---------------------------------------------------
   Footer
--------------------------------------------------- */

.footer {
  background: var(--black);
  color: var(--white);
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2rem;
  padding: 4rem var(--gutter);
}

.footer__name {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0;
}

.footer__links {
  display: flex;
  gap: 2rem;
  font-size: var(--fs-md);
}

.footer__links a {
  position: relative;
  padding-bottom: 4px;
}

.footer__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--magenta);
  transition: width 0.35s var(--ease);
}

.footer__links a:hover::after {
  width: 100%;
}

.footer__links a:hover {
  color: var(--magenta);
}

.footer__meta {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.4);
  margin-top: 1rem;
}

/* ---------------------------------------------------
   Responsive

   La grilla de notas necesita sus propios cortes: 4 columnas sólo entran
   cómodas en escritorio, y bajan a 3, 2 y 1 antes del breakpoint general.
--------------------------------------------------- */

@media (max-width: 1180px) {
  .notas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .notas { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__list {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: inherit;
    backdrop-filter: blur(10px);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    padding: 0 var(--gutter);
  }

  .nav__list.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav__list a {
    display: block;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
  }

  .nav__toggle {
    display: block;
  }

  .hero__top {
    flex-direction: column;
    gap: 2.5rem;
  }

  .hero__roles {
    text-align: left;
    padding-top: 0;
  }

  .collab__grid {
    grid-template-columns: 1fr;
  }

  .paginacion {
    justify-content: center;
  }

  .paginacion__numeros {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}