/* ============================================================ eDove — portada pública (raicesyconjuros.com) Estilo "eDove Classic": monocromo elegante, papel cálido, texto casi negro (alta legibilidad), acento grafito sobrio. El acento cambia por tema (grafito en claro, crema claro en oscuro) para seguir siendo legible. Tema claro/oscuro automático (prefers-color-scheme) + selector manual por [data-theme] en . ============================================================ */ :root { color-scheme: light dark; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --shadow-sm: 0 1px 2px rgba(28, 26, 22, 0.05), 0 1px 3px rgba(28, 26, 22, 0.07); --shadow-md: 0 4px 14px rgba(28, 26, 22, 0.09), 0 2px 4px rgba(28, 26, 22, 0.06); --shadow-lg: 0 20px 45px rgba(28, 26, 22, 0.16); } /* --- Tema claro (por defecto): grafito sobre papel cálido --- */ :root, :root[data-theme='light'] { --brand: #333330; --brand-2: #55524b; --brand-grad: linear-gradient(135deg, #333330 0%, #55524b 100%); --accent-text: #ffffff; --canvas: #f6f5f2; --panel: #ffffff; --panel-soft: #faf9f6; --ink: #1b1b1a; --ink-soft: #46443f; --ink-mute: #77746b; --border: #e6e3dc; --border-strong: #d3cfc5; --link: #333330; --ring: rgba(51, 51, 48, 0.30); --hero-glow-1: rgba(51, 51, 48, 0.06); --hero-glow-2: rgba(85, 82, 75, 0.05); } /* --- Tema oscuro: crema claro sobre carbón cálido --- */ :root[data-theme='dark'] { --brand: #d9d5c8; --brand-2: #c3bfb2; --brand-grad: linear-gradient(135deg, #d9d5c8 0%, #c3bfb2 100%); --accent-text: #1a1917; --canvas: #1a1917; --panel: #232220; --panel-soft: #1f1e1c; --ink: #ecebe6; --ink-soft: #c3c0b8; --ink-mute: #8b887f; --border: #34322d; --border-strong: #45423b; --link: #d9d5c8; --ring: rgba(217, 213, 200, 0.35); --hero-glow-1: rgba(217, 213, 200, 0.05); --hero-glow-2: rgba(195, 191, 178, 0.04); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5); } /* Modo oscuro automático cuando el usuario no ha elegido manualmente */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --brand: #d9d5c8; --brand-2: #c3bfb2; --brand-grad: linear-gradient(135deg, #d9d5c8 0%, #c3bfb2 100%); --accent-text: #1a1917; --canvas: #1a1917; --panel: #232220; --panel-soft: #1f1e1c; --ink: #ecebe6; --ink-soft: #c3c0b8; --ink-mute: #8b887f; --border: #34322d; --border-strong: #45423b; --link: #d9d5c8; --ring: rgba(217, 213, 200, 0.35); --hero-glow-1: rgba(217, 213, 200, 0.05); --hero-glow-2: rgba(195, 191, 178, 0.04); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5); } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--canvas); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--link); } .mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em; } img, svg { max-width: 100%; } /* Accesibilidad: enlace para saltar al contenido */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--brand); color: var(--accent-text); padding: 8px 14px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Foco visible coherente en toda la página */ :where(a, button):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } .container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; } /* ---------------- Header ---------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; max-width: 1080px; margin: 0 auto; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); } .brand__badge { width: 40px; height: 40px; display: block; filter: drop-shadow(0 6px 14px rgba(51, 51, 48, 0.28)); } .brand__word { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; } .brand__word b { font-weight: 800; } .brand__word .accent { color: var(--brand); font-weight: 800; } /* ---------------- Theme toggle ---------------- */ .theme-toggle { width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; } .theme-toggle:hover { border-color: var(--brand); } .theme-toggle svg { width: 20px; height: 20px; } /* Alterna el icono según el tema activo */ .theme-toggle__moon { display: none; } .theme-toggle__sun { display: block; } :root[data-theme='dark'] .theme-toggle__moon { display: block; } :root[data-theme='dark'] .theme-toggle__sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle__moon { display: block; } :root:not([data-theme]) .theme-toggle__sun { display: none; } } /* ---------------- Botones ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1; padding: 0.85rem 1.4rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--panel); color: var(--ink); text-decoration: none; cursor: pointer; transition: transform 0.05s, border-color 0.15s, filter 0.15s, background 0.15s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand-grad); border-color: transparent; color: var(--accent-text); box-shadow: var(--shadow-md); } .btn--primary:hover { filter: brightness(1.04); } .btn--secondary { background: var(--panel); } .btn--secondary:hover { border-color: var(--brand); } .btn svg { width: 18px; height: 18px; } /* ---------------- Hero ---------------- */ .hero { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 480px at 15% -10%, var(--hero-glow-1), transparent 60%), radial-gradient(760px 420px at 105% 20%, var(--hero-glow-2), transparent 55%); } .hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; } .hero__mark { width: 84px; height: 84px; filter: drop-shadow(0 14px 30px rgba(51, 51, 48, 0.35)); } .hero__title { margin: 0; font-size: clamp(2.25rem, 6vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .hero__title .accent { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__tagline { margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: var(--ink-soft); max-width: 40ch; } .hero__lead { margin: 0; color: var(--ink-mute); max-width: 52ch; font-size: 1rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 0.5rem; } /* ---------------- Secciones ---------------- */ .section { padding: clamp(2.5rem, 6vw, 4rem) 0; } .section__head { text-align: center; max-width: 46ch; margin: 0 auto 2rem; } .section__title { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; } .section__desc { margin: 0; color: var(--ink-mute); } /* ---------------- Features ---------------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .feature { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; } .feature__icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); } .feature__icon svg { width: 24px; height: 24px; } .feature__title { margin: 0; font-size: 1.1rem; font-weight: 700; } .feature__desc { margin: 0; color: var(--ink-mute); font-size: 0.94rem; } /* ---------------- Accesos ---------------- */ .accesos { background: var(--panel-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .accesos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .acceso { display: flex; flex-direction: column; gap: 0.75rem; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; } .acceso__head { display: flex; align-items: center; gap: 0.75rem; } .acceso__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent-text); background: var(--brand-grad); } .acceso__icon svg { width: 24px; height: 24px; } .acceso__title { margin: 0; font-size: 1.15rem; font-weight: 700; } .acceso__url { font-size: 0.85rem; color: var(--ink-mute); word-break: break-all; } .acceso__desc { margin: 0; color: var(--ink-mute); font-size: 0.94rem; flex: 1; } .acceso .btn { align-self: flex-start; } /* ---------------- Footer ---------------- */ .site-footer { padding: 2rem 0; color: var(--ink-mute); font-size: 0.9rem; } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; text-align: center; } .site-footer .dot { color: var(--border-strong); } @media (max-width: 520px) { .hero__actions { width: 100%; } .hero__actions .btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }