* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style:none;
color: inherit; font-family: "itc-avant-garde-gothic-pro", sans-serif; font-weight: 300; font-style: normal; }

html {
    scroll-behavior:smooth;
}

main, footer{background-color: #000000;}

p, a, li, label, input, textarea, button { font-size: clamp(14px, 1.8vw, 18px); }
h1 { font-size: clamp(32px, 5vw, 70px); line-height: 1.2; margin: 0.5em 0; }
h2 { font-size: clamp(26px, 4vw, 42px); line-height: 1.25; margin: 0.5em 0; }
h3 { font-size: clamp(22px, 3vw, 32px); line-height: 1.3; margin: 0.5em 0; }
h4 { font-size: clamp(18px, 2.5vw, 24px); line-height: 1.35; margin: 0.5em 0; }
h5 { font-size: clamp(16px, 2vw, 20px); line-height: 1.4; margin: 0.5em 0; }
h6 { font-size: clamp(14px, 1.5vw, 18px); line-height: 1.45; margin: 0.5em 0; }
/* ==================================== */
/*             DIV SHADOWS              */
/* ==================================== */

.menu, .headerinformation, .flip span, .footer, .infodiv{
background: rgba(108, 108, 108, 0.15); box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259);
backdrop-filter: blur(4.4px); border: 1px solid rgba(255, 255, 255, 0.31)}


/* ==================================== */
/*               HEADER                 */
/* ==================================== */

header {position: fixed; top: 0; width: 100%; color: white; z-index: 100; background: linear-gradient(180deg, rgba(0, 0, 0, 0.89) 48%, rgba(0, 0, 0, 0.56) 78%, rgba(0, 0, 0, 0) 100%); }

.headerdiv{ display: flex; flex-direction: row; padding: 30px; align-items: center; justify-content: space-between; }

.logo{width: 200px;}

.menu{ padding: 20px 40px; border-radius: 50px; display: flex; flex-direction: row; gap: 30px;};

.menulink{ color: #ffff; }

/* ==================================== */
/*             DROP DOWN PC             */
/* ==================================== */

.dropdown { position: relative; cursor: pointer; }

.dropdown-menu { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); background-color: #000000ee;; backdrop-filter: blur(4.4px);
border: 1px solid rgba(255, 255, 255, 0.31); border-radius: 20px; padding: 10px 0; min-width: 350px; opacity: 0; visibility: hidden; transition: all 0.3s ease;
box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259); list-style: none; margin-top: 10px; z-index: 1000; }

/* Mostrar dropdown cuando tiene clase active */

.dropdown.active .dropdown-menu { opacity: 1; visibility: visible;  margin-top: 0; }

.dropdown-menu li { width: 100%; text-align: center; }

.dropdown-link { color: #ffff; text-decoration: none; display: block; padding: 10px 20px; transition: all 0.3s ease;  }


/* Flecha indicadora */

.dropdown > .menulink::after { content: "▽";  margin-left: 5px; display: inline-block; transition: transform 0.3s ease; }

.dropdown.active > .menulink::after { transform: rotate(180deg); }


/* ==================================== */
/*                HERO                  */
/* ==================================== */

.hero { min-height: 100vh; width: 100%;  background-image: url('/images/Crauntech.webp'); background-size: cover; background-position: center; padding: 20px;
/* ESTO es lo que coloca el texto SOBRE la imagen */
display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; }

.headerinformation{display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 800px; padding: 50px; border-radius: 50px;}

.hero h2 {margin: 0 0 20px 0;}

.hero p {width: 95%; text-align: center;}

.buttons{padding: 50px; display: flex; flex-direction: row; gap: 40px; text-align: center; justify-content: center;}

.btn-primary{ padding: 12px 36px; border-radius: 50px; box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259); backdrop-filter: blur(4.4px);
border: 1px solid rgba(255, 255, 255, 0.31); transition: 0.25s; }

