Próximamente — ORDER Nutritional Science

:root {
–navy: #0d1f3c;
–blue: #2563a8;
–blue-light: #3b82c4;
–silver-l: #c8d8e8;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Neutralizar tema WordPress */
html, body {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
}

/* Overlay fixed que tapa TODO: header, footer, sidebars de WP */
#os-cover {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 999999 !important;
background: var(–navy) !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0 24px;
}

/* ── Fondo hexagonal ── */
.hex-bg {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .055;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’220′ height=’190′ viewBox=’0 0 220 190’%3E%3Cg fill=’none’ stroke=’%233b82c4′ stroke-width=’1.2’%3E%3Cpolygon points=’55,14 110,46 110,110 55,142 0,110 0,46’/%3E%3Cpolygon points=’165,46 220,78 220,142 165,174 110,142 110,78’/%3E%3C/g%3E%3C/svg%3E”);
background-size: 220px 190px;
background-repeat: repeat;
}

/* ── Orbs animados ── */
.orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); animation: drift 18s ease-in-out infinite; }
.orb1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(37,99,168,.45) 0%, transparent 70%); top: -15%; right: -8%; }
.orb2 { width: 380px; height: 380px; background: radial-gradient(circle, rgba(59,130,196,.35) 0%, transparent 70%); bottom: -5%; left: 30%; animation-duration: 14s; animation-direction: reverse; animation-delay: -7s; }
.orb3 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(143,168,200,.2) 0%, transparent 70%); top: 25%; left: 55%; animation-duration: 10s; animation-delay: -3s; }
@keyframes drift {
0%,100% { transform: translate(0,0) scale(1); }
33% { transform: translate(20px,-30px) scale(1.06); }
66% { transform: translate(-15px,18px) scale(.96); }
}

/* ── Contenido ── */
.cs-inner {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 720px;
width: 100%;
}

.cs-logo { margin-bottom: 2.5rem; animation: fade-down .9s cubic-bezier(.22,1,.36,1) both; }
.cs-logo img { height: 90px; width: auto; filter: brightness(0) invert(1); opacity: .95; }

.cs-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 18px; border-radius: 100px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
color: var(–silver-l); margin-bottom: 1.75rem;
animation: fade-up .8s cubic-bezier(.22,1,.36,1) .15s both;
}
.badge-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(–blue-light); box-shadow: 0 0 8px var(–blue-light);
animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

.cs-title {
font-family: ‘Outfit’, sans-serif;
font-size: clamp(3rem, 9vw, 6.5rem);
font-weight: 800; line-height: 1; letter-spacing: -.03em; text-transform: uppercase;
color: #fff; margin-bottom: 1.4rem;
animation: fade-up .9s cubic-bezier(.22,1,.36,1) .3s both;
}
.cs-title .gradient {
background: linear-gradient(135deg, #fff 0%, var(–blue-light) 60%, #00d2ff 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.cs-div {
width: 44px; height: 3px; background: var(–blue-light); border-radius: 2px;
margin-bottom: 1.4rem; animation: line-grow .8s cubic-bezier(.22,1,.36,1) .5s both;
}
@keyframes line-grow { from{width:0;opacity:0} to{width:44px;opacity:1} }

.cs-sub {
font-family: ‘Manrope’, sans-serif;
font-size: clamp(.9rem, 2vw, 1.1rem); font-weight: 300;
color: rgba(255,255,255,.5); line-height: 1.75; max-width: 460px; margin-bottom: 2.5rem;
animation: fade-up .8s cubic-bezier(.22,1,.36,1) .45s both;
}

.cs-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; animation: fade-up .8s cubic-bezier(.22,1,.36,1) .6s both; }
.cs-pill {
display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 99px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
font-size: .73rem; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: .02em;
animation: pfloat 6s ease-in-out infinite;
}
.cs-pill:nth-child(2){animation-delay:-2s} .cs-pill:nth-child(3){animation-delay:-4s}
.cs-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: var(–blue-light); flex-shrink: 0; }
@keyframes pfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* Línea lateral decorativa */
.scroll-line-wrap {
position: absolute; bottom: 32px; right: 40px; z-index: 5;
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.scroll-line-wrap span { font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.2); writing-mode: vertical-rl; }
.scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent); animation: sdrop 2.2s ease-in-out infinite; }
@keyframes sdrop {
0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

.cs-footer {
position: absolute; bottom: 24px; left: 0; right: 0; text-align: center;
font-size: .63rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
color: rgba(255,255,255,.18); z-index: 5;
animation: fade-up .8s cubic-bezier(.22,1,.36,1) .8s both;
}

@keyframes fade-down { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-up { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

@media (max-width: 600px) {
.cs-logo img { height: 90px; }
.scroll-line-wrap { display: none; }
#os-cover { padding: 0 16px; }
.cs-badge { margin-bottom: 1.2rem; letter-spacing: .1em; }
.cs-title {
font-size: 6.5vw;
letter-spacing: -.02em;
margin-bottom: 1rem;
white-space: nowrap;
}
.cs-sub { font-size: .9rem; margin-bottom: 2rem; }
.cs-pills { gap: 8px; }
.cs-pill { font-size: .68rem; padding: 6px 12px; }
.cs-logo { margin-bottom: 2rem; }
.cs-footer { font-size: .58rem; }
}