/* Nauta Hero Slider 1.1 */
.nhs {
	--nhs-t: 1;              /* velocidad de transición (segundos base) */
	--nhs-k: 1;              /* 1 = automático, menor = salto rápido al hacer clic */
	--nhs-T: calc(1s * var(--nhs-t) * var(--nhs-k));
	--nhs-shade: .25;
	--nhs-red: #a3171e;
	--nhs-ease: cubic-bezier(.19, 1, .22, 1);
	--nhs-kb: 9s;
	--nhs-delay: 6s;
	--nhs-content-y: 40%;
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 380px;
	overflow: hidden;
	background: #111;
	color: #fff;
	font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
	-webkit-font-smoothing: antialiased;
}
@supports (height: 100svh) { .nhs { height: 100svh; } }
.nhs.nhs-fast { --nhs-k: .55; }
.nhs *, .nhs *::before, .nhs *::after { box-sizing: border-box; }

/* ---------- Slides ---------- */
.nhs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity var(--nhs-T) cubic-bezier(.4, 0, .2, 1) calc(var(--nhs-T) * .4), visibility 0s linear calc(var(--nhs-T) * 1.4);
}
.nhs-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 3;
	transition: opacity var(--nhs-T) cubic-bezier(.4, 0, .2, 1) calc(var(--nhs-T) * .4), visibility 0s;
}
.nhs-slide.is-prev {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: none;
}
/* Sin JavaScript: se ve la primera nota */
.nhs:not(.nhs-ready) .nhs-slide:first-child { opacity: 1; visibility: visible; }

/* Fondo con zoom continuo (Ken Burns) */
.nhs-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.nhs-bg img,
.nhs-bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}
.nhs[data-kb="out"] .is-active .nhs-bg img,
.nhs[data-kb="out"] .is-prev .nhs-bg img {
	animation: nhsZoomOut var(--nhs-kb) cubic-bezier(.25, .46, .45, .94) both;
}
.nhs[data-kb="in"] .is-active .nhs-bg img,
.nhs[data-kb="in"] .is-prev .nhs-bg img {
	animation: nhsZoomIn var(--nhs-kb) cubic-bezier(.25, .46, .45, .94) both;
}
@keyframes nhsZoomOut { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes nhsZoomIn  { from { transform: scale(1); } to { transform: scale(1.14); } }

/* Capa oscura: se intensifica en la salida */
.nhs-shade {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var(--nhs-shade);
	transition: opacity calc(var(--nhs-T) * .5) ease;
}
.nhs-slide.is-prev .nhs-shade { opacity: .7; }
.nhs.nhs-fast .nhs-slide.is-prev .nhs-shade { opacity: .88; }

/* ---------- Contenido ---------- */
.nhs-content {
	position: absolute;
	left: 6%;
	top: var(--nhs-content-y);
	width: 48%;
	transform: translateY(-62%);
	z-index: 4;
}
.nhs-slide.is-prev .nhs-content {
	opacity: 0;
	transition: opacity calc(var(--nhs-T) * .35) ease;
}

.nhs-tagmask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	margin-bottom: .9rem;
}
.nhs-tag {
	display: inline-block;
	background: var(--nhs-red);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .5em .8em .4em;
}

.nhs-title {
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 72px);
	line-height: 1.04;
	letter-spacing: .005em;
	text-transform: uppercase;
	color: #fff;
}
.nhs-title a { color: inherit; text-decoration: none; }
.nhs-line-mask {
	display: block;
	overflow: hidden;
	padding-bottom: .04em;
}
.nhs-line { display: block; }

/* Texto oculto antes de entrar */
.nhs-ready .nhs-tag,
.nhs-ready .nhs-line {
	transform: translateY(110%);
	opacity: 0;
}
/* Entrada: etiqueta primero, luego cada línea */
.nhs-ready .nhs-slide.is-active .nhs-tag,
.nhs-ready .nhs-slide.is-active .nhs-line {
	transform: none;
	opacity: 1;
	transition: transform calc(var(--nhs-T) * 1.1) var(--nhs-ease), opacity calc(var(--nhs-T) * .7) ease;
}
.nhs-ready .nhs-slide.is-active .nhs-tag { transition-delay: calc(var(--nhs-T) * .95); }
.nhs-ready .nhs-slide.is-active .nhs-line { transition-delay: calc(var(--nhs-T) * (1.1 + var(--i, 0) * .12)); }
/* Salida: el texto queda quieto mientras se desvanece */
.nhs-ready .nhs-slide.is-prev .nhs-tag,
.nhs-ready .nhs-slide.is-prev .nhs-line {
	transform: none;
	opacity: 1;
}

