@charset "UTF-8";
/* CSS Document */
/* TRAX BAUTISTA */
/* 2025 */

body {
	font-size: 16px;
	background-color: #fbfbfb;
	margin: 0;
	font-family:  "Montserrat", serif;
	color: #111;
}

h1 {
	font-size: 2.5rem;
	font-weight: 800;
}
h2 {
	font-size: 2rem;
	font-weight: 700;
}
h3 {
	font-size: 1.75rem;
	font-weight: 600;
}
h4 {
	font-size: 1.5rem;
	font-weight: 500;
}
h5 {
	font-size: 1.25rem;
	font-weight: 500;
}
h6 {
	font-size: 1rem;
	font-weight: 500;
}



:root {
    --cols12: repeat(12, minmax(0, 1fr));
    --cols6: repeat(6, minmax(0, 1fr));
}
@font-face {
	font-family: "Soehne";
	src: url("fonts/SoehneSchmalHalbfett.woff2");	
}
@font-face {
	font-family: "Soehne Div";
	src: url("fonts/SoehneSchmalDreiviertelfett.woff2");
}
@font-face {
	font-family: "Canela";
	src: url("fonts/CanelaCondensed-Light.woff2");
}
@font-face {
	font-family: "Gamay Black";
	src: url("fonts/Gamay-Wide-Black.woff2");
}
@font-face {
	font-family: "Gamay Light";
	src: url("fonts/Gamay-Wide-Light.woff2");
}
.container {
    display: grid;
    grid-template-columns: var(--cols12);
    grid-template-rows: auto 1fr auto;
    grid-gap: 0;
	justify-content: center;
}

.header {
	height: 960px;
	overflow: hidden;
	display: grid;
	grid-template-columns:var(--cols12);
	grid-column: 12 span;
	grid-template-rows: repeat(12, 1fr);
	grid-gap: 5px;
	min-height: 600px;
	padding: 0;
	margin: 0;
	background-image: url("img/BG_head.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.header-top {
	display: grid;
	grid-template-columns:var(--cols12);
	grid-column: 12 span;
	grid-row: 1;
	align-content: center;
		  background: rgba(17, 17, 17, 0.2); /* Fondo semi-transparente */
	backdrop-filter: blur(10px); /* Aplica el desenfoque */
    -webkit-backdrop-filter: blur(10px); /* Compatibilidad con Safari */
	box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); /* Desenfoque en los bordes */
}
.logo {
	grid-column: 2/3;
	grid-row: 1/2;
	justify-content: center;
	align-content: center;
}
.logo img {
	width: 8em;
}
.top-content {
	margin: 0;
	grid-column: 10/12;
	grid-row: 1/2;
	width: 100%;
	height: 80%;
	border-radius: 50em;
    outline: .1em solid #FFF;
	place-items: center;
	align-content: center;
	align-items: center;
}
.top-content h6 {
	margin: 0;
	color: #FFF;
	font-size: .75em;
}
.header_title {
	margin:0;
	grid-column: 1/-1;
	grid-row: 2/5;
	align-content: center;
	align-items: center;
	color: #FFF;
	line-height: 6em;
	border-top: 2px solid #FFF;
	text-align: left; 
}
.header_title h1 {
	font-family: "Gamay Black";
	font-size: 7rem;
	font-weight: 100;
	display: block;
	margin-top: .2em;
	line-height: .8em;
	text-transform: uppercase;
}
.header_button {
	grid-column: span 7;
	grid-column-start: 2;
	grid-column-end: 7;
	grid-row: 3/9;
	color: #FFF;
	text-align: left;
}
.header_button h1 {
	font-family: "Gamay Black";
	font-size: 7em;
	font-weight: 100;
	display: block;
	margin-top: 1em;
	line-height: 1em;
	text-transform: uppercase;
}
.content {
	text-align: center;
	grid-column: 2/-2;
	padding: 0;
	justify-content: center;
}

.section {
    min-height: 500px;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr)); 
    grid-template-rows: repeat(12, minmax(0, 1fr)); 
    grid-column: span 9;
    grid-row: span 10;

}
.services_box {
	width: 100%;
	height: 100%;
	grid-column: 1/4;
	grid-row: 1/-1;
	overflow: hidden;
	place-content: center;

}


.services_box img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 9/16;
	
}

.clients_box {
	grid-column: 4/10;
	grid-row: 1/-1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)); 
    grid-template-rows: repeat(12, minmax(0, 1fr)); 
	background-color: #111;
	
}
.client-article {
	display: grid;
	grid-column: 2/5;
	grid-row: 2/8;
	color: #FFF;
	text-align: justify;
	text-justify: inter-character;
}
.client-article p {
	font-size: .93em;
	font-weight: 400;
	line-height: 1.75em;
}
.client-title {
	margin: 0;
	grid-column: 2/5;
	grid-row: 8/9;
	color: #FFF;
	height: 100%;
	width: 100%;
	display: grid;
	place-items: center;
	align-content: center;
	justify-content: center;
}
.client-title h5{
	align-self: center;
	font-weight: 100;
	letter-spacing: .2em;
	font-family: "Gamay Light";
}
.client1 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;
	grid-column: 2/3;
	grid-row: 10/11;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client1 img {
	display: block;
	margin: 0;
	width: 40%;
	height: auto;
}
.client2 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 3/4;
	grid-row: 10/11;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client2 img {
	display: block;
	margin: 0;
	width: 55%;
	height: auto;
}
.client3 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;		
	grid-column: 4/5;
	grid-row: 10/11;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client3 img {
	display: block;
	margin: 0;
	width: 50%;
	height: auto;
}
.client4 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 2/3;
	grid-row: 11/12;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client4 img {
	display: block;
	margin: 0;
	width: 50%;
	height: auto;
}
.client5 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 3/4;
	grid-row: 11/12;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client5 img {
	display: block;
	margin: 0;
	width: 60%;
	height: auto;
}
.client6 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 4/5;
	grid-row: 11/12;
	height: 100%;
	width: 100%;
	overflow: hidden;	
}
.client6 img {
	display: block;
	margin: 0;
	width: 50%;
	height: auto;
}

