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


/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
INCLUDES
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

/****************************************************************************
* ***************************************************************************
MENU
* ***************************************************************************
****************************************************************************/

.mobile-menu,
.mobile-menu-change {
	display: none;
}

.main-menu {
	width: 100%;
	z-index: 100;
	position: sticky;
	top: 32px;
}

.main-menu-in {
	background-color: var(--grey-color-800);
	border: 1px solid var(--grey-color-700);
	padding: 16px 40px;
	display: flex;
	justify-content: center;
	gap: 40px;
	width: fit-content;
}

.main-menu-in a.body-sm {
	color: var(--grey-color-500);
	font-weight: 500 !important;
}

.main-menu-in a.body-sm:hover,
.main-menu-in a.body-sm.selected {
	color: var(--grey-color-100);
}

.main-menu-in a.body-sm.disabled,
.mobile-menu-change a.disabled {
	text-decoration: line-through;
	opacity: 0.4;
	pointer-events: none;
}

/****************************************************************************
* ***************************************************************************
QUOTES
* ***************************************************************************
****************************************************************************/

.quote-2,
.quote-3,
.quote-4,
.quote-5 {
	display: none;
}


.quotes-in {
	padding: 64px 24px;
	width: 100%;
	text-align: center;
}

.quotes-in p {
	color: var(--grey-color-100);
	margin: 32px 0px 24px;
}

.quotes-in span {
	color: var(--grey-color-500);
}

