/* ===== Image wipe reveal (Ron Barceló style) ===== */
/* .rb-img-reveal{
  position: relative;
  overflow: hidden;
  background: #2c2c2c;
}

.rb-img-reveal img{
  display:block;
  width:100%;
  height:auto;
}

html.js .rb-img-reveal img{
  opacity: 0;
  transition: opacity 0ms linear 720ms;
}

html.js .rb-img-reveal.is-visible img{
  opacity: 1;
}

html.js .rb-img-reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background:#2c2c2c;
  z-index:1;
  opacity:1;
  pointer-events:none;
}

html.js .rb-img-reveal.is-visible::after{
  animation: rbBaseFade 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

html.js .rb-img-reveal::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:20px;
  height:0;
  background:#9d5135;
  z-index:2;
  opacity:1;
  pointer-events:none;
}

html.js .rb-img-reveal.is-visible::before{
  animation: rbWipeReveal 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes rbBaseFade{
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rbWipeReveal{
  0%{ width:20px; height:0%; opacity:1; }
  35%{ width:20px; height:100%; opacity:1; }
  65%{ width:100%; height:100%; opacity:1; }
  100%{ width:100%; height:100%; transform: translateX(105%); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  html.js .rb-img-reveal::before,
  html.js .rb-img-reveal::after{ display:none; }
  html.js .rb-img-reveal img{ opacity:1; transition:none; }
} */


/* ===== Image wipe reveal (Ron Barceló style) ===== */
.rb-img-reveal{
  position: relative;
  overflow: hidden;
  background: #2c2c2c; /* fondo real del contenedor */
}

.rb-img-reveal img{
  display:block;
  width:100%;
  height:auto;
}

/* Si JS está activo: la imagen arranca invisible */
html.js .rb-img-reveal img{
  opacity: 0;
  /* aparece cuando el overlay base ya está empezando a irse (70% de 1200ms = 840ms aprox) */
  transition: opacity 0ms linear 840ms;
}

html.js .rb-img-reveal.is-visible img{
  opacity: 1;
}

/* Overlay base: MISMO color que el fondo del wrapper */
html.js .rb-img-reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background:#2c2c2c;  /* <- clave para que sea idéntica */
  z-index:1;
  opacity:1;
  pointer-events:none;
}

html.js .rb-img-reveal.is-visible::after{
  animation: rbBaseFade 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Wipe cobre */
html.js .rb-img-reveal::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:20px;
  height:0;
  background:#9d5135;
  z-index:2;
  opacity:1;
  pointer-events:none;
}

html.js .rb-img-reveal.is-visible::before{
  animation: rbWipeReveal 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Base overlay: mantiene tapado y desaparece al final */
@keyframes rbBaseFade{
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes rbWipeReveal{
  0%{
    width:20px;
    height:0%;
    transform: translateX(0);
    opacity:1;
  }
  35%{
    width:20px;
    height:100%;
    transform: translateX(0);
    opacity:1;
  }
  65%{
    width:100%;
    height:100%;
    transform: translateX(0);
    opacity:1;
  }
  100%{
    width:100%;
    height:100%;
    transform: translateX(105%);
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  html.js .rb-img-reveal::before,
  html.js .rb-img-reveal::after{
    display:none;
  }
  html.js .rb-img-reveal img{
    opacity:1;
    transition:none;
  }
}