/* ═══════════════════════════════════════════════════════════════
   KIOSKO JALISCO – Vertical 1080×1920 Redesign (Figma 2844:332)
   Design tokens, scaling viewport, cover-flow, main layout.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 1. Design tokens ---------- */
:root {
	--w: 1080px;
	--h: 1920px;

	/* Background gradient */
	--bg-grad: linear-gradient(180deg, #000004 0%, #000814 100%);
	--surface-1: #001C30;
	--surface-2: #000F20;
	--surface-3: #010610;
	--surface-4: #030A12;
	--surface-5: #000913;

	/* Accents */
	--cyan: #00ACD4;
	--cyan-bright: #20C0F3;
	--cyan-glow: #02DAFD;
	--cyan-text: #09D1FF;

	/* Card borders */
	--c-green: #16CD80;
	--c-magenta: #DE87E7;
	--c-orange: #F0810B;
	--c-orange-bright: #F9AB01;
	--c-red: #C13028;
	--c-red-glow: rgba(237, 76, 92, 1);

	/* Text */
	--text: #FFFFFF;

	/* Spacing */
	--pad-side: 24px;
	--gap-cards: 16px;

	/* Fonts */
	--f-display: 'Satoshi', 'Inter', system-ui, sans-serif;
	--f-mono: 'Orbitron', 'Satoshi', monospace;
	--f-body: 'Inter', 'Satoshi', system-ui, sans-serif;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	background: #000;
}

body {
	font-family: var(--f-display);
	color: var(--text);
}

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

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
	padding: 0;
}

/* ---------- 3. Viewport scaler (1080x1920 → fit window) ---------- */
#viewport {
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: #000;
	display: grid;
	place-items: center;
}

#stage {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--w);
	height: var(--h);
	transform-origin: 0 0;
	background: var(--bg-grad);
	overflow: hidden;
}

/* Hide overlay modals by default (their styles live in main.css which we no
   longer load — these rules make sure their close-X buttons don't leak through). */
.web-modal {
	position: absolute;
	inset: 0;
	z-index: 200;
	display: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.web-modal.active {
	display: flex;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	align-items: center;
	justify-content: center;
}

.web-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.97);
	z-index: 1;
}

.web-modal-content {
	position: relative;
	z-index: 2;
	width: 98%;
	height: 92%;
	max-width: 1080px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.web-modal-iframe-container {
	width: 96%;
	height: 88%;
	background: #fff;
	border-radius: 12px;
	overflow: auto;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9);
}

.web-modal-iframe-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.web-modal-close,
.web-modal-close-top {
	position: absolute;
	z-index: 10;
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	background: rgba(0, 28, 48, 0.85);
	border: 1.5px solid var(--cyan);
	border-radius: 50%;
	color: var(--cyan-bright);
	cursor: pointer;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 172, 212, 0.35);
	transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.web-modal-close:hover,
.web-modal-close-top:hover {
	background: rgba(0, 172, 212, 0.28);
	transform: scale(1.08) rotate(90deg);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 32px rgba(2, 218, 253, 0.6);
}

.web-modal-close svg,
.web-modal-close-top svg {
	width: 32px;
	height: 32px;
	stroke: currentColor;
}

/* Bottom-center pill: secondary close that floats above the iframe */
.web-modal-close {
	bottom: 32px;
	right: 32px;
}

.web-modal-close-top {
	top: 32px;
	right: 32px;
}

/* Same upgrade for the Agent QR close button (consistency) */
.agent-qr-close {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: rgba(0, 28, 48, 0.85);
	border: 1.5px solid var(--cyan);
	border-radius: 50%;
	color: var(--cyan-bright);
	cursor: pointer;
	transition: background 180ms ease, transform 180ms ease;
}

.agent-qr-close:hover {
	background: rgba(0, 172, 212, 0.28);
	transform: scale(1.08) rotate(90deg);
}

