/* ==========================================================================
   Toppote — camada de marca sobre o tema Industrie
   Tudo aqui é override: o tema continua intocado em assets/css/main.css.
   Paleta tirada da própria marca: azul-marinho do logotipo + laranja do "tp".
   ========================================================================== */

:root {
    /* o tema usa "light-blue" como cor de destaque e "blue" como institucional.
       trocamos os dois pelas cores da Toppote e todo o site vira laranja+marinho. */
    --rs-theme-light-blue: #E63B11;
    --rs-theme-blue: #1D264A;
    --rs-theme-medium-blue: #1D264A;

    --tp-laranja: #E63B11;
    --tp-laranja-escuro: #C22F09;
    --tp-marinho: #1D264A;
    --tp-marinho-claro: #2A3565;
    --tp-areia: #F5F3F0;

    --rs-bg-dark-blue: #141B33;
    --rs-title-secondary: #1D264A;
    --rs-text-tertiary: #1D264A;
    --rs-border-tertiary: #1D264A;
}

/* --------------------------------------------------------------------------
   Respiro lateral
   O container "has-large" do tema tem 1720px: em telas de notebook o conteúdo
   encostava na borda. Aqui ele ganha margem até sobrar espaço de verdade.
   -------------------------------------------------------------------------- */
@media (max-width: 1800px) {
    .container.has-large {
        padding-inline: 52px;
    }
}

@media (max-width: 991px) {
    .container.has-large {
        padding-inline: 24px;
    }
}

/* --------------------------------------------------------------------------
   Ícones
   O tema usava uma fonte de ícone de 162 KB para 22 desenhos. Aqui cada ícone
   é um SVG embutido no HTML, herdando cor e tamanho de quem o contém.
   -------------------------------------------------------------------------- */
.tp-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
}

.tp-i svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: block;
}

/* O tema desenha alguns símbolos com Font Awesome / Remixicon em ::before.
   Como não carregamos fonte de ícone, esses viram caracteres comuns. */
.rs-breadcrumb-one .rs-breadcrumb-menu ul li:not(:last-child)::before {
    content: "\203A";
    font-family: var(--rs-ff-body);
    font-size: 22px;
    line-height: 1;
    inset-inline-end: -22px;
}

.mfp-close::after {
    content: "\00D7";
    font-family: var(--rs-ff-body);
    font-weight: 300;
}

.backtotop-wrap::after {
    content: "\2191";
    font-family: var(--rs-ff-body);
    font-size: 18px;
}

.rs-footer-widget-links ul li a::before {
    content: "\2192";
    font-family: var(--rs-ff-body);
    color: var(--tp-laranja);
}

.main-menu li.menu-item-has-children > a::after,
.main-menu li .has-arrow > a::after {
    content: "\25BE";
    font-family: var(--rs-ff-body);
}

/* --------------------------------------------------------------------------
   Ajustes finos de tipografia
   -------------------------------------------------------------------------- */
.rs-banner-title,
.rs-section-title {
    letter-spacing: -0.02em;
}

