/* ============================================
   OVERRIDE — hero y obras con fondo fijo real
   (pixel-preciso sobre el mockup de Gema)
   ============================================ */

@font-face{
  font-family:'OPTIGiant';
  src:url('../fonts/OPTIGiant.otf') format('opentype');
  font-display:swap;
}
@font-face{
  font-family:'Gatty';
  src:url('../fonts/Gatty-ExtraBold.otf') format('opentype');
  font-display:swap;
}

:root{
  --font-titan: 'OPTIGiant', var(--font-display);
  --font-gatty: 'Gatty', var(--font-display);
  --cream-real: #e9d4c5;
}

/* ---------- anclas de scroll (una sola página) ---------- */
#obras, #sobre-mi, #proceso{ scroll-margin-top: 20px; }

/* ---------- barra de sección (reutiliza el motivo del hero: negro + triángulos + mostaza) ---------- */
.section-divider{
  border:none; border-top:2px dashed var(--negro); opacity:.35;
  margin:0; width:100%;
}
.section-bar{
  position:relative;
  background-image:url('../img/bg_section_bar.jpg');
  background-size:100% 100%;
  aspect-ratio:4096/300;
  display:flex; align-items:center;
}
.section-bar h2{
  font-family:var(--font-titan);
  color:var(--hueso);
  font-size:clamp(28px,4.2vw,56px);
  letter-spacing:1px;
  margin:0;
  padding-left:6%;
  text-transform:uppercase;
}

/* ---------- consistencia del nav en TODO el sitio (no solo el hero) ---------- */
.main-nav a{
  font-family:var(--font-titan) !important;
  letter-spacing:.25em !important;
  font-weight:400 !important;
}
.main-nav a:hover, .main-nav a.active{
  color:#f1ead8 !important;
  border-color:#f1ead8 !important;
}

/* ---------- header transparente sobre el fondo fijo ---------- */
.site-header.on-image{
  position:absolute; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:none;
}
.site-header.on-image .brand{ visibility:hidden; } /* ya viene dibujado en la imagen */
.site-header.on-image .main-nav a,
.site-header.on-image .social-icons a{ font-family:var(--font-gatty); }

/* ---------- bloque fijo: HERO (capas: negro sólido + arte detrás + overlay transparente encima) ---------- */
.fixed-hero{
  position:relative;
  width:100%;
  height:100vh;
  background:var(--negro);
  overflow:hidden;
}
.fixed-hero .wrap-abs{
  position:absolute; inset:0;
}
.hero-overlay-img{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  height:100%;
  width:auto;
  object-fit:contain;
  z-index:6; pointer-events:none;
}

/* nav overlay, posicionado en % sobre la imagen del hero */
.hero-nav{
  position:absolute; top:2.2%; left:0; right:0;
  display:flex; justify-content:center;
  z-index:10;
}
.hero-nav ul{ display:flex; gap:clamp(20px,3.2vw,64px); }
.hero-nav a{
  color:#f1ead8; font-family:var(--font-titan);
  font-size:clamp(11px,1.05vw,17px); letter-spacing:0.25em;
  font-weight:400;
  padding-bottom:6px; border-bottom:2px solid transparent;
  transition:border-color .2s ease;
}
.hero-nav a:hover, .hero-nav a.active{ border-color:#f1ead8; color:#f1ead8; }

.hero-social{
  position:absolute; top:2%; right:2%; z-index:10;
  display:flex; gap:14px; align-items:center;
}
.hero-social a{ color:#f1ead8; width:clamp(18px,1.6vw,26px); height:clamp(18px,1.6vw,26px); }
.hero-social a:hover{ color:#e3a730; }

.hero-mobile-toggle{
  position:absolute; top:1.6%; right:3%; z-index:12; display:none;
  background:none; border:2px solid #f1ead8; color:#f1ead8;
  width:34px; height:34px; align-items:center; justify-content:center; border-radius:2px;
}

/* ---------- PNG artista tradicional + botón clickeable ---------- */
.hero-artista-bloque{
  position:absolute;
  left:25%; top:74%;
  width:14%;
  z-index:9;
}
.hero-artista-bloque img{ width:100%; display:block; }
.hero-artista-btn{
  position:absolute;
  left:10.9%; top:78.8%;
  width:77.4%; height:15%;
  z-index:10;
  display:block;
}

/* imagen de obra a sangre completa + carrusel, DETRÁS del overlay transparente */
.hero-art{
  position:absolute; left:46%; top:0; right:0; bottom:0;
  overflow:hidden; z-index:2;
}
.hero-art::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:22%;
  background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
  z-index:5; pointer-events:none;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }

.hero-arrows{ position:absolute; inset:0; z-index:15; pointer-events:none; }
.hero-arrows button{
  position:absolute; left:93.94%; width:3.72%;
  background:transparent; border:none; color:transparent;
  cursor:pointer; pointer-events:auto;
}
.hero-arrows button svg{ display:none; }
#heroNext{ top:35%; height:10%; }
#heroPrev{ top:47%; height:10%; }

/* ---------- barra OBRAS (título + explora colección) ---------- */
.fixed-obrasbar{
  position:relative;
  width:100%;
  aspect-ratio:4096/350;
  background-image:url('../img/bg_obras_bar.jpg');
  background-size:100% 100%;
  margin-top:-2px;
}

/* ---------- sección OBRAS: sidebar con trazo + grid en crema plano ---------- */
.obras-section-real{
  background:var(--cream-real);
  padding-bottom:70px;
  min-height:100vh;
}
.obras-layout{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  position:relative;
}
.obras-sidebar{
  position:relative;
  background-image:url('../img/bg_left_strip.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding:60px 12px 40px 50px;
  min-height:100%;
}
.obras-sidebar .filters-col{
  display:flex; flex-direction:column; gap:14px;
  position:relative; z-index:2;
}
.obras-sidebar button{
  background:none; border:none; text-align:left;
  font-family:var(--font-gatty); font-size:14px; letter-spacing:1.5px;
  color:#1a1512; padding:8px 10px;
  transition:background .2s, color .2s;
}
.obras-sidebar button.active,
.obras-sidebar button:hover{
  background:#1e1512; color:#f1ead8;
}

.obras-grid-real{
  padding:60px 20px 0 0;
  position:relative;
  z-index:2;
}
.obras-grid-real .gallery-grid{ grid-template-columns:repeat(6,1fr); gap:16px; }

.obras-bottom-link{
  display:flex; justify-content:flex-end; padding:30px 40px 0 0;
  position:relative; z-index:3;
}
.obras-bottom-link a{
  font-family:var(--font-gatty); font-size:14px; letter-spacing:1.5px;
  color:#1a1512;
}
.obras-bottom-link a:hover{ color:#c1440e; }

.obras-corner-deco{
  position:absolute; right:0; bottom:0; width:340px; max-width:30%;
  z-index:1; pointer-events:none; opacity:.95;
}

@media (max-width: 980px){
  .obras-layout{ grid-template-columns:1fr; }
  .obras-sidebar{ background-size:cover; padding:40px 24px; }
  .obras-sidebar .filters-col{ flex-direction:row; flex-wrap:wrap; }
  .obras-grid-real{ padding:40px 20px 0; }
  .obras-grid-real .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-copy{ display:none; }
  .hero-btn{ left:6%; top:auto; bottom:6%; width:34%; }
  .hero-nav{ display:none; }
  .hero-mobile-toggle{ display:flex; }
  .hero-social{ display:none; }
}
@media (max-width:560px){
  .obras-grid-real .gallery-grid{ grid-template-columns:1fr; }
}