/* Header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  color: var(--blanco);
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease);
}
.hdr__logo { display: block; width: 168px; }
.hdr__logo img { width: 100%; height: auto; }
.hdr__logo .logo-color { display: none; }
.hdr__nav { display: flex; gap: 28px; align-items: center; }
.hdr__nav a { text-decoration: none; font-size: var(--t-sm); font-weight: 500; letter-spacing: .04em; }
.hdr__nav a:not(.btn):hover { opacity: .7; }
.hdr__menu { display: none; background: none; border: 0; color: inherit; font: 600 var(--t-sm) var(--f-texto); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

/* En la home, el logo queda dentro del video con igual margen arriba e izquierda */
.pag-home .hdr:not(.is-solid) { padding: calc(var(--marco) + var(--hero-pad)) calc(var(--marco) + var(--hero-pad)) 0; align-items: flex-start; }
.pag-home .hdr:not(.is-solid) .hdr__nav { min-height: 48px; }

.hdr.is-solid { background: var(--crema); color: var(--bosque); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.hdr.is-solid .logo-blanco { display: none; }
.hdr.is-solid .logo-color { display: block; }

@media (max-width: 900px) {
  .hdr__menu { display: block; }
  .hdr__nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 28px;
    background: var(--bosque); color: var(--blanco);
    transform: translateY(-100%); transition: transform .5s var(--ease);
  }
  .hdr__nav a { font-family: var(--f-display); font-size: 1.75rem; }
  .hdr__nav .btn { font-family: var(--f-texto); font-size: var(--t-sm); }
  .hdr.is-open .hdr__nav { transform: none; }
  .hdr.is-open .hdr__menu { position: relative; z-index: 2; color: var(--blanco); }
  .hdr__logo { width: 136px; }
}