/* =====================================================================
   Gabriela Medei · Arte — hoja de estilos
   ---------------------------------------------------------------------
   1. Variables y tema        5. Galería y visor
   2. Base y tipografía       6. Series / Exposiciones / Bio
   3. Cabecera y menú         7. Formulario
   4. Portada y secciones     8. Pie y utilidades
   ===================================================================== */

/* ------------------------------------------------ 1. Variables ----- */
:root {
  --fondo:        #FBFAF8;
  --fondo-2:      #F2EEE7;
  --superficie:   #FFFFFF;
  --tinta:        #17150F;
  --tinta-2:      #423D35;
  --apagado:      #7B746A;
  --linea:        #E4DED3;
  /* Azul tomado del logo (su tono más oscuro es #647DB9), oscurecido lo
     necesario para que se lea bien como texto sobre el fondo claro. */
  --acento:       #3959A2;
  --acento-claro: #E6EAF6;
  --sombra:       0 1px 2px rgba(23,21,15,.04), 0 18px 40px -22px rgba(23,21,15,.35);
  --sombra-alta:  0 2px 6px rgba(23,21,15,.06), 0 34px 60px -28px rgba(23,21,15,.45);

  --tipo-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --tipo-texto:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho: 1320px;
  --radio: 4px;
  --transicion: .35s cubic-bezier(.22,.61,.36,1);

  color-scheme: light;
}

/* Modo oscuro automático (según la configuración del teléfono o la compu) */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:        #131211;
    --fondo-2:      #1C1A18;
    --superficie:   #1B1917;
    --tinta:        #F3EFE8;
    --tinta-2:      #C9C2B7;
    --apagado:      #989186;
    --linea:        #302D29;
    --acento:       #6C8AD0;   /* el mismo azul, aclarado para el fondo negro */
    --acento-claro: #1D2333;
    --sombra:       0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
    --sombra-alta:  0 2px 6px rgba(0,0,0,.5), 0 34px 60px -28px rgba(0,0,0,.9);
    color-scheme: dark;
  }
}

/* Modo oscuro elegido con el botón de la cabecera */
:root[data-tema="oscuro"] {
  --fondo:        #131211;
  --fondo-2:      #1C1A18;
  --superficie:   #1B1917;
  --tinta:        #F3EFE8;
  --tinta-2:      #C9C2B7;
  --apagado:      #989186;
  --linea:        #302D29;
  --acento:       #6C8AD0;   /* el mismo azul, aclarado para el fondo negro */
  --acento-claro: #1D2333;
  --sombra:       0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8);
  --sombra-alta:  0 2px 6px rgba(0,0,0,.5), 0 34px 60px -28px rgba(0,0,0,.9);
  color-scheme: dark;
}

/* --- Animación al cambiar de modo claro a oscuro ---------------------
   1. Donde hay View Transitions, js/sitio.js revela el modo nuevo en un
      círculo que crece desde el botón de sol/luna.
   2. En el resto de los navegadores, los colores hacen un fundido: el
      JavaScript pone la clase "cambiando-tema" durante medio segundo. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }

html.cambiando-tema,
html.cambiando-tema *,
html.cambiando-tema *::before,
html.cambiando-tema *::after {
  transition: background-color .55s ease, border-color .55s ease,
              color .55s ease, box-shadow .55s ease, fill .55s ease !important;
  transition-delay: 0s !important;
}

/* El sol y la luna entran girando */
#boton-tema svg { animation: girar-icono .5s cubic-bezier(.22,.61,.36,1); }
@keyframes girar-icono {
  from { transform: rotate(-140deg) scale(.35); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --- Transición al pasar de una página a otra -------------------------
   Entrada: la página aparece con un fundido y el contenido sube apenas.
   Salida: js/sitio.js pone la clase "saliendo" en el body y espera a que
   termine el fundido antes de ir a la página siguiente.
   El relleno "backwards" es a propósito: una vez terminada la entrada la
   animación deja de mandar sobre la opacidad, y así la salida funciona. */
body {
  animation: entrada-pagina .5s cubic-bezier(.22,.61,.36,1) backwards;
  transition: opacity .24s ease;
}
@keyframes entrada-pagina { from { opacity: 0; } }

#principal {
  animation: subida-pagina .62s cubic-bezier(.22,.61,.36,1) backwards;
}
@keyframes subida-pagina { from { opacity: 0; transform: translateY(16px); } }

body.saliendo { opacity: 0; }

/* ------------------------------------------------ 2. Base --------- */
*, *::before, *::after { box-sizing: border-box; }

/* --- Medida base del sitio -------------------------------------------
   De este número dependen TODAS las medidas escritas en rem: no solo las
   letras, también los márgenes, los rellenos y las separaciones entre
   secciones. Por eso vale 16px, que es el valor normal: bajarlo achicaría
   la maqueta entera de todas las páginas, no solo el texto.
   Para cambiar el tamaño de la letra sin tocar la maqueta, están los
   font-size de cada elemento, más abajo. */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--tipo-texto);
  font-size: 0.9297rem;   /* en rem para que acompañe al tamaño general */
  font-weight: 400;       /* la fina, 300, no se lee bien en tamaños chicos */
  line-height: 1.48;      /* interlineado del texto corrido */
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto evita que una imagen se deforme si trae los atributos
   width y height escritos en el HTML */
