:root{
  --bg-void:#0a0908;
  --steel-dark:#151412;
  --steel-line:#2c2925;
  --ember:#ff6a35;
  --ember-deep:#c1440e;
  --brass:#b08d57;
  --text-primary:#f5f1ea;
  --text-secondary:#a89f92;
  --text-faint:#6b6459;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}

/* ---- textura de fondo: grano + veta metálica ---- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(255,106,53,0.10), transparent 45%),
    radial-gradient(ellipse at 100% 110%, rgba(176,141,87,0.08), transparent 50%);
  pointer-events:none;
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:0;
  mix-blend-mode:overlay;
}

a{color:inherit;text-decoration:none;}

/* ---------------- HEADER ---------------- */
header{
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem clamp(1.25rem, 4vw, 3.5rem);
  border-bottom:1px solid var(--steel-line);
  background:linear-gradient(180deg, rgba(10,9,8,0.7), rgba(10,9,8,0));
  backdrop-filter:blur(6px);
}

.brand{
  display:flex;
  align-items:center;
  gap:0.7rem;
}

.brand img{
  height:38px;
  width:auto;
  display:block;
}

nav a{
  font-family:'JetBrains Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-secondary);
  position:relative;
  padding-bottom:4px;
  transition:color .25s ease;
}
nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--ember);
  transition:width .3s ease;
}
nav a:hover, nav a:focus-visible{
  color:var(--text-primary);
  outline:none;
}
nav a:hover::after, nav a:focus-visible::after{width:100%;}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:6rem 1.5rem 5rem;
  isolation:isolate;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(180deg, rgba(8,7,6,0.5) 0%, rgba(8,7,6,0.82) 55%, var(--bg-void) 100%),
    url("../img/hero-bg.jpg");
  background-size:cover;
  background-position:center 35%;
  filter:saturate(1.05) contrast(1.05);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ember);
  margin-bottom:1.9rem;
  animation:flicker 3.4s ease-in-out infinite;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 10px 2px rgba(255,106,53,0.7);
}

@keyframes flicker{
  0%,100%{opacity:1;}
  45%{opacity:0.72;}
  50%{opacity:1;}
  82%{opacity:0.85;}
}

h1{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  line-height:1.04;
  font-size:clamp(2.4rem, 7vw, 5.2rem);
  letter-spacing:0.01em;
  max-width:16ch;
}

h1 .accent{
  color:var(--ember);
  display:block;
}

.lead{
  margin-top:1.6rem;
  font-family:'Oswald', sans-serif;
  font-weight:500;
  font-size:clamp(1.1rem, 2.4vw, 1.5rem);
  color:var(--text-primary);
  max-width:32ch;
}

.tagline{
  margin-top:0.9rem;
  font-size:1rem;
  color:var(--text-secondary);
  letter-spacing:0.02em;
  max-width:30ch;
}

/* ---- costura fundida / signature element ---- */
.seam{
  position:relative;
  width:min(560px, 84vw);
  height:3px;
  margin:3rem auto 0;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--ember-deep) 15%, var(--ember) 50%, var(--ember-deep) 85%, transparent);
  background-size:220% 100%;
  animation:seam-glow 5s ease-in-out infinite;
  box-shadow:0 0 18px 1px rgba(255,106,53,0.45);
}
@keyframes seam-glow{
  0%,100%{background-position:0% 0%; opacity:0.75;}
  50%{background-position:100% 0%; opacity:1;}
}

/* ---------------- SECCIÓN INTRO ---------------- */
.intro{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto;
  padding:4.5rem 1.5rem 3rem;
  text-align:center;
}
.intro p{
  font-family:'Oswald', sans-serif;
  font-weight:400;
  font-size:clamp(1.1rem, 2.6vw, 1.4rem);
  line-height:1.5;
  color:var(--text-primary);
  letter-spacing:0.01em;
}
.intro p .strong{
  color:var(--brass);
  font-weight:600;
}

/* ---------------- CTA ---------------- */
.cta-wrap{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
  padding:1rem 1.5rem 5.5rem;
}

.cta-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
  padding:1.05rem 2.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.85rem;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bg-void);
  background:linear-gradient(135deg, #ffb347, var(--ember) 55%, var(--ember-deep));
  border-radius:2px;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 8px 24px -8px rgba(255,106,53,0.55);
}
.cta-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  z-index:-1;
}
.cta-btn:hover, .cta-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -8px rgba(255,106,53,0.75);
  outline:none;
}
.cta-btn:hover::before, .cta-btn:focus-visible::before{
  transform:translateX(120%);
}

.location{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-secondary);
  border:1px solid var(--steel-line);
  padding:0.5rem 1rem;
  border-radius:2px;
}
.location svg{width:13px;height:13px;fill:var(--brass);}

/* ---------------- FOOTER ---------------- */
footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--steel-line);
  padding:2rem 1.5rem;
  text-align:center;
}
footer p{
  font-family:'Inter', sans-serif;
  font-size:0.78rem;
  color:var(--text-faint);
  max-width:52ch;
  margin:0 auto;
  line-height:1.5;
}

/* ---------------- Accesibilidad / reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .eyebrow, .seam{animation:none;}
  .cta-btn::before{transition:none;}
}

@media (max-width:600px){
  header{padding:1.1rem 1.25rem;}
  .hero{min-height:92vh; padding:5rem 1.25rem 4rem;}
}