/* Variables globales del sitio */
:root {
  --bg: #161616;
  --text: #f5f5f5;
  --muted: #cfcfcf;
  --subtext: #aeaeae;
}

/* Aplicar a todos los elementos */
* {
  box-sizing: border-box;
}

.herrantes{
  background: #1c1b1b;
  color: var(--text);

}

.vaho-gallery,
.vaho-gallery .row,
.vaho-gallery .col-12 {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.vaho-gallery img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* Estilos generales de la página */
body {
  font-family: "Roboto", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  margin: 0;
}

/* Enlaces */
a {
  text-decoration: none;
  color: inherit;
}

h1{
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}

h4 {font-size: 24px;
  font-weight: 300;
  letter-spacing:.10em;
  color: var(--text);
}

h5{
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .10em;
  color: var(--text);
}
.texto-biografía{
  font-size: 18px;
  font-weight: 100;
  color: var(--subtext);
}

.subtitulo-biografía{
  font-size: 17px;
  font-weight: 100;
  color: var(--subtext);
}

.obra-modal-panel .titulo-obras {
  margin: 0 0 10px;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: .10em;
  line-height: 1.15;
  color: var(--text);
}

.obra-modal-panel .sub-titulo-obras {
  margin: 0 0 1.25rem;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: .10em;
  line-height: 1.5;
  color: var(--text);
}

b{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--subtext);
}

h6{
  font-size: 12px;
  font-weight: 200;
  letter-spacing: .10em;
  color: var(--text);
}

p {
  font-size: 13px;
  font-weight: 200;
  letter-spacing: .10em;
  color: var(--subtext);
}

.biografia{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
  padding: 50px 17vw 48px;
  margin-left: 0;
  margin-right: 0;
  align-items: stretch;
  justify-content: center;
}

.biografia-text {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  padding-right: 1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-self: stretch;
  scroll-behavior: smooth;
}

.biografia-text::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.biografia-seccion {
  margin-bottom: 2rem;
  scroll-margin-top: 110px;
}

.biografia-gallery-wrap {
  position: sticky;
  top: 50px;
  align-self: stretch;
  height: 100%;
  padding-left: 1.25rem;
  display: flex;
  align-items: stretch;
}

.biografia-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.biografia-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  transition: transform .25s ease, box-shadow .25s ease;
}

.biografia-item::before {
  content: "";
  position: absolute;
  inset: 8px 4px 6px 4px;
  background: rgba(255, 255, 255, 0.95);
  filter: blur(62px);
  opacity: 0;
  z-index: 0;
  transition: opacity .28s ease, filter .28s ease;
  pointer-events: none;
}

.biografia-item:hover::before,
.biografia-item:focus-visible::before {
  opacity: .42;
  filter: blur(66px);
}

.biografia-item img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  filter: grayscale(1) contrast(.9) brightness(.9);
  transition: filter .3s ease, opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}

.biografia-item:hover img,
.biografia-item:focus-visible img {
  opacity: 1;
  filter: grayscale(0) contrast(1.05) brightness(1.08);
  transform: scale(1.02);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.18);
}

/* cabecera de la página */
.top-bar {
  position: fixed;
  top: 40px;
  left: 40px;
  right: 60px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.menu-obras{
  right: 120px;
}

/* Circulo del menú */
.menu-grupo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: auto;
}

.top-bar-obras .menu-grupo-obras {
  --menu-obras-offset-x: -50px;
  transform: translateX(var(--menu-obras-offset-x));
}

#obraModalTriggerLabel {
  cursor: pointer;
}

.vaho-page .obra-modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 24px 24px;
  background: rgba(10, 9, 9, 0.8);
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 2000;
}

