/* ═══════════════════════════════════════════════════════════════════════════ FinteChile · Sistema de diseño WEB (ftc-web) Híbrido Brandbook + terminal. FUENTE MAESTRA: FinteChile-Brandboard.pdf. Reconciliado a ftc-brand: navy #0A1733 · azul eléctrico #3F55F7 · verde #27D545. Roboto para TODO (display, cuerpo, labels, datos). Sin monoespaciada: 30-sep-2026. Dos ánimos: dark (navy, hero/inmersivo) y light (#F5F7FB, dashboards). Este archivo es el CONTRATO compartido por landing, ROI y Mapa. No inventar marca. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Fuentes ── */ /* [Visor 3D MBC, 25-oct-2026] @import de Google Fonts retirado: la familia la sirve ./fuentes.css (autoalojada). */ :root{ /* ===== Paleta oficial del Brandboard (MANDA) ===== */ --blue-light: #B7D8F2; /* celeste, tintes/superficies suaves */ --blue-electric: #3F55F7; /* AZUL ELÉCTRICO — acento primario */ --blue-dark: #1A3FB7; /* azul profundo */ /* ===== Superficie / estructura ===== */ --navy: #0A1733; /* superficie oscura + tinta primaria */ --navy-deep: #050F26; /* fondo más profundo */ --navy-2: #13234D; /* navy elevado (cards en dark) */ --white: #FFFFFF; /* ===== Colores del LOGO (isotipo) — solo marca / positivo ===== */ --cyan: #0DC9EB; /* triángulo cyan del isotipo */ --cyan-soft: #7FDFEF; --green: #27D545; /* triángulo verde / acento POSITIVO */ --green-deep:#00A83B; /* ===== ACENTOS COMO TEXTO — legibles, cambian por tema ===== Los colores de marca de arriba son para RELLENOS: barras, isotipo, gráficos, bordes. Como texto son ilegibles sobre claro: el verde #27D545 sobre blanco da 1.96:1 y el cyan #0DC9EB da 1.99:1. Cualquier palabra que alguien deba LEER usa estos tokens, nunca los de arriba. Valores del ánimo oscuro; el bloque [data-theme="light"] los reemplaza por sus pares oscurecidos. */ --accent-ink: #8494FF; /* eléctrico legible · 6.47:1 sobre navy */ --green-ink: #27D545; /* 9.03:1 sobre navy */ --cyan-ink: #0DC9EB; /* 8.93:1 sobre navy */ --warn-ink: #F0C465; /* ámbar de aviso · 10.6:1 sobre navy */ --alert-ink: #F19B9B; /* rojo de alerta · 7.9:1 sobre navy */ /* ===== Tracking ===== Regla del sistema: los TÍTULOS llevan tracking NEGATIVO. El tracking positivo existe solo para micro-labels mono de 10-12px. Un título con las letras abiertas se lee como generado por máquina. */ --track-title: -.02em; /* display grande */ --track-title-2: -.015em; /* display medio */ --track-lab: .06em; /* micro-label en MAYÚSCULA (Roboto): el TECHO, no un punto medio */ /* ===== Superficies claras (ánimo light) ===== */ --bg-light: #F5F7FB; /* fondo dashboards */ --bg-soft: #EEF2FA; --bg-tint: #E6EDF9; --card: #FFFFFF; --card-2: #F8FAFE; /* ===== Ink sobre claro ===== Los tres niveles pasan WCAG AA (4.5:1) sobre blanco, --bg-soft y --bg-tint. --ink-3 era #7A87A0 y daba 3.62:1 sobre blanco: ese era el "gris que no se lee" del que se quejaba todo el mundo. Ahora da 5.60:1. NO lo aclares. */ --ink-1: #0A1733; /* 17.75:1 sobre blanco */ --ink-2: #46526B; /* 7.84:1 */ --ink-3: #5C6880; /* 5.60:1 sobre blanco · 4.90:1 sobre --bg-tint */ /* ===== Ink sobre oscuro ===== Los cuatro niveles pasan AA sobre --navy, --navy-deep y --navy-2. --on-dark-4 era #6B7A9C y daba 4.13:1 sobre navy (y 3.55 sobre navy-2). */ --on-dark-1: #FFFFFF; /* 17.75:1 sobre navy */ --on-dark-2: #C7D2E8; /* 11.67:1 */ --on-dark-3: #9AA8C6; /* 7.43:1 */ --on-dark-4: #8592B2; /* 5.71:1 sobre navy · 4.91:1 sobre navy-2 */ /* ===== Líneas / bordes ===== */ --line: rgba(10,23,51,.10); --line-2: rgba(10,23,51,.18); --line-dark: rgba(255,255,255,.10); --line-dark-2: rgba(255,255,255,.16); /* ===== Gradientes (Brandbook) ===== */ --grad-official: linear-gradient(90deg,#000000 0%,#3F55F7 100%); --grad-brand: linear-gradient(90deg,#0A1733 0%,#1A3FB7 40%,#3F55F7 74%,#B7D8F2 100%); --grad-brand-135:linear-gradient(135deg,#0A1733 0%,#1A3FB7 38%,#3F55F7 72%,#B7D8F2 100%); --grad-line: linear-gradient(90deg,#3F55F7,#B7D8F2); --grad-wedge: linear-gradient(150deg,#3F55F7 0%,rgba(63,85,247,0) 62%); /* acento terminal (isotipo): verde→cyan, SOLO como firma/acento, no como marca principal */ --grad-iso: linear-gradient(115deg,#27D545 0%,#0DC9EB 100%); /* ===== Paleta de datos (charts) — orden estable, temado a marca ===== */ --c1: #3F55F7; /* azul eléctrico (serie principal) */ --c2: #0DC9EB; /* cyan */ --c3: #27D545; /* verde */ --c4: #1A3FB7; /* azul profundo */ --c5: #B7D8F2; /* celeste */ --c6: #8A93A6; /* gris neutro */ --c7: #7C5CFF; /* violeta (extensión, alto contraste)*/ --c8: #0A1733; /* navy (tramo oscuro) */ /* ===== Colores de CATEGORÍA (1-oct-2026) ===== Para el cuadradito de color que etiqueta una categoría en una lista (Glosario, directorio, normativa). Son RELLENOS de 10px, no texto: se exige 3:1 (objetos gráficos) contra --navy y --navy-2 acá, y contra blanco en el bloque claro. Una sola paleta para los dos ánimos salía apagada (todo en #6x7xE0), así que, como los *-ink, cambian por tema. El orden es estable y lo asigna el índice de la categoría en los datos. check_contraste.py los verifica. */ --cat-1: #8494FF; --cat-2: #0DC9EB; --cat-3: #27D545; --cat-4: #B7D8F2; --cat-5: #F0C465; --cat-6: #FF8A4C; --cat-7: #FF7A8A; --cat-8: #E07BE0; --cat-9: #B08CFF; --cat-10: #A6B2CC; /* fondo de la coincidencia de búsqueda (): verde de marca al 28% */ --mark-bg: rgba(39,213,69,.28); /* ===== Tipografía ===== */ --font-display: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* 30-sep-2026: FUERA la monoespaciada del sitio (pedido explícito de Rodrigo; el Brandbook dice Roboto para todo). El token se conserva para no reescribir los ~20 usos, pero vale Roboto: labels, pestañas, botones y cifras son Roboto. Las cifras que antes alineaba la mono usan font-variant-numeric:tabular-nums. check_paginas.py falla si alguien vuelve a cargar o declarar una mono. */ --font-mono: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ===== Radios ===== */ --r-chip: 999px; --r-tile: 12px; --r-card: 16px; --r-panel: 22px; /* ===== Motion ===== */ --ease: cubic-bezier(.22,1,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-1: .25s; --dur-2: .45s; --dur-3: .7s; /* ===== Layout ===== */ --maxw: 1320px; --gutter: clamp(20px,4vw,52px); --nav-h: 62px; } /* ═══ Reset base ═══ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; background:var(--navy);color:var(--on-dark-1);overflow-x:hidden; } a{color:inherit;text-decoration:none} img,svg,canvas{max-width:100%;display:block} button{font-family:inherit;cursor:pointer} ::selection{background:var(--blue-electric);color:#fff} :focus-visible{outline:2px solid var(--blue-electric);outline-offset:3px} /* El atributo hidden gana siempre: sin esto, un componente con display propio (.ftc-hero__stats, .ftc-grid) seguía visible aunque el JS lo ocultara. */ [hidden]{display:none!important} /* ═══ Utilidades de color/tipo ═══ */ .mono{font-family:var(--font-mono)} .electric{color:var(--blue-electric)} .green{color:var(--green)} .cyan{color:var(--cyan)} .grad-text{background:var(--grad-line);-webkit-background-clip:text;background-clip:text;color:transparent} .grad-iso-text{background:var(--grad-iso);-webkit-background-clip:text;background-clip:text;color:transparent} .eyebrow{ font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--accent-ink);display:inline-flex;gap:9px;align-items:center; } .eyebrow i{font-style:normal;color:var(--on-dark-4)} /* ═══════════════════════════════════════════════════════════════ NAV SHELL — barra superior de 3 pestañas (Landing/ROI/Mapa) Idéntica en las 3 páginas. Data-attr [data-tab] marca la activa. ═══════════════════════════════════════════════════════════════ */ .ftc-nav{ position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h); display:flex;align-items:center;justify-content:space-between; padding:0 var(--gutter); background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.2); border-bottom:1px solid var(--nav-border); transition:background var(--dur-2) var(--ease),border-color var(--dur-2); } /* flex:none: la marca NUNCA se encoge. Con min-width:0 el logo se aplastaba a 34px de ancho en un teléfono de 390 (height:24px + max-width:100% lo distorsionaban), en producción y en todas las páginas. La que cede es la fila de pestañas, que ya es un contenedor con scroll. Medido el 1-oct-2026. */ .ftc-nav__brand{display:flex;align-items:center;gap:12px;flex:none} .ftc-nav__brand img{height:24px;width:auto} /* tabs SIEMPRE centradas en el viewport (independiente del ancho de marca/acciones): así el grupo queda en la MISMA posición en las 3 páginas y no se descuadra al cambiar de tab */ .ftc-nav__tabs{position:absolute;left:50%;transform:translateX(-50%); display:flex;gap:2px;background:var(--nav-tabs-bg);border:1px solid var(--nav-border); padding:4px;border-radius:var(--r-chip)} .ftc-nav__tab{ font-family:var(--font-mono);font-size:14px;font-weight:500;letter-spacing:0; color:var(--on-dark-3);padding:8px 17px;border-radius:var(--r-chip); display:inline-flex;align-items:center;gap:7px;transition:var(--dur-1);white-space:nowrap;border:0;background:none; } .ftc-nav.on-light .ftc-nav__tab{color:var(--ink-3)} .ftc-nav__tab i{font-style:normal;font-size:11.5px;font-weight:600;opacity:.9;color:var(--green-ink);font-variant-numeric:tabular-nums} .ftc-nav__tab:hover{color:var(--on-dark-1)} .ftc-nav.on-light .ftc-nav__tab:hover{color:var(--ink-1)} .ftc-nav__tab[aria-current="page"]{background:var(--blue-electric);color:#fff} .ftc-nav__tab[aria-current="page"] i{color:#fff;opacity:.85} /* ── Menú "Interno": agrupa los módulos que exigen sesión @fintechile.org ── Van acá y no como pestañas sueltas por dos razones: el nav no aguanta ocho píldoras sin chocar con la marca y el CTA, y el agrupamiento comunica de una que ese bloque no es público. */ .ftc-nav__more{position:relative;display:flex} .ftc-nav__more>.ftc-nav__tab{cursor:pointer} .ftc-nav__more>.ftc-nav__tab svg{width:11px;height:11px;opacity:.75; transition:transform var(--dur-1) var(--ease)} .ftc-nav__more[data-open="true"]>.ftc-nav__tab{color:var(--on-dark-1);background:rgba(63,85,247,.14)} .ftc-nav.on-light .ftc-nav__more[data-open="true"]>.ftc-nav__tab{color:var(--ink-1)} /* La página actual es uno de los módulos del menú: el botón se marca igual que una pestaña activa y el JS le pone el nombre del módulo. */ .ftc-nav__more[data-current="true"]>.ftc-nav__tab{background:var(--blue-electric);color:#fff} .ftc-nav__more[data-current="true"]>.ftc-nav__tab svg{opacity:.9} .ftc-nav__more[data-open="true"]>.ftc-nav__tab svg{transform:rotate(180deg)} .ftc-nav__panel{ position:absolute;top:calc(100% + 12px);right:0;min-width:268px;z-index:70; background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.2); border:1px solid var(--nav-border);border-radius:var(--r-tile);padding:7px; box-shadow:0 22px 60px -24px rgba(0,0,0,.6); display:none;flex-direction:column;gap:2px; } :root[data-theme="light"] .ftc-nav__panel{box-shadow:0 22px 60px -26px rgba(10,23,51,.34)} .ftc-nav__more[data-open="true"] .ftc-nav__panel{display:flex} .ftc-nav__item{ font-family:var(--font-mono);font-size:14px;font-weight:500; color:var(--on-dark-3);padding:10px 13px;border-radius:var(--r-btn,8px); display:flex;align-items:center;gap:10px;transition:var(--dur-1);white-space:nowrap; } .ftc-nav.on-light .ftc-nav__item{color:var(--ink-3)} .ftc-nav__item i{font-style:normal;font-size:11px;opacity:.85;color:var(--green-ink);flex:none} .ftc-nav__item b{font-weight:500;flex:1} .ftc-nav__item:hover{color:var(--on-dark-1);background:rgba(63,85,247,.12)} .ftc-nav.on-light .ftc-nav__item:hover{color:var(--ink-1)} .ftc-nav__item[aria-current="page"]{background:var(--blue-electric);color:#fff} .ftc-nav__item[aria-current="page"] i{color:#fff;opacity:.85} /* Candado: señal de que el módulo pide sesión. Dibujado, no glifo de texto. */ .ftc-nav__lock{width:9px;height:11px;flex:none;opacity:.55;position:relative} .ftc-nav__lock::before{content:"";position:absolute;left:0;bottom:0;width:9px;height:6px; border-radius:1.5px;background:currentColor} .ftc-nav__lock::after{content:"";position:absolute;left:1.5px;top:0;width:6px;height:6px; border:1.6px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0} .ftc-nav__panel .ftc-nav__note{ font-family:var(--font-body);font-size:13px;letter-spacing:0;color:var(--on-dark-4); padding:9px 13px 4px;line-height:1.45;white-space:normal; } .ftc-nav.on-light .ftc-nav__panel .ftc-nav__note{color:var(--ink-3)} .ftc-nav__cta{ font-family:var(--font-mono);font-size:14px;font-weight:600;color:#fff; background:#16264F;border:1px solid rgba(255,255,255,.14); height:40px;box-sizing:border-box;padding:0 16px;border-radius:var(--r-btn,8px);display:inline-flex;align-items:center;gap:7px; transition:var(--dur-1);position:relative;overflow:hidden; } /* CTA: fondo navy FIJO en ambos temas (blanco sobre navy siempre legible) */ :root[data-theme="light"] .ftc-nav__cta{background:#0A1733;border-color:rgba(10,23,51,.16)} .ftc-nav__cta::before{content:"";position:absolute;inset:0;background:var(--blue-electric);opacity:0;transition:var(--dur-1)} .ftc-nav__cta:hover::before{opacity:1} .ftc-nav__cta>*{position:relative;z-index:1} .ftc-nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px} .ftc-nav__burger span{width:22px;height:2px;background:currentColor;transition:.3s} /* 30-sep-2026: con cinco píldoras públicas el grupo centrado chocaba con la marca y los botones entre 821 y 1100px (con cuatro ya chocaba entre 821 y 960, medido en producción). Bajo 1240 se sueltan los números de pestaña y bajo 1024 el nav pasa a fila desplazable, que antes empezaba recién en 820. */ /* 30-sep-2026 (Comités): con seis píldoras públicas el grupo tocaba los botones a 1300px y los pisaba a 1060px (medido). Los dos cortes suben: números fuera bajo 1360 y fila desplazable bajo 1100. */ @media(max-width:1360px){ .ftc-nav__tab{padding:8px 13px;font-size:13.5px} .ftc-nav__tab i{display:none} } @media(max-width:1100px){ /* El nav ya no cabe centrado: pasa a fila desplazable entre marca y botones. */ .ftc-nav__tabs{position:static;transform:none;max-width:100%;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none} .ftc-nav__tabs::-webkit-scrollbar{display:none} .ftc-nav__panel{right:auto;left:0} } @media(max-width:820px){ .ftc-nav__cta{display:none} .ftc-nav__tab{padding:8px 12px;font-size:13px} } @media(max-width:520px){ .ftc-nav__brand span{display:none} } /* ═══ Botones ═══ */ .btn{ font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:0; padding:13px 24px;border-radius:var(--r-btn,8px);display:inline-flex;align-items:center;gap:9px; transition:var(--dur-1) var(--ease);position:relative;overflow:hidden;border:1px solid transparent; } .btn span{transition:transform var(--dur-1);position:relative;z-index:2} .btn:hover span{transform:translateX(4px)} .btn--solid{color:#fff;background:var(--blue-electric)} .btn--solid:hover{background:var(--blue-dark)} .btn--ghost{border-color:var(--line-dark-2);color:var(--on-dark-1);background:transparent} /* .btn--go · el acento VERDE de marca (30-sep-2026). Va con texto NAVY: el verde como texto sobre blanco da 1,96:1 y está prohibido, pero navy sobre verde da 9,03:1. --ink-1 es navy fijo en los dos temas (no se invierte como --navy). Con criterio: UN verde por vista, en la acción principal. El resto, eléctrico. */ .btn--go{color:var(--ink-1);background:var(--green)} .btn--go:hover{background:var(--green-deep);color:var(--ink-1)} /* 5,68:1 */ :root[data-theme="light"] .btn--go{box-shadow:inset 0 0 0 1px rgba(10,23,51,.10)} .btn--ghost:hover{border-color:var(--blue-electric);background:rgba(63,85,247,.08)} .on-light .btn--ghost,.btn--ghost.on-light{border-color:var(--line-2);color:var(--ink-1)} /* ═══ Chips / badges ═══ */ .chip{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:0;padding:5px 11px;border-radius:var(--r-chip); border:1px solid var(--line-dark);color:var(--on-dark-3);display:inline-flex;gap:6px;align-items:center} .chip.on-light{border-color:var(--line);color:var(--ink-2);background:var(--bg-soft)} /* ═══ Fondo: rejilla de puntos + rays (motivo del Mapa PDF) ═══ */ .fx-dots{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(var(--line-dark) 1px,transparent 1px);background-size:28px 28px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);} .fx-rays{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} /* rays se dibujan con canvas/SVG en JS por página; aquí solo el contenedor */ /* Texto solo para lectores de pantalla. Faltaba en el contrato: cada pagina que necesitaba una etiqueta accesible en un boton de icono la inventaba. */ .ftc-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ═══ Section head compartido ═══ REGLA DE AIRE (10-sep-2026). Rodrigo, mirando el CFF27: "ese texto esta muy arriba, eso no puede pasar en ningun slider, debe haber un margen al menos". Pasaba por dos motivos sumados, los dos del contrato y no de la pagina: 1 · `.sec__head` no tenia padding-top, asi que el titulo arrancaba pegado a lo que hubiera encima (una banda decorativa, una tira de fotos). 2 · `.sec__title` va con `line-height:1`, y a 58px eso deja los ascendentes casi tocando el borde de su caja: aunque haya margen, el titulo SE VE pegado. El padding-top de abajo es el piso de aire de TODA seccion del sitio. No se quita desde una pagina: si una necesita mas, sube su propio margin. ── */ .sec__head{display:flex;align-items:baseline;gap:18px;margin-bottom:28px;position:relative; padding-top:clamp(20px,2.6vw,38px)} /* Y al llegar por un ancla (#popup), el nav fijo ya no se come el titulo. */ section[id],[id].sec__anchor{scroll-margin-top:calc(var(--nav-h) + 28px)} /* 16-oct-2026 · Rodrigo: "no me gustan las líneas" y "no quiero numeritos al lado de los títulos, es muy Claude". El título de sección va SOLO: sin filete debajo (ni el gris ni el degradé que se dibujaba al entrar) y sin número. El .sec__num se oculta aquí para todo el sitio en vez de borrarlo de diez páginas que hoy se editan en otras ramas; las páginas nuevas no lo escriben. */ .sec__num,.eyebrow>i{display:none} .sec__title{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4.6vw,58px);letter-spacing:var(--track-title);line-height:1} .on-light .sec__title{color:var(--ink-1)} /* ═══ Cards / KPI ═══ ANTES estaban cableados a blanco fijo (--card = #FFFFFF en los dos temas), o sea eran tarjetas blancas sobre navy en modo luna. Por eso Mapa y Prensa escribieron por su cuenta el mismo hack (--card:var(--surface-card)) y ROI, Regulatorio y Embudo directamente reescribieron el componente entero. Ahora siguen el tema solos y nadie necesita redefinirlos. */ .card{background:var(--surface-card);border:1px solid var(--hair);border-radius:var(--r-card);padding:18px 20px;color:var(--ink)} .kpi{background:var(--surface-card);border:1px solid var(--hair);border-radius:var(--r-card);padding:18px 20px;position:relative;overflow:hidden} :root[data-theme="light"] .card, :root[data-theme="light"] .kpi{background:var(--card);border-color:var(--line)} .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue-electric)} .kpi.cy::before{background:var(--cyan)}.kpi.gr::before{background:var(--green)}.kpi.nv::before{background:var(--navy)} .kpi__lab{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:var(--track-lab)} .kpi__val{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:clamp(26px,3vw,34px);font-weight:900;color:var(--ink);line-height:1.02;margin-top:6px;letter-spacing:var(--track-title-2)} .kpi__sub{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-dim);margin-top:5px} /* glass cards (ánimo dark) */ .glass{background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:18px 20px} /* ═══ Chart shells ═══ */ .chart{width:100%;height:320px} .chart.sm{height:240px} .chart.tall{height:400px} /* ═══ Reveal on scroll ═══ */ .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} .reveal.in{opacity:1;transform:none} /* ═══ Footer compartido ═══ */ .ftc-foot{border-top:1px solid var(--line-dark);padding:56px var(--gutter) 30px;max-width:var(--maxw);margin:0 auto;position:relative;z-index:2} .ftc-foot__row{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px} .ftc-foot__brand img{height:28px;margin-bottom:14px} .ftc-foot__brand p{color:var(--on-dark-2);font-size:14px;max-width:280px} .ftc-foot__cols{display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap} .ftc-foot__cols>div{display:flex;flex-direction:column;gap:11px} .ftc-foot__k{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:var(--track-lab);color:var(--green-ink);margin-bottom:3px} .ftc-foot__cols a{color:var(--on-dark-3);font-size:14px;transition:.2s} .ftc-foot__cols a:hover{color:var(--on-dark-1)} .ftc-foot__bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line-dark); font-family:var(--font-body);font-size:14px;letter-spacing:.02em;color:var(--on-dark-4)} .ftc-foot__bar b{color:var(--green-ink)} .on-light .ftc-foot{border-top-color:var(--line)} .on-light .ftc-foot__brand p,.on-light .ftc-foot__cols a{color:var(--ink-3)} .on-light .ftc-foot__bar{border-top-color:var(--line);color:var(--ink-3)} /* ═══════════════════════════════════════════════════════════════ SISTEMA DE TEMAS · dark ("luna", default) ⇄ light (más blanco) El toggle pone data-theme en . Los tokens de superficie/tinta se INVIERTEN, así los componentes que usan var(--navy)/var(--on-dark-*) /var(--line-dark) se adaptan solos. Las marcas (eléctrico, verde, cyan) NO cambian. Colores de datos (charts) tienen variante por tema. ═══════════════════════════════════════════════════════════════ */ :root{ color-scheme: dark; /* tokens de nav (dark) */ --nav-bg: rgba(10,23,51,.72); --nav-tabs-bg: rgba(255,255,255,.05); --nav-border: rgba(255,255,255,.10); /* El toggle de tema es un BOTON, no una hairline: pide mas cuerpo que el borde del nav o queda como una caja fantasma al lado del CTA. */ --nav-btn-bg: rgba(255,255,255,.08); --nav-btn-border: rgba(255,255,255,.20); /* superficie semántica (para componentes nuevos) */ --surface: var(--navy); --surface-2: var(--navy-deep); --surface-card: rgba(255,255,255,.05); --ink: var(--on-dark-1); --ink-soft: var(--on-dark-2); --ink-dim: var(--on-dark-3); --hair: var(--line-dark); } html,body{transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)} :root[data-theme="light"]{ color-scheme: light; /* invertir superficies oscuras -> claras */ --navy: #FFFFFF; --navy-deep: #EEF2FA; --navy-2: #FFFFFF; /* la "tinta sobre oscuro" pasa a ser tinta oscura sobre claro. Los cuatro niveles pasan AA sobre blanco, --bg-soft y --bg-tint. --on-dark-4 era #8A93A6 = 3.09:1 sobre blanco: fallaba, y era justo el token que las páginas usaban para pies de dato, fuentes y sub-labels. */ --on-dark-1: #0A1733; /* 17.75:1 sobre blanco */ --on-dark-2: #33415C; /* 10.24:1 */ --on-dark-3: #55637E; /* 6.05:1 */ --on-dark-4: #5C6880; /* 5.60:1 sobre blanco · 4.90:1 sobre --bg-tint */ /* acentos como TEXTO: los de marca son ilegibles sobre claro, acá se oscurecen conservando el matiz. El relleno sigue usando --green / --cyan / --blue-electric. */ --accent-ink: #3F55F7; /* 5.45:1 sobre blanco (el eléctrico ya pasa en claro) */ --green-ink: #0A7A2E; /* 5.47:1 sobre blanco · 4.78:1 sobre --bg-tint */ --cyan-ink: #0B7286; /* 5.58:1 sobre blanco · 4.87:1 sobre --bg-tint */ --warn-ink: #7A5C00; /* 5.85:1 sobre blanco */ --alert-ink: #A82A44; /* 6.24:1 sobre blanco */ /* hairlines oscuras sobre claro */ --line-dark: rgba(10,23,51,.12); --line-dark-2: rgba(10,23,51,.20); /* nav claro */ --nav-bg: rgba(255,255,255,.82); --nav-tabs-bg: rgba(10,23,51,.04); --nav-border: rgba(10,23,51,.10); --nav-btn-bg: rgba(10,23,51,.05); --nav-btn-border: rgba(10,23,51,.22); /* superficies claras un punto más blancas que el modo dashboard previo */ --bg-light: #FFFFFF; --bg-soft: #F4F7FC; --bg-tint: #EAF0FA; --surface-card: rgba(10,23,51,.03); /* charts: gris de de-énfasis un poco más oscuro para contraste sobre blanco */ --c6: #7F8CA6; /* 3.61:1 sobre blanco (antes #9AA6BC = 2.45, invisible) */ /* colores de categoría, profundos para leerse sobre blanco (>= 3:1) */ --cat-1: #3F55F7; --cat-2: #0B7286; --cat-3: #0A7A2E; --cat-4: #2F6FB0; --cat-5: #8A6300; --cat-6: #C2410C; --cat-7: #C8102E; --cat-8: #A61FA6; --cat-9: #6D3FD1; --cat-10: #5C6880; --mark-bg: rgba(39,213,69,.30); } /* selección legible en ambos temas */ :root[data-theme="light"] ::selection{background:var(--blue-electric);color:#fff} /* ═══ Botón toggle de tema (va en la nav, junto al CTA) ═══ */ /* Va PEGADO al CTA, asi que los dos tienen que leerse como un par: mismo alto (40px, fijado en los dos) y mismo radio (8px). Antes el toggle media 38px con radio 10 y en modo claro se pintaba con la hairline del nav al 10%: al lado de un boton navy macizo parecia un hueco, no un control. */ .ftc-theme{ width:40px;height:40px;box-sizing:border-box;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; border-radius:var(--r-btn,8px);border:1px solid var(--nav-btn-border);background:var(--nav-btn-bg); color:var(--ink);cursor:pointer;transition:var(--dur-1);position:relative;overflow:hidden; } .ftc-theme:hover{border-color:var(--blue-electric);color:var(--blue-electric)} .ftc-theme svg{width:18px;height:18px;display:block} .ftc-theme .i-sun{display:none} .ftc-theme .i-moon{display:block} :root[data-theme="light"] .ftc-theme .i-sun{display:block} :root[data-theme="light"] .ftc-theme .i-moon{display:none} /* ═══ Accesibilidad de movimiento ═══ */ @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.1ms!important;scroll-behavior:auto!important} } /* ═══════════════════════════════════════════════════════════════════════════ ftc-web v2 · 24-ago-2026 Todo lo de aquí abajo nació de la auditoría de las 8 pestañas. El diagnóstico fue que la "cara buena" del sitio vivía en styles.css, un archivo que solo cargaba la landing, así que cada módulo tuvo que reinventar la misma card, el mismo KPI y el mismo header de sección, y cada uno lo inventó distinto: ROI 159 líneas propias, Mapa 182, Prensa 177, Regulatorio 202, Acelera 495. Estos componentes son la mejor versión de cada uno, ascendida al contrato. Regla: si tu página necesita CSS propio, el error está acá, no en tu página. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 1 · COMPATIBILIDAD DE TEMA ═════════════════════════════════════════════ Había DOS mecanismos conviviendo: la clase .on-light escrita a mano en el HTML, y el atributo [data-theme="light"] que pone ftc-theme.js. Nadie ponía la clase, así que las reglas .on-light eran código muerto: por eso había texto celeste sobre fondo blanco en modo claro. El atributo MANDA. Estos alias mantienen vivas las reglas .on-light heredadas sin tener que cazarlas una por una. */ :root[data-theme="light"] body, :root[data-theme="light"] main, :root[data-theme="light"] .ftc-nav{ } :root[data-theme="light"] .sec__title{color:var(--ink-1)} :root[data-theme="light"] .ftc-foot{border-top-color:var(--line)} :root[data-theme="light"] .ftc-foot__brand p, :root[data-theme="light"] .ftc-foot__cols a{color:var(--ink-2)} :root[data-theme="light"] .ftc-foot__bar{border-top-color:var(--line);color:var(--ink-3)} :root[data-theme="light"] .btn--ghost{border-color:var(--line-2);color:var(--ink-1)} :root[data-theme="light"] .chip{border-color:var(--line);color:var(--ink-2);background:var(--bg-soft)} /* ═══ 2 · TIPOGRAFÍA · la regla del tracking ═════════════════════════════════ Un título con las letras separadas se lee como hecho por máquina. Los títulos llevan tracking NEGATIVO, siempre. El tracking positivo vive solo en los micro-labels mono, y con techo (--track-lab). Esto se aplica al elemento, así que corrige de una a todas las páginas sin tocarlas. */ h1,h2,h3,h4,.h1,.h2,.h3{letter-spacing:var(--track-title-2)} h1,.h1{letter-spacing:var(--track-title)} h5,h6{letter-spacing:0} /* Piso de legibilidad: nada que se lea como contenido baja de 14px. */ body{font-size:16px;line-height:1.6} p,li,dd,td{font-size:inherit} /* Escala de títulos del sistema. Úsala en vez de inventar tamaños por página: el problema medido fue que ROI, Regulatorio y Embudo titulaban sus secciones a 19-20px mientras la canónica lo hace a clamp(28px,4.6vw,58px). */ .t-display{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,6.4vw,80px);letter-spacing:var(--track-title);line-height:.98} .t-h1{font-family:var(--font-display);font-weight:900;font-size:clamp(28px,4.6vw,58px);letter-spacing:var(--track-title);line-height:1} .t-h2{font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.6vw,32px);letter-spacing:var(--track-title-2);line-height:1.12} .t-h3{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:var(--track-title-2);line-height:1.3} .t-lead{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:72ch} :root:not([data-theme="light"]) .t-lead{color:var(--on-dark-2)} /* Micro-label: el ÚNICO lugar del sistema con tracking positivo. */ .lab{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:var(--track-lab); text-transform:uppercase;color:var(--ink-2)} :root:not([data-theme="light"]) .lab{color:var(--on-dark-3)} /* ═══ 3 · CAPA DE INTERACCIÓN ════════════════════════════════════════════════ Un bloque de datos que no responde al mouse se siente muerto. Estas clases son componibles:
es lo normal. Todas se desactivan solas con prefers-reduced-motion (bloque al final). */ /* .lift — se levanta y proyecta sombra. El gesto base de todo el sitio. */ .lift{transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease)} .lift:hover{transform:translateY(-3px);border-color:var(--line-dark-2); box-shadow:0 18px 40px -18px rgba(0,0,0,.55)} :root[data-theme="light"] .lift:hover{border-color:var(--line-2); box-shadow:0 18px 40px -20px rgba(10,23,51,.22)} /* .glow — halo eléctrico. Para lo que quieres que la vista busque. */ .glow{position:relative;transition:box-shadow var(--dur-1) var(--ease),border-color var(--dur-1)} .glow:hover{border-color:rgba(63,85,247,.55);box-shadow:0 0 0 1px rgba(63,85,247,.28), 0 16px 44px -16px rgba(63,85,247,.42)} /* .sheen — barra de acento que crece en el borde superior al pasar el mouse. */ .sheen{position:relative;overflow:hidden} .sheen::after{content:"";position:absolute;left:0;top:0;height:2px;width:0; background:var(--grad-line);transition:width var(--dur-2) var(--ease)} .sheen:hover::after{width:100%} /* .pressable — para lo que es clicable de verdad. */ .pressable{cursor:pointer;user-select:none;transition:transform var(--dur-1) var(--ease)} .pressable:active{transform:scale(.985)} /* .zoom-in — la imagen respira dentro de su marco. */ .zoom-in{overflow:hidden} .zoom-in img{transition:transform .8s var(--ease)} .zoom-in:hover img{transform:scale(1.05)} /* .reveal ya existe arriba. .reveal-stagger escalona a los hijos. */ .reveal-stagger>*{opacity:0;transform:translateY(18px); transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)} .reveal-stagger.in>*{opacity:1;transform:none} .reveal-stagger.in>*:nth-child(1){transition-delay:.02s} .reveal-stagger.in>*:nth-child(2){transition-delay:.08s} .reveal-stagger.in>*:nth-child(3){transition-delay:.14s} .reveal-stagger.in>*:nth-child(4){transition-delay:.20s} .reveal-stagger.in>*:nth-child(5){transition-delay:.26s} .reveal-stagger.in>*:nth-child(6){transition-delay:.32s} .reveal-stagger.in>*:nth-child(n+7){transition-delay:.38s} /* ═══ 4 · ACORDEÓN — la respuesta al muro de texto ═══════════════════════════ Regla: si un bloque pasa de ~60 palabras, se pliega. Se usa sobre
, así que funciona sin JavaScript y es accesible por teclado de fábrica. */ .ftc-acc{border:1px solid var(--line-dark);border-radius:var(--r-tile); background:var(--surface-card);overflow:hidden;transition:border-color var(--dur-1)} .ftc-acc+.ftc-acc{margin-top:8px} .ftc-acc[open]{border-color:rgba(63,85,247,.38)} .ftc-acc:hover{border-color:var(--line-dark-2)} :root[data-theme="light"] .ftc-acc{border-color:var(--line)} :root[data-theme="light"] .ftc-acc:hover{border-color:var(--line-2)} .ftc-acc>summary{ list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:12px; font-weight:600;font-size:15px;letter-spacing:var(--track-title-2); transition:background var(--dur-1); } .ftc-acc>summary::-webkit-details-marker{display:none} .ftc-acc>summary:hover{background:rgba(63,85,247,.07)} .ftc-acc>summary::after{ content:"";margin-left:auto;flex:none;width:9px;height:9px; border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55; transition:transform var(--dur-1) var(--ease),opacity var(--dur-1); } .ftc-acc[open]>summary::after{transform:rotate(-135deg) translateY(-2px);opacity:.9} .ftc-acc__body{padding:0 16px 16px;font-size:14.5px;line-height:1.65;color:var(--ink-2)} :root:not([data-theme="light"]) .ftc-acc__body{color:var(--on-dark-2)} .ftc-acc__k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:var(--track-lab); text-transform:uppercase;color:var(--accent-ink);flex:none} /* ═══ 5 · TABLA DE DATOS ═════════════════════════════════════════════════════ No existía en el contrato, así que Prensa, Embudo y ROI escribieron tres. */ .ftc-tbl-wrap{overflow-x:auto;border:1px solid var(--line-dark);border-radius:var(--r-card)} :root[data-theme="light"] .ftc-tbl-wrap{border-color:var(--line)} .ftc-tbl{width:100%;border-collapse:collapse;font-size:14px} .ftc-tbl th{ font-family:var(--font-mono);font-size:11.5px;font-weight:600; letter-spacing:var(--track-lab);text-transform:uppercase; color:var(--ink-2);text-align:left;padding:12px 14px;white-space:nowrap; border-bottom:1px solid var(--line-dark);background:var(--surface-card); position:sticky;top:0;z-index:1; } :root:not([data-theme="light"]) .ftc-tbl th{color:var(--on-dark-3)} :root[data-theme="light"] .ftc-tbl th{border-bottom-color:var(--line)} .ftc-tbl td{padding:12px 14px;border-bottom:1px solid var(--line-dark);vertical-align:top} :root[data-theme="light"] .ftc-tbl td{border-bottom-color:var(--line)} .ftc-tbl tbody tr{transition:background var(--dur-1)} .ftc-tbl tbody tr:hover{background:rgba(63,85,247,.07)} .ftc-tbl tbody tr:last-child td{border-bottom:0} .ftc-tbl .num{text-align:right;font-variant-numeric:tabular-nums} .ftc-tbl caption{caption-side:bottom;padding:10px 14px;font-size:12px; color:var(--ink-3);text-align:left} /* ═══ 6 · SUB-NAV DE CAPÍTULOS ═══════════════════════════════════════════════ Navegación interna de un dashboard. Había tres versiones distintas; esta es la de Prensa/Mapa (chips píldora), que es la que rima con el nav del sitio. */ .ftc-chapters{ position:sticky;top:var(--nav-h);z-index:40;display:flex;gap:6px;flex-wrap:wrap; padding:12px 0;margin-bottom:8px;background:var(--nav-bg); backdrop-filter:blur(18px) saturate(1.2); } .ftc-chapter{ font-family:var(--font-mono);font-size:14px;font-weight:500; color:var(--ink-3);padding:8px 15px;border-radius:var(--r-chip); border:1px solid transparent;transition:var(--dur-1);cursor:pointer;white-space:nowrap; display:inline-flex;align-items:center;gap:7px;background:none; } :root:not([data-theme="light"]) .ftc-chapter{color:var(--on-dark-3)} .ftc-chapter i{font-style:normal;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--green-ink);opacity:.85} .ftc-chapter:hover{color:var(--ink-1);background:rgba(63,85,247,.09);border-color:var(--line-2)} :root:not([data-theme="light"]) .ftc-chapter:hover{color:var(--on-dark-1);border-color:var(--line-dark-2)} .ftc-chapter[aria-current="true"], :root:not([data-theme="light"]) .ftc-chapter[aria-current="true"]{background:var(--blue-electric);color:#fff;border-color:transparent} /* El :root:not(...) de arriba existe porque `:root:not([data-theme="light"]) .ftc-chapter` (tinta gris del ánimo luna) le ganaba en especificidad al activo: en modo luna el capítulo activo salía gris sobre azul, 2,28:1. Medido el 30-sep-2026. */ .ftc-chapter[aria-current="true"] i{color:#fff;opacity:.9} /* ═══ 7 · CALLOUT / NOTA DE HALLAZGO ═════════════════════════════════════════ */ .ftc-note{ border:1px solid var(--line-dark);border-left:3px solid var(--blue-electric); border-radius:var(--r-tile);padding:15px 18px;background:var(--surface-card); font-size:14.5px;line-height:1.65;color:var(--ink-2); } :root:not([data-theme="light"]) .ftc-note{color:var(--on-dark-2)} :root[data-theme="light"] .ftc-note{border-color:var(--line);border-left-color:var(--blue-electric)} .ftc-note b,.ftc-note strong{color:var(--ink-1);font-weight:700} :root:not([data-theme="light"]) .ftc-note b, :root:not([data-theme="light"]) .ftc-note strong{color:var(--on-dark-1)} .ftc-note--ok{border-left-color:var(--green-ink)} .ftc-note--warn{border-left-color:var(--warn-ink)} .ftc-note--alert{border-left-color:var(--alert-ink)} /* ═══ 8 · BADGES DE ESTADO ═══════════════════════════════════════════════════ El semáforo estaba hardcodeado 3 veces solo en el ROI. Acá una vez, con pares de color verificados en los dos temas. */ .badge{ font-family:var(--font-mono);font-size:12px;font-weight:600; letter-spacing:.02em;padding:4px 10px;border-radius:var(--r-chip); display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;white-space:nowrap; } .badge--ok{color:#5FE07E;background:rgba(39,213,69,.13);border-color:rgba(39,213,69,.30)} .badge--warn{color:#F0C465;background:rgba(240,196,101,.13);border-color:rgba(240,196,101,.30)} .badge--alert{color:#F19B9B;background:rgba(228,96,122,.14);border-color:rgba(228,96,122,.32)} .badge--info{color:#93A1FF;background:rgba(63,85,247,.15);border-color:rgba(63,85,247,.34)} :root[data-theme="light"] .badge--ok{color:#0A7A2E;background:#E3F8E8;border-color:rgba(10,122,46,.22)} :root[data-theme="light"] .badge--warn{color:#7A5C00;background:#FDF3D6;border-color:rgba(122,92,0,.22)} :root[data-theme="light"] .badge--alert{color:#A82A44;background:#FBE1E1;border-color:rgba(168,42,68,.22)} :root[data-theme="light"] .badge--info{color:#2C3FC9;background:#E4E8FE;border-color:rgba(44,63,201,.22)} /* ═══ 9 · DCARD — la tarjeta de dato ═════════════════════════════════════════ Ascendida de Prensa, que tenía la mejor versión: kicker + título + gráfico + fuente, con lift al hover. */ .dcard{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:18px 20px;display:flex;flex-direction:column;gap:10px; } :root:not([data-theme="light"]) .dcard{background:var(--surface-card);border-color:var(--line-dark)} .dcard__k{font-family:var(--font-mono);font-size:11.5px;font-weight:600; letter-spacing:var(--track-lab);color:var(--accent-ink);display:flex;gap:8px;align-items:center} .dcard__title{font-family:var(--font-display);font-weight:700;font-size:18px; letter-spacing:var(--track-title-2);line-height:1.25;color:var(--ink-1)} :root:not([data-theme="light"]) .dcard__title{color:var(--on-dark-1)} .dcard__sub{font-size:14px;line-height:1.55;color:var(--ink-2)} :root:not([data-theme="light"]) .dcard__sub{color:var(--on-dark-2)} .dcard__src{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);margin-top:auto;padding-top:6px} :root:not([data-theme="light"]) .dcard__src{color:var(--on-dark-4)} /* ═══ 10 · GRILLA ════════════════════════════════════════════════════════════ Un solo sistema. Había dos clases .grid distintas en el mismo sitio. */ .ftc-grid{display:grid;gap:16px} .ftc-grid--2{grid-template-columns:repeat(2,1fr)} .ftc-grid--3{grid-template-columns:repeat(3,1fr)} .ftc-grid--4{grid-template-columns:repeat(4,1fr)} .ftc-grid--auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} @media(max-width:1080px){ .ftc-grid--4{grid-template-columns:repeat(2,1fr)} .ftc-grid--3{grid-template-columns:repeat(2,1fr)} } @media(max-width:680px){ .ftc-grid--2,.ftc-grid--3,.ftc-grid--4{grid-template-columns:1fr} } /* ═══ 11 · ESTADO VACÍO ══════════════════════════════════════════════════════ */ .ftc-empty{padding:36px 20px;text-align:center;color:var(--ink-3);font-size:14px} :root:not([data-theme="light"]) .ftc-empty{color:var(--on-dark-3)} /* ═══ 12 · GATE DE LOGIN ═════════════════════════════════════════════════════ Estaba copiado verbatim en Prensa y Regulatorio, con el SVG de Google duplicado en dos archivos. Una sola vez, acá. */ .ftc-gate{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:40px 20px} .ftc-gate__card{ max-width:440px;width:100%;text-align:center;padding:38px 34px; background:var(--surface-card);border:1px solid var(--line-dark);border-radius:var(--r-panel); } :root[data-theme="light"] .ftc-gate__card{background:var(--card);border-color:var(--line); box-shadow:0 24px 60px -30px rgba(10,23,51,.28)} .ftc-gate__badge{font-family:var(--font-mono);font-size:11.5px;font-weight:600; letter-spacing:var(--track-lab);text-transform:uppercase;color:var(--green-ink)} .ftc-gate__title{font-family:var(--font-display);font-weight:900;font-size:26px; letter-spacing:var(--track-title-2);margin:12px 0 8px} .ftc-gate__txt{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:22px} :root:not([data-theme="light"]) .ftc-gate__txt{color:var(--on-dark-2)} .ftc-gate__btn{ display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:8px; background:#fff;color:#1F2430;border:1px solid #DFE3EC;font-weight:600;font-size:14px; transition:var(--dur-1); } .ftc-gate__btn:hover{box-shadow:0 10px 26px -12px rgba(10,23,51,.45);transform:translateY(-1px)} .ftc-gate__fine{font-size:12.5px;color:var(--ink-3);margin-top:18px} :root:not([data-theme="light"]) .ftc-gate__fine{color:var(--on-dark-3)} /* ═══ 13 · ACCESIBILIDAD DE MOVIMIENTO (refuerzo) ════════════════════════════ El bloque de arriba ya neutraliza transiciones; acá además se congelan los gestos de la capa de interacción para que nada "salte". */ @media(prefers-reduced-motion:reduce){ .lift:hover,.pressable:active,.ftc-gate__btn:hover{transform:none} .zoom-in:hover img{transform:none} .sheen::after{width:100%} .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important} } /* ═══════════════════════════════════════════════════════════════════════════ 14 · PÁGINAS DE CONSULTA · 30-sep-2026 · rehecho el 1-oct-2026 Nacieron con el Glosario de Pagos (/glosario), pero son genéricos: cualquier página que sea "buscar y leer" (glosario, directorio, FAQ, normativa) los usa tal cual. Solo tokens: todo sigue el tema sin una regla por ánimo. Revisión de Rodrigo del 1-oct-2026, con capturas del Glosario: · "se ve muy lento": la lista pintaba 179 tarjetas con 537 SVG inline y un canvas de rayos animado para siempre. Ahora cada fila son ~10 nodos, sin SVG propio (el cuadradito de color es CSS), cada letra es un grupo con content-visibility:auto y el hero no trae fondos decorativos. · "un solo término por fila, tipo lista, densa": .ftc-row, filas separadas por un filete de 1px, categoría en la misma línea que el término, ejemplo en un popover que no ocupa espacio. · "colores de FinteChile": luna en navy (no índigo), cero halos y sombras difusas, verde de marca solo como marca (filete del :target, , cuadrado del popover). Esquinas: 2-oct-2026, Rodrigo corrige "quiero que sea más redondeado, como los bordes del CFF, sin perder la esencia". Los valores salen MEDIDOS del CFF27 (cff27/index.html, sección Sé parte): tarjeta de opción .sep__o radio 10px + borde 1px + barra de acento de 4px (radio 2px); panel .sep__vis radio 12px, borde 1px, fondo suave. Píldoras solo donde el CFF las usa (botones, pestañas, chips). ═══════════════════════════════════════════════════════════════════════════ */ /* Contenedor de ancho de página. Mismo criterio que .ftc-foot: el gutter va DENTRO de --maxw, así el contenido cae en la misma columna que el footer. */ .ftc-wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)} /* ── Hero genérico: plano. Copia a la izquierda y una pieza a la derecha (ficha, cifra). Sigue el tema. Sin degradé desde el 1-oct-2026. ── */ .ftc-hero{position:relative;overflow:hidden; padding:calc(var(--nav-h) + clamp(44px,7vh,88px)) var(--gutter) clamp(44px,6vh,72px); background:var(--navy); transition:background var(--dur-2) var(--ease)} /* 16-oct-2026: sin filete abajo ("no me gustan las líneas"); el hero se separa por aire. */ /* .ftc-hero__fx / .ftc-hero__dots: fondos decorativos (rayos, rejilla). El Glosario ya no los trae (costaban 34 tareas largas); se conservan para las páginas que sí. */ .ftc-hero__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85} :root[data-theme="light"] .ftc-hero__fx{opacity:.35} .ftc-hero__dots{position:absolute;inset:0;pointer-events:none;opacity:.45; background-image:radial-gradient(var(--line-dark) 1px,transparent 1px);background-size:28px 28px} .ftc-hero__in{position:relative;z-index:2;max-width:calc(var(--maxw) - 2 * var(--gutter));margin:0 auto; display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center} /* sin eyebrow el título abre el hero (2-oct-2026, Rodrigo lo sacó del Glosario); si la página trae uno, el título guarda su aire debajo */ .ftc-hero__title{margin-top:0;color:var(--on-dark-1)} .eyebrow+.ftc-hero__title{margin-top:18px} /* la palabra destacada del título va en verde legible (--green-ink cambia por tema) */ .ftc-hero__title em{font-style:normal;color:var(--green-ink)} .ftc-hero__lead{margin-top:20px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;font-weight:400; color:var(--on-dark-2);max-width:54ch} .ftc-hero__lead strong{font-weight:600;color:var(--on-dark-1)} .ftc-hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center} .ftc-hero__stats{margin-top:26px;display:flex;gap:10px 22px;flex-wrap:wrap;align-items:baseline} .ftc-stat{display:inline-flex;align-items:baseline;gap:8px} .ftc-stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.4vw,32px); letter-spacing:var(--track-title-2);line-height:1;color:var(--on-dark-1);font-variant-numeric:tabular-nums} .ftc-stat span{font-size:15px;color:var(--on-dark-3)} @media(max-width:960px){.ftc-hero__in{grid-template-columns:1fr}} /* ── Ícono de categoría (set compartido, vía ), PINTADO con el color de su categoría: hereda --cat del ancestro con data-c. Es un objeto gráfico (trazo de 15px), nunca texto: tokens --cat-N del contrato, 3:1 en los dos ánimos. El texto de la etiqueta queda en gris; solo el ícono lleva color. (2-oct-2026: reemplaza al cuadradito de color y a la barra de acento de las facetas, a pedido de Rodrigo.) ── */ /* .ftc-ico.ftc-ico--cat: la doble clase le gana a .ftc-ico (18px), que viene después */ .ftc-ico.ftc-ico--cat{width:15px;height:15px;color:var(--cat,var(--on-dark-3))} [data-c="1"]{--cat:var(--cat-1)}[data-c="2"]{--cat:var(--cat-2)}[data-c="3"]{--cat:var(--cat-3)} [data-c="4"]{--cat:var(--cat-4)}[data-c="5"]{--cat:var(--cat-5)}[data-c="6"]{--cat:var(--cat-6)} [data-c="7"]{--cat:var(--cat-7)}[data-c="8"]{--cat:var(--cat-8)}[data-c="9"]{--cat:var(--cat-9)} [data-c="10"]{--cat:var(--cat-10)} /* ── Palabra del día: composición tipográfica ABIERTA sobre el fondo del hero, sin caja (Rodrigo, 2-oct-2026: "no quiero que se vea un cuadrado, no quiero que tenga un cuadrado de fondo"): ni fondo, ni borde, ni barra de acento. Se separa del bloque izquierdo con espacio y un filete fino de 1px (vertical a la izquierda en escritorio; horizontal arriba cuando el hero se apila). Línea pequeña "Palabra del día · 1 oct", ícono de la categoría en su color + nombre, término grande y definición corta. Sin enlace: "Ver la definición completa" se quitó en la reunión con Val del 5-oct-2026 (llevaba al buscador y no a la palabra). El HTML trae un respaldo escrito; el JS lo reemplaza pieza a pieza, con la misma estructura. ── */ .ftc-wotd{margin:0;display:flex;flex-direction:column;min-height:260px; padding:6px 0 6px clamp(24px,3vw,40px);border-left:1px solid var(--line-dark-2)} .ftc-wotd__k{font-size:14px;font-weight:600;color:var(--on-dark-3)} .ftc-wotd__k time{font-weight:500;font-variant-numeric:tabular-nums} .ftc-wotd__k time:not(:empty)::before{content:" · "} .ftc-wotd__cat{margin-top:22px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--on-dark-3)} .ftc-wotd__w{margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:clamp(26px,2.8vw,38px); letter-spacing:var(--track-title);line-height:1.1;color:var(--on-dark-1);overflow-wrap:anywhere;text-wrap:balance} /* el término más largo mide 70 caracteres ("CBDC (Central Bank Digital Currency / Moneda Digital de Banco Central)"); de 40 en adelante baja un escalón para no comerse el hero */ .ftc-wotd[data-largo] .ftc-wotd__w{font-size:clamp(21px,1.9vw,27px);line-height:1.2} .ftc-wotd__d{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--on-dark-2);max-width:48ch} @media(max-width:960px){.ftc-wotd{min-height:0;padding:22px 0 0;border-left:0;border-top:1px solid var(--line-dark-2)}} /* ── Barra de herramientas fija bajo el nav (buscador + filtros). Opaca: el backdrop-filter se pagaba en cada scroll. ── */ .ftc-toolbar{position:sticky;top:var(--nav-h);z-index:40;background:var(--navy); border-bottom:1px solid var(--line-dark);padding-top:10px;padding-bottom:8px; transition:background var(--dur-2) var(--ease)} /* ── Buscador: campo con lupa y botón de borrar. Foco con borde sólido. ── */ .ftc-search{position:relative;display:flex;align-items:center} .ftc-search__icon{position:absolute;left:14px;width:18px;height:18px;color:var(--on-dark-3);pointer-events:none} .ftc-search__input{width:100%;height:44px;padding:0 44px;border-radius:10px;appearance:none; border:1px solid var(--line-dark-2);background:var(--surface-card);color:var(--on-dark-1); font-family:var(--font-body);font-size:16px;outline:none;transition:border-color var(--dur-1)} .ftc-search__input::placeholder{color:var(--on-dark-4);opacity:1} .ftc-search__input::-webkit-search-cancel-button{display:none} .ftc-search__input:hover{border-color:var(--on-dark-4)} .ftc-search__input:focus,.ftc-search__input:focus-visible{outline:none;border-color:var(--outline,var(--on-dark-1)); box-shadow:inset 0 0 0 1px var(--outline,var(--on-dark-1))} .ftc-search__clear{position:absolute;right:4px;width:36px;height:36px;border:0;border-radius:8px; background:none;color:var(--on-dark-3);display:grid;place-items:center;transition:color var(--dur-1),background var(--dur-1)} .ftc-search__clear:hover{color:var(--on-dark-1);background:var(--surface-card)} .ftc-search__clear svg{width:18px;height:18px} .ftc-search__clear[hidden]{display:none} /* ── Índice alfabético: letras con contenido son enlace; las vacías quedan visibles pero inertes. Activo/hover invertido (blanco↔navy). ── */ .ftc-alpha{display:flex;flex-wrap:wrap;gap:2px;margin-top:8px;list-style:none} .ftc-alpha a,.ftc-alpha span{font-family:var(--font-body);font-size:14px;min-width:30px;height:28px; padding:0 6px;border-radius:8px;display:grid;place-items:center} .ftc-alpha a{font-weight:700;color:var(--on-dark-1);transition:background var(--dur-1),color var(--dur-1)} .ftc-alpha a:hover{background:var(--on-dark-1);color:var(--navy)} .ftc-alpha span{font-weight:400;color:var(--on-dark-4)} @media(max-width:820px){.ftc-alpha{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .ftc-alpha::-webkit-scrollbar{display:none}} /* En teléfono el índice cede su espacio: el buscador y los chips alcanzan. */ @media(max-width:767px){.ftc-alpha{display:none}} /* ── Fila de chips de filtro (móvil). Reusa .ftc-chapter (píldora, como en el CFF27) con borde; aria-pressed marca el activo. El :root iguala la especificidad de las reglas por ánimo de .ftc-chapter (bloque 6). ── */ .ftc-chiprow{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none} .ftc-chiprow::-webkit-scrollbar{display:none} :root .ftc-chiprow .ftc-chapter{font-family:var(--font-body);font-size:14px;font-weight:500; padding:7px 13px;border:1px solid var(--line-dark-2);color:var(--on-dark-2)} :root .ftc-chiprow .ftc-chapter:hover{background:var(--surface-card);color:var(--on-dark-1);border-color:var(--on-dark-4)} :root .ftc-chiprow .ftc-chapter[aria-pressed="true"]{background:var(--on-dark-1);color:var(--navy);border-color:var(--on-dark-1)} /* ── Layout de consulta: filtros a la izquierda, resultados a la derecha. ── */ .ftc-split{display:grid;grid-template-columns:228px minmax(0,1fr);gap:clamp(24px,3vw,40px); padding-top:18px;padding-bottom:clamp(40px,7vh,80px)} /* La columna de filtros se queda fija al bajar, bajo el nav y la barra del buscador (--toolbar-h la mide el JS de la página). Si la lista es más alta que la ventana, scrollea sola. El padding/margen de 5px es el aire del anillo de foco (2px + 3px de offset), que el overflow recortaría. Solo escritorio: bajo 1080px la columna no se muestra y los chips del toolbar la reemplazan. En el marco de alto automático (/…-embed) position:sticky no opera; ahí la columna la mueve la capa de embebido con --aside-dy (ver api/_glosario-embed.js). */ .ftc-split__aside{--aside-top:calc(var(--nav-h) + var(--toolbar-h,0px) + 16px); position:sticky;top:var(--aside-top);align-self:start; max-height:calc(100vh - var(--aside-top) - 16px);overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin;padding:5px;margin:-5px} @media(max-width:1080px){.ftc-split{grid-template-columns:minmax(0,1fr)}.ftc-split__aside{display:none}} @media(min-width:1081px){.ftc-chiprow{display:none}} /* ── Facetas: tarjetas de opción como las de "Sé parte" del CFF27 (.sep__o): radio 10px, borde 1px, fondo suave, ícono de la categoría en su color, 7px entre tarjetas. Activa: borde del color y fondo color-mix al 10%; "Todas" activa, en navy/blanco invertido. ── */ .ftc-facets{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:7px} .ftc-facet{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px; padding:8px 12px 8px 11px;border:1px solid var(--line-dark);border-radius:10px;background:var(--surface-card);text-align:left; font-family:var(--font-body);font-size:14px;line-height:1.3;color:var(--on-dark-2); transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)} :root[data-theme="light"] .ftc-facet{background:var(--card);border-color:var(--line)} .ftc-facet:hover{border-color:var(--cat,var(--on-dark-3));color:var(--on-dark-1)} .ftc-facet__l{display:flex;align-items:center;gap:10px;min-width:0} .ftc-facet .ftc-ico--cat{width:16px;height:16px} .ftc-facet__n{font-size:14px;font-weight:500;color:var(--on-dark-4);font-variant-numeric:tabular-nums} .ftc-facet[aria-pressed="true"]{border-color:var(--cat,var(--on-dark-1));color:var(--on-dark-1); background:color-mix(in srgb,var(--cat,var(--on-dark-1)) 10%,transparent)} .ftc-facet[aria-pressed="true"] .ftc-facet__n{color:var(--on-dark-1)} /* "Todas" no tiene color de categoría: activa va invertida (navy en sol, blanco en luna) */ .ftc-facet:not([data-c])[aria-pressed="true"]{background:var(--on-dark-1);color:var(--navy);border-color:var(--on-dark-1)} .ftc-facet:not([data-c])[aria-pressed="true"] .ftc-facet__n{color:var(--navy)} /* ── Resumen del resultado ("179 términos en X · Ver todos"). ── */ .ftc-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:4px; font-size:14px;color:var(--on-dark-3)} .ftc-count strong{font-weight:700;color:var(--on-dark-1)} .ftc-link{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--on-dark-1); text-decoration:underline;text-underline-offset:4px} .ftc-link:hover{color:var(--green-ink)} /* ── Grupo con clave (letra, año, capítulo): un panel como el visualizador del CFF27 (.sep__vis: radio 12px, borde 1px, fondo suave) con la clave de cabecera y las filas adentro, separadas por un filete de 1px. content-visibility:auto deja fuera del layout los grupos que no están en pantalla: filtrar o escribir en el buscador deja de recalcular las 179 filas de golpe. El tamaño intrínseco es SOLO de alto ("none" para el ancho): con "auto 480px" el 480 valía también como ancho mínimo y en un teléfono la columna se estiraba a 500px. ── */ .ftc-group{content-visibility:auto;contain-intrinsic-size:none auto 480px; border:1px solid var(--line-dark);border-radius:12px;background:var(--surface-card);overflow:hidden} :root[data-theme="light"] .ftc-group{background:var(--card);border-color:var(--line)} .ftc-group+.ftc-group{margin-top:12px} /* al llegar por el índice (#letra-A) la barra fija no tapa la letra; gana a section[id] */ .ftc-group[id]{scroll-margin-top:calc(var(--nav-h) + var(--toolbar-h,0px) + 8px)} /* La cabecera de letra se distingue de las filas, pero sutil (Rodrigo, 2-oct-2026): la letra en tinta principal (casi blanco en luna, navy en sol; 17,75:1) y la franja con un fondo apenas distinto, un 5% de la tinta sobre el panel. Sin degradé ni barra de color. */ .ftc-group__k{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--line-dark); background:color-mix(in srgb,var(--on-dark-1) 5%,transparent); font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:0;line-height:1;color:var(--on-dark-1)} .ftc-group[hidden],.ftc-group__list>[hidden]{display:none} .ftc-group__list{list-style:none} /* ── Fila de consulta: término + categoría en la misma línea, definición debajo, acciones a la derecha. Un filete de 1px entre filas, dentro del panel. Se marca con un filete verde a la izquierda al llegar por su enlace (#id). ── */ .ftc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:start; padding:11px 16px 12px;border-top:1px solid var(--line-dark); scroll-margin-top:calc(var(--nav-h) + var(--toolbar-h,0px) + 12px);transition:background var(--dur-1)} .ftc-group__list>li:first-child{border-top:0} .ftc-row:hover{background:var(--surface-card)} .ftc-row:target{box-shadow:inset 3px 0 0 var(--green);background:var(--surface-card)} .ftc-row__t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px; font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:var(--track-title-2); line-height:1.3;color:var(--on-dark-1)} .ftc-row__cat{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body); font-weight:500;font-size:14px;letter-spacing:0;color:var(--on-dark-3)} .ftc-row__d{margin-top:3px;font-size:15px;line-height:1.5;color:var(--on-dark-2);max-width:100ch} .ftc-row__acts{display:flex;align-items:center;gap:4px;margin-top:-3px} /* Disparador del ejemplo: un botón de verdad (borde, radio 8px, ampolleta), activo mientras el popover está abierto. Si la búsqueda coincide dentro del ejemplo, se marca con un filete verde. */ .ftc-row__ex{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px 0 9px; border:1px solid var(--line-dark-2);border-radius:8px;background:none;cursor:pointer; font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--on-dark-2); transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)} .ftc-row__ex .ftc-ico{width:16px;height:16px;color:var(--on-dark-3)} .ftc-row__ex:hover{color:var(--on-dark-1);border-color:var(--on-dark-3);background:var(--surface-card)} .ftc-row__ex[aria-expanded="true"]{color:var(--on-dark-1);border-color:var(--on-dark-1);background:var(--surface-card)} .ftc-row__ex[aria-expanded="true"] .ftc-ico,.ftc-row__ex:hover .ftc-ico{color:var(--green-ink)} .ftc-row__ex[data-hit]{color:var(--on-dark-1);border-color:var(--green)} @media(max-width:560px){.ftc-row{grid-template-columns:1fr}.ftc-row__acts{margin:4px 0 0}} /* coincidencia de búsqueda: verde de marca como fondo, tinta principal */ .ftc-row mark,.ftc-pop mark,.ftc-mark{background:var(--mark-bg);color:var(--on-dark-1);padding:0 1px;border-radius:2px} /* ── Ícono del set compartido (assets/vendor/ftc-icons.js): lineal, un solo color heredado. El tamaño lo ajusta cada componente. ── */ .ftc-ico{width:18px;height:18px;flex:none;stroke-width:1.8;display:block} /* ── Popover: contenido secundario que no debe alargar la fila (un ejemplo, una nota). Anclado al botón que lo abre: debajo, alineado a su borde derecho, y volteado hacia arriba si no cabe (data-lado="arriba"); en teléfono, a todo el ancho bajo la fila. Una flecha (--ax, en px desde el borde izquierdo) lo conecta con el botón. Radio 12px como el panel del CFF27, borde de 1px con tinta secundaria para separarse del fondo sin sombra, botón de cerrar. Ancho de lectura: 380px. ── */ .ftc-pop{position:fixed;left:0;top:0;z-index:75;width:min(380px,calc(100vw - 32px)); padding:12px 40px 14px 16px;border-radius:12px;background:var(--navy-2);color:var(--on-dark-2); border:1px solid var(--on-dark-3);font-size:14.5px;line-height:1.55; opacity:0;pointer-events:none;transition:opacity .12s var(--ease)} :root[data-theme="light"] .ftc-pop{background:var(--card)} .ftc-pop[data-open]{opacity:1;pointer-events:auto} .ftc-pop[hidden]{display:none} .ftc-pop:focus{outline:none} /* la flecha: un cuadrado girado con el mismo fondo y borde, en el lado que mira al botón */ .ftc-pop::before{content:"";position:absolute;left:calc(var(--ax,24px) - 7px);width:13px;height:13px; background:inherit;border:1px solid var(--on-dark-3);transform:rotate(45deg)} .ftc-pop[data-lado="abajo"]::before{top:-7.5px;border-right:0;border-bottom:0} .ftc-pop[data-lado="arriba"]::before{bottom:-7.5px;border-left:0;border-top:0} .ftc-pop__k{display:flex;align-items:center;gap:8px;margin-bottom:6px; font-weight:700;font-size:14px;color:var(--on-dark-1)} .ftc-pop__k::before{content:"";width:10px;height:10px;flex:none;border-radius:2px;background:var(--green)} .ftc-pop__x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:1px solid transparent;border-radius:8px; background:none;color:var(--on-dark-3);display:grid;place-items:center;transition:color var(--dur-1),border-color var(--dur-1)} .ftc-pop__x:hover{color:var(--on-dark-1);border-color:var(--line-dark-2)} .ftc-pop__x svg{width:16px;height:16px} /* ── Banda de cierre: titular + llamado a la acción. Marco de 1px con filete verde a la izquierda; sin fondo ni sombra. ── */ .ftc-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,380px); gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(22px,2.6vw,30px) clamp(22px,3vw,36px); border:1px solid var(--line-dark-2);border-left:3px solid var(--green);border-radius:12px;background:var(--surface-card)} :root[data-theme="light"] .ftc-band{background:var(--card);border-color:var(--line-2);border-left-color:var(--green)} .ftc-band .t-lead{margin-top:10px;font-size:15.5px} .ftc-band__side{display:flex;flex-direction:column;align-items:flex-start;gap:12px; padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--line-dark); font-size:15px;line-height:1.55;color:var(--on-dark-2)} .ftc-band__side a:not(.btn){color:var(--on-dark-1);font-weight:600;text-decoration:underline;text-underline-offset:4px} .ftc-band__side a:not(.btn):hover{color:var(--green-ink)} @media(max-width:860px){.ftc-band{grid-template-columns:1fr} .ftc-band__side{padding-left:0;border-left:0;padding-top:18px;border-top:1px solid var(--line-dark)}} /* Última sección antes del footer: aire de cierre. */ .ftc-end{padding-bottom:clamp(56px,9vh,110px)} /* Varios párrafos en la marca del footer (descriptor + aviso legal). */ .ftc-foot__brand p+p{margin-top:12px} /* ── Volver arriba: aparece al bajar, se esconde arriba. Invertido. ── */ .ftc-totop{position:fixed;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:55; display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--on-dark-1);border-radius:10px; background:var(--on-dark-1);color:var(--navy);font-family:var(--font-body);font-size:14px;font-weight:600; opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),background var(--dur-1)} .ftc-totop[data-visible]{opacity:1;transform:none;pointer-events:auto} .ftc-totop:hover{background:var(--on-dark-2);border-color:var(--on-dark-2)} .ftc-totop svg{width:16px;height:16px} /* ── Aviso efímero ("Enlace copiado") para lectores de pantalla y vista. ── */ .ftc-toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,16px);opacity:0; padding:11px 16px;border-radius:10px;background:var(--on-dark-1);color:var(--navy); font-size:14px;font-weight:500;pointer-events:none;transition:opacity var(--dur-1),transform var(--dur-1) var(--ease)} .ftc-toast[data-visible]{opacity:1;transform:translate(-50%,0)} @media(prefers-reduced-motion:reduce){ .ftc-totop,.ftc-toast{transform:none} } /* ═══════════════════════════════════════════════════════════════════════════ 16 · FAMILIA TIPOGRÁFICA ALTERNATIVA (piloto) · 1-oct-2026 Rodrigo: "todos los textos deben estar en Montserrat, la letra que usas es muy IA". El estándar del contrato sigue siendo Roboto (Brandbook); cambiarlo acá en :root afectaría a las 12 pestañas de golpe. Una página prueba con y carga la familia desde Google Fonts en su (400/500/600/700, display=swap). Al aprobarse para todo el sitio: mover la familia a --font-display/--font-body/--font-mono de :root y al @import de la cabecera de este archivo, y revisar tamaños: Montserrat es más ancha y de ojo más alto que Roboto. ═══════════════════════════════════════════════════════════════════════════ */ html[data-font="montserrat"]{ --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ 17 · FORMULARIO EN PANEL · 2-oct-2026 Nació con "Sugerir un término" del Glosario de Pagos, que reemplazó tres mailto:hola@ por un formulario que registra de verdad. Es genérico: cualquier página que pida datos al visitante (sugerir, inscribirse, pedir información) lo usa tal cual, sin CSS propio. El Marketplace y el CFF27 tienen formularios escritos antes de este bloque; cuando se toquen, migran acá. Medidas del CFF27, como el resto del bloque 14: panel radio 12px + borde 1px + fondo suave (el .sep__vis); campos radio 10px y 44px de alto (los mismos del buscador .ftc-search__input); botones del contrato (.btn, 8px). Sin franja lateral, sin sombra, sin glow. El error se marca con borde y texto --alert-ink (6,24:1 sobre blanco, 7,9:1 sobre navy), nunca solo con color: el mensaje dice qué falta. Marcado: