/* ==========================================================================
   TREMOT - style.css   [ VERSAO 27 ]
   Se o topo do arquivo no navegador nao disser VERSAO 27, o CSS esta velho.

   REGRA DESTE ARQUIVO: nao brigar com o Bootstrap.
   O Bootstrap 5.3 expoe variaveis CSS por componente (--bs-navbar-*,
   --bs-btn-*, --bs-nav-*). Configurar essas variaveis substitui o
   componente inteiro sem seletor duplo e sem !important.
   Regra nova so quando o Bootstrap nao tem a propriedade.

   1. Tokens da marca
   2. Configuracao global do Bootstrap
   3. Largura do container
   4. Tipografia
   5. Header
   6. Navbar
   7. Marca
   8. Botao
   9. Hero
   10. Faixa escura
   11. Servicos
   12. Formas flutuantes
   13. Projeto integrado
   14. Rodape
   15. Responsivo
   ========================================================================== */


/* 1. TOKENS DA MARCA ==================================================== */
:root {
    /* Azul aberto. 6.2:1 contra branco, entao aceita texto branco em cima. */
    --tre-primary:      #16688A;
    --tre-primary-rgb:  22, 104, 138;   /* rgba() nao aceita hex de variavel */
    --tre-primary-dark: #0F4E69;

    --tre-ink:          #0C2733;   /* titulos e texto forte */
    --tre-primary-lt:   #82C6E8;   /* azul claro, so para uso sobre escuro */

    --tre-font-title:   'Archivo', system-ui, sans-serif;
    --tre-font-body:    'Source Sans 3', system-ui, sans-serif;

    /* Duas camadas: a curta marca o encosto, a longa da a altura.
       Uma sombra so vira borrao cinza; duas leem como objeto flutuando. */
    --tre-shadow-btn:   0 1px 4px rgba(12, 39, 51, .06), 0 6px 20px rgba(12, 39, 51, .10);

    /* Curva de elevacao do site. Desaceleracao longa: arranca nos
       primeiros milissegundos e vai freando ate assentar. O `ease` padrao
       do navegador sobe e para seco, o que le como clique e nao como
       elevacao. Duas duracoes porque subir mais devagar do que volta e o
       que da sensacao de intencao no movimento. */
    --tre-suave:        cubic-bezier(.16, 1, .3, 1);
    --tre-sobe:         .55s;
    --tre-volta:        .32s;

    /* Linguagem de sombra do site, usada em card, icone e chip. O que faz
       a peca parecer FLUTUANDO e o deslocamento vertical pequeno com
       desfoque grande: assim a sombra vaza para cima da peca tambem. Com
       dy alto ela cai toda para baixo e o topo fica seco, o que le como
       peca apoiada na mesa. */
    --tre-flutua:    0 1px 2px rgba(12, 39, 51, .04), 0 6px 16px rgba(12, 39, 51, .05), 0 16px 52px rgba(12, 39, 51, .11);
    --tre-flutua-md: 0 1px 2px rgba(12, 39, 51, .04), 0 4px 12px rgba(12, 39, 51, .06), 0 10px 28px rgba(12, 39, 51, .08);
    --tre-flutua-sm: 0 1px 2px rgba(12, 39, 51, .04), 0 3px 10px rgba(12, 39, 51, .06);
    --tre-shadow-btn-h: 0 2px 6px rgba(12, 39, 51, .08), 0 10px 28px rgba(12, 39, 51, .14);
    --tre-shadow-nav:   0 10px 28px rgba(12, 39, 51, .09);
}


/* 2. CONFIGURACAO GLOBAL DO BOOTSTRAP =================================== */
/* Fundo, cor de texto e fonte do site inteiro saem daqui. Nenhuma regra
   nova: sao as proprias variaveis que o Bootstrap ja consome. */
