/**
 * Auditor SEO · Hive Data
 *
 * Todo cuelga de .hda y las variables llevan prefijo --hda-: el bloque
 * vive dentro del tema Astra y ni lo pisa ni se deja pisar.
 *
 * Identidad: Violeta #9A77FF · Violeta hondo #6D3FD6 · Miel #F2B33D · Noche #0E0B14
 * Tema único oscuro: el lockup de marca lleva "hive" en blanco.
 */

.hda {
	--hda-violeta: #9A77FF;
	--hda-miel:    #F2B33D;
	--hda-ink:     #0E0B14;
	--hda-ink2:    #171226;
	--hda-ink3:    #201838;
	--hda-line:    #2E2447;
	--hda-text:    #F4F1FA;
	--hda-dim:     #ADA0C6;
	--hda-faint:   #71648E;

	--hda-ok:   #3FBE87;
	--hda-warn: #E8873C;
	--hda-crit: #E8564A;
	--hda-ok-bg:   rgba(63,190,135,.14);
	--hda-warn-bg: rgba(232,135,60,.14);
	--hda-crit-bg: rgba(232,86,74,.14);

	--hda-sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--hda-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--hda-r: 14px;
	--hda-shadow: 0 1px 0 rgba(255,255,255,.045) inset, 0 20px 44px -26px rgba(0,0,0,.85);

	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--hda-ink);
	color: var(--hda-text);
	font-family: var(--hda-sans);
	font-size: 16px;
	line-height: 1.55;
	border-radius: 20px;
	-webkit-font-smoothing: antialiased;
}

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

/**
 * Sección a todo el ancho, saliéndose del contenedor del tema.
 *
 * Se estira de verdad (márgenes negativos) y no solo se pinta el fondo por
 * detrás: pintarlo no bastaba porque el fondo del tema es casi idéntico al
 * de la marca (#08080F contra #0E0B14) y la extensión resultaba invisible.
 * El degradado y las líneas de arriba y abajo son los que hacen que se lea
 * como una banda y no como parte del fondo.
 */
/* Los !important son necesarios, no pereza: Astra aplica
   `.entry-content[data-ast-blocks-layout] > * { margin:auto; max-width:1200px }`
   y su especificidad (clase + atributo) le gana a una sola clase. Sin ellos
   el margen negativo se computa como 0 y el bloque no sale del contenedor. */
.hda-full {
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: auto !important;
	max-width: none !important;
	border-radius: 0;
	background: linear-gradient(180deg, var(--hda-ink2) 0%, var(--hda-ink) 60%);
	border-top: 1px solid var(--hda-line);
	border-bottom: 1px solid var(--hda-line);
}

/* 50vw incluye la barra de desplazamiento, así que en sistemas con barra
   clásica (Windows) el estirón provocaría scroll horizontal de unos píxeles.
   `clip` en vez de `hidden` porque no rompe position:sticky. Solo se aplica
   en páginas que llevan el bloque. */
html:has(.hda-full) {
	overflow-x: clip;
}

