/* ============================================================
   NORTEARTE — La base del sitio
   Combinación: diseño brutalista de propuesta C + rail lateral
   de propuesta F + video bg en el hero + galería fusionada
   (artistas+obras) en scroll horizontal.
   ============================================================ */

body.sitio {
  background: var(--color-texto);
  color: var(--color-fondo-claro);
  overflow-x: clip;
  overflow-x: hidden;
}

/* ============================================================
   RAIL LATERAL (de propuesta F)
   ============================================================ */
.sitio {
  --rail-w: 96px;
  --rail-bg:        rgba(20, 20, 22, 0.92);
  --rail-text:      rgba(243, 243, 243, 0.62);
  --rail-text-on:   #F3F3F3;
  --rail-divider:   rgba(243, 243, 243, 0.14);
}

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail-w);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 0 1.25rem;
  background: var(--rail-bg);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  color: var(--rail-text);
  border-right: 1px solid var(--rail-divider);
}

.rail__logo {
  display: block;
  width: 44px;
  margin-bottom: 1rem;
}
.rail__logo img {
  filter: invert(1);
  width: 100%;
}

.rail__divider {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--rail-divider);
  margin: 1rem 0;
}

.rail__nav {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
}
.rail__nav ol {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  width: 100%;
  list-style: none;
}
.rail__nav li {
  display: flex;
  justify-content: center;
}

.rail__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0.5rem;
  width: 100%;
  text-align: center;
  color: var(--rail-text);
  transition: color 0.3s ease, letter-spacing 0.3s ease;
}

/* Indicador activo: barra vertical terracota que crece desde el centro */
.rail__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--color-principal);
  transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Dot terracota que aparece junto al nombre en hover (feedback sutil) */
.rail__link::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--color-principal);
  border-radius: 50%;
  transform: translate(-8px, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
}

.rail__name {
  font-family: var(--font-primaria);  /* Cabinet Grotesk — más editorial que condensed */
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* HOVER: texto se brillanta, dot aparece, leve slide */
.rail__link:hover {
  color: var(--rail-text-on);
}
.rail__link:hover::after {
  transform: translate(0, -50%) scale(1);
  opacity: 1;
}
.rail__link:hover .rail__name {
  transform: translateX(4px);
}

/* ACTIVO: terracota en texto + barra vertical aparece */
.rail__link.is-active {
  color: var(--color-principal);
}
.rail__link.is-active::before {
  height: 28px;
}
.rail__link.is-active .rail__name {
  font-weight: 700;
}
/* Cuando está activo, el dot del hover NO debe mostrarse */
.rail__link.is-active::after {
  display: none;
}

.rail__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}
.rail__vert {
  font-family: var(--font-condensed);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rail-text);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ============================================================
   MAIN — Empuja el contenido a la derecha del rail
   ============================================================ */
.main {
  margin-left: var(--rail-w);
}

/* ============================================================
   MARQUEE BAND — banda corrediza entre hero y artistas
   Full-width (incluso detrás del rail) para continuidad visual
   con el video del hero. Usa @keyframes marquee (legacy del hero).
   ============================================================ */
.marquee-banda {
  width: 100vw;
  margin-left: calc(var(--rail-w) * -1);  /* mismo truco que .hero: extiende al ancho total */
  padding: 1.25rem 0;
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.18);
  border-bottom: 1px solid rgba(var(--color-fondo-claro-rgb), 0.18);
  background: var(--color-texto);
  overflow: hidden;
  position: relative;
}

.marquee-banda__track {
  display: flex;
  gap: 0;
  /* 40s con 4 spans — más rápido pero todavía legible */
  animation: marquee 40s linear infinite;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  white-space: nowrap;
  will-change: transform;
}

.marquee-banda__track span {
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Iconos de redes sociales dentro del marquee — heredan color del texto */
.marquee-icon {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-banda__track { animation-duration: 200s; }
}

/* ============================================================
   TAG — etiqueta condensed all-caps (compartida)
   ============================================================ */
.tag {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-principal);
  display: inline-block;
}

/* ============================================================
   §01 HERO · Video a pantalla COMPLETA (incluso detrás del rail)
   El rail queda flotando encima con su backdrop blur.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;  /* small-viewport-height: respeta barras del navegador móvil */
  /* Trucos para que el hero ignore el margin-left del .main y
     se extienda a TODO el ancho del viewport */
  width: 100vw;
  margin-left: calc(var(--rail-w) * -1);
  background: var(--color-texto);  /* fallback mientras carga */
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 1.5rem 1rem;
  padding: 0 2rem;
  flex: 1;
  position: relative;
  z-index: 1;
}

.hero__label {
  grid-column: 2 / span 8;
  grid-row: 1;
  align-self: end;
  padding-bottom: 1rem;
}

.hero__title {
  grid-column: 1 / span 24;
  grid-row: 2;
  font-family: var(--font-primaria);
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0;
  white-space: nowrap;
  position: relative;
  left: -1vw;
}

.hero__word {
  display: inline-block;
}

.hero__word--norte {
  font-weight: 900;
  color: var(--color-fondo-claro);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero__word--arte {
  font-weight: 300;
  font-style: italic;
  font-family: var(--font-secundaria);
  color: var(--color-principal);
  background-image: url('../../../shared/images/gradientes/010.png');
  background-size: 300% 300%;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hero-word-grad 18s ease-in-out infinite;
}

@keyframes hero-word-grad {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero__claim {
  grid-column: 2 / span 14;
  grid-row: 3;
  align-self: end;
  padding-top: 2rem;
}

.hero__claim p {
  font-family: var(--font-primaria);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-fondo-claro);
  margin-bottom: 2rem;
  max-width: 22ch;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.hero__claim p em {
  font-style: italic;
  font-weight: 700;
  color: var(--color-principal);
}

.hero__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.5);
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-fondo-claro);
  background: rgba(20, 20, 22, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.hero__cta-num {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--color-principal);
}

.hero__cta:hover {
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  border-color: var(--color-principal);
}

.hero__cta:hover .hero__cta-num {
  color: var(--color-fondo-claro);
}

