/* =========================================================
   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,.destacada-contenido h1{
    font-family:var(--gaba3-font)!important;
    font-weight:600!important;
    letter-spacing:-.01em;
}

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

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

/* Lupa independiente eliminada: solo el buscador de madera es oficial */
body:not(.pagina-sala) .barra-superior .cuenta-usuario > .boton-lupa-header,
body:not(.pagina-sala) .barra-superior > .boton-lupa-header{
    display:none!important;
}

/* ---- 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;
}
body:not(.pagina-sala) .barra-superior .header-perfil-slot .perfil-dropdown{
    right:0!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;
}
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 0 transparent!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 0 #8c8c8c,
        0 4px 0 #686868,
        0 0 0 transparent!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;
}

/* No celular o ☰ não fica no cabeçalho: o acesso ao menu completo já está
   no item "Mais" da navegação inferior. Cabeçalho móvel = logo | 🔔 | ✉ | perfil. */
@media (max-width:820px){
    body:not(.pagina-sala) .barra-superior .boton-hamburguesa{
        display:none!important;
    }
}

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{
    color:rgba(210,185,150,.55)!important;
    font-weight:400!important;
}
body:not(.pagina-sala) .barra-superior .lupa-madera{
    width:20px!important;
    height:20px!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;
}
body:not(.pagina-sala) .categorias-salas{
    gap:12px!important;
    padding-right:20vw!important;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}
body:not(.pagina-sala) .categoria-sala{
    min-height:32px!important;
    height:32px!important;
    padding:0 14px!important;
    font-size:13px!important;
    font-weight:400!important;
    letter-spacing:.01em;
    border-width:1px!important;
    border-radius:999px!important;
    box-shadow:none!important;
}
body:not(.pagina-sala) .categoria-sala.activa{
    font-weight:500!important;
    box-shadow:none!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) .destacada-contenido h1{
    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,
body:not(.pagina-sala) .destacada-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,
       Transporte, Jogos, 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.png") center/cover no-repeat!important;
        border-top:1px solid rgba(187,126,55,.35)!important;
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }
    .menu-movil a{
        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.activo{
        color:#8dff62!important;
        font-weight:500!important;
    }
    .menu-movil button#crear-movil{
        width:44px!important;
        height:44px!important;
        margin-top:-14px!important;
        border-width:2px!important;
        border-color:rgba(8,10,6,.92)!important;
        border-radius:14px!important;
        font-size:24px!important;
        font-weight:500!important;
        background:linear-gradient(135deg,var(--gaba3-verde-brillante),var(--gaba3-verde))!important;
        box-shadow:0 4px 12px rgba(85,201,0,.22)!important;
    }
    .menu-movil .menu-movil-volantin{
        width:20px!important;
        height:20px!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;
    }
    body:not(.pagina-sala) .categoria-sala{
        min-height:30px!important;
        height:30px!important;
        padding:0 12px!important;
        font-size:12px!important;
    }
    body:not(.pagina-sala) .categorias-salas{
        gap:10px!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}
    body:not(.pagina-sala) .acceso-plataforma-icono{transform:scale(.88)!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:hover,
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma:focus-visible{
        background:rgba(255,255,255,.08)!important;
        outline:none!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--juegos{color:#c075ff!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--transporte{color:#ffe166!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;
    }
    body:not(.pagina-sala) .barra-superior .lupa-madera{
        width:24px!important;
        height:24px!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;
    }

    body:not(.pagina-sala):not(.shorts-page) .marca-busqueda{
        grid-column: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);
    }

    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.png") 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;
    }

    /* Achado real 2026-09-15: a causa de fundo do sumiço (2026-09-13) era
       posicionar este botão com "50% do .marca-busqueda inteiro" — mas
       esse container também tem a logo GABA3 dentro, como primeiro item.
       Num celular estreito (achado com o dono, testado a 360px), a logo
       sozinha já passa da metade da largura, e o botão centralizado caía
       ENCIMA das próprias letras dela. Trocado pra fluxo normal do flex
       (sem position:absolute nenhum) — sempre cai logo depois da logo,
       nunca em cima dela, não importa a largura da tela. */
    body:not(.pagina-sala) .boton-busca-movel{
        display:grid!important;
        place-items:center!important;
        position:static!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;
    }

    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;
    }

    body:not(.pagina-sala) .accesos-plataforma{
        gap:8px!important;
        padding:0 max(4px, env(safe-area-inset-left,0px)) 0!important;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:4px;
    }

    /* o dono: sempre 4 caixas inteiras visíveis de uma vez no celular, nunca
       3 — o tamanho é calculado pra caber 4 + gaps na largura real da
       fileira, sobrando só uma espiadinha da 5ª pra indicar que desliza. */
    body:not(.pagina-sala) .acceso-plataforma{
        flex:0 0 72px!important;
        width:72px!important;
        min-width:72px!important;
        /* Pedido do dono 2026-09-13 (2ª rodada): "a franja ainda está muito
           larga" — apertado mais uma vez, junto com o padding vertical
           (linha 501 deste mesmo arquivo ainda mandava aqui: 7px 1px,
           14px verticais sozinho). Ícone (28px, scale .88) + rótulo
           (~11px) + respiro mínimo cabe em 46px real. A largura (72px,
           acima) continua igual — é ela que garante as 4 caixas inteiras. */
        min-height:40px!important;
        padding:1px 1px!important;
        scroll-snap-align:start;
    }

    /* O carril é uma navegação de web/tablet. Em telefone só existe a
       barra inferior, evitando uma coluna permanente sobre o conteúdo. */
    body:not(.pagina-sala) .gaba3-rail{
        display:none!important;
    }

    body:not(.pagina-sala) .estrutura,
    body:not(.pagina-sala) .estrutura.minhas-salas-abertas{
        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) .acceso-plataforma{
        flex-basis:72px!important;
        width:72px!important;
        min-width:72px!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){
    body:not(.pagina-sala):not(.shorts-page) .header-productos .accesos-plataforma{
        grid-auto-columns:64px!important;
        gap:16px!important;
        justify-content:space-between!important;
        padding:2px 42px 2px 4px!important;
    }
    body:not(.pagina-sala):not(.shorts-page) .header-productos .acceso-plataforma{
        flex-basis:64px!important;
        width:64px!important;
        min-width:64px!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;
    }
}