/* 1.1 -------- HERO DE HOME--------- */

.hero {	
	position: sticky;
  	top: 0; z-index: 1;
	min-height: 99vh; width: 100%;

	contain: paint;
	background-color: var(--azul);
	background-image: url(IMG/HERO.svg);
	background-repeat: no-repeat;
	background-position: 37% 40%;
	background-size: 80% 80%;
	justify-content: center;
	}

@scope (.hero) {
	.contenedor-flex {
	justify-content: space-around;
	gap: 200px;
	margin-bottom: 40px;
	}
	.columna-flex {
	flex-basis:content;
	width: auto;
	gap: 5px;
	text-align: left;
	}
	.subtexto {
    line-height: 19.8px;
    font-weight: 300;
	}
	mark {
	border-radius: 8px;
	background-color: #f9d073;
	justify-content: center;
	padding: 5px 10px;
	margin-left: 8px;
	}

		@media (max-width: 1100px) {
			.contenedor-flex {
				flex-direction: column;
				gap: 325px;
			}
		}
}


/* 1.2 -------- SECCION PROYECTOS--------- */

@scope (.proyectos) {

	.contenedor-flex.bloq1 {
    gap: 15px;
	padding: var(--gap-40-20) 0px var(--gap-80-40);
    }

	/* Botones */
	.contenedor-boton {
	width: 100%;
	gap: 90px;
	}
 	.grupo-boton{
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    }
	.boton-proyectos{
    width: 332px;
    gap: 20px;
    }
	.izq { margin-left: auto;}

	/* Proyectos */
	.bloq2 { width: 100%; gap: var(--gap-80-40);}
	.sub-bloq2 {
	width: 100%;
	align-items: flex-start;
	align-content: flex-start;
	gap: var(--gap-80-40);
	}
	.cajanegra {width: 100%; height: 50px; }
	.card {
	display: flex;
	width: 100%;
	min-width: 0;
	align-self: stretch; 
	gap: 10px;
	transition: opacity .2s ease;
	}
	.card.hidden {
    opacity: 0;
    pointer-events: none;
    display: none;
	}
	.imagen {
	align-self: stretch;
	position: relative;
	border-radius: 5px;
	width: 100%;
	overflow: hidden;
	object-fit: cover;
	}
	.info {
	display: flex;
	width: 100%;
	min-width: 0;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	}
	button { flex-shrink: 0;}
	h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: auto 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	h2 {
	flex: 1 1 auto;
	margin: auto 0;
	min-width: 0;      
	overflow: hidden;
	}
	.ver-mas{
	justify-content: flex-start;
	text-decoration: underline; 
	padding-top: 80px;
	text-underline-offset: 6px;
	}
	.tipoboton{border:none;background-color: white;}

	@media (max-width: 700px) {
		
		.proyectos { gap:20px; }
		.t4{line-height: 100%; text-align: center;}
    	.hide1 { display:none; }
		.boton-proyectos { width: 100%; gap:auto; justify-content:center;}
	
	}
	@media (max-width: 900px) {
		.contenedor-boton{ gap:0px; }
		.hide2 { display:none; }
		.bloq2 {flex-direction: column; gap:40px; align-items: center;}
		.sub-bloq2 { gap:40px; }
		.cajanegra{ display:none; }
		.ver-mas{ padding: 60px 0px 0px;}
	}	
}


/* 1.2.1 -------- SECCION CARTELES--------- */

.cartelucos{
	gap:40px;
	padding: var(--gap-80-40) var(--gap-80-17);
}

@scope (.cartelucos) {

	.contenedor-flex{align-items: flex-start;  align-content: flex-start;}

	.contenedor-flex.bloq1 {
    gap: 15px;
	
    }

	/* Botones */
	
 	.grupo-boton{
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    }

	.botones{
	
	display: flex;
	gap: 20px;
}

	.viewport{
	width: 100vw; 
	display: flex;
	position: relative;
	
	white-space: nowrap;
	overflow-x: scroll;
	}	
	
	.contenedor{
		display: flex;
		gap: 30px;
		padding-bottom: 50px;
		align-items: flex-start;
		}
	br{display: none;}
	.imagen{ 
	
		object-fit: contain;
		width: 300px;
		height: auto;
		
		
	}

	@media (max-width: 700px) {
		
		
		.t4{line-height: 100%; text-align: center;}
		.contenedor{gap: 10px;}
    	.imagen{width: 200px;}
		.hide1{display: none;}
		.botones{ width: 100%; align-items: center; justify-content: center;}
		br{display:block}
	}

		
	}

