/* ==========================================================================
   R&M DECORACIONES - INSTALACIONES (css/instalaciones.css)
   Galería simple y elegante: cada pieza (foto o video) es independiente
   ========================================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  scroll-behavior:smooth;
}

body{
  background:#0c0c0c;
  color:#efece5;
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x:hidden;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

::selection{
  background:#c9a46b;
  color:#0c0c0c;
}

a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:1px solid #c9a46b;
  outline-offset:4px;
}

/* ============ NAVBAR ============ */

header{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:999;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.navbar{
  max-width:1400px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 5%;
}

.logo{
  font-size:2rem;
  font-weight:800;
  letter-spacing:2px;
  color:#fff;
}

.logo span{ color:#c9a46b; }

.nav-links{
  display:flex;
  gap:30px;
}

.nav-links a{
  text-decoration:none;
  color:white;
  font-weight:500;
  transition:0.3s;
  position:relative;
}

.nav-links a:hover,
.nav-links a.active{ color:#c9a46b; }

.nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;
  width:0%;
  height:2px;
  background:#c9a46b;
  transition:0.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after{ width:100%; }

.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:white;
  font-size:28px;
  padding:5px;
}

@media (max-width:768px){
  .navbar{ position:relative; }
  .menu-toggle{ display:block; z-index:1001; }
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#111;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
    z-index:1000;
  }
  .nav-links.active{ max-height:500px; padding:20px 0; }
  .nav-links a{ width:100%; text-align:center; padding:14px 0; }
}

/* ============ INTRO ============ */

.ig-intro{
  max-width:760px;
  margin:0 auto;
  padding:11rem 6% 4rem;
  text-align:center;
}

.ig-intro-kicker{
  font-size:0.82rem;
  letter-spacing:0.16em;
  color:#8a8a8a;
  margin-bottom:1.25rem;
}

.ig-intro h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.1rem);
  line-height:1.22;
  color:#fdfbf6;
}

/* ============ LISTA DE PIEZAS ============ */

.ig-list{
  max-width:1100px;
  margin:0 auto;
  padding:2rem 6% 5rem;
  display:flex;
  flex-direction:column;
  gap:6vh;
}

.ig-item{
  width:100%;
}

/* Alternar tamaño para dar ritmo sin agrupar por categoría:
   impares un poco más grandes / pares un poco más chicos y centrados */
.ig-item:nth-child(even){
  max-width:78%;
  margin:0 auto;
}

.ig-item-media{
  display:block;
  width:100%;
  border:none;
  padding:0;
  border-radius:6px;
  overflow:hidden;
  background:#141414;
  position:relative;
}

.ig-item-media img,
.ig-item-media video{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.ig-item-media:hover img,
.ig-item-media:hover video{ transform:scale(1.025); }

.ig-mute-badge{
  position:absolute;
  bottom:14px;
  right:14px;
  padding:5px 12px;
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:#efece5;
  background:rgba(12,12,12,0.55);
  border:1px solid rgba(255,255,255,0.25);
  border-radius:20px;
  backdrop-filter:blur(3px);
}

.ig-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.55);
  background:rgba(12,12,12,0.4);
  backdrop-filter:blur(3px);
}

.ig-play::before{
  content:'';
  position:absolute;
  top:50%;
  left:56%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent #fff;
}

@media (max-width:700px){
  .ig-item:nth-child(even){
    max-width:100%;
  }
  .ig-list{ padding:1rem 6% 4rem; gap:4vh; }
  .ig-intro{ padding:9rem 6% 3rem; }
}

/* ============ CTA ============ */

.ig-cta{
  text-align:center;
  padding:7rem 6%;
  border-top:1px solid rgba(255,255,255,0.08);
}

.ig-cta h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  color:#fdfbf6;
  margin-bottom:2rem;
}

.ig-cta-link{
  display:inline-block;
  padding:15px 36px;
  border:1px solid #c9a46b;
  border-radius:2px;
  color:#c9a46b;
  text-decoration:none;
  font-size:0.9rem;
  letter-spacing:0.06em;
  transition:0.3s;
}

.ig-cta-link:hover{
  background:#c9a46b;
  color:#111;
}

/* ============ FOOTER ============ */

footer{
  background:#0a0a0a;
  padding:40px 8%;
  border-top:1px solid rgba(255,255,255,0.08);
}

.footer-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}

