/* ============================================================================
home.css — páginas públicas de BM Premier Solutions
index.php · credito.php · proceso.php · privacidad.php · empezar.php
SE CARGA DESPUÉS DE tokens.css, SIEMPRE. Aquí no se declara ni un color
suelto: todo sale de var(--...). La cabecera, el pie, la marca, el botón,
el chip, el badge y el campo viven en tokens.css porque son idénticos en
el portal; este archivo solo tiene lo propio de las páginas públicas.
LO QUE TORRE MANDÓ CONSERVAR (2026-09-03) y aquí está, íntegro:
- el LOGO suyo (images/logo.webp) en las once pantallas, nunca un
emblema dibujado por nosotros;
- el logo que se ARMA pieza por pieza en el hero de index.php, con su
destello, su aura giratoria y su halo que respira (sección "EL LOGO");
- la LLUVIA DE MONEDAS de proceso.php, las 22 (sección al final).
CORRECCIÓN DE TORRE (2026-09-04): "sí está bien, pero recuerda las
animaciones que estaban, mantenerlas". La v3 había retirado cinco de este
archivo por criterio propio. Vuelven las cinco, con su misma duración, su
mismo retraso y su misma curva, portadas a los tokens nuevos:
- halo 3.4s -> el aro que late en "Agenda tu consulta" (.btn-halo)
- flow 2.4s -> la luz que corre por el puente (.flow::after)
- rise .7s -> la entrada de las dos ramas (.branch)
- seam-open .9s -> la costura dorada que se abre entre ellas (.seam)
- coinGira 1.15s -> la moneda que gira antes de enseñar los dos caminos
Una decisión de diseño nuestra no se impone sobre una decisión del dueño de
la marca. Lo que sí se conserva de la v3 es el candado: todas respetan
prefers-reduced-motion y todas animan transform / escala / opacidad, nunca
una propiedad que obligue al navegador a recalcular el diseño.
============================================================================ */
/* ============================================================================
HERO DE INICIO — banda de marca (medianoche en los dos temas)
============================================================================ */
.hero {
position: relative; overflow: clip;
padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
border-bottom: 1px solid var(--band-line);
}
.hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(44% 58% at 78% 30%, rgba(255,171,0,.16), transparent 70%),
radial-gradient(38% 52% at 14% 10%, rgba(46,144,255,.14), transparent 70%);
}
/* El filete dorado del borde inferior: es el único adorno que separa la banda
de marca del lienzo, y no se mueve. */
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--oro-500), transparent); opacity: .7;
}
.hero .wrap { position: relative; }
.hero-grid {
display: grid; grid-template-columns: minmax(0,1fr) auto;
gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
}
.hero h1 { font-size: var(--t-5); max-width: 14ch; margin: .6rem 0 1rem; }
.hero .lead { margin-bottom: 1.6rem; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 1.4rem; }
.cta-band .actions { justify-content: center; margin-bottom: 0; }
/* ============================================================================
EL ARO QUE LATE — halo, restituido el 2026-09-04
Va en los DOS elementos que lo tenían en producción, ni uno más:
1. "Agenda tu consulta", el botón dorado de la barra (layout.php);
2. "Ver cómo seguimos con el capital", la pastilla chica de credito.php.
Producción los estilaba con dos reglas gemelas (.book::after y
.pill-gold::after) porque eran dos componentes distintos. Aquí los dos son
el mismo .btn del sistema, así que basta una clase: .btn-halo. Mismo aro,
mismos 3.4s, misma curva, mismo bucle.
El aro es un ::after, no un box-shadow animado: una sombra animada la
repinta la CPU en cada cuadro; un pseudoelemento que solo cambia de escala
y opacidad lo compone la GPU. Y pointer-events:none para que ese aro nunca
se coma un clic dirigido al botón.
El radio sale de var(--r-ctl) + 4px: el botón del sistema nuevo no es una
píldora perfecta como el .book viejo, y un aro de 999px alrededor de una
esquina de 12px se despega del botón por las esquinas.
============================================================================ */
.btn-halo { position: relative; }
.btn-halo::after {
content: ""; position: absolute; inset: -4px; pointer-events: none;
border-radius: calc(var(--r-ctl) + 4px); border: 1px solid var(--accent);
opacity: 0; animation: halo 3.4s var(--ease-out) infinite;
}
@keyframes halo {
0% { opacity: .6; transform: scale(1); }
70% { opacity: 0; transform: scale(1.2); }
100% { opacity: 0; transform: scale(1.2); }
}
/* Con movimiento reducido el aro no late: desaparece. La regla global de
tokens.css lo dejaría en su último cuadro (opacity:0), que es invisible
igual, pero se apaga aquí de forma explícita para que nadie tenga que
deducirlo leyendo dos archivos. El botón no pierde nada: su resplandor
dorado (--glow-accent) es fijo y sigue ahí. */
@media (prefers-reduced-motion: reduce) {
.btn-halo::after { animation: none; display: none; }
}
/* La fotografía del hero de proceso.php: se sirve como real (no como
background-image) para poder declararle width/height y que el navegador
reserve el hueco — así la página no salta al cargar — y para que un
navegador sin WebP tenga su de respaldo. El velo medianoche de
encima es lo que deja el titular en 12:1 de contraste sobre la foto. */
.hero-fondo {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center right; opacity: .38; z-index: 0;
}
/* Clase explícita y no :has(): si un navegador no soportara :has(), el velo
no se pintaría y el titular quedaría sobre la foto pelada. Un fallo de
contraste no puede depender de una consulta condicional del selector. */
.hero-foto::before {
background: linear-gradient(100deg, rgba(8,19,42,.96) 0%, rgba(8,19,42,.80) 45%, rgba(8,19,42,.45) 100%);
z-index: 1;
}
.hero .wrap { z-index: 2; }
.hero h1 .grad { position: relative; }
/* minmax(0,1fr) y no 1fr a secas: con 1fr, un titular largo sin cortes
ensancha la columna y saca barra horizontal en móvil. */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: minmax(0,1fr); }
.logo-stage { order: -1; margin-inline: auto; width: clamp(200px, 55vw, 260px); }
}
/* Hero de las páginas interiores (crédito, privacidad): misma banda, más baja. */
.hero-mid { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(2.2rem, 5vw, 3.2rem); }
.hero-mid h1 { font-size: var(--t-4); max-width: 20ch; margin: .4rem 0 1rem; }
/* ============================================================================
EL LOGO — se ARMA pieza por pieza, destella, y se queda con su aura
ES EL ARCHIVO DE TORRE (images/logo.webp) Y SUS EFECTOS. Decisión suya del
2026-09-03, textual: "quiero el logo que le di y los efectos que hace".
Nada de esto redibuja ni recolorea el logo: las doce .piece pintan LA MISMA
imagen de fondo y cada una deja ver su porción con clip-path.
La coreografía, en orden:
0.10s → 0.76s entran las doce cuñas, escalonadas cada 60ms, cada una
desde su vector (--tx/--ty) y con su giro (--rot);
1.61s aterriza la última (0.76 + 0.85 de duración);
1.62s el destello (.flash) — ANTES caía a 1.25s, en mitad del
armado, y el fogonazo se comía tres piezas todavía en el
aire. Es el único ajuste de tiempo de esta v3;
1.75s entra el aura y empieza a recorrer el aro (spin 4.5s);
1.95s entra el halo y empieza a respirar (pulse 3.2s).
Dos animaciones en dos elementos distintos a propósito (igual que en la
lluvia de monedas): si el armado y el giro vivieran en el mismo elemento se
pisarían, porque los dos escriben en `transform`.
Solo se anima transform y opacity. `will-change` va únicamente en las dos
capas que giran en bucle: ponerlo en las doce .piece promovería doce capas
de GPU para 0.85s de animación, que cuesta más de lo que ahorra.
============================================================================ */
.logo-stage {
--logo: url("../images/logo.webp");
position: relative; width: clamp(230px, 30vw, 330px); aspect-ratio: 1;
}
/* Aura dorada: un cometa que recorre EL ARO del logo, no una nube alrededor
de la caja. La máscara radial recorta un anillo fino justo sobre el círculo
dorado del dibujo. */
.aura {
position: absolute; inset: 3%; border-radius: 50%; pointer-events: none; opacity: 0;
background: conic-gradient(from 0deg, transparent 0 50%, rgba(255,212,105,.95) 70%,
var(--oro-400) 79%, transparent 90%);
-webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 40%, #000 44%, #000 50%, transparent 54%);
mask: radial-gradient(circle at 50% 50%, transparent 0 40%, #000 44%, #000 50%, transparent 54%);
filter: blur(3px);
will-change: transform;
animation: aura-in .9s var(--ease-out) 1.75s forwards, spin 4.5s linear 1.75s infinite;
}
/* Halo suave que respira, pegado al mismo aro. */
.aura-ring {
position: absolute; inset: 3%; border-radius: 50%; pointer-events: none; opacity: 0;
box-shadow: 0 0 34px 2px rgba(255,171,0,.35), inset 0 0 26px 1px rgba(255,171,0,.22);
will-change: opacity;
animation: aura-in 1s var(--ease-out) 1.95s forwards, pulse 3.2s ease-in-out 1.95s infinite;
}
@keyframes aura-in { to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.piece {
position: absolute; inset: 0;
background-image: var(--logo); background-size: contain;
background-repeat: no-repeat; background-position: center;
animation: assemble .85s var(--ease-spring) both;
}
@keyframes assemble {
0% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.55); }
55% { opacity: 1; }
100% { opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); }
}
/* Destello breve justo cuando termina de armarse. */
.flash {
position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
background: radial-gradient(circle, rgba(255,225,150,.75) 0%, transparent 62%);
animation: flash 1s ease-out 1.62s 1;
}
@keyframes flash { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; } }
/* MOVIMIENTO REDUCIDO: el logo entero, quieto, desde el primer cuadro. Sin
armado, sin destello y sin giro. La regla global de tokens.css ya lleva
cada animación a su estado final; aquí se apagan del todo las dos que
giran en bucle y se retira el fogonazo, que con duración 0.001ms daría un
parpadeo de un cuadro — exactamente lo que evita quien pide menos
movimiento. */
@media (prefers-reduced-motion: reduce) {
.piece { opacity: 1 !important; transform: none !important; animation: none !important; }
.aura, .aura-ring { animation: none !important; opacity: .55; will-change: auto; }
.flash { display: none; }
}
/* ============================================================================
LA DIVISIÓN — los dos escalones de la portada
============================================================================ */
.split-head { text-align: center; padding: var(--s-section) 0 var(--s-6); }
.split-head h2 { font-size: var(--t-3); max-width: 24ch; margin: .4rem auto .8rem; }
.split-head p { color: var(--text-2); max-width: 60ch; margin: 0 auto; }
/* position:relative porque LA COSTURA (.seam) se apoya en él. Absoluta, así
que no ocupa celda de la rejilla aunque sea hijo directo del grid. */
.split { position: relative; display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0,1fr)); padding-bottom: var(--s-section); }
@media (max-width: 820px) { .split { grid-template-columns: minmax(0,1fr); } }
/* LA COSTURA. Un hilo de oro que se abre de dentro hacia fuera en cuanto la
página carga: es el gesto que dice "esto no son dos negocios, es una sola
escalera partida en dos escalones" — el mismo argumento que tiene escrito
el titular de arriba. Restituida el 2026-09-04 (seam-open, .9s, retraso
.2s, la misma curva de producción).
Anima la propiedad independiente 'scale' y no 'transform' a propósito: el
elemento ya usa transform para centrarse (translateX(-50%)), y animar el
atajo lo borraría. 'scale' es de la misma familia (la compone la GPU, no
provoca reflow), así que el candado de "solo transform/opacidad" se cumple. */
.seam {
position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
transform: translateX(-50%); transform-origin: 50% 50%;
background: linear-gradient(180deg, transparent, var(--accent), transparent);
opacity: .85; pointer-events: none;
animation: seam-open .9s var(--ease-out) .2s both;
}
@keyframes seam-open { from { scale: 1 0; opacity: 0; } to { scale: 1 1; opacity: .85; } }
/* En una sola columna la costura no separa nada: separaría una tarjeta de la
de abajo, que es lo contrario de lo que significa. */
@media (max-width: 820px) { .seam { display: none; } }
.card {
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--r-card); box-shadow: var(--shadow-1); padding: var(--s-block);
}
/* ============================================================================
LA TARJETA SELECCIONABLE — UN SOLO COMPONENTE PARA TODO EL SITIO
(encargo de Torre, 2026-09-04: "al pasar el mouse por arriba debe notarse la
sombra, la selección, y ese borde naranja que va rotando, como en casi todos
los otros botones").
Antes de esto había tres comportamientos distintos: las ramas de la portada
cambiaban de borde, las tarjetas de servicio de proceso.php se levantaban
6px, y las de resultados y las de los tres pasos no hacían nada. La regla
ahora es una sola: SI UNA TARJETA LLEVA A ALGÚN SITIO O AGRUPA UNA IDEA
COMPLETA, RESPONDE ASÍ. Se mantiene desde aquí y solo desde aquí; la lista
de abajo es el único punto donde se declara quién es "seleccionable".
Son TRES señales a la vez, y son tres a propósito: una sola —solo el borde—
se pierde en un monitor mal calibrado, y solo la sombra no se ve en tema
oscuro.
1. el filete de oro que GIRA alrededor de la tarjeta,
2. la elevación (--shadow-3),
3. el levantón de 4px.
CÓMO GIRA SIN JAVASCRIPT Y SIN ROMPER LA CSP:
un conic-gradient cuyo ángulo de partida es la variable --bm-giro, que se
registra con @property para que el navegador sepa que es un y pueda
INTERPOLARLA (una variable CSS sin registrar no se anima: salta). El anillo
se recorta con mask-composite para que solo se vea el filete y el centro de
la tarjeta quede intacto. Se anima UNA variable registrada; ni una propiedad
que fuerce recálculo de la página.
DEGRADACIÓN: si el navegador no soporta @property, --bm-giro se queda en
0deg y el filete sale FIJO en vez de girar. Sigue habiendo borde dorado,
sombra y elevación — el efecto pierde el giro, no la función.
============================================================================ */
@property --bm-giro {
syntax: '';
initial-value: 0deg;
inherits: false;
}
/* QUIÉNES SON SELECCIONABLES. Esta es la ÚNICA lista del sitio, escrita una
vez con :is(). El QA del 2026-09-04 encontró que en siete páginas no había
ni una regla :hover de tarjeta; se cierra invirtiendo la regla: AHORA LO SON
TODAS, y lo excepcional es no serlo.
ENTRAN — .card en cualquier página (las dos ramas de la portada, las cuatro
de servicio y las tres de pasos y las preguntas de proceso.php, la del QR,
las de resultados, que ahora rotan quietas), más .pasos li (los cuatro
pasos de credito.php, que son
y no .card) y .opt (las dos puertas de
empezar.php).
SE QUEDAN FUERA A PROPÓSITO, y este es el motivo:
.form-card y .card-narrow (solicitar.php, login, recuperar) — son el
PANEL que contiene el formulario, no una tarjeta que lleve a ningún sitio.
Encenderlas al pasar el ratón sería ruido puro (el ratón las cruza entera
para llegar a cada campo) y el anillo dorado competiría con el foco del
propio campo, que es la señal que ahí sí importa.
privacidad.php no aparece porque NO TIENE tarjetas: es prosa legal dentro
de .legal. No es un olvido, es que no hay nada que marcar.
.selecc queda como nombre libre para lo que venga. */
.selecc,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow) {
position: relative;
transition: box-shadow var(--dur-2) var(--ease-out),
transform var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out);
}
.selecc::before,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow)::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
/* El grosor del filete. padding + mask-composite:exclude = solo se pinta el
anillo; el hueco interior queda recortado y el contenido de la tarjeta no
se tapa ni se recorta. */
padding: 2px;
background: conic-gradient(from var(--bm-giro),
transparent 0deg,
var(--oro-300) 40deg,
var(--oro-500) 85deg,
var(--oro-600) 125deg,
transparent 180deg,
transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity var(--dur-2) var(--ease-out);
pointer-events: none; /* el anillo NUNCA se come un clic */
z-index: 2;
}
.selecc:hover, .selecc:focus-within,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow):is(:hover, :focus-within) {
box-shadow: var(--shadow-3);
transform: translateY(-4px);
}
.selecc:hover::before, .selecc:focus-within::before,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow):is(:hover, :focus-within)::before {
opacity: 1;
animation: bm-giro 2.6s linear infinite;
}
@keyframes bm-giro { to { --bm-giro: 360deg; } }
/* MENOS MOVIMIENTO: el filete NO gira y la tarjeta NO se levanta. Se queda el
anillo dorado quieto y la sombra profunda, que son las dos señales que de
verdad dicen "esto está seleccionado". La información se conserva entera;
lo que se apaga es el movimiento. */
@media (prefers-reduced-motion: reduce) {
.selecc,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow) { transition: none; }
.selecc:hover, .selecc:focus-within,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow):is(:hover, :focus-within) { transform: none; }
.selecc:hover::before, .selecc:focus-within::before,
:is(.card, .pasos li, .opt):not(.form-card, .card-narrow):is(:hover, :focus-within)::before { animation: none; }
}
/* EL OVERRIDE DEL CARRUSEL SE FUE CON EL CARRUSEL. En la v5 la tarjeta de
resultados no se levantaba al pasar el ratón dentro de la cinta, porque ya
se estaba moviendo sola y dos movimientos a la vez marean. Con la rotación
de la v6 las tarjetas están QUIETAS, así que recuperan el mismo hover que
todas las demás del sitio: filete dorado girando, sombra y levantón de 4px.
Una excepción menos que recordar. */
/* El filete superior es la regla de color con significado hecha visible:
dorado = crédito, azul = capital. */
/* LA ENTRADA DE LAS RAMAS (rise, restituida el 2026-09-04). Suben 26px hasta
su sitio, escalonadas .18s y .3s como en producción — la primera entra
después de que la costura ya se abrió, así se lee "primero la escalera,
después los escalones".
SOLO DESPLAZAMIENTO, NUNCA OPACIDAD: si el navegador congela la animación
—o si el visitante pidió menos movimiento— la tarjeta sigue siendo legible
desde el primer cuadro. Una entrada que empieza en opacity:0 puede dejar
contenido invisible; ésta no puede. */
.branch { position: relative; display: flex; flex-direction: column; gap: .85rem; border-top: 4px solid var(--accent);
transition: border-color var(--dur-2) var(--ease-out),
box-shadow var(--dur-2) var(--ease-out),
transform var(--dur-2) var(--ease-out);
animation: rise .7s var(--ease-out) both; }
/* ---------------------------------------------------------------------------
"SE SIENTE SELECCIONABLE" — restituido el 2026-09-04 (v5).
Producción tenía en home.css:158
.branch:hover, .branch:focus-within { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
y la v4 la perdió: solo quedaba el cambio de color del título. Torre lo
notó en Chrome antes que nadie ("cuando pasabas el clic por los carteles se
sentía como que los estabas seleccionando").
Vuelve con el MISMO oro al 45% y se le añade acabado: el filete completo se
tiñe, la tarjeta se levanta 2px y toma --shadow-2. Tres señales a la vez
(color, elevación, sombra) porque una sola —solo el borde— es justo lo que
se pierde en un monitor mal calibrado.
:focus-within se conserva y sube al 70%, como producción: quien navega con
teclado tiene que ver la tarjeta activa igual de claro, o más.
El desplazamiento se apaga con prefers-reduced-motion; el borde y la sombra
NO, porque son la información, no el adorno.
Se tiñen los TRES lados, no `border-color` a secas: el filete superior de
4px es la regla de color con significado (oro = crédito, azul = capital) y
tiene que seguir sólido. Un `border-color` corto lo habría diluido al 45%
justo al pasar el ratón, que es cuando más se mira. */
.branch:hover,
.branch:focus-within {
border-right-color: color-mix(in srgb, var(--accent) 45%, transparent);
border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.branch:focus-within {
border-right-color: color-mix(in srgb, var(--accent) 70%, transparent);
border-bottom-color: color-mix(in srgb, var(--accent) 70%, transparent);
border-left-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* La rama azul se ilumina con SU color. */
.branch.azul:hover {
border-right-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
border-bottom-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
border-left-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.branch.azul:focus-within {
border-right-color: color-mix(in srgb, var(--accent-2) 70%, transparent);
border-bottom-color: color-mix(in srgb, var(--accent-2) 70%, transparent);
border-left-color: color-mix(in srgb, var(--accent-2) 70%, transparent);
}
/* .on la pone home.js cuando la moneda ya eligió esa rama: el mismo acabado
que el hover, para que la elección se lea igual con ratón que sin él. */
.branch.on {
border-right-color: color-mix(in srgb, var(--accent) 70%, transparent);
border-bottom-color: color-mix(in srgb, var(--accent) 70%, transparent);
border-left-color: color-mix(in srgb, var(--accent) 70%, transparent);
box-shadow: var(--shadow-2);
}
.branch.azul.on {
border-right-color: color-mix(in srgb, var(--accent-2) 70%, transparent);
border-bottom-color: color-mix(in srgb, var(--accent-2) 70%, transparent);
border-left-color: color-mix(in srgb, var(--accent-2) 70%, transparent);
}
/* nth-child y no nth-of-type: la costura es el hijo 1, las ramas el 2 y el 3.
Son los mismos retrasos que tenía producción con la misma estructura. */
.branch:nth-child(2) { animation-delay: .18s; }
.branch:nth-child(3) { animation-delay: .30s; }
@keyframes rise { from { translate: 0 26px; } to { translate: 0 0; } }
/* Con movimiento reducido: costura ya abierta y ramas ya en su sitio, desde
el primer cuadro. Ninguna de las dos esconde contenido, así que apagarlas
no deja nada invisible — que es la prueba que tiene que pasar cualquier
animación de entrada. */
@media (prefers-reduced-motion: reduce) {
.seam { animation: none; scale: 1 1; opacity: .85; }
.branch { animation: none; translate: 0 0; }
}
.branch.azul { border-top-color: var(--accent-2); }
.branch .kicker {
font: 700 var(--t--2) var(--font-body); letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--text-3); margin: 0;
}
.branch h3 { font-size: var(--t-2); }
/* inline-block + relleno vertical: como enlace en línea medía 266x37 px en
escritorio y 218x30 en móvil. Pasaba el mínimo AA (24 px, WCAG 2.5.8) pero
no la barra de la casa, que son 44. El margen negativo devuelve el espacio
que el relleno añadiría, para que el ritmo de la tarjeta no se mueva. */
.branch h3 a {
color: inherit; text-decoration: none;
display: inline-block; padding-block: .55rem; margin-block: -.55rem;
}
.branch h3 a:hover { color: var(--accent-text); }
.branch.azul h3 a:hover { color: var(--accent-2-text); }
.branch .pitch { color: var(--text-2); margin: 0; }
/* La ilustración de cada rama lleva a su página de presentación; el botón de
abajo lleva a la acción. Decisión de Torre del 2026-08-11: quien todavía
está mirando merece entender antes de que le pidan datos. */
.stage { display: grid; place-items: center; min-height: 230px; margin: .4rem 0 .2rem; }
.stage-link { display: block; text-decoration: none; color: inherit; border-radius: var(--r-ctl); width: 100%; }
.stage-link svg { display: block; margin-inline: auto; }
/* LOS DETALLES SIEMPRE VISIBLES.
Antes vivían dentro de un acordeón que solo se abría al pasar el mouse: en
un teléfono no hay mouse, y contenido que depende del hover es contenido
que la mitad de los visitantes nunca ve. Ahora se leen siempre y en móvil
se apilan igual. */
.reveal { list-style: none; margin: .4rem 0 .9rem; padding: 0; display: grid; gap: .7rem; }
.reveal li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t--1); line-height: 1.55; }
.reveal b { display: block; color: var(--text); font-weight: 700; }
.reveal span { color: var(--text-2); }
.tick { flex: none; margin-top: .28rem; color: var(--accent-text); }
.branch.azul .tick { color: var(--accent-2-text); }
/* El enlace de los burós lleva a una suscripción de pago: se mantiene como
enlace de texto y NO se vuelve un botón, para no hacerlo más tentador que
la acción sin costo. El relleno vertical lo lleva a 44px de alto. */
.second {
display: inline-flex; align-items: center; min-height: var(--tap);
margin-top: .5rem; font-size: var(--t--1); font-weight: 600; text-decoration: none;
color: var(--accent-2-text);
border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
width: fit-content; touch-action: manipulation;
}
.second:hover { border-bottom-color: var(--accent); color: var(--accent-text); }
.fine { font-size: var(--t--2); line-height: 1.5; color: var(--text-3); margin: .5rem 0 0; max-width: 52ch; }
/* Sobre la banda de marca el gris de metadatos se pierde: sube a --band-text-2
(#B9C6DC sobre #08132A, muy por encima de AA). */
.band .fine { color: var(--band-text-2); }
.crosslink {
margin: .9rem 0 0; font-size: var(--t--1); color: var(--text-2);
border-top: 1px solid var(--line); padding-top: .9rem;
}
.crosslink b { color: var(--accent-text); font-weight: 700; }
/* ============================================================================
RESULTADOS PUBLICADOS
============================================================================ */
.results { padding: 0 0 var(--s-section); }
.results-head { text-align: center; margin-bottom: var(--s-6); }
.results-head h2 { font-size: var(--t-3); max-width: 22ch; margin: .4rem auto .8rem; }
.results-head p { color: var(--text-2); max-width: 58ch; margin: 0 auto; }
/* 300px, no 248: con el cuerpo de la v5 una tarjeta de 248px partía la nota en
cinco líneas de cuatro palabras. Es el mismo problema que la "amplitud" que
pidió Torre, visto de cerca. */
.cards { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.cards .card { display: flex; flex-direction: column; gap: .7rem; }
.card .when {
font: 800 var(--t--2) var(--font-body); letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--text-3);
}
/* LAS CIFRAS SUELTAS DE LA TARJETA CLÁSICA (.deltas/.delta) SE FUERON.
Desde el 2026-09-05 la tarjeta tiene UN solo formato — el del medidor — y
los casos sin puntaje alcanzado se pintan con el mismo arco apagado (ver
".medidor.sin-puntaje" más abajo). Se borran las reglas en vez de dejarlas
"por si acaso": CSS que no pinta nada es CSS que el siguiente que lo lea va
a creer que sí. Los colores por buró NO se van — viven en los medidores. */
/* ============================================================================
LA TARJETA MEDIDA — tres burós en forma circular (Torre, 2026-09-05:
"me gustaría que se vean los tres burós en forma circular, cuántos puntos
subió, y la leyenda abajo de las cosas eliminadas... que se vea más real").
POR QUÉ SE DIBUJA Y NO SE FOTOGRAFÍA: la referencia que mandó Torre es el
panel de la herramienta de monitoreo. Publicar esa captura sería regalarle
la marca a un tercero y, peor, enseñar el reporte de alguien. Aquí se
redibuja con los tokens de la casa y sin un solo logotipo ajeno: mismo dato,
misma lectura, marca nuestra.
LA FAMILIA VISUAL ES LA DEL MEDIDOR DE LA PORTADA (home.js, #arcFill y
#needle): semicírculo, escala por tramos, marcador sobre el arco. El sitio
habla un solo idioma en las dos pantallas.
TODO EL DIBUJO ES SVG EN LÍNEA generado por PHP (results_medidor). Ni una
línea de JavaScript: la CSP lo prohíbe, y un medidor que necesita JS para
existir desaparece justo cuando el JS falla.
============================================================================ */
.medidores {
display: flex; gap: .5rem; justify-content: center; align-items: flex-start;
margin: .2rem 0 0;
}
/* max-width evita que un caso de UN solo buró pinte un arco gigante en medio
de la tarjeta. min-width:0 es lo que deja encoger a las tres columnas sin
desbordar en 375px. */
.medidor {
flex: 1 1 0; min-width: 0; max-width: 8.5rem;
display: flex; flex-direction: column; align-items: center; gap: .15rem;
text-align: center;
}
/* El nombre del buró, en TEXTO y con su color: es el dato, no el adorno.
Mismo filete de color que ya tenían las cifras de la tarjeta clásica, para
que las dos versiones se lean como la misma familia. */
.medidor .buro {
font: 800 .68rem var(--font-body); letter-spacing: .06em; text-transform: uppercase;
color: var(--buro-otro); border-bottom: 2px solid var(--buro-otro);
padding-bottom: .18rem; margin-bottom: .25rem;
max-width: 100%; overflow-wrap: anywhere;
}
.medidor-eq .buro { color: var(--buro-eq); border-bottom-color: var(--buro-eq); }
.medidor-tu .buro { color: var(--buro-tu); border-bottom-color: var(--buro-tu); }
.medidor-ex .buro { color: var(--buro-ex); border-bottom-color: var(--buro-ex); }
.arco-caja { position: relative; display: block; width: 100%; }
/* width/height en el atributo + height:auto aquí: la regla de siempre de la
casa, para que el navegador reserve el hueco antes de pintar y no salte
nada al cargar. */
.arco { display: block; width: 100%; height: auto; }
.arco .banda { fill: none; stroke-width: 8.5; stroke-linecap: butt; }
.arco .banda-1 { stroke: var(--rango-1); }
.arco .banda-2 { stroke: var(--rango-2); }
.arco .banda-3 { stroke: var(--rango-3); }
.arco .banda-4 { stroke: var(--rango-4); }
.arco .banda-5 { stroke: var(--rango-5); }
/* Las marcas de 600, 700 y 800. Van por dentro y discretas: son referencias
para situar el marcador, no información que compita con el puntaje. */
.arco .marca { stroke: var(--line-strong); stroke-width: 1.5; opacity: .8; }
/* EL MARCADOR lleva el color del buró y un aro del color de la tarjeta: así se
despega de cualquier tramo sobre el que caiga, incluso del oro. */
.arco .punta { fill: var(--buro-otro); stroke: var(--bg-2); stroke-width: 2.5; }
.medidor-eq .arco .punta { fill: var(--buro-eq); }
.medidor-tu .arco .punta { fill: var(--buro-tu); }
.medidor-ex .arco .punta { fill: var(--buro-ex); }
/* EL PUNTAJE, en HTML y no en del SVG: se lee con lector de pantalla,
respeta la tipografía de la casa y no se escala a un tamaño ilegible en
móvil. Se apoya sobre el hueco del arco. */
.medidor .puntaje {
position: absolute; left: 0; right: 0; bottom: 4%;
font: 800 1.55rem/1 var(--font-display); color: var(--text);
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.medidor .rango {
font: 700 var(--t--2) var(--font-body); color: var(--text-2);
margin-top: .1rem;
}
/* Los puntos ganados: verde y flecha arriba. La flecha es refuerzo — el signo
ya está en el número y el texto oculto dice "ganados" o "perdidos". */
.medidor .gana {
display: inline-flex; align-items: center; gap: .18rem;
font: 800 var(--t--2) var(--font-body); color: var(--ok-text);
font-variant-numeric: tabular-nums;
}
.medidor .gana svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.medidor .gana.baja { color: var(--err-text); }
.medidor .gana.baja svg { transform: rotate(180deg); }
/* ---------------------------------------------------------------------------
EL MEDIDOR PENDIENTE: el mismo arco, apagado.
Un caso sin puntaje alcanzado NO puede llevar marcador (sería un número
inventado sobre un expediente real). Lo que lleva es el arco en sordina —
misma geometría, mismo sitio, misma tipografía — y en el centro el dato que
sí existe: los puntos ganados, con su signo delante para que nadie lo
confunda con un puntaje.
La escala apagada no es un adorno: es la señal de que ahí falta un dato, y
se lee sin leyenda. En cuanto Torre capture el puntaje desde el panel, ese
mismo medidor se enciende sin que nadie toque una línea de código. */
.medidor.sin-puntaje .banda { opacity: .26; }
.medidor.sin-puntaje .marca { opacity: .45; }
.medidor .puntaje-delta { color: var(--buro-otro); letter-spacing: -.03em; }
.medidor-eq .puntaje-delta { color: var(--buro-eq); }
.medidor-tu .puntaje-delta { color: var(--buro-tu); }
.medidor-ex .puntaje-delta { color: var(--buro-ex); }
/* UNA SOLA COLUMNA DE BURÓ (pasa: hay un caso publicado con solo Experian).
No se deja sola a la izquierda ni se estira hasta ocupar la tarjeta: crece
un poco y se centra. Con :has() no soportado se queda en 8.5rem centrada,
que también está bien — por eso no hay respaldo con clase. */
.medidores-1 .medidor { max-width: 11rem; }
.medidores-2 .medidor { max-width: 9.5rem; }
/* La leyenda de la escala. Una sola vez por tarjeta, en vez de tres números de
6px repartidos por cada arco: ahí no se leen, aquí sí. */
.resultado .escala {
font-size: .72rem; color: var(--text-3); text-align: center;
margin: .1rem 0 0; letter-spacing: .01em;
}
/* EL REMATE DEL CASO: los elementos eliminados, al pie y separados por un
filete. Es la cifra que resume el trabajo hecho, y por eso es lo último que
se lee y lo segundo más grande de la tarjeta. */
.resultado .eliminados {
display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
margin: .2rem 0 0; padding-top: .75rem; border-top: 1px solid var(--line);
}
.resultado .eliminados .cifra {
font: 800 1.9rem/1 var(--font-display); color: var(--accent-text);
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.resultado .eliminados .rotulo {
font: 700 var(--t--2) var(--font-body); color: var(--text-2);
text-transform: uppercase; letter-spacing: var(--track-caps);
}
/* En pantallas estrechas la tarjeta ocupa el ancho entero y los tres arcos
caben de sobra; lo único que se aprieta es el nombre del buró. */
@media (max-width: 400px) {
.medidor .buro { font-size: .62rem; letter-spacing: .03em; }
.medidor .puntaje { font-size: 1.35rem; }
}
.card .what { font-size: var(--t--1); color: var(--text-2); margin: 0; }
.card .what b { color: var(--text); font-weight: 700; }
.cards .badge { align-self: flex-start; background: var(--ok-soft); color: var(--ok-text); }
/* ============================================================================
LA ROTACIÓN DE RESULTADOS (index.php y credito.php) — Torre, 2026-09-05:
"que no se vean los cuadrantes fijos, que se vayan rotando de tres en tres
de forma aleatoria cada cierto tiempo, para no dar sensación de pocos
resultados"... y, viendo la primera versión: "aún no las veo que entran y
salen de tres en tres como una secuencia de vagón de tren".
ASÍ QUE EL MOVIMIENTO ES DE VAGÓN, NO DE DESVANECIDO. Las tres tarjetas
salen juntas hacia la izquierda y las tres nuevas entran juntas desde la
derecha, en bloque. En reposo — que son 6 segundos de cada 6,8 — están
quietas y COMPLETAS: ni una cortada por el borde, que era justo el defecto
de la cinta deslizante de la v5.
SE ANIMA LA PISTA ENTERA, NO TARJETA POR TARJETA. Un solo nodo, un solo
transform: el bloque se mueve como una pieza (que es lo que hace que se lea
como un vagón y no como tres tarjetas independientes), y al navegador le
cuesta una capa en vez de tres.
EL VIAJE ES DEL 14%, NO DEL 100%. Un viaje de pantalla completa obligaría a
recortar la caja (overflow:hidden), y recortar es lo que se vino a quitar:
se comería la sombra y el levantón del :hover. Con 14% + desvanecido, el ojo
lee "se fueron por la izquierda" sin que nada se salga de sitio.
CÓMO ESTÁ REPARTIDO:
- el ORDEN DE PARTIDA lo baraja PHP (shuffle en las dos páginas);
- QUÉ TRES se ven y CUÁNDO cambian lo decide assets/js/rotacion.js;
- el VIAJE lo pone esta transición, sobre transform y opacity y nada más:
las dos propiedades que el navegador resuelve en el compositor, sin
recalcular la página.
LA REJILLA: .rota-pista lleva también la clase .cards, así que hereda su
repeat(auto-fit, ...) y en móvil caben una o dos según el ancho sin inventar
puntos de corte nuevos. rotacion.js LEE esas columnas del estilo computado;
el CSS manda, el JavaScript obedece.
============================================================================ */
.rota {
position: relative;
--rota-sale-dur: .34s; /* el vagón que se va, acelerando */
--rota-entra-dur: .42s; /* el que llega, frenando */
--rota-viaje: 14%;
}
/* LA ÚNICA MEDIDA QUE SÍ SE REDEFINE: 360px de tarjeta mínima en vez de los
300px de .cards. Con los tres medidores dentro, una tarjeta de 300px deja
cada arco en 84px y el nombre "TRANSUNION" no cabe en una línea. A 1180px de
marco siguen entrando tres columnas (3x360 + 2x18 = 1116). */
.rota-pista { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
/* El envoltorio de cada tarjeta. Ya no se anima por separado (eso era el
desvanecido de la primera versión), pero sigue existiendo por una razón que
no cambió: separa la caja que se mueve de la tarjeta que tiene su propio
transform en el :hover. Dos reglas moviendo el transform del mismo nodo es
de donde salen los saltos. */
.rota-hueco { display: grid; }
.rota.esta-vivo .rota-pista {
transition: transform var(--rota-entra-dur) var(--ease-out),
opacity var(--rota-entra-dur) var(--ease-out);
}
/* SALIDA: acelerando hacia la izquierda, como un vagón que arranca. */
.rota.esta-vivo .rota-pista.rota-sale {
transition: transform var(--rota-sale-dur) cubic-bezier(.55, 0, .85, .35),
opacity var(--rota-sale-dur) cubic-bezier(.55, 0, .85, .35);
transform: translateX(calc(-1 * var(--rota-viaje)));
opacity: 0;
}
/* ENTRADA: el salto al lado derecho NO se ve porque este estado va sin
transición; lo que se ve es el regreso a su sitio, frenando. */
.rota.esta-vivo .rota-pista.rota-entra {
transition: none;
transform: translateX(var(--rota-viaje));
opacity: 0;
}
/* La caja lleva tabindex="0" para que se pueda parar la rotación con el
teclado (rotacion.js pausa con :focus dentro). Si se puede enfocar, tiene
que verse enfocada. */
.rota:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-card); }
/* MENOS MOVIMIENTO = NO ROTA. rotacion.js ni siquiera arranca el reloj; esto
es el cinturón de seguridad por si alguien cambia la preferencia con la
página abierta a mitad de viaje: se queda todo visible y quieto. */
@media (prefers-reduced-motion: reduce) {
.rota.esta-vivo .rota-pista,
.rota.esta-vivo .rota-pista.rota-sale,
.rota.esta-vivo .rota-pista.rota-entra {
transition: none; transform: none; opacity: 1;
}
}
/* El aviso que sostiene toda la sección: publicar resultados sin él es
exactamente lo que persigue la FTC en esta industria. Se conserva palabra
por palabra en los dos idiomas. */
.proof { font-size: var(--t--2); line-height: 1.6; color: var(--text-2); margin: var(--s-5) 0 0; max-width: 82ch; }
.proof strong { color: var(--text); }
/* ============================================================================
EL PUENTE
============================================================================ */
.bridge {
border: 1px solid var(--line); border-radius: var(--r-hero);
padding: var(--s-block);
background: radial-gradient(70% 130% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg-2);
text-align: center; margin-bottom: var(--s-section);
}
.bridge h2 { font-size: var(--t-3); max-width: 24ch; margin: .4rem auto .9rem; }
.bridge p { color: var(--text-2); max-width: 64ch; margin: 0 auto 1rem; }
.bridge p:last-child { margin-bottom: 0; }
.link-viz { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: var(--s-4); flex-wrap: wrap; }
.node {
font: 800 var(--t--2) var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase;
padding: .45rem .8rem; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-2);
}
/* EL PUENTE: una luz dorada que corre de "tu perfil personal" a "el capital de
tu negocio", en bucle cada 2.4s. Restituida el 2026-09-04 con su duración y
su curva de producción (linear, infinite).
Es de las pocas animaciones en bucle que se ganan el bucle: el dibujo ES el
argumento de la sección — uno alimenta al otro, todo el tiempo. La franja
viaja con translateX dentro de un contenedor con overflow:hidden, así que
no pinta ni un píxel fuera de sus 84x2. */
.flow {
width: 84px; height: 2px; border-radius: 2px; position: relative; overflow: hidden;
background: var(--line);
}
.flow::after {
content: ""; position: absolute; inset: 0; width: 40%;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: flow 2.4s linear infinite;
}
@keyframes flow { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Con movimiento reducido la luz no corre: se queda quieta y centrada, y el
puente se lee como el degradado estático que era en la v3. */
@media (prefers-reduced-motion: reduce) {
.flow::after { animation: none; transform: translateX(75%); }
}
/* ============================================================================
PASOS NUMERADOS (credito.php)
Numerados a propósito: aquí el orden SÍ es información — el cliente
necesita saber que la llamada va antes que cualquier pago.
============================================================================ */
/* ---------------------------------------------------------------------------
LOS PASOS — DOS COLUMNAS EN ESCRITORIO (encargo de Torre, 2026-09-04: "el
diseño y las letras se ven muy verticales... quiero que el sitio se vea con
amplitud").
Eran cuatro tiras a todo lo ancho, apiladas: 1180px de contenedor con
párrafos de 30 palabras y un río de blanco a la derecha. En escritorio pasan
a dos columnas — la lectura sigue siendo 1→2→3→4 (el orden natural del
documento, izquierda-derecha, arriba-abajo) y la sección deja de medir dos
pantallazos.
NO se hace a partir de 768: a esa anchura dos columnas dejarían la línea en
~38 caracteres, y un párrafo que se parte cada cuatro palabras se lee peor
que uno demasiado ancho. Se hace a partir de 1000px, que es donde cada
columna todavía da ~52 caracteres. */
.pasos {
list-style: none; margin: 0 0 var(--s-section); padding: 0;
display: grid; gap: var(--s-4);
}
@media (min-width: 1000px) {
.pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
.pasos li {
display: flex; gap: 1.15rem; align-items: flex-start;
border: 1px solid var(--line); border-radius: var(--r-card);
padding: var(--s-block); background: var(--bg-2); box-shadow: var(--shadow-1);
}
/* La columna de la izquierda de cada paso: el número arriba, la viñeta debajo.
El número se conserva tal cual —es lo que ordena la lectura, y Torre pidió
expresamente que no se tocara—; la viñeta se le añade debajo para que estos
pasos rimen con las tarjetas ilustradas de proceso.php. */
.paso-marca { flex: none; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.paso-viñeta-sm {
width: 4.6rem; height: 4.6rem; margin: 0;
border-radius: var(--r-ctl);
}
.paso-viñeta-sm svg { width: 3.2rem; }
@media (max-width: 560px) {
.paso-marca { flex-direction: row; align-items: center; gap: 1rem; }
}
.paso-n {
flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
display: grid; place-items: center;
font: 800 1.15rem var(--font-display); color: var(--on-accent);
background: linear-gradient(135deg, var(--oro-300), var(--oro-500) 60%, var(--oro-600));
box-shadow: 0 3px 10px rgba(255,171,0,.28);
}
.pasos b { display: block; color: var(--text); font-weight: 800; font-size: var(--t-1); line-height: 1.25; margin-bottom: .45rem; }
.pasos div { color: var(--text-2); font-size: var(--t--1); line-height: 1.65; }
@media (max-width: 560px) { .pasos li { flex-direction: column; gap: .8rem; } }
/* ============================================================================
PROCESO.PHP — servicios, tres pasos, preguntas, QR, banda final
============================================================================ */
.seccion { padding: var(--s-section) 0; }
.seccion-alt { background: var(--bg-3); border-block: 1px solid var(--line); }
.seccion > .wrap > .eyebrow, .seccion-alt .eyebrow { text-align: center; }
.seccion h2 { font-size: var(--t-3); max-width: 26ch; margin: 0 auto .8rem; text-align: center; }
.seccion .sub { color: var(--text-2); max-width: 62ch; margin: 0 auto var(--s-6); text-align: center; }
.servicios { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
/* El levantón y el filete que gira los pone LA TARJETA SELECCIONABLE, arriba:
es el mismo efecto que en las ramas de la portada y en los tres pasos, que
es justo lo que pidió Torre. Aquí solo queda lo propio de esta tarjeta.
(En producción esto era .l-service:hover, landing.css:326: translateY(-6px)
+ --l-shadow-lift. La v4 lo perdió al fundir landing.css en home.css; vuelve
dentro del componente común, no como una regla suelta más.) */
.servicio { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.servicio:hover, .servicio:focus-within {
border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
/* height:auto obligatorio: la imagen lleva width/height como atributo para
que el navegador reserve el hueco, y sin esto el atributo gana y la
ilustración sale estirada (pasó el 2026-08-12: 248x880 en vez de 248x186). */
.servicio img { width: 100%; height: auto; display: block; aspect-ratio: 1168 / 880; object-fit: cover; }
.servicio-cuerpo { padding: 1.15rem 1.25rem 1.35rem; }
.servicio h3 { font-size: var(--t-1); margin-bottom: .4rem; }
.servicio p { color: var(--text-2); font-size: var(--t--1); margin: 0; }
.pasos-3 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); counter-reset: p3; }
.pasos-3 .card { border-top: 4px solid var(--accent-2); }
/* ---------------------------------------------------------------------------
LA VIÑETA DE CADA PASO (proceso.php y credito.php) — Torre, 2026-09-04:
"los de abajo tienen que llevar algo de diseño con el mismo estilo para
seguir la rima".
Las cuatro tarjetas de servicio de arriba llevan ilustración; estas llevaban
número y texto y cortaban el ritmo. La viñeta les da el mismo peso visual
sin pedir un archivo nuevo: es SVG en línea, así que no descarga nada y
sigue al tema porque se pinta con los tokens.
La medalla de fondo es la misma que la del logo de la cabecera y la misma
que la moneda de proceso.php: el sitio ya tiene un vocabulario de formas y
esto lo habla, no inventa otro. */
.paso-viñeta {
width: 100%; height: clamp(84px, 12vw, 104px);
display: grid; place-items: center;
margin: 0 0 var(--s-4);
border-radius: var(--r-card);
background:
radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 68%),
var(--bg-3);
border: 1px solid var(--line-2);
}
.paso-viñeta svg { width: clamp(64px, 9vw, 82px); height: auto; display: block; }
/* La rima con las ilustraciones de arriba: el trazo estructural en el azul de
texto (lo que sostiene el dibujo) y el acento en el oro de texto (lo que el
cliente hace). Los dos tokens ya están medidos AA en los dos temas, así que
la viñeta no puede quedarse invisible en tema oscuro. */
.paso-viñeta .v-trazo { stroke: var(--accent-2-text); }
.paso-viñeta .v-acento { stroke: var(--accent-text); }
/* Al seleccionar la tarjeta la viñeta responde con ella: un punto de escala,
nada más. Se apaga con movimiento reducido junto con el resto del efecto. */
.paso-viñeta svg { transition: transform var(--dur-2) var(--ease-out); }
:is(.pasos-3 .card, .pasos li):is(:hover, :focus-within) .paso-viñeta svg { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.paso-viñeta svg { transition: none; }
:is(.pasos-3 .card, .pasos li):is(:hover, :focus-within) .paso-viñeta svg { transform: none; }
}
.pasos-3 h3 { font-size: var(--t-1); margin-bottom: .4rem; display: flex; align-items: baseline; gap: .6rem; }
.pasos-3 h3::before {
counter-increment: p3; content: counter(p3);
font: 800 var(--t--1) var(--font-display); color: var(--accent-2-text);
}
.pasos-3 p { color: var(--text-2); font-size: var(--t--1); margin: 0; }
/* Las preguntas NO van numeradas: no son una secuencia, son respuestas a lo
que el cliente ya trae en la cabeza. Numerarlas le inventaría un orden. */
.qa { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.qa h3 { font-size: var(--t-1); margin-bottom: .6rem; }
.qa p { color: var(--text-2); font-size: var(--t--1); }
.qa p:last-child { margin-bottom: 0; }
.qa strong { color: var(--text); }
.nota {
margin: var(--s-5) 0 0; padding: 1.1rem 1.25rem;
border-left: 3px solid var(--accent); border-radius: var(--r-ctl);
background: var(--accent-soft); color: var(--text-2); font-size: var(--t--1);
}
.nota strong { color: var(--text); }
.split-2 { display: grid; gap: var(--s-6); grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: center; }
@media (max-width: 860px) { .split-2 { grid-template-columns: minmax(0,1fr); } }
.split-2 h2, .split-2 .sub, .split-2 .eyebrow { text-align: left; margin-inline: 0; }
.qr-card { text-align: center; }
/* height:auto y max-width: sin esto el QR se estiraba a 220x512, y un código
deformado puede dejar de escanearse. Lección del 2026-08-12. */
.qr-card img { width: 100%; height: auto; max-width: 220px; border-radius: var(--r-ctl); }
.qr-card p { font-size: var(--t--2); color: var(--text-2); margin: .9rem 0 0; }
/* La banda de llamada a la acción: medianoche, sin lluvia de monedas.
Aquí llueven 12 de las 22 monedas; las otras 10 caen en el hero. */
.cta-band {
border-radius: var(--r-hero); padding: clamp(2.4rem, 6vw, 4rem) var(--s-block);
text-align: center; position: relative; overflow: clip;
}
.cta-band::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(60% 90% at 50% 0%, rgba(255,171,0,.16), transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: var(--t-3); max-width: 24ch; margin: 0 auto .8rem; }
.cta-band p { color: var(--band-text-2); max-width: 58ch; margin: 0 auto var(--s-5); }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
/* ============================================================================
LA LLUVIA DE MONEDAS — proceso.php, hero y banda final
SE QUEDA. Decisión de Torre del 2026-09-03. Cada moneda es un disco dorado
con el logo de la casa acuñado encima: el filtro lo lleva a tonos de oro
oscuro para que se lea como grabado en el metal y no como una calcomanía.
DOS ANIMACIONES EN DOS ELEMENTOS DISTINTOS, a propósito: la de fuera cae
(.coin-drop, translateY) y la de dentro gira (.coin, rotateY). En el mismo
elemento se pisarían, porque las dos escriben en `transform`.
Solo transform y opacity: ni una propiedad que obligue al navegador a
recalcular la página. Y pointer-events:none en los TRES niveles —
contenedor, moneda e imagen — para que jamás intercepte un clic. No es
redundancia inútil: el contenedor bastaría, pero si mañana alguien le pone
position o z-index a .coin, los otros dos siguen cubriendo.
============================================================================ */
.coin-rain {
position: absolute; inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* Gana a `.cta-band > * { position: relative }`, que si no dejaría la lluvia
dentro del flujo y estirando la banda. */
.cta-band > .coin-rain { position: absolute; }
.coin-drop {
position: absolute;
top: -80px;
left: var(--x, 50%);
pointer-events: none;
animation: coin-fall var(--t, 7s) linear var(--d, 0s) infinite;
will-change: transform;
}
.coin {
display: flex; align-items: center; justify-content: center;
width: var(--size, 46px); height: var(--size, 46px);
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle at 34% 26%, #FFF0C0 0%, var(--oro-300) 30%,
#F0A81E 58%, #C07A0C 82%, #8F5A08 100%);
box-shadow:
inset 0 0 0 2px rgba(255,246,214,.55),
inset 0 -3px 6px rgba(120,70,5,.45),
0 3px 8px rgba(0,0,0,.35);
animation: coin-spin var(--spin, 3.4s) linear infinite;
will-change: transform;
}
.coin img {
width: 68%; height: 68%; object-fit: contain;
pointer-events: none;
/* Acuñado en el metal: el logo se lleva a oro oscuro para que parezca
relieve sobre la moneda en vez de una imagen pegada encima. */
filter: sepia(1) saturate(2.4) hue-rotate(-14deg) brightness(.6) contrast(1.35);
opacity: .92;
}
/* La distancia de caída es una variable porque las dos zonas donde llueve
tienen alturas muy distintas: la banda del final ronda los 350px y el hero
pasa de 700px. Con un valor fijo, en el hero las monedas se detendrían a
media pantalla, como colgadas. */
@keyframes coin-fall {
0% { transform: translateY(0); opacity: 0; }
8% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(var(--caida, 520px)); opacity: 0; }
}
@keyframes coin-spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
/* Lluvia del hero: cae más lejos, y va en la capa 1 para quedar por encima de
la foto y del velo medianoche pero por debajo del texto, que está en la 2
(.hero .wrap). */
.coin-rain--hero { --caida: 1000px; z-index: 1; }
/* En pantallas chicas caen 6 en vez de 12: menos batería y menos ruido visual
sobre un texto que ahí ya va apretado. */
@media (max-width: 640px) {
.coin-drop:nth-child(n + 7) { display: none; }
}
/* Quien pidió menos movimiento no quiere una lluvia en la pantalla. */
@media (prefers-reduced-motion: reduce) {
.coin-rain { display: none; }
}
/* Reveal al hacer scroll (assets/js/landing.js añade .js y .revealed).
Sin JavaScript nada queda escondido: la regla solo aplica bajo .js. */
.js .reveal-scroll { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js .reveal-scroll.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal-scroll { opacity: 1; transform: none; transition: none; }
}
/* ============================================================================
PRIVACIDAD.PHP — documento legal
============================================================================ */
.legal { max-width: 78ch; }
.legal h2 { font-size: var(--t-2); margin: var(--s-6) 0 .6rem; }
.legal h3 { font-size: var(--t-1); margin: var(--s-5) 0 .4rem; }
.legal p, .legal li { line-height: 1.75; color: var(--text-2); }
.legal ul { padding-left: 1.2rem; margin: 0 0 var(--s-4); }
.legal li { margin-bottom: .4rem; }
.legal strong { color: var(--text); }
.legal .destacado {
border-left: 3px solid var(--accent); padding: 1rem 1.2rem; margin: var(--s-5) 0;
border-radius: var(--r-ctl); background: var(--accent-soft);
}
.legal-fin { padding-bottom: var(--s-section); }
/* ============================================================================
EMPEZAR.PHP — la pantalla del código QR
Sin menú a propósito (decisión de Torre, 2026-08-12): quien llega aquí
acaba de escanear con el teléfono, de pie, y tiene que decidir UNA cosa.
============================================================================ */
.qr-entrada {
min-height: 100svh; display: grid; place-items: center;
padding: var(--s-5) var(--gutter) var(--s-6);
background: radial-gradient(60% 45% at 50% 0%, rgba(255,171,0,.13), transparent 70%),
radial-gradient(70% 50% at 50% 100%, rgba(46,144,255,.10), transparent 70%),
var(--band-bg);
color: var(--band-text);
}
.qr-entrada h1, .qr-entrada h2 { color: var(--band-text); }
.qr-entrada .caja { width: min(560px, 100%); }
.qr-entrada .top { text-align: center; margin-bottom: var(--s-5); }
/* La marca en vertical: el emblema arriba y el nombre debajo. En la barra
pegajosa el nombre se esconde por debajo de 420px para dejarle sitio al
botón; aquí no puede esconderse (es la ÚNICA señal de dónde aterrizó quien
acaba de escanear el QR) y en fila se salía de un teléfono de 375px. */
.qr-entrada .top .brand { flex-direction: column; justify-content: center; gap: .5rem; }
.qr-entrada .top .brand .brand-medalla { width: 64px; height: 64px; }
.qr-entrada .brand .name { display: inline; white-space: normal; text-align: center; }
/* Esta pantalla es medianoche fija, no sigue al tema. Sin estas dos líneas la
marca tomaba los colores del tema CLARO (tinta #0B1830 y oro-800 #8A5A00)
sobre el azul noche: 2.8:1, prácticamente invisible. Medido con
contraste-pixel.js el 2026-09-02 sobre la captura 375-claro-empezar. */
.qr-entrada .brand { color: var(--band-text); }
.qr-entrada .brand .name b { color: var(--oro-400); }
.qr-entrada h1 { font-size: var(--t-3); margin: .8rem 0 .5rem; }
.qr-entrada .sub { color: var(--band-text-2); margin: 0 auto; max-width: 44ch; }
.opts { display: grid; gap: .8rem; }
.opt {
display: block; text-decoration: none; color: var(--band-text);
background: var(--band-bg-2); border: 1px solid var(--band-line);
border-radius: var(--r-card); padding: 1.1rem 1.15rem;
transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1);
}
/* El levantón, la sombra y el filete que gira los pone LA TARJETA
SELECCIONABLE (arriba): .opt está en su lista. Aquí solo queda el borde de
color propio de cada puerta, que es la regla de color con significado. */
.opt-k { font: 800 var(--t--2) var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
.opt h2 { font-size: var(--t-2); margin: .5rem 0 .4rem; }
.opt p { margin: 0; color: var(--band-text-2); font-size: var(--t--1); }
.opt .go { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; font-weight: 700; font-size: var(--t--1); min-height: var(--tap); }
.opt-credito { border-color: rgba(255,171,0,.28); }
.opt-credito .opt-k, .opt-credito .go { color: var(--oro-400); }
.opt-credito:hover { border-color: var(--oro-500); }
.opt-capital { border-color: rgba(46,144,255,.28); }
.opt-capital .opt-k, .opt-capital .go { color: var(--azul-400); }
.opt-capital:hover { border-color: var(--azul-500); }
.ayuda { margin-top: var(--s-5); text-align: center; color: var(--band-text-2); font-size: var(--t--1); }
.ayuda a {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap); padding: 0 1.15rem; margin-top: .5rem;
color: var(--oro-400); font-weight: 700; text-decoration: none;
border: 1px solid rgba(255,171,0,.35); border-radius: var(--r-pill);
touch-action: manipulation;
}
.ayuda a:hover { border-color: var(--oro-500); }
.legal-min { margin-top: var(--s-5); text-align: center; font-size: var(--t--2); color: var(--band-text-2); line-height: 1.5; }
/* ============================================================================
MEDIDOR Y SACO — las dos ilustraciones vivas de la portada
Son transiciones disparadas por el visitante (hover, foco o entrar en
pantalla), no bucles.
============================================================================ */
.gauge-num { font: 700 2.6rem var(--font-display); letter-spacing: -.02em; }
#arcFill { transition: stroke-dasharray 1.5s cubic-bezier(.25,.9,.25,1); }
#needle { transition: transform 1.5s cubic-bezier(.34,1.2,.4,1); transform-origin: 160px 152px; }
.gauge-label { font: 800 var(--t--2) var(--font-body); letter-spacing: var(--track-caps); text-transform: uppercase; }
#bagFill { transition: transform 1.4s cubic-bezier(.25,.9,.25,1); transform-origin: 50% 100%; }
/* Las cuatro monedas que caen dentro del saco de dinero. SE LLAMAN
.saco-moneda y no .coin: ese nombre ya es de la LLUVIA de proceso.php.
Cuando landing.css y home.css eran dos hojas en dos páginas distintas la
colisión no existía; al fundirlas en una sola, este `.coin { opacity: 0 }`
—que va después— apagaba las 22 monedas de la lluvia y la dejaba invisible
sin dar ningún error. Detectado el 2026-09-03 midiendo el estilo calculado,
no a ojo: en la captura simplemente no salía nada, que es la peor clase de
fallo. */
.saco-moneda { opacity: 0; }
.branch.on .saco-moneda { animation: drop .85s cubic-bezier(.4,.1,.7,1) forwards; }
.branch.on .saco-moneda:nth-of-type(2) { animation-delay: .16s; }
.branch.on .saco-moneda:nth-of-type(3) { animation-delay: .32s; }
.branch.on .saco-moneda:nth-of-type(4) { animation-delay: .48s; }
@keyframes drop {
0% { opacity: 0; transform: translateY(-46px) scale(.7); }
25% { opacity: 1; }
85% { opacity: 1; transform: translateY(38px) scale(1); }
100% { opacity: 0; transform: translateY(44px) scale(1); }
}
/* ============================================================================
EL ELECTOR DE DOS CAMINOS — "¿Reparar mi crédito o buscar capital?"
LA MONEDA GIRA. La v3 la había retirado; Torre dijo que no (2026-09-04) y
vuelve tal cual: 1980 grados en 1.15s con cubic-bezier(.3,.9,.35,1), el
mismo giro de producción. Es la metáfora entera de la portada —la moneda
cae de un lado o del otro, y los dos lados son de la casa— y eso no es
adorno: es el argumento.
Se llaman .elector-moneda / .elector-cara y NO .coin3d / .coin-face, que
eran los nombres de producción. Motivo medido, no estético: en este archivo
ya viven .coin, .coin-drop y .coin-rain (la lluvia de 22 monedas de
proceso.php). Cuando landing.css y home.css eran dos hojas separadas los
dos juegos de nombres no se veían; fundidas en una sola, un '.coin' de más
apagó las 22 monedas sin dar un solo error. El prefijo .elector- mantiene
los dos vocabularios separados para siempre.
Sin JavaScript el visitante no pierde nada: el título, la ilustración y el
botón azul lo llevan al mismo sitio; solo se queda sin el giro.
============================================================================ */
.elector {
margin: .9rem 0 .2rem; padding: 1.1rem 1.2rem 1.2rem; text-align: center;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
border-radius: var(--r-card); background: var(--accent-soft);
}
.elector[hidden] { display: none; }
/* LA MONEDA. Dos caras de verdad, una a cada lado de un plano en 3D:
backface-visibility oculta la de atrás, así que al girar sobre su eje Y se
ve alternarse "Crédito" y "Capital" — que es exactamente lo que el panel
está preguntando. aria-hidden en el marcado: para un lector de pantalla la
información son las dos opciones de abajo, no el dibujo. */
.elector-moneda {
width: 76px; height: 76px; margin: 0 auto .2rem; position: relative;
transform-style: preserve-3d;
}
.elector-moneda.gira { animation: coinGira 1.15s cubic-bezier(.3,.9,.35,1) forwards; }
.elector-cara {
position: absolute; inset: 0; display: grid; place-items: center;
border-radius: 50%; backface-visibility: hidden;
font: 900 .74rem/1 var(--font-body); letter-spacing: .02em;
color: var(--on-accent);
background: linear-gradient(150deg, var(--oro-300), var(--oro-500) 55%, var(--oro-600));
box-shadow: inset 0 0 0 3px rgba(36,22,10,.22), 0 6px 18px rgba(0,0,0,.35);
}
.elector-cara-cruz { transform: rotateY(180deg); }
/* 1980 grados = cinco vueltas y media: acaba mostrando la cara contraria a la
que empezó, que es lo que hace que se lea como una moneda lanzada y no como
un icono que da vueltas. El 55% con scale(1.14) es el momento en que la
moneda está en el aire. */
@keyframes coinGira {
0% { transform: rotateY(0deg) scale(1); }
55% { transform: rotateY(900deg) scale(1.14); }
100% { transform: rotateY(1980deg) scale(1); }
}
/* La animación es adorno; la elección es la información. Quien pidió menos
movimiento ve la moneda quieta —de cara, no de canto— y las dos opciones
exactamente igual. Sin esto, la regla global la dejaría en su último cuadro
(rotateY(1980deg) = media vuelta) y la moneda aparecería volteada de golpe. */
@media (prefers-reduced-motion: reduce) {
.elector-moneda.gira { animation: none; transform: none; }
}
.elector h4 { margin: 0 0 .3rem; font-size: var(--t-1); font-family: var(--font-display); }
.elector > p { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--t--1); }
.elector-opciones { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
@media (max-width: 560px) { .elector-opciones { grid-template-columns: minmax(0,1fr); } }
.elector-op {
display: block; padding: .9rem 1rem; border-radius: var(--r-ctl); text-decoration: none;
border: 1px solid var(--line); background: var(--bg-2); min-height: var(--tap);
transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1);
}
.elector-op:hover { transform: translateY(-2px); }
.elector-op b { display: block; color: var(--text); font-size: 1rem; margin-bottom: .15rem; }
.elector-op span { display: block; color: var(--text-2); font-size: var(--t--1); line-height: 1.45; }
.elector-op-credito:hover { border-color: var(--accent); }
.elector-op-capital:hover { border-color: var(--accent-2); }
.elector-cerrar {
margin-top: .85rem; min-height: var(--tap); padding: 0 1rem;
background: transparent; border: 0; cursor: pointer;
color: var(--text-2); font: 600 var(--t--1) var(--font-body); text-decoration: underline;
}
/* La zona sensible sobre las moneditas del saco. Va ENCIMA del enlace porque
anidar un botón dentro de un es HTML inválido y rompe el teclado. */
.elector-hit {
position: absolute; top: 2%; left: 50%; transform: translateX(-16%);
min-width: 92px; min-height: var(--tap); border: 0; background: transparent;
cursor: pointer; border-radius: var(--r-pill); padding: 0; z-index: 3;
}
/* LA PISTA "TÍRALA". Aparece al pasar el ratón o al enfocar con el teclado
sobre las moneditas del saco: sin ella, nadie adivina que ese trozo del
dibujo se puede pulsar. Es una transición disparada por el visitante, no un
bucle, y por eso no cuenta como movimiento de fondo. */
.elector-hit:hover ~ .elector-pista,
.elector-hit:focus-visible ~ .elector-pista { opacity: 1; transform: translate(34%, 0); }
.elector-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.elector-pista {
position: absolute; top: 1%; left: 50%; transform: translate(34%, -4px);
font: 800 .76rem var(--font-body); letter-spacing: .04em; text-transform: uppercase;
color: var(--accent-text); opacity: 0; pointer-events: none; z-index: 3;
transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.stage { position: relative; }