@charset "UTF-8";
/* =====================================================================
* fenix2026 — design.css
* ---------------------------------------------------------------------
* Maquetado desde design_handoff_fenix_mvp/ (prototipo "Fenix MVP.dc.html",
* bloque isLanding L64-355 + tablas de tokens del README). Cada valor de
* este archivo se rastrea a una linea de spec-visual.md.
*
* Breakpoints: 1000 (2 col / nav movil) y 620 (1 col). Son los DOS del
* diseno, traducidos desde sus `@container fr (max-width: ...)`. Se escribe
* desktop-primero y con max-width, igual que la fuente: invertirlo a
* mobile-first obligaria a re-derivar cada valor y es justo donde se pierde
* fidelidad.
*
* Unidades: el prototipo usa `cqi` porque su marco declara
* `container: fr / inline-size`. Aqui el contenedor es la ventana, asi que
* `Ncqi` -> `Nvw`, que da el mismo resultado sin el marco.
*
* Indice
* 1. Reset del CSS global del CMS (va PRIMERO, no es opcional)
* 2. Tokens
* 3. Layout: header, main, footer
* 4. Secciones de la home
* 5. Tema minimo de paginas internas
* ===================================================================== */
/* =====================================================================
* 1. RESET DEL CSS GLOBAL DEL CMS
* ---------------------------------------------------------------------
* El core carga cinco hojas en TODA pagina y varias traen reglas de
* ELEMENTO (p, li, h1..h6, a:hover). Esas le ganan a lo que el hijo
* HEREDA, sin importar el orden de carga: declarar la tipografia en `body`
* no alcanza nunca. Auditado con `python3 tools/cms-css-herencia.py`.
* ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--c-page);
font-family: var(--f-body);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--c-text);
-webkit-font-smoothing: antialiased;
}
/* Todas las propiedades de un mismo elemento van JUNTAS: si declaras tres y te
falta una, el core te la pisa. El `content.css` del CMS trae
`h1..h6 { letter-spacing: 0px }` y aqui NO coincide con el diseno (los
titulares llevan tracking negativo), asi que se re-declara (pitfall 77). */
h1, h2, h3, h4, h5, h6 {
font-family: var(--f-body);
font-weight: 600;
color: var(--c-title);
line-height: normal;
letter-spacing: -0.025em;
margin: 0;
}
h1, h2 { line-height: 1.1; }
/* p/li/span llegan con line-height 1.42857 desde DOS hojas distintas. Se pisa
dentro de nuestros contenedores, con selector de ELEMENTO (mismo peso) y sin
tocar .site-content, donde manda el bloque TEMA CMS del §5. */
.site-header p, .site-header li, .site-header span, .site-header a,
.home-section p, .home-section li, .home-section span, .home-section a,
.home-section blockquote, .home-section figcaption, .home-section label,
.site-footer p, .site-footer li, .site-footer span, .site-footer a { line-height: 1.6; }
.home-section p { margin: 0; }
.home-section ul, .home-section ol { margin: 0; padding: 0; list-style: none; }
/* BS3 le mete padding a blockquote y margen a hr. Cualquier componente propio que
use uno de estos elementos necesita (0,1,1) para ganarle: `blockquote.fnx-x`. */
.home-section blockquote { padding: 0; margin: 0; border: 0; }
.home-section hr { margin: 0; }
/* Anchors. El `text-decoration` SI admite reset global por estados; el `color`
NO: bootstrap-clean (`a:focus,a:hover{color:#23527c}`) y content.css
(`a,a:hover,...{color:#009E91}`) son (0,1,1) y le ganarian tambien a
cualquier `.mi-clase` (0,1,0). Por eso el color se declara CON LOS ESTADOS,
anchor por anchor, mas abajo. Sin esto el LOGO y los iconos que se pintan con
`currentColor` viran al azul de Bootstrap en :hover (pitfall 83). */
a { color: inherit; text-decoration: none; }
a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none; }
/* BS3 le pone `border: 1px solid transparent` a .btn: +2px de alto por boton. */
.btn { border: 0; }
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
button { white-space: nowrap; }
::selection { background: var(--c-lime); color: var(--c-navy); }
/* =====================================================================
* 2. TOKENS
* ---------------------------------------------------------------------
* La paleta se declara POR CANAL (`--x-rgb` + `rgb(var(--x-rgb))`) para que
* `cms_color_style()` pueda pisar el canal desde siteconfig y las
* transparencias que salen del mismo canal sigan al color nuevo. Pisar solo
* el color solido las dejaria en el viejo.
*
* Editables desde el admin (grupo `colores`): --c-navy-rgb (primario),
* --c-lime-rgb (acento), --c-green-rgb (secundario).
* NO editables a proposito: el fondo de pagina (#F6F7F3), el texto corrido y
* --c-text. `--c-text` arranca en el mismo valor que --c-navy pero es un token
* APARTE: si fueran el mismo, un `primario` claro dejaria ilegible todo el
* texto del sitio, no solo los fondos oscuros.
* ===================================================================== */
:root {
/* --- PALETA POR CANAL ------------------------------------------------
Todo color va como tripleta `--x-rgb` y el solido se deriva con
`rgb(var(--x-rgb))`. Asi `cms_color_style()` pisa el canal y las
transparencias que salen de el (el velo del header, los bordes, el halo
del hero) siguen al color nuevo. Pisando solo el solido se quedarian en
el viejo (regla dura 21a). */
--c-navy-rgb: 22, 36, 60; /* #16243C azul noche — EDITABLE `primario` */
--c-lime-rgb: 173, 232, 28; /* #ADE81C lima — EDITABLE `acento` */
--c-green-rgb: 127, 184, 14; /* #7FB80E verde medio— EDITABLE `secundario`*/
--c-navy-deep-rgb: 13, 23, 38; /* #0D1726 footer */
--c-green-h-rgb: 95, 143, 16; /* #5F8F10 hover de anchor */
--c-green-d-rgb: 78, 122, 12; /* #4E7A0C verde oscuro */
--c-white-rgb: 255, 255, 255;
--c-page-rgb: 246, 247, 243; /* #F6F7F3 fondo de pagina y bandas alternas */
--c-field-rgb: 251, 252, 250; /* #FBFCFA fondo de campo */
/* Texto: canal PROPIO aunque arranque en el mismo #16243C que navy. Si
compartieran canal, un `primario` claro dejaria ilegible TODO el texto
del sitio y no solo los fondos oscuros. */
--c-text-rgb: 22, 36, 60;
--c-body-rgb: 70, 86, 103; /* #465667 */
--c-muted-rgb: 92, 107, 124; /* #5C6B7C */
--c-eyebrow-rgb: 122, 136, 150; /* #7A8896 */
--c-photo-rgb: 107, 123, 140; /* #6B7B8C */
--c-slot-rgb: 139, 152, 166; /* #8B98A6 */
/* Sobre fondo oscuro */
/* TEXTO SOBRE FONDO OSCURO. El diseño traía dos grises casi iguales
(#B9C4D1 en la tarjeta de dato y #AFBBC9 en Ayudas) y los dos se leían
apagados. No era falta de contraste —medidos dan 8.8:1 y 8.0:1 sobre el
navy, o sea AAA— sino exceso de gris: sobre azul, un gris azulado oscuro
parece velado aunque el ratio sea alto.
Se unifican en UN token más claro, y el valor no es inventado: #CFD8E2 es
el mismo que el diseño ya usa para los enlaces del footer, o sea su color
de texto sobre oscuro. Sube a 10.8:1 y deja de verse lavado. */
--c-on-dark-rgb: 207, 216, 226; /* #CFD8E2 */
--c-on-dark-soft-rgb: 207, 216, 226; /* idem: eran dos nombres para lo mismo */
--c-foot-text-rgb: 158, 172, 188; /* #9EACBC */
--c-foot-link-rgb: 207, 216, 226; /* #CFD8E2 */
--c-foot-eyebrow-rgb: 102, 120, 141; /* #66788D */
--c-foot-copy-rgb: 94, 112, 134; /* #5E7086 */
--c-foot-note-rgb: 127, 143, 163; /* #7F8FA3 */
/* Semaforo de las 5 dimensiones. NO se expone: es el codigo de lectura del
diagnostico, no la marca. Va por canal igual (regla 21a). */
--c-sem-rojo-rgb: 214, 84, 58; /* #D6543A */
--c-sem-ambar-rgb: 232, 178, 28; /* #E8B21C */
--c-sem-verde-rgb: 127, 184, 14; /* #7FB80E */
/* --- SOLIDOS DERIVADOS ------------------------------------------------ */
--c-navy: rgb(var(--c-navy-rgb));
--c-lime: rgb(var(--c-lime-rgb));
--c-green: rgb(var(--c-green-rgb));
--c-navy-deep: rgb(var(--c-navy-deep-rgb));
--c-green-h: rgb(var(--c-green-h-rgb));
--c-green-d: rgb(var(--c-green-d-rgb));
--c-white: rgb(var(--c-white-rgb));
--c-page: rgb(var(--c-page-rgb));
--c-surface: rgb(var(--c-white-rgb));
--c-field: rgb(var(--c-field-rgb));
--c-text: rgb(var(--c-text-rgb));
--c-title: rgb(var(--c-text-rgb));
--c-body: rgb(var(--c-body-rgb));
--c-muted: rgb(var(--c-muted-rgb));
--c-eyebrow: rgb(var(--c-eyebrow-rgb));
--c-photo: rgb(var(--c-photo-rgb));
--c-slot: rgb(var(--c-slot-rgb));
--c-on-dark: rgb(var(--c-on-dark-rgb));
--c-on-dark-soft: rgb(var(--c-on-dark-soft-rgb));
--c-foot-text: rgb(var(--c-foot-text-rgb));
--c-foot-link: rgb(var(--c-foot-link-rgb));
--c-foot-eyebrow: rgb(var(--c-foot-eyebrow-rgb));
--c-foot-copy: rgb(var(--c-foot-copy-rgb));
--c-foot-note: rgb(var(--c-foot-note-rgb));
--c-sem-rojo: rgb(var(--c-sem-rojo-rgb));
--c-sem-ambar: rgb(var(--c-sem-ambar-rgb));
--c-sem-verde: rgb(var(--c-sem-verde-rgb));
/* bordes: todos derivados del canal navy, para que sigan al color editable */
--b-hair: 1px solid rgba(var(--c-navy-rgb), .07);
--b-card: 1px solid rgba(var(--c-navy-rgb), .08);
--b-frame: 1px solid rgba(var(--c-navy-rgb), .09);
--b-row: 1px solid rgba(var(--c-navy-rgb), .10);
--b-input: 1px solid rgba(var(--c-navy-rgb), .16);
--b-ghost: 1px solid rgba(var(--c-navy-rgb), .18);
--b-ghost2: 1px solid rgba(var(--c-navy-rgb), .20);
--b-dark: 1px solid rgba(var(--c-white-rgb), .10);
/* tipografia */
--f-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
--f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* layout */
--w-container: 1240px;
--pad-x: clamp(20px, 3.2vw, 48px);
--pad-y: clamp(56px, 6.4vw, 104px);
--pad-y2: clamp(48px, 5vw, 80px);
/* Alto REAL del header del diseno: 16 + 38 (el boton, que es mas alto que el
logo de 30) + 16 + 1 de borde. Es lo que .site-main tiene que reservar por
ser `fixed`; con 62 el hero se metia 9px por debajo de la barra. scripts.js
lo recalcula del alto medido, por si el cliente sube un logo mas alto. */
--h-header: 71px;
/* radios. El diseno es deliberadamente plano: NO hay sombras. */
--r-pill: 999px;
--r-photo: 22px;
--r-form: 20px;
--r-card: 18px;
--r-tile: 16px;
--r-slot: 12px;
--r-input: 10px;
--r-tag: 6px;
/* trama diagonal de los marcos de foto (placeholder del diseno) */
--trama: repeating-linear-gradient(135deg,
rgba(var(--c-navy-rgb), .06) 0 7px, rgba(var(--c-navy-rgb), 0) 7px 14px);
}
/* =====================================================================
* 3. LAYOUT
* ===================================================================== */
.fnx-wrap { max-width: var(--w-container); margin: 0 auto; }
/* --- Header -----------------------------------------------------------
El prototipo lo pone `sticky`; la regla dura 3 exige `fixed` y que SIEMPRE
permanezca visible. El alto se compensa con el padding-top de .site-main.
Unica excepcion: modo administrando, donde pasa a `static` para no pisar la
barra del admin. */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 40;
background: rgba(var(--c-page-rgb), .88);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom: var(--b-hair);
}
.pg-adm .site-header { position: static; }
/* El header es la UNICA banda donde el gutter va DENTRO del wrap de 1240: el
diseno lo dibuja asi (logo en x=146, contra x=100 de las secciones). */
.site-header__inner {
padding-left: var(--pad-x);
padding-right: var(--pad-x);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 16px;
padding-bottom: 16px;
}
.site-header__brand { display: block; flex: none; }
.site-header__brand, .site-header__brand:hover, .site-header__brand:focus { color: var(--c-navy); }
.site-header__logo { height: 30px; width: auto; display: block; }
.site-header__wordmark { height: 30px; width: auto; display: block; color: var(--c-navy); }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { font-size: 14.5px; font-weight: 500; }
.site-nav a, .site-nav a:hover, .site-nav a:focus { color: var(--c-navy); }
.site-nav a:hover { color: var(--c-green-h); }
.site-header__actions { display: flex; align-items: center; gap: 10px; }
.site-nav a, .site-footer__column a { line-height: normal; }
/* --- Botones ----------------------------------------------------------
`color` y `background` van con !important en reposo Y en hover: hay reglas
del tema del CMS con !important sobre .btn y sobre anchors. */
.fnx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border: none;
border-radius: var(--r-pill);
font-family: var(--f-body);
font-weight: 600;
line-height: 1;
cursor: pointer;
text-align: center;
}
.fnx-btn--lime, .fnx-btn--lime:hover, .fnx-btn--lime:focus {
background: var(--c-lime) !important; color: var(--c-navy) !important;
}
.fnx-btn--navy, .fnx-btn--navy:hover, .fnx-btn--navy:focus {
background: var(--c-navy) !important; color: var(--c-white) !important;
}
.fnx-btn--ghost, .fnx-btn--ghost:hover, .fnx-btn--ghost:focus {
background: transparent !important; color: var(--c-navy) !important;
border: var(--b-ghost2);
}
a.fnx-btn, button.fnx-btn { line-height: 1; }
.fnx-btn--sm { padding: 11px 20px; font-size: 14px; border: var(--b-ghost); }
.fnx-btn--md { padding: 12px 22px; font-size: 14px; }
.fnx-btn--lg { padding: 16px 28px; font-size: 15px; }
.fnx-btn--hero { padding: 17px 30px; font-size: 15.5px; }
.fnx-btn--hero2 { padding: 17px 28px; font-size: 15.5px; }
.fnx-btn--link { padding: 13px 22px; font-size: 14.5px; }
/* Hamburguesa / CTA compacto del header movil */
.site-header__mobile { display: none; }
/* --- Main -------------------------------------------------------------
El header es fijo, asi que el contenido arranca debajo. En administrando el
header vuelve a ocupar sitio y la compensacion sobra. */
.site-main { padding-top: var(--h-header); }
.pg-adm .site-main { padding-top: 0; }
.site-content { max-width: var(--w-container); margin: 0 auto; padding: 56px 0; }
.site-main > .site-content { padding-left: var(--pad-x); padding-right: var(--pad-x); }
/* --- Bandas de seccion ------------------------------------------------ */
.home-section { padding: var(--pad-y) var(--pad-x); }
.home-section--page { background: var(--c-page); }
.home-section--surface { background: var(--c-surface); }
.home-section--navy { background: var(--c-navy); color: var(--c-white); }
.home-section--hair { border-top: var(--b-hair); }
.home-section--tight { padding: var(--pad-y2) var(--pad-x); }
p.fnx-eyebrow, .fnx-eyebrow {
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
line-height: 1;
letter-spacing: .16em;
color: var(--c-eyebrow);
margin: 0 0 14px;
text-transform: uppercase;
}
.fnx-eyebrow--lime { color: var(--c-lime); }
.fnx-h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; }
/* Cabecera partida: titulo a la izquierda, parrafo de apoyo a la derecha */
.fnx-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: clamp(32px, 3.5vw, 56px);
}
.fnx-head--tight { margin-bottom: clamp(28px, 3vw, 48px); }
.fnx-head__title { max-width: 560px; }
.fnx-head__lead { font-size: 15.5px; line-height: 1.6; color: var(--c-muted); max-width: 340px; }
.home-section--navy .fnx-head__lead { color: var(--c-on-dark-soft); }
/* Marco de foto con trama diagonal. Es el placeholder del diseno con las
dimensiones exactas; cuando el CMS trae imagen se pinta el ![]()
encima. */
.fnx-photo {
position: relative;
overflow: hidden;
border-radius: var(--r-photo);
border: var(--b-frame);
background: var(--trama);
display: flex;
align-items: flex-end;
padding: 18px;
}
.fnx-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
span.fnx-photo__tag, .fnx-photo__tag {
position: relative;
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
line-height: 1;
letter-spacing: .12em;
color: var(--c-photo);
background: var(--c-page);
padding: 7px 10px;
border-radius: var(--r-tag);
text-transform: uppercase;
}
/* =====================================================================
* 4. SECCIONES DE LA HOME
* ===================================================================== */
/* --- 02 Hero ---------------------------------------------------------- */
.fnx-hero {
position: relative;
overflow: hidden;
background: var(--c-page);
padding: clamp(48px, 6vw, 88px) var(--pad-x) clamp(56px, 6vw, 96px);
}
.fnx-hero__halo {
position: absolute;
top: -140px; right: -120px;
width: 620px; height: 620px;
border-radius: 50%;
background: radial-gradient(circle at 40% 40%,
rgba(var(--c-lime-rgb), .30), rgba(var(--c-lime-rgb), 0) 62%);
pointer-events: none;
}
.fnx-hero__grid {
position: relative;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(32px, 4vw, 64px);
align-items: center;
}
.fnx-hero__kicker {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-family: var(--f-mono);
font-size: 10.5px;
font-weight: 500;
line-height: 1;
letter-spacing: .16em;
color: var(--c-muted);
margin-bottom: 26px;
text-transform: uppercase;
}
.fnx-hero__kicker span { line-height: 1; }
.fnx-hero__chev { color: var(--c-lime); }
.fnx-hero__title {
font-size: clamp(38px, 5.4vw, 72px);
line-height: 1.02;
letter-spacing: -.03em;
font-weight: 700;
}
.fnx-hero__title em { font-style: normal; color: var(--c-green); }
.fnx-hero__lead {
margin-top: 26px;
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.6;
color: var(--c-body);
max-width: 520px;
}
.fnx-hero__ctas { display: flex; align-items: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
p.fnx-hero__note, .fnx-hero__note {
margin-top: 22px;
font-family: var(--f-mono);
font-size: 12px;
font-weight: 500;
line-height: 1.5;
letter-spacing: .08em;
color: var(--c-eyebrow);
text-transform: uppercase;
}
.fnx-hero__aside { display: flex; flex-direction: column; gap: 14px; }
.fnx-hero__frame { aspect-ratio: 4 / 3; }
.fnx-hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fnx-stat { border-radius: var(--r-card); padding: 22px; background: var(--c-surface); border: var(--b-frame); }
.fnx-stat:first-child { background: var(--c-navy); border-color: transparent; color: var(--c-white); }
.fnx-stat__n { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.fnx-stat:first-child .fnx-stat__n { color: var(--c-lime); }
.fnx-stat__t, .fnx-stat__t p { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--c-muted); }
.fnx-stat__t p { margin-top: 0; }
.fnx-stat:first-child .fnx-stat__t { color: var(--c-on-dark); }
/* --- 03 Como funciona -------------------------------------------------- */
.fnx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fnx-step {
background: var(--c-page);
border-radius: var(--r-card);
padding: 26px;
display: flex;
flex-direction: column;
gap: 14px;
min-height: 230px;
}
span.fnx-step__n { font-family: var(--f-mono); font-size: 12px; font-weight: 600; line-height: 1; color: var(--c-green); }
.fnx-step__t { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.fnx-step__d, .fnx-step__d p { font-size: 14.5px; line-height: 1.55; color: var(--c-muted); }
/* La tarjeta oscura es el ESTADO HOVER de cualquiera de los cuatro pasos, no una
card fija. El prototipo es estatico y por eso la dibuja pintada en el paso 03:
es la unica forma que tiene un mockup de ense~nar un estado.
`:focus-within` va con el hover para que tambien responda con teclado. */
.fnx-step { transition: background-color .25s ease, color .25s ease; }
.fnx-step__n, .fnx-step__t, .fnx-step__d { transition: color .25s ease; }
.fnx-step:hover, .fnx-step:focus-within { background: var(--c-navy); color: var(--c-white); }
.fnx-step:hover .fnx-step__n, .fnx-step:focus-within .fnx-step__n { color: var(--c-lime); }
.fnx-step:hover .fnx-step__t, .fnx-step:focus-within .fnx-step__t { color: var(--c-white); }
.fnx-step:hover .fnx-step__d, .fnx-step:focus-within .fnx-step__d { color: var(--c-on-dark); }
/* Quien no quiera animacion no la tiene. */
@media (prefers-reduced-motion: reduce) {
.fnx-step, .fnx-step__n, .fnx-step__t, .fnx-step__d { transition: none; }
}
/* --- 04 Dimensiones ---------------------------------------------------- */
.fnx-dims { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fnx-dim { background: var(--c-surface); border: var(--b-card); border-radius: var(--r-tile); padding: 24px; }
.fnx-dim__dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 18px; background: var(--c-sem-verde); }
.fnx-dim__dot--rojo { background: var(--c-sem-rojo); }
.fnx-dim__dot--ambar { background: var(--c-sem-ambar); }
.fnx-dim__dot--verde { background: var(--c-sem-verde); }
.fnx-dim__t { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.fnx-dim__d, .fnx-dim__d p { font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.fnx-split { margin-top: 16px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: stretch; }
.fnx-note {
background: var(--c-surface);
border: var(--b-card);
border-radius: var(--r-card);
padding: clamp(24px, 2.6vw, 36px);
}
.fnx-note__t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; }
.fnx-note__d { font-size: 15px; line-height: 1.6; color: var(--c-muted); max-width: 520px; }
.fnx-note .fnx-btn { margin-top: 22px; }
.fnx-split .fnx-photo { border-radius: var(--r-card); min-height: 200px; }
/* --- 05 Ayudas (banda navy) -------------------------------------------- */
.fnx-aids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fnx-aid {
background: rgba(var(--c-white-rgb), .05);
border: var(--b-dark);
border-radius: var(--r-tile);
padding: 24px;
}
span.fnx-aid__tag, .fnx-aid__tag {
display: inline-block;
border-radius: var(--r-pill);
padding: 5px 11px;
font-size: 11px;
font-weight: 600;
line-height: 1;
background: rgba(var(--c-white-rgb), .12);
color: var(--c-white);
}
.fnx-aid:first-child .fnx-aid__tag { background: var(--c-lime); color: var(--c-navy); }
.fnx-aid__t { margin: 18px 0 8px; font-size: 17.5px; font-weight: 600; color: var(--c-white); }
.fnx-aid__d, .fnx-aid__d p { font-size: 14px; line-height: 1.5; color: var(--c-on-dark-soft); }
.fnx-aids + .fnx-btn { margin-top: 26px; }
/* --- 06 Asesorias ------------------------------------------------------ */
.fnx-duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(28px, 3.4vw, 56px);
align-items: center;
}
.fnx-duo__t { margin-bottom: 20px; }
.fnx-duo__d { font-size: 16px; line-height: 1.6; color: var(--c-muted); max-width: 480px; margin-bottom: 26px; }
.fnx-bullets { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.fnx-bullet { display: flex; gap: 12px; align-items: flex-start; }
.fnx-bullet__m { color: var(--c-green); font-weight: 700; }
span.fnx-bullet__t, .fnx-bullet__t { font-size: 15px; line-height: 1.55; color: var(--c-body); }
.fnx-duo .fnx-photo { aspect-ratio: 1 / 1; }
/* --- 07 Aliados -------------------------------------------------------- */
.fnx-allies { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.fnx-ally {
height: 76px;
border-radius: var(--r-slot);
border: 1px dashed rgba(var(--c-navy-rgb), .18);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-mono);
font-size: 9.5px;
font-weight: 500;
line-height: 1;
letter-spacing: .1em;
color: var(--c-slot);
padding: 12px;
text-transform: uppercase;
}
.fnx-ally--img { border-style: solid; border-color: rgba(var(--c-navy-rgb), .09); background: var(--c-surface); }
.fnx-ally__img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.fnx-allies .fnx-eyebrow { grid-column: 1 / -1; }
/* --- 08 FAQ ------------------------------------------------------------ */
.fnx-faq { display: grid; grid-template-columns: 380px 1fr; gap: clamp(28px, 3.4vw, 64px); }
.fnx-faq__list { display: flex; flex-direction: column; }
.fnx-faq__row { border-top: var(--b-row); padding: 24px 0; }
.fnx-faq__row:last-child { border-bottom: var(--b-row); }
.fnx-faq__q { font-size: 17.5px; font-weight: 600; margin-bottom: 10px; }
.fnx-faq__a { font-size: 15px; line-height: 1.6; color: var(--c-muted); max-width: 640px; }
/* --- 09 Contacto ------------------------------------------------------- */
.fnx-contact { align-items: start; }
.fnx-contact__t { margin-bottom: 18px; }
.fnx-contact__d { font-size: 16px; line-height: 1.6; color: var(--c-muted); max-width: 460px; margin-bottom: 28px; }
.fnx-contact__data { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--c-body); }
.fnx-contact__data a, .fnx-contact__data a:hover, .fnx-contact__data a:focus { color: var(--c-body); }
.fnx-contact__data a:hover { color: var(--c-green-h); }
.fnx-form {
background: var(--c-surface);
border: var(--b-frame);
border-radius: var(--r-form);
padding: clamp(24px, 2.6vw, 36px);
}
/* El markup lo emite el CORE (formgenerator): se le maqueta encima, no se
reemplaza. `#Form__container` es el wrapper, `.inputformgenerator` cada
campo y `#fg_submit` el boton. Un