/**
 * Inadapress 2026 — extra
 * Componentes opcionales, utilidades y accesibilidad.
 */

/* Componente de ejemplo */
.componente-ejemplo {
	max-width: var(--inadapress-content-max-width, 1200px);
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px dashed #ccc;
	border-radius: 6px;
	background: #fff;
}

.componente-ejemplo__titulo {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.componente-ejemplo__texto {
	margin: 0;
	font-size: 0.875rem;
	color: var(--inadapress-secondary, #555);
}

/* Accesibilidad: enlace “saltar al contenido” */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	left: 0.5rem;
	top: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: #000;
	color: #fff;
	z-index: 100000;
	overflow: visible;
	clip: auto;
}

/* —— UI library (template-parts vía inadapress_2026_ui) —— */

.site-header--centered .site-header__inner {
	text-align: center;
}

.inad-ui-header-centered__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.inad-ui-header-centered__brand .site-title {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.inad-ui-header-centered__brand .site-description {
	margin: 0;
	font-size: 0.9rem;
	color: var(--inadapress-secondary, #555);
}

.site-header--centered .site-header__row--centered-nav {
	justify-content: center;
	margin-top: 0.75rem;
}

.site-header--centered .site-header__row--centered-nav .site-navbar {
	justify-content: center;
	flex: 0 1 auto;
}

.site-header--centered .site-navbar__list {
	justify-content: center;
}

/* Navbars secundarios */
.inad-ui-navbar {
	margin: 0 0 var(--inadapress-spacing-block, 1.25rem);
	padding: 0.75rem 0;
}

.inad-ui-navbar__title {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--inadapress-secondary, #555);
}

.inad-ui-navbar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.inad-ui-navbar__list a {
	font-weight: 500;
}

.inad-ui-navbar__pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.inad-ui-navbar__pill {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border-radius: var(--inadapress-radius-pill, 999px);
	border: 1px solid #ddd;
	background: #fff;
	font-size: 0.875rem;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inad-ui-navbar__pill:hover,
.inad-ui-navbar__pill:focus {
	border-color: var(--inadapress-primary, #0d47a1);
	color: var(--inadapress-primary, #0d47a1);
	text-decoration: none;
}

.inad-ui-navbar__pill.is-active {
	background: var(--inadapress-primary, #0d47a1);
	border-color: var(--inadapress-primary, #0d47a1);
	color: #fff;
}

/* Cards */
.inad-ui-card {
	display: flex;
	flex-direction: column;
	max-width: 22rem;
	margin: 0 0 var(--inadapress-spacing-block, 1.25rem);
	border-radius: var(--inadapress-radius-card, 8px);
	overflow: hidden;
	border: 1px solid #e8e8e8;
	background: #fff;
	box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
}

.inad-ui-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f0f0f0;
}

.inad-ui-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
}

.inad-ui-card__body {
	padding: 1rem 1.1rem 1.15rem;
}

.inad-ui-card__tag {
	margin: 0 0 0.35rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--inadapress-secondary, #555);
}

.inad-ui-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	line-height: 1.25;
}

.inad-ui-card__meta {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	color: var(--inadapress-secondary, #555);
}

.inad-ui-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--inadapress-text, #1a1a1a);
}

.inad-ui-card--horizontal {
	flex-direction: row;
	align-items: stretch;
	max-width: 40rem;
}

.inad-ui-card--horizontal .inad-ui-card__media {
	flex: 0 0 11rem;
	width: 11rem;
	max-width: 38%;
	aspect-ratio: 4 / 3;
	align-self: stretch;
}

.inad-ui-card--horizontal .inad-ui-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Marquee */
.inad-ui-marquee {
	--inad-ui-marquee-bg: var(--inadapress-primary, #0d47a1);
	--inad-ui-marquee-fg: #fff;
	overflow: hidden;
	background: var(--inad-ui-marquee-bg);
	color: var(--inad-ui-marquee-fg);
	padding: 0.55rem 0;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.inad-ui-marquee__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	animation: inad-ui-marquee-scroll 22s linear infinite;
}

.inad-ui-marquee__text {
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.inad-ui-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
		gap: 0.5rem;
	}
}

@keyframes inad-ui-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Banners */
.inad-ui-banner {
	margin: 0 0 var(--inadapress-spacing-block, 1.5rem);
	border-radius: var(--inadapress-radius-card, 8px);
	overflow: hidden;
}

.inad-ui-banner--cta {
	background: linear-gradient(135deg, var(--inadapress-primary, #0d47a1), #1565c0);
	color: #fff;
}

.inad-ui-banner--cta .inad-ui-banner__title,
.inad-ui-banner--cta .inad-ui-banner__text {
	color: inherit;
}

.inad-ui-banner--cta a {
	color: inherit;
}

.inad-ui-banner__inner {
	max-width: 36rem;
	margin: 0 auto;
	padding: 2rem 1.25rem;
	text-align: center;
}

.inad-ui-banner__kicker {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.9;
}

.inad-ui-banner__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.2;
}

.inad-ui-banner__text {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	line-height: 1.5;
	opacity: 0.95;
}

.inad-ui-banner__button {
	display: inline-block;
	padding: 0.55rem 1.25rem;
	border-radius: var(--inadapress-radius-button, 6px);
	background: #fff;
	color: var(--inadapress-primary, #0d47a1) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.inad-ui-banner__button:hover,
.inad-ui-banner__button:focus {
	filter: brightness(1.05);
}

.inad-ui-banner--hero .inad-ui-banner__swiper {
	width: 100%;
}

.inad-ui-banner__slide {
	position: relative;
	min-height: 14rem;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
}

.inad-ui-banner__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 65%), rgb(0 0 0 / 15%));
	pointer-events: none;
}

.inad-ui-banner__slide-inner {
	position: relative;
	z-index: 1;
	padding: 2rem 1.25rem 2.5rem;
	max-width: 40rem;
	color: #fff;
}

.inad-ui-banner--hero .inad-ui-banner__title,
.inad-ui-banner--hero .inad-ui-banner__text {
	color: #fff;
}

.inad-ui-banner--hero .inad-ui-banner__button {
	background: #fff;
	color: var(--inadapress-primary, #0d47a1) !important;
}

.inad-ui-banner--hero .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.45;
}

.inad-ui-banner--hero .swiper-pagination-bullet-active {
	opacity: 1;
}

.inad-ui-banner--hero .swiper-button-prev,
.inad-ui-banner--hero .swiper-button-next {
	color: #fff;
}

/* Tabs */
.inad-ui-tabs {
	margin: 0 0 var(--inadapress-spacing-block, 1.25rem);
	border: 1px solid #e5e5e5;
	border-radius: var(--inadapress-radius-card, 8px);
	background: #fff;
	overflow: hidden;
}

.inad-ui-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 1px solid #e5e5e5;
	background: #fafafa;
}

.inad-ui-tabs__tab {
	margin: 0;
	padding: 0.65rem 1rem;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--inadapress-secondary, #555);
	cursor: pointer;
}

.inad-ui-tabs__tab[aria-selected="true"] {
	color: var(--inadapress-primary, #0d47a1);
	border-bottom-color: var(--inadapress-primary, #0d47a1);
	background: #fff;
}

.inad-ui-tabs__tab:focus {
	outline: 2px solid var(--inadapress-primary, #0d47a1);
	outline-offset: -2px;
}

.inad-ui-tabs__panel {
	padding: 1rem 1.1rem 1.15rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.inad-ui-tabs__panel:focus {
	outline: none;
}

/* Footer columnas */
.inad-ui-footer-columns {
	margin-top: var(--inadapress-spacing-block, 2rem);
	padding: 2rem 1.25rem;
	background: #1a1a1a;
	color: #f5f5f5;
	border-radius: var(--inadapress-radius-card, 8px) var(--inadapress-radius-card, 8px) 0 0;
}

.inad-ui-footer-columns a {
	color: #e0e0e0;
}

.inad-ui-footer-columns a:hover,
.inad-ui-footer-columns a:focus {
	color: #fff;
}

.inad-ui-footer-columns__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.5rem 2rem;
	max-width: var(--inadapress-content-max-width, 1200px);
	margin: 0 auto;
}

.inad-ui-footer-columns__title {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #aaa;
}

.inad-ui-footer-columns__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-size: 0.9rem;
}

.inad-ui-footer-columns__copy {
	margin: 1.5rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid #333;
	text-align: center;
	font-size: 0.8rem;
	color: #999;
	max-width: var(--inadapress-content-max-width, 1200px);
}

/* —— Cabecera fija: transparente al inicio, sólida al scroll —— */

.site-header__inner,
.site-header__inner--minimal,
.header-basic .main-wrapper,
.header.inadapress-ng-header-v2 .main-wrapper,
.site-footer--default .site-footer__main-inner,
.site-footer--default .site-footer__bar-inner {
	max-width: var(--inadapress-header-inner-max, var(--main-wrapper-xlarge, 1400px));
}

.site-header,
.header-basic,
.header.inadapress-ng-header-v2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--menu-layer, 999);
	transition:
		background-color 0.35s ease,
		background 0.35s ease,
		box-shadow 0.35s ease,
		border-color 0.35s ease,
		padding 0.35s ease;
}

/* Interior: reserva espacio bajo la cabecera fija (sin hero a ancho completo). */
body:not(.inadapress-header-overlay):not(:has(.page-hero-band)):not(:has(.post-hero-band)):not(:has(.blog-hero-band)) {
	padding-top: var(--site-header-offset, 4.5rem);
}

/* Interior con hero: separación visible entre cabecera y banda hero. */
body:not(.inadapress-header-overlay) .page-hero-band,
body:not(.inadapress-header-overlay) .post-hero-band,
body:not(.inadapress-header-overlay) .blog-hero-band {
	padding-top: calc(var(--site-header-offset, 4.5rem) + var(--site-header-hero-gap, 1.5rem));
}

/* Portada sin hero: el main empieza bajo la cabecera flotante. */
.inadapress-header-overlay:not(:has(.page-hero-band)):not(:has(.blog-hero-band)) .site-main {
	padding-top: calc(var(--site-header-offset, 4.5rem) + var(--site-header-hero-gap, 1.5rem));
}

.inadapress-header-overlay .page-hero-band,
.inadapress-header-overlay .post-hero-band,
.inadapress-header-overlay .blog-hero-band {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.inadapress-header-overlay .page-hero,
.inadapress-header-overlay .post-hero,
.inadapress-header-overlay .blog-hero {
	margin-top: calc(-1 * var(--site-header-offset, 4.5rem));
}

.inadapress-header-overlay .page-hero {
	min-height: calc(clamp(14rem, 38vh, 22rem) + var(--site-header-offset, 4.5rem));
}

.inadapress-header-overlay .post-hero {
	min-height: calc(clamp(16rem, 42vh, 26rem) + var(--site-header-offset, 4.5rem));
}

.inadapress-header-overlay .page-hero__container {
	padding-top: calc(var(--site-header-offset, 4.5rem) + clamp(2rem, 5vw, 3.25rem));
}

/* Portada sin scroll: cabecera transparente sobre el hero. */
.inadapress-header-overlay .site-header:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

.inadapress-header-overlay .header-basic:not(.is-scrolled) {
	background-color: transparent;
	box-shadow: none;
}

.inadapress-header-overlay .header.inadapress-ng-header-v2:not(.is-scrolled) {
	background-color: transparent;
	box-shadow: none;
}

/* Resto de páginas: cabecera sólida desde el inicio (logo grande, fondo blanco). */
body:not(.inadapress-header-overlay) .site-header:not(.is-scrolled) {
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

body:not(.inadapress-header-overlay) .header-basic:not(.is-scrolled) {
	background-color: var(--color-primary, var(--inadapress-primary, #ad0000));
	box-shadow: 0 2px 4px var(--color-shadow, rgba(0, 0, 0, 0.12));
}

body:not(.inadapress-header-overlay) .header.inadapress-ng-header-v2:not(.is-scrolled) {
	background-color: var(--color-light, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body:not(.inadapress-header-overlay) .header-basic:not(.is-scrolled) .brand .logo {
	filter: brightness(0) invert(1);
}

/* Estado con scroll */
.site-header.is-scrolled {
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}

.header-basic.is-scrolled {
	background-color: var(--color-primary, var(--inadapress-primary, #ad0000));
	box-shadow: 0 2px 4px var(--color-shadow, rgba(0, 0, 0, 0.12));
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}

.header.inadapress-ng-header-v2.is-scrolled {
	background-color: var(--color-light, #fff);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header.inadapress-ng-header-v2.is-scrolled .wrapper {
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}

/* Logo: 150px al inicio → 100px al scroll */
.site-header .site-logo,
.site-header .site-logo--minimal,
.site-header .inadapress-logo-pair,
.site-header .inadapress-logo-pair img,
.header-basic .brand .logo,
.header.inadapress-ng-header-v2 .logotipo,
.header.inadapress-ng-header-v2 .logotipo img {
	width: 150px;
	max-width: 150px;
	height: auto;
	max-height: none;
	transition: width 0.35s ease, max-width 0.35s ease;
}

.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .site-logo--minimal,
.site-header.is-scrolled .inadapress-logo-pair img,
.header-basic.is-scrolled .brand .logo,
.header.inadapress-ng-header-v2.is-scrolled .logotipo,
.header.inadapress-ng-header-v2.is-scrolled .logotipo img,
.header.inadapress-ng-header-v2.is-scrolled .logo {
	width: 100px;
	max-width: 100px;
}

.header-basic:not(.is-scrolled) .brand .logo {
	filter: none;
}

.header.inadapress-ng-header-v2:not(.is-scrolled) .logo {
	width: 150px;
	max-width: 150px;
}

.header.inadapress-ng-header-v2.is-scrolled .logo {
	width: 100px;
	max-width: 100px;
}

/* Cabecera clásica — móvil */
@media (max-width: 768px) {
	.site-header {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.site-header .site-logo,
	.site-header .site-logo--minimal,
	.site-header .inadapress-logo-pair img,
	.header-basic .brand .logo,
	.header.inadapress-ng-header-v2 .logotipo,
	.header.inadapress-ng-header-v2 .logotipo img,
	.header.inadapress-ng-header-v2:not(.is-scrolled) .logo {
		width: 110px;
		max-width: 110px;
	}

	.site-header.is-scrolled .site-logo,
	.site-header.is-scrolled .site-logo--minimal,
	.site-header.is-scrolled .inadapress-logo-pair img,
	.header-basic.is-scrolled .brand .logo,
	.header.inadapress-ng-header-v2.is-scrolled .logotipo,
	.header.inadapress-ng-header-v2.is-scrolled .logotipo img,
	.header.inadapress-ng-header-v2.is-scrolled .logo {
		width: 80px;
		max-width: 80px;
	}

	.site-header--centered .site-header__inner {
		position: relative;
	}

	.site-header--centered .site-header__row--centered-nav {
		position: absolute;
		top: 0.85rem;
		right: 0;
		margin-top: 0;
		width: auto;
		justify-content: flex-end;
	}

	.site-header--centered .inad-ui-header-centered__brand {
		padding-right: 3rem;
	}

	.inadapress-header-overlay .site-header.is-menu-open,
	.inadapress-header-overlay .header-basic.is-menu-open,
	.inadapress-header-overlay .header.inadapress-ng-header-v2.is-menu-open {
		background: #fff;
		border-bottom: 1px solid #e5e5e5;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	}

	.inadapress-header-overlay .header-basic.is-menu-open {
		background-color: var(--color-primary, var(--inadapress-primary, #ad0000));
		border-bottom-color: transparent;
	}
}

/* ng-h1: iconos hamburguesa / cerrar */
.inadapress-ng-header-v1 .nav-button {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--inadapress-radius, 6px);
	background: transparent;
	line-height: 0;
}

.inadapress-ng-header-v1 .nav-button__icon {
	display: none;
	line-height: 0;
}

.inadapress-ng-header-v1 .nav-button__icon--open {
	display: block;
}

.inadapress-ng-header-v1 .nav-button[aria-expanded="true"] .nav-button__icon--open {
	display: none;
}

.inadapress-ng-header-v1 .nav-button[aria-expanded="true"] .nav-button__icon--close {
	display: block;
}

@media (max-width: 768px) {
	.inadapress-ng-header-v1 .nav-button {
		display: inline-flex;
	}
}