/* Encabezado global: barra hueso con la pestaña verde del logotipo colgando */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-sand);
}
.site-header__bar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-3);
    max-width: calc(var(--container-width) + var(--gutter) * 2);
    height: var(--header-h);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Pestaña de marca: se extiende bajo la barra con un corte diagonal */
.brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    align-self: flex-start;
    height: calc(var(--header-h) + 22px);
    padding: 12px 12px 0 14px;
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    transition: height .25s var(--ease);
}
.brand__word {
    font-family: var(--font-heading);
    font-weight: 800;
    font-stretch: 82%;
    font-size: 1.32rem;
    line-height: .92;
    letter-spacing: -.02em;
}
.brand__mark { width: 40px; height: 40px; margin-top: 8px; }
.brand__img { height: 100%; width: auto; padding-bottom: 12px; }
.is-scrolled .brand { height: var(--header-h); }

.nav { display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; height: 100%; gap: clamp(4px, 1vw, 14px); }
.nav__item { height: 100%; }
.nav__link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-inline: 8px;
    text-decoration: none;
    font-size: .9375rem;
    font-weight: 500;
    font-stretch: 90%;
    transition: color .2s var(--ease);
}
.nav__num { display: none; }
.nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--color-accent);
    clip-path: var(--diamond);
    transform: scale(0);
    transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--color-primary); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scale(1); }
.nav__link.is-active { font-weight: 700; color: var(--color-primary); }
.nav__panel-foot { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 8px; }
.header-phone {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 14px;
    background: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    font-stretch: 88%;
    white-space: nowrap;
}
.header-phone::before {
    content: '';
    position: absolute;
    inset: 0 -24px;
    z-index: -1;
    background: var(--color-ink);
    transform: translateX(-105%) skewX(-18deg);
    transition: transform .45s var(--ease);
}
.header-phone:focus-visible::before { transform: translateX(0) skewX(-18deg); }
@media (hover: hover) {
    .header-phone:hover::before { transform: translateX(0) skewX(-18deg); }
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: none;
    border: 1px solid var(--color-ink);
    cursor: pointer;
    font-weight: 600;
    font-stretch: 88%;
}
.nav-toggle__bars { position: relative; display: block; width: 20px; height: 12px; }
.nav-toggle__bars i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform .25s var(--ease), top .25s var(--ease); }
.nav-toggle__bars i:first-child { top: 1px; }
.nav-toggle__bars i:last-child { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child { top: 5px; transform: rotate(-45deg); }

/* Botón flotante de WhatsApp: una baldosa, no el círculo habitual */
.wa-float {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: clamp(12px, 2vw, 24px);
    z-index: 90;
    display: flex;
    align-items: stretch;
    color: var(--color-white);
    text-decoration: none;
}
.wa-float__tile {
    order: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    background: var(--color-accent);
    transition: background-color .2s var(--ease);
}
.wa-float__tile .icon { width: 26px; height: 26px; transition: transform .35s var(--ease); }
.wa-float:hover .wa-float__tile .icon, .wa-float:focus-visible .wa-float__tile .icon { transform: scale(1.14) rotate(-8deg); }
.wa-float__label {
    order: 1;
    display: flex;
    align-items: center;
    max-width: 0;
    overflow: hidden;
    background: var(--color-ink);
    font-size: .9375rem;
    font-weight: 600;
    font-stretch: 88%;
    white-space: nowrap;
    transition: max-width .35s var(--ease), padding .35s var(--ease);
}
.wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { max-width: 240px; padding-inline: 14px; }
.wa-float:hover .wa-float__tile { background: var(--color-accent-deep); }