/*----------------- PATRÓN DE DISEÑO "DETALLE DE ESTUDIO"  -----------------*/

.detalle-estudio {
	display: flex;	
	padding: 80px 0!important;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;	
	background: var(--white, #FFF);
    margin: 24px auto 80px auto!important;	
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color: var(--gray-line, #DCDCDC);
}

.detalle-estudio.dark {
    background-color: #313131;
    padding: 0 !important;
	margin-bottom: 40px;
}

.detalle-estudio.dark .content {
	gap: 0;	
}

.detalle-estudio.dark .content .description {
	padding: 1em;
	width: auto;
}

.detalle-estudio.dark .content .description h2,
.detalle-estudio.dark .content .description p {
	color: white;
}
.detalle-estudio.dark .content .description button {
	background-color: white;
	border: none;
	color: black;
}

.detalle-estudio .card-content-card img {
	width: 100%;
}

.detalle-estudio .content {
	display: flex;
	align-items: flex-start;
    gap: 104px;
/*	gap: inherit;*/
	align-self: stretch;
}

.detalle-estudio .content .card-content-card .card-content {
	width: 416px;
}

.detalle-estudio .content .description {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 56px;
	align-self: stretch;
}

.detalle-estudio .content .description .content{
    display: flex;
    flex-direction: column;	
	align-items: flex-start;
	gap: 24px;
}

.detalle-estudio .content .description .content .heading{
    display: flex;
/*    width: 824px;*/
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.detalle-estudio .content .description .content .heading .detail {
	display: flex;
	align-items: center;
	gap: 16px;
	align-self: stretch;
}

.detalle-estudio .content .description .content .heading .detail span.line-vert {
	width: 1px;
	height: 16px;
	background: rgba(0, 0, 0, 0.20);
}

.detalle-estudio .content .description .content .description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}
.detalle-estudio .content .description p {
	font-family: var(--font-family-heading);
	font-size: 16px;
}

/*- Cortar texto a 8 líneas -*/
.detalle-estudio .content .description .content .description .line-clamp {
  width: auto;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detalle-estudio .content .description .content .btns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.detalle-estudio .content .description .content .btns .buttons-group {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	align-self: stretch;
}

.detalle-estudio .content .description .content .btns .tags-group {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
}

.detalle-estudio .content .description .content .label-tag {
    color: white;
    background-color: black;
    text-transform: uppercase;
  }



/*----------------- BREAKPOINTS del Patrón de Diseño DETALLE de OBRA  -----------------*/

/*- (0, 639) -*/

@media (min-width: 0px) and (max-width: 639px) {

.detalle-estudio {
    width: calc(100% - 24px);
    padding: 40px 16px;
    align-self: stretch;
}
	
.detalle-estudio .content {
    flex-direction: column;
    gap: 64px;
}
		
.detalle-estudio .content .description .content .heading .detail {
    gap: 8px;
}

	
.detalle-estudio .content .card-content-card {
    width: 100%;
}
	
.detalle-estudio .content .card-content-card .card-content {
    width: 100%;
}
	
.detalle-estudio .content .description .content .btns .buttons-group {
    flex-direction: column;
    width: 100%;
   flex-wrap: wrap;	
}
	
.detalle-estudio .content .description .content .btns {
    width: 100%;
}
	
.detalle-estudio .content .description .content .btns .buttons-group button{
    width: 100%;
}
	
.detalle-estudio .content .description .content .btns .tags-group {
	flex-wrap: wrap;
}	
	
}


/*- (640, 799) -*/

@media (min-width: 640px) and (max-width: 799px) {

.detalle-estudio {
    width: calc(100% - 24px);
    padding: 40px;
    align-self: stretch;
}
	
.detalle-estudio .content {
    flex-direction: column;
    gap: 64px;
}
		
.detalle-estudio .content .description .content .heading .detail {
    gap: 8px;
}

.detalle-estudio .content .description .content .btns .buttons-group {
    flex-direction: column;
    width: 100%;
    flex-wrap: wrap;	
}
	
.detalle-estudio .content .description .content .btns {
    width: 100%;

}
	
.detalle-estudio .content .description .content .btns .buttons-group button{
    width: 100%;
}
	
.detalle-estudio .content .description .content .btns .tags-group {
	flex-wrap: wrap;
}

	
.detalle-estudio .content .card-content-card {
    width: 100%;
}
	
.detalle-estudio .content .card-content-card .card-content {
    width: 100%;
}
	
}


/*- (800, 959) -*/

@media (min-width: 800px) and (max-width: 959px) {

.detalle-estudio {
    padding: 40px;
}

.detalle-estudio .content {
	gap: 40px;
	align-self: stretch;
}	

.detalle-estudio .content .card-content-card .card-content {
	min-width: 300px;
    max-width: 300px;
}
	
.detalle-estudio .content .dcard-content-card .state-hover .card-content .layout-content .image {
	display:none;
	visibility: hidden;
}
	


.detalle-estudio .content .description .content .heading .detail {
    gap: 8px;
}
	
.detalle-estudio .content .description .content .btns .buttons-group {
    flex-direction: column;
}
	
.detalle-estudio .content .description .content .btns .buttons-group button{
    width: 100%;
	flex-wrap: wrap;
}
.detalle-estudio .content .description .content .btns .tags-group {
	flex-wrap: wrap;
}

}


/*- (960, 1023) -*/

@media (min-width: 960px) and (max-width: 1023px) {

.detalle-estudio {
    padding: 40px 24px;
}

.detalle-estudio .content {
    gap: 40px;
}

.detalle-estudio .content .card-content-card .card-content {
	min-width: 300px;
    max-width: 300px;
}


.detalle-estudio .content .card-content-card .card-content .layout-content .image {
	display:none;
	visibility: hidden;
}
	
.detalle-estudio .content .description .content .btns .tags-group {
	flex-wrap: wrap;
}	

}


/*- (1024, 1279) -*/

@media (min-width: 1024px) and (max-width: 1279px) {

.detalle-estudio {
    padding: 40px 24px;
}

.detalle-estudio .content {
	gap: 40px;
}
	
.detalle-estudio .content .description {
	align-self: stretch;
}

.detalle-estudio .content .description .content .btns {
    width: 100%;
}

.detalle-estudio .content .description .content .btns .tags-group {
	flex-wrap: wrap;
}
	
}


/*- (1440, 1727) -*/

@media (min-width: 1440px) and (max-width: 1727px) {
	
.detalle-estudio {
    padding: 40px 0;
}
	
.detalle-estudio .content {
	gap: 120px;
	align-self: stretch;
}
	
.detalle-estudio .content .description .content .btns .tags-group {
	flex-wrap: wrap;
}	
	
}


/*- (+1728) -*/

@media (min-width: 1440px) {
	
.detalle-estudio .content {
	gap: 120px;
	align-self: stretch;
}

.detalle-estudio .content .card-content-vertical {
    width: 416px;
}
	
.detalle-estudio .content .description {
	width: 100%;
	flex: 1 0 0;
}
	
}

/*----------------- FIN BREAKPOINTS del Patrón de Diseño DETALLE de OBRA -----------------*/