/* Francisca Kweitel — estilo basado en la sobriedad de diegoarraigada.com:
   texto chico y gris, negro sólo para lo activo, mucho blanco, grilla de 12 columnas. */

:root {
  --fg: #7f7f7f;
  --ink: #000;
  --bg: #fff;
  --line: #e8e8e8;
  --placeholder: #f2f2f2;
  --wrap: 1160px;
  --gutter: 30px;
  --gap: 20px;
  --header-h: 110px;

  /* como Diego: Arial chica con interlineado amplio */
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --size: 12px;
  --lh: 1.65;
  --weight: 400;
  --caps-track: .02em;
}

* { box-sizing: border-box; }

/* cursor propio: un circulito color mostaza, sin borde, en todo el sitio. */
:root {
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='8.5' fill='%23e8c04a'/%3E%3C/svg%3E") 9 9, auto;
}
html, body, * { cursor: var(--cur) !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--size);
  font-weight: var(--weight);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover, a:focus-visible { color: var(--ink); }
img { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-size: 1em; font-weight: var(--weight); margin: 0; color: var(--ink); }
em { font-style: italic; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.side { grid-column: 1 / span 4; }
.main { grid-column: 5 / -1; }
.ink { color: var(--ink); }
.caps { text-transform: uppercase; letter-spacing: var(--caps-track); font-size: .95em; }
.pending { color: #b3b3b3; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  padding: 30px 0 0;
  height: var(--header-h);
}
.site-header .row { align-items: baseline; }
.logo { grid-column: 1 / span 4; color: var(--ink); font-size: 1.08em; text-transform: uppercase; letter-spacing: var(--caps-track); }
.logo:hover { color: var(--fg); }
.nav { grid-column: 5 / span 7; display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 0; list-style: none; }
.nav a { text-transform: uppercase; letter-spacing: var(--caps-track); font-size: 1em; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--ink); }
.social { grid-column: 12; justify-self: end; font-size: .95em; text-transform: uppercase; letter-spacing: var(--caps-track); }
.menu-btn { display: none; grid-column: 9 / -1; justify-self: end; text-transform: uppercase; letter-spacing: var(--caps-track); font-size: .95em; }

/* mobile drawer, como el de Diego: panel blanco con la lista vertical */
.drawer { position: fixed; inset: 0; z-index: 100; background: var(--bg); padding: 30px 16px; display: none; flex-direction: column; }
.drawer.open { display: flex; }
.drawer-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 40px; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li { margin-bottom: 10px; }
.drawer a { font-size: 1.15em; }
.drawer a[aria-current="page"] { color: var(--ink); }

/* ---------- Home ---------- */
.hero-img {
  width: 100%;
  height: calc(100svh - var(--header-h) - 70px);
  min-height: 320px;
  object-fit: cover;
  background: var(--placeholder);
}
.hero-foot { padding: 15px 0 30px; }
.hero-foot .cap { grid-column: 1 / span 9; }
.hero-foot .rights { grid-column: 10 / -1; text-align: right; }

/* ---------- Sub navegación lateral (columna izquierda) ---------- */
.subnav { position: sticky; top: var(--header-h); list-style: none; margin: 0; padding: 0; }
.subnav li { margin: 0; }
.subnav a { text-transform: uppercase; letter-spacing: var(--caps-track); font-size: .95em; }
.subnav a.active { color: var(--ink); }