/* Marquee inferior del hero */
.hero__marquee {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 3rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.25);
  border-bottom: 1px solid rgba(var(--color-fondo-claro-rgb), 0.25);
  overflow: hidden;
  width: 100%;
  background: rgba(20, 20, 22, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__marquee-track {
  display: flex;
  gap: 0;
  animation: marquee 50s linear infinite;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  white-space: nowrap;
}

.hero__marquee-track span {
  padding: 0 0.5rem;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   TÍTULO GRANDE (sistema reutilizable)
   ============================================================ */
.big-title {
  font-family: var(--font-primaria);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-size: clamp(3rem, 9vw, 9rem);
  margin: 0;
  text-wrap: balance;  /* impeccable: titulares con line-length parejo */
}

.big-title__line {
  display: block;
  color: var(--color-fondo-claro);
}

.big-title__line--accent {
  color: var(--color-principal);
}

.big-title__line--light {
  font-weight: 300;
  font-style: italic;
  font-family: var(--font-secundaria);
  color: rgba(var(--color-fondo-claro-rgb), 0.5);
}

.big-title__line--shift {
  margin-left: 0.6em;
}

/* ============================================================
   §02 ARTISTAS — Asimétrico, N destacados
   Layout escalable: usa :nth-child para que el patrón asimétrico
   se repita cíclicamente sin importar cuántos artistas haya.
   El WordPress llena el grid; CSS se encarga del rítmo visual.
   ============================================================ */
.artistas {
  padding: 0 0 8rem;  /* solo bottom — el top/horizontal lo maneja .artistas__inner */
}

/* Wrapper interno: aplica el padding "normal" al contenido,
   pero el .marquee-banda (hermano) escapa para ser full-viewport */
.artistas__inner {
  /* Padding lateral amplio (estilo Framer) → las piezas no tocan los bordes
     y el grid se encoge a un tamaño de imagen más contenido. */
  padding: 2rem clamp(2rem, 7vw, 8rem) 0;
}

.artistas__head {
  margin-bottom: 3rem;
  max-width: 900px;
}

.artistas__head .tag {
  display: block;
}

.artistas__grid {
  /* Layout editorial escalonado (zigzag con aire) — 5 publicaciones.
     Grid de 12 columnas; cada slot ocupa un rango de columnas y su propia
     fila, alternando lado izquierdo/derecho. Las columnas vacías a los lados
     y el row-gap generoso crean el "aire" del boceto. Proporción del slot
     fija por nth-child (4:3 o 16:9 el central), no por la imagen subida. */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  /* row-gap generoso → más "aire" vertical entre las bandas (superior,
     central, inferior); la galería se siente más espaciada al hacer scroll. */
  row-gap: clamp(8rem, 16vw, 19rem);
  /* align-items: start → cada card mide solo su contenido (imagen + caption),
     no se estira a la altura de la fila. Sin esto, una card más corta que su
     vecina queda con área vacía dentro del <a> que igual tendría cursor pointer
     y dispararía el hover. Así el cursor/efecto se limita a la imagen real. */
  align-items: start;
  position: relative;
}

/* Si el grid está vacío (0 publicaciones), se oculta y muestra .artistas__empty */
.artistas__grid:empty {
  display: none;
}

.artista-card {
  position: relative;
  /* La card es un <a> entero — neutralizar color/underline default del link. */
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ----------------------------------------------------------
   Posiciones escalonadas — 5 slots en zigzag.
   Cada uno en su propia grid-row → se apilan verticalmente; el
   zigzag horizontal viene del rango de columnas alterno. margin-top
   negativo solapa ligeramente con el slot anterior (efecto diagonal).
   ---------------------------------------------------------- */
/* Banda superior: izquierda (baja) + derecha (arriba) */
.artista-card:nth-child(1) {  /* IZQUIERDA superior · horizontal · baja (más) */
  grid-column: 1 / 7;
  grid-row: 1;
  margin-top: 24rem;
}
.artista-card:nth-child(2) {  /* DERECHA superior · horizontal · arriba */
  grid-column: 8 / 13;
  grid-row: 1;
}
/* Banda media: pieza central grande */
.artista-card:nth-child(3) {  /* CENTRO · la pieza más grande */
  grid-column: 4 / 11;
  grid-row: 2;
}
/* Banda inferior: derecha (arriba) + izquierda (baja).
   Mismo lado/tamaño que antes, pero el escalonado vertical invertido:
   la de la derecha sube, la de la izquierda baja. */
.artista-card:nth-child(4) {  /* DERECHA inferior · horizontal grande · arriba */
  grid-column: 7 / 13;
  grid-row: 3;
}
.artista-card:nth-child(5) {  /* IZQUIERDA inferior · baja (más) */
  grid-column: 1 / 6;
  grid-row: 3;
  margin-top: 22rem;
}

.artista-card__num {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
  display: block;
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------
   Composición ARTÍSTICA — máximo 6 cards.
   Cada card tiene span de columna, margin-top y rotación únicos.
   Z-index varía para que el orden de "capas" sea intencional.
   Hover: la card se endereza y sube — efecto delight.
   ---------------------------------------------------------- */
/* Hover: la card sube ligeramente */
.artista-card:hover {
  transform: translateY(-8px);
  z-index: 10;
}

/* Cap: si WP renderiza más de 5, las extras se ocultan
   (la home tiene máximo 5 destacadas; el directorio completo está en /artistas) */
.artista-card:nth-child(n + 6) { display: none; }

.artista-card__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;  /* default = horizontal. La pieza 5 usa 3:4 vertical */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  color: var(--color-fondo-claro);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-color: var(--color-principal);  /* fallback iniciales */
}

/* Pieza central — misma proporción 4:3 pero más grande (ocupa más columnas) */
.artista-card--hero .artista-card__photo {
  aspect-ratio: 4 / 3;
}

/* Pieza vertical (última de la galería) — retrato 3:4 */
.artista-card--vertical .artista-card__photo {
  aspect-ratio: 3 / 4;
}

/* La imagen subida se encaja con cover + center. En WP, el campo "punto
   focal" (ACF) reemplaza el center por el object-position elegido. */
.artista-card__photo img {
  object-position: center;
}

/* Cuando hay foto real (WP: has_post_thumbnail()), la <img> cubre el bloque
   y oculta visualmente el span de iniciales. La foto se muestra en color
   original (sin filtro ni tinte). Solo zoom leve en hover. */
.artista-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.artista-card:hover .artista-card__photo img {
  transform: scale(1.04);
}

/* (efecto de mover la foto separado se removió: ahora toda la card
   se anima con rotación + lift en hover) */

/* Colores rotativos cada 3 cards: terracota, azul, oliva */
.artista-card:nth-child(3n + 1) .artista-card__photo { background-color: var(--color-principal); }
.artista-card:nth-child(3n + 2) .artista-card__photo { background-color: var(--color-secundario); }
.artista-card:nth-child(3n + 3) .artista-card__photo { background-color: var(--color-terciario); }

/* Compatibilidad con modificadores legacy (por si quedan en algún HTML) */
.artista-card__photo--principal { background-color: var(--color-principal); }
.artista-card__photo--secundario { background-color: var(--color-secundario); }
.artista-card__photo--terciario { background-color: var(--color-terciario); }

/* Caption editorial: "Nombre — Título" a la izquierda · "Año" a la derecha,
   en una sola línea con space-between (estilo portafolio de la referencia). */
.artista-card__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.artista-card__label {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.02em;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  line-height: 1.3;
}
.artista-card__label strong {
  font-weight: 700;
  color: var(--color-fondo-claro);
}

.artista-card__anio {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.04em;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Empty state: aparece automáticamente si el grid está vacío
   ---------------------------------------------------------- */
.artistas__empty {
  display: none;  /* oculto por defecto */
  max-width: 700px;
  padding: 4rem 2rem;
  border: 1px dashed rgba(var(--color-fondo-claro-rgb), 0.25);
  background: rgba(var(--color-fondo-claro-rgb), 0.02);
}

.artistas__grid:empty + .artistas__empty {
  display: block;  /* aparece si el grid es :empty */
}

.artistas__empty .tag {
  display: block;
  margin-bottom: 1rem;
}

.artistas__empty h3 {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-fondo-claro);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.artistas__empty p {
  font-family: var(--font-secundaria);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  text-wrap: pretty;
}

/* CTA brutalist horizontal — barra a todo lo ancho al final de la sección
   Estructura: [tag izq] [label gigante centro] [flecha der] */
.artistas__cta-wrap {
  margin-top: clamp(5rem, 9vw, 9rem);
}

/* Barra full-width compacta: label centrado + flecha derecha.
   Versión más pequeña que la original (menos padding, texto menor). */
.artistas__cta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* vacío · label centrado · arrow derecha */
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: clamp(0.9rem, 1.6vw, 1.25rem) clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.25);
  background: transparent;
  color: var(--color-fondo-claro);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.artistas__cta:hover {
  background: var(--color-principal);
  border-color: var(--color-principal);
}

.artistas__cta-label {
  grid-column: 2;
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
}

.artistas__cta-arrow {
  grid-column: 3;
  font-family: var(--font-primaria);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  color: var(--color-principal);
  line-height: 1;
  justify-self: end;
  transition: color 0.3s ease, transform 0.3s ease;
}

.artistas__cta:hover .artistas__cta-arrow {
  color: var(--color-fondo-claro);
  transform: translateX(8px);
}

/* ============================================================
   GALERÍA (legacy — ya no se usa en home, pero se conserva
   por si en el futuro se reactiva el patrón de obras).
   ============================================================ */
.galeria {
  padding: 8rem 0 6rem;
  background: var(--color-texto);
}

.galeria__head {
  padding: 0 2rem;
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: end;
}

.galeria__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.galeria__intro {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  max-width: 40ch;
  text-wrap: pretty;
}

.galeria__intro em {
  font-style: italic;
  color: var(--color-principal);
  font-weight: 400;
}

.galeria__scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 320px;
  gap: 2rem;
  padding: 4rem 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-principal) transparent;
}

.galeria__scroll::-webkit-scrollbar {
  height: 6px;
}
.galeria__scroll::-webkit-scrollbar-track {
  background: rgba(var(--color-fondo-claro-rgb), 0.08);
}
.galeria__scroll::-webkit-scrollbar-thumb {
  background: var(--color-principal);
}

.obra-card {
  scroll-snap-align: start;
  transform: translateY(var(--offset, 0));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}

.obra-card:hover {
  transform: translateY(calc(var(--offset, 0) - 6px));
}

.obra-card__num {
  position: absolute;
  top: -2rem;
  left: 0;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
}

/* NUEVO — Nombre del artista destacado arriba del título */
.obra-card__artista {
  display: block;
  font-family: var(--font-primaria);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: var(--color-fondo-claro);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--color-principal-rgb), 0.5);
}

.obra-card figure {
  margin: 0 0 1.25rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}

.obra-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}

.obra-card figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(var(--color-principal-rgb), 0) 0%,
    rgba(var(--color-secundario-rgb), 0.5) 100%);
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.obra-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.2);
}

.obra-card:hover figure::after {
  opacity: 1;
}

.obra-card h3 {
  font-family: var(--font-primaria);
  font-weight: 500;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--color-fondo-claro);
  margin-bottom: 0.5rem;
}

.obra-card .meta {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  line-height: 1.5;
}

/* Card especial al final del scroll — "Ver más artistas →" */
.galeria__cta-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 2rem 1.5rem;
  border: 1px dashed rgba(var(--color-fondo-claro-rgb), 0.4);
  background: rgba(var(--color-principal-rgb), 0.06);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.galeria__cta-card:hover {
  background: rgba(var(--color-principal-rgb), 0.16);
  border-color: var(--color-principal);
  transform: translateY(-6px);
}

.galeria__cta-card__num {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
}

.galeria__cta-card h3 {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-fondo-claro);
}

.galeria__cta-card p {
  font-family: var(--font-secundaria);
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(var(--color-fondo-claro-rgb), 0.75);
}

.galeria__cta-card__arrow {
  margin-top: auto;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
}

/* ============================================================
   MANIFESTO — bloques de color planos
   ============================================================ */
.manifesto {
  position: relative;
  padding: 10rem 2rem;
  background: var(--color-texto);
  overflow: hidden;
  isolation: isolate;
}

