/* ===== VARIABLES ===== */ /* Sistema "Identidad Guardián" — dark theme (default) */ :root { --bg-rgb: 32,30,31; --edge-rgb: 255,255,255; --red-rgb: 139,8,8; --ember-rgb: 185,28,28; --black: #201e1f; /* Fondo Carbón */ --black-2: #2b2829; /* Superficie */ --black-3: #363132; /* Superficie 2 */ --red: #8b0808; /* Rojo Guardián — líneas de input, acentos distintivos */ --ember: #b91c1c; /* Rojo Ember — reservado para botones de acción */ --gold: #c69a4e; /* Dorado Compañero — solo momentos especiales, nunca decorativo constante */ --red-glow: rgba(139,8,8,0.25); --red-dim: rgba(139,8,8,0.1); --white: #f7f4f5; --white-off: #f7f4f5; --gray: #a39d9e; --gray-light: #cbc5c6; --font-display: 'Montserrat', sans-serif; /* Solo títulos grandes */ --font-body: 'Sora', sans-serif; /* Todo lo demás: cuerpo, formularios, botones, nav */ --ease-guardian: cubic-bezier(0.16, 1, 0.3, 1); /* Aliases used by page content */ --text-primary: var(--white); --card-bg: var(--black-2); --border: rgba(var(--edge-rgb), 0.08); color-scheme: dark; } /* Light theme override — applied via [data-theme="light"] on */ :root[data-theme="light"] { --bg-rgb: 250,247,242; --edge-rgb: 32,26,23; --red-rgb: 139,8,8; --ember-rgb: 185,28,28; --black: #faf7f2; /* Marfil Cálido */ --black-2: #f1ebe1; --black-3: #e7dfd1; --red: #8b0808; --ember: #b91c1c; --gold: #b3822f; --red-glow: rgba(139,8,8,0.16); --red-dim: rgba(139,8,8,0.08); --white: #201a17; --white-off: #201a17; --gray: #6b5f56; --gray-light: #4a413b; color-scheme: light; } /* ===== RESET ===== */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior: smooth; } a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(var(--red-rgb), 0.15); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 10000; background: var(--red); color: #fff; padding: 12px 20px; border-radius: 8px; font-family: var(--font-body); font-weight: 600; text-decoration: none; transition: top 0.2s var(--ease-guardian); } .skip-link:focus-visible { top: 16px; } body { font-family: var(--font-body); background: var(--black); color: var(--white-off); overflow-x: hidden; cursor: default; transition: background-color 0.3s ease, color 0.3s ease; } a { text-decoration: none; cursor: pointer; } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* ===== NOISE TEXTURE ===== */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: 0.4; transition: opacity 0.3s ease; } :root[data-theme="light"] body::before { opacity: 0.06; } /* ===== ICONS (Lucide, inline SVG) ===== */ /* Default: white/text-color by default, red only when active/selected — same convention as the app's icon system. Containers with their own width/height (e.g. .feat-card .icon) override this. */ .icon-svg { width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -0.15em; color: currentColor; } .icon-inline { width: 1em; height: 1em; vertical-align: -0.125em; } .donate-opt .icon-svg { width: 1.2rem; height: 1.2rem; } /* ===== HEADER ===== */ header { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 6%; background: rgba(var(--bg-rgb),0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(var(--edge-rgb),0.06); z-index: 1000; transition: padding 0.3s var(--ease-guardian), background-color 0.3s ease, border-color 0.3s ease; } header.scrolled { padding: 12px 6%; background: rgba(var(--bg-rgb),0.97); box-shadow: 0 10px 40px rgba(0,0,0,0.35); } .logo img { height: 42px; width: auto; display: block; filter: brightness(1); transition: opacity 0.2s; } .logo img:hover { opacity: 0.85; } nav ul.desktop { display: flex; gap: 2.2rem; list-style: none; } nav ul.desktop li a { font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-light); transition: color 0.2s; position: relative; } nav ul.desktop li a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--red); transition: width 0.25s var(--ease-guardian); } nav ul.desktop li a:hover { color: var(--white); } nav ul.desktop li a:hover::after { width: 100%; } .nav-cta { background: var(--ember); color: var(--white) !important; padding: 8px 20px; border-radius: 40px; font-size: 0.84rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; transition: background 0.2s, transform 0.35s var(--ease-guardian) !important; } .nav-cta:hover { background: var(--red) !important; transform: translateY(-1px); } .nav-cta::after { display: none !important; } /* Hamburger — es