/* ========================================================================== proyectos-claim.css · SOLO paginas de proyectos (129 es / 211 en) ========================================================================== Dos encargos del CEO del 2026-08-07, los dos en estas dos paginas: 1 · EL CLAIM. El pie de foto de las dos tarjetas de «¿Cual encaja contigo?» sube ENCIMA de la imagen y cada tarjeta gana un boton. 2 · LA BANDA DE CIERRE. Un solo objetivo (que agenden la llamada), un titular que argumenta en vez de repetir el boton, y fuera el boton de comparar configuraciones de pago. Vive aparte y no dentro de `elementor-native.css` a proposito: esa hoja la tocan otras personas y esto solo afecta a dos paginas. Se encola desde `inc/enqueue.php` con la condicion `is_page([129, 211])`, siguiendo el mismo patron que `calc-amenidades.css`. NO toca ninguna hoja existente. --------------------------------------------------------------------------- 1 · POR QUE HAY VELO Y NO SOLO TEXTO --------------------------------------------------------------------------- Una foto no es un fondo. El color que hereda la caja no dice nada de lo que se lee: detras de cada letra hay el pixel que toque, y en estas dos fotos hay cielo, agua y una pared blanca de villa. Sin velo el contraste depende del encuadre, o sea que no esta garantizado. El criterio y la forma de medirlo salen de la banda de llamada de la portada (`elementor-native.css`, bloque `.cta-band--premium .scrim`): velo de tinta con degradado, medido sobre los pixeles pintados y no sobre los colores declarados, guardando el PEOR pixel de la zona del texto y comprobando aparte que la foto sigue viendose. El negro es `#1C1410`, la tinta de marca (token `--ink`), corregida hoy en todo el tema. Aqui va escrito en `rgba()` porque hace falta con alfa y `var(--ink)` es un hexadecimal sin canal alfa. --------------------------------------------------------------------------- 2 · POR QUE EL DEGRADADO SE ANCLA CON calc() Y NO CON PORCENTAJES --------------------------------------------------------------------------- El bloque del claim NO mide lo mismo en los dos idiomas. El espanol es mas largo («San Fernando: ticket de entrada mas bajo y demanda domestica todo el ano», 72 caracteres, contra 60 del ingles) y a 390 ocupa una linea mas. Con los topes del degradado en porcentaje, el velo se estiraria con el texto y la parte de arriba del claim se quedaria con menos tinta justo en el idioma que mas necesita. Por eso el velo mide `100% + FUNDIDO` de alto (100% = el alto real del bloque de texto, sea el que sea) y sus topes se anclan con `calc()` desde arriba. Asi la tinta es CONSTANTE bajo todo el texto en los dos idiomas, y el fundido son siempre los mismos pixeles por encima del bloque. --------------------------------------------------------------------------- 3 · POR QUE EL BOTON ES `.btn-primary` Y NO OTRO --------------------------------------------------------------------------- El sitio tiene conmutador de tema claro/oscuro (`ui.js` pone `data-theme` en el elemento raiz). El velo es de tinta y es oscuro SIEMPRE, en los dos temas, porque `--ink` es un primitivo y no se voltea. Un boton cuyo color dependa de la rampa semantica se apaga en uno de los dos temas encima de ese velo: `.btn-secondary` usa `--panel`, que en oscuro pasa a #2E2219: pastilla casi negra sobre velo casi negro. `.btn-ink` usa `--ink`, que en claro es el mismo color del velo. `.btn-primary` es el unico de la familia que NO se voltea: `--brand-fill` es `--rojizo` en los dos temas y `--brand-contrast` no se redefine en oscuro (`tokens.css`). Su texto tiene 5,11:1 propios contra su relleno, y ese numero no depende de la foto porque la pastilla es opaca. Es el componente de boton del sitio tal cual, sin una sola declaracion nueva: aqui solo se coloca. --------------------------------------------------------------------------- 4 · LO QUE ESTA VETADO Y NO SE USA --------------------------------------------------------------------------- Sin borde grueso de color (banda lateral o superior de 3 puntos o mas) y sin letra decorativa gigante de fondo. Las dos estan vetadas en el repo y el CEO tumbo la segunda el mismo dia en otra seccion. Tampoco se toca el alto del boton. `.btn` mide 43 puntos por diseno del sistema (`components.css`, `font: 600 15px/1` mas 14 de relleno arriba y abajo) y esta decidido dejarlo en 43 en vez de subirlo solo aqui. La medida se rehace con `website/_scripts/medir-claim-proyectos.py`. ========================================================================== */ /* ========================================================================== 1 · EL CLAIM SOBRE LA FOTO ========================================================================== */ /* `.media` ya viene con `position: relative`, `overflow: hidden` y el radio grande desde `elementor-atomic.css`. No hace falta repetirlo: solo se cuelga el claim de el. */ .lon-native .card-mini--claim .claim { position: absolute; inset: auto 0 0 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px clamp(14px, 3vw, 22px) clamp(14px, 2.6vw, 20px); } /* El velo. OJO CON `inset`, que aqui costo una tarde. Elementor declara `inset: 0` en `.e-con::before` (lo usa para su capa de fondo de contenedor). Un pseudoelemento absoluto con `top`, `bottom` Y `height` a la vez esta sobredeterminado, y en ese empate manda `top`: `bottom` se ignora. O sea que escribir solo `bottom: 0` NO basta, porque el `top: 0` de Elementor sigue puesto y gana. El sintoma es de los que enganan: el estilo calculado sale perfecto (la caja mide lo que debe y el degradado es el que se escribio), pero el velo se pinta AL REVES, creciendo hacia abajo desde lo alto del claim, con su parte opaca fuera de la tarjeta y recortada por el `overflow: hidden` de `.media`. Lo que se ve entonces es solo la cola del fundido: medido, alfa efectiva de 0,00 arriba del texto a 0,71 en el borde de abajo, cuando lo declarado era 0,72 plano. El contraste del claim se quedaba en 1,49 con el peor pixel. Se arregla escribiendo `inset` ENTERO, con `top: auto` explicito, para que mande `bottom`. `--fundido` es la altura del apagado por encima del texto. `--tinta-*` son los dos extremos de opacidad bajo el bloque: casi iguales a proposito, para que la tinta no se note escalonada detras de las lineas de texto. */ .lon-native .card-mini--claim .claim::before { content: ""; position: absolute; inset: auto 0 0 0; /* el `top: auto` es el que arregla lo de arriba */ height: calc(100% + var(--fundido)); z-index: 0; pointer-events: none; /* CUANTA TINTA. Se tanteo sobre la pagina de verdad con `website/_scripts/tantear-velo-claim.py`, que prueba cinco opacidades y apunta, para cada una, el peor pixel del texto y cuanta luz le queda a la foto. Peor caso de las dos tarjetas, a 820, que es donde mas aprieta: velo peor pixel del texto recorrido de la foto 0,72 / 0,68 6,00 -89 % 0,68 / 0,64 5,23 -87 % <-- elegido 0,64 / 0,60 4,54 -84 % 0,60 / 0,56 4,01 -81 % no llega a 4,5 0,56 / 0,52 3,54 -78 % no llega a 4,5 Se coge el mas FLOJO que pasa con margen, no el mas oscuro que pasa. El 0,64 cumple sobre el papel (4,54 contra 4,5) pero se queda sin colchon: cualquier cambio de foto, de recorte o de tipografia de respaldo lo mete por debajo. El 0,68 deja 0,73 de margen y devuelve algo de foto. El fundido pasa a ser proporcional al encoger la tarjeta a la mitad: con los 104px fijos de antes, en una tarjeta de 240 el apagado empezaba por encima del borde de arriba y entintaba la foto ENTERA. Ahora va de 40 a 80 segun el ancho, que es lo que deja una franja de foto limpia arriba en las tres medidas. */ --fundido: clamp(40px, 5vw, 80px); --tinta-baja: .68; --tinta-alta: .64; background: linear-gradient(to top, rgba(28, 20, 16, var(--tinta-baja)) 0%, rgba(28, 20, 16, var(--tinta-alta)) calc(100% - var(--fundido)), rgba(28, 20, 16, .34) calc(100% - (var(--fundido) * .52)), rgba(28, 20, 16, 0) 100%); } /* Todo lo que cuelga del claim se pinta por encima del velo. Se resuelve con z-index positivo y no con negativo en el pseudo: un `z-index: -1` dentro de un contexto de apilamiento se cuela por detras del fondo de la caja. */ .lon-native .card-mini--claim .claim > * { position: relative; z-index: 1; width: 100%; } /* La frase. Crema entera y peso 600. El peso no es capricho ni es para la cuenta de contraste: sobre foto el trazo fino se come el borde de la letra aunque el numero salga bien. Es la misma leccion que dejo escrita la banda de llamada de la portada. */ /* El cuerpo sube (de 15-17 a 18-24) porque la tarjeta bajo a la mitad de alto: con la caja corta, el claim deja de ser un pie de foto y pasa a ser LO QUE SE LEE, con la imagen acompanando. En una foto grande un cuerpo de 15 se perdia; en una franja corta manda. */ .lon-native .card-mini--claim .claim-text { font: 600 clamp(18px, 1.7vw, 24px)/1.28 var(--font-body); color: var(--cream); text-wrap: pretty; } .lon-native .card-mini--claim .claim-text p { margin: 0; } /* El boton. No es un ``: la tarjeta ENTERA ya es el enlace (`html_tag: a` en el `_elementor_data`) y un `` dentro de otro `` no es HTML valido, asi que el analizador del navegador lo sacaria fuera y romperia la tarjeta. Va como ``, que deja un solo destino, un solo tabulador y toda la tarjeta pulsable. POR QUE PASTILLA DE CREMA Y NO LA ROJIZA. La primera version uso `.btn-primary`, que es el boton de accion del sitio. Se leia bien, pero medido no se sostenia: la superficie rojiza contra el velo mas la foto daba entre 1,35 y 2,12 segun la tarjeta y la medida, muy por debajo del 3 que pide una superficie de control. El rojizo y una foto oscurecida con tinta tienen luminancias parecidas, y el contraste de luminancia es el que cuenta: que el tono sea distinto no entra en la cuenta. La crema sobre el velo mide entre 6 y 7. Y no es un boton nuevo: es exactamente lo que el sitio ya hace en `.cta-band .btn` para poner un boton encima de una superficie oscura o de marca. Mismo componente `.btn`, mismo tratamiento contextual, mismos dos primitivos. Los dos colores son primitivos FIJOS (`--cream` y `--ink` no se voltean con el tema), asi que la pastilla se comporta igual en claro y en oscuro. Encima de un velo de tinta, que tambien es fijo, eso es justo lo que hace falta: `.btn-secondary` usa `--panel` y `.btn-ink` usa `--ink`, y los dos se apagan en uno de los dos temas. */ .lon-native .card-mini--claim .claim-cta p { margin: 0; } .lon-native .card-mini--claim .claim-cta .btn { background: var(--cream); color: var(--ink); cursor: inherit; /* manda el cursor del enlace de la tarjeta */ } /* El hover de la tarjeta arrastra el boton, que es lo que hace que se lea como una sola pieza pulsable y no como dos cosas sueltas. Mismo salto que en `.cta-band .btn:hover`. */ @media (hover: hover) { .lon-native .card-mini--claim:hover .claim-cta .btn { background: var(--white); } } /* Con la frase dentro de la foto, la tarjeta se queda sin nada debajo: el hueco de la rejilla sobra. */ .lon-native .discover-grid .card-mini--claim { gap: 0; } /* EL ALTO, A LA MITAD. --------------------------------------------------------------------------- La tarjeta venia de `aspect-ratio: 1 / 1.05` (y 1/1,18 por debajo de 600) y ocupaba casi una pantalla por tarjeta: obligaba a bajar sin dar nada a cambio. El ancho no se toca, solo el alto, asi que basta con partir en dos la proporcion: 1,05 pasa a 0,525. EL SUELO DE 240 NO ES DECORATIVO, y aqui esta el porque de que a 390 y a 820 no se llegue al 50 % exacto. El claim NO encoge con la tarjeta: son dos lineas de texto, un boton de 43 y su relleno, y eso mide alrededor de 150 pase lo que pase. La proporcion partida daria 188 de alto a 390 y 199 a 820, o sea 38 y 49 puntos para la foto: no queda imagen, queda un filo. Con 240 la foto conserva una franja de verdad por encima del texto. A 1440 la tarjeta es ancha, la mitad son 322 y el suelo ni se toca: ahi el recorte es del 50 % clavado. Medido, alto de tarjeta antes y despues: 390 422,4 -> 240 (-43 %) 820 398,5 -> 240 (-40 %) 1440 644,7 -> 322 (-50 %) Si el claim no cupiera, la salida es subir este suelo, NUNCA partir la frase ni recortar el texto. */ .lon-native .card-mini--claim .media { aspect-ratio: 1 / 0.525; min-height: 240px; } /* ========================================================================== 2 · LA BANDA DE CIERRE ========================================================================== Venia con el titular gritando «AGENDA UNA LLAMADA» y el boton repitiendo «Agenda una llamada» al lado, mas un segundo boton hacia la comparativa de pagos. Dos veces la misma frase y ni una razon para pulsar, con la unica linea grande de la seccion gastada en nombrar lo que el boton ya nombra. Ahora: el titular da el motivo, una linea de apoyo pone los detalles reales (salen de las preguntas frecuentes de la pagina de contacto, no inventados) y queda una sola accion. El boton de comparar se va. No deja huerfana la comparativa: «Financiacion» y «Financing» estan en el menu principal de los dos idiomas. El fondo sigue siendo el rojizo de marca (`--brand-fill`) con crema encima, que es lo que ya hacia `.cta-band`. Aqui solo cambia el reparto. */ .lon-native .cta-band--focus { align-items: center; gap: clamp(28px, 4vw, 56px); } /* La columna de texto manda sobre la accion: es donde esta el argumento. */ .lon-native .cta-band--focus .cta-copy { display: flex; flex-direction: column; gap: 16px; flex: 1 1 min(30rem, 100%); min-width: 0; } /* El titular deja de ser un rotulo de tres palabras y pasa a ser una frase, asi que necesita mas caja que los 14ch que le da `.cta-band h2`. Se mantienen las mayusculas y la familia de display: es la firma visual de esta banda en todo el sitio y el encargo era reescribir el argumento, no cambiar el estilo. */ .lon-native .cta-band--focus h2 { max-width: 18ch; font-size: clamp(28px, 4vw, 50px); text-wrap: balance; } /* La linea de apoyo. Crema a opacidad entera, no rebajada: sobre el rojizo una crema al 80% se queda corta y esta linea lleva los datos concretos. */ .lon-native .cta-band--focus .cta-sub { font: 400 clamp(15px, 1.2vw, 16.5px)/1.6 var(--font-body); color: var(--brand-contrast); max-width: 52ch; } .lon-native .cta-band--focus .cta-sub p { margin: 0; } /* La accion. Sin `flex-wrap` ni segunda fila: solo hay un boton. */ .lon-native .cta-band--focus .cta-accion { flex: 0 0 auto; } /* Por debajo de 900 la banda se apila y el boton pasa a ocupar el ancho: es la unica accion de la seccion y a esa medida el dedo agradece el blanco. */ @media (max-width: 900px) { .lon-native .cta-band--focus { align-items: flex-start; } .lon-native .cta-band--focus h2 { max-width: 100%; } .lon-native .cta-band--focus .cta-accion, .lon-native .cta-band--focus .cta-accion .btn { width: 100%; } .lon-native .cta-band--focus .cta-accion .btn { justify-content: center; } }