/* ==========================================================================
   UXEN Theme — wireframe.css
   Estilos de baja fidelidad: cajas, bordes y grises para comunicar
   estructura, NO diseño final.
   ========================================================================== */

:root {
	--wf-ink: #2b2b2b;
	--wf-muted: #6b6b6b;
	--wf-line: #bdbdbd;
	--wf-line-strong: #8a8a8a;
	--wf-bg: #f4f4f4;
	--wf-box: #ffffff;
	--wf-fill: #e3e3e3;
	--wf-fill-2: #d6d6d6;
	--wf-gap: 24px;
	--wf-radius: 4px;
	--wf-maxw: 1120px;
}

/* Reset mínimo --------------------------------------------------------------*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wf-ink);
	background: var(--wf-bg);
	line-height: 1.5;
}

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

a {
	color: inherit;
}

h1, h2, h3, h4 {
	line-height: 1.2;
	margin: 0 0 0.5em;
}

/* Utilidades de wireframe ---------------------------------------------------*/
.wf-container {
	width: 100%;
	max-width: var(--wf-maxw);
	margin-inline: auto;
	padding-inline: 20px;
}

.wf-box {
	background: var(--wf-box);
	border: 2px solid var(--wf-line-strong);
	border-radius: var(--wf-radius);
}

.wf-section {
	padding-block: 56px;
	border-bottom: 1px dashed var(--wf-line);
}

.wf-section__title {
	font-size: clamp(1.4rem, 1rem + 2vw, 2rem);
}

.wf-muted {
	color: var(--wf-muted);
}

.wf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

/* Placeholder genérico: caja gris con etiqueta diagonal. */
.wf-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 40px;
	padding: 6px 10px;
	color: var(--wf-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background-color: var(--wf-fill);
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 8px,
		rgba(0, 0, 0, 0.05) 8px,
		rgba(0, 0, 0, 0.05) 16px
	);
	border: 1px solid var(--wf-line-strong);
	border-radius: var(--wf-radius);
}

/* Bloque-imagen placeholder con proporción. */
.wf-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wf-muted);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background-color: var(--wf-fill);
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 12px,
		rgba(0, 0, 0, 0.04) 12px,
		rgba(0, 0, 0, 0.04) 24px
	);
	border: 2px solid var(--wf-line-strong);
	border-radius: var(--wf-radius);
}

.wf-image--square {
	aspect-ratio: 1 / 1;
}

/* Botones placeholder (enlaces inertes). */
.wf-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 2px solid var(--wf-ink);
	border-radius: var(--wf-radius);
	background: var(--wf-box);
	color: var(--wf-ink);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.wf-btn--solid {
	background: var(--wf-ink);
	color: #fff;
}

.wf-btn + .wf-btn {
	margin-inline-start: 12px;
}

/* Header --------------------------------------------------------------------*/
.site-header {
	border-width: 0 0 2px;
	border-radius: 0;
	background: var(--wf-box);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wf-gap);
	padding-block: 16px;
}

.site-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	font-weight: 700;
}

.site-nav__list {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.site-nav__list a {
	text-decoration: none;
	color: var(--wf-muted);
}

/* Hero ----------------------------------------------------------------------*/
.section-hero {
	background: var(--wf-box);
}

.section-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--wf-gap);
	align-items: center;
}

.section-hero__title {
	font-size: clamp(1.8rem, 1rem + 4vw, 3rem);
}

.section-hero__actions {
	margin-top: 24px;
}

/* Features ------------------------------------------------------------------*/
.section-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wf-gap);
	margin-top: 32px;
}

.wf-card {
	padding: 20px;
}

.wf-card__icon {
	margin-bottom: 14px;
}

/* About ---------------------------------------------------------------------*/
.section-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--wf-gap);
	align-items: center;
}

/* CTA -----------------------------------------------------------------------*/
.section-cta__inner {
	padding: 40px;
	text-align: center;
}

.section-cta__actions {
	margin-top: 24px;
}

/* Footer --------------------------------------------------------------------*/
.site-footer {
	border-width: 2px 0 0;
	border-radius: 0;
	background: var(--wf-box);
	margin-top: 0;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--wf-gap);
	padding-block: 40px;
}

.site-footer h4 {
	font-size: 0.95rem;
}

.site-footer__bottom {
	padding-block: 16px;
	border-top: 1px dashed var(--wf-line);
}

/* Responsive ----------------------------------------------------------------*/
@media (max-width: 860px) {
	.section-hero__grid,
	.section-about__grid {
		grid-template-columns: 1fr;
	}

	.section-features__grid {
		grid-template-columns: 1fr;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.site-header__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-nav__list {
		flex-wrap: wrap;
	}
}