@font-face {
  font-family: 'poppins1';
  src: url('../fonts/delight-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'poppins2';
  src: url('../fonts/delight-medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'poppins3';
  src: url('../fonts/delight-semibold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'poppins4';
  src: url('../fonts/delight-bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}@font-face {
  font-family: 'delight-extrabold';
  src: url('../fonts/delight-extrabold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
		--font-xsss: clamp(0.02rem, calc(1rem + 0.1vw), 0.8rem);
		--font-xss: clamp(0.1rem, calc(1rem + 0.1vw), 1.4rem);
		--font-xs: clamp(0.2rem, calc(1.1rem + 0.2vw), 1.7rem);
		--font-sm: clamp(1.42rem, calc(1.24rem + 0.9vw), 1.88rem);
		--font-md: clamp(1.89rem, calc(1.53rem + 1.8vw), 2.81rem);
		--font-lg: clamp(2.52rem, calc(1.85rem + 3.32vw), 4.22rem);
  		--font-xl: clamp(3.35rem, calc(2.19rem + 2.8vw), 6.33rem);  
  		--font-xxl: clamp(6.35rem, calc(4.19rem + 8.8vw), 10.33rem);  
		--padding-xl: clamp(3.35rem, calc(2.19rem + 111.8vw), 6.33rem); 
		--padding-xll: clamp(4.35rem, calc(2.99rem + 141.8vw), 8.33rem); 
		
}

.poppins100{ font-family: poppins1 }
.poppins200{ font-family: poppins2 }
.poppins300{ font-family: poppins3 }
.poppins400{ font-family: poppins4 }
.poppins500{ font-family: delight-extrabold !important }

.font-xsss{font-size: var(--font-xsss) !important}
.font-xss{font-size: var(--font-xss) !important}
.font-xs{font-size: var(--font-xs) !important}
.font-sm{font-size: var(--font-sm) !important} 
.font-md{font-size: var(--font-md) !important}
.font-lg{font-size: var(--font-lg) !important}
.font-xl{font-size: var(--font-xl) !important}
.font-xxl{font-size: var(--font-xxl) !important}



/****banner*****/


.hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  align-items: center;
}

.hero-text {
  max-width: 600px;
  color: #fff;

  margin-left: 5%; /* lo pega a la izquierda con espacio */
}

.hero-text h1 {
  font-size: clamp(28px, 5vw, 60px);
  margin-bottom: 10px;
}

.hero-text p {
  font-size: clamp(14px, 2vw, 18px);
}

/*****************************/
.titular-banner{
	position: absolute;
	bottom: 60px;
    left: 60px;
    z-index: 3;
    color: #ffffff;
}
.hero-slider {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

/* slides */
.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

/* imagen y video */
.slide img,
.slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 2;
}


.hero-text {
  max-width: 600px;
  color: #fff;
}

.hero-text h1 {
  font-size: clamp(28px, 5vw, 60px);
}

.hero-text p {
  font-size: clamp(14px, 2vw, 18px);
  margin-top: 10px;
}

.pad-no{padding: 0}

.mascara-img-lateral{
	width: 100%;
	overflow: hidden;
	height: 68%;
    border-radius: 0px 20px 20px 0px;
}
.mascara-img-lateral2{
	width: 100%;
	overflow: hidden;
	height: 68%;
    border-radius: 20px 0px 0px 20px;
}

.espacio20px{ padding: 20px;}

.titular-centrado{
	display: flex;
    justify-content: center;
}

.text-justify{text-align: justify;}

.seccion1-us{
	width: 100%;
	background-color: #f4f4f4;
	padding: 0px;
}

.align-text-center{text-align: center}

.letra-azul{color: #30309e;}

.texto-raya-centro::before{
	content: "";
    border: 1px solid #e44200;
    width: 7%;
    position: absolute;
    bottom: -5px;
}
.item-izq::before{
	content: "";
    border: 2px solid #e44200;
    margin-right: 7px;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.texto-us1{
	text-align: left;
}

.col-center{
	display: flex;
    flex-direction: column;
    justify-content: center;
}

/******** RESPONSIVE ********/

@media (max-width: 991px) {	
	.hero-banner {
    min-height: 80vh;
  }
	
}

@media (max-width: 576px) {
	.hero-text {
    margin-left: 0;
    text-align: center;
    padding: 0 15px;
	   margin: 0 auto;
  }

  .hero-content {
    justify-content: center;
  }
	
	.hero-banner {
    min-height: 70vh;
    text-align: center;
  }
	
	.hero-content {
    justify-content: center;
    text-align: center;
  }
	
}