:root{
  --primary:#0aa94d!important;
  --secondary:#32b543;
  --headings:#0f0f0f;
  --text:#666666;
  --bg:#ffffff;
  --max-w:1200px;
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif; margin:0; color:var(--text); background:var(--bg); line-height:1.5}
a{color:var(--primary); text-decoration:none!important}
.container{max-width:var(--max-w); margin:0 auto; padding:0 20px}
header{border-bottom:1px solid #eee; background:#fff; position:sticky; top:0; z-index:50}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.logo{font-weight:700; color:var(--headings); font-size:20px}
nav ul{display:flex; gap:18px; list-style:none; margin:0; padding:0; align-items:center}
nav a{color:var(--headings); font-weight:600}
.cta{background:var(--primary); color:#fff; padding:9px 14px; border-radius:8px; border:none; cursor:pointer; box-shadow:0 6px 20px rgba(10,169,77,.18)}
.cta.secondary{background:transparent; border:1px solid var(--primary); color:var(--primary)}
/* hero */
.hero{display:flex; gap:40px; align-items:center; padding:60px 0; }
.hero.background{background: url(banner4.gif); background-size: cover; background-position: center;}
.bg1{background: url(bg1.png); background-size: cover; background-position: center;}
.bg2{background: url(bg2.png); background-size: cover; background-position: center;}
.hero-left{flex:1}
.hero h1{color:var(--headings); margin:0 0 12px; font-size:40px}
.hero p{color:var(--text); margin:0 0 18px}
.hero-right{flex:1; display:flex; justify-content:center}
.mock-img{width:100%; max-width:480px; height:300px; background:linear-gradient(135deg,#f1f7f3,#e8f6ea); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9bbfae; font-weight:700}
/* sections */
section{padding:50px 0; }
.center{text-align:center}
/* video */
.video-wrap{display:flex; justify-content:center}
iframe, video{max-width:100%; border-radius:12px}
/* tabs (sección 3) */
.tabs{max-width:100%; margin:0 auto}
.tab-buttons{display:flex; gap:10px; margin-bottom:18px; justify-content:center}
.tab-buttons button{font-size:14px; background:#ffffff00; padding:10px 14px; border-radius:8px; border:1px solid #ddd; cursor:pointer}
.tab-buttons button.active{background:var(--secondary); color:#fff; border-color:var(--secondary)}
.tab-content{height:500px;  padding:20px; border-radius:12px; color:var(--text)}
.tab-content ul li{padding: 5px; margin-bottom:5px;list-style-image: url(flecha.png); color:var(--text); border-bottom: 1px solid var(--primary);}
.tab-content .imgtab{width:100%; max-width:500px; background:linear-gradient(135deg,#f1f7f3,#e8f6ea); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9bbfae; font-weight:700; margin-top:20px;}
/* banner full width */
.full-banner{background-image: url('banner1.png'); color:#fff; padding:0px}
.banner-inner{ margin:0 auto; display:flex; justify-content:space-between; align-items:center}
.banner-inner h3{margin:0; color:#fff}
/* sección 5 icon boxes */
.icon-section{display:flex; align-items:center; gap:20px; justify-content:center; flex-wrap:wrap}
.icon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.icon-box{background:#fff; padding:20px; border-radius:10px; text-align:center; box-shadow:0 6px 18px rgba(0,0,0,.06)}
.icon{width:52px; height:52px; margin:0 auto 12px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#f0fbf4,#eaf8ee); color:var(--primary); font-weight:700}
/* two-col image/text */
.two-col{display:flex; gap:30px; align-items:center; flex-wrap:wrap}
.two-col .col{flex:1; min-width:280px}
img.resp{width:90%; border-radius:12px; display:block}
/* section 8 special banner */
.promo{display:flex; gap:20px; align-items:center; background:linear-gradient(180deg,#fff,#fbfffb); padding:26px; border-radius:12px}
.glow-btn{background:var(--primary); color:#fff; padding:12px 18px; border-radius:10px; border:none; cursor:pointer; box-shadow:0 6px 30px rgba(10,169,77,.18)}
.glow-btn:hover{box-shadow:0 8px 40px rgba(10,169,77,.35)}
/* precios */
.price-tabs{max-width:1100px; margin:0 auto}
.price-toggle{display:flex; gap:8px; justify-content:center; margin-bottom:18px}
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.card{background:#fff; padding:20px; border-radius:12px; border:1px solid #eee; position:relative}
.ribbon{position:absolute; right:12px; top:12px; background:var(--secondary); color:#fff; padding:6px 10px; border-radius:8px; font-size:12px}
.price{font-size:28px; color:var(--headings); margin:10px 0}
/* testimonios */
.testimonials{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px}
.testimonial{background:#fff; padding:18px; border-radius:12px; border:1px solid #f0f0f0}
/* footer */
footer{background:#fafafa; color:var(--text)}
.footer-banner{background:#fff; padding:26px 0; border-top:1px solid #eee; border-bottom:1px solid #eee}
.footer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:var(--max-w); margin:26px auto 60px; padding:0 20px}
.socials{display:flex; gap:8px; align-items:center}
.absolute-foot{text-align:center; padding:18px 0; border-top:1px solid #eee; font-size:13px; color:#999}
/* estilos específicos para funciones */
.features{margin:16px 0}
#search{width:100%;padding:8px;margin-bottom:12px;border:1px solid #ddd;border-radius:6px}
.features-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
@media (min-width:900px){
  .features-grid{grid-template-columns:repeat(4,1fr)}
}
.card{background:#fff;border:1px solid #eee;padding:12px;border-radius:8px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.card h3{margin:0 0 6px;font-size:1rem;color:var(--headings)}
.summary{color:#666;margin:0 0 8px;font-size:.95rem}
details summary{cursor:pointer;color:var(--primary);font-weight:600}

/* estilos para contacto (form) */
label{display:block;margin-top:12px;color:var(--headings)}
input,textarea{width:100%;padding:10px;margin-top:6px;border-radius:8px;border:1px solid #eee}
button[type="submit"]{margin-top:12px;padding:10px 14px;background:var(--primary);color:#fff;border:0;border-radius:8px;cursor:pointer}
.verde{color:var(--secondary)}
.title{font-size:45px;}
.title2{font-size:38px;}
.title3{font-size:28px;}
.title4{font-size:16px;}
.banner{background:linear-gradient(125deg,#000000,#0aa94c40); height:500px; background-size: cover; background-position: center;}
.dash{background-image: url('dash2.png'); height:500px; padding:40px 20px; background-size: contain;background-position: center;background-repeat: no-repeat;background-color: #0aa94d;}
.text-white{color:#fff;}
#pricingGrid .card{padding: 35px 10px;}
#pricingGrid .card.mostSold{box-shadow: 0 4px 12px rgba(13,169,78,.3); border: 2px solid rgb(13, 169, 78);}

ul.precios{padding:20px;}
ul.precios li{padding:12px 5px; margin-bottom:8px; list-style:inside; color:var(--text); border-bottom: solid 1px #d4d4d4;}
/* truncar listas largas y estilo del toggle */
uul.precios.collapsed{position:relative}
ul.precios.collapsed li:nth-child(n+11){display:none}
ul.precios.collapsed::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.8rem;background:linear-gradient(180deg,transparent,rgba(255,255,255,0.9));pointer-events:none}
.toggle-more{display:inline-block;margin-top:10px;background:transparent;border:0;color:var(--primary);cursor:pointer;font-weight:700;padding:6px 8px;border-radius:6px}
.toggle-more:focus{outline:2px solid #cdebd2;outline-offset:2px}

/* responsive */
@media(max-width:880px){
  .hero{flex-direction:column}
  .banner-inner{flex-direction:column; text-align:center; gap:12px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
    .icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.tab-content{height:auto;  padding:0px; border-radius:12px; color:var(--text)}

  .footer-grid{grid-template-columns:1fr}
}