/* =========================================================
   Edunova — Design System
   Marca: naranja vivo #F97316 · navy #1C2B5B (familia del logo, saturada)
   ========================================================= */

:root {
    --brand-500: #F97316;
    --brand-600: #EA580C;
    --navy-500: #1C2B5B;
    --navy-900: #0B1123;
    --gold-400: #FFC145;
    --gold-500: #F5A623;
    --spot-x: 50%;
    --spot-y: 50%;
}

html { scroll-padding-top: 5.5rem; }

html, body { max-width: 100%; overflow-x: hidden; }

/* ---------- Navbar: transparent over the hero, painted once scrolled ---------- */
#navbar {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
#navbar .nav-link { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
#navbar .nav-link:hover { color: var(--gold-400); }
#navbar .nav-link::after { background-color: var(--gold-400); }
#navbar #menuBtn { color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }

/* Logo crossfade: white version over the hero, full-color once scrolled */
#navbar .logo-img { transition: opacity .3s ease; }
#navbar .logo-white { opacity: 1; }
#navbar .logo-color { opacity: 0; }
#navbar.nav-scrolled .logo-white { opacity: 0; }
#navbar.nav-scrolled .logo-color { opacity: 1; }

/* CTA button: white over the hero, navy once the nav is painted */
#navbar .nav-cta {
    background-color: #fff;
    color: #131D3A;
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}
#navbar .nav-cta:hover { background-color: var(--brand-600); color: #fff; }

#navbar.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-bottom-color: rgba(11, 17, 35, 0.1);
}
#navbar.nav-scrolled .nav-link { color: #131D3A; text-shadow: none; }
#navbar.nav-scrolled .nav-link:hover { color: var(--brand-600); }
#navbar.nav-scrolled .nav-link::after { background-color: var(--brand-600); }
#navbar.nav-scrolled #menuBtn { color: #131D3A; filter: none; }
#navbar.nav-scrolled .nav-cta {
    background-color: var(--navy-900);
    color: #fff;
    box-shadow: 0 8px 20px rgba(234,88,12,.15);
}
#navbar.nav-scrolled .nav-cta:hover { background-color: var(--brand-600); }
#navbar.nav-scrolled img[alt="Edunova"] { filter: none; }

body { -webkit-font-smoothing: antialiased; }

.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Hero slider ---------- */
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out, transform 7s ease-out;
    transform: scale(1.08);
    z-index: 0;
}
.hero-slide.active { opacity: 1; transform: scale(1); }

/* Cursor spotlight (hero) */
.spotlight::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: radial-gradient(700px circle at var(--spot-x) var(--spot-y), rgba(249, 115, 22, 0.35), transparent 55%);
    transition: opacity .3s ease;
    mix-blend-mode: screen;
}

/* Progress-style slider dots */
.slider-dot {
    position: relative;
    width: 2.75rem;
    height: 5px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.25);
    overflow: hidden;
    cursor: pointer;
}
.slider-dot .dot-fill { position: absolute; inset: 0; width: 0%; background: var(--gold-400); }
.slider-dot.active .dot-fill { animation: fillbar 6s linear forwards; }
.slider-dot:not(.active) .dot-fill { width: 0%; }
@keyframes fillbar { from { width: 0%; } to { width: 100%; } }

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* ---------- Decorative blobs & sparkles ---------- */
@keyframes float-slow { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-30px) scale(1.08); } }
@keyframes float-slower { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25px,25px) scale(1.05); } }
.blob-a { animation: float-slow 12s ease-in-out infinite; }
.blob-b { animation: float-slower 15s ease-in-out infinite; }

@keyframes chip-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.chip-float { animation: chip-float 5s ease-in-out infinite; }
.chip-float-delay { animation: chip-float 5s ease-in-out infinite; animation-delay: 1.2s; }

@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(25deg); } }
.sparkle { position: absolute; animation: twinkle 3.2s ease-in-out infinite; pointer-events: none; }

/* ---------- Dot-grid texture ---------- */
.bg-dot-grid { background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 26px 26px; }
.bg-dot-grid-dark { background-image: radial-gradient(circle, rgba(28,43,91,0.08) 1px, transparent 1px); background-size: 24px 24px; }

/* ---------- Wavy section dividers ---------- */
.wave-divider { display: block; width: 100%; height: 60px; }
.wave-divider svg { display: block; width: 100%; height: 100%; }

/* ---------- 3D tilt cards ---------- */
.tilt-card {
    transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
    transition: transform .15s ease-out, box-shadow .3s ease;
    will-change: transform;
}

/* ---------- Marquee (aliados) ---------- */
.marquee-mask {
    overflow: hidden;
    max-width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Decorative stat rings ---------- */
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-slow-reverse { to { transform: rotate(-360deg); } }
.ring-decor { animation: spin-slow 22s linear infinite; }
.ring-decor-rev { animation: spin-slow-reverse 16s linear infinite; }

/* ---------- Roadmap / timeline ---------- */
.roadmap-line { position: relative; }
.roadmap-line .track { position: absolute; top: 14px; left: 0; right: 0; height: 3px; background: #E7DCD3; border-radius: 999px; }
.roadmap-line .fill { position: absolute; top: 14px; left: 0; height: 3px; background: linear-gradient(90deg, var(--brand-500), var(--gold-500)); border-radius: 999px; width: 0%; transition: width 1.4s cubic-bezier(.22,.61,.36,1); }
.roadmap-dot { width: 30px; height: 30px; border-radius: 999px; border: 3px solid #E7DCD3; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: all .4s ease; }
.roadmap-dot.filled { border-color: var(--brand-500); background: var(--brand-500); }

/* Custom scrollbar accent */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f4ede8; }
::-webkit-scrollbar-thumb { background: #d8c3b6; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* ---------- Utility: gradient border ---------- */
.gradient-border { position: relative; }
.gradient-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--brand-500), var(--gold-500), var(--navy-500));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.gradient-border:hover::before { opacity: 1; }