/*

Theme Name: DMS Theme
Theme URI: #
Author: DEIDEAS Marketing Solutions
Author URI: http://deideasmarketing.com/
Description: Tema custom para el desarrollo de webs by DEIDEAS Marketing Solutions
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dms_theme
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
*/

/* CLS: width/height reservan espacio; height:auto mantiene el ratio al escalar */
img[width][height] {
	height: auto;
	max-width: 100%;
}

/* Logo del header: ancho máximo.
   La regla CLS img[width][height]{max-width:100%} (0,2,1) tiene más especificidad
   que la del tema (header .logo, 0,1,1) y la anulaba, dejando el logo a tamaño natural.
   Este selector (0,3,0) la supera y restaura el tamaño de diseño. */
.dms-site-header .dms-header__logo .logo {
	max-width: 200px;
}
@media (max-width: 1440px) {
	.dms-site-header .dms-header__logo .logo {
		max-width: 145px;
	}
}

/* Logo del footer: mismo criterio de tamaño que el header.
   Supera la regla CLS img[width][height]{max-width:100%} (0,2,1). */
.dms-site-footer .dms-footer-left .dms-footer-logo {
	max-width: 200px;
	height: auto;
}
@media (max-width: 1440px) {
	.dms-site-footer .dms-footer-left .dms-footer-logo {
		max-width: 145px;
	}
}

/* Sello PYME Innovadora: tercera columna a la derecha del menú.
   El contenedor del footer tenía max-height:700px y recortaría el sello. */
.dms-site-footer > .dms-container {
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	max-height: none;
}
.dms-site-footer .dms-footer-left {
	width: 26%;
	padding-right: 2%;
	flex: 0 1 26%;
}
.dms-site-footer .dms-footer-right {
	width: 48%;
	margin-left: 0;
	min-width: 0;
	flex: 1 1 48%;
}
.dms-site-footer .dms-footer-pyme {
	width: 180px;
	flex: 0 0 180px;
	display: flex;
	justify-content: flex-end;
}
.dms-site-footer .dms-footer-bottom {
	flex: 1 1 100%;
	width: 100%;
}
.dms-site-footer .dms-footer-pyme__link {
	display: block;
	width: 180px;
	max-width: 100%;
	background: transparent;
	text-align: center;
	text-decoration: none;
}
.dms-site-footer .dms-footer-pyme__icon {
	display: block;
	width: 160px;
	height: auto;
	margin: 0 auto 8px;
}
.dms-site-footer .dms-footer-pyme__banner {
	display: block;
	width: 100%;
	height: auto;
	margin: 10px auto 0;
}
.dms-site-footer .dms-footer-pyme__data,
.dms-site-footer .dms-footer-pyme__data * {
	color: #fff;
}
.dms-site-footer .dms-footer-pyme__cif,
.dms-site-footer .dms-footer-pyme__label {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
}
.dms-site-footer .dms-footer-pyme__name {
	font-weight: 700;
	font-size: 12px;
	line-height: 1.2;
	margin: 2px 0;
}
.dms-site-footer .dms-footer-pyme__dates {
	font-size: 10px;
	line-height: 1.2;
	margin-top: 4px;
}
@media (max-width: 768px) {
	.dms-site-footer > .dms-container {
		flex-wrap: wrap;
	}
	.dms-site-footer .dms-footer-left,
	.dms-site-footer .dms-footer-right,
	.dms-site-footer .dms-footer-pyme {
		width: 100%;
		flex: 1 1 100%;
		margin-left: 0;
		padding-right: 0;
		justify-content: flex-start;
	}
	.dms-site-footer .dms-footer-right {
		column-count: 1;
	}
	.dms-site-footer .dms-footer-pyme {
		margin-top: 24px;
	}
}

/* Full-width estático (sin swiper): no forzar altura del hero en móvil.
   ajustarAlturaSlides() aplicaba height inline a TODOS los .dms-fullwidth-slide. */
@media (max-width: 600px) {
	.dms-fullwidth:not(:has(> .swiper-container)) > .dms-fullwidth-slide {
		height: auto !important;
		min-height: 0;
	}
}

/* CF7: ocultar el cuadro de respuesta mientras esté vacío (antes de enviar).
   CF7 le inserta el mensaje al responder, así que :empty no oculta respuestas reales. */
.wpcf7-response-output:empty {
	display: none;
}

/* Blog: la imagen del listado ahora es un enlace al post (SEO enlaces internos).
   El <a> pasa a ser el hijo flex de .blog-posts-single-top, así que debe ocupar
   el mismo espacio que ocupaba la imagen para no romper la maquetación. */
