:root{
  --bg:#000;
  --panel:#0f0f0f;
  --muted:#7b7b7b;
  --text:#fff;
  --brand:#f5f5f5;
  --stroke:#1d1d1d;
  --accent:#A64B23;
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"PPNeueMontreal",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(1.2) blur(6px);
  background:linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.5) 60%, rgba(0,0,0,0));
}

.logo{display:inline-flex; gap:8px; align-items:center}
.logo-dot{width:14px;height:14px;border-radius:50%;background:#fff;display:inline-block;transform:translateY(1px)}
.logo-dot.second{opacity:.7;translate:2px 0}

.nav-center{display:flex; gap:18px; justify-content:center; flex-wrap:wrap}
.nav-center a{
  position:relative; color:var(--brand); text-decoration:none; font-weight:700; letter-spacing:.01em;
  padding:6px 4px;
}
.nav-center a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:var(--brand);
  transition:width .25s cubic-bezier(.34,1.56,.64,1);
}
.nav-center a:hover::after{ width:100% }
.nav-center a.active{ color:#fff }
.nav-center a.active::after{ width:100% }

.nav-right{display:flex; justify-content:flex-end}
.nav-right .mail{ color:#cfcfcf; text-decoration:none; border:1px solid var(--stroke); padding:6px 10px; border-radius:999px }
.nav-right .mail:hover{ border-color:#333; color:#fff }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:40px 20px 80px }

.hero h1{ font-size:56px; letter-spacing:-.02em; margin:16px 0 8px }
.lede{ color:#cfcfcf; max-width:60ch; line-height:1.5 }

.contact-grid{ display:grid; grid-template-columns: minmax(260px, 360px) 1fr; gap:28px; margin-top:28px }
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Cards */
.contact-cards{ display:grid; gap:16px; height:max-content }
.card{
  background:linear-gradient(180deg, #0e0e0e, #0a0a0a);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:18px;
}
.card h3{ font-size:14px; margin:0 0 10px; color:#e9e9e9; letter-spacing:.04em; text-transform:uppercase }
.card p{ margin:6px 0; color:#d0d0d0 }
.card a{ color:#fff; text-decoration:none }
.card a:hover{ text-decoration:underline }

/* Form */
.form-wrap{
  background:linear-gradient(180deg, #0f0f0f, #0a0a0a);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:20px;
}
.field{ margin-bottom:16px }
.field.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width: 700px){ .field.two{ grid-template-columns:1fr } }

.control label{ display:block; font-size:12px; color:#bdbdbd; margin:0 0 6px; letter-spacing:.04em; text-transform:uppercase }
.control input,.control select,.control textarea{
  width:100%; border:1px solid #1e1e1e; border-radius:12px;
  background:#0a0a0a; color:#fff; padding:12px 12px; font:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.control textarea{ resize:vertical; min-height:120px }
.control input:focus,.control select:focus,.control textarea:focus{
  border-color:#2b2b2b; box-shadow:0 0 0 3px rgba(166,75,35,.15);
}
.error{ display:block; color:#ff8a8a; min-height:1em; font-size:12px; margin-top:6px }

/* Terms */
.terms .checkbox{ display:flex; gap:10px; align-items:flex-start; color:#d4d4d4 }
.terms input{ margin-top:2px }

/* Buttons */
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.btn{
  border:1px solid #2a2a2a; background:#111; color:#fff; padding:12px 16px;
  border-radius:12px; cursor:pointer; font-weight:700; letter-spacing:.02em;
  transition:transform .05s ease, border-color .2s;
}
.btn:hover{ border-color:#3a3a3a }
.btn:active{ transform:translateY(1px) }
.btn.ghost{ background:transparent }

/* Status */
.status{ margin-top:10px; color:#cfcfcf }
.status.success{ color:#9be49b }
.status.error{ color:#ff9b9b }

/* Footer */
.footer{
  margin-top:80px; padding:24px 20px; border-top:1px solid var(--stroke); color:#a9a9a9; text-align:center;
}

/* Honeypot */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none }
/* ====== NAV UNIFICADO ====== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:56px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 16px; z-index:1000;
  color:#fff;
  background:rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* marca y bloques */
.site-header .brand{
  justify-self:start; font-weight:700; letter-spacing:.01em; text-decoration:none; color:#fff;
}
.site-nav{ display:flex; gap:28px; justify-self:center; }
.site-aux{ display:flex; gap:16px; justify-self:end; align-items:center; }

/* links */
.site-nav a{
  position:relative; color:#fff; text-decoration:none; font-weight:600; opacity:.9;
}
.site-nav a:hover{ opacity:1; }
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-10px; height:2px; width:100%;
  background:#fff; transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.site-nav a:hover::after{ transform:scaleX(1); }

/* activo con aria-current */
.site-nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* aux */
#themeToggle{
  background:transparent; border:1px solid rgba(255,255,255,.25);
  color:#fff; padding:6px 10px; border-radius:8px; cursor:pointer;
}
#themeToggle:hover{ border-color:#fff; }
.site-aux .lang{ color:#fff; text-decoration:none; opacity:.9; }
.site-aux .lang:hover{ opacity:1; }

/* empuje del contenido para no quedar tapado por el header fijo */
.main-offset{ padding-top:56px; }