/* assets/calc-amenidades.css · Amenidades de la calculadora y sección de mobiliario --------------------------------------------------------------------------- Añadida el 2026-08-07. Cubre tres cosas que no existían en el sistema de diseño y que NO tocan ninguna hoja compartida: 1. Apagar el marcado heredado del widget de la calculadora (los dos conmutadores, la línea de degradado y la casilla suelta del trastero). `assets/calc.js` los quita del DOM además de esto; el CSS está para que no asomen entre que llega el marcado y corre el guion, que va con defer. 2. La sección «Amenidades» de la calculadora: tarjetas encendibles con su precio a la vista. 3. La sección de mobiliario de las dos páginas de financiación. Orden de impresión ------------------ `assets/elementor-atomic.css` reemite la familia `.calc-lon` con `.elementor` de ancestro, así que sus selectores van a (0,3,0) y se imprimen DESPUÉS de la cola de `wp_enqueue_scripts`. Esta hoja se encola en el mismo gancho de Elementor (prioridad 35, detrás de `elementor-blog.css`) Y usa un ancestro más para llegar a (0,4,0) donde hace falta pisar algo. Con las dos cosas el resultado no depende de que nadie mueva un número. Cero `!important`. No se toca `assets/elementor-native.css` a propósito. */ /* =========================================================================== 1 · Marcado heredado que se retira =========================================================================== */ /* Conmutador de idioma y de moneda. El idioma sale de y la moneda del mapa MONEDA_POR_IDIOMA de calc.js. Dos selectores de idioma en la misma página confundían a quien ya había elegido idioma en la cabecera. */ .calc-lon .calc .bar, .elementor .calc-lon .calc .bar { display: none; } /* «Esa línea espantosa de IA»: la banda de degradado rojo a crema bajo el título de la calculadora. Retirada por decisión del CEO, 2026-08-07. */ .calc-lon .calc .brandbar, .elementor .calc-lon .calc .brandbar { display: none; } /* Casilla suelta del trastero, sustituida por las tarjetas de amenidades. */ .calc-lon .addons .chk, .elementor .calc-lon .addons .chk { display: none; } /* =========================================================================== 2 · Sección «Amenidades» =========================================================================== */ .calc-lon .addons .calc-amen, .elementor .calc-lon .addons .calc-amen { display: grid; gap: 10px; } .calc-lon .calc-amen-tit, .elementor .calc-lon .calc-amen-tit { margin: 0; font: 600 12px/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); } .calc-lon .calc-amen-sub, .elementor .calc-lon .calc-amen-sub { margin: 0; font: 400 13px/1.5 var(--font-body); color: var(--text-muted); } .calc-lon .calc-amen-lista, .elementor .calc-lon .calc-amen-lista { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } /* La tarjeta ES el botón: toda su superficie activa y desactiva la amenidad. `min-height` 88 px y `padding` 14 dejan la zona de pulsación muy por encima de los 44 puntos que pide la pauta táctil. */ .calc-lon .calc-amen-card, .elementor .calc-lon .calc-amen-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; min-height: 88px; margin: 0; padding: 14px; text-align: left; cursor: pointer; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; transition: background .15s ease, box-shadow .15s ease, color .15s ease; -webkit-appearance: none; appearance: none; } .calc-lon .calc-amen-card:hover, .elementor .calc-lon .calc-amen-card:hover { box-shadow: var(--sh-1); } .calc-lon .calc-amen-card:focus-visible, .elementor .calc-lon .calc-amen-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* Encendida: fondo sólido de marca. El estado se anuncia además con `aria-pressed` desde calc.js, así que no depende solo del color. */ .calc-lon .calc-amen-card.on, .elementor .calc-lon .calc-amen-card.on { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--brand-contrast); } .calc-lon .calc-amen-txt, .elementor .calc-lon .calc-amen-txt { display: grid; gap: 3px; } .calc-lon .calc-amen-nom, .elementor .calc-lon .calc-amen-nom { font: 600 14px/1.2 var(--font-body); } .calc-lon .calc-amen-precio, .elementor .calc-lon .calc-amen-precio { font: 600 19px/1.15 var(--font-display); font-variant-numeric: tabular-nums; } /* Sin mezcla de transparencia a propósito: el crema al 100 % sobre el rojizo da 5,11:1, y bajarlo al 88 % que usan otras tarjetas lo dejaba rozando el umbral de 4,5:1. Se diferencia por tamaño y peso, no por opacidad. */ .calc-lon .calc-amen-det, .elementor .calc-lon .calc-amen-det { font: 400 12px/1.4 var(--font-body); color: var(--text-muted); } .calc-lon .calc-amen-card.on .calc-amen-det, .elementor .calc-lon .calc-amen-card.on .calc-amen-det { color: var(--brand-contrast); } /* El signo + / − es decorativo (lleva aria-hidden): el lector de pantalla ya recibe el estado por aria-pressed. */ .calc-lon .calc-amen-sig, .elementor .calc-lon .calc-amen-sig { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font: 600 18px/1 var(--font-body); } .calc-lon .calc-amen-card.on .calc-amen-sig, .elementor .calc-lon .calc-amen-card.on .calc-amen-sig { background: color-mix(in srgb, var(--brand-contrast) 22%, transparent); color: var(--brand-contrast); } /* =========================================================================== 3 · Texto legal, ahora editable desde el escritorio =========================================================================== El párrafo vivía dentro de calc.js. Desde el 2026-08-07 es un widget de texto de Elementor con la clase `lon-calc-legal`, y calc.js deja de escribir en su caja cuando encuentra ese nodo. Aquí se le devuelve el aspecto que tenía la caja del guion. */ /* La caja va sobre el propio widget, no sobre `.elementor-widget-container`: este Elementor sirve el marcado optimizado y ese envoltorio no existe (el

cuelga directamente del widget). Se deja también el selector con envoltorio por si alguien apaga esa opción en los ajustes de Elementor. */ .elementor .lon-calc-legal, .lon-calc-legal, .elementor .lon-calc-legal .elementor-widget-container, .lon-calc-legal .elementor-widget-container { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; } .elementor .lon-calc-legal p, .lon-calc-legal p { margin: 0; font: 400 12.5px/1.6 var(--font-body); color: var(--text-muted); } /* =========================================================================== 4 · Sección de mobiliario de las páginas de financiación =========================================================================== */ .elementor .mob-grid, .mob-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* Tarjeta con degradado de marca y pastilla con desenfoque. Sin banda lateral de color: el borde grueso decorativo está vetado en este repositorio. Llevaba además la letra decorativa gigante de fondo que pide el patrón de tarjetas del repositorio. El CEO la retiró el 2026-08-07: las dos tarjetas se distinguen por la pastilla y ya. Con la letra se fueron el `isolation: isolate` y el `z-index: -1` que la mandaban al fondo, y también el `position: relative` y el `overflow: hidden`, que solo estaban para ella. Ahora nada de dentro está posicionado, que es lo más seguro. */ .elementor .mob-card, .mob-card { display: grid; gap: 6px; align-content: start; padding: 22px; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--lon-red-earth), var(--lon-red-deep) 55%, var(--lon-red)); color: #FAF7F4; box-shadow: var(--sh-1); } .elementor .mob-card .mob-pill span, .mob-card .mob-pill span { display: inline-block; padding: 6px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, #FAF7F4 18%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 600 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #FAF7F4; } @supports not (backdrop-filter: blur(1px)) { .elementor .mob-card .mob-pill span, .mob-card .mob-pill span { background: color-mix(in srgb, #FAF7F4 26%, transparent); } } .elementor .mob-card .v, .mob-card .v { font: 600 clamp(30px, 3.2vw, 40px)/1.05 var(--font-display); font-variant-numeric: tabular-nums; color: #FAF7F4; } /* Crema al 100 %, sin mezcla con transparente. Por el mismo motivo que en las tarjetas de amenidad: sobre el degradado de marca el crema opaco da 7,9:1 y bajarlo con alfa deja el número dependiendo de por dónde caiga la parada del degradado. La jerarquía la marcan el tamaño y el peso, no la opacidad. */ .elementor .mob-card .s, .mob-card .s { font: 400 13.5px/1.55 var(--font-body); color: #FAF7F4; } /* Desglose. La tabla puede quedarse ancha en móvil, así que arrastra dentro de su propia caja y nunca empuja la página. */ .elementor .mob-tabla, .mob-tabla { overflow-x: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 6px; } .elementor .mob-tabla table, .mob-tabla table { width: 100%; min-width: 420px; border-collapse: collapse; font: 400 14px/1.5 var(--font-body); color: var(--text); } .elementor .mob-tabla th, .mob-tabla th { text-align: left; padding: 12px 14px; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--line); } .elementor .mob-tabla td, .mob-tabla td { padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); } .elementor .mob-tabla th + th, .elementor .mob-tabla td + td, .mob-tabla th + th, .mob-tabla td + td { text-align: right; font-variant-numeric: tabular-nums; } .elementor .mob-tabla tr:last-child td, .mob-tabla tr:last-child td { border-bottom: 0; font-weight: 700; border-top: 1px solid var(--line); } /* Lista de lo que incluye el paquete, para la versión que no imprime importes. En columnas: siete renglones cortos en una sola fila dejaban la mitad derecha de la sección vacía a 1440. */ .elementor .mob-incluye ul, .mob-incluye ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); font: 400 14.5px/1.55 var(--font-body); color: var(--text); } .elementor .mob-incluye li, .mob-incluye li { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; } /* Aviso de moneda. Mismo aire que el texto legal de la calculadora, y por el mismo motivo va sobre el widget y no sobre un envoltorio que no existe. */ .elementor .mob-nota, .mob-nota, .elementor .mob-nota .elementor-widget-container, .mob-nota .elementor-widget-container { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; } .elementor .mob-nota p, .mob-nota p { margin: 0; font: 400 13px/1.6 var(--font-body); color: var(--text-muted); }