.about {
	height: 700px;
}
.reel {
	height: 1000px;
}
.reel-left {
	width: 100%;
	height: 100%;
	grid-column: 1/4;
	grid-row: 1/-1;
	overflow: hidden;
}
.reel-left img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 4/5;
	
}
.reel-right {
	grid-column: 4/10;
	grid-row: 1/-1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)); 
    grid-template-rows: repeat(12, minmax(0, 1fr)); 
	background-color: #111;
}
.video-title {
	margin: 0;
	grid-column: 1/-1;
	grid-row: 2;
	color: #FFF;
	height: 100%;
	width: 100%;
	display: grid;
	place-items: center;
	align-content: center;
	justify-content: center;	
}
.video-title h2 {
	font-family: "Gamay Black";
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.video-wrap {
  display: grid;
  grid-column: 1/-1;
  grid-row: 4/11;
  place-items: center; /* Centra horizontal y verticalmente */
  grid-template-rows: auto 1fr auto; /* Ajusta según necesidad */
	
}
.video-wrap video {
  width: 100%; /* Se ajusta al 80% del contenedor */
  max-width: 1000px; /* Opcional: evita que crezca demasiado */
  aspect-ratio: 16 / 9; /* Mantiene la proporción */
	height: 100%;
}
.tag1 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 10 ;
	border: 2px solid #444;
	width: 60%;
	height: 35%;
	border-radius: 1em;
	margin:auto;
}
.tag1 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1.15em;
}
.tag2 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 3 ;
	grid-row-start: 10 ;
	border: 2px solid #444;
	width: 70%;
	height: 35%;
	border-radius: 1em;
	margin:auto;
}
.tag2 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1.15em;
}
.tag3 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 4 ;
	grid-row-start: 10 ;
	border: 2px solid #444;
	width: 50%;
	height: 35%;
	border-radius: 50px;
	margin:auto;
}
.tag3 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1.15em;
}
.tag4 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 11 ;
	border: 2px solid #444;
	width: 50%;
	height: 35%;
	border-radius: 50px;
	margin:auto;
}
.tag4 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1.15em;
}
.tag5 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 3 ;
	grid-row-start: 11 ;
	border: 2px solid #444;
	width: 50%;
	height: 35%;
	border-radius: 50px;
	margin:auto;
}
.tag5 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1.15em;
}
.tag6 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 4 ;
	grid-row-start: 11 ;
	border: 2px solid #444;
	width: 50%;
	height: 35%;
	border-radius: 50px;
	text-align: center;
	margin:auto;
}
.tag6 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1.15em;
}
.services {
	height: 700px;
	margin: 5em 0 5em 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
}
.services-left {
	grid-column: 5 span;
	grid-row: 12 span;
	place-content: center;
	justify-content: center;
	text-align: left;
	padding: 2em;
	
}
.services-left h1{
	font-family: "Soehne";
	text-transform: uppercase;
	line-height: .1em;
	font-size: 7em;
	font-weight: 100;
	border-bottom: 2px solid #111;

}
.services-right {
	display: grid;
	grid-column-start: 6;
	grid-column: span 7;
	grid-row: span 12;
    grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-template-rows: repeat(12, minmax(0, 1fr));
	background-image: url("https://traxbautista.com/img/IMG_0280.JPG");
	background-position: center;
	background-size: cover;
	border-radius: 2em;
}
.services-r1 {
	grid-column: span 3;
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row: span 4;
	grid-row-start: 4;
	grid-row-end:  10;
	border-radius: 1em;
	overflow: hidden;
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	border-radius: 2em;
  display: grid;
  place-items: center;
	  background: rgba(17, 17, 17, 0.2); /* Fondo semi-transparente */
	backdrop-filter: blur(2px); /* Aplica el desenfoque */
    -webkit-backdrop-filter: blur(2px); /* Compatibilidad con Safari */
	box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.5); /* Desenfoque en los bordes */
}
.services-r1 img {
	align-self: center;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
}
.grid {
    height: auto;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(10, minmax(0, 1fr));
    grid-gap: 1.5em;
}

.grid-box {
  margin: 0 auto;
	width: 90%;
  height: 100%;
  display: grid;
  grid-column: span 3;
  grid-row: span 12;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 30px;
  overflow: hidden;
  position: relative; /* Asegura que el orden de capas funcione */
}

.grid-header {
  grid-column: 1 / -1; /* Ocupa todas las columnas */
  grid-row: 1 / -1; /* Ocupa todas las filas */
  z-index: 1; /* Video en el fondo */
}

.grid-header video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.grid-footer {
  grid-column: 1 / -1; /* Ocupa todas las columnas */
  grid-row: 1 / -1; /* Ocupa todas las filas */
  z-index: 2; /* Texto sobre el video */
  display: grid;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
	line-height: .2em;
	background: linear-gradient(360deg, rgba(17, 17, 17, 0.4), rgba(17, 17, 17, 0.01));
}

.grid-footer h1 {
	font-family: "Soehne", serif;
	font-weight: 100;
	text-transform: uppercase;
	font-size: 8em;
	grid-column: span 3;
	grid-row: span 2;
	grid-row-start: 6;
	margin: 0;
}
.grid-footer h4 {
	font-family: "Montserrat", serif;
	font-weight: 100;
	text-transform: uppercase;
	font-size: 1em;
	letter-spacing: .3em;
	grid-column: span 3;
	grid-row: 1;
	grid-row-start: 7;
	margin: 0;
}
.grid-content-title {
	margin: 0;
    display: grid;
    place-items: center;
    width: 100%;
	height: 100%;
    grid-column: span 3;
    grid-row: span 2;
    color: #FFF;
    text-align:center;
}

.grid-content-title h4 {
    text-align: center;
    font-weight: 600;
	font-size: 1.5em;
}

.grid-content-article {
    grid-column: span 3;
    grid-row: span 2;
    margin: 0 auto;
    width: 87%;
    height: 90%;
    color: #FFF;
    text-align: justify;
}