.hda-hex {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.hda-in {
	position: relative;
	z-index: 1;
	padding: 42px 34px 48px;
	max-width: 980px;
	margin: 0 auto;
}
@media (max-width: 600px) { .hda-in { padding: 30px 20px 36px; } }

.hda [hidden] { display: none !important; }

/* ---------- etapas ---------- */
.hda-stage { display: none; }
.hda-stage.is-on { display: block; animation: hda-rise .45s cubic-bezier(.2,.7,.3,1) both; }
@keyframes hda-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- tipografía ---------- */
.hda-eyebrow {
	font-family: var(--hda-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hda-miel);
	margin: 0 0 18px;
}
.hda .hda-h {
	font-family: var(--hda-sans);
	font-size: clamp(30px, 4.6vw, 48px);
	line-height: 1.04;
	letter-spacing: -.035em;
	font-weight: 700;
	color: var(--hda-text);
	margin: 0 0 18px;
	text-wrap: balance;
}
.hda .hda-h em { font-style: normal; color: var(--hda-miel); }
.hda .hda-h-sm { font-size: clamp(23px, 3.4vw, 31px); margin: 0; }
.hda-lede { font-size: 17px; color: var(--hda-dim); margin: 0 0 30px; max-width: 56ch; }

/* ---------- campo y botón ---------- */
.hda-analyzer { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.hda-field {
	flex: 1 1 320px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--hda-ink2);
	border: 1px solid var(--hda-line);
	border-radius: var(--hda-r);
	padding: 0 16px;
	min-height: 56px;
	transition: border-color .18s, box-shadow .18s;
	margin: 0;
}
.hda-field:focus-within { border-color: var(--hda-violeta); box-shadow: 0 0 0 3px rgba(154,119,255,.22); }
.hda-scheme { font-family: var(--hda-mono); font-size: 13px; color: var(--hda-faint); user-select: none; }
.hda .hda-field input {
	flex: 1;
	background: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	color: var(--hda-text);
	font-family: var(--hda-mono);
	font-size: 15.5px;
	min-width: 0;
	padding: 0;
	margin: 0;
	height: auto;
	line-height: 1.4;
}
.hda .hda-field input::placeholder { color: var(--hda-faint); opacity: 1; }

.hda .hda-btn {
	font-family: var(--hda-sans);
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -.01em;
	border: 0;
	border-radius: var(--hda-r);
	padding: 0 26px;
	min-height: 56px;
	background: var(--hda-miel);
	color: var(--hda-ink);
	cursor: pointer;
	transition: transform .12s, filter .18s;
	white-space: nowrap;
	text-transform: none;
	width: auto;
}
.hda .hda-btn:hover { filter: brightness(1.07); background: var(--hda-miel); color: var(--hda-ink); }
.hda .hda-btn:active { transform: translateY(1px); }
.hda .hda-btn:focus-visible { outline: 3px solid var(--hda-violeta); outline-offset: 3px; }
.hda .hda-btn[disabled] { opacity: .55; cursor: default; }

.hda-error {
	margin: 14px 0 0;
	font-size: 14.5px;
	color: var(--hda-crit);
	background: var(--hda-crit-bg);
	border-radius: 10px;
	padding: 11px 14px;
}

.hda-assurance {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 20px;
	font-family: var(--hda-mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--hda-faint);
	text-transform: uppercase;
}
.hda-assurance b { color: var(--hda-dim); font-weight: 500; }

.hda-checks {
	margin-top: 46px;
	padding-top: 28px;
	border-top: 1px solid var(--hda-line);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px 30px;
}
.hda-ck-h {
	font-family: var(--hda-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hda-faint);
	margin: 0 0 9px;
}
.hda-checks p { margin: 0; font-size: 14.5px; color: var(--hda-dim); line-height: 1.5; }
.hda-checks strong { color: var(--hda-text); font-weight: 600; }

/* ---------- analizando ---------- */
.hda-scan-target { font-family: var(--hda-mono); font-size: 13px; color: var(--hda-dim); margin: 0 0 26px; }
.hda-scan-target b { color: var(--hda-violeta); font-weight: 500; }
.hda-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; }
.hda-step {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 0;
	margin: 0;
	font-family: var(--hda-mono);
	font-size: 13.5px;
	color: var(--hda-faint);
	border-bottom: 1px solid var(--hda-line);
	transition: color .3s;
}
.hda-step.is-run { color: var(--hda-text); }
.hda-step.is-done { color: var(--hda-dim); }
.hda-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hda-line); flex: none; transition: background .3s, box-shadow .3s; }
.hda-step.is-run .hda-dot { background: var(--hda-violeta); box-shadow: 0 0 0 5px rgba(154,119,255,.2); animation: hda-pulse 1s ease-in-out infinite; }
.hda-step.is-done .hda-dot { background: var(--hda-ok); }
@keyframes hda-pulse { 50% { box-shadow: 0 0 0 9px rgba(154,119,255,0); } }
.hda-tick { margin-left: auto; opacity: 0; color: var(--hda-ok); font-size: 12px; transition: opacity .3s; }
.hda-step.is-done .hda-tick { opacity: 1; }

/* ---------- informe ---------- */
.hda-rhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.hda-rmeta { font-family: var(--hda-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--hda-faint); margin: 7px 0 0; }
.hda .hda-linkish {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--hda-line);
	padding: 0;
	font-family: var(--hda-mono);
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hda-dim);
	cursor: pointer;
	border-radius: 0;
	min-height: 0;
}
.hda .hda-linkish:hover { color: var(--hda-miel); border-color: var(--hda-miel); background: none; }

.hda-panel { background: var(--hda-ink2); border: 1px solid var(--hda-line); border-radius: 18px; box-shadow: var(--hda-shadow); }

.hda-board { display: grid; grid-template-columns: 210px 1fr; gap: 34px; padding: 30px; align-items: center; }
@media (max-width: 660px) { .hda-board { grid-template-columns: 1fr; gap: 24px; padding: 24px; } }