:root {
    --bs-body-bg:          #F4F6F8;
    --bs-body-color:       #22343C;
    --bs-body-font-family: var(--tre-font-body);
    --bs-heading-color:    var(--tre-ink);
    --bs-border-color:     #E2E8EC;
    --bs-secondary-color:  #5C7079;
    --bs-link-color:       var(--tre-primary);
    --bs-link-hover-color: var(--tre-primary-dark);
    --bs-focus-ring-color: rgba(22, 104, 138, .40);
}


/* 3. LARGURA DO CONTAINER =============================================== */
/* O Bootstrap nao expoe a largura do container como variavel, entao aqui
   precisa de regra mesmo. O .container dele abre ate 1320px no breakpoint
   xxl, e nessa largura o header estica: elemento pequeno boiando em espaco
   vazio. Travando em 1180px a composicao aperta e ganha firmeza.
   So no xxl, porque abaixo disso o proprio Bootstrap ja usa 1140 ou menos. */
@media (min-width: 1400px) {
    .container {
        max-width: 1180px;
    }
}


/* 4. TIPOGRAFIA ========================================================= */
/* O Bootstrap nao tem variavel para a fonte de titulo, so para a de corpo.
   Por isso estas duas regras existem. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--tre-font-title);
    letter-spacing: -.015em;
}

/* Movimento reduzido: ENCURTAR, nao desligar.
   O que essa preferencia existe para resolver e movimento continuo e
   deslocamento grande. Um hover de 5px nao e isso. Sumir com o retorno
   visual inteiro deixa a pessoa sem saber o que e clicavel, o que troca
   um problema de acessibilidade por outro.
   Entao: animacao infinita some, e o resto vira quase instantaneo. */
@media (prefers-reduced-motion: reduce) {

    /* Isto sim e o problema de verdade: as formas do card integrado
       ficariam subindo e descendo para sempre. */
    .flutua {
        animation: none !important;
    }

    /* Hover continua existindo, so um pouco mais curto que o normal.
       0,38s nao e movimento continuo nem deslocamento grande, entao nao
       e o que esta preferencia pede para eliminar. O que ela pede esta
       resolvido na regra de cima, que para a animacao infinita.
       ESTES SAO OS DOIS NUMEROS PARA AJUSTAR A SUAVIDADE. */
    :root {
        --tre-sobe:  .38s;   /* subir  */
        --tre-volta: .26s;   /* voltar */
    }
}


/* 5. HEADER ============================================================ */
/* O sticky vem da classe .sticky-top do Bootstrap, no header.php.
   No topo da pagina o header e transparente e nao tem separador nenhum:
   ele flutua sobre o cinza. So depois de rolar e que ele vira barra
   branca, e ai sim precisa de contorno. */
.site-header {
    background: transparent;
    transition: background-color .25s ease, box-shadow .25s ease;
}

/* Rolado, o header precisa de separacao do conteudo que passa por baixo.
   Sombra difusa mais fio de cabelo, e nada alem disso: o que separa
   header profissional de amador nessa faixa e justamente a ausencia de
   ornamento. Aqui ja teve uma onda desenhada e ela nao se sustentou:
   esticada na largura da tela, cada periodo ficava 240px por 8px de
   altura, proporcao de 30 para 1, e lia como linha tremida e nao como
   onda. A marca ja carrega a onda na logo e na textura do rodape. */
.site-header.is-scrolled {
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: var(--tre-shadow-nav);
}

/* 6. NAVBAR ============================================================= */
/* Tudo aqui e variavel do proprio componente navbar do Bootstrap 5.3.
   Antes isto era `.main-nav .main-nav__link { ... }`, seletor duplo so
   para ganhar da especificidade dele. Agora nao ha disputa nenhuma. */
.main-nav {
    --bs-navbar-padding-y:        2.1rem;
    --bs-navbar-nav-link-padding-x: 0;
    --bs-nav-link-color:          var(--tre-ink);
    --bs-nav-link-hover-color:    var(--tre-primary);
    --bs-nav-link-font-size:      1.08rem;
    --bs-nav-link-font-weight:    600;
    --bs-navbar-active-color:     var(--tre-ink);
    --bs-navbar-toggler-border-color: var(--bs-border-color);
    --bs-navbar-toggler-focus-width:  0;

    /* espaco extra embaixo para a onda nao encostar nos links */
    padding-bottom: calc(var(--bs-navbar-padding-y) + 14px);
}

