:root{
  --navy:#0D2B45;
  --navy-2:#071c2e;
  --teal:#148C8C;
  --gold:#D49A2A;
  --cream:#F8F7F3;
  --text:#334155;
  --muted:#6b7b8a;
  --white:#ffffff;
  --shadow:0 22px 70px rgba(13,43,69,.10);
  --shadow-strong:0 30px 90px rgba(13,43,69,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--cream);color:var(--text);overflow-x:hidden}
a{text-decoration:none}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;color:var(--navy)}
.section-padding{padding:88px 0}
.navbar{background:rgba(248,247,243,.90);backdrop-filter:blur(16px);border-bottom:1px solid rgba(13,43,69,.08);transition:.25s ease}
.navbar.scrolled{box-shadow:0 10px 30px rgba(13,43,69,.08)}
.brand-image{height:58px;width:auto;display:block}
.nav-link{font-weight:700;color:var(--navy)!important}
.nav-link:hover{color:var(--teal)!important}
.btn-brand{display:inline-flex;align-items:center;gap:.55rem;border:0;border-radius:999px;padding:.92rem 1.35rem;font-weight:800;color:#102033;background:linear-gradient(135deg,var(--gold),#efc56c);box-shadow:0 18px 42px rgba(212,154,42,.22)}
.btn-brand:hover{transform:translateY(-2px);color:#102033}
.btn-ghost{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;padding:.92rem 1.35rem;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.10);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.hero{padding-top:110px;min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;background:
radial-gradient(circle at 82% 18%, rgba(20,140,140,.28), transparent 30%),
linear-gradient(135deg,var(--navy-2) 0%, var(--navy) 58%, #113a52 100%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg, rgba(212,154,42,.05) 25%, transparent 25%), linear-gradient(-45deg, rgba(212,154,42,.04) 25%, transparent 25%);background-size:60px 60px;opacity:.35;mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)}
.hero .container{position:relative;z-index:2}
.hero-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.10);font-weight:700}
.hero h1{font-size:clamp(2.7rem,5.8vw,5.3rem);line-height:.98;letter-spacing:-.03em;color:#fff;margin:0 0 1rem}
.hero p{font-size:1.12rem;color:rgba(255,255,255,.84)}
.text-gold{color:var(--gold)!important}.text-teal{color:var(--teal)!important}
.hero-image-card{position:relative;border-radius:34px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px rgba(0,0,0,.25)}
.hero-image-card img{width:100%;display:block}
.floating-note{position:absolute;left:24px;bottom:24px;right:24px;border-radius:20px;padding:14px 18px;color:#fff;background:rgba(6,26,43,.55);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16)}
.trust-card,.service-card,.showcase-card,.niche-card,.plan-card{background:#fff;border:1px solid rgba(13,43,69,.08);box-shadow:var(--shadow);border-radius:28px}
.trust-card{padding:24px;height:100%}
.trust-card i{font-size:1.75rem;color:var(--gold)}
.section-title{max-width:860px;margin:0 auto 48px;text-align:center}
.section-title .eyebrow{font-size:.82rem;text-transform:uppercase;letter-spacing:.18em;font-weight:900;color:var(--teal)}
.section-title h2{font-size:clamp(2rem,4vw,3.25rem);line-height:1.06;margin-top:.35rem}
.service-card{padding:30px;height:100%;transition:.25s ease}
.service-card:hover,.showcase-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong)}
.icon-wrap{width:62px;height:62px;display:grid;place-items:center;border-radius:20px;background:linear-gradient(135deg, rgba(20,140,140,.14), rgba(212,154,42,.16));color:var(--teal);font-size:1.7rem;margin-bottom:18px}
.service-card h3{font-size:1.35rem;margin-bottom:12px}
.showcase-card{overflow:hidden;height:100%;transition:.25s ease}
.showcase-card img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.showcase-body{padding:20px 22px 24px}
.process{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy),#071f33);color:#fff}
.process h2,.process h3{color:#fff}
.glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);backdrop-filter:blur(14px);box-shadow:0 20px 60px rgba(0,0,0,.18)}
.step-card{padding:28px;border-radius:30px;height:100%}
.step-number{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#102033;font-weight:900;margin-bottom:16px}
.niche-card{padding:26px;height:100%;background:rgba(255,255,255,.82)}
.bi-panel{background:radial-gradient(circle at 18% 12%, rgba(212,154,42,.22), transparent 28%), linear-gradient(135deg,#071f33,#0D2B45);color:#fff;border-radius:34px;padding:38px;box-shadow:0 34px 80px rgba(7,28,46,.24)}
.bi-panel h2{color:#fff}
.dashboard{border-radius:30px;padding:18px}
.metric{padding:18px;border-radius:18px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18)}
.metric small{color:rgba(255,255,255,.7)}
.metric b{display:block;font-size:1.7rem;color:#fff}
.chart-bars{display:flex;gap:8px;align-items:end;height:120px;margin-top:18px}
.chart-bars span{flex:1;border-radius:999px 999px 8px 8px;background:linear-gradient(180deg,var(--gold),var(--teal))}
.plan-card{padding:32px;height:100%}
.plan-card.featured{background:linear-gradient(135deg,var(--navy),#0f3b54);color:#fff;transform:scale(1.02)}
.plan-card.featured h3,.plan-card.featured .price{color:#fff}
.price{font-size:2rem;font-weight:900;color:var(--navy)}
.check-list{list-style:none;padding:0;margin:20px 0 0}
.check-list li{display:flex;gap:.7rem;margin:.72rem 0}
.check-list i{color:var(--teal)}
.plan-card.featured .check-list i{color:var(--gold)}
.cta{border-radius:38px;padding:46px;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;box-shadow:0 36px 90px rgba(20,140,140,.18)}
.cta h2{color:#fff}
.form-control,.form-select{border-radius:16px;padding:.92rem 1rem;border:1px solid rgba(13,43,69,.12)}
.form-control:focus,.form-select:focus{border-color:rgba(20,140,140,.45);box-shadow:0 0 0 .25rem rgba(20,140,140,.12)}
.footer{background:#061a2b;color:rgba(255,255,255,.76);padding:70px 0 26px}
.footer h4{color:#fff}
.footer a{color:rgba(255,255,255,.76)}
.footer a:hover{color:var(--gold)}
.footer-logo{width:58px;height:58px;object-fit:contain}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10);margin-top:40px;padding-top:24px}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:1100;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-size:1.75rem;box-shadow:0 18px 38px rgba(0,0,0,.25)}
@media (max-width:991.98px){.hero{padding-top:100px}.section-padding{padding:72px 0}.plan-card.featured{transform:none}.brand-image{height:50px}}
@media (max-width:575.98px){.brand-image{height:42px}.hero h1{font-size:2.75rem}.cta{padding:30px}.floating-note{position:static;margin-top:14px}}

.hero-image-card img{aspect-ratio:16/9;object-fit:cover;object-position:center;}
.floating-note{display:none;}
.form-success-alert{position:fixed;top:88px;right:20px;z-index:2000;background:#0D2B45;color:#fff;padding:14px 18px;border-radius:16px;box-shadow:0 20px 40px rgba(13,43,69,.22);opacity:0;transform:translateY(-10px);transition:.25s ease}\.form-success-alert.show{opacity:1;transform:translateY(0)}

/* Mejoras v4 */
.hero-image-card img{
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
}
.floating-note{display:none!important;}
.form-success-alert{
  position:fixed;
  top:88px;
  right:20px;
  z-index:2000;
  color:#fff;
  padding:14px 18px;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(13,43,69,.22);
  opacity:0;
  transform:translateY(-10px);
  transition:.25s ease;
  max-width:min(360px, calc(100vw - 40px));
}
.form-success-alert.ok{background:#0D2B45;}
.form-success-alert.error{background:#7f1d1d;}
.form-success-alert.show{
  opacity:1;
  transform:translateY(0);
}


/* Contacto v5 mejorado */
.contact-section{
  position:relative;
  background:
    radial-gradient(circle at 12% 20%, rgba(20,140,140,.10), transparent 28%),
    radial-gradient(circle at 88% 10%, rgba(212,154,42,.12), transparent 24%),
    var(--cream);
}
.contact-shell{
  border-radius:42px;
  padding:18px;
  background:linear-gradient(135deg, rgba(13,43,69,.10), rgba(20,140,140,.10));
  border:1px solid rgba(13,43,69,.08);
  box-shadow:0 30px 90px rgba(13,43,69,.10);
}
.contact-info-panel{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:34px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 12%, rgba(212,154,42,.24), transparent 22%),
    linear-gradient(135deg,#071c2e,#0D2B45 58%,#0f4d58);
}
.contact-info-panel::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-80px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:rgba(20,140,140,.22);
  filter:blur(12px);
}
.contact-info-panel h3{
  color:#fff;
  font-size:2rem;
  margin:18px 0 12px;
}
.contact-lead{
  color:rgba(255,255,255,.78);
  position:relative;
  z-index:1;
}
.contact-pill{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .85rem;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
}
.contact-benefits{
  display:grid;
  gap:14px;
  margin:28px 0;
  position:relative;
  z-index:1;
}
.contact-benefit{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
}
.contact-benefit i{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#102033;
  background:linear-gradient(135deg,var(--gold),#efc56c);
  flex:0 0 auto;
}
.contact-benefit strong{
  display:block;
  color:#fff;
}
.contact-benefit span{
  display:block;
  color:rgba(255,255,255,.70);
  font-size:.94rem;
}
.contact-direct{
  display:grid;
  gap:10px;
  margin-top:22px;
  position:relative;
  z-index:1;
}
.contact-direct a,
.contact-direct span{
  color:rgba(255,255,255,.86);
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:600;
}
.contact-direct i{
  color:var(--gold);
}
.whatsapp-card{
  margin-top:24px;
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  border-radius:22px;
  color:#fff;
  background:rgba(37,211,102,.14);
  border:1px solid rgba(37,211,102,.24);
  position:relative;
  z-index:1;
}
.whatsapp-card:hover{
  color:#fff;
  background:rgba(37,211,102,.20);
}
.whatsapp-card i{
  font-size:2rem;
  color:#25D366;
}
.whatsapp-card strong,
.whatsapp-card span{
  display:block;
}
.whatsapp-card span{
  color:rgba(255,255,255,.70);
  font-size:.92rem;
}
.contact-form-card{
  border-radius:32px;
  padding:34px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(13,43,69,.08);
  box-shadow:0 24px 70px rgba(13,43,69,.10);
}
.form-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}
.form-header h3{
  margin:4px 0 0;
  font-size:2rem;
}
.mini-label{
  color:var(--teal);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
}
.form-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#102033;
  background:linear-gradient(135deg,var(--gold),#efc56c);
  font-size:1.4rem;
  flex:0 0 auto;
}
.contact-form-card .form-label{
  font-weight:800;
  color:var(--navy);
  margin-bottom:8px;
}
.contact-form-card .form-label span{
  color:var(--gold);
}
.input-icon{
  position:relative;
}
.input-icon > i{
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
  color:var(--teal);
  z-index:2;
}
.input-icon .form-control,
.input-icon .form-select{
  padding-left:44px;
}
.textarea-clean{
  min-height:142px;
  resize:vertical;
}
.form-note{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(20,140,140,.08);
  color:var(--text);
  font-weight:600;
}
.form-note i{
  color:var(--teal);
}
.btn-contact{
  min-width:190px;
  justify-content:center;
}
.btn-whatsapp-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.2rem;
  border-radius:999px;
  border:1px solid rgba(37,211,102,.35);
  color:#146c43;
  font-weight:800;
  background:rgba(37,211,102,.08);
}
.btn-whatsapp-inline:hover{
  color:#0f5132;
  background:rgba(37,211,102,.14);
}
@media(max-width:575.98px){
  .contact-shell{padding:10px;border-radius:30px;}
  .contact-info-panel,.contact-form-card{padding:24px;border-radius:26px;}
  .form-header h3,.contact-info-panel h3{font-size:1.65rem;}
  .form-icon{display:none;}
}