@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Bold.ttf') format('truetype');
  /* src: url('../fonts/Roboto-Bold.ttf') format('truetype'); */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Italic.ttf') format('truetype');
  /* src: url('../fonts/Roboto-Italic.ttf') format('truetype'); */
  font-weight: normal;
  font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins-BoldItalic.ttf') format('truetype');
    /* src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype'); */
    font-weight: bold;
    font-style: italic;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Light.ttf') format('truetype');
  font-weight: 300; /* Ligera */
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Regular.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
/* 
@font-face {
    font-family: 'Poppins';
    
    
    
    
  src: url('Poppins-BlackItalic.ttf') format('truetype');
  src: url('Poppins-ExtraBold.ttf') format('truetype');
  src: url('Poppins-ExtraBoldItalic.ttf') format('truetype');
  src: url('Poppins-ExtraLight.ttf') format('truetype');
  src: url('Poppins-ExtraLightItalic.ttf') format('truetype');
  
  src: url('Poppins-Light.ttf') format('truetype');
  src: url('Poppins-LightItalic.ttf') format('truetype');
  src: url('Poppins-Medium.ttf') format('truetype');
  src: url('Poppins-MediumItalic.ttf') format('truetype');
  src: url('Poppins-Regular.ttf') format('truetype');
  src: url('Poppins-SemiBold.ttf') format('truetype');
  src: url('Poppins-SemiBoldItalic.ttf') format('truetype');
  src: url('Poppins-Thin.ttf') format('truetype');
  src: url('Poppins-ThinItalic.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} */

.body-custom-font {
  font-family: 'Poppins', Poppins;
}


/*chat whatsapp INICIO*/
 
  .whatsapp-chat {
	position: fixed;
	bottom: 80px;
	right: 15px;
	z-index: 1000;
  }
  
  .whatsapp-chat img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s ease-in-out;
  }
  
  .whatsapp-chat img:hover {
	transform: scale(1.1);
  }
  
  #chat-widget {
	position: fixed;
	bottom: 90px;
	right: 20px;
	width: 350px;
	height: 200px;
	z-index: 1000;
	background-color: #f5f5f5;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .chat-container {
	height: calc(100% - 50px);
	overflow-y: scroll;
	padding: 10px;
  }
  
  .chat-message {
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;
  }
  
  .other {
	background-color: #dcf8c6;
  }
  
  .self {
	background-color: #ffffff;
  }
  
  .chat-input {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #ffffff;
  }
  
  .chat-input input {
	flex: 1;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 20px;
	margin-right: 10px;
  }
  
  .chat-input button {
	padding: 8px 20px;
	border: none;
	background-color: #25d366;
	color: #ffffff;
	border-radius: 20px;
	cursor: pointer;
	transition: background-color 0.3s ease;
  }
  
  .chat-input button:hover {
	background-color: #128c7e;
  }

   .elementor-animation-shrink {
    transition-duration: .3s;
    transition-property: transform;

  }

  .elementor-animation-shrink:active,.elementor-animation-shrink:focus,.elementor-animation-shrink:hover {
    transform: scale(.9)
}
  
/*chat whatsapp FIN*/

/* div banner */
.round-bottom { 
  border-bottom-left-radius: 50% 150px !important;
  border-bottom-right-radius: 50% 150px !important;
  position: relative;
  overflow: hidden;
  width: 160%; 
  margin-bottom:-50px;
  left:-30%; 
  background-color:#444;
  background-image: url('../images/2_separaciones/banner_web.png'); background-position: center center;
  background-size: 42% auto;
  height:150px;
}
/* .container { width: 100%; 
  height: 100px; 
  padding-bottom:50px;
  overflow:hidden;
} */
/**/
/*redondear banner*/
.bannerround{
  border-bottom-left-radius: 290% 590px !important;
  border-bottom-right-radius: 290% 590px !important;
    position: relative;
    width: 160%; 
      margin-bottom:-50px;
       background-size: 42% auto;
  height:150px;
}

.borderedon{
width: 100%;
  height: 550px;
  background-color: #0d6efd; /* azul Bootstrap */
  /* border-top-left-radius: 800px 50px;
  border-top-right-radius: 800px 50px; */

   border-top-left-radius: 100% 20%;
  border-top-right-radius: 100% 20%;
}

.arco-inferior {
  width: 100%;
  height: 150px;
  background-color: #0d6efd; /* Color azul Bootstrap */
  border-bottom-left-radius: 100% 100%;
  border-bottom-right-radius: 100% 100%;
}

