/* TALLAO STREET — Lujo con calle (mobile-first) */
:root{
  --arena: #D1B98A;
  --rojo:  #C5302E;
  --negro: #111111;
  --hueso: #F3F2EC;
  --gris:  #444444;
}

*{ box-sizing:border-box; }
html, body { margin:0; padding:0; }
body{
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--negro);
  background:var(--hueso);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--negro); text-decoration:none; }
img{ max-width:100%; display:block; }

/* NAV */
.nav{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:12px 16px; background:#fff;
  border-bottom:1px solid #eee;
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.logo{ height:36px; width:auto; object-fit:contain; border-radius:8px; }
.brand-text{ font-weight:800; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; font-size:22px; padding:6px 8px;
}
.menu{
  position:fixed; inset:56px 0 auto 0;
  background:#fff; border-top:1px solid #eee;
  display:none; flex-direction:column; gap:0;
}
.menu.open{ display:flex; }
.menu a{ padding:14px 16px; border-bottom:1px solid #f2f2f2; font-weight:600; }
.menu .btn{ margin:12px 16px; text-align:center; }

/* HERO */
.hero{
  padding:48px 16px 32px; text-align:left; background:var(--arena);
}
.hero h1{
  margin:0 0 8px; font-size:34px; line-height:1.05; letter-spacing:0.3px; font-weight:800;
}
.hero .subtitle{ margin:0 0 16px; font-size:15px; max-width:36ch; }
.cta{ display:flex; gap:10px; }
.btn{
  padding:10px 14px; border:2px solid var(--negro); border-radius:10px; font-weight:700;
}
.btn.solid{ background:var(--rojo); color:#fff; border-color:var(--rojo); }
.btn.outline{ background:#fff; }

/* CARDS (Productos) */
.cards{
  display:grid; grid-template-columns:1fr; gap:14px; padding:20px 16px;
}
.card{
  background:#fff; border-radius:14px; padding:16px; border:1px solid #eee;
  display:flex; flex-direction:column; gap:8px;
}
.card h3{ margin:0 0 4px; font-size:18px; }
.card p{ margin:0; color:#333; }
.card .price{ color:var(--rojo); font-weight:800; font-size:18px; }
.card .btn{ align-self:flex-start; }

/* Panels */
.panel{ padding:22px 16px; }
.panel h2{ margin:0 0 6px; font-size:22px; }

/* Footer */
.foot{ padding:22px 16px; text-align:center; color:#333; }

/* DESKTOP ENHANCEMENTS */
@media (min-width: 768px){
  .nav{ padding:12px 24px; }
  .hamburger{ display:none; }
  .menu{ position:static; display:flex !important; flex-direction:row; gap:18px; border:0; }
  .menu a{ border:0; padding:6px 0; }
  .menu .btn{ margin:0; }

  .hero{ padding:72px 24px 48px; }
  .hero h1{ font-size:48px; }
  .hero .subtitle{ font-size:16px; max-width:60ch; }
  .cards{ grid-template-columns:repeat(3, 1fr); gap:16px; padding:28px 24px; }
  .panel{ padding:28px 24px; }
  .foot{ padding:28px 24px; }
}