@font-face{
	font-family: 'Montserrat';
	font-weight: 300;
	src: url("../fonts/montserrat-light.woff2") format('woff2');
	src: url("../fonts/montserrat-light.woff") format('woff');
}

@font-face{
	font-family: 'Montserrat';
	font-weight: 400;
	src: url("../fonts/montserrat-regular.woff2") format('woff2');
	src: url("../fonts/montserrat-regular.woff") format('woff');
}

@font-face{
	font-family: 'Montserrat';
	font-weight: 500;
	src: url("../fonts/montserrat-medium.woff2") format('woff2');
	src: url("../fonts/montserrat-medium.woff") format('woff');
}

@font-face{
	font-family: 'Montserrat';
	font-weight: 600;
	src: url("../fonts/montserrat-semi-bold.woff2") format('woff2');
	src: url("../fonts/montserrat-semi-bold.woff") format('woff');
}

@font-face{
	font-family: 'Montserrat';
	font-weight: 600;
	src: url("../fonts/montserrat-semi-bold.woff2") format('woff2');
	src: url("../fonts/montserrat-semi-bold.woff") format('woff');
}

@font-face{
	font-family: 'Montserrat';
	font-weight: 670;
	src: url("../fonts/montserrat-bold.woff2") format('woff2');
	src: url("../fonts/montserrat-bold.woff") format('woff');
}

.titular{
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;	
	color: rgb(var(--color-celeste));
	font-size: 2rem;
}
.titular-blanco{
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;	
	color: rgb(var(--color-blanco));
	font-size: 2rem;
}
.volanta{
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;	
	color: rgb(var(--color-negro));
	font-size: 0.7rem;	
	background-color: rgb(var(--color-amarillo));
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	position: absolute;
	top: 2rem;
	left: 0.5rem;
}
.volanta-detalle{
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;	
	color: rgb(var(--color-negro));
	font-size: 0.7rem;	
	background-color: rgb(var(--color-amarillo));
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	top: 2rem;
	left: 0.5rem;
    width: -moz-fit-content;
    width: fit-content;        /* fallback moderno */
    white-space: nowrap;       /* quita saltos que “engordan” el botón */ 	
}
.titular-experiencia{
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;	
	color: rgb(var(--color-celeste));
	font-size: 1.4rem;
}
.texto-detalle-card{
	font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;	
	color: rgb(var(--color-gris));
	font-size: 0.9rem;
	line-height: 1.2rem;
  	min-height: 3.6rem; /* 3 líneas como mínimo */
  	max-height: 3.6rem; /* se corta en 3 líneas */
    overflow: hidden;        /* oculta el texto sobrante */
    display: -webkit-box;    /* necesario para el ellipsis multilínea */
    -webkit-line-clamp: 3;   /* 👈 cantidad de líneas visibles */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* agrega "…" al final */	

}
.texto-footer{
	font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;	
	color: rgb(var(--color-blanco));
	font-size: 0.8rem;
	line-height: 1.2rem;
}
.titulo-texto-footer{
	font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;	
	color: rgb(var(--color-blanco));
	font-size: 0.8rem;
}
.copy-seccion{
    font-size: 1.1rem;
    font-weight: 400;
    font-optical-sizing: auto;
    font-style: normal;	    
    margin: 0;
    padding: 0;
    line-height: 1.5rem;
	color: rgb(var(--color-blanco));
	max-width: 70ch;
}
.titulo-combos{
	font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;	
	color: rgb(var(--color-celeste));
	font-size: 1rem;
}
.texto-combos{
	font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;	
	color: rgb(var(--color-negro));
	font-size: 0.85rem;
}

@media (max-width: 700px){
	.volanta{
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;	
		color: rgb(var(--color-negro));
		font-size: 0.7rem;	
		background-color: rgb(var(--color-amarillo));
		padding: 0.15rem 0.5rem;
		border-radius: 0.5rem;
		position: absolute;
		top: 2rem;
		left: 0.5rem;
	}
	.titulo-combos{
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;	
		color: rgb(var(--color-celeste));
		font-size: 1rem;
		line-height: 1.1rem;
	}
	.texto-combos{
		font-optical-sizing: auto;
		font-weight: 500;
		font-style: normal;	
		color: rgb(var(--color-negro));
		font-size: 0.85rem;
		line-height: 1rem;
	}	
}