/**
 * App shell móvil — tab bar, sheet Más, home full-bleed, secciones /explorar.
 */

:root {
	--ecr-tabbar-h: 3.85rem;
	--ecr-player-h: 4.15rem;
	--ecr-safe-bottom: env(safe-area-inset-bottom, 0px);
	--ecr-header-h: 3.6rem;
}

/* Turbo Drive progress (navegación sin matar el audio) */
.turbo-progress-bar {
	height: 2px;
	background: var(--ecr-orange, #f07a2b);
}

.ecr-site-header__menu,
.ecr-site-header__live,
.ecr-tabbar,
.ecr-more,
.ecr-pwa-invite,
.ecr-pwa-notify,
.ecr-hero__explore--mobile,
.ecr-app-explore {
	display: none;
}

.ecr-site-credit {
	margin: 0;
	padding: 0.65rem 1rem;
	text-align: center;
	font-size: 0.68rem;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: var(--ecr-muted);
}

.ecr-site-credit a {
	color: color-mix(in srgb, var(--ecr-muted) 92%, var(--ecr-sky));
	text-decoration: none;
}

.ecr-site-credit a:hover {
	color: var(--ecr-sky);
}

.ecr-site-credit--menu {
	margin-top: 1rem;
	padding: 0.85rem 0.25rem 0.25rem;
	border-top: 1px solid color-mix(in srgb, var(--ecr-sky) 12%, transparent);
}

.ecr-hero__watch {
	margin-top: 0.75rem;
	align-self: flex-start;
}

.ecr-hero__now-overlay {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ecr-archive__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

@media (max-width: 1100px) {
	.ecr-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@keyframes ecr-buzz {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-2px) rotate(-1deg); }
	40% { transform: translateX(2px) rotate(1deg); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}

@keyframes ecr-buzz-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ecr-orange) 45%, transparent); }
	50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ecr-orange) 0%, transparent); }
}

.ecr-pwa-buzz.is-buzz {
	animation: ecr-buzz 0.55s ease-in-out infinite, ecr-buzz-glow 1.6s ease-out infinite;
}

