/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*****************************
 *  HOME
 * ***************************/
/* .panel {
  min-height: 50vh;
} */
/* 
body {
  cursor: none;
} */
.custom-cursor {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(125, 144, 163, 0.80);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, width 0.2s, height 0.2s;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(255,255,255,0.6);
}
.custom-cursor.cursor-hover {
  transform: translate(-50%, -50%) scale(2);
}

.home .header-wrap .site-header {
    background: transparent;
}

.bannerPage {
    padding-top: 50px ;
    padding-bottom: 50px;
}
.panel.hero{
    padding-top: 250px ;
    padding-bottom: 250px;
}

/****** Gradiente de titulo footer ******/
.gradient-text {
	background: linear-gradient(90deg, #7D90A3 0%, #4C4F52 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/****** texto vertical ******/
.letters-vertical {
    width: 5% !important;
}
.text-vertical{
	writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.text-vertical p{
    font-size: 16px;
    color: #7D90A3;
}
/**** Menu ******/
div#primary-menu {
    border: 1px solid #7D90A3;
    border-radius: 50px;
}
div#primary-menu ul li a{
	text-transform:uppercase;
}
/****** title pages *****/
.title-page{
	color: rgba(76, 79, 82, 0.90);
    font-family: var(--gp-font--marrow);
    font-size: 90px;
    line-height: 0.8;
    margin-bottom: 0px;
}
.title-page span.destacado {
    font-size: 100px;
    color: rgba(125, 144, 163, 0.90);
}

/****** title SW *****/
.title-sw{
	color: rgba(76, 79, 82, 0.90);
    font-family: var(--gp-font--marrow);
    font-size: 190px;
    line-height: 0.8;
    margin-bottom: 0px;
}
.title-sw span.destacado {
    font-size: 215px;
    color: rgba(125, 144, 163, 0.90);
}
.btnStar{
    position: absolute;
    top: 33%;
    right: 40%;
	
}
span.caw-time-counter {
    font-size: 80px !important;
    font-family: var(--gp-font--marrow);
	color: rgba(76, 79, 82, 0.90);
}
.btnStar a, .btnMP a,  .vc_grid-btn-load_more a{
	box-shadow: 4px 4px 4px 0px #0000000F !important;
}
.btnStar a, .btnStar a i, .btnMP a, .btnMP a i,  .vc_grid-btn-load_more a{
    font-size: 20px !important;
    font-weight: 700;
}
.vc_btn3.vc_btn3-color-blue, .vc_btn3.vc_btn3-color-blue.vc_btn3-style-flat {
	background-color: #7D90A3 !important;
    color: #FFFFFF;
	border-radius:50px;
}
.studioDigital {
    display: flex;
    align-items: center;
    justify-content: center;
}
/******* Section Quienes somos *********/
.boxQS .vc_column-inner, .boxService .vc_column-inner{
	box-shadow: 3px 1px 4px 0px #00000008;
	border-radius:15px;
	padding:10px 20px !important;
}
.boxQS p, .boxService p{
	margin-bottom:0;
}
.boxQS .text-absolut p{
	position: absolute;
    top: 10px;
    right: 20px;
    font-size: 12px;
}
/******* seccion slider trabajos *********/
.project-slider {
  position: relative;
  overflow: hidden;
}

.project-slide {
  display: none;
  transition: opacity 0.5s ease;
}

.project-slide.active {
  display: block;
}

.project-slide .vc_column-inner {
  padding: 40px;
}

/* Layout tipo grid */
.project-slide .vc_row {
  display: flex;
  align-items: center;
}
.slider-nav {
    position: absolute;
    right: 10%;
    top: -100px;
}
.slider-nav button {
    background: #7D90A3;
    border-radius: 50%;
    padding: 5px 15px !important;
}
.titleProject h3{
	font-weight: 700;
	font-size: 34px;
	line-height: 40px;
	letter-spacing: 0px;
}
/******* Acordeon servicios ********/
.services{
	background: linear-gradient(180deg, #7D90A3 0%, #464C4A 100%);
	box-shadow: 1px 2px 4px 0px #00000012;
	    border-radius: 2em;
	color:#fff;
}
.services h4{padding:10px;}
.vc_tta.vc_tta-style-outline .vc_tta-panel-body, .vc_tta.vc_tta-style-outline .vc_tta-panel-heading {
    border-width: 0px !important;
}
.vc_tta-color-grey.vc_tta-style-outline .vc_tta-panel .vc_tta-panel-heading{
	border-top: 1px solid #fff !important;
}
/****** Icons + *******/
.iconSpace.wpb_column.vc_column_container.vc_col-sm-2 {
    width: 50px;
}
.iconSpace.wpb_column.vc_column_container.vc_col-sm-1 {
    width: 50px;
}
.vc_icon_element.vc_icon_element-outer.iconPlus .vc_icon_element-inner.vc_icon_element-size-xs.vc_icon_element-have-style-inner{    
	height: 1.5em !important;
    width: 1.5em !important;}
.iconPlus span.vc_icon_element-icon.fa.fa-solid.fa-plus { font-size: 0.7em !important;}

/****** filtros ******/
ul.vc_grid-filter{margin-bottom: 50px;!important}
li.vc_grid-filter-item {
    background: transparent;
    color: #7D90A3;
    border: 1px solid #7D90A3;
    padding: 10px 15px !important;
    text-transform: capitalize;
}
.vc_grid-filter>.vc_grid-filter-item.vc_active>span, .vc_grid-filter>.vc_grid-filter-item:hover>span {
    color: #fff !important;
}
.vc_grid-filter.vc_grid-filter-color-white>.vc_grid-filter-item.vc_active, .vc_grid-filter.vc_grid-filter-color-white>.vc_grid-filter-item:hover{
	    background: #7D90A3 !important;
}

.projectList .vc_custom_1419329305433 {
    background-color: rgba(125, 144, 163, 0.70) !important;
}
/******* Services ********/
.btnDetails a{
	background:transparent !important;
	border:0 !important;
	font-size: 18px !important;
    padding-left: 0 !important;
	font-weight:500;
}
.titleService h3 a{
	text-decoration:none;
	color: #585858;
}

/********* Blog **********/
.blogList a.vc_general.vc_btn3.vc_btn3-size-md.vc_btn3-shape-rounded.vc_btn3-style-flat.vc_btn3-color-juicy-pink {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    border-bottom: 1px solid #7D90A3 !important;
	background:transparent;
	color:#333;
}
.blogList .vc_custom_1419240516480 {
    background-color: transparent !important;
}
.blogList .vc_custom_1419240516480 h4{ font-weight:600;}


/******** Form Contact ********/
input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea
{ border-radius:20px; width: 100%; font-size: 14px;}
form p {margin-bottom: 1em;}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    width: 100%;
    border-radius: 20px;
	font-size: 16px;
    text-transform: uppercase;
}
button.button-style{
	box-shadow: 1px 4px 36px 0px #0000001C;
	color:#fff;
    background: #7D90A3;
	border-radius:50px;
	padding: 10px 50px;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
}

/******* Animacion card servicios ********/
.boxService {
  transition: all 0.3s ease;
  border-radius: 10px;
}

.boxService:hover {
  transform: translateY(-8px);
} 
.boxService .vc_icon_element{
  transition: transform 0.3s ease;
}

.boxService:hover .vc_icon_element {
  transform: scale(1.2) translatex(60%);
}
.boxService button {
  position: relative;
  text-decoration: none;
}

.boxService button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 1px;
  background: #7D90A3;
  transition: width 0.3s ease;
}