.grid-content-article p {
    font-size: .85em;
}

	.motion {
	height: 900px;
	margin: 5em auto;
    border-radius: 5em 0 5em 0;
    overflow: hidden;
}
.motion-wrapper {
	width: 100%;
	color: #FFF;
	grid-column: span 9;
	grid-row: span 12;
	display: grid;
	grid-template-columns: repeat(9,minmax(0,1fr));
	grid-template-rows: repeat(12,minmax(0,1fr));

}
.motion-left {
	display: grid;
	grid-column: span 4;
	grid-row: span 12;
	background-color: #111;
}
.motion-left-box {
	place-items: center;
	grid-row-start: 2;
	margin-left: 2em;
	line-height: 6em;

}
.motion-left-box h1 {
	font-family: "Soehne", serif;
	font-weight: 100;
	text-transform: uppercase;
	display: block;
	font-size: 7.5em;
	text-align: left;
	margin: 0;

}
.motion-left-box h4{
	font-family: "Montserrat", serif;
	text-transform: uppercase;
	text-align: left;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: .6em;
	line-height: .01em;
	display: block;
}
.motion-right {
	width: 100%;
	height: 100%;
	grid-column: span 5;
	grid-row: span 12;
	background-color: #171717;
}
.motion-right video {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	margin: 0;
}
.photo {
	height: 900px;
	grid-gap: 1em;
}

.photo1 {
  margin: auto;
	height: 100%;
  grid-column: span 3;
  grid-row: span 12;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: repeat(12, minmax(0,1fr));
  place-items: center;
  position: relative; /* Necesario para posicionar los elementos internos */
}

.photo1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Imagen en el fondo */
}
.photo1-wrapper {
	grid-column: span 3;
	grid-row: span 3;
	grid-row-start: 9;
  text-align: left;
  line-height: 1em;	
	}
	
.photo1-meta {
  position: relative; /* Ya que .photo1 usa grid, no necesita absolute */
  z-index: 2; /* Sobre la imagen */
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
}
.photo1-meta h1 {
  font-family: "Gamay Black", serif;
  text-align: left;
	font-size: 5em;
	}
.photo1-meta h3 {
  font-family: "Montserrat", serif;
  font-weight: 400;
  letter-spacing: 1em;
  font-size: 1.5em;
  text-align: left;
	margin-top: -1em;
	
	}
.header-photo {
	display: none;
}
.photo2 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(12, 1fr); 
	grid-column: 4/10;
	grid-row: 1/-1;
	grid-gap: 1em;
}
.photo-single {
	justify-content: center;
	align-content: center;
	border-radius: 20px;
	overflow: hidden;
}

.ph1 {
	margin: auto;
	grid-column: 2 span;
	grid-row: 7 span;
	height: 100%;
	width: 100%;
	object-fit: cover;	
	object-position: center;
	margin: auto;
}
.ph1 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 9 / 16; 
	object-position: center;
	object-fit: cover;
}

.ph2 {
	margin: auto;
	grid-column: 2 span;
	grid-row: 5 span;
	height: 100%;
	width: 100%;
	margin: auto;
}
.ph2 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 4 / 5; 
	object-position: center top;
	object-fit: cover;
}
.ph3 {
	margin: auto;
	grid-column: 2 span;
	grid-row: 7 span;
	height: 100%;
	width: 100%;
	object-fit: cover;	
	object-position: center;
}
.ph3 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 9 / 16; 
	object-position: center;
	object-fit: cover;
}
.ph4 {
	margin: auto;
	grid-column: 1/3;
	grid-row: 5/9;
}
.ph5 {
	margin: auto;
	grid-column: 2 span;
	grid-row: 7 span;
	height: 100%;
	width: 100%;
}
.ph5 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 9 / 16; 
	object-position: center;
	object-fit: cover;
}
.ph6 {
	margin: auto;
	grid-column: 5/8;
	grid-row: 5/9;
}
.ph7 {
	margin: auto;
	grid-column: 2 span;
	grid-row: 5 span;
	height: 100%;
	width: 100%;
}
.ph7 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 4 / 5; 
	object-position: center top;
	object-fit: cover;
}
.ph8 {
	margin: auto;
	grid-column: 3/5;
	grid-row: 9/13;
	height: 100%;
	width: 100%;
}
.ph8 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 9 / 16; 
	object-position: center;
	object-fit: cover;
}
.ph9 {
	grid-column: 2 span;
	grid-row: 5 span;
	height: 100%;
	width: 100%;

}
.ph9 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 4 / 5; 
	object-position: center top;
	object-fit: cover;
}

.design {
  margin: 2em auto;
  grid-column: span 9;
  grid-row: 12;
  overflow: hidden;
  border-radius: 1em;
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
  position: relative;
  grid-template-columns: repeat(6, minmax(0,1fr));
  grid-template-rows: repeat(12,minmax(0,1fr));	
}

.design img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: soft-light;
}

.design-wrapper {
  grid-column: span 9;
  grid-row: span 12;
  text-align: left;
  width: 100%;
  height: 100%;
  background-color: #006102;
  display: grid;
  position: relative; /* Asegura que todo se posicione correctamente */
}

.design-title {
  color: white;
  text-align: left;
  margin-left: 2em;
  display: grid; /* Activa grid en esta capa */
  grid-row: 1 / span 4; /* Se posiciona en la fila correcta */
  align-items: center;
  z-index: 2;
  line-height: 5em;
}

.design-title h1 {
  font-family: "Soehne", serif;
  font-size: 6em;
  text-transform: uppercase;
  font-weight: 100;
  display: block;
  margin: 0;	
}

.design-title h3 {
  font-family: "Montserrat", serif;
  font-weight: 400;
  letter-spacing: 1em;
  font-size: 1em;
  margin-top: .1em;	 
	}

