/* ==================================================
   AJUSTES DE FLUIDEZ E COR
   - Vermelho reservado só para 2-3 destaques (marca/CTA)
   - Restante dos títulos em cinza-chumbo (mais sério/profissional)
   - Mapa maior e mais integrado ao lado do endereço
   - Menos "caixas" separadas: seções fluem sem bordas/sombras duras
   ================================================== */

/* --------------------------------------------------
   1) REDUZIR VERMELHO EXCESSIVO
   Mantemos vermelho apenas em: título principal (hero),
   sublinhado dos títulos de seção e botão "Ver Mais".
   Todo o restante vira cinza-chumbo escuro.
   -------------------------------------------------- */

.section-title,
.contact-title,
.contact-details h3,
.service-card h3,
.badge-text h3,
.video-title,
.video-section-title,
.cta-title,
.welcome-modal h2,
.welcome-modal-text strong {
    color: #222222 !important;
    text-shadow: none !important;
}

/* Sublinhado do título de seção: mantém como único toque de vermelho */
.section-title::after {
    background: linear-gradient(90deg, transparent, #E31C1C, transparent) !important;
}

/* Hero: título principal agora em preto, sem brilho */
.hero h1 {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Remove o brilho/glow vermelho atrás do hero e atrás da logo */
.hero::before {
    display: none !important;
}

.header-foto::after {
    display: none !important;
}

/* Hover de links/ícones: cinza escuro em vez de vermelho */
.contact-details a:hover {
    color: #B91C1C !important; /* leve toque de cor só na interação */
}

/* Bordas vermelhas em cards e blocos -> cinza claro neutro */
.carousel-container,
.service-card,
.video-section,
.map-box,
.contact-info,
.cta-container,
.mercadolivre-badge,
.welcome-modal,
.carousel-nav,
.carousel-dots {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.service-card:hover,
.mercadolivre-badge:hover,
.carousel-nav:hover {
    border-color: rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Textura de grade de fundo: de vermelho para cinza quase imperceptível */
body::before {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px) !important;
}

/* Partículas flutuantes: cinza sutil em vez de vermelho */
.particle {
    background: rgba(120, 120, 120, 0.35) !important;
}

/* Brilhos/glow vermelhos em cards e badges: removidos */
.mercadolivre-badge::before,
.cta-container::before {
    display: none !important;
}


/* --------------------------------------------------
   2) MAPA MAIOR, MAIS INTEGRADO (base)
   -------------------------------------------------- */

.contact-item {
    width: 100% !important;
}

.contact-details {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

.location-with-map {
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 18px !important;
}

.location-text {
    flex: 1 1 auto !important;
}

.mini-map {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    flex: 0 0 76px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.mini-map iframe {
    top: -32px !important;
    left: -19px !important;
    width: 123px !important;
    height: 142px !important;
}

@media (max-width: 480px) {
    .mini-map {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        max-width: 68px !important;
        flex: 0 0 68px !important;
    }

    .mini-map iframe {
        top: -29px !important;
        left: -17px !important;
        width: 110px !important;
        height: 127px !important;
    }
}


/* --------------------------------------------------
   3) MENOS DIVISÕES: seções fluem, sem caixas destacadas
   -------------------------------------------------- */

/* Fundo único e contínuo para todas as seções (sem alternância de blocos) */
.hero,
.services-section,
.location-section,
.cta-section {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove separadores duros entre seções */
.hero,
.video-section-title {
    border-bottom: none !important;
    border-top: none !important;
}

/* Vídeo: perde a "caixa" própria e passa a fazer parte do fluxo da página,
   mas mantém respiro lateral (não pode tocar as bordas da tela) */
.video-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Bloco de contato: sem borda/sombra de card, só espaçamento */
.contact-info {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
}

/* CTA: mantém leve destaque de fundo (é uma chamada à ação),
   mas sem borda pesada nem sombra grande */
.cta-container {
    background: #f7f7f7 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Badge Mercado Livre: sem borda/sombra pesada */
.mercadolivre-badge {
    background: #f7f7f7 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Carrossel de imagens: mantém leve arredondamento, sem borda colorida */
.carousel-container {
    border: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Cards de serviço: mais discretos, sem parecer "quadradinhos" isolados */
.service-card {
    background: #fafafa !important;
    box-shadow: none !important;
}

.services-grid {
    gap: 12px !important;
}


/* --------------------------------------------------
   4) TRAÇO VERMELHO COMO ACENTO EM MAIS TÍTULOS
   -------------------------------------------------- */

.hero h1,
.cta-title,
.video-section-title,
.welcome-modal h2 {
    position: relative !important;
    padding-bottom: 18px !important;
    margin-bottom: 14px !important;
}

.hero h1::after,
.cta-title::after,
.video-section-title::after,
.welcome-modal h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #E31C1C, transparent);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

/* Título de contato: alinhado à esquerda, traço também à esquerda */
.contact-title {
    position: relative !important;
    padding-bottom: 16px !important;
}

.contact-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #E31C1C, transparent);
    position: absolute;
    left: 0;
    bottom: 0;
}


/* --------------------------------------------------
   5) DIMENSÃO DO VÍDEO
   -------------------------------------------------- */

.video-container {
    max-width: 700px !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.video-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* --------------------------------------------------
   8) "CONHEÇA NOSSA LOJA"
   -------------------------------------------------- */

.video-title {
    position: static !important;
    padding-bottom: 0 !important;
    margin-bottom: 24px !important;
}

.video-title::after {
    display: none !important;
}

.video-caption {
    max-width: 620px !important;
    margin: 10px auto 0 !important;
    line-height: 1.45 !important;
}


/* --------------------------------------------------
   6) ALINHAMENTO E ESPAÇAMENTO GERAL (seção de contato)
   -------------------------------------------------- */

.contact-item {
    margin-bottom: 28px !important;
    align-items: flex-start !important;
}

.contact-details h3 {
    margin-bottom: 8px !important;
    font-size: 1.05em !important;
}

.location-text p {
    line-height: 1.55 !important;
}

.contact-details p + p {
    margin-top: 4px !important;
}


/* --------------------------------------------------
   7) RITMO VERTICAL ENTRE SEÇÕES
   -------------------------------------------------- */

.hero,
.services-section,
.location-section,
.cta-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

.video-section {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
}

.image-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

@media (max-width: 768px) {
    .hero,
    .services-section,
    .location-section,
    .cta-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
}


/* --------------------------------------------------
   9) CARROSSEL COM A MESMA DIMENSÃO DO VÍDEO
   -------------------------------------------------- */

.carousel-container {
    max-width: 700px !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.carousel-wrapper {
    height: 100% !important;
}


/* --------------------------------------------------
   10) TEXTO DA LOCALIZAÇÃO MAIS LEGÍVEL AO LADO DO MAPA
   -------------------------------------------------- */

.location-text p {
    font-size: 1.05em !important;
    color: #444444 !important;
    line-height: 1.55 !important;
}

.location-text p:first-child {
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 2px !important;
}


/* --------------------------------------------------
   11) SEÇÃO "ENTRE EM CONTATO" — CARTÃO SIMÉTRICO
   -------------------------------------------------- */

.contact-info {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important;
    padding: 32px 28px !important;
}

.contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 18px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.contact-item:first-child {
    padding-top: 2px !important;
}

.contact-item:last-child {
    border-bottom: none !important;
    padding-bottom: 2px !important;
}

.contact-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 12px !important;
    background: #f3f3f3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1em !important;
    filter: none !important;
}

.contact-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #333333 !important;
}

.contact-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-top: 2px !important;
}

.contact-details h3 {
    font-size: 0.85em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #999999 !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.contact-details p,
.contact-details a {
    color: #333333 !important;
    font-size: 1.08em !important;
    line-height: 1.6 !important;
}

.contact-details .small-text {
    color: #999999 !important;
    font-size: 0.88em !important;
}

.location-with-map {
    gap: 14px !important;
}

.location-text p {
    color: #1a1a1a !important;
}

.location-text p:nth-child(2) {
    color: #777777 !important;
    font-weight: 400 !important;
}


/* --------------------------------------------------
   12) AJUSTES SOLICITADOS (14/07/2026)
   - Carrossel com o mesmo respiro lateral do vídeo
   -------------------------------------------------- */

.image-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* --------------------------------------------------
   13) AJUSTES SOLICITADOS (14/07/2026 - parte 3, corrigido)
   IMPORTANTE: usamos :has(.location-with-map) em vez de
   nth-child(2), porque o item "Localização" é na verdade o
   3º filho de .contact-info (h2 + Telefone + Localização),
   então nth-child(2) estava pegando o item "Telefone" por
   engano e nenhuma regra do mapa surtia efeito.

   - Espaço mínimo entre "Localização" e "R. Agulhas Negras"
   - Mapa bem maior
   - Mapa alinhado do topo ("Localização") até o final
     ("Joinville - SC")
   - Arredondamento bem mais sutil
   -------------------------------------------------- */

/* Espaço mínimo entre o rótulo "LOCALIZAÇÃO" e o texto do endereço */
.contact-item:has(.location-with-map) .contact-details h3 {
    margin-bottom: 0px !important;
}

.contact-item:has(.location-with-map) .location-text p:first-child {
    margin-top: 0 !important;
}

/* O item de contato vira a referência de posicionamento do mapa,
   assim o mapa pode ocupar 100% da altura real do bloco de texto
   (do topo de "Localização" até o final de "Joinville - SC") */
.contact-item:has(.location-with-map) {
    position: relative !important;
}

.contact-item:has(.location-with-map) .contact-details {
    position: static !important;
    padding-right: 165px !important; /* reserva espaço para o mapa não cobrir o texto */
}

.contact-item:has(.location-with-map) .location-with-map {
    display: block !important; /* texto ocupa a largura toda; mapa sai do fluxo */
    margin-top: 0 !important;
    width: auto !important;
}

.contact-item:has(.location-with-map) .location-text {
    width: 100% !important;
}

/* Mapa um pouco menor, centralizado verticalmente com o bloco de texto */
.contact-item:has(.location-with-map) .mini-map {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    height: 120px !important;
    margin: 0 !important;
    border-radius: 8px !important; /* arredondamento bem mais sutil */
}

/* Crop do iframe em % (em vez de px) para acompanhar proporcionalmente
   o novo tamanho/altura do mapa, sem distorcer o enquadramento */
.contact-item:has(.location-with-map) .mini-map iframe {
    position: absolute !important;
    top: -55% !important;
    left: -40% !important;
    width: 180% !important;
    height: 210% !important;
}

/* O link clicável continua cobrindo toda a área do mapa */
.contact-item:has(.location-with-map) .mini-map .mini-map-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

@media (max-width: 480px) {
    .contact-item:has(.location-with-map) .contact-details {
        padding-right: 118px !important;
    }

    .contact-item:has(.location-with-map) .mini-map {
        width: 100px !important;
        max-width: 100px !important;
        min-width: 100px !important;
        height: 68px !important;
        border-radius: 5px !important;
    }
}


/* --------------------------------------------------
   18) AJUSTES SOLICITADOS (15/07/2026 - parte 2)
   O bloco "Telefone/Localização" ficava apertado ao lado do
   mapa em telas pequenas (endereço quebrando em 3 linhas).
   Aqui reduzimos o "peso" ao redor (padding do card, gap,
   ícone, mapa) e usamos uma fonte um pouco menor só para o
   endereço, para o texto caber melhor nesse espaço menor.
   -------------------------------------------------- */

@media (max-width: 600px) {
    html body .contact-info {
        padding: 22px 18px !important;
    }

    html body .contact-item {
        gap: 12px !important;
    }

    html body .contact-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }

    html body .contact-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    html body .contact-item:has(.location-with-map) .contact-details {
        padding-right: 108px !important;
    }

    html body .contact-item:has(.location-with-map) .mini-map {
        width: 90px !important;
        max-width: 90px !important;
        min-width: 90px !important;
        height: 80px !important;
        border-radius: 7px !important;
    }

    /* Endereço: fonte um pouco menor que o texto padrão e linha
       mais compacta, só para caber melhor ao lado do mapa */
    html body .contact-item:has(.location-with-map) .location-text p {
        font-size: calc(var(--texto-padrao) * 0.88) !important;
        line-height: 1.3 !important;
    }
}


/* --------------------------------------------------
   14) AJUSTES SOLICITADOS (15/07/2026)
   - Linha abaixo da logo/cabeçalho: de vermelho para cinza
   - Ícones dos serviços: badge cinza-chumbo/prateado
   - CNPJ ao final das informações de contato
   - Botão de fechar do modal de boas-vindas: fora do card
   -------------------------------------------------- */

/* Linha abaixo da logo (header) agora em cinza, sem vermelho */
header {
    border-bottom: 2px solid rgba(140, 140, 140, 0.35) !important;
}

/* Ícones dos serviços: badge circular cinza-chumbo/prateado, visual profissional */
.service-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #eef0f2 0%, #e2e5e8 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: none !important;
    font-size: 1em !important;
}

.service-icon svg {
    width: 26px !important;
    height: 26px !important;
    stroke: #52585f !important; /* cinza-chumbo/prateado */
    stroke-width: 1.8 !important;
}

@media (max-width: 768px) {
    .service-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
    }

    .service-icon svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* CNPJ: texto discreto ao final do bloco de contato */
.cnpj-info {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    text-align: center !important;
}

.cnpj-info p {
    color: #999999 !important;
    font-size: 0.82em !important;
    letter-spacing: 0.3px !important;
}

/* Botão de fechar do modal de boas-vindas: para fora do card, como uma bolinha flutuante */
.welcome-modal-close {
    top: -16px !important;
    right: -16px !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    font-size: 1.3em !important;
    color: #52585f !important;
}

.welcome-modal-close:hover {
    color: #1a1a1a !important;
    background: #f2f2f2 !important;
    transform: rotate(90deg) !important;
}


/* --------------------------------------------------
   15) AJUSTES SOLICITADOS (15/07/2026)
   - Botões "Ver Mais" e "Solicitar Orçamento pelo WhatsApp"
     com o mesmo arredondamento do botão da notificação (10px)
   -------------------------------------------------- */

.toggle-services-btn,
.cta-button {
    border-radius: 10px !important;
}


/* --------------------------------------------------
   16) PADRONIZAÇÃO DOS TEXTOS DE PARÁGRAFO (15/07/2026)
   Antes cada bloco (hero, subtítulos, cards, localização,
   contato, CTA, badge, modal) tinha um font-size diferente,
   e ainda mudava de novo dentro de cada media query — por
   isso o texto do hero parecia menor que o resto.

   Aqui definimos UM tamanho só para todo texto "de leitura"
   (não títulos), já reduzido, e usamos clamp() para ele se
   comportar igual em qualquer largura de tela, sem depender
   dos media queries antigos.
   -------------------------------------------------- */

:root {
    --texto-padrao: clamp(13.5px, 3.6vw, 15px);
}

html body .hero-description,
html body .section-subtitle,
html body .service-card p,
html body .service-content p,
html body .video-caption,
html body .video-section-description,
html body .location-text p,
html body .contact-details p,
html body .contact-details a,
html body .cta-description,
html body .badge-text p,
html body .welcome-modal-text {
    font-size: var(--texto-padrao) !important;
}

/* Textos intencionalmente menores (rótulos, CNPJ, notas)
   continuam menores que o padrão, mas na mesma proporção */
html body .contact-details .small-text {
    font-size: calc(var(--texto-padrao) * 0.85) !important;
}

html body .cnpj-info p {
    font-size: calc(var(--texto-padrao) * 0.78) !important;
}


/* --------------------------------------------------
   17) PADRONIZAÇÃO DOS TÍTULOS (15/07/2026)
   Cada título (hero, "Quem é Cardoso?", "Experiência que faz
   a diferença", "Nossos Serviços", "Entre em Contato", CTA...)
   tinha um font-size diferente, e vários nem tinham redução
   para celular — por isso alguns ficavam bem maiores que
   outros. Aqui todos usam o mesmo tamanho (um pouco menor
   que antes) e se comportam igual em qualquer tela.
   -------------------------------------------------- */

:root {
    --titulo-padrao: clamp(17px, 5vw, 21px);
}

html body .hero h1,
html body .section-title,
html body .video-title,
html body .video-section-title,
html body .contact-title,
html body .cta-title,
html body .badge-text h3,
html body .welcome-modal h2 {
    font-size: var(--titulo-padrao) !important;
}

/* Títulos DENTRO dos cards (ex: "Retífica de Cabeçotes") não
   entram na mesma régua dos títulos de seção — são menores,
   mas também precisam de um tamanho único e reduzido, coerente
   com o texto do card logo abaixo. */
:root {
    --titulo-card: clamp(15px, 4vw, 16.5px);
}

html body .service-card h3 {
    font-size: var(--titulo-card) !important;
}


/* --------------------------------------------------
   19) AJUSTES SOLICITADOS (15/07/2026 - parte 3)
   No card de serviço, o ícone ficava centralizado com o bloco
   inteiro (título + descrição), então parecia "flutuar" no meio
   em vez de alinhar com o título — diferente do bloco de
   contato, onde o ícone já alinha pelo topo. Também reduzimos
   mais um pouco o título do card, deixando mais perto do
   tamanho do texto de descrição logo abaixo.
   -------------------------------------------------- */

html body .service-card {
    align-items: flex-start !important;
    padding: 14px 16px !important;
}

html body .service-icon {
    margin-top: 1px !important;
}

:root {
    --titulo-card: clamp(14px, 3.8vw, 15.5px);
}


/* --------------------------------------------------
   20) AJUSTES SOLICITADOS (15/07/2026 - parte 4)
   O ícone deve ficar como está (não mexer nele). O ajuste é
   no CARD: espaço mais enxuto entre ícone e texto, e a
   descrição limitada a 2 linhas com reticências quando não
   couber — assim todo card fica com a mesma altura, em vez de
   alguns ficarem maiores por causa de uma 3ª linha de texto.
   -------------------------------------------------- */

html body .service-card {
    gap: 12px !important;
}

html body .service-content p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* --------------------------------------------------
   21) AJUSTES SOLICITADOS (15/07/2026 - parte 5)
   Ícone de volta centralizado (verticalmente, com o bloco
   inteiro do card). Card mais enxuto: menos padding, título
   mais colado na descrição, linhas mais próximas entre si, e
   fonte um pouco menor.
   -------------------------------------------------- */

html body .service-card {
    align-items: center !important;
    padding: 12px 14px !important;
}

html body .service-card h3 {
    margin-bottom: 2px !important;
}

html body .service-content p {
    line-height: 1.35 !important;
    font-size: clamp(13px, 3.4vw, 14.5px) !important;
}

:root {
    --titulo-card: clamp(13.5px, 3.6vw, 15px);
}


/* --------------------------------------------------
   22) AJUSTES SOLICITADOS (15/07/2026 - parte 6)
   Títulos reduzidos mais um pouco (--titulo-padrao acima).
   Texto dos botões ("Ver Mais", "Solicitar Orçamento pelo
   WhatsApp", "Falar no WhatsApp") também padronizado num
   tamanho único e menor.
   -------------------------------------------------- */

:root {
    --texto-botao: clamp(13px, 3.6vw, 14.5px);
}

html body .cta-button,
html body .toggle-services-btn,
html body .welcome-modal-btn {
    font-size: var(--texto-botao) !important;
}


/* --------------------------------------------------
   23) AJUSTES SOLICITADOS (15/07/2026 - parte 7)
   "Solicitar Orçamento pelo WhatsApp" ainda quebrava em 2
   linhas: fonte menor de novo e padding lateral bem mais
   enxuto, pra caber numa linha só e o botão ficar menor.
   -------------------------------------------------- */

:root {
    --texto-botao: clamp(11.5px, 3.1vw, 13px);
}

html body .cta-button {
    padding: 14px 18px !important;
    gap: 8px !important;
}

html body .cta-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

html body .toggle-services-btn {
    padding: 11px 26px !important;
}

html body .welcome-modal-btn {
    padding: 13px !important;
}


/* --------------------------------------------------
   26) RITMO VERTICAL PADRONIZADO (15/07/2026)
   Antes cada bloco/seção e cada título tinha um espaçamento
   diferente (16px, 18px, 20px, 24px, 26px, 34px, 60px...),
   então o respiro entre um elemento e outro variava sem
   padrão. Aqui definimos 3 medidas únicas — espaço de seção,
   título -> conteúdo, e descrição -> próximo elemento visual
   (vídeo/carrossel/grade de cards) — e aplicamos em todos os
   blocos, do jeito mais enxuto possível sem parecer apertado.
   -------------------------------------------------- */

:root {
    --gap-bloco: 28px;         /* respiro no topo/base de cada seção */
    --gap-bloco-mobile: 20px;
    --gap-titulo: 14px;        /* título -> texto logo abaixo */
    --gap-paragrafo: 20px;     /* descrição -> vídeo/carrossel/grade */
    --gap-titulo-topo: 46px;   /* espaço antes de um título "no meio do fluxo" */
    --gap-titulo-topo-mobile: 34px;
    --gap-titulo-topo-video: 10px;   /* espaço antes do título do vídeo (menor, vem logo após o texto inicial) */
    --gap-titulo-topo-video-mobile: 8px;
    --gap-logo-titulo: 44px;   /* espaço entre a logo/header e o primeiro título */
    --gap-logo-titulo-mobile: 32px;
}

/* Espaço vertical igual em todos os blocos principais da página
   (o respiro visual entre um bloco e o próximo passa a ser sempre
   o mesmo: padding-bottom de um + padding-top do outro) */
html body .hero,
html body .video-section,
html body .image-section,
html body .services-section,
html body .location-section,
html body .cta-section {
    padding-top: var(--gap-bloco) !important;
    padding-bottom: var(--gap-bloco) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    html body .hero,
    html body .video-section,
    html body .image-section,
    html body .services-section,
    html body .location-section,
    html body .cta-section {
        padding-top: var(--gap-bloco-mobile) !important;
        padding-bottom: var(--gap-bloco-mobile) !important;
    }
}

/* Títulos que já vivem dentro do respiro de uma seção/card própria
   (hero, contato, CTA) — sem margem extra em cima, o padding do
   bloco já resolve */
html body .hero h1,
html body .contact-title,
html body .cta-title {
    margin-top: 0 !important;
    margin-bottom: var(--gap-titulo) !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Título "Quem é Cardoso": vem logo depois do texto inicial da
   página, então usa um respiro menor que os outros títulos
   "no meio do fluxo" */
html body .video-title {
    margin-top: var(--gap-titulo-topo-video) !important;
    margin-bottom: var(--gap-titulo) !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* Demais títulos no meio do fluxo (ex: "Experiência...", "Nossos
   Serviços") — respiro padrão, maior */
html body .section-title,
html body .video-section-title {
    margin-top: var(--gap-titulo-topo) !important;
    margin-bottom: var(--gap-titulo) !important;
    padding-top: 0 !important;
    border-top: none !important;
}

@media (max-width: 768px) {
    html body .video-title {
        margin-top: var(--gap-titulo-topo-video-mobile) !important;
    }

    html body .section-title,
    html body .video-section-title {
        margin-top: var(--gap-titulo-topo-mobile) !important;
    }
}

/* Espaço extra entre a logo/header e o primeiro título da página */
html body .hero {
    padding-top: var(--gap-logo-titulo) !important;
}

@media (max-width: 768px) {
    html body .hero {
        padding-top: var(--gap-logo-titulo-mobile) !important;
    }
}

/* Subtítulo dos serviços: mesma régua (título -> texto / texto -> grade) */
html body .section-subtitle {
    margin: var(--gap-titulo) 0 var(--gap-paragrafo) 0 !important;
}

/* Legenda do vídeo: some espaço até o vídeo, sem sobra depois
   (quem fecha o respiro é o padding do próprio bloco) */
html body .video-caption {
    margin: var(--gap-titulo) auto 0 !important;
}

/* Grade de serviços -> botão "Ver mais": mesma régua */
html body .services-grid {
    margin-bottom: var(--gap-paragrafo) !important;
}

/* Descrição que antecede o carrossel ganha o respiro de
   "texto -> elemento visual"; a mesma classe usada como texto
   final do hero (sem nada depois) não precisa desse espaço
   extra, então o gap é aplicado só quando o carrossel vem
   logo em seguida. */
html body .hero-description {
    margin-bottom: 0 !important;
}

html body .hero-description:has(+ .carousel-container) {
    margin-bottom: var(--gap-paragrafo) !important;
}

/* Espaço depois do "Ver Mais" até o bloco de CTA: estava sobrando,
   reduzimos só esse trecho (o padding-bottom dos serviços já resolve
   o respiro de baixo; aqui cortamos o padding-top do CTA) */
html body .cta-section {
    padding-top: 10px !important;
}

/* Carrossel -> "Nossos Serviços": reduz só esse trecho, cortando
   o padding-top da seção de serviços (a margem do próprio título
   continua igual, não mexe no espaço da "Experiência...") */
html body .services-section {
    padding-top: 8px !important;
    padding-bottom: 18px !important;
}

@media (max-width: 768px) {
    html body .services-section {
        padding-bottom: 14px !important;
    }
}

/* Legenda "Clique em um serviço..." mais discreta */
html body .section-subtitle {
    opacity: 0.60 !important;
}

@media (max-width: 768px) {
    html body .cta-section {
        padding-top: 8px !important;
    }
}

/* Legenda do vídeo: mais discreta (menor e um pouco apagada) */
html body .video-caption {
    font-size: calc(var(--texto-padrao) * 0.9) !important;
    opacity: 0.67 !important;
}

/* Textos corridos alinhados à esquerda (em vez de centralizados),
   pra ficar mais fácil de ler — os títulos continuam centralizados */
html body .hero-description,
html body .section-subtitle,
html body .video-caption,
html body .video-section-description,
html body .cta-description {
    text-align: left !important;
}


/* --------------------------------------------------
   24) AJUSTES SOLICITADOS (15/07/2026 - parte 8)
   - "Solicitar Orçamento pelo WhatsApp" numa linha só:
     tira o letter-spacing (que empurrava o texto pra fora),
     aperta um pouco mais o padding/gap e deixa a fonte
     acompanhar a largura da tela de forma mais agressiva
     nos celulares mais estreitos, sem nunca quebrar linha.
   - Setas e pontinhos do carrossel menores e mais discretos.
   - Linha vermelha embaixo dos títulos ganha um efeito de
     brilho deslizante bem sutil (minimalista, sem "piscar").
   -------------------------------------------------- */

/* --- Botão do WhatsApp em 1 linha --- */
:root {
    --texto-botao-cta: clamp(9.5px, 3vw, 13px);
}

html body .cta-button {
    white-space: nowrap !important;
    letter-spacing: 0.2px !important;
    padding: 13px 16px !important;
    gap: 6px !important;
    font-size: var(--texto-botao-cta) !important;
}

html body .cta-icon {
    width: 18px !important;
    height: 18px !important;
}

@media (max-width: 400px) {
    :root {
        --texto-botao-cta: clamp(9px, 3.4vw, 12px);
    }

    html body .cta-button {
        padding: 12px 12px !important;
        gap: 5px !important;
    }
}

/* --- Setas do carrossel menores --- */
html body .carousel-nav {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 6px !important;
}

html body .carousel-prev {
    left: 14px !important;
}

html body .carousel-next {
    right: 14px !important;
}

@media (max-width: 768px) {
    html body .carousel-nav {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    html body .carousel-prev {
        left: 10px !important;
    }

    html body .carousel-next {
        right: 10px !important;
    }
}

/* --- Pontinhos do carrossel menores --- */
html body .carousel-dots {
    gap: 8px !important;
    padding: 6px 14px !important;
    bottom: 16px !important;
}

html body .carousel-dot {
    width: 6px !important;
    height: 6px !important;
}

html body .carousel-dot.active {
    transform: scale(1.3) !important;
}

/* --- Efeito minimalista na linha vermelha dos títulos ---
   Em vez de uma barra estática, o gradiente "respira" e
   desliza bem devagar dentro do próprio traço — discreto
   o suficiente para não distrair, mas dá um toque de
   acabamento profissional. */
.section-title::after,
.hero h1::after,
.cta-title::after,
.video-section-title::after,
.welcome-modal h2::after {
    background-size: 200% 100% !important;
    animation: linhaDeslizante 7s ease-in-out infinite !important;
}

.contact-title::after {
    background-size: 200% 100% !important;
    animation: linhaDeslizanteEsquerda 7s ease-in-out infinite !important;
}

@keyframes linhaDeslizante {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
}

@keyframes linhaDeslizanteEsquerda {
    0%, 100% { background-position: 100% 0%; }
    50% { background-position: 0% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .section-title::after,
    .hero h1::after,
    .cta-title::after,
    .video-section-title::after,
    .welcome-modal h2::after,
    .contact-title::after {
        animation: none !important;
    }
}