*{box-sizing:border-box}
:root{
  --bg:#0b1020;
  --card:#0f1730;
  --stroke:#1d2a4a;
  --text:#e7eefc;
  --sub:#a9b9d8;
  --primary:#2563eb; /* azul confiable */
  --primary-2:#1d4ed8;
  --accent:#10b981;  /* verde suave para éxito */
}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Header con logo a la derecha */
.header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 120px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(29,78,216,0.28), rgba(29,78,216,0)) , rgba(5,10,25,0.9);backdrop-filter:blur(6px)}
.brand-title{font-weight:800;font-size:20px;color:#fff}
.nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.nav a{background:transparent;border:1px solid var(--stroke);padding:8px 12px;border-radius:999px;color:var(--text)}
.nav a.active,.nav a:hover{background:rgba(37,99,235,0.18);border-color:var(--primary)}
.logo-right{display:flex;justify-content:flex-end}
.logo-right img{height:42px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}

/* Layout */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.input, select, textarea{background:var(--card);border:1px solid var(--stroke);color:var(--text);padding:10px 12px;border-radius:12px}
.btn{background:var(--primary);border:none;color:white;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--primary-2)}
.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--stroke)}
.btn.secondary:hover{border-color:var(--primary)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.card .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0a1226}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.card:hover img{transform:scale(1.03)}
.badge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.5);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,.25)}
.card .body{padding:12px;display:flex;flex-direction:column;gap:8px}
.price{font-weight:800}
.wabtn{display:inline-flex;align-items:center;gap:8px}
.wabtn svg{width:18px;height:18px}

.footer{padding:24px 16px;color:var(--sub);text-align:center;border-top:1px solid var(--stroke);margin-top:24px}
.gallery{display:flex;gap:6px;overflow:auto;padding:6px;background:#0a1226}
.gallery img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--stroke)}

.contact-card{max-width:700px;margin:0 auto;background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:16px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.label{font-size:12px;color:var(--sub);margin-bottom:4px}
.alert{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.4);color:#d1fae5;padding:8px 12px;border-radius:12px}


/* ===== Mobile enhancements ===== */
@media (max-width: 640px){
  .header{grid-template-columns: 1fr 48px; grid-auto-rows: auto; grid-row-gap: 8px}
  .brand{grid-column: 1 / span 1}
  .nav{grid-column: 1 / span 2; justify-content:flex-start; overflow:auto; padding-bottom: 4px}
  .nav a{white-space:nowrap}
  .logo-right{grid-column: 2 / span 1; justify-content:flex-end}
  .filters{flex-direction:column}
  .grid{grid-template-columns: 1fr}
  .btn, .input, select, textarea{font-size:16px} /* avoids iOS zoom */
  .card .body{gap:10px}
}