/*
 * Tema site · Cabecera y menú del tema site.
 * Fuente: este archivo (antes, bloque <style> en resources/themes/site/partials/storefront-header-styles.blade.php).
 * Lo carga ese partial con <link> y cache-bust por filemtime (brand-theme.md §4.3). En producción va a
 * public_html/css/themes/site-header.css junto con el tema.
 */
/* ═══ TOP BAR — barra superior clara ═══ */
.iw-topbar {
    background: var(--iw-white);
    color: color-mix(in srgb, var(--iw-black) 62%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid color-mix(in srgb, var(--iw-black) 6%, transparent);
}
.iw-topbar a { color: inherit; text-decoration: none; transition: color .2s; }
.iw-topbar a:hover { color: var(--iw-brand); }
.iw-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2rem;
    padding-block: 0.2rem;
}
@media (min-width: 640px) {
    .iw-topbar__inner {
        gap: 1rem;
        min-height: 2.5rem;
        padding-block: 0.35rem;
    }
}
.iw-topbar__left, .iw-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    min-width: 0;
}
@media (min-width: 640px) {
    .iw-topbar__left, .iw-topbar__right { gap: 1.25rem; flex-wrap: wrap; }
}
.iw-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    white-space: nowrap;
}
.iw-topbar__item--phone { display: none; }
@media (min-width: 640px) {
    .iw-topbar__item--phone { display: inline-flex; }
}
.iw-topbar__item--email { display: none; }
@media (min-width: 768px) {
    .iw-topbar__item--email { display: inline-flex; }
}
.iw-topbar__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px color-mix(in srgb, #22c55e 50%, transparent);
    animation: iw-pulse-dot 2s ease-in-out infinite;
}
@keyframes iw-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.85); }
}

/* ═══ HEADER CLARO ═══ */
.iw-site-header-wrap {
    position: relative;
    z-index: 130;
}
.iw-site-header {
    position: sticky;
    top: 0;
    z-index: 130;
    background: var(--iw-white);
    border-bottom: 1px solid color-mix(in srgb, var(--iw-black) 7%, transparent);
    transition: box-shadow .35s ease, background .35s ease;
}
html.iw-scrolled .iw-site-header,
.iw-site-header--scrolled {
    box-shadow: var(--iw-shadow-md);
    background: color-mix(in srgb, var(--iw-white) 94%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.iw-header-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding-block: 0.15rem;
    overflow: visible;
}
@media (min-width: 640px) {
    .iw-header-bar {
        gap: 0.75rem;
        min-height: 4.25rem;
        padding-block: 0.35rem;
    }
}
@media (min-width: 1024px) {
    .iw-header-bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        justify-content: stretch;
        gap: 1.25rem;
        min-height: 5rem;
        padding-block: 0;
    }
}

.iw-header-logo {
    flex-shrink: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: min(8.75rem, 48vw) !important;
}
@media (min-width: 640px) {
    .iw-header-logo { max-width: min(280px, 42vw) !important; }
}
@media (min-width: 1024px) {
    .iw-header-logo {
        flex-shrink: 0;
        max-width: min(320px, 28vw);
    }
}
.iw-header-logo__img {
    display: block;
    height: 1.85rem;
    max-height: 1.85rem !important;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (min-width: 640px) {
    .iw-header-logo__img { height: 2.5rem; max-height: 2.5rem !important; }
}
@media (min-width: 1024px) {
    .iw-header-logo__img { height: 2.75rem; max-height: 2.75rem !important; }
}
.iw-header-logo__img--icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}
@media (min-width: 640px) {
    .iw-header-logo__img--icon { width: 2.5rem; height: 2.5rem; }
}
.iw-header-logo__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, var(--iw-brand), color-mix(in srgb, var(--iw-accent) 80%, var(--iw-brand)));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    box-shadow: 0 4px 20px -4px color-mix(in srgb, var(--iw-brand) 50%, transparent);
}
.iw-header-logo__text {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
}
@media (min-width: 640px) {
    .iw-header-logo__text { display: flex; }
}
.iw-header-logo__name {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--iw-black);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.iw-header-logo__tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--iw-brand);
}

.iw-header-nav-wrap {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .iw-header-nav-wrap { display: flex; }
}