.manifesto__block {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.manifesto__block--principal {
  background-color: var(--color-principal);
  top: 0;
  right: -5%;
  width: 35vw;
  height: 60%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%);
}

.manifesto__block--secundario {
  background-color: var(--color-secundario);
  bottom: -5%;
  left: -5%;
  width: 28vw;
  height: 50%;
  clip-path: polygon(0 30%, 100% 0, 75% 100%, 0 100%);
}

.manifesto__text {
  position: relative;
  max-width: 950px;
  margin: 0 auto;
}

.manifesto__text .tag {
  color: var(--color-fondo-claro);
  opacity: 0.6;
  display: block;
  margin-bottom: 2rem;
}

.manifesto__text p {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--color-fondo-claro);
}

.manifesto__text p em {
  font-family: var(--font-secundaria);
  font-style: italic;
  font-weight: 300;
  color: var(--color-principal);
}

/* ============================================================
   §03 SOBRE NOSOTROS (brutalist con números gigantes)
   ============================================================ */
/* ============================================================
   SOBRE — manifiesto + contacto (izquierda) · logo (derecha)
   ============================================================ */
.sobre {
  padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 7vw, 8rem) clamp(5rem, 9vw, 9rem);
  background: var(--color-texto);
  position: relative;
}

.sobre__head {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.sobre__head .tag {
  display: block;
}

.sobre__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;  /* texto más ancho que el logo */
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
}

/* Columna izquierda */
.sobre__manifiesto {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.6;
  color: rgba(var(--color-fondo-claro-rgb), 0.85);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  text-wrap: pretty;
  max-width: 60ch;
}

.sobre__contacto-titulo {
  font-family: var(--font-primaria);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: var(--color-fondo-claro);
  margin: 0 0 1.5rem;
}

.sobre__datos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sobre__datos li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sobre__dato-label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-principal);
}
.sobre__datos a,
.sobre__datos li > span:last-child {
  font-family: var(--font-secundaria);
  font-size: 1rem;
  color: rgba(var(--color-fondo-claro-rgb), 0.85);
  text-decoration: none;
  transition: color 0.25s ease;
}
.sobre__datos a:hover {
  color: var(--color-principal);
}

/* Columna derecha — logo en blanco, sin fondo (sobre el oscuro de la sección).
   justify-content: flex-end → el logo se alinea al borde derecho de su columna,
   así su margen al borde de la ventana iguala el padding izquierdo del texto
   (mismo "aire" en ambos lados de la sección). */
.sobre__logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sobre__logo img {
  width: 100%;
  max-width: 440px;
  height: auto;
  /* Logo a blanco para contrastar con el fondo oscuro de la sección */
  filter: brightness(0) invert(1);
}

/* ============================================================
   SOBRE-BRUT (legacy — versión anterior de la sección, conservada
   por si se reactiva; ya no se usa en index.html)
   ============================================================ */
.sobre-brut {
  padding: 3rem 2rem 6rem;
  background: var(--color-texto);
  position: relative;
}

.sobre-brut__head {
  margin-bottom: 5rem;
  max-width: 900px;
}

.sobre-brut__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.sobre-brut__cuerpo {
  max-width: 800px;
  margin-bottom: 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sobre-brut__lead {
  font-family: var(--font-secundaria);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-fondo-claro);
}

.sobre-brut__lead strong {
  font-family: var(--font-primaria);
  font-weight: 900;
  color: var(--color-principal);
}

.sobre-brut__manifesto {
  font-family: var(--font-secundaria);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(var(--color-fondo-claro-rgb), 0.75);
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-principal);
  max-width: 65ch;
  text-wrap: pretty;
}

.sobre-brut__lead {
  text-wrap: pretty;
  max-width: 65ch;
}

.pagina-head__lead,
.artista-timeline-card .bio {
  text-wrap: pretty;
}

.sobre-brut__cta {
  align-self: flex-start;
}

.sobre-brut__nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
}

.sobre-brut__nums > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sobre-brut__big {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-fondo-claro);
}

.sobre-brut__nums > div:nth-child(1) .sobre-brut__big { color: var(--color-principal); }
.sobre-brut__nums > div:nth-child(2) .sobre-brut__big { color: var(--color-secundario); }
.sobre-brut__nums > div:nth-child(3) .sobre-brut__big { color: var(--color-fondo-claro); }
.sobre-brut__nums > div:nth-child(4) .sobre-brut__big { color: var(--color-terciario); }

.sobre-brut__nums .tag {
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
}

/* ============================================================
   §04 NOTICIAS / BLOG (blocks asimétricos)
   ============================================================ */
.noticias-brut {
  padding: 10rem 2rem 8rem;
  background: var(--color-texto);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.noticias-brut__block {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.noticias-brut__block--principal {
  background-color: var(--color-principal);
  top: 0;
  left: -3%;
  width: 25vw;
  height: 35%;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.noticias-brut__block--secundario {
  background-color: var(--color-secundario);
  bottom: -3%;
  right: -3%;
  width: 22vw;
  height: 28%;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}

.noticias-brut__head {
  margin-bottom: 5rem;
  max-width: 900px;
}

.noticias-brut__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.nots {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem 2rem;
}

.nota {
  position: relative;
  padding: 2rem 1.5rem 2rem;
  background: var(--color-fondo-claro);
  color: var(--color-texto);
  border-top: 4px solid var(--color-texto);
}

.nota--1 { grid-column: 1 / span 5; margin-top: 0; }
.nota--2 { grid-column: 7 / span 5; margin-top: 5rem; }
.nota--3 { grid-column: 3 / span 6; margin-top: 2rem; }

.nota__num {
  position: absolute;
  top: -1px;
  right: 1.25rem;
  background: var(--color-texto);
  color: var(--color-fondo-claro);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

.nota__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.nota__head .tag { color: var(--color-principal); }

.nota__head time {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(var(--color-texto-rgb), 0.55);
}

.nota h3 {
  font-family: var(--font-primaria);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.85rem;
}

.nota p {
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(var(--color-texto-rgb), 0.85);
  margin-bottom: 1.25rem;
}

.nota p em { font-style: italic; }

.nota__cta {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--color-principal);
  border-bottom: 1px solid var(--color-principal);
  padding-bottom: 0.25rem;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.nota__cta:hover {
  transform: translateX(4px);
}

/* Wrap del CTA "Ver todas las noticias" — espacio sobre las notas */
.noticias-brut__cta-wrap {
  margin-top: 4rem;
  display: flex;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}

/* ============================================================
   §05 CONTACTO brutalist
   ============================================================ */
.contacto-brut {
  padding: 3rem 2rem 6rem;
  background: var(--color-texto);
  position: relative;
}

.contacto-brut__head {
  margin-bottom: 5rem;
  max-width: 1100px;
}

.contacto-brut__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.contacto-brut__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 5rem;
  align-items: start;
}

.contacto-brut__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.contacto-brut .campo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contacto-brut .campo--full { grid-column: 1 / -1; }

.contacto-brut .campo label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-principal);
}

.contacto-brut .campo input,
.contacto-brut .campo select,
.contacto-brut .campo textarea {
  font-family: var(--font-secundaria);
  font-size: 1rem;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--color-fondo-claro);
  color: var(--color-fondo-claro);
  padding: 0.85rem 0;
  outline: 0;
  transition: border-color 0.2s ease, padding-left 0.2s ease;
}

.contacto-brut .campo input::placeholder,
.contacto-brut .campo textarea::placeholder {
  color: rgba(var(--color-fondo-claro-rgb), 0.35);
}

.contacto-brut .campo input:focus,
.contacto-brut .campo select:focus,
.contacto-brut .campo textarea:focus {
  border-bottom-color: var(--color-principal);
  padding-left: 0.5rem;
}

.contacto-brut .campo select { appearance: none; cursor: pointer; }
/* Dropdown acorde al sitio: fondo oscuro, texto crema, opción activa terracota */
.contacto-brut .campo select option {
  color: var(--color-fondo-claro);
  background: #1a1a1c;
}
.contacto-brut .campo select option:checked,
.contacto-brut .campo select option:hover {
  color: #fff;
  background: var(--color-principal);
}
.contacto-brut .campo textarea { resize: vertical; min-height: 140px; }

.contacto-brut__submit {
  grid-column: 1 / -1;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2.25rem;
  background: var(--color-principal);
  color: var(--color-texto);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contacto-brut__submit:hover {
  background: var(--color-fondo-claro);
  color: var(--color-texto);
  transform: translateY(-2px);
}

.contacto-brut__info {
  display: grid;
  gap: 1.25rem;
}

/* En lugar de side-stripe borders (anti-patrón), usamos full borders
   con color de marca por posición. Mismo efecto codificador sin la cliché. */
.contacto-brut__info > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(var(--color-principal-rgb), 0.4);
  background: rgba(var(--color-principal-rgb), 0.04);
}

.contacto-brut__info > div:nth-child(2) {
  border-color: rgba(var(--color-secundario-rgb), 0.4);
  background: rgba(var(--color-secundario-rgb), 0.04);
}
.contacto-brut__info > div:nth-child(3) {
  border-color: rgba(var(--color-terciario-rgb), 0.4);
  background: rgba(var(--color-terciario-rgb), 0.04);
}
.contacto-brut__info > div:nth-child(4) {
  border-color: rgba(var(--color-fondo-claro-rgb), 0.25);
  background: rgba(var(--color-fondo-claro-rgb), 0.03);
}