.agent-qr-modal {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 300;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
}

.agent-qr-modal.active {
	display: flex;
}

.agent-qr-backdrop {
	position: absolute;
	inset: 0;
}

.agent-qr-content {
	position: relative;
	z-index: 2;
	background: #001C30;
	padding: 32px;
	border-radius: 24px;
	max-width: 520px;
}

.agent-qr-close {
	position: absolute;
	top: 16px;
	right: 16px;
	color: #fff;
	cursor: pointer;
}

/* ═══════════════════════════════════════════════
   4. MAIN KIOSKO LAYOUT
   ═══════════════════════════════════════════════ */
.main-kiosk {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
}

/* ---------- 5.1 HEADER ---------- */
.k-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	padding: 28px var(--pad-side) 0;
}

/* Left column: logo on top, ES/EN below */
.k-header-left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.k-logo-img {
	width: 130px;
	height: auto;
	filter: brightness(1.05);
}

/* Language toggle */
.lang-toggle {
	display: flex;
	gap: 4px;
	padding: 5px;
	background: var(--surface-1);
	border: 1px solid var(--cyan);
	border-radius: 999px;
}

.lang-toggle button {
	min-width: 56px;
	padding: 6px 18px;
	font: 700 16px var(--f-display);
	color: var(--cyan);
	background: transparent;
	border-radius: 999px;
	letter-spacing: 0.5px;
	transition: background 150ms ease, box-shadow 150ms ease;
}

.lang-toggle button.active {
	background: var(--surface-2);
	box-shadow: inset 0 0 0 1px rgba(0, 172, 212, 0.6), 0 0 12px rgba(0, 172, 212, 0.35);
}

/* ── Countdown panel (single outer cyan border) ── */
.countdown-wrap {
	background: transparent;
	border: 1px solid var(--cyan);
	border-radius: 28px;
	overflow: hidden;
}

.cd-title {
	padding: 18px 24px 10px;
	margin: 0;
	font: 700 44px/1 var(--f-mono);
	color: var(--text);
	letter-spacing: -0.5px;
	text-transform: uppercase;
	text-align: center;
}

.cd-digits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	padding: 0 24px 18px;
}

.cd-unit {
	border: 1px solid var(--cyan);
	border-radius: 14px;
	padding: 10px 4px 8px;
	text-align: center;
	background: transparent;
}

.cd-num {
	font: 700 44px/1 var(--f-mono);
	color: var(--text);
	letter-spacing: 1px;
}

.cd-sub {
	margin-top: 6px;
	font: 700 13px var(--f-mono);
	color: var(--text);
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.cd-footer {
	border-top: 1px solid rgba(0, 172, 212, 0.45);
	padding: 12px 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	font: 400 16px var(--f-display);
	color: var(--text);
}

.cd-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cd-meta svg {
	color: var(--cyan);
	flex-shrink: 0;
}

.cd-meta #cdDate {
	text-transform: uppercase;
}

/* ── Weather (right) ── */
.k-weather {
	display: flex;
	align-items: center;
	gap: 12px;
}

.k-weather .sun {
	width: 76px;
	height: 76px;
	display: grid;
	place-items: center;
	filter: drop-shadow(0 4px 14px rgba(2, 218, 253, 0.35));
}

.k-weather .sun img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.k-weather-text {
	text-align: left;
}

.k-weather .t-val {
	font: 700 40px/1 var(--f-display);
}

.k-weather .t-desc {
	margin-top: 4px;
	font: 400 18px var(--f-display);
	opacity: 0.85;
}

/* ---------- 5.2 HERO BANNER ---------- */
.k-hero {
	margin: 24px var(--pad-side) 0;
	height: 560px;
	border-radius: 32px;
	overflow: hidden;
	position: relative;
	background: #000;
	border: 1px solid rgba(0, 172, 212, 0.35);
	box-shadow:
		0 0 24px rgba(0, 172, 212, 0.18),
		0 0 60px rgba(2, 218, 253, 0.08),
		0 12px 48px rgba(0, 0, 0, 0.5);
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 700ms ease;
	pointer-events: none;
}

