/* ===== Paleta inspirada en la carta ===== */
:root{
  /* Marca / Verdes */
  --brand-50:#eef5f0;
  --brand-100:#dbe9df;
  --brand-200:#b7d3bf;
  --brand-300:#94bea0;
  --brand-400:#70a881;
  --brand-500:#4c9263;
  --brand-600:#3e7952;
  --brand-700:#2f6b4f; /* verde principal */
  --brand-800:#255241;
  --brand-900:#1b3a31; /* verde muy oscuro (footer) */

  /* Acento cálido (dorado suave) para detalles */
  --accent:#d4a373;
  --accent-hover:#c18d5f;

  /* Superficies y texto */
  --bg:#f7f3e9;     /* crema claro (fondo página) */
  --surface:#ffffff;/* tarjetas / header */
  --border:#e5e0d6;
  --text:#1f1f1f;
  --muted:#6b6b6b;

  /* Acciones */
  --primary:var(--brand-700);
  --primary-hover:#265744;
  --link:var(--brand-700);
}

/* ===== Reset/base ===== */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
small{opacity:.85}
.container{max-width:1100px;margin:0 auto;padding:1rem}

/* ===== Header / Nav ===== */
header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem}
.logo{font-weight:700;color:var(--brand-800)}
.menu{display:flex;gap:.5rem;flex-wrap:wrap}
.menu a{
  padding:.45rem .7rem;border-radius:.6rem;
  color:var(--brand-800);border:1px solid transparent
}
.menu a:hover{background:var(--brand-50);border-color:var(--brand-100)}
.menu a.active{
  background:var(--primary);color:#fff;border-color:var(--primary)
}

/* ===== Hero ===== */
.hero{
  min-height:55vh;display:grid;place-items:center;text-align:center;padding:2.5rem;
  background:url('/images/hero-background.jpg') center/cover no-repeat;border-radius:1rem;margin:1rem 0;
  position:relative;overflow:hidden
}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.35))}
.hero>*{position:relative}
.hero h1{font-size:clamp(2rem,4vw,3rem);margin:0;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.hero p{color:#fff;font-size:1.1rem;text-shadow:0 2px 6px rgba(0,0,0,.45)}

/* ===== Botones ===== */
.buttons{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}
.btn{
  display:inline-block;padding:.65rem 1rem;border-radius:.6rem;
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:.15s ease
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* ===== Tarjetas / Grids ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:1rem;overflow:hidden
}
.card img{width:100%;height:170px;object-fit:cover}
.card .p{padding:1rem}

/* Títulos de sección con raya decorativa dorada */
h2{
  display:flex;align-items:center;gap:.6rem;margin-top:1.8rem
}
h2::after{
  content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--accent),#0000);
  border-radius:2px
}

/* ===== Footer ===== */
footer{margin-top:2rem;background:var(--brand-900);color:#fff}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:1rem}
.footer-inner a{color:#fff}