/* =========================================================
   GABA3 — REFINAMIENTO MÓVIL PROFESIONAL (ergonomía, no rebrand)
   Mantiene madera, verde oficial, logo y volantín.
   Tipografía más ligera, cabecera limpia, safe-area.
========================================================= */

:root{
    --gaba3-font:"Inter","Noto Sans","SF Pro Text","Segoe UI",system-ui,sans-serif;
    --gaba3-header-icon:40px;
    --gaba3-header-gap:2px;
}

/* É exibido somente no cabeçalho compacto do celular. */
.boton-busca-movel{display:none}

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    font-family:var(--gaba3-font)!important;
    font-weight:400;
    letter-spacing:.01em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,.seccion-cabecera h2{
    font-family:var(--gaba3-font)!important;
    font-weight:600!important;
    letter-spacing:-.01em;
}

button,input,select,textarea,a,.menu-movil a{
    font-family:inherit;
    font-weight:400;
}

.boton-principal,.auth-btn-principal{
    font-weight:500!important;
    letter-spacing:.02em;
}

/* Lupa independiente eliminada: solo el buscador de madera es oficial */

/* ---- Cabecera: logo | busca | notificações | mensagens | menu — tudo numa
   linha só (a busca fica centrada entre a marca e os ícones; a segunda linha
   que ela ocupava antes fica livre para outro conteúdo). ---- */
body:not(.pagina-sala):not(.shorts-page) .barra-superior{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:0!important;
    min-height:0!important;
    padding:
        calc(8px + env(safe-area-inset-top,0px))
        max(12px, env(safe-area-inset-right,0px))
        8px
        max(12px, env(safe-area-inset-left,0px))!important;
    box-sizing:border-box;
}

body:not(.pagina-sala):not(.shorts-page) .marca-busqueda{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    align-self:center!important;
}

body:not(.pagina-sala):not(.shorts-page) .busqueda-interna{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
}

body:not(.pagina-sala):not(.shorts-page) .cuenta-usuario{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:var(--gaba3-header-gap)!important;
    margin:0!important;
    position:relative;
}

/* Perfil visível no cabeçalho: logo | buscador | notificações | mensagens | perfil | ☰ */
body:not(.pagina-sala) .barra-superior .header-perfil-slot{
    flex:none!important;
}

/* Logo sem tablita — nem no mobile nem no web: fundo transparente de
   verdade (a regra antiga de estilo.css ainda pintava madeira aqui, só o
   border/shadow tinham sumido — por isso sobrava uma mancha sem moldura). */
body:not(.pagina-sala) .barra-superior .marca{
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    padding:8px var(--screw-inset, 15px)!important;
    gap:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    outline:none!important;
    box-shadow:none!important;
}
body:not(.pagina-sala) .barra-superior .marca::before,
body:not(.pagina-sala) .barra-superior .marca::after{
    content:none!important;
    display:none!important;
}
body:not(.pagina-sala) .barra-superior .placa-tornillo{
    display:none!important;
}
body:not(.pagina-sala) .barra-superior .marca .brand-content{
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    padding:2px clamp(8px,1vw,14px) 2px 2px!important;
    min-width:0!important;
}
body:not(.pagina-sala) .barra-superior img.marca-icono,
body:not(.pagina-sala) .barra-superior .marca .marca-icono{
    width:118px!important;
    height:78px!important;
    margin-right:-8px!important;
    filter:none!important;
}
body:not(.pagina-sala) .barra-superior .marca-nombre-led{
    gap:0!important;
}
@keyframes gaba3-led-respiro-verde{
    0%,100%{
        text-shadow:
            0 1px 0 #2ea917,
            0 2px 0 #268b13,
            0 3px 0 #1e6d0f,
            0 4px 0 #16500b,
            0 0 8px rgba(77,236,122,.12);
    }
    50%{
        text-shadow:
            0 1px 0 #2ea917,
            0 2px 0 #268b13,
            0 3px 0 #1e6d0f,
            0 4px 0 #16500b,
            0 0 16px rgba(77,236,122,.28);
    }
}
@keyframes gaba3-led-respiro-branco{
    0%,100%{
        text-shadow:
            0 1px 0 #d4d4d4,
            0 2px 0 #b0b0b0,
            0 3px 0 #8c8c8c,
            0 4px 0 #686868,
            0 0 8px rgba(255,255,255,.10);
    }
    50%{
        text-shadow:
            0 1px 0 #d4d4d4,
            0 2px 0 #b0b0b0,
            0 3px 0 #8c8c8c,
            0 4px 0 #686868,
            0 0 16px rgba(255,255,255,.22);
    }
}
body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
    font-size:44px!important;
    font-weight:900!important;
    font-family:'Inter',var(--gaba3-font),sans-serif!important;
    letter-spacing:-0.02em!important;
    color:#4dec7a!important;
    text-shadow:
        0 1px 0 #2ea917,
        0 2px 0 #268b13,
        0 3px 0 #1e6d0f,
        0 4px 0 #16500b,
        0 0 8px rgba(77,236,122,.12)!important;
    animation:gaba3-led-respiro-verde 9s ease-in-out infinite;
    transition:text-shadow .35s ease, filter .35s ease;
}
body:not(.pagina-sala) .barra-superior .marca-nombre-led i:nth-child(5){
    color:#ffffff!important;
    text-shadow:
        0 1px 0 #d4d4d4,
        0 2px 0 #b0b0b0,
        0 3px 0 #8c8c8c,
        0 4px 0 #686868,
        0 0 8px rgba(255,255,255,.10)!important;
    animation:gaba3-led-respiro-branco 9s ease-in-out infinite;
}
body:not(.pagina-sala) .barra-superior .marca:hover .marca-nombre-led i,
body:not(.pagina-sala) .barra-superior .marca:focus-visible .marca-nombre-led i{
    text-shadow:
        0 1px 0 #2ea917,
        0 2px 0 #268b13,
        0 3px 0 #1e6d0f,
        0 4px 0 #16500b,
        0 0 22px rgba(77,236,122,.52)!important;
    filter:brightness(1.05);
}
body:not(.pagina-sala) .barra-superior .marca:hover .marca-nombre-led i:nth-child(5),
body:not(.pagina-sala) .barra-superior .marca:focus-visible .marca-nombre-led i:nth-child(5){
    text-shadow:
        0 1px 0 #d4d4d4,
        0 2px 0 #b0b0b0,
        0 3px 0 #8c8c8c,
        0 4px 0 #686868,
        0 0 18px rgba(255,255,255,.38)!important;
}
/* Ícones superiores: mesmo tamanho visual, sem caixas grossas */
body:not(.pagina-sala) .barra-superior .boton-notificaciones,
body:not(.pagina-sala) .barra-superior .boton-buzon,
body:not(.pagina-sala) .barra-superior .boton-hamburguesa{
    display:grid!important;
    place-items:center!important;
    width:var(--gaba3-header-icon)!important;
    height:var(--gaba3-header-icon)!important;
    min-width:var(--gaba3-header-icon)!important;
    min-height:var(--gaba3-header-icon)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:rgba(245,230,200,.92)!important;
    font-size:20px!important;
    line-height:1!important;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, transform .12s ease;
}

