/**
 * Estado de directo y botón de Prime.
 *
 * Regla de diseño: no grites cuando NO estás. El 95% del tiempo esto es una
 * fila discreta de enlaces. Cuando hay directo, se apodera de la sección.
 *
 * Lo anterior hacía justo lo contrario: cuatro cajas enormes repitiendo
 * "OFFLINE" cuatro veces. Lo primero que aprendía el visitante era que no
 * estabas.
 */

/* ---------------------------------------------------------------
   Corona de Prime.

   Va como SVG embebido, no con Font Awesome: cargar ~70 KB de fuente de
   iconos para pintar una corona es absurdo, y una corona no va a cambiar.
   `mask` en vez de `background`: así hereda currentColor y sigue al texto
   del botón sin tener que duplicar el color en dos sitios.
   --------------------------------------------------------------- */
.elementor-widget-button .elementor-button-content-wrapper::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.55em;
	background-color: currentColor;
	-webkit-mask: var(--d3-corona) center / contain no-repeat;
	mask: var(--d3-corona) center / contain no-repeat;
}

/* Solo el botón de Prime la lleva: sin esto, TODOS los botones del sitio
   saldrían coronados. */
.elementor-widget-button:not(.d3-prime) .elementor-button-content-wrapper::before {
	content: none;
}

.d3-prime {
	--d3-corona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 3.6l3.4 5.9 5.3-3.4-1.6 10.3H4.9L3.3 6.1l5.3 3.4L12 3.6zM4.9 18.4h14.2v2H4.9v-2z'/%3E%3C/svg%3E");
}

.d3-directo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

/* ---------------------------------------------------------------
   Offline: solo enlaces. Sin cajas, sin bordes, sin la palabra.
   --------------------------------------------------------------- */
/* Los cuatro en UNA línea, también a 375px. `1fr` reparte por igual y evita
   que "YouTube" empuje a "Kick" a la fila siguiente por ser más largo. */
.d3-directo__links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.4rem;
	width: 100%;
}

/* El color de marca lo inyecta el PHP en `--marca`, con los valores que ya
   usaba el widget anterior. No se inventa ninguno. */
.d3-directo__link {
	/* 44px de alto mínimo: umbral táctil de Apple/WCAG. Los enlaces sociales
	   de este sitio medían 18px — imposibles con el pulgar, y el 80-90% del
	   tráfico es móvil. */
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	padding: 0 0.5rem;
	/* Píldora, como estaban antes. El cuadrado competía con las tarjetas de
	   abajo, que también son rectángulos: todo se leía como una tabla. */
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--marca, #fff) 40%, transparent);
	background: color-mix(in srgb, var(--marca, #fff) 9%, var(--d3-surface-1));
	color: var(--e-global-color-primary, #fff);
	font-family: "Nunito Sans", sans-serif;
	font-size: clamp(0.68rem, 2.7vw, 0.82rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.25s var(--d3-ease), background-color 0.25s var(--d3-ease),
		box-shadow 0.25s var(--d3-ease), transform 0.25s var(--d3-ease);
}

/* Punto de color de la marca dentro de la píldora: da identidad sin cargar
   los logotipos de cada plataforma (que además tienen normas de uso propias). */
.d3-directo__link::before {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--marca, #fff);
	flex: 0 0 auto;
}

.d3-directo__link:hover,
.d3-directo__link:focus-visible {
	border-color: var(--marca, #fff);
	background: color-mix(in srgb, var(--marca, #fff) 20%, var(--d3-surface-1));
	box-shadow: 0 0 18px -4px var(--marca, transparent);
	transform: translateY(-2px);
}

/* En directo se encienden LAS CUATRO, cada una con su color.

   Twitch decide por todas y es correcto: el cliente abre siempre en las cuatro
   a la vez, empezando por Twitch. Es su rutina real, no una suposición del
   código — por eso el widget original solo comprobaba Twitch.

   Cada una con SU color, no con el oro: el visitante asocia el morado a Twitch
   antes que a cualquier convención nuestra. */
.d3-directo.is-live .d3-directo__link {
	border-color: var(--marca);
	background: color-mix(in srgb, var(--marca) 30%, var(--d3-surface-1));
	box-shadow: 0 0 22px -4px var(--marca);
}

/* ---------------------------------------------------------------
   En directo: la barra manda.
   --------------------------------------------------------------- */
.d3-directo__bar {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem;
	border-radius: 8px;
	text-decoration: none;
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--e-global-color-secondary, #fac308) 18%, var(--d3-surface-1)),
		var(--d3-surface-1));
	border: 1px solid var(--e-global-color-secondary, #fac308);
	box-shadow: 0 0 28px -6px var(--d3-glow);
	max-width: 100%;
}

.d3-directo__bar[hidden] {
	display: none;
}

.d3-directo__txt {
	font-family: "Nunito Sans", sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--e-global-color-primary, #fff);
}

.d3-directo__txt strong {
	font-family: "Anton", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--e-global-color-secondary, #fac308);
}

.d3-directo__cta {
	margin-left: auto;
	padding-left: 0.75rem;
	font-family: "Nunito Sans", sans-serif;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--e-global-color-accent, #a0a0a8);
	white-space: nowrap;
}

.d3-directo__bar:hover .d3-directo__cta,
.d3-directo__bar:focus-visible .d3-directo__cta {
	color: var(--e-global-color-secondary, #fac308);
}

/* El punto rojo. Sin animación no se lee como "ahora mismo". */
.d3-directo__pulso {
	position: relative;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ff3b30;
}

@media (prefers-reduced-motion: no-preference) {
	.d3-directo__pulso::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: #ff3b30;
		animation: d3-pulso 1.8s ease-out infinite;
	}
}

@keyframes d3-pulso {
	from {
		transform: scale(1);
		opacity: 0.7;
	}
	to {
		transform: scale(3.2);
		opacity: 0;
	}
}