.contacto-brut__info p {
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(var(--color-fondo-claro-rgb), 0.85);
}

.contacto-brut__info a {
  transition: color 0.2s ease;
}

.contacto-brut__info a:hover { color: var(--color-principal); }

/* ============================================================
   FOOTER tipográfico
   ============================================================ */
.footer {
  padding: 5rem 2rem 2rem calc(var(--rail-w) + 2rem);  /* respeta el rail lateral */
  background: var(--color-texto);
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.12);
  position: relative;
  overflow: hidden;
}

.footer__giant {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 16rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  white-space: nowrap;
  margin-bottom: 4rem;
  position: relative;
  left: -1vw;
  background-image: url('../../../shared/images/gradientes/013.png');
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--color-fondo-claro);
  transition: background-position 2.5s ease;
  cursor: default;
}

.footer__giant:hover {
  background-position: 100% 50%;
  -webkit-text-stroke: 1.5px transparent;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(var(--color-fondo-claro-rgb), 0.12);
}

.footer__col .tag {
  display: block;
  margin-bottom: 1.5rem;
  color: rgba(var(--color-fondo-claro-rgb), 0.5);
}

.footer__col p {
  font-family: var(--font-secundaria);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--color-fondo-claro-rgb), 0.8);
}

.footer__col a {
  transition: color 0.25s ease;
}

.footer__col a:hover {
  color: var(--color-principal);
}

.footer__copy {
  margin-top: 2rem;
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(var(--color-fondo-claro-rgb), 0.4);
}

/* ============================================================
   PÁGINA INTERNA — Header compacto (artistas.html)
   Pegado al borde superior — sin título gigante, solo back link
   + lead paragraph
   ============================================================ */
.pagina-head {
  padding: 2rem 2rem 1.5rem;
  background: var(--color-texto);
  position: relative;
}

.pagina-head__back {
  display: inline-block;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.5);
  margin-bottom: 1.5rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.pagina-head__back:hover {
  color: var(--color-principal);
  transform: translateX(-4px);
}

.pagina-head__lead {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  max-width: 55ch;
  margin: 0;
}

.pagina-head__lead em {
  font-style: italic;
  color: var(--color-principal);
  font-weight: 400;
}

/* ============================================================
   FILTROS DEL DIRECTORIO (artistas.html)
   ============================================================ */
.artistas-filtros {
  margin: 0 2rem 2rem;
  padding: 1.5rem 1.75rem;
  background: rgba(var(--color-fondo-claro-rgb), 0.04);
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.14);
  display: grid;
  /* 5 filtros equilibrados (Buscar 1.5fr porque es input de texto, los demás
     son selects compactos). Las acciones (contador + botón) van en fila
     aparte spanneando todo el ancho. */
  grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
  gap: 1.5rem 1.25rem;
  align-items: end;
}

.filtro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.filtro label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-principal);
}

.filtro input,
.filtro select {
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(var(--color-fondo-claro-rgb), 0.35);
  color: var(--color-fondo-claro);
  padding: 0.6rem 0;
  outline: 0;
  width: 100%;
  transition: border-color 0.2s ease, padding-left 0.2s ease;
}

.filtro input::placeholder {
  color: rgba(var(--color-fondo-claro-rgb), 0.35);
}

.filtro input:focus,
.filtro select:focus {
  border-bottom-color: var(--color-principal);
  padding-left: 0.4rem;
}

.filtro select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-principal) 50%),
                    linear-gradient(135deg, var(--color-principal) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% + 2px), calc(100% - 6px) calc(50% + 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}

.filtro select option {
  background: #1a1a1c;
  color: var(--color-fondo-claro);
}
.filtro select option:checked,
.filtro select option:hover {
  color: #fff;
  background: var(--color-principal);
}

.artistas-filtros__acciones {
  /* Spannea las 5 columnas → vive en su propia fila debajo de los filtros.
     Contador a la izquierda, botón Limpiar a la derecha. */
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding-top: 1rem;
  margin-top: 0.25rem;
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.08);
  white-space: nowrap;
}

.artistas-filtros__contador {
  font-family: var(--font-primaria);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-fondo-claro);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.artistas-filtros__contador [data-results-count] {
  color: var(--color-principal);
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.artistas-filtros__contador-sep {
  font-family: var(--font-condensed);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.5);
}

.artistas-filtros__reset {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fondo-claro);
  background: transparent;
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.4);
  padding: 0.55rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.artistas-filtros__reset:hover {
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  border-color: var(--color-principal);
  transform: translateY(-1px);
}

/* Empty state cuando no hay matches */
.artistas-sin-resultados {
  margin: 2rem 2rem 0;
  padding: 3rem 2rem;
  border: 1px dashed rgba(var(--color-fondo-claro-rgb), 0.25);
  background: rgba(var(--color-fondo-claro-rgb), 0.02);
  max-width: 700px;
}

.artistas-sin-resultados[hidden] { display: none; }

.artistas-sin-resultados .tag {
  display: block;
  margin-bottom: 1rem;
}

.artistas-sin-resultados h3 {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-fondo-claro);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.artistas-sin-resultados p {
  font-family: var(--font-secundaria);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  text-wrap: pretty;
}

.artistas-sin-resultados__link {
  font-family: inherit;
  font-size: inherit;
  color: var(--color-principal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-principal);
  padding: 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.artistas-sin-resultados__link:hover {
  color: var(--color-fondo-claro);
  border-bottom-color: var(--color-fondo-claro);
}

/* ============================================================
   TIMELINE de artistas (página artistas.html)
   ============================================================ */
.artistas-timeline {
  padding: 0 0 8rem;
  background: var(--color-texto);
}

.artistas-timeline__scroll {
  /* Flex en lugar de grid → align-items: stretch hace que todas las cards
     tomen la altura del más alto (la más alta es siempre una V por su aspect 3:4).
     Esto sí garantiza alturas iguales, lo que grid-auto-flow no estaba haciendo. */
  display: flex;
  align-items: stretch;
  gap: 2rem;
  margin: 0 2rem;       /* outer margin: 2rem visible a ambos lados (igual que .artistas-filtros) */
  padding: 4rem 0 5rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-principal) transparent;
}

.artistas-timeline__scroll::-webkit-scrollbar { height: 6px; }
.artistas-timeline__scroll::-webkit-scrollbar-track { background: rgba(var(--color-fondo-claro-rgb), 0.08); }
.artistas-timeline__scroll::-webkit-scrollbar-thumb { background: var(--color-principal); }

.artista-timeline-card {
  scroll-snap-align: start;
  transform: none;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Ancho fijo 280px. justify-content: flex-start → las fotos empiezan todas
     a la MISMA altura (arriba); el texto fluye debajo. Antes usaba flex-end,
     pero con títulos de distinta longitud las fotos quedaban desalineadas. */
  flex: 0 0 280px;
  justify-content: flex-start;
  position: relative;
  display: flex;
  flex-direction: column;
  /* La card es un <a> entero — neutralizar color/underline default del link */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Cuando el JS pone hidden via filtros, se oculta del grid completamente.
   Necesario porque .artista-timeline-card { display: flex } gana por
   orden en cascade vs el [hidden] del user-agent. */
.artista-timeline-card[hidden] { display: none; }

.artista-timeline-card:hover {
  transform: translateY(-6px);
}

/* Badge de numeración secuencial (N°01, N°02, ...) en el top-left de la foto.
   Mismo estilo boxy/oscuro que los badges del archivo de noticias. Se posiciona
   absolute dentro de .artista-timeline-card__photo (que es position: relative). */
/* Badge de tipo (proyecto/diálogo) — círculo con ícono y desenfoque, sobre la
   esquina superior izquierda de la foto. Comunica el tipo de un vistazo. */
.artista-timeline-card__num {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 22, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-fondo-claro);
  transition: background 0.3s ease, transform 0.3s ease;
}
.artista-timeline-card__num svg {
  width: 17px;
  height: 17px;
}
.artista-timeline-card:hover .artista-timeline-card__num {
  background: var(--color-principal);
  border-color: var(--color-principal);
  transform: scale(1.08);
}

.artista-timeline-card__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;  /* default = vertical. Override por modifier abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: var(--color-fondo-claro);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.artista-timeline-card:hover .artista-timeline-card__photo {
  transform: translate(-4px, -4px);
}

.artista-timeline-card__photo--p1 { background-color: var(--color-principal); }
.artista-timeline-card__photo--p2 { background-color: var(--color-secundario); }
.artista-timeline-card__photo--p3 { background-color: var(--color-terciario); }
.artista-timeline-card__photo--p4 { background-color: rgba(var(--color-principal-rgb), 0.6); }
.artista-timeline-card__photo--p5 { background-color: rgba(var(--color-secundario-rgb), 0.7); }

/* Sistema adaptativo: si la imagen subida en WP es horizontal,
   el modifier --horizontal invierte el aspect-ratio.
   El ancho de la card permanece (280px del grid-auto-columns),
   así las cards horizontales son más bajas → variedad editorial natural. */
.artista-timeline-card--horizontal .artista-timeline-card__photo {
  aspect-ratio: 4 / 3;
}

