/*
Theme Name: twentytwentyfour_child
Theme URI: http://ejemplo.com/mi-theme-hijo
Description: Tema hijo
Author: Digital Group
Template: twentytwentyfour
Version: 1.0.0
*/

body ,h1, h2, h3, h4, h5, h6 {
    background-color:#fff;
	font-family: Montserrat;
}


.menu-header a{
	font-family: Montserrat;
color: #08255B;
text-align: left;
font-size: 20px;
font-style: normal;
font-weight: 400;
text-decoration: none;
   display: flex;
    align-items: center;
}
.menu-header a:hover{
text-decoration: underline;
}
.menu-header a img{
	padding-right:8px;
}
.formulario .gform_wrapper.gravity-theme .gform_validation_errors {
    background: #fff;
	border: 1.5px solid #ff0000;
	    box-shadow: none;
}
.formulario  .gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {
    border: 0 solid #c02b0a;
}
.formulario .gform_wrapper.gravity-theme .gform_validation_errors>h2 {
    color: #ff0000;
}
.formulario .gform_ajax_spinner{
position: absolute;
    width: 30px;
    right: 0;
    bottom: 35px;
	}
.formulario  .gform_wrapper.gravity-theme .gfield_validation_message,.formulario  .gform_wrapper.gravity-theme .validation_message {
background: #fff;
    border: 0 solid #c02b0a;
    color: #ff0000;
    font-size: 13px;
    padding: 0 !important;
    font-weight: 400;
    font-family: Montserrat;
    margin-top: 4px !important;
}
.formulario .gform_submission_error{
color: #ff0000;
    text-align: left;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 90%;
    margin: auto;
}

.formulario .gfield_validation_message{
    color: #ff0000;
    text-align: left;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: auto;
    padding-top: 5px;
}

/* Estilos para el header */
.site-header {
    background-color: #ffffff;
    padding: 10px 0;
    border-bottom:  1px solid #000;
    height: 40px;
}

.container {
    display: flex;
    justify-content: space-between;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
	 align-items: center;
}
.page-title h1 a{
text-decoration:none;
}
.logo img {
    height: auto;
}

.page-title h1 {
    font-size: 16px;
    color: #000000;
    margin: 0;
    text-transform: capitalize;
}
.formulario{
	width:100%;
	position:relative;
}
.formulario .gform_required_legend,.formulario .gfield_required_asterisk {
    display: none;
}
.formulario .gform_wrapper.gravity-theme .gfield_label {
	color: #08255B;
-webkit-text-stroke-width: 1;
-webkit-text-stroke-color: #FFF;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 110%;
    margin-top: 0;
    margin-bottom: 8px;
	display:block;
		font-family: Montserrat;
}
.login-container .formulario .gform_wrapper.gravity-theme .gfield_label {
	 margin-top: 15px;
}
.formulario .register-link {
opacity: 0.8;
color: #08255B;
font-family: Montserrat;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
    text-align: center;
    margin-top: 20px;
}


.formulario .refpag{
color: #08255B;
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-decoration-line: underline;
    margin-top: 0;
    display: block;
	   font-family: Montserrat;
}
.formulario input,.formulario select{
border-radius: 4px;
    opacity: 0.8;
    background: #D9D9D9;
    height: 36px;
    border: 0;
    width: 100%;
    padding: 0 8px;
    display: block;
    position: relative;
    box-sizing: border-box;
	color: #08255B;
font-family: Montserrat;
font-size: 17px !important;
font-style: normal;
font-weight: 400;
line-height: 110%; 
}



.formulario input[type="submit"],.login-page .botonir{
border-radius: 8px;
border: 1px solid #FFF;
background: #08255B;
display: flex;
width: 250px;
padding: 13px 59px;
justify-content: center;
align-items: center;
gap: 10px;
color: #FFF;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 110% !important;
font-family: Montserrat;
    height: 49px;
    margin: auto;
    margin-top: 30px;
	cursor: pointer;
}