/* ---------- Números 01 / 02 / 03 ---------- */
.nhs-nav {
	position: absolute;
	right: 6%;
	top: var(--nhs-content-y);
	transform: translateY(-75%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nhs-nav li { margin: 0; padding: 0; list-style: none; }
.nhs-dot {
	position: relative;
	display: block;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 4px 0;
	margin: 0;
	color: #fff;
	font: inherit;
	font-size: 18px;
	line-height: 1;
	letter-spacing: .1em;
	opacity: .6;
	cursor: pointer;
	transition: opacity .3s ease;
}
.nhs-dot:hover, .nhs-dot:focus-visible, .nhs-dot.is-active { opacity: 1; background: none; color: #fff; }
.nhs-dot::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--nhs-ease);
}
.nhs-dot.is-active::after { transform: scaleX(1); }

/* ---------- Tira de notas (abajo) ---------- */
.nhs-strip {
	position: absolute;
	left: 1.5%;
	right: 1.5%;
	bottom: 5%;
	z-index: 6;
	display: grid;
	grid-template-columns: repeat(var(--nhs-cols, 3), minmax(0, 1fr));
	gap: 28px;
}
.nhs-card {
	--nhs-card-bg: rgba(255, 255, 255, .16);
	position: relative;
	display: flex;
	align-items: center;
	gap: 26px;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 30px;
	border: 0;
	border-radius: 0;
	background: var(--nhs-card-bg);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: background-color .4s ease;
}
.nhs-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.nhs-card:hover::before, .nhs-card:focus-visible::before, .nhs-card.is-active::before { opacity: 1; }
.nhs-card:hover, .nhs-card:focus { background: var(--nhs-card-bg); color: #fff; }
.nhs-card-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 104px;
	height: 104px;
	overflow: hidden;
}
.nhs-card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.nhs-card-body { position: relative; min-width: 0; flex: 1 1 auto; }
.nhs-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.nhs-card-terms { overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 60%; }
.nhs-card-date {
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	opacity: .9;
}
.nhs-card-terms + .nhs-card-date::before { content: "•"; margin-right: 8px; }
.nhs-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 24px;
	line-height: 1.12;
	text-transform: uppercase;
}
/* Barra de progreso del avance automático */
.nhs-card-bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--nhs-red);
	transform: scaleX(0);
	transform-origin: left center;
}
.nhs[data-autoplay="yes"] .nhs-card.is-active .nhs-card-bar {
	animation: nhsBar var(--nhs-delay) linear forwards;
}
.nhs.nhs-paused .nhs-card.is-active .nhs-card-bar { animation-play-state: paused; }
@keyframes nhsBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.nhs button:focus { outline: none; }
.nhs button:focus-visible { outline: 1px dotted #fff; outline-offset: 4px; }

/* ---------- Pantallas de escritorio bajas (header + hero en la primera vista) ---------- */
@media (min-width: 1025px) and (max-height: 900px) {
	.nhs { --nhs-content-y: 37%; }
	.nhs-title { font-size: clamp(30px, min(3.4vw, 6.8vh), 72px); }
	.nhs-strip { bottom: 4%; gap: 22px; }
	.nhs-card { padding: 20px 24px; gap: 20px; }
	.nhs-card-thumb { width: 84px; height: 84px; }
	.nhs-card-title { font-size: 21px; }
	.nhs-card-meta { margin-bottom: 6px; }
	.nhs-nav { gap: 16px; }
}
@media (min-width: 1025px) and (max-height: 720px) {
	.nhs { --nhs-content-y: 34%; }
	.nhs-card { padding: 14px 18px; }
	.nhs-card-thumb { width: 64px; height: 64px; }
	.nhs-card-title { font-size: 18px; }
	.nhs-tagmask { margin-bottom: .6rem; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.nhs-content { width: 64%; }
	.nhs-strip { gap: 14px; bottom: 5%; }
	.nhs-card { padding: 16px; gap: 14px; }
	.nhs-card-thumb { width: 64px; height: 64px; }
	.nhs-card-title { font-size: 18px; }
	.nhs-card-meta { font-size: 12px; margin-bottom: 4px; }
	.nhs-card-date { font-size: 11px; }
}

/* ---------- Móvil ---------- */
@media (max-width: 767px) {
	.nhs { --nhs-content-y: 50%; }
	.nhs-content { left: 5%; width: 88%; transform: translateY(-50%); }
	.nhs-title { font-size: clamp(32px, 9.4vw, 56px); line-height: 1.02; }
	.nhs-tag { font-size: 15px; }
	.nhs-tagmask { margin-bottom: 1rem; }
	.nhs-strip { display: none; }
	.nhs-nav {
		display: none;
		top: auto;
		bottom: 6%;
		right: 5%;
		transform: none;
		flex-direction: row;
		gap: 18px;
	}
	.nhs-dot { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.nhs *, .nhs-slide { transition-duration: .01s !important; transition-delay: 0s !important; }
	.nhs-bg img { animation: none !important; }
}