.hero-video.active {
	opacity: 1;
}

.k-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 4, 12, 0.1) 0%, rgba(0, 8, 20, 0.65) 100%);
	pointer-events: none;
	z-index: 1;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 36px 32px;
	z-index: 2;
}

.hero-text h1 {
	margin: 0;
	font: 700 56px/1 var(--f-display);
	color: var(--text);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.hero-text h1 .jalisco {
	display: block;
	font: 900 76px/1 var(--f-display);
	background: linear-gradient(180deg, #00CFFF 0%, #007BFF 50%, #001E6C 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 4px;
	margin: 6px 0;
}

.hero-text p {
	margin: 18px 0 0;
	max-width: 540px;
	font: 400 22px/1.35 var(--f-display);
	color: var(--text);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero-text p .accent {
	color: var(--cyan-text);
	font-weight: 700;
}

.hero-cta-row {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 24px;
	/* Glass styling is dormant in state 1 (no background/border) and
	   activates in state 2. The transition runs in both directions. */
	padding: 6px 22px;
	border-radius: 28px;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transition:
		background 500ms ease,
		border-color 500ms ease,
		box-shadow 500ms ease,
		backdrop-filter 500ms ease,
		-webkit-backdrop-filter 500ms ease,
		padding 400ms ease;
}

.hero-guide {
	max-width: 260px;
	font: 400 22px/1.25 var(--f-display);
	color: var(--text);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	flex-shrink: 0;
}

.hero-guide strong {
	display: block;
	color: var(--cyan-glow);
	font-weight: 700;
	letter-spacing: 0.5px;
}

/* Mic instruction hint — collapsed in state 1, expands in state 2 */
.hero-mic-hint {
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	margin: 0;
	font: 400 19px/1.3 var(--f-display);
	color: var(--text);
	text-align: left;
	white-space: nowrap;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transform: translateY(8px);
	transition:
		opacity 350ms ease 0ms,
		visibility 0ms linear 350ms,
		transform 400ms ease 0ms,
		flex-basis 400ms ease 0ms,
		width 400ms ease 0ms;
}

/* "Toca para hablar" button (bottom-right inside hero in state 1) */
.hero-explore-btn {
	width: 280px;
	flex-shrink: 0;
	/* Push to the right edge in state 1 since the waveform/hint/mic
	   are collapsed and gap+space-between would leave dead space. */
	margin-left: auto;
	transition: transform 200ms ease, filter 200ms ease, opacity 400ms ease;
	filter: drop-shadow(0 8px 24px rgba(0, 172, 212, 0.5));
	animation: pulse-explore 2.4s ease-in-out infinite;
}

.hero-explore-btn:hover,
.hero-explore-btn:active {
	transform: scale(1.05);
	filter: drop-shadow(0 12px 36px rgba(2, 218, 253, 0.85));
}

.hero-explore-btn img {
	width: 100%;
	display: block;
	pointer-events: none;
}

@keyframes pulse-explore {

	0%,
	100% {
		filter: drop-shadow(0 8px 24px rgba(0, 172, 212, 0.5));
	}

	50% {
		filter: drop-shadow(0 8px 36px rgba(2, 218, 253, 0.9));
	}
}

/* REGRESAR button — top-left inside hero, shown only in state 2 */
.hero-back-btn {
	position: absolute;
	top: 28px;
	left: 28px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--cyan);
	border-radius: 999px;
	background: rgba(0, 28, 48, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--cyan-bright);
	font: 700 16px var(--f-display);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	transition: opacity 350ms ease, transform 350ms ease, background 150ms ease;
}

.hero-back-btn:hover {
	background: rgba(0, 172, 212, 0.25);
}

.hero-back-btn svg {
	flex-shrink: 0;
}

/* ── State-driven visibility ── */
.hero-text {
	transition: opacity 350ms ease;
}

.k-hero[data-state="2"] .hero-text {
	opacity: 0;
	visibility: hidden;
}

.k-hero[data-state="2"] .hero-back-btn {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Swap TOCA PARA HABLAR ↔ mic button between states.
   The explore button collapses (flex+width=0) in state 2 so the
   waveform/hint/mic can occupy its slot inside the glass navbar. */
.hero-explore-btn {
	transition:
		opacity 350ms ease,
		transform 350ms ease,
		filter 200ms ease,
		flex-basis 500ms ease,
		width 500ms ease,
		margin 500ms ease;
}

.k-hero[data-state="2"] .hero-explore-btn {
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transform: scale(0.9);
}

/* ── Mic button (state 2 only, triggers ElevenLabs agent) ──
       Compact form so the waveform visualizer is the dominant signal
       element; mic acts as a secondary control. */
.hero-mic-btn {
	position: relative;
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	height: 52px;
	margin: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #00ACD4 0%, #001C30 70%);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transform: scale(0.85);
	transition:
		opacity 400ms ease,
		transform 400ms ease,
		box-shadow 250ms ease,
		flex-basis 500ms ease,
		width 500ms ease,
		margin 500ms ease;
	box-shadow:
		0 0 0 1.5px rgba(0, 172, 212, 0.6),
		0 4px 14px rgba(0, 172, 212, 0.4);
}

.hero-mic-btn:hover {
	transform: scale(1.03);
}

.hero-mic-btn:active {
	transform: scale(0.98);
}

.hero-mic-btn svg {
	width: 22px;
	height: 22px;
	position: relative;
	z-index: 2;
}

.k-hero[data-state="2"] .hero-mic-btn {
	flex: 0 0 52px;
	width: 52px;
	min-width: 52px;
	margin-left: 4px;
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	transition:
		opacity 800ms ease 4100ms,
		transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 4100ms,
		box-shadow 250ms ease,
		flex-basis 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 3800ms,
		width 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 3800ms,
		margin 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 3800ms;
}

/* Pulsing rings (visible when listening/speaking) */
.hero-mic-btn .mic-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--cyan);
	opacity: 0;
	pointer-events: none;
}

.hero-mic-btn[data-agent-state="listening"] .mic-ring,
.hero-mic-btn[data-agent-state="speaking"] .mic-ring,
.hero-mic-btn[data-agent-state="thinking"] .mic-ring {
	animation: mic-ring-pulse 1.8s ease-out infinite;
}

.hero-mic-btn[data-agent-state="listening"] .mic-ring--delay,
.hero-mic-btn[data-agent-state="speaking"] .mic-ring--delay,
.hero-mic-btn[data-agent-state="thinking"] .mic-ring--delay {
	animation-delay: 0.9s;
}

@keyframes mic-ring-pulse {
	0% {
		opacity: 0.7;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

/* Per-state coloring */
.hero-mic-btn[data-agent-state="connecting"] {
	background: radial-gradient(circle at 30% 30%, #F9AB01 0%, #001C30 70%);
	box-shadow: 0 0 0 2px rgba(249, 171, 1, 0.7), 0 8px 28px rgba(249, 171, 1, 0.5);
	animation: mic-connecting 1s ease-in-out infinite alternate;
}

.hero-mic-btn[data-agent-state="listening"] {
	background: radial-gradient(circle at 30% 30%, #16CD80 0%, #001C30 70%);
	box-shadow: 0 0 0 2px rgba(22, 205, 128, 0.8), 0 8px 32px rgba(22, 205, 128, 0.6);
}

.hero-mic-btn[data-agent-state="speaking"] {
	background: radial-gradient(circle at 30% 30%, #02DAFD 0%, #001C30 70%);
	box-shadow: 0 0 0 2px rgba(2, 218, 253, 0.85), 0 8px 36px rgba(2, 218, 253, 0.7);
}

.hero-mic-btn[data-agent-state="thinking"] {
	background: radial-gradient(circle at 30% 30%, #DE87E7 0%, #001C30 70%);
	box-shadow: 0 0 0 2px rgba(222, 135, 231, 0.8), 0 8px 32px rgba(222, 135, 231, 0.5);
}

.hero-mic-btn[data-agent-state="listening"] .mic-ring {
	border-color: #16CD80;
}

.hero-mic-btn[data-agent-state="speaking"] .mic-ring {
	border-color: #02DAFD;
}

.hero-mic-btn[data-agent-state="thinking"] .mic-ring {
	border-color: #DE87E7;
}

@keyframes mic-connecting {
	from {
		box-shadow: 0 0 0 2px rgba(249, 171, 1, 0.5), 0 8px 24px rgba(249, 171, 1, 0.3);
	}

	to {
		box-shadow: 0 0 0 2px rgba(249, 171, 1, 0.9), 0 8px 36px rgba(249, 171, 1, 0.7);
	}
}

/* ── 5.2.X Agent waveform — 3D-stratified neon ribbon ─────────────
       Inline inside the glass navbar (state 2). Canvas-rendered
       topographic waveform: nested wave strata fill purple → cyan,
       with bright neon outlines that react to ElevenLabs audio. */
.agent-waveform {
	position: relative;
	flex: 0 0 0;
	width: 0;
	min-width: 0;
	max-width: 480px;
	height: 60px;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transform: translateY(8px) scale(0.96);
	transition:
		opacity 350ms ease 0ms,
		visibility 0ms linear 350ms,
		transform 400ms ease 0ms,
		flex-basis 500ms ease 0ms,
		width 500ms ease 0ms;
	pointer-events: none;
	/* No filter / drop-shadow — the iridescent ribbons rely on their own
	   bloom and must sit cleanly on the glass navbar without an external
	   box-shadow that would read as a container. */
}

.k-hero[data-state="2"] .agent-waveform {
	flex: 1 1 380px;
	width: auto;
	min-width: 280px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	transition:
		opacity 900ms ease 4000ms,
		visibility 0ms linear 4000ms,
		transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) 4000ms,
		flex-basis 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 3700ms,
		width 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 3700ms;
}

/* Glass navbar look + mic-hint visibility in state 2 */
.k-hero[data-state="2"] .hero-cta-row {
	background:
		linear-gradient(180deg, rgba(2, 26, 50, 0.55) 0%, rgba(0, 18, 38, 0.72) 100%);
	border-color: rgba(2, 218, 253, 0.35);
	box-shadow:
		0 16px 44px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(2, 218, 253, 0.08) inset,
		0 0 40px rgba(2, 218, 253, 0.18) inset;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	transition:
		background 700ms ease 3800ms,
		border-color 700ms ease 3800ms,
		box-shadow 700ms ease 3800ms,
		backdrop-filter 700ms ease 3800ms,
		-webkit-backdrop-filter 700ms ease 3800ms;
}

.k-hero[data-state="2"] .hero-mic-hint {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	margin: 0 4px 0 8px;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition:
		opacity 800ms ease 4100ms,
		visibility 0ms linear 4100ms,
		transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 4100ms,
		flex-basis 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 3900ms,
		width 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 3900ms,
		margin 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 3900ms;
}

/* Canvas fills the entire waveform container — the wave has the full
   area to itself. */
.aw-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* Status pill — fully independent of the waveform. Anchored to the
   top-right of the hero so it visually sits at the same level as the
   REGRESAR button. */
.aw-status {
	position: absolute;
	top: 38px;
	right: 32px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	/* Fade-out path: immediate */
	transition:
		opacity 300ms ease 0ms,
		visibility 0ms linear 300ms;
}

.k-hero[data-state="2"] .aw-status {
	opacity: 1;
	visibility: visible;
	/* Fade-in path: matches the waveform's 4s delay */
	transition:
		opacity 1000ms ease 4000ms,
		visibility 0ms linear 4000ms;
}

.aw-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cyan-glow);
	box-shadow: 0 0 10px var(--cyan-glow), 0 0 22px rgba(2, 218, 253, 0.5);
	animation: aw-dot-pulse 1.8s ease-in-out infinite;
	transition: background-color 400ms ease, box-shadow 400ms ease;
}

.aw-status-label {
	font: 700 9px/1 var(--f-mono);
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--cyan-text);
	text-shadow: 0 0 10px rgba(2, 218, 253, 0.7), 0 1px 2px rgba(0, 0, 0, 0.8);
	transition: color 400ms ease, text-shadow 400ms ease;
}

@keyframes aw-dot-pulse {

	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(0.55);
		opacity: 0.45;
	}
}

/* Status-dot/label palettes per state. The canvas itself handles the
   waveform's color shift — these just keep the label in sync. */
.agent-waveform[data-agent-state="connecting"] .aw-status-dot {
	background: #F9AB01;
	box-shadow: 0 0 10px #F9AB01, 0 0 22px rgba(249, 171, 1, 0.55);
	animation-duration: 0.9s;
}

.agent-waveform[data-agent-state="connecting"] .aw-status-label {
	color: #FFD479;
	text-shadow: 0 0 10px rgba(249, 171, 1, 0.8), 0 1px 2px rgba(0, 0, 0, 0.8);
}

.agent-waveform[data-agent-state="listening"] .aw-status-dot {
	background: #16CD80;
	box-shadow: 0 0 10px #16CD80, 0 0 22px rgba(22, 205, 128, 0.55);
}

.agent-waveform[data-agent-state="listening"] .aw-status-label {
	color: #7BF5B7;
	text-shadow: 0 0 10px rgba(22, 205, 128, 0.8), 0 1px 2px rgba(0, 0, 0, 0.8);
}

.agent-waveform[data-agent-state="speaking"] .aw-status-dot {
	background: #02DAFD;
	box-shadow: 0 0 12px #02DAFD, 0 0 26px rgba(2, 218, 253, 0.75);
	animation-duration: 0.7s;
}

.agent-waveform[data-agent-state="speaking"] .aw-status-label {
	color: #C5F4FF;
	text-shadow: 0 0 12px rgba(2, 218, 253, 0.95), 0 1px 2px rgba(0, 0, 0, 0.8);
}

.agent-waveform[data-agent-state="thinking"] .aw-status-dot {
	background: #5B8CFF;
	box-shadow: 0 0 10px #5B8CFF, 0 0 22px rgba(91, 140, 255, 0.6);
	animation-duration: 2.6s;
}

.agent-waveform[data-agent-state="thinking"] .aw-status-label {
	color: #B7CCFF;
	text-shadow: 0 0 10px rgba(91, 140, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---------- 5.3 CARDS GRID ---------- */
.k-cards {
	margin: 24px var(--pad-side) 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-cards);
}

.k-card {
	--accent: var(--cyan);
	--accent-glow: rgba(0, 172, 212, 0.4);
	position: relative;
	aspect-ratio: 1 / 0.76;
	border-radius: 22px;
	overflow: hidden;
	background: var(--surface-3) center/cover no-repeat;
	border: 1px solid rgba(255, 255, 255, 0.06);
	transition: transform 200ms ease, box-shadow 200ms ease;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr auto;
	gap: 10px;
	padding: 22px 24px;
	width: 100%;
	cursor: pointer;
	text-align: left;
	color: #fff;
	font-family: var(--f-display);
}

/* Readability scrim: dark vertical fade so text on the left stays legible
   while the background photo on the right shows through. */
.k-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
			rgba(0, 4, 12, 0.55) 0%,
			rgba(0, 4, 12, 0.25) 40%,
			rgba(0, 4, 12, 0.85) 100%);
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
}

.k-card>* {
	position: relative;
	z-index: 1;
}

.k-card:hover,
.k-card:active {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 28px var(--accent-glow);
}

/* Color variants — drive both border and the icon/arrow accent color. */
.k-card.--cyan {
	--accent: var(--cyan);
	--accent-glow: rgba(0, 172, 212, 0.45);
	border-color: var(--cyan);
	box-shadow: 0 0 14px rgba(0, 172, 212, 0.4);
}

.k-card.--green {
	--accent: var(--c-green);
	--accent-glow: rgba(22, 205, 128, 0.5);
	border-color: var(--c-green);
	box-shadow: 0 0 14px rgba(22, 205, 128, 0.4);
}

.k-card.--magenta {
	--accent: var(--c-magenta);
	--accent-glow: rgba(222, 135, 231, 0.5);
	border-color: var(--c-magenta);
	box-shadow: 0 0 14px rgba(222, 135, 231, 0.4);
}

.k-card.--orange {
	--accent: var(--c-orange-bright);
	--accent-glow: rgba(240, 129, 11, 0.5);
	border-color: var(--c-orange);
	box-shadow: 0 0 14px rgba(240, 129, 11, 0.4);
}

/* Text body (bottom-left) */
.card-body {
	grid-row: 3;
	grid-column: 1;
	align-self: end;
	max-width: 92%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.card-title {
	margin: 0;
	font: 800 21px/1.1 var(--f-display);
	color: #fff;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.card-desc {
	margin: 0;
	font: 400 16px/1.35 var(--f-display);
	color: rgba(255, 255, 255, 0.82);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- 5.4 STATUS TICKER ---------- */
/* margin-top:auto aquí + margin-top:auto en el footer crean dos espacios
   iguales: el ticker queda centrado en la banda inferior y el footer anclado
   abajo. El header/hero/tarjetas no se tocan. */
.k-services {
	margin-top: auto;
	margin-right: var(--pad-side);
	margin-left: var(--pad-side);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0;
}

/* Cada item es texto plano — sin caja, sin borde propio */
.svc-badge {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 22px;
	color: rgba(2, 218, 253, 0.6);
	font: 400 12px var(--f-display);
	text-transform: uppercase;
	letter-spacing: 0.9px;
	pointer-events: none;
	user-select: none;
	cursor: default;
	/* separador vertical entre items */
	border-right: 1px solid rgba(2, 218, 253, 0.18);
}
.svc-badge:last-child { border-right: none; }

.svc-badge img,
.svc-badge svg {
	width: 14px;
	height: 14px;
	opacity: 0.55;
	flex-shrink: 0;
}

/* Dot verde pulsante */
.svc-badge::before {
	content: "";
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #3dff9a;
	box-shadow: 0 0 6px rgba(61, 255, 154, 0.8);
	animation: svc-status-pulse 2.4s ease-in-out infinite;
}

@keyframes svc-status-pulse {
	0%, 100% { opacity: 1;    box-shadow: 0 0 6px rgba(61,255,154,0.8); }
	50%       { opacity: 0.2;  box-shadow: 0 0 2px rgba(61,255,154,0.2); }
}

/* ---------- 5.4 ANIMACIÓN DE ICONOS DE SERVICIO ----------
   Micro-animaciones sutiles e infinitas (kiosko 24/7). El wrapper .svc-icon
   da el stacking/anclaje para los anillos decorativos (::before/::after). */
.svc-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.svc-icon img { display: block; }

/* VIDEOLLAMADA — latido suave de la cámara + punto REC parpadeante */
.svc-icon--video img {
	animation: svc-breathe 2.6s ease-in-out infinite;
	transform-origin: center;
}
.svc-icon--video::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ff4d4d;
	box-shadow: 0 0 6px rgba(255, 77, 77, 0.9);
	animation: svc-rec 1.4s ease-in-out infinite;
}

/* GPS — el pin rebota suave + anillo de radar expandiéndose */
.svc-icon--gps img {
	animation: svc-bob 2.4s ease-in-out infinite;
	transform-origin: center bottom;
}
.svc-icon--gps::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 22px;
	height: 22px;
	margin-left: -11px;
	border-radius: 50%;
	border: 1.5px solid var(--cyan-glow, #02DAFD);
	opacity: 0;
	animation: svc-ping 2.4s ease-out infinite;
}

/* ATENCIÓN — leve balanceo del headset */
.svc-icon--support img {
	animation: svc-rock 3s ease-in-out infinite;
	transform-origin: center 70%;
}

/* CONEXIÓN — pulso de opacidad (señal) + anillo expansivo */
.svc-icon--wifi img {
	animation: svc-signal 2.2s ease-in-out infinite;
	transform-origin: center bottom;
}
.svc-icon--wifi::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border-radius: 50%;
	border: 1.5px solid var(--cyan-glow, #02DAFD);
	opacity: 0;
	animation: svc-ping 2.2s ease-out infinite;
}

@keyframes svc-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}
@keyframes svc-rec {
	0%, 100% { opacity: 1;   transform: scale(1); }
	50%      { opacity: 0.25; transform: scale(0.78); }
}
@keyframes svc-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}
@keyframes svc-rock {
	0%, 100% { transform: rotate(-7deg); }
	50%      { transform: rotate(7deg); }
}
@keyframes svc-signal {
	0%, 100% { opacity: 0.55; transform: scale(0.94); }
	50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes svc-ping {
	0%   { opacity: 0.7; transform: scale(0.35); }
	70%  { opacity: 0;   transform: scale(1.25); }
	100% { opacity: 0;   transform: scale(1.25); }
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.svc-icon img,
	.svc-icon::before,
	.svc-icon::after { animation: none !important; }
	.svc-icon::before,
	.svc-icon::after { display: none; }
}

.svc-badge .svc-line {
	display: inline;
	white-space: nowrap;
}

.svc-badge .svc-line small {
	font-weight: 400;
	opacity: 0.6;
	font-size: 11px;
	margin-left: 4px;
}

/* Reserved space for the global emergency 911 button rendered on another
   page layer. We keep its footprint so the badge layout doesn't reflow when
   that overlay mounts above it. */
.emergency-slot {
	width: 280px;
	height: 280px;
	pointer-events: none;
}

/* ---------- 5.5 FOOTER (vertical stack, centered) ---------- */
/* margin-top:auto (junto con el del ticker) divide el espacio inferior en dos
   partes iguales y mantiene el footer anclado al fondo del tótem. */
.k-footer {
	margin-top: 12px;
	padding: 0 var(--pad-side) 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.sponsors-title {
	font: 300 14px var(--f-body);
	color: var(--text);
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 2.4px;
	text-align: center;
}

.sponsors-row {
	width: 100%;
	max-width: 980px;
	height: auto;
	display: block;
	opacity: 0.95;
}

.qr-box {
	width: 175px;
	height: 175px;
	background: #fff;
	border: 1px solid var(--cyan);
	border-radius: 6px;
	display: grid;
	place-items: center;
	padding: 8px;
	margin-top: 6px;
}

.qr-box img,
.qr-box canvas,
.qr-box svg {
	width: 100%;
	height: 100%;
	display: block;
}

.qr-text {
	text-align: center;
}

.qr-text strong {
	display: block;
	font: 700 17px var(--f-display);
	color: var(--text);
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.qr-text small {
	display: block;
	margin-top: 4px;
	font: 400 14px var(--f-display);
	color: var(--text);
	opacity: 0.75;
}