/*
* Nombre del archivo: landing.css
* Ubicación: /assets/css/landing.css
* Descripción: Base visual del landing público estilo neón.
*/

:root {
    --landing-bg: #061229;
    --landing-panel: rgba(13, 23, 46, 0.72);
    --landing-cyan: #11b9ff;
    --landing-blue: #0878ff;
    --landing-red: #ff192f;
    --landing-white: #ffffff;
    --landing-muted: #b8c2d6;
    --landing-border: rgba(89, 179, 255, 0.46);
    --landing-shadow-blue: 0 0 9px rgba(17, 185, 255, 0.38);
    --landing-shadow-red: 0 0 18px rgba(255, 25, 47, 0.78);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: radial-gradient(circle at 50% 58%, rgba(13, 118, 221, 0.26), transparent 34%), #051126;
    color: var(--landing-white);
    font-family: 'Inter', system-ui, sans-serif;
    overflow-x: hidden;
}

body.modal-open { overflow: hidden; }

button, input { font: inherit; }

.me-1 { margin-right: 0.25rem; }
.me-2 { margin-right: 0.5rem; }
.text-cyan { color: var(--landing-cyan); }
.text-muted { color: var(--landing-muted); }
.text-red { color: var(--landing-red); }
.text-blue { color: var(--landing-blue); }

.landing-header {
    position: fixed;
    top: 10px;
    left: 4%;
    right: 3%;
    z-index: 20;
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) max-content;
    align-items: center;
    gap: 28px;
    min-height: 66px;
}

.landing-brand img { width: 150px; max-height: 66px; object-fit: contain; filter: drop-shadow(-1px 0 0 rgba(255,255,255,0.96)) drop-shadow(1px 0 0 rgba(255,255,255,0.96)) drop-shadow(0 -1px 0 rgba(255,255,255,0.96)) drop-shadow(0 1px 0 rgba(255,255,255,0.96)) drop-shadow(0 0 10px rgba(0,123,255,0.5)); }
.landing-brand span { color: var(--landing-white); font-weight: 900; text-transform: uppercase; }
.landing-company-title { min-width: 0; background: linear-gradient(100deg, #d9f8ff 8%, var(--landing-cyan) 42%, #fff 54%, var(--landing-red) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1px rgba(17,185,255,0.9); color: transparent; font-family: 'Inter', sans-serif; font-size: clamp(1.55rem, 2.9vw, 2.55rem); font-synthesis: none; font-weight: 900; letter-spacing: 0.12em; overflow: hidden; text-align: center; text-overflow: ellipsis; text-shadow: -1px -1px 0 rgba(17,185,255,0.9), 1px 1px 0 rgba(255,25,47,0.82), 0 0 2px rgba(255,255,255,0.85), 0 0 7px rgba(17,185,255,0.64), 2px 2px 7px rgba(255,25,47,0.48); text-transform: uppercase; white-space: nowrap; animation: landing-neon-pulse 3.8s ease-in-out infinite; }

@keyframes landing-neon-pulse {
    0%, 100% { opacity: 1; text-shadow: -1px -1px 0 rgba(17,185,255,0.9), 1px 1px 0 rgba(255,25,47,0.82), 0 0 2px rgba(255,255,255,0.85), 0 0 7px rgba(17,185,255,0.64), 2px 2px 7px rgba(255,25,47,0.48); }
    50% { opacity: 0.93; text-shadow: -1px -1px 0 rgba(17,185,255,0.76), 1px 1px 0 rgba(255,25,47,0.68), 0 0 2px rgba(255,255,255,0.75), 0 0 5px rgba(17,185,255,0.48), 2px 2px 5px rgba(255,25,47,0.36); }
}

.landing-nav {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(10px, 1.7vw, 24px);
}

.landing-nav a { color: var(--landing-white); font-size: 0.84rem; font-weight: 800; text-decoration: none; text-shadow: 0 2px 8px #000; }
.social-cluster { display: inline-flex; align-items: center; gap: 10px; }
.social-label { color: rgba(255,255,255,0.82); font-size: 0.78rem; font-weight: 900; text-shadow: 0 2px 8px #000; }
.social-cluster a { color: #858f9d; font-size: 1.05rem; transition: color 0.2s ease, filter 0.2s ease; }
.social-cluster a:hover { color: var(--landing-cyan); filter: drop-shadow(0 0 5px rgba(17,185,255,0.38)); }