:root{
  --bg:#ffffff;
  --ink:#0b1220;
  --muted:#5e6b85;
  --cobalt:#0047ff;
  --cobalt-600:#0037c7;
  --cobalt-50:#eaf0ff;
  --card:#f7f9ff;
  --shadow:0 10px 30px rgba(0,30,80,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans';line-height:1.6}
a{color:var(--cobalt);text-decoration:none}
img{max-width:100%;display:block}
/* Header */
.header{position:sticky;top:0;z-index:50;backdrop-filter:contrast(105%) saturate(110%);background:rgba(255,255,255,.7);border-bottom:1px solid #eef2ff}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.5px}
.menu{display:flex;gap:22px;align-items:center;margin-left:auto} /* empuja el menú a la derecha */
.menu a{font-weight:600;color:#0b1220;opacity:.9}
.cta{background:var(--cobalt);color:#fff;font-weight:700;border:none;border-radius:12px;padding:12px 18px;box-shadow:0 8px 20px rgba(0,71,255,.25);transition:transform .2s,box-shadow .2s,background .2s}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,71,255,.28);background:var(--cobalt-600)}
.hamb{display:none;background:transparent;border:0}
.hamb svg{width:28px;height:28px}
/* Presentación Video */
.presentacion{position:relative;overflow:hidden;width:100%;aspect-ratio:49/21;background:#0b1220;border-bottom:1px solid #eef2ff}
.presentacion video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:contrast(105%) saturate(110%);inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35))}
/* Hero */
.hero{padding:64px 20px 40px}
.hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.eyebrow{color:var(--cobalt);font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:13px}
h1{font-size:clamp(32px,3.6vw,56px);line-height:1.1;margin:.3em 0}
.lead{font-size:clamp(16px,1.25vw,18px);color:#30405a;margin:16px 0 12px}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px} /* más espacio sobre el botón */
.btn{padding:14px 18px;border-radius:12px;font-weight:700;border:1.5px solid var(--cobalt);transition:transform .2s,background .2s,color .2s}
.btn.primary{background:var(--cobalt);color:#fff}
.btn:hover{transform:translateY(-1px)}
.hero-card{background:var(--card);border:1px solid #e8efff;border-radius:20px;padding:22px;box-shadow:var(--shadow)}
/* Sections */
section{padding:72px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;border:1px solid #edf2ff;border-radius:20px;padding:24px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.08);border-color:#dfe7ff}
.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--cobalt-50);color:var(--cobalt);margin-bottom:14px}
h2{font-size:clamp(28px,2.6vw,40px);line-height:1.15;margin:0 0 10px}
h3{font-size:20px;margin:12px 0 6px}
ul{padding-left:18px;margin:8px 0}
.band{background:linear-gradient(180deg,#f9fbff,#eef4ff);border:1px solid #e7eeff;border-left:none;border-right:none}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.metric{background:#fff;border:1px dashed #d9e4ff;border-radius:16px;padding:16px;text-align:center}
.metric strong{display:block;font-size:28px}
.cta-strip{background:linear-gradient(90deg,#0047ff,#2e7bff);color:#fff;border-radius:22px;padding:26px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 14px 34px rgba(0,71,255,.3)}
.cta-strip .cta{background:#fff;color:#0037c7;box-shadow:none}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border:1px solid #e8eeff;border-radius:18px;padding:18px}
.step-num{font-weight:800;color:var(--cobalt);font-size:14px;letter-spacing:.1em}
form{display:grid;gap:12px}
input,textarea,select{border:1.5px solid #e1e8ff;border-radius:12px;padding:12px 14px;font:inherit;outline:0;background:#fff;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus,select:focus{border-color:var(--cobalt);box-shadow:0 0 0 4px #eaf0ff}
.footer{border-top:1px solid #e9eeff;padding:28px 0;color:#5a6b88;font-size:14px;background:#fbfcff}
.cols{display:flex;gap:30px;flex-wrap:wrap}
@media (max-width:980px){
  .menu{display:none}
  .hamb{display:block;margin-left:auto}
  .hero .wrap{grid-template-columns:1fr}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
/* Extra espacio en CTA de '¿Listo para crecer?' */
#casos .btn.primary{ margin-top: 24px; }


/* Servicios (checkboxes) */
.services-checks{
  border:1.5px solid #e1e8ff; border-radius:12px; padding:10px 12px;
  display:grid; gap:8px; background:#fff;
}
.services-checks label{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  transition:background .15s ease, box-shadow .15s ease;
}
.services-checks input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--cobalt); }
.services-checks label:hover{ background:#f6f9ff; box-shadow:0 0 0 2px #edf3ff inset; }


/* ===== Footer v7 ===== */
.footer{
  background: var(--cobalt);
  color: #fff;
  border-top: none;
}
.footer a{ color:#fff; opacity:.95; }
.footer a:hover{ opacity:.8; }
.footer .foot-row{
  display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap;
  text-align:center;
}
.footer .foot-logo{ display:flex; align-items:center; gap:10px; font-weight:800; }
.footer .foot-nav{ display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.footer .copy{ opacity:.95; }


/* ===== Header v8 (cobalt) ===== */
.header{ background: var(--cobalt); border-bottom: none; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.header .brand span, .header .menu a{ color:#fff !important; opacity:1; }
.header .menu a:hover{ opacity:.85; }
.header .cta{ background:#fff; color: var(--cobalt); box-shadow:none; }
.header.scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.12); }

/* ===== Footer v8 (light gray columns) ===== */
.footer{
  background:#fbfcff; color:#5a6b88; border-top:1px solid #e9eeff; padding:28px 0;
}
.footer a{ color:#30405a; }
.footer .cols{ display:flex; gap:30px; flex-wrap:wrap; }
.footer .brand{ display:flex; align-items:center; gap:10px; font-weight:800; }
.footer .right-copy{ margin-left:auto; align-self:center; }


/* Footer horizontal center layout */
.footer .wrap{
  display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;text-align:center;
}
.footer .brand{display:flex;align-items:center;gap:10px;font-weight:800;}
.footer p{margin:0;}
.footer ul{display:flex;gap:16px;list-style:none;padding:0;margin:0;}
.footer .right-copy{margin:0;}

/* Extra spacing in ¿Listo para crecer con método? */
#casos .btn.primary{margin-top:32px;}


/* Espaciado entre párrafos en 'Sobre nosotros' */
#about p{margin-bottom:14px;line-height:1.7;}

#casos .btn.primary{margin-top:46px;}


/* Footer inline horizontal centered */
.footer .foot-inline{
  display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:nowrap; text-align:center;
}
.footer .foot-nav{ display:flex; gap:16px; list-style:none; padding:0; margin:0; }
.footer .copy{ margin:0; }

/* Match hero spacing for CTA in '¿Listo para crecer?' */
#casos .btn.primary{ margin-top:30px !important; }

#casos .btn.primary{margin-top:65px !important;}

#casos .btn.primary{margin-top:120px !important;}


/* ===== Smooth reveal animations (v15) ===== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; will-change:opacity, transform; }
.reveal.revealed{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.06s; }
.reveal-delay-2{ transition-delay:.12s; }
.reveal-delay-3{ transition-delay:.18s; }
.reveal-delay-4{ transition-delay:.24s; }
.reveal-delay-5{ transition-delay:.30s; }


/* ===== v16 Mobile perfection ===== */

/* Improve hero video height on tall mobiles */
@media (max-width: 600px){
  .presentacion{ aspect-ratio:auto; min-height: 42vh; }
}

/* Tighter, readable typography on small screens */
@media (max-width: 480px){
  h1{ font-size: 28px; }
  h2{ font-size: 24px; }
  .lead{ font-size: 16px; }
  .wrap{ padding: 0 16px; }
}

/* Full-width buttons on mobile */
@media (max-width: 600px){
  .btns .btn,
  .cta { width: 100%; text-align: center; }
}

/* Better spacing for form fields on mobile */
@media (max-width: 600px){
  #contacto .grid-2{ grid-template-columns: 1fr; }
  form{ gap: 14px; }
}

/* Keep large spacing on desktop, balanced on mobile for the #casos CTA */
#casos .btn.primary{ margin-top: 120px !important; } /* desktop/tablet */
@media (max-width: 600px){
  #casos .btn.primary{ margin-top: 48px !important; }
}

/* Footer wrapping gracefully on small screens while staying horizontal */
@media (max-width: 600px){
  .footer .foot-inline,
  .footer .wrap{ gap: 16px; flex-wrap: wrap; }
  .footer .foot-nav{ gap: 10px; }
}

/* Mobile menu sheet: improve hit areas and contrast */
.mobile nav a{
  min-width: 200px; display:block; text-align:left; font-weight:600;
}