/* ==========================================================================
   Nokaos - Clases de componente reutilizables.
   Uso en Elementor: escribe el nombre de la clase en
   Avanzado > Diseno > "Clases CSS" del widget/contenedor.
   Documentado en docs/03-MANUAL-ELEMENTOR.md.
   ========================================================================== */

/* --- Marco tecnico "blueprint" ------------------------------------------- */
.nk-blueprint {
	position: relative;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-frame);
	background: transparent;
}
.nk-blueprint.nk-duotone,
.nk-blueprint.is-plain { overflow: visible; }

.nk-corner {
	position: absolute;
	width: 12px;
	height: 12px;
	color: color-mix(in srgb, var(--color-text) 55%, transparent);
	pointer-events: none;
}
.nk-corner::before,
.nk-corner::after {
	content: "";
	position: absolute;
	background: currentColor;
}
.nk-corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.nk-corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.nk-corner.tl { top: -6px; left: -6px; }
.nk-corner.tr { top: -6px; right: -6px; }
.nk-corner.bl { bottom: -6px; left: -6px; }
.nk-corner.br { bottom: -6px; right: -6px; }

/* Permite pegar las esquinas a cualquier caja de Elementor solo con la clase. */
.nk-blueprint > .elementor-widget-container { position: relative; }

/* --- Duotono sobre imagen --------------------------------------------------- */
.nk-duotone { position: relative; overflow: hidden; }
.nk-duotone::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--color-accent);
	mix-blend-mode: color;
}

/* --- Botones ------------------------------------------------------------- */
.nk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 15px 26px;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-frame);
	color: var(--color-text);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nk-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); }
.nk-btn--primary:hover  { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.nk-btn--primary:active { background: var(--color-accent-700); }
.nk-btn--secondary { border-color: var(--color-text); }
.nk-btn--secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nk-btn--on-dark { background: var(--color-on-dark); color: var(--color-accent-900); border-color: var(--color-on-dark); }
.nk-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- Kicker (etiqueta de seccion con guion) --------------------------------- */
.nk-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}
.nk-kicker::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--color-accent);
	flex: none;
}

/* --- Tabla de precios ------------------------------------------------------- */
.nk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nk-table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--color-text) 60%, transparent);
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
}
.nk-table td {
	font-family: var(--font-heading);
	font-size: 19px;
	padding: 16px var(--space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.nk-table td:last-child { text-align: right; white-space: nowrap; }
.nk-table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* --- Banda oscura (CTA / secciones invertidas) ---------------------------- */
.nk-band-dark {
	background: var(--color-accent-900);
	color: var(--color-on-dark);
}
.nk-band-dark :where(h1,h2,h3,h4) { color: var(--color-on-dark); }

/* --- Numeral grande de paso --------------------------------------------------- */
.nk-step-num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(40px, 4vw, 58px);
	line-height: 1;
	color: var(--color-accent-300);
}

/* --- FAQ nativa (<details>) ------------------------------------------------- */
.nk-faq details { border-bottom: 1px solid var(--color-divider); }
.nk-faq summary {
	display: flex;
	gap: 16px;
	align-items: baseline;
	list-style: none;
	cursor: pointer;
	padding: 20px 0;
	font-family: var(--font-heading);
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.25;
}
.nk-faq summary::-webkit-details-marker { display: none; }
.nk-faq summary::after { content: "+"; margin-left: auto; color: var(--color-accent); }
.nk-faq details[open] summary::after { content: "\2013"; }
.nk-faq details > div { padding: 0 0 22px; max-width: 64ch; }