.footer-content p{ color:#888; }

.footer-links{ display:flex; gap:20px; }

.footer-links a{
  text-decoration:none;
  color:#aaa;
  transition:0.3s;
}

.footer-links a:hover{ color:#c9a46b; }

/* ============ LIGHTBOX ============ */

.ig-lightbox{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:5vh 5vw;
  background:rgba(6,6,6,0.97);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease;
}

.ig-lightbox.open{ opacity:1; visibility:visible; }

.ig-lightbox-stage{
  max-width:min(88vw, 1100px);
  max-height:76vh;
  display:flex;
}

.ig-lightbox-stage img,
.ig-lightbox-stage video{
  max-width:100%;
  max-height:76vh;
  border-radius:4px;
  object-fit:contain;
}

.ig-lightbox-caption{
  color:#a8a39a;
  font-size:0.9rem;
  letter-spacing:0.02em;
  min-height:1.2em;
}

.ig-lightbox-close{
  position:absolute;
  top:24px;
  right:28px;
  background:none;
  border:none;
  color:#fff;
  font-size:2rem;
  line-height:1;
}

.ig-lightbox-close:hover{ color:#c9a46b; }

.ig-lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  color:#fff;
  font-size:2.6rem;
  line-height:1;
  padding:0.5rem 1rem;
  opacity:0.6;
  transition:opacity 0.25s;
}

.ig-lightbox-nav:hover{ opacity:1; color:#c9a46b; }

.ig-lightbox-prev{ left:8px; }
.ig-lightbox-next{ right:8px; }

@media (max-width:600px){
  .ig-lightbox-nav{ font-size:2rem; }
}

@media (prefers-reduced-motion: reduce){
  .ig-item-media:hover img{ transform:none; }
}

/* ==========================================
   ANTES Y DESPUÉS
========================================== */

.before-after-section{
  width:100%;
  padding:100px 8%;
  background:#111;
  color:#fff;
}

.before-after-header{
  max-width:700px;
  margin:0 auto 70px;
  text-align:center;
}

.before-after-kicker{
  color:#b8965a;
  font-size:11px;
  font-weight:600;
  letter-spacing:3px;
  margin-bottom:18px;
}

.before-after-header h2{
  font-family:'Fraunces', serif;
  font-size:clamp(42px, 6vw, 75px);
  font-weight:400;
  margin-bottom:18px;
}

.before-after-header p{
  color:#aaa;
  font-size:15px;
  line-height:1.7;
}


/* CADA PROYECTO */

.before-after-project{
  max-width:1200px;
  margin:0 auto 100px;
}

.before-after-info{
  margin-bottom:25px;
}

.before-after-info span{
  display:block;
  color:#b8965a;
  font-size:11px;
  letter-spacing:2px;
  font-weight:600;
  margin-bottom:10px;
}

.before-after-info h3{
  font-family:'Fraunces', serif;
  font-size:32px;
  font-weight:400;
  margin-bottom:10px;
}

.before-after-info p{
  color:#aaa;
  font-size:14px;
  line-height:1.6;
}


/* CONTENEDOR DE IMÁGENES */

.before-after-container{
  position:relative;
  width:100%;
  height:650px;
  overflow:hidden;
  background:#1a1a1a;
  border-radius:3px;
  user-select:none;
  touch-action:none;
}


/* IMÁGENES */

.ba-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  pointer-events:none;
}

.ba-after{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ba-before-wrapper{
  position:absolute;
  top:0;
  left:0;
  width:50%;
  height:100%;
  overflow:hidden;
  border-right:2px solid rgba(255,255,255,0.85);
}

.ba-before{
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:none;
}


/* ETIQUETAS */

.ba-label{
  position:absolute;
  top:22px;
  z-index:5;
  padding:9px 14px;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  pointer-events:none;
}

.ba-label-before{
  left:22px;
}

.ba-label-after{
  right:22px;
}


/* LÍNEA CENTRAL */

.ba-slider-line{
  position:absolute;
  top:0;
  left:50%;
  width:2px;
  height:100%;
  background:#fff;
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
}


/* BOTÓN CENTRAL */

.ba-handle{
  position:absolute;
  top:50%;
  left:50%;
  width:52px;
  height:52px;
  transform:translate(-50%, -50%);
  background:#fff;
  color:#111;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  z-index:6;
  box-shadow:0 5px 25px rgba(0,0,0,0.35);
  pointer-events:none;
}

.ba-handle span{
  font-size:16px;
  font-weight:600;
}


/* INPUT INVISIBLE QUE CONTROLA EL SLIDER */

.ba-range{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:10;
  opacity:0;
  cursor:ew-resize;
  margin:0;
}


/* EFECTO HOVER */

.before-after-container:hover .ba-handle{
  transform:translate(-50%, -50%) scale(1.08);
}

.ba-handle{
  transition:transform .25s ease;
}


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

@media(max-width:768px){

  .before-after-section{
    padding:70px 20px;
  }

  .before-after-header{
    margin-bottom:50px;
  }

  .before-after-project{
    margin-bottom:70px;
  }

  .before-after-container{
    height:480px;
  }

  .before-after-info h3{
    font-size:27px;
  }

  .ba-label{
    top:15px;
    padding:8px 10px;
    font-size:9px;
  }

  .ba-label-before{
    left:15px;
  }

  .ba-label-after{
    right:15px;
  }

  .ba-handle{
    width:46px;
    height:46px;
  }

}


@media(max-width:480px){

  .before-after-container{
    height:380px;
  }

  .before-after-header h2{
    font-size:42px;
  }

  .before-after-info h3{
    font-size:24px;
  }

}