.rs-section-subtitle {
    letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.rs-header-logo img,
.offcanvas-logo img {
    height: 42px;
    width: auto;
}

.rs-header-top .rs-header-contact-item span {
    color: var(--tp-laranja);
}

/* O tema divide o cabeçalho em três caixas cinzas separadas por frestas.
   Aqui vira uma barra branca única, com uma linha fina embaixo — e igual à
   barra fixa que aparece ao rolar. */
.rs-header-four .rs-header-left,
.rs-header-four .rs-header-menu,
.rs-header-four .rs-header-right,
.rs-header-four .rs-header-logo-wrapper {
    background: transparent;
}

/* sem a caixa, o logotipo não precisa mais ficar centralizado num bloco largo */
.rs-header-four .rs-header-logo-wrapper {
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    padding-inline: 0;
}

.rs-header-four .rs-header-inner {
    gap: 0;
    align-items: center;
}

.rs-header-four .rs-header-left {
    padding-inline-end: 40px;
}

.rs-header-four .rs-header-right {
    padding-block: 0;
}

header > .rs-header-area:last-of-type {
    background: #fff;
    border-bottom: 1px solid rgba(29, 38, 74, 0.08);
}

/* item ativo do menu */
.main-menu ul li.tp-ativo > a {
    color: var(--tp-laranja);
}

/* no celular a barra de topo vira só o telefone — o resto está no rodapé */
@media (max-width: 767px) {
    .rs-header-top .rs-header-info-wrapper .rs-header-info-item:first-child,
    .rs-header-top > .rs-header-info-item {
        display: none;
    }

    .rs-header-top {
        justify-content: center;
        padding: 8px 0;
    }
}

/* --------------------------------------------------------------------------
   Banner — escurece a foto o suficiente para o texto branco passar no contraste
   -------------------------------------------------------------------------- */
.rs-banner-eight .rs-banner-bg-thumb {
    background-size: cover;
    background-position: center center;
}

.rs-banner-eight .rs-banner-bg-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(16, 22, 42, 0.93) 0%, rgba(16, 22, 42, 0.82) 38%, rgba(16, 22, 42, 0.42) 78%, rgba(16, 22, 42, 0.3) 100%);
}

.rs-banner-eight .rs-banner-subtitle {
    color: #fff;
}

.rs-banner-eight .rs-banner-descrip p {
    color: rgba(255, 255, 255, 0.82);
    max-width: 610px;
}

/* --------------------------------------------------------------------------
   Cards de diferencial
   O tema trazia um placeholder cinza de 540x230 no hover. Aqui entra foto de
   verdade, com um véu laranja por cima para o texto branco continuar legível.
   -------------------------------------------------------------------------- */
.rs-feature-five .rs-feature-bg-thumb {
    background-size: cover;
    background-position: center center;
    border-radius: 6px;
}

/* laranja escuro o bastante para o texto branco passar no contraste,
   translúcido o bastante para a foto continuar aparecendo */
.rs-feature-five .rs-feature-bg-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(160deg, rgba(180, 40, 8, 0.7) 0%, rgba(120, 25, 4, 0.88) 100%);
}

/* ícones dos cards de diferencial (o tema espera <svg>, usamos remixicon) */
.rs-feature-five .rs-feature-icon {
    box-shadow: 0 8px 32px -8px rgba(230, 59, 17, 0.55);
}

.rs-feature-five .rs-feature-icon i {
    font-size: 36px;
    line-height: 1;
    color: #fff;
    transition: color 0.5s ease;
}

.rs-feature-five .rs-feature-item:hover .rs-feature-icon i {
    color: var(--tp-laranja);
}

.tp-banner-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.tp-banner-lista li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.tp-banner-lista li i {
    color: var(--tp-laranja);
    font-size: 18px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Selo / blocos auxiliares
   -------------------------------------------------------------------------- */
.tp-selo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(29, 38, 74, 0.14);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tp-marinho);
    background: #fff;
}

.tp-selo i {
    color: var(--tp-laranja);
    font-size: 18px;
}

.tp-lista-check {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-lista-check li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--rs-text-primary);
}

.tp-lista-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--tp-laranja);
    box-shadow: inset 0 0 0 3px #fff;
}

