/* ============================================================ 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; /* ── 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; } *,*::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, sin agrandar la marca visualmente: el enlace crece con padding transparente alrededor del icono de 26px */ @media(max-width:520px){ .gf-brand{margin:-9px 0 -9px -9px;padding:9px} } .gf-brand-mark{width:26px;height:26px;border-radius:7px;background:var(--marino-osc); display:flex;align-items:center;justify-content:center;flex:none} .gf-brand-mark span{font-family:var(--f-display);font-size:14px;font-weight:600;color:var(--oro-claro);line-height:1} .gf-brand-txt{font-family:var(--f-display);font-weight:600;font-size:.96rem;letter-spacing:-.01em} @media(max-width:520px){.gf-brand-txt{display:none}} .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)} .gf-drop{position:relative} .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 .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} @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} /* 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 } /* CTA: botón compacto */ .gf-nav-cta{ margin-left:6px;padding:7px 13px!important; font-size:.77rem!important;white-space:nowrap } /* ── 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 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} .gf-mega-col:first-child .gf-mega-h{margin-top:0} .gf-mega-todo{ grid-column:1/-1;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 } /* overlay oscuro detrás de los paneles */ .gf-drop--mega.is-open::before, .gf-drop--consulta.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} .gf-pop--consulta{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} .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)}} .gf-foot-marca{font-family:var(--f-display);font-size:1.05rem;color:#fff; margin:0 0 var(--s3);font-weight:700} .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} /* ══════════════════════════════════════════ 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%} @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:800;letter-spacing:-.02em} .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