.cgi {
	height: 800px;
	justify-content: space-between;
	padding-bottom: 2em;
	grid-gap: 1em;
}
.cgi1 {
  width: 100%;
	height: 100%;
  grid-column: span 3;
  grid-row: span 12;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 30px;
  position: relative; /* Necesario para que los elementos absolutos respeten este contenedor */
}
.cgi1 img {
	margin: 0;
	width: 100%;  /* Mantiene proporción */
	height: 100%; /* Ajusta la altura al contenedor */
	object-fit: cover; /* Para asegurarte de que llena el espacio */
	object-position: center;
	position: absolute;
	overflow: hidden;
	z-index: -2;
}
.cgi2 {
  width: 100%;
	height: 100%;
  grid-column: span 3;
  grid-row: span 12;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 30px;
  position: relative; /* Necesario para que los elementos absolutos respeten este contenedor */
}
.cgi2 img {
	margin: 0;
	width: 100%;  /* Mantiene proporción */
	height: 100%; /* Ajusta la altura al contenedor */
	object-fit: cover; /* Para asegurarte de que llena el espacio */
	object-position: center;
	position: absolute;
	overflow: hidden;
	z-index: -2;
}
.cgi3 {
  width: 100%;
  grid-column: span 3;
  grid-row: span 12;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 30px;
  position: relative; /* Necesario para que los elementos absolutos respeten este contenedor */
}
.cgi3 img {
	margin: 0;
	width: 100%;  /* Mantiene proporción */
	height: 100%; /* Ajusta la altura al contenedor */
	object-fit: cover; /* Para asegurarte de que llena el espacio */
	object-position: center;
	position: absolute;
	overflow: hidden;
	z-index: -2;
}
.cgi-meta {
	width: 100%;
	height: 100%;
	grid-column: 3 span;
	grid-row: 12 span;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	grid-template-rows: repeat(5,minmax(0,1fr));
	place-items: center; 
}
.cgi-meta-wrapper{
	grid-column: span 3;
	grid-row: 1;
	grid-row-start: 5;
	height: 45%;
	width: 70%;
	border-radius: 5em;
	background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(17, 17, 17, 0.4));
	line-height: .5em;
	
}
.cgi-meta h1 {
	color: #FFF;
	font-size: 1.5em;
	font-weight: 600;
	display: block;
	margin-top: .85em;
}
.cgi-meta h4 {
	color: #FFF;
	display: block;
	font-size: 1em;
	font-weight: 300;
}
.call {
	height: 600px;
}
.call-left {
	grid-column: 1/5;
	grid-row: 1/-1;
	width: 100%;
	height: 100%;
	place-items: center;
	justify-content: center;
	align-content: center;
	color: #111;
}
.call-left h1 {
	font-size: 6em;
	line-height: .8em;
	font-family: "Soehne Div";
	font-weight: 100;
	text-transform: uppercase;
}
.call-right {
    grid-column: 5/10;
	grid-row: 1/-1;
	overflow: hidden;
	background-color: #111;
	border-radius: 2em;
}
.call-right img {
	width: min(100%,100%);
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center top;
}
.footer {
	text-align: center;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); 
    grid-template-rows: repeat(10, minmax(0, 1fr)); 
    grid-column: 1/-1;
    grid-row: span 10;
	min-height: 400px;
	padding: 0;
}
.foot-iso {
	grid-column: 1/2 ;
	grid-row: 3/13 ;
    background-image: url("img/shape.svg");
    background-position: center;
    background-repeat: no-repeat;
	margin-left: 0;
}
.foot1 {
	grid-column: 5/7;
	grid-row: 9/12;
	justify-content: center;
	align-items: center;
	text-align: right;
	margin-right: 3em;
}
.foot1 h6{
	font-size: .7em;
	line-height: 1em;
	font-weight: 400;
	letter-spacing: .1em;
	margin-top: .5em;
}
.foot1 h5 {
	font-size: .9em;
	line-height: .1em;
	font-weight: 600;
	letter-spacing: .1em;
	margin-bottom:  1em;
}
.foot2 {
	grid-column: 5/7;
	grid-row: 3/7;
	text-align: right;
	margin-right: 3em;
	border-bottom: 3px solid #111;
}
.foot2 h1 {
	font-family: "Soehne";
	text-transform: uppercase;
	font-size: 4em;
	font-weight: 100;
	line-height: .8em;
}
.foot3 {
	margin: 0;
	grid-column: 6/7;
	grid-row: 7/8;
	text-align: right;
	margin-right: 3em;
	align-content: center;
}
.foot3 h5 {
	margin: 0;
    place-items:center;
	display: block;
	font-weight: 600;
}
.foot4 {
	margin: 0;
	grid-column: 5/6;
	grid-row: 7/8;
	text-align: right;

	align-content: center;
}
.foot4 h5 {
	margin: 0;
    place-items:center;
	display: block;
	font-weight: 400;
}

/*- - - - - - - - - - - - - MEDIA QUERIES - - - - - - - - - - - - - - - */


/* 480px */
@media (max-width: 480px) {
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 0;
	justify-content: center;
}
.header {
	overflow: hidden;
	display: grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	grid-column: span 2;
	grid-template-rows: repeat(12, minmax(0, 1fr));
	height: 500px;
	padding: 0;
	margin: 0;
	background-image: url("img/BG_head.jpg");
	background-position: center;
}
.header-top {
	display: grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	grid-column: span 4;
	grid-row: 1;
	align-content: center;
}
.logo {
	grid-column: 1;
	grid-row: 1;
	justify-content: center;
	align-content: center;
}
.logo img {
	width: 5em;
	margin-left: 1em;
}
.top-content {
	margin:auto;
	display: grid;
	grid-column: 1;
	grid-column-start: 4;
	grid-row: 1;
	width: 70%;
	height: 80%;
	border-radius: 50em;
    outline: .2em solid #FFF;
	place-items: right;
	align-content: right;
	align-items: center;
}
.top-content h6 {
	margin: 0;
	color: #FFF;
	display: block;

}
.header_title {
	height: 1px;
	grid-column: span 4;
	grid-row: span 4;
	align-content: center;
	align-items: center;
	color: #FFF;
	border-top: 2px solid #FFF;
	text-align: center; 
}
.header_title h1 {
	font-family: "Gamay Black";
	font-size: 3em;
	font-weight: 100;
	display: block;
	margin-top: 1em;
	line-height: 1em;
	text-transform: uppercase;
}
.header_button {
	grid-column: span 4;
	grid-row: span 2;
	color: #FFF;
	text-align: center;
}
.header_button h1 {
	font-family: "Gamay Black";
	font-size: 3em;
	font-weight: 100;
	display: block;
	margin-top: 1em;
	line-height: 1em;
	text-transform: uppercase;
}	
    .section {
    grid-template-columns: 1fr;
    }
	
	.about {
	height: 960px;
	grid-template-columns: repeat(6, minmax(0, 1fr)); 
    grid-template-rows: repeat(13, minmax(0, 1fr)); 
	}
	
	.services_box {
	grid-column: span 6;
	grid-row: span 5;
}
.clients_box {
	grid-column: span 6;;
	grid-row:1/-1;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)); 
    grid-template-rows: repeat(13, minmax(0, 1fr)); 
	background-color: #111;
}
.client-article {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)); 
    grid-template-rows: repeat(5, minmax(0, 1fr)); 
	grid-column: span 6;
	grid-row: span 8;
	color: #FFF;
	text-align: justify;
	text-justify: inter-character;
}
.client-article p {
	padding: 3em;
	grid-column: span 6;
	grid-row: span 5;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5em;
	display: block;
	margin-bottom: 0.1em; 
}
.client-title {
    margin: 0;
    grid-column: 1/-1;
    grid-row: 9; /* Elimina grid-row-start para evitar conflictos */
    color: #FFF;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
	place-items: center;
}
.client-title h5{
    font-weight: 100;
    letter-spacing: 0.2em;
    font-family: "Gamay Light";
    margin: 0; 
	display: block;
	font-size: 1em;
}
.client1 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;
	grid-column: 1/3;
	grid-row: 11/12;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client1 img {
	display: block;
	margin: 0;
	width: 50%;
	height: auto;
}
.client2 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 3/5;
	grid-row: 11/12;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client2 img {
	display: block;
	margin: 0;
	width: 70%;
	height: auto;
}
.client3 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;		
	grid-column: 5/7;
	grid-row: 11/12;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client3 img {
	display: block;
	margin: 0;
	width: 70%;
	height: auto;
}
.client4 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 1/3;
	grid-row: 12/13;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client4 img {
	display: block;
	margin: 0;
	width: 60%;
	height: auto;
}
.client5 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 3/5;
	grid-row: 12/13;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.client5 img {
	display: block;
	margin: 0;
	width: 70%;
	height: auto;
}
.client6 {
	margin: 0;
	display: grid;
	place-items: center;
	align-content: center;	
	grid-column: 5/7;
	grid-row: 12/13;
	height: 100%;
	width: 100%;
	overflow: hidden;	
}
.client6 img {
	display: block;
	margin: 0;
	width: 60%;
	height: auto;
}