/* Celular (barra de baixo nova, 2026-10-08): o envelope mora em "Mensagens" da
   barra de baixo (mesmo menu, mesmo contador), e o ☰ volta à cabeceira no lugar
   dele — o menu completo segue a um toque para visitante e para conta.
   Cabeçalho móvel = logo | lupa | sino | perfil ou "Criar conta" | ☰. */
@media (max-width:820px){
    body:not(.pagina-sala) .barra-superior .boton-buzon{
        display:none!important;
    }
    /* Sem o botão do envelope na cabeceira, o menu dele abre preso à tela,
       à direita como o do sino (tablet) ou na largura toda (celular). */
    body:not(.pagina-sala) .cuenta-usuario #buzon-dropdown{
        position:fixed;
        top:68px;
        left:auto;
        right:8px;
        width:min(380px, calc(100vw - 16px));
        min-width:0;
        max-width:none;
    }
}
@media (max-width:600px){
    body:not(.pagina-sala) .cuenta-usuario #buzon-dropdown{
        top:56px;
        left:8px;
        width:auto;
    }
}

body:not(.pagina-sala) .barra-superior .boton-notificaciones:hover,
body:not(.pagina-sala) .barra-superior .boton-buzon:hover,
body:not(.pagina-sala) .barra-superior .boton-hamburguesa:hover,
body:not(.pagina-sala) .barra-superior .boton-notificaciones:focus-visible,
body:not(.pagina-sala) .barra-superior .boton-buzon:focus-visible,
body:not(.pagina-sala) .barra-superior .boton-hamburguesa:focus-visible{
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    outline:none;
}
body:not(.pagina-sala) .barra-superior .boton-buzon{
    grid-template-rows:none!important;
    gap:0!important;
}
body:not(.pagina-sala) .barra-superior .boton-buzon .icono-buzon{
    font-size:20px!important;
}
body:not(.pagina-sala) .barra-superior .boton-buzon.buzon-participacion{
    border:0!important;
    background:transparent!important;
    color:rgba(245,230,200,.92)!important;
}
body:not(.pagina-sala) .barra-superior .boton-notificaciones{
    display:grid!important;
}
body:not(.pagina-sala) .barra-superior .contador-notificaciones,
body:not(.pagina-sala) .barra-superior .contador-buzon{
    top:2px!important;
    right:2px!important;
    min-width:15px!important;
    height:15px!important;
    font-size:9px!important;
    font-weight:600!important;
}
body:not(.pagina-sala) .barra-superior .contador-notificaciones[hidden],
body:not(.pagina-sala) .barra-superior .contador-buzon[hidden]{
    display:none!important;
}

/* Buscador abaixo da cabecera — mais baixo, tipografia fina */
body:not(.pagina-sala) .barra-superior .cinta-crear-header{
    min-height:38px!important;
    height:38px!important;
    gap:10px!important;
    padding:0 12px!important;
    border-radius:12px!important;
}
body:not(.pagina-sala) .barra-superior .buscador-inline-input{
    font-size:14px!important;
    font-weight:400!important;
    letter-spacing:.01em;
    color:rgba(245,228,195,.95)!important;
}
body:not(.pagina-sala) .barra-superior .buscador-inline-input::placeholder{
    /* Contraste AA: antes 2,20:1; com o véu mais escuro do buscador, ~6,5:1. */
    color:#ead9bb!important;
    font-weight:400!important;
}

/* Categorias: mais baixas, letras finas, mais espaço */
body:not(.pagina-sala) .categorias-contenedor{
    top:calc(66px + env(safe-area-inset-top,0px))!important;
    padding:
        6px
        max(12px, env(safe-area-inset-right,0px))
        6px
        max(12px, env(safe-area-inset-left,0px))!important;
    margin-inline:0!important;
}

/* Tipografia de secções / cards — menos “inflada” */
body:not(.pagina-sala) .seccion-cabecera h2{
    font-size:17px!important;
    font-weight:600!important;
}
body:not(.pagina-sala) .sala-contenido h3,
body:not(.pagina-sala) .sala-card h3{
    font-weight:500!important;
}
body:not(.pagina-sala) .sala-contenido p{
    font-weight:400!important;
}

