/* ====== Variables de marca (escala de grises) ====== */
:root{
  --brand: #d1d5db;       /* gris claro para CTAs */
  --brand-600: #9ca3af;   /* hover */
  --text: #e5e7eb;
  --muted: #a1a1aa;
  --bg: #0a0a0b;
  --surface: #111214;
  --card: #0f1012;
  --accent: #f3f4f6;
}

/* Reset y tipografía */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg) url('assets/metal-noise.png') repeat center center fixed;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; line-height:1.5}
img{max-width:100%;height:auto;display:block}

/* Utilidades */
.container{width:min(1100px, 92vw); margin-inline:auto}
.section{padding:64px 0}
h1,h2,h3{margin:0 0 12px}
h1{font-size: clamp(28px, 5vw, 54px); letter-spacing:.5px}
h2{font-size: clamp(22px, 3.4vw, 36px)}
h3{font-size: clamp(18px, 2.6vw, 24px)}
p{color: var(--accent)}
.muted{color: var(--muted)}
.small{font-size:.9rem}

/* Header */
.site-header{position:sticky;top:0;background:rgba(10,10,11,.7);backdrop-filter: blur(8px);z-index:50;border-bottom:1px solid #1f2937}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text)}
.brand-logo{width:40px;height:40px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.brand-name{font-weight:800;letter-spacing:.6px}

/* Nav */
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-weight:600}
nav a:hover{color:var(--text)}

/* Hero / Slider */
.hero{position:relative}
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow:hidden;scroll-behavior:smooth}
.slide{position:relative;min-height:60vh}
.slide img{width:100%;height:60vh;object-fit:cover;filter:brightness(.6) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;pointer-events:none}
.hero-overlay h1{margin-bottom:8px;text-shadow:0 6px 28px rgba(0,0,0,.6)}
.cta-row{margin-top:16px;display:flex;gap:12px;justify-content:center;pointer-events:auto}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.3px}
.btn.primary{background:var(--brand);color:#0a0a0b;border:1px solid #2e2e2e}
.btn.primary:hover{background:var(--brand-600)}
.btn.ghost{border:1px solid #2b2b2f;color:var(--text);background:transparent}
.btn.ghost:hover{border-color:#3c3c42}

/* Dots */
.slider-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center;pointer-events:auto}
.slider-dots button{width:10px;height:10px;border-radius:999px;border:none;background:#6b7280;opacity:.7;cursor:pointer}
.slider-dots button.active{opacity:1;background:var(--brand)}

/* Cards & Embeds */
.card{background:var(--card);border:1px solid #1e2329;border-radius:18px;padding:18px}
.grid-embeds{display:grid;grid-template-columns:1fr;gap:22px}
.fb-embed iframe{width:100%;height:700px}
.ig-placeholder{padding:12px;border:1px dashed #2b2b32;border-radius:14px; background: rgba(0,0,0,.2)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gallery img{border-radius:14px;border:1px solid #1e2329;box-shadow:0 6px 24px rgba(0,0,0,.25)}

/* Video */
.video-wrap{position:relative; width:100%; max-width:900px; margin-inline:auto; aspect-ratio:16/9; border-radius:18px; overflow:hidden; border:1px solid #1e2329; box-shadow:0 10px 32px rgba(0,0,0,.35)}
.yt{position:absolute; inset:0; width:100%; height:100%}

/* Contacto */
.contact-grid{display:grid;grid-template-columns: 1.5fr .8fr; gap:24px}
.form{display:grid;gap:10px;margin-top:10px}
.form input,.form textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #24262b;background:#0f1115;color:var(--text)}
.form button{justify-self:start}

/* Footer */
.site-footer{border-top:1px solid #1f2329;padding:22px 0;margin-top:42px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.links{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.links a{color:var(--brand)}

/* WhatsApp float */
.whatsapp-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;display:grid;place-items:center;background:#25D366;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:80}
.whatsapp-float svg{width:28px;height:28px;fill:#012d14}

/* Responsive */
@media (max-width: 900px){
  .slide img{height:54vh}
  .contact-grid{grid-template-columns:1fr}
  .fb-embed iframe{height:600px}
}
@media (max-width: 520px){
  nav a{margin-left:12px}
  .fb-embed iframe{height:520px}
}