/* CSS Document */

body{ background-color:#f3f4f9 !important; }

.grecaptcha-badge { visibility: hidden; }

.titular{ font-size: 24px; letter-spacing: -1px; }

.contenedor { margin: 34px auto; } /*Quieren la landing más compacta*/

.slick-prev, .slick-next {  
    line-height: 1;
    opacity: .75;
    color: black !important; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;   
}




/********************************************************* BANNER TOP ****************************************/

.bannertop{ width: 100%; overflow: hidden;  }

.fondo_bannertop{ position: relative; width: 100%; height: 500px; background: url("/img/banner1.jpg") center center; background-repeat: no-repeat; background-size: cover; }

.box_banner_roja{ position: relative; box-sizing: border-box; top: 0px; left: 0px; width: 100%; max-width: 1300px; margin:auto; height: auto; z-index: 2; padding: 80px 0 0 80px; }

.tit_slide_bannertop{ width: 100%; font-size: clamp(14px, 3vw, 40px); margin-bottom: 20px; line-height: 1.3; }

.bbanner { display: block; font-size: clamp(12px, 1.4vw, 18px); font-weight: 400; color: #ffffff; background-color: rgba(64, 95, 119, 0.5); padding: 1.5vw 4vw; transition: all 300ms ease-in-out; border:none; border-radius: 3px; text-align: center; text-decoration: none; }

.bbanner:hover {
    background-color: rgba(64, 95, 119, 0.8);
}

@media screen and (max-width:1300px) {      
	.fondo_bannertop{ position: relative; width: 100%; height: 33vw; }
    .box_banner_roja{ padding: 5vw 0 0 5vw; }    
}




/************************************************** INTRODUCCIÓN *******************************************/

.intro_home {
    font-size: clamp(14px, 2vw, 22px); width: 97%; margin: auto;
}




/********************************************************* QUALITY ****************************************/

.quality_imagen { position:relative; width: 49%; margin: 0 0.5% 0 0; display: inline-block; vertical-align: top; background: url("/img/home_quality.jpg") center center no-repeat; background-size: cover; height: 320px; }
.quality_imagen p { position:absolute; bottom: 0px; left: 0px; width: 70%; color: white; font-size: clamp(16px, 2vw, 26px); margin: 1.5rem 2rem; text-align: left; line-height: 1.3; }
.quality_imagen p span { font-size: clamp(12px, 1.5vw, 18px); font-weight: 300; margin-top:10px; }

.quality_escudo { position:relative; width: 49%; margin: 0 0 0 0.5%; display: inline-block; vertical-align: top; background-color: white; height: 320px; text-align: center; padding: 5% 80px; font-size: clamp(14px, 1.5vw, 20px); }
.quality_escudoDe { padding: 5% 10px; }

.bquality { display: inline-block; font-size: clamp(12px, 1.4vw, 18px); font-weight: 400; color: #ffffff; background-color: rgba(64, 95, 119, 0.5); padding: 1vw 3vw; transition: all 300ms ease-in-out; border:none; border-radius: 3px; text-align: center; text-decoration: none; }
.bquality:hover {
    background-color: rgba(64, 95, 119, 0.8);
}

@media screen and (max-width:1024px) {      
	.quality_imagen { height: 260px;}
    .quality_escudo { height: 260px; }
}

@media screen and (max-width:678px) {      
	.quality_imagen { width: 100%; margin:0; height: 40vw; }
    .quality_escudo { width: 100%; margin:0; height: auto; padding: 40px; }
}



/********************************************************* discover ****************************************/

.discover_imagen { position:relative; width: 49%; margin: 0 0 0 0.5%; display: inline-block; vertical-align: top; background: url("/img/home_discover.jpg") center center no-repeat; background-size: cover; height: 320px; }
.discover_imagen p { position:absolute; top: 0px; left: 0px; width: 90%; color: white; font-size: clamp(16px, 2vw, 26px); margin: 1.5rem 2rem; text-align: left; line-height: 1.3; }
.discover_imagenDe p { font-size: clamp(13px, 1.6vw, 19px); }

.discover_cursos { position:relative; width: 49%; margin: 0 0.5% 0 0; display: inline-block; vertical-align: top; background-color: white; min-height: 320px; text-align: left; padding:5px 0 0 0; font-size: clamp(14px, 1.5vw, 20px); }
.bdiscover { display: inline-block; font-size: clamp(12px, 1.4vw, 18px); font-weight: 400; color: #ffffff; background-color: rgba(64, 95, 119, 0.5); padding: 1vw 3vw; transition: all 300ms ease-in-out; border:none; border-radius: 3px; text-align: center; text-decoration: none; }
.bdiscover:hover {
    background-color: rgba(64, 95, 119, 0.8);
}
.discover_curso { width:100%; }
.discover_curso:not(:last-child)  {  border-bottom: solid #f3f4f9 2px; }
.discover_cursos a { position:relative; display: list-item; list-style-type: disc; min-height:45px; padding:6px 20px 6px 0; margin:2px 16px 2px 40px; font-size: clamp(12px, 1.2vw, 16px); text-decoration: none; font-weight: bold; background: url("/img/pico.jpg") right center no-repeat; line-height: 1.3; }
.discover_cursos a span { color: #212529; font-weight: 500; }


@media screen and (max-width:1024px) {      
	.discover_imagen { height: 260px;}
    .discover_cursos { min-height: 260px; }
    .discover_cursos a { height:auto; padding:4px 25px 4px 0px; margin-left: 30px; }
}

@media screen and (max-width:678px) {      
	.discover_imagen { width: 100%; margin:0; height: 40vw; }
    .discover_cursos { width: 100%; margin:0; height: auto; }
    .discover_cursos a { font-size: clamp(12px, 2vw, 18px); }
}



/************************************************* UPCOMING SESSIONS **************************************/

.upcoming { display: block; width:100%; padding: 20px 50px 20px 100px; background: url("/img/calendario.jpg") 30px center no-repeat, url("/img/picoRojo.jpg") right 40px center no-repeat; background-color: #e7f1f8; font-size:16px; text-decoration: none; color:#333333; }
.upcoming div { font-size: 140%; font-weight: bold; }




/************************************************* categorias *******************************************/

.categoria{position: relative;  /*width: 23%; margin: 0 0.5% 25px 0.5%; flex-direction: column; display: inline-flex;*/ }
.categoria img{ transition: all 400ms ease-in-out; height: 100%; width: 100%; object-fit: cover; }

.box_info_categoria{ height: 100%; background-color: #F1F5FC; width: calc(25% - 20px); border-radius: 6px;  } 
.box_info_categoria:hover{ background-color: #8f1f2f; color: white; }
.box_info_categoria a{ text-decoration: none; color: #232323; }
.box_info_categoria a:hover{ text-decoration: none; color: #fff; }
.img_categoria{ display: block; object-fit: contain; height: 128px; width: 100%; overflow: hidden; padding: 0 0 0 0; border-radius: 6px; }

.img_categoria img { transition: all 400ms ease-in-out; height: 100%; width: 100%; object-fit: cover; }

.img_categoria img:hover { transform: scale(1.1); } 

.info_categoria{ display: flex; justify-content: center;
    align-items: center; padding: 0 15px 0 15px; height: 128px; text-align: center; }   

.tit_categoria{  font-weight: 400; font-family: 'Open Sans', sans-serif; /*letter-spacing: -1px;*/ line-height: 110%; text-transform: capitalize; font-size: 18px;  }
.text_categoria{  font-weight:normal ; font-family: 'Open Sans', sans-serif; /*letter-spacing: -1px;*/ line-height: 110%;  font-size: 15px;  }


.box_info_roles{ height: 100%; background-color: #F1F5FC; width: calc(25% - 20px);text-align: justify;   } 
.tit_roles{  font-weight: 400; font-family: 'Open Sans', sans-serif; /*letter-spacing: -1px;*/ line-height: normal;  font-size: 18px;  }
.text_roles{  font-weight:normal ; font-family: 'Open Sans', sans-serif; /*letter-spacing: -1px;*/ line-height: normal;  font-size: 15px; padding-bottom: 10px; padding-top: 0px;  }
.url_roles{ font-weight: 700;color:#8f1f2f;  font-family: 'Open Sans', sans-serif; /*letter-spacing: -1px;*/ line-height: normal;  font-size: 15px;  }
.box_info_role a{ text-decoration:dashed; color: #8f1f2f; }

.tex_discover{ margin-bottom: 10px; font-size: 18px; color: #494949 !important }
.tex_discover i{ font-size: 12px; }    

@media screen and (max-width:1023px) {      
	.box_info_categoria{ height: 100%; background-color: #F1F5FC; width: calc(50% - 20px);  }
}

@media screen and (max-width:600px) {
	.box_info_categoria{ height: 100%; background-color: #F1F5FC; width: 100%;  } 
}

@media screen and (max-width:934px) {      
	.categoria{position: relative;  width: 48%; }  
}

@media screen and (max-width:600px) {
	.categoria{position: relative;  width: 100%; margin: 0 0 25px 0; }  
}




/********************************************************* FLIPS ****************************************/

.flip-card {
    perspective: 1000px;
    cursor: pointer;

    position:relative; width: 49%; margin: 0 0.5% 0 0; display: inline-block; vertical-align: top; height: 320px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;

    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Flip con rollover */
@media (hover: hover) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}

.flip-card.girada .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

     transform-style: preserve-3d;
}

.flip-card-front {
    background-image: url("imagen.jpg");
    background-size: cover;
    background-position: center;

    transform: rotateY(0deg);
}

.flip-card-back {
    background: gainsboro;
    color: white;
    padding: 25px;

    transform: rotateY(180deg);
    font-size: clamp(12px, 1.5vw, 18px);
    line-height: 2;
}

.flip-card-back a {
    color: white;
}

.flip_imagen {  }
.flip_imagen1 { background: url("/img/home_flip1.jpg") center center no-repeat; background-size: cover; }
.flip_imagen1_oscura { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url("/img/home_flip1.jpg") center center no-repeat; background-size: cover; }

.flip_imagen2 { background: url("/img/home_flip2.jpg") center center no-repeat; background-size: cover; }
.flip_imagen2_oscura { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url("/img/home_flip2.jpg") center center no-repeat; background-size: cover; }

.flip_imagen p { position:absolute; bottom: 0px; left: 0px; width: 70%; color: white; font-size: clamp(16px, 2vw, 26px); margin: 1.5rem 2rem; text-align: left; line-height: 1.3; z-index: 1; }
.flip_imagen p span { font-size: clamp(12px, 1.5vw, 18px); font-weight: 300; margin-top:10px; }

.flip_imagen1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.50) 45%,
        rgba(0,0,0,0.8) 100%
    );

    pointer-events: none;
}

@media screen and (max-width:1024px) {      
    .flip-card-back { padding: 20px 15px; }
	.flip_imagen { height: 260px;}
}

@media screen and (max-width:678px) {
    .flip-card-back { padding: 15px 10px; }
	.flip_imagen { width: 100%; margin:0 0 10px 0; height: 40vw; }
    .flip_imagen p { margin: 1rem 2rem; }
}

.iaGenerated{
    position:absolute;
    bottom:3px;
    right:5px;
    color:lightgray;
    font-size: 10px;
    z-index:3;
}


/************************************************** ABOUT PA *******************************************/

.accordion-button, .accordion-button:not(.collapsed) {
    background: #811b2f url("/img/libro.jpg") 20px center no-repeat; color:white; padding: 15px 15px 15px 70px;
}
.accordion-button::after {
    filter: brightness(0) invert(1);
}

.accordion-item:first-of-type>.accordion-header .accordion-button{
    border:none !important;
}

.accordion-button:focus{
    box-shadow: none !important;
}



/***************************************************** SLIDER OPINIONES *******************************************/

.slider_carrusel{ width: 100%; margin: auto; overflow: hidden; }

.com_carrusel{ position: relative; font-size: 0px; box-sizing: border-box; /*width: 33.3%;*/ overflow: hidden; }

.celda_carrusel{ font-size: 15px; width: calc(100% - 43px); display: inline-block; vertical-align: top; }

.raya_carrusel{ width: 2px; display: inline-block; height: 210px; background-color: #494949; margin:0 20px; vertical-align: top; }
.raya_carrusel_G{ width: 2px; display: inline-block; height:240px; background-color: #494949; margin:0 20px; vertical-align: top; }

.img_carrusel{ display: block; object-fit: contain; height: 176px; width: 100%; overflow: hidden; padding: 0 0 0 0; }

.img_carrusel img { transition: all 400ms ease-in-out;  object-fit: cover; }

.img_carrusel img:hover { transform: scale(1.1); } 

@media screen and (max-width:800px) { 

    .celda_carrusel{ width: 100%; }
    .raya_carrusel{ display: none; }

}




/**************************************************** SLIDER  CATEGORIAS ********************************************/

.slider_categorias{ width: 100%; margin: 30px auto 0 auto; font-size: 0px; }

.slider_categorias .slick-dots {
    position: absolute;
    bottom: -35px !important;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center; 
}
.slider_categorias .slick-track {
    display: flex !important;
    gap: 20px;
}
.slider_categorias .slick-slide {
    /* Para evitar que el gap cause overflow */
    margin: 0 !important;
}

.slider_categorias .slick-prev:before, .slick-next:before {
        font-family: 'slick';
        font-size: 30px !important;
        line-height: 1;
        opacity: .75;
        color: black !important; 
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;   
 
}




/****************************************** FORMULARIO **********************************************/

.box100_form{  box-sizing: border-box; width: 100%; background: url("../img/banner.png"); background-size: cover; overflow: hidden; }

.fondo_form{ box-sizing: border-box; background-color: #000; opacity: 0.4; width: 100%; position: absolute; height: 100%; top: 0px; left: 0px; z-index: 1;  }

.box_form{ position: relative; z-index: 2; padding: 20px 20px; font-size: 0px; }
.box_form a{ color: white; }
#info { display: inline-block; width: 20px; height: 20px; vertical-align: middle;  }

.rayablanca{ width: 100%; max-width: 200px; height: 5px; background-color: #fff; margin: 10px 0 10px 0; }

.subtit_form{ font-size: 15px; margin-bottom: 40px; }

.leyendas{}
.leyendasin{ display: none; font-size: 18px; margin-bottom: 15px; }

.celda100{ width: 100%; margin-bottom: 15px; font-size: 15px; overflow: hidden; }
.celda_form1{ position: relative; display: inline-block; width: 50%; box-sizing: border-box; padding-right: 15px; margin-bottom: 15px; font-size: 15px; font-weight: 500; }
.celda_form2{ position: relative; display: inline-block; width: 50%; box-sizing: border-box; padding-left: 15px; margin-bottom: 15px; font-size: 15px; font-weight: 500; }

.celda_form1 input{  width: 100%; font-size: 18px; font-weight: 500; }
.celda_form2 input{  width: 100%; font-size: 18px; font-weight: 500; }

.celda100 textarea{ width: 100%; font-weight: 500; }

.celda_der{ text-align: right; }

.balto { display: block; font-size: clamp(12px, 1.4vw, 18px); font-weight: 400; color: #ffffff; background-color: rgba(64, 95, 119, 0.5); padding: 1.5vw 4vw; transition: all 300ms ease-in-out; border:none; border-radius: 3px; text-align: center; text-decoration: none; }

.balto:hover {
    background-color: rgba(64, 95, 119, 0.8);
}


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

    .leyendas{ display: none; }
    .leyendasin{ display: block; }

    .celda_form1{ position: relative; display: block; width: 100%; box-sizing: border-box; padding-right: 0px; margin-bottom: 15px; font-size: 18px; font-weight: 500; }
    .celda_form2{ position: relative; display: block; width: 100%; box-sizing: border-box; padding-left: 0px; margin-bottom: 15px; font-size: 18px; font-weight: 500; }
    
    .flota_der{ float: none; }
}