/* Black & Gold theme */
:root{
  --gold: #d4af37;
  --dark: #0b0b0b;
  --muted: #bdbdbd;
  --container: 1100px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--dark);color:#fff;line-height:1.5}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Hero */
.hero{background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), url('images/albanileria/albanileria6.jpg') center/cover no-repeat;height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-inner{display:flex;flex-direction:column;gap:18px;align-items:center}
.brand h1{font-size:2.4rem;margin:0;color:var(--gold);letter-spacing:1px}
.tag{color:var(--muted);margin-top:6px}

/* Buttons */
.btn-primary{background:var(--gold);color:#000;padding:14px 24px;border-radius:28px;text-decoration:none;font-weight:700;display:inline-block}
.btn-ghost{color:var(--gold);border:1px solid rgba(212,175,55,.25);padding:12px 20px;border-radius:20px;text-decoration:none;margin-left:8px}

/* Nav */
/* NAVBAR */
.services-nav {
  background: #070707;
  border-top: 1px solid rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  margin-top: 90px;
}

/* Contenedor flex de los links */
.services-nav .container {
  display: flex;
  justify-content: center;
  align-items: stretch;  /* 🔥 los <a> se estiran verticalmente */
  gap: 10px;
  padding: 0 12px;       /* padding horizontal para que no toque los bordes */
}

/* Links */
.services-nav a {
  display: flex;          /* 🔥 hace que ocupe todo el alto del contenedor */
  align-items: center;    /* centra verticalmente el texto */
  justify-content: center; /* centra horizontalmente el texto */
  padding: 12px 20px;     /* padding interno del link */
  color: var(--muted);
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease; /* transición suave */
  border-radius: 4px;     /* opcional: bordes ligeramente redondeados */
}

/* Hover */
.services-nav a:hover {
  background-color: #d4af37;
  color: #000;
}

.services-nav{margin-top: 90px;}
/* Sections */
.section{padding:60px 0}
.section h2{color:var(--gold);margin-bottom:10px}
.muted{color:var(--muted)}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px}
.service-card{background:#0e0e0e;padding:14px;border-radius:10px;text-align:center;border:1px solid rgba(255,255,255,.03)}
.service-card img{width:100%;height:150px;object-fit:cover;border-radius:8px;margin-bottom:10px}
.service-card h3{margin:0;color:#fff;}

/* Gallery */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.filter-btn{background:#111;border:1px solid rgba(255,255,255,.04);color:var(--muted);padding:8px 12px;border-radius:8px;cursor:pointer}
.filter-btn.active{background:var(--gold);color:#000;border:none}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gallery-item{background:#0f0f0f;border-radius:8px;overflow:hidden}
.gallery-item img{width:100%;height:140px;object-fit:cover;display:block}

/* Form */
.form-section .formulario{max-width:900px;margin:20px auto;display:flex;flex-direction:column;gap:12px}
.formulario .row{display:flex;gap:12px}
.formulario input,.formulario select,.formulario textarea{flex:1;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:#0b0b0b;color:#fff}
.btn-primary.wide{width:100%;padding:14px;border-radius:10px;border:none;font-weight:700}

/* Footer */
.site-footer{padding:30px 0;background:#050505;color:var(--muted);text-align:center;margin-top:30px}

/* Floating WhatsApp */
.floating-whatsapp{position:fixed;right:18px;bottom:18px;background:var(--gold);color:#000;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:24px;z-index:999;box-shadow:0 8px 18px rgba(0,0,0,.4)}

/* Responsive */
@media(max-width:800px){
  .formulario .row{flex-direction:column}
  .brand h1{font-size:1.8rem}
  .hero{height:56vh}
}
.creditos {
  background-color: #000;        /* fondo negro */
  color: #ccc;                  /* texto gris claro */
  text-align: center;           /* centrar texto */
  padding: 20px 10px;           /* espacio interior */
  font-size: 14px;              /* tamaño discreto */
}

.creditos hr {
  border: none;                 /* quitar estilo por defecto */
  height: 1px;                  /* grosor línea */
  background-color: #444;       /* gris */
  margin-bottom: 15px;          /* espacio debajo */
  width: 80%;                   /* ancho de la línea */
  margin-left: auto;
  margin-right: auto;           /* centrar línea */
}

.creditos a {
  color: #d4af37;               /* dorado (o tu color corporativo) */
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.creditos a:hover {
  color: #ffffff;               /* blanco al pasar */
}