/* ===== Colores corporativos (extraídos del logo) ===== */
:root{
  --azul:#0096d6;
  --azul-osc:#0066a1;
  --gris:#555;
  --negro:#1f1f1f;
  --gris-claro:#f5f7fb;
}

html,body{scroll-behavior:smooth;}
body{padding-top:72px;color:#222}

/* ===== HERO ===== */
.hero{min-height:85vh; position:relative; overflow:hidden;}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.6);}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(135deg,var(--azul) 0%, var(--azul-osc) 100%); opacity:.75; mix-blend:multiply;}
.hero h1,.hero p,.hero .btn{position:relative; z-index:1;}

.badge-usp{
  display:flex; gap:.6rem; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  padding:.6rem .9rem; border-radius:999px; backdrop-filter: blur(2px);
  font-weight:600;
}
.badge-usp i{font-size:1.1rem}

/* ===== Secciones genéricas ===== */
.py-6{padding-top:4.5rem; padding-bottom:4.5rem;}
.section-title{margin-bottom:2.5rem}

/* ===== Cards beneficios / pasos ===== */
.benefit-card{
  background:var(--gris-claro);
  border-radius:1rem; padding:1.5rem; height:100%;
  transition:.25s ease; border:1px solid #e6ebf5;
}
.benefit-card:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.07);}
.benefit-card i{font-size:2rem; color:var(--azul-osc)}
.benefit-card h6{margin-top:.6rem; font-weight:700}

.step-card{
  position:relative; background:#fff; border:1px solid #eaeaf0;
  border-radius:1rem; padding:1.5rem; height:100%; box-shadow:0 4px 18px rgba(0,0,0,.06);
}
.step-card .step{
  position:absolute; top:-14px; left:-14px; width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--azul-osc),var(--azul)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800;
}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg,var(--azul-osc),var(--azul));}

/* ===== Tabla precios ===== */
.table thead th{font-weight:700}
.table-warning td{border-top:2px solid #fff}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.show{opacity:1; transform:none;}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}

/* ===== Utilidades ===== */
.rounded-4{border-radius:1rem;}
.shadow-lg{box-shadow:0 .75rem 1.5rem rgba(0,0,0,.12)!important;}