/*
 * NovaFrame — lenguaje visual propio.
 *
 * ------------------------------------------------------------------
 * EN CRISTIANO
 * ------------------------------------------------------------------
 * Este archivo es lo que hace que NovaFrame no se parezca a otros temas
 * construidos sobre el mismo motor. Se carga despues de la hoja principal y
 * cambia la personalidad del diseno, no solo los colores:
 *
 *  - Esquinas rectas en vez de redondeadas.
 *  - Botones rectangulares en vez de pastilla.
 *  - Nada de resplandores: el enfasis se marca con una barra de acento.
 *  - Los antetitulos llevan una linea horizontal en vez de un punto.
 *  - Las tarjetas son planas, con un filo superior que aparece al pasar.
 *  - Los titulos de seccion van numerados.
 *
 * Cambiar solo la paleta habria dado dos temas gemelos. Esto los separa de
 * verdad, que es lo que exigen los mercados de temas al revisar una propuesta.
 * ------------------------------------------------------------------
 */

/* ---- 1. Geometria: recta, no redondeada -------------------------- */

:root {
	--nf-radius: 4px;
	--nf-radius-sm: 2px;
	--nf-radius-lg: 6px;
	--nf-radius-pill: 4px;   /* En NovaFrame no hay pastillas. */

	/* El resplandor se anula: aqui el enfasis lo dan los filos y el contraste,
	   no la luz. Las variables se conservan para no romper ninguna regla que
	   las use, pero devuelven sombras neutras. */
	--nf-glow-primary: 0 0 0 1px rgba(var(--nf-primary-rgb) / .45);
	--nf-glow-lime: 0 0 0 1px rgba(var(--nf-lime-rgb) / .45);
	--nf-glow-gold: 0 0 0 1px rgba(var(--nf-gold-rgb) / .45);

	--nf-shadow-sm: 0 1px 0 rgba(0 0 0 / .3);
	--nf-shadow: 0 2px 0 rgba(0 0 0 / .28);
	--nf-shadow-lg: 0 6px 0 rgba(0 0 0 / .22);

	--nf-ease: cubic-bezier(.2, .6, .2, 1);
	--nf-dur: .24s;
}

/* ---- 2. Botones: rectangulares y con filo ------------------------ */

.nf-btn {
	border-radius: var(--nf-radius);
	font-family: var(--nf-font-display);
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: none;
}

.nf-btn--primary {
	box-shadow: none;
	border: 1px solid var(--nf-primary);
}
.nf-btn--primary:hover {
	transform: none;
	background: transparent;
	color: var(--nf-primary);
}

.nf-btn--ghost { border-color: rgba(var(--nf-text-rgb) / .28); }
.nf-btn--ghost:hover { background: var(--nf-text); color: var(--nf-base); border-color: var(--nf-text); }

.nf-btn--lime { box-shadow: none; }

/* La flecha se desplaza al pasar: el movimiento reemplaza al resplandor. */
.nf-btn svg { transition: transform var(--nf-dur) var(--nf-ease); }
.nf-btn:hover svg { transform: translateX(4px); }

.nf-iconbtn { border-radius: var(--nf-radius); }

/* ---- 3. Antetitulos: una linea, no un punto ---------------------- */

.nf-kicker {
	gap: .75rem;
	letter-spacing: .18em;
	color: var(--nf-primary);
}
.nf-kicker__dot {
	width: 2rem;
	height: 1px;
	border-radius: 0;
	background: var(--nf-primary);
	box-shadow: none;
}

.nf-badge {
	border-radius: var(--nf-radius);
	backdrop-filter: none;
	background: transparent;
	border-color: rgba(var(--nf-text-rgb) / .22);
}
.nf-badge__pulse { border-radius: 0; width: 6px; height: 6px; }
.nf-badge__pulse::after { display: none; }

/* ---- 4. Titulos de seccion numerados ----------------------------- */

.nf-sechead { counter-increment: nf-sec; }
.nf-sechead--left .nf-sechead__title::before {
	content: counter(nf-sec, decimal-leading-zero);
	display: block;
	margin-bottom: .5rem;
	font-family: var(--nf-font-mono);
	font-size: var(--nf-fs-sm);
	font-weight: 500;
	letter-spacing: .1em;
	color: rgba(var(--nf-text-rgb) / .32);
}
body { counter-reset: nf-sec; }

.nf-sechead__title { letter-spacing: -0.02em; }

/* El degradado de marca en los titulares se sustituye por un color plano con
   subrayado: mas sobrio y legible en cualquier fondo. */
