/* ============================================================
   STREAMING — streaming.css
   ============================================================ */

/* ── Hero ────────────────────────────────────────────────────── */
.streaming-hero {
	min-height: 72vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(155deg, rgba(15,51,33,0.70) 0%, rgba(28,85,53,0.70) 100%),
		url('../images/radio-antigua.jpg') center/cover no-repeat;
	padding: 120px 20px 80px;
	text-align: center;
}

.streaming-hero .hero-inner {
	max-width: 700px;
	margin-inline: auto;
}

.streaming-hero h1            { color: var(--color-white); margin-bottom: 20px; }
.streaming-hero .subtitle     { font-size: 1.1rem; color: rgba(255,255,255,0.72); margin-bottom: 36px; }

.streaming-hero .badge {
	background: rgba(76,160,106,0.18);
	border-color: rgba(76,160,106,0.35);
	color: var(--color-light);
	margin-bottom: 28px;
}

/* ── Stats bar ────────────────────────────────────────────────── */
.streaming-stats-bar {
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	padding: 32px 0;
}

.streaming-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	text-align: center;
}

.streaming-stats-bar .stat-item { padding: 8px 0; }

.streaming-stats-bar .stat-value {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.8rem;
	color: var(--color-primary);
	line-height: 1;
	margin-bottom: 4px;
}
.streaming-stats-bar .stat-value span { font-size: 1rem; font-weight: 400; }

.streaming-stats-bar .stat-label {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	font-weight: 400;
}

/* ── AzuraCast ───────────────────────────────────────────────── */
.azuracast-section { padding: var(--section-pad); }

.azuracast-inner {
	max-width: var(--max-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.azuracast-text h2  { margin-bottom: 20px; }
.azuracast-text p   { margin-bottom: 16px; font-size: 0.97rem; }

.azuracast-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.azuracast-screenshot {
	width: 100%;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-hover);
	display: block;
}

.azuracast-placeholder {
	background: var(--color-card-bg);
	border-radius: var(--radius-card);
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
	color: var(--color-text-muted);
	border: 2px dashed var(--color-border);
	font-size: 0.88rem;
}

.azuracast-features {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}

.feature-item {
	background: var(--color-card-bg);
	border-radius: var(--radius-sm);
	padding: 10px 4px;
	text-align: center;
	transition: box-shadow var(--transition), transform var(--transition);
}
.feature-item:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

.feature-item .icon  { font-size: 1.1rem; margin-bottom: 5px; }
.feature-item span   { font-family: var(--font-heading); font-weight: 700; font-size: 0.65rem; color: var(--color-deep); display: block; line-height: 1.3; }

/* ── Compatibilidad ───────────────────────────────────────────── */
.compat-section { padding: 56px 20px; background: var(--color-deep); }

.compat-inner {
	max-width: var(--max-width);
	margin-inline: auto;
	text-align: center;
}
.compat-inner h3 { color: var(--color-white); margin-bottom: 28px; }

.compat-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.compat-badge {
	background: rgba(255,255,255,0.06);
	border: 1.5px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-btn);
	padding: 8px 18px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.83rem;
	color: rgba(255,255,255,0.7);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.compat-badge:hover {
	background: rgba(76,160,106,0.18);
	border-color: var(--color-light);
	color: var(--color-light);
}

/* ── Precios ─────────────────────────────────────────────────── */
.pricing-section { padding: var(--section-pad); }

.pricing-header {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 48px;
}
.pricing-header h2 { margin-bottom: 10px; }

.pricing-grid {
	max-width: 880px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 28px;
}

.pricing-card {
	background: var(--color-white);
	border-radius: var(--radius-card);
	padding: 40px 36px;
	box-shadow: var(--shadow-card);
	position: relative;
	border: 2px solid transparent;
	transition: box-shadow var(--transition), transform var(--transition);
}
.pricing-card:hover        { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.pricing-card.featured     { border-color: var(--color-primary); }

.popular-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.73rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 18px;
	border-radius: var(--radius-btn);
	white-space: nowrap;
}

.pricing-card h3      { font-size: 1.4rem; margin-bottom: 6px; }
.pricing-tagline      { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 24px; font-weight: 300; }

.pricing-price        { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; }
.price-amount         { font-family: var(--font-heading); font-weight: 800; font-size: 3rem; color: var(--color-primary); line-height: 1; }
.price-period         { font-size: 1rem; color: var(--color-text-muted); font-weight: 300; }
.price-annual         { font-size: 0.84rem; color: var(--color-text-muted); margin-bottom: 28px; font-weight: 300; }
.price-annual strong  { color: var(--color-primary); }

.pricing-features {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-bottom: 32px;
}

.pricing-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	font-weight: 300;
}
.pricing-features li .check { color: var(--color-primary); font-weight: 700; flex-shrink: 0; }
.pricing-features li .cross { color: #CCC; flex-shrink: 0; }

.pricing-cta { width: 100%; justify-content: center; }

/* ── Cómo empezar / Pasos ─────────────────────────────────────── */
.streaming-pasos-section { padding: var(--section-pad); }

.streaming-pasos-header {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 52px;
}
.streaming-pasos-header h2 { margin-bottom: 10px; }

.streaming-pasos {
	max-width: 780px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	position: relative;
}

.streaming-pasos::before {
	content: '';
	position: absolute;
	top: 35px;
	left: calc(16.7% + 4px);
	right: calc(16.7% + 4px);
	height: 2px;
	background: var(--color-border);
	z-index: 0;
}

.streaming-paso { text-align: center; position: relative; z-index: 1; }

.paso-num {
	width: 70px;
	height: 70px;
	background: var(--color-white);
	border: 3px solid var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--color-primary);
	margin-inline: auto;
	margin-bottom: 20px;
	box-shadow: var(--shadow-card);
	transition: background var(--transition), color var(--transition);
}