@media (max-width: 960px) {
	.ecr-site-header__menu,
	.ecr-site-header__live {
		display: inline-flex;
	}

	.ecr-tabbar {
		display: flex;
	}

	/* Home: credit solo en menú */
	body.ecr-is-home-app .ecr-site-credit--page {
		display: none !important;
	}

	.ecr-site-header {
		position: sticky;
		top: 0;
		z-index: 200;
		padding-top: env(safe-area-inset-top, 0px);
		background: color-mix(in srgb, var(--ecr-ink) 94%, transparent);
		border-bottom: 1px solid color-mix(in srgb, var(--ecr-sky) 12%, transparent);
	}

	.ecr-site-header__inner {
		display: grid;
		grid-template-columns: 2.75rem 1fr auto;
		align-items: center;
		gap: 0.5rem;
		padding: 0.45rem 0;
		min-height: 3.1rem;
	}

	.ecr-site-header__nav,
	.ecr-site-header__actions {
		display: none !important;
	}

	.ecr-site-header__brand {
		justify-self: center;
		grid-column: 2;
	}

	.ecr-site-header__brand img {
		height: 2.2rem;
		max-width: min(48vw, 11rem);
	}

	.ecr-site-header__menu {
		appearance: none;
		border: none;
		background: color-mix(in srgb, var(--ecr-navy) 55%, transparent);
		color: var(--ecr-cream);
		width: 2.65rem;
		height: 2.65rem;
		border-radius: 0.85rem;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecr-sky) 22%, transparent);
		grid-column: 1;
	}

	.ecr-site-header__menu-bars,
	.ecr-site-header__menu-bars::before,
	.ecr-site-header__menu-bars::after {
		display: block;
		width: 1.05rem;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		position: relative;
	}

	.ecr-site-header__menu-bars::before,
	.ecr-site-header__menu-bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.ecr-site-header__menu-bars::before { top: -5px; }
	.ecr-site-header__menu-bars::after { top: 5px; }

	.ecr-site-header__live {
		appearance: none;
		border: none;
		align-items: center;
		gap: 0.35rem;
		padding: 0.4rem 0.7rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--ecr-orange) 18%, transparent);
		color: var(--ecr-orange);
		font: inherit;
		font-size: 0.68rem;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		cursor: pointer;
		grid-column: 3;
	}

	.ecr-site-header__live-dot {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
		background: currentColor;
		animation: ecr-pulse 1.6s ease-out infinite;
	}

	/* —— Home app: video full-bleed hasta el player —— */
	body.ecr-is-home-app .ecr-home > .ecr-app-secondary {
		display: none;
	}

	.ecr-hero__copy--desktop {
		display: none !important;
	}

	body.ecr-is-home-app .ecr-hero__grid {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 0;
		flex: 1 1 auto;
		position: relative;
		z-index: 1;
		padding-top: 0.75rem;
		padding-bottom: 0;
		min-height: 0;
	}

	/* v2: banner angosto — solo pill + título + logo */
	body.ecr-is-home-app .ecr-hero__now--v2 {
		min-height: 0;
		flex: 0 0 auto;
		justify-content: center;
		gap: 0;
		padding: 0.65rem 0.8rem;
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__now-body {
		grid-template-columns: 1fr auto;
		grid-template-areas: "copy art";
		gap: 0.55rem 0.75rem;
		align-items: center;
	}

	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__now-copy {
		gap: 0.1rem;
	}

	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__now-copy h2 {
		font-size: clamp(1.15rem, 4.8vw, 1.4rem);
		margin: 0;
	}

	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__now-meta,
	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__watch,
	body.ecr-is-home-app .ecr-hero__explore--mobile {
		display: none !important;
	}

	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__now-art {
		width: 3.5rem;
		max-width: 3.5rem;
		align-self: center;
	}

	body.ecr-is-home-app .ecr-hero__now--v2 .ecr-hero__now-art img {
		max-height: 3.5rem;
		object-position: center;
	}

	/* Espacio grande de video entre banner y blog */
	body.ecr-is-home-app .ecr-hero--video {
		min-height: calc(
			100dvh - var(--ecr-header-h) - env(safe-area-inset-top, 0px) - var(--ecr-tabbar-h) - var(--ecr-safe-bottom) - var(--ecr-player-h)
		);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 0 0.65rem;
	}

	body.ecr-is-home-app:not(.has-ecr-player) .ecr-hero--video {
		min-height: calc(
			100dvh - var(--ecr-header-h) - env(safe-area-inset-top, 0px) - var(--ecr-tabbar-h) - var(--ecr-safe-bottom)
		);
	}

	body.ecr-is-home-app .ecr-hero__scrim {
		background:
			linear-gradient(180deg, rgba(10, 13, 18, 0.28) 0%, rgba(10, 13, 18, 0.12) 40%, rgba(10, 13, 18, 0.72) 100%);
	}

	body.ecr-is-home-app .ecr-marquee {
		position: relative;
		z-index: 1;
		margin-top: auto;
		padding-top: 0.35rem;
		overflow-x: auto;
		mask-image: none;
		-webkit-overflow-scrolling: touch;
		flex: 0 0 auto;
		scrollbar-width: none;
	}

	body.ecr-is-home-app .ecr-marquee::-webkit-scrollbar {
		display: none;
	}

	body.ecr-is-home-app .ecr-marquee__track,
	body.ecr-is-home-app .ecr-marquee__track.is-animated,
	body.ecr-is-home-app .ecr-marquee__track:not(.is-animated),
	body.ecr-is-home-app .ecr-marquee__track.is-centered {
		gap: 0.55rem;
		animation: none !important;
		flex-wrap: nowrap !important;
		width: max-content !important;
		max-width: none !important;
		justify-content: flex-start !important;
		scroll-snap-type: none;
		transform: none !important;
	}

	body.ecr-is-home-app .ecr-marquee__card {
		flex: 0 0 min(38vw, 7.5rem);
		padding: 0.4rem;
		gap: 0.35rem;
		border-radius: 0.85rem;
		background: color-mix(in srgb, #0a0d12 55%, transparent);
		backdrop-filter: blur(8px);
	}

	body.ecr-is-home-app .ecr-marquee__card--explore {
		display: grid !important;
	}

	body.ecr-is-home-app .ecr-marquee__card img,
	body.ecr-is-home-app .ecr-marquee__ph,
	body.ecr-is-home-app .ecr-marquee__explore-arrow {
		aspect-ratio: 16 / 10;
		border-radius: 0.55rem;
	}

	body.ecr-is-home-app .ecr-marquee__explore-arrow svg {
		width: 2.15rem;
		height: 2.15rem;
		padding: 0.4rem;
	}

	body.ecr-is-home-app .ecr-marquee__card span,
	body.ecr-is-home-app .ecr-marquee__explore-text {
		font-size: 0.68rem;
		line-height: 1.25;
	}

	/* Exactamente 2 líneas + ellipsis (evita 3ª línea fantasma en WebKit) */
	body.ecr-is-home-app .ecr-marquee__card > .ecr-marquee__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		max-height: calc(0.68rem * 1.25 * 2);
		word-break: break-word;
	}

	body.ecr-has-app-shell .ecr-chat-fab {
		display: none !important;
	}

	/* —— Solo-sección /explorar/* —— */
	body.ecr-app-solo .ecr-hero,
	body.ecr-app-solo .ecr-home > .ecr-app-secondary,
	body.ecr-app-solo .ecr-app-explore {
		display: none !important;
	}

	body.ecr-app-solo-id--top-adorarte #top-adorarte,
	body.ecr-app-solo-id--parrilla #parrilla,
	body.ecr-app-solo-id--bastidores #bastidores,
	body.ecr-app-solo-id--eventos #eventos,
	body.ecr-app-solo-id--nosotros #nosotros,
	body.ecr-app-solo-id--patrocinadores #patrocinadores,
	body.ecr-app-solo-id--newsletter #newsletter,
	body.ecr-app-solo-id--testimonios #testimonios,
	body.ecr-app-solo-id--app #app {
		display: block !important;
	}

	body.ecr-app-solo .ecr-section {
		padding-block: 1.35rem 1rem;
		min-height: 40vh;
	}

	body.ecr-app-solo #parrilla .ecr-parrilla__body {
		/* JS abre; fallback visible */
	}

	/* —— Tab bar (6 slots) —— */
	.ecr-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10020;
		align-items: stretch;
		justify-content: space-around;
		gap: 0;
		min-height: calc(var(--ecr-tabbar-h) + var(--ecr-safe-bottom));
		padding: 0.2rem 0.1rem calc(0.2rem + var(--ecr-safe-bottom));
		background: color-mix(in srgb, #0c1016 92%, transparent);
		backdrop-filter: blur(18px);
		-webkit-backdrop-filter: blur(18px);
		border-top: 1px solid color-mix(in srgb, var(--ecr-sky) 16%, transparent);
		box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
	}

	.ecr-tabbar__item {
		appearance: none;
		border: none;
		background: transparent;
		color: var(--ecr-muted);
		text-decoration: none;
		font: inherit;
		font-size: 0.52rem;
		font-weight: 700;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.12rem;
		flex: 1 1 0;
		min-width: 0;
		min-height: 2.95rem;
		padding: 0.15rem 0.05rem;
		border-radius: 0.75rem;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.ecr-tabbar__item.is-active {
		color: var(--ecr-sky);
	}

	.ecr-tabbar__more .ecr-tabbar__icon {
		display: none;
	}

	.ecr-tabbar__more span {
		font-size: 1.45rem;
		line-height: 1;
		font-weight: 800;
		color: inherit;
	}

	.ecr-tabbar__icon {
		width: 1.2rem;
		height: 1.2rem;
		display: block;
	}

	.ecr-more[hidden],
	.ecr-pwa-invite[hidden],
	.ecr-pwa-notify[hidden] {
		display: none !important;
	}

	.ecr-more:not([hidden]),
	.ecr-pwa-invite:not([hidden]),
	.ecr-pwa-notify:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 10040;
	}

	.ecr-pwa-invite:not([hidden]),
	.ecr-pwa-notify:not([hidden]) {
		z-index: 10050;
	}

	.ecr-more__backdrop,
	.ecr-pwa-invite__backdrop,
	.ecr-pwa-notify__backdrop {
		appearance: none;
		border: none;
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		cursor: pointer;
	}

	.ecr-more__panel,
	.ecr-pwa-invite__panel,
	.ecr-pwa-notify__panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: min(88vh, 42rem);
		overflow: auto;
		padding: 0.5rem 1.15rem calc(1.1rem + var(--ecr-safe-bottom));
		border-radius: 1.35rem 1.35rem 0 0;
		background:
			radial-gradient(ellipse 70% 40% at 50% 0%, color-mix(in srgb, var(--ecr-sky) 14%, transparent), transparent 70%),
			linear-gradient(180deg, #1a2433 0%, var(--ecr-ink) 55%);
		box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.45);
		animation: ecr-sheet-up 0.28s ease-out;
	}

	@keyframes ecr-sheet-up {
		from { transform: translateY(12%); opacity: 0.7; }
		to { transform: translateY(0); opacity: 1; }
	}

	.ecr-more__handle {
		width: 2.5rem;
		height: 0.28rem;
		margin: 0.35rem auto 0.85rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--ecr-cream) 28%, transparent);
	}

	.ecr-more__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 0.75rem;
	}

	.ecr-more__head h2 {
		margin: 0;
		font-size: 1.2rem;
		color: var(--ecr-cream);
	}

	.ecr-more__close {
		appearance: none;
		border: none;
		width: 2.4rem;
		height: 2.4rem;
		border-radius: 999px;
		background: color-mix(in srgb, #000 35%, transparent);
		color: var(--ecr-cream);
		font-size: 1.45rem;
		line-height: 1;
		cursor: pointer;
	}

	.ecr-more__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 0.35rem;
	}

	.ecr-more__list a,
	.ecr-more__install {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 3rem;
		padding: 0.75rem 0.95rem;
		border-radius: 0.95rem;
		text-decoration: none;
		color: var(--ecr-cream);
		font: inherit;
		font-weight: 700;
		text-align: left;
		appearance: none;
		border: none;
		cursor: pointer;
		background: color-mix(in srgb, #000 22%, transparent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecr-sky) 14%, transparent);
	}

	.ecr-more__install {
		background: color-mix(in srgb, var(--ecr-orange) 18%, transparent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecr-orange) 40%, transparent);
		color: #fff;
	}

	.ecr-more__install.is-open {
		background: color-mix(in srgb, var(--ecr-orange) 32%, transparent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecr-orange) 60%, transparent);
	}

	.ecr-more__pwa:not([hidden]) {
		display: block;
		margin-top: 1rem;
		padding-top: 0.75rem;
		border-top: 1px solid color-mix(in srgb, var(--ecr-sky) 14%, transparent);
	}

	.ecr-more__social {
		margin-top: 1rem;
		display: flex;
		justify-content: center;
	}

	.ecr-more__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.65rem;
		margin-top: 1rem;
	}

	.ecr-pwa-invite__later,
	.ecr-pwa-notify__later {
		width: 100%;
		margin-top: 0.85rem;
	}

	.ecr-pwa-notify__lead {
		margin: 0 0 1rem;
		color: color-mix(in srgb, var(--ecr-cream) 90%, var(--ecr-muted));
		line-height: 1.5;
		font-size: 0.95rem;
	}

	.ecr-pwa-notify__panel .ecr-pwa-buzz {
		width: 100%;
	}

	.ecr-pwa-guide__lead {
		margin: 0 0 0.85rem;
		color: color-mix(in srgb, var(--ecr-cream) 90%, var(--ecr-muted));
		line-height: 1.5;
		font-size: 0.95rem;
	}

	.ecr-pwa-guide__perks {
		margin: 0 0 1rem;
		padding: 0 0 0 1.1rem;
		color: var(--ecr-muted);
		font-size: 0.88rem;
		line-height: 1.45;
	}

	.ecr-pwa-guide__os,
	.ecr-pwa-guide__notify-help {
		display: none;
		margin-bottom: 1rem;
		padding: 0.9rem 1rem;
		border-radius: 1rem;
		background: color-mix(in srgb, #000 28%, transparent);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecr-sky) 14%, transparent);
	}

	.ecr-pwa-guide__notify-help:not([hidden]) {
		display: block;
	}

	.ecr-pwa-guide.is-ios .ecr-pwa-guide__os[data-pwa-os="ios"],
	.ecr-pwa-guide.is-android .ecr-pwa-guide__os[data-pwa-os="android"],
	.ecr-pwa-guide:not(.is-ios):not(.is-android) .ecr-pwa-guide__os {
		display: block;
	}

	.ecr-pwa-guide__os h3,
	.ecr-pwa-guide__notify-help h3 {
		margin: 0 0 0.55rem;
		font-size: 0.95rem;
		color: var(--ecr-sky);
	}

	.ecr-pwa-guide__os ol,
	.ecr-pwa-guide__notify-help ol {
		margin: 0;
		padding-left: 1.15rem;
		color: var(--ecr-cream);
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.ecr-pwa-guide__hint {
		margin: 0.5rem 0 0;
		font-size: 0.82rem;
		color: var(--ecr-muted);
	}

	.ecr-pwa-guide__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.55rem;
	}

	body.ecr-has-app-shell .ecr-player {
		bottom: calc(var(--ecr-tabbar-h) + var(--ecr-safe-bottom));
		z-index: 10010;
		padding: 0.5rem 0.75rem;
	}

	body.ecr-has-app-shell {
		padding-bottom: calc(var(--ecr-tabbar-h) + var(--ecr-safe-bottom) + 0.35rem);
	}

	body.ecr-has-app-shell.has-ecr-player {
		padding-bottom: calc(var(--ecr-tabbar-h) + var(--ecr-player-h) + var(--ecr-safe-bottom) + 0.35rem);
	}

	/* Credit pegado al contenido, casi encima del player */
	body.ecr-has-app-shell .ecr-site-credit--page {
		padding: 0.45rem 1rem 0.35rem;
		margin: 0;
	}

	body.ecr-has-app-shell.has-ecr-player .ecr-site-credit--page {
		padding-bottom: 0.35rem;
	}

	.ecr-archive__grid {
		grid-template-columns: 1fr !important;
		gap: 0.85rem;
	}

	.ecr-archive .ecr-card a {
		grid-template-columns: 6.5rem 1fr;
		align-items: start;
		gap: 0.55rem 0.85rem;
		padding: 0.65rem;
	}

	.ecr-blog-archive .ecr-card a {
		grid-template-areas:
			"thumb title"
			"thumb cat"
			"thumb excerpt";
	}

	.ecr-blog-archive .ecr-card img,
	.ecr-blog-archive .ecr-card__ph {
		grid-area: thumb;
		align-self: center;
	}

	.ecr-blog-archive .ecr-card h2 {
		grid-area: title;
		align-self: end;
	}

	.ecr-blog-archive .ecr-card__cat {
		grid-area: cat;
		margin: 0 !important;
		align-self: start;
	}

	.ecr-blog-archive .ecr-card a > p:not(.ecr-card__cat) {
		grid-area: excerpt;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 0.82rem;
		color: var(--ecr-muted);
	}

	.ecr-archive .ecr-card img,
	.ecr-archive .ecr-card__ph {
		aspect-ratio: 1;
		border-radius: 0.85rem;
		height: 6.5rem;
		width: 6.5rem;
	}

	.ecr-archive .ecr-card h2,
	.ecr-archive .ecr-card h3,
	.ecr-archive .ecr-card p {
		padding: 0;
	}

	.ecr-archive .ecr-card h2,
	.ecr-archive .ecr-card h3 {
		font-size: 1rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.ecr-archive__filters {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
	.ecr-more__panel,
	.ecr-pwa-invite__panel,
	.ecr-pwa-notify__panel,
	.ecr-pwa-buzz.is-buzz {
		animation: none;
	}
}

@media (min-width: 961px) {
	body.has-ecr-player .ecr-site-credit--page {
		padding-bottom: calc(0.85rem + 4.75rem);
	}

	.ecr-site-credit--menu {
		display: none;
	}
}