.about {
	height: 700px;
}
	
	.motion {
	height: 900px;
	margin: 1em;
	border-radius: 5em 0 5em 0;
}
	
	.photo {
	margin: 1em;
	height: auto;
	display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    grid-template-rows: repeat(5, 300px); 
	grid-gap: 1em;
}
.header-photo {
    display:none;
}
.photo1 {
  margin: auto;
  grid-column: span 2;
  grid-row: 1 / 3;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  display: grid;
  place-items: center;
  position: relative; /* Necesario para posicionar los elementos internos */
}

.photo1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Imagen en el fondo */
}
.photo1-wrapper {
  text-align: left;
  line-height: 1em;	
	}
	
.photo1-meta {
  position: relative; /* Ya que .photo1 usa grid, no necesita absolute */
  z-index: 2; /* Sobre la imagen */
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
}
.photo1-meta h1 {
  font-family: "Gamay Black", serif;
  text-align: left;
	}
.photo1-meta h3 {
  font-family: "Montserrat", serif;
  font-weight: 400;
  letter-spacing: 1em;
  font-size: 1em;
  margin-top: .1em;	 
	}
.photo2 {
	margin: 0;
	display: grid;
	grid-column: 1/-1;
	grid-row: 1/-1;
	grid-row-start: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    grid-template-rows: repeat(3, 300px); 
}
.photo-single {
	justify-content: center;
	align-content: center;
	border-radius: 20px;
	overflow: hidden;
}

.ph1 {
	margin: auto;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;	
	object-position: center;
	overflow: hidden;
}
.ph1 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center;
	object-fit: cover;
}

.ph2 {
	margin: auto;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2;
	height: auto;
	width: 100%;
	height: 100%;
}
.ph2 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}
.ph3 {
	margin: auto;
	grid-column: 1;
	grid-row: 1;
	grid-row-start: 2;
	width: 100%;
	height: 100%;
	place-items: center;
	object-fit: cover;	
	object-position: center;
}
.ph3 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}

.ph5 {
	margin: auto;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2;
	grid-row-start: 2;
	place-items: center;
	width: 100%;
	height: 100%;
}
.ph5 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}

.ph7 {
	margin: auto;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 1;
	grid-row-start: 3;
	width: 100%;
	height: 100%;
}
.ph7 img {
	width: min(100%, 100%); 
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}

.ph9 {
	margin: auto;
	grid-column:1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	grid-column-start: 2;
	grid-row-start: 3;
}
.ph9 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}
	
.reel {
	height: 850px;
	grid-template-columns: repeat(6, minmax(0, 1fr)); 
    grid-template-rows: repeat(25, minmax(0, 1fr)); 
	background-color: #111;
}
.reel-left {
	grid-column: span 6;
	grid-row: span 12;
	background-color: #FFF;
    grid-template-columns: repeat(6, minmax(0, 1fr)); 
	grid-template-rows: repeat(12, minmax(0, 1fr)); 

}
.reel-right {
	grid-column: span 6;
	grid-row: span 12;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr)); 
	grid-template-rows: repeat(13, minmax(0, 1fr)); 
	background-color: #111;
}
.video-title {
	margin: 0;
	grid-column: span 6;
	grid-row: 2;
	color: #FFF;
	height: 100%;
	width: 100%;
	display: grid;
	place-items: center;
	align-content: center;
	justify-content: center;	
}
.video-title h2 {
	font-size: 1.25em;
	font-family: "Gamay Black";
	font-weight: 100;
	text-transform: uppercase;
	letter-spacing: .08em;
	display: block;
}
.video-wrap {
  display: grid;
  grid-column: 1/-1;
  grid-row: 4/11;
  place-items: center; /* Centra horizontal y verticalmente */
  grid-template-rows: auto 1fr auto; /* Ajusta según necesidad */
	
}
	.video-wrap video {
		width: 90%;
	}
