/* =========================================================================
   Responsividade e refinamentos visuais
   Carregado por último para ajustar mobile e desktop sem alterar a identidade
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ---- Overlay do banner: garante leitura do texto sobre qualquer imagem ---- */
.trido-hero-overlay {
    background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.12) 100%);
}

/* ---- Banner/Hero: altura fluida e tipografia escalonável ---- */
.trido-hero-section { height: auto !important; min-height: 680px; }
.trido-hero-title { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; }
.trido-hero-subtitle { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 580px; }

@media (max-width: 991.98px) {
    .trido-hero-section { min-height: 560px; }
    .site-header.is-sticky .navbar { margin-bottom: 0; }
}
@media (max-width: 575.98px) {
    .trido-hero-section { min-height: 480px; }
    .trido-hero-title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .trido-hero-subtitle { margin-bottom: 1.75rem !important; }
}

/* ---- Empilhamento limpo das seções de 2 colunas em tablet/mobile ---- */
@media (max-width: 991.98px) {
    section.pq-sepermix .col-md-6,
    section.pq-sepermix .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
    .pq-sepermix .conteudo { padding: 56px 26px !important; }
}
@media (max-width: 575.98px) {
    .pq-sepermix .conteudo { padding: 40px 20px !important; }
    .line-top-title:after { top: -14px; }
}

/* ---- Carrossel de produtos: respiro nas laterais no mobile ---- */
@media (max-width: 991.98px) {
    .produtos-swiper.px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .produtos-swiper { padding-top: 40px; padding-bottom: 40px; }
}

/* ---- Faixas de CTA ---- */
@media (max-width: 991.98px) {
    .py-50 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    #cta-home h2 { font-size: 1.35rem; }
    #call-to-action { position: static; bottom: 0; margin-bottom: 0; min-height: auto; padding: 60px 0; }
    #call-to-action .conteudo { top: 0 !important; }
    #call-to-action h2 { font-size: 1.5rem; }
}

/* ---- Seção "Onde estamos" (modelo com mockup) ---- */
@media (max-width: 991.98px) {
    .onde-estamos { margin-top: 0 !important; padding: 50px 0; }
    .onde-estamos .conteudo.px-5 { padding: 0 20px !important; }
}

/* ---- Obras realizadas ---- */
#obras-realizadas img { width: 100%; height: auto; display: block; }
@media (max-width: 767.98px) {
    #obras-realizadas .conteudo { padding: 28px 20px; }
    #obras-realizadas .titulo { margin-bottom: 1rem !important; }
}

/* ---- Botão flutuante de orçamento ---- */
@media (max-width: 575.98px) {
    .footer-orcamento { bottom: 14px; right: 12px; z-index: 1030; }
    .footer-orcamento .btn,
    .footer-orcamento .btn.efeito { padding: .55rem 1rem; font-size: .85rem; }
}

/* ---- Tipografia geral responsiva ---- */
.titulo { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.title-destaque, .fs-35 { font-size: clamp(1.6rem, 3.6vw, 2.2rem) !important; }

/* Títulos do carrossel: nunca quebrar no meio da palavra */
.produtos-swiper .carousel-content h3 {
    overflow-wrap: normal; word-break: normal; hyphens: none;
    font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.28;
}
/* Textos longos do rodapé (e-mail) quebram sem estourar o layout */
.footer-widget p { overflow-wrap: anywhere; }

/* ---- Botões: alvo de toque confortável ---- */
@media (max-width: 575.98px) {
    .navbar .wpp-btn { display: block; width: 100%; text-align: center; }
    .footer-widgets { text-align: left; }
}

/* ---- Marca em texto (usada na versão sem logo de imagem) ---- */
.brand-text {
    font-weight: 800; font-size: 1.5rem; letter-spacing: .3px;
    color: #fff; text-decoration: none;
    display: inline-flex; align-items: center; gap: .55rem; line-height: 1;
}
.brand-text:hover { color: #fff; opacity: .9; }
.brand-text .brand-mark {
    display: inline-block; width: 20px; height: 20px;
    background: #f72228; transform: rotate(45deg); border-radius: 4px;
}
.brand-text small { font-size: .6rem; font-weight: 600; letter-spacing: 3px;
    text-transform: uppercase; opacity: .8; display: block; margin-top: 3px; }

/* ---- Cartões de destaque (stats) ---- */
.stat-card {
    background: #111; color: #fff; border-radius: 14px; padding: 26px 22px; height: 100%;
    border: 1px solid rgba(255,255,255,.08);
}
.stat-card .stat-num { display: block; font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-card .stat-label { font-size: .95rem; opacity: .85; margin-top: 6px; display: block; }