.blog-posts-single-img-link {
	display: block;
	width: 100%;
	line-height: 0;
}

/* CLS: layout crítico de Swiper garantizado desde el primer paint, para TODOS los
   carruseles (héroe, casos, charlas, logos). Independiente de cuándo cargue swiper.css
   o el bundle del plugin de caché. Sin display:flex las diapositivas se apilan en
   vertical (el héroe .dms-fullwidth pasa de 458px a ~3206px con 7 slides) y colapsan
   al aplicarse flex, empujando toda la página -> CLS masivo. */
.swiper-container {
	overflow: hidden;
}
.swiper-wrapper {
	display: flex;
}

/* CLS: slider de logos ("Confían en nosotros").
   Swiper CSS/JS cargan en diferido; sin layout crítico la sección cambia de altura
   al aplicar estilos Swiper e inicializar el carrusel. */
.extra-logos_slider.swiper-container {
	overflow: hidden;
	box-sizing: border-box;
	/* 80px logos + 60px zona paginación (.dms-boxed .swiper-container) */
	min-height: 140px;
}

.extra-logos_slider.swiper-container .swiper-wrapper {
	display: flex;
	align-items: center;
}

.extra-logos_slider.swiper-container .swiper-slide {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.extra-logos_slider.swiper-container .swiper-slide img {
	display: block;
	max-height: 80px;
	width: auto;
	height: auto;
}

/* Slides vacíos que añade custom.js antes de init Swiper */
.extra-logos_slider.swiper-container .swiper-slide.empty {
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	visibility: hidden;
}

@media (max-width: 1024px) {
	.extra-logos_slider.swiper-container {
		min-height: 118px; /* 58px + 60px */
	}
	.extra-logos_slider.swiper-container .swiper-slide img {
		max-height: 58px;
	}
}

@media (max-width: 600px) {
	.extra-logos_slider.swiper-container {
		min-height: 85px; /* 45px + 40px paginación móvil */
	}
	.extra-logos_slider.swiper-container .swiper-slide img {
		max-height: 45px;
	}
}

@media (max-width: 380px) {
	.extra-logos_slider.swiper-container .swiper-slide img {
		max-height: 30px;
	}
	.extra-logos_slider.swiper-container {
		min-height: 70px; /* 30px + 40px */
	}
}

/* ---------------- Para que no exista antes ----------------------------------- */

.animacion {
    opacity: 0;
}

/* ---------------- Para que no exista antes ----------------------------------- */

/* ------------------Animacion barras blancas sobre imagen----------------------- */

.bar-1{
    background-color: white;
    height: 100%;
    position: absolute;
    width: 15%;
    top: 0px;
}

.bar1-up-animation{
    animation: barUp1 3s forwards;
}

.bar-2{
    background-color: white;
    height: 100%;
    position: absolute;
    width: 15%;
    top: 0px;
    left: calc(14%* 1);
}

.bar2-down-animation{
    animation: barDown2 3s forwards;
}

.bar-3{
    background-color: white;
    height: 100%;
    position: absolute;
    top: 0;
    width: 15%;
    left: calc(14%* 2);
}

.bar3-up-animation{
    animation: barUp3 3s forwards;
}

.bar-4{
    background-color: white;
    height: 100%;
    position: absolute;
    left: calc(14%* 3);
    width: 15%;
    top: 0;
}

.bar4-down-animation{
    animation: barDown4 3s forwards;
}

.bar-5{
    background-color: white;
    height: 100%;
    position: absolute;
    width: 15%;
    top: 0px;
    right: calc(14%* 2);
}

.bar5-up-animation{
    animation: barUp5 3s forwards;
}

.bar-6{
    background-color: white;
    height: 100%;
    position: absolute;
    width: 15%;
    top: 0px;
    right: calc(14%* 1);
}

.bar6-down-animation{
    animation: barDown6 3s forwards;
}


.bar-7{
    background-color: white;
    height: 100%;
    position: absolute;
    width: 15%;
    top: 0px;
    right: 0px;
}

.bar7-up-animation{
    animation: barUp1 3s forwards;
}


@keyframes barUp1 {
    from {
        height: 100%;
    }

    to {
        height: 0%;
    }
}

@keyframes barDown2 {
    from {
        transform: translateY(0%);
        
    }

    to {
        transform: translateY(100%);
    }
}


@keyframes barUp3 {
    from {
        height: 100%;
    }

    to {
        height: 0%;
    }
}


@keyframes barDown4 {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(100%);
    }
}

@keyframes barUp5 {
    from {
        height: 100%;
    }

    to {
        height: 0%;
    }
}

