/* ===== Estilo METAL: grafito, acero cepillado y un toque rojo ===== */
.theme-metal{
  --bg:#141518; --bg2:#1a1b1f; --card:#202227; --ink:#e8e9ec; --muted:#9a9ea6;
  --line:#2e3137; --wood:#b3262e; --wood-dark:#8f1d24; --accent:#c9ccd2;
  --steel:linear-gradient(180deg,#f2f3f5 0%,#b9bcc2 45%,#e3e5e8 55%,#9ea2a9 100%);
  font-family:Inter,system-ui,sans-serif;
}
.theme-metal h1,.theme-metal h2,.theme-metal h3,.theme-metal .logo,.theme-metal blockquote,.theme-metal .stats b{
  font-family:Oswald,'Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-style:normal
}
.theme-metal h2{font-size:clamp(32px,4.4vw,50px)}
.theme-metal h3{font-size:20px;letter-spacing:.04em}
.theme-metal .eyebrow{color:var(--wood);letter-spacing:.24em;display:flex;align-items:center;gap:12px}
.theme-metal .eyebrow::before{content:"";width:28px;height:2px;background:var(--wood)}
.theme-metal .eyebrow.light{color:#e2555c}
.theme-metal .eyebrow.light::before{background:#e2555c}
.theme-metal .lead,.theme-metal .prose p{color:var(--muted)}

/* Textura de acero cepillado muy sutil */
.theme-metal section:not(.hero){background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px)}
.theme-metal .services,.theme-metal .contact{background-color:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Botones: rectos, con borde fino */
.theme-metal .btn{border-radius:3px;text-transform:uppercase;letter-spacing:.1em;font-size:14px;padding:15px 28px}
.theme-metal .hero .btn:not(.ghost){background:var(--wood);color:#fff}
.theme-metal .hero .btn:not(.ghost):hover{background:#c7313a}
.theme-metal .btn.ghost{border-color:rgba(255,255,255,.35)}

/* Navegación */
.theme-metal .nav{background:rgba(14,15,17,.92);border-bottom:1px solid var(--line)}
.theme-metal .logo{color:#fff;font-size:20px;letter-spacing:.08em}
.theme-metal .logo svg{color:var(--wood)}
.theme-metal .links a{color:#b5b8bf;text-transform:uppercase;font-size:13px;letter-spacing:.12em}
.theme-metal .links a:hover{color:#fff}
.theme-metal .links .nav-cta{border-radius:3px;background:transparent;border:1px solid var(--wood);color:#fff}
.theme-metal .links .nav-cta:hover{background:var(--wood)}
.theme-metal .menu-btn{color:#fff}

/* Portada */
.theme-metal .hero{background-color:#0b0c0e;border-bottom:3px solid var(--wood)}
.theme-metal .hero::before{background:linear-gradient(100deg,rgba(8,9,11,.92) 0%,rgba(8,9,11,.6) 50%,rgba(8,9,11,.15) 100%),linear-gradient(0deg,rgba(8,9,11,.6),transparent 40%)}
.theme-metal .hero h1{background:var(--steel);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(42px,6.6vw,80px);line-height:1.02}
.theme-metal .hero-sub{color:#b8bbc2}

/* Quién soy */
.theme-metal .portrait img{border-radius:4px;filter:saturate(.85) contrast(1.05);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.theme-metal .portrait::before{border-radius:4px;border-color:var(--wood)}
.theme-metal .portrait figcaption{border-radius:2px;background:rgba(10,10,12,.85);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.theme-metal blockquote{color:#d6d8dc;font-size:20px;border-left-color:var(--wood);font-weight:400;letter-spacing:.03em}
.theme-metal .stats b{color:#fff;font-size:38px}
.theme-metal .stats > div{border-left:2px solid var(--wood);padding-left:14px}

/* Servicios */
.theme-metal .svc{background:linear-gradient(160deg,#25272c,#1c1d21);border-radius:4px;border:1px solid var(--line);position:relative;overflow:hidden}
.theme-metal .svc::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--wood);transition:width .35s}
.theme-metal .svc:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(0,0,0,.9)}
.theme-metal .svc:hover::after{width:100%}
.theme-metal .svc .ico{background:#2c2f35;color:#e8e9ec;border-radius:4px;border:1px solid #3a3d44}
.theme-metal .svc h3{color:#fff}

/* Galería */
.theme-metal .filters button{border-radius:3px;background:transparent;border-color:var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.theme-metal .filters button.on{background:var(--wood);border-color:var(--wood);color:#fff}
.theme-metal .ph{border-radius:3px;background:#1d1e22}
.theme-metal .ph img{filter:saturate(.9)}
.theme-metal .ph:hover img{filter:saturate(1.05)}
.theme-metal .ph figcaption{text-transform:uppercase;letter-spacing:.08em;font-size:12px}

/* Contacto */
.theme-metal .info .ico{background:#25272c;color:#e8e9ec;border-radius:4px;border:1px solid var(--line)}
.theme-metal .info a:hover{color:#fff}
.theme-metal .cform{background:#1f2125;border-radius:4px;border-top:3px solid var(--wood);box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.theme-metal .cform input,.theme-metal .cform select,.theme-metal .cform textarea{background:#16171a;border-color:#33363c;color:var(--ink);border-radius:3px}
.theme-metal .cform input:focus,.theme-metal .cform select:focus,.theme-metal .cform textarea:focus{outline-color:var(--wood)}
.theme-metal .cform .btn{width:100%}
.theme-metal .form-msg.ok{background:#16301f;color:#7fd39a}
.theme-metal .form-msg.err{background:#3a1517;color:#ff8f8f}

.theme-metal .foot{background:#0b0c0e;border-top:1px solid var(--line);color:#7d8088}
.theme-metal .foot b{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em}

@media (max-width:760px){
  .theme-metal .links{background:#0e0f11}
  .theme-metal .hero::before{background:linear-gradient(180deg,rgba(8,9,11,.55),rgba(8,9,11,.88))}
}