/**
 * @file landing.css
 * @description
 * Estilos de la landing pública (#landing de index.html), la que ve un visitante sin sesión
 * en la raíz y la que lee el rastreador de Google (AGENTS.md 1.12).
 *
 * @connections
 * - Usado por: Client/public/index.html
 *
 * @tests
 * - Al entrar a https://alangulo.app/ sin sesión, la landing se ve con su diseño y en el
 *   celular el menú y el título se acomodan al ancho.
 */
#landing { position: fixed; inset: 0; overflow-y: auto; z-index: 5; font-family: 'Outfit', sans-serif; background: radial-gradient(circle at top, #0c1014 0%, #050709 100%); color: #ffffff; line-height: 1.6; }
#landing * { box-sizing: border-box; }
#landing .l-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
#landing .l-brand { display: flex; align-items: center; gap: 12px; color: #3ddc97; font-weight: 800; font-size: 20px; text-decoration: none; }
#landing .l-brand img { width: 40px; height: 40px; border-radius: 8px; }
#landing .l-nav { display: flex; gap: 18px; flex-wrap: wrap; }
#landing .l-nav a { color: #8b9cb0; font-weight: 600; text-decoration: none; }
#landing .l-nav a:hover { color: #3ddc97; }
#landing .l-main { max-width: 960px; margin: 0 auto; padding: 40px 20px; }
#landing .l-hero { text-align: center; padding: 40px 20px; margin-bottom: 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); background: rgba(12,16,20,0.7); }
#landing h1 { font-size: 42px; font-weight: 800; margin: 0 0 14px; }
#landing h1 span { color: #3ddc97; }
#landing h2 { font-size: 26px; font-weight: 800; margin: 0 0 18px; border-left: 4px solid #3ddc97; padding-left: 14px; }
#landing h3 { font-size: 19px; margin: 0 0 8px; }
#landing p, #landing li { color: #8b9cb0; font-size: 16px; }
#landing p { margin: 0 0 14px; }
#landing section { margin-bottom: 44px; }
#landing .l-cta { display: inline-block; margin: 8px; padding: 13px 28px; border-radius: 10px; font-weight: 800; text-decoration: none; background: #3ddc97; color: #05120c; }
#landing .l-cta.l-secondary { background: transparent; color: #3ddc97; border: 1px solid #3ddc97; }
#landing .l-android { display: block; width: fit-content; margin: 10px auto 0; } #landing .l-android[hidden] { display: none; } #landing .l-android img { display: block; }
#landing .l-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
#landing .l-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; }
#landing .l-card p { margin: 0; font-size: 15px; }
#landing .l-icon { font-size: 30px; display: block; margin-bottom: 10px; }
#landing ol { padding-left: 22px; }
#landing a { color: #3ddc97; }
#landing .l-footer { border-top: 1px solid rgba(255,255,255,0.08); text-align: center; padding: 28px 20px; font-size: 13px; color: #8b9cb0; }
#landing .l-footer a { margin: 0 8px; }
@media (max-width: 600px) { #landing h1 { font-size: 30px; } #landing .l-header { justify-content: center; padding: 14px; } }
#landing .l-guides { padding-left: 22px; }
#landing .l-guides li { margin-bottom: 8px; }