/* ============================================
   STICKY BOTTOM NAVIGATION - Desktop
   ============================================ */
#iberdrola-landings-historia section.sticky-nav-container {
	position: relative;
	height: 100px;
}

#iberdrola-landings-historia .sticky-nav {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1266px;
	max-width: calc(100% - 32px);
	background: #FFFFFF;
	border-radius: 24px 24px 0 0;
	box-shadow: 0px -3px 20px 0px rgba(0, 0, 0, 0.15);
	clip-path: inset(-30px -30px 0px -30px);
	padding: 8px 0 0px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	z-index: 100;
	overflow: hidden;
	transition: padding 0.3s ease;
}

/* Cuando el timeline está abierto, agregar padding-bottom */
#iberdrola-landings-historia .sticky-nav:has(.sticky-nav__timeline--visible) {
	padding: 8px 0 16px;
}

#iberdrola-landings-historia .sticky-nav__buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0 16px;
}

#iberdrola-landings-historia .sticky-nav__back {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 4px;
	height: 44px;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s ease;
}

#iberdrola-landings-historia .sticky-nav__back:focus-visible {
	outline: 2px solid #007F33;
	outline-offset: 2px;
}

#iberdrola-landings-historia .sticky-nav__back-icon {
	width: 24px;
	height: 24px;
}

#iberdrola-landings-historia .sticky-nav__back-text {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #008C39;
	margin: 0;
	white-space: nowrap;
}

#iberdrola-landings-historia .sticky-nav__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 4px;
	height: 44px;
	border-radius: 50px;
	background: transparent;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

#iberdrola-landings-historia .sticky-nav__toggle:focus-visible {
	outline: 2px solid #007F33;
	outline-offset: 2px;
}

#iberdrola-landings-historia .sticky-nav__toggle-text {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #008C39;
	margin: 0;
}

#iberdrola-landings-historia .sticky-nav__toggle-icon {
	width: 24px;
	height: 24px;
	transition: transform 0.3s ease;
}

#iberdrola-landings-historia .sticky-nav__toggle-icon--open {
	transform: rotate(180deg);
}

#iberdrola-landings-historia .sticky-nav__timeline {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: auto;
	width: 100%;
	position: relative;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(20px);
	transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease;
	padding: 0;
}

#iberdrola-landings-historia .sticky-nav__timeline--visible {
	max-height: 100px;
	opacity: 1;
	overflow: visible;
	transform: translateY(0);
	padding: 6px 0 0 0;
}

#iberdrola-landings-historia .sticky-nav__timeline-line {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 2262px;
	height: 1px;
	background: #D8CFC7;
	opacity: 0.5;
	z-index: 1;
}

#iberdrola-landings-historia .sticky-nav__timeline-line::before {
	content: '';
	position: absolute;
	top: -0.5px;
	left: 0;
	width: 100%;
	height: 1px;
	background: #D8CFC7;
	opacity: 0.5;
	z-index: 1;
}

#iberdrola-landings-historia .sticky-nav__timeline-line::after {
	content: '';
	position: absolute;
	top: -0.5px;
	left: calc(47% - 1131px / 2);
	width: var(--progress-width, 0px);
	height: 2px;
	background: #00402A;
	transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 2;
}

#iberdrola-landings-historia .sticky-nav__periods {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 1265px;
	max-width: 100%;
	padding: 0 72px;
	height: 77.92px;
	position: relative;
	z-index: 3;
}

/* Desktop: wrapper no visible, periodos directamente en periods */
#iberdrola-landings-historia .sticky-nav__periods-wrapper {
	display: contents;
}

#iberdrola-landings-historia .sticky-nav__period {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 156px;
	min-height: 69px;
	justify-content: flex-end;
	text-decoration: none;
	transition: all 0.2s ease;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	border-radius: 4px;
}

#iberdrola-landings-historia .sticky-nav__period:focus-visible {
	outline: none;
}

#iberdrola-landings-historia .sticky-nav__period:focus-visible .sticky-nav__period-label {
	outline: 2px solid #007F33;
	outline-offset: 2px;
}

#iberdrola-landings-historia .sticky-nav__period-label {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 8px 12px;
	border-radius: 4px;
	background: transparent;
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 10;
}

#iberdrola-landings-historia .sticky-nav__period-label::after {
	content: '';
	width: 0;
	height: 0;
	margin-left: 0;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M5 12H19M19 12L12 5M19 12L12 19" stroke="%23FFFEFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
}

#iberdrola-landings-historia .sticky-nav__period--active .sticky-nav__period-label {
	background: #008C39;
}

/* Período activo de página: verde oscuro en desktop y mobile */
#iberdrola-landings-historia .sticky-nav__period--page-active.sticky-nav__period--active .sticky-nav__period-label {
	background: #00402A;
}

#iberdrola-landings-historia .sticky-nav__period--active .sticky-nav__period-label::after {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label {
	background: #008C39;
	color: #FFFEFF;
	gap: 8px;
	max-width: 210px;
	white-space: normal;
	text-align: left;
	width: max-content;
}

#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label::after {
	width: 24px;
	height: 24px;
	flex: none;
	margin-left: 0;
	opacity: 1;
}

