:root{
  --cream:#F3E3AC;
  --cream-light:#FBF2D6;
  --navy:#141428;
  --navy-soft:#1E1E38;
  --mustard:#E6B93A;
  --mustard-dark:#C99A22;
  --teal:#1E8FA0;
  --teal-dark:#146470;
  --ember:#D9622B;
  --ivory:#F7F1DD;
  --shadow:0 20px 45px rgba(20,20,40,.25);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Georgia','Times New Roman',serif;
  background:var(--cream-light);
  color:var(--navy);
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Georgia','Times New Roman',serif;line-height:1.15;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
ul{list-style:none;}

/* PRELOADER */
#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.hide{opacity:0;visibility:hidden;}
.preloader-inner{text-align:center;}
.preloader-logo{width:96px;height:96px;border-radius:50%;margin:0 auto 20px;animation:spin-slow 3s linear infinite;}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.preloader-bar{width:220px;height:4px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin:0 auto 16px;}
.preloader-bar span{display:block;height:100%;width:0%;background:var(--mustard);animation:load 1.6s var(--ease) forwards;}
@keyframes load{to{width:100%;}}
.preloader-text{color:var(--cream);font-size:.95rem;letter-spacing:.05em;}
.dots span{animation:blink 1.4s infinite;opacity:0;}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,100%{opacity:0}50%{opacity:1}}

/* SCROLL PROGRESS */
#scroll-progress{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:linear-gradient(90deg,var(--mustard),var(--teal));
  z-index:1000;transition:width .1s linear;
}

/* NAV */
#site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(20,20,40,.0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
#site-header.scrolled{
  background:rgba(20,20,40,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.nav-wrap{
  max-width:1200px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:14px;
}
.nav-logo{width:44px;height:44px;border-radius:50%;flex-shrink:0;}
.nav-name{
  color:var(--ivory);font-size:1.15rem;font-weight:700;letter-spacing:.02em;
  white-space:nowrap;
}
.nav-name em{color:var(--mustard);font-style:normal;}
.nav-links{
  display:flex;gap:26px;margin-left:32px;flex:1;
}
.nav-links a{
  color:var(--ivory);opacity:.85;font-size:.95rem;
  position:relative;padding:4px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--mustard);transition:width .3s var(--ease);
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  background:var(--mustard);color:var(--navy);
  padding:10px 20px;border-radius:30px;font-weight:700;font-size:.9rem;
  white-space:nowrap;transition:transform .3s var(--ease), background .3s var(--ease);
}
.nav-cta:hover{background:var(--ember);transform:translateY(-2px) scale(1.03);color:var(--ivory);}

@media(max-width:820px){
  .nav-links{display:none;}
  .nav-name{font-size:1rem;}
}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 24px 80px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(230,185,58,.35), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(30,143,160,.35), transparent 45%),
    var(--navy);
}
.hero-bg-shapes{position:absolute;inset:0;pointer-events:none;}
.float-note{
  position:absolute;color:var(--mustard);opacity:.35;font-size:2.4rem;
  animation:float 8s ease-in-out infinite;
}
.float-note.n1{top:14%;left:10%;animation-duration:7s;}
.float-note.n2{top:65%;left:15%;color:var(--teal);animation-duration:9s;animation-delay:.5s;}
.float-note.n3{top:22%;left:85%;font-size:3.2rem;animation-duration:10s;animation-delay:1s;}
.float-note.n4{top:75%;left:80%;color:var(--teal);animation-duration:6.5s;animation-delay:1.5s;}
.float-note.n5{top:40%;left:50%;font-size:1.8rem;opacity:.2;animation-duration:11s;}
.float-note.n6{top:50%;left:5%;color:var(--teal);opacity:.25;animation-duration:8.5s;animation-delay:.8s;}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-30px) rotate(10deg);}
}
.hero-logo{
  width:120px;height:120px;border-radius:50%;margin-bottom:24px;
  box-shadow:var(--shadow);
  border:3px solid var(--mustard);
}
.hero h1{
  color:var(--ivory);font-size:clamp(2.1rem,5vw,3.6rem);max-width:820px;
  margin-bottom:18px;
}
.hero h1 span{color:var(--mustard);}
.hero-sub{
  color:var(--cream);opacity:.85;font-size:1.15rem;max-width:560px;margin-bottom:34px;
}
.hero-btn{
  display:inline-block;background:var(--mustard);color:var(--navy);
  padding:16px 34px;border-radius:40px;font-weight:700;font-size:1.05rem;
  box-shadow:0 10px 30px rgba(230,185,58,.35);
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  border:none;cursor:pointer;
}
.hero-btn:hover{background:var(--teal);color:var(--ivory);transform:translateY(-4px) scale(1.04);box-shadow:0 16px 36px rgba(30,143,160,.4);}
.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  color:var(--cream);opacity:.6;font-size:.85rem;letter-spacing:.08em;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  animation:bob 2s ease-in-out infinite;
}
.scroll-hint span{font-size:1.1rem;}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* BANDS */
.band{
  padding:100px 24px;position:relative;
}
.band-dark{background:var(--navy);color:var(--ivory);}
.band-dark .tag{color:var(--mustard);}
.band-light{background:var(--cream-light);}
.band-services{background:var(--ivory);}
.band-contact{background:var(--navy);color:var(--ivory);}