img { max-width: 100%; height: auto; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--tipo-titulo);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* En los clamp, el valor del medio está en vw (ancho de pantalla) y no
   depende del tamaño general, así que va achicado en la misma proporción
   para que en pantallas medianas los títulos no queden desparejos. */
h1 { font-size: clamp(2.275rem, 5.69vw, 4.55rem); }
h2 { font-size: clamp(1.6625rem, 3.15vw, 2.625rem); }
h3 { font-size: clamp(1.0938rem, 1.75vw, 1.4rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--acento); color: #fff; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* Páginas de lectura (Textos, Aviso legal): el renglón se mantiene corto
   para que sea cómodo de leer, pero el bloque arranca en el mismo borde
   izquierdo que el resto del sitio. Si en cambio se centrara el contenedor
   entero, el texto empezaría bastante más adentro que en las otras páginas
   y se notaría el desnivel. */
.contenedor-angosto { max-width: var(--ancho); }
.contenedor-angosto > * { max-width: 860px; }

.antetitulo {
  font-family: var(--tipo-texto);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 1.1rem;
  display: block;
}

/* Las bajadas: el párrafo de entrada que va debajo de un título. Van algo
   más grandes que el texto corriente, pero menos de lo que iban al
   principio, para que la diferencia no cante tanto. */
.plomo {
  font-size: clamp(0.875rem, 1.26vw, 0.9712rem);
  color: var(--tinta-2);
  /* Unos 95 caracteres por renglón. Es más largo que el ideal de lectura,
     pero son párrafos de dos o tres líneas y así aprovechan el ancho de la
     página. Los textos largos de verdad (la página Textos) siguen en un
     renglón más corto, que es donde el largo sí se paga al leer. */
  max-width: 80ch;
}

.tenue { color: var(--apagado); }

.linea-fina {
  height: 1px;
  background: var(--linea);
  border: 0;
  margin: 0;
}

/* Botones ---------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.9em;
  font-family: var(--tipo-texto);
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--tinta);
  color: var(--fondo);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:hover { background: var(--acento); border-color: var(--acento); color: #fff; transform: translateY(-2px); }

.boton-linea { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton-linea:hover { background: transparent; color: var(--acento); border-color: var(--acento); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta);
  padding-bottom: .35em;
  border-bottom: 1px solid var(--linea);
  transition: color var(--transicion), border-color var(--transicion), gap var(--transicion);
}
.enlace-flecha:hover { color: var(--acento); border-color: var(--acento); gap: 1em; }

/* ------------------------------------------------ 3. Cabecera ----- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), background var(--transicion);
}
.cabecera.desplazada { border-bottom-color: var(--linea); }

.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 78px;
}

/* La cabecera queda con la letra del tamaño original a propósito: sus
   medidas están en px y no en rem, así que no las toca el tamaño general
   de la línea `html { font-size }`. Lo mismo vale para el menú de abajo. */
.marca { display: flex; align-items: baseline; gap: .55rem; line-height: 1; }
.marca-nombre {
  font-family: var(--tipo-titulo);
  font-size: 23px;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marca-bajada {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--apagado);
  padding-bottom: .15em;
}

.menu { display: flex; align-items: center; gap: 2.1rem; }
.menu a {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--tinta-2);
  padding: .3em 0;
  transition: color var(--transicion);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transicion);
}
.menu a:hover { color: var(--tinta); }
.menu a:hover::after, .menu a.activo::after { transform: scaleX(1); transform-origin: left; }
.menu a.activo { color: var(--tinta); }

