:root{
  --brand:#5b3df5;
  --brand-2:#8b5cf6;
  --grad: linear-gradient(135deg, var(--brand), var(--brand-2));
  --radius:1.25rem;
  --font:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{font-family:var(--font)}

.logo-dot{width:14px;height:14px;border-radius:50%;background:var(--grad);display:inline-block}
.brand-text{font-weight:700;letter-spacing:.2px;
    color: #08275b;
    font-size: 25px;
}

.logo {
   
  font-family: 'Inter', sans-serif !important;
    
}

#installBtn { display:none;}

.section-padding{padding:4rem 0}
@media (min-width:992px){.section-padding{padding:5rem 0}}

.hero{
  background: #6366F1 ;
  background: linear-gradient(90deg, rgba(99, 102, 241, 1) 0%, rgba(147, 51, 234, 1) 80%);
  min-height: 60vh;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(354deg, rgb(40 23 72), rgb(58 8 100 / 40%));
}
.hero-mockup{aspect-ratio: 4/3; overflow:hidden}

.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; height:40px;
  background:radial-gradient(100% 40px at 50% -20px, #fff 80%, transparent 82%) bottom/120% 40px no-repeat;
}

/* Cards hover */
.service-card, .portfolio-card, .price-card, .testimonial{
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover, .portfolio-card:hover, .price-card:hover, .testimonial:hover{
  transform: translateY(-6px);
  box-shadow:0 1.25rem 3rem rgba(0,0,0,.12)!important;
}

.icon-badge{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--grad);color:#fff;
}

/* Gradient primary */
.bg-gradient-primary{background: var(--grad);}

/* Steps */
.step{padding:1.25rem;border-radius:var(--radius);background:#f8f9fa}
.step-number{
  width:46px;height:46px;border-radius:50%;
  display:inline-grid;place-items:center;
  background:var(--grad);color:#fff;font-weight:700;box-shadow: 0px 0px 10px 0px #878383;
}

/* CTA */
.cta{
  background-image: radial-gradient(60% 80% at 30% 20%, rgba(255,255,255,.15), transparent), var(--grad);
  background-attachment: fixed;
}
.cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.15))}

/* Parallax general */
[data-parallax]{background-attachment: fixed;}
@media (max-width: 991.98px){
  [data-parallax]{background-attachment: scroll;} /* mejor performance en móviles */
}

/* Accessibility focus */
a:focus-visible, button:focus-visible, .btn:focus-visible{outline:3px solid var(--brand-2); outline-offset:2px}
/* Call to action button */

.btn-cta {
    background: #fb6b18;
    color: #fff;
    border-radius: 30px;
    padding: .6rem 1rem;
    border-style: solid;
    border-color: #fff;
    box-shadow: #26394d 0 20px 30px -10px !important;
}
.btn-cta:hover {
    background: #dddd;
    color: #000;
   
}
.navbar {
    height: 100px;
}
.nav-link {
    display: block;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #00275b;
    text-decoration: none;
    font-family: sans-serif;
    background: #fafafa;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--bdr);
    background: aliceblue;
    color: var(--fg);
    padding: var(--pad);
    cursor: pointer;
    transition: transform .06s ease, background-color .2s;
    font: 500 var(--font) / 1.1 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}