:root {
  --verde: #2E5D50;
  --arena: #EDE5D4;
  --dorado: #C8A85D;
  --gris: #4B4B4B;
  --blanco: #FFFFFF;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--gris);
  background: var(--arena);
}

a { color: var(--verde); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1100px, 92%); margin: 0 auto; }

.navbar {
  background: var(--blanco);
  border-bottom: 1px solid #e6e1d6;
  position: sticky; top: 0; z-index: 100;
}
.navbar-inner { display:flex; align-items:center; gap: 18px; padding: 12px 0; }
.navbar .brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.4px; color: var(--verde);}
.navbar nav { margin-left: auto; display:flex; gap:16px; }
.navbar .cta { background: var(--verde); color: white; padding: 8px 14px; border-radius: 10px; }
.navbar .cta:hover { background: #244a40; }

.hero {
  background: radial-gradient(1200px 500px at 10% -10%, #ffffff 0%, var(--arena) 60%), url('/assets/img/hero-texture.svg');
  padding: 56px 0 40px;
}
.hero h1 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-size: clamp(32px, 4.6vw, 56px); margin: 0; line-height: 1.05; color: var(--verde);}
.hero p { font-size: 18px; max-width: 760px; }
.hero .actions { display:flex; gap:12px; margin-top: 18px; }
.button {
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--verde); color: var(--blanco); background: var(--verde); font-weight:600;
}
.button.alt { background: var(--blanco); color: var(--verde); }
.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  background: var(--blanco);
  padding: 18px; border-radius: var(--radius); border: 1px solid #e6e1d6;
}
.card h3 { margin: 6px 0 6px; color: var(--verde);}
.badge { display:inline-flex; gap:6px; align-items:center; font-size: 12px; padding: 4px 8px; border-radius: 999px; border:1px solid #e6e1d6; background: #fff; }

.section { padding: 36px 0; }
.section h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--verde); margin: 0 0 10px; font-size: 30px; }
.kpi { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi .box { background: var(--blanco); border:1px solid #e6e1d6; border-radius: var(--radius); padding: 18px; text-align:center; }
.kpi .box .num { font-size: 28px; font-weight: 800; color: var(--verde);}

input, select, textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border:1px solid #ded8cc; background: #fff; }
label { font-size: 14px; font-weight: 600; color: #3d3d3d; }
.form { display:grid; gap: 12px; max-width: 520px; }
.form .row { display:grid; gap: 8px; }

.alert { padding: 10px 12px; border-radius: 12px; margin: 10px 0; }
.alert.success { background: #e7f5ef; color: #0f5132; border: 1px solid #badbcc; }
.alert.error { background: #fdecea; color: #511111; border: 1px solid #f5c2c7; }

.footer { padding: 26px 0 40px; color: #6b6b6b; }
.footer a { color: #6b6b6b; }
.footer .cols { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.small { font-size: 12px; color: #7a7a7a; }

.table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
.table th { background: #faf7f0; color: var(--verde); font-weight: 700; }

.chatbox { background:#fff; border:1px solid #e6e1d6; border-radius: var(--radius); padding: 16px; }
.chat-messages { height: 300px; overflow: auto; border:1px solid #eee; border-radius: 10px; padding: 10px; background: #fcfbf7; }
.chat-input { display:flex; gap: 8px; margin-top: 8px; }
.chat-input textarea { flex: 1; min-height: 60px; }