.tp-lista-check li strong {
    color: var(--tp-marinho);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Segmentos atendidos
   -------------------------------------------------------------------------- */
.tp-segmentos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.tp-segmento {
    background: var(--tp-marinho);
    padding: 34px 28px;
    transition: background 0.35s ease;
}

.tp-segmento:hover {
    background: var(--tp-marinho-claro);
}

.tp-segmento i {
    display: block;
    font-size: 30px;
    color: var(--tp-laranja);
    margin-bottom: 16px;
}

.tp-segmento h6 {
    color: #fff;
    font-size: 17px;
    margin: 0 0 6px;
}

.tp-segmento p {
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Galeria de produtos
   -------------------------------------------------------------------------- */
.tp-galeria-item {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--tp-areia);
}

.tp-galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tp-galeria-item:hover img {
    transform: scale(1.06);
}

.tp-galeria-item figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 70px 22px 20px;
    background: linear-gradient(to top, rgba(13, 18, 36, 0.94) 0%, rgba(13, 18, 36, 0.72) 45%, rgba(13, 18, 36, 0) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.tp-galeria-item figcaption span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FF7A50;
    margin-bottom: 7px;
}

.tp-galeria-zoom {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* mosaico da fábrica: a primeira foto ocupa quatro células */
.tp-mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 24px;
}

.tp-mosaico .tp-galeria-item {
    margin: 0;
    height: 100%;
}

.tp-mosaico img {
    aspect-ratio: auto;
    height: 100%;
}

.tp-mosaico > :first-child {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 991px) {
    .tp-mosaico {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .tp-mosaico > :first-child {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tp-mosaico img {
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */
.tp-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-marinho);
    margin-bottom: 8px;
}

.tp-form input,
.tp-form select,
.tp-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid rgba(29, 38, 74, 0.16);
    background: #fff;
    color: var(--tp-marinho);
    font-size: 16px;
    font-family: var(--rs-ff-body);
    outline: none;
    transition: border-color 0.25s ease;
}

.tp-form textarea {
    min-height: 130px;
    resize: vertical;
}

.tp-form input:focus,
.tp-form select:focus,
.tp-form textarea:focus {
    border-color: var(--tp-laranja);
}

.tp-form .tp-campo {
    margin-bottom: 22px;
}

.tp-form-aviso {
    font-size: 13px;
    color: var(--rs-text-primary);
    margin-top: 14px;
}

.tp-form-aviso.ok {
    color: #1a7a3a;
    font-weight: 600;
}

.tp-form-aviso.erro {
    color: var(--tp-laranja-escuro);
    font-weight: 600;
}

/* honeypot anti-spam: fora da tela, nunca é visto por gente */
.tp-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tp-form-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 6px;
}

/* botão secundário: enviar pelo WhatsApp */
.tp-form-whats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--rs-ff-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--tp-marinho);
    cursor: pointer;
    transition: color 0.25s ease;
}

.tp-form-whats i,
.tp-form-whats svg {
    color: var(--tp-laranja);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.tp-form-whats:hover {
    color: var(--tp-laranja);
}

/* --------------------------------------------------------------------------
   Topo das páginas internas
   -------------------------------------------------------------------------- */
.tp-topo {
    padding: 150px 0 110px;
}

.tp-topo .rs-breadcrumb-bg {
    background-size: cover;
    background-position: center 60%;
}

.tp-topo .rs-breadcrumb-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(16, 22, 42, 0.94) 0%, rgba(16, 22, 42, 0.84) 45%, rgba(16, 22, 42, 0.5) 100%);
}

