/* Afegeix els teus estils css aquí */

/* ----Scroll suau --------------------*/
html{
    scroll-behavior:smooth;
}
/*-------------------------------------*/

/* ----Text Blau ----------------------*/
.eq-accent {
  color: #1919FF;
}
/*-------------------------------------*/

/* ----Contenidor amplada -------------*/
.contenidor-ajustat{
    display:inline-flex;
    width:fit-content;
    margin:auto;
}
/*-------------------------------------*/

/* ---- Icon CTA button --------------*/
/* wrapper del botó */
.estq-cta-button .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* CENTRAT REAL */
  gap: 12px;
}

/* icona */
.estq-cta-button .elementor-button-icon {
  display: flex;
  align-items: center;
}

.estq-cta-button .elementor-button-icon svg {
  width: 26px;
  height: 26px;
}
/*-------------------------------------*/

/* ----Home Anima Hero ----------------*/

.estq-hero-inner {
  position: relative;
	overflow: hidden;
}

.estq-hero-text {
  position: relative;
}

.estq-hero-visual {
  position: absolute;
  right: 0;
  bottom: clamp(220px, 40vw, 420px);
  width: min(52vw, 400px);
  z-index: 1;
}

.hero-screen {
  opacity: 0;
  animation: heroScreens 20s infinite;
  transition: opacity 1.5s ease;
}

#image_1 { animation-delay: 0s; }
#image_2 { animation-delay: 5s; }
#image_3 { animation-delay: 10s; }
#image_4 { animation-delay: 15s; }
#image_5 { animation-delay: 20s; }

@keyframes heroScreens {
  0% { opacity: 0; }
  5% { opacity: 1; }
  16% { opacity: 1; }
  21% { opacity: 0; }
  100% { opacity: 0; }
}



/*-------------------------------------*/

/* ----Home - Changing ----------------*/
#estq-changing-word{
  transition: opacity 0.3s ease;
}

.estq-changing-fixed{
  color: #1919FF;
}

.estq-changing-box.is-active {
	background-color: transparent !important;
  box-shadow: 0 0 24px rgba(25,25,255,0.12);
}

.estq-changing-box.is-active h3 {
  font-weight: 600;
}

.estq-changing-box.is-active .elementor-icon {
  opacity: 0.16;
}

.estq-changing-box{
	background-color: transparent !important;
  transition:
    box-shadow 0.5s ease,
    transform 0.5s ease,
    border-color 0.5s ease;
}

.estq-changing-box h3,
.estq-changing-box .elementor-heading-title{
  transition:
    color 0.4s ease,
    font-weight 0.4s ease;
}

.estq-changing-box .elementor-icon{
  opacity: 0.05;
}

.estq-changing-box .elementor-icon,
.estq-changing-box .elementor-widget-icon{
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* ESTAT ACTIU */

.estq-changing-box.is-active{
  box-shadow: 0 0 28px rgba(25,25,255,0.08);
}

.estq-changing-box.is-active .elementor-heading-title{
  font-weight: 600;
}

.estq-changing-box.is-active .elementor-icon{
  opacity: 0.10;
  transform: scale(1.04);
}

/* ---- box [ ] -----*/
.estq-system-box{
  position: relative;
  width: 240px;/*100%;*/
  min-width: 200px;
	
  margin-left: auto;
  margin-right: auto;
	
  padding: 25px;
	
  border-left: 2px solid #1919FF;
  border-right: 2px solid #1919FF;

  background-image:
    linear-gradient(
      to right,
      #1919FF 0%,
      #1919FF 10%,
      transparent 10%,
      transparent 90%,
      #1919FF 90%,
      #1919FF 100%
    ),
    linear-gradient(
      to right,
      #1919FF 0%,
      #1919FF 10%,
      transparent 10%,
      transparent 90%,
      #1919FF 90%,
      #1919FF 100%
    );

  background-size:
    100% 2px,
    100% 2px;

  background-position:
    top left,
    bottom left;

  background-repeat:
    no-repeat,
    no-repeat;
}
/*-------------------------------------*/

/* ---- QIA Path ----------------------*/
.qia-path-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 175px) !important;
  gap: 20px !important;
  justify-content: center !important;
  align-items: stretch !important;
}

