/* ================================================================
   HERO GASEX — BLOQUE AISLADO (banner-hero-gasex)
================================================================ */

.wp-block-banner-hero-gasex {
  --gasex-white:#ffffff;
  --gasex-dark:#1a1a1a;
  --gasex-accent:#0056b3;
  --transition-smooth:all .4s cubic-bezier(.165,.84,.44,1);
  --transition-fade:opacity 1.2s ease-in-out;
}

/* ================================================================
   BASE HERO
================================================================ */

.wp-block-banner-hero-gasex .hero-gasex{
  position:relative;
  width:100%;
  min-height:auto;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--gasex-dark);
}

.wp-block-banner-hero-gasex .hero-slider-main{
  position:relative;
  width:100%;
}

/* ================================================================
   SLIDES
================================================================ */

.wp-block-banner-hero-gasex .hero-slide{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  min-height:clamp(400px, 60vh, 700px);
  opacity:1;
  pointer-events:auto;
  overflow:hidden;
  z-index:1;
}

.wp-block-banner-hero-gasex .hero-slide.is-active{
  z-index:2;
}

/* ================================================================
   IMAGEN
================================================================ */

.wp-block-banner-hero-gasex .hero-imagen-wrapper{
  position:absolute;
  inset:0;
  z-index:1;
}

.wp-block-banner-hero-gasex .hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 20s linear;
}

.wp-block-banner-hero-gasex .hero-slide.is-active .hero-img{
  transform:scale(1.1);
}

/* ================================================================
   OVERLAY
================================================================ */

.wp-block-banner-hero-gasex .hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.wp-block-banner-hero-gasex .hero-slide.pos-left::before{
  background: linear-gradient(
    to right,
    rgba(0,0,0,var(--overlay-strength,0.6)) 0%,
    rgba(0,0,0,0.55) 25%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.10) 75%,
    rgba(0,0,0,0.00) 100%
  );
}

.wp-block-banner-hero-gasex .hero-slide.pos-right::before{
  background: linear-gradient(
    to left,
    rgba(0,0,0,var(--overlay-strength,0.6)) 0%,
    rgba(0,0,0,0.55) 25%,
    rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.10) 75%,
    rgba(0,0,0,0.00) 100%
  );
}

.wp-block-banner-hero-gasex .hero-slide.pos-center::before{
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,var(--overlay-strength,0.6)) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.00) 100%
  );
}

/* ================================================================
   CONTENT
================================================================ */

.wp-block-banner-hero-gasex .hero-contenido-wrapper{
  position:relative;
  z-index:3;
  width:100%;
 padding:40px 0;
  color:var(--gasex-white);
}

.wp-block-banner-hero-gasex .hero-gasex-container{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 25px;
  display:flex;
  flex-direction:column;
}

.wp-block-banner-hero-gasex .hero-contenido{
  max-width:800px;
  width:100%;
  opacity:1;
  transform:none;
}

/* ================================================================
   TYPOGRAPHY
================================================================ */

.wp-block-banner-hero-gasex .hero-title{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:2.6rem;
  line-height:1.1;
  letter-spacing:-0.02em;
  margin-bottom:22px;
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}

.wp-block-banner-hero-gasex .hero-desc{
  font-size:1.15rem;
  line-height:1.6;
  margin-bottom:30px;
  opacity:.95;
  text-shadow:0 4px 20px rgba(0,0,0,.5);
}

/* ================================================================
   ALIGNMENTS
================================================================ */

.wp-block-banner-hero-gasex .hero-slide.pos-left .hero-gasex-container{
  align-items:flex-start;
  text-align:left;
}

.wp-block-banner-hero-gasex .hero-slide.pos-center .hero-gasex-container{
  align-items:center;
  text-align:center;
}

.wp-block-banner-hero-gasex .hero-slide.pos-right .hero-gasex-container{
  align-items:flex-end;
  text-align:right;
}

.wp-block-banner-hero-gasex .hero-slide.pos-right .hero-desc{
  text-align: justify;
}

/* ================================================================
   SINGLE MODE
================================================================ */

.wp-block-banner-hero-gasex .hero-gasex--single .hero-slide{
  position:relative;
  opacity:1;
  pointer-events:auto;
}

.wp-block-banner-hero-gasex .hero-gasex--single.alignfull{
  width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
}

/* ================================================================
   GUTENBERG FIX
================================================================ */

.block-editor-page .wp-block-banner-hero-gasex .hero-gasex{
  min-height:450px;
}

.block-editor-page .wp-block-banner-hero-gasex .hero-slide{
  position:relative!important;
  opacity:1!important;
}

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

@media(min-width:992px){

  .wp-block-banner-hero-gasex .hero-title{
    font-size:3.4rem;
  }

  .wp-block-banner-hero-gasex .hero-desc{
    font-size:1.1rem;
  }

}

/* ================================================================
   MOBILE
================================================================ */

@media(max-width:768px){

  /* alignfull usa 100vw + margin-left:50% — en mobile genera scroll horizontal */
  .wp-block-banner-hero-gasex .hero-gasex--single.alignfull {
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .wp-block-banner-hero-gasex .hero-slide{
    min-height:auto;
    padding:0;
    overflow:hidden; /* min-height:auto hace que el slide crezca con el contenido — overflow:hidden evita que scale(1.1) de la imagen desborde */
  }

  /* La imagen: centrada + sin desborde por scale — el wrapper ya tiene overflow:hidden del slide */
  .wp-block-banner-hero-gasex .hero-img {
    object-position: center center !important;
  }

  /* Cancelar el efecto Ken Burns en mobile para evitar overflow y diferencia con el overlay */
  .wp-block-banner-hero-gasex .hero-slide.is-active .hero-img {
    transform: none;
  }

  /* En mobile overlay uniforme fijo al 0.6 — gradientes direccionales dejan zonas sin cubrir */
  .wp-block-banner-hero-gasex .hero-slide::before {
    background: rgba(0,0,0,0.6) !important;
  }

  .wp-block-banner-hero-gasex .hero-contenido-wrapper{
    padding:60px 0 72px; /* bottom más generoso para que el botón no quede pegado al borde */
  }

  .wp-block-banner-hero-gasex .hero-slide .hero-gasex-container{
    align-items:center!important;
    text-align:center!important;
  }

  .wp-block-banner-hero-gasex .hero-title{
    font-size:2.2rem;
  }

  .wp-block-banner-hero-gasex .hero-desc{
    font-size:1rem;
  }

}

@media(max-width:480px){

  .wp-block-banner-hero-gasex .hero-title{
    font-size:1.9rem;
  }

  .wp-block-banner-hero-gasex .hero-desc{
    font-size:0.95rem;
    margin-bottom:24px;
  }

  .wp-block-banner-hero-gasex .hero-contenido-wrapper{
    padding:48px 0 64px;
  }

}