.formulario .gform_footer{
	position:relative;
}

/* Estilos para la página de login */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 62px); 
    box-sizing: border-box; 
    position: relative;
}

.login-container {
width: 100%;
    max-width: 348px;
    background-color: #ffffff;
      margin: 59px 25px;
    padding: 59px 25px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #08255B;
}

.login-logo {
    text-align: center;
    margin-bottom: 20px;
}

.login-logo img {
    max-width: 150px;
    height: auto;
}

.login-form {
    display: flex;
    flex-direction: column;
	width: 100%;
}

.formulario h2 {
	color: #08255B;
text-align: center;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 110%;
    margin-top: 0;
    margin-bottom: 35px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #1e2a39;
}



.login-button {
    width: 100%;
    padding: 10px;
    background-color: #003366; /* Color azul oscuro */
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
}

.login-button:hover {
    background-color: #002244; /* Color azul más oscuro */
}

.form-group a {
    color: #003366;
    font-size: 14px;
    text-decoration: none;
}

.form-group a:hover {
    text-decoration: underline;
}


.registro-container .formulario .register-link {
font-size: 17px;	
}

.formulario .register-link a{
text-decoration-line: underline;	
color: #08255B;
}


.register-link a:hover {
    text-decoration: underline;
}

/*registro*/
.registro-container {
width: 100%;
    max-width: 430px;
    background-color: #ffffff;
    padding: 43px 25px 25px 25px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #08255B;
	    margin: 59px 25px;
}
.login-page .gform_wrapper.gravity-theme .ginput_container_date input {
    width: 100%;
}
.login-page .gform_wrapper.gravity-theme .gform_fields {
    grid-column-gap: 22px;
}


.registro-container .formulario h2 {
    margin-bottom: 40px;
}
.registro-container .formulario .gfield_label {
    margin-top: 18px;
	font-family: Montserrat;
}
.registro-container  .formulario .register-link {
    margin-top: 0;
}


.registro-container  .formulario input[type="submit"] {
    margin-top: 4px;
}


.formulario .gfield--type-consent{
border: 0;
    padding: 0;
    margin: 0;
}
.formulario .gfield--type-consent .gfield_label{
	display:none;
}
.formulario .gfield_consent_label {
    padding-top: 5px;
    display: block;
    font-family: Montserrat;
    color: #08255B !important;
}


/* Ocultamos el checkbox nativo */
.formulario input[type="checkbox"] {
    appearance: none; /* Elimina el estilo predeterminado del checkbox */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    border-radius: 4px;
    opacity: 0.8;
    background: #D9D9D9;
    cursor: pointer;
    float: left;
    display: inline-block;
    position: relative;
	    margin-left: 0;
		    margin-right: 10px;
}




/* Estilo del check visual */
.formulario input[type="checkbox"]:checked:before {
content: "\2713";
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 20px;
    color: #08255B;
}


/* Registro ok */
.registro-ok{
	text-align:center;
	padding:20px;
}
.registro-ok .logor{
	padding-bottom:40px;
}
.registro-ok h3{
	margin: auto;
	padding-bottom:44px;
	color: #08255B;
text-align: center;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 22px */
max-width:344px;
}
.registro-ok .mensaje{
	color: #08255B;
text-align: center;
font-family: Montserrat;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 18.7px */
	padding-bottom:62px;
	display:block;
}
.login-page .botonir {
    line-height: normal;
    height: 31px;
	    text-decoration: none;
    margin-top: 0;
	    max-width: 250px;
    padding: 8px 0;
	cursor: pointer;
}
/* No acceso */
.registro-ok.noacceso .mensaje{
	padding-bottom:55px;
}
.login-page .botonir.reg {
	margin-top:44px;
}

/* Recuperar contraseña */
.login-container.recuperar{
    padding: 35px 25px;
}

