/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/*<!-- ======= BLOQUE CURATORIAL: VÍCTOR ARGÁEZ victor-argaez.html ======= -->*/
/* —— Curatorial look —— */
.va-article {
	max-width: 1140px;
	margin: 0 auto;
}

.va-title {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	letter-spacing: .2px;
	line-height: 1.15;
}

.va-subtitle {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .9
}

.va-lead {
	font-family: "Lato", "Poppins", sans-serif;
	font-size: 1.125rem;
	line-height: 1.75;
	opacity: .95
}

.va-rule {
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06));
	border: 0;
	margin: 1.25rem 0 2rem
}

.va-section h3 {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 2rem;
	margin-bottom: .75rem;
	opacity: .92
}

.va-section p {
	line-height: 1.8
}

.va-dropcap:first-letter {
	float: left;
	font-family: "Playfair Display", serif;
	font-size: 3.2rem;
	line-height: 1;
	margin: .1rem .6rem .1rem 0;
	opacity: .9
}

.va-pullquote {
	font-family: "Playfair Display", serif;
	font-size: 1.25rem;
	line-height: 1.6;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .06);
	border-radius: .5rem;
	margin: 1.5rem 0
}

.va-figure {
	position: relative;
	overflow: hidden;
	border-radius: .8rem;
	background: rgba(255, 255, 255, .04)
}

.va-figure img {
	width: 100%;
	display: block;
	object-fit: cover
}

.va-figcaption {
	font-size: .92rem;
	opacity: .75;
	padding: .6rem .9rem
}

.va-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem
}

@media (min-width: 768px) {
	.va-gallery {
		grid-template-columns: 1fr 1fr
	}
}

/* —— Sidebar card —— */
.va-aside {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 1rem;
	backdrop-filter: blur(6px)
}

.va-aside h4 {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .95rem;
	opacity: .9
}

.va-aside .meta {
	font-size: .95rem;
	line-height: 1.7
}

.va-chip {
	display: inline-block;
	padding: .25rem .6rem;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 999px;
	font-size: .85rem;
	margin: .2rem .25rem 0 0;
	opacity: .85
}

.btn-outline-light-soft {
	--tw: rgba(255, 255, 255, .18);
	border: 1px solid var(--tw);
	color: #fff;
	background: transparent
}

.btn-outline-light-soft:hover {
	background: rgba(255, 255, 255, .12)
}


/*<!-- ======= SECCIÓN ENSAYO / RENACER MAYA ======= -->*/
/* Extiende el look curatorial existente */
.va-essay {
	max-width: 100%;
	margin: 0 auto;
}

.va-essay .va-heading {
	font-family: "Poppins", sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: .92
}

.va-essay .va-lead {
	font-family: "Lato", "Poppins", sans-serif;
	font-size: 1.125rem;
	line-height: 1.8;
	opacity: .95
}

.va-essay .va-dropcap:first-letter {
	float: left;
	font-family: "Playfair Display", serif;
	font-size: 3.2rem;
	line-height: 1;
	margin: .15rem .6rem .1rem 0;
	opacity: .9
}

.va-essay p {
	line-height: 1.9
}

.va-quote {
	font-family: "Playfair Display", serif;
	font-size: 1.15rem;
	line-height: 1.7;
	padding: 1rem 1.2rem;
	border-left: 3px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .05);
	border-radius: .5rem
}

.va-rule {
	height: 1px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06));
	border: 0;
	margin: 2rem 0
}

.va-note {
	font-size: .95rem;
	opacity: .8
}

/* Lista curatorial numerada */
.va-olist {
	counter-reset: item;
	list-style: none;
	padding-left: 0;
	margin-left: 0
}

.va-olist li {
	position: relative;
	padding-left: 3.2rem;
	margin: .9rem 0;
	line-height: 1.8;
	background: transparent
}

.va-olist li::before {
	counter-increment: item;
	content: counter(item) ".";
	position: absolute;
	left: 0;
	top: .1rem;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	width: 2.4rem;
	text-align: right;
	opacity: .9
}

.va-olist h5 {
	margin: 0 0 .25rem;
	font-family: "Poppins", sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .95rem
}

/*<!-- ======= LÍNEA DE TIEMPO · TRAYECTORIA ======= -->*/
:root {
	--va-accent: #ffc800;
}