.vaho-page .obra-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vaho-page .obra-modal-panel {
  width: min(680px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 28px 24px 12px;
  position: relative;
}

.vaho-page .obra-modal-panel p {
  max-width: 620px;
  margin-left: auto;
  margin-right: 0;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
}

.vaho-page .obra-modal-close {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.obra-modal-panel h2 {
  margin: 0 0 18px;
  font-size: 18px;
  letter-spacing: .08em;
}

.obra-modal-panel p {
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .05em;
  color: var(--text);
}

.obra-modal-panel b {
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: .05em;
  color: var(--text);
}

.obra-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.vaho-2 .img-fluid {
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 2500;
}

.image-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.image-lightbox-img {
  max-width: min(94vw, 1400px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.image-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}

.publication-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 2600;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .86);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.publication-detail-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.publication-detail-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
  gap: 32px;
  width: min(100%, 1000px);
  max-height: min(88vh, 900px);
  overflow: auto;
  padding: 36px;
  background: #1c1b1b;
  color: var(--text);
}

.publication-detail-panel.images-only {
  grid-template-columns: minmax(0, 1fr);
}

.publication-detail-panel.images-only .publication-detail-copy {
  display: none;
}

.publication-detail-panel.images-only .publication-detail-media {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  align-items: start;
}

.publication-overlay-content {
  display: none !important;
}

.publication-detail-panel.custom-content {
  grid-template-columns: minmax(0, 1fr);
}

.publication-detail-panel.custom-content .publication-detail-media,
.publication-detail-panel.custom-content .publication-detail-copy {
  display: none;
}

.publication-detail-custom[hidden] {
  display: none !important;
}

.publication-detail-panel.custom-content .publication-detail-custom {
  display: block;
  min-width: 0;
  max-height: calc(min(88vh, 900px) - 72px);
  overflow: auto;
}

.publication-detail-custom img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.publication-detail-custom .publication-detail-video {
  display: block;
  width: min(100%, 900px);
  max-height: 72vh;
  height: auto;
  margin: 0 auto;
  background: #000;
}

.publication-detail-custom iframe,
.publication-detail-custom object,
.publication-detail-custom embed {
  max-width: 100%;
}

.publication-detail-media {
  display: grid;
  align-content: start;
  gap: 20px;
  min-width: 0;
}

.publication-detail-image {
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  align-self: start;
}

.publication-detail-pdf {
  display: block;
  width: 100%;
  height: min(60vh, 700px);
  min-height: 420px;
  border: 0;
  background: #fff;
}

.publication-detail-pdf-link {
  color: var(--text);
  font-size: 13px;
}

.publication-detail-copy {
  align-self: center;
  min-width: 0;
  padding: 24px 12px 24px 0;
}

.publication-detail-copy h2 {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--text);
}

.publication-detail-meta h6,
.publication-detail-meta p {
  margin: 0 0 12px;
}

.publication-detail-description {
  margin-top: 28px;
  line-height: 1.7;
}

.publication-detail-close {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 1;
  border: 0;
  padding: 4px 8px;
  background: transparent;
  color: var(--text);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 700px) {
  .publication-detail-overlay {
    padding: 12px;
  }

  .publication-detail-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 42px 20px 20px;
  }

  .publication-detail-image {
    max-height: 45vh;
  }

  .publication-detail-pdf {
    height: 45vh;
    min-height: 320px;
  }

  .publication-detail-copy {
    padding: 0;
  }
}

/* Ajustes del menu derecho (antes en right-menu.css) */
.right-menu-group {
  position: relative;
}

#rightMenu.right-menu-dropdown {
  position: absolute;
  top: 30px;
  right: 0px;
  left: 0px;
  min-width: 180px;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .25s ease;
  z-index: 1100;
}

#rightMenu.right-menu-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#rightMenu.right-menu-dropdown a {
  display: block;
  color: white;
  font-size: 13px;
  letter-spacing: .10em;
  font-weight: 300;
  margin-bottom: 12px;
  margin-left: -20px;
  transition: opacity .2s ease;
}

#rightMenu.right-menu-dropdown a:last-child {
  margin-bottom: 0;
}

#rightMenu.right-menu-dropdown a:hover {
  opacity: .65;
}

#rightMenu.right-menu-dropdown a.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.28em;
}

/* logo menú negro */
.menu-label-2 {
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: none;
  color: black;
  font-weight: 300;
}
/* botón circular negro menú */
.circulo-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: black;
  border: none;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.circulo-btn:hover {
  transform: scale(1.2);
}

.circulo-btn.active {
  filter: blur(1.4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.55);
}

/* menú desplegable negro */
.dropdown-panel {
  position: absolute;
  top: 30px;
  left: 0;
  min-width: 180px;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .25s ease;
}
/* menú desplegable blanco */
.dropdown-panel-2 {
  position: absolute;
  top: 30px;
  left: 0;
  min-width: 180px;
  background:transparent;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .25s ease;
}

.dropdown-panel-2.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* logo menú blanco */
.menu-label {
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: none;
  color: white;
  font-weight: 300;
}

/* botón circular blanco menú */
.circulo-btn-2 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: none;
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.circulo-btn-2:hover {
  transform: scale(1.2);
}

