@charset "utf-8";
@font-face {
  font-family: 'Guardian TextSans Regular';
  src: url(https://s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gtr.woff2) format("woff2"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gtr.woff) format("woff"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gtr.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'Guardian TextSans Medium';
  src: url(https://s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gtm.woff2) format("woff2"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gtm.woff) format("woff"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gtm.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'Guardian Sans Semibold';
  src: url(https://s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gss.woff2) format("woff2"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gss.woff) format("woff"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/gss.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'IBM Plex Serif Regular';
  src: url(https://s1.ppllstatics.com/starfish/1.5.14/assets/fonts/ibmr.woff2) format("woff2"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/ibmr.woff) format("woff"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/ibmr.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}
@font-face {
  font-family: 'IBM Plex Serif Semibold';
  src: url(https://s1.ppllstatics.com/starfish/1.5.14/assets/fonts/ibms.woff2) format("woff2"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/ibms.woff) format("woff"), url(//s1.ppllstatics.com/starfish/1.5.14/assets/fonts/ibms.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap
}
* {box-sizing: border-box}
body{margin:0; padding: 0; overflow-x: hidden}

h1,h4, h5{font-family:'Guardian Sans Semibold'; text-align: center; margin: 0; font-style: normal}
h2, h3{font-family:'Guardian TextSans Regular', "sans-serif"; font-weight: normal; margin: 0 auto; font-size: 21px; text-transform: uppercase}
h1, h2, h3 {color: #fff}
h1, h4{font-size: 48px;}
h4, h5{color:#202020}
h5{font-size: 28px;}
h4 span{color: transparent; text-stroke: 1px #202020; -moz-text-stroke: 1px #202020; -webkit-text-stroke: 1px #202020}



ul{list-style:none;margin: 0; padding: 0}
figure{margin:0; padding: 0}
header{width:100%; display: block; position: fixed; top: 0; left: 0; background-color: #202020;font-family: 'Guardian TextSans Regular', "sans-serif"; font-size: 17px;z-index: 10}
.max-wrapper{width: 100%; margin: 0 auto; padding: 10px; max-width: 1200px}
.med-wrapper{width: 100%; margin: 0 auto; padding: 10px; max-width: 650px}
.logo{max-height: 75px}
.i-f-wrapper{display: flex; align-items: center; justify-content: space-between}
button, button.ins-bot{background: linear-gradient(90deg, rgba(151,0,26,1) 0%, rgba(151,0,26,1) 50%, rgba(201,0,34,1) 50%, rgba(201,0,34,1) 100%); background-size: 200%; background-position: 100%; color: #fff; padding: 10px; border: none; font-family:'Guardian TextSans Regular', "sans-serif"; font-size: 17px; display: flex; align-items: center; position: relative;transition: all 150ms linear;}
button i, button img,  .cab-content button.ins-bot i, .cab-content button.ins-bot img  {width: 30px; display: inline; margin-right: 10px; margin: 0 10px auto 0}
button:hover{cursor: pointer;background-position: 0%; }

nav{width: 100%; background-color: #fff; display: block; border-bottom: 1px solid #202020; }
nav .max-wrapper{padding: 0 10px}
nav ul{display: flex; align-items: center; justify-content: space-between; list-style: none; margin:0; padding: 0; height: 55px; text-align: center}
nav ul li{height: 100%; position: relative}
nav ul li:last-child{display: none}

nav ul li a{text-decoration: none;color: #202020;height: 100%;position: relative;align-items: center;display: flex; padding: 0 5px;}
nav ul li a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0%;height: 3px;background-color: #c90022;opacity: 0;transition: all 150ms linear;}
nav ul li a:hover::after, nav ul li a:focus::after {opacity: 1;width: 100%;}
#men-bot{display: none; background:#202020}
#men-bot i{display: block; margin: 0 auto}

footer{width: 100%; display: block; background-color: #000; font-family:'Guardian TextSans Regular', "sans-serif"; font-size: 13px;}
.contact {width:100%; background-color: #202020; color: #FFFFFF}
.contact .max-wrapper:after {width:100%; display: block; clear: both; content: ''}

.legal{width:100%; background-color: #000; color: #FFFFFF}
#logo{max-width: 255px; margin: 10px 0 0}
footer, footer p, footer a{font-family:'Guardian TextSans Regular', "sans-serif"; font-size: 13px; text-decoration: none; color: #fff; font-style: normal; line-height: 18px}
footer address, footer address a {display: block; }
footer ul{display: flex; filter: invert(); align-items: center; margin-bottom: 10px}
footer a{transition: opacity 0.5s linear; }
footer a:hover{opacity: 0.6;}
footer ul a svg{display: block; height: 24px; width: 24px}
footer ul li:not(:last-child){ margin-right: 7px}
.contact-data, .extralogos{ width: 50%; float: left;}
.extralogos{text-align: center; margin-top: 30px}
.extralogos a{display: inline}
.extralogos a img{width: 100%; max-width:175px }
.legal{text-align: center}

.formulario, form, .valoraciones, .solicitud { font-size: 16px; width: 100%; display: block; padding: 70px 0}
.formulario, form {background-color:#EEEEEE;}

.col1{width: 35%; float: left; padding-right: 20px}
.col2{width: 65%; float: right; padding-left: 20px}
.clear{width: 100%; clear: both; display: block}
form label, form input, form textarea {width: 100%; display: block;font-family: 'Guardian TextSans Regular', "sans-serif";font-size: 16px; line-height: 19px; resize: none}
form input, form textarea {padding: 3px; margin-bottom: 10px; border: 1px solid #202020;}
form textarea {min-height: 320px}
p.aceptacion, .aceptacion input, .aceptacion label {display: inline; width: auto; font-size: 14px; line-height: 18px; margin: 0; padding: 0}
.aceptacion input {margin-right: 5px}
.formulario input[type=submit]{width: auto; background: linear-gradient(90deg, rgba(151,0,26,1) 0%, rgba(151,0,26,1) 50%, rgba(201,0,34,1) 50%, rgba(201,0,34,1) 100%); background-size: 200%; background-position: 100%; color: #fff; padding: 10px; border: none; font-family:'Guardian TextSans Regular', "sans-serif"; font-size: 17px; display: flex; align-items: center; position: relative;transition: all 150ms linear;}
.valoraciones, .solicitud {background-color:#fafafa;}
.solicitud, .solicitud .ins-bot{text-align: center; margin: auto}
.solicitud p{font-family: 'IBM Plex Serif Regular';font-style: normal;color: #202020;font-size: 21px; margin: 20px auto 50px}

/*Cabecera no siempre*/
.cabecera{width: 100%; margin: 80px auto 50px; position: relative; min-height:  calc(100vh - 80px); overflow: hidden}
.cab-hero{ position: absolute; background-color: #202020; height: 100%; width: 100%; text-align: center; z-index: -1; top: 0; left: 0;}
.cab-hero img{height: 100%; width: 100%; object-fit: cover}
.cab-hero:after {height: 100%; width: 100%; background: rgba(0, 0, 0, 0.4); content: ''; display: block; position: absolute; top: 0; left: 0;}
.cab-content{display: flex;flex-direction: column;flex-wrap: nowrap;  align-content: center;justify-content: center;align-items: stretch;height: calc(100vh - 80px); text-align: center}
.cab-content h3:after {width: 280px; margin: 20px auto 40px; height: 1px; background-color: #fff; content: ''; display: block}
.cab-content i, .cab-content i img{width: 30px; margin: 50px auto; display: block; text-align: center}
.cab-content button.ins-bot {margin:  0 auto}
/*Fin Cabecera no siempre*/
.razones {padding: 50px 0;width:100%;overflow-x:hidden}
.razon{float: left; width: 31.3%; margin: 0 1%; text-align: center; font-family: 'IBM Plex Serif Regular';font-style: normal;color: #202020;font-size: 21px;padding: 10px;}
.razon .gigant{font-family: 'Guardian Sans Semibold';text-align: center;margin: 0;font-style: normal;color: transparent;text-stroke: 1px #202020;-moz-text-stroke: 1px #202020;-webkit-text-stroke: 1px #202020; font-size: 184px;}
.pres, .instalaciones{padding: 50px 0; font-family: 'IBM Plex Serif Regular';font-style: normal;color: #202020;font-size: 21px;}    

.author{padding: 30px 20px 20px 100px; background-size: 80px 80px; background-repeat: no-repeat; background-position: left center}

.author .name, .dcv .name{font-family: 'Guardian Sans Semibold'; color: #202020; font-size: 21px; margin: 0 auto}
.author .charge, .dcv .charge{font-family:'Guardian TextSans Regular', "sans-serif"; font-size: 17px; color: #6b6b6b; margin: 0 auto}


.docentes{width: 100%; margin: 0 auto 50px; max-width: 1920px}
.docentes:after{content: ''; width: 100%; clear: both; display: block}
.docente{width: 25%; padding: 20px 0; float: left}
.docente img{width: 100%; display: block;}
.docente .dcv {padding: 15px;}
.dcv .charge{margin: 20px 0}
.ficha-docente{margin-top: 130px;}
.ficha-docente img{width: 100%}
.ficha-docente .author{padding: 20px 5px}
.practicas .razon{width: 48%}
.instalacion {margin-bottom: 50px}.instalacion img {width: 100%; display: block}

.dcv button.ins-bot{background: #fff; color: #202020; border: 1px solid #202020; align-items: baseline}
.dcv button.ins-bot i{ display: block; margin: 0 10px; width: 10px}        
.dcv button.ins-bot img{width: 7px; display: flex; margin: 0}
.dcv button.ins-bot:hover{background-color: #202020; color: #fff;}
.dcv button.ins-bot:hover img{filter: invert(1)}




/*Carrousel no siempre*/
cite{font-family:'IBM Plex Serif Regular'; text-align: center; font-style: normal;color:#202020;font-size: 24px; display: block; padding: 10px; width: 100%}
.carousel {margin: 50px 0; width: 100%; overflow: hidden; position: relative}
.carousel .slides {display: flex;position: relative;height: auto;margin: 0;padding: 0;overflow: visible;list-style: none;z-index: 0; transition: transform 1s ease-in-out;}
.slides * {user-select: none;-ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;}
ul.slides input {display: none;}
.slide-container {width: 31.3%; margin: 0 1%; flex: none}
.slide-image {width: 100%;height: auto;transition: all .7s ease-in-out; overflow: hidden}   
.slide-image img {width: auto;height: 100%; max-width: 370px}
.carousel p.nom-alum{margin: 20px auto 0;  font-family: 'Guardian Sans Semibold'; text-align: center; font-size: 24px; display: block;}    
.carousel p.promo{ font-family: 'Guardian TextSans Regular'; text-align: center; font-style: normal;color:#6B6B6B;font-size: 16px; display: block; width: 100%}      
.carousel-controls {position: absolute;top: 0;left: 0;right: 0;z-index: 2;line-height: 310px;color: #202020;}
.carousel-controls img{max-width: 10px}              
.carousel-controls label {display: none;position: absolute;padding: 0 20px;opacity: .3;transition: opacity .8s;cursor: pointer;}
.carousel-controls label:hover {opacity: 1;}
.carousel-controls .prev-slide {width: 49%;text-align: left;left: -20px;}
.carousel-controls .next-slide {width: 49%;text-align: right;right: -20px;}
ul:has(input#img-1:checked) {transform: translateX(0%)}    
ul:has(input#img-2:checked) {transform: translateX(-33.3%)}
ul:has(input#img-3:checked) {transform: translateX(-66.3%)}
ul:has(input#img-4:checked) {transform: translateX(-100%)}
ul:has(input#img-5:checked) {transform: translateX(-100%)}
ul:has(input#img-6:checked) {transform: translateX(-100%)}
ul:has(input#img-1:checked) ~ #cc1 label  {display: block}  
ul:has(input#img-2:checked) ~ #cc2 label  {display: block}      
ul:has(input#img-3:checked) ~ #cc3 label  {display: block}  
ul:has(input#img-4:checked) ~ #cc0 label  {display: block}
ul:has(input#img-5:checked) ~ #cc0 label  {display: block}  
ul:has(input#img-6:checked) ~ #cc0 label  {display: block}
ul:has(input#img-1:checked) ~ .carousel-dots #img-dot-1{opacity:1} 
ul:has(input#img-2:checked) ~ .carousel-dots #img-dot-2{opacity:1} 
ul:has(input#img-3:checked) ~ .carousel-dots #img-dot-3{opacity:1} 
ul:has(input#img-4:checked) ~ .carousel-dots #img-dot-4{opacity:1} 
ul:has(input#img-5:checked) ~ .carousel-dots #img-dot-5{opacity:1} 
ul:has(input#img-6:checked) ~ .carousel-dots #img-dot-6{opacity:1} 

/*requisitos*/
.requisito{width: 100%; display: flex; align-items: center; margin: 50px 0}
.requirement{width: 41%; margin-right: 1%; padding: 15px; background-color: #EEEEEE}
.requirement h4{font-size: 44px}

.requirement span{display: block}
.details{width: 58%;}
.details ul, .planItem ul{ list-style: disc; list-style-position: inside; font-family: 'IBM Plex Serif Regular';font-style: normal;color: #202020;font-size: 19px; padding: 10px}


.plan{ width: 100%; display: block; padding: 50px 0;}
.plan h4{text-align: left}
.plan img{width: 100%; max-width: 39%; margin-right: 1%; height: auto; }
.plan ul{width: 100%; max-width: 60%;}
.planItem{display: flex; margin: 50px 0; align-items: center}





@media only screen and (max-width : 900px) {
.docente{width: 50%;}
}




@media only screen and (max-width : 745px) {
    h2, h3{ font-size: 18px;}
    h1, h4{font-size: 36px;}
    .requirement h4{font-size: 34px;}
    h5{font-size: 24px;}
    nav, button{font-size: 14px;}
    button i, button img  {width: 25px;}
    .logo{max-height: 55px}
    .extralogos .logo{max-height: none}
    form input{margin-bottom: 20px}
    .col1, .col2{width: 100%; float: none; padding: 0px; display: block}
    p.aceptacion {margin-bottom: 20px; display: block}
    /*Carrousel no siempre*/
    cite{font-size: 21px; line-height: 23px}
    .carousel p.nom-alum{font-size: 18px;}    
    .carousel p.promo{font-size: 15px;}  
    .details ul, .planItem ul {font-size: 17px;}
    /*fin Carrousel*/

} 

@media only screen and (max-width : 560px) {
    h2, h3{ font-size: 16px;}
    h1, h4{font-size: 28px;}
    h5{font-size: 21px;}
    header nav{opacity: 1; transition: all 100ms linear; transform: translateX(0%); height: auto}
    header nav.unactive{transform: translateX(-100%); opacity: 0; height: 0 /*display: none*/}
    header nav.active{transform: translateX(0%); opacity: 1; height: auto}
    header{background-color: transparent}
    header .max-wrapper {background-color: #202020}
    header nav .max-wrapper {background-color: transparent}
    #men-bot{display: block}
    #ins-bot{top: 92px; position: relative; right: 10px}
    button, button.ins-bot{font-size: 15px}
    
    nav{background: #ffffff;z-index: 1;position: relative;}
    nav ul{display: block; padding: 30px 0 20px;height: auto}
    nav ul li{height: 40px}
    nav ul li:last-child{display: block; position: absolute; top: 10px; right: 15px}
    nav ul li i, nav img  {width: 25px; display: block}
    .contact-data, .extralogos{ width: 100%; float: none; display: block; text-align: center;}
    .extralogos a{display: block}
    footer ul{justify-content: center}
    .legal a{display: block}
    .legal span{display: none}
    
    .docente{width: 100%; float: none; display: block}
    
    .razon{float: none; width: 100%; margin: 0 auto;font-size: 18px;padding: 10px;}
    .pres, .author .name, .solicitud p, .instalaciones{font-size: 18px}
    .author .charge{font-size: 14px}
    /*Carrousel no siempre EXCLUSIVO*/
    .carousel{padding: 25px}
    cite{font-size: 18px; line-height: 21px}
    .carousel p.nom-alum {font-size: 16px;}    
    .carousel p.promo{font-size: 14px;}
    .slide-container{width: 98%; margin: 0 1%}
    #cc0 label  {display: none !important}    
    .carousel-controls label {display: none;}
    ul:has(input#img-1:checked) {transform: translateX(0%)}    
    ul:has(input#img-2:checked) {transform: translateX(-100%)}
    ul:has(input#img-3:checked) {transform: translateX(-200%)}
    ul:has(input#img-4:checked) {transform: translateX(-300%)}
    ul:has(input#img-5:checked) {transform: translateX(-400%)}
    ul:has(input#img-6:checked) {transform: translateX(-500%)}
    ul:has(input#img-1:checked) ~ #cc1 label  {display: block}  
    ul:has(input#img-2:checked) ~ #cc2 label  {display: block}      
    ul:has(input#img-3:checked) ~ #cc3 label  {display: block}  
    ul:has(input#img-4:checked) ~ #cc4 label  {display: block}
    ul:has(input#img-5:checked) ~ #cc5 label  {display: block}  
    ul:has(input#img-6:checked) ~ #cc6 label  {display: block}
    
    
    .requisito, .requirement, .details, .planItem{display: block; width: 100%; margin: 20px auto}
    .planItem img, .planItem ul{display: block; max-width: 100%}  
} 

@media only screen and (max-width : 600px) {}