.va-timeline-wrap {
	max-width: 1100px;
	margin: 0 auto;
}

.va-tl-heading {
	font-family: "Playfair Display", serif;
	font-weight: 800;
	letter-spacing: .2px;
}

.va-tl-underline {
	width: 180px;
	height: 4px;
	background: var(--va-accent);
	border-radius: 2px;
	margin: .5rem 0 1.5rem;
}

.va-timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 2.75rem;
}

.va-timeline::before {
	content: "";
	position: absolute;
	left: 1.5rem;
	top: .25rem;
	bottom: .25rem;
	width: 3px;
	background: var(--va-accent);
}

.va-tl-item {
	position: relative;
	margin: 1.1rem 0;
}

.va-tl-dot {
	position: absolute;
	left: 1.5rem;
	transform: translate(-50%, .4rem);
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 2px solid var(--va-accent);
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 3px rgba(255, 200, 0, .12);
}

.va-tl-dot i {
	font-size: 1rem;
	color: var(--va-accent);
	opacity: .95
}

/* DETAILS / SUMMARY */
.va-tl-details {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: .75rem;
	overflow: hidden;
}

.va-tl-details[open] {
	border-color: rgba(255, 255, 255, .18);
}

.va-tl-summary {
	list-style: none;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 1rem;
}

.va-tl-summary::-webkit-details-marker {
	display: none;
}

.va-tl-year {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .04em
}

.va-tl-brief {
	color: rgba(255, 255, 255, .8)
}

/* caret */
.va-caret {
	margin-left: auto;
	width: 1rem;
	height: 1rem;
	position: relative;
}

.va-caret::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: .55rem;
	height: .55rem;
	border-right: 2px solid rgba(255, 255, 255, .8);
	border-bottom: 2px solid rgba(255, 255, 255, .8);
	transform: rotate(-45deg);
	transition: transform .2s ease;
}

.va-tl-details[open] .va-caret::before {
	transform: rotate(45deg);
}

.va-tl-body {
	padding: .2rem 1rem 1rem;
}

.va-tl-desc {
	color: rgba(255, 255, 255, .9);
	line-height: 1.75;
}

.va-tl-desc p {
	margin: .4rem 0;
}

/* —— FIX de solapamiento dot ↔ título —— */
#trayectoria .va-timeline {
	margin-top: 1.25rem;
}

#trayectoria .va-timeline::before {
	left: 1.1rem;
	top: 1.4rem;
}

/* línea más a la izquierda y más abajo */

#trayectoria .va-tl-item:first-child {
	margin-top: .5rem;
}

/* mueve el dot un poco a la izquierda y alinéaló verticalmente */
#trayectoria .va-tl-dot {
	left: 30px;
	/* antes: 1.5rem */
	transform: translate(-50%, .55rem);
	z-index: 2;
}

/* da espacio suficiente para que el año/título no queden debajo del dot */
#trayectoria .va-tl-summary {
	padding-left: 4.25rem;
	/* clave: despeja ~36px del dot + margen */
	min-height: 40px;
	/* asegura altura mínima en el header */
	align-items: center;
	/* centra verticalmente el texto */
}

#trayectoria .va-tl-year {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: .5rem;
	padding: .1rem .45rem;
	font-weight: 700;
	letter-spacing: .04em;
}

/* Responsive */
@media (max-width: 575.98px) {
	.va-timeline {
		padding-left: 2.4rem;
	}

	.va-timeline::before {
		left: 1.2rem;
	}

	.va-tl-dot {
		left: 1.2rem;
		width: 30px;
		height: 30px;
	}

	.va-tl-summary {
		padding: .8rem .9rem;
	}

	.va-tl-body {
		padding: .2rem .9rem .9rem;
	}

	#trayectoria .va-timeline::before {
		left: .95rem;
	}

	#trayectoria .va-tl-dot {
		left: 1.5rem;
		transform: translate(-50%, .65rem);
	}

	#trayectoria .va-tl-summary {
		padding-left: 3.7rem;
		min-height: 36px;
	}
}

/*<!-- ======= END BLOQUE CURATORIAL: VÍCTOR ARGÁEZ victor-argaez.html======= -->*/
