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

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: #0d0d0d;
  color: #fff;
  font-family: Roboto, Arial, sans-serif;
}

.section{
  padding: 28px 14px;
}

.container{
  max-width: 1080px;
  margin: 0 auto;
}


/* =========================
   FEATURE (imagen + overlay)
   - Control lado con: feature--left / feature--right
   - Control filtros por módulo con:
     style="--bg-brightness:...; --bg-saturate:...; --bg-contrast:..."
========================= */

.feature{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.feature__bg{
  width: 100%;
  height: auto;
  display: block;
}

.feature__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 60px;
}

.feature__content{
  max-width: 50%;
  color: #fff;
}

.feature__title{
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.1;
}

.feature__content p{
  margin: 0 0 10px;
  line-height: 1.45;
}

/* ===== CONTROL LADO (desktop) ===== */
.feature--left .feature__overlay{
  justify-content: flex-start;
  text-align: left;
  padding-right: 120px;
  padding-left: 60px;
}

.feature--right .feature__overlay{
  justify-content: flex-end;
  text-align: right;
  padding-left: 120px;   /* más aire hacia el centro */
  padding-right: 60px;
}

/* ===== MODAL ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.modal.is-active{
  display: block;
}

.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal__panel{
  background: #111;
  color: #fff;
  border-radius: 10px;
  max-width: 420px;
  width: 92%;
  padding: 20px;
  font-family: Roboto, Arial, sans-serif;
}

.modal__title{
  margin: 0 0 14px;
  font-family: 'rama', sans-serif;
  color: #d12c2c;
}

.modal__label{
  display:block;
  margin-bottom: 8px;
}

.modal__input{
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #000;
  color: #fff;
  margin-bottom: 10px;
}

.modal__consent{
  display:flex;
  gap: 8px;
  font-size: .9rem;
  align-items: flex-start;
  margin-bottom: 12px;
}

.modal__actions{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal__btn{
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.modal__btn--ghost{
  background: #333;
  color: #fff;
}

.modal__btn--primary{
  background: #d12c2c;
  color: #fff;
}

.modal__msg{
  margin: .6rem 0 0;
  font-size: .9rem;
  color: #9fd29f;
  display: none;
}


/* =========================
   SPLIT (texto + media en dos columnas)
   - Desktop: 2 columnas
   - Mobile: apila
========================= */

.split{
  display: flex;
  gap: 30px;
  align-items: center;
}

.split__text{
  flex: 1 1 52%;
  min-width: 0;
}

.split__media{
  flex: 1 1 48%;
  min-width: 0;
}

.split__media img,
.split__media video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.title{
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
}

.text{
  margin: 0 0 10px;
  line-height: 1.5;
}

.text-muted{
  opacity: .85;
}

.hero{
  min-height: clamp(520px, 70vh, 820px);
  overflow:hidden;
}

.hero__overlay{
  padding: clamp(18px, 3vw, 48px);
}

.hero__logo{
  width: clamp(200px, 32vw, 633px);
  height: auto;
  display:block;
  margin: 0 auto;
	margin-bottom: 18px;
}

/* =========================
   CTA (por si lo usas)
========================= */

.cta-button-wrapper{
  text-align: center;
  margin: 18px 0 22px; /* separa del hero y del siguiente módulo */
}

.cta-button{
  display: inline-block;
  background-color: #d12c2c;
  color: #ffffff;
  padding: 15px 30px;
  font-size: 1.2rem;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cta-button:hover{
  background-color: #a02020;
}


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

@media (max-width: 768px){

  /* ===== FEATURE (overlay) ===== */

  /* deja “lienzo” para el texto */
  .feature{
    min-height: 0;        /* ajusta 220–360 según imágenes */
  }

  .feature__bg{
    height: auto;
    width: 100%;
    object-fit: initial;
    object-position: initial;
  }

  /* overlay a ancho completo, sin paddings asimétricos */
  .feature__overlay{
    position: static;
    inset: auto;
    display: block;
    padding: 16px;
    background: rgba(0,0,0,.55);
  }

  /* apaga los paddings left/right en móvil */
  .feature--left .feature__overlay,
  .feature--right .feature__overlay{
    justify-content: initial;
    text-align: left;
    padding-left: 16px;
    padding-right: 16px;
  }

  .feature__content{
    max-width: 100%;
    width: 100%;
  }

  .feature__title{
    font-size: clamp(18px, 5.2vw, 26px);
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .feature__content p{
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }


  /* ===== SPLIT (apila en móvil) ===== */

  .split{
    flex-direction: column;
    gap: 16px;
  }

  .split__text,
  .split__media{
    width: 100%;
  }
	

}

@media (max-width: 768px){

  .hero{
    min-height: 420px; /* prueba 380–480 */
  }

  .hero__media{
    object-position: center 20%;
  }

  .hero__logo{
    width: min(82vw, 520px);
  }

  .hero__subtitle{
    max-width: 92%;
  }

}