body{font-family:system-ui;margin:0;background:#F5F6FA;color:#111;}
.container{max-width:1100px;margin:auto;padding:10px 20px;}
.header{background:white;position:sticky;top:0;border-bottom:1px solid #eee;z-index:1000;}
.logo{width:40%}
.nav{display:flex;align-items:center;justify-content:space-between;position:relative;}
.menu{display:flex;align-items:center;gap:24px;}
.menu a{text-decoration:none;color:#111;font-weight:500;}
.btn-download{background:#03DAC5;padding:8px 18px;border-radius:8px;color:black;}
.menu-toggle{display:none;font-size:28px;background:none;border:none;cursor:pointer;}
.hero{padding:50px 0;}
.hero-text{text-align:center}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.hero h1{font-size:48px;margin-top:20px;}
.hero p{font-size:18px;color:#555;}
.hero-buttons{margin-bottom:30px;display: flex;flex-direction: column;align-items: center;gap: 20px;}
.btn-primary{background:#03DAC5;padding:14px 26px;border-radius:10px;text-decoration:none;color:black;margin-right:10px;font-weight:600;}
.btn-secondary{border:1px solid #ccc;padding:14px 26px;border-radius:10px;text-decoration:none;color:black;}
.hero-image{text-align:center}
.hero-image img{width:100%;max-width:200px;}
.features{padding:50px 0;}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.how{padding:50px 0;}
.steps{display:flex;justify-content:space-evenly;gap:20px;}
.step{text-align:center;}
.step-number{width:44px;height:44px;font-size:20px;color:white;background:#03DAC5;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin:auto;margin-bottom:10px;}
.planes {width: 80%;margin: auto;}
.tr1 {color:white;background-color:#03DAC5;font-weight:bold;font-size:18px}
.celda1 {width: 40%;height:60px}
.celda2 {width: 30%;height:60px}
.mas {font-size:12px;background: white;color: #03DAC5;padding: 2px 6px;border-radius: 7px;font-weight: 600;}
.tr2 {background-color:white}
.celda3 {text-align:left;padding: 10px 5px}
.celda4 {background: linear-gradient(90deg, #E1E8EE 20%, #A5C1E9 80%);}
.ok {color:#00B200;font-size: 20px;}
.nok {color:#D90000;font-size: 20px;}
.precios1{text-align:left;padding: 10px 5px;font-weight:bold}
.precios2{font-size: 20px;font-weight:bold;}
.precios3{font-size: 20px;font-weight:bold;background: linear-gradient(90deg, #E1E8EE 20%, #A5C1E9 80%);}
.cta{background:#858596;color:white;padding:80px 0;text-align:center;}
.download{text-align:center}
.btn-big{background:#03DAC5;padding:18px 36px;border-radius:12px;text-decoration:none;color:black;display:inline-block;margin-top:20px;font-weight:600;}
.faq{padding:50px 0;}
.faq-item{margin-bottom:30px;}
.footer{background:#111;color:white;padding:40px 0;text-align:center}
.footer-grid{display:flex;justify-content:space-between;}
.footer a{color:white;text-decoration:none;}

@media (max-width:900px){

.logo{width:50%}
.nav{padding:10px}
.menu-toggle{display:block;}
.menu{display:none;position:absolute;top:75px;right:0;background:white;flex-direction:column;align-items:flex-start;width:220px;padding:20px;border-radius:12px;box-shadow:-5px 5px 20px 0px rgba(0, 0, 0, 0.1);gap:25px;}
.menu.show{display:flex;}
.hero{padding:0;}
.hero-buttons{margin:0;}
.hero-grid{grid-template-columns:1fr;text-align:center;}
.hero h1{font-size:32px;}
.features-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 24px;}    
.features, .how, .faq{padding:0;}
.planes {width: 100%}

}