.quotes-in .quotes-dots {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.quotes-in .quotes-dots .dot-each {
	width: 32px;
	height: 4px;
	border-radius: 4px;
	background-color: var(--grey-color-800);
}

.quotes-in .quotes-dots .dot-each.selected {
	background-color: var(--primary-color-500);
}


/****************************************************************************
* ***************************************************************************
FOOTER
* ***************************************************************************
****************************************************************************/

footer {
	width: 100%;
	margin-top: 80px;
	margin-bottom: 32px;
}

footer .footer-in {
	background-color: var(--grey-color-800);
	padding: 16px 40px;
	display: flex;
	justify-content: center;
	gap: 40px;
	width: fit-content;
	border-radius: 80px;
}

footer a, footer p,
.contact-row a, .contact-row p {
	color: var(--grey-color-500);
}

footer a:hover,
.contact-row a:hover {
	color: var(--grey-color-100);
}






/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
INDEX
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/


/****************************************************************************
* ***************************************************************************
HEADER
* ***************************************************************************
****************************************************************************/

header.index-header {
	padding: 204px 24px 194px;
}


header.index-header h1 {
	text-align: center;
	color: var(--grey-color-100);
	margin-bottom: 32px;
	max-width: 1200px;
}

header.index-header h2 {
	text-align: center;
	max-width: 1200px;
	background: linear-gradient(45deg, var(--primary-color-500), var(--primary-color-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
}


/****************************************************************************
* ***************************************************************************
SERVICIOS
* ***************************************************************************
****************************************************************************/

.services-box-container {
	display: flex;
	flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

/*******************
EACH BOX
*******************/

.services-box-container .services-each {
	width: calc(50% - 12px);
	background-color: var(--grey-color-800);
	border: 1px solid var(--grey-color-700);
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/** Top **/



.services-box-container .services-each div.icon {
	width: 52px;
	height:  52px;
	background: linear-gradient(135deg, var(--primary-color-500), var(--primary-color-pink));
	padding: 12px;
	margin-bottom: 32px;
}

.services-box-container .services-each div.icon img {
	width: 28px;
}

.services-box-container .services-each .services-top h3 {
	color: var(--grey-color-100);
	margin-bottom: 16px;
}

.services-box-container .services-each .services-top p {
	color: var(--grey-color-500);
	margin-bottom: 32px;
}

/** Bottom **/

.services-box-container .services-each .services-bottom {
	background-color: var(--primary-color-900);
	padding: 12px 16px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.services-box-container .services-each .services-bottom img {
	width: 24px;
}

.services-box-container .services-each .services-bottom p {
	color: var(--primary-color-400);
}


/****************************************************************************
* ***************************************************************************
WORKS
* ***************************************************************************
****************************************************************************/

.works-box-container {
	display: flex;
	flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.works-box-container .works-each-out {
	width: calc(50% - 12px);
	padding-top: 45%;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--grey-color-700);
}

.works-box-container .works-each-in {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.works-box-container .works-each-in.works-home-1 {
  background-image: url('../img/home/works-1.png');
}

.works-box-container .works-each-in.works-home-2 {
  background-image: url('../img/home/works-2.png');
}

/** Texto y capa en reposo **/

.works-box-container .works-each-in .container-normal {
	background-color: rgba(4,10,28, 0.9);
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 32px;
}

.works-box-container .works-each-in .container-normal h4.header-6 {
	color: var(--grey-color-100);
}

.works-box-container .works-each-in .container-normal p.body-md {
	color: var(--grey-color-500);
}

/** Benefit **/

.works-box-container .works-each-in .container-beneift {
	background: linear-gradient(135deg, var(--primary-color-500), var(--primary-color-pink));
  position: absolute;
  bottom: 0px;
  padding: 16px;
  right: 24px;
  bottom: 48px;
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.works-box-container .works-each-in .container-beneift img {
	width: 24px;
}

.works-box-container .works-each-in .container-beneift p {
	color: var(--grey-color-100);
}

.works-box-container .works-each-in .container-beneift p.metric {
	text-align: center;
}

/** Hover **/

.works-box-container .works-each-in .container-hover {
	opacity: 0;
	transition: opacity 0.1s ease-in-out;
	background-color: var(--grey-color-800);
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100%;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.works-box-container .works-each-in .container-hover-on {
	opacity: 1;
}

.works-box-container .works-each-in .container-hover > div {
	display: flex;
  flex-direction: column;
  gap: 32px;
}

.works-box-container .works-each-in .container-hover h4 {
	color: var(--grey-color-500);
	margin-bottom: 4px;
}

.works-box-container .works-each-in .container-hover p {
	color: var(--grey-color-100);
}

.works-box-container .works-each-in .container-hover p.comming-soon {
	color: var(--primary-color-500);
	font-style: italic;
}


/****************************************************************************
* ***************************************************************************
LOGOS
* ***************************************************************************
****************************************************************************/


.logos-box-container {
	justify-content: space-between;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.logos-box-container .each-logo {
	background-color: var(--grey-color-800);
	height: auto;
	width: calc(16.66% - 10px);
	padding: 16px 24px;
}

.logos-box-container .each-logo img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 132px;
}


/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
ABOUT
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

/****************************************************************************
* ***************************************************************************
ABOUT - HEADER
* ***************************************************************************
****************************************************************************/

.about-header {
	margin-top: 140px;
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 104px;
}

.about-header figure {
	width: 220px;
	height: 244px;
	overflow: hidden;
	margin-bottom: 12px;
}

/** Photo and contact **/

.about-header .about-photo-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.about-header h1 {
	color: var(--grey-color-100);
	margin-bottom: 4px;
}

.about-header p.born {
	color: var(--grey-color-500);
}

.contact-row {
	display: flex;
	justify-content: center;
	gap: 24px;
}

.about-header h2 {
	color: var(--grey-color-100);
	text-align: center;
	font-weight: 400 !important;
}

/****************************************************************************
* ***************************************************************************
ABOUT - DESIGN
* ***************************************************************************
****************************************************************************/

.about-design {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.about-design .design-each {
	flex: 1;
	background-color: var(--grey-color-800);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/** Title **/

.about-design .design-each .design-each-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.about-design .design-each .design-each-top h2 {
	color: var(--grey-color-100);
	font-weight: 500 !important;
}

/** Body **/

.about-design .design-each .design-each-bottom {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.about-design .design-each .design-each-bottom p {
	color: var(--grey-color-500);
}

/****************************************************************************
* ***************************************************************************
ABOUT - CV
* ***************************************************************************
****************************************************************************/

.about-cv-academic,
.about-cv-product,
.about-cv-others {
	display: none;
}

/** Tabs **/
.about-tabs {
	padding-top: 40px;
	padding-bottom: 16px !important;
	margin-bottom: -56px;
	background-color: var(--grey-color-900);
	position: sticky;
	top: -16px;
	z-index: 9999;
}

.about-cv .cv-tabs,
.services-tabs .services-tabs-in {
	background-color: var(--grey-color-800);
	display: flex;
	gap: 4px;
	padding: 8px;
	width: fit-content;
	margin-bottom: 48px;
}

.about-cv .cv-tabs{
	margin-bottom: 0px;
}

.about-cv .cv-tabs p,
.services-tabs .services-tabs-in p {
	padding: 12px 24px;
	color: var(--grey-color-100);
}

.about-cv .cv-tabs p.selected,
.services-tabs .services-tabs-in p.selected  {
	color: #ffffff;
	background-color: var(--primary-color-pink) !important;
}

.about-cv .cv-tabs p:hover,
.services-tabs .services-tabs-in p:hover {
	cursor: pointer;
	background-color: var(--grey-color-700);
}

/** Content box **/

.cv-content-each {
	width: 100%;
	background-color: var(--grey-color-800);
	padding: 40px;
	display: flex;
	gap: 40px;
	margin-bottom: 16px;
}

/** Company Column **/

.cv-content-each .company-column {
	flex: 1;
}

.cv-content-each .company-column h3 {
	color: var(--grey-color-100);
	margin-bottom: 8px;
}

.cv-content-each .company-column h4,
.cv-content-each .company-column p {
	color: var(--grey-color-500);
	font-weight: 500 !important;
}

.cv-content-each .company-column span {
	display: inline-block;
	background-color: var(--primary-color-800);
	color: var(--primary-color-400);
	margin-top: 16px;
	font-weight: 500 !important;
	padding: 2px 8px;
}

/** Job Column **/

.cv-content-each .job-column {
	flex: 2;
}

.cv-content-each .job-column h5 {
	color: var(--grey-color-100);
	margin-bottom: 32px;
}

.cv-content-each .job-column .benefits {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cv-content-each .job-column .benefits-each {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.cv-content-each .job-column p {
	color: var(--grey-color-500);
}

/** About Others **/
.about-cv-others {
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

.about-cv-others .cv-content-each {
	width: calc(50% - 12px);
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 0px;
}

.about-cv-others .cv-content-each .company-column h3 {
	font-size: 16px !important;
}


/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
SERVICES
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

/****************************************************************************
* ***************************************************************************
SERVICES - HEADER
* ***************************************************************************
****************************************************************************/

header.services-header {
	padding-bottom: 48px;
}

.services-header h2,
.services-header h3 {
	margin-right: auto;
	margin-right: auto;
	max-width: 800px !important;
}

.services-header h3 {
	color: var(--grey-color-500);
	text-align: center;
	margin-top: 24px;
}

/****************************************************************************
* ***************************************************************************
SERVICES - TABS
* ***************************************************************************
****************************************************************************/

/* Mobile */
.main-section.services-tabs-mobile {
	display: none;
}

.services-each-in {
	border-bottom: 1px solid var(--grey-color-700);
	padding-bottom: 72px;
}

.services-each-in-2,
.services-each-in-3,
.services-each-in-4,
.services-each-in-5,
.services-each-in-6 {
	display: none;
}

.services-tabs {
	position: sticky;
	top: -40px;
	background-color: var(--grey-color-900);
	z-index: 9999;
	padding-bottom: 16px;
}

.services-tabs .services-tabs-in {
	margin-bottom: 0px;
}

/****************************************************************************
* ***************************************************************************
SERVICES - CONTENT
* ***************************************************************************
****************************************************************************/

/** Foto **/

.services-each-in .services-header-pic {
	overflow: hidden;
}

.services-each-in .services-header-pic img {
	width: 100%;
}

/** Texto **/

.services-each-in .services-text-container {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: 72px;
	margin-bottom: 40px;
}

.services-each-in .services-text-container .services-text-block {
	display: flex;
	gap: 32px;
}

.services-each-in .services-text-container .services-text-block p {
	flex: 1;
	color: var(--grey-color-500);
}

.services-each-in .services-text-container .services-text-block > div {
	flex: 5;
}

.services-each-in .services-text-container .services-text-block h4 {
	color: var(--grey-color-100);}

.services-each-in .services-text-container .services-text-block h4.header-4 {
	margin-top: -8px;
}

.services-each-in .services-text-container .services-text-block h4.header-5 {
	margin-top: -4px;
	font-weight: 300 !important
}

.services-each-in .services-text-container .services-text-block h5 {
	color: var(--grey-color-500);
	margin-bottom: 12px;
  display: list-item;
  list-style-type: none;
  list-style-position: inside;
}

.services-each-in .services-text-container .services-text-block h5:before {
    content: '•';
    margin-right: 4px;
}

.services-each-in .services-text-container .services-text-block h5 span {
    text-decoration: underline;
}

/** Examples (de momento, no hay) **/

.services-cases {
	display: flex;
	flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.services-cases .services-cases-each {
	width: calc(50% - 12px);
	padding-top: 45%;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--grey-color-700);
}


.services-cases .services-cases-each .services-cases-pic {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

/** HMOBILE **/
.services-cases .services-cases-each-1 {
  background-image: url('../img/services/case-1.png');
}

/** EROSKI **/
.services-cases .services-cases-each-2 {
  background-image: url('../img/services/case-2.png');
}

/** VIDRALA **/
.services-cases .services-cases-each-3 {
  background-image: url('../img/services/case-3.png');
}

/** DANOBAT **/
.services-cases .services-cases-each-4 {
  background-image: url('../img/services/case-4.png');
}


/** Texto y capa en reposo **/

.services-cases .services-cases-each .services-cases-text {
	background-color: rgba(4,10,28, 0.9);
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding: 32px;
}

.services-cases .services-cases-each .services-cases-text h5.header-6 {
	color: var(--grey-color-100);
	margin-bottom: 8px;
}

.services-cases .services-cases-each .services-cases-text p.body-md {
	color: var(--grey-color-500);
}

































/****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************
MOBILE
****************************************************************************
* ***************************************************************************
* ***************************************************************************
****************************************************************************/

@media (max-width: 768px) {


/********************************************
* *******************************************
MENU
* *******************************************
********************************************/

.main-menu {display: none;}

.mobile-menu {
	display: flex;
	width: 100%;
	padding: 36px 32px;
	justify-content: space-between;
}

.mobile-menu p {
	color: var(--grey-color-500);
}

.mobile-menu-btn {
	background-color: var(--grey-color-800);
	padding: 11px 12px 9px;
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 9999;
}

/** Menu Open **/

.mobile-menu-change {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9999;
	height: 100vh;
	width: 100vh;
	background-color: var(--grey-color-900);
}

.mobile-menu-change .menu-items {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 0px 24px 64px;
	height: 100%;
}

.mobile-menu-change .menu-items .menu-items-in {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 24px;
	padding-top: 96px;
}

.mobile-menu-change .menu-items .menu-items-in a {
	color: var(--grey-color-100);	
}

.mobile-menu-change .menu-items .contact {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 20px;
}

.mobile-menu-change .menu-items .contact a {
	color: var(--grey-color-500);	
}



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

header.index-header {
	padding: 104px 24px 108px;
}

/********************************************
* *******************************************
HOME - CAROUSEL
* *******************************************
********************************************/

.gallery-container {
	overflow-x: hidden;
}

/********************************************
* *******************************************
HOME - SERVICES
* *******************************************
********************************************/

.services-box-container {
	flex-wrap: nowrap;
	gap: 16px;
  justify-content: flex-start;
  overflow-x: scroll;
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
}

/*******************
EACH BOX
*******************/

.services-box-container .services-each {
	width: 90%;
  padding: 24px;
  flex-shrink: 0;
}

.services-box-container .services-each .services-bottom {
	flex-direction: column;
}

/********************************************
* *******************************************
HOME - WORK
* *******************************************
********************************************/

.works-box-container {
	flex-direction: column;
  gap: 16px;
}

.works-box-container .works-each-out {
	width: 100%;
	padding-top: 132%;
}

/** Texto y capa en reposo **/

.works-box-container .works-each-in .container-normal {
  padding: 16px;
}

/** Benefit **/

.works-box-container .works-each-in .container-beneift {
  padding: 8px;
  right: 8px;
  top: 8px;
  width: 104px;
  height: 104px;
}


/** Hover **/

.works-box-container .works-each-in .container-hover {
  padding: 24px;
  gap: 40px;
  overflow-y: scroll;
}

.works-box-container .works-each-in .container-hover > div {
  gap: 24px;
}

/********************************************
* *******************************************
HOME - LOGOS
* *******************************************
********************************************/

.logos-box-container {
	justify-content: space-between;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.logos-box-container .each-logo {
	width: calc(33.33% - 4px);
	padding: 8px 12px;
}

/********************************************
* *******************************************
QUOTES
* *******************************************
********************************************/

.quotes-in {
    padding: 40px 24px;
}

/********************************************
* *******************************************
FOOTER
* *******************************************
********************************************/

footer {
	margin-top: 56px;
	margin-bottom: 24px;
	padding-left: 24px;
	padding-right: 24px;
}

footer .footer-in {
	border-radius: 8px;
	padding: 24px;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	align-items: center;
}

/********************************************
* *******************************************
ABOUT - HEADER
* *******************************************
********************************************/

.about-header {
	margin-top: 80px;
	margin-bottom: 48px;
	gap: 72px;
}

.about-header figure {
	width: 196px;
	height: 220px;
}

/** Photo and contact **/

.contact-row {
	flex-direction: column;
	gap: 4px;
}

/********************************************
* *******************************************
ABOUT - DESIGN
* *******************************************
********************************************/


.about-design {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 12px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 24px;
  overflow-x: scroll;
  margin-bottom: 24px;
  padding-top: 24px;
}

.about-design .design-each {
  width: calc(100% - 24px);
  padding: 24px;
  flex: initial;
  flex-shrink: 0;
  padding: 24px !important;
  gap: 24px;

}

/********************************************
* *******************************************
ABOUT - CV
* *******************************************
********************************************/

/** Tabs **/

.about-cv .cv-tabs {
	gap: 0px;
	padding: 4px;
	margin-bottom: 32px;
}

.about-cv .cv-tabs p {
	padding: 8px 20px;
}

/** Content box **/

.cv-content-each {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/** Company Column **/

.cv-content-each .company-column {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--grey-color-700);
}

/** About Others **/
.about-cv-others {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
}

.about-cv-others .cv-content-each {
	width: 100%;
}

/********************************************
* *******************************************
SERVICES - HEADER
* *******************************************
********************************************/

header.services-header {
	padding-top: 64px !important;
	padding-bottom: 16px;
}

.services-header h1 {
	display: none;
}

/****************************************************************************
* ***************************************************************************
SERVICES - TABS
* ***************************************************************************
****************************************************************************/

.main-section.services-tabs {
	display: none;
}

.main-section.services-tabs-mobile {
	display: block;
	padding-bottom: 0px;
	/*
	z-index: 10000;
	position: sticky;
	top: -24px;
	*/
}

/** Out, selected **/

.main-section.services-tabs-mobile p.selected {
	padding: 16px 32px 16px 24px;
	background-color: var(--primary-color-pink);
	color: #ffffff;
	font-weight: 600 !important;
	background-image: url("../img/icons/icon-chevron-down.svg");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 32px;
}

.main-section.services-tabs-mobile p.selected.opened {
	background-image: url("../img/icons/icon-chevron-up.svg");
}

/** Desplegable **/

.services-tabs-mobile .drop-down-menu-in {
	background-color: var(--grey-color-800);
	margin-top: 4px;
	padding: 8px 4px 4px;
	display: flex;
	flex-direction: column;
	display: none;
}

.services-tabs-mobile .drop-down-menu-in p {
	padding: 12px 24px;
	margin-bottom: 4px;
	color: var(--grey-color-100);
	background-color: var(--grey-color-700);
}



/****************************************************************************
* ***************************************************************************
SERVICES - CONTENT
* ***************************************************************************
****************************************************************************/

.main-section.services-tabs {
	display: none;
}

/** Texto **/

.services-each-in .services-text-container {
	margin-top: 32px;
	margin-bottom: 0px;
}

.services-each-in .services-text-container .services-text-block {
	flex-direction: column;
	gap: 8px;
}

.services-each-in .services-text-container .services-text-block h4.header-4,
.services-each-in .services-text-container .services-text-block h4.header-5 {
	margin-top: 0px;
}







} /** close mobile */