.nf-em {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--nf-primary);
	box-shadow: inset 0 -.14em 0 rgba(var(--nf-primary-rgb) / .28);
}

/* ---- 5. Tarjetas planas con filo superior ------------------------ */

.nf-scard,
.nf-card,
.nf-quote,
.nf-person,
.nf-plan,
.nf-faq__item,
.nf-form,
.nf-widget {
	border-radius: var(--nf-radius);
}

.nf-scard {
	position: relative;
	background: var(--nf-surface);
	backdrop-filter: none;
	transition: border-color var(--nf-dur) var(--nf-ease), background var(--nf-dur) var(--nf-ease);
}

/* Filo de acento en el borde superior, que crece al pasar el cursor. */
.nf-scard::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -1px;
	height: 2px;
	background: var(--nf-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nf-dur) var(--nf-ease);
}
.nf-scard--lime::before { background: var(--nf-lime); }
.nf-scard--gold::before { background: var(--nf-gold); }
.nf-scard--sky::before  { background: var(--nf-sky); }
.nf-scard:hover::before { transform: scaleX(1); }

.nf-hover-spot .nf-scard:hover,
.nf-hover-lift .nf-scard:hover {
	transform: none;
	box-shadow: none;
	border-color: rgba(var(--nf-text-rgb) / .28);
	background: var(--nf-surface-2);
}
.nf-scard__spot { display: none; }
.nf-scard__icon { border-radius: var(--nf-radius); background: transparent; }
.nf-scard:hover .nf-scard__icon { transform: none; }
.nf-scard__num { font-family: var(--nf-font-mono); }

.nf-card:hover { transform: none; box-shadow: none; border-color: rgba(var(--nf-text-rgb) / .3); }
.nf-card:hover .nf-card__img { transform: none; }
.nf-person:hover { transform: none; }

/* ---- 6. Pastillas y fichas rectas -------------------------------- */

.nf-pill,
.nf-chip,
.nf-chipset__chip,
.nf-catbar__item,
.nf-catbar__n,
.nf-step__meta,
.nf-social a { border-radius: var(--nf-radius); }

.nf-chipset__input:checked + .nf-chipset__chip { box-shadow: none; border-width: 1px; }
.nf-chip:hover { border-color: var(--nf-primary); }

/* ---- 7. Hero: bloque, no resplandor ------------------------------ */

/* Se retiran los efectos luminosos del hero y se sustituyen por una rejilla
   sobria y un bloque de acento a la izquierda del titular. */
.nf-hero__fx-a,
.nf-hero__fx-b,
.nf-hero__fx-c { display: none; }

.nf-hero--fx-grid .nf-hero__fx-a,
.nf-hero--fx-beams .nf-hero__fx-a {
	display: block;
	inset: 0;
	background-image:
		linear-gradient(rgba(var(--nf-text-rgb) / .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--nf-text-rgb) / .045) 1px, transparent 1px);
	background-size: 72px 72px;
	transform: none;
	mask-image: linear-gradient(180deg, #000, transparent 88%);
}

.nf-hero__copy { position: relative; padding-inline-start: 1.75rem; }
.nf-hero__copy::before {
	content: "";
	position: absolute;
	inset-block: .35rem auto;
	inset-inline-start: 0;
	width: 3px;
	height: 100%;
	max-height: 12rem;
	background: linear-gradient(180deg, var(--nf-primary), transparent);
}
@media (max-width: 46rem) {
	.nf-hero__copy { padding-inline-start: 0; }
	.nf-hero__copy::before { display: none; }
}

.nf-hero__title { letter-spacing: -0.028em; }
.nf-hero__hint { display: none; }

.nf-statpanel { border-radius: var(--nf-radius); box-shadow: none; }
.nf-statpanel__glow { display: none; }
.nf-statpanel__value { background: none; -webkit-text-fill-color: currentColor; color: var(--nf-text); }

.nf-counters--grad .nf-counter__value {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--nf-primary);
}

/* ---- 8. Cromo y fondo -------------------------------------------- */

.nf-bgfx { display: none; }   /* NovaFrame no usa capa de fondo animada. */
.nf-grain::after { display: none; }

.nf-header::after { height: 1px; background: rgba(var(--nf-text-rgb) / .12); }
.nf-footer__rule { height: 1px; background: rgba(var(--nf-text-rgb) / .12); }
.nf-footer { background: var(--nf-footer); }
.nf-fcta { background: none; }
.nf-fcta__glow { display: none; }

.nf-menu > li > a::after { background: var(--nf-primary); height: 1px; }

/* ---- 9. Llamadas a la accion y avisos ---------------------------- */

