/*
Theme Name: SVIL Catálogo - Hidrogas Pinto
Theme URI: https://hidrogaspinto.com/
Author: ChatGPT
Description: Tema de catálogo sin compras, diseñado para Hidrogas Pinto. Hero con imagen, tarjetas con sombra, colores corporativos (azul + naranja).
Version: 1.1.0
Text Domain: svil-catalog-hidrogas
*/
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --text:#111827;
  --muted:#616b7c;
  --primary:#0f3559;     /* azul corporativo */
  --accent:#e44a25;      /* naranja corporativo */
  --border:#e6e8ee;
  --radius:16px;
  --shadow:0 6px 24px rgba(17,24,39,.08);
}

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

a{color:var(--primary); text-decoration:none}
a:hover{opacity:.9}

.container{max-width:1200px; margin:0 auto; padding:0 20px}

.site-header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85); backdrop-filter: blur(6px); border-bottom:1px solid var(--border)}
.header-top{display:flex; gap:16px; align-items:center; padding:12px 0}
.brand{display:flex; gap:12px; align-items:center; font-weight:800; letter-spacing:.2px; color:var(--primary)}
.brand .logo{width:42px; height:42px; border-radius:12px; background:var(--primary)}

.searchbar{flex:1; display:flex; max-width:640px}
.searchbar input{flex:1; padding:12px 14px; border:1px solid var(--border); border-right:none; border-radius:12px 0 0 12px; outline:none; background:#fff}
.searchbar button{padding:12px 16px; border:1px solid var(--border); background:var(--accent); color:#fff; border-radius:0 12px 12px 0; cursor:pointer; font-weight:600}

.nav{display:flex; gap:14px; padding:8px 0; overflow:auto}
.nav a{padding:8px 12px; border-radius:10px}
.nav a:hover{background:rgba(228,74,37,.08)}

.hero{
  position:relative;
  border-bottom:1px solid var(--border);
  background: linear-gradient(0deg, rgba(15,53,89,.65), rgba(15,53,89,.65)), url('./assets/img/hero.jpg') center/cover no-repeat;
  color:#fff;
}
.hero-inner{padding:64px 0}
.hero h1{margin:0 0 8px; font-size:42px; line-height:1.1}
.hero p{margin:0; opacity:.95}
.hero .btns{margin-top:16px}

.btn{display:inline-block; padding:12px 16px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--primary); font-weight:600; box-shadow:var(--shadow)}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}

.section-title{margin:28px 0 8px; font-size:22px}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:18px; margin:18px 0}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease}
.card:hover{transform:translateY(-2px)}
.thumb{aspect-ratio:4/3; background:#f8fafc; display:flex; align-items:center; justify-content:center}
.thumb img{max-width:100%; max-height:100%; object-fit:contain}
.content{padding:14px}
.title{font-weight:800; color:var(--primary);}
.badge{display:inline-block; font-size:.75rem; padding:5px 10px; border-radius:999px; background:#eef5ff; color:var(--primary); margin-top:6px}

.meta{color:var(--muted); font-size:.92rem}
.footer-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin:18px 0}
.footer-kpis .kpi{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:14px}

.site-footer{background:#0a1422; color:#dbe7ff; margin-top:40px; padding:26px 0; border-top:1px solid #0f1f36}
.site-footer a{color:#dbe7ff}

@media(max-width:768px){
  .hero-inner{padding:48px 0}
  .searchbar{max-width:100%}
}