/* =========================================================================== FinBroker — sistema visual =========================================================================== CLARO Y OSCURO SIN DUPLICAR NADA: todo el color pasa por variables. El tema se cambia poniendo `data-tema` en y ninguna regla de más abajo sabe en qué tema está. Eso evita el problema clásico de tener dos hojas que se desincronizan. EL MOVIMIENTO ES PARTE DE LA MARCA, PERO NO ES OBLIGATORIO: todas las animaciones respetan `prefers-reduced-motion`. Alguien con sensibilidad al movimiento ve el mismo sitio, quieto. =========================================================================== */ :root { --oro: #DBA43C; --oro-claro: #EFC98A; --azul: #1B3F8F; --azul-claro: #3A67C4; --radio: 14px; --radio-sm: 9px; --ancho: 1180px; --curva: cubic-bezier(.22, 1, .36, 1); } :root, [data-tema="claro"] { --fondo: #FBFAF8; --fondo-2: #FFFFFF; --fondo-3: #F2EFE9; --texto: #0B1220; --texto-2: #4A5568; --texto-3: #8A94A6; --borde: #E4DFD6; --sombra: 0 1px 2px rgba(11,18,32,.05), 0 12px 32px -12px rgba(11,18,32,.12); --verde: #0F8A55; --ambar: #B4780F; --rojo: #C0392B; } [data-tema="oscuro"] { --fondo: #070C18; --fondo-2: #0D1424; --fondo-3: #131B2E; --texto: #F4F1EC; --texto-2: #A8B0C0; --texto-3: #6B7488; --borde: #1E2740; --sombra: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -16px rgba(0,0,0,.6); --verde: #3DD68C; --ambar: #E8B04B; --rojo: #F1786B; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--fondo); color: var(--texto); font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* El cambio de tema se acompaña para que no sea un parpadeo brusco. */ transition: background-color .4s var(--curva), color .4s var(--curva); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; } /* ── Tipografía ────────────────────────────────────────────────────────── */ .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } h1, h2, h3 { line-height: 1.1; letter-spacing: -.03em; font-weight: 750; } h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); } h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); } h3 { font-size: 1.06rem; letter-spacing: -.015em; font-weight: 700; } .plomo { font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--texto-2); max-width: 62ch; } /* ── Barra superior ────────────────────────────────────────────────────── */ .barra { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fondo) 86%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; } .barra.pegada { border-bottom-color: var(--borde); } .barra-int { display: flex; align-items: center; gap: 20px; height: 66px; } .marca { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; letter-spacing: -.03em; } .marca svg { width: 32px; height: 32px; border-radius: 9px; } .nav-links { display: flex; gap: 26px; margin-left: 14px; } .nav-links a { font-size: 14px; color: var(--texto-2); position: relative; padding: 4px 0; transition: color .2s; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--oro); transition: width .3s var(--curva); } .nav-links a:hover { color: var(--texto); } .nav-links a:hover::after { width: 100%; } .barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; } .selector, .btn-icono { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--radio-sm); border: 1px solid var(--borde); background: var(--fondo-2); font-size: 12.5px; font-weight: 600; color: var(--texto-2); transition: border-color .2s, color .2s, transform .2s var(--curva); } .btn-icono { padding: 0; width: 34px; justify-content: center; } .selector:hover, .btn-icono:hover { border-color: var(--oro); color: var(--texto); } .btn-icono:active { transform: scale(.94); } /* Interruptor de idioma: tres estados visibles, no un desplegable escondido. */ .idiomas { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio-sm); overflow: hidden; background: var(--fondo-2); } .idiomas button { padding: 0 10px; height: 34px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--texto-3); transition: color .2s, background-color .2s; } .idiomas button[aria-pressed="true"] { background: var(--oro); color: #070C18; } .idiomas button:not([aria-pressed="true"]):hover { color: var(--texto); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: var(--radio-sm); font-size: 14px; font-weight: 700; letter-spacing: -.01em; transition: transform .25s var(--curva), box-shadow .25s var(--curva), background-color .2s; } .btn-oro { background: var(--oro); color: #070C18; } .btn-oro:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--oro); } .btn-linea { border: 1px solid var(--borde); color: var(--texto); } .btn-linea:hover { border-color: var(--oro); transform: translateY(-2px); } .btn-grande { height: 52px; padding: 0 28px; font-size: 15.5px; } .menu-movil { display: none; } /* ── Secciones ─────────────────────────────────────────────────────────── */ section { padding: clamp(64px, 9vw, 120px) 0; } .cabecera-sec { max-width: 720px; margin-bottom: clamp(34px, 5vw, 56px); } .cabecera-sec h2 { margin: 10px 0 14px; } /* ── Portada ───────────────────────────────────────────────────────────── */ .portada { padding-top: clamp(48px, 7vw, 84px); position: relative; overflow: hidden; } .portada::before { /* Un halo dorado muy tenue detrás del titular. Plano, sin degradado ruidoso. */ content: ''; position: absolute; top: -28%; left: 50%; transform: translateX(-50%); width: min(900px, 92vw); height: 620px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--oro) 16%, transparent) 0%, transparent 68%); pointer-events: none; z-index: 0; } .portada > * { position: relative; z-index: 1; } .portada h1 { margin: 16px 0 22px; } .portada .plomo { font-size: clamp(1.04rem, 1.8vw, 1.24rem); } .portada-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; } .portada-nota { margin-top: 22px; font-size: 12.5px; color: var(--texto-3); max-width: 54ch; } /* ── Banda de cifras ───────────────────────────────────────────────────── */ .cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-top: clamp(48px, 7vw, 80px); } .cifra { background: var(--fondo-2); padding: 24px 20px; } .cifra-n { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 780; letter-spacing: -.04em; color: var(--oro); } .cifra-t { font-size: 12.5px; color: var(--texto-2); margin-top: 5px; line-height: 1.45; } /* ── Tarjetas ──────────────────────────────────────────────────────────── */ .rejilla { display: grid; gap: 16px; } .r2 { grid-template-columns: repeat(2, 1fr); } .r3 { grid-template-columns: repeat(3, 1fr); } .r4 { grid-template-columns: repeat(4, 1fr); } .tarjeta { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px 24px; transition: transform .35s var(--curva), border-color .3s, box-shadow .35s var(--curva); } .tarjeta:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--oro) 55%, var(--borde)); box-shadow: var(--sombra); } .tarjeta h3 { margin-bottom: 7px; } .tarjeta p { font-size: 13.6px; color: var(--texto-2); line-height: 1.62; } .paso-n { width: 34px; height: 34px; border-radius: 10px; background: var(--oro); color: #070C18; display: grid; place-items: center; font-weight: 780; font-size: 14px; margin-bottom: 15px; } .motor { display: flex; gap: 13px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--borde); } .motor:last-child { border-bottom: none; } .motor-p { width: 7px; height: 7px; border-radius: 50%; background: var(--oro); margin-top: 8px; flex: none; } .motor h3 { font-size: 14.5px; } .motor p { font-size: 13.2px; color: var(--texto-2); margin-top: 2px; } /* ── Fuentes por país ──────────────────────────────────────────────────── */ .pais { display: flex; align-items: center; gap: 14px; padding: 17px 20px; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); transition: border-color .3s, transform .3s var(--curva); } .pais:hover { border-color: color-mix(in srgb, var(--oro) 55%, var(--borde)); transform: translateX(3px); } .pais-bandera { font-size: 26px; line-height: 1; } .pais-nombre { font-weight: 700; font-size: 14.5px; } .pais-aut { font-family: ui-monospace, 'SF Mono', monospace; font-size: 12px; color: var(--oro); font-weight: 700; } .pais-desc { font-size: 11.5px; color: var(--texto-3); } .pastilla { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .07em; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; } .p-si { background: color-mix(in srgb, var(--verde) 15%, transparent); color: var(--verde); } .p-pronto { background: var(--fondo-3); color: var(--texto-3); } /* ── Vistazo a la plataforma ───────────────────────────────────────────── */ .marco { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--fondo-2); box-shadow: var(--sombra); } .marco-barra { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: var(--fondo-3); border-bottom: 1px solid var(--borde); } .marco-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--borde); } .marco-url { margin-left: 10px; font-size: 11px; color: var(--texto-3); font-family: ui-monospace, monospace; } .marco-cuerpo { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; } .demo-nav { border-right: 1px solid var(--borde); padding: 16px 12px; } .demo-nav a { display: block; font-size: 12px; padding: 7px 10px; border-radius: 7px; color: var(--texto-2); } .demo-nav a.on { background: color-mix(in srgb, var(--oro) 14%, transparent); color: var(--oro); font-weight: 700; } .demo-cuerpo { padding: 22px; } .demo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; } .demo-rfc { font-family: ui-monospace, monospace; font-size: 11px; color: var(--oro); } .demo-emp { font-size: 18px; font-weight: 730; letter-spacing: -.02em; margin-top: 2px; } .demo-met { text-align: right; } .demo-met-l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); } .demo-met-v { font-family: ui-monospace, monospace; font-size: 19px; font-weight: 700; } .demo-fuerzas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; } .demo-f-t { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .demo-f-t.up { color: var(--verde); } .demo-f-t.down { color: var(--rojo); } .demo-fuerzas li { font-size: 12px; color: var(--texto-2); list-style: none; margin-bottom: 5px; line-height: 1.45; } .demo-cob { margin-top: 20px; } .demo-barra { display: flex; height: 6px; border-radius: 99px; overflow: hidden; margin: 8px 0; } .demo-leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 10.5px; color: var(--texto-3); } .demo-leyenda span { display: inline-flex; align-items: center; gap: 5px; } .demo-leyenda i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .demo-pie { font-size: 10px; color: var(--texto-3); text-align: center; padding: 9px; border-top: 1px solid var(--borde); } /* Medidor del score, dibujado en SVG para que escale sin perder nitidez. */ .medidor { position: relative; width: 128px; } .medidor-v { position: absolute; inset: auto 0 2px; text-align: center; font-size: 32px; font-weight: 780; letter-spacing: -.04em; color: var(--oro); } /* ── Cierre ────────────────────────────────────────────────────────────── */ .cierre { text-align: center; } .cierre .plomo { margin: 12px auto 28px; } /* ── Pie ───────────────────────────────────────────────────────────────── */ .pie { border-top: 1px solid var(--borde); padding: 54px 0 34px; background: var(--fondo-2); } .pie-rejilla { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; } .pie h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--texto-3); margin-bottom: 13px; font-weight: 700; } .pie ul { list-style: none; } .pie li { margin-bottom: 9px; } .pie li a { font-size: 13.4px; color: var(--texto-2); transition: color .2s; } .pie li a:hover { color: var(--oro); } .pie-legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--texto-3); } .pie-aviso { max-width: 60ch; line-height: 1.55; } /* ── Revelado al desplazar ─────────────────────────────────────────────── */ .revela { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); } .revela.visible { opacity: 1; transform: none; } /* ── Adaptable ─────────────────────────────────────────────────────────── */ @media (max-width: 980px) { .r4 { grid-template-columns: repeat(2, 1fr); } .r3 { grid-template-columns: 1fr; } .cifras { grid-template-columns: repeat(2, 1fr); } .pie-rejilla { grid-template-columns: 1fr 1fr; } .marco-cuerpo { grid-template-columns: 1fr; } .demo-nav { display: flex; gap: 4px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--borde); } .demo-nav a { white-space: nowrap; } } @media (max-width: 720px) { .nav-links { display: none; } .menu-movil { display: inline-flex; } .r2 { grid-template-columns: 1fr; } .demo-fuerzas { grid-template-columns: 1fr; } .pie-rejilla { grid-template-columns: 1fr; } } /* El movimiento es identidad, no requisito. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .revela { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ EL REPORTE Esta sección existe porque el sitio describía el producto en lugar de enseñarlo. Todo lo de aquí abajo es el reporte de verdad: el score, la aritmética que lleva al monto, los parámetros con su fórmula y su umbral. Nada es decorativo — si un elemento no se puede defender ante un comité de crédito, no debería estar. ═══════════════════════════════════════════════════════════════════════════ */ .panel { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(20px, 3vw, 32px); } .panel-t { font-size: clamp(1.05rem, 1.8vw, 1.28rem); font-weight: 740; letter-spacing: -.025em; } .panel-d { font-size: 13.5px; color: var(--texto-2); margin-top: 7px; line-height: 1.55; max-width: 58ch; } /* ── Score ─────────────────────────────────────────────────────────────── */ .score-rej { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; } .arco { position: relative; width: 100%; max-width: 320px; margin: 0 auto; } .arco svg { width: 100%; display: block; overflow: visible; } .arco-v { position: absolute; inset: auto 0 6%; text-align: center; font-size: clamp(2.6rem, 6vw, 3.9rem); font-weight: 800; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1; } .arco-e { position: absolute; inset: auto 0 -6%; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); } /* La escala completa, no solo dónde cayó: sin ver las bandas vecinas un 662 no significa nada. */ .escala { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 26px; } .escala-b { height: 7px; border-radius: 99px; background: var(--borde); position: relative; } .escala-b.on { background: var(--oro); } .escala-n { font-size: 10px; color: var(--texto-3); margin-top: 8px; letter-spacing: .02em; } .escala-b.on + .escala-n, .escala-col.on .escala-n { color: var(--oro); font-weight: 700; } .escala-col { text-align: center; } .escala-lim { display: flex; justify-content: space-between; font-size: 10px; color: var(--texto-3); margin-top: 12px; font-family: ui-monospace, monospace; } /* ── La aritmética ─────────────────────────────────────────────────────── */ .ledger { margin-top: 22px; border-top: 1px solid var(--borde); } .ledger-r { display: grid; grid-template-columns: 1fr auto; gap: 16px 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--borde); } .ledger-l { font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; } .ledger-f { grid-column: 1 / -1; font-size: 11.5px; color: var(--texto-3); margin-top: -9px; line-height: 1.5; } .ledger-v { font-family: ui-monospace, 'SF Mono', monospace; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* El renglón que responde la pregunta del broker se separa del resto. */ .ledger-r.total { border-bottom: none; background: color-mix(in srgb, var(--oro) 9%, transparent); margin: 8px -14px 0; padding: 17px 14px; border-radius: var(--radio-sm); } .ledger-r.total .ledger-v { font-size: 21px; color: var(--oro); } /* ── Tabla de parámetros ───────────────────────────────────────────────── */ .tabla-caja { overflow-x: auto; margin-top: 22px; -webkit-overflow-scrolling: touch; } .tabla-par { width: 100%; border-collapse: collapse; min-width: 720px; } .tabla-par th { text-align: left; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--texto-3); font-weight: 700; padding: 0 14px 11px 0; border-bottom: 1px solid var(--borde); } .tabla-par td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--borde); font-size: 13.5px; vertical-align: top; } .tabla-par tr:last-child td { border-bottom: none; } .td-par { font-weight: 620; letter-spacing: -.01em; } .td-for { font-size: 11.5px; color: var(--texto-3); font-family: ui-monospace, monospace; } .td-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .td-umb { font-family: ui-monospace, monospace; font-size: 12px; color: var(--texto-2); white-space: nowrap; } .sem { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .sem::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; } .sem-ok::before { background: var(--verde); } .sem-ok { color: var(--verde); } .sem-rev::before { background: var(--ambar); } .sem-rev { color: var(--ambar); } .sem-al::before { background: var(--rojo); } .sem-al { color: var(--rojo); } /* ── Gráficas ──────────────────────────────────────────────────────────── */ .graf-rej { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } /* Dona de concentración */ .dona-caja { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: center; margin-top: 20px; } .dona { position: relative; } .dona svg { width: 100%; display: block; transform: rotate(-90deg); } .dona-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .dona-c b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; display: block; line-height: 1; } .dona-c span { font-size: 10px; color: var(--texto-3); letter-spacing: .08em; text-transform: uppercase; } .dona-ley { display: flex; flex-direction: column; gap: 11px; } .dona-i { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .dona-p { width: 10px; height: 10px; border-radius: 3px; flex: none; } .dona-i b { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; } /* Barras de depósitos contra facturado */ .barras { display: flex; align-items: flex-end; gap: clamp(3px, .9vw, 9px); height: 172px; margin-top: 22px; } .barra-m { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; height: 100%; position: relative; } .barra-par { display: flex; gap: 2px; align-items: flex-end; height: 100%; } .barra-b { flex: 1; border-radius: 3px 3px 0 0; height: 0; transition: height .9s var(--curva); } .b-dep { background: var(--oro); } .b-fac { background: color-mix(in srgb, var(--texto-3) 42%, transparent); } /* Los meses en que el depósito no alcanzó lo facturado se marcan abajo: es el hallazgo, no un detalle de la gráfica. */ .barra-m.corto::after { content: ''; position: absolute; inset: auto 0 -9px; height: 3px; background: var(--rojo); border-radius: 99px; } .barra-x { display: flex; gap: clamp(3px, .9vw, 9px); margin-top: 16px; } .barra-x span { flex: 1; text-align: center; font-size: 9.5px; color: var(--texto-3); } .leyenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-size: 11.5px; color: var(--texto-2); } .leyenda i { display: inline-flex; align-items: center; gap: 7px; font-style: normal; } .leyenda i::before { content: ''; width: 11px; height: 11px; border-radius: 3px; } .ley-dep::before { background: var(--oro); } .ley-fac::before { background: color-mix(in srgb, var(--texto-3) 42%, transparent); } .ley-cor::before { background: var(--rojo); height: 3px !important; border-radius: 99px; } /* ── Mapa de motores ───────────────────────────────────────────────────── */ .motores-rej { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; margin-top: 22px; } .motor-c { border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 14px 15px; background: var(--fondo); transition: border-color .25s, transform .25s var(--curva); } .motor-c:hover { border-color: var(--oro); transform: translateY(-2px); } .motor-c-n { font-size: 13px; font-weight: 660; letter-spacing: -.015em; line-height: 1.35; } .motor-c-p { font-size: 11px; color: var(--texto-3); margin-top: 7px; } .motor-c-p b { color: var(--oro); font-family: ui-monospace, monospace; font-size: 13px; } .nota-pie { font-size: 11.5px; color: var(--texto-3); margin-top: 22px; max-width: 76ch; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════════ APP MÓVIL ═══════════════════════════════════════════════════════════════════════════ */ .app-rej { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: clamp(30px, 5vw, 64px); align-items: center; } .app-lista { display: flex; flex-direction: column; gap: 22px; margin: 30px 0 34px; } .app-i-t { font-size: 15px; font-weight: 680; letter-spacing: -.015em; } .app-i-d { font-size: 13.5px; color: var(--texto-2); margin-top: 5px; line-height: 1.55; max-width: 46ch; } .tiendas { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; } /* Botones propios y no las insignias de App Store y Google Play: reproducir esas marcas tiene reglas de uso de Apple y Google, y una imitación se ve peor que un botón de la casa. */ .btn-tienda { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--fondo-2); color: var(--texto); font-size: 14px; font-weight: 640; letter-spacing: -.015em; transition: border-color .25s, transform .25s var(--curva); } .btn-tienda:hover { border-color: var(--oro); transform: translateY(-2px); } .btn-tienda svg { width: 19px; height: 19px; flex: none; } .marca-pronto { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); padding: 5px 10px; border-radius: 99px; } /* Maqueta del teléfono */ .telefonos { position: relative; display: flex; justify-content: center; } .tel { width: 232px; border-radius: 34px; border: 1px solid var(--borde); background: var(--fondo-2); padding: 11px; box-shadow: var(--sombra); } .tel-p { background: var(--fondo); border-radius: 25px; overflow: hidden; padding: 16px 15px 20px; } .tel-muesca { width: 62px; height: 4px; border-radius: 99px; background: var(--borde); margin: 2px auto 14px; } .tel-rfc { font-family: ui-monospace, monospace; font-size: 9px; color: var(--oro); } .tel-emp { font-size: 13px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; line-height: 1.25; } .tel-score { text-align: center; margin: 16px 0 4px; } .tel-score b { font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; display: block; } .tel-score span { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); } .tel-fila { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--borde); font-size: 10.5px; } .tel-fila b { margin-left: auto; font-family: ui-monospace, monospace; font-size: 10.5px; } .tel-pt { width: 6px; height: 6px; border-radius: 50%; flex: none; } /* ═══ Adaptación a pantallas chicas ═══ */ @media (max-width: 900px) { .score-rej, .app-rej, .graf-rej, .dona-caja { grid-template-columns: 1fr; } .dona-caja { max-width: 340px; } .telefonos { margin-top: 8px; } } @media (max-width: 560px) { .barras { height: 132px; } .barra-x span:nth-child(even) { visibility: hidden; } .ledger-v { font-size: 14.5px; } .ledger-r.total .ledger-v { font-size: 18px; } } /* ═══════════════════════════════════════════════════════════════════════════ CABECERA EN PANTALLAS CHICAS La barra llevaba selector de país + tres idiomas + tema + botón de demo: 450px de controles en un teléfono de 375. Eso ensanchaba el documento entero y hacía que TODA la página se desplazara de lado — no solo la barra. Los paneles del reporte se veían cortados por esto, no por su propio ancho. Se quitan por orden de prescindibilidad. El botón de demo nunca se va: es la única acción que importa. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Los enlaces de sección se pierden, pero la página es un solo scroll y el pie repite todos los destinos. Pendiente: menú desplegable. */ .nav-links { display: none; } } @media (max-width: 560px) { /* El país es una preferencia, no una decisión de compra. Se recupera en el escritorio y queda guardada. */ #pais { display: none; } .barra-acciones { gap: 6px; } .btn { height: 36px; padding: 0 13px; font-size: 13px; } } /* ── Tabla de parámetros en teléfono ────────────────────────────────────── */ @media (max-width: 700px) { /* La fórmula es lo que hace defendible cada cifra, pero en 375px no se lee y empuja el semáforo fuera de vista — que es justo lo primero que alguien busca. Se esconde la columna y la tabla cabe casi completa. */ .tabla-par { min-width: 430px; } .tabla-par th:nth-child(2), .tabla-par td:nth-child(2) { display: none; } } @media (max-width: 560px) { /* En 390px la barra pedía 352 de los 342 disponibles: el botón PT quedaba cortado y "Solicitar demo" se partía en dos renglones. La palabra de la marca es lo único prescindible ahí — el ícono ya identifica el sitio, y son 70px que le hacen falta al selector de idioma y al botón. */ .marca-txt { display: none; } .btn { white-space: nowrap; } } /* ═══════════════════════════════════════════════════════════════════════════ PÁGINAS LEGALES Texto largo que alguien va a leer de verdad —o que un abogado va a revisar línea por línea—, así que manda la legibilidad: medida corta, interlínea amplia y jerarquía clara entre artículo y párrafo. ═══════════════════════════════════════════════════════════════════════════ */ .legal { max-width: 760px; margin: 0 auto; } .legal-cab { border-bottom: 1px solid var(--borde); padding-bottom: 26px; margin-bottom: 34px; } .legal-cab h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.035em; line-height: 1.1; } .legal-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--texto-3); font-family: ui-monospace, monospace; } /* Nota de idioma: va en los tres a la vez, no conmutada. Un documento legal que cambia de idioma con un botón deja en duda cuál versión rige. */ .legal-idioma { background: var(--fondo-3); border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 15px 18px; margin-top: 22px; font-size: 12.5px; color: var(--texto-2); line-height: 1.6; } .legal-idioma p + p { margin-top: 7px; } .legal-idioma b { color: var(--texto); } .legal-indice { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px 24px; margin-bottom: 40px; } .legal-indice h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 14px; } .legal-indice ol { list-style: none; counter-reset: idx; display: grid; gap: 8px; } .legal-indice li { counter-increment: idx; font-size: 13.5px; } .legal-indice li::before { content: counter(idx) '.'; color: var(--oro); font-weight: 700; font-family: ui-monospace, monospace; margin-right: 9px; } .legal-indice a { color: var(--texto-2); } .legal-indice a:hover { color: var(--oro); } .legal-sec { margin-bottom: 42px; scroll-margin-top: 88px; } .legal-sec h2 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); letter-spacing: -.025em; margin-bottom: 16px; display: flex; gap: 12px; align-items: baseline; } .legal-sec h2 .num { color: var(--oro); font-family: ui-monospace, monospace; font-size: .82em; font-weight: 700; flex: none; } .legal-sec h3 { font-size: 15px; font-weight: 680; letter-spacing: -.015em; margin: 26px 0 10px; } .legal-sec p { font-size: 14.5px; line-height: 1.72; color: var(--texto-2); margin-bottom: 14px; } .legal-sec p strong, .legal-sec li strong { color: var(--texto); font-weight: 680; } .legal-sec ul { margin: 0 0 16px 0; padding-left: 0; list-style: none; } .legal-sec ul li { font-size: 14.5px; line-height: 1.7; color: var(--texto-2); padding-left: 22px; position: relative; margin-bottom: 9px; } .legal-sec ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); } .legal-sec a { color: var(--oro); font-weight: 620; } /* Bloque para lo que no se puede pasar por alto: la CIEC, el buró, el límite de responsabilidad. Si alguien solo lee los recuadros, tiene que salir sabiendo lo que importa. */ .legal-ojo { border: 1px solid color-mix(in srgb, var(--oro) 40%, transparent); background: color-mix(in srgb, var(--oro) 7%, transparent); border-radius: var(--radio); padding: 20px 22px; margin: 22px 0; } .legal-ojo .et { font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; } .legal-ojo p:last-child { margin-bottom: 0; } .legal-tabla { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 13.5px; } .legal-tabla th { text-align: left; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--texto-3); padding: 0 16px 10px 0; border-bottom: 1px solid var(--borde); } .legal-tabla td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--borde); vertical-align: top; color: var(--texto-2); line-height: 1.6; } .legal-tabla td:first-child { color: var(--texto); font-weight: 620; width: 34%; } .legal-pie { border-top: 1px solid var(--borde); padding-top: 26px; margin-top: 46px; font-size: 12.5px; color: var(--texto-3); line-height: 1.7; }