/*==================== Sistema de Diseño — Tema Dark Premium ====================*/ /* Fuentes cargadas desde el (Archivo · Inter · JetBrains Mono) */ :root { /* Paleta de marca Rosseys (tema oscuro sobre navy) */ --accent-rgb: 43, 105, 163; /* azul Rosseys */ --accent-2-rgb: 127, 178, 222; /* celeste Rosseys */ --bg: #122D47; --bg-alt: #122D47; --surface: #16293F; --surface-2: #1E3A57; --border: rgba(var(--accent-2-rgb), 0.10); --border-hover: rgba(var(--accent-rgb), 0.55); --accent: #2B69A3; --accent-2: #7FB2DE; --text: #E8EDF4; --muted: #93A5B8; --font-body: 'Barlow', sans-serif; --font-head: 'Archivo', sans-serif; --font-display: 'Archivo', sans-serif; --font-mono: 'JetBrains Mono', monospace; } * { box-sizing: border-box; } body { font-family: var(--font-body); line-height: 1.65; color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: #fff; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: #fff; } /* Íconos SVG inline (sprite) — heredan tamaño (1em) y color (currentColor) */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; } .icon-fw { width: 1.15em; } /* Secciones */ section { overflow: hidden; } section.bg-light { background-color: var(--bg-alt) !important; } /* Título de sección — Monolito Navy: grande, mayúsculas, alineado a la izquierda */ section > .container > h2 { text-align: left !important; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; margin-bottom: 1rem; } section > .container > h2::after { display: none; } /* Texto claro forzado (override de Bootstrap .text-dark dentro de cards oscuras) */ .card .text-dark, .card .card-title, .card .card-text { color: var(--text) !important; } /* Tarjetas */ .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: 16px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.15); } .card-title { color: #fff; } /* Badges / chips de tecnología (override de Bootstrap bg-*) */ .badge { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem !important; letter-spacing: .01em; padding: 0.5em 0.85em !important; margin: 0 6px 6px 0; border-radius: 999px !important; background-color: rgba(var(--accent-rgb), 0.12) !important; color: var(--accent-2) !important; border: 1px solid rgba(var(--accent-rgb), 0.25); } /* Botones */ .btn-light { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; border: none; font-weight: 600; padding: 12px 32px; border-radius: 10px; transition: all .3s ease; letter-spacing: .01em; } .btn-light:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.35); } .btn-outline-light { color: var(--text); border: 1px solid var(--border); font-weight: 600; padding: 12px 32px; border-radius: 10px; transition: all .3s ease; } .btn-outline-light:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--accent); color: #fff; } .btn-outline-primary { color: var(--accent-2); border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 10px; font-weight: 600; transition: all .3s ease; } .btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* Footer */ footer { background-color: var(--bg-alt); color: var(--muted); padding: 40px 0; font-size: 0.9rem; text-align: center; border-top: 1px solid var(--border); } footer p { margin-bottom: 0; } .footer-founder { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: .02em; } .footer-founder a { color: var(--accent-2); } .footer-founder a:hover { color: #fff; } footer .social-icons a { color: var(--muted); font-size: 1.3rem; transition: color .3s ease, transform .3s ease; display: inline-block; } footer .social-icons a:hover { color: var(--accent-2); transform: translateY(-3px); } @media (max-width: 768px) { .card { margin-bottom: 1rem; } }