@media only screen and (max-width: 450px) {
.registro-container .formulario .gform_fields {
    display: block;
}
}


/*RECURSOS*/

/* MENÚ */
.layout {
    display: flex;
	position:relative;
	max-width: 1250px;
    margin: auto;
}

.sidebar {
    width: 280px;
    background-color: #fff;
    transition: all 0.3s;
	top:0;
}
.sidebar .borde{
		    border: 1px solid #08255B;
			border-top:0;
		max-height: 370px;
    height: 100%;
	padding: 20px;
	margin-right: 20px;
}


.content {
    flex: 1;
        padding: 47px 24px;
}
  .menu-toggle {
	  display:none;
		position:absolute;
		height:40px;
		    height: 40px;
   top: 6px;
    left: 20px;
	    z-index: 9999;
  }
  .close-sidebar {
	  display:none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #fff;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

/* Overlay para el fondo */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 12%); /* Semitransparente */
    display: none; /* Oculto inicialmente */
    z-index: 1000;
}

/* Mostrar el overlay cuando el sidebar está activo */
.overlay.active {
    display: block;
}


.sidebar .menu ul{   
    list-style-type: none;
    padding: 0;
    margin-top: 0;
   padding-top: 35px;
}
.sidebar .menu ul li{
	padding-bottom:3px;
}
.sidebar .menu ul li a {
	color: #08255B;
font-family: Montserrat;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal; 
list-style-type: none;
	 text-decoration: none;
	  padding: 0;
	    margin-left: 35px;
}
.sidebar .menu ul li.nivel1 a {
	margin-left: 60px;
	display: inline-block;
}
/* Agregar la flecha verde SVG en el elemento actual */
.sidebar .menu ul li.current a {
    position: relative;
    font-weight: 600;
}

/* Pseudoelemento para la flecha verde */
.sidebar .menu ul li.current a::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"%3E%3Cpath d="M9.6 6L3.2 0V12L9.6 6Z" fill="%2304817B"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
}


/* CONTENIDO RECURSOS INICIO */

.login-page.recursos {
    display: block;
	padding: 0;
}
.banners .slider-container {
    width: 100%;
    overflow: hidden;
}

.banners .swiper-container {
    width: 100%;
}

.banners .swiper-slide {
   height:258px;
   position:relative;   
}
/* Ajusta el contenedor principal del slider */
.banners, .slider-container, .swiper-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

/* Ajusta el ancho de cada slide */
.banners .swiper-slide {
   width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
	background-size: cover; /* Hace que la imagen cubra todo el div */
    background-position: center; /* Centra la imagen */
    position: relative;
    display: flex;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: flex-end; /* Alinea el contenido a la derecha */
}
.banners .slide-content {
color: #08255B;
text-align: right;
font-family: Montserrat;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 110%; 
padding: 20px 6%;
    max-width: 40%;
    width: 100%;
}

/* Paginación (bullets) */
.banners .swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    z-index: 10;
}
.banners .swiper-pagination-bullet {
	height:10px;
	width:10px;
	background:rgba(4, 129, 123, 0.50);
}
.banners  .swiper-pagination-bullet-active {
	background:#04817B;
}

.recursos h3{
color: #08255B;
    font-family: Montserrat;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    margin-top: 5px;
	    margin-bottom: 8px;
}
.recursos .subtitulo{
	color: #08255B;
font-family: Montserrat;
font-size: 17px;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 18.7px */
    padding-bottom: 13px;
    display: block;
}
.recursos .banners{
	padding-bottom: 30px;
}
.recursos .tusrecursos{
    display: grid;
    grid-template-columns: 60% auto;
    gap: 20px;
	    padding-bottom: 35px;
}
.recursos .filtros .selectfiltro {
    color: #04817B;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-decoration: none;
    margin: 5px;
    border-radius: 30px;
    border: 1px solid #04817B;
    background: #FFF;
    padding: 5px 10px;
    display: inline-block;
	min-width: 147px;
    margin-left: 0;
}
.recursos .tus_recursos{
	color: #08255B;
font-family: Montserrat;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 28.6px */
padding-bottom:7px;
    display: block;
}