.tp-topo .rs-breadcrumb-title {
    color: #fff;
    font-size: 60px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.tp-topo-linha {
    color: rgba(255, 255, 255, 0.78);
    font-size: 19px;
    line-height: 1.6;
    max-width: 620px;
    margin: 18px 0 24px;
}

.tp-topo .rs-breadcrumb-menu ul,
.tp-topo .rs-breadcrumb-menu li,
.tp-topo .rs-breadcrumb-menu span {
    color: rgba(255, 255, 255, 0.62);
}

.tp-topo .rs-breadcrumb-menu a {
    color: var(--tp-laranja);
}

@media (max-width: 767px) {
    .tp-topo {
        padding: 90px 0 70px;
    }

    .tp-topo .rs-breadcrumb-title {
        font-size: 36px;
    }
}

/* --------------------------------------------------------------------------
   Tecnologias — tabela comparativa
   -------------------------------------------------------------------------- */
.tp-comparativo-rolagem {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tp-comparativo {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.55;
}

.tp-comparativo th,
.tp-comparativo td {
    padding: 18px 22px;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid rgba(29, 38, 74, 0.1);
}

.tp-comparativo thead th {
    background: var(--tp-marinho);
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-bottom: 0;
    padding: 20px 22px;
}

.tp-comparativo thead th:first-child {
    border-start-start-radius: 6px;
}

.tp-comparativo thead th:last-child {
    border-start-end-radius: 6px;
}

.tp-comparativo thead th a {
    color: #fff;
}

.tp-comparativo thead th a:hover {
    color: var(--tp-laranja);
}

.tp-comparativo-rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.tp-comparativo tbody th {
    width: 20%;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tp-marinho);
    background: var(--tp-areia);
}

.tp-comparativo tbody td {
    color: var(--rs-text-primary);
}

.tp-comparativo tbody tr:hover td {
    background: rgba(230, 59, 17, 0.04);
}

.tp-comparativo-nota {
    margin-top: 22px;
    font-size: 15px;
    color: var(--rs-text-primary);
}

.tp-comparativo-nota a {
    color: var(--tp-laranja);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Tecnologias — os quatro processos em grade
   -------------------------------------------------------------------------- */
.tp-processos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.tp-processo-card {
    display: flex;
    flex-direction: column;
    scroll-margin-top: 120px;
}

.tp-processo-foto {
    position: relative;
    margin: 0 0 26px;
    overflow: hidden;
    border-radius: 6px;
}

.tp-processo-foto img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tp-processo-card:hover .tp-processo-foto img {
    transform: scale(1.04);
}

.tp-processo-foto figcaption {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tp-laranja);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    border-end-end-radius: 6px;
}

.tp-processo-texto h2 {
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--tp-marinho);
    margin: 0 0 14px;
}

.tp-processo-texto p {
    margin: 0 0 16px;
}

.tp-processo-quando {
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--tp-laranja);
    margin-bottom: 0 !important;
}

.tp-processo-quando strong {
    color: var(--tp-marinho);
    font-weight: 600;
}

.tp-fundo-claro {
    background: var(--tp-areia);
}

@media (max-width: 991px) {
    .tp-processos {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 767px) {
    .tp-processo-texto h2 {
        font-size: 28px;
    }

    .tp-comparativo th,
    .tp-comparativo td {
        padding: 14px 16px;
    }
}

/* só para leitor de tela */
.tp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Números com título (página da empresa)
   -------------------------------------------------------------------------- */
.tp-numeros-titulo {
    margin-bottom: 46px;
}

.tp-numeros-titulo h2 {
    color: #fff;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}

.tp-numeros-nota {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1.65;
    margin: 44px 0 0;
}

.tp-numeros-nota strong {
    color: #fff;
}

/* galeria em formato paisagem (fábrica) */
.tp-galeria-alta img {
    aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   Blog — listagem
   -------------------------------------------------------------------------- */
.tp-post-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(29, 38, 74, 0.1);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.tp-post-card:hover {
    border-color: rgba(230, 59, 17, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -26px rgba(29, 38, 74, 0.5);
}

.tp-post-capa {
    display: block;
    overflow: hidden;
    background: var(--tp-areia);
}

.tp-post-capa img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.tp-post-card:hover .tp-post-capa img {
    transform: scale(1.05);
}

.tp-post-corpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 26px 28px;
}

.tp-post-corpo time {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tp-laranja);
}

.tp-post-corpo h3 {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 12px 0 12px;
}

.tp-post-corpo h3 a {
    color: var(--tp-marinho);
}

.tp-post-card:hover .tp-post-corpo h3 a {
    color: var(--tp-laranja);
}

.tp-post-corpo p {
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 20px;
}

.tp-post-leia {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--tp-marinho);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tp-post-leia::after {
    content: "\2192";
    transition: transform 0.3s ease;
}

.tp-post-card:hover .tp-post-leia {
    color: var(--tp-laranja);
}

.tp-post-card:hover .tp-post-leia::after {
    transform: translateX(4px);
}

.tp-paginacao {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 60px;
}

.tp-paginacao a,
.tp-paginacao .tp-pag-atual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 46px;
    padding: 0 12px;
    border: 1px solid rgba(29, 38, 74, 0.14);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tp-marinho);
    transition: all 0.3s ease;
}