/* Sin “encajonado”: nav plano, sin caja/píldora contenedora. */
.iw-header-nav-glass {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.iw-header-nav-glass .iw-primary-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0.35rem;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.iw-header-nav-glass .iw-primary-nav > li {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.iw-primary-nav a,
.iw-header-nav-glass .iw-primary-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--iw-black) 58%, transparent);
    text-decoration: none;
    background: transparent;
    box-shadow: none;
    transition: color .15s ease, background .15s ease;
    white-space: nowrap;
}
/* Entre 1024 y 1279 px los cinco enlaces no caben con el relleno completo: se cortaban «Inicio» y «Add-ons». */
@media (min-width: 1024px) and (max-width: 1279px) {
    .iw-header-nav-glass .iw-primary-nav { gap: 0.1rem; }
    .iw-header-nav-glass .iw-primary-nav a { padding: 0.45rem 0.45rem; }
}
.iw-primary-nav a:hover,
.iw-header-nav-glass .iw-primary-nav a:hover {
    color: var(--iw-black);
    background: color-mix(in srgb, var(--iw-black) 4%, transparent);
}
.iw-primary-nav a.iw-nav-link--active,
.iw-primary-nav a[aria-current="page"],
.iw-header-nav-glass .iw-primary-nav a.iw-nav-link--active,
.iw-header-nav-glass .iw-primary-nav a[aria-current="page"] {
    color: #fff;
    background: var(--iw-brand);
    box-shadow: none;
    font-weight: 700;
}
.iw-primary-nav a.iw-nav-link--active:hover,
.iw-primary-nav a[aria-current="page"]:hover,
.iw-header-nav-glass .iw-primary-nav a.iw-nav-link--active:hover,
.iw-header-nav-glass .iw-primary-nav a[aria-current="page"]:hover {
    color: #fff;
    background: color-mix(in srgb, var(--iw-brand) 88%, black);
}

.iw-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    flex-shrink: 0;
    /* Reserva ancho fijo: evita que el menú “respire” cuando pintan $ / carrito / cuenta */
    min-width: 11.5rem;
    position: relative;
    z-index: 3;
    overflow: visible;
}
@media (min-width: 1024px) {
    .iw-header-actions { min-width: 14.5rem; }
}
.iw-header-currency {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.iw-header-currency .iw-sf-currency-switcher,
.iw-mobile-drawer__currency .iw-sf-currency-switcher {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    vertical-align: middle;
}
.iw-header-currency .iw-sf-segment,
.iw-mobile-drawer__currency .iw-sf-segment {
    border: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
    border-radius: 9999px;
    background: color-mix(in srgb, var(--iw-surface) 80%, var(--iw-white));
    box-shadow: none;
    overflow: hidden;
}
.iw-header-currency .iw-sf-segment__thumb,
.iw-mobile-drawer__currency .iw-sf-segment__thumb {
    background: var(--iw-brand);
    box-shadow: none;
    filter: none;
}
.iw-header-currency .iw-sf-segment__btn,
.iw-mobile-drawer__currency .iw-sf-segment__btn {
    color: var(--iw-brand);
    -webkit-text-fill-color: var(--iw-brand);
    background: transparent;
}
.iw-header-currency .iw-sf-segment__btn:hover,
.iw-mobile-drawer__currency .iw-sf-segment__btn:hover {
    color: var(--iw-brand);
    -webkit-text-fill-color: var(--iw-brand);
    background: transparent;
}
.iw-header-currency .iw-sf-segment__btn.is-on,
.iw-mobile-drawer__currency .iw-sf-segment__btn.is-on {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: transparent;
    box-shadow: none;
}
.iw-header-currency .iw-sf-segment__btn.is-on:hover,
.iw-mobile-drawer__currency .iw-sf-segment__btn.is-on:hover {
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: none;
}
.iw-mobile-drawer__currency {
    margin: 0 0 0.35rem;
}
.iw-mobile-drawer__currency .iw-sf-currency-switcher {
    width: auto;
    justify-content: flex-start;
}
@media (min-width: 640px) {
    .iw-header-actions { gap: 0.25rem; }
}
@media (min-width: 1024px) {
    .iw-header-actions { gap: 0.375rem; }
}

.iw-header-action--desktop-only { display: none; }
@media (min-width: 1024px) {
    .iw-header-action--desktop-only { display: inline-flex; }
}

.iw-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 9999px;
    color: color-mix(in srgb, var(--iw-black) 62%, transparent);
    border: 1px solid transparent;
    transition: background .2s, color .2s, border-color .2s;
}
.iw-header-count {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--iw-brand);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    pointer-events: none;
    box-shadow: 0 0 0 2px var(--iw-white);
}
.iw-header-count.hidden,
.iw-header-count[hidden] {
    display: none !important;
}
@media (min-width: 640px) {
    .iw-header-action {
        width: 2.625rem;
        height: 2.625rem;
        min-width: 44px;
        min-height: 44px;
    }
}
.iw-header-action:hover {
    color: var(--iw-black);
    background: color-mix(in srgb, var(--iw-black) 5%, transparent);
    border-color: color-mix(in srgb, var(--iw-black) 8%, transparent);
}