.main-nav .nav-link {
    font-family: var(--tre-font-title);
    position: relative;
}

/* A escala de gap do Bootstrap termina em gap-5 (3rem) e aqui precisa
   de mais para o menu nao ler como um bloco unico grudado. */
@media (min-width: 992px) {
    .main-nav__list {
        gap: 3.5rem;
    }
}

/* A barra marca onde o visitante esta. E informacao, nao enfeite.
   Fica reta de proposito: a onda ja e a jogada do header, e duas
   ondas competindo entre si tiram a forca das duas. */
.main-nav .nav-link.active {
    font-weight: 700;
}
.main-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--tre-primary);
    border-radius: 2px;
}


/* 7. MARCA ============================================================== */
/* letter-spacing caiu de .07em para .035em: espacamento largo demais
   deixa a palavra leve, e o que se quer aqui e peso. */
.brand__name {
    font-family: var(--tre-font-title);
    font-weight: 700;
    font-size: 1.95rem;
    letter-spacing: .035em;
    color: var(--tre-ink);
}

.brand__tag {
    font-size: .82rem;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
}


/* 8. BOTAO ============================================================== */
/* Variante de botao do jeito que o Bootstrap 5.3 pede: so variaveis
   --bs-btn-*. Cartao branco flutuando, nao botao solido. Sem borda:
   a sombra em duas camadas ja desenha o contorno, inclusive quando o
   header fica branco ao rolar. Solido fica pro botao do hero. */
.btn-tremot {
    --bs-btn-color:               var(--tre-ink);
    --bs-btn-bg:                  #fff;
    --bs-btn-border-color:        transparent;
    --bs-btn-hover-color:         var(--tre-primary);
    --bs-btn-hover-bg:            #fff;
    --bs-btn-hover-border-color:  transparent;
    --bs-btn-active-color:        var(--tre-primary);
    --bs-btn-active-bg:           #fff;
    --bs-btn-active-border-color: transparent;
    --bs-btn-font-family:         var(--tre-font-title);
    --bs-btn-font-size:           1.08rem;
    --bs-btn-font-weight:         600;
    --bs-btn-padding-x:           2.9rem;
    --bs-btn-padding-y:           1.05rem;
    --bs-btn-border-radius:       14px;

    box-shadow: var(--tre-shadow-btn);
    /* Estado de repouso = o caminho de VOLTA, mais curto. */
    transition: color .25s ease,
                box-shadow var(--tre-volta) var(--tre-suave),
                translate  var(--tre-volta) var(--tre-suave);
}

/* Sobe 5px, nao 8px como os cards: botao e peca pequena, e elevacao
   grande demais nele parece salto, nao resposta. */
.btn-tremot:hover,
.btn-tremot:focus-visible {
    translate: 0 -5px;
    box-shadow: var(--tre-shadow-btn-h);
    /* Estado de hover = o caminho de IDA, mais longo. */
    transition: color .25s ease,
                box-shadow var(--tre-sobe) var(--tre-suave),
                translate  var(--tre-sobe) var(--tre-suave);
}

/* No clique, resposta imediata. Aqui lentidao vira atraso, nao elegancia. */
.btn-tremot:active {
    translate: 0 -1px;
    transition-duration: .08s;
}

/* Variante solida: e o botao principal da pagina. Por isso o do header
   ficou branco, senao os dois brigam e nenhum vira o principal. */
