/* ==========================================================================
   MB Podas - Folha de Estilos Principal (Vanilla CSS & Micro-interações)
   Arquitetura Mobile First & Purificação Estrutural Vanilla
   ========================================================================== */

/* --------------------------------------------------------------------------
   0.1 Definições de Fontes Globais (@font-face com font-display: swap)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Anek Latin';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/aneklatin/v11/co3pmWZulTRoU4a8dqrWiajBS5ByUkvdrluH-xWG5uJTY4x-L3PuR7ApLtqk.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   0. Configurações Base do Smooth Scroll (Lenis)
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body {
    height: auto;
    width: 100%;
    overflow-x: hidden;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   1. Variáveis Globais Semânticas & Easing Curves (:root)
   -------------------------------------------------------------------------- */
:root {
    /* Paleta de Cores Institucional Semântica */
    --color-primary: #218544;
    --color-text-primary: #111111;
    --color-text-muted: #555555;
    --color-border-light: #dddddd;
    --color-surface-white: #ffffff;
    --color-bg-gray: #f7f7f7;
    --color-bg-gray-alt: #f4f4f4;

    /* Variáveis de Animação e Aceleração Física (Springs & Smooth Easing) */
    --spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth-easing: cubic-bezier(0.16, 1, 0.3, 1);

    /* Sombras e Elevações Padronizadas */
    --btn-shadow-default: 0 0.25rem 0.875rem 0 rgba(33, 133, 68, 0.25);
    --btn-shadow-hover: 0 0.625rem 1.5rem -0.125rem rgba(33, 133, 68, 0.42), 0 0.25rem 0.625rem -0.125rem rgba(33, 133, 68, 0.25);

    /* Dimensões Globais de Layout */
    --container-max-width: 75rem;
}

/* --------------------------------------------------------------------------
   1.1 Cor de Seleção de Texto Personalizada & Acessibilidade de Teclado
   -------------------------------------------------------------------------- */
::selection,
*::selection {
    background-color: var(--color-primary);
    color: #ffffff;
}