.cabecera-acciones { display: flex; align-items: center; gap: .35rem; }

/* Sello de la artista, del mismo porte que los iconos de al lado.
   En modo oscuro lleva un disco claro detrás, porque la firma está
   dibujada con tinta oscura y sobre negro no se vería. */
.logo-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-right: .35rem;
  flex-shrink: 0;
}
.logo-cabecera img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo-cabecera img { background: #EFECE5; }
}
:root[data-tema="oscuro"] .logo-cabecera img { background: #EFECE5; }

.icono-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta-2);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.icono-boton:hover { background: var(--fondo-2); color: var(--tinta); }
.icono-boton svg { width: 19px; height: 19px; }

.hamburguesa { display: none; }

/* Menú desplegable en teléfono */
.menu-movil {
  position: fixed;
  inset: 78px 0 0;
  z-index: 190;
  background: var(--fondo);
  padding: clamp(20px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  overflow-y: auto;            /* por si el teléfono queda acostado */
  overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.menu-movil.abierto { opacity: 1; transform: none; pointer-events: auto; }
.menu-movil a {
  font-family: var(--tipo-titulo);
  font-size: 26px;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta-2);
}
.menu-movil a.activo { color: var(--acento); }

/* El menú se derramaba sobre la página en el teléfono, sin fondo y encimado
   con las obras. La causa no era el tamaño sino el desenfoque de la cabecera:
   un elemento con backdrop-filter pasa a ser el bloque contenedor de sus
   hijos "position: fixed". Como el menú vive dentro del <header>, quedaba
   anclado a la cabecera (78 px de alto) en vez de a la pantalla, con
   inset: 78px 0 0 sobre esa caja daba altura cero, y el panel se dibujaba
   sin fondo. Mientras el menú está abierto se saca el desenfoque y el panel
   vuelve a cubrir la pantalla entera. En la computadora no cambia nada:
   ahí este menú ni siquiera existe. */
body.menu-abierto .cabecera {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--fondo);
}

/* ------------------------------------------------ 4. Portada ------ */
/* --- La portada es una sala ------------------------------------------
   La franja tiene un color propio, más profundo que el papel del resto
   del sitio: la obra cuelga de un muro y el resto de la página es el
   catálogo. Si querés otro tono de muro, cambiá estos dos colores. */
