/*
@font-face 
{
	font-family: "Roboto-Light";
    src: url(/assets/css/Roboto-Light.ttf) format("truetype");
    font-display: swap;
}
@font-face 
{
	font-family: "Roboto-Black";
    src: url(/assets/css/Roboto-Black.ttf) format("truetype");
    font-display: swap;
}
@font-face 
{
	font-family: "Roboto-Medium";
    src: url(/assets/css/Roboto-Medium.ttf) format("truetype");
    font-display: swap;
}@font-face 
{
	font-family: "Roboto-Regular";
    src: url(/assets/css/Roboto-Regular.ttf) format("truetype");
    font-display: swap;
}
@font-face 
{
	font-family: "Roboto-Thin";
    src: url(/assets/css/Roboto-Thin.ttf) format("truetype");
    font-display: swap;
}
*/

@font-face 
{
	font-family: "Roboto";
    src: url(/assets/css/RobotoCondensed.ttf) format("truetype");
    font-display: swap;
}
/*
*
{
	font-family: 'Roboto-Regular'!important;
}
.rb-l
{
	font-family: 'Roboto-Light'!important
}
.rb-b
{
	font-family: 'Roboto-Black'!important
}
.rb-m
{
	font-family: 'Roboto-Medium'!important
}
.rb-r
{
	font-family: 'Roboto-Regular'!important
}
.rb-t
{
	font-family: 'Roboto-Thin'!important
}
*/

*
{
	font-family: 'Roboto'!important;
	font-weight: 300;
	position: relative;
}
.rb-l
{
	font-family: 'Roboto'!important;
	font-weight: 200;
}
.rb-b
{
	font-family: 'Roboto'!important;
	font-weight: 900;
}
.rb-m
{
	font-family: 'Roboto'!important;
	font-weight: 400;
}
.rb-r
{
	font-family: 'Roboto'!important;
	font-weight: 300;
}
.rb-t
{
	font-family: 'Roboto'!important;
	font-weight: 100;
}

.text-muted
{
	color: rgba(33,37,41,0.4)!important;
}

@media (min-width: 1400px) 
{
	.container
	{
		max-width: 1100px
	}
}


.logo
{
	width: 220px
}

.text-amarillo
{
	color: #ffc107
}
.bg-amarillo
{
	background: #ffc107;
}

.fs-5 
{
    font-size: 1.50rem !important;
}

.fs-6
{
    font-size: 1.25rem !important;
}
.fs-7
{
    font-size: 1.15rem !important;
}
.hero-section 
{
	background-image: url('/assets/images/fondo-kaeser-v1.webp'); 
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	min-height: 130vh;
	position: relative;
	color: #ffffff;
}

.hero-overlay 
{
	background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.1) 100%);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.content-wrapper 
{
	position: relative;
	z-index: 2;
}

