/* ==========================================================================
RatioFirme — capa premium 2026
Fondo dinámico, superficies de cristal, micro-interacciones, modales,
tooltips, toasts y bloques de publicidad.
Se carga DESPUÉS de styles.css. No reescribe nada de la base: solo añade.
Todo respeta prefers-reduced-motion.
========================================================================== */
:root {
/* Paleta heredada */
--navy: #0A1931;
--navy-light: #152C55;
--navy-muted: #2A3F63;
--gold: #C5A059;
--gold-light: #E8D8B0;
--gold-dark: #9E7E38;
--gold-pale: #F9F6F0;
/* Nuevos tokens premium */
--ink: #0A1931;
--ink-60: rgba(10, 25, 49, 0.6);
--ink-45: rgba(10, 25, 49, 0.45);
--glass-bg: rgba(255, 255, 255, 0.72);
--glass-brd: rgba(197, 160, 89, 0.28);
--glass-shadow: 0 24px 60px -28px rgba(10, 25, 49, 0.35);
--ring: 0 0 0 3px rgba(197, 160, 89, 0.35);
--ease-out: cubic-bezier(.16, .84, .32, 1);
--ease-spring: cubic-bezier(.2, .9, .25, 1.2);
/* Actualizadas por JS */
--scroll: 0; /* 0 → 1 progreso de la página */
--mx: 50%; /* cursor X dentro del elemento */
--my: 50%; /* cursor Y dentro del elemento */
}
/* ==========================================================================
0-bis. ALTURA MEDIA UNIFICADA DE LAS CASILLAS DE DATOS (17 herramientas)
--------------------------------------------------------------------------
Punto medio exacto entre los 4px que tenía nomina.html (py-1, bajado en
una ronda de trabajo anterior para resolver un problema de encaje de
alturas de aquel layout que ya no existe) y los 10px que usaba el resto
del sitio (py-2.5): 7px = 0,4375rem arriba y abajo. Ni py-1.5 (6px) ni
py-2 (8px) caen justo en ese punto.
No se usa una utilidad de Tailwind con valor arbitrario (py-[7px]) porque
aurum-tailwind.css es un CSS estático sin build vivo que se pueda
ejecutar aquí (ver sitio/tailwind.js: la regeneración real es un proceso
manual — sonda + navegador + copiar el CSS generado a mano). Una clase
nueva no compilada no tendría ninguna regla en ese archivo y no se vería,
aunque estuviera escrita en el HTML.
Esta clase SUSTITUYE a py-1/py-2/py-2.5 en cada casilla, no coexiste con
ellas: sitio/construir.js coloca aurum-tailwind.css el último de los tres
`` del `` (después de este archivo), así que a igual
especificidad esa utilidad ganaría la cascada sobre esta regla si se
dejara puesta a la vez. Solo fija el padding vertical — el horizontal lo
sigue dando px-4/px-3 tal cual, sin tocar. */
.campo-entrada {
padding-top: 0.4375rem;
padding-bottom: 0.4375rem;
}
/* ==========================================================================
1. FONDO DINÁMICO REACTIVO AL SCROLL
Capa fija detrás de todo. Las auroras se desplazan y cambian de opacidad
según el progreso de lectura. Coste: una sola capa compuesta en GPU.
========================================================================== */
#aurum-bg {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
overflow: hidden;
/* Blanco roto con un toque dorado, igual que .bg-marble del — sin
textura fotográfica, para que las auroras, la retícula y el grano de
encima se lean limpios. Este es el fondo que ve de verdad casi todo
el mundo: con JS activo, esta capa manda y .bg-marble del se
queda transparente (ver la regla body.has-aurum-bg más abajo). */
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%);
}
/* Coste del desenfoque: se paga por píxel Y por radio. Con blur(90px) sobre
tres capas que a 1920 px sumaban 2,2 Mpx (más superficie que la propia
ventana), el navegador tiene que rasterizar más de lo que muestra. Si el
equipo no tiene aceleración por hardware, eso lo hace la CPU en cada
fotograma de scroll, y el resultado es una página que va a tirones.
Tres medidas, sin perder el efecto:
· El degradado ahora se apaga al 90 % del radio en vez del 68 %. Antes
quedaba un borde duro que el desenfoque tenía que disimular; sin ese
borde, basta la mitad de radio (medido: 4,9 % de diferencia de píxel).
· Tope en píxeles para que no crezcan sin límite en pantallas grandes.
· La opacidad deja de depender del scroll. Animar opacidad sobre una capa
desenfocada obliga a recomponerla; el desplazamiento por transform es
gratis en GPU y el efecto se nota igual. */
#aurum-bg .aurora {
position: absolute;
border-radius: 50%;
filter: blur(45px);
will-change: transform;
contain: paint;
}
#aurum-bg .aurora-1 {
width: 46vw;
height: 46vw;
min-width: 380px;
min-height: 380px;
max-width: 760px;
max-height: 760px;
top: -12vw;
left: -8vw;
background: radial-gradient(circle at 35% 35%, rgba(197, 160, 89, .38), rgba(197, 160, 89, 0) 90%);
transform: translate3d(calc(var(--scroll) * 22vw), calc(var(--scroll) * 26vh), 0);
opacity: .72;
}
#aurum-bg .aurora-2 {
width: 52vw;
height: 52vw;
min-width: 420px;
min-height: 420px;
max-width: 820px;
max-height: 820px;
bottom: -18vw;
right: -12vw;
background: radial-gradient(circle at 60% 50%, rgba(21, 44, 85, .30), rgba(21, 44, 85, 0) 90%);
transform: translate3d(calc(var(--scroll) * -20vw), calc(var(--scroll) * -22vh), 0);
opacity: .58;
}
#aurum-bg .aurora-3 {
width: 34vw;
height: 34vw;
min-width: 300px;
min-height: 300px;
max-width: 560px;
max-height: 560px;
top: 42%;
left: 46%;
background: radial-gradient(circle at 50% 50%, rgba(232, 216, 176, .45), rgba(232, 216, 176, 0) 90%);
transform: translate3d(calc(var(--scroll) * -26vw), calc(var(--scroll) * 14vh), 0) scale(calc(.85 + var(--scroll) * .3));
opacity: .4;
}
/* Retícula técnica: sugiere hoja de cálculo sin distraer */
#aurum-bg .grid-layer {
position: absolute;
inset: -10%;
background-image:
linear-gradient(rgba(10, 25, 49, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(10, 25, 49, .045) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 20%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 20%, transparent 78%);
transform: translate3d(0, calc(var(--scroll) * -60px), 0);
opacity: .85;
}
/* Grano fino: quita el aspecto "plantilla plana" */
#aurum-bg .grain {
position: absolute;
inset: 0;
opacity: .5;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
/* El cuerpo deja de pintar su propio mármol: el fondo vivo manda */
body.has-aurum-bg,
body.has-aurum-bg.bg-marble {
background-color: transparent;
background-image: none;
}
/* ==========================================================================
2. BARRA DE PROGRESO DE LECTURA
========================================================================== */
#aurum-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
transform-origin: 0 50%;
transform: scaleX(var(--scroll));
background: linear-gradient(90deg, var(--gold-dark), var(--gold) 45%, var(--gold-light));
box-shadow: 0 0 14px rgba(197, 160, 89, .7);
z-index: 100;
pointer-events: none;
}
/* ==========================================================================
3. SUPERFICIES DE CRISTAL Y TARJETAS VIVAS
========================================================================== */
.glass {
background: var(--glass-bg);
backdrop-filter: blur(16px) saturate(1.25);
-webkit-backdrop-filter: blur(16px) saturate(1.25);
border: 1px solid var(--glass-brd);
box-shadow: var(--glass-shadow);
}
.glass-dark {
background: rgba(10, 25, 49, .78);
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
border: 1px solid rgba(197, 160, 89, .3);
}
/* Tarjeta premium: brillo que sigue al cursor + borde que se enciende */
.card-lift {
position: relative;
isolation: isolate;
transition:
transform .45s var(--ease-out),
box-shadow .45s var(--ease-out),
border-color .35s ease;
will-change: transform;
}
.card-lift::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(340px circle at var(--mx) var(--my), rgba(197, 160, 89, .16), transparent 62%);
opacity: 0;
transition: opacity .35s ease;
pointer-events: none;
z-index: 0;
}
.card-lift > * {
position: relative;
z-index: 1;
}
.card-lift:hover {
transform: translateY(-8px);
border-color: rgba(197, 160, 89, .75);
box-shadow:
0 30px 60px -24px rgba(10, 25, 49, .34),
0 0 0 1px rgba(197, 160, 89, .28);
}
.card-lift:hover::before {
opacity: 1;
}
/* Inclinación 3D muy contenida — se activa solo con puntero fino */
@media (hover: hover) and (pointer: fine) {
.tilt {
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--tilt-z, 0));
transition: transform .35s var(--ease-out);
}
.tilt.is-tilting {
transition: transform .08s linear;
}
}
/* Borde dorado animado para la tarjeta destacada */
.card-featured {
position: relative;
}
.card-featured::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(120deg, var(--gold-light), var(--gold), var(--gold-dark), var(--gold-light));
background-size: 300% 300%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: borderFlow 7s linear infinite;
pointer-events: none;
}
@keyframes borderFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ==========================================================================
4. BOTONES Y CONTROLES
========================================================================== */
.btn-shine {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-shine::after {
content: '';
position: absolute;
top: -60%;
left: -80%;
width: 45%;
height: 220%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: skewX(-18deg);
transition: left .65s var(--ease-out);
pointer-events: none;
}
.btn-shine:hover::after {
left: 130%;
}
.btn-press {
transition: transform .12s var(--ease-spring), box-shadow .25s ease;
}
.btn-press:active {
transform: scale(.965);
}
:where(a, button, input, select, textarea, summary):focus-visible {
outline: none;
box-shadow: var(--ring);
border-radius: 8px;
}
/* ==========================================================================
5. CIFRAS ANIMADAS
========================================================================== */
.num-animate {
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.num-flash {
animation: numFlash .5s var(--ease-out);
}
@keyframes numFlash {
0% { color: var(--gold-dark); transform: translateY(-2px); }
100% { color: inherit; transform: none; }
}
/* ==========================================================================
6. TOOLTIPS [data-tip="texto"]
========================================================================== */
[data-tip] {
position: relative;
cursor: help;
border-bottom: 1px dotted rgba(197, 160, 89, .8);
}
[data-tip]::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(6px);
min-width: 190px;
max-width: 290px;
padding: .6rem .8rem;
border-radius: .6rem;
background: var(--navy);
color: #fff;
font-size: .78rem;
font-weight: 500;
line-height: 1.45;
letter-spacing: 0;
text-align: left;
box-shadow: 0 18px 34px -14px rgba(10, 25, 49, .6);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, transform .2s var(--ease-out), visibility .2s;
z-index: 60;
pointer-events: none;
white-space: normal;
}
[data-tip]::before {
content: '';
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--navy);
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, visibility .2s;
z-index: 61;
pointer-events: none;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after,
[data-tip].tip-open::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before,
[data-tip].tip-open::before {
opacity: 1;
visibility: visible;
}
/* Variante "hacia abajo": el globo sale por debajo del icono en vez de por
encima. La aplica main.js cuando arriba no cabe (porque lo taparía la
cabecera fija o lo recortaría el borde de una tarjeta). La flecha se da
la vuelta con ella, para que siga apuntando al icono. */
[data-tip].tip-abajo::after {
bottom: auto;
top: calc(100% + 10px);
transform: translateX(-50%) translateY(-6px);
}
[data-tip].tip-abajo::before {
bottom: auto;
top: calc(100% + 4px);
border-top-color: transparent;
border-bottom-color: var(--navy);
}
[data-tip].tip-abajo:hover::after,
[data-tip].tip-abajo:focus-visible::after,
[data-tip].tip-abajo.tip-open::after {
transform: translateX(-50%) translateY(0);
}
/* En móvil el tooltip se ancla al borde para no salirse */
@media (max-width: 640px) {
[data-tip]::after {
left: 0;
transform: translateX(0) translateY(6px);
min-width: 0;
width: min(78vw, 290px);
}
[data-tip]:hover::after,
[data-tip].tip-open::after {
transform: translateX(0) translateY(0);
}
[data-tip]::before { left: 18px; }
[data-tip].tip-abajo::after {
transform: translateX(0) translateY(-6px);
}
[data-tip].tip-abajo:hover::after,
[data-tip].tip-abajo.tip-open::after {
transform: translateX(0) translateY(0);
}
}
/* Capa que recorta ÚNICAMENTE el adorno de fondo de una tarjeta (el halo
dorado desenfocado que asoma por la esquina). Antes ese recorte lo hacía
la tarjeta entera con overflow:hidden, y de paso se comía los tooltips
que nacían dentro y necesitaban salirse del borde. */
.deco-recorte {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
}
/* Icono "i" redondo que activa el tooltip de arriba junto a una etiqueta de
campo. El sistema [data-tip] ya pone cursor:help y el subrayado punteado;
esto solo da forma de círculo al símbolo y dos variantes de color, una
para tarjetas claras (la mayoría) y otra para fondos navy. */
.info-tip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
margin-left: .3rem;
border-radius: 999px;
background: rgba(197, 160, 89, .14);
color: var(--gold-dark);
font-size: .68rem;
font-style: normal;
font-weight: 800;
line-height: 1;
vertical-align: middle;
border-bottom: none !important;
/* Cuando el icono cae dentro de una etiqueta en mayúsculas (los rótulos
tipo "TU NÚMERO MÁGICO"), hereda ese uppercase y la "i" minúscula pasa
a "I": un simple trazo vertical sin el punto que la hace reconocible
como icono de ayuda. Se anula aquí para que la letra sea siempre "i". */
text-transform: none;
transition: background .2s ease, color .2s ease;
}
.info-tip:hover,
.info-tip:focus-visible,
.info-tip.tip-open {
background: var(--gold);
color: var(--navy);
}
.info-tip--claro {
background: rgba(255, 255, 255, .14);
color: var(--gold-light);
}
.info-tip--claro:hover,
.info-tip--claro:focus-visible,
.info-tip--claro.tip-open {
background: var(--gold);
color: var(--navy);
}
/* ==========================================================================
7. MODALES / POP-UPS
========================================================================== */
.aurum-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
visibility: hidden;
transition: opacity .28s ease, visibility .28s;
}
.aurum-modal.is-open {
opacity: 1;
visibility: visible;
}
.aurum-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(10, 25, 49, .55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.aurum-modal__panel {
position: relative;
width: min(640px, 100%);
max-height: min(86vh, 780px);
overflow-y: auto;
border-radius: 1.25rem;
background: #fff;
border: 1px solid rgba(197, 160, 89, .45);
box-shadow: 0 40px 90px -30px rgba(10, 25, 49, .6);
transform: translateY(18px) scale(.97);
transition: transform .34s var(--ease-spring);
overscroll-behavior: contain;
}
.aurum-modal.is-open .aurum-modal__panel {
transform: translateY(0) scale(1);
}
.aurum-modal__head {
position: sticky;
top: 0;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.35rem 1.5rem 1rem;
background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0));
border-bottom: 1px solid rgba(197, 160, 89, .2);
z-index: 2;
}
.aurum-modal__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--navy);
letter-spacing: -0.01em;
}
.aurum-modal__close {
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
display: grid;
place-items: center;
border-radius: .6rem;
color: var(--ink-60);
background: rgba(10, 25, 49, .05);
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.aurum-modal__close:hover {
background: rgba(197, 160, 89, .18);
color: var(--navy);
transform: rotate(90deg);
}
.aurum-modal__body {
padding: 0 1.5rem 1.5rem;
color: var(--ink-60);
line-height: 1.7;
}
.aurum-modal__body h4 {
color: var(--navy);
font-weight: 700;
margin: 1.15rem 0 .4rem;
}
.aurum-modal__body p + p { margin-top: .75rem; }
.aurum-modal__body ul {
margin: .6rem 0 .6rem 1.1rem;
list-style: disc;
}
.aurum-modal__body li { margin-bottom: .35rem; }
.aurum-modal__body code {
background: var(--gold-pale);
border: 1px solid rgba(197, 160, 89, .3);
border-radius: .3rem;
padding: .08rem .35rem;
font-size: .85em;
color: var(--gold-dark);
}
.aurum-modal__formula {
background: var(--gold-pale);
border: 1px solid rgba(197, 160, 89, .35);
border-left: 3px solid var(--gold);
border-radius: .6rem;
padding: .9rem 1.1rem;
margin: .9rem 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .88rem;
color: var(--navy);
overflow-x: auto;
}
body.modal-open {
overflow: hidden;
}
/* ==========================================================================
8. TOASTS
========================================================================== */
#aurum-toasts {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 300;
display: flex;
flex-direction: column;
gap: .5rem;
align-items: center;
pointer-events: none;
width: min(420px, calc(100vw - 2rem));
}
.aurum-toast {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
padding: .75rem 1rem;
border-radius: .8rem;
background: var(--navy);
color: #fff;
font-size: .87rem;
font-weight: 600;
box-shadow: 0 20px 40px -16px rgba(10, 25, 49, .65);
border: 1px solid rgba(197, 160, 89, .4);
transform: translateY(16px);
opacity: 0;
transition: transform .35s var(--ease-spring), opacity .3s ease;
}
.aurum-toast.is-visible {
transform: translateY(0);
opacity: 1;
}
.aurum-toast--ok { border-left: 3px solid #4ade80; }
.aurum-toast--warn { border-left: 3px solid var(--gold); }
.aurum-toast--error { border-left: 3px solid #f87171; }
/* ==========================================================================
9. VOLVER ARRIBA
========================================================================== */
#aurum-top {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--navy);
color: var(--gold-light);
border: 1px solid rgba(197, 160, 89, .45);
box-shadow: 0 16px 34px -12px rgba(10, 25, 49, .55);
opacity: 0;
visibility: hidden;
transform: translateY(14px);
transition: opacity .3s ease, transform .3s var(--ease-out), visibility .3s, background .2s;
z-index: 90;
}
#aurum-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
#aurum-top:hover {
background: var(--gold);
color: var(--navy);
}
/* Anillo de progreso alrededor del botón */
#aurum-top .ring {
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(var(--gold) calc(var(--scroll) * 360deg), rgba(197, 160, 89, .18) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
pointer-events: none;
}
/* ==========================================================================
10. BLOQUES DE PUBLICIDAD (AdSense)
Contenedor con reserva de altura para evitar saltos de layout (CLS).
========================================================================== */
/* Reserva de altura DESDE ANTES de que aurum-ads.js sustituya el marcador.
El fragmento deja un
vacío, sin altura, hasta
que el JS lo reemplaza en DOMContentLoaded (crearBloque(), más abajo en
aurum-ads.js) por la caja real con su .aurum-ad__slot. Entre el primer
pintado y ese reemplazo, cualquier cosa que haya debajo del marcador se
desplaza — medido con Lighthouse: 0,14 de CLS en hipotecas.html, con el
99 % atribuido al bloque completo moviéndose de golpe por la
inserción del hueco "superior", que va justo encima. No se reproduce en
local sin latencia de red porque todo se resuelve antes del primer
pintado; con la latencia simulada que aplica Lighthouse (o con una
conexión real) sí hay hueco para que ocurra.
Los valores deben coincidir exactamente con CONFIG.altura de
aurum-ads.js — si se cambia uno, hay que cambiar el otro. */
[data-aurum-ad="superior"] { min-height: 100px; }
[data-aurum-ad="contenido"] { min-height: 280px; }
[data-aurum-ad="infeed"] { min-height: 250px; }
[data-aurum-ad="lateral"] { min-height: 250px; }
[data-aurum-ad="inferior"] { min-height: 250px; }
[data-aurum-ad="ancla"] { min-height: 60px; }
@media (min-width: 769px) {
[data-aurum-ad="superior"] { min-height: 110px; }
[data-aurum-ad="contenido"] { min-height: 300px; }
[data-aurum-ad="infeed"] { min-height: 320px; }
[data-aurum-ad="lateral"] { min-height: 600px; }
[data-aurum-ad="inferior"] { min-height: 250px; }
}
.aurum-ad {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 2.5rem auto;
container-type: inline-size;
}
/* Alineación estricta de anchos: un anuncio que sobresale del texto o se
queda corto rompe el diseño y se lee como cuerpo extraño. Los marcadores
que caen fuera de un contenedor de contenido (los de página completa)
quedan a lo ancho de la pantalla, así que se les replica exactamente la
misma caja que usa el resto del sitio: max-w-7xl (80rem) con el mismo
px-4 / sm:px-6 / lg:px-8. Quién la necesita lo marca aurum-ads.js
midiendo el hueco real, no adivinando por la posición en el HTML.
Los que ya viven dentro del contenido heredan el ancho de su columna. */
.aurum-ad--suelto {
max-width: 80rem;
padding-inline: 1rem;
}
@media (min-width: 640px) {
.aurum-ad--suelto { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
.aurum-ad--suelto { padding-inline: 2rem; }
}
/* En móvil se separa más de lo que hay alrededor. Un anuncio pegado al
contenido provoca clics involuntarios al intentar desplazar la página con
el pulgar, y Google los detecta como tráfico de mala calidad: el visitante
vuelve atrás al instante desde el anuncio. Esos clics no solo no pagan,
sino que arrastran hacia abajo el RPM de todo el sitio. */
@media (max-width: 768px) {
.aurum-ad {
margin-block: 3.25rem;
}
}
.aurum-ad__label {
font-size: .62rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ink-45);
margin-bottom: .45rem;
display: inline-flex;
align-items: center;
gap: .35rem;
}
.aurum-ad__label::before,
.aurum-ad__label::after {
content: '';
width: 1.6rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(197, 160, 89, .6));
}
.aurum-ad__label::after {
background: linear-gradient(90deg, rgba(197, 160, 89, .6), transparent);
}
.aurum-ad__slot {
position: relative;
width: 100%;
max-width: 100%;
min-height: var(--ad-h-movil, 250px);
border-radius: 1rem;
overflow: hidden;
background:
linear-gradient(135deg, rgba(249, 246, 240, .85), rgba(255, 255, 255, .6));
border: 1px dashed rgba(197, 160, 89, .45);
display: flex;
align-items: center;
justify-content: center;
}
/* La reserva de altura se decide con media queries, no con el ancho de
pantalla leído una sola vez en JS: si el usuario gira el móvil o
redimensiona, el hueco reservado sigue siendo el correcto y no aparece
un salto de maquetación al recolocarse el anuncio. */
@media (min-width: 769px) {
.aurum-ad__slot {
min-height: var(--ad-h-escritorio, 250px);
}
}
/* Estado "esperando anuncio": brillo que barre el hueco */
.aurum-ad__slot::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(197, 160, 89, .14) 50%, transparent 70%);
background-size: 220% 100%;
animation: adShimmer 2.6s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes adShimmer {
0% { background-position: 180% 0; }
100% { background-position: -80% 0; }
}
.aurum-ad__hint {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-align: center;
padding: 1rem;
font-size: .74rem;
font-weight: 600;
letter-spacing: .06em;
color: rgba(158, 126, 56, .8);
pointer-events: none;
z-index: 1;
}
/* Cuando el anuncio real ha cargado, el contenedor se vuelve invisible.
Ojo: NO se pone min-height en 0. Si el anuncio que sirve Google es más
bajo que el hueco reservado, quitar la reserva encogería la caja de
golpe, y un encogimiento cuenta como salto de maquetación (CLS) igual
que un crecimiento. Se prefiere un poco de aire de sobra a un salto. */
.aurum-ad.is-filled .aurum-ad__slot {
border-style: solid;
border-color: rgba(197, 160, 89, .18);
background: transparent;
}
.aurum-ad.is-filled .aurum-ad__slot::before { display: none; }
.aurum-ad.is-filled .aurum-ad__hint { display: none; }
/* Sin anuncio pero con el hueco a la vista: se apaga el adorno (borde
punteado, brillo y texto de reserva) y queda un espacio limpio, pero se
mantiene la altura. Colapsarlo aquí desplazaría el contenido que el
usuario está leyendo en ese momento, que es justo lo que hunde el CLS. */
.aurum-ad.is-unfilled .aurum-ad__slot {
border-color: transparent;
background: transparent;
}
.aurum-ad.is-unfilled .aurum-ad__slot::before { display: none; }
.aurum-ad.is-unfilled .aurum-ad__hint { display: none; }
/* Ya fuera de pantalla, el hueco vacío sí puede desaparecer del todo: los
desplazamientos que ocurren fuera del área visible no puntúan como CLS. */
.aurum-ad.is-empty {
display: none;
}
.aurum-ad ins.adsbygoogle {
display: block;
width: 100%;
position: relative;
z-index: 2;
}
/* --- Anuncio in-feed (entre bloques de un listado) -------------------- */
/* Va en la costura entre dos grupos de herramientas, donde el usuario ya
hace una pausa natural al cambiar de categoría. Se respeta el mismo
ritmo vertical que separa los grupos (mb-12 = 3rem) para que no parezca
que interrumpe un listado por la mitad. */
.aurum-ad--infeed {
margin-block: 3rem;
}
/* --- Anuncio ancla: fijo abajo, solo en móvil ------------------------- */
/* Es la posición de mayor RPM porque permanece visible mientras el usuario
se desplaza, pero solo funciona si NO estorba: por eso ocupa poco alto,
se puede cerrar, respeta la franja segura de los móviles con gesto
inferior, y se queda por debajo del banner de cookies (z-index 140). */
.aurum-ad--ancla {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 80;
max-width: none;
margin: 0;
padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px));
background: rgba(255, 255, 255, .96);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(197, 160, 89, .45);
box-shadow: 0 -8px 22px -10px rgba(10, 25, 49, .35);
transform: translateY(115%);
transition: transform .35s var(--ease-out);
}
.aurum-ad--ancla.is-visible {
transform: translateY(0);
}
.aurum-ad--ancla .aurum-ad__label {
margin-bottom: .15rem;
font-size: .55rem;
}
.aurum-ad--ancla .aurum-ad__slot {
border-radius: .5rem;
min-height: var(--ad-h-movil, 60px);
}
/* Botón de cierre: área táctil de 44px, el mínimo cómodo para el pulgar,
para que nadie lo falle y acabe pulsando el anuncio sin querer. */
.aurum-ad__cerrar {
position: absolute;
top: 50%;
right: .35rem;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: none;
background: none;
color: var(--ink-45);
cursor: pointer;
z-index: 3;
line-height: 1;
font-size: 1.1rem;
}
.aurum-ad__cerrar:hover,
.aurum-ad__cerrar:focus-visible {
color: var(--navy);
}
/* El ancla flota sobre el contenido; se compensa al final de la página
para que el pie siga siendo alcanzable, y se sube el botón de "volver
arriba" para que no queden uno encima del otro. */
body.con-ancla {
padding-bottom: var(--ancla-h, 0px);
}
body.con-ancla #aurum-top {
bottom: calc(1.25rem + var(--ancla-h, 0px));
}
/* En escritorio no hay ancla: ese formato es de móvil, y fijarlo en una
pantalla grande tapa contenido sin aportar visibilidad. */
@media (min-width: 769px) {
.aurum-ad--ancla { display: none; }
body.con-ancla { padding-bottom: 0; }
body.con-ancla #aurum-top { bottom: 1.25rem; }
}
/* ==========================================================================
11. DEMO INTERACTIVA DE LA PORTADA
========================================================================== */
.demo-shell {
position: relative;
border-radius: 1.75rem;
overflow: hidden;
background:
radial-gradient(120% 120% at 0% 0%, rgba(197, 160, 89, .18), transparent 55%),
linear-gradient(160deg, #0A1931 0%, #12294a 55%, #0A1931 100%);
background-color: #0A1931;
border: 1px solid rgba(197, 160, 89, .35);
box-shadow: 0 50px 100px -40px rgba(10, 25, 49, .8);
}
.demo-shell::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(700px circle at var(--mx) var(--my), rgba(197, 160, 89, .10), transparent 60%);
pointer-events: none;
}
/* Conmutador Particular / Profesional */
.mode-switch {
display: inline-flex;
position: relative;
padding: .28rem;
border-radius: 999px;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(197, 160, 89, .3);
backdrop-filter: blur(8px);
}
.mode-switch__pill {
position: absolute;
top: .28rem;
bottom: .28rem;
border-radius: 999px;
background: linear-gradient(120deg, var(--gold), var(--gold-dark));
box-shadow: 0 6px 18px -6px rgba(197, 160, 89, .9);
transition: transform .38s var(--ease-spring), width .38s var(--ease-spring);
z-index: 0;
}
.mode-switch__btn {
position: relative;
z-index: 1;
padding: .5rem 1.15rem;
border-radius: 999px;
font-size: .82rem;
font-weight: 700;
color: rgba(255, 255, 255, .62);
transition: color .3s ease;
white-space: nowrap;
}
.mode-switch__btn.is-active {
color: var(--navy);
}
/* Sliders dorados */
.aurum-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 999px;
background:
linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--fill, 40%), rgba(255, 255, 255, .16) var(--fill, 40%), rgba(255, 255, 255, .16) 100%);
outline: none;
cursor: pointer;
}
.aurum-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--gold);
box-shadow: 0 4px 14px -2px rgba(0, 0, 0, .5);
transition: transform .18s var(--ease-spring), box-shadow .2s ease;
}
.aurum-range::-webkit-slider-thumb:hover,
.aurum-range:active::-webkit-slider-thumb {
transform: scale(1.22);
box-shadow: 0 0 0 8px rgba(197, 160, 89, .22);
}
.aurum-range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--gold);
cursor: pointer;
}
.aurum-range::-moz-range-track {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, .16);
}
/* Chips de preset */
.chip {
padding: .38rem .8rem;
border-radius: 999px;
font-size: .74rem;
font-weight: 700;
color: rgba(255, 255, 255, .72);
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
transition: all .22s var(--ease-out);
white-space: nowrap;
}
.chip:hover {
background: rgba(197, 160, 89, .2);
border-color: rgba(197, 160, 89, .55);
color: #fff;
transform: translateY(-1px);
}
.chip.is-active {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
}
/* Leyenda del gráfico */
.legend-dot {
width: .6rem;
height: .6rem;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
/* Cuenta atrás/arriba del resultado grande */
.demo-figure {
font-size: clamp(2.4rem, 7vw, 4rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
background: linear-gradient(120deg, #fff 10%, var(--gold-light) 55%, var(--gold) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ==========================================================================
12. ENTRADAS ESCALONADAS Y DETALLES
========================================================================== */
.stagger > * {
opacity: 0;
transform: translateY(18px);
transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html:not(.js) .stagger > * {
opacity: 1;
transform: none;
}
.stagger.is-visible > * {
opacity: 1;
transform: none;
}
.stagger.is-visible > *:nth-child(1) { transition-delay: .00s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: .07s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: .14s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: .21s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: .35s; }
/* Subrayado dorado que se dibuja */
.underline-draw {
position: relative;
display: inline-block;
}
.underline-draw::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
height: 3px;
width: 100%;
border-radius: 2px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform .7s var(--ease-out);
}
.underline-draw.is-visible::after,
.reveal.is-visible .underline-draw::after {
transform: scaleX(1);
}
/* Cabecera con más presencia al hacer scroll */
#site-header {
transition: box-shadow .3s ease, background-color .3s ease, height .3s ease;
}
#site-header.is-stuck {
background-color: rgba(255, 255, 255, .92);
box-shadow: 0 10px 30px -18px rgba(10, 25, 49, .55);
}
/* Píldora de sección */
.eyebrow {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .3rem .8rem .3rem .55rem;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
background: rgba(197, 160, 89, .12);
border: 1px solid rgba(197, 160, 89, .38);
color: var(--gold-dark);
}
.eyebrow--dark {
background: rgba(197, 160, 89, .16);
border-color: rgba(197, 160, 89, .4);
color: var(--gold-light);
}
.eyebrow .dot {
width: .42rem;
height: .42rem;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 3px rgba(197, 160, 89, .25);
animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .45; transform: scale(.82); }
}
/* Timeline del roadmap */
.rm-item {
position: relative;
padding-left: 3rem;
padding-bottom: 2.5rem;
}
.rm-item::before {
content: '';
position: absolute;
left: .72rem;
top: 1.9rem;
bottom: -.4rem;
width: 2px;
background: linear-gradient(180deg, rgba(197, 160, 89, .55), rgba(197, 160, 89, .08));
}
.rm-item:last-child::before { display: none; }
.rm-dot {
position: absolute;
left: 0;
top: .35rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
display: grid;
place-items: center;
font-size: .62rem;
font-weight: 800;
background: #fff;
border: 2px solid var(--gold);
color: var(--gold-dark);
box-shadow: 0 0 0 5px rgba(197, 160, 89, .12);
}
.rm-dot--done {
background: var(--gold);
color: #fff;
border-color: var(--gold-dark);
}
.rm-dot--now {
background: var(--navy);
color: var(--gold-light);
border-color: var(--gold);
animation: pulseRing 2.4s ease-out infinite;
}
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(197, 160, 89, .5); }
70% { box-shadow: 0 0 0 12px rgba(197, 160, 89, 0); }
100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
}
/* Botones de filtro del plan de ruta */
.rm-filtro {
padding: .4rem .9rem;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
color: var(--ink-60);
background: rgba(255, 255, 255, .7);
border: 1px solid rgba(197, 160, 89, .3);
transition: all .22s var(--ease-out);
}
.rm-filtro:hover {
border-color: rgba(197, 160, 89, .7);
color: var(--navy);
transform: translateY(-1px);
}
.rm-filtro.is-active {
background: var(--navy);
border-color: var(--navy);
color: var(--gold-light);
}
/* Barra de progreso genérica */
.prog {
height: 6px;
border-radius: 999px;
background: rgba(10, 25, 49, .08);
overflow: hidden;
}
.prog__bar {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
width: 0;
transition: width 1.1s var(--ease-out);
}
/* Ocultador propio: gana a cualquier utilidad de display de Tailwind, así que
al quitar la clase el elemento recupera su display original (grid, flex…). */
.is-hidden { display: none !important; }
/* ==========================================================================
13. CTA CRUZADA — «después de esta herramienta, prueba esta otra»
========================================================================== */
.savings-cta {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(197, 160, 89, .2);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
}
@media (min-width: 640px) {
.savings-cta {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
}
.savings-cta__titulo {
font-weight: 700;
font-size: 1.05rem;
color: var(--navy);
margin-bottom: .35rem;
}
.savings-cta__descripcion {
font-size: .875rem;
line-height: 1.6;
color: rgba(10, 25, 49, .62);
max-width: 34rem;
}
.savings-cta__boton {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
flex-shrink: 0;
white-space: nowrap;
padding: .8rem 1.5rem;
border-radius: .6rem;
background: var(--gold);
color: var(--navy);
font-size: .875rem;
font-weight: 700;
box-shadow: 0 8px 20px -8px rgba(197, 160, 89, .55);
transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.savings-cta__boton:hover {
background: var(--gold-dark);
box-shadow: 0 10px 24px -8px rgba(197, 160, 89, .65);
}
.savings-cta__boton:focus-visible {
outline: 3px solid var(--gold-dark);
outline-offset: 2px;
}
/* ==========================================================================
14. COLUMNAS QUE DEBEN TERMINAR A LA MISMA ALTURA (evita «escalones»)
--------------------------------------------------------------------------
CSS Grid ya estira ambas columnas a la altura de la más alta por defecto,
pero como son contenedores de bloque esa altura de más queda invisible al
final, sin repartirse — así que el borde de la última tarjeta de la
columna corta se queda por encima del de la otra columna. Convertirla en
columna flex y dejar que su última tarjeta crezca (flex: 1) hace que esa
tarjeta absorba el sobrante y los dos bordes inferiores terminen a la vez,
sea cual sea el contenido (números, texto de diagnóstico…) en cada lado.
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
.pr-col {
display: flex;
flex-direction: column;
}
.pr-col__ultimo {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
}
/* «Coste real de un coche»: en vez de estirar la tarjeta "El gasto
invisible" (que la dejaba con un hueco vacío interno), el hueco que sobra
por encima se reserva para la tarjeta de promoción cruzada hacia Dos
Cubos, que crece para llenarlo exactamente y centra su propio contenido
en el alto de sobra; "El gasto invisible" se queda con su alto natural,
pegada abajo. Antes era el hueco de un anuncio (.aurum-ad / .aurum-ad__slot)
el que crecía así; ahora es .co-promo-doscubos directamente, sin ninguna
estructura de slot anidada que ya no aplica. */
@media (min-width: 1024px) {
.co-gasto-col {
display: flex;
flex-direction: column;
}
.co-promo-doscubos {
flex: 1 1 auto;
margin: 0 0 1.5rem;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.co-gasto-col > .bg-gold-pale {
flex: 0 0 auto;
}
}
/* «Calculadora de jubilación»: rediseño en tres filas — «Tu vida laboral» y
«Tu plan» a medias en la primera, «Tu pensión estimada» a todo lo ancho
en la segunda, «Lo que te toca poner a ti» y «Lo que hay que tener en
cuenta» a medias en la tercera. */
@media (min-width: 1024px) {
/* Fila 1: cada tarjeta ya la estira Grid a la altura de su vecina (son
celdas de la misma fila); lo que falta es que "Tu plan", más corta,
reparta ese sobrante entre sus propias filas de campos en vez de
dejarlo todo junto al final. */
.ju-fila1__tarjeta {
display: flex;
flex-direction: column;
}
.ju-fila1__campos {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Fila 3: "Lo que hay que tener en cuenta" lista avisos que dependen de
los datos (a veces uno, a veces varios), así que la diferencia de
alto con "Lo que te toca poner a ti" es variable, como en el
comparador de comisiones. No hay varias tarjetas entre las que
repartir el sobrante (aquí solo hay una lista), así que se centra
verticalmente en el hueco — mismo recurso que el gráfico de nómina. */
.ju-fila3__tarjeta {
display: flex;
flex-direction: column;
}
.ju-fila3__avisos-envoltorio {
margin-top: auto;
margin-bottom: auto;
}
}
/* «Declaración de la Renta»: la caja del resultado cambia de acento según
salga a devolver (dorado de siempre) o a pagar. No se usa rojo de alarma:
deber dinero a Hacienda no es un error del usuario, solo un dato — pero
conviene que se distinga de un vistazo sin tener que leer la cifra. */
.rt-caja--pagar {
border-color: var(--navy-muted);
}
.rt-caja--pagar .info-tip--claro {
background: rgba(255, 255, 255, .18);
}
/* Mismo reparto de aire que en independencia y nómina: dos tarjetas fijas
en la columna de datos, que crecen a la par para cerrar el hueco. Las
herramientas nuevas comparten la regla en vez de repetir el bloque una
vez por cada una: el patrón es idéntico y así solo hay un sitio que
tocar si algún día cambia.
despido.html ya NO sigue esta regla: "Tu antigüedad" y "Tu salario y el
despido" dejaron de estar apiladas en la misma columna del formulario
(ver más abajo, .dp-total-col / .dp-resultado-col, el mecanismo que las
sustituye para la nueva pareja de columnas de la fila 2). */
@media (min-width: 1024px) {
.rt-col,
.gc-col,
.au-col,
.pa-col,
.su-col {
display: flex;
flex-direction: column;
}
.rt-col__tarjeta,
.gc-col__tarjeta,
.au-col__tarjeta,
.pa-col__tarjeta,
.su-col__tarjeta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.rt-col__campos,
.gc-col__campos,
.au-col__campos,
.pa-col__campos,
.su-col__campos {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* «Indemnización por despido», fila 2: a la izquierda "Te corresponde en
total" con sus avisos condicionales (0, 1 o 2 según el caso); a la
derecha, procedente/improcedente o fin de contrato — un único bloque
visible cada vez, "Desglose del finiquito" ya no vive aquí, se movió
junto a "Lo que hay en juego" en la fila 3.
Los dos lados ya no son simétricos: a la izquierda puede haber 1-3
tarjetas apiladas (la caja + hasta dos avisos), así que ahí el aire
sobrante se sigue repartiendo ENTRE ellas con space-between — con 0
avisos, degrada a un único bloque pegado arriba, que es lo correcto.
A la derecha siempre hay exactamente un bloque visible (nunca dos a la
vez): space-between con un solo hijo no reparte nada y lo dejaría
pegado arriba con el hueco muerto debajo, así que aquí se centra en el
alto de sobra en vez de repartir aire que no tiene con quién repartir. */
@media (min-width: 1024px) {
.dp-total-col {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dp-resultado-col {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* «Sueldo neto e IRPF»: la columna de datos (izquierda, «Tu nómina» +
«Tu situación personal») acaba más arriba que la de resultados y dejaba
un hueco muerto bajo la última tarjeta. Mismo caso que independencia.html:
dos tarjetas fijas, nada condicional, así que el hueco es estable.
Las dos tarjetas NO crecen a partes iguales. Desde que «Tu tipo marginal»
se sacó a todo el ancho de la columna de resultados, esta columna es más
baja que antes, y con ella el hueco que hay que repartir en la de la
izquierda. «Tu situación personal» solo tiene dos filas de campos, así
que TODO ese hueco se concentraba en un único espacio entre ambas —
comprobado con medición directa: en el peor caso quedaba solo 1 px de
margen entre el último campo y el borde inferior de la tarjeta, un ajuste
sin holgura real que cualquier variación mínima de contenido volvería a
desbordar. «Tu nómina» tiene el doble de filas de campos donde repartir
el mismo hueco, así que absorbe ella sola todo el crecimiento: a
«Tu situación personal» se le quita para que se quede siempre en su alto
natural, con el respiro propio de space-y-5 y sin depender de cuánto mida
la columna de resultados. */
@media (min-width: 1024px) {
.nm-col {
display: flex;
flex-direction: column;
}
.nm-col__tarjeta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.nm-col__tarjeta:last-child {
flex-grow: 0;
}
.nm-col__campos {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* «A dónde va tu bruto»: la rejilla de dos celdas junto al bloque de
"Tu tipo marginal" + "El detalle del cálculo" estira la tarjeta del
gráfico a la misma altura que su vecina, mucho más alta. En vez de
agrandar el lienzo (un donut no gana nada siendo más alto y ancho de
forma desproporcionada), se centra verticalmente en el hueco que
queda bajo el título: los márgenes automáticos de flexbox reparten
ese sobrante a partes iguales por encima y por debajo del gráfico. */
.nm-grafico-tarjeta {
display: flex;
flex-direction: column;
}
.nm-grafico-lienzo {
margin-top: auto;
margin-bottom: auto;
}
}
/* «Amortizar hipoteca o invertir»: la fila «El veredicto» (id="ai-caja") /
«El número que decide» ya no comparte columna con "Lo que no sale en el
gráfico" — ahora son dos tarjetas de un único párrafo cada una, una junto
a otra. "El número que decide" es mucho más corta en contenido natural
(comprobado con medición directa: 353px la caja navy contra 221px la
suya, 132px de diferencia) y Grid la estira a la misma altura que su
vecina, dejando ese sobrante como un hueco muerto al final. Con un único
párrafo no hay filas de campos donde repartirlo como en .nm-col o
.cm-col: en vez de eso se centra verticalmente, mismo criterio que ya
usa .nm-grafico-lienzo para un gráfico más corto que su vecina — el
sobrante se lee como respiro alrededor del texto, no como un vacío
debajo. Aplicado a las dos tarjetas de la fila por igual: en "El
veredicto" no cambia nada (es ella la que marca la altura, así que no le
sobra nada que centrar), y así el CSS no necesita distinguir cuál de las
dos es la corta. OJO: amortizar-invertir.js reescribe el className
completo de #ai-caja al pintar el veredicto (varía el color del borde
según quién gane) — la clase ai-fila-veredicto__tarjeta se repite a mano
en las tres cadenas, si no desaparecería en cuanto se recalculase. */
@media (min-width: 1024px) {
.ai-fila-veredicto__tarjeta {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* «Comparador de comisiones»: el par «Plazo (años)» / «Rentabilidad bruta
(%)» va a partes iguales en una rejilla de dos columnas, pero el texto
más largo con su icono de ayuda no cabe en la mitad que le toca y el
icono se queda huérfano en su propia línea. Esto pasaba en CUALQUIER
ancho (móvil incluido), porque «grid-cols-2» no es responsive: reparte
siempre al 50 %, sin importar que un lado necesite mucho más que el otro.
Se usa una container query en vez de una media query de viewport porque
el ancho real de esta rejilla NO sigue el ancho de pantalla de forma
simple: en escritorio depende del ancho de la columna (una fracción de
12), y en móvil depende del ancho de la tarjeta a pantalla completa —
dos curvas distintas que un solo punto de corte por viewport no puede
cubrir. La container query mide el ancho real disponible y decide sola,
sirva la que sirva la combinación de pantalla + diseño. */
.cm-campos-container {
container-type: inline-size;
}
.grid.cm-campos-plazo-rentabilidad {
/* Por defecto, apiladas: nunca falla, cada etiqueta tiene ancho de
sobra. Es el estado seguro mientras no quepan mejor en dos columnas. */
grid-template-columns: 1fr;
}
@container (min-width: 300px) {
.grid.cm-campos-plazo-rentabilidad {
/* A partir de aquí sí entran en dos columnas, pero no a partes
iguales: «Rentabilidad bruta (%)» + icono necesita casi el doble
de espacio que «Plazo (años)». */
grid-template-columns: 3fr 4fr;
}
}
/* «Comparador de comisiones»: ya no es el formulario contra los resultados
— ahora, en la segunda fila, es la caja navy "Lo que te cuesta la
diferencia" (izquierda) contra las tres tarjetas de resultado (derecha:
Comisiones A, Comisiones B y "Dicho de otra forma"). Esta columna de la
derecha puede acabar más corta, y de forma variable — "Dicho de otra
forma" solo aparece con ciertos datos, así que su alto cambia según lo
que teclee cada usuario. Por eso no vale el truco del anuncio que crece
(hipotecas, coche): ahí el hueco es estable porque lo causa contenido
fijo; aquí sería un anuncio de alto impredecible, a veces demasiado bajo
para ser un formato real. En vez de eso, el aire sobrante se reparte
ENTRE las tres tarjetas: la primera se queda arriba, la última siempre
acaba justo donde acaba la caja navy de al lado, y de paso queda con más
respiro visual en vez de un hueco muerto al final. */
@media (min-width: 1024px) {
.cm-col {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* Mismo caso que el comparador de comisiones, en seis herramientas más:
la columna de resultados (derecha) tiene menos contenido natural que la
de datos de entrada, así que Grid la estira y deja un hueco muerto tras
la última tarjeta — grande en renta.html y autonomo.html (sin nada que
lo llene), y pequeño pero real en paro.html, sucesiones.html,
amortizar-invertir.html y ahorro.html (ahí no se veía como un hueco
evidente, pero desalineaba dónde acababa cada lado). En ahorro.html el
desnivel es de apenas ~3-4px entre "Lo que resta rentabilidad" (columna
de datos, más alta) y "El mordisco de la inflación" (última tarjeta de
resultados) — comprobado con medición directa antes de tocar nada: la
columna de datos NO necesita este mecanismo, solo la de resultados.
Mismo remedio en los cinco casos que quedan: el aire sobrante se reparte
entre las tarjetas de la derecha en vez de quedarse muerto al final.
amortizar-invertir.html ya no usa esta clase (.ai-der): la fila
"El veredicto"/"El número que decide" que antes vivía en esa columna se
reestructuró en dos filas de dos tarjetas una junto a otra, con su
propio mecanismo (ai-fila-veredicto__tarjeta, más abajo). */
@media (min-width: 1024px) {
.rt-der,
.au-der,
.pa-der,
.su-der,
.ah-der {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* «Independencia financiera»: ya no es una columna de datos completa
contra una de resultados — ahora "Tu situación" + el bloque "Tu número
mágico"/"Te faltan" (apilados, columna izquierda) tienen que encajar en
la misma altura que "Supuestos" (sola, columna derecha), y el lado que
se quede corto no puede dejar hueco muerto debajo. Mismo mecanismo de
siempre, aplicado ahora a las dos columnas por igual: cada .fi-col es
el contenedor flex de su columna, cada .fi-col__tarjeta crece a partes
iguales dentro de ella, y el aire sobrante se reparte dentro de cada
.fi-col__campos (o, en el bloque navy, entre sus dos filas), donde se
lee como respiro y no como un vacío. */
@media (min-width: 1024px) {
.fi-col {
display: flex;
flex-direction: column;
}
.fi-col__tarjeta {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
.fi-col__campos {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* «Comprar o alquilar»: la columna de resultados (derecha) puede acabar
bastante más corta que la de datos (izquierda) — aquí las cuatro tarjetas
de resultados son fijas (nada se oculta según los datos, a diferencia del
comparador de comisiones), así que el hueco es estable y sí es un buen
sitio para un anuncio real. Mismo truco que en hipotecas y coche: el
anuncio es el último elemento de la columna y crece para cerrar el hueco
exacto, sin dejar espacio en blanco ni alargar la página. */
@media (min-width: 1024px) {
.ca-col {
display: flex;
flex-direction: column;
}
.ca-col > .aurum-ad {
flex: 1 1 auto;
margin: 0 0 0;
min-height: 0;
}
.ca-col > .aurum-ad .aurum-ad__slot {
flex: 1 1 auto;
max-width: none;
height: 100%;
min-height: 0;
}
}
/* Calculadora de hipotecas: la columna de resultados (derecha) puede acabar
más corta que la de datos de entrada (izquierda). Mismo truco que arriba:
las tarjetas de resultados mantienen su alto natural y son los anuncios,
los últimos elementos, los que crecen para cerrar exactamente el hueco.
Hay dos anuncios "contenido" seguidos ahí (dos horizontales en vez de
uno vertical): al tener el mismo flex-grow se reparten el hueco a
partes iguales automáticamente, sin tocar nada más.
Con la amortización anticipada activada aparece una tarjeta más («Efecto
de amortizar anticipadamente», ~230 px con su margen) y el hueco para
los anuncios baja de 296 px a solo 66 px: 33 px por anuncio, demasiado
finos para pasar por un formato real. Por eso aquí SÍ llevan un mínimo
(90 px, un leaderboard) en vez de min-height: 0 como en coche.html. */
@media (min-width: 1024px) {
.hip-col {
display: flex;
flex-direction: column;
}
.hip-col > .aurum-ad {
flex: 1 1 auto;
margin: 0 0 0;
min-height: 0;
}
.hip-col > .aurum-ad .aurum-ad__slot {
flex: 1 1 auto;
max-width: none;
height: 100%;
min-height: 90px;
}
/* Si el mínimo de los anuncios obliga a esta columna a crecer más que
la de datos de entrada, la izquierda tiene que poder seguirla sin
dejar un hueco en blanco al final. En vez de separar sus campos
(se vería raro en un formulario), reparte el sobrante como aire
extra ENTRE sus cuatro tarjetas — mismo recurso que ya usa la
columna de resultados del comparador de comisiones. */
.hip-izq {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* renta.html: «Te ahorra el plan de pensiones» va ahora junto a la caja de
resultado (navy), mucho más alta por su cuadrícula de cuatro cifras. La
rejilla de dos columnas ya iguala el alto por defecto; en vez de repartir
aire entre campos (aquí solo hay un párrafo, no una lista), se centra el
bloque entero en el hueco, igual que el gráfico de nómina. */
@media (min-width: 1024px) {
.rt-ahorro-caja {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* sucesiones.html: «Paso a paso» pasa a estar junto a «Pagarías de
impuesto» en vez de debajo, con el mismo alto vertical. Cualquiera de
las dos puede ser la más alta según los datos (la lista de «Paso a
paso» crece con las filas condicionales de reducción autonómica), así
que ambas necesitan poder absorber el estirón sin dejar un hueco: la
caja navy centra su contenido y la lista de la derecha reparte el aire
entre sus filas. */
@media (min-width: 1024px) {
.su-pagar-caja {
display: flex;
flex-direction: column;
justify-content: center;
}
.su-paso-caja {
display: flex;
flex-direction: column;
}
.su-paso-lista {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* ==========================================================================
15. TARJETA DE SIGUIENTE PASO — columna de resultados de una calculadora
========================================================================== */
.next-step-card {
background: var(--navy);
border-radius: 1rem;
padding: 1.75rem;
color: #fff;
box-shadow: 0 20px 40px -20px rgba(10, 25, 49, .45);
}
.next-step-card__eyebrow {
font-size: .68rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold-light);
margin-bottom: .6rem;
display: block;
}
.next-step-card__titulo {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: .5rem;
}
.next-step-card__descripcion {
font-size: .875rem;
line-height: 1.6;
color: rgba(255, 255, 255, .62);
margin-bottom: 1.25rem;
}
.next-step-card__boton {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .75rem 1.35rem;
border-radius: .6rem;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .18);
color: #fff;
font-size: .85rem;
font-weight: 700;
transition: background .2s ease, border-color .2s ease;
}
.next-step-card__boton:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy);
}
.next-step-card__boton:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 2px;
}
/* ==========================================================================
16. ACCESIBILIDAD / MOVIMIENTO REDUCIDO
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
#aurum-bg .aurora { transform: none !important; }
.stagger > * { opacity: 1 !important; transform: none !important; }
.card-lift:hover { transform: none; }
}
/* Impresión: fuera cromo y publicidad */
@media print {
#aurum-bg,
#aurum-progress,
#aurum-top,
#aurum-toasts,
.aurum-ad,
#site-header,
footer {
display: none !important;
}
body { background: #fff !important; }
}
/* ==========================================================================
MODO LIGERO
Se activa solo cuando el vigilante de aurum-ui.js detecta que el equipo no
mantiene 30 fotogramas por segundo, o cuando el usuario lo fuerza con
RatioFirme.fondoLigero() desde la consola.
No es un "modo degradado feo": se conserva la paleta, el fondo de mármol y
toda la maquetación. Lo que desaparece es lo que solo aporta atmósfera y
cuesta rasterizar en cada fotograma.
========================================================================== */
html.aurum-ligero #aurum-bg .aurora,
html.aurum-ligero #aurum-bg .grain {
display: none;
}
html.aurum-ligero #aurum-bg {
/* Un degradado estático sustituye a las auroras: mismo aire, coste cero. */
background:
radial-gradient(60vw 50vh at 12% 8%, rgba(197, 160, 89, .14), transparent 70%),
radial-gradient(55vw 45vh at 88% 92%, rgba(21, 44, 85, .10), transparent 70%),
var(--gold-pale);
}
html.aurum-ligero #aurum-bg .grid-layer {
transform: none; /* deja de seguir al scroll */
opacity: .5;
}
/* El desenfoque de fondo es de los efectos más caros sin GPU. */
html.aurum-ligero [class*="backdrop-blur"],
html.aurum-ligero .glass,
html.aurum-ligero #site-header {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.aurum-ligero #site-header {
background: rgba(255, 255, 255, .97);
}
/* Inclinación 3D y brillo que sigue al cursor: prescindibles. */
html.aurum-ligero .tilt,
html.aurum-ligero [data-tilt] {
transform: none !important;
}
/* Animaciones permanentes: las que giran en bucle sin que nadie las mire. */
html.aurum-ligero .aurum-ad__slot::after,
html.aurum-ligero .rm-dot--now::before,
html.aurum-ligero .rm-dot--now::after {
animation: none !important;
}
/* ==========================================================================
ERGONOMÍA TÁCTIL (móvil y tablet)
Medido en el navegador a ancho de móvil, había objetivos muy por debajo de
lo que el dedo acierta con comodidad: los radios de "Fijo / Variable /
Mixto" quedaban en 20 px de alto útil, los enlaces del pie en 19 px y los
del menú desplegable en 40 px. La referencia de Apple y Google —y el
criterio AAA de WCAG 2.5.5— es 44 px; el mínimo AA (2.5.8) son 24 px, así
que los enlaces del pie no llegaban ni a ese suelo.
Se corrige aquí, en un solo sitio, en vez de repetir clases por las 24
páginas. Todo va dentro de la media query: en escritorio, donde se apunta
con ratón, el diseño se queda exactamente como estaba.
========================================================================== */
@media (max-width: 1023px) {
/* --- Menú desplegable: de 40 px a 44 px ---------------------------- */
#mobile-menu nav > a {
min-height: 44px;
display: flex;
align-items: center;
}
/* El botón de abrir el menú se queda a 42 px por el borde; con esto
llega a 44 sin cambiar de aspecto. */
#menu-toggle {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* --- Enlaces del pie: 19 px era el peor dato de toda la página ----- */
/* El padding sustituye a la separación que ya daba `space-y`, así que
la lista crece bastante menos de lo que parece: se aprovecha el hueco
que ya existía entre enlaces en vez de sumarle otro. */
footer nav ul > li > a,
footer ul > li > a {
min-height: 44px;
display: flex;
align-items: center;
}
footer ul > li + li {
margin-top: 0;
}
/* --- Radios y casillas dentro de su etiqueta ----------------------- */
/* Dos formas conviven en el marcado: la etiqueta envolviendo al control
(hipotecas: "Fijo / Variable / Mixto") y la etiqueta enlazada con
`for` al lado (gastos-compra). La primera es la que se quedaba en
20 px; la segunda ya era grande porque incluye el texto explicativo.
`:has` distingue justo esa primera forma. Un navegador que no lo
entienda simplemente ignora la regla y todo sigue como hasta ahora. */
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
min-height: 44px;
}
/* El propio control también crece un poco: 16 px es un punto muy fino
para el dedo aunque la etiqueta alrededor ayude a acertar. */
input[type="radio"],
input[type="checkbox"] {
width: 1.25rem;
height: 1.25rem;
}
/* --- Logo de la cabecera ------------------------------------------ */
header a[href="index.html"]:first-of-type {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* ==========================================================================
TABLET: aprovechar el ancho en vez de apilarlo todo
El diseño salta de una columna a dos en `lg` (1024 px), así que una tablet
vertical —un iPad son 768-834 px— se comía la maqueta de móvil: formulario
completo arriba y resultados MUY abajo. Medido en hipotecas, ese bloque
ocupaba 3.530 px de los 5.397 del contenido, dos tercios de la página, y
obligaba a bajar y subir cada vez que se cambiaba un dato.
En una calculadora eso es lo peor que puede pasar: lo útil es ver el
número moverse mientras tocas los campos. Aquí se adelanta la maqueta de
dos columnas a 768 px.
El reparto NO es el mismo que en escritorio. Donde allí va 4/8, en tablet
se usa 5/7: con 712 px de ancho útil, 4/12 dejaría el formulario en 237 px
y las etiquetas largas ("Rendimientos del trabajo (€)") empezarían a
partirse en tres líneas. Con 5/12 son ~297 px y respiran.
========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
.grid.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* La columna de datos gana una parte respecto al escritorio y la de
resultados cede otra: 4/8 pasa a 5/7. */
.lg\:col-span-4 { grid-column: span 5 / span 5; }
.lg\:col-span-8 { grid-column: span 7 / span 7; }
/* Las que ya iban 5/7 en escritorio se quedan igual. */
.lg\:col-span-5 { grid-column: span 5 / span 5; }
.lg\:col-span-7 { grid-column: span 7 / span 7; }
/* Herramientas rediseñadas con dos columnas iguales (renta, autónomo,
jubilación, coche): a 712 px caben perfectamente al 50 %. */
.grid.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Dentro de una columna de ~300 px, una rejilla de cuatro cifras deja
cada dato en 70 px y los números se parten. Se bajan a dos por fila,
que es como ya se ven en móvil. */
.bg-navy .grid.sm\:grid-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
Nada asoma por el lado derecho
Las cajas de resultado llevan un círculo dorado difuminado que se sale a
propósito por la esquina ("-mr-20 -mt-20") para dar profundidad. En la
mayoría de páginas va dentro de un `.deco-recorte`, que lo recorta; en
nueve se quedó suelto, y ahí ensancha el documento: medido en tablet,
comprar-alquilar daba 786 px de contenido para 760 px de pantalla.
El navegador de escritorio lo absorbe, pero en móvil eso se traduce en la
página moviéndose de lado al arrastrar, con el texto bailando bajo el dedo.
`clip` y no `hidden` a propósito: `hidden` convertiría el body en un
contenedor de desplazamiento y rompería cualquier `position: sticky` de
dentro (las cabeceras fijas de las tablas de datos). `clip` recorta y ya.
========================================================================== */
/* Hace falta en los dos: con la regla solo en , el elemento raíz sigue
midiendo el contenido que sobresale y la barra horizontal aparece igual. */
html,
body {
overflow-x: clip;
}
/* contacto.html: la columna derecha (Correo directo + Antes de escribir +
aviso del simulador) es más corta de forma natural que "Escríbenos", que
lleva un formulario de tres campos. Mismo recurso que ya usan renta,
autónomo, paro y sucesiones: la columna se estira con el grid por
defecto, y el aire sobrante se reparte como gaps extra entre sus tres
tarjetas en vez de quedarse como un hueco muerto bajo la última. */
@media (min-width: 1024px) {
.contacto-der {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Justo en el arranque de esta maqueta (1024 px), "Antes de escribir"
necesita un poco más de alto del que le tocaría de forma natural —
el texto de sus dos avisos parte en más líneas con la columna aún
estrecha— y eso hace que sea LA DERECHA la que manda por una vez, no
"Escríbenos". Mismo caso que .hip-izq en hipotecas: el lado que
normalmente manda también necesita poder ceder. Aquí, en vez de
repartir aire entre el título, la descripción y el formulario (se
vería raro con huecos sueltos entre campos), se centra el bloque
entero — el mismo recurso que ya usan las cajas de renta y
sucesiones cuando la que crece es una tarjeta de una sola pieza. */
.contacto-izq {
display: flex;
flex-direction: column;
}
.contacto-izq > .bg-white {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* ==========================================================================
MÓVIL Y TABLET: densidad vertical
Medido a 375 px ANTES de tocar nada:
· Portada 7.034 px de alto = 9,8 pantallas. Las 17 tarjetas se llevaban
4.811 px, el 68 % de la página entera.
· Hipotecas 8.815 px = 10,9 pantallas, con 1.785 px solo de formulario.
El problema no era el tamaño de letra. Los 16 px de base son correctos y
BAJARLOS SERÍA UN ERROR: por debajo de 16 px, iOS hace zoom automático al
enfocar un campo y descoloca la página entera. Los campos tampoco: 46 px de
alto es justo lo que pide el dedo (44 px es el mínimo de WCAG 2.5.5).
Lo que sobraba era el ritmo vertical — márgenes calculados para una rejilla
de tres columnas, apilados en una sola.
Todo vive dentro de media queries: a partir de 1024 px no se aplica ni una
sola regla de este bloque y el diseño de escritorio queda intacto.
NOTA DE ESPECIFICIDAD, QUE AQUÍ NO ES OPCIONAL
aurum-tailwind.css se enlaza DESPUÉS de esta hoja (a propósito: ver el
comentario del en construir.js). A igualdad de especificidad gana
Tailwind, así que un `.tarjeta-desc { margin-bottom: 0 }` perdería contra
su `.mb-5` y la regla no haría nada — sin avisar. Por eso cada selector de
aquí lleva una clase de más, y los de `space-y-*` repiten su misma forma
`:not([hidden]) ~ :not([hidden])`, que puntúa 0,3,0.
========================================================================== */
@media (max-width: 1023px) {
/* --- Tarjetas de herramienta: de 283 px a ~112 px ------------------- */
/* El icono pasa de estar ENCIMA del título a estar A SU IZQUIERDA. Solo
ese cambio recupera 68 px por tarjeta (48 del icono + 20 de su margen)
y deja el título a la altura del icono, que es donde se busca. */
.tools-carousel__item.card-hover {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icono titulo"
"icono desc";
align-items: start;
column-gap: 0.875rem;
row-gap: 0.15rem;
}
/* Tres clases (0,3,0) para ganarle a `.p-7` de Tailwind y, de paso, a la
regla de cajas de más abajo, que puntúa 0,2,1. */
.tools-carousel__item.card-hover.rounded-2xl {
padding: 1rem;
}
.tools-carousel__item .tarjeta-icono {
grid-area: icono;
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0;
}
.tools-carousel__item .tarjeta-icono svg {
width: 1.25rem;
height: 1.25rem;
}
/* El min-height iguala la caja del título a la del icono (40 px), así el
texto queda centrado a su lado en vez de colgando del borde superior. */
.tools-carousel__item .tarjeta-cabecera {
grid-area: titulo;
min-height: 2.5rem;
margin-bottom: 0;
}
.tools-carousel__item .tarjeta-cabecera h4 {
font-size: 1.0625rem;
line-height: 1.25;
}
/* Dos líneas: suficiente para saber qué hace la herramienta, y sobre todo
hace que TODAS las tarjetas midan igual. Antes, una descripción larga
estiraba su tarjeta y el listado quedaba irregular. */
.tools-carousel__item .tarjeta-desc {
grid-area: desc;
margin-bottom: 0;
font-size: 0.875rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* La tarjeta entera ya es un enlace, así que "Abrir herramienta" repetía
la acción y costaba 20 px por tarjeta: 340 px en toda la portada. */
.tools-carousel__item .tarjeta-cta {
display: none;
}
/* --- Índice de categorías ------------------------------------------ */
.tools-indice {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.75rem;
}
.tools-indice__chip {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 0.95rem;
border: 1px solid rgba(197, 160, 89, 0.45);
border-radius: 999px;
background: #fff;
color: var(--navy, #0A1931);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
}
.tools-indice__chip:active {
background: var(--gold-pale, #F9F6F0);
}
/* La cabecera es sticky y mide 72 px: sin esto, saltar a un ancla dejaría
el título del grupo escondido justo debajo de ella. */
[id^="grupo-"] {
scroll-margin-top: 88px;
}
}
/* --- Dos columnas de tarjetas en móviles anchos y plegables ------------- */
/* A 480 px cada tarjeta se queda en ~212 px de ancho, que con el icono a la
izquierda y el título a dos líneas sigue leyéndose bien. Por debajo no:
el título se partiría en cuatro líneas y no se ganaría nada. */
@media (min-width: 480px) and (max-width: 767px) {
.tools-grid.grid,
.tools-carousel__track {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
}
/* --- Interior de las herramientas: aire de escritorio en pantalla estrecha - */
@media (max-width: 767px) {
/* 17 cajas apiladas por página a 24-28 px de margen interior cada una.
Bajarlas a 16-18 px no toca ni un campo y recupera ~200 px. */
main .rounded-2xl.p-6 {
padding: 1rem;
}
main .rounded-2xl.p-7 {
padding: 1.125rem;
}
/* Separación entre cajas y entre campos. Se repite la forma de Tailwind
(`:not([hidden]) ~ :not([hidden])`, 0,3,0) más un `main` delante para
llegar a 0,3,1 y ganarle. Con un `.space-y-6 > * + *` normal (0,1,1)
esto no haría absolutamente nada. */
main .space-y-6 > :not([hidden]) ~ :not([hidden]) {
margin-top: 1rem;
}
main .space-y-5 > :not([hidden]) ~ :not([hidden]) {
margin-top: 0.875rem;
}
main .gap-6 {
gap: 1rem;
}
/* Las gráficas llevan un alto fijo pensado para la columna ancha de
escritorio (380-500 px). A 375 px de pantalla, una de 500 px sale más
alta que ancha: ocupa media pantalla de arrastre y no se lee mejor por
ello. Se recortan a 280 px — Chart.js se reajusta solo porque todas se
crean con maintainAspectRatio en false. */
main .h-\[380px\],
main .h-\[400px\],
main .h-\[420px\],
main .h-\[440px\],
main .h-\[500px\] {
height: 280px;
}
}
/* ==========================================================================
ÍNDICES POR SECCIÓN: el título de categoría por encima del de la herramienta
Los tres listados agrupados (menú ☰, portada y pie) tenían el rótulo de
sección MÁS PEQUEÑO que los nombres de herramienta que agrupa, así que no
ordenaba nada visualmente:
menú ☰ sección 11,2 px · herramientas 14 px
pie sección 12 px · enlaces 14 px
portada sección 12 px · tarjetas 20 px
Se unifican en 15 px. En el menú y el pie eso ya deja la sección por encima
de sus herramientas. En la portada NO: los títulos de tarjeta son de 20 px y
subir el rótulo por encima de esa cifra dejaría de ser un ajuste sutil para
convertirse en el rediseño que se pidió evitar. Ahí gana presencia (de 12 a
15 px) sin invertir la jerarquía.
La clase de tamaño de Tailwind (`text-xs` / `text-[0.7rem]`) se ha quitado
del marcado en vez de sobrescribirla: aurum-tailwind.css se carga después de
esta hoja, así que a igualdad de especificidad ganaría ella y esta regla no
haría nada.
========================================================================== */
.idx-seccion {
font-size: 0.9375rem; /* 15 px */
line-height: 1.3;
}
/* ==========================================================================
MENÚ ☰: acordeón por categoría (solo móvil y tablet)
Este menú es `lg:hidden`, o sea que solo existe por debajo de 1024 px. En
escritorio la navegación es el mega desplegable de la cabecera y no se toca
nada: no hace falta envolver esto en una media query porque el contenedor
entero ya está oculto ahí.
El desplegado NO usa una altura máxima fija. Ya hubo un fallo por eso: un
`max-height` a ojo recortaba el final del menú y no había forma de llegar a
las últimas herramientas. Aquí la altura la calcula el JS con scrollHeight y
al terminar la animación se suelta a `none`, así el panel nunca puede quedar
cortado por un número escrito a mano.
========================================================================== */
.mm-seccion {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
width: 100%;
min-height: 44px; /* mismo objetivo táctil que el resto del menú */
margin-top: 0.35rem;
padding: 0.5rem 0.75rem;
border: 0;
border-radius: 0.5rem;
background: none;
/* Dorado de la paleta, el mismo token que ya usan los rótulos de sección
del mega menú de escritorio (.mega__titulo) y los de la portada. El gris
anterior no distinguía la cabecera de sección de sus herramientas. Se usa
--gold-dark y no --gold porque este texto va sobre blanco: #C5A059 se
queda en 2,6:1 de contraste y no es legible a este tamaño. */
color: var(--gold-dark);
font-family: inherit;
/* 13 px: punto medio entre los 11,2 px originales (text-[0.7rem]) y los
15 px que se aplicaron en la ronda anterior, que quedaron grandes. */
font-size: 0.8125rem;
font-weight: 700;
text-align: left;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
}
.mm-seccion:hover {
background: rgba(197, 160, 89, 0.07);
}
/* El foco visible es lo que hace navegable el acordeón con teclado. */
.mm-seccion:focus-visible {
outline: 2px solid var(--gold, #C5A059);
outline-offset: 2px;
}
.mm-chevron {
width: 1rem;
height: 1rem;
flex-shrink: 0;
transition: transform 0.25s ease;
}
.mm-seccion[aria-expanded="true"] .mm-chevron {
transform: rotate(180deg);
}
.mm-panel {
display: flex;
flex-direction: column;
gap: 0.25rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
/* "RatioFirme" (Nosotros y Contacto) se queda como rótulo fijo, sin plegar: son dos
enlaces sueltos, no una categoría de herramientas, y esconderlos tras otro
clic no ahorra nada. */
.mm-etiqueta {
padding: 0.75rem 0.75rem 0.25rem;
color: var(--gold-dark);
font-size: 0.8125rem; /* mismo tamaño que las secciones plegables */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
@media (prefers-reduced-motion: reduce) {
.mm-chevron,
.mm-panel {
transition: none;
}
}
html.aurum-ligero .mm-chevron,
html.aurum-ligero .mm-panel {
transition: none;
}