/* =====================================================================
   CORREÇÕES DE RESPONSIVIDADE — 02/11/2026
   Carregado por último no index.html. Cada bloco explica o problema que resolve.
   ===================================================================== */

/* Segurança geral: nenhum banner pode vazar conteúdo para o banner vizinho. */
.carousel-slide { overflow: hidden; }
.carousel-content,
.carousel-content * { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   0) Barra de redes sociais fixa no topo (todas as telas)
   Antes: a barra rolava junto com a página (position: relative), mas o menu
   ficava fixo 36px/32px abaixo do topo; ao rolar, aparecia uma fresta com o
   conteúdo da página passando por cima dos ícones.
   --------------------------------------------------------------------- */
.top-social-bar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001;
    height: 36px;
    padding: 0 !important;
    display: flex;
    align-items: center;
}
.top-social-bar > .container { width: 100%; }
.header { top: 36px !important; }

/* ---------------------------------------------------------------------
   1) Barra de redes sociais no celular
   Antes: ficava escondida (display:none) e o menu continuava 32px abaixo
   do topo, deixando uma faixa clara vazia no lugar dos ícones.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    .top-social-bar {
        display: flex !important;
        height: 32px;
        padding: 0 !important;
        z-index: 1001;
    }
    .top-social-bar .container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .top-social-links {
        justify-content: flex-end !important;
        gap: 10px !important;
    }
    .top-social-links a {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
    }
    .header { top: 32px !important; }
}

/* ---------------------------------------------------------------------
   2) Banners (carrossel) no celular
   Antes: o bloco de texto tinha a largura da tela inteira e ainda era
   deslocado 18px para a direita (inset em elemento relativo), cortando
   títulos, textos e botões e invadindo o banner seguinte.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .carousel-slide { align-items: flex-end !important; }
    .carousel-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* 118px embaixo: os botões ficam acima do botão flutuante do WhatsApp */
        padding: 0 18px 118px !important;
        transform: none !important;
    }
    /* Título no tamanho em que a palavra mais longa ("EQUIPAMENTOS") cabe inteira */
    .carousel-content h1,
    .carousel-content .sg-hero-title,
    .premium-hero-slide .carousel-content h1::before,
    .premium-hero-slide .carousel-content h1::after { font-size: clamp(30px, 9.4vw, 46px) !important; }
    .carousel-content h1,
    .carousel-content .sg-hero-title,
    .carousel-content p {
        max-width: 100% !important;
        overflow-wrap: break-word;
    }
    .carousel-content .premium-hero-kicker {
        flex-wrap: wrap;
        max-width: 100%;
        letter-spacing: .12em;
        line-height: 1.35;
    }
    .carousel-content .sg-hero-actions,
    .carousel-content .btn { max-width: 100%; }
}


/* ---------------------------------------------------------------------
   3) E-mail do bloco de contato
   Antes: quebrava no meio do domínio ("pbatransportes.c / om.br").
   O site-experience.js agora oferece a quebra logo após o "@".
   --------------------------------------------------------------------- */
.sg-contact-list a[href^="mailto:"] { overflow-wrap: break-word; word-break: normal; }

/* ---------------------------------------------------------------------
   4) Indicadores do rodapé (BR / 12+ / 24/7) no celular
   Antes: colunas desiguais e rótulos espremidos em três linhas.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .sg-footer-spotlight .site-footer-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sg-footer-spotlight .site-footer-metrics div { padding: 12px 6px !important; text-align: center; }
    .sg-footer-spotlight .site-footer-metrics strong { font-size: 26px; }
    .sg-footer-spotlight .site-footer-metrics span { font-size: 11px; letter-spacing: .03em; overflow-wrap: break-word; }
}
/* Telas estreitas: os três indicadores empilhados (número ao lado do rótulo). */
@media (max-width: 420px) {
    .sg-footer-spotlight .site-footer-metrics { grid-template-columns: 1fr !important; gap: 8px; }
    .sg-footer-spotlight .site-footer-metrics div {
        display: flex !important;
        align-items: center;
        gap: 14px;
        padding: 10px 14px !important;
        text-align: left;
    }
    .sg-footer-spotlight .site-footer-metrics strong { min-width: 62px; font-size: 26px; }
    .sg-footer-spotlight .site-footer-metrics span { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   5) Banners deslizáveis com o dedo
   pan-y: a rolagem vertical da página continua com o navegador; o arraste
   horizontal fica com o carrossel (site-experience.js → bindHeroSwipe).
   --------------------------------------------------------------------- */
#inicio.carousel { touch-action: pan-y; }
#inicio.carousel.is-swiping { cursor: grabbing; user-select: none; -webkit-user-select: none; }
@media (hover: hover) and (pointer: fine) { #inicio.carousel .carousel-slide { cursor: grab; } }
#inicio .carousel-slide img { -webkit-user-drag: none; user-select: none; }