.recursos .tus_boton{
	text-align:right;
}
.recursos .tus_boton a{
	margin-top:5px;
color: #FFF;
text-align: center;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 17.6px */
	display: flex;
    width: auto;
    padding: 13px 20px;
    text-decoration: none;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
border: 1px solid #FFF;
background: #04817B;
    display: inline-block;
}
.recursos .tus_boton a svg{
    top: 3px;
    left: 5px;
    position: relative;
}

/* recuros */
.lista-recursos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
	padding-bottom: 60px;
	padding-top:37px;
}

.card {
	    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
	background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid #dedede;
}

.card-image {
    background-size: cover;
    background-position: center;
    height: 120px;
	background-color: #fff;
    position: relative;
}
.card-image:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
}
.card-content{
	  display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    padding: 16px 12px;
}
.card-content h3 {
color: #08255B;
font-family: Montserrat;
font-size: 17px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 18.7px */
padding-bottom:2px;
}

.card-content .fechap{
	color: #C8C7C7;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 13.2px */
  margin-bottom: auto; 
}
.card-content .file-type{
color: #08255B;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 13.2px */	
}
.card-content .marca{
color: #04817B;
font-family: Montserrat;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 12.1px */
text-decoration:none;
    padding: 3px;
}
.card-content .marca:hover{
text-decoration: underline;
}
.card-tags .tag {
    display: inline-block;
    background: #e8f5e9;
    color: #04817B;
    padding: 5px 10px;
    margin: 3px;
    border-radius: 4px;
    font-size: 12px;
}
.card-actions {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
}
.card-actions .btn {
border-radius: 20px;
border: 1px solid #08255B;
background: #08255B;
    padding: 6px 16px;
	color: #FFF;
font-family: Montserrat;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 12.1px */
text-decoration:none;
text-align:center;
width: 100%;
}


.pagination a {
    margin: 0 5px;
    color: #08255B;
    text-decoration: none;
    font-weight: bold;
}

.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
padding: 5px 6px;
    margin: 0 2px;
    text-decoration: none;
	color: #08255B;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
}

.pagination a:hover:not(.disabled) {
    text-decoration: underline;
}

.pagination a.active {
font-weight: 700
}

.pagination a.disabled {
    color: #ccc;
    pointer-events: none;
    cursor: default;
}
.flecha-svg {
    position: relative;
    top: 3px; 
}

.ver-recursos .pagination {
    grid-column: 1 / -1; 
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}
.recursos .mostrando{
	color: #08255B;
font-family: Montserrat;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 110%; 
}
.recursos.page-inicio .mostrando {
display:none;
}
.recursos .filtros{
color: #08255B;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 17.6px */
display:block;
}
.recursos .filtros .titfiltrar{
	display:block;
	padding-bottom:10px;
}
.recursos .filtros .mostrando{
display:block;
padding-bottom:12px;
}
.recursos .filtros .filtrar{
display:block;
padding-bottom:40px;
}
.recursos .filtros .cat{
color: #04817B;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 17.6px */
text-decoration:none;
margin-right: 10px;
margin-bottom:5px;
margin-top:5px;
border-radius: 30px;
border: 1px solid #04817B;
background: #FFF;
padding: 7px 13px;
display: inline-block;
}
.recursos .selectf{
    padding-bottom: 25px;
    display: inline-block;
    padding-right: 35px;
}
.recursos .filtros .cat:hover{
	color: #000;
	border: 1px solid #000;
}
.recursos .filtros .cat.activ {
    color: #fff;
    border-radius: 30px;
    border: 1px solid #04817B;
    background: #04817B;
}
.recursos.micuenta .tusrecursos {
    display: grid;
    grid-template-columns: 120px auto;
    gap: 8px;
    padding-bottom: 42px;
	align-items: center; 
}

