:root{
  --color-primary:#0B6E4F;
  --color-secondary:#1E3A8A;
  --color-bg:#F5F7FA;
  --color-text:#0F172A;
  --color-accent:#F59E0B;
  --radius:18px;
  --shadow:0 10px 30px rgba(15, 23, 42, 0.08);
  --container:1100px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
}

img{ max-width:100%; display:block; border-radius:calc(var(--radius) - 4px); }
a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.85; }

.container{
  width:min(100% - 2rem, var(--container));
  margin-inline:auto;
}

.section{
  padding:4rem 0;
}
.section.alt{
  background:#FFFFFF;
}
.page-hero{
  padding:3.5rem 0 2rem;
  background:linear-gradient(180deg, #fff, var(--color-bg));
  border-bottom:1px solid rgba(15,23,42,.06);
}
.page-hero h1{ margin:0 0 .5rem; font-size:2.2rem; }
.lead{ font-size:1.1rem; color:#334155; max-width:60ch; }

/* Header / nav */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:#fff;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem; font-weight:800;
}
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--color-primary); color:#fff; font-weight:900;
}
.main-nav ul{
  display:flex; list-style:none; gap:.9rem; padding:0; margin:0; flex-wrap:wrap;
}
.main-nav a{
  padding:.45rem .7rem;
  border-radius:10px;
  color:#0f172a;
  font-weight:600;
}
.main-nav a.active,
.main-nav a:hover{
  background:rgba(11,110,79,.08);
  color:var(--color-primary);
}

/* Hero */
.hero{ padding:4rem 0 3.5rem; background:#fff; }
.hero-grid{
  display:grid; gap:2rem;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
}
.hero-copy h1{ font-size:2.6rem; margin:0 0 .8rem; }
.hero-actions{ display:flex; gap:.8rem; margin:1.2rem 0; flex-wrap:wrap; }
.hero-bullets{ margin:1rem 0 0; padding-left:1.2rem; color:#334155; }
.hero-media figcaption{ font-size:.9rem; color:#64748b; margin-top:.5rem; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.1rem;
  border-radius:12px;
  border:2px solid transparent;
  font-weight:700;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.btn-primary{
  background:var(--color-primary);
  color:#fff;
}
.btn-secondary{
  background:var(--color-secondary);
  color:#fff;
}
.btn-ghost{
  background:#fff;
  border-color:rgba(15,23,42,.12);
}
.btn:hover{ transform:translateY(-1px); }

/* Cards / grids */
.cards-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(3, 1fr);
  margin-top:1.2rem;
}
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:1.2rem 1.2rem 1.1rem;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,.06);
}
.card h3{ margin-top:0; }

.feature-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(4, 1fr);
  margin-top:1.2rem;
}
.feature{
  background:#fff;
  padding:1rem;
  border-radius:14px;
  border:1px dashed rgba(15,23,42,.12);
}

/* Two columns */
.two-col{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
}

/* Products */
.products-grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(3, 1fr);
  margin-top:1.2rem;
}
.product-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,.06);
}
.product-body{ padding:1rem 1rem 1.1rem; }
.price{
  font-weight:800; color:var(--color-primary); margin:.6rem 0 0;
}

/* Contact */
.contact-form{
  background:#fff; padding:1.2rem; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid rgba(15,23,42,.06);
  display:grid; gap:.7rem;
}
.contact-form input, .contact-form textarea{
  width:100%;
  padding:.75rem .8rem;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.15);
  font-size:1rem;
}
.info-list{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.4rem; }
.social-links{ list-style:none; padding:0; margin:0; display:flex; gap:.6rem; flex-wrap:wrap; }
.social-links a{
  background:#fff; border:1px solid rgba(15,23,42,.12);
  padding:.45rem .7rem; border-radius:999px; font-weight:700;
}

/* Testimonials */
.testimonials-grid{
  display:grid; gap:1rem; margin-top:1.2rem;
  grid-template-columns:repeat(2, 1fr);
}
.testimonial-card{
  background:#fff; padding:1.2rem; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid rgba(15,23,42,.06);
}
.testimonial-card.featured{
  border:2px solid var(--color-accent);
  position:relative;
}
.testimonial-card.featured::after{
  content:"Destacado";
  position:absolute; top:12px; right:12px;
  background:var(--color-accent); color:#111827;
  font-weight:900; font-size:.75rem;
  padding:.25rem .5rem; border-radius:999px;
}
.stars{ color:#f59e0b; letter-spacing:1px; font-size:1.1rem; }
.testimonial-author{ margin-top:.8rem; color:#334155; display:grid; gap:.1rem; }
.wide-figure{ margin-top:1.5rem; }

/* CTA */
.cta{
  background:linear-gradient(90deg, rgba(11,110,79,.12), rgba(30,58,138,.12));
}
.cta-inner{
  background:#fff; padding:2rem; border-radius:calc(var(--radius) + 4px);
  box-shadow:var(--shadow);
  text-align:center;
}

/* Footer */
.site-footer{
  background:#0b1220;
  color:#e2e8f0;
  padding:2.5rem 0 1.2rem;
  margin-top:2rem;
}
.footer-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:2fr 1fr 1fr;
}
.footer-title{ margin:0 0 .3rem; }
.footer-links{
  list-style:none; padding:0; margin:0; display:grid; gap:.4rem;
}
.footer-links a{ color:#e2e8f0; }
.footer-bottom{
  border-top:1px solid rgba(226,232,240,.12);
  margin-top:1.5rem; padding-top:1rem;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.9rem; color:#cbd5e1;
}

/* Responsive */
@media (max-width: 900px){
  .hero-grid, .two-col{ grid-template-columns:1fr; }
  .cards-grid{ grid-template-columns:1fr 1fr; }
  .feature-grid{ grid-template-columns:1fr 1fr; }
  .products-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .cards-grid, .feature-grid, .products-grid, .testimonials-grid{
    grid-template-columns:1fr;
  }
  .hero-copy h1{ font-size:2.1rem; }
}