.qia-path-grid .qia-path-card {
  width: 175px !important;
}

/* Mòbil / tablet petit */
@media (max-width: 767px) {
  .qia-path-grid > .e-con-inner {
    grid-template-columns: repeat(2, 175px) !important;
    gap: 20px !important;
    justify-content: center !important;
  }
}

/* Mòbils molt estrets */
@media (max-width: 390px) {
  .qia-path-grid > .e-con-inner {
    grid-template-columns: 175px !important;
  }
}

.qia-path-card {
  cursor: pointer;
}

.qia-path-card .qia-card-text,
.qia-path-card .qia-card-icon {
  transition: transform 0.55s ease-in-out, font-size 0.45s ease-in-out;
}

.qia-path-card.is-open .qia-card-text {
  transform: translateY(-170px);
}

.qia-path-card.is-open .qia-card-icon {
  transform: translateY(-21px) scale(0.75);
}
/*-------------------------------------*/

/* ---- Contact Form ------------------*/

.estq-contact-form .wpcf7,
.estq-contact-form .wpcf7-form,
.estq-contact-form .wpcf7-form-control-wrap,
.estq-contact-form input,
.estq-contact-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.estq-contact-form .wpcf7-form > *:last-child {
  margin-bottom: 0;
}

/* inputs */
.estq-contact-form .wpcf7 input,
.estq-contact-form .wpcf7 textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}

/* focus */
.estq-contact-form .wpcf7 input:focus,
.estq-contact-form .wpcf7 textarea:focus {
  outline: none;
  border-color: #1919FF;
}

/* textarea */
.estq-contact-form .wpcf7 textarea {
  min-height: 75px;
  resize: vertical;
}

/* CF7 acceptance */
.estq-contact-form .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

.estq-contact-form .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  color: #555;
  cursor: pointer;
}

.estq-contact-form .wpcf7-acceptance input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 2px 0 0;
	transform: translateY(1px);
  accent-color: #1919FF;
}

.estq-contact-form .wpcf7-acceptance a {
  color: #1919FF;
  text-decoration: underline;
}

/* paragraph around acceptance */
.estq-contact-form .wpcf7-form p:has(.wpcf7-acceptance) {
  margin: 2px 0 8px;
}

/* botó */
.estq-contact-form .wpcf7 input[type="submit"] {
  background: #1919FF;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
}

/* hover */
.estq-contact-form .wpcf7 input[type="submit"]:hover {
  opacity: 0.9;
}

.estq-contact-form .form-note {
  margin-top: -4px;
  font-size: 14px;
  opacity: 0.55;
  text-align: center;
}

.estq-contact-form .wpcf7-not-valid-tip {
  color: #1919FF;
  font-size: 13px;
  margin-top: 4px;
}
/*-------------------------------------*/

/* ---- Expertise offset scroll -------*/
#user-experience,
#editorial-teams,
#technology{
    scroll-margin-top:100px;
}
/*-------------------------------------*/

/* ---- Expertise ---------------------*/
.expertise-tag{
    border-left:1px solid;
	border-right:1px solid;
	border-color: black;
    border-radius:4px;

    color: black;
    background: #E6E8F0;

    padding:4px 6px;
    animation: expertiseTagCycle 14s infinite;
}

/* Retards: un tag cada 2 segons */
.expertise-tag.tag-1{ animation-delay:0s; }
.expertise-tag.tag-2{ animation-delay:2s; }
.expertise-tag.tag-3{ animation-delay:4s; }
.expertise-tag.tag-4{ animation-delay:6s; }
.expertise-tag.tag-5{ animation-delay:8s; }
.expertise-tag.tag-6{ animation-delay:10s; }
.expertise-tag.tag-7{ animation-delay:12s; }