.btn-primary.powerbi{ background-color: #94d106; border-color: rgb(175, 247, 6); color: #000000; font-weight: 400;}
.btn-primary.requestademo{background-color: #212f0180;}

/* ==================================== */
/*               2D SECT                */
/* ==================================== */

.secondsection{position: relative; display: flex; flex-direction: column; padding: 50px 20px; background-color: #000000;  justify-content: center; align-items: center; color: #fff; }

#solutions-title{text-align: center; }

.secondsection::before { content: ''; position: absolute; width: 350px; height: 350px; filter: blur(70px); background-image: linear-gradient(#0a1966, #91d106); opacity: 1;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: rotate 8s linear infinite; z-index: 0;} 

.secondsection > * { position: relative; z-index: 1; }
 
/* ==================================== */
/*                CARDS                */
/* ==================================== */

.cardscontainer{display: flex; flex-direction: row; justify-content: space-around; padding-top:60px; width: 100%; gap: 10px;}

.card{display: flex; flex-direction: column; border-radius: 20px; padding: 30px; gap: 15px; border: 1px solid #91d106; color: #ffff; max-width: 350px; min-height: 400px;
box-shadow: 0 0 25px 3px rgba(145, 209, 6, 0.35); background-color: rgba(0, 0, 0, 1);}

.cardtext{text-align: justify;}

.card.ai, .card.costs{justify-content: space-around;} 

.card.team{ background-image: linear-gradient( rgba(0, 0, 0, 0.2),  rgba(0, 0, 0, 0.2)), url('/images/Expert-Team.webp');background-repeat: no-repeat; background-position: 100% 30%; justify-content: flex-end; gap: 15px;}

.cardtitle.team, .cardtitle.environment{font-weight: 800;}

.card.environment{ gap: 15px; background-image: url('/images/Environement.webp'); background-repeat: no-repeat; background-position: right; justify-content: flex-end; }

.buttoncards{display: flex; justify-content: flex-end; text-align: center;}

.btn-secondary{padding: 12px 30px; border-radius: 50px; box-shadow: inset -6px 5px 53px 5px rgba(255, 255, 255, 0.259); backdrop-filter: blur(4.4px);
border: 1px solid rgba(255, 255, 255, 0.31);  backdrop-filter: blur(4.4px); transition: 0.25s; }

.btn-tertiary{max-width: 40px; max-height: 40px; padding: 15px; border-radius: 100%; border: 2px solid #94d106; display: flex; justify-content: center; align-items: center; transition: 0.25s;  }

.btn-secondary.ai, .btn-secondary.powerbi{background-color: #94d106; color: #000000; font-weight: 400;}

.dotsline { display: block; width: 100%; border-bottom: 10px dotted #94d106;  }

/* ==================================== */
/*          3RD SECT - SLIDER           */
/* ==================================== */

#slider-title{color: #fff; text-align: center;}

.thirdsection { width: 100%; min-height: 550px; display: flex; justify-content: center; align-items: center; flex-direction: column;
padding: 20px; background-color: #000000; position: relative; overflow: hidden; gap: 50px;}


.separator { /* Línea separadora animada */
  width: 800px; height: 2px;
  background: linear-gradient(90deg, transparent, #94d106, #fff, #94d106, transparent);
  animation: moveGradient 2s linear infinite;
}

.container { width: 90%; height: 500px; box-shadow: 0 0 25px 10px rgba(145, 209, 6, 0.35);
border-radius: 20px; position: relative; overflow: hidden;
}
.slide {width: 100%; height: 100%; position: relative; border-radius: 20px;}

/* ==================================== */
/*          ITEMS DEL SLIDER            */

.thirdsection .slide .item { width: 200px; height: 280px; position: absolute; top: 50%; transform: translate(0, -50%);
border-radius: 20px; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.3); background-position: center; background-size: cover; transition: all 0.8s ease; z-index: 1; }

.thirdsection .slide .item:nth-child(1) { top: 0; left: 0; transform: translate(0, 0); width: 100%; height: 100%; border-radius: 20px; z-index: 10; }

.thirdsection .slide .item:nth-child(2) { left: 50%; z-index: 5; }

.thirdsection .slide .item:nth-child(3) { left: calc(50% + 220px); z-index: 4; }

.thirdsection .slide .item:nth-child(4) { left: calc(50% + 440px); z-index: 3; }

.thirdsection .slide .item:nth-child(5) { left: calc(50% + 660px); z-index: 2; }

.thirdsection .slide .item:nth-child(n + 6) { left: calc(50% + 880px); opacity: 0; z-index: 1; }

.content{padding: 20px; border-radius: 30px; background: rgba(0, 0, 0, 0.316); box-shadow: inset -6px 5px 53px 5px rgba(0, 0, 0, 0.259);}

.thirdsection .item .content { position: absolute; top: 50%; left: 100px; max-width: 350px; gap: 20px;
text-align: left; color: #fff; transform: translate(0, -50%);font-family: system-ui, -apple-system, sans-serif; display: none;}

.thirdsection .slide .item:nth-child(1) .content { display: block; }

.thirdsection .content .name { font-size: 40px; text-transform: uppercase; font-weight: bold;
margin-bottom: 10px; opacity: 0;  animation: animate 1s ease-in-out 1 forwards; }

.thirdsection .content .des {font-size: 16px; line-height: 1.5; opacity: 0; animation: animate 1s ease-in-out 0.3s 1 forwards;  text-align: left; }

.thirdsection .content .btn-secondary { animation: animate 1s ease-in-out 0.6s 1 forwards; opacity: 0;  }

.thirdsection .container {
    position: relative;
    height: 500px; /* Ajusta según necesites */
}.thirdsection .container {
    position: relative;
    height: 500px; /* Ajusta según necesites */
}
.caption{font-weight: 400; color: #94d106; transition: transform 0.3s ease; }


.thirdsection .button { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; z-index: 30;  }

.thirdsection .button button { width: clamp(35px, 5vw, 40px); height: clamp(35px, 5vw, 40px); border-radius: 50%; border: none; cursor: pointer;  color: #94d106;  transition: all 0.3s ease; 
display: flex; align-items: center; justify-content: center; }

/* ==================================== */
/*               4D SECT                */
/* ==================================== */

.fourthsection{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; gap: 30px; background-color: #000000; color: #fff;}
.infodiv{ display: flex; flex-direction: column; width: 95%; gap: 15px; padding: 30px; border-radius: 20px; background-color: #425d029a;}
.buttons.a{padding: 10px;}

/* ==================================== */
/*                FOOTER                */
/* ==================================== */

footer{color: #fff; padding: 20px; display: flex; flex-direction: column; text-align: center; gap: 20px; }
.footer{padding: 30px; display: flex; flex-direction: row; justify-content: space-around; border-radius: 50px; text-align: center;}
.subtitlefooter{margin-bottom: 10px;}
.linksfooter{color: #fff;}
.pagelinks.logo{display:flex; flex-direction: column; justify-content: center; align-items: center;}