@charset "utf-8";
/* 21-07-26 */

:root{
    --color_primariodru: #092B68;
    --color_gris1: #D9D9D9;
    --color_gris2: #CECECD;
    --color_gris3: #BFBFBF;
    --color_gris4: #A6A6A6;
    --color_rojo: #ED1F1F;
    --color_texto-cuerpo: #4D4D4D;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* tipografia institucional */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

body {
    font-family: 'Space Grotesk', sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: var(--color_primariodru);
}
p{
    line-height: 1.5em;
    margin: 1em 0;
}
.boldDru{
    font-weight: 700;
}
/* texto centrado */
.bloque_dru{
    width: 80%;
    margin: 0 auto;
    color: #4D4D4D;
}
.bloque_dru ul li{
    list-style: '- ';
    margin-left: .7em;
    line-height: 1.5;
    margin-bottom: .5em;
}
.titulo_dru{
    font-size: 1.3em;
    font-weight: 700;
    margin-top: 1.8em;
    color: var(--color_primariodru);
}
.subtitulo_dru{
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 1.5em;
    color: var(--color_primariodru);
}
/* texto centrado */
.fondo_dru1{
    background-color: var(--color_gris1);
    padding: 1em 1.5em;
    color: var(--color_primariodru);
    border-radius: 20px;
    border-left: 3px solid var(--color_primariodru);
    
    margin: 1.5em 0;
}
/* fin tipografia */
/* header */
.dru_main_cab{
	position: relative;
	height: 300px;
	overflow: hidden;
}
.dru_main_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cab_logos_dru{
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    gap: 20px;
    top: 90px;
    margin-left: 50px;
	z-index: 2;
}
.logo_dru{
    width: 150px;  
}
.cab_texto{
    color: white;
    margin-left: 20px;
}
.textos_cab{
    border-left: 1px solid white; 
}
.dru_movil_1{
    font-size: clamp(12px, 3vw, 20px);
	text-shadow: 2px 2px 4px #092B68;
}
.dru_movil{
    font-size: clamp(1.3rem, 3.5vw, 1.9rem);
	text-shadow: 2px 2px 4px #092B68;
}
.dru_cab_cont{
	position: relative;
	height: 149px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: start;
	padding-left: 4.7em;
	color: white;
		& img{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
			}
        & h1{
            position: relative;
            z-index: 2;
            text-shadow: 2px 2px 4px #092B68;
            }
    }

/* fin header */

/* iframe */
.iframe-container_dru{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    margin: 1.5em 0;
}
.iframe-container_dru iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* iframe */

/* contenido principal */
.contenido_dru{
    width: 90%;
    margin: 0 auto;
    font-kerning: normal;
}
.fondo_claro_dru{
    background-color: white;
    padding: 1em;
    border-radius: 20px;
    width: 95%;
} 
.tit_dru{
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 1.8em;
    text-align: center;
}
/* contenido principal */

/* botones modulos curso */
.btn_modulos_dru{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 2em;
}
.btn_modulo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 10px;
    border: 2px solid var(--color_primariodru);
    text-decoration: none !important;
    color: var(--color_texto-cuerpo);
}
.btn_modulo:hover{
    background-color: var(--color_primariodru);
    color: white;
}


/* botones modulos curso */

/* btn accesos */
.img_dru_cambio{
    width: 20px;
}

.btn_accesos_dru{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    height: 4.5em;
    padding: 5px 18px;
    background-color: #f3f8ff;
    border: 2px solid var(--color_primariodru);
    text-decoration: none !important;
    color: var(--color_primariodru);
    border-radius: 50px;
}
.btn_accesos_dru:hover{
    background-color: #c8d1df;
}
/* btn accesos */


/* zona de equipamiento botones */

.btn-equipamiento-dru{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1em;
    align-items: center;
    margin-top: 2em;
    color: var(--color_texto-cuerpo);
    
}
.btn-equipamiento-dru p{
    text-align: center;
}
.equipamiento-dru{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
    height:5em;
    padding: 5px 25px;
    background-color: var(--color_primariodru);
    text-decoration: none !important;
    color: white;
    border-radius: 50px 0 0 0;
}
.equipamiento-dru:hover{
    background-color: #061b46;
    color: white;
}

