:root {
  --c1: #4f46e5;
  --c2: #06b6d4;
  --c3: #ec4899;
  --grad: linear-gradient(135deg, var(--c1), var(--c2));
  --grad-warm: linear-gradient(135deg, var(--c3), #f59e0b);
  --soft: #f4f6fb;
  --card: #ffffff;
  --text-muted-c: #6b7280;
  --shadow: 0 10px 30px rgba(79, 70, 229, .12);
}

[data-bs-theme="dark"] {
  --soft: #12141f;
  --card: #1b1e2e;
  --shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: 'Segoe UI', system-ui, sans-serif; overflow-x: hidden; }

.py-6 { padding-top: 6rem; padding-bottom: 6rem; }
.bg-soft { background: var(--soft); }
.text-gradient { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Preloader */
#preloader { position: fixed; inset: 0; background: var(--bs-body-bg); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; transition: opacity .6s, visibility .6s; }
#preloader.hide { opacity: 0; visibility: hidden; }
.loader-ring { width: 70px; height: 70px; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--c1); border-bottom-color: var(--c2); animation: spin 1s linear infinite; }
.loader-text { font-weight: 800; letter-spacing: 4px; animation: blink 1.2s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .3; } }

#scrollProgress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--grad); z-index: 2000; }

/* Navbar */
.navbar-glass { padding: 1rem 0; transition: all .35s; }
.navbar-glass.scrolled { background: rgba(255, 255, 255, .85); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); padding: .5rem 0; }
[data-bs-theme="dark"] .navbar-glass.scrolled { background: rgba(18, 20, 31, .85); }
.navbar .nav-link { position: relative; font-weight: 500; }
.navbar .nav-link::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2px; background: var(--grad); transition: all .3s; transform: translateX(-50%); }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: 70%; }

/* Botones */
.btn-affiliate { background: var(--grad-warm); color: #fff; border: 0; font-weight: 600; border-radius: 50rem; box-shadow: 0 8px 20px rgba(236, 72, 153, .35); transition: transform .3s, box-shadow .3s; }
.btn-affiliate:hover { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(236, 72, 153, .5); }
.btn-gradient { background: var(--grad); color: #fff; border: 0; border-radius: 50rem; transition: transform .3s, box-shadow .3s; }
.btn-gradient:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow); }
.btn-outline-primary { border-radius: 50rem; border-color: var(--c1); color: var(--c1); }
.btn-outline-primary:hover { background: var(--c1); border-color: var(--c1); }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, .6); } 70% { box-shadow: 0 0 0 20px rgba(236, 72, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); } }

/* Hero */
.hero { min-height: 100vh; position: relative; padding: 7rem 0 4rem; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(79, 70, 229, .12), transparent 50%), radial-gradient(circle at 80% 80%, rgba(6, 182, 212, .12), transparent 50%); }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: float 10s ease-in-out infinite; }
.blob-1 { width: 320px; height: 320px; background: var(--c1); top: -60px; left: -80px; }
.blob-2 { width: 280px; height: 280px; background: var(--c2); bottom: -60px; right: 10%; animation-delay: -3s; }
.blob-3 { width: 200px; height: 200px; background: var(--c3); top: 40%; right: -50px; animation-delay: -6s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.15); } }
.particles { position: absolute; inset: 0; pointer-events: none; }
.particle { position: absolute; bottom: -20px; border-radius: 50%; background: var(--c2); opacity: .5; animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-110vh); opacity: 0; } }