/* La <img> dentro del bloque foto (cuando hay foto real de WP) cubre todo */
.artista-timeline-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.artista-timeline-card h3 {
  font-family: var(--font-primaria);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-fondo-claro);
  margin-bottom: 0.5rem;
}

/* Badge "PROYECTO · 2024" o "DIÁLOGO · 2025" arriba del título.
   Identifica visualmente el tipo de publicación sin depender de etiqueta. */
.artista-timeline-card__tipo {
  display: block;
  margin: 0.85rem 0 0.5rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--color-principal);
}

.artista-timeline-card .meta {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  margin-bottom: 0.85rem;
}

/* El excerpt/bio se oculta en las cards del directorio para mantener foco
   en título + tipo + artista. El texto sigue en el HTML por si en WP se
   decide mostrarlo en otro contexto (hover, tooltip, view alternativo). */
.artista-timeline-card .bio {
  display: none;
}

.artista-timeline-card__cta {
  /* Antes: margin-top: auto → empujaba el CTA al fondo de cada card,
     dejando los demás textos pegados al top. Ahora con justify-content:
     flex-end en la card, TODO el contenido va al fondo en bloque
     (foto + textos + cta juntos). Sin el auto, no hay conflicto. */
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
  align-self: flex-start;
  border-bottom: 1px solid var(--color-principal);
  padding-bottom: 0.25rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .artistas { padding: 0 0 6rem; }
  .artistas__inner { padding: 2rem clamp(1.5rem, 4vw, 3rem) 0; }
  /* Tablet: 1 columna (stack), igual que mobile. Se resetea grid-row a auto
     y se quitan los márgenes negativos del zigzag de desktop para que cada
     card fluya en su propia fila full-width. */
  .artistas__grid { row-gap: clamp(2.5rem, 5vw, 4rem); }
  .artista-card:nth-child(1),
  .artista-card:nth-child(2),
  .artista-card:nth-child(3),
  .artista-card:nth-child(4),
  .artista-card:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 0;
  }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__giant { font-size: 24vw; }

  /* Sobre: 1 columna (logo debajo del texto) en tablet/mobile */
  .sobre { padding: 3rem 1.5rem 5rem; }
  .sobre__grid { grid-template-columns: 1fr; gap: 2.5rem; }

  .sobre-brut { padding: 2rem 2rem 5rem; }
  .sobre-brut__nums { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .sobre-brut__big { font-size: clamp(3rem, 12vw, 6rem); }

  .noticias-brut { padding: 6rem 2rem; }
  .nots { grid-template-columns: 1fr; }
  .nota--1, .nota--2, .nota--3 { grid-column: 1; margin-top: 0; }

  .contacto-brut { padding: 2rem 2rem 5rem; }
  .contacto-brut__grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 900px) {
  /* Rail pasa a dock inferior */
  .sitio { --rail-w: 0px; }

  .rail {
    inset: auto 0 0 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    padding: 0.55rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    border-right: none;
    border-top: 1px solid var(--rail-divider);
    background: rgba(20, 20, 22, 0.94);
  }
  .rail__logo {
    width: 32px;
    margin: 0 0.5rem 0 0.25rem;
    align-self: center;
  }
  .rail__divider { display: none; }
  .rail__nav { flex: 1; }
  .rail__nav ol {
    flex-direction: row;
    justify-content: space-between;
    gap: 0.25rem;
  }
  .rail__nav li { flex: 1; }

  .rail__link {
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0.55rem 0.2rem;
    width: 100%;
    min-height: 44px;  /* touch target accesible */
  }

  /* Indicador activo: barra horizontal arriba (no vertical como desktop) */
  .rail__link::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .rail__link.is-active::before {
    width: 28px;
    height: 2px;  /* override del desktop que era 28px alto */
  }

  /* En mobile no usamos el dot de hover ni el slide-right (es touch, no mouse) */
  .rail__link::after { display: none; }
  .rail__link:hover .rail__name { transform: none; }

  .rail__name {
    font-family: var(--font-primaria);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: -0.005em;
  }
  .rail__link.is-active .rail__name { font-weight: 700; }

  .rail__pie { display: none; }

  .main {
    margin-left: 0;
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .hero { padding: 2rem 0 0; min-height: 88vh; }
  .hero__grid { padding: 0 1.25rem; }
  .hero__title { font-size: 26vw; line-height: 0.9; }

  .hero__claim p { font-size: 1.25rem; }

  .artistas { padding: 0 0 4rem; }
  .artistas__inner { padding: 1.5rem 1.25rem 0; }
  /* Mobile: 1 card por fila full-width, el escalonado se aplana a stack.
     grid-row: auto es CLAVE — sin él las cards heredan el grid-row del base
     (1,1,2,3,3) y dos full-width caen en la misma fila → se amontonan. */
  .artistas__grid { row-gap: 2.5rem; }
  .artista-card:nth-child(1),
  .artista-card:nth-child(2),
  .artista-card:nth-child(3),
  .artista-card:nth-child(4),
  .artista-card:nth-child(5) {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 0;
  }
  /* En móvil: stack vertical para que el label gigante no se aplaste */
  /* El link minimalista ya funciona en mobile (inline-flex), sin overrides */

  .artistas-timeline__scroll {
    grid-auto-columns: 75vw;
    gap: 1.25rem;
    margin: 0 1.25rem;
    padding: 3rem 0 4rem;
  }

  .artistas-filtros {
    grid-template-columns: 1fr 1fr;
    margin: 0 1.25rem 1.5rem;
    padding: 1.25rem;
    gap: 1.25rem 1rem;
  }
  /* En mobile el Buscar ocupa toda la fila (queda más cómodo escribir) */
  .filtro--buscar { grid-column: 1 / -1; }
  /* .artistas-filtros__acciones ya hereda grid-column: 1/-1 + flex row del base */

  .artistas-sin-resultados { margin: 1rem 1.25rem 0; padding: 2rem 1.5rem; }

  .manifesto { padding: 6rem 1.25rem; }

  .pagina-head { padding: 4rem 1.25rem 3rem; }

  .footer { padding: 4rem 1.25rem 2rem; }
  .footer__giant { font-size: 30vw; margin-bottom: 2rem; }
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 3rem;
  }

  .sobre-brut { padding: 1.5rem 1.25rem 4rem; }
  .sobre-brut__cuerpo { margin-bottom: 4rem; gap: 1.5rem; }
  .sobre-brut__lead { font-size: 1.1rem; }
  .sobre-brut__manifesto { font-size: 0.95rem; }
  .sobre-brut__nums { grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 2rem; }
  .sobre-brut__big { font-size: clamp(2.5rem, 14vw, 5rem); }

  .noticias-brut { padding: 4rem 1.25rem; }

  .contacto-brut { padding: 1.5rem 1.25rem 4rem; }
  .contacto-brut__form { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Phones pequeñas: reducir tamaño del nombre pero NO ocultarlo
     (sin él los items del dock quedarían vacíos) */
  .rail__name { font-size: 0.68rem; }
  .rail__logo { width: 24px; }
  .rail__link { padding: 0.5rem 0.1rem; }
}

/* ============================================================
   DETALLE DE NOTICIA — noticia.html
   Layout 2-col: artículo principal + sidebar sticky (compartir + tags)
   En móvil el sidebar se apila debajo del artículo automáticamente.
   ============================================================ */
.noticia-detalle__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 3rem;                  /* gap entre artículo y sidebar */
  padding: 2rem 3rem 4rem;    /* padding-left = gap, para que el espacio
                                 izquierdo (rail→artículo) iguale el derecho
                                 (artículo→sidebar) */
  background: var(--color-texto);
}

.noticia-detalle {
  padding: 0;
  background: transparent;
  /* sin max-width: el artículo llena toda la columna izquierda del grid.
     El texto del cuerpo sí mantiene max-width: 65ch internamente para
     que la línea sea legible — pero hero/título/media se extienden libres. */
}

.noticia-detalle__head {
  margin: 1.5rem 0 3rem;
}

.noticia-detalle__meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.noticia-detalle__meta .tag {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  color: var(--color-fondo-claro);
}

.noticia-detalle__meta .tag--principal  { background: var(--color-principal); }
.noticia-detalle__meta .tag--secundario { background: var(--color-secundario); }
.noticia-detalle__meta .tag--terciario  { background: var(--color-terciario); }

.noticia-detalle__meta time {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: rgba(var(--color-fondo-claro-rgb), 0.6);
}

.noticia-detalle__titulo {
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-fondo-claro);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.noticia-detalle__lead {
  font-family: var(--font-secundaria);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-fondo-claro);
  margin: 0;
  text-wrap: pretty;
  border-left: 3px solid var(--color-principal);
  padding-left: 1.25rem;
}

.noticia-detalle__lead em {
  font-style: normal;
  color: var(--color-principal);
}

.noticia-detalle__cuerpo {
  max-width: 65ch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ----------------------------------------------------------
   Media en una noticia: foto destacada (hero), imagen inline,
   video de YouTube embebido. Todos comparten estructura <figure>
   con <figcaption>.
   ---------------------------------------------------------- */

/* HERO — Foto destacada arriba del cuerpo, llena la columna del artículo */
.noticia-detalle__hero {
  margin: 0 0 3rem;
}

.noticia-detalle__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.noticia-detalle__hero figcaption,
.noticia-detalle__media figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-condensed);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  max-width: 65ch;
}