.tp-paginacao a:hover {
    border-color: var(--tp-laranja);
    color: var(--tp-laranja);
}

.tp-paginacao .tp-pag-atual {
    background: var(--tp-laranja);
    border-color: var(--tp-laranja);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Blog — o artigo
   -------------------------------------------------------------------------- */
.tp-topo-post {
    padding: 130px 0 90px;
}

.tp-topo-post .rs-breadcrumb-title {
    font-size: 46px;
    margin-top: 18px;
}

.tp-topo-post .tp-topo-linha {
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

.tp-artigo {
    font-size: 17px;
    line-height: 1.8;
    color: var(--rs-text-primary);
}

.tp-artigo > *:first-child {
    margin-top: 0;
}

.tp-artigo p {
    margin: 0 0 22px;
}

.tp-artigo h2,
.tp-artigo h3,
.tp-artigo h4 {
    color: var(--tp-marinho);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 44px 0 16px;
}

.tp-artigo h2 {
    font-size: 30px;
}

.tp-artigo h3 {
    font-size: 25px;
}

.tp-artigo h4 {
    font-size: 21px;
}

.tp-artigo strong {
    color: var(--tp-marinho);
    font-weight: 600;
}

.tp-artigo ul,
.tp-artigo ol {
    margin: 0 0 24px;
    padding-inline-start: 22px;
}

.tp-artigo li {
    margin-bottom: 10px;
}

.tp-artigo li::marker {
    color: var(--tp-laranja);
}

.tp-artigo img {
    border-radius: 6px;
    margin: 12px 0 26px;
}

/* primeiro parágrafo com destaque de abertura */
.tp-artigo > p:first-of-type {
    font-size: 20px;
    line-height: 1.7;
    color: var(--tp-marinho);
}

.tp-artigo h2[id],
.tp-artigo h3[id] {
    scroll-margin-top: 110px;
}

/* --------------------------------------------------------------------------
   Artigo — layout de duas colunas
   -------------------------------------------------------------------------- */
.tp-artigo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 70px;
    align-items: start;
}

.tp-artigo-corpo {
    max-width: 760px;
}

.tp-artigo-lado-fixo {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.tp-indice {
    padding: 26px 28px;
    background: var(--tp-areia);
    border-radius: 6px;
}

/* no celular ele fica no topo do texto, então precisa de respiro embaixo */
.tp-artigo-corpo > .tp-indice {
    margin-bottom: 40px;
}

.tp-indice-titulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tp-laranja);
    margin: 0 0 16px;
}

.tp-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: indice;
}

.tp-indice li {
    counter-increment: indice;
    margin-bottom: 12px;
}

.tp-indice li:last-child {
    margin-bottom: 0;
}

.tp-indice a {
    display: flex;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--tp-marinho);
    transition: color 0.25s ease;
}

.tp-indice a::before {
    content: counter(indice, decimal-leading-zero);
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--tp-laranja);
    padding-top: 2px;
}

.tp-indice a:hover,
.tp-indice a.tp-indice-ativo {
    color: var(--tp-laranja);
}

.tp-indice a.tp-indice-ativo {
    font-weight: 600;
}

.tp-lado-cta {
    padding: 30px 28px;
    background: var(--tp-marinho);
    border-radius: 6px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.tp-lado-cta::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -110px;
    width: 220px;
    height: 220px;
    border: 40px solid rgba(230, 59, 17, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.tp-lado-cta > * {
    position: relative;
    z-index: 1;
}

.tp-lado-cta .tp-i {
    font-size: 28px;
    color: var(--tp-laranja);
    margin-bottom: 14px;
}

.tp-lado-cta h2 {
    color: #fff;
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 10px;
}

.tp-lado-cta p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 22px;
}

/* --------------------------------------------------------------------------
   Artigo — barra de leitura, compartilhar e navegação
   -------------------------------------------------------------------------- */
.tp-progresso {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 998;
    background: transparent;
    pointer-events: none;
}

.tp-progresso span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tp-laranja);
    transition: width 0.1s linear;
}