.badge-soft { background: rgba(79, 70, 229, .12); color: var(--c1); padding: .6rem 1rem; border-radius: 50rem; font-weight: 600; }
.typed-text { font-weight: 600; color: var(--c1); }
.cursor { animation: blink .8s infinite; color: var(--c1); }
.social-links a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; margin-right: .5rem; color: var(--c1); background: rgba(79, 70, 229, .1); transition: all .3s; font-size: 1.1rem; }
.social-links a:hover { background: var(--grad); color: #fff; transform: translateY(-5px) rotate(8deg); }
.footer .social-links a { background: rgba(255, 255, 255, .1); color: #fff; }

.photo-wrap { position: relative; display: inline-block; }
.photo-frame { width: 320px; height: 320px; max-width: 80vw; max-height: 80vw; border-radius: 50%; overflow: hidden; background: var(--grad); padding: 8px; position: relative; z-index: 1; box-shadow: var(--shadow); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.photo-placeholder { width: 100%; height: 100%; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--c1); }
.photo-placeholder i { font-size: 7rem; }
.photo-ring { position: absolute; inset: -18px; border-radius: 50%; border: 2px dashed var(--c2); animation: spin 25s linear infinite; }
.floating-chip { position: absolute; z-index: 2; background: var(--card); box-shadow: var(--shadow); padding: .5rem .9rem; border-radius: 50rem; font-size: .85rem; font-weight: 600; animation: bob 4s ease-in-out infinite; white-space: nowrap; }
.floating-chip i { color: var(--c3); margin-right: .3rem; }
.chip-1 { top: 5%; left: -30px; }
.chip-2 { bottom: 15%; right: -40px; animation-delay: -1.5s; }
.chip-3 { bottom: -10px; left: 10%; animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.scroll-down { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 1.6rem; color: var(--c1); animation: bounce 1.6s infinite; }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 12px); } }

/* Títulos de sección */
.section-title { text-align: center; margin-bottom: 3.5rem; }
.section-title span { display: inline-block; text-transform: uppercase; letter-spacing: 3px; font-size: .8rem; font-weight: 700; color: var(--c2); margin-bottom: .5rem; }
.section-title h2 { font-weight: 800; position: relative; padding-bottom: 1rem; }
.section-title h2::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 70px; height: 4px; border-radius: 4px; background: var(--grad); }
.section-title.text-start h2::after { left: 0; transform: none; }

