/* ========================================================================== RatioFirme — estilos compartidos (todas las páginas) ========================================================================== */ :root { --navy: #0A1931; --navy-light: #152C55; --navy-muted: #2A3F63; --gold: #C5A059; --gold-light: #E8D8B0; --gold-dark: #9E7E38; --gold-pale: #F9F6F0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Red de seguridad para el salto nativo del navegador a #exportar (p. ej. al recargar una URL con ese hash, antes de que main.js pueda recentrarlo): evita que la cabecera fija tape el título mientras se corrige la posición. */ #exportar { scroll-margin-top: 100px; } body { background-color: #fafafa; } /* Fondo de todo el sitio — lo lleva en las 18 páginas (lo pone el propio construir.js), así que un único cambio aquí cubre a la vez la portada, las 11 herramientas y las páginas informativas/legales. Blanco roto con un toque dorado (mismo --gold-pale que ya usan las tarjetas destacadas), en vez de una textura fotográfica: más limpio y profesional, sin competir con los números de las calculadoras. */ .bg-marble { background-color: var(--gold-pale); background-image: radial-gradient(circle at 18% 12%, rgba(197, 160, 89, 0.06), transparent 55%), radial-gradient(circle at 85% 85%, rgba(197, 160, 89, 0.05), transparent 55%); } /* -------------------------------------------------------------------------- Pantalla de carga (splash) La genera pantallaCarga() en sitio/construir.js — sale en las 23 páginas, justo tras abrir , antes de cabecera(). Es una capa visual encima del contenido real (que sigue en el DOM desde el primer byte), así que nunca lleva display:none ni nada que la esconda de un rastreador o lector de pantalla — al revés: va marcada aria-hidden porque es ella la que es pura decoración y no debe interponerse en la lectura de la página real. -------------------------------------------------------------------------- */ .pantalla-carga { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--navy); opacity: 1; transform: translateY(0); /* ease-in (arranca despacio, acelera al salir): es la curva habitual para algo que SALE de la pantalla, al contrario que ease-out, más propia de algo que entra. */ transition: transform .5s ease-in; } .pantalla-carga--oculta { /* Solo transform, sin opacity: si se desvaneciera A LA VEZ que se desliza, el contenido real se transparentaría por debajo entero de golpe en vez de quedar al descubierto empezando por abajo, que es el efecto de cortina que se pide. */ transform: translateY(-100%); pointer-events: none; } /* Página ya vista en esta pestaña (ver el script en , cabeza() en sitio/construir.js): ni se pinta. display:none directamente, nada de mostrarla y ocultarla de golpe — con las 23 páginas siendo el mismo HTML, esta es la única forma de que "solo al entrar" tenga efecto. */ html.sin-pantalla-carga .pantalla-carga { display: none; } /* Textura de fondo con los propios iconos de marca del sitio (catálogo ICONOS_MARCA / texturaIconos() en sitio/construir.js) — un único con esos iconos definidos una vez y reutilizados por toda la pantalla a muy baja opacidad, bastante más tenue que el círculo de abajo. */ .pantalla-carga__textura { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); pointer-events: none; } /* Círculo dorado desenfocado, el mismo recurso decorativo que ya lleva de fondo la caja navy de cada resultado destacado (ahorro.html, despido.html, coche.html...: rounded-full bg-gold opacity-20 blur-3xl), aquí centrado detrás del logo con una respiración lenta en vez de estático. */ .pantalla-carga__brillo { position: absolute; top: 50%; left: 50%; width: 22rem; height: 22rem; animation: pantalla-carga-respirar 4s ease-in-out infinite; } @keyframes pantalla-carga-respirar { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .16; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: .28; } } .pantalla-carga__contenido { position: relative; display: flex; flex-direction: column; align-items: center; gap: .85rem; } /* El logo de la cabecera (constante LOGO en sitio/construir.js), aquí de protagonista: mucho más grande que su h-7 w-7 habitual junto al nombre. */ .pantalla-carga__logo { width: 4.5rem; height: 4.5rem; color: var(--gold); } .pantalla-carga__marca { color: var(--gold); font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; animation: pantalla-carga-pulso 1.7s ease-in-out infinite; } @keyframes pantalla-carga-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* La misma línea con degradado que ya separa cada hero de su contenido (h-1 bg-gradient-to-r from-transparent via-gold to-transparent), aquí como indicador de actividad: el propio degradado, el doble de ancho que la barra, se desliza de un lado a otro en vez de quedarse fijo. */ .pantalla-carga__linea { width: 7rem; height: 3px; border-radius: 999px; background-size: 200% 100%; animation: pantalla-carga-barrido 1.8s ease-in-out infinite; } @keyframes pantalla-carga-barrido { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .pantalla-carga { /* El desplazamiento de salida es justo el tipo de movimiento que esta preferencia pide evitar: se vuelve a transicionar opacity en vez de transform, un fundido corto como antes. */ transition: opacity .15s linear; } .pantalla-carga--oculta { transform: none; opacity: 0; } .pantalla-carga__marca, .pantalla-carga__brillo, .pantalla-carga__linea { animation: none; } } /* Fondo oscuro para el héroe: navy con textura sutil + brillo dorado */ .bg-navy-hero { background-color: var(--navy); background-image: radial-gradient(circle at 15% 20%, rgba(197, 160, 89, 0.16), transparent 45%), radial-gradient(circle at 85% 75%, rgba(197, 160, 89, 0.10), transparent 50%), linear-gradient(180deg, #0A1931 0%, #10233f 100%); } /* Héroe con foto de fondo: cabecera navy de siempre, con una foto detrás y el mismo degradado oscuro por encima para que el texto blanco se siga leyendo igual de bien. Cada herramienta solo pone su --hero-img; el resto (velo, encuadre, etc.) es compartido para que las ocho cabeceras con foto queden consistentes entre sí. */ .bg-navy-hero.hero-foto { background-image: radial-gradient(circle at 15% 20%, rgba(197, 160, 89, 0.18), transparent 45%), radial-gradient(circle at 85% 75%, rgba(197, 160, 89, 0.12), transparent 50%), linear-gradient(180deg, rgba(10, 25, 49, 0.90) 0%, rgba(10, 25, 49, 0.74) 45%, rgba(10, 25, 49, 0.93) 100%), var(--hero-img); background-size: auto, auto, auto, cover; background-position: 15% 20%, 85% 75%, center, center; background-repeat: no-repeat; } .hero-coche { --hero-img: image-set(url('assets/coche-hero.avif?v=20260830') type('image/avif'), url('assets/coche-hero.jpg?v=20260815') type('image/jpeg')); } .hero-ahorro { --hero-img: image-set(url('assets/ahorro-hero.avif?v=20260830') type('image/avif'), url('assets/ahorro-hero.jpg?v=20260815') type('image/jpeg')); } .hero-comisiones { --hero-img: url('assets/comisiones-hero.jpg?v=20260815'); } .hero-comprar-alquilar { --hero-img: url('assets/comprar-alquilar-hero.jpg?v=20260815'); } .hero-independencia { --hero-img: image-set(url('assets/independencia-hero.avif?v=20260830') type('image/avif'), url('assets/independencia-hero.jpg?v=20260815') type('image/jpeg')); } .hero-jubilacion { --hero-img: url('assets/jubilacion-hero.jpg?v=20260815'); } .hero-hipotecas { --hero-img: url('assets/hipotecas-hero.jpg?v=20260815'); } .hero-nomina { --hero-img: url('assets/nomina-hero.jpg?v=20260815'); } .hero-portada { --hero-img: url('assets/index-hero.jpg?v=20260815'); } .hero-renta { --hero-img: image-set(url('assets/renta-hero.avif?v=20260830') type('image/avif'), url('assets/renta-hero.jpg?v=20260816') type('image/jpeg')); } .hero-despido { --hero-img: url('assets/despido-hero.jpg?v=20260816'); } .hero-gastos-compra { --hero-img: url('assets/gastos-compra-hero.jpg?v=20260816'); } .hero-autonomo { --hero-img: url('assets/autonomo-hero.jpg?v=20260816'); } .hero-paro { --hero-img: image-set(url('assets/paro-hero.avif?v=20260830') type('image/avif'), url('assets/paro-hero.jpg?v=20260816') type('image/jpeg')); } .hero-sucesiones { --hero-img: url('assets/sucesiones-hero.jpg?v=20260816'); } /* Héroe del 50/30/20: tres fotos en vertical, una por categoría del reparto (necesidades 50 %, caprichos 30 %, ahorro 20 %). El corte entre ellas va en diagonal a 45° con una línea navy justo en el filo. Las FOTOS y la LÍNEA tienen que usar exactamente los mismos puntos, si no se desalinean (como pasó en el primer intento: la línea se rotaba con rotate(45deg) —siempre a 45° reales— pero las fotos seguían cortadas en vertical, así que no coincidían). Aquí ambas cosas se recortan con clip-path a partir del mismo cálculo, con unidades de "cqw"/"cqh" (% del ancho/alto del propio contenedor: lo mismo que ya usa .aurum-ad para hacerse responsive), así que siempre coinciden exactamente. La diagonal real de 45° en toda la altura movería el corte tantos píxeles como mide de alto la cabecera (100cqh) — en la franja del 20% eso la dejaría casi sin foto visible en pantallas normales. --d limita ese desplazamiento al 15% del ancho: a 45° siempre que quepa, y algo más cerrado solo cuando la franja es tan estrecha que si no desaparecería. */ .hero-503020 { position: relative; overflow: hidden; } .hero-503020__capas { position: absolute; inset: 0; container-type: size; --d: min(100cqh, 15cqw); } .hero-503020__panel { position: absolute; top: 0; height: 100%; background-size: cover; background-position: center; } .hero-503020__panel--necesidades { left: 0; width: calc(50cqw + var(--d)); clip-path: polygon(0 0, 100% 0, calc(50cqw - var(--d)) 100%, 0 100%); background-image: url('assets/presupuesto-hero-1.jpg?v=20260815'); } .hero-503020__panel--caprichos { left: calc(50cqw - var(--d)); width: calc(30cqw + 2 * var(--d)); clip-path: polygon(calc(2 * var(--d)) 0, 100% 0, 30cqw 100%, 0 100%); background-image: url('assets/presupuesto-hero-2.jpg?v=20260815'); } .hero-503020__panel--ahorro { left: calc(80cqw - var(--d)); width: calc(20cqw + var(--d)); clip-path: polygon(calc(2 * var(--d)) 0, 100% 0, 100% 100%, 0 100%); background-image: url('assets/presupuesto-hero-3.jpg?v=20260815'); } .hero-503020__velo { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(circle at 15% 20%, rgba(197, 160, 89, 0.18), transparent 45%), radial-gradient(circle at 85% 75%, rgba(197, 160, 89, 0.12), transparent 50%), linear-gradient(180deg, rgba(10, 25, 49, 0.90) 0%, rgba(10, 25, 49, 0.74) 45%, rgba(10, 25, 49, 0.93) 100%); } /* Línea divisoria: mismo filo diagonal que las fotos (mismas fórmulas con --d), solo que dibujado como una tira navy de unos pocos píxeles de ancho en vez de recortar una foto. */ .hero-503020__linea { position: absolute; inset: 0; z-index: 2; background: var(--navy); pointer-events: none; } .hero-503020__linea--1 { clip-path: polygon( calc(50cqw + var(--d) - 2px) 0, calc(50cqw + var(--d) + 2px) 0, calc(50cqw - var(--d) + 2px) 100%, calc(50cqw - var(--d) - 2px) 100% ); } .hero-503020__linea--2 { clip-path: polygon( calc(80cqw + var(--d) - 2px) 0, calc(80cqw + var(--d) + 2px) 0, calc(80cqw - var(--d) + 2px) 100%, calc(80cqw - var(--d) - 2px) 100% ); } .hero-simulador { --hero-img: image-set(url('assets/simulador-hero.avif?v=20260830') type('image/avif'), url('assets/simulador-hero.jpg?v=20260815') type('image/jpeg')); } /* Héroe de «Amortizar o invertir»: mismo sistema que el 50/30/20, pero con dos fotos a partes iguales (amortizar / invertir) y un único corte diagonal a 45° en el centro en vez de dos. Misma fórmula de --d para que el filo de las fotos y el de la línea coincidan exactamente. */ .hero-5050 { position: relative; overflow: hidden; } .hero-5050__capas { position: absolute; inset: 0; container-type: size; --d: min(100cqh, 15cqw); } .hero-5050__panel { position: absolute; top: 0; height: 100%; background-size: cover; background-position: center; } .hero-5050__panel--izquierda { left: 0; width: calc(50cqw + var(--d)); clip-path: polygon(0 0, 100% 0, calc(50cqw - var(--d)) 100%, 0 100%); background-image: url('assets/amortizar-invertir-hero-1.jpg?v=20260815'); } .hero-5050__panel--derecha { left: calc(50cqw - var(--d)); width: calc(50cqw + var(--d)); clip-path: polygon(calc(2 * var(--d)) 0, 100% 0, 100% 100%, 0 100%); background-image: url('assets/amortizar-invertir-hero-2.jpg?v=20260815'); } .hero-5050__velo { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(circle at 15% 20%, rgba(197, 160, 89, 0.18), transparent 45%), radial-gradient(circle at 85% 75%, rgba(197, 160, 89, 0.12), transparent 50%), linear-gradient(180deg, rgba(10, 25, 49, 0.90) 0%, rgba(10, 25, 49, 0.74) 45%, rgba(10, 25, 49, 0.93) 100%); } .hero-5050__linea { position: absolute; inset: 0; z-index: 2; background: var(--navy); pointer-events: none; clip-path: polygon( calc(50cqw + var(--d) - 2px) 0, calc(50cqw + var(--d) + 2px) 0, calc(50cqw - var(--d) + 2px) 100%, calc(50cqw - var(--d) - 2px) 100% ); } /* Scrollbar elegante (consistente con el simulador) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* -------------------------------------------------------------------------- Reveal on scroll — visible por defecto (sin flash de contenido invisible, sin dependencia de JS para leer el contenido). Solo se anima si tiene la clase "js", añadida de forma síncrona en el . -------------------------------------------------------------------------- */ .reveal { opacity: 1; transform: none; } html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(.16,.8,.3,1), transform 0.7s cubic-bezier(.16,.8,.3,1); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: .08s; } .reveal-delay-2 { transition-delay: .16s; } .reveal-delay-3 { transition-delay: .24s; } /* -------------------------------------------------------------------------- Navegación -------------------------------------------------------------------------- */ .nav-link { position: relative; color: var(--navy); opacity: 0.75; font-weight: 600; transition: opacity 0.2s ease; } .nav-link:hover { opacity: 1; } .nav-link.is-active { opacity: 1; } .nav-link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold); border-radius: 2px; } #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } #mobile-menu.is-open { /* Con 17 herramientas el contenido puede superar la pantalla en móviles bajos: se limita al hueco real bajo la cabecera (74px) y se habilita scroll interno en vez de un tope fijo que recortaba el final del menú. */ max-height: calc(100vh - 74px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Desplegable "Herramientas" del menú de escritorio */ .dropdown-menu { position: absolute; left: 0; top: 100%; margin-top: 0.75rem; min-width: 15rem; background: #fff; border: 1px solid rgba(197, 160, 89, 0.35); border-radius: 0.85rem; box-shadow: 0 20px 40px -12px rgba(10, 25, 49, 0.25); padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } [data-dropdown].is-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } [data-dropdown].is-open [data-dropdown-chevron] { transform: rotate(180deg); } .dropdown-item { display: block; padding: 0.6rem 0.85rem; border-radius: 0.55rem; font-weight: 600; color: var(--navy); opacity: 0.8; white-space: nowrap; transition: background-color 0.15s ease, opacity 0.15s ease; } .dropdown-item:hover, .dropdown-item:focus-visible { background: rgba(197, 160, 89, 0.12); opacity: 1; } .dropdown-item.is-current { background: rgba(197, 160, 89, 0.16); opacity: 1; color: var(--gold-dark); } /* -------------------------------------------------------------------------- Menú de herramientas por grupos. Con once calculadoras, una lista plana obliga a leerlas todas para encontrar una. Agrupadas en columnas se localizan de un vistazo. -------------------------------------------------------------------------- */ .dropdown-menu--mega { min-width: min(46rem, calc(100vw - 3rem)); padding: 1.25rem; /* Centrado bajo el botón, sin salirse por la derecha en pantallas justas. */ left: 50%; transform: translateX(-50%) translateY(-6px); } [data-dropdown].is-open .dropdown-menu--mega { transform: translateX(-50%) translateY(0); } .mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem 1.75rem; } .mega__titulo { /* 13 px. Era 0.65rem (10,4 px) y no destacaba sobre los nombres de herramienta (.mega__item, 0.875rem / 14 px), que es el índice que se ve en escritorio. En la ronda anterior el aumento se aplicó a .idx-seccion, usada por la portada y el pie, pero NO por este desplegable: por eso el cambio no llegó a verse en ordenador. El color se deja como estaba. 15 px y no 13: a 13 seguiría por DEBAJO de los 14 px de .mega__item y no se distinguiría, que es justo lo que se quería arreglar. Es además el mismo valor que .idx-seccion, así que los rótulos de sección miden lo mismo en el desplegable, en la portada y en el pie. */ font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-dark); padding: 0 0.5rem 0.5rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(197, 160, 89, 0.25); } .mega__item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; color: var(--navy); opacity: 0.82; transition: background-color 0.15s ease, opacity 0.15s ease; } .mega__item:hover, .mega__item:focus-visible { background: rgba(197, 160, 89, 0.12); opacity: 1; } .mega__item.is-current { background: rgba(197, 160, 89, 0.16); color: var(--gold-dark); opacity: 1; } .rm-badge-nuevo { flex-shrink: 0; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--navy); border-radius: 999px; padding: 0.15rem 0.45rem; } /* -------------------------------------------------------------------------- Tarjetas y utilidades varias -------------------------------------------------------------------------- */ .card-hover { transition: transform 0.35s ease, box-shadow 0.35s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -12px rgba(10, 25, 49, 0.18); } /* -------------------------------------------------------------------------- Carrusel de herramientas — grupos con más de tres tarjetas (hoy, «Día a día»). Por debajo de 1024px se comporta como la rejilla normal (1 o 2 columnas, todo visible); a partir de 1024px enseña tres en línea y una flecha a la derecha desliza para revelar la que sobraba. -------------------------------------------------------------------------- */ .tools-carousel { position: relative; } .tools-carousel__viewport { overflow: visible; } .tools-carousel__track { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .tools-carousel__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .tools-carousel__viewport { overflow: hidden; } .tools-carousel__track { display: flex; flex-wrap: nowrap; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .tools-carousel__track > .tools-carousel__item { flex: 0 0 calc((100% - 2 * 1.5rem) / 3); min-width: 0; } } @media (prefers-reduced-motion: reduce) { .tools-carousel__track { transition: none; } } .tools-carousel__arrow { display: none; } @media (min-width: 1024px) { .tools-carousel__arrow { display: flex; position: absolute; top: 50%; align-items: center; justify-content: center; transform: translateY(-50%); width: 2.75rem; height: 2.75rem; border-radius: 999px; background: #fff; border: 2px solid rgba(197, 160, 89, 0.5); color: var(--navy); box-shadow: 0 12px 28px -10px rgba(10, 25, 49, 0.28); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; z-index: 5; } .tools-carousel__arrow:hover { background: var(--gold); border-color: var(--gold); } .tools-carousel__arrow:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .tools-carousel__arrow[disabled] { opacity: 0; pointer-events: none; } .tools-carousel__arrow--prev { left: -1.375rem; } .tools-carousel__arrow--next { right: -1.375rem; } } @media (min-width: 1024px) and (max-width: 1180px) { .tools-carousel__arrow--prev { left: -0.65rem; } .tools-carousel__arrow--next { right: -0.65rem; } } .text-gradient-gold { background: linear-gradient(90deg, var(--gold-light), var(--gold) 60%, var(--gold-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Ocultar flechas en inputs numéricos (usado en simulador.html) */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* Acordeón (usado en simulador.html) */ details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } .transition-transform { transition: transform 0.3s ease; } details[open] summary .arrow-icon { transform: rotate(180deg); } /* -------------------------------------------------------------------------- Panel de escenarios guardados -------------------------------------------------------------------------- */ .esc-panel { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } .esc-panel.is-open { opacity: 1; visibility: visible; } @media (min-width: 640px) { .esc-panel { align-items: center; } } .esc-panel__fondo { position: absolute; inset: 0; background: rgba(10, 25, 49, .55); backdrop-filter: blur(2px); } .esc-panel__caja { position: relative; width: min(38rem, 100%); max-height: min(85vh, 46rem); display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(197, 160, 89, .4); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 30px 60px -20px rgba(10, 25, 49, .45); transform: translateY(16px); transition: transform .25s cubic-bezier(.16, .8, .3, 1); } .esc-panel.is-open .esc-panel__caja { transform: translateY(0); } @media (min-width: 640px) { .esc-panel__caja { border-radius: 1.25rem; } } .esc-panel__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(197, 160, 89, .25); } .esc-panel__titulo { font-size: 1.125rem; font-weight: 700; color: var(--navy); } .esc-panel__cerrar { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--navy); opacity: .6; transition: opacity .15s, background-color .15s; } .esc-panel__cerrar:hover { opacity: 1; background: rgba(197, 160, 89, .12); } .esc-panel__guardar { padding: 1.25rem 1.5rem; background: var(--gold-pale); border-bottom: 1px solid rgba(197,160,89,.25); } .esc-label { display: block; font-size: .8rem; font-weight: 600; color: rgba(10,25,49,.8); margin-bottom: .5rem; } .esc-fila { display: flex; gap: .5rem; } .esc-input { flex: 1; min-width: 0; padding: .6rem .8rem; background: #fff; border: 1px solid rgba(197, 160, 89, .45); border-radius: .55rem; font-size: .9rem; color: var(--navy); } .esc-input:focus { outline: none; box-shadow: 0 0 0 2px var(--gold); border-color: var(--gold); } .esc-panel__cuerpo { padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1; } .esc-panel__pie { padding: .9rem 1.5rem; border-top: 1px solid rgba(197,160,89,.2); } .esc-btn { padding: .5rem .9rem; border-radius: .55rem; font-size: .8rem; font-weight: 700; color: var(--navy); background: #fff; border: 1px solid rgba(197, 160, 89, .5); transition: background-color .15s, color .15s; white-space: nowrap; } .esc-btn:hover { background: var(--gold-pale); } .esc-btn--primario { background: var(--navy); color: #fff; border-color: var(--navy); } .esc-btn--primario:hover { background: var(--navy-light); color: #fff; } .esc-btn--pequeno { padding: .35rem .7rem; font-size: .75rem; } .esc-btn--ancho { display: block; width: 100%; margin-top: 1rem; text-align: center; padding: .7rem; } .esc-btn--borrar { padding: .35rem .45rem; border-color: rgba(185, 28, 28, .3); color: #b91c1c; } .esc-btn--borrar:hover { background: #fef2f2; } .esc-vacio, .esc-nota { font-size: .8rem; line-height: 1.6; color: rgba(10,25,49,.6); } .esc-ayuda { font-size: .75rem; color: rgba(10,25,49,.5); margin-bottom: .75rem; } .esc-lista { display: flex; flex-direction: column; gap: .5rem; } .esc-item { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border: 1px solid rgba(197, 160, 89, .3); border-radius: .7rem; transition: border-color .15s, background-color .15s; } .esc-item.is-selected { border-color: var(--gold); background: rgba(197, 160, 89, .08); } .esc-item__check input { width: 1rem; height: 1rem; accent-color: #C5A059; cursor: pointer; } .esc-item__info { flex: 1; min-width: 0; } .esc-item__nombre { font-weight: 600; font-size: .9rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .esc-item__fecha { font-size: .72rem; color: rgba(10,25,49,.45); margin-top: .1rem; } .esc-item__acciones { display: flex; gap: .35rem; flex-shrink: 0; } .esc-comp__tabla { width: 100%; border-collapse: collapse; font-size: .85rem; } .esc-comp__tabla th, .esc-comp__tabla td { padding: .55rem .7rem; text-align: right; border-bottom: 1px solid rgba(197,160,89,.2); } .esc-comp__tabla thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: .78rem; } .esc-comp__tabla thead th:first-child { background: var(--navy); } .esc-comp__tabla tbody th { text-align: left; font-weight: 600; color: rgba(10,25,49,.75); } .esc-comp__tabla tr.is-distinto td { font-weight: 700; color: var(--gold-dark); background: rgba(197,160,89,.09); } /* -------------------------------------------------------------------------- Banner de consentimiento de cookies -------------------------------------------------------------------------- */ .ck-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; padding: 1rem; transform: translateY(120%); transition: transform .35s cubic-bezier(.16,.8,.3,1); } .ck-banner.is-open { transform: translateY(0); } .ck-banner__caja { max-width: 60rem; margin: 0 auto; background: #fff; border: 1px solid rgba(197,160,89,.45); border-top: 3px solid var(--gold); border-radius: 1rem; box-shadow: 0 24px 50px -16px rgba(10,25,49,.4); padding: 1.4rem 1.5rem; } .ck-banner__titulo { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; } .ck-banner__texto p { font-size: .85rem; line-height: 1.65; color: rgba(10,25,49,.7); } .ck-banner__enlaces { display: flex; gap: 1.25rem; margin-top: .6rem; } .ck-banner__enlaces a { font-size: .8rem; font-weight: 600; color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; } .ck-banner__opciones { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(197,160,89,.25); } .ck-opcion { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; } .ck-opcion input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: #C5A059; flex-shrink: 0; } .ck-opcion input:disabled { opacity: .55; cursor: not-allowed; } .ck-opcion span { font-size: .8rem; line-height: 1.55; color: rgba(10,25,49,.7); } .ck-opcion strong { color: var(--navy); } .ck-banner__acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; } .ck-btn { flex: 1 1 auto; min-width: 9rem; padding: .65rem 1.1rem; border-radius: .6rem; font-size: .82rem; font-weight: 700; transition: background-color .15s, color .15s, border-color .15s; } .ck-btn--primario { background: var(--navy); color: #fff; border: 1px solid var(--navy); } .ck-btn--primario:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); } .ck-btn--fantasma { background: #fff; color: var(--navy); border: 1px solid rgba(197,160,89,.5); } .ck-btn--fantasma:hover { background: var(--gold-pale); } @media (min-width: 640px) { .ck-banner__acciones { justify-content: flex-end; } .ck-btn { flex: 0 0 auto; } } /* -------------------------------------------------------------------------- Páginas legales: texto largo, cómodo de leer -------------------------------------------------------------------------- */ .legal { max-width: 46rem; } .legal h2 { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin-top: 2.5rem; margin-bottom: .85rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(197,160,89,.3); } .legal h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-top: 1.75rem; margin-bottom: .6rem; } .legal p, .legal li { font-size: .97rem; line-height: 1.75; color: rgba(10,25,49,.75); } .legal p { margin-bottom: 1rem; } .legal ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; } .legal li { margin-bottom: .45rem; } .legal a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .legal strong { color: var(--navy); } .legal table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .88rem; } .legal th, .legal td { padding: .6rem .75rem; text-align: left; border: 1px solid rgba(197,160,89,.3); } .legal thead th { background: var(--gold-pale); font-weight: 700; color: var(--navy); } /* ========================================================================== Fotos de cabecera en móvil: la mitad del peso de la página se iba en una imagen que el móvil no puede aprovechar Las cabeceras se sirven a 1920 px de ancho. En un móvil de 375 px eso son cientos de kilobytes descargados para pintar una foto que va detrás de un velo oscuro al 90 % de opacidad y de la que no se distingue el detalle. Medido en hipotecas a ancho de tablet: 106 KB de los 472 KB de la página, y era el recurso más pesado de todos, por delante de Chart.js. Aquí se sirve una copia de 800 px por debajo de 768 px de pantalla. Como es la imagen del primer pantallazo, es justo la que marca el LCP: bajarla de ~106 KB a ~32 KB se nota directamente en lo que tarda en verse algo, sobre todo en datos móviles. El recorte, el velo y el encuadre no cambian: solo se cambia el archivo que rellena la variable --hero-img. ========================================================================== */ @media (max-width: 767px) { .hero-coche { --hero-img: image-set(url('assets/coche-hero-800.avif?v=20260830') type('image/avif'), url('assets/coche-hero-800.jpg?v=20260816') type('image/jpeg')); } .hero-ahorro { --hero-img: image-set(url('assets/ahorro-hero-800.avif?v=20260830') type('image/avif'), url('assets/ahorro-hero-800.jpg?v=20260816') type('image/jpeg')); } .hero-comisiones { --hero-img: url('assets/comisiones-hero-800.jpg?v=20260816'); } .hero-comprar-alquilar { --hero-img: url('assets/comprar-alquilar-hero-800.jpg?v=20260816'); } .hero-independencia { --hero-img: image-set(url('assets/independencia-hero-800.avif?v=20260830') type('image/avif'), url('assets/independencia-hero-800.jpg?v=20260816') type('image/jpeg')); } .hero-jubilacion { --hero-img: url('assets/jubilacion-hero-800.jpg?v=20260816'); } .hero-hipotecas { --hero-img: url('assets/hipotecas-hero-800.jpg?v=20260816'); } .hero-nomina { --hero-img: url('assets/nomina-hero-800.jpg?v=20260816'); } .hero-portada { --hero-img: url('assets/index-hero-800.jpg?v=20260816'); } .hero-simulador { --hero-img: image-set(url('assets/simulador-hero-800.avif?v=20260830') type('image/avif'), url('assets/simulador-hero-800.jpg?v=20260816') type('image/jpeg')); } .hero-renta { --hero-img: image-set(url('assets/renta-hero-800.avif?v=20260830') type('image/avif'), url('assets/renta-hero-800.jpg?v=20260816') type('image/jpeg')); } .hero-despido { --hero-img: url('assets/despido-hero-800.jpg?v=20260816'); } .hero-gastos-compra { --hero-img: url('assets/gastos-compra-hero-800.jpg?v=20260816'); } .hero-autonomo { --hero-img: url('assets/autonomo-hero-800.jpg?v=20260816'); } .hero-paro { --hero-img: image-set(url('assets/paro-hero-800.avif?v=20260830') type('image/avif'), url('assets/paro-hero-800.jpg?v=20260816') type('image/jpeg')); } .hero-sucesiones { --hero-img: url('assets/sucesiones-hero-800.jpg?v=20260816'); } /* Las cabeceras partidas en paneles (50/30/20 y amortizar-invertir) cargan una foto por panel: ahí el ahorro se multiplica. */ .hero-503020__panel--necesidades { background-image: url('assets/presupuesto-hero-1-800.jpg?v=20260816'); } .hero-503020__panel--caprichos { background-image: url('assets/presupuesto-hero-2-800.jpg?v=20260816'); } .hero-503020__panel--ahorro { background-image: url('assets/presupuesto-hero-3-800.jpg?v=20260816'); } .hero-5050__panel--izquierda { background-image: url('assets/amortizar-invertir-hero-1-800.jpg?v=20260816'); } .hero-5050__panel--derecha { background-image: url('assets/amortizar-invertir-hero-2-800.jpg?v=20260816'); } }