@import url('./tokens.css');
*
{
	margin:0px;
	padding:0px;
}
body
{
  padding-right: 0px;
  
}


/*---------------------------------- CABECERA-------------------*/


.case_study
{
	background-color: var(--colorfondotarjeta);
	padding: 96px 96px 24px 96px;
	justify-content: center;
	
}
.case_study h2
{
	margin:0 auto;
	align-content: center;
}
.goals
{
	display:flex;
	flex-direction: row;
	text-align: left;
	padding-top:48px;
	width: 70%;
	margin:0 auto;
	
}
.goals h4
{
 	font-size: 1em;
	color:var(--colorgrisoscuro);
	font-weight: 300;
	line-height: 0.3em;
}
.goals h3
{
	margin-top:8px;
	margin-bottom: 24px;
	font-weight: 400;
}
.goals ul li
{
	list-style-type: none; 
	line-height: 1.6em;
}
.goals ul li span
{
	color:var(--color_verde);
	font-size:0.6em;
}
.goals .goals1
{

flex-grow: 6;

}
.goals .goals2
{

	flex-grow: 1;
	padding-left:24px;
}


/* --------- HEADER CASE STUDY ---------------------*/
.header-case
{
     display: flex;
    flex-direction: row;
    justify-content: center;
    color: var(--primary-100);
    width: 100%;
    max-width: var(--container-2xl);
    margin:0 auto;
}
.header-case-2
{
	 background-color: #E7E4FF;
}
.header-case-3
{
	 background-color: #E5F1FF; 
}

/*++++++++++++++++++++++++++++++++ IMPACT ************************/
#impact .subtitle
{
    margin:0 auto;
    text-align: center;
    font-size: (--10base)!important;
}

#impact .impact-container .KPI-container
{
    padding:24px;
}
#impact h1
{
    text-align: center;
    font-size: var(--base-64);
    font-weight: var(--weight-regular);
    color:white;
    margin-bottom: var(--base-4);
    font-family: var(--type-header);
    text-align: left;    
}
#impact .impact-container
{
    align-items: left;
}

#impact h2, #impact p
{
    color:white;
}
#impact .KPI-container
{
    display:flex;
    justify-content: space-around;
}
#impact .subtitle
{
    font-size: (--10base)!important;
}
#impact h1
    {
        font-size: var(--base-40);
    }
#impact .impact-block h1
{
    font-size: var(--base-88);   
}
#impact .impact-block h2
{
    font-size: var(--base-14);   
}  
/*---------------------------------- Desarrollo Caso -------------------*/
#desarrollo_caso
{
}
.fondo_caso, .fondo_caso2, .fondo_caso3
{
	
	height: 100vh;
	object-fit: cover;
	background-size: cover;
}
.fondo_caso
{
	background-image: url(../img/ux-tecteco.jpg);
}
.fondo_caso2
{
	background-image: url(../img/ux-adbibo.jpg);
}
.fondo_caso3
{
	background-image: url(../img/ui-karraskan.jpg);
}
#ux ul
{
	list-style: none;
	text-align: left;
	padding-bottom: 48px;
}
#ux ul li span {
    color: var(--color_verde);
    font-size: 1.6em;
}
#ux ul li
{
    font-size: 1.4em;

}

