:root{
    --color-dominante-azul-rgb: rgb(32, 32, 223); /*azul*/
    --color-dominante-blanco-rgb: rgb(255, 255, 255); /*blanco*/
    --color-dominante-negro-rgb: rgb(0, 0, 0); /*negro*/
    --color-dominante-verde-rgb: rgb(49, 160, 45); /*verde*/

    --color-dominante-claro-azul-rgb: rgb(75, 101, 197);/*azul claro*/
    --color-dominante-claro-gris-rgb: rgb(221, 221, 221);/*gris*/
    --color-dominante-claro-negro-rgb: rgb(103, 101, 101);/*negro claro*/
    --color-dominante-claro-verde-rgb: rgb(208, 251, 224);/*verde claro*/

    --color-secundario-rojo-rgb: rgb(249, 128, 132);
    --color-secundario-amarillo-rgb: rgb(251, 238, 57);
    --color-secundario-lila-rgb: rgb(255, 129, 234);
}

 /*====Barra de navegación====*/
.navbar{
    /*height: 60px !important;*/
    /*background-color:black ;*/
    /*background-color:var(--color-dominante-verde-rgb) ;*/
    margin-top: 0px;

    /*position: fixed !important; /*para fijar el menú de navegación*/
    position:fixed !important;
    /*top:0;/*para fijar el menú arriba al hacer scroll*/

    width: 100%;/*recuperamos la anchura maxima con "100vw" (vw=view width)*/
    opacity:1 !important;
    z-index:1000; /*para que se sobreponga sobre cualquier elemento (que esté por encima del HERO SECTION)*/
    /*color:orange !important;*//*no se puede cambiar de color. La estrategia es usar <span>*/
    /*box-shadow: 0px 0px 20px gray;/*sombra gris*/
    padding: 3px 0px !important;
    /*transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transición más suave */
    transition: all 1.7s ease;
}

/* Estado inicial - transparente */
.navbar.transparent {
  background-color: transparent !important; 
  top:0;
}

/* Estado con scroll - con color */
.navbar.scrolled {
  background-color:var(--color-dominante-negro-rgb) ;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  position:sticky !important;  /*para fijar el menú arriba al hacer scroll*/
    top:0;/*para fijar el menú arriba al hacer scroll*/
}



/*se puede cambiar el color y el tamaño de los enlaces del navbar*/
.nav-item a{
    /*color: #00ffff !important;*/
    color: var(--color-dominante-verde-rgb) !important;
    font-size: 18px !important;
}

/*hover sobre los enlaces del navbar*/
.enlace:hover{
    /*color:white;*/
    color: var(--color-dominante-blanco-rgb);
    border-bottom: 4px solid var(--color-dominante-blanco-rgb);
}


/*se puede modificar el borde del icono de la hamburguesa del menú. El icono es una imagen SVG. Quizas lo mejor sería usar font awesome para modificar el icono*/
.navbar-toggler{
    /*border: none !important;*/
    border-color:var(--color-dominante-verde-rgb) !important;
    /*background-color:#637373 !important;*/
}
/* Cambia el color de las líneas del icono */
.navbar-toggler-icon{
    /*color verde*/
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 255, 0, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
    background-image: none !important; /*esconde la imágen*/
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    /* Cambia el color cuando el menú está abierto */
    background-image: none !important;
    content: "X" !important; /* Cambia a una "X" o cualquier otro símbolo */
    color: rgb(0,255,0);
    font-size: 1.7rem;
    /*
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 0, 0, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
*/
}

/*personalizamos el nombre*/
.navbar-brand{
    /*font-family: "oswald"; /*tipografía*/
    font-size: 18px !important; /*tamaño de fuente*/
    font-weight: 400; /*peso de la fuente*/ 
    color:var(--color-dominante-verde-rgb) !important;
}
/*====fin Barra de navegación====*/



  /*carousel en toda la pantalla*/
#carousel_slide_automatico .carousel{
    position:relative;
    width:100vw;
    height: 95vh;
}

#carousel_slide_automatico .carousel-item{
    transition: transform 4s ease !important;
}
#carousel_slide_automatico .carousel-inner{
    width:100vw;
    height: 95vh;
}
#carousel_slide_automatico .carousel-inner img{
    width:100vw;
    height: 100vh;
    object-fit:cover;
    object-position:40% 55%; /*para modificar la posición de la imagen (eje x, eje y)*/
    /*filter: brightness(100%);*/
    position: relative;
    z-index: 0;
}

#carousel_slide_automatico .lamina-degrade-carousel::after { /*para poner una lámina en el carousel para degradé. Nota: hay que jugar con el z-index de los alementos anteriores y posteriores*/
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 255, 0.1),rgba(255, 255, 255, 0.1));
    z-index: 1;
    pointer-events: none; /* Permite hacer clic en la imagen */
  }

/*fin carousel en toda la pantalla*/



/*****Para el Spin de carga (está ubicado en el header)*****/

#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    /*background-color: rgba(255,255,255,0.7);*/
    background-color: rgba(255, 255, 255, 0.805);
    z-index:9999;
    display:none;
    color:green;
    text-align: center;
    padding-top:450px;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:80px;height:80px;
    border-style:solid;
    border-color:#000000;
    border-top-color:transparent;
    border-width: 5px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}
/*****Fin Para el Spin de carga*****/

/*para el icono de whatsapp*/
.boton-whatsapp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:80px;
	right:110px;
	/*background-color:#25d366;*/
	background-color:rgb(28, 199, 28);
	
	color:#FFF;
	border-radius:15px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px black;
  z-index:1000;
}
.boton-whatsapp:hover{
    background-color:rgb(0, 153, 0);
    color:#FFF;
    text-decoration:none;
}

.icono-whatsapp{
	margin-top:7px;
    font-size: 3rem;
}

@media (max-width:600px){ /*cambia la posición derecha cuando la ventana del navegador  es igual o menor a 768px*/
    .boton-whatsapp{
        right: 15px;
        bottom:45px;
    }
}
/*Fin para el icono de whatsapp*/