:root{
  --bg:#FAF7F3;--text:#1F1F1F;--head:#2B2B2B;--wood:#8A6B4F;--gold:#C9A86A;
  --ui1:#EAE7E2;--ui2:#CFCAC2;--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.08);
  --fontHead:'Poppins',sans-serif;--fontBody:'Manrope',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--fontBody);
  scroll-behavior:smooth;
  max-width:100%;
  overflow-x:hidden;  /* evita scroll lateral en celular */
}

img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:64px 0}
.section-alt{padding:64px 0;background:#fff}
.section-title{font-family:var(--fontHead);color:var(--head);font-size:clamp(26px,3vw,34px);margin-bottom:10px;position:relative;display:inline-block}
.section-title::after{content:"";position:absolute;left:0;bottom:-6px;width:56px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--gold),transparent)}
.section-lead{margin:18px 0 24px;color:#4a4a4a;max-width:640px}

/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(250,247,243,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ui1);
}
.header-inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.logo{
  font-family:var(--fontHead);
  letter-spacing:.5px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  font-size:20px;
}
.logo span{color:#2b2b2b}
.header-beige{
  background:#c9ad8b;
  border-radius:12px;
  padding:8px 14px;
  margin-top:6px;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  border-bottom:3px solid var(--gold);
}
.mega-nav{
  display:flex;
  align-items:center;
  gap:18px;
  width:100%;
}
.mega-nav .menu{
  display:flex;
  gap:18px;
  list-style:none;
  margin:0;
}
.mega-nav .menu > li > a,
.mega-nav .menu .menu-btn{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
  font-size:14px;
}
.mega-nav .menu > li > a:hover,
.mega-nav .menu .menu-btn:hover{
  background:rgba(255,255,255,.14);
}

/* SUBMENU */
.has-submenu{position:relative;}

.submenu{
  position:absolute;
  left:0;
  top:110%;
  display:none;
  background:#fff;
  color:var(--text);
  border:1px solid var(--ui1);
  border-radius:12px;
  padding:14px 24px;
  box-shadow:var(--shadow);
  min-width:520px;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu{
  display:flex;
  gap:48px; /* espacio entre columnas */
}

.submenu-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* bajamos la segunda columna para que alinee con Living/Dormitorio */
.submenu-col-right{
  margin-top:28px;
}

/* IMPORTANTES: estos fuerzan el color oscuro en el dropdown */
.mega-nav .submenu a{
  color:var(--text);
  padding:6px 8px;
  border-radius:8px;
  white-space:nowrap;
  text-decoration:none;
}
.mega-nav .submenu a:hover{
  background:var(--ui1);
}

/* BUTTONS */
.btn{border:none;background:var(--wood);color:#fff;padding:11px 16px;border-radius:12px;cursor:pointer;font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{filter:brightness(.95)}
.btn-outline{background:transparent;color:var(--head);border:1px solid var(--head)}
.btn-wa{background:#1F1F1F}
.btn.full{width:100%}

/* HERO */
.hero{padding:80px 0 72px;background:linear-gradient(120deg,#fff 0%,#f5efe9 100%)}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero-copy h1{font-family:var(--fontHead);color:var(--head);font-size:clamp(30px,4vw,44px);margin-bottom:10px}
.sub{color:#555;margin-bottom:16px}
.tagline{background:#fff;border:1px solid var(--ui1);border-radius:var(--radius);padding:14px 16px;line-height:1.3;box-shadow:var(--shadow);white-space:pre-wrap;font-size:13px}
.cta-row{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.hero-media{min-height:350px;max-height:400px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.10)),url('assets/img/hero.webp') center/cover no-repeat;box-shadow:var(--shadow);transition:transform .5s ease,box-shadow .5s ease;}
.hero-media:hover{transform:scale(1.02);box-shadow:0 12px 35px rgba(0,0,0,.15);}

/* EMPRESA */
.empresa-inner{display:grid;grid-template-columns:1.5fr .9fr;gap:32px;align-items:center}
.check-list{padding-left:18px;margin-top:12px}
.empresa-highlight{background:#fff;border-radius:var(--radius);padding:20px;border:1px solid var(--ui1);box-shadow:var(--shadow);font-weight:600;color:var(--head)}

/* PRODUCTOS */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--ui2);background:#fff;cursor:pointer;font-size:13px}
.chip.active,.chip:hover{border-color:var(--head);color:var(--head)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--ui1);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-img{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.08)),url('assets/img/placeholder.webp') center/cover no-repeat;aspect-ratio:4/3}
.card-body{padding:16px;display:flex;flex-direction:column;gap:8px}
.card-body h3{margin:0;font-family:var(--fontHead);color:var(--head);font-size:17px}
.card-body p{font-size:14px;line-height:1.4}
.badge{display:inline-block;margin-left:6px;background:var(--ui1);border:1px solid var(--ui2);border-radius:8px;padding:2px 8px;font-size:11px}

/* GALERÍA DENTRO DE CARD */
.card-gallery{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px;background:#fff}
.card-gallery img{width:100%;max-width:260px;border-radius:12px;scroll-snap-align:start}

/* A MEDIDA */
.medida-inner{display:grid;grid-template-columns:1.5fr .9fr;gap:28px}
.benefits{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin-top:12px}
.benefits li{background:#fff;border:1px solid var(--ui1);border-radius:12px;padding:10px 12px;font-size:14px}
.medida-note{background:linear-gradient(135deg,#fff,#f5ede4);border-radius:var(--radius);padding:18px;border:1px solid var(--gold);font-weight:600;color:var(--head)}

/* NOSOTROS */
.nosotros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.nosotros-card{background:#fff;border-radius:var(--radius);padding:20px;border:1px solid var(--ui1);box-shadow:var(--shadow);font-size:14px;color:#4a4a4a}
.nosotros-icon{width:72px;height:72px;margin:0 auto 10px;border-radius:50%;border:2px solid var(--gold);background:#fff;display:flex;align-items:center;justify-content:center}
.nosotros-icon img{width:70%;height:70%;object-fit:contain}
.nosotros-card h3{text-align:center;font-family:var(--fontHead);color:var(--head);font-size:18px;margin-bottom:8px}
.nosotros-card ul{padding-left:18px}
.nosotros-card ul li+li{margin-top:3px}

/* SERVICIOS */
.services-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}
.faq{border:1px solid var(--ui1);border-radius:10px;background:#fff;padding:10px}
.faq summary{cursor:pointer;font-weight:600}

/* PAGOS */
.payments{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;list-style:none}
.payment-chip{background:#fff;border:1px solid var(--ui2);border-radius:999px;padding:10px 14px;box-shadow:var(--shadow);font-weight:600;color:var(--head);font-size:13px}

/* SUCURSALES */
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:12px}
.branch-card{background:#fff;border-radius:var(--radius);padding:16px;border:1px solid var(--ui1);box-shadow:var(--shadow)}
.branch-card h3{font-family:var(--fontHead);color:var(--head);font-size:16px;margin-bottom:4px}

/* CONTACTO */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.contact-line{margin:8px 0;font-size:14px}

/* FOOTER */
.site-footer{border-top:1px solid var(--ui1);padding:16px 0;background:#fff}
.footer-inner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:13px}
.foot-nav a{margin-left:12px;color:#444;text-decoration:none}
.foot-nav a:hover{text-decoration:underline}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr}
  .empresa-inner,.medida-inner,.services-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .nosotros-grid{grid-template-columns:repeat(2,1fr)}
  .branch-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  /* grillas igual que antes */
  .grid,
  .nosotros-grid,
  .branch-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  /* HEADER en columna para que no se desborde */
  .header-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .mega-nav{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
    gap:8px;
  }

  .mega-nav .menu{
    display:flex;
    flex-wrap:wrap;      /* que pueda pasar a varias filas */
    column-gap:12px;
    row-gap:4px;
  }

  .mega-nav .menu > li > a,
  .mega-nav .menu .menu-btn{
    font-size:13px;      /* apenas más chico para que entre mejor */
    padding:6px 4px;
  }

  /* Submenú: que no tenga ancho fijo en celu */
  .submenu{
    position:static;
    min-width:0;
    width:100%;
    margin-top:4px;
    box-shadow:none;
    padding:10px 0 0;
  }

  .submenu-col,
  .submenu-col-right{
    margin-top:0;
    gap:6px;
  }
}

/* Cuando la galería tiene UNA sola imagen */
.card-gallery:has(img:only-child){
  padding:0;                /* que no tenga padding alrededor */
}

.card-gallery:has(img:only-child) img{
  max-width:none;           /* que no se limite a 260px */
  width:100%;               /* ocupa todo el ancho */
  border-radius:16px;       /* mismo radio que la card si querés */
}