/**
 * Galería OMBÚ Art — Extra CSS
 * Animaciones, cursor, estados dinámicos que requieren clases JS
 * Incluir en: Elementor > Personalizar > CSS Adicional
 * O agregar como segundo archivo en functions.php
 */

/* ══════════════════════════════════════════════════════════════════════
   BOTONES — Sistema unificado (ÚNICA fuente de verdad para colores)
   Naranja + borde blanco · hover: negro OMBÚ + borde naranja
   Este archivo carga ÚLTIMO: sus !important ganan sobre todo lo demás.
   Para agregar un botón nuevo: solo añadir el selector en este bloque.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Estado normal: naranja + borde blanco ──────────────────────────── */
.og-btn,
.og-nav-cuenta,
.elementor-widget-button .elementor-button,
.elementor-button,
.ag-btn-comprar,
.ag-btn-encargo,
.ag-obra-cta,
.ag-panel-btn-primary,
.ag-btn-panel-primary,
.ag-btn-panel-outline,
.ag-panel-salir,
.ag-panel-btn-sm,
.ag-panel-btn-aceptar,
.ag-panel-btn-outline,
.ag-verificar-input button,
.ag-catalogo-vacio button,
.ag-catalogo-vacio a,
.ag-load-more-btn,
.ag-opcion,
.ag-filtro-btn,
.ag-filtro-limpiar,
.ag-filtros-limpiar {
  background: var(--og-naranja) !important;
  color: var(--og-offwhite) !important;
  border: 2px solid var(--og-offwhite) !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: background .2s, border-color .2s, color .2s !important;
}

/* ── Hover / Focus: negro + borde naranja ───────────────────────────── */
.og-btn:hover,                     .og-btn:focus,
.og-nav-cuenta:hover,              .og-nav-cuenta:focus,
.elementor-widget-button .elementor-button:hover,
.elementor-button:hover,
.ag-btn-comprar:hover,             .ag-btn-comprar:focus,
.ag-btn-encargo:hover,             .ag-btn-encargo:focus,
.ag-obra-cta:hover,                .ag-obra-cta:focus,
.ag-panel-btn-primary:hover,       .ag-panel-btn-primary:focus,
.ag-btn-panel-primary:hover,       .ag-btn-panel-primary:focus,
.ag-btn-panel-outline:hover,       .ag-btn-panel-outline:focus,
.ag-panel-salir:hover,             .ag-panel-salir:focus,
.ag-panel-btn-sm:hover,            .ag-panel-btn-sm:focus,
.ag-panel-btn-aceptar:hover,       .ag-panel-btn-aceptar:focus,
.ag-panel-btn-outline:hover,       .ag-panel-btn-outline:focus,
.ag-verificar-input button:hover,  .ag-verificar-input button:focus,
.ag-catalogo-vacio button:hover,   .ag-catalogo-vacio a:hover,
.ag-load-more-btn:hover,
.ag-opcion:hover,
.ag-filtro-btn:hover,
.ag-filtro-limpiar:hover,
.ag-filtros-limpiar:hover,
.ag-opcion-activa,
.ag-filtro-activo {
  background: var(--og-negro) !important;
  border-color: var(--og-naranja) !important;
  color: var(--og-offwhite) !important;
  opacity: 1 !important;
}

/* ── Hover sobre activo: mantener estado ────────────────────────────── */
.ag-opcion-activa:hover,
.ag-filtro-activo:hover {
  background: var(--og-negro) !important;
  border-color: var(--og-naranja) !important;
}

