/* Estilos do site em PHP: reproduzem os blocos que antes eram gerados pelo
   Elementor/WooCommerce e que agora são montados a partir do banco. */

/* ------------------------------------------- catálogo: linhas de /produtos/
   Os seletores usam três classes de propósito para superar as regras
   `.e-con.e-flex` do Elementor, que definem --width e --flex-direction. */
.elementor .e-con.tt-produto-linha{
    --display:flex;
    --flex-direction:row;
    --container-widget-width:initial;
    --container-widget-height:100%;
    --container-widget-flex-grow:1;
    --container-widget-align-self:stretch;
    --flex-wrap-mobile:wrap;
    --justify-content:center;
    --gap:10px 10px;
    --row-gap:10px;
    --column-gap:10px;
    --flex-wrap:wrap;
    --border-radius:20px 20px 20px 20px;
    --margin-top:5px;--margin-bottom:5px;--margin-left:5px;--margin-right:5px;
    --padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;
    background-color:var(--e-global-color-71fbecd);
}
.elementor .e-con.tt-produto-linha-icone{
    --display:flex;
    --justify-content:center;
    --border-radius:20px 20px 20px 20px;
    background-color:var(--e-global-color-71fbecd);
}
.elementor .e-con.tt-produto-linha-titulo{--display:flex;--justify-content:center;}
.tt-produto-linha .elementor-icon-wrapper{text-align:center;}
.tt-produto-linha .elementor-icon{font-size:20px;color:var(--e-global-color-primary);border-color:var(--e-global-color-primary);}
.tt-produto-linha .elementor-icon svg{height:20px;fill:var(--e-global-color-primary);}
/* color-customize.css impõe 45px em `.elementor-widget-heading h2.elementor-heading-title`;
   por isso o seletor abaixo precisa da mesma estrutura, com uma classe a mais. */
.tt-produto-linha .elementor-widget-heading h2.elementor-heading-title{
    font-size:22px;font-weight:600;color:var(--e-global-color-primary);
}
.tt-produto-linha .elementor-widget-heading h2.elementor-heading-title a{color:inherit;}
.tt-produto-linha .elementor-widget-heading h2.elementor-heading-title a:hover,
.tt-produto-linha .elementor-widget-heading h2.elementor-heading-title a:focus{color:var(--e-global-color-accent);}

@media (max-width:767px){
    .elementor .e-con.tt-produto-linha-icone{--width:20%;}
    .elementor .e-con.tt-produto-linha-titulo{--width:75%;}
    .tt-produto-linha .elementor-widget-heading h2.elementor-heading-title{font-size:16px;}
}
@media (min-width:768px){
    .elementor .e-con.tt-produto-linha-icone{--width:10%;}
    .elementor .e-con.tt-produto-linha-titulo{--width:70%;}
}

/* --------------------------------- grade do catálogo exibida na página inicial */
.tt-catalogo-grid ul.products li.product .woocommerce-loop-product__title{
    font-size:18px;
    font-weight:600;
    padding:.75em 0 0;
}
.tt-catalogo-grid ul.products li.product img{margin-bottom:.6em;}
.tt-catalogo-grid ul.products li.product{text-align:center;}

/* --------------------------------------------------------------- banners */
.elementor-widget-slides .swiper-slide{height:480px;}
.elementor-widget-slides .swiper-slide-bg{background-position:center center;background-repeat:no-repeat;}
.elementor-widget-slides a.tt-banner-link{display:block;position:absolute;inset:0;}