.hda-dialwrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hda-dial { position: relative; width: 190px; height: 190px; margin: 0; }
.hda-dial svg { transform: rotate(-90deg); display: block; }
.hda-dial #hda-arc { transition: stroke-dashoffset 1.3s cubic-bezier(.2,.75,.3,1); }
.hda-dial-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hda-dial-n { font-size: 54px; font-weight: 700; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.hda-dial-l { font-family: var(--hda-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--hda-faint); margin-top: 2px; }
/* Etiqueta bajo el dial, no dentro: el fondo sale de currentColor, así
   hereda el color semántico que le pone el JS sin duplicar reglas. */
.hda-verdict {
	font-family: var(--hda-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0;
	color: var(--hda-warn);
	text-align: center;
	line-height: 1.3;
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, currentColor 15%, transparent);
}

.hda-bars { display: flex; flex-direction: column; gap: 17px; }
.hda-bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.hda-bar-n { font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; }
.hda-bar-v { font-family: var(--hda-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--hda-dim); align-self: center; }
.hda-track { grid-column: 1 / -1; display: block; height: 7px; border-radius: 999px; background: var(--hda-ink3); overflow: hidden; }
/* display:block obligatorio: un span inline ignora width y la barra no se llenaría */
.hda-fill { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1.1s cubic-bezier(.2,.75,.3,1); }

.hda-tallies { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hda-line); }
.hda-tally { padding: 18px 20px; display: flex; align-items: center; gap: 12px; }
.hda-tally + .hda-tally { border-left: 1px solid var(--hda-line); }
.hda-tn { font-size: 27px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.hda-tl { font-family: var(--hda-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hda-faint); line-height: 1.35; }

.hda-sec {
	font-family: var(--hda-mono);
	font-size: 11px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--hda-faint);
	margin: 38px 0 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hda-sec::after { content: ""; flex: 1; height: 1px; background: var(--hda-line); }

/* ficha técnica */
.hda-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); overflow: hidden; }
.hda-sp { padding: 19px 22px; border-right: 1px solid var(--hda-line); }
.hda-sp:last-child { border-right: 0; }
@media (max-width: 780px) {
	.hda-sp { border-right: 0; border-bottom: 1px solid var(--hda-line); }
	.hda-sp:last-child { border-bottom: 0; }
}
.hda-sp-k { font-family: var(--hda-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--hda-faint); margin: 0 0 9px; }
.hda-sp-v { margin: 0; font-family: var(--hda-mono); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; word-break: break-word; }
.hda-sp-v.is-ok { color: var(--hda-ok); }
.hda-sp-v.is-warn { color: var(--hda-warn); }
.hda-sp-s { margin: 5px 0 0; font-size: 13px; color: var(--hda-dim); line-height: 1.45; }

/* término principal */
.hda-kw { padding: 24px 26px 26px; }
.hda-kw-k { font-family: var(--hda-mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--hda-faint); margin: 0 0 11px; }
.hda-kw-term { margin: 0; font-family: var(--hda-mono); font-size: clamp(23px, 4vw, 34px); font-weight: 700; letter-spacing: -.035em; color: var(--hda-violeta); word-break: break-word; }
.hda-kw-note { margin: 13px 0 0; color: var(--hda-dim); font-size: 15px; max-width: 62ch; }
.hda .hda-chip {
	margin-top: 19px;
	font-family: var(--hda-sans);
	font-size: 14px;
	font-weight: 550;
	color: var(--hda-text);
	background: none;
	border: 1px solid var(--hda-line);
	border-radius: 999px;
	padding: 9px 18px;
	cursor: pointer;
	transition: border-color .18s, color .18s;
	min-height: 0;
}
.hda .hda-chip:hover { border-color: var(--hda-miel); color: var(--hda-miel); background: none; }
.hda-kw-form { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; max-width: 540px; }
.hda-kw-form .hda-field { min-height: 50px; flex: 1 1 240px; }
.hda-kw-form .hda-btn { min-height: 50px; padding: 0 20px; }
.hda-kw-verdict { margin: 20px 0 0; font-size: 15px; color: var(--hda-text); border-left: 3px solid var(--hda-crit); padding-left: 14px; }
.hda-kw-checks { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px 24px; }
.hda-kw-c { display: flex; align-items: center; gap: 10px; font-family: var(--hda-mono); font-size: 12.5px; color: var(--hda-dim); }
.hda-mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-family: var(--hda-sans); font-size: 11px; font-weight: 700; flex: none; }
.hda-kw-c.is-yes .hda-mark { background: var(--hda-ok-bg); color: var(--hda-ok); }
.hda-kw-c.is-no .hda-mark { background: var(--hda-crit-bg); color: var(--hda-crit); }

