/* Piel de consola de EML Analyzer — marca digitalchk.
   El heroe existente se re-pinta como banda de consola (tinta + malla); la
   ceja es la opcion hero_badge con este estilo mono. El acento (opcion
   primary_color) es tinta; el rojo/ambar/verde de la semantica de analisis
   no se toca. Pitch e informe: colores clavados por JS desde opciones. */

.ea-wrap,
.ea-pitch-overlay {
	--eax-tinta: var(--ea-accent, #0b1524);
	--eax-menta: var(--ea-consola-accent, #5eead4);
}


/* ── Heroe como banda de consola ───────────────────────────────────────── */
.ea-wrap .ea-hero {
	background:
		radial-gradient(color-mix(in srgb, var(--eax-menta, #5eead4) 13%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
		radial-gradient(120% 140% at 85% -20%, color-mix(in srgb, var(--eax-tinta, #0b1524) 82%, #6e9bd8) 0%, var(--eax-tinta, #0b1524) 60%) !important;
	border: 0 !important;
	border-radius: 16px !important;
	overflow: hidden;
}
.ea-wrap .ea-hero__badge {
	background: transparent !important;
	color: var(--eax-menta, #5eead4) !important;
	padding: 0 !important;
	border-radius: 0 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
	font-size: 0.7rem !important;
	letter-spacing: 0.08em !important;
	text-transform: none !important;
}
.ea-wrap .ea-hero__badge::after {
	content: '\258e';
	margin-left: 4px;
	animation: ea-cursor 1.1s steps(2, jump-none) infinite;
}
@keyframes ea-cursor {
	to {
		opacity: 0;
	}
}
.ea-wrap .ea-hero__title {
	color: #ffffff !important;
	text-wrap: balance;
}
.ea-wrap .ea-hero__intro {
	color: #b8c7d8 !important;
}
.ea-wrap .ea-hero__icon {
	color: var(--eax-menta, #5eead4) !important;
	background: color-mix(in srgb, var(--eax-menta, #5eead4) 12%, transparent) !important;
	border-radius: 12px;
}

/* ── Zona de carga y botones ───────────────────────────────────────────── */
.ea-wrap .ea-form-panel {
	border: 1px solid #e4e9f0 !important;
	border-radius: 16px !important;
	overflow: hidden;
}
/* En la pagina el shortcode va con hero=no (el H1 lo pone la pagina), asi
   que la firma de consola es esta tira fina sobre el panel de carga. El
   TEXTO lo pinta PHP (opcion console_eyebrow, ceja-marca.py) en un <p>
   real, ya no un ::before: asi es configurable por sitio. */
.ea-wrap .ea-consola-ceja {
	display: block;
	margin: -22px -22px 18px;
	padding: 10px 22px;
	background:
		radial-gradient(color-mix(in srgb, var(--eax-menta, #5eead4) 13%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
		radial-gradient(120% 200% at 85% -40%, color-mix(in srgb, var(--eax-tinta, #0b1524) 82%, #6e9bd8) 0%, var(--eax-tinta, #0b1524) 60%);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--eax-menta, #5eead4);
}
.ea-wrap .ea-upload-zone {
	border-radius: 12px !important;
}
.ea-wrap .ea-upload-zone:hover,
.ea-wrap .ea-upload-zone--over {
	border-color: var(--eax-menta, #5eead4) !important;
	background: color-mix(in srgb, var(--eax-menta, #5eead4) 7%, transparent) !important;
}
.ea-wrap .ea-submit-btn,
.ea-wrap .ea-ai-btn,
.ea-wrap .ea-gate-btn,
.ea-wrap .ea-ai-gate__btn,
.ea-wrap .ea-report-btn,
.ea-wrap .ea-report-send {
	border-radius: 10px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition:
		background 0.15s,
		color 0.15s,
		transform 0.1s;
}
.ea-wrap .ea-submit-btn:hover,
.ea-wrap .ea-ai-btn:hover,
.ea-wrap .ea-gate-btn:hover,
.ea-wrap .ea-ai-gate__btn:hover,
.ea-wrap .ea-report-btn:hover,
.ea-wrap .ea-report-send:hover {
	background: var(--eax-menta, #5eead4) !important;
	color: var(--eax-tinta, #0b1524) !important;
	opacity: 1;
}
.ea-wrap input[type='email']:focus,
.ea-wrap input[type='text']:focus {
	border-color: var(--eax-menta, #5eead4) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--eax-menta, #5eead4) 28%, transparent);
}
/* El boton de IA venia con degradado purpura clavado en la hoja base. */
.ea-wrap .ea-ai-btn {
	background: var(--eax-tinta, #0b1524) !important;
}
.ea-wrap .ea-ai-btn:hover {
	transform: none !important;
}

/* ── Terminos: interruptor menta y sin mayusculas del tema ─────────────── */
.ea-wrap .ea-terms__switch input:checked + .ea-terms__slider {
	background: var(--eax-menta, #5eead4) !important;
}
.ea-wrap .ea-terms__toggle {
	color: #55677d !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.ea-wrap .ea-terms__toggle:hover {
	color: var(--eax-tinta, #0b1524) !important;
}
.ea-wrap .ea-terms__text {
	background: #f7f9fb;
	border: 1px solid #e4e9f0;
	border-radius: 10px;
}

/* ── Pitch (cinta oscura via opciones; enlaces sobre la cinta) ─────────── */
.ea-pitch {
	border-color: color-mix(in srgb, var(--eax-menta, #5eead4) 35%, transparent) !important;
}
.ea-pitch__contacts {
	color: #b8c7d8 !important;
}
.ea-pitch__contacts a {
	color: var(--eax-menta, #5eead4) !important;
}

/* ── Accesibilidad y movil ─────────────────────────────────────────────── */
.ea-wrap :focus-visible {
	outline: 2px solid var(--eax-menta, #5eead4);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.ea-wrap .ea-hero__badge::after {
		animation: none;
	}
}