.tag1 {
	color: #FFF;
	grid-column: span 2;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 11 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag1 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: .8em;
}
.tag2 {
	color: #FFF;
	grid-column: span 2;
	grid-row: 1;
	grid-column-start: 4 ;
	grid-row-start: 11 ;
	border: .15em solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag2 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 400;
	display: block;
	font-size: .8em;
}
.tag3 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 12 ;
	border: .15em solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag3 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: .8em;
}
.tag4 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 4 ;
	grid-row-start: 12 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag4 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: .8em;
}
.tag5 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 13 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag5 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: .8em;
}
.tag6 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 4 ;
	grid-row-start: 13 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
	text-align: center;
}
.tag6 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: .8em;
}	
	
	
	.services {
	height: 800px;
	margin: 1em 0 1em 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
}
.services-left {
	grid-column: 6 span;
	grid-row: 3 span;
	place-items: center;
	justify-content: center;
	text-align: left;
	padding: 2em;
	
}
.services-left h1{
	font-family: "Soehne";
	text-transform: uppercase;
	line-height: .1em;
	font-size: 3em;
	font-weight: 100;
	border-bottom: 2px solid #111;

}
.services-right {
	display: grid;
	grid-column: span 6;
	grid-row-start: 3;
	grid-row: span 5;
    grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: repeat(5, minmax(0, 1fr));
	background-color: #111;
}
.services-r1 {
	grid-column: span 4;
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row: span 3;
	grid-row-start: 2;
	grid-row-end:  5;
	display: grid;
}



	.cgi {
	height: auto;
	justify-content: space-between;
	padding-bottom: .5em;
	grid-template-columns: 1fr;
		
}
.cgi1 {
	width: auto;
	height: 100%;
	grid-column: 1;
	grid-row: 12 span;
	overflow: hidden;
	place-items: center; /* Centra la imagen en ambos ejes */
	border-radius: 30px;
    margin: 1em;
}
.cgi1 img {
	margin: 0;
	width: 100%;  /* Mantiene proporción */
	height: 100%; /* Ajusta la altura al contenedor */
	object-fit: cover; /* Para asegurarte de que llena el espacio */
	object-position: center;
}
.cgi2 {
	width: auto;
	height: 100%;
	grid-column: 1;
	grid-row: 12 span;
	overflow: hidden;
	display: grid; /* Asegura que Grid funcione */
	place-items: center; /* Centra la imagen en ambos ejes */
	border-radius: 30px;
	margin: 1em;
}
.cgi2 img {
	margin: 0;
	width: 100%;  /* Mantiene proporción */
	height: 100%; /* Ajusta la altura al contenedor */
	object-fit: cover; /* Para asegurarte de que llena el espacio */
	object-position: center;
}
.cgi3 {
	width: auto;
	height: 100%;
	grid-column: 1;
	grid-row: 12 span;
	overflow: hidden;
	display: grid; 
	place-items: center; 
		border-radius: 30px;
		margin: 1em;
	
}
.cgi3 img {
	margin: 0;
	width: 100%;  /* Mantiene proporción */
	height: 100%; /* Ajusta la altura al contenedor */
	object-fit: cover; /* Para asegurarte de que llena el espacio */
	object-position: center;
}
	.cgi-meta {

	}
	.cgi-meta-wrapper{
		height: 80%;
		
	}
	.cgi-meta-wrapper h1 {
		font-size: 1.25em;
	}
	.cgi.cgi-meta-wrapper h4 {
		margin:0;
	}
	.call {
	height: 100vh;
	grid-template-columns: 1fr;
}
.call-left {
	grid-column: 1;
	grid-row: 1/6;
	width: 100%;
	height: 100%;
	place-items: center;
	justify-content: center;
	align-content: center;
	color: #111;
}
.call-left h1 {
	grid-row: span 6;
	margin: 0;
	font-size: 3em;
	line-height: .8em;
	font-family: "Soehne Div";
	font-weight: 100;
	text-transform: uppercase;
	display: block;
}
.call-right {
	margin: 1em;
    grid-column: 1;
	grid-row: 6/13;
	background-color: #111111;
}
	
	.footer {
	text-align: center;
    display: grid;
    grid-template-columns: 1fr; 
	grid-template-rows: repeat(6, minmax(0,1fr));
    grid-column: 1;
    grid-row: span 10;
	min-height: 50vh;
	padding: 0;
}
.foot-iso {
	grid-column: 1 ;
	grid-row: 3/13 ;
    background-image: url("img/shape.svg");
    background-position: center;
    background-repeat: no-repeat;
	margin-left: 0;
	display: none;
}
.foot1 {
	grid-column: 1;
	grid-row: 6;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-right: 1em;
}
.foot1 h6{
	font-size: .6em;
	line-height: 1em;
	font-weight: 400;
	letter-spacing: .1em;
	margin-top: .5em;
}
.foot1 h5 {
	font-size: .7em;
	line-height: .1em;
	font-weight: 600;
	letter-spacing: .1em;
	margin-bottom:  1em;
}
.foot2 {
	grid-column: 1;
	grid-row: 1/3;
	text-align: center;
	margin: auto;
	border-bottom: 3px solid #111;
}
.foot2 h1 {
	font-family: "Soehne";
	text-transform: uppercase;
	font-size: 4em;
	font-weight: 100;
	line-height: .8em;
}
.foot3 {
	margin: 0;
	grid-column: 1/-1;
	grid-row: 4;
	text-align: center;
	align-content: center;
}
.foot3 h5 {
	margin: 0;
    place-items:center;
	display: block;
	font-weight: 600;
}
.foot4 {
	margin: 0;

	text-align: center;
	align-content: center;

	   place-items:center;
	place-self: end;
	display: block;
	font-weight: 200;
}
.foot4 h5 {
	margin: 0;
    place-items:center;
	place-self: end;
	display: block;
	font-weight: 400;
}
	/*
.foot4 {
	margin: 0;
	grid-column: 1/-1;
	grid-row: 4;
	text-align: center;
	align-content: center;
	height: 100%;
} */
}

