:root{
  --bg:#0a0a0a;
  --bg-2:#111111;
  --ink:#eeeeee;
  --muted:#bfbfbf;
  --brand:#e5c593; /* sand gold */
  --accent:#888888;
  --maxw:1200px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
h1,h2,h3,h4,h5,h6,.display{font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--maxw); margin:auto; padding:0 20px}

.navbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(10,10,10,.85); backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(229,197,147,.15);
}
.navbar .wrap{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700}
.nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{padding:10px 12px; border-radius:10px}
.nav-links a:hover, .nav-links a.active{background:rgba(229,197,147,.12)}

.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid rgba(229,197,147,.35); color:var(--ink);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(229,197,147,.12); border-color: var(--brand)}
.btn.brand{background:var(--brand); color:#1a1a1a; border-color:var(--brand); font-weight:700}
.btn.brand:hover{transform:translateY(-1px); filter:saturate(1.1)}

.hero{
  position:relative; min-height:78vh; display:grid; place-items:center; text-align:center;
  background: url('../img/hero.jpg') center/cover no-repeat;
  isolation:isolate;
}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.8)); z-index:0}
.hero .content{position:relative; z-index:1; padding:80px 20px}
.kicker{letter-spacing:.25em; text-transform:uppercase; color:var(--brand); font-weight:600}
.display{
  font-size: clamp(36px, 5vw, 66px);
  margin:.25em 0 .35em; line-height:1.05; font-weight:800;
}
.sub{color:var(--muted); max-width:760px; margin:0 auto 28px}
.badges{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

.section{padding:80px 0}
.section .head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px}
.section h2{font-size: clamp(28px, 3vw, 40px); margin:0}
.section p.lead{color:var(--muted); max-width:820px}

.grid{display:grid; gap:22px}
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width:980px){.grid.cols-4{grid-template-columns: repeat(2, minmax(0,1fr))}}
@media (max-width:780px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}

.card{
  background:linear-gradient(180deg, var(--bg-2), #0a0a0a);
  border:1px solid rgba(229,197,147,.12);
  border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
}
.card .media{aspect-ratio: 16/10; overflow:hidden}
.card .media img{width:100%; height:100%; object-fit:cover; transition: transform .4s ease}
.card:hover .media img{transform: scale(1.05)}
.card .content{padding:18px}
.card .eyebrow{color:var(--brand); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700}
.card h3{margin:.35em 0 .25em; font-size:20px}
.card p{color:var(--muted); margin:0}

/* Sección Nosotros a 1 columna */
#nosotros .split { grid-template-columns: 1fr; }

.split{display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center}
.split .img{border-radius: var(--radius); overflow:hidden; border:1px solid rgba(229,197,147,.12)}
@media (max-width:900px){ .split{grid-template-columns:1fr; } }

.values{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px}
.value{padding:18px; border:1px solid rgba(229,197,147,.12); border-radius:16px; background: rgba(255,255,255,.02)}
.value h4{margin:.25em 0; font-size:18px}
.value p{color:var(--muted); margin:0}
@media (max-width:900px){ .values{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:580px){ .values{grid-template-columns:1fr} }

.masonry{column-count: 3; column-gap: 16px;}
.mitem{break-inside: avoid; margin-bottom:16px; position:relative; overflow:hidden; border-radius:14px; border:1px solid rgba(229,197,147,.12)}
.mitem img{width:100%; height:auto; display:block; transition: transform .35s ease}
.mitem:hover img{transform: scale(1.03)}
.mitem figcaption{
  position:absolute; inset:auto 0 0 0; padding:10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 90%);
  color: #fff; font-weight:600; letter-spacing:.02em
}
@media (max-width:900px){ .masonry{column-count:2} }
@media (max-width:580px){ .masonry{column-count:1} }

.locations .card h3{display:flex; align-items:center; justify-content:space-between}
.tag{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid rgba(229,197,147,.3); color:var(--brand)}

.contact{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(229,197,147,.08), rgba(255,255,255,0) 70%) , var(--bg);
  border-top: 1px solid rgba(229,197,147,.12);
}
form{display:grid; gap:14px}
input, textarea{
  background:#0f0f0f; color:var(--ink); border:1px solid rgba(229,197,147,.18);
  border-radius:12px; padding:12px 14px; outline:none
}
input:focus, textarea:focus{border-color: var(--brand)}
.footer{padding:28px 0; border-top:1px solid rgba(229,197,147,.12); color:var(--muted)}
.small{font-size:12px; color:var(--muted)}

/* Brand logo cards: centered logos with hover */
.center-logo { display:flex; align-items:center; justify-content:center; aspect-ratio: 16/10; background: linear-gradient(180deg, var(--bg-2), #0a0a0a); }
.center-logo img{ max-height: 72px; width: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.35)); transition: transform .25s ease, filter .25s ease; }
.brand-card:hover .center-logo img{ transform: scale(1.05); filter: drop-shadow(0 10px 28px rgba(229,197,147,.25)); }

/* ===== Brand hero cards (photo + overlay + centered logo) ===== */
.brand-hero{ position:relative; aspect-ratio:16/10; border-bottom:1px solid rgba(229,197,147,.12);
  background-position:center; background-size:cover; overflow:hidden; }
.brand-hero::before{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}
.brand-hero .brand-logo{ position:absolute; inset:auto 0 0 0; top:50%; transform:translateY(-50%);
  display:flex; justify-content:center; }
.brand-hero .brand-logo img{ max-height:80px; width:auto; filter:drop-shadow(0 4px 16px rgba(0,0,0,.6)); 
  transition:transform .25s ease, filter .25s ease; }
.brand-card:hover .brand-hero .brand-logo img{ transform:scale(1.04); filter:drop-shadow(0 8px 24px rgba(229,197,147,.35)); }