.arco-superior {
 width: 100%;
  height: 150px;
  background-color: #0d6efd;
  border-bottom-left-radius: 100% 100%;
  border-bottom-right-radius: 100% 100%;
}

.arco-prueba{
  width: 100%;
  height: 200px;
  background-color: #20c997;
  clip-path: ellipse(75% 100% at 50% 0%);
}

/* fondo pantalla */
 body {
   
    background-image: url('../images/1_background/fondodefault.png'); 
    background-repeat: no-repeat;
    background-size: cover;      
    background-position: center;  
  }

.fondopage{
      background-image: url('../images/1_background/fondodefault.png'); 
    background-repeat: no-repeat;
    background-size: cover;      
    background-position: center;  
}

/* animacion botones */

   .elementor-animado {
    /* transition-duration: .3s;
    transition-property: transform;
    background-image: url('../images/tipo_combustible/super_plus.png');  */

     width: 100%;
    /* height: 100%;  */
    object-fit: cover;
    /* height: 110px; */
    /* max-width: 205px;     */
    background-image: url('../images/tipo_combustible/super_plus.png');
    background-size: cover;
    transition: background-image 0.3s ease;
    cursor: grab;

  }

  .elementor-animado:hover {
    width: 100%;
    /* height: 100%;    */
    /* object-fit: cover; */
    /* height: 105px; */
    background-image: url('../images/tipo_combustible/texto_premium.png'); 
}

/* otros */
    .ihover-container {
    position: relative ; 
    width: 100% ;
    height: 100% ;
    border: 0 !important;
    aspect-ratio: 3 / 2; /* Mantén una proporción o elimina si deseas que se ajuste al contenido */
    overflow: hidden;
  }

  .ihover-container img {
    position: absolute ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    /* Ajusta imagen al contenedor */
    object-fit: cover ; 
    border-radius: 0px !important;
    transition: opacity 0.4s ease-in-out;
  }

  .ihover {
    opacity: 0;
  }

  .ihover-container:hover .ihover {
    opacity: 1;
  }

  .ihover-container:hover .ibase {
    opacity: 0;
  }


  /* fondo personalizado */
  .fondo-personalizado {

    
  background-image: url('../images/inicio/curva_1.png'); /* Reemplaza con tu imagen */
  background-size: cover ;       /* Ajusta la imagen para cubrir todo el div */
  background-position: center;  /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que se repita */
  height: 100% ;                /* Ajusta la altura según necesites */
  padding: 20px;                /* Opcional, para espacio interno */
}

.arco-clip-inferior {
  height: 200px;
  background-color: #198754;
  clip-path: ellipse(75% 100% at 50% 100%);
}

/* bannnnnneee */
 .curved-container {
    position: relative;
    background-color: #0d6efd; /* Color del cuerpo del div */
    color: white;
    text-align: center;
    padding: 100px 20px; /* Espaciado interior */
    overflow: hidden;
  }

  .curved-container .top-curve,
  .curved-container .bottom-curve {
    position: absolute;
    width: 100%;
    height: 80px;
    left: 0;
  }

  .curved-container .top-curve {
    top: 0;
    transform: translateY(-100%);
  }

  .curved-container .bottom-curve {
    bottom: 0;
    transform: translateY(100%) rotate(180deg);
  }

  .curved-container svg {
    display: block;
  }

  /* imagenes superior */

     .imagen-esquina0 {
      position: absolute;
      top: 100px;
      left: 200px;
      width: 150px;
      height: auto;
      z-index: 1000;
    }
   .imagen-esquina1 {
      position: absolute;
      top: 150px;
      left: 150px;
      width: 250px;
      height: auto;
      z-index: 1000;
    }

       .imagen-esquina3 {
      position: absolute;
      top: 450px;
      left: 150px;
      width: 250px;
      height: auto;
      z-index: 1000;
    }


.ribbon {
      position: relative;
      background: #0d6efd; /* azul Bootstrap */
      color: white;
      padding: 0.75rem 2rem;
      text-align: center;
      font-weight: bold;
      margin: 2rem auto;
      width: fit-content;
    }

    .ribbon::before,
    .ribbon::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: 1.5rem solid transparent;
      z-index: -1;
    }

    .ribbon::before {
      left: -1.5rem;
      border-right-color: #0a58ca;
    }

    .ribbon::after {
      right: -1.5rem;
      border-left-color: #0a58ca;
    }