/* ---------- Tokens (colorimetría extraída del PDF de EDI) ---------- */
:root{
  --navy: #091837;
  --navy-2: #0d234a;
  --blue: #315390;
  --blue-light: #5a75a6;
  --accent: #004aac;
  --gray: #c1c2c6;
  --gray-light: #e4e7ec;
  --white: #ffffff;
  --shadow: 0 20px 50px rgba(9,24,55,0.25);
  --ease: cubic-bezier(.19,1,.22,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  background: var(--white);
  color: var(--navy);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0 0 .4em; line-height:1.15; }
p{ line-height:1.6; }

/* ---------- Preloader ---------- */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  background: radial-gradient(circle at 50% 30%, var(--navy-2), var(--navy) 70%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
  overflow:hidden;
}
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ text-align:center; position:relative; z-index:2; }
.preloader-logo{
  width:120px; height:120px; object-fit:contain;
  margin:0 auto 24px;
  animation: pulse 1.6s ease-in-out infinite, spinIn 1s var(--ease);
  filter: drop-shadow(0 0 25px rgba(90,117,166,.6));
}
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}
@keyframes spinIn{
  from{ transform: rotate(-20deg) scale(.5); opacity:0; }
  to{ transform: rotate(0) scale(1); opacity:1; }
}
.preloader-bar{
  width:220px; height:6px; border-radius:6px;
  background: rgba(255,255,255,.15);
  overflow:hidden; margin:0 auto;
}
.preloader-bar span{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--blue-light), var(--white));
  border-radius:6px;
  animation: loadbar 1.9s var(--ease) forwards;
}
@keyframes loadbar{ to{ width:100%; } }
.preloader-text{
  color: var(--gray-light); margin-top:16px; font-size:.95rem; letter-spacing:.5px;
}
.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;} }
.preloader-skyline{
  position:absolute; bottom:0; left:0; right:0; height:120px;
  background-image: repeating-linear-gradient(90deg, var(--navy-2) 0 40px, transparent 40px 60px);
  clip-path: polygon(0 60%,5% 40%,10% 60%,15% 20%,20% 60%,28% 45%,35% 60%,42% 15%,50% 60%,58% 35%,65% 60%,72% 25%,80% 60%,88% 40%,95% 60%,100% 45%,100% 100%,0 100%);
  opacity:.6;
}

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

/* ---------- Header ---------- */
#site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  background: rgba(9,24,55,0); backdrop-filter: blur(0px);
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
#site-header.scrolled{
  background: rgba(9,24,55,.85); backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.nav-wrap{
  max-width:1200px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:12px;
}
.nav-logo{ width:42px; height:42px; object-fit:contain; }
.nav-name{ color:var(--white); font-weight:700; letter-spacing:.5px; }
.nav-name em{ color: var(--blue-light); font-style:normal; }
.nav-cta{
  margin-left:auto; background: var(--blue); color:var(--white);
  padding:9px 18px; border-radius:30px; font-size:.9rem; font-weight:600;
  transition: transform .3s var(--ease), background .3s ease;
}
.nav-cta:hover{ background: var(--accent); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:120px 20px 60px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue) 140%);
  position:relative; overflow:hidden;
  color: var(--white);
}
.hero-bg-shapes{ position:absolute; inset:0; pointer-events:none; }
.float-emoji{
  position:absolute; font-size:2.4rem; opacity:.35;
  animation: floaty 7s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.3));
}
.e1{ top:14%; left:8%; animation-delay:0s;}
.e2{ top:65%; left:12%; animation-delay:1.2s;}
.e3{ top:22%; left:85%; animation-delay:.6s;}
.e4{ top:75%; left:80%; animation-delay:1.8s;}
.e5{ top:45%; left:5%; animation-delay:2.4s;}
.e6{ top:50%; left:90%; animation-delay:3s;}
@keyframes floaty{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-25px) rotate(8deg); }
}
.hero-logo{ width:130px; margin:0 auto 20px; }
.hero h1{ font-size: clamp(1.8rem, 4.5vw, 3.2rem); max-width:800px; }
.hero h1 span{ color: var(--blue-light); }
.hero-sub{ max-width:560px; color: var(--gray-light); font-size:1.15rem; margin-bottom:28px; }
.hero-btn{
  background: var(--white); color: var(--navy); font-weight:700;
  padding:14px 30px; border-radius:40px; box-shadow: var(--shadow);
  transition: transform .35s var(--ease), background .35s ease;
}
.hero-btn:hover{ transform: translateY(-4px) scale(1.03); background: var(--blue-light); color:var(--white); }
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color: var(--gray-light); font-size:.85rem; letter-spacing:2px; text-transform:uppercase;
}
.scroll-hint span{ display:block; animation: bounce 1.6s infinite; font-size:1.2rem; }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

