/* ========================================================================== aire-secciones.css · El aire de las secciones de solo texto (2026-08-07) ========================================================================== El CEO, mirando «El paquete de mobiliario» en `/es/financiacion/`: «hay secciones con mucho aire que son solo texto, ponlo full». Lo que veía, medido a 1440 puntos: un párrafo de 501,3 puntos dentro de una fila de 1248, con 746,8 puntos (el 59,8 %) vacíos a su derecha y nada que los ocupe. En esa sección TODO lo demás llega de lado a lado: el titular (1248), la pareja de tarjetas de precio (618 + 618), la línea de cierre (1248) y los rótulos (1248). El párrafo era el único que se estrechaba. ┌──────────────────────────────────────────────────────────────────────┐ │ QUÉ ES DEFECTO Y QUÉ NO │ └──────────────────────────────────────────────────────────────────────┘ Un texto estrecho NO es un defecto: es tipografía. Este sistema declara la medida de lectura a propósito (`max-width: 46ch` en `.lead`, `22ch` en los rótulos de cifra) y un párrafo a 46ch se lee mejor que uno a 120. Defecto es otra cosa: un párrafo que se estrecha SIN QUE HAYA NADA AL LADO, o sea que la fila reserva sitio para algo que no existe. Para separarlos se barrieron las nueve páginas principales en los dos idiomas, se buscaron los bloques de solo texto (sin imágenes, botones ni campos dentro) y de cada uno se miró, subiendo por TODA la cadena de padres, si algún hermano se solapa con él en vertical. Mirar solo a los hermanos inmediatos no vale: aquí la clase del diseño cuelga del DIV que envuelve al widget, así que un párrafo puede parecer solo y tener una foto al lado dos niveles más arriba. Barrido: `website/_scripts/barrer-secciones-con-aire.py` Cadena de padres: `website/_scripts/medir-aire-candidatas.py` Tanteo de anchos: `website/_scripts/tantear-medida-de-lectura.py` ┌──────────────────────────────────────────────────────────────────────┐ │ LA TRAMPA DE `ch`: 46ch NO SON 46 CARACTERES │ └──────────────────────────────────────────────────────────────────────┘ La unidad `ch` mide el ancho del CERO, y en Space Grotesk el cero es bastante más ancho que la letra media. Medido sobre el texto real de estos bloques (se mide el texto entero sin ajuste de línea y se divide entre sus caracteres), el avance medio sale a 8,00-8,37 puntos por carácter. O sea: 46ch = 501,3 puntos -> 60-62 caracteres por línea 58ch = 632,0 puntos -> 75-79 caracteres 78ch = 850,0 puntos -> 102-106 caracteres Esto cambia el diagnóstico. Los seis párrafos de este arreglo no estaban solo desaprovechando la fila: a 60-62 caracteres estaban por DEBAJO de la banda cómoda de lectura (unos 70 a 80). Ensancharlos es lo correcto por tipografía antes incluso que por el hueco. Y de paso deja apuntado, para quien decida: las ocho entradillas que ya llevan `lon-el-lead-wide` (78ch) van a 102-106 caracteres por línea, o sea por ENCIMA de la banda. Aquí no se tocan (no es lo que se pidió), pero el dato está medido por si el CEO quiere revisarlas. ┌──────────────────────────────────────────────────────────────────────┐ │ POR QUÉ «FULL» NO PUEDE SER UNA SOLA COLUMNA │ └──────────────────────────────────────────────────────────────────────┘ A 17 puntos de cuerpo, 78 caracteres ocupan unos 630 puntos. La fila mide 1248. O sea que un párrafo de una sola columna a medida de lectura NO PUEDE llenar la fila: es aritmética, no una opinión. Llevarlo a 1248 de una sola columna daría 155 caracteres por línea, que se lee peor que el original. De ahí las dos salidas, una por forma de bloque: · Bloque LARGO -> dos columnas. La fila se llena entera y cada columna cae en la banda cómoda. · Bloque CORTO -> el párrafo se pone AL LADO DEL TITULAR. Así la fila se llena, y la medida estrecha deja de ser un defecto porque ya tiene algo al lado, que es justo el criterio. Es además el patrón que el sitio ya usa en el cabecero (`.hero-under`: titular a un lado, entradilla al otro). Por qué a los cortos NO se les ponen dos columnas, medido y no supuesto: con 175-207 caracteres salen 3 líneas en total, que repartidas en dos columnas dan 2 y 1. Esa línea suelta flotando en media pantalla es peor defecto que el que se venía a arreglar. Está en la captura `aire-tanteo-sanfernando-es-alrededor-c-2col-64.png`. Y por qué a los cortos no les basta con ensancharlos: a 58ch un párrafo de 3 líneas sigue dejando 616 puntos vacíos en San Fernando y 780 en El Nido. Se arregla la medida de lectura pero no el aire, que es lo que se pidió. ┌──────────────────────────────────────────────────────────────────────┐ │ NADA DE ESTO TOCA `_elementor_data` │ └──────────────────────────────────────────────────────────────────────┘ Ni el contenido, ni los metadatos, ni `assets/calc.js`. Las secciones ya son contenedores con sus hijos en el orden bueno (titular, párrafo, bloque visual); lo único que cambia es cómo se colocan esos hijos, que es CSS. La vuelta atrás es quitar esta hoja de `inc/enqueue.php`, y el sitio queda exactamente como estaba. Reglas de la casa que se respetan: sin borde grueso de color, sin letra decorativa gigante de fondo, el negro es siempre `#1C1410` (`--ink`). Esta hoja no declara ni un color: solo anchos y colocación. ========================================================================== */ /* ========================================================================== 1 · Los seis párrafos que van solos, a medida de lectura ========================================================================== EL SELECTOR, que es lo delicado. `.elementor > .e-con.lon-native > .lead` quiere decir: un `.lead` que cuelga DIRECTAMENTE de una sección de primer nivel. En esta maqueta eso identifica exactamente al párrafo que ocupa su propia fila. El párrafo del cabecero, en cambio, vive dentro de una rejilla interna, con el titular al lado: .elementor > .e-con > .e-con(rejilla 2 col) > .lead <- NO lo alcanza .elementor > .e-con.lon-native > .lead <- SÍ lo alcanza La cadena de `>` es la que hace el trabajo. No se dio por hecho: se comprobó con `website/_scripts/comprobar-alcance-selector-aire.py` sobre las once páginas en los dos idiomas y a siete anchos (390, 820, 1024, 1200, 1280, 1440 y 1728). Resultado, idéntico a los siete anchos: alcanza a CATORCE elementos y NINGUNO de los catorce tiene nada al lado. Cero falsos positivos. De esos catorce, ocho ya llevan `lon-el-lead-wide` (78ch) de una pasada anterior. El `:not([class*="lon-el-lead"])` los deja fuera: si alguien puso un ancho a mano en el `_elementor_data`, manda el suyo. Quedan los seis: financiacion es/en `mob04` «El paquete de mobiliario» san-fernando es `lon02b5` «San Fernando por dentro» san-fernando en `lon4250` el-nido es `lon03c8` «El archipiélago de Bacuit» el-nido en `lon4364` PESO. Hay que ganarle a `.lon-native.lon-native.lon-native .lead` de `elementor-native.css`, que vale (0,4,0) y es quien fija los 46ch. Este selector vale (0,5,0): cuatro clases más el `:not()` con su selector de atributo. Gana por peso, no por orden, así que aguanta aunque alguien mueva la prioridad de la cola. EL ANCHO. 58ch son 632 puntos, o sea 75-79 caracteres por línea en los seis: dentro de la banda cómoda, subiendo desde los 60-62 que tenían. Este es el suelo para todos los anchos de pantalla; de 1100 en adelante los bloques 2 y 3 lo sustituyen por su propia colocación. OJO AL PESO DE LOS BLOQUES 2 Y 3. La primera versión de esta hoja escribió los dos siguientes con selectores más cortos (`.elementor .elementor-element-mob04 .lead`, que vale (0,3,0)) y esta regla, que vale (0,5,0), les ganaba: las dos columnas se pintaban pero DENTRO de 632 puntos, y el párrafo de El Nido se quedaba en 632 en vez de los 642 de su columna. Se vio midiendo el valor calculado, no leyendo la hoja. Por eso los dos bloques de abajo repiten este mismo prefijo estructural y le añaden una clase más: quedan en (0,6,0) y ganan por peso, sin depender del orden del archivo. */ .elementor > .e-con.lon-native > .lead:not([class*="lon-el-lead"]) { max-width: 58ch; } /* ========================================================================== 2 · El bloque largo: dos columnas ========================================================================== «El paquete de mobiliario» de las dos páginas de financiación (132 y 216). Las dos usan el mismo identificador de elemento, `mob04`, así que un solo selector cubre los dos idiomas. Es el ÚNICO de los seis que da para dos columnas, y se decide por medida, no por intuición: tiene 462 caracteres en español y 636 en inglés, o sea 9 y 12 líneas al ancho de hoy. Repartido en dos columnas de 600 salen 4+3 líneas en español y 6+6 en inglés: ninguna columna se queda con una línea suelta. Los otros cuatro bloques tienen entre 172 y 207 caracteres y sí se quedarían. La cuenta a 1440 puntos, fila útil de 1248 y hueco de 48: columnas 2 de 600 puntos medida 600 / 8,056 = 74,5 caracteres por línea (banda cómoda) hueco 0 puntos. La fila se ocupa entera. alto de 217,5 a 108,8 en español (108,7 menos) de 299,1 a 135,9 en inglés (163,2 menos) POR QUÉ `column-count: 2` Y NO `columns: 30rem`. Con `column-width` el navegador decide cuántas columnas caben, y en cuanto la fila se queda corta mete UNA sola columna a lo ancho de la fila entera, sin tope: a 1024 puntos eso daría 121 caracteres por línea. Con el número fijo y una consulta de medios que solo lo enciende donde la fila da para dos, el resultado es predecible a cualquier ancho. Por debajo de 1100 manda el bloque 1 (58ch). EL CORTE EN 1100. La fila útil sale a viewport menos un 5 % largo por debajo de 1440, así que a 1100 son unos 1045 puntos: dos columnas de 498, que son 62 caracteres. A 1024 la fila mide 972,8 y las columnas se quedarían en 462 (57 caracteres), demasiado poco para partir un párrafo. Medido en `comprobar-alcance-selector-aire.py`. El hueco de 48 puntos (`--s-7`) es el mínimo para que dos columnas de texto no se lean como una sola línea larga. Con los 12 puntos que separan las dos tarjetas de precio de abajo el texto casi se tocaría. */ @media (min-width: 1100px) { .elementor > .e-con.lon-native > .lead.elementor-element-mob04:not([class*="lon-el-lead"]) { max-width: none; column-count: 2; column-gap: var(--s-7, 48px); } } /* ========================================================================== 3 · Los bloques cortos: el párrafo al lado del titular ========================================================================== «San Fernando por dentro: obra, comunidad y entorno» (130 y 212) y «El archipiélago de Bacuit, a la puerta del loft» (131 y 214). Las dos secciones tienen la misma forma, y es la forma la que permite el arreglo sin tocar el `_elementor_data`: son un contenedor en columna con tres hijos en este orden. 1 · `.section-head` el titular 2 · `.lead` el párrafo 3 · `.photo-mosaic` / `.connect-arc` el bloque de fotos Pasan a rejilla de dos columnas: titular a la izquierda, párrafo a la derecha, y todo lo demás de lado a lado. El orden del documento no cambia, así que el lector de pantalla y el recorrido con el tabulador siguen leyendo titular, párrafo y fotos, igual que antes. Medido a 1440 puntos, en español: San Fernando El Nido hueco al lado 746,8 -> 0 910,8 -> 0 ancho del párrafo 501,3 -> 564 501,3 -> 642 medida 60 -> 67 caracteres 63 -> 80 caracteres titular 1 línea -> 2 1 línea -> 2 alto de sección 783,6 -> 725,5 876,3 -> 791,0 recorrido ahorrado 58,1 puntos 85,3 puntos EL REPARTO 1,1 / 1. El titular es lo que manda en estas secciones y se lleva la columna ancha. Con 1,1 contra 1 el párrafo se queda en 564 puntos en las secciones de contenedor y en 642 en la banda a sangre de El Nido, o sea dentro de la banda cómoda en las dos. EL TOPE DE 60ch. La banda de El Nido va a sangre, así que su fila crece con la pantalla: 1412 puntos a 1440, pero 1700 a 1728. Sin tope, ahí el párrafo se iría a 773 puntos (97 caracteres). Con 60ch se queda en 653,8 (unos 82) y lo que sobra se lo queda la columna, no el párrafo. `align-items: end` alinea los dos por abajo, que es como se ven en la maqueta del cabecero. Alineados por arriba, el titular (más alto de línea) y el párrafo se descuadran. `minmax(0, ...)` en las dos columnas, no `1.1fr 1fr` a secas: el mínimo automático de una celda de rejilla es el contenido, así que una palabra larga del titular puede ensanchar su columna y desbordar la fila. Con el mínimo en 0 la columna puede encogerse y el texto parte donde tiene que partir. SOLO DE 1100 EN ADELANTE, igual que el bloque 2. Por debajo el titular y el párrafo se quedan apilados: partir la fila en dos con 972,8 puntos deja columnas de 454 (54 caracteres) y el titular pierde el sitio. */ @media (min-width: 1100px) { /* San Fernando: 130 (es) y 212 (en). El Nido: 131 (es) y 214 (en). */ .elementor .elementor-element-lon02b7, .elementor .elementor-element-lon4252, .elementor .elementor-element-lon03ca, .elementor .elementor-element-lon4366 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-8, 64px); align-items: end; } .elementor .elementor-element-lon02b7 > .section-head, .elementor .elementor-element-lon4252 > .section-head, .elementor .elementor-element-lon03ca > .section-head, .elementor .elementor-element-lon4366 > .section-head { grid-column: 1; } /* Mismo prefijo estructural que el bloque 1 más la clase de la sección: (0,6,0) contra los (0,5,0) de aquél. Si no, el tope de 58ch de arriba gana y el párrafo no llega a llenar su columna. */ .elementor > .e-con.lon-native.elementor-element-lon02b7 > .lead:not([class*="lon-el-lead"]), .elementor > .e-con.lon-native.elementor-element-lon4252 > .lead:not([class*="lon-el-lead"]), .elementor > .e-con.lon-native.elementor-element-lon03ca > .lead:not([class*="lon-el-lead"]), .elementor > .e-con.lon-native.elementor-element-lon4366 > .lead:not([class*="lon-el-lead"]) { grid-column: 2; max-width: 60ch; } /* Todo lo que no sea el titular ni el párrafo ocupa las dos columnas. Se escribe por descarte y no nombrando `.photo-mosaic` y `.connect-arc`, para que si mañana alguien añade un bloque a la sección se coloque bien solo en vez de meterse en la columna del titular. */ .elementor .elementor-element-lon02b7 > *:not(.section-head):not(.lead), .elementor .elementor-element-lon4252 > *:not(.section-head):not(.lead), .elementor .elementor-element-lon03ca > *:not(.section-head):not(.lead), .elementor .elementor-element-lon4366 > *:not(.section-head):not(.lead) { grid-column: 1 / -1; } }