.recursos.micuenta .form-cuenta{
	display:block;
	width:100%;
	max-width:618px;
}
.formulario.form-cuenta input:not([type="submit"]) {
border: 1px solid #08255B;
background: #F4F4F4;
}
.formulario.form-cuenta input[type="submit"]{
margin: initial;
margin-top:45px;
cursor: pointer;
}
.formulario.form-cuenta .gform_wrapper.gravity-theme .gfield_error [aria-invalid=true] {
    border: 1px solid #c02b0a;
}
.sidebar .salir{
    margin-top: 20px;
}
.filtromarca{
display:block;	
    color: #04817B;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    text-decoration: none;
	text-align: right;
}
.filtromarca .marca {
    display: inline-block;
}
.filtromarca .marca::first-letter {
    text-transform: uppercase;
}
.filtromarca img{
	    width: 15px;
    top: 2px;
    position: relative;
}
.spinner {
    float: left;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #08255B;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
    display: block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.login-page.recurso-post {
    display: block;
}

.recurso-post .bannerpost{
	height: 93px;
    background-size: cover;
	background-position: center;
    background-color: #DEDEDE;
	margin-bottom: 47px;
}
.recurso-post .bannerpost a{
color: #04817B;
font-family: Montserrat;
font-size: 11px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 12.1px */
text-decoration:none;
padding-top: 12px;
    padding-left: 20px;
    display: inline-block;
}
.recurso-post .bannerpost a svg{
	position:relative;
	top:3px;
}
.recurso-post .titulo{
	color: #08255B;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%; 
margin-bottom:26px;
}

.recurso-post .contenido{
color: rgba(0, 0, 0, 0.70);
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
}
.recurso-post .contenido h1,.recurso-post .contenido h2,.recurso-post .contenido h3,.recurso-post .contenido h4,.recurso-post .contenido h5,.recurso-post .contenido h6{
color: #08255B;
font-family: Montserrat;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 17.6px */	
}
.recurso-post .marcas{
	padding-bottom:20px;
}
.recurso-post .marcas .etiqueta{
position:relative;
top:2px;
padding-right:4px;
width: 13px;	
}
.recurso-post .marcapost{
	color: #04817B;
font-family: Montserrat;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 12.1px */
text-decoration:none;
    padding: 3px;
}
.recurso-post .marcapost:hover{
text-decoration:underline;
}

/* Estilos para dispositivos móviles */
@media (max-width: 1000px) {
	  .close-sidebar {
	  display:inline-block;
	  }
    .sidebar {
       position: absolute;
        left: -280px;
        top: 0;
        height: 100%;
        width: 280px;
        z-index: 1000;
        background-color: #fff;
        transition: all 0.3s;
    }

    .sidebar.active {
        left: 0;
    }

    .content {
        margin-left: 0;
    }

    .menu-toggle {
        display: block;
        cursor: pointer;
        margin-bottom: 10px;
    }
	.sidebar .borde{
		    border: 0;
	}
}


@media (max-width: 800px) {
	.layout {
    display: block;
	}
	.lista-recursos {
    grid-template-columns: repeat(2, 1fr);
	}
	.recursos .tusrecursos {
    display: block;
	}
}
@media (max-width: 600px) {
.banners .swiper-slide {
    background-position: 30% center;
}
.banners .slide-content {
      font-size: 20px;
       max-width: 50%;
	   padding: 15px 4%;
}
.formulario input[type="submit"], .login-page .botonir {
    width: 100%;
}
}
@media (max-width: 450px) {
	.lista-recursos {
    grid-template-columns: repeat(1, 1fr);
	}
	.content {
    padding: 47px 15px;
}
.recursos .selectf {
    padding-right: 15px;
}
}
@media (max-width: 380px) {
.recursos .selectf {
    padding-right: 0;
}	
}