/* Safe-area inferior + menu móvel (navegação intacta) */
@media (max-width:820px){
    body:not(.pagina-sala):not(.shorts-page){
        padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
    }
    body:not(.pagina-sala):not(.shorts-page) main{
        padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
        padding-inline:max(12px, env(safe-area-inset-left,0px)) max(12px, env(safe-area-inset-right,0px))!important;
    }

    /* Pedido do dono 2026-09-15 (repetido, a primeira vez não foi larga o
       bastante): as tarjetas das salas públicas (Comércio, Profissionais,
       Criadores) tinham que ficar ainda mais largas —
       agora vão até a borda real da tela, sem nenhum respiro sobrando. */
    body:not(.pagina-sala) .gaba3-layout-main .seccion:not(#shorts-gaba3):not(#salas-privadas) .gaba3-carrossel-caixa{
        margin-inline:-12px!important;
    }
    body:not(.pagina-sala) .gaba3-layout-main .seccion:not(#shorts-gaba3):not(#salas-privadas) .gaba3-carrossel{
        padding-inline:0!important;
    }
    .menu-movil{
        height:calc(56px + env(safe-area-inset-bottom,0px))!important;
        padding:
            0
            max(6px, env(safe-area-inset-right,0px))
            env(safe-area-inset-bottom,0px)
            max(6px, env(safe-area-inset-left,0px))!important;
        /* Pedido do dono, 2026-09-16: ficava "nem escuro nem madeira"
           (a textura clara demais aparecendo por baixo do degradê fraco).
           Mesma escurecida forte já usada no painel de busca mobile
           (linha ~836 deste arquivo) — madeira escura de verdade, não
           uma mistura ambígua. */
        background:
            linear-gradient(180deg,rgba(8,6,4,.97),rgba(12,9,6,.98)),
            url("../assets/brand/fondo-madera-oscura-gaba3.webp") center/cover no-repeat!important;
        border-top:1px solid rgba(187,126,55,.35)!important;
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }
    /* Cada item ocupa a altura toda da barra (alvo de toque ≥ 44 px, antes 33 px). */
    .menu-movil a{
        position:relative;
        align-self:stretch;
        min-height:48px;
        justify-content:center;
        font-size:10px!important;
        font-weight:500!important;
        letter-spacing:.02em;
        gap:2px!important;
        color:rgba(210,190,160,.72)!important;
    }
    .menu-movil a span{
        font-size:18px!important;
    }
    .menu-movil a[aria-current]{
        color:#8dff62!important;
        font-weight:500!important;
    }
    .menu-movil a:focus-visible{
        outline:2px solid #8dff62;
        outline-offset:-4px;
        border-radius:10px;
    }
    /* Contador de "Mensagens": o mesmo total do envelope, junto do ícone. */
    .menu-movil .menu-movil-contador{
        position:absolute;
        top:4px;
        left:calc(50% + 6px);
        min-width:17px;
        height:17px;
        padding:0 4px;
        display:grid;
        place-items:center;
        box-sizing:border-box;
        border:2px solid #0c0906;
        border-radius:99px;
        background:#ef3f5b;
        color:#fff;
        font:800 9px/1 system-ui,sans-serif;
    }
    .menu-movil .menu-movil-contador[hidden]{
        display:none!important;
    }
}