.tp-compartilhar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(29, 38, 74, 0.1);
}

.tp-compartilhar-rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tp-marinho);
    margin-inline-end: 6px;
}

.tp-compartilhar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(29, 38, 74, 0.14);
    border-radius: 50%;
    background: none;
    padding: 0;
    color: var(--tp-marinho);
    font-size: 19px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tp-compartilhar-btn:hover {
    background: var(--tp-laranja);
    border-color: var(--tp-laranja);
    color: #fff;
}

.tp-compartilhar-btn.tp-copiado {
    background: var(--tp-marinho);
    border-color: var(--tp-marinho);
    color: #fff;
}

.tp-artigo-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.tp-nav-item {
    display: block;
    padding: 22px 24px;
    border: 1px solid rgba(29, 38, 74, 0.12);
    border-radius: 6px;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.tp-nav-item:hover {
    border-color: var(--tp-laranja);
    transform: translateY(-2px);
}

.tp-nav-item span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tp-laranja);
    margin-bottom: 8px;
}

.tp-nav-item strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tp-marinho);
}

.tp-nav-proximo {
    text-align: end;
}

.tp-nav-proximo span {
    justify-content: flex-end;
}

.tp-topo-post .tp-topo-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-topo-post .tp-topo-linha .tp-i {
    color: var(--tp-laranja);
    font-size: 17px;
}

.tp-topo-sep {
    opacity: 0.45;
    margin: 0 4px;
}

@media (max-width: 1199px) {
    .tp-artigo-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 46px;
    }
}

@media (max-width: 991px) {
    .tp-artigo-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .tp-artigo-corpo {
        max-width: none;
    }

    .tp-artigo-lado-fixo {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .tp-topo-post {
        padding: 80px 0 60px;
    }

    .tp-topo-post .rs-breadcrumb-title {
        font-size: 30px;
    }

    .tp-artigo > p:first-of-type {
        font-size: 18px;
    }

    .tp-artigo h2 {
        font-size: 25px;
    }

    .tp-artigo h3 {
        font-size: 21px;
    }

    .tp-artigo-lado-fixo {
        grid-template-columns: 1fr;
    }

    .tp-artigo-nav {
        grid-template-columns: 1fr;
    }

    .tp-nav-proximo {
        text-align: start;
    }

    .tp-nav-proximo span {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Contato
   -------------------------------------------------------------------------- */
.tp-contato-lista {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}

.tp-contato-lista li {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid rgba(29, 38, 74, 0.1);
}

.tp-contato-lista li:last-child {
    border-bottom: 1px solid rgba(29, 38, 74, 0.1);
}

.tp-contato-lista i {
    font-size: 22px;
    color: var(--tp-laranja);
    line-height: 1.4;
}

.tp-contato-lista h6 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-marinho);
    margin: 0 0 6px;
}

.tp-contato-lista a,
.tp-contato-lista span {
    color: var(--rs-text-primary);
    font-size: 16px;
    line-height: 1.6;
}

.tp-contato-lista a:hover {
    color: var(--tp-laranja);
}

.tp-contato-social {
    margin-top: 32px;
}

.tp-contato-social h6 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tp-marinho);
    margin: 0 0 14px;
}

.tp-form-caixa {
    background: var(--tp-areia);
    padding: 48px;
    border-radius: 6px;
}

.tp-form-caixa h2 {
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--tp-marinho);
    margin: 0 0 10px;
}

.tp-form-intro {
    margin-bottom: 32px;
}

.tp-mapa {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 420px;
}

.tp-mapa iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.tp-mapa-aviso {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 40px 24px;
    background: var(--tp-marinho);
    color: #fff;
}