/* ── Deshabilitados ─────────────────────────────────────────────────── */
.ag-opcion-agotada {
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.ag-load-more-btn.ag-load-more--loading {
  opacity: 0.55 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* ── Excepción: configurador (Tamaño / Papel / Presentación) ────────────
   Invertido: fondo oscuro por defecto → naranja solo al seleccionar     */
.ag-config-opciones-wrap .ag-opcion {
  background: transparent !important;
  border: 1px solid rgba(250,249,247,0.18) !important;
  color: var(--og-offwhite) !important;
}
.ag-config-opciones-wrap .ag-opcion:hover {
  background: rgba(241,90,41,0.10) !important;
  border-color: var(--og-naranja) !important;
  color: var(--og-offwhite) !important;
}
.ag-config-opciones-wrap .ag-opcion.ag-opcion-activa {
  background: var(--og-naranja) !important;
  border-color: var(--og-naranja) !important;
  color: var(--og-offwhite) !important;
}
.ag-config-opciones-wrap .ag-opcion.ag-opcion-activa:hover {
  background: var(--og-naranja) !important;
}

/* ── Excepción: links de texto en secciones de catálogo ─────────────── */
/* (son <a> de Elementor usados como "Ver más", no botones visuales)     */
.e-con.e-parent:has(.ag-catalogo-wrap) .elementor-button,
.e-con.e-parent:has(.ag-artistas-wrap) .elementor-button {
  background: transparent !important;
  border: none !important;
  color: var(--og-naranja) !important;
  padding: 0 !important;
}


/* ── Animaciones de entrada al scroll ──────────────────────────────────────── */
.og-will-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.og-will-animate:nth-child(2) { transition-delay: 0.1s; }
.og-will-animate:nth-child(3) { transition-delay: 0.2s; }
.og-will-animate:nth-child(4) { transition-delay: 0.3s; }
.og-will-animate:nth-child(5) { transition-delay: 0.4s; }
.og-will-animate:nth-child(6) { transition-delay: 0.5s; }

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






/* ── Página de obra individual ─────────────────────────────────────────────── */
.og-page-obra .ag-obra-layout {
  animation: og-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.og-page-obra .ag-obra-info-col {
  animation: og-fade-up 0.8s 0.15s cubic-bezier(0.16,1,0.3,1) both;
}

/* Imagen principal — se adapta a cualquier formato sin recortar */
.ag-obra-img-principal {
  width: 100% !important;
  line-height: 0 !important;
  background: var(--og-negro) !important;
}
.ag-obra-img-principal img,
#ag-obra-img-activa {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: unset !important;
  object-fit: unset !important;
  display: block !important;
}


/* ── Página de artista ──────────────────────────────────────────────────────── */
.og-page-artista .ag-artista-header {
  animation: og-fade-up 0.8s cubic-bezier(0.16,1,0.3,1) both;
}


/* ── Scrollbar temático ─────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #ccc; transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover { background: #F15A29; }


/* ══════════════════════════════════════════════════════════════════════
   CATÁLOGO — Grid: elimina el fondo que crea el rectángulo oscuro
   ══════════════════════════════════════════════════════════════════════ */

.ag-catalogo-grid {
  background: transparent !important;
  gap: 20px !important;
}

/* 4 columnas fijas solo en el catálogo */
.ag-catalogo-wrap .ag-catalogo-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* 4 columnas en la página de artista individual */
.ag-artista-seccion .ag-catalogo-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CATÁLOGO — Barra de filtros horizontal
   ══════════════════════════════════════════════════════════════════════ */

.ag-filtros-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  padding: 0 0 20px !important;
  margin-bottom: 32px !important;
  border-bottom: 0.5px solid var(--og-borde-dark) !important;
}

.ag-filtro-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

.ag-filtros-label {
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Select — contenedor relativo para la flecha custom */
.ag-select-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ag-filtro-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--og-fondo-sidebar) !important;
  background-image: none !important;
  border: 0.5px solid var(--og-borde-dark) !important;
  border-radius: 0 !important;
  color: var(--og-texto-dark) !important;
  font-family: var(--og-font-ui) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  padding: 8px 34px 8px 12px !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 150px !important;
  transition: border-color 0.15s !important;
  box-shadow: none !important;
}

.ag-filtro-select:hover,
.ag-filtro-select:focus {
  border-color: var(--og-naranja) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Flecha naranja — chevron CSS */
.ag-select-arrow {
  position: absolute !important;
  right: 12px !important;
  pointer-events: none !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.5px solid var(--og-naranja) !important;
  border-bottom: 1.5px solid var(--og-naranja) !important;
  transform: rotate(45deg) translateY(-3px) !important;
}

/* Opciones del select */
.ag-filtro-select option {
  background-color: #161616;
  color: #FAF9F7;
}

/* Limpiar filtros */
.ag-filtros-limpiar {
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
}

/* Contador — empujado a la derecha */
.ag-filtros-count {
  margin-left: auto !important;
  font-family: var(--og-font-body) !important;
  font-size: 11px !important;
  color: var(--og-texto-sec) !important;
  letter-spacing: 0.04em !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CATÁLOGO — Card rediseñada
   ══════════════════════════════════════════════════════════════════════ */

/* Borde naranja — pseudo-elemento pintado encima de imagen y body */
.ag-obra-card {
  position: relative !important;
}
.ag-obra-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(241,90,41,0.12) !important;
  pointer-events: none !important;
  transition: border-color 0.3s ease !important;
  z-index: 10 !important;
}
.ag-obra-card:hover::after {
  border-color: rgba(241,90,41,0.75) !important;
}

/* Imagen: limpia el aspect-ratio landscape heredado de front.css línea 189
   y fuerza que llene todo el wrapper portrait 3:4 */
.ag-obra-card-img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  object-fit: cover !important;
  margin-bottom: 0 !important;
  display: block !important;
}

