/* Header full-width con el mismo “gutter” lateral que el cover */
.site-header{
  /* mismo margen lateral que el cover: clamp(12px,3vw,36px) */
  --gutter: clamp(12px,3vw,36px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:18px var(--gutter);
  margin-top:0;
  border-bottom:1px solid #eee;
  width:100%;
  box-sizing:border-box;
}

/* LOGO más grande */
.logo{
  justify-self:start;
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-size:22px;
  color:var(--brand2); text-decoration:none;
  line-height:1;
}
.logo img{height:48px; display:block}

/* Mobile toggle */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:transparent;
  justify-self:end;
  cursor:pointer;
  gap:5px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.nav-toggle__bar{
  display:block;
  width:18px;
  height:3px;
  background:var(--brand2);
  border-radius:999px;
}

/* NAV centrado */
.main-nav{
  grid-column:2;
  justify-self:center;
  display:flex; align-items:center; gap:clamp(16px,3vw,32px);
}
.main-nav a{
  text-decoration:none;
  color:#222;
  font-size:16px; /* un poco más grande */
  line-height:1;
  padding:8px 0; /* área clicable vertical */
}
.nav-close{display:none}
.nav-home{display:none}
.main-nav .nav-cta{display:none}
.main-nav a:hover{color:var(--brand2)}
.main-nav a:focus-visible{outline:2px solid var(--brand1); outline-offset:3px; border-radius:6px}

/* Derecha: botones */
.right{
  grid-column:3;
  justify-self:end;
  display:flex; align-items:center; gap:16px;
}
.btn-primary{
  background:var(--brand2); color:#fff;
  border:0; border-radius:9999px;
  padding:12px 20px;
  font-size:15px; font-weight:700; line-height:1;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-primary:visited{color:#fff}
.btn-primary:hover{background:var(--brand1); color:var(--black)}
.btn-primary:focus-visible{outline:2px solid var(--brand1); outline-offset:2px}
.main-nav .btn-primary{color:var(--white)}
.main-nav .btn-primary:visited{color:var(--white)}
.main-nav .btn-primary:hover{color:var(--black)}

.login{
  color:var(--brand2);
  text-decoration:none;
  font-size:15px; font-weight:700; line-height:1;
}
.login:hover{text-decoration:underline}
.login:focus-visible{outline:2px solid var(--brand1); outline-offset:3px; border-radius:6px}

/* Responsive */
@media (max-width:900px){
  .site-header{grid-template-columns:auto 1fr; row-gap:10px}
  .main-nav{grid-column:1 / -1; justify-self:center; flex-wrap:wrap}
  .right{justify-self:end}
  .logo img{height:44px}
}
@media (max-width:720px){
  .site-header{
    grid-template-columns:1fr;
    gap:12px;
    position:relative;
    padding:12px var(--gutter);
  }
  .nav-toggle{
    display:inline-flex;
    position:absolute;
    right:var(--gutter);
    top:50%;
    transform:translateY(-50%);
    z-index:60;
  }
  .right{display:none}
  .main-nav{
    position:fixed;
    inset:0;
    z-index:50;
    background:var(--brand2);
    color:var(--brand1);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:18px;
    width:100%;
    height:100%;
    box-sizing:border-box;
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-close{display:block}
  .site-header.is-open .main-nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .main-nav a{
    color:var(--brand1);
    font-size:20px;
  }
  .nav-home{display:inline-flex}
  .main-nav .nav-cta{display:inline-flex}
  .main-nav .nav-cta{
    margin-top:8px;
    background:var(--brand1);
    color:var(--brand2);
    padding:14px 22px;
  }
  .main-nav .nav-cta:hover{background:var(--brand1); color:var(--black)}
  .main-nav .nav-cta:visited{color:var(--brand2)}
  .nav-close{
    position:fixed;
    top:14px;
    right:var(--gutter);
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:var(--white);
    font-size:30px;
    line-height:1;
    cursor:pointer;
  }
}
@media (max-width:560px){
  .main-nav{gap:16px}
  .btn-primary{padding:10px 16px; font-size:14px}
  .login{font-size:14px}
}