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

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* Default layout (desktop-first) */
body {
	font-family: 'Comfortaa', sans-serif;
	background-color: #000;
	color: white;
	overflow-x: hidden;
	line-height: 1.5;
}

/* Navbar */

nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 20px; /* Tamaño estándar */
	z-index: 1000;
	transition: all 0.5s ease;
}

nav.scrolled {
	 /*  Fondo oscuro al desplazar 
	padding: 8px 20px;*/
}

nav img {
	width: 100px; /* Tamaño estándar para el logo */
	transition: all 0.5s ease;
}

nav a {
	color: white;
	text-decoration: none;
	margin: 0 10px; /* Espaciado estándar */
	font-weight: bold;
	font-size: 1rem; /* Tamaño de fuente estándar */
}

nav a:hover {
	text-decoration:underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 3px;
}

.btn-escribir {
	background: #fff;
	padding: 12px 24px;
	border-radius: 5px;
	color: black;
	font-weight: bold;
	letter-spacing: 1px;
	transition: transform 0.3s ease, background-color 0.3s ease;
	
}

.btn-escribir:hover {
	text-decoration:underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 3px;
}



/* Estilos del Slider */
#slider-container {
	width: 100%;
	margin: 0;
	overflow: hidden;  /* Oculta los elementos que salen del contenedor */
	position: relative;
	aspect-ratio: 1920 / 700;
}

.slider {
	display: flex;
	width: 600%;  /* Ancho total de las 4 diapositivas */

}

.slide {
	width: 100%;  /* Cada diapositiva ocupa un 100% del ancho del slider */
	flex:100%; /* Asegurar que cada slide ocupe el 100% del contenedor */
	position: relative;
	overflow: hidden;
}

.video {
	width: 100%;  /* El video ocupa el 100% de su contenedor */
	height: auto;
	position: relative;
}

.video-title {
	position: absolute;
	bottom: 20px;
	text-align: center;
	background-color: rgba(0, 0, 0,0);
	color: white;
	padding: 5px;
	font-size: 1.3vw;
	z-index: 2;
	width: 100%;
}

.video-title em {
	font-size: 70%;
}

.slider-btns {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	z-index: 1;
}

.prev, .next {
	background: rgba(0, 0, 0, 0);
	border: none;
	color: #999;
	font-size: 2rem;
	padding: 10px;
	cursor: pointer;
}
.prev:hover, .next:hover {
	color:#fff;
}

.slider-dots {
	position: absolute;
	bottom: 15px;
	left: 50%;
	padding-top: 10px;
	transform: translateX(-50%);
	display: flex;
}

.loaded {
  visibility: visible;
}

.dot {
	height: 3px;
	width: 20px;
	margin: 0 5px;
	background-color: #999;
	transition: background-color 0.3s ease;
	cursor: pointer;
}

.active {
	background-color: #fff;
}

.dot:hover {
	background-color: #fff;
}

.PageWidth{
	width: 1350px;
	padding: 20px;
	margin: auto;
}

/* Sección Tax */
#tax{
	display: grid;
    grid-template-columns: 1fr 7fr 7fr 1fr;
	grid-gap: 10px;
	width: 100%;
	padding: 50px 0;
	margin: auto;
	color: #777;
}
.tax-item{
	display: grid;
    grid-template-columns: 1fr 5fr;
	grid-gap: 20px;
	align-items: center;
}
#tax p{
	color: #777;
	max-width: 500px;
}
span {
	color:orange;
}
#tax img {
	width: 100px;
	display: block;
	margin: auto;
}

h1 {
	font-size: 40px;
	padding: 0 0 20px 0;
}

h2 {
	font-size: 21px;
	padding: 0 0 20px 0;
}
h3 {
	font-size: 14px;
	padding: 0 0 10px 0;
}

/* Sección Acerca de Nosotros */
#acerca {
	justify-content: space-between;
	max-width: 100%;
	margin: auto;
	padding: 50px 0;
}

#acerca p, #services p {
	font-size: 14px;
	color: #ccc;
	margin: auto;
}

#acerca .pcenter {
	text-align:center;
}
#acerca strong {
	color: #fff;
}
.see{
	text-decoration: underline;
	color: white;
}
#projects {
	width: 100%;
	padding: 50px 0;
	margin: auto;
}
#projects span{
	color: white;
	font-size: 70%;
}
.h5 {
	font-size: 10px;
	color: #ccc;
}
/* Sección de portafolio */
.video-hover {
    position: relative;
	overflow: hidden;
}