.portada {
  background: #EBE5DB;
  padding: clamp(2.4rem, 4.6vw, 4.2rem) 0 clamp(2.2rem, 4.2vw, 3.8rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .portada { background: #201D1A; }
}
:root[data-tema="oscuro"] .portada { background: #201D1A; }

/* Menos aire entre secciones en la página de inicio, para que las
   series queden cerca de las obras destacadas */
body[data-pagina="inicio"] .seccion { padding: clamp(1.8rem, 3.6vw, 3.2rem) 0; }
body[data-pagina="inicio"] .seccion-titulo { margin-bottom: clamp(1.2rem, 2.4vw, 1.9rem); }
.portada + .seccion { padding-top: clamp(1.4rem, 2.8vw, 2.2rem); }

.portada-grilla {
  display: grid;
  grid-template-columns: .85fr 1.15fr;   /* la obra pesa más que el texto */
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Algo más chico que en el resto del sitio, porque su columna es angosta y
   el texto es largo: a mayor tamaño quedaba en seis renglones con cortes
   desprolijos. */
.portada h1 { font-size: clamp(1.5rem, 2.75vw, 2.55rem); margin-bottom: .5em; }
.portada .plomo { max-width: 46ch; }
.portada h1 em {
  font-style: italic;
  color: var(--acento);
}


/* --- La obra que abre la página ---------------------------------------
   Se presenta como una obra colgada: entera, sin recortes, con una sombra
   que la despega del papel y su ficha debajo. El límite de alto está en
   vh para que en pantallas bajas no empuje todo hacia abajo; el ancho va
   en auto para que la proporción de la obra se mantenga siempre. */
.portada-obra {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* La sombra es larga y suave, como la de un cuadro separado de la pared */
.portada-obra img {
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  box-shadow: 0 2px 8px rgba(23,21,15,.10), 0 40px 70px -30px rgba(23,21,15,.55);
}
/* La ficha es la cartela: chiquita, en versalitas, discreta */
.portada-obra figcaption {
  margin-top: 1rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
  text-align: center;
}
.obra-portada-titulo { color: var(--tinta-2); }

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

.dato-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
}
.dato-linea div { min-width: 90px; }
.dato-linea strong {
  display: block;
  font-family: var(--tipo-titulo);
  font-size: 1.6625rem;
  font-weight: 400;
  line-height: 1;
}
.dato-linea span {
  font-size: 0.63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* Secciones -------------------------------------------------------- */
.seccion { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.seccion-alterna { background: var(--fondo-2); }

.encabezado-pagina {
  padding: clamp(2.8rem, 6vw, 5rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}
.encabezado-pagina h1 { font-size: clamp(2.0125rem, 4.38vw, 3.4125rem); }

/* Presentación de la página en dos columnas: a la izquierda el texto, a la
   derecha una frase destacada. Sirve para que la página no se vea vacía a
   la derecha sin tener que estirar el renglón a un largo incómodo. */
.encabezado-doble {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.8rem, 4.5vw, 4rem);
  align-items: start;
}
.encabezado-doble .plomo { max-width: none; }

.destacado {
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.7rem);
  border-left: 1px solid var(--linea);
  font-family: var(--tipo-titulo);
  font-size: clamp(1.05rem, 1.65vw, 1.4rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--acento);
  text-wrap: balance;
}

/* Cuando la frase va sola, sin texto de presentación al lado */
.destacado-solo { max-width: 46ch; }

/* La frase al costado del título de una sección */
.seccion-titulo .destacado { max-width: 34ch; }

.seccion-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.seccion-titulo h2 { margin: 0; }

/* ------------------------------------------------ 5. Galería ------ */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  /* Poco aire: son tres grupos de filtros y, si respiran mucho, empujan las
     obras muy abajo. El último lleva algo más de margen, más abajo. */
  margin-bottom: .9rem;
}
.grupo-filtros:last-child .filtros { margin-bottom: 0; }
.filtro {
  padding: .55em 1.15em;
  font-family: var(--tipo-texto);
  font-size: 0.7175rem;
  font-weight: 400;
  color: var(--tinta-2);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transicion);
}
.filtro:hover { border-color: var(--tinta-2); color: var(--tinta); }
.filtro[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
}

.grupo-filtros { margin-bottom: .55rem; }
.grupo-filtros:last-child { margin-bottom: 1.6rem; }
.grupo-filtros-titulo {
  font-size: 0.6125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento);   /* «Técnica», «Acerca de» y «Serie», en azul */
  margin-bottom: .4rem;
}

/* Mosaico: columnas iguales, alturas libres. El orden se lee de izquierda
   a derecha; js/sitio.js calcula cuánto ocupa cada obra una vez cargada.
   Si el JavaScript no llegara a ejecutarse queda una grilla común. */
.galeria {
  --hueco: clamp(18px, 2.3vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  column-gap: var(--hueco);
  row-gap: var(--hueco);
  align-items: start;
}
.galeria.mosaico { row-gap: 0; grid-auto-rows: 4px; }

.obra {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
}

.obra-marco {
  display: block;
  margin-inline: auto;   /* las obras muy altas se angostan y quedan centradas */
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--fondo-2);
  box-shadow: var(--sombra);
  transition: box-shadow var(--transicion), transform var(--transicion);
  aspect-ratio: 4 / 5;              /* espacio reservado hasta que carga */
}
.obra-marco.lista { aspect-ratio: auto; }
.obra:hover .obra-marco { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

.obra-marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.obra-marco.lista img { height: auto; }
.obra:hover .obra-marco img { transform: scale(1.035); }

.obra-lupa {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--tinta);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transicion), transform var(--transicion);
}
.obra:hover .obra-lupa, .obra:focus-visible .obra-lupa { opacity: 1; transform: none; }
.obra-lupa svg { width: 17px; height: 17px; }

.obra-info { display: block; padding: .95rem .1rem 0; }
.obra-titulo {
  display: block;
  font-family: var(--tipo-titulo);
  font-size: 0.945rem;
  line-height: 1.25;
  margin: 0 0 .2rem;
}
.obra-ficha {
  display: block;
  font-size: 0.7175rem;
  color: var(--apagado);
  line-height: 1.4;
}

/* El nombre del grupo, debajo de la ficha de cada obra */
.obra-grupo {
  display: inline-block;
  margin-top: .45rem;
  font-size: 0.595rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--acento);
}