.navbar-nav .nav-link 
{
	color: #ffffff;
	margin-left: 3.5rem;
	transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover 
{
	color: #ffc107;
}

.nav-link.active
{
	color: #ffc107 !important;
}

.separadorAmarillo
{
	width: 45px;
	height: 8px;
	background-color: #ffc107;
	border: none;
	opacity: 1; 
}

.btn-participar 
{
	background-color: #ffb600; 
	color: #000000;
	font-weight: 700;
	padding: 12px 35px;
	border-radius: 50px;
	border: none;
}

.btn-participar:hover 
{
	color: #ffb600;
	background-color: #000000;
}


.info-general
{
	padding-top: 5rem;
	padding-bottom: 8rem; 
	height: 90vh;
}

.card-amarilla 
{
	background-color: #ffcc00;
	color: #000000;
	border-radius: 1.2rem;
	z-index: 2;
}

.building-img 
{
	border-radius: 1.2rem;
	width: 100%;
	z-index: 2;
}

.logoBlanco 
{
	position: absolute;
	bottom: 15%; 
	left: 50%;
	transform: translateX(-50%); 
	background-color: #ffffff;
	border-radius: 1rem;
	z-index: 10;
	width: 380px;
}









.quienes-participan
{	
	background: url('/assets/images/fondo-quienes-participan.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 8rem 0;
	padding-top: 7rem!important;
	color: #000000;
}

.tilted-title 
{	
	font-size: 8rem;
	line-height: 1.1;
	transform: rotate(-8deg) skewX(-8deg); 
	display: block;
	margin-bottom: 3rem;
}

.pill-lugar 
{	
	width: 20%;
	background-color: #ffffff;
	color: #000000;
	padding: 10px 20px;
	border-radius: 50px;
	font-weight: 500;
	/*box-shadow: 0 4px 6px rgba(0,0,0,0.05); */
	text-align: center;
}

.tituloPiston
{	
	font-size: 3.5rem;
	line-height: 1;
	margin-top: -5px;
}

.btn-convocatoria 
{	
	background-color: #000000;
	color: #ffcc00;
	padding: 12px 40px;
	border-radius: 50px;
	border: none;
	transition: all 0.3s ease;
}

.btn-convocatoria:hover 
{	
	background-color: #ffcc00;
	color: #000000;
}
.btn-convocatoria.convocatoria:hover 
{	
	background-color: #ffcc00;
	color: #000000;
	border: 2px solid black;
}







.como-funciona-titulo
{
	text-transform: uppercase;
	font-size: 8rem;
	line-height: 1;
	transform: rotate(-8deg) skewX(-8deg); 
	display: block;
	margin-bottom: 3rem;
}

.timeline 
{
	position: relative;
	max-width: 700px;
	margin: 0 auto;
}

.row-timeline
{
	height: 90px;
}



.timeline::before 
{
	content: '';
	position: absolute;
	top: 0;
	bottom: 4rem;
	left: 50%;
	width: 4px;
	background-color: #ffb600;
	transform: translateX(-50%);
	z-index: 1;
}

.timeline-content 
{
	font-size: 1.3rem; /*1rem;*/
	line-height: 1.4;
}



.timeline-circle 
{
	width: 45px;
	height: 45px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.3rem;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

.circle-solid 
{
	background-color: #ffb600;
	color: #000000;
}

.circle-outline 
{
	background-color: #000000;
	color: #ffffff;
	border: 4px solid #ffb600;
}

.btn-convocatoria-alt
{
	background-color: #ffb600;
	color: #000000;
	font-weight: 800;
	font-size: 0.85rem;
	border-radius: 50px;
	padding: 8px 25px;
	text-transform: uppercase;
	display: inline-block;
	text-decoration: none;
}
.btn-convocatoria-alt:hover
{
	background-color: black;
	color: #ffb600;
	border: 2px solid #ffb600;
	
}


.para-participar
{
	font-size: 4rem;
}




.form-container 
{
	max-width: 750px;
	margin: 0 auto;
	padding: 3rem 1rem;
	color: #212529;
}

/* Títulos de cada sección */
.section-title 
{
	font-weight: 800;
	font-size: 1.3rem;
	margin-top: 2.5rem;
	margin-bottom: 1.2rem;
}

.custom-input 
{
	background-color: #f4f4f4;
	border: none;
	border-radius: 15px; 
	padding: 14px 20px;
	font-size: 1.5rem;
	color: #333;
	box-shadow: none !important; 
	font-family: 'Roboto'!important;
}

.custom-input::placeholder 
{
	color: #999;
}

.custom-input:focus 
{
	background-color: #ebebeb;
}

.form-check-input[type="radio"] 
{
	width: 1.35rem;
	height: 1.35rem;

	background-color: #fff;
	background-image: radial-gradient(
		circle,
		#ddd 0,
		#ddd 5px,
		transparent 5.5px
	);

	border: 2px solid #d9d9d9;
	border-radius: 50%;

	cursor: pointer;
	box-shadow: none;
}

.form-check-input[type="radio"]:checked 
{
	background-color: #fff;
	border-color: #d9d9d9;

	background-image: radial-gradient(
		circle,
		#ffb400 0,
		#ffb400 5px,
		transparent 5.5px
	);
}

.form-check-input[type="radio"]:focus 
{
	border-color: #d9d9d9;
	box-shadow: 0 0 0 0.2rem rgba(255, 180, 0, 0.15);
}

/*

.form-check-input
{
	background-color: red;
	border-color: blue;
}

.form-check-input:checked 
{
	background-color: #ffcc00;
	border-color: #ffcc00;
}

.form-check-label 
{
	font-weight: 500;
	color: #333;
}
*/

.upload-box 
{
	border: 2px dashed #cccccc;
	border-radius: 12px;
	padding: 35px 25px 45px 25px; /
	position: relative; 
	margin-top: 2rem;
	background-color: #ffffff;
}

.upload-icon 
{
	width: 40px;
	height: 40px;
	fill: #000000;
}

.btn-upload 
{
	position: absolute;
	bottom: -30px; 
	left: 50%;
	transform: translateX(-50%);
	background-color: #ffcc00; 
	color: #000000;
	font-weight: 800;
	font-size: 2rem;
	padding: 10px 70px;
	border-radius: 50px;
	border: none;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
	transition: background-color 0.3s;
}

.btn-upload:hover 
{
	background-color: #e6b800;
}

.terminosCheck
{
	width: 2rem!important;
	height: 2rem!important;
}


.terminosCheck
{
	width: 2rem!important;
	height: 2rem!important;

	background-image: radial-gradient(
		circle,
		#ddd 0,
		#ddd 8px,
		transparent 5.5px
	)!important;
}

.terminosCheck:checked 
{

	background-image: radial-gradient(
		circle,
		#ffb400 0,
		#ffb400 8px,
		transparent 5.5px
	)!important;
}

footer
{
	padding: 70px 0px
}

.cargarArchivoDiv
{
	border: 2px dashed #ccc;
	cursor: pointer
}
@media (max-width: 991px) and (min-width : 769px)
{
	.quienes-participan
	{
		padding-top: 60rem!important;
	}
}
@media (max-width: 1800px) and (min-width : 990px)
{
	.quienes-participan
	{
		padding-top: 20rem!important;
	}
}

@media (max-width: 991px) 
{
    #navbarNav 
	{
        background-color: rgba(15, 15, 15, 0.95); 
        padding: 1rem 1.5rem;
        border-radius: 8px; 
        margin-top: 15px; 
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); 
        border: 1px solid rgba(255, 255, 255, 0.05); 
    }

    #navbarNav .navbar-nav 
	{
        width: 100%;
        align-items: center;
    }

    
    #navbarNav .nav-item 
	{
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
    }

    #navbarNav .nav-item:last-child 
	{
        border-bottom: none;
    }

    #navbarNav .nav-link 
	{
        color: #ffffff; 
        padding: 12px 0;
        font-size: 1.1rem;
        transition: color 0.3s ease;
    }

    #navbarNav .nav-link.active,
    #navbarNav .nav-link:hover 
	{
        color: #ffc107; 
        font-weight: 600;
    }
	
    .navbar-toggler 
	{
        background-color: #ffc107!important; 
        border: none!important; 
        padding: 0.6rem 0.8rem!important;
        border-radius: 8px!important; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4)!important; 
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease!important; 
    }

    .navbar-toggler .navbar-toggler-icon 
	{
        filter: brightness(0)!important; 
    }

    .navbar-toggler:hover 
	{
        background-color: #e0a800!important;
        transform: translateY(-2px)!important; 
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5)!important; 
    }

    .navbar-toggler:active,
    .navbar-toggler:focus 
	{
        background-color: #e0a800!important;
        transform: translateY(-1px)!important; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4)!important;
        outline: none!important; 
    }
	

	.logoBlanco 
	{
		position: relative;
		bottom: auto;
		left: auto;
		transform: none;
		margin: -40px auto 20px auto; 
	}
	.info-general
	{
		padding-bottom: 4rem;
	}
}
@media (max-width: 768px) 
{	
	.tilted-title, .como-funciona-titulo
	{
		font-size: 5rem;
	}
	
	.para-participar
	{
		font-size: 3rem;
	}
	.tech-title 
	{
		font-size: 2.2rem;
	}
	.participantes-section 
	{
		padding: 4rem 0;
	}
	.info-general
	{
		min-height: 150vh!important;
	}
	.quienes-participan
	{
		padding-top: 30rem!important;
	}
	.pill-lugar 
	{	
		width: 30%;
	}
	
	

	/* Forzamos que todos los pasos se alineen a la derecha */
	.step-left 
	{
		justify-content: flex-end;
	}



	/* El texto de la izquierda ahora se alínea a la izquierda */
	.content-left 
	{
		text-align: left;
		padding-left: 1.5rem;
	}
}