.equipo-dru{
    width: 50px;

}
/* zona de equipamiento botones */

/* footer */
.footer_dru{
    margin-top: 2em;
    background-color: var(--color_primariodru);
    color: white;
	text-align: center;
	padding: 20px 10px;
}
.footer_flexDru{
    display: flex;
    padding: 2em;
    gap: 2em;
    flex-wrap: wrap;
}
.size_minDru{
    font-size: 11px;
	max-width: 800px;
	margin: 0 auto;
}
.img_footerDru{
    display: block;
	margin: 0 auto 15px auto;
    width: 313px;
}
/* footer */

/* ******************************************************************************************************************************** */
/* ******************************************************************************************************************************** */
/* ******************************************************************************************************************************** */
/* ******************************************************************************************************************************** */
/* ******************************************************************************************************************************** */
/* pagina 1 */
/* acordeón */
.acordeonDru{
    border-radius: 15px;
    background-color: var(--color_primariodru);
    width: 50%;
}
    .acordeon-dru {
    
    width: 100%;
    padding: 1em;
    color: white;
    }
    .interior-dru{
        cursor: pointer;
        list-style: none;
    }
    .interior-dru::before {
        content: '+';
        margin-right: 10px;
    }
    .interior-dru::after {
        content: '-';
        margin-left: 10px;
        display: none;
    }
    .fondo-dru{
        background-color: var(--color_gris1);
        padding: 1em;
        color: var(--color_texto-cuerpo);
        border-radius: 10px;
    }
/* acordeón */
.texto-centradoDru {
    text-align: center;
}

