/*

 Theme Name:   Laguna Media Group
 Theme URI:    https://westcreativo.com
 Description:  Default template Child for West Creativo
 Author:       Santiago Aristizábal
 Author URI:   https://westcreativo.com
 Template:     generatepress
 Version:      0.1

*/

@media (min-width:0px){
/* ----- HOME ----- */
.home__1 .banners__home .elementor-button{padding: 16px 15px;}
.icon_text .elementor-icon-box-description {transform: translateX(-60px);}
.elementor-icon-box-title{margin-top:13px;}

/*TEXTO AZUL  del titulo*/
.text__blue {color:#0D6A94;font-weight: 600;}
/* FIN - TEXTO AZUL  del titulo*/

/*ICONOS CON HOVER*/
.icon__background .elementor-icon-box-icon {position: relative;overflow: hidden;width: 55px;height: 55px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.icon__background .elementor-icon {transform: translateX(15px); margin-top: 10px;}
.icon__background:hover .elementor-icon svg path {fill: #ffffff !important;}
.icon__background .elementor-icon svg {width: 26px;height: auto;top: 2px;z-index: 1;position: relative;}
.icon__background .elementor-icon-box-icon::before {content: "";position: absolute; width: 140%;height: 153%;left: -2%;top: 100%;transform: translateY(-29%);background-image: url("https://lagunamg.com/wp-content/uploads/2026/04/img-hover-icons.png"); background-size: cover;background-position: center;background-repeat: no-repeat;transition: transform 0.5s ease;z-index: 0;}
.icon__background:hover .elementor-icon-box-icon::before {transform: translateY(-100%);}
/*FIN ICONOS CON HOVER*/

.why_work .e-con.e-child .elementor-element.azul:hover p{color:#414141!important}
.why_work .elementor-element.azul:hover svg:not(.arrow__white svg) path {stroke: #0d6a94 !important;fill: none !important;}
.why_work .e-con.e-child .elementor-element.morado:hover p{color:#414141!important}
.why_work .elementor-element.morado:hover svg:not(.arrow__white svg) path {stroke: #531479 !important;fill: none !important;}
.arrow__white .elementor-icon {margin-left: 128px;width: 40px;height: 40px;}
.azul:hover .arrow__white .elementor-icon {background-color: #0d6a94;border-radius: 50px;display: flex;align-items: center;justify-content: center;}
.morado:hover .arrow__white .elementor-icon {background-color: #531479;border-radius: 50px;display: flex;align-items: center;justify-content: center;}
.arrow__white svg {fill: #fff !important;}
.home__7 .elementor-post__text {position: relative;}
.home__7 .elementor-post__text::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 2px;background: #0D6A94;}
.home__7 .elementor-post__title a {text-decoration: none;background-image: linear-gradient(#198CBF, #198CBF);background-repeat: no-repeat;background-size: 0% 2px; background-position: 0 100%; -webkit-box-decoration-break: clone;box-decoration-break: clone;transition: background-size 0.3s ease;}
.home__7 .elementor-post__title a:hover {background-size: 100% 2px;}

/* ----- HEADER HOME ----- */


/* 1. Transición suave para el fondo del header */
.site-header-transp,
.site-header-transparente {
    transition: background-color 0.3s ease-in-out !important;
}

/* 2. Cambiar fondo a Blanco (#FFFFFF) al hacer scroll */
.elementor-sticky--effects.site-header-transp,
.elementor-sticky--effects.site-header-transparente {
    background-color: #FFFFFF !important;
}

/* 1. Estado inicial: Ocultar el logo oscuro */
.logo-dark {
    display: none !important;}

/* 2. Estado Scroll (Sticky activo): Ocultar logo blanco */
.elementor-sticky--effects .logo-white {
    display: none !important;
}

/* 3. Estado Scroll (Sticky activo): Mostrar logo oscuro */
.elementor-sticky--effects .logo-dark {
    display: block !important;
}

/* Cambiar el color del texto del menú al hacer scroll */
.elementor-sticky--effects .main-navigation a,
.elementor-sticky--effects .elementor-nav-menu a {
    color: #414141 !important; /* Pon aquí el color oscuro que prefieras */
    transition: color 0.3s ease-in-out !important; /* Animación suave */
}

/* Cambiar color de la flecha/indicador del menú al hacer scroll */
.elementor-sticky--effects .elementor-nav-menu .sub-arrow,
.elementor-sticky--effects .elementor-nav-menu .sub-arrow i,
.elementor-sticky--effects .elementor-nav-menu .sub-arrow svg {
    color: #414141 !important; /* Color para ícono tipo fuente */
    fill: #414141 !important;  /* Color por si Elementor lo renderiza como SVG */
    transition: color 0.3s ease-in-out !important; /* Animación suave */
}

/* 2. Peso resaltado (ej. 700 / Bold) solo para el elemento activo */
.elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-nav-menu .current-menu-item > a {
    font-weight: 700 !important; 
}

/* Color HOVER de los textos del menú cuando el header está blanco (scroll activo) */
.elementor-nav-menu a:hover {
    color: #0D6A94 !important; 
}

.elementor-sticky--effects .elementor-menu-toggle svg {
    fill: #000000 !important;
    color: #000000 !important;
    transition: fill 0.3s ease-in-out, color 0.3s ease-in-out !important;
}





/* ----- FIN HEADER HOME ----- */

/* ----- DIGITAL ----- */
.button__progress-bar::before,
.button__progress-bar::after {pointer-events: none;}
.button__progress-bar a:hover{border:1px solid #fff!important;}
.progress__bar-digital50 .elementor-title{position: relative; left:50%;}
.progress__bar-digital60 .elementor-title{position: relative; left:60%;}
.progress__bar-digital75 .elementor-title{position: relative; left:75%;}
.progress__bar-digital93 .elementor-title{position: relative; left:80%;}
.progress__bar-digital7080 .elementor-title{position: relative; left:70%;}

/* ----- VISUAL CONTENT PRODUCTION ----- */
.icon__visual .elementor-icon svg {top: 7px;}
.icon__background.aerial .elementor-icon svg {width: 40px;height: auto;top: 2px;left: -8px;z-index: 1;position: relative;}
.progress__bar-digital70 .elementor-title{position: relative; left:70%;}
.progress__bar-digital64 .elementor-title{position: relative; left:64%;}
.progress__bar-digital82 .elementor-title{position: relative; left:82%;}
.carrusel__visual .swiper-slide-bg,
.carrusel__visual .elementor-background-overlay{border-radius:20px!important;}

/* ----- AUDIOVISUAL ----- */
.icon__background.icon__audio .elementor-icon svg {width: 20px;height: auto;top: 2px;left: 2px;z-index: 1;position: relative;}
.progress__bar-digital80 .elementor-title{position: relative; left:80%;}
.progress__bar-digital67 .elementor-title{position: relative; left:67%;}
.progress__bar-digital63 .elementor-title{position: relative; left:63%;}

/* ----- WORK ----- */
/*ANIMACION FONDO MORADO CON TEXTO EN HOVER*/
.image__card-work {position: relative!important;overflow: hidden!important;}
.image__card-work::after {content: "";position: absolute;left: 0; width: 100%;height: 180%;bottom: -180%; background: url("https://lagunamg.com/wp-content/uploads/2026/04/img-before.svg") no-repeat center bottom/cover;transition: bottom 0.6s cubic-bezier(.4,0,.2,1); z-index: 1;}
.elementor-element-c7a0fd2 {z-index: 2!important;}
.elementor-element-9986527:hover .image__card-work::after {bottom: 0;}
.image__card-work{display: flex!important;align-items: center!important;justify-content: center!important;}
.elementor-element-9986527 .elementor-element-c7a0fd2 {opacity: 0;transform: translateY(20px);visibility: hidden;}
@keyframes revealText {
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}
.elementor-element-9986527:hover .elementor-element-c7a0fd2 {animation: revealText 0.1s ease forwards;animation-delay: 0.45s; }
/*FIN ANIMACION FONDO MORADO CON TEXTO EN HOVER*/

/* ANIMACION DEL BOTON */
.button_card {position: relative;display: inline-block;}
.button_card .e-font-icon-svg {position: absolute;right: -10px;top: 50%;transform: translateY(-50%) scale(0.6);opacity: 0;transition: opacity 0.25s ease 0.55s, transform 0.25s ease 0.55s;z-index: 2;}
.button_card::before {content: "";position: absolute;left: -10px;top: 50%;width: 46px; height: 46px;border: 1px solid #fff;border-radius: 50%;transform: translateY(-50%) scale(1);z-index: 1;pointer-events: none;}

@keyframes circleFlow {
  0% {
    left: -10px;
    transform: translateY(-50%) scale(1);
  }

  40% {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
  }

  100% {
    left: calc(100% - -26px); /* llega al icono */
    transform: translate(-100%, -50%) scale(0.55);
  }
  
}

.button_card:hover::before {animation: circleFlow 0.75s cubic-bezier(.4,0,.2,1) forwards;}
.button_card:hover .e-font-icon-svg {opacity: 1;transform: translateY(-50%) scale(1);}
/* FIN ANIMACION DEL BOTON */

/*BOTONES DE NAVEGACION ENTRE WORKS*/
.project-nav-buttons {position: relative;width: 100%;display: flex;justify-content: center;align-items: center;gap: 40px;margin-top: 40px;}
.project-nav-buttons .nav-arrow {position: relative;display: inline-flex;align-items: center;gap: 12px;padding: 10px 20px;text-decoration: none;}
.project-nav-buttons .nav-arrow::before {content: "";position: absolute;top: 50%;width: 60px;height: 60px;border: 1px solid #4f4f4f;border-radius: 50%;transform: translateY(-50%);pointer-events: none;transition: transform .45s ease;}
.project-nav-buttons .nav-arrow.prev::before {left: 0;}
.project-nav-buttons .nav-arrow.next::before {right: 0;}
.project-nav-buttons .label{color:#333!important;font-size: 14px;}
.project-nav-buttons .arrow {width: 18px;height: auto;z-index: 2;}
.project-nav-buttons .nav-arrow.prev:hover::before {animation: circlePrev 0.9s ease forwards;}

@keyframes circlePrev {
    0% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translate(33px, -50%) scale(0.9);
    }
    100% {
        transform: translate(-3px, -50%) scale(0.6);
    }
}


.project-nav-buttons .nav-arrow.next:hover::before {animation: circleNext 0.9s ease forwards;}

@keyframes circleNext {
    0% {
        transform: translateY(-50%) scale(1);
    }
    50% {
        transform: translate(-33px, -50%) scale(0.9);
    }
    100% {
        transform: translate(3px, -50%) scale(0.6);
    }
}

.project-nav-buttons .nav-arrow:hover .label {transform: translateX(4px);}
.project-nav-buttons .nav-arrow.next:hover .label {transform: translateX(-4px);}
.button_card,
.button_card a,
.button_card .button-link-wrap {border: none !important;outline: none !important;box-shadow: none !important;}
/*FIN BOTONES DE NAVEGACION ENTRE WORKS*/

/* ----- BLOG ----- */
/*FECHA DE LAS TARJETAS DE BLOG EN LA PAGINA PRINCIPAL*/
.blog-date-formatted {display: inline-block !important;opacity: 1 !important;visibility: visible !important;background-color: #fff;padding: 2px 10px;border-radius: 50px; font-size: 16px; line-height: 24px; color: #000;font-weight: 400;}
/*FIN FECHA DE LAS TARJETAS DE BLOG EN LA PAGINA PRINCIPAL*/
p.wp-block-paragraph a,
ol a span{font-size: 18px;}
.elementor-pagination *{font-size: 22px;}
.elementor-pagination .page-numbers{width: 45px; height: 45px; display: inline-flex; justify-content: center; align-items: center; font-size: 22px; border: 1px solid #000000; border-radius: 5px;}
.elementor-pagination .page-numbers.current{border: 2px solid #531479;font-weight: 700;}
.elementor-pagination .prev,
.elementor-pagination .next{width: auto; height: auto; border: unset;}
.card-blog{height: 100%; flex-wrap: nowrap;}
.card-blog .e-con-inner,
.container__title-blog{height: 100%!important;}
.e-search-input {color: #000000 !important;-webkit-text-fill-color: #000000 !important;}
.e-search-input::placeholder {color: #000000;opacity: 1;}

/* ----- CONTACT US ----- */
.frm_forms input::placeholder,
.frm_forms textarea::placeholder {color: #ffffff !important;opacity: 1; }
.frm_forms input::-webkit-input-placeholder,
.frm_forms textarea::-webkit-input-placeholder {color: #ffffff !important;}
.frm_forms input:-ms-input-placeholder,
.frm_forms textarea:-ms-input-placeholder {color: #ffffff !important;}
.frm_button_submit{text-transform: capitalize!important;}
.frm_button_submit:hover{background: #531479!important;color:#ffffff!important;border:none!important;}
.frm_forms .frm_submit {width: 100%;}
.frm_forms .frm_button_submit {width: 100%;display: block;}
.frm_forms .frm_submit.frm_flex {display: flex;}
.frm_forms .frm_submit.frm_flex .frm_button_submit {flex: 1;}

.frm_style_formidable-style.with_frm_style .frm_error_style {background-color: rgba(71, 0, 114, 0.16)!important;border: 1px solid #470072!important; color: #470072!important;}
.frm_style_formidable-style.with_frm_style .frm_error, .frm_style_formidable-style.with_frm_style .frm_limit_error {color: #470072!important;}
.frm_style_formidable-style.with_frm_style .frm_blank_field input[type=text],
.frm_style_formidable-style.with_frm_style .frm_blank_field input[type=email]{border-color:#470072!important;}
/* Estado normal */
#form_contact-form input,
#form_contact-form textarea {background-color: transparent !important;}

/* Cuando el usuario hace click (focus) */
#form_contact-form input:focus,
#form_contact-form textarea:focus {background-color: transparent !important;box-shadow: none !important;outline: none !important;}
}

@media (min-width:640px){
/* ----- WORK ----- */
/* ANIMACION DEL BOTON */
.button_card .e-font-icon-svg {right: -7px;}
.button_card::before {left: -6px;}

@keyframes circleFlow {
  0% {
    left: -10px;
    transform: translateY(-50%) scale(1);
  }

  40% {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
  }

  100% {
    left: calc(100% - -12px); /* llega al icono */
    transform: translate(-100%, -50%) scale(0.55);
  }
  
}
}

@media (min-width:768px){
/* ----- WORK ----- */
/* ANIMACION DEL BOTON */
.button_card .e-font-icon-svg {right: 7px;}
.button_card::before {left: 12px;}


/* STICKY COLUMN FIXED */
.column__sticky {align-self: stretch !important;}
.column__sticky .container__sticky {position: sticky !important;top: 120px !important;height: fit-content !important;}
}

@media (min-width:1024px){
/* ----- WORK ----- */
/* ANIMACION DEL BOTON */
.button_card::before {left: 25px;}

@keyframes circleFlow {
  0% {
    left: -10px;
    transform: translateY(-50%) scale(1);
  }

  40% {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
  }

  100% {
    left: calc(100% - -10px); /* llega al icono */
    transform: translate(-100%, -50%) scale(0.55);
  }
  
}
}

@media (min-width:1280px){
/* ----- WORK ----- */
/* ANIMACION DEL BOTON */
.button_card::before {left: 45px;}
}
	
@media (min-width:1536px){
/* ----- WORK ----- */
/* ANIMACION DEL BOTON */
@keyframes circleFlow {
  0% {
    left: -10px;
    transform: translateY(-50%) scale(1);
  }

  40% {
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
  }

  100% {
    left: calc(100% - -8px); /* llega al icono */
    transform: translate(-100%, -50%) scale(0.55);
  }
  
}
}