/* ═══════════════════════════════════════
   components.css — nav, tipografía, botones y footer
═══════════════════════════════════════ */

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:var(--nav-h);
  border-bottom:1px solid transparent;transition:border-color .4s;
}
.nav.bd{border-color:var(--border)}
.nav-logo{height:80px;width:auto;cursor:pointer;display:block;transition:opacity var(--fast)}
.nav-logo:hover{opacity:.8}
.nav-r{display:flex;align-items:center;gap:26px}
.nav-prog{font-size:12px;letter-spacing:.18em;color:var(--text-3);font-variant-numeric:tabular-nums}
.nav-back{
  display:flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);background:none;border:none;padding:0;
  opacity:0;pointer-events:none;transition:opacity var(--fast),color var(--fast);
}
.nav-back.on{opacity:1;pointer-events:all}
.nav-back:hover{color:var(--text)}
.nav-back svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* ── TIPO ── */
.tag{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);display:block}
.display{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(28px,4.2vw,62px);line-height:1.07;letter-spacing:-.01em;color:#F6F3ED;
}
.display .dim{color:var(--text-2)}
.display-md{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(19px,2.6vw,40px);line-height:1.15;letter-spacing:-.007em;color:#F6F3ED;
}
.body{font-size:15px;color:#FFFFFF;line-height:1.8;opacity:0.95;}

/* ── BOTONES ── */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  padding:13px 26px;border:none;cursor:pointer;text-decoration:none;
  transition:all var(--fast);white-space:nowrap;
}
.btn-gold{background:var(--accent);color:#070707;border:1px solid var(--accent)}
.btn-gold:hover{background:var(--accent-lt);border-color:var(--accent-lt)}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border-lt)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-lt)}
.btn-ghost{background:transparent;color:var(--text-2);border:none;padding:13px 0}
.btn-ghost:hover{color:var(--text)}
.btn-email{background:transparent;color:var(--text-2);border:1px solid var(--border-md)}
.btn-email:hover{border-color:var(--border-lt);color:var(--text)}

/* ── FOOTER ── */
.fbar{
  position:fixed;bottom:0;left:0;right:0;z-index:490;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:52px;
  border-top:1px solid var(--border);background:var(--bg);
}
.fbrand{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.flinks{display:flex;gap:20px}
.flink{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color var(--fast)}
.flink:hover{color:var(--text-3)}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .nav-logo{max-height:100%;width:auto;object-fit:contain}
  .fbar{display:none}
}