@keyframes expertiseTagCycle{
    0%, 10%{
        border-color:#1919FF;
        color:#1919FF;
        background:white;
    }

    14%, 100%{
        border-color:black;
        color:black;
        background:#E6E8F0;
    }
}
/*-------------------------------------*/

/* ---- User section ------------------*/

.ux-pattern-section{
    position:relative;
    overflow:hidden;
    background:#F7F8FC;
    /*min-height:400px;*/
}

.ux-pattern-section > *{
    position:relative;
    z-index:2;
}

.ux-user-icon{
    position:absolute;
    width:60px;
    height:60px;
    z-index:1;
    pointer-events:none;
    opacity:0;
    color: #DDDDFF;/*white;*/
    animation: uxUserPulse 3.2s ease-in-out forwards;
}

.ux-user-icon svg{
    width:100%;
    height:100%;
    display:block;
}

@keyframes uxUserPulse{
    0%{
        opacity:0;
        transform:scale(.85);
    }

    25%{
        opacity:.85;
        transform:scale(1);
    }

    65%{
        opacity:.85;
        transform:scale(1);
    }

    100%{
        opacity:0;
        transform:scale(.9);
    }
}
/*-------------------------------------*/

/* ---- Ticker ------------------------*/

.backoffice-ticker{
    overflow:hidden;
    position:relative;
    width:100%;
}

.backoffice-ticker::before,
.backoffice-ticker::after{
    content:"";
    position:absolute;
    top:0;
    width:80px;
    height:100%;
    z-index:10;
    pointer-events:none;
}

.backoffice-ticker::before{
    left:0;

    background:linear-gradient(
        to right,
        #F7F8FC 0%,
        rgba(247,248,252,1) 40%,
        rgba(247,248,252,0) 100%
    );
}

.backoffice-ticker::after{
    right:0;

    background:linear-gradient(
        to left,
        #F7F8FC 0%,
        rgba(247,248,252,1) 40%,
        rgba(247,248,252,0) 100%
    );
}

.backoffice-ticker .e-con-inner,
.backoffice-ticker.e-con-full{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    width:max-content !important;
    gap:70px;
    animation:backofficeTickerLeft 35s linear infinite;
}

.backoffice-ticker-reverse.e-con-full,
.backoffice-ticker-reverse .e-con-inner{
    animation:backofficeTickerRight 35s linear infinite !important;
}

.backoffice-ticker .elementor-widget-icon-box{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
}

.backoffice-ticker .elementor-icon-box-wrapper{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px;
    white-space:nowrap !important;
}

.backoffice-ticker .elementor-icon-box-content,
.backoffice-ticker .elementor-icon-box-description{
    white-space:nowrap !important;
}

@keyframes backofficeTickerLeft{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
}

@keyframes backofficeTickerRight{
    from{ transform:translateX(-50%); }
    to{ transform:translateX(0); }
}

@media (max-width:767px){
    .backoffice-ticker .e-con-inner,
    .backoffice-ticker.e-con-full{
        gap:40px;
        animation-duration:28s;
    }
}

/*-------------------------------------*/

/* ---- Tecnology rotator -------------*/
.technology-rotator{
    position:relative;
    min-height:50px;
}

.technology-rotator .tech-item{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;
    animation: techFadeCycle 32s infinite;
}

/* 8 items x 2s = 16s */
.technology-rotator .tech-1{ animation-delay:0s; }
.technology-rotator .tech-2{ animation-delay:4s; }
.technology-rotator .tech-3{ animation-delay:8s; }
.technology-rotator .tech-4{ animation-delay:12s; }
.technology-rotator .tech-5{ animation-delay:16s; }
.technology-rotator .tech-6{ animation-delay:20s; }
.technology-rotator .tech-7{ animation-delay:24s; }
.technology-rotator .tech-8{ animation-delay:28s; }

@keyframes techFadeCycle{

    0%{
        opacity:0;
    }

    5%{
        opacity:1;
    }

    15%{
        opacity:1;
    }

    20%{
        opacity:0;
    }

    100%{
        opacity:0;
    }
}
/*-------------------------------------*/