.noticia-detalle__hero figcaption em,
.noticia-detalle__media figcaption em {
  font-style: italic;
  color: rgba(var(--color-fondo-claro-rgb), 0.78);
}

/* MEDIA INLINE — imagen o video dentro del cuerpo del artículo
   Alineado al MISMO borde izquierdo que el texto, pero se extiende hacia
   la derecha hasta llenar la columna del artículo (más ancho que el texto). */
.noticia-detalle__media {
  margin: 1rem 0;
  width: 100%;
  /* La media siempre llena el cuerpo (max-width: 65ch), pero también puede
     extenderse via width específico si se desea. */
}

.noticia-detalle__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* VIDEO — contenedor responsive 16:9 para el iframe de YouTube */
.noticia-detalle__video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;  /* fondo mientras carga */
}

.noticia-detalle__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.noticia-detalle__cuerpo p {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: rgba(var(--color-fondo-claro-rgb), 0.85);
  margin: 0;
  text-wrap: pretty;
}

.noticia-detalle__cuerpo em {
  font-style: italic;
  color: var(--color-fondo-claro);
}

.noticia-detalle__cuerpo strong {
  font-family: var(--font-primaria);
  font-weight: 700;
  color: var(--color-fondo-claro);
}

/* Cita destacada en el cuerpo */
.noticia-detalle__quote {
  margin: 1rem 0;
  padding: 2rem 0 2rem 2rem;
  border-left: 4px solid var(--color-principal);
  font-family: var(--font-primaria);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-fondo-claro);
}

.noticia-detalle__quote p {
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0 0 1rem;
}

.noticia-detalle__quote footer {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-principal);
  font-style: normal;
}

/* Firma final */
.noticia-detalle__firma {
  margin-top: 2rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
  font-family: var(--font-condensed) !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
  color: rgba(var(--color-fondo-claro-rgb), 0.55) !important;
}

/* ============================================================
   NOTICIAS RELACIONADAS — sección al final de noticia.html
   Reutiliza el grid de noticias-archivo
   ============================================================ */
.noticias-relacionadas {
  padding: 4rem 2rem 6rem;
  background: var(--color-texto);
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.12);
}

.noticias-relacionadas__head {
  margin-bottom: 3rem;
}

.noticias-relacionadas__head .tag {
  display: block;
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------
   Sidebar editorial — compartir + tags
   ---------------------------------------------------------- */
.noticia-detalle__sidebar {
  position: sticky;
  top: 2rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 1.5rem;  /* alinear visualmente con el título del artículo */
}

.sidebar-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar-block__label {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-principal);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
}

/* COMPARTIR — fila de botones cuadrados */
.share-buttons {
  display: flex;
  gap: 0.5rem;
}

.share-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.25);
  background: transparent;
  color: rgba(var(--color-fondo-claro-rgb), 0.65);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.share-btn svg {
  width: 16px;
  height: 16px;
}

.share-btn:hover {
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  border-color: var(--color-principal);
  transform: translateY(-2px);
}

.share-btn--copied {
  background: var(--color-terciario);
  color: var(--color-fondo-claro);
  border-color: var(--color-terciario);
}

/* TAGS — chips con borde, hover terracota */
.tags-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.tags-list li a {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.25);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tags-list li a:hover {
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  border-color: var(--color-principal);
}

/* Responsive del detalle de noticia */
@media (max-width: 900px) {
  /* En móvil: 1 columna, sidebar se apila debajo */
  .noticia-detalle__layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2rem 1.5rem 3rem;
  }
  .noticia-detalle__sidebar {
    position: static;  /* ya no sticky */
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
  }
  .noticia-detalle__cuerpo { max-width: none; }
  .noticia-detalle__hero { max-width: none; }
  .noticia-detalle__media {
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .noticias-relacionadas { padding: 3rem 1.5rem 4rem; }
}

@media (max-width: 640px) {
  .noticia-detalle__layout { padding: 1.5rem 1.25rem 3rem; }
  .noticia-detalle__quote { padding: 1.5rem 0 1.5rem 1.5rem; }
  .noticia-detalle__hero { margin-bottom: 2rem; }
  .noticias-relacionadas { padding: 2.5rem 1.25rem 4rem; }
}

/* ============================================================
   ARCHIVO DE NOTICIAS — noticias.html
   Grid de cards con el mismo lenguaje brutalist que las notas
   de la home, pero escalable a N noticias (sin offsets per-item).
   ============================================================ */
.noticias-archivo {
  padding: 0 2rem 8rem;
  background: var(--color-texto);
}

.noticias-archivo__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
}

/* Card de noticia en el archivo — papel crema con border-top brutalist */
.nota-archivo {
  position: relative;
  padding: 2rem 1.5rem;
  background: var(--color-fondo-claro);
  color: var(--color-texto);
  border-top: 4px solid var(--color-texto);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nota-archivo:hover {
  transform: translateY(-4px);
}

/* Override de especificidad: cuando JS pone [hidden], debe ocultar
   (la regla genérica del browser no gana contra .nota-archivo { display: flex }) */
.nota-archivo[hidden] { display: none; }

.nota-archivo .nota__num {
  position: absolute;
  top: -1px;
  right: 1.25rem;
  background: var(--color-texto);
  color: var(--color-fondo-claro);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

.nota-archivo .nota__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.nota-archivo .nota__head .tag {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  color: var(--color-fondo-claro);
}

/* Variantes de color del tag de categoría */
.nota-archivo .tag--principal  { background: var(--color-principal); }
.nota-archivo .tag--secundario { background: var(--color-secundario); }
.nota-archivo .tag--terciario  { background: var(--color-terciario); }

.nota-archivo .nota__head time {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgba(var(--color-texto-rgb), 0.55);
}

.nota-archivo h3 {
  font-family: var(--font-primaria);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-texto);
  margin-bottom: 0.85rem;
  text-wrap: balance;
}

.nota-archivo p {
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(var(--color-texto-rgb), 0.78);
  margin-bottom: 1.25rem;
  flex: 1;
  text-wrap: pretty;
}

.nota-archivo p em { font-style: italic; }

.nota-archivo .nota__cta {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
  border-bottom: 1px solid var(--color-principal);
  padding-bottom: 0.25rem;
  align-self: flex-start;
  transition: transform 0.2s ease;
}

.nota-archivo .nota__cta:hover {
  transform: translateX(4px);
}

/* Sentinel: punto invisible que el IntersectionObserver vigila para cargar
   más cards al scrollear. Cuando hidden, no hay más por cargar. */
.noticias-archivo__sentinel {
  height: 1px;
  margin-top: 3rem;
  position: relative;
}

/* Indicador sutil "cargando más..." que aparece cuando el sentinel es visible
   (puramente decorativo en el demo estático — en WP sería el spinner del AJAX) */
.noticias-archivo__sentinel:not([hidden])::before {
  content: "↓ MÁS NOTICIAS";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: rgba(var(--color-fondo-claro-rgb), 0.35);
  white-space: nowrap;
  padding-top: 0.5rem;
}

@media (max-width: 640px) {
  .noticias-archivo { padding: 0 1.25rem 4rem; }
  .noticias-archivo__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .nota-archivo { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   DETALLE DE PUBLICACIÓN — proyecto.html / dialogo.html
   (mismo template, layout idéntico; difieren solo en contenido y badge)
   Layout 2-col: contenido editorial + sidebar sticky (compartir + datos)
   Mismo patrón que .noticia-detalle__layout
   ============================================================ */
.artista-detalle__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 3rem;
  padding: 2rem 3rem 5rem;
  background: var(--color-texto);
}

.artista-detalle {
  padding: 0;
  background: transparent;
}

.artista-detalle__head {
  /* Header solo contiene el h1 ahora. Vive en col 2 row 1.
     El tag de disciplina se extrajo a .artista-detalle__tag (col 1 row 1).
     Sin margin-bottom — la separación con la bio la maneja el row-gap del grid. */
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

/* Wrapper de la col izquierda: tag (arriba) + foto.
   grid-row 1/span 2 → cubre alto del header + bio en la col derecha.
   Flex column → la foto se estira para llenar todo el alto restante. */
.artista-detalle__col-izq {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}

/* Tag de disciplina: inmediatamente arriba de la foto */
.artista-detalle__tag {
  display: block;
  margin: 0 0 1rem;
  flex: 0 0 auto;
}

.artista-detalle__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.artista-detalle__nombre {
  font-family: var(--font-primaria);
  font-weight: 900;
  /* Ajustado de clamp(3.5rem, 10vw, 9rem) → ahora vive en la col derecha del grid,
     no necesita el tamaño full-width. */
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--color-fondo-claro);
  margin: 0;
  text-wrap: balance;
}

.artista-detalle__nombre span {
  display: block;
}

.artista-detalle__apellido {
  color: var(--color-principal);
  margin-left: 0.4em;
}

/* Línea "por Mariana Vélez" debajo del título de la publicación.
   Más pequeña, en font condensada, con el nombre del artista en énfasis. */
.artista-detalle__autor {
  font-family: var(--font-condensed);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: rgba(var(--color-fondo-claro-rgb), 0.75);
  margin: 1rem 0 0;
}
.artista-detalle__autor em {
  font-style: normal;
  font-weight: 500;
  color: var(--color-fondo-claro);
}

.artista-detalle__grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  /* Column gap grande (separación foto ↔ contenido), row gap chico
     (la fila del header y la de la bio van casi pegadas). */
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0.5rem;
  align-items: start;
}

/* Variante sin foto lateral: una sola columna, contenido a ancho de lectura.
   Usada en publicaciones (proyecto/diálogo) — el tag va arriba del título y
   el cuerpo ocupa todo el ancho. */
.artista-detalle__grid--simple {
  grid-template-columns: 1fr;
  row-gap: 1.5rem;
  /* Sin max-width: el contenido llena toda la columna (hasta el sidebar),
     así no queda el hueco vacío a la derecha. */
}
.artista-detalle__grid--simple .artista-detalle__head,
.artista-detalle__grid--simple .artista-detalle__bio {
  grid-column: 1;
}
.artista-detalle__grid--simple .artista-detalle__tag {
  display: block;
  margin-bottom: 1.25rem;
}

/* Foto del artista: si no hay imagen, placeholder con iniciales (igual que cards) */
.artista-detalle__foto {
  /* Vive dentro de .artista-detalle__col-izq (flex column).
     flex: 1 → estira la foto para llenar todo el alto disponible.
     min-height: 600px → suelo mínimo aunque la bio sea corta. */
  flex: 1;
  min-height: 600px;
  width: 100%;
  background-color: var(--color-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primaria);
  font-weight: 900;
  font-size: clamp(5rem, 10vw, 9rem);
  color: var(--color-fondo-claro);
  letter-spacing: -0.03em;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Variante con imagen real */
.artista-detalle__foto--imagen {
  background-color: transparent;
  overflow: hidden;
}
.artista-detalle__foto--imagen img {
  /* position absolute + cover → la imagen llena TODO el contenedor de la
     columna (sin importar si es horizontal o vertical), recortándose al
     centro. Así nunca se ve pequeña ni deja huecos. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artista-detalle__bio {
  grid-column: 2;
  grid-row: 2;
  /* Sin max-width — la bio ocupa todo el ancho de la col derecha del grid. */
}

.artista-detalle__bio .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.artista-detalle__bio p {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(var(--color-fondo-claro-rgb), 0.78);
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}

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

/* Media (video / imagen) dentro del contenido editorial del proyecto/diálogo.
   En WP estos son bloques Gutenberg (Embed oEmbed o Imagen) que el admin
   inserta libremente entre los párrafos. */
.artista-detalle__media {
  margin: 2.5rem 0;
}

.artista-detalle__video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;  /* fondo mientras carga */
}

/* Tanto iframe (oEmbed) como video (archivo directo) llenan el contenedor 16:9 */
.artista-detalle__video iframe,
.artista-detalle__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;  /* el video directo cubre el contenedor sin barras negras */
}