.tp-mapa-aviso .tp-i {
    font-size: 34px;
    color: var(--tp-laranja);
    margin-bottom: 6px;
}

.tp-mapa-aviso h3 {
    color: #fff;
    font-size: 24px;
    line-height: 1.3;
    margin: 0;
    max-width: 520px;
}

.tp-mapa-aviso p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    margin: 0 0 18px;
    max-width: 460px;
}

.tp-mapa-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 22px;
}

.tp-mapa-link {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 767px) {
    .tp-form-caixa {
        padding: 30px 22px;
    }

    .tp-form-caixa h2 {
        font-size: 28px;
    }

    .tp-mapa {
        height: 300px;
    }
}

/* --------------------------------------------------------------------------
   Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
.tp-whats {
    position: fixed;
    left: 24px;
    bottom: 26px;
    z-index: 99;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 10px 26px rgba(37, 211, 102, 0.38);
    transition: transform 0.3s ease, background 0.3s ease;
}

.tp-whats:hover {
    color: #fff;
    background: #1EBE5A;
    transform: translateY(-3px);
}

@media (max-width: 575px) {
    .tp-whats {
        left: 16px;
        bottom: 18px;
        width: 48px;
        height: 48px;
    }

    .tp-whats svg {
        width: 24px;
        height: 24px;
    }
}

/* --------------------------------------------------------------------------
   Faixa de números (contadores) sobre o marinho
   O tema desenha os números só com contorno escuro — sobre o marinho eles
   sumiriam, então aqui viram número cheio em branco.
   -------------------------------------------------------------------------- */
.tp-numeros {
    background: var(--tp-marinho);
    position: relative;
    overflow: hidden;
}

.tp-numeros::after {
    content: "";
    position: absolute;
    right: -90px;
    top: -90px;
    width: 340px;
    height: 340px;
    border: 64px solid rgba(230, 59, 17, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.tp-numeros .container {
    position: relative;
    z-index: 1;
}

.rs-counter-area.tp-numeros .rs-counter-number,
.rs-counter-area.tp-numeros .odometer,
.rs-counter-area.tp-numeros .odometer-value {
    -webkit-text-fill-color: #fff;
    color: #fff;
    -webkit-text-stroke-width: 0;
    stroke-width: 0;
}

.rs-counter-area.tp-numeros .prefix {
    -webkit-text-fill-color: var(--tp-laranja);
    color: var(--tp-laranja);
    -webkit-text-stroke-width: 0;
    stroke-width: 0;
}

.tp-numeros .rs-counter-title {
    color: rgba(255, 255, 255, 0.68);
}

.tp-numeros .rs-counter-item {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* --------------------------------------------------------------------------
   Correções pontuais de tema
   -------------------------------------------------------------------------- */

/* o tema capitaliza cada palavra do botão — em português fica errado */
.rs-btn,
.rs-btn.has-icon,
.rs-header-btn .rs-btn {
    text-transform: none;
}

/* mantém o CTA do cabeçalho visível no desktop, sem quebrar o menu em duas linhas */
@media (min-width: 1200px) {
    .rs-header-four .rs-header-btn {
        display: block;
    }
}

.rs-header-four .main-menu ul li > a,
.rs-header-four .rs-header-btn .rs-btn {
    white-space: nowrap;
}

/* fotos das tecnologias com a mesma proporção, independentemente do original */
.rs-services-six .rs-services-thumb img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Bloco "A Toppote"
   O tema fixa o grid em 410px + 880px, o que estoura o container abaixo de
   1720px e corta a foto. Aqui o grid vira fluido e a foto acompanha a coluna.
   -------------------------------------------------------------------------- */
/* o tema deixa a foto invisível esperando uma animação de reveal — aqui ela
   é conteúdo, então aparece sempre */
.rs-about-six .rs-about-thumb {
    visibility: visible;
}

@media (min-width: 992px) {
    .rs-about-six .rs-about-wrapper {
        grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
        justify-content: stretch;
        margin-top: 0;
        gap: 0;
    }

    .rs-about-six .rs-about-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 3 / 4;
    }

    .rs-about-six .rs-about-content-wrapper {
        margin-inline-start: 70px;
    }
}

/* o texto do card não pode encostar na borda direita (lá entra a foto) */
.rs-services-six .rs-services-title,
.rs-services-six .rs-services-item .descrip {
    padding-inline-end: 26px;
}

/* --------------------------------------------------------------------------
   Faixa full-bleed sobre foto da fábrica
   -------------------------------------------------------------------------- */
.tp-faixa {
    position: relative;
    z-index: 1;
    padding: 130px 0;
    overflow: hidden;
}

.tp-faixa-foto {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 62%;
    z-index: -1;
}

.tp-faixa-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 22, 42, 0.88), rgba(16, 22, 42, 0.72));
}