@keyframes barDown6 {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(100%);
    }
}

@keyframes barUp7 {
    from {
        height: 100%;
    }

    to {
        height: 0%;
    }
}


/* ------------------Animacion barras blancas sobre imagen----------------------- */

/* ------------------Animacion cargar texto y flechas----------------------- */

.slideUpText1 {
    top: 40px;
    left: 10px;
    animation: slideUpText ease 0.5s forwards 1s;
    position: relative;
    opacity:0;
}

.slideUpText2 {
    top: 40px;
    left: 10px;
    animation: slideUpText ease 0.5s forwards 1.2s;
    position: relative;
    opacity:0;
}

.slideUpText3 {
    top: 40px;
    left: 10px;
    animation: slideUpText ease 0.5s forwards 1.4s;
    position: relative;
    opacity:0;
}

.slideUpText4 {
    top: 40px;
    left: 10px;
    animation: slideUpText ease 0.5s forwards 1.6s;
    position: relative;
    opacity:0;
}


.slideUpText5 {
    top: 40px;
    left: 10px;
    animation: slideUpText ease 0.5s forwards 1.8s;
    position: relative;
    opacity:0;
}


@keyframes slideUpText {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    100% {
        transform: translateY(-40px);
        opacity: 1;
    }
}

.slideSideArrows1 {
    right: 40px;
    animation: slideSideArrows ease 0.5s forwards 1s;
    position: relative;
    opacity:0;
}

.slideSideArrows2 {
    right: 40px;
    animation: slideSideArrows ease 0.5s forwards 1.2s;
    position: relative;
    opacity:0;
}

.slideSideArrows3 {
    right: 40px;
    animation: slideSideArrows ease 0.5s forwards 1.4s;
    position: relative;
    opacity:0;
}

.slideSideArrows4 {
    right: 40px;
    animation: slideSideArrows ease 0.5s forwards 1.6s;
    position: relative;
    opacity:0;
}

.slideSideArrows5 {
    right: 40px;
    animation: slideSideArrows ease 0.5s forwards 1.8s;
    position: relative;
    opacity:0;
}

.slideSideArrows6 {
    right: 40px;
    animation: slideSideArrows ease 0.5s forwards 2s;
    position: relative;
    opacity:0;
}

@keyframes slideSideArrows {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    100% {
        transform: translateX(40px);
        opacity: 1;
    }
}

/* ------------------Animacion cargar texto y flechas----------------------- */

/* ------------------Animacion al hacer hover que se acerque la imagen y se difumine----------------------- */

.imagen_informacion:hover{
    opacity: 1;
    animation: transition-blur 1.2s forwards, transition-get-closer 1.2s forwards;
    background-image: linear-gradient(0deg, rgba(33, 28, 191, 0.9) 0%, rgba(33, 28, 191, 0.9) 100%);
}

@keyframes transition-get-closer{
    from{transform: scale(1);}
    to{transform: scale(1.3);}
}

@keyframes transition-blur {
    from {filter: blur(0px);}
    to {filter: blur(8px);}
}

/* ------------------Animacion al hacer hover que se acerque la imagen y se difumine----------------------- */

/* ------------------ Animacion cargar texto hacia arriba ----------------------- */