/* 1.3 -------- SECCION FRASE--------- */


	.frase { background-color:white; padding: var(--gap-80-17) var(--gap-80-17);}
	
	@scope (.frase) {
	.hide { display: block; height: 50px; }
	.contenedor-flex {
	text-align: center;
	gap: 20px;
	
	}

	@media (max-width: 700px) {
	
	
	.sub {max-width: 230px; margin-bottom: 10px;}
	}
}

/* 1.4 -------- SECCION CONTACTO--------- */

.contacto-bloq{ 
	background-color:var(--azul);
	margin-top: 100px;
	padding: var(--gap-80-17) var(--gap-80-5);
	
}

@scope (.contacto-bloq) {

	.fondo{ 
	background-color: white;
	height: 100%; width: 94%; 
	padding: 45px var(--gap-40-20);
	border-radius: 5px;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	}

	.hide-icon { 
	width: 100%;height: 100%; 
	box-sizing: border-box;
	}
	.icon {
    width: 100%;
	height: 100%;
  	overflow: hidden;
  	object-fit: contain;
	}

	.t2{margin:0;}
	p{margin:5px;}
	
	.hide{
	display: none;
	height: 280px;
  	object-fit: contain;
	margin: auto;
	}
	.card {
    max-width: 100%;  /* No supera el ancho del padre */
    flex-shrink: 1; 
  	border-radius: 5px;
  	background-color: #EDEDED;
  	border: 1px solid #E1E1E1;
  	padding: 25px 25px;
    gap: 10px;
	box-sizing: border-box;
	}

	.texto {width: auto;}
	.linea {
  	align-self: stretch;
  	width: 100%;
  	border-top: 1px solid gray;
  	box-sizing: border-box;
	}
	.botones {
  	justify-content: flex-end;
  	gap: 10px;
	}
	

	@media (max-width: 1050px) {
		.contenedor-flex{gap: 20px;}
		.columna-flex{flex: auto}	
		.hide-icon{ width: 50%;
		overflow: hidden;
		object-fit: cover;}
		.icon { 
		width: 360px;
		object-position: -110px 10px;
		}
		p{text-align: center;}

	}	

	@media (max-width: 800px) {

		.contenedor-flex{ flex-direction: column;}
		.hide-icon {display: none;}
		.hide {  display: grid; place-items: center;}
		.gap {gap: 25px; justify-content: center;}
		.t2{text-align: center;}
	}
}



/* 2.1 -------- HERO DE SERVICIOS--------- */

.hero-servicios{ min-height: 99vh;background-color: var(--amarillo); }
@media (max-width: 300px) {.hero-servicio{ min-height: 80vh;}}


@scope (.hero-servicios) {

	.columna-flex{
		
	
	flex: 1;
	height: 100%;
	align-items: flex-start;
	gap: 160px;
		
	background-image: url(IMG/servicios.png);
	
	background-repeat: no-repeat;
	background-position: right -20px bottom -30px;
	background-size: 75%;
	}
	@media (max-width: 300px) {
	.columna-flex {background-size: 40%;  background-position: right -10px bottom 0;}}
	.t2{ max-width: 550px;}
	.t5{ max-width: 550px;}

	@media (max-width: 700px) {
		
		.t1{ font-size:35px}
		.t5{ font-size:15px; width: 300px;}

		.columna-flex{
		
		width: 100vw;
		padding: 0 30px; 
		gap: 310px;
		justify-content: space-between;
		background-position: right -45px bottom 57%;
		background-size: 130%;
		padding-bottom: 30px;
		}
	}
}

/* 2.2 -------- SECCION INFO MI SERVICIOS --------- */