/* Indicador de Foco Visível para Navegação Acessível por Teclado */
:focus-visible {
    outline: 2px solid var(--color-primary, #218544) !important;
    outline-offset: 3px !important;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* --------------------------------------------------------------------------
   2. Correções de Visibilidade & HOTFIX: Limpeza de Bordas e Contornos
   -------------------------------------------------------------------------- */

/* Garante visibilidade e opacidade dos componentes de conteúdo */
[data-component-type],
[class*="framer-"],
.site-header,
.hero-section,
.services-section,
.clients-section,
.structure-section,
.who-we-serve-section,
.clients-target-section,
#atendemos,
.testimonials-section,
.faq-section,
.site-footer,
.ssr-variant:not([class*="hidden-"]) {
    opacity: 1;
    visibility: visible;
}

/* Sobrescreve regras inline residuais deixadas por runtimes legados */
[style*="opacity:0"],
[style*="opacity: 0"],
[style*="opacity:0.001"],
[style*="opacity: 0.001"],
[style*="visibility:hidden"],
[style*="visibility: hidden"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove deslocamento inicial de animações antigas */
[style*="translateY(50px)"] {
    transform: none !important;
}

/* Exceção: O iframe do Google Tag Manager (noscript) deve permanecer oculto */
noscript iframe,
iframe[src*="googletagmanager.com/ns.html"] {
    display: none !important;
    visibility: hidden !important;
}

/* ==========================================================================
   HOTFIX: Limpeza Estrita de Bordas e Contornos Residuais Inadvertidos
   ========================================================================== */

/* Remove contornos e outlines globais em cabeçalho, rodapé e cards */
.site-header,
.site-header *,
.site-footer,
.site-footer *,
.review-card * {
    outline: none !important;
}

/* Elimina pseudo-elementos ::after que injetavam bordas em todos os filhos */
.site-header::after,
.site-header *::after,
.site-footer::after,
.site-footer *::after,
.btn-whatsapp::after,
.btn-whatsapp *::after {
    border: none !important;
    content: none !important;
}

.review-card *::after {
    border: none !important;
    content: none !important;
}

/* Bordas Intencionais do Design Original */
.review-card {
    border: 1px solid var(--color-primary) !important;
    border-top: 5px solid var(--color-primary) !important;
    border-radius: 0.9375rem !important;
}

.site-footer__column {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.9375rem !important;
}

/* Contêiner Principal do Rodapé: Borda Superior 6px Verde, Bordas Finas 1px e Cantos Arredondados */
.site-footer__card,
.site-footer-card {
    border: 1px solid var(--color-primary) !important;
    border-top: 6px solid var(--color-primary) !important;
    border-radius: 1.25rem !important;
    /* 20px no design original */
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Barra Inferior de Direitos Reservados: Remoção Estrita de Bordas no Texto de Copyright */
.site-footer__bottom,
.framer-syi0ln,
.framer-1x2ig6v-container,
.site-footer .site-footer__bottom,
.site-footer .site-footer__bottom *,
.site-footer .framer-syi0ln,
.site-footer .framer-syi0ln * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   3. Animações de Carregamento e Scroll (.reveal-up, .reveal-half & .fade-in)
   -------------------------------------------------------------------------- */

/* Duração longa e suave ajustada para 1.2s com curva --smooth-easing */
.reveal-up,
.reveal-half,
.fade-in {
    opacity: 0 !important;
    transform: translateY(1.875rem) !important;
    transition: opacity 1.2s var(--smooth-easing), transform 1.2s var(--smooth-easing) !important;
    will-change: opacity, transform;
}

/* Estado ativo visível ao entrar na viewport */
.reveal-visible,
.fade-in.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
    will-change: auto;
}

/* Classes Utilitárias de Delay para Orquestração e Coreografia UI */
.delay-1 {
    transition-delay: 0.2s !important;
}

.delay-2 {
    transition-delay: 0.4s !important;
}

.delay-3 {
    transition-delay: 0.6s !important;
}

/* Segunda Dobra e Seção de Serviços - Deslize Longo e Suave */
#servicos .reveal-up,
.services__content.reveal-up,
.services__content .reveal-up {
    transition: opacity 1.2s var(--smooth-easing), transform 1.2s var(--smooth-easing) !important;
}

/* Seção Nossos Serviços - Caixa da Direita: Delay de 0.5 segundo para animação em cascata */
.services__wrapper .services__grid .reveal-up:nth-child(1) {
    transition-delay: 0.5s !important;
}

.services__wrapper .services__grid .reveal-up:nth-child(2) {
    transition-delay: 0.62s !important;
}

.services__wrapper .services__grid .reveal-up:nth-child(3) {
    transition-delay: 0.74s !important;
}

.services__wrapper .services__grid .reveal-up:nth-child(4) {
    transition-delay: 0.86s !important;
}

.services__wrapper .services__grid .reveal-up:nth-child(5) {
    transition-delay: 0.98s !important;
}

.services__wrapper .services__grid .reveal-up:nth-child(6) {
    transition-delay: 1.10s !important;
}

/* Entrada Assíncrona dos Títulos da Seção Hero */
.hero-title,
.hero__title.reveal-up,
.hero__title {
    transition-delay: 0.1s !important;
}

.hero-subtitle,
.hero__subtitle.reveal-up,
.hero__subtitle {
    transition-delay: 0.3s !important;
}

.hero-cta,
.hero__cta-container.reveal-up,
.hero__cta-container {
    transition-delay: 0.5s !important;
}

/* Seção Quem Atendemos - Título com delay de 0.3 segundos */
.clients__title,
.clients__title.reveal-up,
#pnt232,
#atendemos .clients__title {
    transition-delay: 0.3s !important;
}

/* Respeito às preferências de acessibilidade: Redução de Movimento */
@media (prefers-reduced-motion: reduce) {

    .reveal-up,
    .reveal-half,
    .reveal-visible,
    .fade-in,
    .fade-in.visible,
    .delay-1,
    .delay-2,
    .delay-3,
    #pnt232,
    .clients__title,
    .services__wrapper .services__grid .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* --------------------------------------------------------------------------
   4. Normalização de Layout & Remoção de Hovers Indesejados
   -------------------------------------------------------------------------- */

/* Garante que elementos de texto NUNCA sofram transform/scale indevido no hover */
p:hover,
h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover,
span:hover,
.rich-text:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Cards e itens estáticos da 2ª dobra (Serviços) sem elevação indevida */
.services-card--corte,
.services-card--poda,
.services-card--supressao,
.services-card--destoca,
.services-card--recolhimento,
.services-card--ornamental,
.services__cta-box,
.services-card__wrapper,
.services__content {
    transform: none;
    box-shadow: none;
}

.services-card--corte:hover,
.services-card--poda:hover,
.services-card--supressao:hover,
.services-card--destoca:hover,
.services-card--recolhimento:hover,
.services-card--ornamental:hover,
.services__cta-box:hover,
.services-card__wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* HOTFIX: Arredondamento dos cantos da imagem principal (Seção Nossos Serviços) */
.services__content {
    border-radius: 16px;
    overflow: hidden;
}

.services__content picture,
.services__content img {
    border-radius: inherit;
}

/* Normalização de Imagens Fluidas */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

img[style*="object-fit:cover"] {
    object-fit: cover !important;
}

img[style*="object-fit:contain"] {
    object-fit: contain !important;
}

html,
body {
    overflow-x: clip;
    width: 100%;
}

header {
    width: 100%;
    z-index: 100;
}

/* Rolagem com margem de segurança para âncoras */
#servicos,
#sobre-nos,
#atendemos,
#duvidas-frequentes,
#faq {
    scroll-margin-top: 5rem;
}

.site-footer__column {
    opacity: 1 !important;
    transform: none !important;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
}

.site-footer__title,
.site-footer__nav,
.site-footer__text,
.hero__title,
.hero__subtitle,
.hero__cta-container,
.site-footer__link {
    opacity: 1;
    transform: none;
}

/* Controles de Vídeo */
.video-control--play,
.video-control--pause,
.video-control--mute {
    opacity: 1 !important;
    display: flex !important;
    visibility: visible !important;
    transform: none !important;
    margin-top: 0.625rem;
}

/* --------------------------------------------------------------------------
   5. BASE MOBILE FIRST: Botões de Ação e WhatsApp (Telas <= 809.98px)
   -------------------------------------------------------------------------- */

/* Contêineres de Chamada para Ação (Hero e Orçamento) */
.hero__cta-container,
.btn-whatsapp-container,
.hero-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Normalização Estrutural da Seção Solicite um Orçamento (Previne colapso, 1px e esmagamento do botão) */
.framer-1jd6tjm,
.framer-124vk7w {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.framer-1jd6tjm {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.framer-11n0s8y {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1.5rem !important;
    box-sizing: border-box !important;
}

.framer-35dmvv {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.framer-1lqphxb {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
}

/* Botão Principal Call to Action (Hero e Orçamento) - Formato Pílula & Alinhamento Flexbox Estrito */
a.btn-whatsapp,
.btn-whatsapp,
.hero__cta-container a,
.btn-whatsapp-container a,
.hero-cta a {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    /* CRUCIAL: impede deformação/esmagamento quando a janela é redimensionada */
    gap: 0.625rem !important;
    /* Espaçamento entre ícone e texto */
    padding: 0.875rem 1.75rem !important;
    /* Valores relativos fluidos */
    width: auto !important;
    min-width: max-content !important;
    /* Garante que o botão nunca encolha menos do que seu conteúdo */
    max-width: 100% !important;
    height: auto !important;
    border-radius: 3.125rem !important;
    /* 50px - Formato pílula original preservado */
    box-sizing: border-box !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* Previne quebra de linha indesejada */
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    transform: none !important;
    background-color: var(--color-border-light, rgb(221, 221, 221)) !important;
    box-shadow: var(--btn-shadow-default) !important;
    filter: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s var(--spring-easing) !important;
}

/* Container do Ícone */
.btn-whatsapp .btn-whatsapp-icon,
.btn-whatsapp .icone-container,
.btn-whatsapp .btn-whatsapp__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    /* Impede esmagamento do ícone */
    width: 2.25rem !important;
    height: 2.25rem !important;
    min-width: 2.25rem !important;
    min-height: 2.25rem !important;
    max-width: 2.25rem !important;
    max-height: 2.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0.5rem !important;
    box-sizing: border-box !important;
    transform: none !important;
    background-color: var(--color-primary, #218544) !important;
    color: #ffffff !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* SVG do Ícone */
.btn-whatsapp .btn-whatsapp-icon svg,
.btn-whatsapp .icone-container svg,
.btn-whatsapp .btn-whatsapp__icon svg,
.btn-whatsapp svg.btn-whatsapp-svg {
    display: block !important;
    width: 1.375rem !important;
    height: 1.375rem !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    fill: #ffffff !important;
    color: #ffffff !important;
    transition: fill 0.3s ease, color 0.3s ease !important;
}

.btn-whatsapp svg.btn-whatsapp-svg path,
.btn-whatsapp .btn-whatsapp__icon svg path {
    fill: currentColor !important;
    transition: fill 0.3s ease !important;
}

/* Container de Texto & Tipografia */
.btn-whatsapp .btn-whatsapp-text,
.btn-whatsapp .btn-whatsapp__text,
.btn-whatsapp .btn-whatsapp__label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.btn-whatsapp .rich-text {
    font-family: "Figtree", "Figtree Placeholder", sans-serif !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    /* Força o texto em uma só linha */
    text-align: center !important;
    color: var(--color-primary, #218544) !important;
    --framer-text-color: var(--color-primary, #218544) !important;
    transition: color 0.3s ease !important;
}

/* Botão Secundário / Outline & Botão Voltar 404 */
.btn-outline,
.btn-voltar-404 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    z-index: 10;
    position: relative;
    border: 2px solid transparent; /* Essencial para a transição de borda */
    border-radius: 3.125rem;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.5;
    padding: 0.73125rem 1.625rem;
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
}

.btn-outline:hover,
.btn-voltar-404:hover {
    transform: scale(1.05);
    border-color: var(--color-primary);
    color: #ffffff;
}

.btn-outline:active,
.btn-voltar-404:active {
    transform: scale(1);
}

.btn-outline:focus-visible,
.btn-voltar-404:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Links do Menu de Navegação e Rodapé */
.site-header__nav a,
.nav-link,
.site-header__brand,
.mobile-menu-nav a {
    transition: color 0.25s var(--smooth-easing) !important;
    display: inline-block;
}

.site-header__nav a:hover,
.nav-link:hover,
.site-header__brand:hover {
    color: var(--color-primary, #218544) !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   6. BASE MOBILE FIRST: Menu de Navegação Retrátil
   -------------------------------------------------------------------------- */
.structure-card__image-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.mobile-menu-btn {
    cursor: pointer !important;
    position: relative;
    user-select: none;
    z-index: 102;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

.mobile-menu-btn:focus-visible {
    outline: 2px solid var(--color-primary, #218544) !important;
    outline-offset: 4px !important;
    border-radius: 4px !important;
}

.mobile-menu-btn .menu-toggle__line--top,
.mobile-menu-btn .menu-toggle__line--bottom {
    transition: transform 0.3s var(--spring-easing),
        top 0.3s var(--smooth-easing),
        width 0.3s ease,
        background-color 0.2s ease !important;
}

/* Animação do botão para X quando aberto */
.mobile-menu-btn.is-open .menu-toggle__line--top {
    top: calc(50% - 1px) !important;
    right: 1px !important;
    left: auto !important;
    transform: rotate(45deg) !important;
}

.mobile-menu-btn.is-open .menu-toggle__line--bottom {
    top: calc(50% - 1px) !important;
    right: 1px !important;
    left: auto !important;
    width: 1.25rem !important;
    transform: rotate(-45deg) !important;
}

/* Painel do menu mobile retrátil */
.mobile-menu-container {
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-0.5rem);
    transition: max-height 0.4s var(--smooth-easing),
        opacity 0.3s ease,
        transform 0.35s var(--smooth-easing),
        padding 0.3s ease;
    padding: 0 0.9375rem;
    box-sizing: border-box;
    z-index: 101;
}

.mobile-menu-container.is-open {
    max-height: 23.75rem;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    padding: 1rem 0.9375rem 0.75rem 0.9375rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.mobile-menu-nav a {
    display: block;
    font-family: "Figtree", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary, #111111);
    text-decoration: none;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--spring-easing);
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a:active {
    background-color: rgba(33, 133, 68, 0.08);
    color: var(--color-primary, #218544);
    transform: translateX(0.25rem);
}

/* Botão Solicitar Orçamento no Mobile Menu */
.mobile-menu-nav .mobile-menu-cta {
    margin-top: 0.375rem;
    background-color: var(--color-primary, #218544);
    color: #ffffff !important;
    text-align: center;
    font-weight: 600;
    transition: none !important;
}

.mobile-menu-nav .mobile-menu-cta:hover,
.mobile-menu-nav .mobile-menu-cta:active,
.mobile-menu-nav .mobile-menu-cta:focus {
    background-color: var(--color-primary, #218544) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

/* --------------------------------------------------------------------------
   7. BASE MOBILE FIRST: Carrosséis com CSS Scroll Snap Fluido
   -------------------------------------------------------------------------- */
.carousel-container,
.carousel--structure,
.carousel--testimonials {
    position: relative;
    max-width: 100%;
    width: 100%;
}

.carousel--structure section,
.carousel--testimonials section {
    opacity: 1 !important;
}

/* Trilhas Roláveis com Scroll Snap e Rolagem Táctil Fluida (Mobile & Desktop) */
.carousel-container ul,
.carousel--structure ul,
.carousel--testimonials ul,
.carousel-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 0.75rem !important;
    padding: 0.625rem 0 1.5rem 0 !important;
    box-sizing: border-box !important;
    touch-action: pan-x pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.carousel-container,
.carousel--structure,
.carousel--testimonials {
    touch-action: pan-x pan-y !important;
}

/* Ocultação permanente de barras de rolagem nativas */
.carousel-container ul::-webkit-scrollbar,
.carousel--structure ul::-webkit-scrollbar,
.carousel--testimonials ul::-webkit-scrollbar,
.carousel-track::-webkit-scrollbar {
    display: none !important;
}

.carousel--structure li,
.carousel--testimonials li {
    scroll-snap-align: center !important;
    touch-action: pan-x pan-y !important;
}

.carousel--structure li>div,
.carousel--testimonials li>div,
.structure-card,
.structure-card__container,
.review-card {
    scroll-snap-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    touch-action: pan-x pan-y !important;
}

/* ==========================================================================
   Controles dos Carrosséis (Setas de Navegação Manual)
   ========================================================================== */
fieldset.carousel__controls {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    z-index: 10 !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

fieldset.carousel__controls>div {
    position: absolute !important;
    top: 50% !important;
    left: 1rem !important;
    right: 1rem !important;
    width: calc(100% - 2rem) !important;
    height: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

fieldset.carousel__controls button,
button.seta-prev,
button.seta-next {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    background-color: var(--color-primary, #218544) !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    flex-shrink: 0 !important;
    transform: none;
    transition: transform 0.25s var(--spring-easing), filter 0.2s ease, background-color 0.2s ease !important;
    user-select: none !important;
}

fieldset.carousel__controls button img,
button.seta-prev img,
button.seta-next img {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    display: block !important;
    object-fit: contain !important;
    pointer-events: none !important;
}

fieldset.carousel__controls button:hover,
button.seta-prev:hover,
button.seta-next:hover {
    transform: scale(1.12) !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)) !important;
    background-color: var(--color-primary-dark, #1b6c37) !important;
}

fieldset.carousel__controls button:active,
button.seta-prev:active,
button.seta-next:active {
    transform: scale(0.92) !important;
}

/* Carrossel de Estrutura no Mobile */
.structure__carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.structure__carousel-wrapper .ssr-variant,
.structure__carousel-wrapper .structure__carousel-item,
.structure__carousel-wrapper .structure__carousel-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

.carousel--structure {
    height: 22.5rem !important;
    overflow: hidden !important;
}

.carousel--structure section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.carousel--structure section>div {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 21.25rem !important;
}

/* Carrossel de Estrutura no Mobile: Center-Mode e Peeking Edges (78% de largura) */
.carousel--structure ul {
    gap: 0.75rem !important;
    padding-left: calc((100% - 78%) / 2) !important;
    padding-right: calc((100% - 78%) / 2) !important;
}

.carousel--structure li>div {
    flex: none !important;
    width: 78% !important;
    min-width: 78% !important;
    max-width: 22rem !important;
    scroll-snap-align: center !important;
    box-sizing: border-box !important;
}

.carousel--structure li>div {
    height: 20rem !important;
}

.carousel--structure li>div img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 1rem;
}

/* --------------------------------------------------------------------------
   8. BASE MOBILE FIRST: Avaliações / Testimonials Fluido
   -------------------------------------------------------------------------- */
.stars-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.stars-group svg {
    flex-shrink: 0;
}

.rating-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonials-section,
.testimonials__wrapper .testimonials-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    background-color: var(--color-bg-gray, #f7f7f7) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

.testimonials__title,
.testimonials__wrapper .testimonials__title,
.testimonials__carousel-wrapper,
.testimonials__wrapper .testimonials__carousel-wrapper,
.testimonials__container,
.testimonials__container.testimonials__track,
.testimonials__container.testimonials__track--desktop,
.testimonials__container.testimonials__track--tablet,
.testimonials__container.testimonials__track--mobile,
.carousel-reviews,
.carousel-viewport {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.testimonials__title,
.testimonials__wrapper .testimonials__title,
.testimonials__carousel-wrapper,
.testimonials__wrapper .testimonials__carousel-wrapper {
    max-width: var(--container-max-width, 75rem) !important;
    margin: 0 auto !important;
    background-color: transparent !important;
}

.testimonials__container {
    display: flex !important;
    flex-direction: column !important;
    place-content: flex-start !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.testimonials__container .carousel--testimonials,
.carousel--testimonials {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    position: relative !important;
}

.carousel--testimonials section,
.carousel--testimonials section>div {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    overflow: visible !important;
}

.carousel-track,
.carousel--testimonials ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    gap: 1.25rem !important;
    padding: 0.5rem 1.25rem 1.5rem 1.25rem !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory !important;
}

.carousel--testimonials li {
    display: contents !important;
}

.carousel--testimonials li>div {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: center !important;
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
}

.review-card,
.carousel--testimonials .review-card {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    padding: 1.5rem !important;
    background-color: var(--color-surface-white, #ffffff) !important;
    border-radius: 15px !important;
    border: 1px solid var(--color-primary, #218544) !important;
    border-top: 5px solid var(--color-primary, #218544) !important;
}

.carousel--testimonials .review-card .framer-17n29hm {
    margin: 0.875rem 0 1rem 0 !important;
    flex: 1 1 auto !important;
}

.carousel--testimonials .review-card .stars-group,
.review-card .stars-group {
    margin-top: auto !important;
    padding-top: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
}

/* --------------------------------------------------------------------------
   9. BASE MOBILE FIRST: Accordion Exclusivo (Dúvidas Frequentes)
   HOTFIX DE ALTURAS FLUÍDAS: Seção, Wrapper e Acordeão Dinâmicos
   -------------------------------------------------------------------------- */
.faq-static-container {
    display: none !important;
}

/* 1. Altura Fluida da Seção e Invólucro (Wrapper) */
.faq-section,
.testimonials__wrapper .faq-section,
#faq {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 3.5rem 1.25rem !important;
    box-sizing: border-box !important;
}

.faq-accordion__content,
.testimonials__wrapper .faq-accordion__content,
.framer-ljgthd,
.testimonials__wrapper .framer-ljgthd {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    width: 100% !important;
    max-width: var(--container-max-width, 1200px) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.faq-accordion,
.faq-accordion.faq-accordion__item {
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* 1. Fundo do Card (Off-White), Borda Superior Verde 3px e Cantos Arredondados */
.faq-item {
    width: 100%;
    background-color: #f4f4f4 !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-top: 3px solid var(--color-primary, #218544) !important;
    border-radius: 0.625rem !important;
    /* 10px */
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin-bottom: 0.75rem !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
}

.faq-item:hover {
    background-color: #efefef !important;
}

/* Cabeçalho da Pergunta */
.faq-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-family: 'Figtree', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary, #111111);
    text-align: left;
    transition: color 0.2s ease;
    user-select: none;
}

.faq-header:hover {
    color: var(--color-primary, #218544);
}

/* Contêiner do Ícone */
.faq-icon,
.faq-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    flex-shrink: 0;
}

.faq-icon svg,
.faq-icon-wrapper svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2.5;
    transition: color 0.25s ease, stroke 0.25s ease;
}

/* 2. Ícone de + (Estado Fechado): Cor Verde Primária */
.faq-item .icon-plus,
.faq-header .icon-plus,
.faq-icon .icon-plus,
.icon-plus {
    color: var(--color-primary, #218544) !important;
    stroke: var(--color-primary, #218544) !important;
}

/* 3. Ícone de - (Estado Aberto / Ativo): Cor Cinza Escuro */
.faq-item.is-open .icon-minus,
.faq-header[aria-expanded="true"] .icon-minus,
.faq-item.is-open .faq-icon .icon-minus,
.faq-item.is-open svg.icon-minus {
    color: #333333 !important;
    stroke: #333333 !important;
}

/* 2. Expansão do Acordeom: Animação Fluida via CSS Grid */
.faq-content {
    display: grid !important;
    grid-template-rows: 0fr !important;
    transition: grid-template-rows 0.35s var(--smooth-easing) !important;
}

.faq-item.is-open .faq-content,
.faq-item.open .faq-content,
.faq-item.active .faq-content,
.faq-header[aria-expanded="true"]+.faq-content {
    grid-template-rows: 1fr !important;
}

.faq-content>div {
    overflow: hidden !important;
    min-height: 0 !important;
    /* Permite colapso total a 0 no grid */
}

/* 3. Texto da Resposta & Ajuste de Padding: Padding-bottom apenas quando aberto */
.faq-answer,
.faq-item.is-open .faq-answer,
.faq-item.open .faq-answer,
.faq-item.active .faq-answer,
.faq-item.is-open .faq-content p,
.faq-item.is-open .faq-content {
    color: var(--color-primary, #218544) !important;
    font-family: 'Anek Latin', sans-serif;
    line-height: 1.5;
}

/* Fechado: sem padding vertical para evitar espaços mortos */
.faq-answer {
    padding: 0 1rem 0 1rem !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: padding 0.35s var(--smooth-easing), color 0.25s ease !important;
}

/* Aberto: padding-bottom dinâmico fornecendo respiro ao texto expandido */
.faq-item.is-open .faq-answer,
.faq-item.open .faq-answer,
.faq-item.active .faq-answer,
.faq-header[aria-expanded="true"]+.faq-content .faq-answer {
    padding: 0.25rem 1rem 1.125rem 1rem !important;
}

/* --------------------------------------------------------------------------
   10. BASE MOBILE FIRST: Seção 404 (Página Não Encontrada)
   -------------------------------------------------------------------------- */
.not-found-hero {
    position: relative;
    width: 100%;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem 1.25rem;
    box-sizing: border-box;
    overflow: hidden;
}

.not-found-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
    pointer-events: none !important;
}

/* Camadas de overlay invisíveis desativadas para interação */
.not-found-overlay,
#template-overlay {
    pointer-events: none !important;
}

.not-found-section,
.not-found-container {
    position: relative;
    z-index: 5;
    pointer-events: auto;
    max-width: 43.75rem;
    margin: 0 auto;
    width: 100%;
}

.not-found-content {
    position: relative;
    z-index: 6;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.not-found-content h1 {
    font-family: 'Figtree', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.04em;
    text-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
}

.not-found-content p {
    font-family: 'Anek Latin', sans-serif;
    font-size: 1.3rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 32.5rem;
    text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   10.1 BASE MOBILE FIRST: Expansão de Fundo 100% (Quem Atendemos)
   HOTFIX DE LARGURA PLENA: Fundo Cinza a 100% da Janela e Contêiner Limitador
   -------------------------------------------------------------------------- */

/* Tag <section> Pai de Quem Atendemos cobrindo 100% da largura da janela */
.who-we-serve-section,
.clients-target-section,
#atendemos,
.testimonials__wrapper .framer-3xl4jz {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: min-content !important;
    background-color: var(--color-bg-gray, #f7f7f7) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 3.5rem 1.25rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Contêiner limitador interno com largura máxima de 1200px alinhado ao centro */
.who-we-serve__container,
.clients-target__container {
    width: 100% !important;
    max-width: var(--container-max-width, 75rem) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

/* Título de Quem Atendemos centralizado dentro do contêiner */
.clients__title,
#atendemos .clients__title,
.testimonials__wrapper .clients__title {
    width: 100% !important;
    max-width: var(--container-max-width, 75rem) !important;
    margin: 0 auto !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Grid/Flex de Cards e Vídeos de Quem Atendemos */
#atendemos .framer-mn7a6f,
.testimonials__wrapper .framer-mn7a6f {
    width: 100% !important;
    max-width: var(--container-max-width, 75rem) !important;
    margin: 0 auto !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   11. Modal de Lightbox / Zoom Suave (Quem Atendemos)
   -------------------------------------------------------------------------- */
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lightbox-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: zoom-out;
}

.lightbox-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(0.95);
    transition: transform 0.4s var(--smooth-easing);
}

.lightbox-modal.is-active .lightbox-content {
    transform: scale(1);
}

.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 0.75rem;
    object-fit: contain;
    cursor: zoom-out;
    box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-caption {
    margin-top: 1rem;
    color: #ffffff;
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

.lightbox-trigger {
    cursor: zoom-in !important;
}

/* --------------------------------------------------------------------------
   12. Controles Customizados de Vídeo (Quem Atendemos)
   -------------------------------------------------------------------------- */
.custom-video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.video-custom-controls {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* 1 & 2. Formato e Estado Inicial do Botão Central (Play):
   - Formato quadrado com cantos arredondados ampliado em +30% (62.4px x 62.4px, border-radius: 8px)
   - Sem borda branca
   - Ícone perfeitamente centralizado com Flexbox
   - Cor de fundo verde padrão e opacidade total (100%) no estado pausado
   - Efeito :hover que inverte as cores (fundo branco e ícone verde) */
.video-center-btn,
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: auto;
    width: 62.4px;
    height: 62.4px;
    border-radius: 8px;
    background-color: var(--color-primary, rgb(33, 133, 68));
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    /* Opacidade total (100%) no estado pausado */
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.25s var(--spring-easing);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

/* Efeito Hover no Botão Central: inverte as cores (fundo branco e ícone verde) */
.video-center-btn:hover,
.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background-color: #ffffff;
    color: var(--color-primary, rgb(33, 133, 68));
}

.video-center-btn:active,
.video-play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.video-center-btn svg,
.video-play-btn svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
    display: block;
    transition: fill 0.3s ease, color 0.3s ease;
}

/* 1 & 4. Formato e Efeitos do Botão de Controlo de Áudio (Mute/Unmute):
   - Mantém tamanho atual (48px x 48px, border-radius: 8px)
   - Mantém cor de fundo verde e ícone branco em todos os momentos (Padrão, Hover, Mute/Unmute)
   - Ícone perfeitamente centralizado com Flexbox
   - Totalmente oculto no estado inicial (vídeo pausado)
   - Efeito :hover com zoom de escala 1.1 */
.video-mute-btn {
    pointer-events: none;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: var(--color-primary, rgb(33, 133, 68));
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    /* Totalmente invisível no estado inicial */
    visibility: hidden;
    transform: scale(1);
    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0.3s ease, filter 0.2s ease;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

/* Efeito Hover no Botão de Áudio: mantém fundo verde e ícone branco em 100% dos momentos, com zoom */
.video-mute-btn:hover {
    background-color: var(--color-primary, rgb(33, 133, 68));
    color: #ffffff;
    transform: scale(1.1);
    filter: brightness(1.08);
}

.video-mute-btn:active {
    transform: scale(0.95);
}

.video-mute-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    color: #ffffff;
    stroke: #ffffff;
}

.video-mute-btn:hover svg {
    color: #ffffff;
    stroke: #ffffff;
}

/* 3. Estado em Reprodução (Botão Pause):
   - Botão central com opacidade reduzida de cerca de 30% (0.3)
   - Efeito :hover específico: opacidade volta a 100% (opacity: 1) para visualização clara
   - Botão de Mute visível no canto inferior direito */
.custom-video-wrapper.is-playing .video-center-btn,
.video-center-btn.is-playing {
    opacity: 0.3;
}

.custom-video-wrapper.is-playing .video-center-btn:hover,
.video-center-btn.is-playing:hover {
    opacity: 1;
    /* Opacidade volta a 100% ao passar o rato */
    background-color: #ffffff;
    color: var(--color-primary, rgb(33, 133, 68));
}

.custom-video-wrapper.is-playing .video-mute-btn,
.video-mute-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Alternância dos ícones de Play / Pause */
.custom-video-wrapper .icon-play {
    display: block;
}

.custom-video-wrapper .icon-pause {
    display: none;
}

.custom-video-wrapper.is-playing .icon-play {
    display: none !important;
}

.custom-video-wrapper.is-playing .icon-pause {
    display: block !important;
}

/* Alternância dos ícones de Áudio (Vol On / Vol Off) */
.custom-video-wrapper .icon-vol-on {
    display: block;
}

.custom-video-wrapper .icon-vol-off {
    display: none;
}

.custom-video-wrapper.is-muted .icon-vol-on,
.video-mute-btn.is-muted .icon-vol-on {
    display: none !important;
}

.custom-video-wrapper.is-muted .icon-vol-off,
.video-mute-btn.is-muted .icon-vol-off {
    display: block !important;
}

/* ==========================================================================
   ETAPA 2: Breakpoints de Escalonamento Progressivo (Mobile First)
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. PROGRESSIVE ENHANCEMENT: TABLET (min-width: 810px)
   -------------------------------------------------------------------------- */
@media (min-width: 810px) {

    /* Distribuição e Alinhamento Harmonioso da Seção Solicite um Orçamento no Tablet */
    .framer-1jd6tjm {
        width: 100% !important;
        max-width: var(--container-max-width) !important;
    }

    .framer-11n0s8y {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 2rem !important;
    }

    .framer-35dmvv {
        width: auto !important;
        max-width: 55% !important;
        flex: 1 1 auto !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .framer-1lqphxb {
        width: auto !important;
        max-width: 45% !important;
        flex: 0 0 auto !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    .btn-whatsapp-container {
        justify-content: flex-end !important;
        width: auto !important;
    }

    /* Botões WhatsApp no Tablet */
    a.btn-whatsapp,
    .btn-whatsapp,
    .hero__cta-container a,
    .btn-whatsapp-container a,
    .hero-cta a {
        width: auto !important;
        min-width: max-content !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        padding: 0.875rem 2rem !important;
        gap: 0.75rem !important;
        border-radius: 3.125rem !important;
        white-space: nowrap !important;
    }

    .btn-whatsapp .btn-whatsapp-icon,
    .btn-whatsapp .icone-container,
    .btn-whatsapp .btn-whatsapp__icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
    }

    .btn-whatsapp .btn-whatsapp-icon svg,
    .btn-whatsapp .icone-container svg,
    .btn-whatsapp .btn-whatsapp__icon svg,
    .btn-whatsapp svg.btn-whatsapp-svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .btn-whatsapp .rich-text {
        font-size: 1.0625rem !important;
    }

    .btn-outline,
    .btn-voltar-404 {
        padding: 0.8125rem 1.95rem;
        font-size: 1.1375rem;
    }

    /* Carrosséis no Tablet: 2 cards por tela com peeking suave */
    .carousel--structure {
        height: 25rem !important;
    }

    .carousel--structure section>div {
        height: 23.75rem !important;
    }

    .carousel--structure ul,
    .carousel--testimonials ul {
        gap: 1rem !important;
        padding-left: calc((100% - (2 * 42% + 1rem)) / 2) !important;
        padding-right: calc((100% - (2 * 42% + 1rem)) / 2) !important;
    }

    .carousel--structure li>div,
    .carousel--testimonials li>div {
        flex: none !important;
        width: 42% !important;
        min-width: 42% !important;
        max-width: 25rem !important;
        scroll-snap-align: center !important;
        box-sizing: border-box !important;
    }

    .carousel--structure li>div {
        height: 21.875rem !important;
    }

    /* Setas de Navegação no Hover para Tablet e Desktop */
    fieldset.carousel__controls {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .carousel-container:hover fieldset.carousel__controls,
    .structure__carousel-wrapper:hover fieldset.carousel__controls,
    .testimonials__carousel-wrapper:hover fieldset.carousel__controls,
    .carousel--structure:hover fieldset.carousel__controls,
    .carousel--testimonials:hover fieldset.carousel__controls {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* FAQ Accordion no Tablet */
    .faq-section,
    .testimonials__wrapper .faq-section {
        padding: 4.5rem 2rem !important;
    }

    .faq-header {
        font-size: 1.125rem;
        padding: 1.125rem 1.25rem;
    }

    .faq-answer {
        font-size: 1rem !important;
        padding: 0 1.25rem 0 1.25rem !important;
    }

    .faq-item.is-open .faq-answer,
    .faq-item.open .faq-answer,
    .faq-item.active .faq-answer,
    .faq-header[aria-expanded="true"]+.faq-content .faq-answer {
        padding: 0.375rem 1.25rem 1.375rem 1.25rem !important;
    }

    /* 404 no Tablet */
    .not-found-hero {
        min-height: 80vh;
        padding: 5rem 2rem;
    }

    .not-found-content h1 {
        font-size: 6.5rem;
    }

    .not-found-content p {
        font-size: 1.4625rem;
        max-width: 38rem;
    }
}

/* --------------------------------------------------------------------------
   14. PROGRESSIVE ENHANCEMENT: DESKTOP (min-width: 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

    /* Alinhamento ao Contêiner Central Máximo */
    .structure__carousel-wrapper {
        max-width: var(--container-max-width) !important;
    }

    .site-footer__column {
        max-width: var(--container-max-width) !important;
    }

    /* Alinhamento dos Contêineres de CTA no Desktop */
    .hero__cta-container {
        justify-content: flex-start !important;
    }

    .framer-11n0s8y {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 2.5rem !important;
    }

    .framer-35dmvv {
        width: auto !important;
        max-width: 55% !important;
        flex: 1 1 auto !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .framer-1lqphxb {
        width: auto !important;
        max-width: 45% !important;
        flex: 0 0 auto !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
    }

    .btn-whatsapp-container {
        justify-content: flex-end !important;
        width: auto !important;
    }

    /* Botão WhatsApp no Desktop: Dimensões Plenas e Hovers de Elevação */
    a.btn-whatsapp,
    .btn-whatsapp,
    .hero__cta-container a,
    .btn-whatsapp-container a,
    .hero-cta a {
        width: auto !important;
        min-width: max-content !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        padding: 0.875rem 2.25rem !important;
        gap: 0.875rem !important;
        border-radius: 3.125rem !important;
        white-space: nowrap !important;
    }

    .btn-whatsapp .btn-whatsapp-icon,
    .btn-whatsapp .icone-container,
    .btn-whatsapp .btn-whatsapp__icon {
        width: 2.8125rem !important;
        height: 2.8125rem !important;
        min-width: 2.8125rem !important;
        min-height: 2.8125rem !important;
        max-width: 2.8125rem !important;
        max-height: 2.8125rem !important;
    }

    .btn-whatsapp .btn-whatsapp-icon svg,
    .btn-whatsapp .icone-container svg,
    .btn-whatsapp .btn-whatsapp__icon svg,
    .btn-whatsapp svg.btn-whatsapp-svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    .btn-whatsapp .rich-text {
        font-size: 1.125rem !important;
    }

    /* Micro-interação Hover Estática (Inversão de Cores e Sombra Sem Deslocamento) */
    a.btn-whatsapp:hover,
    .hero__cta-container a:hover,
    .btn-whatsapp-container a:hover {
        transform: none !important;
        background-color: var(--color-primary, #218544) !important;
        box-shadow: var(--btn-shadow-hover) !important;
    }

    a.btn-whatsapp:hover .btn-whatsapp-icon,
    a.btn-whatsapp:hover .icone-container,
    a.btn-whatsapp:hover .btn-whatsapp__icon {
        background-color: #ffffff !important;
        color: var(--color-primary, #218544) !important;
    }

    a.btn-whatsapp:hover svg.btn-whatsapp-svg,
    a.btn-whatsapp:hover .btn-whatsapp__icon svg {
        fill: var(--color-primary, #218544) !important;
        color: var(--color-primary, #218544) !important;
    }

    a.btn-whatsapp:hover .rich-text {
        color: #ffffff !important;
        --framer-text-color: #ffffff !important;
    }

    a.btn-whatsapp:active,
    .hero__cta-container a:active,
    .btn-whatsapp-container a:active {
        transform: none !important;
        box-shadow: var(--btn-shadow-default) !important;
    }

    /* Hover no Botão Outline & Voltar 404 */
    .btn-outline:hover,
    .btn-voltar-404:hover {
        transform: scale(1.05);
        border-color: var(--color-primary);
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    }

    /* Carrosséis no Desktop: 3 cards centrais + peeking lateral suave (~6.8%) */
    .carousel--structure {
        height: 26.875rem !important;
    }

    .carousel--structure section>div {
        height: 25.625rem !important;
    }

    .carousel--structure ul,
    .carousel--testimonials ul {
        gap: 1.25rem !important;
        padding-left: 6.8% !important;
        padding-right: 6.8% !important;
    }

    .carousel--structure li>div,
    .carousel--testimonials li>div {
        flex: none !important;
        width: calc((100% - 2.5rem) / 3) !important;
        min-width: calc((100% - 2.5rem) / 3) !important;
        max-width: calc((100% - 2.5rem) / 3) !important;
        scroll-snap-align: center !important;
        box-sizing: border-box !important;
    }

    .carousel--structure li>div {
        height: 23.75rem !important;
    }

    /* FAQ no Desktop */
    .faq-section,
    .testimonials__wrapper .faq-section {
        padding: 5.5rem 2.5rem !important;
    }

    .faq-header {
        font-size: 1.25rem;
        padding: 1.25rem 1.5rem;
    }

    .faq-answer {
        font-size: 1.0625rem !important;
        padding: 0 1.5rem 0 1.5rem !important;
    }

    .faq-item.is-open .faq-answer,
    .faq-item.open .faq-answer,
    .faq-item.active .faq-answer,
    .faq-header[aria-expanded="true"]+.faq-content .faq-answer {
        padding: 0.5rem 1.5rem 1.5rem 1.5rem !important;
    }

    /* 404 no Desktop */
    .not-found-hero {
        min-height: 85vh;
        padding: 6.25rem 2.5rem;
    }

    .not-found-content h1 {
        font-size: 8rem;
    }

    .not-found-content p {
        font-size: 1.625rem;
        max-width: 42rem;
    }

    /* --------------------------------------------------------------------------
       Expansão Plena de Fundo (100% da Janela) e Contêiner Central (1200px)
       Seção "Quem Atendemos" e Seção "Depoimentos" em Monitores Largos
       -------------------------------------------------------------------------- */
    .who-we-serve-section,
    .clients-target-section,
    #atendemos,
    .testimonials__wrapper .framer-3xl4jz {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        background-color: var(--color-bg-gray, #f7f7f7) !important;
        padding: 5.5rem 2rem 5rem 2rem !important;
        box-sizing: border-box !important;
    }

    .who-we-serve__container,
    .clients-target__container {
        width: 100% !important;
        max-width: var(--container-max-width, 75rem) !important;
        margin: 0 auto !important;
        background-color: transparent !important;
    }

    #atendemos .framer-mn7a6f,
    .testimonials__wrapper .framer-mn7a6f {
        width: 100% !important;
        max-width: var(--container-max-width, 75rem) !important;
        margin: 0 auto !important;
        background-color: transparent !important;
    }

    .testimonials-section,
    .testimonials__wrapper .testimonials-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        background-color: var(--color-bg-gray, #f7f7f7) !important;
        padding: 6.5rem 2rem 3.5rem 2rem !important;
        box-sizing: border-box !important;
    }

    .testimonials__title,
    .testimonials__wrapper .testimonials__title,
    .testimonials__carousel-wrapper,
    .testimonials__wrapper .testimonials__carousel-wrapper {
        width: 100% !important;
        max-width: var(--container-max-width, 75rem) !important;
        margin: 0 auto !important;
        background-color: transparent !important;
    }
}