:root{
  --bg:#070707; /* fondo global negro profundo */
  --panel:#0b0b0b; /* panel ligeramente más claro para tarjetas */
  --card:#0f0f10;
  --ink:#e6eef8; /* texto principal claro */
  --muted:#9aa8b6; /* texto secundario */
  /* Paleta oro metálico */
  --gold-light:#f3d98b; /* brillo */
  --gold-mid:#d4af37;   /* dorado estándar */
  --gold-deep:#b38616;  /* sombra */
  --radius:16px;
  --shadow:0 8px 30px rgba(0,0,0,.6);
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Helvetica,Arial}
a{color:var(--gold-mid);text-decoration:none}

/* Header */
header{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.85));color:var(--ink);padding:12px 0;border-bottom:2px solid transparent;z-index:10}
header::after{content:"";display:block;height:2px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));opacity:.95}
.wrap{max-width:1100px;margin:auto;padding:20px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--gold-mid),var(--gold-deep));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.logo img{width:34px;height:34px;object-fit:contain}

/* Navegación */
nav{display:flex;gap:18px;font-weight:600}
nav a{color:var(--ink);padding:8px 10px;border-radius:8px;position:relative}
nav a:hover{color:var(--gold-mid);background:rgba(255,255,255,.02)}

/* Hero */
.hero{display:grid;gap:18px;grid-template-columns:1fr;align-items:center;padding:28px 0}
h1{font-size:clamp(24px,3vw,36px);margin:0}
.muted{color:var(--muted)}

/* Gallery */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* una imagen por fila */
}

@media(min-width:720px){
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 por fila tablet */
  }
}

@media(min-width:980px){
  .grid {
    grid-template-columns: repeat(3, 1fr); /* 3 por fila escritorio */
  }
}
.card{background:var(--panel);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.03);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.card img{display:block;width:100%;height:180px;object-fit:cover}
.caption{padding:10px 12px;font-size:14px;color:var(--muted)}
.card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(0,0,0,.7);border-color:var(--gold-deep)}

/* Títulos con línea dorada */
.section-title{font-weight:700;margin:0 0 14px;position:relative;padding-bottom:8px}
.section-title::after{content:"";display:block;height:4px;width:64px;background:linear-gradient(90deg,var(--gold-mid),var(--gold-deep));border-radius:4px;margin-top:8px}

/* Map */
.map-wrap{background:var(--panel);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.03)}
.map{aspect-ratio:16/9;width:100%;border:0}

/* Boton principal en oro (destacado) */
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background-image:linear-gradient(180deg,var(--gold-light),var(--gold-mid));color:#0b0b0b;font-weight:700;border:1px solid rgba(0,0,0,.12);box-shadow:0 8px 20px rgba(181,136,0,.12)}
.btn:active{transform:translateY(1px)}

/* Footer */
footer{padding:40px 0;color:var(--muted);background:transparent}
.footer-line{height:3px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));border-radius:2px;margin-bottom:14px}
footer small{color:var(--muted)}

/* Lightbox */
dialog{border:0;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.7);padding:0;max-width:min(92vw,1200px)}
dialog::backdrop{background:rgba(0,0,0,.85)}
.lightbox-img{display:block;max-width:100%;height:auto}
.lightbox-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0b0b0b;color:var(--ink)}
.xbtn{appearance:none;border:0;background:transparent;color:var(--gold-light);border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:700}

/* Iconos pequeños en contacto */
.contact-line{display:flex;gap:18px;align-items:center}
.ico{width:18px;height:18px;display:inline-block;vertical-align:middle}

/* Utilidades */
.muted-small{color:var(--muted)}

.card img {
  width: 100%;
  height: 100%; /* ocupa todo el contenedor */
  object-fit: cover; /* recorta proporcionalmente */
}


/* Ajustes para que las imágenes resalten sobre negro */
.card img{filter:brightness(.98) contrast(1.02)}

/* Pequeño detalle: foco accesible en enlaces */
a:focus{outline:3px solid rgba(212,175,55,.15);outline-offset:2px;border-radius:6px}