/*- - - - - - - - - - - - - - - - - - -  Tabletas (481px a 1024px) - - - - - - - - - -  */
@media (min-width: 481px) and (max-width: 1800px) {
	.container {
		height: auto;
	}
	.header {
		height: 750px;
	}
	.header_title {
		grid-row: 2/3;
	}
	.header_title h1{
		font-size: 5em;
	}
    .header_button {
	grid-column: span 4;
	grid-column-start: 2;
	grid-row: span 3;

	color: #FFF;
	text-align: center;
    }
    .header_button h1 {
	font-family: "Gamay Black";
	font-size: 4.5em;
	font-weight: 100;
	display: block;
	line-height: 1em;
	text-transform: uppercase;
}	

	.client-article {
		grid-row-start: 1;
		grid-column: span 6;
		padding: 3em;
	}
	.client-article p {
		font-size: .95em;
	}
	.client-title {
		grid-row:9/10;
	}
	.client-title h5 {
		font-size: 1em;
		font-weight: 100;
	}
	.client1 img {
		width: 40%;
	}
		.client1 img {
		width: 60%;
	}
		.client2 img {
		width: 80%;
	}
		.client3 img {
		width: 80%;
	}
		.client4 img {
		width: 80%;
	}
		.client5 img {
		width: 80%;
	}
		.client6 img {
		width: 80%;
	}
	.reel {
		height: 700px;
	}
	.reel-right {
		grid-template-columns: repeat(7,minmax(0,1fr));
		grid-template-rows: repeat(14,minmax(0,1fr));
	}
	.video-title {
		grid-column: span 5;
		grid-column-start: 2;
		grid-column-end: 7;
	}
	.video-title h2 {
		font-size: 1.25em;
	}
	.tag1 {
	color: #FFF;
	grid-column: span 2;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 11 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag1 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1em;
}
.tag2 {
	color: #FFF;
	grid-column: span 2;
	grid-row: 1;
	grid-column-start: 5 ;
	grid-row-start: 11 ;
	border: .15em solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag2 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 400;
	display: block;
	font-size: 1em;
}
.tag3 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 12 ;
	border: .15em solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag3 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1em;
}
.tag4 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 5 ;
	grid-row-start: 12 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag4 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1em;
}
.tag5 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 2 ;
	grid-row-start: 13 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
}
.tag5 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1em;
}
.tag6 {
	color: #FFF;
	grid-column: 1;
	grid-row: 1;
	grid-column-start: 5 ;
	grid-row-start: 13 ;
	border: .15em  solid #444;
	width: 190%;
	height: 60%;
	border-radius: 50px;
	text-align: center;
}
.tag6 h3 {
	margin: 0;
	font-family: "Montserrat";
	font-weight: 600;
	display: block;
	font-size: 1em;
}	
	.services {
		height: 500px;
	}
	.services-left h1 {
		font-size: 3em;
	}

.grid-content-article {
    margin: auto; 
    width: 80%;
    height: 90%;
    grid-column: span 2; /* Corrección */
    grid-row: span 2; /* Corrección */
    color: #FFF;
}
	
	.photo {
	margin: 0;
	height: auto;
	display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    grid-template-rows: repeat(8, 300px); 
    grid-gap: 1em;
}
.photo1 {
	margin:auto;
	grid-column: 1;
	grid-row: 1/3;
	overflow: hidden;
	border-radius: 20px;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;

}
.photo1 img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
	.photo1-wrapper {
		display: none;
	}	
.header-photo {  
    grid-column: 1;
    grid-row: span 2;
    grid-column-start: 2;
    grid-column-end: 2;
	align-content: center;
}
	.header-photo h1 {
		font-family: "Gamay Black";
		text-align: left;
		margin-left: 0;
		font-weight: 100;
		font-size: 3em;
		line-height: .2em;
		display: block;
	}
	.header-photo h3 {
		font-family: "Montserrat", serif;
		font-weight: 500;
		letter-spacing: .6em;
		text-align: left;
		margin-top: -.7em;
	}
		.header-photo h3 {
		font-family: "Montserrat", serif;
		font-weight: 500;
		letter-spacing: .6em;
		text-align: left;
		margin-top: -.8em;
		font-size:1.15em;
	}
	
.photo2 {
	margin: 0;
	display: grid;
	grid-column: 1/-1;
	grid-row: 1/-1;
	grid-row-start: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    grid-template-rows: repeat(6, 300px); 
}
.photo-single {
	justify-content: center;
	align-content: center;
	border-radius: 20px;
	overflow: hidden;
}

.ph1 {
	margin: auto;
	grid-column: 1;
	grid-row: span 2;
	width: 100%;
	height: 100%;
	object-fit: cover;	
	object-position: center;
	overflow: hidden;
}
.ph1 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center;
	object-fit: cover;
}
	.header-photo {
		display: block;
	}
	.header-photo h1 {
		line-height: .2em;
	}
.ph2 {
	margin: auto;
	grid-column: 1;
	grid-row: span 2;
	grid-column-start: 2;
	height: auto;
	width: 100%;
	height: 100%;
}
.ph2 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}
.ph3 {
	margin: auto;
	grid-column: 1;
	grid-row: span 2;
	width: 100%;
	height: 100%;
	place-items: center;
	object-fit: cover;	
	object-position: center;
}
.ph3 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}

.ph5 {
	margin: auto;
	grid-column: 1;
	grid-row: span 2;
	grid-column-start: 2;
	place-items: center;
	width: 100%;
	height: 100%;
}
.ph5 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}

.ph7 {
	margin: auto;
	grid-column: 1;
	grid-row: span 2;
	grid-column-start: 1;
	width: 100%;
	height: 100%;
}
.ph7 img {
	width: min(100%, 100%); 
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}

.ph9 {
	margin: auto;
	grid-column:1;
	grid-row: span 2;
	width: 100%;
	height: 100%;
	grid-column-start: 2;
}
.ph9 img {
	width: min(100%, 100%); 
	height: 100%;
    aspect-ratio: 1 / 1; 
	object-position: center top;
	object-fit: cover;
}
	.call-left {
		grid-column: 1/6;
	}
	.call-left h1 {
		font-size: 4em;
	}
	.call-right {
		grid-column: 6/10;
	}
	.footer {
		height: auto;
	}
	.foot1 {
		grid-column: span 3;
		grid-column-start: 4;
		grid-column-end: 7;
	}
	.foot2 {
		grid-row: 1/5;
		grid-column: 3/7;
	}
	.foot3 {
		grid-column: span 2;
		grid-column-start: 5;
		grid-column-end: 7;
		grid-row: 1;
		grid-row-start: 6;
		grid-row-end: 7;
		margin-right: 3em;
		text-align: right;
	}
	.foot3 h5 {
		font-size: 1.25em;
		display: block;
		
	}
	.foot4 {
		grid-column: 1;
		grid-row: 1;
		grid-column-start: 6;
		grid-row-start: 5;
		margin-right: 3em;
	}
		.foot4 h5 {
		font-size: 1.25em;
		display: block;
		margin-bottom: 0;
		
	}
	
}


