/* =========================
   Tinta y Vinilo – styles.css
   ========================= */

/* ---- Variables ---- */
:root{
  --green-700:#2e7d32;
  --green-600:#3c8a40;
  --green-100:#eaf4eb;
  --ink:#222;
  --muted:#6b7280;
  --bg:#f7f7f7;
  --white:#fff;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.08);
  --max:1100px;
}

/* ---- Reset / Base ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}

/* ---- Helpers ---- */
.container{max-width:var(--max); margin:0 auto; padding:0 16px}
.muted{color:var(--muted)}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none; text-align:center; cursor:pointer; border:none}
.btn--primary{background:var(--green-700); color:#fff}
.btn--primary:hover{background:var(--green-600)}
.btn--ghost{border:2px solid var(--green-700); color:var(--green-700); background:transparent}
.btn--ghost:hover{background:var(--green-100)}
.logo-img{width:44px; height:44px; object-fit:cover; border-radius:8px}

/* =========================
   Header / Nav
   ========================= */
.site-header{position:sticky; top:0; z-index:20; background:var(--white); border-bottom:1px solid #eee}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:14px}
.brand-title{font-weight:800; color:var(--green-700); letter-spacing:.2px}
.nav__menu{display:flex; align-items:center; gap:18px}
.nav__menu a{color:var(--ink); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px}
.nav__menu a:hover, .nav__menu a.active{background:var(--green-100); color:var(--green-700)}
.nav__social{display:flex; gap:10px; margin-left:6px}
.nav__social img{width:22px; height:22px; border-radius:5px; object-fit:cover}
.nav__toggle{display:none; border:1px solid #ddd; background:var(--white); border-radius:10px; padding:6px 10px; font-size:18px}

/* =========================
   Home / Hero (por si lo usas)
   ========================= */
.hero{background:linear-gradient(180deg, #fff, var(--bg)); padding:48px 0}
.hero__inner{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center}
.hero__copy h1{font-size:clamp(28px,5vw,42px); line-height:1.1; margin:0 0 10px; color:var(--green-700); font-weight:800}
.hero__copy p{color:var(--muted); font-size:18px; margin:0 0 16px}
.hero__cta{display:flex; gap:12px; margin:14px 0 8px}
.hero__badges{display:flex; gap:12px; list-style:none; padding:0; margin:16px 0 0}
.hero__badges li{background:var(--green-100); color:var(--green-700); border-radius:999px; padding:6px 12px; font-weight:600; font-size:14px}
.hero__image img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow); object-fit:cover}

/* =========================
   Servicios (Home)
   ========================= */
.services{padding:36px 0 14px}
.services h2{font-size:30px; text-align:center; color:var(--green-700); margin:0 0 18px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px}
.card img{width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:10px}
.card h3{margin:6px 0 6px; color:var(--green-700)}
.card p{color:var(--muted); margin:0}

/* =========================
   Galería (Home)
   ========================= */
.gallery{padding:28px 0 10px}
.gallery h2{font-size:28px; text-align:center; color:var(--green-700); margin:0 0 6px}
.gallery .muted{color:var(--muted); text-align:center; margin:0 0 16px}
.masonry{columns:3; column-gap:12px}
.masonry img{width:100%; margin:0 0 12px; border-radius:10px; box-shadow:var(--shadow); break-inside:avoid}
/* Si quieres igualar alturas, descomenta:
.masonry img{max-height:240px; object-fit:cover}
*/

/* =========================
   Catálogo / Productos
   ========================= */
.catalogo{max-width:var(--max); margin:24px auto 40px; padding:0 16px}
.catalogo h2{font-size:28px; color:var(--green-700); text-align:center; margin:6px 0 18px}
.productos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.producto{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:16px; display:flex; flex-direction:column; align-items:stretch;
}
.producto img{width:100%; height:220px; object-fit:cover; border-radius:10px; margin-bottom:12px}
.producto h3{font-weight:800; font-size:1.15rem; margin:0 0 6px; color:var(--green-700)}
.producto p{margin:0 0 8px}
.producto label{width:100%; font-weight:700; color:var(--green-700); margin-top:8px; font-size:.95rem}
.producto select,
.producto input[type="number"],
.producto input[type="text"],
.producto input[type="file"]{
  width:100%; padding:10px 12px; margin-top:6px; border:2px solid #e5e7eb; border-radius:10px; font-size:1rem; color:var(--ink);
}
.producto select:focus,
.producto input:focus,
.pedido input:focus, .pedido textarea:focus,
.contact-card input:focus, .contact-card textarea:focus{
  outline:none; border-color:var(--green-700); box-shadow:0 0 0 3px rgba(46,125,50,.12)
}
.btn-agregar{margin-top:12px} /* usa .btn + .btn--primary */

/* ---- Pedido (lista + formulario) ---- */
.pedido{
  max-width:760px; margin:22px auto; background:var(--white);
  padding:18px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.pedido h2{text-align:center; font-weight:800; font-size:1.6rem; color:var(--green-700); margin:0 0 12px}
#lista-pedido{max-height:260px; overflow-y:auto; border-left:5px solid var(--green-100); padding-left:12px; margin:10px 0; font-weight:600; color:#444; list-style:none}
#lista-pedido li{margin-bottom:10px}
.pedido label{display:block; font-weight:700; margin:12px 0 6px; color:var(--green-700)}
.pedido input, .pedido textarea{
  width:100%; padding:12px 14px; border:2px solid #e5e7eb; border-radius:12px; font-size:1rem; color:var(--ink);
}
.pedido textarea{min-height:90px}

/* ---- Caja de banco ---- */
.bank-box{
  margin-top:12px; background:#f2fbf4; border:2px dashed #7fc38a; border-radius:12px; padding:12px 14px;
}
.bank-box p{margin:6px 0}

/* =========================
   Footer
   ========================= */
.site-footer{background:var(--white); border-top:1px solid #eee; margin-top:18px}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px}
.footer__social{display:flex; gap:10px}
.footer__social img{width:22px; height:22px; border-radius:5px; object-fit:cover}

/* =========================
   Contacto
   ========================= */
.contacto h1{font-size:32px; color:var(--green-700); margin:18px 0 6px; text-align:center}
.contacto .muted{color:var(--muted); text-align:center; margin:0 0 18px}
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px; margin:18px 0 36px}
.contact-card, .contact-info{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.contact-card h2, .contact-info h2{margin:0 0 10px; color:var(--green-700)}
.contact-card label{display:block; font-weight:700; color:var(--green-700); margin:12px 0 6px}
.contact-card input, .contact-card textarea{
  width:100%; padding:12px 14px; border:2px solid #e5e7eb; border-radius:12px; font:inherit;
}
.contact-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.contact-list{list-style:none; padding:0; margin:0; color:var(--ink)}
.contact-list li{margin:8px 0}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .cards{grid-template-columns:1fr 1fr}
  .productos{grid-template-columns:1fr}
  .nav__toggle{display:block}
  .nav__menu{
    position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid #eee;
    padding:10px 16px; display:none; flex-direction:column; gap:10px
  }
  .nav__menu.open{display:flex}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
  .masonry{columns:1}
}
/* Parche de consistencia en cards problemáticas */
.producto img{
  height:220px;          /* igual que antes */
  width:100%;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
  display:block;
}
.producto label{ display:block; } /* evita que inputs floten raro */