.circulo-btn-2.active {
  filter: blur(1.4px);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

.dropdown-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* fondo del menú boton negro */
.dropdown-panel a {
  display: block;
  color: black;
  font-size: 13px;
  letter-spacing: .10em;
  font-weight: 300;
  margin-bottom: 12px;
  margin-left: -20px;
  transition: opacity .2s ease;
}

/* fondo del menú boton blanco */
.dropdown-panel-2 a {
  display: block;
  color: white;
  font-size: 13px;
  letter-spacing: .10em;
  font-weight: 300;
  margin-bottom: 12px;
  margin-left: -20px;
  transition: opacity .2s ease;
}

.dropdown-panel-2 a:last-child {
  margin-bottom: 0;
}

.dropdown-panel a:hover {
  opacity: .65;
}

.dropdown-panel a:last-child {
  margin-bottom: 0;
}

.dropdown-panel a:hover {
  opacity: .65;
}

/* OBRAS*/
.gallery-wrapper {
  padding-top: 48px;
  padding-bottom: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gallery-grid {
  max-width: 950px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 50px;
  column-gap: 50px;
}

/* Tamaño de las obras */
.art-card {
  width: 100%;
  max-width: 250px;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .35s ease;
}

.art-card:hover {
  transform: none;
}

/* imagen de la obra */
.art-image-wrap {
  position: relative;
  display: block;
  overflow: visible;
}

.art-image-link {
  display: block;
  position: relative;
  z-index: 1;
}

.art-image-wrap::before {
  content: '';
  position: absolute;
  inset: 8px 4px 6px 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  filter: blur(62px);
  opacity: 0;
  z-index: 0;
  transition: opacity .28s ease, filter .28s ease;
  pointer-events: none;
}

.art-card:hover .art-image-wrap::before {
  opacity: .42;
  filter: blur(66px);
}

/* imagenes */
.art-image-wrap img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;
      position: relative;
      z-index: 1;
      filter: grayscale(1) contrast(.95) brightness(.50);
      transition: filter .35s ease, transform .35s ease;
    }

.art-card:hover .art-image-wrap img {
  filter: grayscale(0) contrast(1.05) brightness(1);
}

.gallery-grid.is-filtered .art-card.is-selected .art-image-wrap img {
  filter: grayscale(0) contrast(1.05) brightness(1);
}

.gallery-grid.is-filtered .art-card.is-dimmed .art-image-wrap img {
  filter: grayscale(1) contrast(.9) brightness(.72);
}

.gallery-grid.is-filtered .art-card.is-dimmed:hover .art-image-wrap img {
  filter: grayscale(1) contrast(.9) brightness(.72);
}

/* fondo del menú boton blanco */
.art-info {
  position: relative;
  z-index: 1;
  padding: 10px 2px 0;
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  overflow: hidden;
  transition: opacity .28s ease, transform .28s ease, max-height .28s ease;
  text-align: left;
}

    .art-card:hover .art-info {
      opacity: 1;
      transform: translateY(0);
      max-height: 240px;
    }

    .art-info h1,
    .art-info h6,
    .art-info p {
      margin-bottom: 0.35rem;
      line-height: 1.35;
    }

    .art-title {
      display: inline-block;
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text);
    }

/* Fondo de inicio responsive */
.background-image {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

    /* =========================
       RESPONSIVE
    ========================== */

    @media (max-width: 992px) {
      .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 36px;
        column-gap: 24px;
      }
    }

    @media (max-width: 768px) {
      .top-bar {
        left: 24px;
        right: 24px;
        top: 24px;
      }

      .menu-label {
        font-size: 11px;
        letter-spacing: .2em;
      }

      .gallery-wrapper {
        padding-top: 120px;
      }

      .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 24px;
        column-gap: 12px;
      }

      .biografia {
        padding: 110px 24px 40px;
      }

      .art-card {
        max-width: 100%;
      }

      .biografia-layout {
        display: block;
      }

      body {
        overflow-y: auto;
      }

      .biografia-texto,
      .biografia-imagen {
        width: 100%;
        max-width: 100%;
      }

      .biografia-texto {
        height: auto;
        overflow-y: visible;
        padding: 110px 24px 48px;
      }

      .biografia-imagen,
      .biografia-imagen img {
        position: static;
        height: auto;
      }

      .biografia-imagen .carousel,
      .biografia-imagen .carousel-inner,
      .biografia-imagen .carousel-item {
        height: auto;
      }

    }

    @media (hover: none) {
      .art-info {
        opacity: 1;
        transform: none;
        max-height: none;
        overflow: visible;
      }
    }

/* Estilos para el botón de reproducción de audio */
.play-audio-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin: 1rem 0;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.play-audio-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.play-audio-btn:active {
  transform: translateY(0);
}

.play-audio-btn.playing {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
}