/* ---------- Trabajos (índice) ---------- */
.works { padding-bottom: 40px; }
.work-index { list-style: none; margin: 0; padding: 0; position: sticky; top: var(--header-h); }
.work-index a { display: flex; justify-content: space-between; gap: 20px; max-width: 300px; }
.work-index a.hot, .work-index a:hover { color: var(--ink); }
.work-index .yr { flex: none; }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
/* en Trabajos el índice ocupa 3 columnas y la grilla 9, para que las imágenes sean más grandes */
.works .side { grid-column: 1 / span 3; }
.works .main { grid-column: 4 / -1; }
.card { display: block; }
.card .ph { position: relative; aspect-ratio: 3 / 4; background: var(--placeholder); overflow: hidden; }
.card video, .show video { width: 100%; height: 100%; object-fit: cover; display: block; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.card:hover img, .card.hot img { opacity: .8; }
.card .t { padding-top: 7px; font-size: .92em; line-height: 1.3; }
.card:hover .t, .card.hot .t { color: var(--ink); }

/* ---------- Vista de trabajo (1 grande + miniaturas, sin scroll) ---------- */
.viewer-page { height: calc(100svh - var(--header-h)); padding-bottom: 30px; }
.viewer-page > .row { height: 100%; }
.viewer-text { display: flex; flex-direction: column; min-height: 0; padding-right: 10px; }
.viewer-text .scroll { overflow-y: auto; min-height: 0; flex: 1; padding-right: 8px; scrollbar-width: thin; }
.viewer-text h1 { margin-bottom: 4px; }
.viewer-text .meta { margin-bottom: 1.4em; }
.viewer-text .meta p { margin: 0; }
.viewer { display: flex; flex-direction: column; min-height: 0; }
/* contenedor fijo: la imagen se centra adentro y la hilera de miniaturas no se mueve */
.stage { position: relative; flex: 1; min-height: 0; width: 100%; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* "Cerrar ✕" arriba a la derecha de la imagen, a la altura del título */
.viewer-top { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.close { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-transform: uppercase; letter-spacing: var(--caps-track); font-size: .95em; }
.close svg { display: block; }
.close:hover { color: var(--fg); }
.stage .hit { position: absolute; top: 0; bottom: 0; width: 50%; }
.stage .hit.prev { left: 0; cursor: w-resize; }
.stage .hit.next { right: 0; cursor: e-resize; }
.strip { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 12px; }
/* hilera de miniaturas: una sola línea, con scroll horizontal si hay muchas */
.thumbs { position: relative; display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.thumbs button { position: relative; flex: none; width: 64px; height: 64px; background: var(--placeholder); opacity: .45; transition: opacity .2s; overflow: hidden; }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button video, .mini-grid button video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.thumbs button:hover, .thumbs button.on { opacity: 1; }
.counter { color: var(--ink); white-space: nowrap; }

/* ---------- Páginas de texto (Gestión, Docencia, Escritos, P8, Bio) ---------- */
.page { padding-bottom: 80px; }
.section { padding-bottom: 70px; scroll-margin-top: var(--header-h); }
.section > h2 { margin-bottom: 18px; }
/* el nombre y los títulos de cada área van en mayúscula (pedido de Fran) */
.main h2 { text-transform: uppercase; letter-spacing: var(--caps-track); }
/* Bio: recorrido sin espacio entre párrafos; texto de artista al final, en gris, con una línea arriba */
.bio-text p { margin: 0; }
.bio-cv { margin-top: 1.4em; }
.statement { padding-top: 30px; margin-top: 40px; border-top: 1px solid var(--line); }
.statement p { margin: 0; }
/* textos en una sola columna, al ancho del contenedor (hasta donde llegan las imágenes) */
.lead, .cols-2 { max-width: none; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 7px 0; border-top: 1px solid var(--line); }
.list li:last-child { border-bottom: 1px solid var(--line); }
.list a:hover, .list button:hover { color: var(--ink); }
.list button { text-align: left; }
/* entradas desplegables dentro de las listas (ej. el libro en Escritos) */
.list li.has-more { display: block; }
.list details summary { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 20px; cursor: pointer; list-style: none; }
.list details summary::-webkit-details-marker { display: none; }
.list details summary:hover, .list details[open] summary { color: var(--ink); }
.more-body { padding: 14px 0 10px; }
.more-body .mini-grid { margin-top: 14px; }
.list .yr { white-space: nowrap; }
.sub { margin: 34px 0 12px; }
.note { font-size: .92em; color: #a6a6a6; }

/* galería chica de secciones (abre lightbox) */
.mini-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.mini-grid button { position: relative; aspect-ratio: 1; background: var(--placeholder); overflow: hidden; }
/* videos: marca de play en miniaturas y reproductor dentro del contenedor */
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; pointer-events: none; text-shadow: 0 0 6px rgba(0,0,0,.6); background: rgba(0,0,0,.15); }
.video-slot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-slot video, .video-slot iframe { width: 100%; height: 100%; border: 0; background: transparent; }
.stage.is-video > img, .stage.is-video > .hit { display: none; }
/* ---------- Reproductor de video propio ---------- */
.player { position: relative; display: flex; flex-direction: column; max-width: 100%; }
.p-box { position: relative; width: 100%; background: var(--placeholder); overflow: hidden; }
.p-media, .p-media > *, .p-media iframe, .p-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.p-media video { object-fit: contain; background: transparent; }
.p-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--placeholder); transition: opacity .25s; }
.p-cover.see-through { background: transparent; }
.p-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-big { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bg); color: var(--ink); }
.p-big svg { margin-left: 2px; }
.p-hit { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; background: transparent; }
/* Vimeo/YouTube: la portada tapa la interfaz de la plataforma cada vez que el video está en pausa */
.k-vimeo.is-playing .p-cover, .k-yt.is-playing .p-cover { opacity: 0; pointer-events: none; }
/* mp4: la portada sólo antes de empezar; en pausa queda el cuadro del video */
.k-mp4.is-started .p-cover { opacity: 0; pointer-events: none; }
.p-bar { display: flex; align-items: center; gap: 18px; padding-top: 10px; height: 30px; white-space: nowrap; }
.p-bar button { color: var(--fg); }
.p-bar button:hover, .p-play { color: var(--ink); }
.p-time { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 84px; }
.p-track { position: relative; flex: 1; height: 13px; cursor: pointer; }
.p-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line); }
.p-fill { position: absolute; left: 0; top: 6px; height: 1px; background: var(--ink); width: 0; }
.player:fullscreen { justify-content: center; align-items: center; background: var(--bg); }
@media (max-width: 900px) {
  .p-bar { gap: 12px; }
  .p-fs { display: none; }
}
.mini-grid img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.mini-grid button:hover img { opacity: .8; }

