/* Integrate the supplied logo's white canvas with the header surface. */
.cabecera,
.cabecera.esta-fija { background: var(--porcelain); }
.cabecera__barra { min-height: 88px; gap: 24px; padding-block: 4px; }
.cabecera__marca:has(.cabecera__logo-offline) {
    position: relative;
    flex: 0 0 240px;
    width: 240px;
    height: 80px;
    overflow: hidden;
    mix-blend-mode: multiply;
}
.cabecera__marca .cabecera__logo-offline {
    position: absolute;
    display: block;
    left: -30px;
    top: -10px;
    width: 300px;
    max-width: none;
    height: 100px;
}
.cabecera .nav__lista { margin-block: 0; }
@media (min-width: 901px) {
    .cabecera .nav__lista { gap: clamp(16px, 1.8vw, 28px); }
    .cabecera .nav__enlace,
    .cabecera .nav__cta { white-space: nowrap; }
}
@media (max-width: 1100px) and (min-width: 901px) {
    .cabecera__barra { gap: 16px; padding-inline: 20px; }
    .cabecera .nav__lista { gap: 14px; }
    .cabecera .nav__cta .boton { padding-inline: 16px; }
}
@media (max-width: 900px) {
    .cabecera__barra { min-height: 76px; padding-block: 0; }
    .cabecera__marca:has(.cabecera__logo-offline) { flex-basis: 204px; width: 204px; height: 68px; }
    .cabecera__marca .cabecera__logo-offline { width: 255px; height: 85px; left: -25.5px; top: -8.5px; }
    .cabecera .nav__lista { top: 76px; }
}

/* White lettering in the supplied transparent alternative needs a dark surface. */
.cabecera__marca:has(.cabecera__logo-offline) { mix-blend-mode: normal; background: transparent; border-radius: 0; }
.cabecera__marca .cabecera__logo-offline { width: 264px; height: 88px; left: -20px; top: -4px; }
@media (max-width: 900px) {
 .cabecera__marca .cabecera__logo-offline { width: 224px; height: auto; left: -17px; top: -3px; }
}

/* Transparent logo on one continuous dark header surface. */
.cabecera, .cabecera.esta-fija {
    background: #251331;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cabecera .nav__enlace { color: #f7f1e8; }
.cabecera .nav__enlace:hover,
.cabecera .nav__enlace[aria-current="page"] { color: #f3d45e; }
.cabecera .nav__cta .boton { border-radius: 8px; }
.cabecera .boton--fantasma { color: #f7f1e8; border-color: rgba(255,255,255,.35); }
.cabecera a:focus-visible, .cabecera button:focus-visible { outline: 2px solid #f3d45e; outline-offset: 4px; }
.cabecera .nav__toggle { background: transparent; border-color: rgba(255,255,255,.35); }
.cabecera .nav__toggle span,
.cabecera .nav__toggle span::before,
.cabecera .nav__toggle span::after { background: #f7f1e8; }
@media (max-width: 900px) {
    .cabecera .nav__lista { background: #251331; border-color: rgba(255,255,255,.15); }
    .cabecera .nav__lista li { border-color: rgba(255,255,255,.15); }
}