.btn-tremot-solid {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  var(--tre-primary);
    --bs-btn-border-color:        var(--tre-primary);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--tre-primary-dark);
    --bs-btn-hover-border-color:  var(--tre-primary-dark);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--tre-primary-dark);
    --bs-btn-active-border-color: var(--tre-primary-dark);
    --bs-btn-font-family:         var(--tre-font-title);
    --bs-btn-font-size:           1.08rem;
    --bs-btn-font-weight:         600;
    --bs-btn-padding-x:           2.6rem;
    --bs-btn-padding-y:           1.05rem;
    --bs-btn-border-radius:       14px;

    box-shadow: var(--tre-shadow-btn);
    transition: background-color .25s ease,
                box-shadow var(--tre-volta) var(--tre-suave),
                translate  var(--tre-volta) var(--tre-suave);
}

/* A sombra do solido puxa o azul do proprio botao, igual aos cards de
   servico que puxam a cor deles. Sombra cinza embaixo de peca colorida
   parece sujeira; sombra da mesma cor parece luz. */
.btn-tremot-solid:hover,
.btn-tremot-solid:focus-visible {
    translate: 0 -5px;
    box-shadow:
        0 2px 6px   rgba(12, 39, 51, .10),
        0 14px 32px rgba(var(--tre-primary-rgb), .34);
    transition: background-color .25s ease,
                box-shadow var(--tre-sobe) var(--tre-suave),
                translate  var(--tre-sobe) var(--tre-suave);
}
.btn-tremot-solid:active {
    translate: 0 -1px;
    transition-duration: .08s;
}


/* 9. HERO =============================================================== */
.hero {
    padding-block: clamp(4rem, 9vw, 8rem);
}

/* line-height 1.02 e o que transforma duas frases empilhadas em um
   bloco solido: as linhas quase se encostam. Junto com o letter-spacing
   negativo, o titulo ganha densidade e parece maior mesmo sendo menor.
   letter-spacing em em, nao em px, para acompanhar o clamp do tamanho.
   clamp() faz o escalonamento sem media query: piso 2.5rem, cresce a
   4.6vw, teto 3.3rem. */
.hero__title {
    font-size: clamp(2.5rem, 4.6vw, 3.3rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.038em;
    margin-bottom: 1.75rem;
}

/* As duas linhas tem o mesmo peso. Contraste de peso dentro do titulo
   quebra o bloco, que e justamente o que se quer manter inteiro. */
.hero__title-l1,
.hero__title-l2 {
    display: block;
}

.hero__sub {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--bs-secondary-color);
    max-width: 38ch;
    margin-bottom: 2.25rem;
}

/* A sombra nao vem daqui: ela e um filtro dentro do proprio SVG,
   aplicado so no grupo do mockup. Se fosse filter no elemento, os
   circulos e quadrados soltos ganhariam sombra tambem. */
.hero__arte {
    width: 100%;
    height: auto;
    display: block;
}


/* 10. FAIXA ESCURA ====================================================== */
/* Ancora de contraste da pagina. O resto do site vive entre #F4F6F8 e
   branco; sem um bloco saturado em algum lugar, tudo le como lavado.
   O azul primario nao serve de cor de icone aqui: #16688A sobre #0C2733
   tem contraste baixo demais. Por isso existe o --tre-primary-lt. */