/*
@media (max-width: 576px) 
{
	.quienes-participan
	{
		padding-top: 28rem!important;
	}
}
*/


@media (max-width: 460px)
{
	.hero-section 
	{
		min-height: 100vh!important;
	}
	.info-general
	{
		min-height: 120vh!important;
	}
	.quienes-participan
	{
		padding-top: 12rem!important;
	}
	.tilted-title, .como-funciona-titulo
	{
		font-size: 4rem;
	}
	.para-participar
	{
		font-size: 3rem;
	}
	.logoBlanco 
	{
		
		width: 300px;
	}
	
	.fs-5 
	{
		font-size: 1.25rem !important;
	}

	.fs-6
	{
		font-size: 1rem !important;
	}
	.fs-7
	{
		font-size: .9rem !important;
	}
	.pill-lugar 
	{	
		width: 40%;
	}
	.tituloPiston 
	{
    	font-size: 2.5rem;
	}
	.timeline::before 
	{
		left: 30px;
	}
	.timeline-circle 
	{
		left: 41px;
	}
	
	.timeline-content 
	{
		width: calc(100% - 70px); 
		text-align: left;
		padding-left: 1.5rem;
		padding-right: 0;
	}
	.rowTimelineCenter
	{
		justify-content: end!important;
	}
	.rowTimelineCenter .ms-2
	{
		margin-left: 0!important;
	}
	.custom-input 
	{
		font-size: 1.25rem;
	}
	.footerTexto
	{
		margin-top: 2rem;
		text-align: center
	}
}
@media (min-width: 1600px)
{
	.modal-dialog 
	{
		top: 25vh;
		max-width: 40vw;

	}
}

.modal-content
{
	border-radius: 25px;
}
.modal-body
{
	padding: 50px;
	
}

.cortarFoto,.rehacerFoto,.subirFoto
{
	border-radius: 40px!important;
	font-family: 'Roboto'!important;
	font-weight: 700!important;
	padding: 5px 15px;
	font-size: 1.3rem!important;
	border: none!important;
	
}
.cortarFoto
{
	background: #FFC100!important;
	color: black!important;
}

.subirFoto
{
	color: #FFC100!important;
	background: black!important;
}

.rehacerFoto
{
	color: black!important;
	background: white!important;
}