@media (max-width:820px){
    body:not(.pagina-sala) .barra-superior .marca{
        --screw-size: clamp(7px, 2vw, 9px);
        --screw-inset: 9px;
        --screw-edge: 3px;
        padding:6px var(--screw-inset)!important;
        border-radius:9px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca .brand-content{
        gap:0!important;
        padding:1px 8px!important;
    }
    body:not(.pagina-sala) .barra-superior img.marca-icono,
    body:not(.pagina-sala) .barra-superior .marca .marca-icono{
        width:60px!important;
        height:40px!important;
        margin-right:-3px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        font-size:22px!important;
    }
}

@media (max-width:560px){
    body:not(.pagina-sala) .barra-superior{
        row-gap:7px!important;
        padding-inline:max(10px, env(safe-area-inset-left,0px)) max(10px, env(safe-area-inset-right,0px))!important;
    }
    body:not(.pagina-sala) .barra-superior img.marca-icono,
    body:not(.pagina-sala) .barra-superior .marca .marca-icono{
        width:54px!important;
        height:36px!important;
        margin-right:-3px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        font-size:20px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca{
        --screw-size: 8px;
        --screw-inset: 8px;
        --screw-edge: 3px;
        padding:5px var(--screw-inset)!important;
        border-radius:9px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca .brand-content{
        gap:0!important;
        padding:1px 7px!important;
    }
    :root{ --gaba3-header-icon:38px; }
    body:not(.pagina-sala) .barra-superior .boton-notificaciones,
    body:not(.pagina-sala) .barra-superior .boton-buzon,
    body:not(.pagina-sala) .barra-superior .boton-hamburguesa{
        font-size:18px!important;
    }
    body:not(.pagina-sala) .barra-superior .cinta-crear-header{
        min-height:36px!important;
        height:36px!important;
        border-radius:11px!important;
    }
    body:not(.pagina-sala) .categorias-contenedor{
        top:calc(60px + env(safe-area-inset-top,0px))!important;
    }
}

@media (max-width:390px){
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        font-size:18px!important;
    }
    body:not(.pagina-sala) .barra-superior img.marca-icono,
    body:not(.pagina-sala) .barra-superior .marca .marca-icono{
        width:46px!important;
        height:31px!important;
        margin-right:-2px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca{
        --screw-size: 6px;
        --screw-inset: 7px;
        --screw-edge: 2px;
    }
    :root{ --gaba3-header-icon:34px; --gaba3-header-gap:0px; }
}

@media (max-width:430px){
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        font-size:19px!important;
    }
    body:not(.pagina-sala) .barra-superior img.marca-icono,
    body:not(.pagina-sala) .barra-superior .marca .marca-icono{
        width:50px!important;
        height:33px!important;
    }
}

/* La firma de la plataforma es texto de lectura, no un efecto 3D.
   En teléfono eliminamos las sombras apiladas para que GABA3 permanezca
   nítida sobre cualquier textura del encabezado. */
@media (max-width:820px){
    body:not(.pagina-sala) .barra-superior .marca-nombre-led{
        display:inline-flex!important;
        align-items:center!important;
        gap:1px!important;
        margin-left:0!important;
        filter:none!important;
        opacity:1!important;
    }

    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        color:#64e34b!important;
        font-size:18px!important;
        font-style:normal!important;
        font-weight:800!important;
        letter-spacing:0!important;
        line-height:1!important;
        opacity:1!important;
        text-shadow:0 1px 1px rgba(0,0,0,.9)!important;
        transform:none!important;
        filter:none!important;
        -webkit-text-stroke:0!important;
    }

    body:not(.pagina-sala) .barra-superior .marca-nombre-led i:nth-child(5){
        color:#fff!important;
        text-shadow:0 1px 1px rgba(0,0,0,.9)!important;
    }

    /* Os sete produtos principais deslizam numa fileira só, com o dedo —
       igual ao resto da GABA3 (nunca duas fileiras fixas, sem gesto). O
       tamanho e o scroll-snap reais ficam definidos mais abaixo, junto com
       o resto dos ajustes de 820px. */
    body:not(.pagina-sala) .acceso-plataforma{
        min-height:78px!important;
        padding:7px 1px!important;
    }

    body:not(.pagina-sala) .acceso-plataforma-texto b{
        max-width:100%!important;
        font-size:9.6px!important;
        letter-spacing:-.1px!important;
        line-height:1.15!important;
        text-align:center!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
        word-break:break-word!important;
        hyphens:auto!important;
    }

    body:not(.pagina-sala) .acceso-plataforma-texto small{display:none!important}
    /* Ícones soltos, sem caixa nem círculo de fundo — mesmo critério já
       aplicado na versão de escritório (regra logo abaixo, min-width:821px).
       Achado real na auditoria da portada móvel, 2026-09-22: aqui embaixo
       cada ícone tinha um quadrado colorido atrás, só no celular. */
    body:not(.pagina-sala) .acceso-plataforma-icono{
        transform:scale(.88)!important;
        background:transparent!important;
        box-shadow:none!important;
        filter:none!important;
    }
    body:not(.pagina-sala) .acceso-plataforma-icono svg{width:26px!important;height:26px!important}
    body:not(.pagina-sala) .acceso-plataforma-icono--privado{color:#55cf45!important}
    body:not(.pagina-sala) .acceso-plataforma-icono--profesionales{color:#58a8ff!important}
    body:not(.pagina-sala) .acceso-plataforma-icono--comercio{color:#ffae4b!important}
    body:not(.pagina-sala) .acceso-plataforma-icono--creadores{color:#ff6e9c!important}
    body:not(.pagina-sala) .acceso-plataforma-icono--v-cortos{color:#ff6b6b!important}
}

/* Desktop: cabeceira compacta. A portada privilegia as salas, não o chrome. */
@media (min-width:821px){
    body:not(.pagina-sala):not(.shorts-page) .barra-superior{
        grid-template-columns:auto minmax(220px,440px) minmax(80px,240px) 1fr auto!important;
        /* Las dos filas pertenecen al mismo lienzo de cabecera: marca y
           búsqueda arriba; accesos de producto debajo, sin crear otra barra. */
        grid-template-rows:58px 44px!important;
        min-height:110px!important;
        column-gap:14px!important;
        row-gap:0!important;
        align-items:center!important;
        position:fixed!important;
        top:0!important;
        left:0!important;
        right:0!important;
        width:100%!important;
        z-index:120!important;
        padding:4px 22px!important;
        /* No forzar un fondo oscuro aquí: la cabecera debe heredar el tema
           activo del body (pedra o oscuro) sin anular las reglas globales. */
        border-bottom:0!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .marca-busqueda{
        grid-column:1!important;
        grid-row:1!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .busqueda-interna{
        grid-column:auto!important;
        grid-row:1!important;
        position:absolute!important;
        left:50%!important;
        width:min(440px,calc(100% - 430px))!important;
        transform:translateX(-50%)!important;
        /* Bug real de auditoria (2026-09-14): sem isso, o resultado da busca
           (#buscador-inline-resultados, z-index:200 só dentro do próprio
           .busqueda-interna) ficava atrás da fileira de categorias
           (.header-productos herda .categorias-contenedor{z-index:110}) -
           era só o virar position:absolute aqui que nunca ganhou seu
           próprio z-index contra esse irmão na cabecera. */
        z-index:120!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos{
        position:relative!important;
        /* Anula el top heredado de la antigua franja sticky: ahora esta fila
           es parte de la grilla de la cabecera, no una barra independiente. */
        top:auto!important;
        /* El carrusel termina antes de las notificaciones (columna 5). */
        grid-column:2 / 5!important;
        grid-row:2!important;
        width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        /* La textura pertenece al fondo de la portada, nunca a una segunda
           franja. Esta fila queda transparente dentro de la misma cabecera. */
        background:transparent!important;
        border:0!important;
        box-shadow:none!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos::after{
        content:"›";
        position:absolute;
        z-index:2;
        top:50%;
        right:0;
        width:20px;
        height:40px;
        display:grid;
        place-items:center;
        transform:translateY(-50%);
        color:#b9eab1;
        font:400 30px/1 Arial,sans-serif;
        text-shadow:0 1px 4px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.6);
        pointer-events:none;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .accesos-plataforma{
        display:grid!important;
        grid-auto-flow:column!important;
        grid-auto-columns:92px!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:9px!important;
        margin:0!important;
        /* Reserva el borde derecho para la flecha: el último icono nunca
           queda debajo de ella. */
        padding:2px 42px 2px 4px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        scrollbar-width:none;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma{
        position:relative!important;
        flex:0 0 92px!important;
        width:92px!important;
        min-width:92px!important;
        min-height:58px!important;
        height:auto!important;
        padding:6px 4px 8px!important;
        border:0!important;
        border-radius:7px!important;
        background:transparent!important;
        box-shadow:none!important;
        transform:none!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma{
        transition:transform .22s cubic-bezier(0.2, 0.9, 0.3, 1), background-color .22s ease, box-shadow .22s ease!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma:hover,
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma:focus-visible{
        transform:translateY(-2px)!important;
        background:rgba(255,255,255,.08)!important;
        outline:none!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma[data-plataforma="privado"]:hover{
        box-shadow:0 4px 14px rgba(0,0,0,.4), 0 2px 10px rgba(85,207,69,.22)!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma[data-plataforma="profesionales"]:hover{
        box-shadow:0 4px 14px rgba(0,0,0,.4), 0 2px 10px rgba(88,168,255,.22)!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma[data-plataforma="comercio"]:hover{
        box-shadow:0 4px 14px rgba(0,0,0,.4), 0 2px 10px rgba(255,174,75,.22)!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma[data-plataforma="creadores"]:hover{
        box-shadow:0 4px 14px rgba(0,0,0,.4), 0 2px 10px rgba(255,110,156,.22)!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma[data-plataforma="v-cortos"]:hover{
        box-shadow:0 4px 14px rgba(0,0,0,.4), 0 2px 10px rgba(255,107,107,.22)!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma:active{
        transform:scale(0.95)!important;
        transition:transform .08s ease-out!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono{
        width:35px!important;
        height:35px!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
        filter:none!important;
        opacity:1!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono svg{width:32px!important;height:32px!important;shape-rendering:geometricPrecision!important}
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono--privado{color:#55cf45!important}
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono--profesionales{color:#58a8ff!important}
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono--comercio{color:#ffae4b!important}
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono--creadores{color:#ff6e9c!important}
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono--v-cortos{color:#ff6b6b!important}
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-texto{
        position:static!important;
        display:flex!important;
        flex-direction:column!important;
        width:auto!important;
        height:auto!important;
        padding:0!important;
        margin:0!important;
        overflow:visible!important;
        clip:auto!important;
        white-space:normal!important;
        border:0!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .cuenta-usuario{
        grid-column:5!important;
        grid-row:1!important;
        gap:7px!important;
    }
    body:not(.pagina-sala) .barra-superior img.marca-icono,
    body:not(.pagina-sala) .barra-superior .marca .marca-icono{
        width:52px!important;
        height:35px!important;
        margin:0!important;
        filter:drop-shadow(0 2px 4px rgba(0,0,0,.46))!important;
    }
    body:not(.pagina-sala) .barra-superior .marca-nombre-led{
        margin-left:0!important;
        gap:1px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        font-size:27px!important;
        font-weight:900!important;
        color:#4dec7a!important;
        text-shadow:
            0 1px 0 #2ea917,
            0 2px 0 #268b13,
            0 3px 5px rgba(0,0,0,.52)!important;
    }
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i:nth-child(5){
        color:#ffffff!important;
        text-shadow:
            0 1px 0 #d4d4d4,
            0 2px 0 #b0b0b0,
            0 3px 5px rgba(0,0,0,.52)!important;
    }
    body:not(.pagina-sala) .barra-superior .marca{
        padding:2px 0!important;
    }
    body:not(.pagina-sala) .barra-superior .marca .brand-content{
        gap:7px!important;
        padding:0!important;
    }
    body:not(.pagina-sala) .barra-superior .cinta-crear-header{
        min-height:36px!important;
        height:36px!important;
        padding:0 12px!important;
        border-radius:10px!important;
    }
    body:not(.pagina-sala) .barra-superior .buscador-inline-input{
        font-size:13px!important;
    }
    body:not(.pagina-sala) .barra-superior .buscador-inline-lupa{
        transform:none!important;
    }
    /* Ações pessoais: mesma escala, sem uma bolita dominando a cabeceira. */
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .boton-notificaciones,
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .boton-buzon,
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .perfil-miniatura,
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .boton-hamburguesa{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important;
        font-size:17px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .boton-notificaciones svg,
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .icono-buzon svg{
        width:17px!important;
        height:17px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .barra-superior #header-perfil-slot{
        margin-left:0!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .header-criar-conta-link{
        height:32px!important;
        min-height:32px!important;
        padding:0 10px!important;
        border-radius:16px!important;
        font-size:12px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .contador-notificaciones,
    body:not(.pagina-sala):not(.shorts-page) .barra-superior .contador-buzon{
        top:-2px!important;
        right:-2px!important;
        min-width:13px!important;
        height:13px!important;
        font-size:8px!important;
    }
    /* Bug real relatado pelo dono (escritório): esse "top" fixo em 72px foi
       calibrado pra uma altura de cabeçalho que não é mais a real — o
       cabeçalho às vezes mede bem mais (ex. 122.8px, dois blocos de
       identidade+busca) — sobrava um trecho onde o cabeçalho (z-index mais
       alto) cobria de verdade o topo dos ícones, "comendo" um pedaço deles.
       Mesma variável já usada e medida de verdade no <script> de index.html
       (ResizeObserver no .barra-superior) — nunca mais um número chutado. */
    body:not(.pagina-sala) .categorias-contenedor{
        top:var(--gaba3-header-h, 92px)!important;
    }
    body:not(.pagina-sala) .acceso-plataforma-texto b{
        font-size:14.5px!important;
        color:#ffffff!important;
    }
    body:not(.pagina-sala) .acceso-plataforma-texto small{
        font-size:11.5px!important;
        color:#ffffff!important;
    }
}

/* =========================================================
   PORTADA — BASE MÓVEL ÚNICA
   Esta camada fica no fim do arquivo intencionalmente. Ela substitui as
   tentativas antigas que alternavam entre uma e duas linhas no cabeçalho.
   Assim, a leitura e a área de toque permanecem estáveis de 320 a 820 px.
========================================================= */
@media (max-width:820px){
    body:not(.pagina-sala):not(.shorts-page) .barra-superior{
        grid-template-columns:minmax(0,1fr) auto!important;
        grid-template-rows:auto!important;
        align-items:center!important;
        gap:8px 10px!important;
        padding:
            calc(8px + env(safe-area-inset-top,0px))
            max(12px, env(safe-area-inset-right,0px))
            9px
            max(12px, env(safe-area-inset-left,0px))!important;
        position:fixed!important;
        top:0!important;
        left:0!important;
        right:0!important;
        width:100%!important;
        z-index:120!important;
    }

    /* Achado real 2026-09-22 (o dono flagrou na imagem): centrar a lupa
       contra .barra-superior inteira (108px, 2 filas) jogava o botão bem
       na costura entre a fila 1 (logo/ícones) e a fila 2 (categorias) —
       cortado ao meio, sobrepondo as duas. Correção real: .marca-busqueda
       passa a ocupar a LARGURA TOTAL da fila 1 (grid-column:1/-1, atrás de
       .cuenta-usuario na pintura — ela vem depois no DOM, então continua
       clicável por cima), mas sua ALTURA continua sendo só a da fila 1
       (nunca esticada pelas 2 filas, porque align-items:center no grid pai
       não estica os itens). Centrar a lupa dentro dela agora bate com o
       centro real da fila 1, nunca da cabeceira inteira. */
    body:not(.pagina-sala):not(.shorts-page) .marca-busqueda{
        grid-column:1/-1!important;
        grid-row:1!important;
        display:flex!important;
        align-items:center!important;
        gap:6px!important;
    }

    body:not(.pagina-sala):not(.shorts-page) .cuenta-usuario{
        grid-column:2!important;
        grid-row:1!important;
        max-width:calc(100vw - 84px);
        position:relative!important;
        /* Achado real 2026-09-28 (o dono flagrou): com z-index:1 os menus
           do buzón e da campainha (filhos daqui, z 300) ficavam PRESOS
           abaixo da fila de ícones (#explorar, 110) e da cinta de
           cotações (121), que também moram dentro da cabeceira. 125 põe
           esta caixa por cima das duas; ela só ocupa a fila 1, então não
           cobre nenhum ícone. */
        z-index:125!important;
    }
    /* A cinta de cotações mora FORA da cabeceira, com z 121 (acima dela de
       propósito). Enquanto o buzón ou a campainha estiverem abertos, a
       cabeceira sobe acima da cinta; fechou, volta ao normal. */
    body:not(.pagina-sala):not(.shorts-page) .barra-superior:has(.icono-header-dropdown:not([hidden])){
        z-index:130!important;
    }

    body:not(.pagina-sala):not(.shorts-page) .busqueda-interna{
        display:none!important;
        position:fixed!important;
        z-index:1800!important;
        top:calc(var(--gaba3-header-h, 62px) + env(safe-area-inset-top,0px))!important;
        bottom:auto!important;
        left:0!important;
        right:0!important;
        width:auto!important;
        min-height:min(44dvh, 390px)!important;
        max-height:calc(100dvh - var(--gaba3-header-h, 62px) - 112px)!important;
        padding:16px max(14px, env(safe-area-inset-right,0px)) 22px max(14px, env(safe-area-inset-left,0px))!important;
        overflow:auto!important;
        border-top:1px solid rgba(197,143,75,.4)!important;
        border-bottom:1px solid rgba(197,143,75,.32)!important;
        background:linear-gradient(180deg,rgba(8,6,4,.97),rgba(12,9,6,.98)),url("../assets/brand/fondo-madera-oscura-gaba3.webp") center/cover!important;
        box-shadow:0 24px 55px rgba(0,0,0,.72)!important;
        transform-origin:top center;
    }

    body:not(.pagina-sala):not(.shorts-page) .busqueda-interna.busqueda-movel-aberta{
        display:flex!important;
        flex-direction:column!important;
        animation:gaba3-busca-descer .22s ease-out both;
    }

    @keyframes gaba3-busca-descer{from{opacity:0;transform:translateY(-12px) scaleY(.92)}to{opacity:1;transform:translateY(0) scaleY(1)}}

    body:not(.pagina-sala) .lienzo-busca-cabecera{
        display:flex!important;
        align-items:flex-start!important;
        justify-content:space-between!important;
        gap:12px!important;
        margin-bottom:14px!important;
    }
    /* Pedido do dono 2026-09-15: só o texto branco, sem o rótulo verde
       em cima ("BUSCAR NA GABA3") — muita letra pra um painel simples. */
    body:not(.pagina-sala) .lienzo-busca-cabecera small{display:none!important}
    body:not(.pagina-sala) .lienzo-busca-cabecera b{display:block;margin-top:0;color:#f4eee2;font-size:17px;line-height:1.2}
    body:not(.pagina-sala) #fechar-busca-movel{width:38px;height:38px;flex:none;border:1px solid rgba(232,210,166,.3);border-radius:50%;background:rgba(255,255,255,.06);color:#f4e3c4;font-size:25px;line-height:1;cursor:pointer}

    body:not(.pagina-sala) .barra-superior .cinta-crear-header{
        min-height:42px!important;
        height:42px!important;
        padding:0 13px!important;
        border-radius:12px!important;
    }

    body:not(.pagina-sala) .barra-superior .buscador-inline-input{
        min-width:0!important;
        font-size:15px!important;
    }

    body:not(.pagina-sala) .barra-superior .marca .marca-icono{
        width:46px!important;
        height:31px!important;
        margin-right:0!important;
    }

    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{
        font-size:17px!important;
    }

    body:not(.pagina-sala) .barra-superior .marca-nombre-led{
        display:inline-flex!important;
    }

    /* Pedido do dono 2026-09-22 (via professor dele, vendo o app real):
       a lupa tem que ficar centrada na cabeceira inteira, independente da
       logo — não mais "logo depois da GABA3". A tentativa antiga (nota de
       2026-09-15 abaixo) centralizava só dentro de .marca-busqueda, que
       também contém a logo — por isso caía em cima das letras.
       Achado real (mesmo dia, verificado com o dono vendo ao vivo): a
       primeira correção usava position:absolute;top:50% contra TODA a
       .barra-superior — mas essa cabeceira é um grid de DUAS linhas
       (marca+conta na linha 1, #explorar/os ícones coloridos na linha 2),
       e 50% da altura total cai bem em cima da linha 2, escondendo a
       metade de baixo do ícone atrás da faixa de ícones. Corrigido usando
       o próprio grid: a lupa ocupa a LINHA 1 (mesma linha da logo/conta),
       nunca a altura inteira da cabeceira — sempre alinhada com elas,
       nunca com a faixa de ícones abaixo. */
    body:not(.pagina-sala) .boton-busca-movel{
        display:grid!important;
        place-items:center!important;
        position:relative!important;
        grid-row:1!important;
        grid-column:1 / -1!important;
        justify-self:center!important;
        align-self:center!important;
        left:auto!important;
        top:auto!important;
        transform:none!important;
        flex:none!important;
        width:36px!important;
        height:36px!important;
        padding:0!important;
        border:0!important;
        border-radius:0!important;
        background:transparent!important;
        color:#f4e3c4!important;
        cursor:pointer;
        transition:background .18s ease,transform .18s ease!important;
        z-index:5!important;
    }
    /* Achado real: esta regra tinha uma cópia duplicada logo abaixo, ainda
       com o `translate(-50%,-50%)` do jeito antigo (absoluto) — a lupa
       ficava correta em repouso mas pulava de posição ao abrir a busca.
       Uma regra só agora, com o transform certo pro layout em grid. */
    body:not(.pagina-sala) .boton-busca-movel[aria-expanded="true"]{background:transparent!important;color:#91e66f!important;transform:scale(.96)!important}

    /* Pedido do dono 2026-09-15: o ícone (viewBox 24x24, círculo+cabo)
       já é matematicamente simétrico — nenhuma margem deslocando pra um
       lado nem pro outro, sempre exatamente no centro do botão. */
    body:not(.pagina-sala) .boton-busca-movel svg{
        width:19px!important;
        height:19px!important;
    }

    /* Pedido do dono 2026-09-15: nas tarjetas de salas públicas (carrosséis
       da portada), nada flutua por cima do vídeo/imagem além do título e
       da descrição — nunca bandeira de denunciar nem estrela de seguir. */
    .gaba3-carrossel .sala-card .sala-card-denunciar,
    .gaba3-carrossel .sala-card .gaba3-seguir-botao{
        display:none!important;
    }

    body:not(.pagina-sala) .busqueda-interna .buscador-inline-resultados{
        position:static!important;
        width:100%!important;
        max-height:calc(54dvh - 116px)!important;
        margin-top:12px!important;
        flex:1 1 auto;
        border-color:rgba(255,255,255,.12)!important;
        background:rgba(0,0,0,.24)!important;
        box-shadow:none!important;
    }

    /* A faixa de tipos fica logo depois do cabeçalho que foi realmente
       medido no JavaScript. Não dependemos mais de números conflitantes.
       Sem folga nenhuma entre as duas (relatado pelo dono: os +4px de antes
       deixavam um fiapo visível da pedra do body entre elas ao rolar —
       agora fica colada, zero hueco). */
    body:not(.pagina-sala) .categorias-contenedor{
        top:var(--gaba3-header-h, 112px)!important;
        padding-top:2px!important;
        padding-bottom:2px!important;
        /* Pedido do dono 2026-09-13: a franja de ícones não pode parecer
           um painel separado do cabeçalho — "se mira una línea". A borda
           clara + a sombra própria (estilo.css) desenhavam essa linha na
           junção com a barra-superior, mesmo as duas usando a mesma pedra
           de fundo. Removidas só no mobile: agora é uma única superfície
           contínua, o cabeçalho "mais largo" que os ícones flutuam dentro. */
        border-top:0!important;
        box-shadow:none!important;
    }

    /* Pedido do dono (2026-10-08): os 5 ícones de Explorar cabem inteiros no
       celular, sem deslizar (antes só 4 cabiam e o 5º, V Curtos, ficava cortado).
       Cada caixa divide a largura da fileira, até 72px; o ícone continua com 36px. */
    body:not(.pagina-sala) .accesos-plataforma{
        gap:6px!important;
        padding:0 max(4px, env(safe-area-inset-left,0px)) 0!important;
        justify-content:space-between!important;
        overflow-x:hidden!important;
    }
    body:not(.pagina-sala) .acceso-plataforma{
        flex:1 1 0!important;
        width:auto!important;
        min-width:0!important;
        max-width:72px!important;
        min-height:40px!important;
        padding:1px 1px!important;
    }

    body:not(.pagina-sala) .estrutura{
        display:block!important;
        padding-left:0!important;
    }

    body:not(.pagina-sala) .alternar-minhas-salas{
        display:none!important;
    }

    body:not(.pagina-sala) main{
        padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important;
    }

    body:not(.pagina-sala) .gaba3-layout-main{
        gap:18px!important;
    }

    body:not(.pagina-sala) .gaba3-layout-main .seccion{
        min-width:0!important;
    }

    /* Em telas pequenas, um cartão completo por vez mantém a seção limpa.
       A próxima sala continua acessível por gesto horizontal. */
    body:not(.pagina-sala) .gaba3-carrossel .sala-card{
        flex:0 0 100%!important;
        width:100%!important;
        max-width:100%!important;
        scroll-snap-align:start;
    }

    /* Pedido do dono 2026-09-15: com a tarjeta agora ocupando a tela
       inteira, 146px de altura ficava uma tira fina/achatada demais —
       precisa de uma proporção mais "quadradinha", não uma faixa baixa. */
    body:not(.pagina-sala) .gaba3-carrossel .sala-imagen{
        height:230px!important;
    }

    /* Vídeo curto continua vertical (9:16) — desde que o título/curtidas
       viraram um véu flutuando por cima do vídeo (pedido do dono,
       2026-09-15, ver estilo.css .gaba3-curto-info), esta caixa precisa
       de altura de verdade, nunca a mesma baixa dos cartões normais
       acima — senão o texto transbordava pra fora da caixa. */
    body:not(.pagina-sala) .gaba3-carrossel .gaba3-curto-card .sala-imagen{
        height:210px!important;
    }

    body:not(.pagina-sala) .gaba3-layout-main .seccion-cabecera{
        display:flex!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:10px!important;
    }

    body:not(.pagina-sala) .gaba3-layout-main .seccion-cabecera h2{
        min-width:0!important;
        font-size:16px!important;
        line-height:1.2!important;
    }

    body:not(.pagina-sala) .gaba3-layout-main .seccion-cabecera a,
    body:not(.pagina-sala) .gaba3-layout-main .seccion-cabecera .gaba3-ver-todas-link{
        display:inline-flex!important;
        flex:none!important;
        align-items:center!important;
        gap:3px!important;
        color:#a4eb83!important;
        font-size:12px!important;
        font-weight:800!important;
        text-decoration:none!important;
        white-space:nowrap!important;
    }

    body:not(.pagina-sala) .gaba3-continue-banner{
        left:10px!important;
        right:10px!important;
        bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;
        width:auto!important;
        max-width:none!important;
        min-height:42px!important;
        padding:6px 8px!important;
        gap:7px!important;
        border-radius:12px!important;
    }

    body:not(.pagina-sala) .gaba3-continue-copy strong{
        font-size:11px!important;
        line-height:1.1!important;
    }

    /* A descrição longa fica disponível ao abrir a sala; na portada ela
       ocupava uma linha inteira e escondia a primeira tarjeta. */
    body:not(.pagina-sala) .gaba3-continue-copy small{display:none!important}

    body:not(.pagina-sala) .gaba3-continue-actions{gap:5px!important}
    body:not(.pagina-sala) .gaba3-continue-actions button{
        min-height:30px!important;
        padding:0 8px!important;
        font-size:10px!important;
    }
    body:not(.pagina-sala) .gaba3-continue-dismiss{min-width:30px!important}

    body:not(.pagina-sala) .menu-movil{
        z-index:120!important;
    }
}

@media (max-width:430px){
    /* Em 320–430 px, o símbolo já identifica a marca. Remover as letras
       evita comprimir botões e mantém alvos de toque seguros. */
    body:not(.pagina-sala) .barra-superior .marca{
        padding:4px 5px!important;
    }

    body:not(.pagina-sala) .barra-superior .marca .brand-content{
        padding:0!important;
    }

    body:not(.pagina-sala) .barra-superior .marca-nombre-led i{font-size:16px!important}

    body:not(.pagina-sala) .barra-superior .header-criar-conta-link{
        min-height:34px!important;
        padding:0 9px!important;
        font-size:11px!important;
        white-space:nowrap;
    }

    body:not(.pagina-sala) .barra-superior .boton-notificaciones,
    body:not(.pagina-sala) .barra-superior .boton-buzon,
    body:not(.pagina-sala) .barra-superior .perfil-miniatura{
        width:36px!important;
        min-width:36px!important;
        height:36px!important;
        min-height:36px!important;
    }

    body:not(.pagina-sala) .barra-superior .cinta-crear-header{
        min-height:40px!important;
        height:40px!important;
    }

    body:not(.pagina-sala) .barra-superior .buscador-inline-input{
        font-size:14px!important;
    }

    body:not(.pagina-sala) .menu-movil a{
        font-size:9px!important;
    }
}

/* Cabeceira desktop, revertido pra ordem original (pedido do dono,
   2026-09-15, depois de rejeitar a troca de lugar acima: "deja los
   iconos como estaban... el buscador arriba de los iconos"): buscador
   em cima (linha 1, centralizado, como sempre foi), ícones embaixo
   (linha 2, largura cheia, como sempre foi) — só os ícones ficam menores
   que o tamanho original. Fica no final do arquivo pra vencer por ordem
   de cascata (mesma especificidade de 3 seletores das regras de
   ~linha 524/598-641 que está ajustando). */
@media(min-width:821px){
    /* 104 px e 12 px de respiro em cima (2026-10-14): com 64 px os nomes quebravam em
       3 linhas e o primeiro ícone encostava na frase "Conecta pessoas…" do logo. */
    body:not(.pagina-sala):not(.shorts-page) .header-productos .accesos-plataforma{
        grid-auto-columns:104px!important;
        gap:16px!important;
        justify-content:space-between!important;
        padding:12px 42px 2px 4px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma{
        flex-basis:104px!important;
        width:104px!important;
        min-width:104px!important;
        min-height:46px!important;
        padding:4px 2px 6px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono{
        width:26px!important;
        height:26px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-icono svg{
        width:23px!important;
        height:23px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma-texto b{
        font-size:9.5px!important;
    }
}
/* Entre 821 e 1099 px os seis itens de 104 px não cabem (o da economia ficava cortado). */
@media(min-width:821px) and (max-width:1099px){
    body:not(.pagina-sala):not(.shorts-page) .header-productos .accesos-plataforma{
        grid-auto-columns:80px!important;
        gap:10px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma{
        flex-basis:80px!important;
        width:80px!important;
        min-width:80px!important;
    }
}

/* Telefones estreitos (achado medido 2026-10-08): a lupa centrada contra a
   cabeceira inteira caía em cima do sino — 21 px em 320 px com "Criar conta",
   e 10–12 px em 361–430 px com a conta aberta (sino + estrela "Seguindo" com
   número + foto + ☰). Até 480 px a cabeceira vira três colunas — logo | lupa |
   conta — e a lupa encosta nos botões da direita em vez de ficar no meio; acima
   disso a lupa continua centrada, como o dono pediu, porque ali sempre cabe. */
@media (max-width:480px){
    body:not(.pagina-sala) header.barra-superior.barra-superior{
        grid-template-columns:auto minmax(0,1fr) auto!important;
        column-gap:4px!important;
    }
    body:not(.pagina-sala) .barra-superior .marca-busqueda{
        grid-column:1!important;
        min-width:max-content;
    }
    body:not(.pagina-sala) .barra-superior .boton-busca-movel{
        grid-column:2!important;
        justify-self:end!important;
    }
    body:not(.pagina-sala) .barra-superior .cuenta-usuario{
        grid-column:3!important;
    }
}
/* 320–360 px: os botões descem para 32 px (o ☰ para 30 px) para tudo caber sem
   nada se sobrepor: logo, lupa, sino, estrela, foto/"Criar conta" e ☰. */
@media (max-width:360px){
    body:not(.pagina-sala) .barra-superior .boton-busca-movel{
        width:32px!important;
        height:32px!important;
    }
    body:not(.pagina-sala) .barra-superior .cuenta-usuario{
        gap:2px!important;
    }
    body:not(.pagina-sala) .barra-superior .boton-notificaciones,
    body:not(.pagina-sala) .barra-superior .perfil-miniatura{
        width:32px!important;
        min-width:32px!important;
        height:32px!important;
        min-height:32px!important;
    }
    body:not(.pagina-sala) .barra-superior .boton-hamburguesa{
        width:30px!important;
        min-width:30px!important;
    }
    body:not(.pagina-sala) .barra-superior .header-criar-conta-link{
        padding:0 6px!important;
        font-size:10.5px!important;
    }
}