/* hallazgos */
.hda-findings { display: flex; flex-direction: column; gap: 10px; }
.hda-f { display: grid; grid-template-columns: 4px minmax(0, 1fr); background: var(--hda-ink2); border: 1px solid var(--hda-line); border-radius: var(--hda-r); overflow: hidden; }
.hda-sev { background: var(--hda-line); }
.hda-f.is-crit .hda-sev { background: var(--hda-crit); }
.hda-f.is-warn .hda-sev { background: var(--hda-warn); }
.hda-f.is-ok .hda-sev { background: var(--hda-ok); }
/* min-width:0 obligatorio: sin esto la evidencia (que no hace saltos de
   línea) fija el ancho mínimo de la columna y revienta la tarjeta en móvil */
.hda-f-body { padding: 17px 20px; min-width: 0; }
.hda-f-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.hda-pill { font-family: var(--hda-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3.5px 9px; border-radius: 999px; font-weight: 500; }
.hda-pill.is-crit { background: var(--hda-crit-bg); color: var(--hda-crit); }
.hda-pill.is-warn { background: var(--hda-warn-bg); color: var(--hda-warn); }
.hda-pill.is-ok { background: var(--hda-ok-bg); color: var(--hda-ok); }
.hda-f-t { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.hda-f-body p { margin: 0; font-size: 14.5px; color: var(--hda-dim); line-height: 1.55; }
.hda-ev { font-family: var(--hda-mono); font-size: 12.5px; color: var(--hda-dim); background: var(--hda-ink3); border-radius: 8px; padding: 9px 12px; margin-top: 10px; overflow-x: auto; white-space: nowrap; }

/* gate */
.hda-gate { margin-top: 14px; background: var(--hda-ink2); border: 1px solid var(--hda-line); border-radius: 18px; padding: 28px 26px; box-shadow: var(--hda-shadow); }
.hda-gate-t { font-size: clamp(19px, 3vw, 24px); font-weight: 700; letter-spacing: -.028em; margin: 0 0 8px; text-wrap: balance; }
.hda-gate-t b { color: var(--hda-miel); font-weight: 700; }
.hda-gate-s { margin: 0 0 20px; color: var(--hda-dim); font-size: 15px; max-width: 52ch; }
.hda-gate-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 540px; }
.hda-gate-form .hda-field { min-height: 52px; flex: 1 1 240px; }
.hda-gate-form .hda-btn { min-height: 52px; padding: 0 22px; }
.hda-gate-n { font-family: var(--hda-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--hda-faint); margin: 14px 0 0; }
.hda-gate-n a { color: var(--hda-dim); }

.hda-unlocked {
	display: flex;
	align-items: center;
	gap: 11px;
	background: var(--hda-ok-bg);
	border: 1px solid rgba(63,190,135,.32);
	border-radius: var(--hda-r);
	padding: 15px 18px;
	margin: 14px 0 0;
	font-size: 14.5px;
}
.hda-unlocked b { color: var(--hda-ok); }

.hda-nojs { padding: 26px; margin-bottom: 14px; }
.hda-nojs-t { margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.hda-nojs-p { margin: 0; color: var(--hda-dim); font-size: 15px; }

.hda-rate {
	margin-top: 30px;
	border: 1px dashed var(--hda-line);
	border-radius: var(--hda-r);
	padding: 13px 16px;
	font-family: var(--hda-mono);
	font-size: 11.5px;
	color: var(--hda-faint);
	letter-spacing: .03em;
}

/* ---------- móvil ---------- */
@media (max-width: 600px) {
	/* Tres contadores en 280px no caben: las columnas 1fr no bajan de su
	   contenido mínimo y el tercero quedaba recortado por overflow:hidden. */
	.hda-tallies { grid-template-columns: 1fr; }
	.hda-tally + .hda-tally { border-left: 0; border-top: 1px solid var(--hda-line); }
	.hda-tally { padding: 14px 20px; }
	.hda-tn { min-width: 34px; }

	/* Campo y botón a ancho completo: más fácil de tocar con el pulgar. */
	.hda-analyzer .hda-field,
	.hda-gate-form .hda-field,
	.hda-kw-form .hda-field { flex: 1 1 100%; }
	.hda-analyzer .hda-btn,
	.hda-gate-form .hda-btn,
	.hda-kw-form .hda-btn { flex: 1 1 100%; }

	.hda-board { padding: 22px 18px; }
	.hda-in { border-radius: 0; }
	.hda-sec { margin-top: 30px; }

	/* Área de toque suficiente para el enlace de reiniciar. */
	.hda .hda-linkish { padding: 8px 0; }
	.hda-rhead { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.hda *, .hda *::before, .hda *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}