.artista-detalle__media figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-condensed);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(var(--color-fondo-claro-rgb), 0.5);
}

.artista-detalle__bio em {
  font-style: italic;
  color: var(--color-principal);
}

.artista-detalle__bio strong {
  font-family: var(--font-primaria);
  font-weight: 700;
  color: var(--color-fondo-claro);
}

.artista-detalle__lead {
  font-size: 1.25rem !important;
  color: var(--color-fondo-claro) !important;
  font-weight: 400 !important;
}

/* ============================================================
   OBRAS DEL ARTISTA — sección compartida entre proyecto.html / dialogo.html / obra.html
   ============================================================ */
.artista-obras {
  padding: 4rem 2rem 8rem;
  background: var(--color-texto);
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.12);
}

.artista-obras__head {
  margin-bottom: 3rem;
  max-width: 900px;
}

.artista-obras__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.artista-obras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem 2rem;
}

/* Card de obra (usada en proyecto.html / dialogo.html / obra.html "otras obras").
   El grid padre (.artista-obras__grid) ya estira los items a misma altura
   por default. Esto + margin-top: auto en .obra-card-detalle__cuerpo
   empuja el texto al fondo de cada card → alineación entre cards de la
   misma fila aunque tengan fotos de alto distinto (vertical 4:5 vs horizontal 5:4). */
.obra-card-detalle {
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end → todo el contenido (foto + textos) se empuja
     al fondo de la card. En cards V no hay slack que mover (foto llena alto).
     En cards H el slack queda arriba y los bottoms de las fotos se alinean
     entre todas las cards de la fila. Mismo patrón que en el directorio. */
  justify-content: flex-end;
  color: var(--color-fondo-claro);
  position: relative;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.obra-card-detalle:hover {
  transform: translateY(-6px);
}

.obra-card-detalle figure {
  margin: 0 0 1.25rem;
  aspect-ratio: 4 / 5;  /* default = vertical (obra alta). Override por modifier abajo */
  overflow: hidden;
  position: relative;
  /* Placeholder de color mientras la imagen carga — evita el "flash" cuando aparece */
  background-color: rgba(var(--color-principal-rgb), 0.15);
}

/* Sistema adaptativo: si la obra es horizontal (paisaje, panorámica, mural),
   la card respeta esa orientación. La grid de obras tiene cards de mismo ancho
   pero las horizontales son más bajas → ritmo editorial. */
.obra-card-detalle--horizontal figure {
  aspect-ratio: 5 / 4;
}

/* Variantes de color del placeholder según la posición de la card,
   inspirado en los colores de los gradientes que cargan */
.obra-card-detalle:nth-child(3n + 2) figure {
  background-color: rgba(var(--color-secundario-rgb), 0.15);
}
.obra-card-detalle:nth-child(3n + 3) figure {
  background-color: rgba(var(--color-terciario-rgb), 0.15);
}

.obra-card-detalle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}

.obra-card-detalle:hover img {
  transform: scale(1.05);
  filter: saturate(1.2);
}

.obra-card-detalle__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Sin margin-top: auto — ahora la card usa justify-content: flex-end
     para empujar TODO al fondo (figure + cuerpo juntos), así los bottoms
     de las fotos sí se alinean entre cards V y H. */
}

.obra-card-detalle__cuerpo .tag {
  margin-bottom: 0.25rem;
}

.obra-card-detalle h3 {
  font-family: var(--font-primaria);
  font-weight: 500;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-fondo-claro);
  margin: 0;
}

.obra-card-detalle .meta {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  line-height: 1.5;
}

.obra-card-detalle__cta {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-principal);
  margin-top: 0.5rem;
  border-bottom: 1px solid var(--color-principal);
  padding-bottom: 0.25rem;
  align-self: flex-start;
  transition: transform 0.2s ease;
}

.obra-card-detalle:hover .obra-card-detalle__cta {
  transform: translateX(4px);
}

/* ============================================================
   DETALLE DE OBRA — obra.html
   ============================================================ */
.obra-detalle {
  padding: 2rem 2rem 5rem;
  background: var(--color-texto);
}

.obra-detalle__head {
  margin: 1.5rem 0 3rem;
  max-width: 1200px;
}

.obra-detalle__head .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.obra-detalle__titulo {
  font-family: var(--font-primaria);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--color-fondo-claro);
  margin: 0 0 1rem;
  text-wrap: balance;
}

.obra-detalle__artista {
  font-family: var(--font-secundaria);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  color: rgba(var(--color-fondo-claro-rgb), 0.7);
  margin: 0;
}

.obra-detalle__artista a {
  color: var(--color-fondo-claro);
  font-family: var(--font-primaria);
  font-weight: 700;
  font-style: normal;
  border-bottom: 1px solid var(--color-principal);
  transition: color 0.2s ease;
}

.obra-detalle__artista a:hover {
  color: var(--color-principal);
}

.obra-detalle__artista em {
  font-style: italic;
}

.obra-detalle__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: 4rem;
}

.obra-detalle__figura {
  margin: 0;
  position: relative;
}

.obra-detalle__figura img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;  /* default = obra vertical. Override por modifier abajo */
  object-fit: cover;
}

/* Sistema adaptativo: el hero de la obra individual respeta la orientación.
   Aplica tanto en obra.html como en el modal popup (mismo template). */
.obra-detalle--horizontal .obra-detalle__figura img {
  aspect-ratio: 5 / 4;
}

.obra-detalle__figura figcaption {
  margin-top: 1rem;
  font-family: var(--font-condensed);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-fondo-claro-rgb), 0.5);
}

.obra-detalle__ficha {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.obra-ficha {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.18);
}

.obra-ficha > div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(var(--color-fondo-claro-rgb), 0.1);
  align-items: baseline;
}

.obra-ficha dt {
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-principal);
  margin: 0;
}

.obra-ficha dd {
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  color: var(--color-fondo-claro);
  margin: 0;
  line-height: 1.4;
}

.obra-ficha__estado {
  font-family: var(--font-condensed) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--color-terciario) !important;  /* verde oliva = Disponible */
}

.obra-ficha__estado--vendida {
  color: rgba(var(--color-fondo-claro-rgb), 0.5) !important;  /* gris apagado = Vendida */
}

.obra-detalle__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--color-principal);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  align-self: flex-start;
}