.boxService:hover button::after {
  width: 100%;
} */

/* ─── ESTRUCTURA ─────────────────────────── */
.letters-vertical {
  width: 5%;
}

.text-vertical {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
/*   transform-origin: top right; */
}

/* ─── ANIMACIONES ────────────────────────── */
.letters-vertical {
  animation: moveL 4s ease-in-out forwards;
  animation-delay: 2s;
}

.text-vertical {
  animation: rotateText 4s ease-in-out forwards;
  animation-delay: 2s;
}

/* ─── KEYFRAMES ──────────────────────────── */

/* mueve el contenedor en forma de L */
@keyframes moveL {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(0, -170px); }        /* baja */
  50%  { transform: translate(0, -170px); }        /* pausa abajo */
  65%  { transform: translate(170px, -170px); }    /* se desplaza a la derecha */
  70%  { transform: translate(170px, -170px); }    /* pausa lateral */
  100% { transform: translate(0, 0); }           /* vuelve */
}

/* rota el texto sincronizado con el movimiento lateral */
@keyframes rotateText {
  0%   { transform: rotate(180deg); }   /* vertical, estado inicial */
  30%  { transform: rotate(180deg); }   /* sigue vertical mientras baja */
  50%  { transform: rotate(270deg); }    /* gira a horizontal al moverse lateral */
  80%  { transform: rotate(270deg); }    /* pausa horizontal */
  100% { transform: rotate(180deg); }  /* vuelve a vertical */
}