/* =======================================================
   Petreos NPSH · style.css — Desktop + Mobile
   ======================================================= */

/* Paleta */
:root{
  --orange:#f15a24;
  --orange-700:#d44f20;
  --ink:#0e1726;
  --ink-2:#1a2332;
  --bg:#ffffff;
  --muted:#64748b;
  --border:#e5e7eb;
  --ok:#25D366;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink-2); background:var(--bg); line-height:1.56;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.section{padding:32px 0}
.mt16{margin-top:16px}

/* Header + Nav (compacto) */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border);
}
.site-header .nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;                          /* antes 16px */
  padding:6px 0;                     /* antes 12px */
}
.site-header .logo{
  display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800
}
.site-header .logo img{
  max-height:48px;                   /* antes 64px */
}
.site-header .links{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap
}
.site-header .links a{
  text-decoration:none;background:var(--orange);color:#fff;
  padding:6px 12px;                  /* antes 10px 16px */
  border-radius:10px;                /* antes 14px */
  font-weight:700;display:inline-block;font-size:14px; /* tamaño más discreto */
  transition:transform .08s ease, background .15s ease;
}
.site-header .links a:hover{background:var(--orange-700);transform:translateY(-1px)}
.site-header .links a.cta{background:var(--ink)}
.site-header .links a.cta:hover{background:#0b1220}

/* Tipografía */
h1{font-size:clamp(28px,3.4vw,44px);line-height:1.12;margin:0 0 10px 0;color:var(--ink)}
h2{font-size:clamp(22px,2.6vw,32px);margin:18px 0 8px}
h3{font-size:20px;margin:12px 0 6px}
p{margin:8px 0}
.note{color:var(--muted);font-size:14px}

/* Botones */
.btn,.button,button,.actions .primary{
  background:var(--orange);color:#fff;padding:12px 18px;border:none;border-radius:12px;
  text-decoration:none;cursor:pointer;font-weight:700;display:inline-block
}
.btn.secondary,.actions .secondary{background:var(--ink)}
.btn:hover,.button:hover,button:hover{filter:brightness(.95)}

/* HERO */
.hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:24px}
.hero-ill img{max-width:260px;margin:0 auto}
.badge{
  display:inline-block;background:#fff3e9;color:#d44f20;border:1px solid #ffd7c2;
  padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;margin-bottom:8px
}

/* Cards (productos) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card img{aspect-ratio:16/9;object-fit:cover}
.card .body{padding:12px}

/* Footer */
.footer{background:var(--ink);color:#e6e8ec;padding:28px 0;margin-top:24px}
.footer a{color:#e6e8ec}
.footer h3,.footer h4{margin:0 0 6px}
.footer .container{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.legal{background:#111;color:#eee;font-size:13px;text-align:center;padding:12px 0}

/* WhatsApp flotante */
.whatsapp{
  position:fixed;right:16px;bottom:16px;z-index:60;
  background:var(--ok);color:#fff;border-radius:28px;
  display:flex;align-items:center;gap:8px;padding:10px 14px;text-decoration:none;font-weight:700;
  box-shadow:0 6px 18px rgba(37,211,102,.35);
}
.whatsapp svg{width:18px;height:18px}

/* =======================
   Móviles (<= 768px)
   ======================= */
@media (max-width:768px){
  .site-header .nav{flex-direction:column;align-items:center;text-align:center}
  .site-header .logo img{max-height:60px;margin:0 auto 6px}   /* antes 72px */
  .site-header .links{flex-direction:column;width:100%;gap:8px}
  .site-header .links a{
    width:180px;                  /* antes 210px */
    text-align:center;
    font-size:13px;               /* más compacto */
    padding:6px 10px;             /* antes 8px 12px */
    border-radius:10px;           /* antes 12px */
  }

  .hero{grid-template-columns:1fr;text-align:center}
  .hero-ill img{max-width:180px}

  .cards{grid-template-columns:1fr 1fr}
  .footer .container{grid-template-columns:1fr;text-align:center}
}

/* Teléfonos pequeños */
@media (max-width:420px){
  .cards{grid-template-columns:1fr}
  .site-header .links a{width:100%;max-width:280px}
}

/* ====== Estilo PRO formulario de cotización ====== */
.form-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
}
.form-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px;
}
.form-head h1{margin:0}
.form-sub{color:var(--muted);font-size:14px;margin:0}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;color:var(--ink)}
.field small{color:var(--muted);font-size:12px}

input[type="text"], input[type="email"], input[type="number"], input[type="date"],
select, textarea{
  width:100%;
  background:#fff;
  border:1px solid #d9dde3;
  border-radius:12px;
  padding:12px 14px;
  font-size:16px;
  transition:border .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:#ffb893;
  box-shadow:0 0 0 3px #ffe6da;
}
textarea{min-height:120px;resize:vertical}

.form-actions{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px
}
.form-actions .primary{background:var(--orange)}
.form-actions .secondary{background:var(--ink)}
.form-actions .ghost{
  background:#fff;color:var(--ink);border:1px solid var(--border)
}

.badge-soft{
  display:inline-block;background:#fff3e9;color:#d44f20;border:1px solid #ffd7c2;
  padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px
}

@media (max-width:768px){
  .form-card{padding:16px}
  .form-actions a, .form-actions button{width:100%;text-align:center}
}

/* ===== Galería Masonry rápida y cool ===== */
.gallery{
  column-count: 3;              /* nº de columnas en desktop */
  column-gap: 16px;
  widows: 1; orphans: 1;
  /* Render más ágil */
  content-visibility: auto;
}

.g{ 
  display: inline-block; 
  width: 100%; 
  margin: 0 0 16px; 
  break-inside: avoid;          /* evita cortes feos entre columnas */
}

.g img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  background: #eaeff4;          /* color de fondo mientras carga */
  box-shadow: 0 3px 14px rgba(0,0,0,.15);
  transform: translateZ(0);
  /* Blur-up: se quita cuando carga */
  filter: blur(6px);
  opacity: .85;
  transition: filter .5s ease, opacity .5s ease, transform .2s ease;
  /* Mejora first paint (tamaño intrínseco si aún no se conoce) */
  contain-intrinsic-size: 300px 200px;
}

/* al terminar de cargar */
.g img.is-loaded{
  filter: blur(0);
  opacity: 1;
}

/* Hover sutil */
.g img:hover{
  transform: scale(1.02);
}

/* Lightbox (sin JS, con :target) */
.lb-backdrop{
  position: fixed; inset: 0;
  background: rgba(9,14,22,.85);
  display: none;
  z-index: 1000;
}
.lb-backdrop:target{ display: grid; place-items: center; }
.lb-img{
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}
.lb-close{
  position: fixed; top: 16px; right: 20px;
  color: #fff; text-decoration: none; font-weight: 800;
  background: rgba(255,255,255,.12); padding: 8px 12px; border-radius: 10px;
}

/* Responsivo */
@media (max-width: 1024px){
  .gallery{ column-count: 2; }
}
@media (max-width: 640px){
  .gallery{ column-count: 1; }
}