.compromissos {
    position: relative;
    overflow: hidden;
    background: var(--tre-ink);
    padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.compromissos__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* O conteudo precisa de position para subir acima do SVG de fundo.
   Sem isso o texto fica atras das ondas. */
.compromissos__conteudo {
    position: relative;
}

.compromissos__titulo {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -.025em;
    margin-bottom: 2.5rem;
}

/* Icone em caixa, igual aos cards de servico. Icone solto sobre fundo
   liso nao tem massa e some no escuro. */
.compromisso__icone {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: var(--tre-primary-lt);
    background: rgba(255, 255, 255, .09);
    margin-bottom: 1.15rem;
}

.compromisso__titulo {
    color: #fff;
    font-family: var(--tre-font-title);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: .45rem;
}

.compromisso__texto {
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
}


/* 11. SERVICOS ========================================================== */
.servicos {
    position: relative;
    overflow: hidden;
    /* padding de baixo maior: a secao tem overflow hidden e cortaria as
       formas que sangram para fora do card integrado. */
    padding-top: clamp(3rem, 7vw, 6rem);
    padding-bottom: clamp(6rem, 10vw, 9rem);
}

/* Conteudo precisa de position para ficar acima do SVG decorativo. */
.servicos__conteudo {
    position: relative;
}

.servicos__titulo {
    font-size: clamp(2rem, 3.6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 3rem;
}

/* O desencontro entre as colunas: a da direita desce e quebra a grade.
   E o que separa secao editorial de tabela de produtos. */
@media (min-width: 992px) {
    .servicos__col--desloca {
        margin-top: 5.5rem;
    }
}

/* Um card so, com uma variavel de cor trocando por variante. Todo o
   resto (icone, titulo, botao) le --tom, entao criar uma cor nova de
   servico e adicionar tres linhas aqui e nada mais. */
/* Cada servico tem matiz propria, nao tom do mesmo azul: e a cor que
   quebra o branco da pagina. Todas medidas contra o branco antes de
   entrar, porque a cor pinta tambem o texto do botao, que e pequeno e
   precisa de 4.5:1 na WCAG.
     azul    6.2:1     roxo   6.9:1     verde 5.2:1
     ambar   5.3:1     magenta 6.5:1                    */
/* --tom-rgb existe porque rgba() nao aceita hex de variavel. E ele que
   permite a sombra do hover puxar a cor do proprio card. */
.servico--azul    { --tom: #16688A; --tom-bg: #E7F0F4; --tom-rgb:  22, 104, 138; }
.servico--roxo    { --tom: #7A3EA1; --tom-bg: #F0EAF5; --tom-rgb: 122,  62, 161; }
.servico--verde   { --tom: #0F7A6B; --tom-bg: #E6F3F1; --tom-rgb:  15, 122, 107; }
.servico--ambar   { --tom: #9C5C08; --tom-bg: #F6EFE4; --tom-rgb: 156,  92,   8; }
.servico--magenta { --tom: #A62E6A; --tom-bg: #F5E9EF; --tom-rgb: 166,  46, 106; }

/* Tres camadas de sombra, que e como objeto real se apoia numa
   superficie: contato apertado, meia distancia, e ambiente larga e
   difusa. Uma camada so vira borrao cinza; tres leem como objeto.
   No hover a sombra puxa a cor do proprio card, por isso o --tom-rgb. */
.servico {
    background: #fff;
    border-radius: 20px;
    padding: clamp(1.75rem, 3vw, 2.6rem);
    margin-bottom: 2.5rem;
    box-shadow: var(--tre-flutua);
    transition: box-shadow var(--tre-volta) var(--tre-suave),
                translate  var(--tre-volta) var(--tre-suave);
}

/* translate e nao transform: transform aqui brigaria com qualquer
   rotacao futura, do mesmo jeito que brigou nas formas flutuantes. */
.servico:hover {
    translate: 0 -8px;
    transition: box-shadow var(--tre-sobe) var(--tre-suave),
                translate  var(--tre-sobe) var(--tre-suave);
    box-shadow:
        0 2px 4px   rgba(12, 39, 51, .05),
        0 10px 22px rgba(var(--tom-rgb), .11),
        0 26px 70px rgba(var(--tom-rgb), .18);
}

.servico__icone {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    margin-bottom: 1.75rem;
    background: var(--tom-bg);
    color: var(--tom);
    box-shadow: var(--tre-flutua-md);
}

.servico__titulo {
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--tom);
    margin-bottom: .9rem;
}

.servico__texto {
    color: var(--bs-secondary-color);
    line-height: 1.7;
    margin-bottom: 1.75rem;
}

.servico__rotulo {
    font-family: var(--tre-font-title);
    font-size: .92rem;
    font-weight: 600;
    color: var(--tre-ink);
    margin-bottom: .85rem;
}

/* Ocupa o mesmo lugar dos chips de logo de cliente do MPX. Enquanto a
   TREMOT nao tem cliente, este bloco carrega informacao real no lugar
   de prova social inventada. */
.servico__itens {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

/* Branco com fio e microssombra, nao cinza chapado. Chip cinza dentro
   de card branco vira buraco; chip branco com sombra vira peca. */
.servico__item {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    padding: .55rem .9rem;
    font-size: .88rem;
    color: var(--tre-ink);
    box-shadow: var(--tre-flutua-sm);
}

.btn-servico {
    --bs-btn-color:               var(--tom);
    --bs-btn-bg:                  #fff;
    --bs-btn-border-color:        transparent;
    --bs-btn-hover-color:         var(--tom);
    --bs-btn-hover-bg:            #fff;
    --bs-btn-hover-border-color:  transparent;
    --bs-btn-active-color:        var(--tom);
    --bs-btn-active-bg:           #fff;
    --bs-btn-active-border-color: transparent;
    --bs-btn-font-family:         var(--tre-font-title);
    --bs-btn-font-size:           1rem;
    --bs-btn-font-weight:         600;
    --bs-btn-padding-x:           1.9rem;
    --bs-btn-padding-y:           .9rem;
    --bs-btn-border-radius:       12px;

    box-shadow: var(--tre-shadow-btn);
    transition: box-shadow .3s ease;
}
.btn-servico:hover,
.btn-servico:focus-visible {
    box-shadow: var(--tre-shadow-btn-h);
}


/* 12. FORMAS AO REDOR DO CARD ========================================== */
/* Tres velocidades diferentes para os grupos nao subirem e descerem
   juntos, o que denunciaria a animacao. O bloco de prefers-reduced-motion
   la em cima ja desliga tudo isto para quem pediu menos movimento. */
/* Anima translate em vez de transform: transform sobrescreveria o
   rotate(14deg) da forma--d e ela endireitaria ao animar. */
@keyframes flutuar {
    from { translate: 0 0; }
    to   { translate: 0 -12px; }
}

.flutua {
    animation: flutuar 16s ease-in-out infinite alternate;
    will-change: translate;
}
.flutua--a { animation-duration: 19s; }
.flutua--b { animation-duration: 24s; animation-delay: -6s; }
.flutua--c { animation-duration: 15s; animation-delay: -3s; }


/* 13. PROJETO INTEGRADO ================================================= */
/* A area ancora as formas. Cada uma e posicionada em pixels a partir da
   borda do card, com valor negativo para sobrar para fora. Em <span> e
   nao em SVG porque a altura do card muda com o texto, e viewBox fixo
   faria as formas escorregarem de lugar quando isso acontecesse. */
/* A folga aqui nao e so estetica. As formas sangram 62px para CIMA do
   card, entao o espaco precisa cobrir esses 62px mais os 18px de desfoque
   da sombra, senao elas nascem coladas no ultimo card de servico e as
   duas sombras se encontram. */
.integrado-area {
    position: relative;
    margin-top: 150px;
}


.formas {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Sombra fraca de proposito: e ela que desenha a forma (branco sobre
   #F4F6F8 da 1.06:1, invisivel), mas forte demais faz a decoracao
   competir com o card. */
.forma {
    position: absolute;
    display: block;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 6px 18px rgba(12, 39, 51, .06);
}

/* A folga entre duas formas tem que ser MAIOR que o desfoque da sombra
   (18px). Com 3px de folga as sombras se encontram e as formas leem como
   uma massa unica, mesmo sem os retangulos se tocarem.
   Folga minima aqui: 31px no eixo vertical de cada lado.               */
.forma--a { width: 124px; height:  66px; left:  -72px; top:    -58px; }
.forma--b { width:  90px; height:  82px; left:  -44px; top:     34%;  border-radius: 26px; }
.forma--c { width: 142px; height:  62px; left:  -20px; bottom: -72px; }
.forma--d { width:  80px; height:  80px; right: -62px; top:    -62px; border-radius: 26px; transform: rotate(14deg); }
.forma--e { width: 116px; height: 116px; right:-102px; top:     26%;  border-radius: 50%; }
.forma--f { width: 158px; height:  70px; right: -22px; bottom: -80px; }
.forma--g { width:  48px; height:  48px; left: -128px; top:     62%;  border-radius: 50%; background: #EDF3F6; }

.integrado {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    background: #fff;
    border-radius: 22px;
    padding: clamp(2rem, 3.6vw, 3.2rem);
    box-shadow: var(--tre-flutua);
}

/* Card fantasma atras, maior e mais claro: da o aspecto de papel
   empilhado. z-index negativo joga o ::before atras do fundo do proprio
   pai, entao ele so aparece na sobra de 14px. */
.integrado::before {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 32px;
    background: rgba(255, 255, 255, .8);
    z-index: -1;
}

.integrado__marca {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* Solido, nao tingido. O card so tinha o botao de saturado, e um
   elemento colorido sozinho no meio de tanto branco nao segura a
   composicao. Agora sao dois, um em cada ponta. */
.integrado__icone {
    width: 84px;
    height: 84px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    background: linear-gradient(140deg, #2385AF, #0F4E69);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(15, 78, 105, .28);
}

.integrado__titulo {
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--tre-primary);
    margin: 0;
}

.integrado__texto {
    color: var(--bs-secondary-color);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

.integrado__cta {
    flex-shrink: 0;
    white-space: nowrap;
}


/* 14. RODAPE ============================================================ */
.rodape {
    position: relative;
    overflow: hidden;
    padding-top: clamp(3.5rem, 7vw, 6rem);
}

.rodape__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Sobe acima do SVG de fundo. Mesmo motivo da faixa escura. */
.rodape__conteudo {
    position: relative;
}

.rodape__titulo {
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: 2rem;
}

.rodape__botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.rodape__linha {
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 1;
    margin: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.rodape__coluna-titulo {
    font-family: var(--tre-font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--tre-ink);
    margin-bottom: 1.25rem;
}

.rodape__lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rodape__lista li + li {
    margin-top: .7rem;
}

.rodape__lista a,
.rodape__cidade {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    transition: color .2s ease;
}

.rodape__lista a:hover,
.rodape__lista a:focus-visible {
    color: var(--tre-primary);
}

.rodape__lista i {
    color: var(--tre-primary);
    font-size: .95rem;
}

/* Faixa escura fecha a pagina com peso, em vez de ela se dissolver no
   cinza. E o lugar certo dos dados cadastrais: fora da primeira dobra,
   mas facil de achar para quem esta conferindo o fornecedor. */
.rodape__legal {
    position: relative;
    margin-top: clamp(3rem, 6vw, 5rem);
    background: var(--tre-ink);
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    padding-block: 1.6rem;
}

.rodape__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 2rem;
}

/* Sem ponto medio separando os dados: espaco faz o mesmo trabalho e nao
   vira aquele cabecalho de metadados que todo site repete. */
.rodape__dados,
.rodape__copy {
    margin: 0;
}

.rodape__dados span + span {
    margin-left: 1.75rem;
}


/* 15. RESPONSIVO ======================================================== */
@media (max-width: 767.98px) {
    /* Empilha os dados cadastrais: em linha eles quebram feio. */
    .rodape__dados span {
        display: block;
    }
    .rodape__dados span + span {
        margin-left: 0;
        margin-top: .35rem;
    }
    .rodape__legal-inner {
        justify-content: flex-start;
    }
}

@media (max-width: 991.98px) {
    /* Tres colunas lado a lado nao cabem: vira pilha alinhada a esquerda. */
    .integrado {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .main-nav {
        --bs-navbar-padding-y: 1.1rem;
    }

    #mainNav {
        padding: .75rem 0 1.25rem;
        margin-top: .75rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .main-nav .nav-link {
        padding: .85rem 0;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .main-nav .nav-link.active::after {
        right: auto;
        width: 28px;
        bottom: .4rem;
    }

    .btn-tremot {
        display: block;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .brand__name { font-size: 1.35rem; }
    .brand__mark { width: 42px; height: 42px; }
}