/* =========================================================
   Maestro Digital Skills Bootcamp 2026 — stylesheet
   Tokens
   ========================================================= */
:root{
  --navy:#0A1856;
  --navy-deep:#060E38;
  --blue:#1B41C4;
  --sky:#4C8DFF;
  --gold:#FFC145;
  --ink:#0B1220;
  --paper:#F5F7FF;
  --white:#FFFFFF;
  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--font-display);margin:0;}
p{line-height:1.6;margin:0;}
.section-inner{max-width:1160px;margin:0 auto;padding:0 1.5rem;}

.eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  padding:.3rem .75rem;
  border-radius:20px;
  margin-bottom:1rem;
}
.eyebrow.dark{
  color:var(--blue);
  background:rgba(27,65,196,.08);
  border-color:rgba(27,65,196,.25);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border-radius:10px;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.btn-primary{background:var(--gold); color:#3A2900; box-shadow:0 8px 24px rgba(255,193,69,.35);}
.btn-primary:hover{background:#ffcc63;}
.btn-primary:disabled{opacity:.6; cursor:not-allowed; transform:none;}
.btn-ghost{background:rgba(255,255,255,.08); color:var(--white); border:1.5px solid rgba(255,255,255,.4);}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-block{width:100%;}

/* =========================================================
   Nav
   ========================================================= */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,24,86,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width:1160px; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-block{display:flex; align-items:center; gap:.6rem;}
.logo-mark{
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg, var(--sky), var(--blue));
  color:#fff; font-family:var(--font-display); font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
}
.logo-text{display:flex; flex-direction:column; line-height:1.1; color:#fff;}
.logo-text strong{font-family:var(--font-display); font-size:1.05rem;}
.logo-text small{font-size:.6rem; letter-spacing:.06em; color:#c8d2ff;}
.nav-cta{
  background:var(--gold); color:#3A2900; font-weight:700; font-size:.85rem;
  padding:.55rem 1.1rem; border-radius:8px; text-decoration:none;
  transition:transform .15s ease;
}
.nav-cta:hover{transform:translateY(-2px);}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  background:radial-gradient(ellipse at 20% -10%, #1B41C4 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color:var(--white);
  overflow:hidden;
  padding:4rem 0 5rem;
}
.hero-bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse at 70% 30%, black 0%, transparent 70%);
  animation:grid-drift 30s linear infinite;
}
@keyframes grid-drift{
  from{background-position:0 0, 0 0;}
  to{background-position:84px 84px, 84px 84px;}
}
.hero-inner{
  position:relative; z-index:1;
  max-width:1160px; margin:0 auto; padding:0 1.5rem;
  display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.6rem, 5.5vw, 4.4rem);
  line-height:1.02;
  font-weight:800;
  margin:0 0 1rem;
}
.hero-copy h1 span{
  background:linear-gradient(90deg, var(--sky), var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tagline{
  font-size:1.05rem; color:#d7deff; margin-bottom:2rem; font-weight:500;
}
.hero-buttons{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem;}
.hero-tags{display:flex; gap:.6rem; flex-wrap:wrap;}
.hero-tags span{
  font-size:.72rem; font-family:var(--font-mono); color:#c8d2ff;
  border:1px solid rgba(255,255,255,.2); padding:.3rem .7rem; border-radius:20px;
}

/* hero visual: calendar tag + orbiting icons */
.hero-visual{position:relative; min-height:420px; display:flex; align-items:flex-start; justify-content:center;}

.calendar-tag{
  position:relative; z-index:3;
  animation:swing 6s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes swing{
  0%,100%{transform:rotate(-2.5deg);}
  50%{transform:rotate(2.5deg);}
}
.tag-string{width:2px; height:28px; background:rgba(255,255,255,.5); margin:0 auto;}
.tag-body{
  background:var(--white); color:var(--navy);
  border-radius:14px; padding:1.1rem 1.3rem;
  box-shadow:0 24px 50px rgba(0,0,0,.35);
  min-width:250px; text-align:center;
  border-top:6px solid var(--gold);
}
.tag-label{
  display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); font-weight:700; margin-bottom:.5rem;
}
.countdown{display:flex; justify-content:center; gap:.5rem; margin-bottom:.5rem;}
.c-unit{
  background:var(--paper); border-radius:8px; padding:.4rem .3rem; min-width:52px;
}
.c-unit span{
  display:block; font-family:var(--font-mono); font-weight:700; font-size:1.35rem; color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.c-unit small{font-size:.62rem; color:#667; text-transform:uppercase; letter-spacing:.05em;}
.tag-date{font-size:.78rem; color:#556; font-weight:600;}

.orbit-wrap{
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  width:340px; height:340px;
}
.orbit-core{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%;
  background:linear-gradient(135deg, var(--sky), var(--blue));
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  box-shadow:0 0 0 10px rgba(76,141,255,.12), 0 20px 40px rgba(0,0,0,.3);
}
.orbit-ring{
  position:absolute; top:50%; left:50%;
  width:100%; height:100%; margin:-50% 0 0 -50%;
  border:1px dashed rgba(255,255,255,.15);
  border-radius:50%;
  animation:orbit-spin linear infinite;
}
.orbit-ring span{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%;
  background:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; box-shadow:0 10px 20px rgba(0,0,0,.25);
}
.ring-1{width:70%; height:70%; margin:-35% 0 0 -35%; animation-duration:14s;}
.ring-2{width:85%; height:85%; margin:-42.5% 0 0 -42.5%; animation-duration:18s; animation-direction:reverse;}
.ring-3{width:100%; height:100%; animation-duration:22s;}
.ring-4{width:70%; height:70%; margin:-35% 0 0 -35%; animation-duration:16s; animation-direction:reverse; animation-delay:-4s;}
.ring-5{width:85%; height:85%; margin:-42.5% 0 0 -42.5%; animation-duration:20s; animation-delay:-7s;}
@keyframes orbit-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.orbit-ring span{ animation:counter-spin inherit; }
@keyframes counter-spin{ from{transform:translateX(-50%) rotate(0deg);} to{transform:translateX(-50%) rotate(-360deg);} }

/* =========================================================
   Skills
   ========================================================= */
.skills{padding:5rem 0; background:var(--paper);}
.skills h2, .method h2{
  font-size:clamp(1.6rem, 3vw, 2.2rem); margin-bottom:2.5rem; color:var(--navy); max-width:600px;
}
.skills-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4rem;}
.skill-card{
  background:var(--white); border-radius:16px; padding:1.6rem;
  border:1px solid #e6e9f7;
  transition:transform .2s ease, box-shadow .2s ease;
  opacity:0; transform:translateY(18px);
}
.skill-card.reveal{opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease;}
.skill-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,30,90,.12);}
.skill-icon{font-size:2rem; display:inline-block; margin-bottom:.8rem;}
.skill-card h3{font-size:1.05rem; color:var(--navy); margin-bottom:.5rem;}
.skill-card p{font-size:.9rem; color:#5a6178;}

/* =========================================================
   Method
   ========================================================= */
.method{padding:5rem 0; background:var(--white);}
.method-grid{display:grid; grid-template-columns:1fr auto 1fr; gap:1.5rem; align-items:stretch;}
.method-card{
  background:var(--navy); color:#fff; border-radius:18px; padding:2rem;
  position:relative; overflow:hidden;
}
.method-card::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 90% 10%, rgba(76,141,255,.35), transparent 60%);
}
.method-card h3{font-size:1.3rem; margin-bottom:.6rem; position:relative;}
.method-card p{color:#c8d2ff; font-size:.92rem; margin-bottom:1.2rem; position:relative;}
.method-price{
  font-family:var(--font-mono); font-size:2rem; font-weight:700; color:var(--gold); position:relative;
}
.method-divider{
  align-self:center; font-family:var(--font-display); font-size:1.6rem; color:var(--blue); font-weight:800;
}

/* =========================================================
   Benefits strip
   ========================================================= */
.benefits{background:var(--navy); padding:2.2rem 0;}
.benefits-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem; text-align:center;
}
.benefit span{font-size:1.6rem; display:block; margin-bottom:.4rem;}
.benefit p{color:#dfe4ff; font-size:.82rem; font-weight:600;}

/* =========================================================
   Register / Payment
   ========================================================= */
.register{padding:5rem 0; background:var(--paper);}
.register-inner{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;}
.register-info h2{color:var(--navy); font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:1rem;}
.register-info p{color:#5a6178; margin-bottom:1.5rem;}
.register-facts{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem;}
.register-facts li{font-size:.88rem; color:#333; background:#fff; border:1px solid #e6e9f7; border-radius:10px; padding:.7rem .9rem;}

.register-form{
  background:var(--white); border-radius:18px; padding:2rem;
  box-shadow:0 20px 50px rgba(20,30,90,.08); border:1px solid #e6e9f7;
  display:flex; flex-direction:column;
}
.register-form label{font-size:.82rem; font-weight:700; color:var(--navy); margin:.85rem 0 .35rem;}
.register-form label:first-child{margin-top:0;}
.register-form input, .register-form select{
  padding:.75rem .9rem; border:1.5px solid #dfe3ee; border-radius:10px; font-size:.95rem; font-family:var(--font-body);
  background:#fbfcff;
}
.register-form input:focus, .register-form select:focus{outline:2px solid var(--sky); border-color:var(--sky);}
.mode-toggle{display:flex; gap:.7rem;}
.mode-option{
  flex:1; border:1.5px solid #dfe3ee; border-radius:10px; padding:.7rem .8rem; font-size:.85rem;
  display:flex; align-items:center; gap:.5rem; cursor:pointer; margin:0 !important;
}
.mode-option:has(input:checked){border-color:var(--blue); background:rgba(27,65,196,.06); font-weight:700;}
.mode-option input{width:auto; padding:0;}
.btn-block{margin-top:1.5rem;}
.form-note{font-size:.75rem; color:#8189a0; margin-top:.9rem; line-height:1.5;}
.form-error{color:#b42318; font-size:.85rem; margin-top:.7rem; min-height:1em;}

/* =========================================================
   Success modal
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,14,56,.6); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:1.5rem;
}
.modal-overlay.open{display:flex;}
.modal-card{
  background:#fff; border-radius:18px; padding:2.2rem; max-width:380px; text-align:center;
  animation:pop-in .3s ease;
}
.modal-card-wide{max-width:420px;}
@keyframes pop-in{ from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; background:#e3f8ee; color:#0f8a4b;
  font-size:1.6rem; margin-bottom:1rem;
}
.modal-card h3{color:var(--navy); margin-bottom:.5rem; font-size:1.3rem;}
.modal-card p{color:#5a6178; margin-bottom:1.4rem; font-size:.92rem;}

.pay-details{
  background:var(--paper); border:1px solid #e6e9f7; border-radius:12px;
  padding:1rem 1.2rem; margin-bottom:1.3rem; text-align:left;
}
.pay-row{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.5rem 0; border-bottom:1px dashed #dde1f2; font-size:.85rem;
}
.pay-row:last-child{border-bottom:none;}
.pay-row span{color:#666;}
.pay-row strong{color:var(--navy); text-align:right;}
.pay-row-amount strong{color:var(--blue); font-family:var(--font-mono); font-size:1.1rem;}

.btn-whatsapp{
  background:#25D366; color:#fff; margin-bottom:.75rem; text-decoration:none;
}
.btn-whatsapp:hover{background:#1ebd5a;}
.btn-ghost-dark{background:transparent; color:#8189a0; border:1.5px solid #e6e9f7;}
.btn-ghost-dark:hover{background:#f3f5fb;}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{background:var(--navy-deep); color:#c8d2ff; padding:3rem 0 1.5rem;}
.footer-inner{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;}
.footer-inner strong{color:#fff; display:block; margin-bottom:.5rem; font-family:var(--font-display);}
.footer-inner p{font-size:.85rem; margin-bottom:.3rem; color:#aeb8e0;}
.copyright{text-align:center; font-size:.78rem; color:#7b86b5; margin-top:2.5rem;}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; text-align:center;}
  .hero-buttons{justify-content:center;}
  .hero-tags{justify-content:center;}
  .hero-visual{min-height:380px; margin-top:1rem;}
  .skills-grid{grid-template-columns:repeat(2, 1fr);}
  .method-grid{grid-template-columns:1fr;}
  .method-divider{display:none;}
  .benefits-grid{grid-template-columns:repeat(2, 1fr);}
  .register-inner{grid-template-columns:1fr;}
  .footer-inner{grid-template-columns:1fr; text-align:center;}
}

@media (max-width: 560px){
  .skills-grid{grid-template-columns:1fr;}
  .orbit-wrap{width:260px; height:260px;}
  .c-unit{min-width:44px;}
  .c-unit span{font-size:1.05rem;}
  .nav-inner{padding:.7rem 1rem;}
  .logo-text small{display:none;}
}