:root{
  --bg: #0B0D10;
  --bg-2: #0F1217;
  --text: #EDEEF2;
  --muted: #B4BAC8;
  --gold-1: #C8A34A;
  --gold-2: #E9C96C;
  --gold-3: #8E6D28;
  --shadow: rgba(0,0,0,.55);
}
.gold, .btn-gold, .seal, .chip{
  background-image: linear-gradient(135deg, var(--gold-3) 0%, var(--gold-1) 32%, var(--gold-2) 64%, var(--gold-1) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html, body{ margin:0; padding:0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, Arial, sans-serif; }
.header{ position: sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,12,16,.92), rgba(10,12,16,.7));
  border-bottom: 1px solid rgba(200,163,74,.18); display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem;
}
.brand{ display:flex; align-items:center; gap:.75rem; }
.logo{ width:62px; height:auto; filter: drop-shadow(0 2px 6px var(--shadow)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text .name{ font-weight:700; letter-spacing:.2px; }
.brand-text .legal{ font-size:.85rem; color: var(--muted); }
.nav{ display:flex; flex-wrap:wrap; gap:.5rem; }
.nav-btn{ position:relative; padding:.6rem .85rem; background:#11151b; color:#e7e8ec;
  border:1px solid rgba(200,163,74,.25); border-radius:999px; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 8px rgba(0,0,0,.25);
}
.nav-btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 16px rgba(233,201,108,.18); }
.nav-btn.active{ background: linear-gradient(135deg, #12161e, #181d27); border-color: rgba(233,201,108,.5); }
main{ max-width:1200px; margin:0 auto; padding: 0 1rem; }
.view{ display:none; animation: fadeIn .28s ease both; }
.view.show{ display:block; }
@keyframes fadeIn { from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.section-title{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin: 2.4rem 0 1.2rem; font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing:.3px; }
.section-title .rule{ flex:1; height:1px; background: linear-gradient(90deg, rgba(233,201,108,0), rgba(233,201,108,.6), rgba(233,201,108,0)); filter: drop-shadow(0 0 10px rgba(233,201,108,.35)); }

.hero{ position:relative; border-radius:18px; overflow:hidden; min-height: 72vh; margin: 1rem 0 0 0; background: #0a0d11; box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 120px rgba(255,215,128,.05); }
.hero::before{ content:""; position:absolute; inset:0; background-image: url('../img/casa2.webp'); background-size: cover; background-position:center; opacity:.18; transition: opacity .6s ease; }
.hero-overlay{ position:absolute; inset:0; background: radial-gradient(1200px 600px at 20% 0%, rgba(233,201,108,.18), rgba(10,12,16,.2) 40%, rgba(10,12,16,.9) 70%), linear-gradient(180deg, rgba(13,16,21,.75), rgba(13,16,21,.92)); mix-blend-mode: screen; }
.hero-content{ position:relative; z-index:1; padding: clamp(1rem, 2.5vw, 2rem); max-width: 920px; }
.hero h1{ font-size: clamp(1.8rem, 1.1rem + 3.4vw, 3.4rem); margin:.5rem 0 .8rem; text-shadow: 0 0 22px rgba(233,201,108,.18); }
.sub{ color:#f0f1f5; opacity:.86; line-height:1.45; font-size: clamp(.98rem, .88rem + .3vw, 1.12rem); }
.cta-group{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.2rem 0 0; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; padding:.9rem 1.15rem; border-radius:14px; border:1px solid rgba(233,201,108,.4); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.35); }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(233,201,108,.22); }
.btn-gold{ background: linear-gradient(135deg, #1a1f28, #1f2531); color: #ffe9b0; }
.btn-dark{ background: #0f131a; color:#e6e6ea; }
.big{ font-size:1.05rem; padding:1rem 1.25rem; }
.hero-badges{ position:absolute; bottom:1rem; left:1rem; display:flex; gap:.5rem; z-index:1; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:.35rem; font-weight:700; letter-spacing:.2px; border:1px solid rgba(233,201,108,.44); background: rgba(20,24,30,.6); border-radius:999px; padding:.4rem .7rem; color: transparent; filter: drop-shadow(0 10px 24px rgba(233,201,108,.15)); }

.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin: 1rem 0 2rem; }
.card{ background: radial-gradient(400px 220px at -10% -20%, rgba(233,201,108,.08), rgba(14,18,24,1)); border:1px solid rgba(233,201,108,.18);
  border-radius:16px; padding:1rem; text-align:center; position:relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 20px rgba(233,201,108,.04);
}
.card:hover{ transform: translateY(-4px); border-color: rgba(233,201,108,.42); box-shadow: 0 18px 40px rgba(233,201,108,.18); }
.card .icon{ width:52px; height:52px; margin:.4rem auto .6rem; }
.card .icon svg{ width:100%; height:100%; fill: none; stroke: var(--gold-2); stroke-width:1.2; }
.card h3{ margin:.2rem 0 .6rem; font-size:1.05rem; }
.card.more .icon svg path{ fill: var(--gold-2); stroke:none; }

.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.5rem; }
.gallery figure{ margin:0; border-radius:12px; overflow:hidden; border:1px solid rgba(233,201,108,.16); }
.gallery img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(1.05) contrast(1.02); transition: transform .35s ease; }
.gallery img:hover{ transform: scale(1.04); }

.special{ position:relative; padding:1.2rem; border:1px solid rgba(233,201,108,.28); border-radius:16px; background: radial-gradient(700px 340px at 10% -10%, rgba(233,201,108,.08), rgba(14,18,24,1)); text-align:center; }
.seal{ display:inline-block; padding:.4rem .9rem; border-radius:999px; background-image: linear-gradient(135deg, var(--gold-3), var(--gold-2)); color:#0c0f15; -webkit-background-clip: initial; background-clip: initial; font-weight:800; letter-spacing:.4px; box-shadow: 0 4px 22px rgba(233,201,108,.25); border:1px solid rgba(233,201,108,.6); }

.hours{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.hour-card{ padding:1rem; border-radius:14px; background: linear-gradient(160deg, rgba(233,201,108,.08), rgba(13,16,21,1)); border:1px solid rgba(233,201,108,.22); box-shadow: inset 0 0 24px rgba(233,201,108,.05); }
.h-label{ color: var(--muted); letter-spacing:.3px; }
.h-time{ font-size:1.25rem; font-weight:800; background-image: linear-gradient(135deg, var(--gold-3), var(--gold-1), var(--gold-2)); -webkit-background-clip:text; color:transparent; margin-top:.2rem; }

.map-block{ display:flex; align-items:center; gap:1rem; justify-content:center; flex-wrap:wrap; padding:1.2rem; border:1px solid rgba(233,201,108,.18); border-radius:16px; background: #0f131a; }

.contact{ text-align:center; }
.socials{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1rem; flex-wrap:wrap; }
.social{ padding:.6rem 1rem; border-radius:999px; border:1px solid rgba(233,201,108,.22); background:#0f131a; color:#e6e6ea; text-decoration:none; }

.whats-float{ position: fixed; right: 16px; bottom: 18px; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background: linear-gradient(135deg, #1a1f28, #232a38);
  border:1px solid rgba(233,201,108,.5); box-shadow: 0 10px 24px rgba(233,201,108,.18);
}
.whats-float svg{ width:66%; height:66%; fill: var(--gold-2); }

.footer{ margin:2rem 0 1rem; padding:1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(233,201,108,.18); color: var(--muted); }
.footer-title{ font-weight:800; color:#e9e9ee; }
.foot-note{ opacity:.9; }

/* === Fix encimados móvil (solo esto) === */
@media (max-width: 720px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .hero-badges{ display:none !important; }
  .cta-group{ width:100%; }
  .cta-group .btn{ flex: 1 1 100%; width:100%; }
  .hero{ padding-bottom: 1.2rem; }
}