/* --------- PHOTOS CASE 1  ---------------------*/
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-1
{
    background-image:url("../img/case-1.5.png");
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-2
{
    background-image:url("../img/case-1.6.png");
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-3
{
    background-image:url("../img/case-1.7.png");
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-4
{
    background-image:url("../img/case-1.8.jpg");
    background-position:center;
    order:2;
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-5
{
    background-image:url("../img/case-1.9.jpg");
 
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-6
{
    background-image:url("../img/case-1.10.jpg");
    order:2;
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-7
{
    background-image:url("../img/case-1.11.jpg");
}


#grid-2-container .grid-2-columns-rectangle .photo-vertical-1
{
background-image:url("../img/case-1.1.jpg");
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-2
{
background-image:url("../img/case-1.2.jpg");
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-3
{
background-image:url("../img/case-1.3.png");
background-position: center;

}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-4
{
background-image:url("../img/case-1.4.png");
background-position: center;
}
/* --------- PHOTOS CASE 2  ---------------------*/
#grid-2-container .grid-2-columns-rectangle .photo-vertical-2-1
{
background-image:url("../img/case-2.1.jpg");
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-2-2
{
background-image:url("../img/case-2.2.jpg");
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-2-3
{
background-image:url("../img/case-2.3.jpg");
background-position: center;
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-2-4
{
background-image:url("../img/case-2.4.jpg");
background-position: center;
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-2-5
{
    background-image:url("../img/case-2.5.png");
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-2-6
{
    background-image:url("../img/case-2.6.jpg");
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-2-7
{
    background-image:url("../img/case-2.7.png");
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-2-8
{
    background-image:url("../img/case-2.8.jpg");
     order:2;
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-2-9
{
    background-image:url("../img/case-2.9.jpg");
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-2-10
{
    background-image:url("../img/case-2.10.jpg");
      order:2;
}
/* --------- PHOTOS CASE 3  ---------------------*/
#grid-2-container .grid-2-columns-rectangle .photo-vertical-3-1
{
background-image:url("../img/case-3.1.jpg");
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-3-2
{
background-image:url("../img/case-3.2.jpg");
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-3-3
{
background-image:url("../img/case-3.3.jpg");
background-position: center;
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical-3-4
{
background-image:url("../img/case-3.4.jpg");
background-position: center;
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-3-5
{
    background-image:url("../img/case-3.5.jpg");
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-3-6
{
    background-image:url("../img/case-3.6.jpg");
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal-3-7
{
    background-image:url("../img/case-3.7.jpg");
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-3-8
{
    background-image:url("../img/case-3.8.jpg");
     order:2;
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-3-9
{
    background-image:url("../img/case-3.9.jpg");
}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal-3-10
{
    background-image:url("../img/case-3.10.jpg");
      order:2;
}
#section-horizontal-card-3 .horizontal-card-container .horizontal-card .photo-horizontal-4-1
{
    background-image:url("../img/manifesto-1.gif");
  order:2;
}
#section-horizontal-card-3 .horizontal-card-container .horizontal-card .photo-horizontal-4-2
{
    background-image:url("../img/manifesto-2.gif");
      order:1;
}
#section-horizontal-card-3 .horizontal-card-container .horizontal-card .photo-horizontal-4-3
{
    background-image:url("../img/manifesto-3.gif");
      order:2;
}
#section-horizontal-card-3 .horizontal-card-container .horizontal-card .photo-horizontal-4-4
{
    background-image:url("../img/manifesto-4.gif");
      order:1;
}
/*************  PROJECT ***********************************************************************/

/* --------- SECTION RESEARCH  ---------------------*/
#section-horizontal-card, #section-horizontal-card-2, #section-horizontal-card-3
{
  display:flex;
    flex-direction: column;
     justify-content: center;
    width: 100%;
    align-items: center;
    padding-top:var(--base-180);
    padding-bottom:var(--base-180);
}
  
#section-horizontal-card .horizontal-card-container, #section-horizontal-card-2 .horizontal-card-container
{
    max-width: 1539px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: space-around;
    gap:24px;
}
/*+++++ SECTION HORIZONTAL CARD 3 **********/
#section-horizontal-card-3 .horizontal-card-container
{
    display:flex;
    flex-direction: column;
    gap:24px;
}
.header-case
{
   max-width: 100%;
    margin:0 auto;
}
#section-horizontal-card-3 .horizontal-card-container .horizontal-card
{
gap:var(--base-88);
display: flex;
flex-direction:row;
align-self: center;
}
#section-horizontal-card-3 .horizontal-card-container .horizontal-card .photo-horizontal
{
    width: 640px;
    height: 640px;
    border-radius:16px;
    background-repeat: no-repeat;
    background-size:cover;
}
#section-horizontal-card-3 h1
{
    font-family: var(--type-header);
    font-weight: var(--weight-medium);
    font-size:var(--base-128);
    color:var(--primary-100);
    width: 1292px;
}

/*********** FIN HORIZONTAL CARD 3 *****/

#section-horizontal-card-2 .horizontal-card-container
{
    gap:48px;
}
#section-horizontal-card .horizontal-card-container .horizontal-card, #section-horizontal-card-2 .horizontal-card-container .horizontal-card
{
gap:var(--base-88);
display: flex;
flex-direction:row;
}
#section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal, #section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal
{
    width: 814px;
    height: 475px;
    border-radius:16px;
    background-repeat: no-repeat;
    background-size:cover;
}
#Section-arquitectura
{
    background-color: var(--neutral-10);
    padding-bottom:0px;
}
#section-horizontal-card h1, #section-horizontal-card-2 h1
{
    margin:0 auto;

    font-family: var(--type-header);
    font-weight: var(--weight-regular);
    font-size:var(--base-64);
    padding-bottom: var(--base-40);
    color:var(--neutral-80);
}
#section-horizontal-card-2 h1
{
text-align: right;
float:right;
padding-right:6%;
}
#Section-arquitectura h1,#casos-exito h1, #UI-showcase h1, #learnings h1,#grid-3x2 h1, #shop h1, #clientes h1, .testimonios h1, #footer-v2 h1, #about h1, #grid-3 h1
{
    font-size: var(--base-64);
    padding-bottom: 24px;
    font-weight: var(--weight-medium);
    color:var(--neutral-80);
    font-family: var(--type-header);
}
#clientes h1, #clientes p
{
    color:var(--primary-100);
}
#about h1
{
    color:var(--primary-100);
}
#section-horizontal-card .paragraph, #Section-arquitectura p,#section-horizontal-card-2 .paragraph,#learnings .paragraph,#grid-3 .paragraph,#grid-3x2 .paragraph, #impact .paragraph, #section-horizontal-card-3 .paragraph 
{
    width: 100%;
    max-width: 672px;
    font-family: var(--type-body);
    font-size: var(--base-18);
    line-height: 166%;
    padding-bottom: var(--base-16);
    align-content: baseline;
    
}

#section-horizontal-card .paragraph
{
    align-content: center;
}
#section-horizontal-card-2 .paragraph, #section-horizontal-card-3 .paragraph
{
        align-content: center;
    order:1;
}
#section-horizontal-card .paragraph p, #section-horizontal-card-2 .paragraph p
{
    line-height: 180%;
}
#Section-arquitectura p
{
    padding-bottom: var(--base-64);
}
#learnings .paragraph-L,#impact .paragraph-L, #grid-3x2 .paragraph-L
{
     width: 100%;
    max-width: 548px;
    font-family: var(--type-body);
    font-size: var(--base-16);
    line-height: 1.5em;
    padding-bottom: var(--base-16);
}

/* --------- SECTION ARQUITECTURA  ---------------------*/
#Section-arquitectura .container-arquitectura 
{
display: flex;
padding: 48px 88px;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
margin:0 auto;

}
#Section-arquitectura .container-arquitectura .arquitectura-content
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap:88px;
}
#Section-arquitectura .container-three-layout
{
   
    display:flex;
    flex-direction: column;
    

}
#Section-arquitectura img
{
    width: 100%;
    height: 100%;
    border-radius: 24px;
    max-width: 1440px;

    
}
/*++++++++++ Sucess Case: Section Learnings *++++++++++*++++++++++*++++++++++*++++++++++*/
#learnings, #grid-3, #grid-3x2
{
    display:flex;
    justify-content: center;
   background-color: white;
    padding-top:var(--base-148);
    padding-bottom:var(--base-96);
    padding-left:80px;
    padding-right: 24px;
    
}
#grid-3, #grid-3x2
{
    flex-direction: column;
}
#grid-3 h1, #grid-3x2 h1
{
      width: 100%;
    line-height: 180%;
    margin:0 auto;
}
#grid-3x2 h1
{
    max-width: 1440px;
    width: auto;
}
#grid-3 h1
{
    max-width: 1539px;
}
/* ++++++++++++++++++++++++ IMPACT ********************/
#impact
{ 
    display:flex;
    justify-content: center;
    width: 100%; 
    max-width: var(--container-2xl);
    margin:0 auto;
}
#impact .impact-container
{
    max-width:1539px;
    width: 100%;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: var(--primary-100);
    color:white;
    margin-top:24px;
    border-radius: 16px;
}
#impact .impact-container .impact-title
{
    text-align: left;
    padding:24px;
    font-weight: 300;
}
#impact .impact-block h1
{
    font-size: var(--base-164);
}
#impact .impact-block h1
{
    font-family: var(--type-body);
    
}
#impact .impact-block h1 .special-character
{
    font-size:var(--base-40);
    font-weight: var(--weight-regular);
}
#impact .impact-block h2
{
    font-weight: var(--weight-regular);
    font-family: var(--type-body);
}

/***************** ------------------ *****************/
#grid-2-container
{
     display:flex;
    justify-content: center;
    padding-top:24px; 
}

#grid-2-container .grid-2-columns-rectangle
{
    display:flex;
    gap: 24px;
     justify-content: center;
    max-width: 1539px;
    height: 100%;
    width: 100%;
    
}
#grid-2-container .grid-2-columns-rectangle
{
    height: 600px; 
}
#grid-2-container .grid-2-columns-rectangle .photo-vertical
{
height: 100%;
width:100%;
border-radius: 16px; 
background-repeat: no-repeat;
    background-size:cover;


}
.ux-case
{
	max-width: 1024px;
	margin:0px auto;
	text-align:center;
	padding-bottom: var(--base-128);
}
.header-case
{
    padding:24px 0px;
}
/*---------------------------------- Media query -------------------*/
@media screen and (max-width: 1440px){
    .header-case
    {
        width:100%;
        max-width:var(--container-xl);
    }
}
@media screen and (max-width: 1280px){
    .header-case
    {
        width:90%;
        max-width:90%;
        margin-bottom:var(--space-content-md);
    }
}
@media screen and (max-width: 1024px){
.case_study {
    padding: 96px 24px 24px 24px;

}
#cultura img, ux img
	{
		width: 80%;
	}
}

@media screen and (max-width: 768px){
.goals 
	{
		width: 100%;
	}
}
@media screen and (max-width: 640px){
    #section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal, #section-horizontal-card .horizontal-card-container .horizontal-card .photo-horizontal, #section-horizontal-card-2 .horizontal-card-container .horizontal-card .photo-horizontal 
    {
        width:100%;
    }
#learnings, #grid-3, #grid-3x2
{
    padding:var(--space-content-md) var(--space-content-md);
}
.goals1 h3, .goals2 h3
	{
		font-size:1.4em; 
	}
#section-horizontal-card-2 .horizontal-card-container .horizontal-card, #section-horizontal-card .horizontal-card-container .horizontal-card
{
    flex-direction: column;
}
}
@media screen and (max-width: 480px){

#impact .impact-container
    {
         margin-left:16px;
        margin-right: 16px;
    }
}
@media screen and (max-width: 420px){
.goals
	{
		flex-direction: column; 
	}
.goals .goals2 {
    padding-left: 0px;
}
#cultura img, #ux img {
    width: 100%;
}	
	
}