/* ============================================================ GUÍA FONDOS INDEXADOS · base.css Tokens, tipografía, navegación y pie. Común a todas las páginas. Las clases usan prefijos (gf-) para no colisionar con el CSS interno de las calculadoras. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* ── color: la paleta de la cubierta, con disciplina ── */ --marino:#0B2245; --marino-osc:#041C37; --marino-claro:#1B3A63; --tinta:#141E2E; --papel:#F7F0E5; --papel-alt:#FDFAF4; --blanco:#FFFFFF; --linea:#E3D6C2; --linea-suave:#EFE7D9; --gris:#6A6355; /* 5.26:1 sobre papel · AA */ --gris-claro:#6F675A; /* era #8E8677 (3.18:1, fallaba AA en texto pequeño) */ --oro:#B8862F; /* decorativo: reglas, bordes, fondos */ --oro-texto:#96630D; /* texto pequeño: 4.54:1 sobre papel · AA */ --oro-claro:#D9A854; --oro-pastel:#F6EBD3; --verde:#0E7A5F; /* Faltaba: index.html usa var(--verde-osc) en el degradado del primer avatar de reseña (uno de cada cuatro, el que no tiene su propio color de "l-opinion:nth-of-type"), y un var() sin definir invalida TODA la propiedad "background" que lo contiene -- no solo ese color, el degradado entero -- así que ese avatar se quedaba sin fondo: iniciales blancas sobre transparente, invisibles sobre la página. */ --verde-osc:#0A5443; /* ── tipografía: tres roles ── */ --f-display:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* titulares */ --f-texto:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* cuerpo e interfaz */ --f-cifra:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* cifras, capítulos, ISBN */ /* ── escala de espacio ── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px; --s10:120px; --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --sombra-1:0 1px 2px rgba(20,30,46,.05), 0 2px 8px rgba(20,30,46,.04); --sombra-2:0 2px 4px rgba(20,30,46,.05), 0 14px 30px rgba(20,30,46,.08); --sombra-3:0 6px 14px rgba(20,30,46,.08), 0 28px 56px rgba(20,30,46,.14); --sombra-marino:0 20px 50px rgba(4,28,55,.28); --ancho:1120px; --ancho-texto:660px; } /* ── modo oscuro: index.html y /herramientas son las únicas páginas que cargan SOLO base.css (sin tokens-herramientas.css), así que hasta ahora no tenían ningún soporte de tema oscuro — se veían siempre en claro sin importar el sistema operativo del lector. Misma paleta que ya usan las otras 32 páginas del sitio, para que el salto entre unas y otras no se note. --marino/--marino-osc/--marino-claro/--verde/--oro son la marca: se quedan fijos, igual que en tokens-herramientas.css. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --tinta:#E8EDF4; --papel:#0E1B2E; --papel-alt:#152538; --blanco:#152538; --linea:#243247; --linea-suave:#1C2838; --gris:#9AA7B8; --gris-claro:#8B96A8; --oro-texto:#E0B466; --oro-claro:#E0B466; --oro-pastel:rgba(224,180,102,.16); } /* Componentes de base.css con colores fijos que no siguen las variables de arriba: mismo patrón que ya se corrigió en las otras 32 páginas (tokens-herramientas.css), pero aquí construido desde cero porque base.css nunca tuvo modo oscuro. */ /* El nav y la barra de compra fija son translúcidos en rgba(), no en hex — el mismo bug que .gf-barra-compra en tokens-herramientas.css, aquí construido desde cero porque index.html y /herramientas no cargan ese archivo. */ :root:not([data-theme="light"]) .gf-nav{background:rgba(14,27,44,.86)!important;border-bottom-color:rgba(255,255,255,.09)!important} :root:not([data-theme="light"]) .gf-barra-compra{background:rgba(21,37,56,.94)!important} /* Logo del nav: cuadrado marino fijo (es la marca) que en claro destaca porque el nav es pálido, pero en oscuro el nav TAMBIÉN es marino — el cuadrado se fundía con su propio fondo y solo se veían las barras doradas sueltas. Mismo anillo sutil que ya usa el logo de "Seguimiento de tu cartera" para separarse del fondo. */ :root:not([data-theme="light"]) .gf-brand-mark{box-shadow:inset 0 0 0 1px rgba(217,168,84,.35)!important} :root:not([data-theme="light"]) .gf-nav-links>a, :root:not([data-theme="light"]) .gf-drop>summary, :root:not([data-theme="light"]) .gf-drop-trigger{color:#91A9CA!important} :root:not([data-theme="light"]) .note em, :root:not([data-theme="light"]) .foot em, :root:not([data-theme="light"]) figcaption em{color:#CAB991!important} /* "Página actual" en el nav y en el botón "Herramientas": fondo pálido fijo + texto var(--marino-osc), que no se aclara (es la marca). */ :root:not([data-theme="light"]) .gf-nav-links>a[aria-current="page"]{background:rgba(255,255,255,.1)!important;color:#fff!important} /* Etiqueta "Plantilla"/"Nuevo": mismo dorado translúcido que ya usan las 32 páginas de herramientas para este mismo componente. */ :root:not([data-theme="light"]) .gf-tipo{background:rgba(224,180,102,.18)!important;border-color:rgba(224,180,102,.4)!important;color:#F2D9A0!important} /* Botón "Ver todas las herramientas" del mega-menú: fondo menta fijo + texto marino fijo (!important en el original), así que hay que tocar los dos a la vez o el texto se queda invisible sobre el fondo ya oscurecido. Selector reforzado a "a.gf-mega-todo": con solo ".gf-mega-todo" empataba en especificidad con la regla de fuera de este bloque (que va después en el fichero) y esa ganaba el empate, dejando el texto otra vez en marino sobre marino. */ :root:not([data-theme="light"]) a.gf-mega-todo{background:var(--papel-alt)!important;border-color:var(--linea)!important;color:#6DEECE!important} :root:not([data-theme="light"]) a.gf-mega-todo:hover{background:var(--linea-suave)!important;border-color:var(--verde)!important;color:#6DEECE!important} /* Hoja inferior de los tres paneles en móvil (hojas.js los mueve al y les pone fondo blanco fijo por JS, style="background: #FFFDF9" — un inline style, así que hace falta !important para ganarlo): todo su contenido usa ya el texto claro de este mismo bloque, pero el fondo se quedaba blanco fijo y el texto se volvía invisible. Guías y Consulta no llevaban esta corrección porque Guías estaba oculto en móvil y Consulta, con solo 5 enlaces claros sobre fondo blanco, pasaba menos desapercibido — pero el bug era el mismo en los tres. */ :root:not([data-theme="light"]) .gf-pop--mega, :root:not([data-theme="light"]) .gf-pop--brokers, :root:not([data-theme="light"]) .gf-pop--consulta{background:var(--papel-alt)!important} :root:not([data-theme="light"]) .gf-pop-cab{background:var(--papel-alt)!important;border-color:var(--linea)!important} :root:not([data-theme="light"]) .gf-pop-close{background:var(--linea-suave)!important;color:var(--gris-claro)!important} /* Subtítulo de la entrada destacada del megamenú (Seguimiento de tu cartera): .gf-pop small ya usa var(--gris-claro), que se aclara en oscuro, pero aquí se compone además con el fondo dorado translúcido de .gf-pop-dest, y el resultado se queda en 3.76:1. Un gris algo más claro, solo para este caso, para volver a pasar de 4.5:1. */ :root:not([data-theme="light"]) .gf-pop-dest small{color:#C9D3E0!important} /* Cabeceras de categoría del megamenú (Entender/Decidir/Ejecutar/ Tributar/Vivir de tu cartera): cada una lleva su color de grupo fijo por HTML inline (style="color:#0E7A5F" etc.), pensado para texto oscuro sobre panel claro. En modo oscuro, sobre el mismo panel ya oscurecido, el contraste cae hasta 2.0-3.8:1 según el color — Vivir de tu cartera (morado #6B3FA0) es el peor, con 2.10. Los puntos de color junto a cada enlace (.gf-dot) siguen marcando la categoría; el texto pasa a un gris legible uniforme. */ :root:not([data-theme="light"]) .gf-mega-h{color:var(--gris-claro)!important} /* Botón secundario "de línea": el marino de su texto no se aclara, y el fondo es transparente (se ve el de la página, ya oscuro). */ :root:not([data-theme="light"]) .gf-btn--linea{color:var(--tinta)!important;border-color:var(--linea)!important} :root:not([data-theme="light"]) .gf-btn--linea:hover{background:var(--linea-suave)!important} /* Badge "Próximamente" (edición impresa) */ :root:not([data-theme="light"]) .l-oferta-flag--pronto{background:var(--papel-alt)!important;color:#E4C077!important} /* Badge "Recomendada" en la tarjeta de precio: mismo tratamiento dorado translúcido que el resto de acentos dorados del sitio. */ :root:not([data-theme="light"]) .cp-estado--rec{background:rgba(224,180,102,.16)!important;box-shadow:inset 0 0 0 1px rgba(224,180,102,.4)!important;color:#F4C067!important} /* Badge "Ya disponible": --cp-crema (el texto de .cp-estado) está enlazado a var(--papel), que en oscuro se oscurece -- pensado para que el badge "de fondo oscuro y texto crema" se invierta a "fondo claro y texto oscuro" a la vez. Pero --vivo fija el fondo a un verde SIEMPRE oscuro (var(--verde), sin variante clara), así que la inversión del texto deja texto oscuro sobre fondo oscuro (contraste 3.27). Se fija el texto en blanco, la pareja original pensada para este verde. */ :root:not([data-theme="light"]) .cp-estado--vivo{color:#fff!important} /* "Compra el libro" del nav y de la barra de compra fija: fondo marino fijo (es la marca) sobre un nav/barra que en oscuro TAMBIÉN se oscurece — el botón desaparecía dentro de su propio fondo. Pasa a dorado, que es el acento que ya usa el resto del sitio para las llamadas a la acción sobre fondo oscuro. */ :root:not([data-theme="light"]) .gf-nav-links>a.gf-nav-cta{background:var(--oro-claro)!important;color:#2B1D05!important;box-shadow:0 4px 14px rgba(0,0,0,.35)!important} :root:not([data-theme="light"]) .gf-nav-links>a.gf-nav-cta:hover{background:#E8C67A!important;color:#2B1D05!important} :root:not([data-theme="light"]) .gf-barra-compra-cta{background:var(--oro-claro)!important;color:#2B1D05!important} /* Botón "Comprar en Kindle" de la comparativa de precios: fondo blanco/crema fijo (nunca se pensó en oscuro) con el texto que sí se aclara vía var(--tinta) — quedaba casi blanco sobre blanco. El borde y el texto ya funcionan bien solos; solo hacía falta oscurecer el fondo. */ :root:not([data-theme="light"]) .cp-btn--linea{background:rgba(255,255,255,.06)!important} /* Paginador "Anterior / Siguiente" entre herramientas: el título de cada tarjeta usa var(--marino-osc) (es la marca, fijo) sobre una tarjeta con fondo var(--papel-alt), que sí se oscurece — el título se fundía con su propia tarjeta. */ :root:not([data-theme="light"]) .cdh-pager .pg b{color:var(--tinta)!important} } :root[data-theme="dark"]{ color-scheme: dark; --tinta:#E8EDF4; --papel:#0E1B2E; --papel-alt:#152538; --blanco:#152538; --linea:#243247; --linea-suave:#1C2838; --gris:#9AA7B8; --gris-claro:#8B96A8; --oro-texto:#E0B466; --oro-claro:#E0B466; --oro-pastel:rgba(224,180,102,.16); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--papel);color:var(--tinta); font-family:var(--f-texto);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums; } img{max-width:100%;height:auto;display:block} ::selection{background:rgba(11,34,69,.15)} /* cifras siempre en la face monoespaciada */ .gf-num,.gf-chap{font-family:var(--f-cifra);font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* foco accesible */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--marino);outline-offset:3px;border-radius:4px } .gf-wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--s5)} @media(max-width:640px){.gf-wrap{padding:0 var(--s4)}} /* ══════════════════════════════════════════ NAVEGACIÓN ══════════════════════════════════════════ */ .gf-nav{ position:sticky;top:0;z-index:300; background:rgba(253,250,244,.82); backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6); border-bottom:1px solid var(--linea-suave); } .gf-nav-in{max-width:var(--ancho);margin:0 auto;padding:0 var(--s5);height:62px;display:flex;align-items:center;gap:var(--s5)} @media(max-width:640px){.gf-nav-in{padding:0 var(--s4);height:58px}} .gf-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);white-space:nowrap} /* área táctil mínima 44×44 en móvil: el enlace crece con padding transparente alrededor del icono, además de su propio tamaño. */ @media(max-width:520px){ .gf-brand{margin:-9px 0 -9px -9px;padding:9px} } .gf-brand-mark{width:26px;height:26px;border-radius:6px;background:var(--marino-osc); display:flex;align-items:center;justify-content:center;flex:none} .gf-brand-mark svg{width:17px;height:17px;flex:none} .gf-brand-mark svg rect{fill:var(--oro-claro)} .gf-brand-txt{font-family:var(--f-display);font-weight:600;font-size:.96rem;letter-spacing:-.01em} .gf-brand-txt2{font-weight:400;color:var(--gris)} @media(max-width:520px){.gf-brand-txt{display:none}} /* Logo más grande en móvil: antes se dejaba deliberadamente pequeño (26px) porque competía por sitio con Herramientas/Guías/Consulta y "Comprar el libro" en la misma barra estrecha. Con esos tres ahora en su propia cinta deslizante y el botón de compra oculto en móvil, sobra espacio para que el logo, aquí ya solo (sin el texto al lado, oculto arriba a partir de 520px), pese más visualmente — mismo tamaño que ya tenía en escritorio. */ @media(max-width:900px){ .gf-brand-mark{width:34px;height:34px;border-radius:8px} .gf-brand-mark svg{width:22px;height:22px} } /* En escritorio la marca puede permitirse más tamaño: no compite con nada más en esa franja de la barra, así que crece sin apretar el resto de la navegación. */ @media(min-width:901px){ .gf-brand{gap:12px} .gf-brand-mark{width:34px;height:34px;border-radius:8px} .gf-brand-mark svg{width:22px;height:22px} .gf-brand-txt{font-size:1.2rem} } .gf-nav-toggle{display:none} .gf-nav-burger{display:none;margin-left:auto;width:40px;height:34px;border:1px solid var(--linea); border-radius:var(--r-sm);background:var(--blanco);cursor:pointer; flex-direction:column;justify-content:center;align-items:center;gap:4px} .gf-nav-burger i{display:block;width:17px;height:1.8px;background:var(--tinta);border-radius:2px} .gf-nav-links{margin-left:auto;display:flex;align-items:center;gap:2px} .gf-nav-links>a,.gf-drop>summary{ display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#3E4A5A; font-size:.875rem;font-weight:500;padding:8px 12px;border-radius:var(--r-sm); cursor:pointer;list-style:none;white-space:nowrap;transition:background .15s,color .15s } .gf-drop>summary::-webkit-details-marker{display:none} .gf-drop>summary::after{content:"";width:5px;height:5px;border-right:1.5px solid var(--gris-claro); border-bottom:1.5px solid var(--gris-claro);transform:rotate(45deg) translateY(-2px);transition:transform .18s} .gf-drop[open]>summary::after{transform:rotate(225deg) translateY(1px)} .gf-nav-links>a:hover,.gf-drop>summary:hover{background:var(--oro-pastel);color:var(--marino-osc)} .gf-nav-links>a[aria-current="page"]{color:var(--marino-osc);background:#E9EFF7;font-weight:600} .gf-nav-cta{ margin-left:var(--s3);background:var(--marino-osc);color:#fff!important; font-weight:600!important;padding:9px 18px!important;border-radius:100px!important; box-shadow:0 4px 12px rgba(4,28,55,.22);transition:transform .15s,box-shadow .15s } .gf-nav-cta:hover{background:var(--marino)!important;transform:translateY(-1px);box-shadow:0 8px 18px rgba(4,28,55,.3)} /* Interruptor claro/oscuro manual, en todas las páginas del sitio (assets/js/tema.js). Icono según el resultado real (elección explícita en data-theme, o color-scheme del sistema si no hay elección): las dos reglas espejo son el mismo patrón de :root:not([data-theme="light"]) que ya usa el resto del sitio para que una elección explícita de claro gane incluso con el sistema en oscuro; :root[data-theme="dark"] cubre la dirección contraria. El propio forzado de tema (ambas direcciones) lo hace el script reescribiendo en caliente el mediaText de cada regla @media(prefers-color-scheme:dark) cargada en la página -- no hace falta ninguna otra regla CSS aparte de estas dos, en ningún fichero del sitio, sea cual sea su estructura interna. */ .gf-tema-btn{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:36px;height:36px;margin-left:var(--s2);border:1px solid var(--linea-suave); border-radius:50%;background:var(--blanco);cursor:pointer;padding:0; transition:border-color .15s,transform .15s,box-shadow .15s } .gf-tema-btn:hover{border-color:var(--marino-osc);transform:translateY(-1px);box-shadow:var(--sombra-1)} .gf-tema-btn svg{width:18px;height:18px;stroke:var(--tinta);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .gf-tema-btn .gf-tema-luna{display:none} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .gf-tema-btn .gf-tema-sol{display:none} :root:not([data-theme="light"]) .gf-tema-btn .gf-tema-luna{display:block} } :root[data-theme="dark"] .gf-tema-btn .gf-tema-sol{display:none} :root[data-theme="dark"] .gf-tema-btn .gf-tema-luna{display:block} /* Solo escritorio: en móvil el botón se oculta y el tema sigue el sistema automáticamente -- ya compite bastante espacio el selector de idioma (que en móvil solo se ve en la portada) como para sumar un segundo control secundario en el nav. */ @media(max-width:900px){.gf-tema-btn{display:none}} /* Selector de idioma: bandera + código, en el nav de toda página que tenga versión equivalente en el otro idioma. */ .gf-lang{ display:inline-flex;align-items:center;gap:7px;margin-left:var(--s3); padding:7px 14px 7px 10px;border:1px solid var(--linea-suave);border-radius:100px; text-decoration:none;color:var(--tinta)!important;font-size:.82rem;font-weight:700; background:var(--blanco);transition:border-color .15s,transform .15s,box-shadow .15s; white-space:nowrap } .gf-lang:hover{border-color:var(--marino-osc);transform:translateY(-1px);box-shadow:var(--sombra-1)} .gf-lang svg{width:20px;height:14px;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} @media(max-width:900px){ .gf-lang{margin-left:4px;padding:6px 10px 6px 7px;font-size:.75rem} .gf-lang svg{width:17px;height:12px} /* El selector de idioma sale de la barra en móvil, en toda página (antes solo se ocultaba fuera de la portada): compite por el mismo espacio estrecho que Herramientas, Guías y Consulta, y mover un botón que ya se ve fijo (Comprar el libro) o desplaza el ancho de toda la barra no es aceptable. Se traslada al pie de página, visible solo en móvil — ver ".gf-foot-lang" junto al resto de reglas del pie. */ .gf-nav-links .gf-lang{display:none} } .gf-drop{position:relative} /* BUG corregido: .gf-nav-scroll (el envoltorio de Herramientas/Guías/ Consulta, añadido para la cinta deslizante de móvil) solo tenía display:flex dentro de @media(max-width:900px). En escritorio se quedaba en el display:block por defecto de un
, y sus tres .gf-drop —también en block por defecto— se apilaban en columna en vez de en fila, desbordando la barra por arriba y por abajo. Aquí, fuera de cualquier media query, para que la fila funcione en cualquier ancho; el bloque móvil de abajo solo AÑADE encima el scroll horizontal y el encogido, no redefine el display. */ .gf-nav-scroll{display:flex;align-items:center} .gf-pop{ position:absolute;left:0;top:calc(100% + 6px);background:var(--blanco); border:1px solid var(--linea-suave);border-radius:var(--r-md); box-shadow:var(--sombra-3);padding:6px;min-width:300px;z-index:600 } .gf-pop a{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:var(--r-sm); text-decoration:none;color:var(--tinta);font-size:.87rem;font-weight:500;line-height:1.3} .gf-pop a:hover{background:var(--papel)} .gf-pop a[aria-current="page"]{background:var(--oro-pastel);box-shadow:inset 2px 0 0 var(--oro)} .gf-pop-sep{height:1px;background:var(--linea-suave);margin:6px 6px} .gf-pop-h{font-family:var(--f-cifra);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase; color:var(--gris-claro);margin:7px 0 3px;padding:0 11px;font-weight:600} .gf-pop-h:first-child{margin-top:2px} .gf-pop .gf-dot{width:9px;height:9px;border-radius:2px;flex:none;margin-top:5px} .gf-pop small{display:block;color:var(--gris-claro);font-size:.73rem;font-weight:400; font-family:var(--f-cifra);letter-spacing:-.01em} .gf-tipo{display:inline-block;margin-right:5px;padding:1px 6px;border-radius:100px; font-family:var(--f-cifra);font-size:.56rem;font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:#5A3D06;background:#F6EBD3;border:1px solid #E8C97A; vertical-align:1px} /* Entrada destacada del mega-menú (la herramienta descargable): mismo tratamiento que [aria-current="page"] arriba —fondo dorado pastel + barra dorada a la izquierda— para que resalte con el propio sistema de color del sitio en vez de un bloque aparte a todo lo ancho. */ .gf-pop a.gf-pop-dest{background:var(--oro-pastel);box-shadow:inset 2px 0 0 var(--oro);margin-bottom:4px} .gf-pop a.gf-pop-dest:hover{background:var(--oro-pastel);box-shadow:inset 2px 0 0 var(--oro),var(--sombra-1);transform:translateY(-1px)} /* Cabecera de cierre de cada panel: solo se ve en el bottom sheet de móvil (la regla que la muestra está en @media(max-width:900px) más abajo). En escritorio el hover ya abre y cierra sin botón, por eso aquí por defecto está oculta. */ .gf-pop-cab{display:none} .gf-pop-close{ display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border:none;border-radius:100px; background:var(--papel);color:var(--gris);cursor:pointer;flex:none } .gf-pop-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .gf-pop-close:hover{background:var(--linea-suave);color:var(--tinta)} @media(max-width:900px){ /* ───────────────────────────────────────────────────────────────── MOBILE NAV: Logo + Herramientas + Consulta + CTA pequeño Hamburguesa solo aparece en pantallas muy estrechas (≤ 360px) ───────────────────────────────────────────────────────────────── */ .gf-nav-in{height:54px;gap:0;padding:0 10px 0 12px} /* mostrar todos los elementos en la barra */ .gf-nav-links{ margin-left:auto;display:flex;align-items:center; flex-direction:row;flex-wrap:nowrap;gap:0; /* resetear estados de la hamburguesa */ position:static;top:auto;left:auto;right:auto; background:transparent;border:none;padding:0; box-shadow:none;max-height:none;overflow:visible; transform:none;opacity:1;visibility:visible;transition:none } /* "El libro" se oculta: el logo ya enlaza */ .gf-nav-links>a:first-child{display:none} /* hamburguesa ocultada en móvil estándar */ .gf-nav-burger{display:none} /* Cinta deslizante: Herramientas, Guías y Consulta caben en su propio ancho scrolleable en vez de forzar la barra a ensancharse o a partirse en dos líneas. "Comprar el libro" queda FUERA de este contenedor (sigue siendo hijo directo de .gf-nav-links, con flex:none más abajo), así que nunca se desplaza ni se recorta: solo se desliza lo que hay a su izquierda. min-width:0 es necesario para que un hijo flex pueda encogerse por debajo del ancho de su contenido — sin eso el navegador ensancha la barra entera en vez de activar el scroll interno. */ .gf-nav-scroll{ display:flex;align-items:center;min-width:0;flex:1 1 auto; overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none } .gf-nav-scroll::-webkit-scrollbar{display:none} /* triggers en la barra: tamaño táctil correcto */ .gf-drop-trigger{ padding:8px 9px;font-size:.8rem;white-space:nowrap; display:inline-flex;align-items:center;gap:4px } /* "Comprar el libro" se oculta de la barra fija en móvil: decisión estética, la barra queda más limpia con solo Herramientas / Guías / Consulta. 35 de las 42 páginas conservan un CTA de compra en móvil a través de la barra inferior que aparece al hacer scroll (#barraCompra, en herramientas.js) — las 8 que no la tienen (entre ellas herramientas.html y mapa-fiscal.html) se quedan sin ningún "Comprar el libro" fijo en móvil hasta que se les añada esa misma barra inferior o algún otro CTA equivalente. */ .gf-nav-links .gf-nav-cta{display:none} /* ── Mega: bottom sheet desde abajo ── */ /* position:static para que fixed funcione correctamente */ .gf-drop--mega{position:static;transform:none} .gf-pop--mega{ position:fixed!important;left:0!important;right:0!important; bottom:0!important;top:auto!important; border-radius:22px 22px 0 0!important; padding:22px 18px env(safe-area-inset-bottom,20px)!important; box-shadow:0 -16px 48px rgba(4,28,55,.32)!important; max-height:85vh!important;overflow-y:auto!important; grid-template-columns:1fr!important; z-index:500!important } .gf-drop--mega.is-open>.gf-pop--mega{display:grid!important} .gf-mega-cab{grid-column:1/-1;border-bottom:1px solid var(--linea-suave); padding-bottom:14px;margin-bottom:12px} .gf-mega-col{padding:6px 0} .gf-mega-h{font-size:.64rem;margin-top:12px;column-span:all} .gf-mega-col:first-child .gf-mega-h{margin-top:0} /* Una sola columna a ancho completo, en el orden natural del DOM (Entender, Decidir, Ejecutar, Tributar, Vivir de tu cartera). Antes se emparejaban dos grupos por fila (2 columnas) para nivelar alturas dispares —2, 5, 4, 3 y 6 enlaces—, pero el hueco solo se movía: cada grupo más corto que su pareja dejaba blanco debajo hasta igualar al más largo. En una sola columna cada grupo empieza justo donde acaba el anterior: cero huecos, a costa de más alto total, que ya se resuelve con el scroll propio del panel (max-height:85vh + overflow-y:auto de arriba). */ .gf-mega-todo{ margin-top:16px;padding:13px 16px; font-size:.9rem;border-radius:10px } /* ── Consulta: también bottom sheet ── */ .gf-drop--consulta{position:static;transform:none} .gf-pop--consulta{ position:fixed!important;left:0!important;right:0!important; bottom:0!important;top:auto!important; border-radius:22px 22px 0 0!important; padding:22px 18px env(safe-area-inset-bottom,20px)!important; box-shadow:0 -16px 48px rgba(4,28,55,.32)!important; max-height:80vh!important;overflow-y:auto!important; min-width:0!important;background:var(--blanco)!important; z-index:500!important } /* ── Guías: bottom sheet igual que Herramientas y Consulta ── Antes iba oculto en móvil (display:none) porque no cabía en la barra sin ensancharla; ahora que Herramientas/Guías/Consulta viven en la cinta deslizante de arriba, ya no hace falta ocultarlo. */ .gf-drop--brokers{position:static;transform:none} .gf-pop--brokers{ position:fixed!important;left:0!important;right:0!important; bottom:0!important;top:auto!important; border-radius:22px 22px 0 0!important; padding:22px 18px env(safe-area-inset-bottom,20px)!important; box-shadow:0 -16px 48px rgba(4,28,55,.32)!important; max-height:80vh!important;overflow-y:auto!important; min-width:0!important;background:var(--blanco)!important; z-index:500!important } /* ── Cabecera de cierre, compartida por los tres paneles ── Antes la única forma de cerrar era tocar fuera (roto por un bug de pointer-events, corregido en hojas.js) o volver a tocar el propio botón de arriba — ninguna con pista visual dentro del panel. Con tres paneles y textos largos (Guías tiene 4 categorías, Vivir de tu cartera 6 enlaces), pegajosa (sticky) para seguir alcanzable aunque se haya bajado del todo por la lista. El desplazamiento negativo de margin coincide con el padding de cada panel (22px arriba, 18px a los lados) para que quede a ras del borde redondeado superior. */ .gf-pop-cab{ display:flex;align-items:center;justify-content:space-between;gap:12px; position:sticky;top:0;margin:-22px -18px 14px;padding:16px 18px 12px; background:var(--blanco);border-radius:22px 22px 0 0; border-bottom:1px solid var(--linea-suave);z-index:1 } .gf-pop-cab span{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--tinta)} /* overlay oscuro detrás de los paneles */ .gf-drop--mega.is-open::before, .gf-drop--consulta.is-open::before, .gf-drop--brokers.is-open::before{ content:"";position:fixed;inset:0;background:rgba(8,16,28,.5); z-index:499;animation:fadeIn .2s } @keyframes fadeIn{from{opacity:0}to{opacity:1}} /* pantallas muy estrechas (≤360px): volver a hamburguesa */ } @media(max-width:360px){ .gf-nav-burger{display:flex} .gf-nav-links{ position:fixed;top:54px;left:0;right:0; flex-direction:column;align-items:stretch; background:var(--papel-alt);border-bottom:1px solid var(--linea); padding:var(--s3) var(--s4) var(--s5); box-shadow:0 20px 40px rgba(20,30,46,.14); max-height:calc(100vh - 54px);overflow-y:auto; transform:translateY(-10px);opacity:0;visibility:hidden;transition:.2s } .gf-nav-toggle:checked~.gf-nav-links{transform:none;opacity:1;visibility:visible} .gf-nav-links>a:first-child{display:flex} .gf-nav-burger{display:flex} .gf-nav-links>a,.gf-drop-trigger,.gf-drop>summary{ padding:13px 12px;font-size:1rem;width:100% } .gf-pop--mega{position:static!important;box-shadow:none!important; border:none!important;padding:2px 0 6px 12px!important;max-height:none!important; grid-template-columns:1fr!important;border-radius:0!important} /* pantalla ultra estrecha: la columna sola (Ejecutar) vuelve a 1 sola lista, partirla en 2 aquí dejaría el texto demasiado apretado */ .gf-mega-col:nth-child(3){column-count:1!important} .gf-pop--consulta{position:static!important;box-shadow:none!important; border:none!important;padding:2px 0 6px 12px!important;border-radius:0!important} .gf-pop--brokers{position:static!important;box-shadow:none!important; border:none!important;padding:2px 0 6px 12px!important;border-radius:0!important} .gf-mega-cab{display:none} /* Deshace la cinta deslizante: aquí ya se vuelve al menú hamburguesa a pantalla completa, con cada botón en su propia fila — no hace falta scroll horizontal, y forzarlo rompería ese apilado vertical. display:contents saca el wrapper de en medio sin tocar el HTML: sus hijos (Herramientas, Guías, Consulta) vuelven a comportarse como hijos directos de .gf-nav-links, igual que antes de añadirlo. */ .gf-nav-scroll{display:contents} /* Sin panel fijo que cerrar (aquí son solo filas normales del menú desplegado), la cabecera con botón de cerrar no pinta nada. */ .gf-pop-cab{display:none} .gf-nav-cta{margin:var(--s3) 0 0;justify-content:center;display:flex!important; padding:13px 18px!important;font-size:.9rem!important} } /* ══════════════════════════════════════════ PIE ══════════════════════════════════════════ */ .gf-foot{margin-top:var(--s9);background:var(--marino-osc);color:#C9D3E0} .gf-foot-in{max-width:var(--ancho);margin:0 auto;padding:var(--s8) var(--s5) var(--s7)} @media(max-width:640px){.gf-foot-in{padding:var(--s7) var(--s4)}} .gf-foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s6); border-bottom:1px solid rgba(255,255,255,.1)} @media(max-width:760px){.gf-foot-top{grid-template-columns:1fr;gap:var(--s5)}} /* Logotipo del pie, igualado al del nav (badge redondeado + texto a dos pesos, sin la línea dorada bajo el texto que llevaba antes). El badge no puede ser var(--marino-osc) como en el nav: el fondo del nav es un panel claro y el oscuro del badge contrasta; el fondo del pie YA es marino oscuro, así que aquí el badge lleva un tinte dorado translúcido para seguir distinguiéndose del fondo que lo rodea. */ .gf-foot-marca{display:flex;align-items:center;gap:10px;margin:0 0 14px} .gf-foot-marca-ic{width:26px;height:26px;border-radius:6px;flex:none; background:rgba(217,168,84,.16);border:1px solid rgba(217,168,84,.35); display:flex;align-items:center;justify-content:center} .gf-foot-marca-ic svg{width:17px;height:17px;flex:none} .gf-foot-marca-ic svg rect{fill:var(--oro-claro)} .gf-foot-marca-txt{font-family:var(--f-display);font-size:1rem;font-weight:700; color:#fff;letter-spacing:-.01em} .gf-foot-marca-txt span{font-weight:400;color:#A9B6C7} .gf-foot h4{font-family:var(--f-display);font-size:1.05rem;color:#fff;margin:0 0 var(--s3);font-weight:600} .gf-foot .gf-foot-lead{font-size:.9rem;line-height:1.6;margin:0;max-width:38ch;color:#A9B6C7} .gf-foot .gf-foot-isbn{font-family:var(--f-cifra);font-size:.78rem;color:#8494A8;margin-top:var(--s3)} .gf-foot-col p{font-family:var(--f-texto);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--oro-claro);font-weight:600;margin:0 0 var(--s3)} .gf-foot-col a{display:block;color:#C9D3E0;text-decoration:none;font-size:.88rem;padding:4px 0;transition:color .15s} .gf-foot-col a:hover{color:#fff} .gf-foot-legal{padding-top:var(--s5);font-size:.76rem;line-height:1.6;color:#7C8B9E;max-width:80ch} .gf-foot-legal a{color:#A9B6C7} /* Selector de idioma trasladado aquí solo en móvil (ver .gf-nav-links .gf-lang{display:none} en el bloque @media(max-width:900px) de más arriba, que lo saca de la barra). En escritorio no se muestra: ya está en el nav, no hace falta duplicarlo. */ .gf-foot-lang{display:none} @media(max-width:900px){ .gf-foot-lang{display:block;text-align:center;padding-top:var(--s6)} .gf-foot-lang .gf-lang{margin:0} } /* ══════════════════════════════════════════ UTILIDADES compartidas ══════════════════════════════════════════ */ .gf-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-family:var(--f-texto);font-size:.72rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--oro) } .gf-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--oro);flex:none} .gf-rule{height:1px;background:var(--linea);border:0;margin:0} .gf-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--f-texto);font-weight:600;font-size:.94rem;text-decoration:none; padding:14px 26px;border-radius:100px;border:1.5px solid transparent;cursor:pointer; transition:transform .16s,box-shadow .16s,background .16s,border-color .16s } .gf-btn--primario{background:var(--marino-osc);color:#fff;box-shadow:0 6px 18px rgba(4,28,55,.24)} .gf-btn--primario:hover{background:var(--marino);transform:translateY(-2px);box-shadow:0 12px 28px rgba(4,28,55,.34)} .gf-btn--linea{color:var(--marino-osc);border-color:#C3CBD6;background:transparent} .gf-btn--linea:hover{border-color:var(--marino-osc);background:rgba(11,34,69,.05)} .gf-btn--oro{background:var(--oro-claro);color:#2B1D05;box-shadow:0 6px 18px rgba(184,134,47,.3)} .gf-btn--oro:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(184,134,47,.4)} .gf-btn--bloque{width:100%} /* ── Barra de compra fija: mismo componente que la de la home, ahora compartido para poder usarlo en cualquier herramienta o página de brokers. Aparece cuando el
propio de la página deja de verse (lo activa herramientas.12ba9e56.js), no cuando aparece un .l-hero —eso solo existe en la home—, así que sirve en cualquier página que tenga su cabecera habitual. */ .gf-barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:400; background:rgba(253,250,244,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--linea);box-shadow:0 -6px 24px rgba(18,35,60,.12); transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.3,1)} .gf-barra-compra[data-visible="1"]{transform:none} .gf-barra-compra-in{max-width:var(--ancho);margin:0 auto;padding:12px var(--s5); display:flex;align-items:center;gap:var(--s4)} .gf-barra-compra-p{border-radius:3px;box-shadow:0 3px 10px rgba(4,28,55,.28);flex:none} .gf-barra-compra-t{flex:1;min-width:0} .gf-barra-compra-t b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:800; color:var(--tinta);letter-spacing:-.02em} .gf-barra-compra-t>span{display:block;font-family:var(--f-cifra);font-size:.78rem;color:var(--gris); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gf-barra-compra-cta{flex:none;padding:12px 24px;font-size:.9rem;white-space:nowrap} @media(max-width:560px){ .gf-barra-compra-in{padding:8px var(--s4);gap:10px;align-items:center;flex-wrap:nowrap} .gf-barra-compra-p{display:block;width:24px;height:34px} .gf-barra-compra-t{min-width:0;overflow:hidden} .gf-barra-compra-t b{font-size:.86rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gf-barra-compra-t>span{display:none} .gf-barra-compra-cta{flex:0 0 auto;width:auto!important;padding:10px 15px;font-size:.82rem; min-height:42px;display:inline-flex;align-items:center;justify-content:center;line-height:1} .gf-barra-compra{padding-bottom:env(safe-area-inset-bottom,0)} } @media print{.gf-barra-compra{display:none!important}} @media print{.gf-nav,.gf-foot{display:none}} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ══════════════════════════════════════════ PAGINADOR entre herramientas ══════════════════════════════════════════ */ .cdh-pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4); max-width:var(--ancho);margin:var(--s8) auto 0;padding:0 var(--s5)} @media(max-width:640px){.cdh-pager{grid-template-columns:1fr;padding:0 var(--s4);margin-top:var(--s7)}} .cdh-pager .pg{display:flex;flex-direction:column;gap:3px; background:var(--papel-alt);border:1px solid var(--linea);border-radius:var(--r-md); padding:var(--s4) var(--s5);text-decoration:none;color:var(--tinta); transition:border-color .18s,transform .18s,box-shadow .18s} .cdh-pager .pg:hover{border-color:var(--marino);transform:translateY(-2px);box-shadow:var(--sombra-2)} .cdh-pager .pg.next{text-align:right;align-items:flex-end} .cdh-pager .pg span{font-family:var(--f-cifra);font-size:.72rem;color:var(--gris-claro); letter-spacing:.04em;text-transform:uppercase} .cdh-pager .pg b{font-family:var(--f-display);font-size:.98rem;font-weight:600; color:var(--marino-osc);line-height:1.3} /* ── Titulares en Manrope: pesos y tracking calibrados para sans ── */ h1,h2,h3,h4{font-family:var(--f-display)} h1{font-weight:800;letter-spacing:-.03em;line-height:1.08} h2{font-weight:700;letter-spacing:-.022em} h3{font-weight:700;letter-spacing:-.015em} .gf-brand-txt{font-weight:700;letter-spacing:-.008em} .cdh-pager .pg b{font-weight:700} /* ══════════════════════════════════════════════════════════ Tablas de datos en pantallas pequeñas: desplazamiento horizontal con sombra en el borde que indica más columnas ══════════════════════════════════════════════════════════ */ .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; background: linear-gradient(to right,var(--papel2) 30%,rgba(255,253,249,0)) left center/40px 100% no-repeat, linear-gradient(to left,var(--papel2) 30%,rgba(255,253,249,0)) right center/40px 100% no-repeat, radial-gradient(farthest-side at 0 50%,rgba(18,35,60,.15),transparent) left center/14px 100% no-repeat, radial-gradient(farthest-side at 100% 50%,rgba(18,35,60,.15),transparent) right center/14px 100% no-repeat; background-attachment:local,local,scroll,scroll} .tw table{margin:0} .tw::-webkit-scrollbar{height:8px} .tw::-webkit-scrollbar-thumb{background:rgba(18,35,60,.22);border-radius:100px} @media(max-width:720px){ .tw table{font-size:.82rem} .tw th,.tw td{padding:8px 10px!important;white-space:nowrap} .tw table[style*="min-width"]{min-width:0!important} } @media(max-width:420px){.tw table{font-size:.77rem}.tw th,.tw td{padding:6px 8px!important}} @media print{.tw{overflow:visible!important;background:none!important}.tw table{font-size:9pt}} /* Aviso de que la tabla se desliza. No puede ser un ::before del propio contenedor: al llevar overflow-x:auto, el eje Y también pasa a auto y el pseudo-elemento queda recortado (comprobado). Se inserta como hermano por JS y solo cuando la tabla desborda de verdad. */ .tbl-aviso{ display:none;margin:0 0 8px; font-family:var(--f-cifra);font-size:.72rem;color:var(--gris-claro); letter-spacing:.02em } @media(max-width:720px){.tbl-aviso{display:block}} @media print{.tbl-aviso{display:none!important}} /* ══════════════════════════════════════════════════════════ ACCESIBILIDAD · WCAG 2.1 AA Ratios verificados con medición, no a ojo: --gris 5.26:1 texto normal OK --gris-claro 4.93:1 texto pequeño OK (antes 3.18, fallaba) --oro-texto 4.54:1 antetítulos y cifras OK (antes 2.86, fallaba) El oro claro y el --oro se reservan a elementos decorativos, donde el ratio de contraste no aplica. ══════════════════════════════════════════════════════════ */ /* antetítulos: eran oro decorativo sobre papel (2.86:1) */ .gf-eyebrow,.h-eyebrow,.l-eyebrow{color:var(--oro-texto)} /* los desplegables del menú: el subtítulo pasaba de 3.6:1 */ .gf-pop small{color:var(--gris-claro)} /* referencias de capítulo, notas y pies de tabla */ .h-ficha-ref,.h-bloque-cuenta,.h-indice a i,.mf-tramos-pie,.mf-ej-t, .bi-cap,.gf-foot-isbn,.l-paso-h{color:var(--gris-claro)} /* el oro sobre fondo marino sí cumple: allí se mantiene el claro */ .gf-foot .gf-foot-col p,.l-cifra b,.l-cierre .l-eyebrow, .l-autor-rol,.l-sello b{color:var(--oro-claro)} /* foco visible en todo elemento interactivo */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,label:focus-visible{ outline:3px solid var(--marino);outline-offset:2px;border-radius:4px} /* enlace de salto al contenido, para lectores de pantalla y teclado */ .gf-saltar{position:absolute;left:-9999px;top:0;z-index:999; background:var(--marino-osc);color:#fff;padding:12px 20px;border-radius:0 0 10px 0; font-weight:700;font-size:.92rem;text-decoration:none} .gf-saltar:focus{left:0} /* el título de las obras: mismo aspecto que tenía como h3 */ .bi-titulo{font-size:1.12rem;margin:0 0 4px;line-height:1.3;color:var(--tinta);font-weight:700} /* veredicto de las calculadoras comparativas: lo rellena el JS, por eso es

y no encabezado (rompía la jerarquía h1→h3) */ .vt-titulo{font-family:var(--f-display);font-weight:700;font-size:1.35rem; letter-spacing:-.02em;margin:0;color:inherit} /* los dos lados de una comparación están al mismo nivel que el resto de secciones: son h2, no h4 (evita el salto h1→h4) */ .cmp-lado{font-family:var(--f-display);font-weight:700;font-size:1.05rem; letter-spacing:-.015em;margin:0 0 8px} /* antetítulos sobre las cabeceras oscuras de herramienta: el oro claro daba 4.33:1 y necesita 4.5 para texto pequeño */ :root{--oro-sobre-oscuro:#E0B466} header .eyebrow,.hero .eyebrow{color:var(--oro-sobre-oscuro)} /* cursivas pequeñas dentro de notas: subían de --gris-claro para cumplir AA */ .note em,.foot em,figcaption em{color:#5C5648} /* ══════════════════════════════════════════════════════════ Menú "Herramientas": mega-panel con las 14 herramientas. Nativo

/ para que el clic funcione en cualquier dispositivo; en escritorio con puntero se añade apertura por hover, sin perder el comportamiento por clic. ══════════════════════════════════════════════════════════ */ /* El disparador es un