/* ---------- Reveal engine (scroll left/right movement) ---------- */
.reveal, .reveal-left, .reveal-right{
  opacity:0; transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal{ transform: translateY(40px); }
.reveal-left{ transform: translateX(-90px); }
.reveal-right{ transform: translateX(90px); }
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view{
  opacity:1; transform: translate(0,0);
}

/* stagger children of grids */
.skills-grid .skill-card:nth-child(1){ transition-delay:.02s; }
.skills-grid .skill-card:nth-child(2){ transition-delay:.08s; }
.skills-grid .skill-card:nth-child(3){ transition-delay:.14s; }
.skills-grid .skill-card:nth-child(4){ transition-delay:.20s; }
.skills-grid .skill-card:nth-child(5){ transition-delay:.26s; }
.skills-grid .skill-card:nth-child(6){ transition-delay:.32s; }
.skills-grid .skill-card:nth-child(7){ transition-delay:.38s; }
.skills-grid .skill-card:nth-child(8){ transition-delay:.44s; }
.skills-grid .skill-card:nth-child(9){ transition-delay:.50s; }

/* ---------- Bands / sections ---------- */
.band{ padding: 90px 24px; position:relative; }
.band-dark{ background: var(--navy); color: var(--white); }
.band-light{ background: var(--white); color: var(--navy); }
.content-block{ max-width:760px; margin:0 auto; }
.tag{
  display:inline-block; background: var(--blue); color:var(--white);
  padding:6px 16px; border-radius:30px; font-size:.85rem; font-weight:700;
  margin-bottom:16px; letter-spacing:.3px;
}
.band-light .tag{ background: var(--gray-light); color: var(--navy); }
.band-dark p strong, .band-light p strong{ color: var(--blue-light); }
.band-light p strong{ color: var(--accent); }

/* two-column costos section */
#costos{ display:flex; flex-wrap:wrap; gap:50px; justify-content:center; }
#costos .content-block{ flex:1 1 340px; }

.check-list{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:14px; }
.check-list li{
  background: var(--gray-light); padding:14px 18px; border-radius:14px; font-weight:600;
  transition: transform .3s var(--ease);
}
.check-list li:hover{ transform: translateX(6px); }

.pricing-card{
  background: var(--navy); color:var(--white); border-radius:18px; padding:22px 24px;
  margin-bottom:20px; box-shadow: var(--shadow);
  transition: transform .4s var(--ease);
}
.pricing-card:hover{ transform: translateY(-6px); }
.pricing-card h3{ font-size:1.05rem; }
.pricing-card .price{ font-size:1.6rem; font-weight:800; color: var(--blue-light); margin:6px 0 10px; }
.pricing-card .price small{ display:block; font-size:.8rem; font-weight:400; color: var(--gray-light); }
.pricing-card p:last-child{ font-size:.92rem; color: var(--gray-light); }

/* servicios grid */
.band-services{ background: linear-gradient(180deg, var(--white), var(--gray-light)); text-align:center; }
.section-title{ font-size: clamp(1.6rem,3.5vw,2.4rem); }
.section-sub{ color: var(--blue); margin-bottom:50px; font-weight:600; }
.skills-grid{
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:22px;
}
.skill-card{
  background: var(--white); border-radius:20px; padding:30px 22px;
  box-shadow: 0 10px 30px rgba(9,24,55,.08);
  text-align:left; border:1px solid rgba(9,24,55,.05);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.skill-card:hover{
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: 0 20px 40px rgba(9,24,55,.18);
}
.skill-emoji{ font-size:2.2rem; display:block; margin-bottom:14px; }
.skill-card h3{ font-size:1.05rem; color: var(--navy); }
.skill-card p{ font-size:.92rem; color:#556; margin:0; }

/* poliza */
.badge-row{ display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 30px; }
.badge{
  background: var(--blue); padding:10px 18px; border-radius:30px; font-weight:600; font-size:.92rem;
}
.partners-label{ color: var(--gray-light); font-size:.9rem; margin-bottom:14px; }
.partner-logos{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; background:var(--white); padding:18px 26px; border-radius:16px; }
.partner-logos img{ height:34px; width:auto; object-fit:contain; }

/* contacto */
.band-contact{ background: var(--navy-2); color:var(--white); text-align:center; }
.contact-grid{
  max-width:760px; margin:40px auto 0; display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:16px;
}
.contact-item{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:18px; border-radius:16px; font-weight:600; font-size:1.05rem;
  display:flex; align-items:center; gap:10px; justify-content:center;
  transition: transform .35s var(--ease), background .35s ease;
}
.contact-item:hover{ background: var(--blue); transform: translateY(-6px) scale(1.03); }

/* footer */
footer{
  background: var(--navy); color: var(--gray-light); text-align:center;
  padding:36px 20px; font-size:.85rem;
}
.footer-logo{ width:48px; margin:0 auto 12px; opacity:.9; }

@media (max-width: 600px){
  .band{ padding:60px 20px; }
  .nav-name{ font-size:.85rem; }
}