.streaming-paso:hover .paso-num {
	background: var(--color-primary);
	color: var(--color-white);
}

.streaming-paso h4 { font-size: 0.97rem; color: var(--color-deep); margin-bottom: 8px; }
.streaming-paso p  { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.7; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-section { padding: var(--section-pad); background: var(--color-card-bg); }

.faq-header {
	text-align: center;
	max-width: 520px;
	margin-inline: auto;
	margin-bottom: 44px;
}
.faq-header h2 { margin-bottom: 10px; }

.faq-list {
	max-width: 700px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.faq-item {
	background: var(--color-white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	cursor: pointer;
	user-select: none;
	gap: 16px;
}
.faq-question h4 { font-size: 0.97rem; color: var(--color-deep); font-weight: 700; }

.faq-icon {
	width: 28px;
	height: 28px;
	background: var(--color-card-bg);
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--color-primary);
	font-weight: 400;
	transition: transform var(--transition);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}
.faq-item.open .faq-answer { max-height: 200px; }

.faq-answer p { padding: 0 24px 20px; font-size: 0.93rem; }

/* ── CTA final ───────────────────────────────────────────────── */
.streaming-cta-section {
	padding: var(--section-pad);
	background: var(--color-deep);
	text-align: center;
}
.streaming-cta-section h2     { color: var(--color-white); margin-bottom: 12px; }
.streaming-cta-section > p    { color: rgba(255,255,255,0.65); margin-bottom: 32px; max-width: 460px; margin-inline: auto; }

.streaming-cta-section .btn-outline {
	border-color: rgba(255,255,255,0.35);
	color: var(--color-white);
}
.streaming-cta-section .btn-outline:hover {
	background: rgba(255,255,255,0.12);
	color: var(--color-white);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 780px) {
	.azuracast-inner         { grid-template-columns: 1fr; gap: 36px; }
	.azuracast-features      { grid-template-columns: repeat(3, 1fr); }
	.pricing-grid            { grid-template-columns: 1fr; max-width: 440px; }
	.streaming-stats         { grid-template-columns: repeat(2, 1fr); }
	.streaming-pasos         { grid-template-columns: 1fr; max-width: 400px; }
	.streaming-pasos::before { display: none; }
}