#iberdrola-landings-historia .sticky-nav__period-label-text {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.3;
	color: #615D5A;
	margin: 0;
	white-space: nowrap;
	height: 20px;
	display: flex;
	align-items: center;
}

#iberdrola-landings-historia .sticky-nav__period-label-text-years {
	display: inline;
}

#iberdrola-landings-historia .sticky-nav__period-label-text-name {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__period--active .sticky-nav__period-label-text {
	color: #FFFEFF;
}

#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label-text {
	white-space: normal;
	height: auto;
	font-size: 14px;
	color: #FFFEFF;
	text-decoration: underline;
	text-wrap-style: pretty;
}

#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label-text-years {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label-text-name {
	display: inline;
}

#iberdrola-landings-historia .sticky-nav__period--active:hover .sticky-nav__period-label-text {
	white-space: normal;
	height: auto;
	font-size: 14px;
	text-decoration: none;
	max-width: 210px;
	width: max-content;
}

#iberdrola-landings-historia .sticky-nav__period--active:hover .sticky-nav__period-label-text-years {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__period--active:hover .sticky-nav__period-label-text-name {
	display: inline;
}

#iberdrola-landings-historia .sticky-nav__period-dot {
	width: 9.92px;
	height: 9.92px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #00402A;
	transition: all 0.2s ease;
}

#iberdrola-landings-historia .sticky-nav__period--active .sticky-nav__period-dot {
	background: #00402A;
}

#iberdrola-landings-historia .sticky-nav__period--completed .sticky-nav__period-dot {
	background: #00402A;
}

#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-dot {
	background: #008C39;
	border-color: #008C39;
}

/* Contador (solo mobile) */
#iberdrola-landings-historia .sticky-nav__counter {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__controls {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__nav {
	display: none;
}

#iberdrola-landings-historia .sticky-nav__prev,
#iberdrola-landings-historia .sticky-nav__next {
	display: none;
}

/* ============================================
   STICKY BOTTOM NAVIGATION - Desktop Behavior
   ============================================ */

/* Desktop: Comportamiento sticky similar a mobile */
@media (min-width: 769px) {
	/* En desktop el nav está position: absolute por defecto en el CSS base */
	/* Cuando aplicamos el comportamiento sticky, necesitamos hacer que sea fixed */
	#iberdrola-landings-historia .sticky-nav {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	/* Oculto antes de los 400px de scroll */
	#iberdrola-landings-historia .sticky-nav--hidden-desktop {
		opacity: 0;
		transform: translateX(-50%) translateY(100%);
		pointer-events: none;
	}

	/* Anclado cuando llega a su posición natural - vuelve a absolute */
	#iberdrola-landings-historia .sticky-nav--anchored {
		position: absolute;
		bottom: 0;
		top: auto;
		transform: translateX(-50%);
	}
}

/* ============================================
   STICKY BOTTOM NAVIGATION - Mobile
   ============================================ */