.replace {
    // Underlying values
    transform: translateY(1);
    opacity: 1;
  
    @media (prefers-reduced-motion: no-preference) {
      animation: fade-in 1.5s ease-out;
      animation-composition: replace;
  

    }
  }
  
  @keyframes fade-in {
    0% {
      // Effect values
      transform: translateY(50px);
      opacity: 0;
    }
  }

  /* ------------------ Animacion cargar texto hacia arriba ----------------------- */

  /* ------------------ Animacion cargar texto izquierda derecha ----------------------- */

  .slide-right, .slide-left {
    width: 100%; 
  }


 .slide-right {
    position: relative;
    animation: 3s slide-right;
  }
  @keyframes slide-right {
    0% {
        transform: translateX(-80px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
  }
  
  /***** Slide Left *****/
  .slide-left {
    position: relative;
    animation: 3s slide-left;
  }
  
  @keyframes slide-left {
    0% {
      transform: translateX(80px);
      opacity: 0;
    }
    100% {
      transform: translateX(0); 
      opacity: 1;
    }
  }
  

    /* ------------------ Animacion cargar texto izquierda derecha ----------------------- */

    /* ------------------ Animacion escribir texto azul/amarillo ----------------------- */
    .iconos_titulo_animacion {
        color: #211CBF;
      
        // #dbd56e;
      
        background: -webkit-linear-gradient(180deg, #E7E565 15%, #211CBF 60%);
      
        -webkit-background-clip: text;
      
        -webkit-text-fill-color: transparent;
      
        font-size: 3rem;
        font-weight: 600;
        white-space: nowrap;
        border-right: 4px solid;
        animation: type 1.5s steps(90) 1.5s 1 normal both, cursor 1s step-end infinite;
        position: relative;
      }
      
      @keyframes type {
        from {
          width: 0;
        }
      
        99%{
            border-right: 4px solid;
        }
    
        to {
          width: 100%;
          border-right: 0px ;
        }
      }
    /* ------------------ Animacion escribir texto azul/amarillo ----------------------- */

    /* ------------------ Animacion fade in con color azul ----------------------- */
.animation-fade-in {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    }
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

    /* ------------------ Animacion fade in con color azul ----------------------- */

    /* ------------------ Animacion texto hacia arriba/abajo ----------------------- */

    .slide-effect {
        position: relative;
        overflow: hidden;
    }
    
    .slideDown {
        top: -40px;
        left: 5px;
        animation: slideDown 3s forwards;
        position: relative;
        opacity:0;
    }
    
    .slideUp {
        top: 40px;
        left: 10px;
        animation: slideUp 3s forwards;
        position: relative;
        opacity:0;
    }
    
    
    @keyframes slideDown {
        0% {
            transform: translateY(0);
            opacity: 0;
        }
        100% {
            transform: translateY(40px);
            opacity: 1;
        }
    }
    
    
    @keyframes slideUp {
        0% {
            transform: translateY(0);
            opacity: 0;
        }
        100% {
            transform: translateY(-40px);
            opacity: 1;
        }
    }
    
    /* ------------------ Animacion texto hacia arriba/abajo ----------------------- */

    /* ------------------ Animacion hacer el boton mas grande ----------------------- */
    .boton-amarillo{
        background-color: #e7e565;
        border-color: #e7e565;
        color: #211cbf;
        padding: 12px 11px;
        color: #fff;
        text-align: center;
        text-decoration: none;
        -webkit-transition: all .3s;
        transition: all .3s;
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-size: 16px;
        line-height: normal;
        font-style: normal;
        cursor: pointer;
    }
    
    .boton-amarillo:hover{
        padding: 12px 30px;
    }
    /* ------------------ Animacion hacer el boton mas grande ----------------------- */
    /* ------------------ Animacion donde la caja revota ----------------------- */

.animation-bouncing{
    animation: bounce 1.3s;
}

@keyframes bounce {
 0% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(-20px);
 }
 100% {
  transform: translateY(0);
 }
}

    /* ------------------ Animacion donde la caja revota ----------------------- */


.wpml-ls-menu-item .menu-link span{
	color: #fff;
}

.nav .menu-depth-0 .menu-item-depth-0>ul{
	min-width: 475px !important;
}

.single-cursos .col-bluebox .col-blue-box{
	height: auto;
}

@media(max-width: 600px){
	.single-cursos .extra-labels{
		display: none;
	}
}

/* Blog post card: un solo enlace en el título, card clickable */
.blog-posts-single {
	cursor: pointer;
}

.blog-posts-single-content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-bottom: 15px;
}

.blog-posts-single-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	margin-bottom: 12px;
	color: #666E97;
	font-size: 15px;
	line-height: 1.4;
}

@media (max-width: 425px) {
	.blog-posts-single-text {
		font-size: 14px;
	}
}

.blog-posts-single:hover .blog-posts-single-img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

.blog-posts-single-title {
	margin: 0 0 20px;
}

.blog-posts-single-title a {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.blog-posts-single-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.blog-posts-single-title a:hover,
.blog-posts-single-title a:focus {
	color: inherit;
	text-decoration: none;
}

.blog-posts-single:hover .blog-posts-single-link {
	color: #211cbf !important;
	text-decoration: underline !important;
}

.blog-posts-single-link {
	position: static;
	margin-top: auto;
	padding-top: 4px;
	pointer-events: none;
}

/* CF7: mensajes de respuesta */
.wpcf7-response-output {
	border-radius: 0;
	border-width: 1px;
	border-style: solid;
	margin: 1em 0 0;
	padding: 0.75em 1em;
}

.wpcf7 form.sent .wpcf7-response-output {
	color: #3d6b4f;
	background-color: #edf7f0;
	border-color: #c8e6d0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	color: #8b4444;
	background-color: #fdf0f0;
	border-color: #f0d0d0;
}

/* Evita el espacio en blanco / scroll horizontal (overflow-x) al deslizar */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

#dms-page,
.dms-page-wrapper,
.dms-site-content {
	max-width: 100%;
	overflow-x: clip;
}