.nf-cta { border-radius: var(--nf-radius); }
.nf-cta--glow .nf-cta__fx { display: none; }
.nf-cta--gradient { background: var(--nf-surface-2); color: var(--nf-text); }
.nf-cta--gradient .nf-cta__text,
.nf-cta--gradient .nf-cta__note { color: var(--nf-muted); }

.nf-callout { border-radius: var(--nf-radius); border-width: 1px 1px 1px 3px; }
.nf-qa { border-radius: 0 var(--nf-radius) var(--nf-radius) 0; }

.nf-plan--hot { box-shadow: none; border-width: 1px; border-color: var(--nf-primary); }
.nf-plan__ribbon { transform: none; inset-inline-end: 0; top: 0; padding: .35rem .9rem; border-radius: 0 var(--nf-radius) 0 var(--nf-radius); }
.nf-plan__glow { display: none; }

.nf-gauge__fill { box-shadow: none; }
.nf-gauge__track { border-radius: var(--nf-radius-sm); }
.nf-gauge__fill { border-radius: var(--nf-radius-sm); }

.nf-rule { background: var(--nf-primary); box-shadow: none; height: 1px; }
.nf-progress span { background: var(--nf-primary); box-shadow: none; }
.nf-steps__fill { background: var(--nf-primary); box-shadow: none; }

.nf-figure--glow .nf-figure__glow { display: none; }
.nf-hero__figure-glow { display: none; }

/* ---- 10. Movimiento mas contenido -------------------------------- */

/* NovaFrame es un tema de negocio: la aparicion es un desplazamiento corto,
   sin escalados ni rebotes. */
[data-nf-reveal].nf-armed > * { transform: translateY(10px); }

/* ---- 11. Tabla comparativa (widget exclusivo de NovaFrame) -------- */

.nf-cmp { overflow-x: auto; }
.nf-cmp__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--nf-fs-sm);
}

.nf-cmp__corner { width: 30%; }
.nf-cmp__head,
.nf-cmp__corner {
	padding: 1rem 1.1rem;
	text-align: start;
	vertical-align: bottom;
	border-bottom: 2px solid rgba(var(--nf-text-rgb) / .16);
}
.nf-cmp__head { text-align: center; }
.nf-cmp__head.is-hot { border-bottom-color: var(--nf-primary); }

.nf-cmp__name {
	display: block;
	font-family: var(--nf-font-display);
	font-size: var(--nf-fs-md);
	font-weight: 700;
}
.nf-cmp__head.is-hot .nf-cmp__name { color: var(--nf-primary); }
.nf-cmp__note { display: block; margin-top: .2rem; font-size: var(--nf-fs-xs); color: var(--nf-muted); }

.nf-cmp__row {
	padding: .95rem 1.1rem;
	text-align: start;
	font-weight: 500;
	color: var(--nf-text);
	border-bottom: 1px solid rgba(var(--nf-line-rgb) / .5);
}
.nf-cmp__cell {
	padding: .95rem 1.1rem;
	text-align: center;
	color: var(--nf-muted);
	border-bottom: 1px solid rgba(var(--nf-line-rgb) / .5);
}
.nf-cmp__cell.is-hot { background: rgba(var(--nf-primary-rgb) / .06); color: var(--nf-text); }

.nf-cmp__yes { display: inline-grid; place-items: center; color: var(--nf-lime); }
.nf-cmp__no  { display: inline-grid; place-items: center; color: rgba(var(--nf-text-rgb) / .28); }

/* En pantallas estrechas la tabla pasa a tarjetas: una por opcion, con el
   nombre de la columna delante de cada valor. Una tabla de cinco columnas
   comprimida en un celular no se puede leer. */
@media (max-width: 46rem) {
	.nf-cmp__table,
	.nf-cmp__table tbody,
	.nf-cmp__table tr { display: block; }
	.nf-cmp__table thead { display: none; }

	.nf-cmp__table tr {
		margin-bottom: 1rem;
		border: 1px solid rgba(var(--nf-line-rgb) / .6);
		border-radius: var(--nf-radius);
		overflow: hidden;
	}
	.nf-cmp__row {
		display: block;
		background: var(--nf-surface-2);
		border-bottom: 0;
		font-family: var(--nf-font-display);
	}
	.nf-cmp__cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		text-align: end;
	}
	.nf-cmp__cell::before {
		content: attr(data-nf-label);
		font-size: var(--nf-fs-xs);
		color: var(--nf-muted);
		text-align: start;
	}
	.nf-cmp__cell:last-child { border-bottom: 0; }
}