/* Portal público (landing) — estilos extraídos del monolito landing.html */ body { background-color: #020617; /* obsidian */ color: #f8fafc; overflow-x: hidden; } /* Glassmorphism Utilities */ .glass-panel { background: rgba(15, 23, 42, 0.4); /* Slate 900 with high transparency */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .glass-panel:hover { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(6, 182, 212, 0.3); /* Cyan border on hover */ box-shadow: 0 10px 30px -10px rgba(6, 182, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: translateY(-2px); } /* Gradient Text */ .text-gradient { background: linear-gradient(to right, #06b6d4, #6366f1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Background grid */ .bg-grid { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px); } .hide-scrollbar::-webkit-scrollbar { display: none; } /* Smooth in-page navigation with offset for the fixed navbar */ html { scroll-behavior: smooth; } #arquitectura, #impacto, #conocimiento, #prevencion, #calculadora, #comunidad, #faqs { scroll-margin-top: 90px; } /* Scroll-reveal (progressive enhancement: aplicado por JS, sin JS todo queda visible) */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: none; } /* FAQ accordion */ .faq-item .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-item.open .faq-answer { max-height: 500px; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform 0.3s ease; } /* Tighter vertical rhythm on mobile (the desktop mt-32 is too tall on small screens) */ @media (max-width: 768px) { #arquitectura, #impacto, #conocimiento, #prevencion, #calculadora { margin-top: 4rem !important; padding-top: 2rem !important; } #impacto { padding-top: 3rem !important; padding-bottom: 3rem !important; } } /* Keyboard focus visibility (accessibility quality floor) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; border-radius: 4px; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ====================================================================== MODO CLARO (elegante) — capa de override sobre las utilidades Tailwind Se activa con . Paleta: slate-50 con tinte indigo, tarjetas de vidrio blanco, acentos cyan/indigo que resaltan. ====================================================================== */ html.light { color-scheme: light; } html.light body { background: linear-gradient(160deg, #f6f8fc 0%, #eef2fb 45%, #f5f3ff 100%); color: #0f172a; } /* Fondo obsidiana / navy / slate → superficies claras */ html.light .bg-obsidian { background-color: #ffffff !important; } html.light .bg-navy\/95, html.light .bg-navy { background-color: rgba(255,255,255,0.92) !important; } html.light .bg-slate-900, html.light .bg-slate-900\/60, html.light .bg-slate-800, html.light .bg-slate-800\/50 { background-color: #f1f5f9 !important; } /* Grid sutil en gris */ html.light .bg-grid { background-image: linear-gradient(to right, rgba(2,6,23,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(2,6,23,0.035) 1px, transparent 1px); } /* Tarjetas glass → vidrio claro */ html.light .glass-panel { background: rgba(255,255,255,0.72); border: 1px solid rgba(15,23,42,0.07); box-shadow: 0 6px 24px -12px rgba(30,41,59,0.18), inset 0 1px 0 rgba(255,255,255,0.6); } html.light .glass-panel:hover { background: rgba(255,255,255,0.88); border: 1px solid rgba(6,182,212,0.4); box-shadow: 0 14px 34px -14px rgba(6,182,212,0.28), inset 0 1px 0 rgba(255,255,255,0.7); } html.light nav.glass-panel { background: rgba(255,255,255,0.78); border-bottom: 1px solid rgba(15,23,42,0.06); } /* Texto: blanco/slate claros → tonos oscuros legibles */ html.light .text-white { color: #0f172a !important; } html.light .text-slate-300 { color: #334155 !important; } html.light .text-slate-400 { color: #475569 !important; } html.light .text-slate-500 { color: #64748b !important; } html.light .text-slate-600 { color: #64748b !important; } /* Bordes claros */ html.light .border-white\/5 { border-color: rgba(15,23,42,0.06) !important; } html.light .border-white\/10 { border-color: rgba(15,23,42,0.10) !important; } html.light .divide-white\/5 > * { border-color: rgba(15,23,42,0.06) !important; } /* Superficies translúcidas blancas → gris muy claro */ html.light .bg-white\/5 { background-color: rgba(15,23,42,0.04) !important; } html.light .bg-white\/10 { background-color: rgba(15,23,42,0.06) !important; } html.light .hover\:bg-white\/5:hover { background-color: rgba(15,23,42,0.05) !important; } html.light .hover\:bg-white\/10:hover { background-color: rgba(15,23,42,0.08) !important; } /* Botón "Acceso Clínico" y toggles: contraste en claro */ html.light nav .text-slate-300 { color: #475569 !important; } html.light nav a[href="/login"] { background: linear-gradient(135deg, #0891b2, #4f46e5) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 18px -6px rgba(79,70,229,0.5); } html.light nav a[href="/login"], html.light nav a[href="/login"] * { color:#fff !important; } /* Atenuar blobs ambientales para que no laven el fondo */ html.light .animate-blob { opacity: 0.10 !important; } /* El footer se mantiene OSCURO también en modo claro (contraste elegante) → restaurar texto claro */ html.light footer { background: #0b1120 !important; } html.light footer .text-white { color: #ffffff !important; } html.light footer .text-slate-400, html.light footer .text-slate-500, html.light footer .text-slate-300 { color: #94a3b8 !important; } html.light footer .border-white\/5, html.light footer .border-white\/10 { border-color: rgba(255,255,255,0.09) !important; } html.light footer .bg-white\/5 { background: rgba(255,255,255,0.05) !important; } html.light footer .hover\:text-cyan-glow:hover { color: #22d3ee !important; } /* --- Modo claro v2: bandas de sección VIBRANTES (no oscuras) + mockup del hero --- */ /* Banda de "Impacto" (bg-navy/80): degradado cyan→índigo suave, moderno y elegante */ html.light #impacto, html.light .bg-navy\/80 { background: linear-gradient(120deg, #e0f7fb 0%, #eaf0ff 50%, #f3ecff 100%) !important; border-color: rgba(15,23,42,0.06) !important; } /* Banda de "Red de Especialistas" (bg-navy/50): tinte índigo/violeta */ html.light .bg-navy\/50 { background: linear-gradient(120deg, #f3ecff 0%, #eaf0ff 100%) !important; } html.light .bg-navy\/70, html.light .bg-navy\/60 { background-color: #eef2fb !important; } /* Superficies del mockup del hero y tarjetas internas → gris muy claro nítido */ html.light .bg-slate-800\/60, html.light .bg-slate-800\/50, html.light .bg-slate-700, html.light .bg-slate-700\/50, html.light .bg-slate-900\/50, html.light .bg-slate-900\/60, html.light .bg-obsidian\/50 { background-color: #eef2f8 !important; } html.light .mockchart, html.light .mockstat { background: #f4f7fc !important; border-color: rgba(15,23,42,0.09) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); } /* En el mockup: las barras y skeletons ya son sólidos → sólo aseguramos el punto de datos */ html.light .mockchart .bg-white { background: #ffffff !important; } /* Acentos de color se conservan intactos en claro (no oscurecerlos) */ html.light .text-cyan-glow, html.light .text-cyan-400, html.light .text-cyan-300 { color: #0891b2 !important; } html.light .text-indigo-400, html.light .text-indigo-glow { color: #4f46e5 !important; } html.light .text-green-400 { color: #059669 !important; } html.light .text-red-400 { color: #dc2626 !important; } html.light .text-amber-400 { color: #d97706 !important; } html.light .text-purple-400 { color: #7c3aed !important; } /* Chips/eyebrows con fondo tenue de color se mantienen legibles */ html.light .bg-cyan-glow\/10 { background: rgba(6,182,212,0.10) !important; } html.light .bg-indigo-glow\/10 { background: rgba(99,102,241,0.10) !important; } .prose-portal p { margin-bottom: 0.9rem; } .prose-portal strong { color: inherit; font-weight: 700; } html:not(.light) .prose-portal strong { color: #fff; } .prose-portal ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.9rem; }