.video-hover img {
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}

.video-hover video {
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 101%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-hover video {
    opacity: 0;
}

.video-hover.active video {
    opacity: 1;
}

.portafolio-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: center;
	margin: auto;
}


.project-item {
    display: flex;
    flex-direction: column; /* Coloca el texto debajo de la imagen */
    align-items: center; /* Centra el contenido */
}

.ptitle {
    z-index: 2;
    position: relative;
	padding: 10px;
    font-size: 20px;
    text-decoration: none;
    color: white;
    pointer-events: none;
    text-align: center;
	line-height: 1;
}
.ptitle em {
    font-size: 80%;
	color: #ccc;
}

.right-side {
    position: relative;
    background: #222;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

footer {
	padding: 50px 0;
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	font-size: 15px;
	width: 100%;
	margin: auto;
}

.footer-btn{
	text-align: right;
}
.footer-btn a {
	text-decoration: none;
	color: white;
}
.copy{
	text-align: center;
}
.flinks a{
	text-decoration: none;
	color: white;
	padding: 0 10px 0 0;
}
.flinks a:hover{
	text-decoration: underline;
}

.Contact{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	font-size: 14px;
}

.correo, h2 a, h3 a{
	color: white;
	text-decoration: none;
}
.correo:hover, h3 a:hover {
	text-decoration: underline;
}
.grid2-1{
	display: grid;
    grid-template-columns: 2fr 1fr;
	/*gap: 20px;*/
}
.grid1-2{
	display: grid;
    grid-template-columns: 1fr 2fr;
	/*gap: 20px;*/
}
.Credits{
	display: grid;
    grid-template-columns: 1fr 2fr;
	/*gap: 20px;*/
}
.Credits span{
	color: #ccc;
	font-weight: 100;
}
.Credits strong{
	font-weight: 600;
}
.Credits strong{
}
.grid1-1-1{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	/*gap: 20px;*/
}

.padding20{
	padding: 0 20px;
	max-width: 500px;
}
.width70{
	max-width: 700px;
}

@media (max-width: 1800px) {
	nav.scrolled {
		background: rgba(0, 0, 0, 1); /*  Fondo oscuro al desplazar */
	}
}	
/* Estilos para tabletas */
@media (max-width: 1350px) {
	#tax{
		grid-template-columns: 1fr 30fr 30fr 1fr;
	}
	#tax{
		grid-template-columns: repeat(1,1fr);
		grid-gap: 50px;
	}
	.portafolio-images {
		grid-template-columns: repeat(3, 1fr); /* Dos columnas en pantallas medianas */
	}
	.video-title {
		font-size: 2vw;
	}
	.video {
		width: 200%; 
		left:-50%;
	}
	.PageWidth{
		width: 100%;
	}
	.grid2-1{
    	grid-template-columns: 1fr;
	}
	.grid1-2{
		grid-template-columns: 1fr;
	}
	.grid1-1-1{
   		grid-template-columns: 1fr;
	}
	.padding20{
		padding: 20px 0px;
	}
	#slider-container {
		aspect-ratio: 1920 / 1400;
	}
}

.video-container {
  margin: 100px 0 0 0;
  display: flex;
  flex-direction: column;
 /* Espacio entre videos */
}

.vimeovideo {
  margin: auto;
  width: 100%;  /*80% del ancho de la ventana */
  aspect-ratio: 16 / 9 ;
}

/* Estilos para móviles */
@media (max-width: 768px) {
	/*
	nav {
	padding: 5px 5px;  
	}
	nav.scrolled {
	padding: 5px 15px; 
	}
	nav img {
		width: 75px; 
	}
	.btn-escribir {
	padding: 12px 12px;
	}*/
	nav a {
		font-size: 0.7rem;  
		margin: 0 5px;
	}
	nav img {
		width: 75px; 
	}
	.video-title {
		font-size: 3vw;
	}
	#tax{
		grid-template-columns: repeat(1,1fr);
	}
	.portafolio-images {
		grid-template-columns: repeat(2, 1fr); /* Una columna en pantallas pequeñas */
	}
	.video {
		width: 300%; 
		left:-100%;
	}
	#slider-container {
		aspect-ratio: 1920 / 2100;
	}
	.ptitle {
		font-size: 14px;
	}
	
	h1 {
		font-size: 27px;
	}
	.Credits{
		font-size: 12px;
	}
	footer {
		font-size: 12px;
	}
	.flinks a{
		padding: 0 5px 0 0;
	}
	.Contact{
		font-size: 12px;
	}
	
}