/* Stats */
.stat-card { background: var(--card); border-radius: 1.2rem; padding: 2rem 1rem; box-shadow: var(--shadow); transition: transform .35s; }
.stat-card:hover { transform: translateY(-10px); }
.stat-card i { font-size: 2.2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-card h2 { font-weight: 800; margin: .5rem 0 0; }
.stat-card p { margin: 0; color: var(--text-muted-c); }

/* Sobre mí */
.about-card { position: relative; }
.placeholder-box { background: var(--grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 1.5rem; gap: .5rem; }
.placeholder-box i { font-size: 4rem; opacity: .85; }
.about-img { height: 420px; box-shadow: var(--shadow); }
.placeholder-box.big { height: 360px; }
.exp-badge { position: absolute; bottom: -20px; right: -10px; background: var(--card); padding: 1rem 1.5rem; border-radius: 1rem; box-shadow: var(--shadow); text-align: center; animation: bob 4s ease-in-out infinite; }
.exp-badge strong { display: block; font-size: 1.8rem; color: var(--c1); }
.info-item { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; background: var(--card); border-radius: .9rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .05); margin-bottom: .8rem; transition: transform .3s; }
.info-item:hover { transform: translateX(6px); }
.info-item > i { font-size: 1.4rem; color: var(--c1); }
.info-item small { display: block; color: var(--text-muted-c); }
.skill { margin-bottom: 1rem; }
.progress { height: 8px; border-radius: 8px; }
.progress-bar { width: 0; background: var(--grad); transition: width 1.5s ease; }

/* Feature cards */
.feature-card { background: var(--card); border-radius: 1.2rem; padding: 2rem; height: 100%; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .4s; }
.feature-card::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; background: var(--grad); transition: height .4s; z-index: 0; }
.feature-card > * { position: relative; z-index: 1; transition: color .4s; }
.feature-card:hover { transform: translateY(-10px); }
.feature-card:hover::before { height: 100%; }
.feature-card:hover, .feature-card:hover p, .feature-card:hover a, .feature-card:hover h5 { color: #fff; }
.feature-card .icon { width: 64px; height: 64px; border-radius: 1rem; background: rgba(79, 70, 229, .1); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--c1); margin-bottom: 1rem; transition: all .4s; }
.feature-card:hover .icon { background: rgba(255, 255, 255, .2); color: #fff; transform: rotate(360deg); }
.feature-card a { font-weight: 600; text-decoration: none; color: var(--c1); }

/* Pills */
.nav-pills .nav-link { border-radius: 50rem; color: var(--bs-body-color); background: var(--card); box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.nav-pills .nav-link.active { background: var(--grad); color: #fff; }

/* Timeline */
.timeline { position: relative; max-width: 900px; margin: auto; padding: 1rem 0; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--grad); transform: translateX(-50%); }
.timeline-item { position: relative; width: 50%; padding: 0 2.5rem 2.5rem 0; }
.timeline-item.right { margin-left: 50%; padding: 0 0 2.5rem 2.5rem; }
.timeline-dot { position: absolute; top: 10px; right: -10px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 4px solid var(--c1); z-index: 1; }
.timeline-item.right .timeline-dot { left: -10px; right: auto; }
.timeline-content { background: var(--card); padding: 1.3rem; border-radius: 1rem; box-shadow: var(--shadow); transition: transform .3s; }
.timeline-content:hover { transform: scale(1.03); }
.timeline-content .date { display: inline-block; background: var(--grad); color: #fff; font-size: .75rem; padding: .2rem .8rem; border-radius: 50rem; margin-bottom: .5rem; }
.award-card { background: var(--card); text-align: center; padding: 2rem; border-radius: 1.2rem; box-shadow: var(--shadow); transition: transform .35s; }
.award-card:hover { transform: translateY(-8px) rotate(-1deg); }
.award-card i { font-size: 2.5rem; color: #f59e0b; }

/* Publicaciones */
.btn-filter { border-radius: 50rem; background: var(--card); box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.btn-filter.active, .btn-filter:hover { background: var(--grad); color: #fff; }
.pub-card { background: var(--card); padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow); border-left: 5px solid var(--c1); height: 100%; transition: transform .3s; }
.pub-card:hover { transform: translateX(8px); }
.pub-item { transition: opacity .4s, transform .4s; }
.pub-item.hide { opacity: 0; transform: scale(.85); }

/* Carrusel */
.project-slide { min-height: 380px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 3rem 4rem; }
.project-slide.s1 { background: linear-gradient(135deg, #4f46e5, #06b6d4); }
.project-slide.s2 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.project-slide.s3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }

/* Acordeón */
.custom-accordion .accordion-item { border: 0; margin-bottom: .8rem; border-radius: 1rem !important; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, .07); background: var(--card); }
.custom-accordion .accordion-button:not(.collapsed) { background: var(--grad); color: #fff; }
.custom-accordion .accordion-button:focus { box-shadow: none; }

/* Galería */
.gallery-item { height: 220px; border-radius: 1.2rem; background: var(--grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; transition: transform .4s, filter .4s; overflow: hidden; }
.gallery-item i { font-size: 2.6rem; transition: transform .4s; }
.gallery-item:hover { transform: scale(1.05) rotate(-1deg); filter: brightness(1.1); }
.gallery-item:hover i { transform: scale(1.4); }

/* Blog */
.blog-card { background: var(--card); border-radius: 1.2rem; overflow: hidden; box-shadow: var(--shadow); height: 100%; transition: transform .4s; }
.blog-card:hover { transform: translateY(-10px); }
.blog-img { height: 180px; position: relative; transition: transform .6s; }
.blog-card:hover .blog-img { transform: scale(1.08); }
.blog-card { overflow: hidden; }
.blog-img.b1 { background: linear-gradient(135deg, #4f46e5, #06b6d4); }
.blog-img.b2 { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.blog-img.b3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.blog-img .tag { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, .9); color: #111; padding: .2rem .8rem; border-radius: 50rem; font-size: .75rem; font-weight: 600; }
.blog-card .p-4 { background: var(--card); position: relative; }
.read-more { font-weight: 600; text-decoration: none; color: var(--c1); }
.read-more i { display: inline-block; transition: transform .3s; }
.read-more:hover i { transform: translateX(6px); }

/* Eventos */
.event-card { display: flex; gap: 1.2rem; align-items: center; background: var(--card); padding: 1.2rem; border-radius: 1.2rem; box-shadow: var(--shadow); transition: transform .3s; }
.event-card:hover { transform: scale(1.03); }
.event-date { flex-shrink: 0; width: 76px; height: 76px; border-radius: 1rem; background: var(--grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.event-date strong { font-size: 1.7rem; }

/* Testimonios */
.testimonial { background: var(--card); padding: 2rem; border-radius: 1.2rem; box-shadow: var(--shadow); height: 100%; transition: transform .3s; position: relative; }
.testimonial:hover { transform: translateY(-8px); }
.testimonial > i { font-size: 3rem; color: var(--c2); opacity: .5; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; }

/* Marquee */
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: scrollX 25s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-size: 1.4rem; font-weight: 600; color: var(--text-muted-c); white-space: nowrap; }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* CTA */
.cta { background: linear-gradient(135deg, #4f46e5, #7c3aed, #ec4899); background-size: 300% 300%; animation: gradMove 10s ease infinite; position: relative; overflow: hidden; }
@keyframes gradMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.cta::before, .cta::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); animation: float 9s ease-in-out infinite; }
.cta::before { width: 300px; height: 300px; top: -100px; left: -80px; }
.cta::after { width: 220px; height: 220px; bottom: -80px; right: -50px; animation-delay: -4s; }

/* Newsletter */
.newsletter { background: var(--grad); color: #fff; padding: 2.5rem; border-radius: 1.5rem; text-align: center; box-shadow: var(--shadow); }
.newsletter > i { font-size: 3rem; display: inline-block; animation: bob 3s ease-in-out infinite; }

/* Contacto */
.contact-form { background: var(--card); padding: 2rem; border-radius: 1.5rem; box-shadow: var(--shadow); }
.map-placeholder { height: 180px; border-radius: 1rem; background: var(--grad); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 1rem; }
.map-placeholder i { font-size: 2.5rem; }

/* Footer */
.footer { background: #0f1120; }
.footer a { color: rgba(255, 255, 255, .6); text-decoration: none; line-height: 2; transition: color .3s, padding-left .3s; }
.footer a:hover { color: #fff; padding-left: 6px; }
.footer .social-links a { padding-left: 0; }

/* Flotantes */
.fab-affiliate { position: fixed; right: 20px; bottom: 80px; z-index: 1030; border: 0; border-radius: 50rem; padding: .8rem 1.2rem; background: var(--grad-warm); color: #fff; font-weight: 600; display: flex; align-items: center; gap: .5rem; box-shadow: 0 10px 25px rgba(236, 72, 153, .45); animation: pulse 2.2s infinite; transition: transform .3s; }
.fab-affiliate:hover { transform: scale(1.08); }
#toTop { position: fixed; right: 20px; bottom: 20px; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--grad); color: #fff; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all .35s; z-index: 1030; }
#toTop.show { opacity: 1; visibility: visible; transform: none; }

/* Modal */
.modal-gradient { background: var(--grad-warm); }
.modal.fade .modal-dialog { transform: scale(.8) rotateX(-15deg); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.modal.show .modal-dialog { transform: none; }

@media (max-width: 767px) {
  .timeline::before { left: 10px; }
  .timeline-item, .timeline-item.right { width: 100%; margin-left: 0; padding: 0 0 2rem 2.5rem; }
  .timeline-dot, .timeline-item.right .timeline-dot { left: 0; right: auto; }
  .chip-1, .chip-2 { display: none; }
  .fab-affiliate span { display: none; }
  .project-slide { padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}