/* ╔═══════════════════════════════════════════════════════════════════════╗ ║ ESCALA · un solo sistema de espacio 17-ago-2026 ║ ║ ║ ║ Medido antes de tocar: la página usaba 44 medidas distintas de ║ ║ separación — 2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,19,22,27,29,38… ║ ║ Casi todos los enteros seguidos. Eso no se ve como un valor mal ║ ║ puesto; se ve como que nada está alineado con nada, y es lo que hace ║ ║ que una página bien hecha se sienta descuidada. ║ ║ ║ ║ La escala NO es una impuesta de fuera: sale de lo que la página ya ║ ║ usa. Los dos valores más repetidos eran 14px (194 veces) y 9px (178), ║ ║ así que el 14 se queda como paso base — es el pulso propio de esta ║ ║ página y el que el cliente usa a mano. Los demás pasos crecen desde ahí a ║ ║ razón de ~1,4, que es lo que hace que una escala se sienta musical. ║ ║ ║ ║ 4 · 8 · 14 · 20 · 28 · 40 · 56 · 80 ║ ║ ║ ║ Cómo absorbe lo viejo: 2,3,5 → 4 · 6,7,9,10,11 → 8 · ║ ║ 12,13,16,17 → 14 · 19,22 → 20 · 27,29 → 28 · 38 → 40 ║ ║ ║ ║ ⚠ NO TOCA los juguetes que ya funcionan y están medidos con el cliente: ║ ║ t03 (7 días), t04b (chat), f02 (calculadora), f01 (teléfono rubros). ║ ║ Esos llevan su espaciado calibrado a mano y aquí se dejan en paz. ║ ╚═══════════════════════════════════════════════════════════════════════╝ */ :root{ --s1:4px; /* pelos: un icono de su texto */ --s2:8px; /* dentro de una píldora, línea a línea */ --s3:14px; /* EL PASO BASE de esta página */ --s4:20px; /* relleno de tarjeta */ --s5:28px; /* de un bloque al siguiente */ --s6:40px; /* cabecera a contenido */ --s7:56px; /* respiro de sección */ --s8:80px; /* aire grande: hero y cierre */ } /* ── 0 · EL GUARDIÁN ─────────────────────────────────────────────────────── Mi cabecera decía "no toca los juguetes" y era MENTIRA: `.card` y `.window-card` son clases genéricas que en este HTML también llevan `window-card t03-window`, `t03-remate card`, `t04b-fono card--contorno` y `window-card f02-card`. O sea que ya les había cambiado el relleno a la ventana de los 7 días, al teléfono del chat y a la tarjeta de la calculadora. Lo encontró el revisor de colisiones y lo confirmé en el HTML. El guardián lleva ` *` al final a propósito: sin él, `:not(:where(#id))` evalúa el ELEMENTO (cuyo id nunca es el de la sección) y no sirve de nada. Con ` *` mira si es descendiente. `:where()` no aporta especificidad, así que proteger sale gratis. */ :root{ --no-tocar: 0 } /* marcador, para encontrar este bloque de un grep */ /* ── 1 · TARJETAS: todas respiran igual ────────────────────────────────── */ /* Nueve componentes que se leen como el mismo objeto tenían rellenos distintos. Uno solo, y el más apretado es el que más gana. */ .card:not(:where(#t03-sietedias,#t04b-chat,#f01-como,#f02-calc) *), /* 20-ago · FUERA `.window-card` y `.f03-grid > *`. Una ventana retro necesita la barra azul PEGADA al borde de la tarjeta: es lo que la hace parecer una ventana. Este relleno se la metía 20px hacia adentro y dejaba un marco blanco alrededor — medido: barra 22,2px por dentro del borde en las 3 tarjetas de precios. Eso es lo que el cliente ve como "el cuadrado blanco se ve más grande que la parte azul", y pasaba igual en el formulario del hero y en el del cierre. No se quedan sin aire: `.window-body` ya trae su propio relleno (clamp(1.2rem,3vw,1.8rem)). 23-ago: .f04-card/.f04-list salieron de estas listas — el hslider de f04 murió (lo reemplazaron los bloques .f04-crit, que traen su propio aire). */ .t05-negocio, .t02-paso, .z01-wrap .acc-item{ padding:var(--s4) } /* ── 2 · UN SOLO HUECO ENTRE HERMANOS ──────────────────────────────────── */ .grid-2{ gap:var(--s4) } .grid-3{ gap:var(--s3) } .f03-grid{ gap:var(--s3) } .t02-pasos{ gap:var(--s3) } .t01-chips, .f01-chips, .f05-chips{ gap:var(--s2) } .pills-stack{ gap:var(--s2) } .list-plus{ gap:var(--s2) } .cta-band{ gap:var(--s3) } .t06-grid{ gap:var(--s4) } /* ── 3 · RITMO DE SECCIÓN ──────────────────────────────────────────────── */ /* Antes cada sección traía su propio respiro. Ahora todas el mismo, y la jerarquía se marca con la cabecera, no con vacíos de distinto tamaño. ⚠ MEDIDO: el primer intento puso estos valores un escalón más arriba (56 de sección, 40 de cabecera) y la página pasó de 20,7 a 26,3 pantallas. Con 16 secciones, cada +12px de cabecera son casi +200px de scroll. Uniformar NO puede significar agrandar: la página ya era larga. Un escalón menos. */ .section{ padding-block:var(--s6) } .sec-head:not(.sec-head--mini){ margin-bottom:var(--s5) } .sec-head .kicker{ margin-bottom:var(--s2) } .sec-head .h-display{ margin-bottom:var(--s3) } .sec-head .sub{ margin-bottom:0 } .cta-band{ margin-top:var(--s5) } .note{ margin-top:var(--s4) } /* ── 4 · PIEZAS CHICAS ─────────────────────────────────────────────────── */ /* Aquí estaba escondida la mayoría de las 44 medidas: la píldora con 9, el botón con 14 y 7, la lista con 17, la comilla con 6… */ .btn:not(.btn-sm){ padding:var(--s3) var(--s5); gap:var(--s2) } .chip{ padding:var(--s2) var(--s3); gap:var(--s2) } .kicker{ letter-spacing:.14em } .t01-quote{ margin-block:var(--s4) } .t02-compromisos{ gap:var(--s3) } .marquee-item{ padding-inline:var(--s6) } /* ── 5 · TELÉFONO: la escala baja un paso ──────────────────────────────── */ /* El mismo aire en 375px se come la pantalla y obliga a scrollear de más. */ @media(max-width:760px){ .section{ padding-block:var(--s6) } .sec-head{ margin-bottom:var(--s5) } .card:not(:where(#t03-sietedias,#t04b-chat,#f01-como,#f02-calc) *), .t05-negocio,.t02-paso{ padding:var(--s3) } .grid-2,.grid-3,.f03-grid,.t02-pasos,.t06-grid{ gap:var(--s3) } .cta-band{ margin-top:var(--s5) } }