:root{
  --brand:#3a7d2e; --brand-2:#688b2a; --ink:#142; --bg:#fff; --muted:#f3f6f2;
}
*{box-sizing:border-box} html,body{margin:0}
body{font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#222;background:#fff}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto;display:block}

.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 16px;background:#fff;border-bottom:1px solid #eee}
.brand img{height:75px}
.nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.nav a{padding:8px 6px}
.nav .btn{background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px}
.nav .active{font-weight:700}
.nav-toggle{display:none;background:transparent;border:0;margin-left:auto}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:24px 16px}
.hero-media{border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.hero-text h1{margin:0 0 8px;font-size:clamp(22px,4vw,36px);color:var(--ink)}
.cta-row{display:flex;gap:12px;margin-top:12px}
.btn{display:inline-block;border:1px solid #ddd;padding:8px 12px;border-radius:8px}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.wapp{background:#25d366;color:#fff;border-color:#25d366}

.band{background:var(--muted);padding:16px}
.band-wrap{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-weight:700;color:var(--brand-2);letter-spacing:.5px}

.grid{padding:32px 16px}
.grid h2{text-align:center;margin:0 0 20px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.08);transition:transform .2s}
.card:hover{transform:translateY(-4px)}
.center{text-align:center;margin-top:16px}

.cta-wide{margin:32px 0;background:linear-gradient(135deg,var(--brand),#2f5e24);color:#fff;padding:28px 16px;text-align:center;border-radius:16px}
.cta-wide .btn{margin-top:8px;border-color:#fff}

.footer{background:#0f1a0f;color:#cfe0cf;padding:24px 16px}
.footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-bottom:12px}
.footer a{color:#cfe0cf}
.footer .logo-small{height:48px;filter:brightness(1.2)}
.copy{text-align:center;color:#a9c2a9}
.page{padding:24px 16px;max-width:1100px;margin:auto}
.service-list article{padding:12px 0;border-bottom:1px solid #efefef}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.contact-form label{display:block;margin-bottom:10px}
input,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px}
button.btn{cursor:pointer}

.masonry{columns:3 280px;column-gap:12px}
.masonry img{width:100%;margin:0 0 12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.08)}

@media (max-width:920px){
  .hero{grid-template-columns:1fr;gap:16px}
  .footer .cols{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none;position:absolute;right:12px;top:64px;background:#fff;border:1px solid #eee;border-radius:10px;padding:10px;flex-direction:column;min-width:200px}
  .nav-toggle{display:inline-grid;place-items:center}
}

/* Botón flotante WhatsApp */
.fab{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  z-index:9999; /* sobre cualquier overlay */
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  transition:transform .15s
}
.fab-wa{background:#25d366}
.fab svg{width:32px;height:32px;fill:#fff}
.fab:hover{transform:translateY(-2px)}
@media (max-width:760px){
  .fab{width:56px;height:56px}
}
/* Botones Instagram y facebook en index */
.cta-row { display:flex; flex-wrap:wrap; gap:.5rem; }
.btn.icon { display:flex; align-items:center; gap:.5rem; }
.btn.icon svg { width:18px; height:18px; }
/* Botón Instagram en contacto */
.btn.ig{background:#E4405F; color:#fff; border-color:#E4405F; display:inline-flex; gap:8px; align-items:center}
.btn.ig svg{width:18px;height:18px; fill:#fff}
.contact-links li{list-style:none;margin:0}


@media (max-width: 760px){
  :root{ --gap:8px; }
  .cta-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
  .btn{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:12px 14px; min-height:44px; font-size:16px; line-height:1; }
  .btn.icon svg{ width:20px; height:20px; flex:0 0 20px; }
}

/* Encabezado y hero */
.hero{ padding: 16px 0 8px; }
.hero-text h1{ font-size: clamp(20px, 6vw, 28px); margin: 0 0 8px; }
.hero-text p{ font-size: 14px; margin: 0 0 12px; }

/* Cards de trabajos */
.grid .cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.grid .card img{ width:100%; height:auto; display:block; border-radius:8px; }

/* Banda scroller */
.band{ font-size: 12px; }
.band-wrap{ gap:12px; }

/* Botón flotante WA: separalo del borde */
.fab.fab-wa{ bottom: 16px; right: 16px; }

/* Muy chico (≤360px): 1 columna en CTA y cards */
@media (max-width: 360px){
  .cta-row{ grid-template-columns: 1fr; }
  .grid .cards{ grid-template-columns: 1fr; }
}

/* Tablet chica (≥600px): 3 columnas en CTA si entra */
@media (min-width: 600px){
  .cta-row{ grid-template-columns: repeat(3, 1fr); }
}

/* Opcional: versión compacta solo icono para botones secundarios */
@media (max-width: 400px){
  .btn.icon span{ display:none; }
  .btn.icon{ padding: 12px; }
}

/* Footer mobile-first */
.footer{
  background:#0f1a0f; color:#cfe0cf; padding:20px 16px;
}
.footer .cols{
  display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:12px;
}
.footer h4{ margin:0 0 8px; font-size:16px; color:#e7f3e7 }
.footer ul{ margin:0; padding:0; list-style:none }
.footer li{ margin:6px 0 }
.footer a{ color:#cfe0cf }
.footer .logo-small{ height:40px; filter:brightness(1.2) }
.footer .social{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;
}
.footer .social a{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border:1px solid rgba(255,255,255,.2); border-radius:10px;
}
.footer .social svg{ width:18px; height:18px; fill:#cfe0cf }
.copy{ text-align:center; color:#a9c2a9; font-size:13px; }

/* Tablet: 2 columnas */
@media (min-width: 600px){
  .footer .cols{ grid-template-columns:1fr 1fr }
}
/* Desktop: 3 columnas como tenías */
@media (min-width: 920px){
  .footer .cols{ grid-template-columns:1.2fr 1fr 1fr }
}

/* Materiales: miniaturas pequeñas */
.material-list article{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap:12px;
  align-items:start;
  margin:12px 0;
}
.material-list article img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:8px;
  background:#eee;
}
.material-list h2{ margin:0 0 4px; font-size:18px; }
.material-list p{ margin:0; font-size:14px; color:#333; }

/* Más chico en mobile */
@media (max-width:600px){
  .material-list article{ grid-template-columns:72px 1fr; }
  .material-list article img{ width:64px; height:64px; }
}

/* Si querés aún más chicas, aplicá .xs al contenedor */
.material-list.xs article{ grid-template-columns:64px 1fr; }
.material-list.xs article img{ width:56px; height:56px; }

/* Masonry: que todo item respete el ancho de la columna */
.masonry > *{
  display:block;
  width:100%;
  max-width:100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin:0 0 12px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Imágenes y videos fluidos */
.masonry img,
.masonry video{
  width:100%;
  height:auto;
}

/* Safari a veces necesita fondo para video */
.masonry video{ background:#000; }

/* Mobile: una columna para evitar overflow */
@media (max-width: 600px){
  .masonry{ columns:1 280px; column-gap:12px; }
}