.botones_druUp{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
}
.btnDrup{
    padding: 1em 1.5em;
    background-color: var(--color_gris1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px 15px 0 0;
    text-decoration: none !important;
    color: var(--color_primariodru);
    font-weight: bold;
}

/* tarjetas */
.btn_tarjetas_dru{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2em;
    gap: 20px;
}    
.btn_tarjetas{
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
    color: var(--color_primariodru);
    border: 2px solid var(--color_primariodru);
    border-radius: 20px;
    box-shadow: #d4d4d4 5px 5px 7px;
}
.btn_tarjetas:hover{
    background-color: var(--color_gris1);
   
}
/* btn centrado */
.btn_centralDru{
    display: grid;
    place-content: center;
    margin: 2em;
}
.btn_central_azul{
    width: 386px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 170px 0 0;
    background-color: var(--color_primariodru);
    text-decoration: none !important;
    color: white;
    font-weight: bold;
}
.btn_central_azul:hover{
    background-color: #061b46;
    color: white;
}
/* btn centrado */

/* botones direccion */
.botones_direccionDru{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 2em auto;
    max-width: 95%;
}
.btn_direccionDru{
    position: relative; 
    width: 386px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: var(--color_gris3); */
    gap: 10px;
    text-decoration: none !important;
    color: var(--color_primariodru);
    font-weight: bold;
    border-radius: 15px;
    z-index: 1;
}
/* btn Azul */
.botonAzul-dru{
    background-color: var(--color_gris3);
    padding: .8em;
    font-size: 1em;
    color: var(--color_primariodru);
    font-weight: bold;
    border-radius: 10px;
    border: none;
    text-decoration: none !important;
}
/* btn azul */
.botonAzul-dru:hover{
    background-color: var(--color_primariodru);
    color: white;
}
/* tooltip */
.tooltip-dru {
    position: relative;
    display: inline-block;
}
.tooltip-dru:hover .tooltip-text-dru {
    visibility: visible;
    opacity: 1;
}
.tooltip-dru .tooltip-text-dru {
    visibility: hidden;
    background-color: var(--color_primariodru);
    color: #fff;
    width: 200px;
    text-align: center;
    padding: 8px 5px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 220%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip-dru .tooltip-text-dru::before {
    content: "";
    border: 5px solid;
    border-color: var(--color_primariodru) transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
}
/* tooltip */
.flex-dru{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}


.izq-dru{
    position: absolute;
    left: 100px;
    
}
.der-dru{
    position: absolute;
    right: 100px;
}
/* botones direccion */
.botones_druAccesos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    margin: 0 auto;
    
}
.btnDruAccesos{
    width: 150px;
    height: 130px;
    background-color: #f3f8ff;
    border: 2px solid var(--color_gris4);
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    text-align: center;
    flex-wrap: wrap;
    margin-bottom: .8em;
    align-items: center;
    justify-content: space-around;
    padding: 1em 0;
    border-radius: 35px;
    text-decoration: none;
    color: var(--color_primariodru);
    font-weight: bold;
    font-size: 14px;
}
.btnDruAccesos:hover{
    background-color: #c8d1df;
}

/*Fondo Fases X*/
.flex-center-dru{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 600px;
    color: #fff;
    padding: 2.5em 0;
    gap: 1.8em;

    & h1{
        font-size: clamp(3rem, 6vw, 4.5rem);
        text-align: center; 
    }
    & h2{
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        text-align: center; 
    }
    & h3{
        font-size: clamp(1.4rem, 2.8vw, 2rem);
        text-align: center;
    }
    & p {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        padding: 0 1.5em;
    }
    & a{
        background-color: var(--color_primariodru);
        border: 2px solid #fff;
        text-decoration: none !important;
        border-radius: 50px;
        padding: 12px 45px;
        color: #fff;
    }
    & a:hover{
        background-color: #061b46;
        color: white;
    }
}

/* estilos fases nuevo */
.bg-image{
    position: relative;
	min-height: 720px;
}
.bg-image-dru{
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gradient-dru{
    background-image: linear-gradient(rgba(9, 43, 104, 0.5), rgba(9, 43, 104, 0.5));
    position: absolute;
    top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.content-dru{
    position: absolute;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 720px;
    color: #fff;
	text-shadow: 2px 2px 4px #092B68;
    padding: 2.5em 0;
    gap: 1.8em;

    & h1{
        font-size: clamp(3rem, 6vw, 4.5rem);
        text-align: center; 
    }
    & h2{
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
        text-align: center; 
    }
    & h3{
        font-size: clamp(1.4rem, 2.8vw, 2rem);
        text-align: center;
    }
    & p {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        padding: 0 1.5em;
    }
    & a{
        background-color: var(--color_primariodru);
        border: 2px solid #fff;
        text-decoration: none !important;
        border-radius: 50px;
        padding: 12px 45px;
        color: #fff;
        margin-bottom: 2em;
    }
    & a:hover{
        background-color: #061b46;
        color: white;
    }
}
/* fin estilos nuevos */


/* ************************************************ media *************************************************** */
/* ************************************************ media *************************************************** *//* ************************************************ media *************************************************** *//* ************************************************ media *************************************************** *//* ************************************************ media *************************************************** */


@media (max-width: 1020px) {
    .botones_direccionDru{
        justify-content: center;
    }
    .btnDrup{
    display: flex;
    border-radius: 10px;

    }
}
@media (max-width: 819px) {
    .btn_direccionDru{
    
    width: 186px;
    height: 84px;
    }
    .izq-dru{
    position: absolute;
    left: 5px;
    
}
.der-dru{
    position: absolute;
    right: 5px;
}
.txt_btn{
display: none;
}	
}
@media (max-width: 668px) {

    
    .bloque_dru{
        width: 90%;
    }
   
    .btn_direccionDru{
    
    width: 186px;
    height: 84px;
    
}
.izq-dru{
    position: absolute;
    left: 5px;
    
}
.der-dru{
    position: absolute;
    right: 5px;
}
}
@media (max-width: 375px) {
    .btn_direccionDru{
    font-size: .8em;
    width: 150px;
    height: 84px;
}
}