.obra-detalle__cta:hover {
  background: transparent;
  color: var(--color-principal);
  transform: translateY(-2px);
}

.obra-detalle__cta .hero__cta-num {
  color: var(--color-fondo-claro);
}

.obra-detalle__cta:hover .hero__cta-num {
  color: var(--color-principal);
}

.obra-detalle__texto {
  max-width: 65ch;
  margin: 0;
}

.obra-detalle__texto .tag {
  display: block;
  margin-bottom: 1.5rem;
}

.obra-detalle__texto p {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(var(--color-fondo-claro-rgb), 0.78);
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}

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

.obra-detalle__texto em {
  font-style: italic;
  color: var(--color-principal);
}

.obra-detalle__texto-lead {
  font-size: 1.25rem !important;
  color: var(--color-fondo-claro) !important;
}

/* ============================================================
   MODAL DE OBRA — <dialog> nativo
   Se abre al clicar una .obra-card-detalle en proyecto.html / dialogo.html
   ============================================================ */
.obra-modal {
  /* Reset del dialog nativo */
  padding: 0;
  border: none;
  margin: auto;
  background: var(--color-texto);
  color: var(--color-fondo-claro);
  width: min(1100px, 95vw);
  max-height: 92vh;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
}

.obra-modal::backdrop {
  background: rgba(0, 0, 0, 0.88);
  /* sin backdrop-filter: el blur es caro y combinado con el del rail
     hacía que el sitio se sintiera lento mientras el modal estaba abierto */
}

/* Scroll interno (no del body) */
.obra-modal__scroll {
  max-height: 92vh;
  overflow-y: auto;
  padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem) 3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-principal) transparent;
}

.obra-modal__scroll::-webkit-scrollbar { width: 6px; }
.obra-modal__scroll::-webkit-scrollbar-thumb { background: var(--color-principal); }

/* Botón de cerrar — esquina superior derecha
   sin backdrop-filter: ya está dentro del modal sobre bg sólido oscuro */
.obra-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(20, 20, 22, 0.92);
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.25);
  color: var(--color-fondo-claro);
  font-family: var(--font-primaria);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.obra-modal__close:hover {
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  border-color: var(--color-principal);
  transform: rotate(90deg);
}

/* Mientras el modal está abierto, el JS hace body lock con position: fixed
   (preserva posición de scroll exacta). Aquí solo desactivamos el blur del
   rail y pausamos animaciones para ahorrar GPU. */
body:has(.obra-modal[open]) .rail {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(20, 20, 22, 1);
}

body:has(.obra-modal[open]) .artistas-timeline__scroll,
body:has(.obra-modal[open]) .artista-detalle__foto,
body:has(.obra-modal[open]) [data-reveal] {
  animation-play-state: paused;
}

/* Reuso de .obra-detalle dentro del modal con ajustes contextuales */
.obra-modal .obra-detalle {
  padding: 0;
  background: transparent;
  margin: 0;
}

.obra-modal .obra-detalle__head {
  margin: 0 0 2rem;
  padding-right: 3rem;  /* deja espacio para el botón × */
}

.obra-modal .obra-detalle__titulo {
  font-size: clamp(2rem, 5vw, 4rem);
}

.obra-modal .obra-detalle__grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: 2.5rem;
}

.obra-modal .obra-detalle__ficha {
  position: static;
}

.obra-modal .obra-detalle__texto {
  max-width: none;
}

@media (max-width: 700px) {
  .obra-modal .obra-detalle__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RESPONSIVE — detalle de artista / obra
   ============================================================ */
@media (max-width: 900px) {
  /* Layout del artista: 1 columna, sidebar apilado abajo */
  .artista-detalle__layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 2rem 1.5rem 4rem;
  }
  .artista-detalle__layout .noticia-detalle__sidebar {
    position: static;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
  }

  .artista-detalle__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .artista-detalle__foto {
    max-width: 280px;
  }
  .obra-detalle__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .obra-detalle__ficha {
    position: static;
  }
}

@media (max-width: 640px) {
  .artista-detalle,
  .obra-detalle {
    padding: 1.5rem 1.25rem 4rem;
  }
  .artista-obras { padding: 3rem 1.25rem 5rem; }
  .artista-obras__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .obra-ficha > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ============================================================
   Reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track { animation-duration: 200s; }
  .hero__word--arte { animation: none; }
  .obra-card,
  .artista-timeline-card,
  .obra-card-detalle { transition: none; }
}

/* ============================================================
   CUSTOM SELECT — dropdown estilizado (reemplaza el <select> nativo).
   Ver assets/js/custom-select.js. Aplica a filtros y contacto.
   ============================================================ */
.cselect {
  position: relative;
  width: 100%;
}

/* Select nativo: oculto pero presente (se envía en el form, guarda el valor) */
.cselect__native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Trigger — hereda el look del select por contexto (filtros / contacto) */
.cselect__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--color-fondo-claro);
  font-family: var(--font-secundaria);
  cursor: pointer;
  text-align: left;
}
.cselect__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Flecha chevron terracota que gira al abrir */
.cselect__arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-principal);
  border-bottom: 2px solid var(--color-principal);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.cselect.is-open .cselect__arrow {
  transform: rotate(-135deg) translateY(-2px);
}

/* Panel del dropdown — fondo oscuro del sitio, aparece con transición */
.cselect__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: #1a1a1c;
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.15);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  scrollbar-width: thin;
}
.cselect.is-open .cselect__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cselect__option {
  padding: 0.7rem 1rem;
  font-family: var(--font-secundaria);
  font-size: 0.95rem;
  color: rgba(var(--color-fondo-claro-rgb), 0.85);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cselect__option:hover,
.cselect__option.is-selected {
  background: var(--color-principal);
  color: #fff;
}

/* --- Contexto FILTROS (directorio / noticias) --- */
.filtro .cselect__trigger {
  font-size: 0.95rem;
  padding: 0.6rem 0;
  border-bottom: 2px solid rgba(var(--color-fondo-claro-rgb), 0.35);
  transition: border-color 0.2s ease;
}
.filtro .cselect.is-open .cselect__trigger {
  border-bottom-color: var(--color-principal);
}

/* --- Contexto CONTACTO --- */
.contacto-brut .campo .cselect__trigger {
  font-size: 1rem;
  padding: 0.85rem 0;
  border-bottom: 2px solid var(--color-fondo-claro);
  transition: border-color 0.2s ease;
}
.contacto-brut .campo .cselect.is-open .cselect__trigger {
  border-bottom-color: var(--color-principal);
}

/* ============================================================
   Utilidad screen-reader-only (skip link + honeypot del form)
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Aviso de resultado del formulario de contacto
   ============================================================ */
.contacto-brut__aviso {
  grid-column: 1 / -1;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-condensed);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-fondo-claro);
}
.contacto-brut__aviso--ok {
  background: rgba(var(--color-terciario-rgb), 0.18);
  border-left: 3px solid var(--color-terciario);
}
.contacto-brut__aviso--error {
  background: rgba(var(--color-principal-rgb), 0.18);
  border-left: 3px solid var(--color-principal);
}

/* ============================================================
   CTA de adquisición en la ficha de obra (single-obra.php)
   ============================================================ */
.obra-adquirir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--color-principal);
  color: var(--color-fondo-claro);
  font-family: var(--font-condensed);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.3;
  transition: background 0.25s ease, transform 0.25s ease;
}
.obra-adquirir:hover {
  background: #c13f1f;
  transform: translateY(-2px);
}
.obra-adquirir__arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.obra-adquirir:hover .obra-adquirir__arrow {
  transform: translateX(4px);
}

/* Variante: pieza ya vendida (sin enlace) */
.obra-adquirir--vendida {
  margin-top: 1.75rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid rgba(var(--color-fondo-claro-rgb), 0.22);
  color: rgba(var(--color-fondo-claro-rgb), 0.55);
  font-family: var(--font-condensed);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ============================================================
   Iconos de redes en el footer
   ============================================================ */
/* Columnas del footer centradas (contenido equilibrado) */
.footer__col {
  text-align: center;
}

.footer__redes {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.footer__red {
  display: inline-flex;
  color: var(--color-fondo-claro);
  transition: color 0.25s ease, transform 0.25s ease;
}
.footer__red svg { width: 20px; height: 20px; }
.footer__red:hover {
  color: var(--color-principal);
  transform: translateY(-2px);
}

/* ============================================================
   Botón flotante de WhatsApp (fijo en todas las páginas)
   ============================================================ */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* Tooltip al pasar el mouse */
.wa-float__tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  background: var(--color-texto);
  color: var(--color-fondo-claro);
  font-family: var(--font-condensed);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.85rem;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.wa-float:hover .wa-float__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* En móvil el rail pasa a dock inferior → sube el botón para no taparlo */
@media (max-width: 900px) {
  .wa-float {
    width: 52px;
    height: 52px;
    bottom: 5.5rem;
    right: 1rem;
  }
  .wa-float svg { width: 27px; height: 27px; }
  .wa-float__tooltip { display: none; }
}

/* ============================================================
   Protección básica de imágenes (refuerza el JS): sin arrastre,
   sin selección. Disuade la descarga casual de las obras.
   ============================================================ */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}