/* =============
   Base & Reset
===============*/
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f7f4;
  --surface:#ffffff;
  --brand:#2f6e47;
  --brand-2:#a4d4b4;
  --text:#263238;
  --muted:#7a8a7b;
  --ring:#cfe8d5;
  --shadow:0 8px 24px rgba(25, 35, 28, 0.08);
  --radius:16px;
}

html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* =============
   Header / Navbar
===============*/
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(1.2) blur(6px);
  background: color-mix(in oklab, var(--bg) 75%, white);
  border-bottom:1px solid var(--ring);
}
.header-inner{
  max-width:1100px;margin:0 auto;padding:16px 16px;
  display:flex;align-items:center;gap:16px;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand h1{font-size:1.4rem;color:var(--brand);font-weight:800;letter-spacing:0.2px}
.badge{font-size:1rem}
.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav a{
  text-decoration:none;color:var(--brand);font-weight:700;
  padding:8px 12px;border-radius:10px;border:1px solid transparent
}
.nav a:hover{background:var(--ring)}
.nav a.active{background:var(--brand);color:#fff}

/* =============
   Layout
===============*/
.container{max-width:1100px;margin:0 auto;padding:22px 16px}
.section-title{font-size:1.4rem;color:var(--brand);margin:8px 0 14px}
.subtitle{color:var(--muted);margin-top:-4px}

/* Search */
.searchbar{margin:6px 0 18px;display:flex;gap:10px}
.searchbar input{
  width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--ring);outline:none;background:#fff
}
.searchbar input:focus{border-color:var(--brand)}

/* ===== Cards (SIMÉTRICAS) ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); /* más consistente en desktop */
  gap:20px;
  align-items:stretch; /* fuerza alturas iguales en la grid */
}
.card{
  background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);
  overflow:hidden;border:1px solid #eef5ef;
  display:flex;flex-direction:column; /* clave para igualar alturas */
  min-height:340px;                 /* altura mínima uniforme */
  transition:transform .24s ease, box-shadow .24s ease;
}
.card:hover{transform:translateY(-4px)}
/* Imagen con altura fija y recorte proporcional */
.card .thumb{
  width:100%;height:200px;object-fit:cover;display:block; /* altura fija */
}
.card .body{
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;flex:1; /* rellena lo restante */
}
/* Título con 2 líneas máx para evitar saltos */
.card h3{
  font-size:1.05rem;color:var(--text);margin-bottom:2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card a.title{color:var(--brand);text-decoration:none;font-weight:700}
.meta{font-size:.9rem;color:var(--muted);margin-top:auto} /* empuja meta al fondo */

/* ===== Hero ===== */
.hero{
  border-radius:var(--radius);box-shadow:var(--shadow);
  background: linear-gradient(135deg, #dff1e4 0%, #f7fdf8 100%);
  border:1px solid var(--ring);padding:20px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.hero h2{color:var(--brand);font-size:1.8rem}
.hero p{color:var(--muted)}

/* ===== Breadcrumbs ===== */
.breadcrumbs{font-size:.92rem;margin-bottom:12px}
.breadcrumbs a{color:var(--brand);text-decoration:none}
.breadcrumbs .sep{color:#9aa79c;margin:0 6px}

/* ===== Footer ===== */
footer{margin-top:34px;background:#eef6ef;border-top:1px solid var(--ring)}
footer .container{padding:16px;color:var(--muted);text-align:center}

/* ===== Utilities ===== */
.no-results{display:none;text-align:center;padding:20px;background:#fff3cd;border-radius:12px;border:1px solid #ffe19b}
.no-results.show{display:block}

/* Images responsive */
img{max-width:100%;height:auto;display:block}

/* Branding */
.brand img.logo{height:40px;width:auto;display:inline-block;vertical-align:middle}
.brand h1{font-size:1.35rem;color:var(--brand);margin-left:8px;display:inline-block}

/* === Thumbnails grid (categorías, miniaturas SIMÉTRICAS) === */
.grid-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;align-items:stretch;
}
.card.thumb-card{
  border-radius:12px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;min-height:240px;
}
.card.thumb-card .thumb{
  height:150px;aspect-ratio:auto;object-fit:cover;
}
.card.thumb-card .body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.card.thumb-card h3{
  font-size:1rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card.thumb-card .meta{font-size:.85rem;margin-top:auto}

/* Responsive finos */
@media (max-width: 768px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .card{min-height:300px}
  .card .thumb{height:170px}
}
.receta-container {
  max-width: 800px;
  margin: auto;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

.receta-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.bloque h2 {
  color: #2b2b2b;
  margin-top: 2rem;
}