/* ===== Layout y colores base ===== */
:root{
  --bg:#e9f8ff;
  --header:#ffe0f4;
  --nav:#b400ff;
  --nav-hover:#8b00cc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}
*{box-sizing:border-box;font-family:Arial, Helvetica, sans-serif;}
body{margin:0;background:var(--bg);color:var(--text)}
a{color:inherit}
.header{background:var(--header);text-align:center;padding:28px 12px 16px;}
.header h1{margin:0;font-size:38px;color:#3c0071}
.header p{margin:8px 0 0;color:var(--muted)}
.nav{background:var(--nav);display:flex;justify-content:center;gap:18px;flex-wrap:wrap;}
.nav a{color:#fff;text-decoration:none;padding:12px 14px;display:inline-block;border-radius:4px;}
.nav a:hover{background:var(--nav-hover)}
.nav a.active{background:var(--nav-hover)}
.container{max-width:980px;margin:22px auto;padding:0 18px}
.card{background:var(--card);box-shadow:var(--shadow);border-radius:10px;
      padding:22px;margin:18px auto; text-align:center;}
.left{text-align:left}
.product-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.product-card{width:320px;background:#fff;border-radius:12px;padding:15px;box-shadow:var(--shadow);
             display:flex;flex-direction:column;gap:12px;transition:transform .2s ease-in-out;}
.product-card:hover{transform:scale(1.02)}
.product-img{width:100%;border-radius:10px;object-fit:cover;background:#f2f2f2;height:200px}
.product-info h3{margin:0;font-size:18px;color:#2c5e3a}
.product-info p{margin:6px 0 12px;color:#555}
.btn{display:inline-block;background:#2c5e3a;color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none}
.news-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.news-card{width:480px;background:#fff;border-radius:12px;box-shadow:var(--shadow);
          padding:18px; display:flex; flex-direction:column; gap:10px;}
.news-meta{color:#64748b;font-size:.9rem}