:root{
  --bg:#F5F1E8;           /* Soft off-white background */
  --bg-soft:#e9e4d9;      /* Slightly darker off-white for cards/sections */
  --card:#ffffff;         /* White cards for contrast */
  --text:#2E4E1E;         /* Deep Bamboo green for main text */
  --text-dim:#5a7a4a;     /* Softer green for secondary text */
  --accent:#2E4E1E;       /* Primary accent (buttons, icons) */
  --accent-2:#8C6239;     /* Warm terracotta for hover/secondary accents */
  --warn:#8C6239;         /* Terracotta for highlights/warnings */
  --shadow: 0 10px 25px rgba(0,0,0,.15);
  --radius:14px;
  --max:1100px;
}

/* Reset-ish */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #f0ece3 0%, #ece7dd 50%, var(--bg) 100%);
  line-height:1.6;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-2) }

.container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 20px }

/* Header / Nav */
header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(46,78,30,.9), rgba(46,78,30,.6));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px;
}
.brand .logo{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:conic-gradient(from 220deg, #2E4E1E, #8C6239, #2E4E1E, #8C6239);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25);
  color:#F5F1E8; font-weight:900;
}
nav ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0 }
nav a{ font-weight:600; color:var(--text); opacity:.9 }
nav a:hover{ opacity:1; color:var(--accent-2) }

/* Language toggle */
.lang-toggle{
  display:flex; gap:8px; align-items:center; background:var(--card);
  padding:4px; border-radius:999px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);
}
.lang-toggle button{
  appearance:none; border:0; padding:8px 12px; border-radius:999px; color:var(--text);
  background:transparent; font-weight:700; letter-spacing:.3px; cursor:pointer;
}
.lang-toggle button[aria-pressed="true"]{
  background:var(--accent); color:#F5F1E8;
}

/* Hero */
.hero{
  padding:72px 0 36px;
}
.hero-inner{
  display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center;
}
h1{
  font-size:clamp(32px, 3.6vw, 52px);
  line-height:1.1; margin:0 0 14px;
  letter-spacing:.2px;
}
.tagline{ font-size:clamp(16px, 1.5vw, 18px); color:var(--text-dim); margin:0 0 18px }
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#F5F1E8; padding:12px 16px; border-radius:12px; font-weight:800; border:2px solid transparent; cursor:pointer
}
.btn:hover{
  background:var(--accent-2);
}
.btn.secondary{ background:transparent; color:var(--text); border-color:rgba(0,0,0,.14) }
.hero-card{
  background:linear-gradient(180deg, var(--card), #f0ece3);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.metrics{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px
}
.metric{
  background:var(--bg-soft);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px; padding:12px; text-align:center
}
.metric .num{ font-size:22px; font-weight:900; color:var(--warn) }

/* Sections */
section{ padding:40px 0 }
.section-title{
  font-size:26px; margin:0 0 12px
}
.section-sub{ margin:0 0 22px; color:var(--text-dim) }

.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px }
.grid-2{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px }

.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{ margin:0 0 8px; font-size:18px }
.card p{ margin:0; color:var(--text-dim) }

/* Gallery */
.gallery{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px
}
.gallery figure{
  margin:0; overflow:hidden; border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg, #f0ece3, #e9e4d9);
  height:400px; width: 400px; position:relative;
}
.gallery figcaption{
  position:absolute; inset:auto 8px 8px 8px;
  background:rgba(0,0,0,.35); padding:6px 10px; border-radius:8px; font-size:14px; color:#fff;
}

/* Contact */
.contact-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
form{
  display:grid; gap:10px;
  background:var(--card); padding:18px; border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow);
}
label{ font-weight:700; font-size:14px }
input, textarea, select{
  background:#f0ece3; color:var(--text);
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px; padding:10px; font:inherit
}
textarea{ min-height:120px; resize:vertical }
.note{ color:var(--text-dim); font-size:14px }

footer{
  padding:26px 0 40px; color:var(--text-dim);
  border-top:1px solid rgba(0,0,0,.06);
  background:linear-gradient(0deg, rgba(46,78,30,.5), transparent)
}

/* Language visibility */
.i18n{ display:inline }
body.lang-en .es{ display:none !important }
body.lang-es .en{ display:none !important }

/* Responsive */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr }
  .gallery{ grid-template-columns:1fr 1fr }
  .contact-wrap{ grid-template-columns:1fr }
}
@media (max-width: 560px){
  nav ul{ display:none }
  .grid-3,.grid-2,.gallery{ grid-template-columns:1fr }
}

/* Accessibility