@media (max-width: 768px) {

	/* Container en mobile: mantiene el espacio pero no afecta al nav */
	#iberdrola-landings-historia section.sticky-nav-container {
		position: relative;
		height: auto;
		min-height: 110px;
	}

	#iberdrola-landings-historia .sticky-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		max-width: 100%;
		padding: 8px 16px 0px;
		border-radius: 24px 24px 0 0;
		z-index: 1000;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	/* Oculto antes de los 400px de scroll */
	#iberdrola-landings-historia .sticky-nav--hidden-mobile {
		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;
	}

	/* Anclado cuando llega a su posición natural en mobile */
	#iberdrola-landings-historia .sticky-nav--anchored {
		position: absolute;
		bottom: 0;
		top: auto;
		transform: none; /* En mobile no hay translateX */
	}

	#iberdrola-landings-historia .sticky-nav__timeline--visible {
		max-height: 200px;
		overflow: visible;
	}

	/* Container responsivo que siempre muestra 3 periodos */
	#iberdrola-landings-historia .sticky-nav__periods {
		width: var(--periods-container-width, 420px);
		padding: 0;
		overflow: visible;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-right: 24px;
	}

	/* Wrapper interno que se mueve en mobile */
	#iberdrola-landings-historia .sticky-nav__periods-wrapper {
		display: flex;
		gap: 0;
		transition: transform 400ms ease;
		will-change: transform;
	}

	#iberdrola-landings-historia .sticky-nav__buttons {
		padding: 0px;
	}

	/* Cada periodo ocupa ancho responsivo (1/3 del contenedor) */
	#iberdrola-landings-historia .sticky-nav__period {
		flex: 0 0 var(--period-width, 140px);
		width: var(--period-width, 140px);
		min-width: var(--period-width, 140px);
		flex-shrink: 0;
	}

	/* Línea del timeline mobile - 100% ancho, a nivel de los dots */
	#iberdrola-landings-historia .sticky-nav__timeline-line {
		width: 100vw;
		left: 50%;
		transform: translateX(-50%);
		bottom: 65px;
	}

	#iberdrola-landings-historia .sticky-nav__timeline-line::before {
		width: 50%;
		left: 0;
	}

	#iberdrola-landings-historia .sticky-nav__timeline-line::after {
		left: 0;
		width: 50%;
		transition: transform 400ms ease;
	}

	/* Labels en mobile - mostrar años por defecto */
	#iberdrola-landings-historia .sticky-nav__period-label {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		transition: opacity 0.3s ease, transform 0.3s ease;
		background: transparent;
		color: #007F33;
		white-space: normal;
		width: max-content;
	}

	/* En mobile: por defecto mostrar años, ocultar nombre */
	#iberdrola-landings-historia .sticky-nav__period-label-text-years {
		display: inline;
	}

	#iberdrola-landings-historia .sticky-nav__period-label-text-name {
		display: none;
	}

	/* Período inicial: siempre visible con nombre y año - verde oscuro */
	#iberdrola-landings-historia .sticky-nav__period--page-active.sticky-nav__period--active .sticky-nav__period-label {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		background: #00402A;
		color: #FFFEFF;
		white-space: normal;
		width: max-content;
		max-width: 140px;
	}

	/* Período inicial cuando NO está activo: mostrar solo años */
	#iberdrola-landings-historia .sticky-nav__period--page-active:not(.sticky-nav__period--active) {
		opacity: 1;
	}

	#iberdrola-landings-historia .sticky-nav__period--page-active:not(.sticky-nav__period--active) .sticky-nav__period-label {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		background: transparent;
		color: #007F33;
		white-space: normal;
		width: max-content;
	}

	#iberdrola-landings-historia .sticky-nav__period--page-active:not(.sticky-nav__period--active) .sticky-nav__period-label-text-years {
		display: inline;
	}

	#iberdrola-landings-historia .sticky-nav__period--page-active:not(.sticky-nav__period--active) .sticky-nav__period-label-text-name {
		display: none;
	}

	/* Períodos navegables (--active pero no --page-active): hover style (verde claro, con flecha) */
	#iberdrola-landings-historia .sticky-nav__period--active:not(.sticky-nav__period--page-active) .sticky-nav__period-label {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
		background: #008C39;
		color: #FFFEFF;
		white-space: normal;
		width: max-content;
		max-width: 180px;
		gap: 0px;
	}

	#iberdrola-landings-historia .sticky-nav__period--active:not(.sticky-nav__period--page-active) .sticky-nav__period-label-text {
		color: #FFFEFF;
		white-space: normal;
		height: auto;
	}

	#iberdrola-landings-historia .sticky-nav__period--active:not(.sticky-nav__period--page-active) .sticky-nav__period-label-text-years {
		display: none;
	}

	#iberdrola-landings-historia .sticky-nav__period--active:not(.sticky-nav__period--page-active) .sticky-nav__period-label-text-name {
		display: inline;
		text-decoration: underline;
	}

	#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label-text-years {
		display: none;
	}

	#iberdrola-landings-historia .sticky-nav__period:not(.sticky-nav__period--active):hover .sticky-nav__period-label-text-name {
		display: inline;
	}

	/* Contador de periodos */
	#iberdrola-landings-historia .sticky-nav__counter {
		display: block;
		font-family: var(--font-body);
		font-size: 14px;
		line-height: 20px;
		color: #00402A;
		text-align: center;
		margin: 12px 0 8px 0;
		font-weight: 600;
	}

	#iberdrola-landings-historia .sticky-nav__counter-current {
		font-weight: 600;
		color: #00402A;
	}

	#iberdrola-landings-historia .sticky-nav__counter-total {
		font-weight: 400;
		color: #2F6852;
	}

	#iberdrola-landings-historia .sticky-nav__counter-separator {
		font-weight: 400;
		color: #2F6852;
	}

	/* Controles (botones) */
	#iberdrola-landings-historia .sticky-nav__controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin-top: 20px;
	}

	#iberdrola-landings-historia .sticky-nav__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
	}

	#iberdrola-landings-historia .sticky-nav__prev,
	#iberdrola-landings-historia .sticky-nav__next {
		background: transparent;
		border: 1px solid #008C39;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s ease;
		padding: 0;
		width: 24px;
		height: 24px;
	}

	#iberdrola-landings-historia .sticky-nav__prev:hover,
	#iberdrola-landings-historia .sticky-nav__next:hover {
		background: transparent;
	}

	#iberdrola-landings-historia .sticky-nav__prev:focus-visible,
	#iberdrola-landings-historia .sticky-nav__next:focus-visible {
		outline: 2px solid #007F33;
		outline-offset: 2px;
	}

	#iberdrola-landings-historia .sticky-nav__prev:disabled,
	#iberdrola-landings-historia .sticky-nav__next:disabled {
		opacity: 0.3;
		cursor: not-allowed;
	}

	#iberdrola-landings-historia .sticky-nav__arrow-icon {
		width: 24px;
		height: 24px;
	}

	#iberdrola-landings-historia .sticky-nav__period--active:not(.sticky-nav__period--page-active) .sticky-nav__period-label::after {
		display: flex;
		width: 24px;
		height: 24px;
		flex: none;
		margin-left: 0;
		opacity: 1;
	}
}