.iw-header-account {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.625rem;
    padding: 0 0.95rem 0 0.8rem;
    border-radius: var(--iw-hero-btn-radius, 0.7rem);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
@media (min-width: 1024px) {
    .iw-header-account { display: inline-flex; }
}
.iw-header-account__icon {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}
.iw-header-account__name {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iw-header-account--guest,
.iw-header-account--in {
    background: var(--iw-brand);
    border: 1px solid var(--iw-brand);
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: none;
}
.iw-header-account--guest:hover,
.iw-header-account--in:hover {
    background: color-mix(in srgb, var(--iw-brand) 82%, black);
    border-color: color-mix(in srgb, var(--iw-brand) 82%, black);
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.iw-header-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    flex-shrink: 0;
    border-radius: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--iw-black) 10%, transparent);
    background: var(--iw-white);
    color: var(--iw-black);
    box-shadow: none;
}
.iw-header-menu-btn svg {
    width: 1.15rem;
    height: 1.15rem;
}
@media (min-width: 640px) {
    .iw-header-menu-btn {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 44px;
        min-height: 44px;
        border-radius: 0.875rem;
        box-shadow: var(--iw-shadow-xs);
    }
    .iw-header-menu-btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}
@media (min-width: 1024px) { .iw-header-menu-btn { display: none; } }

/* Drawer móvil / tablet */
html.iw-mobile-nav-open,
html.iw-mobile-nav-open body {
    overflow: hidden;
    overscroll-behavior: none;
}
html.iw-mobile-nav-open .iw-float-social,
html.iw-mobile-nav-open .iw-floating-rail,
html.iw-mobile-nav-open .iw-floating-social-hub,
html.iw-mobile-nav-open .sbc-mobile-search-fab {
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* El stack expandido no debe crecer el riel: en Chrome móvil eso deja un recuadro blanco bajo el pie al hacer scroll. */
.iw-site .iw-floating-rail {
    contain: none;
    max-width: min(20rem, calc(100% - 2.25rem));
}
/* Prod Windows (scrollbar clásica ~15px): right fijo + badge -6px queda bajo la barra.
   Más aire a la derecha; no usar 100vw (incluye el ancho del scrollbar). */
.iw-site .iw-floating-rail--right {
    right: max(1.5rem, calc(1rem + env(safe-area-inset-right, 0px)));
}
.iw-site .iw-floating-rail--left {
    left: max(1.125rem, env(safe-area-inset-left, 0px));
}
.iw-site .iw-floating-social-hub__badge {
    right: 0;
}
.iw-site .iw-floating-rail--left .iw-floating-social-hub__badge {
    right: auto;
    left: 0;
}
.iw-site .iw-floating-social-hub__stack--expanded.iw-floating-social-hub__stack--vertical,
.iw-site .iw-floating-social-hub__stack--always-expanded.iw-floating-social-hub__stack--vertical {
    height: var(--iw-hub-size, 48px);
}
.iw-site .iw-floating-social-hub__stack--expanded.iw-floating-social-hub__stack--horizontal,
.iw-site .iw-floating-social-hub__stack--always-expanded.iw-floating-social-hub__stack--horizontal {
    width: var(--iw-hub-size, 48px);
    height: var(--iw-hub-size, 48px);
}
.iw-mobile-nav-root {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
}
.iw-mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--iw-black) 38%, transparent);
}
.iw-mdraw-backdrop-enter-active,
.iw-mdraw-backdrop-leave-active { transition: opacity .28s ease; }
.iw-mdraw-backdrop-enter-from,
.iw-mdraw-backdrop-leave-to { opacity: 0; }
.iw-mdraw-backdrop-enter-to,
.iw-mdraw-backdrop-leave-from { opacity: 1; }

.iw-mobile-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(19.5rem, 100%);
    min-width: 0;
    background: var(--iw-white);
    box-shadow: -12px 0 40px color-mix(in srgb, var(--iw-black) 14%, transparent);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--iw-black);
}
.iw-mobile-drawer a,
.iw-mobile-drawer button,
.iw-mobile-drawer p,
.iw-mobile-drawer input {
    font-family: inherit;
    box-shadow: none;
}
.iw-mobile-drawer a {
    text-decoration: none;
    color: inherit;
}