@scope (.info) {

	/* Diseño extracurricular */
	.bloq1 {
	width: 100%;
	display: flex;
	gap: 80px; 
	padding: 0 0 80px;
	align-items: center;
	}
	.salto{	height: 30px;}

	/* Me apasiona */
	.bloq2 {
	width: 100%; 
	padding: 150px 0 150px;}
	.t5 { margin-left: 0;}
	mark {
	border-radius: 3px;
  	background-color: var(--amarillo);
  	padding: 3px 5px 5px 10px;
	transform: translateY(-3px);
	white-space: nowrap;
	}
	@media (max-width: 400px){.espacio{ margin-bottom: 40px; line-height: 33.8px;}}

	/* identidad / campaña / eventos */
	.bloq3 { gap:40px;}
	.card-servicios { gap: 20px;}
	.texto-card-servicios { gap:80px;}
	.grupo-tag{
	flex-direction: row;
	gap: 40px;
	}
	.botones { 
	width: 100%; flex-direction: row;
	 flex: 0 1 auto; align-self: stretch; justify-content: flex-end;
	margin-right: 0; gap:15px;
	flex-wrap:nowrap; overflow:scroll; padding-bottom: 22px; 
	scrollbar-width: thin;
	}
	.simbolo {
	width: 10px;
	font-weight: 200;
	}
	.contenedor-texto{
	position: relative;
	display: flex;
	flex: 1; 
	width: 100%;
	gap:20px;
	}


	@media (max-width: 1100px) {
		.bloq1 {flex-direction: column; gap: 20px; padding-top:50px ;}
		.salto{height: 10px;}
		.contenedor-texto{flex-direction: column; gap: 5px;}
		.bloq3 {margin-top: 30px; gap: 1px;}
		.simbolo { display:none; }
		.card-servicios{gap:10px;}
	
	}
	@media (max-width: 900px) {

		.linea-flex{flex-direction: column;}
		.card-servicios {padding:40px 0px;}
		.bloq2{ padding: 65px 0 5px;}
		.pp{font-size: 20px;}
		.texto-card-servicios{gap:10px;}
	}
	

}

/* 2.2 -------- SECCION TB HAGO ESTO--------- */