/* ------------------------------------------------------------ formulários */
.tt-hp{
    position:absolute!important;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.tt-alerta{
    margin:0 0 18px;
    padding:14px 18px;
    border-radius:6px;
    font-size:15px;
    line-height:1.45;
}
.tt-alerta-ok{background:#e7f6e9;border:1px solid #0abf22;color:#12661e;}
.tt-alerta-erro{background:#fdecea;border:1px solid #d93025;color:#8c1d16;}

.elementor-field-type-upload input.elementor-upload-field{
    width:100%;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e3e3e3;
    border-radius:3px;
}

/* --------------------------------------------------------------- página 404 */
.tt-404{padding:60px 0;text-align:center;}
.tt-404 .elementor-button{display:inline-block;margin-top:14px;}

/* ------------------------------------------------------- publicação do blog */
.single-post .post-thumbnail{margin-bottom:26px;}
.single-post .entry-meta{margin-bottom:22px;color:#6b6b6b;font-size:14px;}
.single-post .entry-meta .cat-links{margin-left:14px;}
.single-post .entry-footer{margin-top:34px;}

/* =========================================================================
   Layout aprovado em "CORREÇÕES - NOVO SITE - TOP TEC BORRACHAS"
   ========================================================================= */

:root{
    --tt-navy:#1d2150;
    --tt-azul-faixa:#218cc6;
    --tt-azul-texto:#004489;
    --tt-amarelo:#f6d358;
    --tt-cinza-rodape:#96989a;
    --tt-form-fundo:#e6e7e8;
    --tt-form-texto:#184a84;
    --tt-form-botao:#314a78;
}

/* ------------------------------------------- faixa de transição do conteúdo
   A faixa acompanha a largura do conteúdo da página. As medidas estão em cqw
   (porcentagem da largura da própria faixa) para seguir a arte de fundo, onde o
   quadrado amarelo vai de 0 a 7,66% da largura. */
.tt-faixa-wrap{
    container-type:inline-size;
    margin:30px auto 4px;
}
.tt-faixa{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    aspect-ratio:1920 / 226;
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    overflow:hidden;
}
.tt-faixa-inicial{
    position:absolute;
    left:0;
    top:3.98%;
    width:7.66%;
    height:61.1%;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:700;
    font-size:6.6cqw;
    line-height:1;
}
.tt-faixa-texto{
    margin:0;
    padding:0 3cqw 0 8.9cqw;
    color:var(--tt-azul-texto);
    line-height:1.1;
}
.tt-faixa-destaque{font-weight:700;font-size:3.3cqw;letter-spacing:-.005em;}
.tt-faixa-complemento{font-weight:400;font-size:2.45cqw;margin-left:.34em;}

@media (max-width:767px){
    .tt-faixa-wrap{margin:20px auto 2px;}
    .tt-faixa{aspect-ratio:auto;min-height:62px;background-size:cover;background-position:left center;}
    .tt-faixa-inicial{font-size:30px;height:70%;top:6%;width:12%;}
    .tt-faixa-texto{padding:8px 12px 8px 15%;}
    .tt-faixa-destaque{font-size:18px;}
    .tt-faixa-complemento{font-size:14px;display:block;margin-left:0;}
}

/* ------------------------------------------------------------------ rodapé */
.tt-rodape{
    background-color:var(--tt-navy);
    color:var(--tt-cinza-rodape);
    padding:0 0 34px;
    font-size:16px;
}
/* Medidas tiradas da arte enviada pelo cliente (image4 do documento de correções),
   em porcentagem da largura do quadro: altura 11,61%, recuos 5,6% e 3,16%,
   e 4,2% de avanço sobre o conteúdo acima. O quadro é retangular, sem cantos arredondados. */
.tt-cta-wrap{
    --tt-cta-sobe:clamp(22px, 3.3vw, 48px);
    position:relative;
    top:calc(-1 * var(--tt-cta-sobe));
    margin-bottom:calc(-1 * var(--tt-cta-sobe));
    z-index:3;
}
.tt-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    flex-wrap:wrap;
    background:var(--tt-azul-faixa);
    border-radius:0;
    padding:3.16% 5.6%;
}
.tt-cta-texto{
    margin:0;
    color:#fff;
    font-size:clamp(15px, 1.87vw, 22px);
    font-weight:400;
    line-height:1.25;
}
.tt-cta-botao{
    background:#fff;
    color:#373435;
    border-radius:999px;
    padding:1.75% 4.4%;
    font-size:clamp(13px, 1.2vw, 14px);
    line-height:1.25;
    white-space:nowrap;
    transition:background .2s ease, color .2s ease;
}
.tt-cta-botao:hover,.tt-cta-botao:focus{background:var(--tt-navy);color:#fff;text-decoration:none;}

.tt-rodape-corpo{padding-top:2.4%;}
.tt-rodape-colunas{
    display:grid;
    grid-template-columns:1.45fr 1fr 1.2fr .95fr;
    gap:30px 34px;
    padding-bottom:34px;
}
.tt-marca-nome{
    margin:0 0 6px;
    color:var(--tt-cinza-rodape);
    font-size:27px;
    font-weight:700;
    line-height:1.2;
}
.tt-marca-frase{margin:0;font-style:italic;line-height:1.5;max-width:26ch;}
.tt-rodape-col-titulo{
    margin:0 0 14px;
    color:#fff;
    font-size:21px;
    font-weight:400;
    line-height:1.2;
}
.tt-rodape-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.tt-rodape-col a{color:var(--tt-cinza-rodape);}
.tt-rodape-col a:hover,.tt-rodape-col a:focus{color:#fff;text-decoration:none;}

.tt-rodape-base{
    border-top:1px solid rgba(255,255,255,.22);
    padding-top:16px;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:16px;
    flex-wrap:wrap;
    font-size:15px;
}
.tt-rodape-base p{margin:0;}
.tt-copy{color:var(--tt-cinza-rodape);}
.tt-assinatura{
    color:rgba(150,152,154,.6);
    font-size:13.5px;
}
.tt-assinatura a{color:inherit;}
.tt-assinatura a:hover,.tt-assinatura a:focus{color:var(--tt-cinza-rodape);}

@media (max-width:991px){
    .tt-rodape-colunas{grid-template-columns:1fr 1fr;}
}
@media (max-width:575px){
    .tt-rodape-colunas{grid-template-columns:1fr;}
    .tt-cta{padding:20px 22px;}
    .tt-cta-botao{padding:12px 24px;}
    .tt-rodape-corpo{padding-top:26px;}
    .tt-rodape-base{justify-content:flex-start;}
}

/* ------------------------------------------------ formulários (novo layout) */
.elementor-widget-form .elementor-form,
.tt-form{
    background:var(--tt-form-fundo);
    padding:14px;
    border-radius:2px;
}
/* o Elementor define larguras em % nas classes elementor-col-*; dentro do grid
   quem manda é o grid-column, então a largura precisa voltar a ser automática */
.elementor-widget-form .elementor-form .elementor-field-group{
    padding:0;
    margin:0;
    display:block;
    width:auto;
    max-width:none;
    flex:none;
}
/* a largura de cada campo continua vindo das classes elementor-col-* do próprio formulário */
.elementor-widget-form .elementor-form .elementor-form-fields-wrapper{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
    margin:0;
}
.elementor-widget-form .elementor-form .elementor-col-33{grid-column:span 2;}
.elementor-widget-form .elementor-form .elementor-col-50{grid-column:span 3;}
.elementor-widget-form .elementor-form .elementor-col-66{grid-column:span 4;}
.elementor-widget-form .elementor-form .elementor-col-100,
.elementor-widget-form .elementor-form .e-form__buttons,
.elementor-widget-form .elementor-form .tt-hp{grid-column:1 / -1;}

.elementor-widget-form .elementor-form .elementor-field-textual{
    background:#fff;
    border:0;
    border-radius:0;
    padding:20px 22px;
    font-size:17px;
    color:var(--tt-form-texto);
    width:100%;
    box-shadow:none;
}
.elementor-widget-form .elementor-form textarea.elementor-field-textual{min-height:190px;resize:vertical;}
.elementor-widget-form .elementor-form .elementor-field-textual::placeholder{color:var(--tt-form-texto);opacity:1;}
.elementor-widget-form .elementor-form .elementor-field-textual:focus{
    outline:2px solid var(--tt-azul-faixa);
    outline-offset:-2px;
}
.elementor-widget-form .elementor-form .elementor-button{
    background:var(--tt-form-botao);
    color:#fff;
    border:0;
    border-radius:0;
    width:100%;
    padding:16px 22px;
    font-size:18px;
    font-weight:400;
    justify-content:center;
    transition:background .2s ease;
}
.elementor-widget-form .elementor-form .elementor-button:hover,
.elementor-widget-form .elementor-form .elementor-button:focus{background:var(--tt-navy);}
.elementor-widget-form .elementor-form .elementor-button-icon svg{width:1em;height:1em;fill:currentColor;}
.elementor-widget-form .elementor-form .elementor-button-content-wrapper{
    display:inline-flex;align-items:center;gap:.5em;flex-direction:row-reverse;
}

/* link de retorno abaixo do formulário */
.elementor-21626 .elementor-icon-list-item a{color:var(--tt-form-texto);font-size:17px;}
.elementor-21626 .elementor-icon-list-icon svg{fill:var(--tt-form-texto);width:.7em;height:.7em;}

@media (max-width:767px){
    .elementor-widget-form .elementor-form .elementor-form-fields-wrapper{grid-template-columns:1fr;}
    .elementor-widget-form .elementor-form .elementor-field-group{grid-column:1 / -1;}
    .elementor-widget-form .elementor-form .elementor-field-textual{padding:15px 16px;font-size:16px;}
}

/* ------------------------------- blocos de conteúdo criados fora do Elementor
   Usados nas páginas novas do catálogo. Três classes para vencer `.e-con.e-flex`. */
.elementor .e-con.tt-linha{
    --display:flex;
    --flex-direction:row;
    --justify-content:space-between;
    --align-items:center;
    --gap:36px 36px;
    --flex-wrap:wrap;
    --flex-wrap-mobile:wrap;
}
.elementor .e-con.tt-col-imagem{--display:flex;--width:38%;--justify-content:center;}
.elementor .e-con.tt-col-texto{--display:flex;--width:57%;}
.elementor .e-con.tt-col-larga{--display:flex;--width:100%;}
.tt-col-imagem img{max-width:100%;height:auto;display:block;}
.tt-titulo-secao{
    font-family:"Titi","Titillium Web",Sans-serif;
    font-size:22px;
    color:#162B60;
    margin:0 0 12px;
    line-height:1.3;
}
.tt-lista{margin:0;padding-left:20px;}
.tt-lista li{margin-bottom:8px;}
@media (max-width:767px){
    .elementor .e-con.tt-col-imagem,
    .elementor .e-con.tt-col-texto{--width:100%;}
}

/* --------------------------------------------------- cartões do catálogo */
.tt-catalogo{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    margin:8px 0 10px;
}
.tt-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    background:#fff;
    border:1px solid #e6e6e6;
    border-radius:12px;
    padding:26px 22px 26px;
    text-align:center;
    color:#314a78;
    transition:box-shadow .2s ease, transform .2s ease;
}
.tt-card:hover,.tt-card:focus{
    text-decoration:none;
    color:#314a78;
    box-shadow:0 10px 30px -14px rgba(29,33,80,.45);
    transform:translateY(-2px);
}
.tt-card-foto{
    display:block;
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
}
.tt-card-foto img{width:100%;height:100%;object-fit:contain;display:block;}
.tt-card-nome{
    font-family:"Poppins",Sans-serif;
    font-size:20px;
    font-weight:600;
    line-height:1.3;
    margin-top:auto;
}
.tt-card-selo{
    background:#314a78;
    color:#fff;
    border-radius:9px;
    padding:11px 20px;
    font-size:14px;
    font-weight:400;
    line-height:1.35;
    max-width:100%;
}
@media (max-width:991px){.tt-catalogo{grid-template-columns:repeat(2,1fr);gap:20px;}}
@media (max-width:575px){.tt-catalogo{grid-template-columns:1fr;}}

/* texto de apresentação e link de retorno do formulário de produto */
.elementor-21626 .elementor-widget-text-editor p{
    color:var(--tt-form-texto);
    font-size:17px;
    line-height:1.5;
    text-align:center;
    margin:0 0 14px;
}
.elementor-21626 .elementor-icon-list-items{
    list-style:none;
    margin:14px 0 0;
    padding:0;
    display:flex;
    justify-content:center;
}
.elementor-21626 .elementor-icon-list-item a{
    display:inline-flex;
    align-items:center;
    gap:.45em;
}

/* foto alinhada à direita dentro de um bloco de texto */
.tt-foto-direita{
    float:right;
    width:min(38%,340px);
    margin:4px 0 18px 26px;
    border-radius:4px;
}
@media (max-width:767px){
    .tt-foto-direita{float:none;width:100%;margin:0 0 18px;}
}

/* canal de ética */
.tt-aviso-anonimato{
    background:#eef4ff;
    border-left:3px solid var(--tt-azul-faixa);
    padding:13px 18px;
    margin:0 0 16px;
    font-size:15px;
    color:var(--tt-form-texto);
    line-height:1.55;
}
.tt-form-denuncia select.elementor-field-textual{
    height:auto;
    line-height:1.4;
    appearance:none;
    background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23184a84' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 20px center/12px;
    padding-right:48px;
}

/* sequência de fotos com setas (página Vedações e juntas especiais) */
.tt-fluxo{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:26px 0 30px;
}
.tt-fluxo-foto{
    width:100%;
    height:100%;
    aspect-ratio:1 / 1.05;
    object-fit:cover;
    display:block;
}
.tt-fluxo-seta{
    position:absolute;
    top:4%;
    width:23%;
    height:auto;
    pointer-events:none;
}
.tt-fluxo-seta-1{left:26.5%;}
.tt-fluxo-seta-2{left:51.5%;}
@media (max-width:767px){
    .tt-fluxo{grid-template-columns:repeat(2,1fr);}
    .tt-fluxo-seta{display:none;}
}

/* espaço para a faixa azul do rodapé, que avança sobre o conteúdo */
#content.site-content{padding-bottom:74px;}
@media (max-width:575px){#content.site-content{padding-bottom:56px;}}


/* =========================================================================
   Ajustes de responsividade
   ========================================================================= */

/* Palavras técnicas longas ("superestrutura", "infraestrutura") não cabem em
   uma linha de celular e estouravam a largura da página. */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.tt-faixa-texto,
.tt-card-nome,
.tt-cta-texto{
    overflow-wrap:break-word;
}

/* Alvos de toque: links do rodapé e dos cartões do blog eram baixos demais
   para o dedo (menos de 30px de altura). */
@media (max-width:767px){
    .tt-rodape-col ul{gap:0;}
    .tt-rodape-col li a{
        display:block;
        padding:9px 0;
        line-height:1.35;
    }
    .tt-rodape-base{gap:10px;}
    .hkangles-post-slide .read-more-link a,
    .hkangles-post-title a{display:inline-block;padding:6px 0;}
    .tt-card{padding:22px 18px;}
}

/* Tabelas e blocos largos do conteúdo rolam dentro de si, sem arrastar a página. */
@media (max-width:767px){
    .entry-content table{display:block;width:100%;overflow-x:auto;}
    .entry-content iframe{max-width:100%;}
}

/* O mapa da página de contato precisa de altura própria no celular. */
@media (max-width:767px){
    .elementor-widget-google_maps iframe{height:280px;}
}

/* Os dois últimos links pequenos: área de toque maior sem mudar a aparência. */
@media (max-width:767px){
    .elementor-21626 .elementor-icon-list-item a{padding:7px 4px;}
    .tt-assinatura a{display:inline-block;padding:6px 0;}
}

/* Telefone e e-mail no cabeçalho do celular — o tema esconde a barra de
   contatos abaixo de 768px, e num site B2B esses dois atalhos fazem falta. */
.tt-contato-mobile{display:none;}
@media (max-width:767px){
    .tt-contato-mobile{
        display:flex;
        align-items:center;
        gap:4px;
        margin-left:auto;
    }
    .tt-contato-mobile-item{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:44px;
        height:44px;
        color:var(--tt-azul-faixa);
        font-size:20px;
        text-decoration:none;
    }
    .tt-contato-mobile-item:hover,
    .tt-contato-mobile-item:focus{color:var(--tt-navy);}
    /* o botão do menu ganha área de toque de 44px */
    .slicknav_btn{
        min-width:44px;
        min-height:44px;
        display:flex!important;
        align-items:center;
        justify-content:center;
    }
    #site-navigation-mobile{margin-left:4px;}
}

/* Containers do Elementor com margem lateral própria: o `max-width:100%` do
   próprio Elementor ignora essas margens e sobrava 5px além da coluna.
   (O mesmo acontecia no site em WordPress.) */
.elementor .e-con.e-parent{
    max-width:calc(100% - var(--margin-left, 0px) - var(--margin-right, 0px));
}

/* Alvos de toque também no tablet, não só no celular. */
@media (max-width:1024px){
    .tt-rodape-col ul{gap:0;}
    .tt-rodape-col li a{display:block;padding:9px 0;line-height:1.35;}
    .hkangles-post-slide .read-more-link a{display:inline-block;padding:6px 0;}
    .elementor-21626 .elementor-icon-list-item a{padding:7px 4px;}
    .tt-assinatura a{display:inline-block;padding:6px 0;}
    .entry-footer .read-more-link a{display:inline-block;padding:8px 0;}
}

/* Referências de fonte coladas junto do texto de algumas publicações vieram do
   site antigo com classes de um framework que não existe aqui, e ficavam
   minúsculas. Aqui elas viram etiquetas legíveis. */
.entry-content a[class*="rounded-xl"],
.entry-content a[class*="h-4.5"]{
    display:inline-block;
    padding:7px 12px;
    margin:0 3px 5px 0;
    border:1px solid var(--borda, #e0e3ea);
    border-radius:999px;
    background:#f4f6fa;
    color:var(--tt-form-texto);
    font-size:13px;
    line-height:1.4;
    text-decoration:none;
    vertical-align:middle;
}
.entry-content a[class*="rounded-xl"]:hover,
.entry-content a[class*="h-4.5"]:hover{background:#e8edf7;}

/* Campo de currículo: o controle nativo fica pequeno demais para o dedo. */
.elementor-widget-form .elementor-form input.elementor-upload-field{
    padding:14px 16px;
    font-size:16px;
    line-height:1.4;
    color:var(--tt-form-texto);
    cursor:pointer;
}
.elementor-widget-form .elementor-form input.elementor-upload-field::file-selector-button{
    margin-right:12px;
    padding:9px 16px;
    border:0;
    border-radius:3px;
    background:var(--tt-form-botao);
    color:#fff;
    font:inherit;
    font-size:15px;
    cursor:pointer;
}
.elementor-widget-form .elementor-form input.elementor-upload-field::file-selector-button:hover{
    background:var(--tt-navy);
}

/* Sanfona das páginas de produto: mesmos ajustes que a página Tecnologia
   recebe do seu CSS próprio (post-21240.css), para os dois componentes
   ficarem idênticos — título azul, 1rem, cantos de 15px. */
.single-produto .elementor-widget-n-accordion{
    --n-accordion-title-font-size:1rem;
    --n-accordion-item-title-space-between:0px;
    --n-accordion-item-title-distance-from-content:0px;
    --n-accordion-border-radius:15px 15px 15px 15px;
    --n-accordion-title-normal-color:var(--e-global-color-secondary);
    --n-accordion-title-active-color:var(--e-global-color-primary);
    --n-accordion-icon-size:15px;
}