.iw-header-search-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 0.625rem);
    z-index: 60;
    width: min(100vw - 2rem, 24rem);
    padding: 0.875rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
    background: var(--iw-white);
    box-shadow: var(--iw-shadow-lg);
}
.iw-header-search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--iw-black) 10%, transparent);
    background: var(--iw-surface);
    padding: 0.35rem 0.35rem 0.35rem 1rem;
}
.iw-header-search-form input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    color: var(--iw-black);
    outline: none;
}
.iw-header-search-form input::placeholder { color: color-mix(in srgb, var(--iw-black) 38%, transparent); }
.iw-header-search-form button {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--iw-brand);
    color: white;
}

.iw-mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
}
.iw-mobile-drawer__logo {
    max-width: min(8.75rem, 58%) !important;
}
.iw-mobile-drawer .iw-header-logo__img {
    height: 1.85rem;
    max-height: 1.85rem !important;
}
.iw-mobile-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--iw-black);
}
.iw-mobile-drawer__close svg {
    width: 1.1rem;
    height: 1.1rem;
}
.iw-mobile-drawer__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.75rem 0.85rem 1rem;
    min-width: 0;
}
.iw-mobile-drawer__search {
    position: relative;
    margin: 0 0 0.65rem;
}
.iw-mobile-drawer__search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    width: 0.95rem;
    height: 0.95rem;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--iw-black) 42%, transparent);
    pointer-events: none;
}
.iw-mobile-drawer__search input {
    width: 100%;
    height: 2.35rem;
    padding: 0 0.75rem 0 2.15rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--iw-black) 10%, transparent);
    background: var(--iw-surface);
    color: var(--iw-black);
    font-size: 0.8125rem;
    outline: none;
}
.iw-mobile-drawer__search input:focus {
    border-color: color-mix(in srgb, var(--iw-brand) 45%, transparent);
    background: var(--iw-white);
}
.iw-mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.iw-mobile-drawer__kicker {
    margin: 0.85rem 0 0.15rem;
    padding: 0 0.15rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--iw-black) 42%, transparent);
}
.iw-mobile-drawer__kicker:first-child {
    margin-top: 0.15rem;
}
.iw-mobile-drawer__link {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--iw-black);
}
.iw-mobile-drawer__link.is-active {
    background: var(--iw-brand);
    color: #fff;
}
.iw-mobile-drawer__foot {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--iw-black) 8%, transparent);
}
.iw-mobile-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}
.iw-mobile-drawer__actions > :only-child {
    grid-column: 1 / -1;
}
.iw-mobile-drawer__account,
.iw-mobile-drawer__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.4rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}
.iw-mobile-drawer__account {
    border: 1px solid color-mix(in srgb, var(--iw-black) 12%, transparent);
    background: var(--iw-white);
    color: var(--iw-black);
}
.iw-mobile-drawer__wa {
    border: 1px solid var(--iw-brand);
    background: var(--iw-brand);
    color: #fff;
    -webkit-text-fill-color: #fff;
}
.iw-mobile-drawer__phone {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--iw-black) 50%, transparent);
}

.iw-mdraw-enter-active { transition: transform .32s cubic-bezier(.22,1,.36,1); }
.iw-mdraw-enter-from { transform: translateX(100%); }
.iw-mdraw-enter-to { transform: none; }
.iw-mdraw-leave-active { transition: transform .22s ease-in; }
.iw-mdraw-leave-from { transform: none; }
.iw-mdraw-leave-to { transform: translateX(100%); }

/* Flotantes */
.iw-float-social {
    position: fixed;
    right: max(1.5rem, calc(1rem + env(safe-area-inset-right, 0px)));
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.iw-float-social__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    color: white;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
    transition: transform .25s ease;
}
.iw-float-social__btn:hover { transform: scale(1.1); }
.iw-float-social__btn--wa { background: #25d366; }
.iw-float-social__btn--fb { background: #1877f2; }
.iw-float-social__btn--ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.iw-float-social__btn--li { background: #0a66c2; }
.iw-float-social__btn--yt { background: #ff0000; }
.iw-float-social__btn--tk, .iw-float-social__btn--x { background: var(--iw-black); border: 1px solid rgba(255,255,255,.15); }
.iw-float-social__btn--tg { background: #229ed9; }

@media (prefers-reduced-motion: reduce) {
    .iw-topbar__dot { animation: none; }
    .iw-mdraw-enter-active, .iw-mdraw-leave-active { transition-duration: .01ms !important; }
    .iw-float-social__btn:hover { transform: none; }
}