/* ========================================================================== Plani Finanzas — Estilos base compartidos Reset, variables de marca, navegación, botones y footer. Usado por: index.html, blog.html y blog/*.html ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --green-dark: #1A7A4A; --green-mid: #22A05A; --green-light: #E8F5EE; --green-accent: #4CAF72; --green-pale: #F0FAF4; --white: #FFFFFF; --gray-900: #1A1A2E; --gray-700: #3D3D5C; --gray-500: #6B7280; --gray-400: #9CA3AF; --gray-200: #E5E7EB; --gray-100: #F9FAFB; --yellow: #F59E0B; --red: #EF4444; --blue: #3B82F6; } /* ========================================================================== MODO OSCURO Redefine las mismas variables de superficie/texto que ya usa el resto de las hojas de estilo, así que nav, botones, tarjetas, footer, artículos, etc. cambian de tema automáticamente sin tocar esas reglas. Los colores de marca (verdes) se mantienen iguales en ambos modos. Se activa con data-theme="dark" en (toggleTheme() en js/main.js, con localStorage) y, si el usuario no eligió nada aún, respeta el modo oscuro del sistema operativo. ========================================================================== */ :root[data-theme="dark"] { --white: #14151F; --gray-100: #1B1C28; --gray-200: #2D2E3D; --gray-400: #6B6D80; --gray-500: #9195AA; --gray-700: #C7C9D9; --gray-900: #F3F4F6; --green-pale: #17231D; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --white: #14151F; --gray-100: #1B1C28; --gray-200: #2D2E3D; --gray-400: #6B6D80; --gray-500: #9195AA; --gray-700: #C7C9D9; --gray-900: #F3F4F6; --green-pale: #17231D; } } body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--gray-900); transition: background-color 0.25s ease, color 0.25s ease; } /* NAV */ nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-200); padding: 0 1.25rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; color: var(--green-dark); text-decoration: none; } .logo-icon { width: 36px; height: 36px; background: var(--green-dark); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 1rem; } .nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-links a { text-decoration: none; color: var(--gray-700); font-size: 0.9rem; font-weight: 500; transition: color 0.2s; } .nav-links a:hover { color: var(--green-dark); } .nav-cta { display: flex; align-items: center; gap: 0.75rem; } .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--gray-900); border-radius: 2px; } .nav-cta-mobile { display: none; } @media (max-width: 860px) { nav { padding: 0 1rem; } .nav-toggle { display: flex; } .nav-cta { display: none; } .nav-links { position: fixed; top: 64px; left: 0; right: 0; background: var(--white); flex-direction: column; align-items: flex-start; gap: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; border-bottom: 1px solid var(--gray-200); } .nav-links.open { max-height: 420px; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 14px 1.25rem; width: 100%; border-bottom: 1px solid var(--gray-100); font-size: 0.95rem; } .nav-cta-mobile { display: flex; flex-direction: column; gap: 10px; padding: 1rem 1.25rem 1.25rem; } .nav-cta-mobile a { border: none; padding: 0.7rem; text-align: center; border-radius: 8px; } .nav-cta-mobile .btn-login { border: 1.5px solid var(--green-dark); } .nav-cta-mobile .btn-primary { background: var(--green-dark); color: white; } } /* BOTONES */ .btn-login { padding: 0.5rem 1.25rem; border: 1.5px solid var(--green-dark); border-radius: 8px; color: var(--green-dark); font-weight: 600; font-size: 0.875rem; cursor: pointer; background: transparent; transition: all 0.2s; text-decoration: none; } .btn-login:hover { background: var(--green-light); } .btn-primary { padding: 0.5rem 1.25rem; background: var(--green-dark); border: none; border-radius: 8px; color: white; font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; text-decoration: none; } .btn-primary:hover { background: var(--green-mid); transform: translateY(-1px); } /* FOOTER */ footer { background: #111827; padding: 3rem 2rem; } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .footer-logo { display: flex; align-items: center; gap: 10px; } .footer-logo-icon { width: 32px; height: 32px; background: var(--green-dark); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 0.9rem; } .footer-logo span { color: white; font-weight: 700; font-size: 1rem; } .footer-links { display: flex; gap: 2rem; } .footer-links a { color: rgba(255,255,255,0.5); font-size: 0.85rem; text-decoration: none; } .footer-copy { color: rgba(255,255,255,0.3); font-size: 0.8rem; } /* ========================================================================== ANIMACIONES AL HACER SCROLL ("reveal") Se activan con js/main.js (IntersectionObserver). El HTML marca los elementos con class="reveal" (y opcionalmente los agrupa dentro de un contenedor class="reveal-group" para que aparezcan escalonados). Se desactivan automáticamente si el usuario prefiere menos movimiento. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } } /* Fondo del nav: usa rgba fijo (no una variable) para el blur, así que necesita su propio ajuste de color en modo oscuro. */ :root[data-theme="dark"] nav { background: rgba(20,21,31,0.92); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) nav { background: rgba(20,21,31,0.92); } } /* BOTÓN DE MODO OSCURO */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; border: 1.5px solid var(--gray-200); background: transparent; color: var(--gray-700); cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--green-dark); color: var(--green-dark); background: var(--green-light); } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-icon-moon { display: none; } [data-theme="dark"] .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-moon { display: block; } .nav-cta-mobile .theme-toggle { align-self: center; }