.tp-faixa-conteudo {
    text-align: center;
    color: #fff;
}

.tp-faixa-etiqueta {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FF7A50;
    margin-bottom: 18px;
}

.tp-faixa-conteudo h2 {
    color: #fff;
    font-size: 48px;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.tp-faixa-conteudo p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.65;
    max-width: 640px;
    margin: 0 auto 34px;
}

@media (max-width: 767px) {
    .tp-faixa {
        padding: 80px 0;
    }

    .tp-faixa-conteudo h2 {
        font-size: 32px;
    }
}

/* --------------------------------------------------------------------------
   Miudezas
   -------------------------------------------------------------------------- */
.tp-descricao-forte {
    font-size: 19px;
    line-height: 1.65;
    color: var(--tp-marinho);
}

.rs-footer-stroke-text.has-theme-blue {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   Chamada final
   -------------------------------------------------------------------------- */
.tp-cta-caixa {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    align-items: center;
    gap: 48px;
    background: var(--tp-marinho);
    padding: 68px 70px;
    border-radius: 6px;
}

.tp-cta-caixa::after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    border: 66px solid rgba(230, 59, 17, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.tp-cta-texto,
.tp-cta-acoes {
    position: relative;
    z-index: 1;
}

.tp-cta-texto h2 {
    color: #fff;
    font-size: 44px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.tp-cta-texto p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 17px;
    line-height: 1.65;
    margin: 0;
    max-width: 480px;
}

.tp-cta-acoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.tp-cta-tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    transition: color 0.25s ease;
}

.tp-cta-tel i {
    color: var(--tp-laranja);
    font-size: 19px;
}

.tp-cta-tel:hover {
    color: #fff;
}

@media (max-width: 991px) {
    .tp-cta-caixa {
        grid-template-columns: 1fr;
        padding: 46px 32px;
        gap: 32px;
    }

    .tp-cta-texto h2 {
        font-size: 32px;
    }
}

/* --------------------------------------------------------------------------
   Rodapé
   O tema traz uma imagem de fundo genérica; aqui é o marinho da marca.
   -------------------------------------------------------------------------- */
.tp-rodape {
    background: var(--tp-marinho);
}

.tp-rodape .rs-footer-widget-title {
    color: #fff;
}

.tp-rodape .rs-footer-widget-description,
.tp-rodape .rs-footer-widget-address a,
.tp-rodape .rs-footer-widget p {
    color: rgba(255, 255, 255, 0.64);
}

.tp-rodape .rs-footer-widget-links ul li a,
.tp-rodape .rs-footer-widget-number a,
.tp-rodape .rs-footer-widget-email a {
    color: rgba(255, 255, 255, 0.8);
}

.tp-rodape .rs-footer-widget-links ul li a:hover,
.tp-rodape .rs-footer-widget-number a:hover,
.tp-rodape .rs-footer-widget-email a:hover {
    color: var(--tp-laranja);
}

.tp-rodape .rs-footer-widget-logo img {
    height: 44px;
    width: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* o tema esconde o menu desktop abaixo de 1200px — garante que o hambúrguer apareça */
@media (max-width: 1199px) {
    .rs-header-menu .rs-theme-social {
        display: none;
    }
}