@charset "UTF-8";
/* CSS Document */

* {color: white; scroll-margin-top: 80px;}
html {scroll-behavior: smooth;}
body {background: var(--dark); overflow-x: hidden}

.titulo1 {font-size: var(--hero); color: var(--white); font-family: var(--titulo) }
.titulo2 {font-size: var(--title); color: var(--white); font-family: var(--titulo) }
.titulo3 /*color negro*/ {font-size: var(--title); color: var(--dark); font-family: var(--titulo); border: 0px solid orange; margin: 0}
.parrafo {font-size: var(--paragraph); color: var(--white); font-family: var(--parrafo)}
.parrafo2 /*color negro*/{font-size: var(--paragraph); color: var(--dark); font-family: var(--parrafo); border: 0px solid orange; margin: 0; }

.parrafo,  .parrafo2 {text-align: justify}


.red-color {color: var(--red)}
/* Customizing the mark tag */
mark.custom-highlight { background-color: var(--dark); color: var(--red);padding: 5px}
#questionmark {margin: 0 0 10px 0}

ul li ,ul li a {text-decoration: none; list-style-type: none;}

.parrafo2 a {text-decoration: underline; color: var(--dark)}

.image-grid a {color: var(--dark); font-size: var(--disclaimer)}

.flex-column {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:10px}
.flex-row {display: flex; flex-direction: row; justify-content: center; align-items: center; ; padding: 30px; border: 0px solid red}
@media (max-width:768px) { }
.half {width: 50%; margin: 0; border: 0px solid blue;}
.width-fit {width: 90%; margin: 0 auto}
.border-building {border: 0px solid blue;}

.btn-xbit2 {
  /* Layout: Button grows with text */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: var(--btn-padding);
  margin: 5px;
  z-index: 1;
	
  /* Styling */
  background: var(--red);
  border: 0px solid var(--red); /* Faint base border */
  border-radius: var(--btn-radius);
  color: var(--white);
  font-family: var(--titulo) , sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  overflow: hidden; /* Clips the sliding text */
  transition: transform 0.3s ease-in-out;
}

.btn-xbit2:hover {background: var(--nl-red); transform: scale(1.05)}

.container-hero {
	background-color: var(--dark);
}

.img-hero, .img-hero2, .img-hero3, .img-hero4 {
	width: 100%;
	height: 200px;
	background-size: cover;
	object-fit: cover;
	background-position: center;
	opacity: 0.3;
}

.img-hero {background-image: url("../media/bg-interactivo.jpg");}
.img-hero2 {background-image: url("../media/bg-mkt.jpg");}
.img-hero3 {background-image: url("../media/bg-tecnologia.jpg");}
.img-hero4 {background-image: url("../media/bg-culture.jpg");}

.header-services {
	width: 100%;
	min-height: 400px;
	padding: 60px 10%;
	background: #2A7B9B;
	background: -webkit-linear-gradient(0deg, rgba(42, 123, 155, 1) 0%, rgba(255, 0, 0, 1) 100%);
	background: -moz-linear-gradient(0deg, rgba(42, 123, 155, 1) 0%, rgba(255, 0, 0, 1) 100%);
	background: linear-gradient(0deg, rgba(42, 123, 155, 1) 0%, rgba(255, 0, 0, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2A7B9B", endColorstr="#FF0000", GradientType=0);
}

.header-services ul {font-family: var(--titulo)}
.header-services ul li {transition: transform 0.3s ease-in-out;}
.header-services ul li:hover{transform: scale(1.05);} 


/* Google icons*/

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  
  /* You can also use standard CSS for size and color */
  color: var(--white);
  font-size: inherit;
  gap: 10px;
  margin: 5px;
}

.values {
	font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);;
}

.material-symbols-outlined:hover {animation: smooth-shake 1s ease-in-out;}
.service-section {background-color: var(--white); color: var(--dark); min-height: 800px; padding: 30px; width: 100%}
.video-service {height: auto; width: 600px; background-color: var(--dark); margin: 0 20px}
.cifras-clave {margin: 20px 0}

.image-grid { display: grid; 
  /* Automatically adjusts number of columns */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; /* Adds space between images */
  padding: 15px;
}

.image-item img {
  width: 100%;
  height: 200px; /* Set a fixed height for uniformity */
  object-fit: cover; /* Crops image to fit without distortion */
  border-radius: 8px;
  display: block;
}

.cta-section {margin: 30px 0}

/* SERVICE BLOCKS (alternating image/text) */
.service-block {
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 30px;
}

.service-block.reverse {
	flex-direction: row-reverse;
}

.service-image {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	min-height: 220px;
	overflow: hidden;
	border-radius: 12px;
	/*background: linear-gradient(135deg, var(--dark) 0%, var(--red) 100%);*/
}

.service-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.service-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 15px;
}

.service-copy .titulo3 {margin: 0}


/*Shake animation*/
@keyframes smooth-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(5px); }
  50% { transform: translateY(-5px); }
  75% { transform: translateX(5px); }
  100% { transform: translateY(0); }
}

/*Rotation animation*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* RESPONSIVE */


@media (max-width:1366px) {
	.service-section {padding: 10px}
	.service-section div {width: 95%; margin: 0 auto}
	.video-service {min-height: auto; width: 100%; background-color: var(--dark); margin: 0}
	.cifras-clave p {margin: 50px 0; text-align: left}
	.flex-row{flex-direction: column; width: inherit; padding: 5px;}
	.titulo3 {margin: 20px 0 0 0; text-align: left; border: 0px solid blue; width: 100%}
	.service-block, .service-block.reverse {flex-direction: column; padding: 20px 5px; gap: 20px;}
	.service-image {aspect-ratio: 16 / 9; min-height: 180px;}
}