.sin-resultados {
  padding: 4rem 0;
  text-align: center;
  color: var(--apagado);
}

/* Texto de la serie elegida, arriba de sus obras. Es el lugar donde
   estos textos se leen enteros: en la portada va solo un adelanto.
   Sin fondo y con letra chica, para que acompañe a las obras en vez de
   competir con ellas. */
.nota-serie {
  margin: 1.4rem 0 2.4rem;   /* aire antes de que empiecen las obras */
  padding: .1rem 0 .1rem 1.3rem;
  border-left: 1px solid var(--linea);
  animation: entrada-nota .4s cubic-bezier(.22,.61,.36,1);
}
.nota-serie h2 {
  font-size: 1.0062rem;
  font-style: italic;
  font-weight: 400;
  color: var(--acento);
  margin: 0 0 .35rem;
}
.nota-serie p {
  margin: 0;
  /* Este texto sí ocupa el renglón entero: es el único del sitio sin
     límite de ancho, a pedido. */
  max-width: none;
  font-size: 0.7875rem;
  color: var(--apagado);
  line-height: 1.62;
}
@keyframes entrada-nota { from { opacity: 0; transform: translateY(-6px); } }

/* Visor de obra (lightbox) ----------------------------------------- */
.visor {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 96%, #000);
  backdrop-filter: blur(10px);
}
.visor.abierto { display: block; animation: aparecer .25s ease; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.visor-cuerpo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 8vh, 92px) clamp(16px, 7vw, 120px);
  gap: 1.2rem;
}
.visor-imagen {
  max-width: 100%;
  max-height: calc(100vh - 220px);
  width: auto;
  object-fit: contain;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  animation: acercar .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes acercar { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.visor-pie { text-align: center; max-width: 60ch; }
.visor-pie h3 { font-size: 1.1813rem; margin: 0 0 .25rem; }
.visor-pie p { font-size: 0.7438rem; color: var(--apagado); margin: 0; }

/* El z-index es imprescindible: el cuerpo del visor ocupa toda la pantalla
   y, sin esto, queda por encima de las flechas. El clic caía en el fondo y
   en vez de pasar de obra cerraba el visor. */
.visor-boton {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: var(--fondo);
  background: color-mix(in srgb, var(--fondo) 80%, transparent);
  color: var(--tinta);
  cursor: pointer;
  transition: all var(--transicion);
}
.visor-boton:hover { background: var(--tinta); color: var(--fondo); border-color: var(--tinta); }
.visor-boton svg { width: 20px; height: 20px; }
.visor-cerrar { top: 18px; right: 18px; }
.visor-anterior { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.visor-siguiente { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.visor-anterior:hover, .visor-siguiente:hover { transform: translateY(-50%); }

.visor-contador {
  position: absolute;
  z-index: 2;
  top: 26px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.6562rem;
  letter-spacing: .16em;
  color: var(--apagado);
}

/* ------------------------------------------------ 6. Bloques ------ */
/* Series */
.series {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
}
.serie {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.serie:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.serie-figura { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo-2); }
.serie-figura img { width: 100%; height: 100%; object-fit: cover; }
.serie-texto { padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; flex: 1; }
.serie-texto h3 { margin-bottom: .55rem; }
.serie-texto p { font-size: 0.8312rem; color: var(--tinta-2); }
.serie-texto .enlace-flecha { margin-top: auto; align-self: flex-start; padding-top: 1.4rem; }

/* Exposiciones */
.expos { display: flex; flex-direction: column; }
.expo {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-top: 1px solid var(--linea);
}
/* Con texto de sala la muestra pasa a tres columnas. Sin texto no se
   agrega esta clase y todo queda como estaba. */
/* La columna del medio se achica para que el texto de sala empiece más a la
   izquierda y tenga más lugar: en el medio solo hay título, lugar y fotos. */
.expo.con-sala { grid-template-columns: 190px 1fr 1.3fr; }

/* El texto de sala acompaña, no manda: chico, gris y con buen interlineado */
.expo-sala {
  font-size: 0.5125rem;   /* 8,2 px: es una nota al margen, no un texto para
                             leer de corrido. Las protagonistas de esta página
                             son la fecha y la muestra, no esta columna. */
  line-height: 1.8;
  max-width: 62ch;
  color: var(--apagado);
  border-left: 1px solid var(--linea);
  padding-left: clamp(.7rem, 1.2vw, 1rem);
}
.expo-sala p { margin: 0 0 .8em; }
.expo-sala p:last-child { margin-bottom: 0; }

/* Quién escribió el texto de sala */
.expo-sala-firma {
  margin-top: 1rem !important;
  font-style: italic;
  color: var(--tinta-2);
}

.expo:last-child { border-bottom: 1px solid var(--linea); }
/* Separador de año en el archivo de muestras anteriores */
.expo-anio {
  font-family: var(--tipo-titulo);
  font-size: 1.4rem;
  color: var(--apagado);
  margin: clamp(1.8rem, 3vw, 2.8rem) 0 0;
  padding-top: clamp(1.6rem, 2.8vw, 2.4rem);
  border-top: 1px solid var(--linea);
}
.expo-anio:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.expo-anio + .expo { border-top: 0; padding-top: .6rem; }

.expo-fecha {
  font-family: var(--tipo-titulo);
  font-size: 1.0062rem;
  line-height: 1.28;
  color: var(--tinta);
}
.expo-fecha small {
  display: block;
  font-family: var(--tipo-texto);
  font-size: 0.63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-top: .35rem;
}
.expo h3 { margin-bottom: .35rem; }
.expo-lugar { font-size: 0.805rem; color: var(--tinta-2); margin-bottom: .7rem; }
.expo p { font-size: 0.8312rem; color: var(--apagado); max-width: 62ch; }
/* Miniaturas de las fotos de una muestra */
.expo-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.1rem;
}
/* Las miniaturas van con ALTO fijo y ancho libre, no al revés. Las fotos
   de muestra son de todas las formas —afiches verticales, paredes muy
   apaisadas— y meterlas a la fuerza en un rectángulo igual para todas les
   cortaba media imagen. Así cada una se ve entera y la fila queda pareja
   de alto. El max-width solo frena a las larguísimas. */
.expo-foto {
  height: 96px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--fondo-2);
  box-shadow: var(--sombra);
  cursor: zoom-in;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.expo-foto img {
  height: 96px;
  width: auto;
  max-width: 168px;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.expo-foto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.expo-foto:hover img { transform: scale(1.05); }

.etiqueta {
  display: inline-block;
  padding: .3em .85em;
  font-size: 0.595rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-claro);
  border-radius: 999px;
}
.etiqueta-vigente { color: #fff; background: var(--acento); }

.aviso-vacio {
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  color: var(--apagado);
}

/* Textos */
.textos { display: flex; flex-direction: column; }

.texto {
  padding: clamp(2.2rem, 4vw, 3.4rem) 0;
  border-top: 1px solid var(--linea);
}
.texto:first-child { border-top: 0; padding-top: 0; }
.texto:last-child { border-bottom: 1px solid var(--linea); }

.texto-encabezado { margin-bottom: 1.3rem; }
.texto-fecha {
  display: block;
  font-size: 0.6125rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: .7rem;
}
.texto-encabezado h2 {
  font-size: clamp(1.3125rem, 2.28vw, 1.8375rem);
  margin: 0;
}

/* El tipo de texto —Reflexiones, Narrativa de obra— no es parte del título:
   va en la tipografía del texto, chico y en versalitas, para que se lea como
   una aclaración y no como parte del nombre. */
.texto-tipo {
  display: inline-block;
  margin-left: .6em;
  vertical-align: middle;
  font-family: var(--tipo-texto);
  font-size: 0.595rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
}

.texto-cuerpo p {
  font-size: clamp(0.79rem, 1.05vw, 0.85rem);
  line-height: 1.65;   /* más aireado que el resto, por ser lectura larga */
  color: var(--tinta-2);
}

/* La presentación de la página y los fragmentos comparten el mismo ancho de
   renglón, para que la columna se lea pareja de arriba abajo. Va en píxeles
   y no en "ch" porque el "ch" depende del tamaño de letra, y acá los dos
   textos tienen tamaños distintos: en ch no coincidirían. */
.contenedor-angosto .plomo,
.texto-cuerpo p { max-width: 784px; }
/* El primer párrafo entra apenas más grande y más oscuro, como una entrada */
.texto-cuerpo p:first-child {
  font-size: clamp(0.83rem, 1.13vw, 0.9rem);
  color: var(--tinta);
}

/* Bio */
.bio-grilla {
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.bio-lateral { position: sticky; top: 110px; }
.bio-lateral img { border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.bio-lateral .boton { margin-top: 1.4rem; width: 100%; justify-content: center; }

.bio-texto h2 { margin-top: 2.6rem; }
.bio-texto h2:first-child { margin-top: 0; }
/* La biografía es lectura larga, así que le vale lo mismo que a la página
   Textos: renglón contenido y un poco más de aire entre líneas. Sin esto
   el renglón llegaba a 104 caracteres —el más largo del sitio— y el
   bloque se veía más pesado que el resto, aunque la letra sea más chica. */
.bio-texto p {
  color: var(--tinta-2);
  max-width: 80ch;
  line-height: 1.6;
}
.bio-texto strong {
  font-weight: 500;
  color: var(--tinta);
}

.cita {
  margin: 2.6rem 0;
  padding: 1.6rem 0 1.6rem 1.8rem;
  border-left: 2px solid var(--acento);
  font-family: var(--tipo-titulo);
  font-size: clamp(1.1375rem, 1.93vw, 1.4875rem);
  font-style: italic;
  line-height: 1.32;
  color: var(--tinta);
}

/* Franja de llamado a la acción */
.franja {
  background: var(--tinta);
  color: var(--fondo);
  border-radius: var(--radio);
  padding: clamp(2.5rem, 5vw, 4.2rem);
  text-align: center;
}
.franja h2 { color: var(--fondo); }
.franja p { opacity: .78; max-width: 52ch; margin-inline: auto; }
.franja .boton { background: var(--fondo); color: var(--tinta); border-color: var(--fondo); margin-top: 1.8rem; }
.franja .boton:hover { background: var(--acento); border-color: var(--acento); color: #fff; }

/* ------------------------------------------------ 7. Formulario --- */
.contacto-grilla {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.campo { margin-bottom: 1.5rem; }
.campo label {
  display: block;
  font-size: 0.6475rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: .6rem;
}
.campo input,
.campo textarea {
  width: 100%;
  padding: .9em 1.05em;
  font-family: var(--tipo-texto);
  /* Los 16px van en px y no en rem a propósito: si un campo de formulario
     tiene la letra más chica que eso, el iPhone hace zoom solo apenas lo
     tocás y la página salta. No lo bajes de 16. */
  font-size: 16px;
  font-weight: 400;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 168px; resize: vertical; line-height: 1.5; }
.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-claro);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--apagado); opacity: .7; }

.campo-oculto { position: absolute; left: -9999px; opacity: 0; height: 0; }

.mensaje-form {
  margin-top: 1.2rem;
  padding: 1em 1.2em;
  border-radius: var(--radio);
  font-size: 0.805rem;
  display: none;
}
.mensaje-form.visible { display: block; }
.mensaje-form.ok { background: var(--acento-claro); color: var(--acento); }
.mensaje-form.error { background: var(--fondo-2); color: var(--tinta); border: 1px solid var(--linea); }

.tarjeta-datos {
  background: var(--fondo-2);
  border-radius: var(--radio);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.tarjeta-datos h3 { font-size: 1.05rem; }
.dato { padding: 1.1rem 0; border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: 0; padding-bottom: 0; }
.dato span {
  display: block;
  font-size: 0.6125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: .25rem;
}
.dato a, .dato p { font-size: 0.875rem; color: var(--tinta); word-break: break-word; margin: 0; }
.dato a:hover { color: var(--acento); }

/* ------------------------------------------------ 8. Pie ---------- */
.pie {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  padding: clamp(2.8rem, 5vw, 4rem) 0 2.2rem;
  border-top: 1px solid var(--linea);
}
.pie-grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.6rem;
}
.pie-marca .marca-nombre { font-size: 1.4rem; }
.pie-grilla p { font-size: 0.805rem; color: var(--apagado); max-width: 34ch; margin-top: .9rem; }
.pie h4 {
  font-family: var(--tipo-texto);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 1rem;
}
.pie-lista { display: flex; flex-direction: column; gap: .55rem; }
.pie-lista a { font-size: 0.8312rem; color: var(--tinta-2); transition: color var(--transicion); }
.pie-lista a:hover { color: var(--acento); }

.pie-abajo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
  font-size: 0.7175rem;
  color: var(--apagado);
}
.pie-redes { display: flex; gap: .4rem; }

/* Animación de aparición al hacer scroll */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.revelar.visible { opacity: 1; transform: none; }

.sr-solo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body.sin-scroll { overflow: hidden; }

/* ------------------------------------------------ Responsive ------ */
@media (max-width: 1080px) {
  .portada-grilla { grid-template-columns: 1fr; }
  /* En pantallas angostas la obra va primero: es lo que la persona vino a ver */
  .portada-obra { order: -1; }
  .portada-obra img { max-height: 50vh; }
  .bio-grilla { grid-template-columns: 1fr; }
  .bio-lateral { position: static; max-width: 420px; }
  .contacto-grilla { grid-template-columns: 1fr; }
  .series { grid-template-columns: 1fr 1fr; }
  .expo { grid-template-columns: 150px 1fr; }
  .expo.con-sala { grid-template-columns: 150px 1fr 1.25fr; }
}

@media (max-width: 860px) {
  /* En pantallas angostas la frase destacada pasa debajo del texto */
  .encabezado-doble { grid-template-columns: 1fr; gap: 1.4rem; }
  .menu, .cabecera-acciones .escritorio { display: none; }
  .hamburguesa { display: inline-flex; }
  .pie-grilla { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 0.9362rem; }   /* en el teléfono, un poco más grande que en la compu */
  .cabecera-fila { height: 66px; gap: .6rem; }
  .marca-nombre { font-size: 19px; }
  .marca-bajada { font-size: 10px; letter-spacing: .2em; }
  .cabecera-acciones { gap: .05rem; }
  .icono-boton { width: 38px; height: 38px; }
  .logo-cabecera { width: 46px; height: 46px; margin-right: .15rem; }
  .logo-cabecera img { width: 44px; height: 44px; }
  .menu-movil { inset: 66px 0 0; }
  .menu-movil a { font-size: 23px; }
  .series { grid-template-columns: 1fr; }
  /* en el teléfono todo va en una columna y el texto de sala queda al pie */
  .expo, .expo.con-sala { grid-template-columns: 1fr; gap: .8rem; }
  .expo-sala { border-left: 0; padding-left: 0; }
  .expo-fecha { order: -1; }
  .expo-foto, .expo-foto img { height: 80px; }
  .expo-foto img { max-width: 140px; }
  .visor-cuerpo { padding: 68px 12px 96px; }
  .visor-imagen { max-height: calc(100vh - 230px); }
  .visor-anterior { left: 12px; }
  .visor-siguiente { right: 12px; }
  .visor-boton { width: 42px; height: 42px; }
  .portada-acciones .boton { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .revelar { opacity: 1; transform: none; }
}