/* tarjetas de exposiciones / pop-ups: una foto representativa + lugar */
.show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px var(--gap); }
.show .ph { position: relative; aspect-ratio: 4 / 3; background: var(--placeholder); overflow: hidden; margin-bottom: 9px; }
.show img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.show:hover img { opacity: .8; }
.show .t { color: var(--ink); }
.show p { margin: 0; }

/* catálogos del simposio: libro de doble página en pantalla completa */
.book-lb .book-stage { flex: 1; min-height: 0; margin: 20px 0 14px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.book-lb canvas { display: block; box-shadow: 0 0 0 1px var(--line); }
.book-msg { margin: 0; cursor: default; }
.book-bar { display: flex; justify-content: space-between; align-items: center; max-width: 520px; width: 100%; margin: 0 auto; }
.book-bar .b-pages { color: var(--ink); }

/* Bio */
.portrait { position: sticky; top: var(--header-h); }
.portrait img { width: 100%; max-width: 320px; }

/* ---------- Lightbox (fondo blanco, como Diego) ---------- */
.lb { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: none; padding: 30px var(--gutter); }
.lb.open { display: flex; flex-direction: column; }
.lb-top { display: flex; justify-content: space-between; }
.lb .stage { margin-top: 20px; }
.lb .strip { justify-content: center; position: relative; }
.lb .counter { position: absolute; right: 0; bottom: 0; }
.lb .thumbs { max-width: calc(100% - 140px); }

/* ---------- Footer ---------- */
/* el footer siempre abajo de todo, aunque la página tenga poco contenido */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { width: 100%; }
.site-footer { padding: 30px 0 30px; margin-top: auto; }
.site-footer .row > * { grid-column: span 6; }
.site-footer .r { text-align: right; }
.site-footer .credit { font-size: 10px; color: #b3b3b3; align-self: end; }
.site-footer .credit a:hover { color: var(--fg); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; --header-h: 72px; }
  .site-header { padding-top: 24px; }
  .nav, .social { display: none; }
  .menu-btn { display: block; }
  .logo { grid-column: 1 / span 8; }
  .side, .main, .works .side, .works .main { grid-column: 1 / -1; }
  .subnav, .work-index, .portrait { position: static; }
  .subnav { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 30px; }
  .work-index { display: none; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .hero-img { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .hero-foot .cap, .hero-foot .rights { grid-column: 1 / -1; text-align: left; }
  .viewer-page { height: auto; }
  .viewer { order: -1; margin-bottom: 26px; }
  .viewer .stage { flex: none; height: 62svh; }
  .thumbs button { width: 52px; height: 52px; }
  .viewer-text .scroll { overflow: visible; }
  .show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lead, .cols-2 { max-width: none; }
  .portrait img { max-width: 240px; margin-bottom: 30px; }
  .lb { padding: 20px 16px; }
}
@media (max-width: 520px) {
  .show-grid { grid-template-columns: 1fr; }
  .site-footer .row > * { grid-column: 1 / -1; text-align: left; }
}