/*
 Theme Name:   En Casa Radio Child
 Theme URI:    https://www.encasaradio.com
 Description:  Tema hijo En Casa Radio — branding y experiencia de radio sobre Hello Elementor
 Author:       En Casa Radio
 Template:     hello-elementor
 Version:      2.0.0
 Text Domain:  encasa-radio-child
*/

:root {
	--ecr-navy: #17324d;
	--ecr-sky: #a1c7f2;
	--ecr-orange: #f46d08;
	--ecr-cream: #faf9f6;
	--ecr-ink: #202124;
	--ecr-ink-2: #2a2d32;
	--ecr-muted: #9aa3ad;
	--ecr-live: #f46d08;
	--ecr-white: #ffffff;
	--ecr-gradient: radial-gradient(120% 80% at 10% 0%, #2a4a6a 0%, var(--ecr-ink) 45%, #12141a 100%);
	--ecr-font-display: "Outfit", system-ui, sans-serif;
	--ecr-font-body: "Manrope", system-ui, sans-serif;
	--ecr-radius: 1.25rem;
	--ecr-max: 72rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--ecr-font-body);
	background-color: var(--ecr-ink);
	color: var(--ecr-cream);
	margin: 0;
	line-height: 1.55;
}

h1, h2, h3, h4, .ecr-display {
	font-family: var(--ecr-font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

a {
	color: var(--ecr-sky);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	color: var(--ecr-orange);
}

::selection {
	background: var(--ecr-orange);
	color: var(--ecr-white);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.elementor-button,
.elementor-button:visited {
	font-family: var(--ecr-font-body);
}

/* —— Player sticky —— */
.ecr-player {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	background: color-mix(in srgb, var(--ecr-ink) 92%, transparent);
	backdrop-filter: blur(14px);
	border-top: 1px solid color-mix(in srgb, var(--ecr-sky) 18%, transparent);
	box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
}

.ecr-player__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ecr-orange);
}

.ecr-player__live::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--ecr-orange);
	box-shadow: 0 0 0 0 rgba(244, 109, 8, 0.55);
	animation: ecr-pulse 1.6s ease-out infinite;
}

@keyframes ecr-pulse {
	70% { box-shadow: 0 0 0 10px rgba(244, 109, 8, 0); }
	100% { box-shadow: 0 0 0 0 rgba(244, 109, 8, 0); }
}

.ecr-player__meta {
	flex: 1;
	min-width: 0;
}

.ecr-player__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--ecr-cream);
}

.ecr-player__sub {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	color: var(--ecr-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ecr-player__btn {
	appearance: none;
	border: none;
	border-radius: 999px;
	padding: 0.7rem 1.35rem;
	font-family: var(--ecr-font-body);
	font-size: 0.85rem;
	font-weight: 800;
	cursor: pointer;
	background: var(--ecr-orange);
	color: var(--ecr-white);
	transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.ecr-player__btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.ecr-player__btn.is-playing {
	background: var(--ecr-navy);
	color: var(--ecr-cream);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ecr-sky) 35%, transparent);
}

body.has-ecr-player {
	padding-bottom: 4.75rem;
}

@media (max-width: 640px) {
	.ecr-player {
		padding: 0.65rem 0.85rem;
		gap: 0.65rem;
	}
}