/* ====== Reset & tokens ====== */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg:#0a0a0a; --panel:#111111; --panel2:#161616;
  --gold:#d4af37; --gold-2:#f1c40f; --gold-3:#b88a1a;
  --text:#f5f5f5; --muted:#c9c9c9; --border:#242424;
  --radius:18px; --shadow:0 20px 60px rgba(0,0,0,.45);
}
body{margin:0; font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; color:var(--text); background:radial-gradient(1200px 600px at 85% -10%, #1a1a1a 0%, transparent 60%), var(--bg);}
a{color:inherit; text-decoration:none}

/* ====== Layout ====== */
.container{width:min(1200px, 92%); margin-inline:auto}
.section{padding:72px 0}
.muted{color:var(--muted)}

/* ====== Header ====== */
.site-header{position:sticky; top:0; z-index:50; background:rgba(10,10,10,.75); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:14px 0}
.brand{display:flex; align-items:center; gap:.8rem; font-weight:800; letter-spacing:.2px}
.brand img{filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.hamburger{display:none; width:46px; height:46px; border-radius:12px; background:var(--panel2); border:1px solid var(--border); color:var(--text)}
.hamburger span{display:block; width:22px; height:2px; background:var(--text); margin:6px auto}
.mainnav {display:flex; gap:.9rem}
.mainnav a{padding:.5rem .8rem; border-radius:12px; border:1px solid transparent}
.mainnav a:hover{border-color:var(--border); background:#0f0f0f}

/* ====== Hero ====== */
.hero{position:relative; padding:96px 0 48px; overflow:hidden; border-bottom:1px solid var(--border)}
.hero .glow{position:absolute; inset:-10% -20% auto auto; width:60vw; height:60vw; background:radial-gradient(circle at 30% 30%, rgba(212,175,55,.25), transparent 60%); filter:blur(40px); pointer-events:none}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(2.2rem, 4vw + .5rem, 3.2rem); line-height:1.1; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 18px}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:0.95rem 1.2rem; border-radius:999px; border:1px solid var(--border); background:var(--panel2); color:var(--text); box-shadow:var(--shadow); font-weight:700}
.btn-primary{background:linear-gradient(135deg, var(--gold), var(--gold-2)); color:#111}
.btn-ghost{background:transparent}
.hero-card{position:relative; min-height:320px; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); box-shadow:var(--shadow)}
.hero-card::after{content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(212,175,55,.2); pointer-events:none}

/* ====== Catalog Masonry ====== */
.catalogo{padding:56px 0}
.catalogo .section-header{display:flex; align-items:end; justify-content:space-between; margin-bottom:14px}
.catalogo h2{margin:0; font-size:2rem}
.masonry{columns:1; column-gap:14px}
@media (min-width:720px){.masonry{columns:2}}
@media (min-width:1024px){.masonry{columns:3}}
.card{break-inside:avoid; display:block; margin:0 0 14px; position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:#0f0f0f}
.card img{width:100%; display:block; filter:saturate(1.05) contrast(1.05); transition:transform .35s ease}
.card .overlay{position:absolute; inset:auto 0 0 0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.75)); padding:22px 16px}
.card h3{margin:0; font-size:1.1rem; color:var(--gold)}
.card:hover img{transform:scale(1.035)}

/* ====== Feature bullets ====== */
.features{display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin-top:18px}
.feature{padding:16px; border:1px solid var(--border); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); box-shadow:var(--shadow)}
.feature h4{margin:0 0 6px; color:var(--gold)}
.feature p{margin:0; color:var(--muted)}
@media (max-width:800px){.features{grid-template-columns:1fr}}

/* ====== Destacados (Swiper) ====== */
.destacados{padding:56px 0; border-top:1px solid var(--border)}
.swiper{width:100%; height:340px}
.swiper-slide img{width:100%; height:100%; object-fit:cover; border-radius:16px; border:1px solid var(--border)}

/* ====== Footer ====== */
.site-footer{border-top:1px solid var(--border); padding:28px 0; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.35))}
.footer-grid{display:grid; gap:1rem; grid-template-columns:2fr 1fr 1fr; align-items:start}
.legal{margin-top:10px; border-top:1px solid var(--border); padding-top:12px; color:var(--muted)}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr}}

/* ====== Responsive nav ====== */
@media (max-width:780px){
  .mainnav{display:none; position:absolute; right:4%; top:66px; flex-direction:column; background:var(--panel); padding:10px; border:1px solid var(--border); border-radius:12px}
  .mainnav.active{display:flex}
  .hamburger{display:inline-grid; place-items:center}
  .hero-inner{grid-template-columns:1fr}
}

/* ====== Typographic white space ====== */
.section .container > h2, .section .container > p{max-width:70ch}
.hero .container > *{max-width:70ch}


.btn-ver {
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-ver:hover {
  background: #ffcc00; /* un dorado más claro al pasar el mouse */
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.contact-info {
  background: var(--card);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  color: #fff;
}

.contact-info h3 {
  margin-bottom: 16px;
  color: var(--gold);
}

.contact-info p {
  margin: 10px 0;
  font-size: 15px;
}

.contact-info i {
  margin-right: 8px;
  color: var(--gold);
}

.contact-info a {
  color: #fff;
  text-decoration: none;
}

.contact-info a:hover {
  color: var(--gold);
}

.map {
  margin-top: 16px;
  border-radius: var(--radius);
  overflow: hidden;
}

@media (max-width: 768px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}
/* ===== Contacto ===== */
.contact-form {
  background: var(--card);
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  max-width: 600px;
  margin: 0 auto;
}

.contact-form .form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.contact-form label {
  font-weight: 600;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 12px;
  border: 1px solid #444;
  border-radius: var(--radius);
  background: #111;
  color: #fff;
  font-family: 'Poppins', sans-serif;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.3);
}

.f-social .social-links a {
  margin-right: 12px;
  font-size: 1.6rem;        /* tamaño del icono */
  color: var(--gold);       /* usa tu color dorado */
  transition: color 0.3s ease;
}

.f-social .social-links a:hover {
  color: #fff;              /* cambia de color al pasar el mouse */
}