:root { --bg:#ffffff; --text:#442c1a; --muted:#a9a79b; --primary:#178b44; --secondary:#442c1a; --accent:#178b44; --surface:#ffffff; --ring:rgba(23,139,68,.35) }
[data-theme="dark"] { --bg:#0f172a; --text:#e5e7eb; --muted:#c6c4b8; --surface:#0f172a; --ring:rgba(23,139,68,.5) }
* { box-sizing:border-box }
html,body { height:100% }
body { margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--text) }
a { color:inherit; text-decoration:none }
.container { width:100%; max-width:1100px; margin:0 auto; padding:0 20px }
.btn { display:inline-flex; align-items:center; gap:8px; border:0; padding:12px 18px; border-radius:12px; font-weight:600; cursor:pointer; transition:.2s ease; font-size:16px }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; box-shadow:0 8px 20px rgba(23,139,68,.35) }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 28px rgba(23,139,68,.45) }
.btn-outline { background:transparent; border:1px solid rgba(169,167,155,.35) }
.btn-outline:hover { border-color:var(--primary); color:var(--primary) }
header { position:sticky; top:0; z-index:20; backdrop-filter:saturate(180%) blur(8px); background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35)); border-bottom:1px solid rgba(169,167,155,.2) }
[data-theme="dark"] header { background:linear-gradient(180deg,rgba(15,23,42,.7),rgba(15,23,42,.35)); border-bottom-color:rgba(169,167,155,.15) }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px }
.brand-badge { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:conic-gradient(from 180deg at 50% 50%, var(--primary), var(--secondary), var(--muted), var(--primary)); color:#fff }
nav ul { display:flex; gap:18px; list-style:none; margin:0; padding:0 }
nav a { padding:8px 10px; border-radius:8px; color:var(--muted) }
nav a:hover { color:var(--text); background:rgba(169,167,155,.14) }
.actions { display:flex; align-items:center; gap:10px }
.theme-toggle { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(169,167,155,.35); cursor:pointer }
.theme-toggle:hover { border-color:var(--primary); color:var(--primary) }
.menu-btn { display:none }
.hero { position:relative; overflow:hidden }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(68,44,26,.55), rgba(23,139,68,.2) 60%, rgba(255,255,255,0) 100%); pointer-events:none }
#inicio { background:url('https://images.unsplash.com/photo-1584466977773-e180a5b2c5b1?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat }
.hero .container { position:relative; z-index:1 }
.hero-visual { position:absolute; inset:-60px -120px auto auto; width:520px; height:520px; background:radial-gradient(600px circle at 20% 20%, rgba(23,139,68,.22), transparent 35%), radial-gradient(600px circle at 80% 40%, rgba(68,44,26,.22), transparent 40%), radial-gradient(600px circle at 40% 80%, rgba(169,167,155,.22), transparent 38%); filter:saturate(120%) blur(10px); transform:rotate(-8deg) }
.hero .container { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center; min-height:74vh; padding:32px 20px 16px }
.badge { display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(23,139,68,.1); color:var(--primary); border:1px solid var(--ring) }
h1 { margin:18px 0 12px; font-size:42px; line-height:1.08 }
.lead { color:var(--muted); font-size:18px }
.cta { display:flex; gap:12px; margin-top:22px }
.hero-card { background:var(--surface); border:1px solid rgba(169,167,155,.25); border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(2,6,23,.07) }
.hero-card h3 { margin:0 0 10px; font-size:18px }
.hero-list { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.hero-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:rgba(169,167,155,.12) }
section { padding:60px 0 }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:26px }
.section-title h2 { margin:0; font-size:28px }
.section-title p { margin:0; color:var(--muted) }
.grid { display:grid; gap:18px }
.grid-3 { grid-template-columns:repeat(3,1fr) }
.grid-2 { grid-template-columns:repeat(2,1fr) }
.card { background:var(--surface); border:1px solid rgba(169,167,155,.25); border-radius:18px; padding:18px; transition:.25s ease; box-shadow:0 8px 22px rgba(2,6,23,.06) }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(2,6,23,.1) }
.card-media { width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#e5e7eb }
.card-media img { width:100%; height:100%; object-fit:cover; display:block }
.card-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--primary),var(--secondary)) }
.card-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; margin-top:6px }
.card-meta i { color:var(--primary) }
.card h3 { margin:12px 0 6px; font-size:18px }
.card p { margin:0; color:var(--muted) }
.about { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center }
.about img { width:100%; border-radius:18px; border:1px solid rgba(169,167,155,.25) }
.about ul { padding-left:18px; margin:0; color:var(--muted) }
.testimonial-carousel { position:relative }
.testimonial-viewport { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.testimonial-track { display:flex; gap:16px; padding-bottom:4px }
.t-card { scroll-snap-align:start; min-width:300px; background:var(--surface); border:1px solid rgba(169,167,155,.25); border-radius:18px; padding:18px; box-shadow:0 8px 22px rgba(2,6,23,.06) }
.t-card .t-head { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.t-card .avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; border:2px solid var(--primary) }
.t-card .stars { color:#f59e0b }
.t-controls { position:absolute; inset:auto 0 -10px 0; display:flex; justify-content:center; gap:8px }
.t-controls button { border:1px solid rgba(169,167,155,.35); background:var(--surface); color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer }
.cta-banner { background:linear-gradient(135deg,rgba(23,139,68,.12),rgba(68,44,26,.12)); border:1px solid var(--ring); border-radius:18px; padding:18px; display:flex; align-items:center; justify-content:space-between }
.cta-banner h3 { margin:0 }
.cta-actions { display:flex; gap:10px }
/* Quote banner */
.quote-banner { background:linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff; border-radius:18px; padding:24px; display:flex; align-items:center; gap:16px; box-shadow:0 12px 34px rgba(23,139,68,.25) }
.quote-banner i { font-size:28px; opacity:.9 }
.quote-banner .content { font-size:20px; line-height:1.4; font-style:italic; flex:1 }
.quote-banner .author { font-weight:600; opacity:.9 }
footer { border-top:1px solid rgba(169,167,155,.2); padding:26px 0; color:var(--muted) }
.foot { display:flex; align-items:center; justify-content:space-between }
.socials { display:flex; gap:12px }
.socials a { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(169,167,155,.35) }
.socials a:hover { border-color:var(--primary); color:var(--primary) }
.in-view { animation:fadeUp .6s ease both }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@media (max-width:940px) {
  .hero .container { grid-template-columns:1fr; min-height:auto; padding-top:18px }
  .hero-visual { display:none }
  .grid-3 { grid-template-columns:1fr 1fr }
  .grid-2 { grid-template-columns:1fr 1fr }
  .about { grid-template-columns:1fr }
  .testimonial { flex-direction:column }
}
@media (max-width:640px) {
  .menu-btn { display:grid; place-items:center }
  nav ul { position:fixed; top:64px; right:20px; left:20px; flex-direction:column; background:var(--surface); border:1px solid rgba(169,167,155,.25); border-radius:16px; padding:14px; transform:translateY(-20px); opacity:0; pointer-events:none }
  nav ul.open { transform:translateY(0); opacity:1; pointer-events:auto }
  .grid-3 { grid-template-columns:1fr }
  .grid-2 { grid-template-columns:1fr }
  .cta-banner { flex-direction:column; gap:14px; text-align:center }
}