/*- - - - - - - - - - - - - - - - - - -  Tabletas (1025px a 1800px) - - - - - - - - - -  */
@media (min-width: 960px) and (max-width: 1800px) {
	.photo {
		grid-template-columns: repeat(12, minmax(0,1fr));
		grid-template-rows: repeat(4, 300px); 
		height: auto;
	}
	.photo1 {
		grid-column: span 6;
		width: 100%;
		object-fit: fill;
	}
	.photo1 img {
		width: 100%;
		height: auto;
		object-position: center top;
	}
	.motion {
	height: 900px;
	margin: 5em auto;
	border-radius: 5em 0 5em 0;
}
	.header-photo {
	grid-column: span 6;
	grid-row: span 2;
	grid-column-start: 7;
	grid-column-end: 13;
}
		.header-photo h1 {
		font-size: 5em;
	}

	.photo2 {
		grid-template-columns: repeat(12, minmax(0,1fr));
		grid-template-rows: 1fr;
		grid-template-rows: repeat(2, minmax(0,1fr));
		grid-row: span 2;
		height: auto;
	}
	.ph1{
		grid-column: span 2;
	}
	.ph2{
		grid-column: span 2;
	}
	.ph3{
		grid-column: span 2;
	}
	.ph4{
		grid-column: span 2;
	}
	.ph5{
		grid-column: span 2;
	}
	.ph7{
		grid-column: span 2;
	}
	.ph9{
		grid-column: span 2;
	}
	
	.client1 img {
		width: 40%;
	}
	.client2 img {
		width: 50%;
	}
	.client3 img {
		width: 60%;
	}
	.client4 img {
		width: 50%;
	}
	.client5 img {
		width: 50%;
	}
	.client6 img {
		width: 50%;
	}		

}

@media (min-width: 481px) and (max-width: 960px) {
	.motion {
	height: 900px;
	margin: 1em auto;
	border-radius: 5em 0 5em 0;
}
	.client-article p {
		line-height: 1.25em;
		font-size: .85em;
		font-weight: 400;
	}
	.services-left h1{
		font-size: 2.1em;
		font-weight: 100;
		line-height: .3em;
	}
	.motion-left {
	display: grid;
	grid-column: span 9;
	grid-row: span 6;
	background-color: #111;
	justify-content: center;
}
.motion-left-box {
	place-items: center;
	grid-row-start: 2;
	margin-left: 2em;
	line-height: 6em;

}
.motion-left-box h1 {
	font-family: "Soehne", serif;
	font-weight: 100;
	text-transform: uppercase;
	display: block;
	font-size: 7.5em;
	text-align: center;
	margin: 0;

}
.motion-left-box h4{
	font-family: "Montserrat", serif;
	text-transform: uppercase;
	text-align: center;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: .6em;
	line-height: .01em;
	display: block;
}
.motion-right {
	grid-column: span 9;
	grid-row: span 6;
	background-color: #171717;
}
	.cgi {
		height: 500px;
	}
	.cgi-meta-wrapper {
		height: 50%;
		width: 90%;
		line-height: .01em;
	}
	.cgi-meta-wrapper h1 {
		font-size: 1em;
		margin-top: 1em;
	}
	.cgi-meta-wrapper h4 {
		font-size: .9em;
	}
}

@media (min-width: 481px) and (max-width: 459px) {
	.motion {
	height: 900px;
	margin: 1em auto;
	border-radius: 5em 0 5em 0;
}
	
	.header-photo {
  background-color: red;
  grid-column: 1;
  grid-row: span 2;
  grid-column-start: 2;
  grid-row-start: 1;
	}

	.client-article p {
		font-size: .75em;
	}
	
		.client-article {
		grid-row-start: span 1;
		grid-column: span 6;
		padding: 1em;
	}
	.services-left {
		padding: .5em;
	}
	.services-left h1 {
		font-size: 1.25em;
	}
}

@media (min-width: 481px) and (max-width: 630px) {

	.services-left {
		padding: .5em;
		justify-content: center;
	}
	.services-left h1 {
		font-size: 2em;
	}
}


@media (min-width: 481px) and (max-width: 750px) {
	.grid {
		height: 500px;
		grid-gap: .5em;
	}
	.grid-box {
		border-radius: .5em;
		width: 100%;
		
	}
	.grid-footer {
		margin: 0;
	}
	.grid-content-title h1 {
		font-size: 3.5em;
	}
	.grid-content-title h4 {
		font-size: .7em;
		margin-top: -5.5em;
		letter-spacing: .1em;
	}
}

@media (min-width: 481px) and (max-width: 860px) {
	.call-left h1 {
		font-size: 3em;
	}
	.foot1 {
		grid-column: span 6;
	}
	.foot1 h5 {
		margin-right: 0;
		
	}
	.foot3 {
		grid-column: span 6;
	}
}	

@media (min-width: 751px) and (max-width: 1600px) {
	.grid {
		height: 500px;
		grid-gap: .2em;
	}
	.grid-box {
		border-radius: 1.25em;
		width: 100%;
		
	}
	.grid-footer {
		margin: 0;
	}
	.grid-content-title h1 {
		font-size: 5.5em;
	}
	.grid-content-title h4 {
		font-size: 1em;
		margin-top: -2.5em;
		letter-spacing: .1em;
	}
}	

@media (max-width: 480px) {
	.header-photo {
    display:none;
		}	
    .services_box {
	display: none;
}
	.client-article p {
		font-size: .85em;
	}
	.grid-content-title h4 {
		margin-top: -1em;
		letter-spacing: .1em;
	}
	.motion {
	height: 900px;
	margin: 1em;
	border-radius: 5em 0 5em 0;
    }
	.motion-left {
	display: grid;
	grid-column: span 9;
	grid-row: span 6;
	background-color: #111;
}
.motion-left-box {
	place-items: center;
	grid-row-start: 2;
	margin-left: 2em;
	line-height: 6em;

}
.motion-left-box h1 {
	font-family: "Soehne", serif;
	font-weight: 100;
	text-transform: uppercase;
	display: block;
	font-size: 7.5em;
	text-align: left;
	margin: 0;

}
.motion-left-box h4{
	font-family: "Montserrat", serif;
	text-transform: uppercase;
	text-align: left;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: .6em;
	line-height: .01em;
	display: block;
}
.motion-right {
	grid-column: span 9;
	grid-row: span 6;
	background-color: #171717;
}
	.photo1-meta h1 {
		font-size: 3em;
	}
	.photo1-meta h3 {
		font-size: 1em;
		font-weight: 500;
	}

		
}