.content-block{max-width:640px;margin:0 auto 40px;}
.band-dark .content-block,
.band-contact{max-width:none;}
.band-dark:has(.reveal-left.content-block + .reveal-right.content-block){
  display:flex;flex-wrap:wrap;gap:60px;justify-content:center;max-width:1200px;margin:0 auto;
}
#porque{display:flex;flex-wrap:wrap;gap:60px;justify-content:center;max-width:1200px;margin:0 auto;}
#porque .content-block{flex:1 1 380px;max-width:460px;margin:0;}

.tag{
  display:inline-block;background:rgba(230,185,58,.15);color:var(--mustard-dark);
  padding:6px 16px;border-radius:30px;font-size:.85rem;font-weight:700;
  margin-bottom:16px;letter-spacing:.03em;
}
.band-dark .tag{background:rgba(230,185,58,.15);}
.content-block h2{font-size:1.9rem;margin-bottom:16px;}
.content-block p{font-size:1.05rem;line-height:1.7;margin-bottom:14px;opacity:.92;}

.section-title{
  text-align:center;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:10px;
}
.section-sub{
  text-align:center;opacity:.7;margin-bottom:56px;font-size:1.05rem;
}

/* SKILLS / REPERTORIO GRID */
.skills-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;
}
.skill-card{
  background:var(--ivory);border-radius:16px;padding:32px 26px;
  box-shadow:0 10px 26px rgba(20,20,40,.08);
  border-bottom:4px solid var(--mustard);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.skill-card:nth-child(even){border-bottom-color:var(--teal);}
.skill-card:hover{transform:translateY(-8px);box-shadow:0 18px 36px rgba(20,20,40,.14);}
.skill-emoji{font-size:2.2rem;display:block;margin-bottom:14px;}
.skill-card h3{font-size:1.2rem;margin-bottom:8px;}
.skill-card p{opacity:.75;font-size:.95rem;line-height:1.5;}

/* EVENTS GRID */
.events-grid{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;
}
.event-card{
  background:linear-gradient(160deg,var(--navy),var(--navy-soft));
  color:var(--ivory);border-radius:18px;padding:36px 28px;
  transition:transform .4s var(--ease);
  position:relative;overflow:hidden;
}
.event-card::before{
  content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  background:radial-gradient(circle,rgba(230,185,58,.3),transparent 70%);
}
.event-card:hover{transform:translateY(-6px) scale(1.02);}
.event-emoji{font-size:2.4rem;display:block;margin-bottom:16px;}
.event-card h3{font-size:1.3rem;margin-bottom:10px;color:var(--mustard);}
.event-card p{opacity:.85;line-height:1.6;font-size:.95rem;}

/* CHECK LIST */
.check-list li{
  font-size:1.05rem;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);
}

/* TIMELINE */
.timeline{
  max-width:900px;margin:0 auto;
  display:flex;flex-direction:column;gap:36px;
}
.timeline-step{
  background:var(--ivory);border-radius:16px;padding:30px 30px 30px 90px;
  position:relative;box-shadow:0 10px 26px rgba(20,20,40,.08);
}
.step-num{
  position:absolute;left:26px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--teal);color:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.2rem;
}
.timeline-step:nth-child(even) .step-num{background:var(--mustard);color:var(--navy);}
.timeline-step h3{font-size:1.15rem;margin-bottom:6px;}
.timeline-step p{opacity:.75;font-size:.95rem;}

/* CONTACT FORM */
.contact-form{
  max-width:640px;margin:0 auto;background:var(--navy-soft);
  padding:40px;border-radius:20px;box-shadow:var(--shadow);
}
.form-row{display:flex;gap:20px;flex-wrap:wrap;}
.form-field{flex:1 1 220px;margin-bottom:18px;display:flex;flex-direction:column;gap:6px;}
.form-field label{font-size:.85rem;color:var(--mustard);letter-spacing:.03em;}
.form-field input,.form-field select,.form-field textarea{
  background:var(--navy);border:1px solid rgba(255,255,255,.15);border-radius:10px;
  padding:12px 14px;color:var(--ivory);font-family:inherit;font-size:.95rem;
  transition:border-color .3s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--mustard);
}
.contact-form .hero-btn{width:100%;border:none;margin-top:6px;}
.form-note{margin-top:16px;font-size:.85rem;opacity:.7;text-align:center;}
.form-note a{color:var(--mustard);text-decoration:underline;}

/* FOOTER */
footer{
  background:#0F0F1E;color:var(--ivory);text-align:center;padding:50px 24px;
}
.footer-logo{width:56px;height:56px;border-radius:50%;margin:0 auto 18px;}
.footer-links{
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-bottom:20px;
}
.footer-links a{opacity:.75;font-size:.9rem;transition:opacity .3s;}
.footer-links a:hover{opacity:1;color:var(--mustard);}
footer p{opacity:.5;font-size:.82rem;}

/* SCROLL REVEAL ANIMATIONS */
.reveal, .reveal-left, .reveal-right{
  opacity:0;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  will-change:transform,opacity;
}
.reveal{transform:translateY(50px);}
.reveal-left{transform:translateX(-120px);}
.reveal-right{transform:translateX(120px);}
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view{
  opacity:1;transform:translate(0,0);
}

/* stagger children inside grids */
.skills-grid .skill-card, .events-grid .event-card, .timeline-step{
  transition-delay:calc(var(--i,0) * 90ms);
}

@media(max-width:600px){
  .band{padding:70px 20px;}
  .timeline-step{padding:26px 22px 26px 78px;}
  .contact-form{padding:28px 22px;}
}