/* Imagen ratio 3:4 (vertical — proporción de fotografía enmarcada) */
.ag-obra-card-img-wrap {
  aspect-ratio: 3 / 4 !important;
}

/* Overlay: todo por CSS, sin jQuery fadeIn/fadeOut */
.ag-obra-card-overlay {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  top: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 40px 16px 16px !important;
  background: linear-gradient(to top, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
.ag-obra-card:hover .ag-obra-card-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.ag-obra-card-ver {
  opacity: 1 !important;
  transform: none !important;
  color: #fff !important;
  font-family: var(--og-font-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Botón de favorito — esquina inferior derecha de la imagen */
.og-fav-btn {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(10,10,10,0.7) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 3 !important;
  transition: background 0.2s, color 0.2s, transform 0.15s !important;
  backdrop-filter: blur(6px) !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.og-fav-btn:hover {
  background: rgba(241,90,41,0.18) !important;
  color: var(--og-naranja) !important;
  border-color: rgba(241,90,41,0.4) !important;
  transform: scale(1.08) !important;
}
.og-fav-btn.og-fav-activo {
  background: var(--og-naranja) !important;
  color: #fff !important;
  border-color: var(--og-naranja) !important;
}
.og-fav-btn.og-fav-activo svg { fill: #fff !important; stroke: #fff !important; }

/* Badge contador de favoritos (para nav/header) */
.og-fav-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--og-naranja) !important;
  color: #fff !important;
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  vertical-align: super !important;
  line-height: 1 !important;
}

/* Página Mis Guardados */
.og-guardados-wrap { min-height: 200px; }
.og-guardados-empty {
  font-family: var(--og-font-body) !important;
  font-size: 15px !important;
  color: var(--og-texto-sec) !important;
  text-align: center !important;
  padding: 60px 20px !important;
  line-height: 2 !important;
}
.og-guardados-empty a {
  color: var(--og-naranja) !important;
  text-decoration: none !important;
}
.og-guardados-loading {
  font-family: var(--og-font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  color: var(--og-texto-sec) !important;
  text-align: center !important;
  padding: 60px 20px !important;
}

/* Badge de escasez — esquina inferior izquierda de la imagen */
.ag-obra-card-escasez {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  font-family: var(--og-font-ui) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
  background: rgba(10,10,10,0.82) !important;
  padding: 4px 9px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1 !important;
  backdrop-filter: blur(4px) !important;
}
.ag-obra-card-escasez.ag-escasez-agotada {
  color: rgba(255,255,255,0.45) !important;
}
.ag-obra-card-escasez.ag-escasez-ed {
  color: rgba(255,255,255,0.6) !important;
  font-weight: 500 !important;
}

/* Badge de género — esquina superior derecha */
.ag-obra-card-badge-genero {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  font-family: var(--og-font-ui) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--og-naranja) !important;
  padding: 4px 9px !important;
  pointer-events: none !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

/* Título con más presencia */
.ag-obra-card-titulo {
  font-family: var(--og-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--og-texto-dark) !important;
  margin-bottom: 8px !important;
}
.ag-obra-card-titulo a {
  color: var(--og-texto-dark) !important;
  text-decoration: none !important;
}
.ag-obra-card-titulo a:hover { color: var(--og-naranja) !important; }

/* Año */
.ag-obra-card-anio {
  font-family: var(--og-font-body) !important;
  font-size: 10px !important;
  color: var(--og-texto-sec) !important;
  margin-top: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CATÁLOGO — Botón "Mostrar más"
   ══════════════════════════════════════════════════════════════════════ */

.ag-load-more-wrap {
  text-align: center !important;
  margin-top: 48px !important;
  padding-bottom: 16px !important;
}

.ag-load-more-btn {
  display: inline-block !important;
  font-family: var(--og-font-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  padding: 14px 40px !important;
  cursor: pointer !important;
}


/* ══════════════════════════════════════════════════════════════════════
   ARTISTA INDIVIDUAL — Header dos columnas
   ══════════════════════════════════════════════════════════════════════ */

.ag-artista-wrap-v2 {
  width: 100% !important;
}

/* Header: 3 columnas — identidad / foto / datos — enmarcado como tarjeta */
.ag-artista-header-v2 {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  padding: 40px !important;
  margin-bottom: 48px !important;
  border: 0.5px solid var(--og-borde-dark) !important;
}

/* Columna 1: label + nombre artístico */
.ag-artista-col-identidad {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Columna 2: foto centrada */
.ag-artista-col-foto {
  display: flex !important;
  justify-content: center !important;
}
.ag-artista-foto-wrap {
  width: 220px !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.ag-artista-foto-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.ag-artista-foto-placeholder-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--og-fondo-sidebar) !important;
  font-family: var(--og-font-display) !important;
  font-size: 64px !important;
  font-weight: 300 !important;
  color: var(--og-borde-dark) !important;
}

.ag-artista-label-tag {
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
}
.ag-artista-nombre-h {
  font-family: var(--og-font-display) !important;
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  color: var(--og-texto-dark) !important;
  margin: 0 !important;
}

/* Columna 3: datos de contacto */
.ag-artista-col-datos {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.ag-artista-dato {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.ag-artista-dato-key {
  font-family: var(--og-font-ui) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
}
.ag-artista-dato-val {
  font-family: var(--og-font-body) !important;
  font-size: 14px !important;
  color: var(--og-texto-dark) !important;
  line-height: 1.5 !important;
}
.ag-artista-dato-val a {
  color: var(--og-texto-dark) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.ag-artista-dato-val a:hover {
  color: var(--og-naranja) !important;
}

/* Bio — ancho completo */
.ag-artista-bio-full {
  font-family: var(--og-font-body) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--og-texto-dark) !important;
  margin-bottom: 56px !important;
  width: 100% !important;
}

/* Sección obras / relacionados */
.ag-artista-seccion {
  margin-bottom: 64px !important;
}

/* Header de sección "OBRAS" con línea separadora */
.ag-artista-obras-header {
  display: flex !important;
  align-items: center !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  border-bottom: 0.5px solid var(--og-borde-dark) !important;
}
.ag-artista-obras-titulo {
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
}

/* Sección fotógrafos relacionados */
.ag-artista-seccion-bar {
  display: flex !important;
  align-items: center !important;
  padding: 0 0 20px !important;
  margin-bottom: 32px !important;
  border-bottom: 0.5px solid var(--og-borde-dark) !important;
}
.ag-artista-seccion-label {
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   ARTISTAS — Grid y cards
   ══════════════════════════════════════════════════════════════════════ */

.ag-artistas-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  background: transparent !important;
}

/* Card: mismo lenguaje visual que obra */
.ag-artista-card {
  position: relative !important;
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}
.ag-artista-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(241,90,41,0.12) !important;
  pointer-events: none !important;
  transition: border-color 0.3s ease !important;
  z-index: 10 !important;
}
.ag-artista-card:hover::after {
  border-color: rgba(241,90,41,0.75) !important;
}

/* Foto — proporción 3:4 */
.ag-artista-card-foto {
  position: relative !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
}
.ag-artista-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Placeholder cuando no hay foto */
.ag-artista-card-foto-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--og-fondo-sidebar) !important;
  font-family: var(--og-font-display) !important;
  font-size: 64px !important;
  font-weight: 300 !important;
  color: var(--og-borde-dark) !important;
}

/* Overlay — CSS puro, sin jQuery */
.ag-artista-card-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 40px 16px 16px !important;
  background: linear-gradient(to top, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  pointer-events: none !important;
}
.ag-artista-card:hover .ag-artista-card-overlay {
  opacity: 1 !important;
}
.ag-artista-card-ver {
  color: #fff !important;
  font-family: var(--og-font-ui) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* Info debajo de la foto */
.ag-artista-card-info {
  padding: 12px 12px 12px !important;
}
.ag-artista-card-nombre {
  font-family: var(--og-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--og-naranja) !important;
  margin-bottom: 4px !important;
}
.ag-artista-card-obras {
  font-family: var(--og-font-body) !important;
  font-size: 10px !important;
  color: var(--og-texto-sec) !important;
  letter-spacing: 0.04em !important;
}
.ag-artista-card-ig {
  font-family: var(--og-font-body) !important;
  font-size: 10px !important;
  color: var(--og-texto-sec) !important;
  margin-top: 2px !important;
  letter-spacing: 0.04em !important;
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .ag-catalogo-wrap .ag-catalogo-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .ag-artista-seccion .ag-catalogo-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ag-artistas-grid                    { grid-template-columns: repeat(2, 1fr) !important; }
  .ag-artista-header-v2                { grid-template-columns: 1fr !important; padding: 24px !important; }
  .ag-artista-col-foto                 { order: -1 !important; }
  .ag-artista-foto-wrap                { width: 160px !important; }
}
@media (max-width: 600px) {
  .ag-catalogo-wrap .ag-catalogo-grid  { grid-template-columns: repeat(1, 1fr) !important; }
  .ag-artista-seccion .ag-catalogo-grid { grid-template-columns: repeat(1, 1fr) !important; }
  .ag-artistas-grid                    { grid-template-columns: repeat(1, 1fr) !important; }
  .ag-filtros-bar                      { gap: 16px !important; }
  .ag-filtro-item                      { gap: 8px !important; }
  .ag-filtros-count                    { margin-left: 0 !important; width: 100% !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   BOTONES — solo agrega borde blanco a los que no lo tenían
   ══════════════════════════════════════════════════════════════════════ */

/* CTA obra individual — colores en bloque maestro de botones */


/* ══════════════════════════════════════════════════════════════════════
   OBRA INDIVIDUAL — descripción ancho completo
   ══════════════════════════════════════════════════════════════════════ */

.ag-obra-descripcion-texto {
  max-width: 100% !important;
}


/* ══════════════════════════════════════════════════════════════════════
   OBRA INDIVIDUAL — columna imagen sin altura fija
   ══════════════════════════════════════════════════════════════════════ */

.ag-obra-galeria-col {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: flex-start !important;
}

/* Card body padding — iguala .ag-artista-card-info */
.ag-obra-card-body {
  padding: 12px 12px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   CONFIGURADOR — Adaptación al fondo oscuro del sitio
   ══════════════════════════════════════════════════════════════════════ */

/* Descripción de la obra */
.ag-obra-descripcion {
  color: #FAF9F7 !important;
}

/* Etiquetas de sección (TAMAÑO / PAPEL / PRESENTACIÓN) */
.ag-config-label {
  color: rgba(250,249,247,0.55) !important;
}

/* Línea divisoria del panel */
.ag-config-panel {
  border-top-color: rgba(250,249,247,0.12) !important;
}

/* ── Cards de selección — colores en bloque maestro de botones ─────── */
.ag-opcion-desc {
  color: rgba(250,249,247,0.5) !important;
  max-width: none !important;
}

/* Hint de selección */
.ag-config-hint {
  font-family: var(--og-font-body) !important;
  font-size: 13px !important;
  color: rgba(250,249,247,0.45) !important;
  margin: -12px 0 24px !important;
  line-height: 1.5 !important;
}

/* Título de sección del configurador */
.ag-config-seccion-titulo {
  font-family: var(--og-font-ui) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--og-naranja) !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  border-bottom: 0.5px solid rgba(250,249,247,0.12) !important;
}

/* 3 columnas: Tamaño | Papel | Presentación — sin desborde */
.ag-config-opciones-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ag-config-opciones-wrap > .ag-config-bloque {
  min-width: 0 !important;
}

/* Opciones: estilo lista — layout (colores en bloque maestro) */
.ag-config-opciones-wrap .ag-config-opciones {
  flex-direction: column !important;
  gap: 0 !important;
}
.ag-config-opciones-wrap .ag-opcion {
  min-width: unset !important;
  width: 100% !important;
  padding: 10px 12px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
.ag-config-opciones-wrap .ag-opcion-desc {
  max-width: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  color: rgba(250,249,247,0.5) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  margin-top: 3px !important;
  display: block !important;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 700px) {
  .ag-config-opciones-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* Contador de edición disponible */
.ag-edicion-contador {
  color: rgba(250,249,247,0.7) !important;
}

/* ── Panel de precio ────────────────────────────────────────────────── */
.ag-precio-panel {
  text-align: center !important;
  padding: 28px 0 !important;
  border-top-color: rgba(250,249,247,0.12) !important;
  border-bottom-color: rgba(250,249,247,0.12) !important;
}
.ag-precio-label {
  color: rgba(250,249,247,0.55) !important;
  letter-spacing: 0.25em !important;
}
.ag-precio-total {
  color: #FAF9F7 !important;
  font-size: 52px !important;
  font-family: var(--og-font-display) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
}
.ag-precio-equivalente {
  color: rgba(250,249,247,0.5) !important;
  font-size: 14px !important;
  font-family: var(--og-font-ui) !important;
  letter-spacing: 0.06em !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
}
.ag-precio-nota {
  color: rgba(250,249,247,0.4) !important;
  font-size: 11px !important;
  margin-top: 8px !important;
}

/* ── Botones ────────────────────────────────────────────────────────── */
.ag-config-acciones {
  justify-content: center !important;
  gap: 16px !important;
}
/* Comprar / Encargar — colores en bloque maestro, solo layout aquí */
.ag-btn-comprar { padding: 16px 48px !important; letter-spacing: 0.15em !important; }
.ag-btn-encargo { padding: 16px 32px !important; }

/* ── Formulario de comprador ────────────────────────────────────────── */
.ag-form-comprador {
  background: rgba(250,249,247,0.04) !important;
  border-color: rgba(250,249,247,0.12) !important;
}
.ag-form-titulo {
  color: #FAF9F7 !important;
  border-bottom-color: rgba(250,249,247,0.12) !important;
}
.ag-campo label {
  color: rgba(250,249,247,0.55) !important;
}
.ag-campo input,
.ag-campo textarea {
  background: rgba(250,249,247,0.05) !important;
  border-color: rgba(250,249,247,0.15) !important;
  color: #FAF9F7 !important;
}
.ag-campo input::placeholder,
.ag-campo textarea::placeholder {
  color: rgba(250,249,247,0.3) !important;
}
.ag-campo input:focus,
.ag-campo textarea:focus {
  border-color: var(--og-naranja) !important;
}
.ag-cargando {
  color: rgba(250,249,247,0.6) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   OBRA INDIVIDUAL — colores adaptados al fondo oscuro
   ══════════════════════════════════════════════════════════════════════ */

.ag-obra-titulo {
  color: var(--og-texto-dark) !important;
}
.ag-obra-meta {
  border-bottom-color: rgba(250,249,247,0.1) !important;
}
.ag-obra-meta-label {
  color: rgba(250,249,247,0.4) !important;
}
.ag-obra-meta-valor {
  color: var(--og-texto-dark) !important;
}
.ag-obra-precio-label {
  color: rgba(250,249,247,0.4) !important;
}
.ag-obra-precio-valor {
  color: var(--og-texto-dark) !important;
}
.ag-obra-ediciones-titulo {
  color: rgba(250,249,247,0.45) !important;
}
.ag-obra-edicion-item {
  background: rgba(250,249,247,0.04) !important;
}
.ag-obra-edicion-medida {
  color: var(--og-texto-dark) !important;
}
.ag-obra-edicion-precio {
  color: var(--og-texto-dark) !important;
}
.ag-obra-edicion-stock {
  color: rgba(250,249,247,0.4) !important;
}
.ag-obra-cta-nota {
  color: rgba(250,249,247,0.4) !important;
}
.ag-obra-serie-badge {
  border-top-color: rgba(250,249,247,0.1) !important;
  color: rgba(250,249,247,0.55) !important;
}
.ag-obra-serie-badge a {
  color: var(--og-naranja) !important;
}
.ag-obra-descripcion {
  border-top-color: rgba(250,249,247,0.1) !important;
}
.ag-obra-descripcion h2 {
  color: var(--og-texto-dark) !important;
}
.ag-obra-descripcion-texto {
  color: rgba(250,249,247,0.75) !important;
}
.ag-obra-breadcrumb,
.ag-obra-breadcrumb a {
  color: rgba(250,249,247,0.35) !important;
}
.ag-obra-breadcrumb a:hover {
  color: var(--og-naranja) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   SERIE INDIVIDUAL — colores adaptados al fondo oscuro
   ══════════════════════════════════════════════════════════════════════ */

.ag-serie-titulo {
  color: var(--og-texto-dark) !important;
}
.ag-serie-descripcion {
  color: rgba(250,249,247,0.75) !important;
}
.ag-serie-meta {
  color: rgba(250,249,247,0.45) !important;
}

/* Formulario consulta colección completa */
#ag-serie-form-wrap {
  background: rgba(250,249,247,0.05) !important;
  border-color: rgba(250,249,247,0.12) !important;
}
#ag-serie-form-wrap h3 {
  color: var(--og-texto-dark) !important;
}
#ag-serie-form-wrap p {
  color: rgba(250,249,247,0.5) !important;
}
#ag-serie-form-wrap label {
  color: rgba(250,249,247,0.45) !important;
}
#ag-serie-form-wrap input {
  background: rgba(250,249,247,0.06) !important;
  border-color: rgba(250,249,247,0.15) !important;
  color: var(--og-texto-dark) !important;
}
#ag-serie-form-wrap input::placeholder {
  color: rgba(250,249,247,0.3) !important;
}
#ag-serie-form-wrap input:focus {
  border-color: var(--og-naranja) !important;
  outline: none !important;
}
/* #ag-serie-btn-cancelar — colores en bloque maestro de botones */


/* ══════════════════════════════════════════════════════════════════════
   SERIES — Cards con borde naranja al hover (igual que obras y artistas)
   ══════════════════════════════════════════════════════════════════════ */

.ag-series-grid {
  gap: 20px !important;
}

.ag-serie-card {
  position: relative !important;
}
.ag-serie-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid rgba(241,90,41,0.12) !important;
  pointer-events: none !important;
  transition: border-color 0.3s ease !important;
  z-index: 10 !important;
}
.ag-serie-card:hover::after {
  border-color: rgba(241,90,41,0.75) !important;
}
.ag-serie-card-nombre {
  font-family: var(--og-font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--og-texto-dark) !important;
}
.ag-serie-card-precio {
  color: var(--og-texto-sec) !important;
}
.ag-serie-card-info {
  padding: 12px 12px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   VERIFICAR CERTIFICADO — colores adaptados al fondo oscuro
   ══════════════════════════════════════════════════════════════════════ */

.ag-verificar-intro {
  font-size: 14px !important;
  color: rgba(250,249,247,0.6) !important;
  margin-bottom: 20px !important;
}
.ag-verificar-card {
  background: rgba(250,249,247,0.04) !important;
  border-color: rgba(250,249,247,0.12) !important;
}
.ag-verificar-tabla td {
  border-bottom-color: rgba(250,249,247,0.08) !important;
  color: var(--og-texto-dark) !important;
}
.ag-verificar-tabla td:first-child {
  color: rgba(250,249,247,0.45) !important;
}
.ag-verificar-historial {
  border-top-color: rgba(250,249,247,0.1) !important;
}
.ag-verificar-historial li {
  color: rgba(250,249,247,0.5) !important;
}

/* Panel transferencia de titularidad */
#ag-transferencia-panel {
  background: rgba(250,249,247,0.05) !important;
  border-color: rgba(250,249,247,0.12) !important;
}
#ag-transferencia-panel h3 {
  color: var(--og-texto-dark) !important;
}
#ag-transferencia-panel p {
  color: rgba(250,249,247,0.5) !important;
}
#ag-transferencia-panel label {
  color: rgba(250,249,247,0.45) !important;
}
#ag-transferencia-panel input {
  background: rgba(250,249,247,0.06) !important;
  border-color: rgba(250,249,247,0.15) !important;
  color: var(--og-texto-dark) !important;
  box-sizing: border-box !important;
}
#ag-transferencia-panel input::placeholder {
  color: rgba(250,249,247,0.3) !important;
}
#ag-transferencia-panel input:focus {
  border-color: var(--og-naranja) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CATÁLOGO PDF — botón de descarga y contador de cierre
   ══════════════════════════════════════════════════════════════════════ */

.ag-catalogo-dl-btn {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 13px !important;
  border: 1px solid var(--og-borde-dark) !important;
  color: var(--og-texto-sec) !important;
  font-family: var(--og-font-ui) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color .2s, border-color .2s !important;
  background: transparent !important;
}
.ag-catalogo-dl-btn:hover {
  color: var(--og-naranja) !important;
  border-color: var(--og-naranja) !important;
}
.ag-catalogo-dl-btn svg {
  flex-shrink: 0 !important;
}

/* Contador de resultados — debajo de la barra, alineado a la derecha */
.ag-filtros-count-footer {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: -20px !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
}
.ag-filtros-count-footer .ag-filtros-count {
  margin-left: 0 !important;   /* override del auto que tenía dentro de la barra */
}