.secciontb { background-color: #9ab7f9;}

@scope (.secciontb) {

	.contenedor-flex {align-content: center; gap: 80px;	}
	.bloq1{ gap: 10px;}
	.bloq2 {border-left: 1px solid black; padding-left: 20px;}
	.noboton{margin-bottom: 10px; background-color: transparent;}

	@media (max-width: 900px) {
		.contenedor-flex {flex-direction: column; gap: 20px;}
	}
}

/* 2.3 -------- SECCION SOBRE MI --------- */


.seccion-yo{
height: 700px;

}

@scope (.seccion-yo) {

	.center{ align-items: center;  justify-content: center;}
	.contenedor-flex {
		gap: 80px;
	}
	.texto{gap: 10px;}
	.foto {
	width: auto; 
	height: 160px; 
	background-color: #EDEDED;
	object-fit: cover;
	}

@media (max-width: 900px) {
	.contenedor-flex{ flex-direction: column;}
	.foto{height: 120px; width: AUTO}
}
}


/* 3.1 -------- TODOS MIS PROYECTOS --------- */

.todos-los-proyectos{
	gap:25px;
	flex-wrap: wrap;
}

.filtro-btn.activo {
    border: 1px solid black;
}

@scope (.todos-los-proyectos) {
	.card {
	cursor: pointer;	
	flex: 1 1 calc(33.33% - 25px); 
}


	@media (max-width: 1000px) {
		.card {
			flex-basis: calc(50% - 25px);
		}
	}

	@media (max-width: 600px) {
		.card {
			flex-basis: calc(100% - 25px); 
		}
	}
}

.un-proyecto { gap:25px }

@scope (.un-proyecto) {


	.imagen-portada { 
	max-width:1080px;
	height: 500px; width: 100%;
	object-fit: cover;
	margin-bottom: 20px;
	}
	.movil{display: none;}
	.web{display: block;}

	.contenedor-flex{ align-items: flex-start;}
	.contenedor-info{ 
	width: 100%; min-width: 0;
    display: flex; flex-direction: row; justify-content:space-between; 
    flex: 0 1 auto;}
	.espacio{padding: 80px 0px; gap: 40px;}

	.titulo{ gap:60px; height: auto;}
	mark{ 
	background-color: var(--azul-claro);
    border: 1px solid #f2f2f22f; margin: 0 10px;
    height: 35px; border-radius: 3px; padding: 0 10px;
	}
	.margen{margin-top: 30px;}
	h2 { padding-top: 7px;}
	p {margin: 20px 0}
	.info-label{ text-decoration: underline; text-underline-offset: 5px; margin-top: 3px;}
	.info-value { text-align: right; line-height:35px}
	.bloque{height: 30px;}
	.bloq-info {
	width: 100%;
	border-radius:5px;
    gap: 10px;
	box-sizing: border-box;
	}
	.dos-imagenes{
    width: 100%; max-width: 1080px; 
	gap:25px; 
  	display: flex; 
	}

	.imagenes{ width:100%; max-width: 1080px; object-fit: cover;}
	.imagenesfit{ width:100%; max-width: 1080px; object-fit:contain;}

	.al-50{ max-width:49%; }
	.al-35 {max-width:35%; }
	.al-40 {max-width:39%; }
	
	@media (max-width: 800px) { .movil{display: block;} .web{display: none;}}


	@media (max-width: 750px) {
		h2{padding: 10px 0 20px;}
		.titulo{border-bottom: 1px solid black;}
		.tipoboton{margin-bottom: 10px;}
		p {margin: 10px 0}
		.espacio{padding: 10px 0 0; gap: 80px; }
		.mucho-texto{ display:none }
		
		.contenedor-flex{flex-direction: column;}
		.contenedor-info{align-items: center;}
		.dos-imagenes{flex-direction: column;}
		.margen{margin-top: 20px;}
		.info-label{text-decoration: none; }


		.al-50{ max-width:100%; }
		.al-35 {max-width:100%; }
		.al-40 {max-width:100%; }



	}
}


/* ---------  SECCION CONTACTO ---------  */

.contacto { height: 100vh;}
@media (max-width: 750px){.contacto { height: auto;}}
	

@scope (.contacto) {

	.arriba { align-items: flex-start; justify-content: flex-start;}

	h4{margin-bottom: 80px; } 
	
	p {padding: 5px 5px 20px;}
	mark {
	border-radius: 3px;
  	background-color: var(--amarillo);
  	padding: 0px 2px 0px 2px;
	}
	address{margin: auto 0}
	.flex-linea-separados{
		
		border-bottom: black 1px solid ;}


	form {
	width: 100%;
	display: flex; flex-direction: column;
	gap: 20px;
	}
	.imput{
	padding: 9px;
	border: none;
	background-color: var(--azul-claro);
	color:black;
	border-radius: 4px;	
		
	}
	textarea {height: 110px;}

	button{padding: 8px; border: 1px solid black ; }
	.card{background-color: #ffffff;gap: 10px; height: 80px;}

	@media (max-width: 750px) {
		.arriba{flex-direction: column;}
		.bloq{gap: 15px;}
		h4{margin-top: 80px; margin-bottom: 80px;} 

		.gap80{gap: 30px;}

		form{ 
		width: 87%;
		margin-top: 15px;
		margin-bottom: 40px;
		background-color: #ffffff; padding: 20px;
		border: 1px solid #e1e1e1 ;
		border-radius: 5px;
		}

	}
}



/* ---------  SECCIÓN CV Y PORFOLIO ---------  */


@scope (.presentacion) {


	.bloq0 {margin-bottom: 50px; margin-top: 100px;
	align-items: flex-end; justify-content: flex-start;}
	.flex-start{align-items: flex-start; justify-content: flex-start;}
	
	.imagen-yo {width: 148px;}

	h1{font-size: 23px; font-weight: 400;}
	h2{font-size: 23px; font-weight: 400; margin-bottom: 10px;}
	h5{font-size: var(--size-pp); font-weight: 400;}
	h6{font-size: var(--size-pp); text-decoration: underline; text-underline-offset: 4px; margin-bottom: 8px;}
	hr {  height: 1px; background-color: #000000; margin: 2rem 0;}
	li{margin-top: 0px;}
	ul{font-size: var(--size-pp); font-weight: 200;color: var(--negro); list-style-type: square; padding: 0;margin: 0px;list-style-position: inside;}

	.noboton{
	padding: 3px 7px;
	font-size: 17px;
	}
	mark{
	font-size: var(--size-xxs);
	font-weight: 300;
	border-radius: 3px;
  	background-color: var(--azul-claro);
  	padding: 2px 6px; 
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
	.subrayado{text-decoration:underline; }

	.tex-mini{font-size: 15px; font-weight: 300; text-transform: uppercase;}
	.flex-wrap{flex-wrap: wrap;}
	
	.max-article{flex-basis: calc(50% - 40px); gap:8px}
	.imagen-proyectos{width: 100%; height: 290px; margin-top: 30px; object-fit: cover;}
	.imagen-indiv{width: 100%;object-fit: cover;}
	.flecha{
	height: 15px; width: 15px; margin-left: 10px;
    background-color: black; 
    mask: url("IMG/CV/Vector.svg") no-repeat center;
    mask-size: contain;}
	 
	.info-curro{
	display: flex; flex: 1; 
	flex-direction: column; justify-content: space-between
	}

	.info-tag{
	display: flex;
	flex-direction: column;
	gap:7px;
	}

	.dos-imagenes{
    width: 100%; max-width: 1080px; 
	gap:25px; 
  	display: flex; 
	}

	.imagenes{ width:100%; max-width: 1080px; object-fit: cover;}
	.imagenesfit{ width:100%; max-width: 1080px; object-fit:contain;}

	.al-50{ max-width:49%; }
	.al-35 {max-width:35%; }
	.al-25 {max-width:23.1%; }
	.al-40 {max-width:39%; }
	
	@media (max-width: 800px) { .movil{display: block;} .web{display: none;}}
	
}