/* SEUWEB v5d — Base (cinematic premium) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; max-width: 100%; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.68; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; position: relative; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 1.25rem; z-index: 200; padding: 0.75rem 1.4rem; background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 700; border-radius: var(--radius-md); font-size: 0.9rem; transition: top .2s var(--ease-out-expo); } .skip-link:focus { top: 1.25rem; } /* Container */ .container { width: min(100% - 2.75rem, var(--max-width)); margin-inline: auto; } @media (max-width: 640px) { .container { width: min(100% - 3.25rem, var(--max-width)); } /* Extra safety to kill any right margin/overscroll on mobile */ html, body { overflow-x: hidden; max-width: 100%; } } /* Premium section headers */ .section { padding: var(--space-section) 0; } .section--border { border-top: 1px solid var(--color-border); } .section-header { margin-bottom: 3.25rem; } .section-header.center { text-align: center; } .section-header.center .section-lead { text-align: center; margin-left: auto; margin-right: auto; } .section-label { font-family: var(--font-display-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.9rem; opacity: 0.95; } .section-num { font-feature-settings: "tnum"; margin-right: 0.6em; opacity: 0.75; } .section-title { font-family: var(--font-display-sans); font-size: clamp(2.95rem, 7.1vw, 5.65rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.94; color: var(--color-text); margin-bottom: 1.1rem; max-width: none; } .section-header.center .section-title { max-width: none; margin-left: auto; margin-right: auto; } .section-lead { font-size: 1.1rem; max-width: 42rem; color: var(--color-text-muted); line-height: 1.55; } /* Text accents — como prod online */ .text-accent, .text-gradient { background: linear-gradient(90deg, var(--color-accent), var(--color-violet-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; font-family: inherit; font-weight: inherit; } .accent { color: var(--color-accent); font-weight: 600; font-style: normal; font-family: inherit; } /* Scroll progress */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; z-index: var(--z-progress); background: linear-gradient(to right, var(--color-accent), var(--color-violet)); width: var(--progress, 0%); transition: width 60ms linear; pointer-events: none; } /* Film grain */ .page-grain { position: fixed; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.55; } /* Constelación canvas */ .constelacion { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0.65; mix-blend-mode: screen; } /* Preloader — cinematic */ /* Si html.loaded va en (LCP), el preloader no pinta y no se convierte en LCP */ html.loaded .preloader { display: none !important; } .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); background: #050508; display: flex; align-items: center; justify-content: center; transition: opacity 420ms var(--ease-out-expo), visibility 420ms; } .preloader--done { opacity: 0; visibility: hidden; } .preloader__inner { text-align: center; width: 260px; } .preloader__logo { margin-bottom: 2.4rem; } .preloader__word { display: block; font-family: var(--font-display-sans); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.04em; color: #fff; } .preloader__tag { font-size: 0.72rem; letter-spacing: 0.35em; color: var(--color-text-muted); } .preloader__bar { height: 1px; background: rgba(255,255,255,0.1); position: relative; margin: 0 auto 1.25rem; width: 100%; max-width: 220px; overflow: hidden; } .preloader__bar-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-accent), var(--color-violet-light)); transition: width 380ms var(--ease-out-expo); } .preloader__status { font-size: 0.78rem; letter-spacing: 0.12em; color: var(--color-text-faint); } .preloader__particles { position: absolute; inset: 0; background: radial-gradient(circle at 40% 30%, rgba(0,240,255,0.035) 0%, transparent 55%); } /* Footer */ .footer { padding: 4.5rem 0 2.5rem; border-top: 1px solid var(--color-border); background: var(--color-bg-elevated); font-size: 0.95rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3.25rem; } .footer__brand { font-family: var(--font-display-sans); font-size: 1.35rem; font-weight: 800; margin-bottom: 0.65rem; } .footer__desc { color: var(--color-text-muted); max-width: 26rem; } .footer__col-title { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 1rem; color: var(--color-text-muted); } .footer__bottom { margin-top: 3.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: 0.82rem; color: var(--color-text-faint); text-align: center; opacity: 0.75; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } } /* Form base */ .form { margin-top: 2rem; } .form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form__field { margin-bottom: 1.15rem; } .form__field label { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; margin-bottom: 0.45rem; color: var(--color-text-muted); } .form__input, .form__select, .form__textarea { width: 100%; padding: 0.95rem 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 1rem; transition: border-color .2s var(--ease-out-expo), box-shadow .2s; } .form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(0,240,255,0.08); outline: none; } .form__textarea { min-height: 132px; resize: vertical; } .fineprint, .audit__fineprint { font-size: 0.78rem; color: var(--color-text-faint); text-align: center; margin-top: 1rem; } /* Toast */ .toast { position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--color-surface-elevated); color: var(--color-text); padding: 0.7rem 1.35rem; border-radius: var(--radius-full); font-size: 0.88rem; box-shadow: var(--shadow-soft); border: 1px solid var(--color-border); opacity: 0; pointer-events: none; transition: all .3s var(--ease-out-expo); z-index: 90; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Responsive base */ @media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }