@charset "UTF-8";

/* Reset Básico e Fontes */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
			padding-top: 80px; /* IGUAL À ALTURA DA .top-navbar */
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f9f9f9;
			font-size:1.2rem;
        }
		
		/* Estilo geral para links <a> que não são botões */
		a {
    		color: #000000;         /* Define a cor da fonte para preto */
    		text-decoration: none; /* Remove o sublinhado */
    		transition: color 0.3s ease; /* Opcional: Adiciona uma transição suave para a cor no hover */
		}

		/* Estilo para links no estado :hover (quando o mouse está sobre) */
		a:not(.btn):hover { /* Aplica-se a links que NÃO têm a classe .btn */
    		color: #0c7b93;          /* Muda a cor para o azul da sua paleta ao passar o mouse */
    		/* text-decoration: underline; */ /* Opcional: Adicionar sublinhado no hover se desejar */
		}

        /* Container Principal */
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
            overflow: hidden;
        }

        /* Tipografia */
        h1, h2, h3 {
            color: #0a3d62;
            margin-bottom: 1rem;
            line-height: 1.3;
        }

        h1 {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 0.5rem;
        }

        h2 {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
            padding-bottom: 10px;
        }

        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #0c7b93;
        }

        p {
            margin-bottom: 1rem;
            color: #555;
        }

        ul, ol {
            margin-bottom: 1rem;
            padding-left: 20px;
        }

        li {
            margin-bottom: 0.5rem;
        }

        /* Seções */
        section {
            padding: 60px 0;
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
            opacity: 0;
            transform: translateY(30px);
        }

        section.visible {
             opacity: 1;
             transform: translateY(0);
        }


		/* Barra de Topo / Navegação */
		.top-navbar {
			background-color: #ffffff;
			padding: 10px 0;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1000;
    /* A altura será determinada pelo conteúdo e padding,
       mas podemos manter uma min-height para garantir espaço mínimo
       ou ajustar o height se quisermos um tamanho fixo exato.
       Com o botão, talvez precise de um pouco mais de 80px em mobile se empilhado.
       Vamos deixar dinâmico por enquanto e ajustar no mobile se necessário.
    */
    /* height: 80px; */ /* Comentado para ser mais flexível com conteúdo empilhado */
		min-height: 80px; /* Garante que a barra não fique menor que isso */
		display: flex; /* Para centralizar o navbar-container verticalmente */
		align-items: center;
	}

		.navbar-container {
			display: flex;
			justify-content: space-between; /* Logo à esquerda, CTA à direita por padrão */
			align-items: center;
			width: 100%; /* Para ocupar todo o espaço do .container pai */
    /* height: 60px; */ /* Removido para permitir que a altura se ajuste ao conteúdo, especialmente em mobile */
		}

		.navbar-logo-link {
			display: inline-block;
		}

		.navbar-logo-img {
			height: 50px;  /* Reduzi um pouco a altura do logo para dar mais espaço ao botão */
			width: auto;   /* Largura automática para manter a proporção */
			max-width: 170px; /* Limite para o logo */
			display: block;
		}

		.navbar-cta {
			/* Nenhum estilo específico necessário aqui para desktop,
			o flex do .navbar-container cuidará do posicionamento. */
		}

		.btn-navbar-cta {
			padding: 8px 18px; /* Padding um pouco menor para o botão na navbar */
			font-size: 0.9rem; /* Fonte um pouco menor */
			/* Herda os outros estilos de .btn */
		}
		
		/* Opcional: Estilos para futuros links de navegação (descomente no HTML para usar)
		.navbar-links {
			display: flex;
			align-items: center;
		}

		.navbar-links a {
			color: #0a3d62;
			text-decoration: none;
			margin-left: 20px;
			font-weight: 500;
			transition: color 0.3s ease;
		}

		.navbar-links a:hover {
			color: #0c7b93;
		}

		.navbar-links .btn-nav {
			background-color: #f0ad4e;
			color: #fff !important;
			padding: 8px 15px;
			border-radius: 5px;
			font-weight: bold;
		}

		.navbar-links .btn-nav:hover {
			background-color: #ec971f;
			color: #fff !important;
		}
		*/
		
		.hero .container {
			padding-top: 50px; /* Valor inicial para teste, ajuste conforme necessário */
			/* Se você já tiver um padding-top aqui de outra regra, some a este valor
			ou ajuste para o valor total desejado.
			Por exemplo, se já tinha padding: 20px 0; e quer mais 30px no topo,
			poderia ser padding: 50px 0 20px 0; (topo, direita, baixo, esquerda)
			ou apenas padding-top: 50px; se o padding horizontal já estiver ok.
			*/
		}

        .hero {
			position: relative; /* Necessário para posicionar o vídeo e o conteúdo absolutamente dentro dele */
			width: 100%;
			min-height: calc(80vh - 80px); /* Altura da viewport menos a navbar */
			/* min-height: calc(100vh - 80px);  Altura da viewport menos a navbar */
			display: flex; /* Usado para centralizar o .hero-content-overlay */
			align-items: center;
			justify-content: center;
			overflow: hidden; /* Esconde partes do vídeo que excederem o container */
			color: #fff; /* Cor do texto sobre o vídeo */
			text-align: center;
			/* Remova a propriedade 'background' com a imagem estática daqui */
			/* background: url('images/divorcio-online.jpg') no-repeat center center/cover; */
			opacity: 1; /* Mantém como antes */
			transform: translateY(0); /* Mantém como antes */
		}

        .hero h1 {
            color: #fff;
            font-size: 3rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
        }

        .hero p { /* Este .hero p não está sendo usado no HTML atual do hero */
            font-size: 1.2rem;
            color: #eee;
            margin-bottom: 1.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-subtext { /* Esta classe não está sendo usada no HTML atual do hero */
            font-size: 1.1rem;
            color: #ddd;
            margin-top: 1.5rem;
            font-weight: bold;
        }
		
        .hero h2 {
            font-size: 1.2rem;
            color: #eee;
            font-weight: bold;
            line-height: 1.6;
            max-width: 700px;
            margin: 1rem auto 1.5rem auto;
            padding-bottom: 0;
            text-align: center;
	        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        .hero h2::after {
            content: none;
        }

        .hero h1 + h2 {
            margin-top: 1.5rem;
        }

        .hero p[style] { /* Referencia o último <p> com estilo inline */
             margin-top: 3rem;
             font-size: 0.9rem;
             font-weight: bold;
             color: #eee;
             border-top: 1px solid #555;
             padding-top: 1rem;
             max-width: 600px;
             margin-left: auto;
             margin-right: auto;
        }
		
		.hero-video-wrapper {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1; /* Coloca o vídeo atrás do conteúdo */
		}

		#heroVideo { /* Estilos para a tag <video> */
			width: 100%;
			height: 100%;
			object-fit: cover; /* Faz o vídeo cobrir toda a área, cortando o excesso para manter a proporção */
                       /* Alternativas: 'contain' (mostra vídeo inteiro, pode ter barras), 'fill' (estica) */
			object-position: center 20%; /* Ajuste o valor Y (segundo valor) */
    /* Ou: object-position: 50% 20%; */
    /* Ou: object-position: center top; (para alinhar pelo topo, pode cortar muito embaixo) */		   
		}

		.hero-content-overlay {
			position: relative; /* Para ficar acima do vídeo */
			z-index: 2;         /* Garante que o conteúdo fique sobre o vídeo */
			width: 100%;        /* Ocupa a largura para o .container interno funcionar */
			padding: 30px 0;    /* Espaçamento vertical para o conteúdo */
			/* Adicione um leve fundo escuro semi-transparente se o vídeo for muito claro
			e dificultar a leitura do texto branco: */
			/* background-color: rgba(0, 0, 0, 0.3); */
		}

		/* O .container dentro de .hero-content-overlay já está estilizado para centralizar e limitar largura */
		.hero .container {
			/* O padding-top: 30px; que você tinha aqui pode ser removido ou ajustado,
			pois .hero-content-overlay agora tem seu próprio padding.
			Ou, se o padding do hero.container era para o conteúdo interno, pode manter.
			Vamos remover para simplificar, o padding do .hero-content-overlay deve ser suficiente.
			*/
			padding-top: 0;
			padding-bottom: 0;
		}

        /* Botões */
        .btn {
            /* Suas regras existentes para .btn (cor de fundo, cor do texto branco, etc.) */
    		/* Exemplo: */
   			background-color: #f0ad4e;
    		color: #fff !important; /* !important para garantir que sobreponha a cor preta do 'a' geral */
    		padding: 12px 25px;
    		text-decoration: none; /* Garante que botões também não tenham underline */
    		border-radius: 5px;
    		font-weight: bold;
    		margin: 10px 5px;
    		transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    		border: none;
    		cursor: pointer;
    		font-size: 1rem;
    		display: inline-block; /* Para que padding e margin funcionem corretamente */
        }

        .btn:hover {
            /* Suas regras existentes para .btn:hover */
    		/* Exemplo: */
    		background-color: #ec971f;
    		transform: translateY(-3px);
    		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    		color: #fff !important; /* Garante que a cor do texto permaneça branca no hover */
        }

        .btn-secondary {
            background-color: #0c7b93;
    		color: #fff !important;
        }

        .btn-secondary:hover {
            background-color: #0a5b6e;
    		color: #fff !important;
        }

        .cta-buttons {
            margin-top: 2rem;
			text-align: center;
        }

        .cta-subtext {
            font-size: 0.9rem;
            color: #ccc;
            margin-top: 0.5rem;
            display: block;
        }

        /* Separador */
        hr.separator {
            border: none;
            height: 2px;
            background-color: #0c7b93;
            width: 100px;
            margin: 40px auto;
            opacity: 0.5;
        }

		/* NOVO: Estilos para o bloco de introdução da seção "Como Funciona" */
		.como-funciona-intro {
			background-color: #e9f1f6; /* Cor de fundo suave, similar à da seção e-Notariado */
			padding: 30px 35px;        /* Espaçamento interno generoso */
			border-radius: 10px;       /* Bordas arredondadas */
			margin-bottom: 3rem;       /* Espaço antes dos "steps" */
			box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra sutil */
			text-align: center; /* Centraliza o texto dentro deste bloco por padrão */
		}

		.como-funciona-intro h2 {
			margin-bottom: 0.5rem; /* Menor margem inferior para o H2 */
			font-size: 2.2rem; /* Pode aumentar um pouco o H2 principal da seção */
		}
		
		/* A subheadline .subheadline-h3 já tem estilos, mas podemos ajustar se necessário aqui */
		.como-funciona-intro .subheadline-h3 {
			font-size: 1.3rem; /* Levemente menor que o padrão .subheadline-h3 */
			color: #0a3d62;    /* Cor mais forte para a subheadline dentro do bloco */
			margin: 0 auto 2rem auto; /* Ajusta margens */
		}

		.como-funciona-intro p {
			font-size: 1.3rem; /* Tamanho da fonte dos parágrafos introdutórios */
			line-height: 1.7;
			color: #454545;     /* Tom de cinza escuro para o texto */
			max-width: 800px;   /* Limita a largura dos parágrafos para leitura */
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 1.2rem; /* Espaçamento entre parágrafos */
		}

		.como-funciona-intro p:last-of-type {
			margin-bottom: 0; /* Remove margem do último parágrafo dentro do bloco intro */
		}

		.como-funciona-intro a { /* Estilo para links dentro da intro */
			color: #0c7b93; /* Cor de link consistente com a paleta */
			font-weight: 600;
		}

		.como-funciona-intro a:hover {
			color: #0a3d62;
			text-decoration: underline;
		}

        /* Seção "Como Funciona" */
		#como-funciona {
			padding-top: 50px;
		}	
		
        #como-funciona .steps {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-top: 5rem;
        }

        #como-funciona .step {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            flex: 1 1 300px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        #como-funciona .step:hover {
             transform: translateY(-5px);
             box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
        }

        #como-funciona .step h3 {
            color: #0c7b93;
            margin-bottom: 0.5rem;
        }

        #como-funciona ol {
            list-style-type: none;
            padding-left: 0;
            counter-reset: step-counter;
        }

        #como-funciona ol li {
            position: relative;
            padding-left: 40px;
            margin-bottom: 1.5rem;
            counter-increment: step-counter;
        }

         #como-funciona ol li::before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            background-color: #f0ad4e;
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.9rem;
        }
		
		/* Estilização da lista de requisitos na seção "Como Funciona" */
		#como-funciona .step.requirements ul {
			list-style-type: none; /* Remove os bullets padrão */
			padding-left: 0;       /* Remove o padding padrão da lista se desejar um alinhamento mais à esquerda */
		}

		#como-funciona .step.requirements ul li {
    		position: relative;      /* Necessário para posicionar o pseudo-elemento */
    		padding-left: 28px;      /* Espaço para o tick e um pequeno respiro */
    		margin-bottom: 0.8rem;   /* Espaçamento entre os itens da lista */
		}

		#como-funciona .step.requirements ul li::before {
    		content: '✓';            /* O caractere de tick (check mark) */
    		position: absolute;
    		left: 0;
    		top: 0; /* Ajuste vertical se necessário, pode ser '2px' ou similar dependendo da fonte */
    		color: #28a745;          /* Cor verde para o tick (um verde padrão de sucesso) */
    		font-weight: bold;       /* Opcional: Deixa o tick mais espesso */
    		font-size: 1.1em;        /* Opcional: Ajusta o tamanho do tick */
    		line-height: 1;          /* Garante que o tick não afete a altura da linha do texto principal */
		}

		/* Opcional: Ajustar o H3 para não ter a linha decorativa se estiver herdando */
		#como-funciona .step.requirements h3::after {
    		content: none;
		}

        /* Seção "Por que escolher" - MODIFICADO/ADICIONADO */
        #por-que-escolher .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        /* MODIFICADO/ADICIONADO */
        #por-que-escolher .feature {
            background-color: #fff;
            /* padding: 25px; -> Removido o padding geral daqui */
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            text-align: center;
            border-left: 5px solid #0c7b93;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden; /* Importante para que a imagem respeite o border-radius do pai */
            display: flex;
            flex-direction: column;
        }

        #por-que-escolher .feature:hover {
            transform: scale(1.03);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
        }

        /* ADICIONADO */
        .feature-image {
            width: 100%;
            height: 180px; /* Defina uma altura fixa para consistência */
            object-fit: cover;
            display: block;
        }

        /* ADICIONADO */
        .feature-content {
            padding: 20px 25px 25px 25px; /* Padding para o texto */
            flex-grow: 1;
        }

        /* MODIFICADO para referenciar o H3 dentro de .feature-content */
        #por-que-escolher .feature .feature-content h3 {
            color: #0a3d62;
            font-size: 1.3rem;
            margin-top: 0; /* Remove margem superior do H3 */
            margin-bottom: 0.8rem;
            text-align: center;
        }

        /* ADICIONADO para remover linha do H3 se herdada */
        #por-que-escolher .feature .feature-content h3::after {
            content: none;
        }

        /* ADICIONADO para estilizar parágrafo dentro do feature-content */
        #por-que-escolher .feature .feature-content p {
            font-size: 0.95rem;
            color: #555;
        }
        /* FIM DAS MODIFICAÇÕES PARA "POR QUE ESCOLHER" */


         /* Seção e-Notariado */
         #e-notariado {
            background-color: #eef7f9;
         }

        #e-notariado .content-split {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            align-items: center;
        }

        #e-notariado .text-content, #e-notariado .how-it-works {
            flex: 1 1 400px;
        }

         #e-notariado h3 {
             color: #0c7b93;
         }
		 
		 /* Estilização da lista na seção e-Notariado -> como-funciona-na-pratica */
		#e-notariado .how-it-works ul {
    		list-style-type: none; /* Remove os bullets padrão */
    		padding-left: 0;       /* Remove o padding padrão da lista */
		}

		#e-notariado .how-it-works ul li {
    		position: relative;      /* Necessário para posicionar o pseudo-elemento */
    		padding-left: 28px;      /* Espaço para o tick e um pequeno respiro */
   			margin-bottom: 0.8rem;   /* Espaçamento entre os itens da lista */
    		color: #555;             /* Garante a cor do texto do item da lista */
		}

		#e-notariado .how-it-works ul li::before {
    		content: '✓';            /* O caractere de tick (check mark) */
    		position: absolute;
    		left: 0;
    		top: 0; /* Ajuste vertical se necessário, pode ser '2px' ou similar */
    		color: #28a745;          /* Cor verde para o tick */
    		font-weight: bold;       /* Opcional: Deixa o tick mais espesso */
    		font-size: 1.1em;        /* Opcional: Ajusta o tamanho do tick */
    		line-height: 1;          /* Garante que o tick não afete a altura da linha */
		}

		/* Opcional: Ajustar o H3 para não ter a linha decorativa se estiver herdando */
		#e-notariado .how-it-works h3::after {
    		content: none;
		}

        /* Seção Depoimentos - Estilos Atualizados */

		/* NOVO: Layout Flex para a seção de depoimentos */
		.depoimentos-layout {
    		display: flex;
    		/* flex-wrap: wrap; /* REMOVA OU COMENTE se você quer que NUNCA quebre em telas grandes */
    		gap: 2.5rem;
    		align-items: flex-start; /* Importante para alinhar pelo topo se as alturas forem diferentes */
    		margin-top: 2.5rem;
		}

		/* NOVO: Container da imagem à esquerda */
		.depoimentos-imagem-container {
    		/* Define a largura da coluna da imagem */
    		flex-shrink: 0; /* Impede que o container da imagem encolha se não houver espaço */
    		width: 350px;   /* LARGURA FIXA DESEJADA para a imagem */
    		/* Não defina height aqui, deixe a imagem ditar a altura da sua própria coluna */
    		/* border: 1px solid red; */ /* Para debug */
		}

		/* NOVO: Estilo da imagem ilustrativa */
		.depoimentos-imagem-ilustrativa {
    		width: 100%; /* Imagem ocupa 100% da largura do seu container (que é 320px) */
    		height: auto; /* Altura é calculada para manter a proporção 9:16 */
    		display: block;
    		border-radius: 8px;
    		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    		/* border: 1px solid blue; */ /* Para debug */
		}

		/* NOVO: Wrapper para a grade de depoimentos à direita */
		.testimonial-grid-wrapper {
    		flex-grow: 1; /* Permite que a grade de depoimentos ocupe o espaço restante */
    		/* min-width: 0; */ /* Adicionar isso pode ajudar em alguns casos de overflow no flex item */
    		/* border: 1px solid green; */ /* Para debug */
		}

		/* Estilos existentes para a grade e os depoimentos individuais */
		#depoimentos .testimonial-grid {
    		display: grid;
    		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    		gap: 1.5rem;
    		/* A altura desta grade será determinada pelo conteúdo dela.
       		Se a imagem ao lado for muito alta, esta grade pode parecer "curta". */
		}

		#depoimentos blockquote {
			background-color: #fff;
    		padding: 20px;
    		border-radius: 8px;
    		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    		border-left: 5px solid #f0ad4e;
    		position: relative;
    		font-style: italic;
    		color: #555;
    		transition: transform 0.3s ease, box-shadow 0.3s ease;
    		display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		min-height: 220px;
		}

		#depoimentos blockquote:hover {
    		transform: translateY(-5px);
    		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
		}

		#depoimentos blockquote::before {
    		content: '“';
    		font-size: 2.5rem; /* Ajustei o tamanho */
    		color: #f0ad4e;
    		opacity: 0.3;
    		position: absolute;
    		top: 8px;  /* Ajustei a posição */
    		left: 12px; /* Ajustei a posição */
    		line-height: 1;
		}

		#depoimentos footer {
    		margin-top: 1rem;
    		font-weight: bold;
    		color: #0a3d62;
    		font-style: normal;
    		text-align: right;
    		font-size: 0.9rem;
		}

        /* Seção Sobre Nós */
        #sobre-nos {
             background-color: #0a3d62;
             color: #fff;
        }

        #sobre-nos h2 {
            color: #fff;
        }
         #sobre-nos h2::after {
             background-color: #f0ad4e;
         }

        #sobre-nos p {
            color: #eee;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        /* Seção FAQ */
        #faq details {
            background-color: #fff;
            margin-bottom: 1rem;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            border-left: 5px solid #0c7b93;
            transition: margin 0.3s ease;
        }

        #faq details[open] {
            margin-bottom: 1.5rem;
        }

        #faq summary {
            padding: 1rem 1.5rem;
            font-weight: bold;
            cursor: pointer;
            color: #0a3d62;
            list-style: none;
            position: relative;
            transition: background-color 0.2s ease;
        }

        #faq summary:hover {
             background-color: #f1f1f1;
        }

        #faq summary::-webkit-details-marker { display: none; }
        #faq summary::marker { display: none; }

        #faq summary::after {
            content: '+';
            position: absolute;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
            color: #0c7b93;
            transition: transform 0.3s ease;
        }

        #faq details[open] summary::after {
            content: '−';
             transform: translateY(-50%) rotate(180deg);
        }

        #faq .faq-answer {
            padding: 0 1.5rem 1.5rem 1.5rem;
            color: #555;
            border-top: 1px solid #eee;
            margin-top: 0.5rem;
        }
		
		/* Estilo para Subheadlines H3 */
		.subheadline-h3 {
    		text-align: center;
    		max-width: 800px;
    		margin: 0.5rem auto 2.5rem auto; /* Ajustado: pequena margem superior, centralizado, margem inferior maior */
    		font-size: 1.35rem;               /* Tamanho um pouco menor que h2, maior que p */
    		font-weight: 600;                 /* Um pouco menos que 'bold' (700), ou use 'normal' ou 'bold' */
    		color: #333;                      /* Cor mais escura, mas não tão forte quanto o h2 principal */
    		line-height: 1.5;
    		padding-bottom: 0;                /* Remove padding-bottom se herdado */
    		position: relative;               /* Para garantir que o ::after (se existir) possa ser controlado */
		}

		/* Garante que esta subheadline H3 não tenha a linha decorativa do H2 */
		.subheadline-h3::after {
    		content: none;
		}

        /* Footer */
        footer.main-footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
            font-size: 0.9rem;
        }
		.main-footer p {
			color: #fff;
		}
		
		.main-footer a {
			color:#fff;
		}
		
		/* Seção Advogado Responsável */
		#advogado-responsavel {
		/* padding: 60px 0;  Já definido na regra geral 'section' */
		}

		#advogado-responsavel h2 {
		/* Estilos padrão de h2 já aplicados */
		margin-bottom: 1rem; /* Menor margem se tiver subheadline */
		}

		/* Layout para texto e imagem do advogado */
		.advogado-layout {
			display: flex;
			flex-wrap: wrap-reverse; /* Importante para a ordem em mobile: imagem primeiro */
			gap: 2.5rem;
			align-items: center; /* Centraliza verticalmente se as alturas forem diferentes */
			margin-top: 2.5rem;
		}

		.advogado-texto {
			flex: 2 1 500px; /* Texto ocupa mais espaço, base de 500px */
			order: 1; /* Garante que o texto venha primeiro no fluxo normal em telas grandes */
		}

		.advogado-texto h3 {
			font-size: 1.5rem; /* Tamanho para o nome do advogado */
			color: #0a3d62;
			margin-bottom: 1rem;
			text-align: left; /* Alinhamento à esquerda para o nome */
		}
		.advogado-texto h3::after {
			content: none; /* Remove linha se houver herança */
		}


		.advogado-texto p {
			margin-bottom: 1.2rem;
			line-height: 1.7;
			color: #444; /* Cor de texto um pouco mais escura para melhor leitura */
			text-align: justify; /* Opcional: Justificar o texto */
		}

		.advogado-imagem-container {
			flex: 1 1 300px; /* Imagem ocupa menos espaço, base de 300px */
			max-width: 480px; /* Largura máxima da imagem */
			order: 2; /* Garante que a imagem venha depois no fluxo normal em telas grandes */
			/* border: 1px solid green; /* Para debug */
		}

		.advogado-foto {
			width: 100%;
			height: auto; /* Mantém a proporção 9:16 */
			display: block;
			border-radius: 8px;
			box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
		}

		.advogado-social-links {
			margin-top: 1.5rem;
		}

		.advogado-social-links a {
			margin-right: 1rem;
			color: #0c7b93; /* Cor azul da paleta para os links sociais */
			font-size: 1rem;
			text-decoration: none;
		}

		.advogado-social-links a:hover {
			color: #0a3d62; /* Azul mais escuro no hover */
			text-decoration: underline;
		}

		.advogado-social-links a i {
			margin-right: 0.3rem; /* Espaço entre o ícone e o texto */
			font-size: 1.2rem; /* Tamanho do ícone do FontAwesome */
		}
		
		.info-section-background-wrapper {
			background-color: #f0f4f8; /* Cor de fundo ocupa 100% da largura */
			/* Se precisar de padding vertical para a área de background, adicione aqui,
			caso contrário, o padding da 'section' interna cuidará disso.
			Ex: padding: 60px 0; */
			width: 100%;
		}
		
		/* Seção Entendendo o Divórcio Online */
		#entendendo-divorcio-online {
			/* background-color: #f0f4f8; */
			padding-top: 60px;    /* Padding vertical superior */
			padding-bottom: 60px; /* Padding vertical inferior */ 
		}

		#entendendo-divorcio-online h2 {
			/* Estilos padrão de h2 */
			margin-bottom: 0.5rem; /* Ajuste se usar subheadline */
		}

		/* .subheadline-h3 já foi definido antes, será aplicado aqui */

		#entendendo-divorcio-online .info-content {
			max-width: 850px; /* Isso é para desktop, no mobile pode ser 100% do container */
			margin: 0 auto;
			text-align: left;
			/* Não adicione width: 100vw aqui */
		}

		#entendendo-divorcio-online .info-content h4 {
			font-size: 1.25rem;
			color: #0c7b93; /* Cor de destaque para subtítulos internos */
			margin-top: 2rem;
			margin-bottom: 0.75rem;
			text-align: left;
		}
		/* Remove linha de H4 se herdar de H2/H3 */
		#entendendo-divorcio-online .info-content h4::after {
			content: none;
		}


		#entendendo-divorcio-online .info-content p {
			margin-bottom: 1.3rem;
			line-height: 1.75; /* Aumenta um pouco o espaçamento entre linhas para leitura */
			color: #4a4a4a;    /* Tom de cinza escuro para o texto */
			/* text-align: justify; /* Opcional: se preferir texto justificado */
		}

		#entendendo-divorcio-online .info-content ul {
			list-style-type: disc; /* Mantém bullets padrão ou pode usar o tick verde */
			padding-left: 25px;    /* Recuo padrão para a lista */
			margin-bottom: 1.5rem;
		}

		#entendendo-divorcio-online .info-content ul li {
			margin-bottom: 0.6rem;
			color: #4a4a4a;
		}

		/* Se quiser usar ticks verdes aqui também, adapte as regras do tick verde
		para #entendendo-divorcio-online .info-content ul li::before
		e adicione list-style-type: none; e padding-left:0; ao ul
		e padding-left: 28px; ao li.
		*/
		
		/* Seção Download Guia PDF */
		#download-guia {
			padding-top: 60px;
			padding-bottom: 60px;
			/* O padding lateral vem da classe .container */
		}

		#download-guia h2 {
			/* Estilos padrão de h2 */
			margin-bottom: 0.5rem;
		}

		/* .subheadline-h3 já foi definido antes, será aplicado aqui */
		
		/* NOVO: Wrapper para o background da seção de download do guia */
		.guia-section-background-wrapper {
			background-color: #ffffff;
			width: 100%; /* Garante que o wrapper ocupe toda a largura */
		}

		.guia-layout {
			display: flex;
			flex-wrap: wrap;
			gap: 3rem;
			align-items: flex-start;
			margin-top: 2.5rem;
			/* Não adicione width: 100vw aqui */
		}

		.guia-imagem-container {
			flex: 1 1 300px; /* Imagem ocupa menos espaço, base de 300px */
			max-width: 380px;  /* Ajuste a largura máxima da imagem da capa */
			/* border: 1px solid blue; /* Para debug */
		}

		.guia-capa-img {
			width: 60%;
			height: auto; /* Mantém a proporção da imagem da capa */
			display: block;
			border-radius: 8px;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada para a capa */
		}

		.guia-form-container {
			flex: 1 1 450px; /* Formulário ocupa mais espaço, base de 450px */
			/* border: 1px solid green; /* Para debug */
		}

		.guia-form-container h4 {
			font-size: 1.15rem;
			color: #0a3d62;
			margin-bottom: 1.5rem;
			line-height: 1.4;
			font-weight: 600;
		}
		.guia-form-container h4::after {
			content: none; /* Remove linha se houver herança */
		}
		
		.guia-form-container .form-required-legend {
			color: red;
			font-size: 0.85em; /* Um pouco menor que o texto normal */
			margin-bottom: 1.5rem; /* Espaço antes do primeiro campo do formulário */
			margin-top: -0.5rem; /* Aproxima um pouco do H4 acima, ajuste conforme necessário */
			font-weight: normal; /* Garante que não seja bold por herança de H4 */
			text-align: left; /* Alinha à esquerda, como os campos */
		}


		/* Estilos do Formulário */
		#form-download-guia .form-group {
			margin-bottom: 1.2rem;
		}

		#form-download-guia label {
			display: block;
			margin-bottom: 0.4rem;
			font-weight: 600;
			color: #333;
			font-size: 0.95rem;
		}
		
		/* Estilos do Formulário - Adicionar para o asterisco */
		#form-download-guia label::after {
			content: " *" !important; /* DIAGNÓSTICO */
			color: red !important;    /* DIAGNÓSTICO */
			font-weight: bold;
			font-size: 1.1em;
		}

		#form-download-guia label.checkbox-label::after {
			content: " *" !important; /* DIAGNÓSTICO - se a regra de cima funcionar, esta também deve */
			color: red !important;
		}

		#form-download-guia input[type="text"],
		#form-download-guia input[type="email"],
		#form-download-guia input[type="tel"] {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ccc;
			border-radius: 5px;
			font-size: 1rem;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			transition: border-color 0.3s ease;
		}

		#form-download-guia input[type="text"]:focus,
		#form-download-guia input[type="email"]:focus,
		#form-download-guia input[type="tel"]:focus {
			border-color: #0c7b93; /* Cor de destaque da sua paleta */
			outline: none;
			box-shadow: 0 0 0 2px rgba(12, 123, 147, 0.2);
		}

		/* Para campos lado a lado (Cidade/Estado) */
		.form-group-half {
			display: flex;
			gap: 1rem;
		}

		.form-group-half > div {
			flex: 1; /* Cada div ocupa metade do espaço disponível */
		}

		/* Checkbox de consentimento */
		#form-download-guia input[type="checkbox"] {
			margin-right: 0.5rem;
			vertical-align: middle; /* Alinha o checkbox com o texto do label */
			width: auto; /* Largura automática para checkbox */
		}

		#form-download-guia label.checkbox-label {
			display: inline; /* Para ficar ao lado do checkbox */
			font-weight: normal;
			font-size: 0.9rem;
			color: #555;
		}

		/* Botão de submit dentro do formulário */
		#form-download-guia .form-submit-button {
			margin-top: 1.5rem;
			text-align: left; /* Alinha o botão à esquerda, ou 'center' se preferir */
		}

		#form-download-guia .form-submit-button .btn {
			padding: 12px 30px; /* Botão um pouco maior */
			font-size: 1.05rem;
		}
		#form-download-guia .form-submit-button .btn i {
			margin-left: 0.5rem;
		}


		.form-privacy-notice {
			font-size: 0.85rem;
			color: #777;
			margin-top: 1rem;
			text-align: center;
		}
		
		/* Estilos para o Pop-up de "Enviando E-mail" */
		.popup-overlay {
			position: fixed; /* Cobre toda a tela */
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6); /* Fundo semi-transparente */
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 2000; /* Acima de outros elementos, como a navbar */
			opacity: 0; /* Começa invisível */
			visibility: hidden; /* Começa escondido */
			transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Transição suave */
		}

		.popup-overlay.visible {
			opacity: 1;
			visibility: visible;
			transition-delay: 0s; /* Remove o delay quando visível */
		}

		.popup-content {
			background-color: #fff;
			padding: 30px 40px;
			border-radius: 8px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
			text-align: center;
			color: #333;
			max-width: 350px;
		}

		.popup-content .fa-spinner {
			color: #0a3d62; /* Cor do ícone */
			margin-bottom: 15px;
		}

		.popup-content p {
			margin-bottom: 8px;
			font-size: 1.1rem;
			color: #555;
		}
		
		.popup-content p:last-child {
			margin-bottom: 0;
			font-size: 0.9rem;
		}
		
		/* Estilos para o Pop-up de Intenção de Saída */
		/* .popup-overlay já definido, pode ser reutilizado.
		Se quiser um fundo diferente para este, crie uma classe específica. */

		.popup-content.exit-intent-content {
			background-color: #fff;
			padding: 25px 30px 30px; /* Ajuste o padding */
			border-radius: 10px;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
			text-align: center;
			color: #333;
			max-width: 480px; /* Largura do pop-up de saída */
			width: 90%;      /* Responsivo */
			position: relative; /* Para o botão de fechar */
			max-height: 90vh; /* Evita que o popup seja maior que a tela */
			overflow-y: auto; /* Permite rolagem se o conteúdo for grande */
		}

		.popup-close-button {
			position: absolute;
			top: 10px;
			right: 15px;
			background: transparent;
			border: none;
			font-size: 2rem;
			color: #888;
			cursor: pointer;
			line-height: 1;
			padding: 0;
		}

		.popup-close-button:hover {
			color: #333;
		}

		.exit-intent-content h3 {
			color: #0a3d62;
			font-size: 1.6rem;
			margin-bottom: 0.5rem;
		}

		.exit-intent-subtitle {
			font-size: 1.05rem;
			color: #555;
			margin-bottom: 1.5rem;
			line-height: 1.5;
		}

		.guia-imagem-container-popup {
			max-width: 200px; /* Tamanho da imagem da capa dentro do pop-up */
			margin: 0 auto 1.5rem auto;
		}

		.guia-capa-img-popup {
			width: 100%;
			height: auto;
			border-radius: 6px;
			box-shadow: 0 4px 10px rgba(0,0,0,0.1);
		}
		
		/* Legenda de campo obrigatório específica para o pop-up */
		.form-required-legend-popup {
			color: red;
			font-size: 0.8em;
			margin-bottom: 1rem; /* Espaço antes do primeiro campo */
			text-align: left;
		}
		
		#form-exit-intent-guia .form-group {
			margin-bottom: 1rem;
			text-align: left;
		}

		#form-exit-intent-guia label {
			display: block;
			margin-bottom: 0.3rem;
			font-weight: 600;
			color: #333;
			font-size: 0.9rem; /* Labels um pouco menores no pop-up */
		}

		/* Asterisco para o formulário do pop-up */
		#form-exit-intent-guia label:not(.checkbox-label)::after {
			content: " *";
			color: red;
			font-weight: bold;
		}
		
		#form-exit-intent-guia input[type="text"],
		#form-exit-intent-guia input[type="email"],
		#form-exit-intent-guia input[type="tel"] {
			width: 100%;
			padding: 10px 12px; /* Padding um pouco menor */
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 0.95rem;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			transition: border-color 0.3s ease, box-shadow 0.3s ease;
		}

		#form-exit-intent-guia input[type="text"]:focus,
		#form-exit-intent-guia input[type="email"]:focus,
		#form-exit-intent-guia input[type="tel"]:focus {
			border-color: #0c7b93;
			outline: none;
			box-shadow: 0 0 0 3px rgba(12, 123, 147, 0.25);
		}

		#form-exit-intent-guia .form-group-half {
			display: flex;
			gap: 0.8rem; /* Gap menor */
		}
		
		#form-exit-intent-guia .form-group-half > div { flex: 1; }

		#form-exit-intent-guia .form-group input[type="checkbox"] {
			margin-right: 0.4rem;
			vertical-align: middle;
			width: auto; height: auto; padding: 0;
			border: 1px solid #ccc;
			appearance: checkbox; -webkit-appearance: checkbox; -moz-appearance: checkbox;
		}

		#form-exit-intent-guia label.checkbox-label {
			display: inline;
			font-weight: normal;
			font-size: 0.85rem; /* Label do checkbox menor */
			color: #555;
			margin-bottom: 0;
		}

		#form-exit-intent-guia .form-submit-button {
			margin-top: 1.2rem;
			text-align: center; /* Botão centralizado no pop-up */
		}

		#form-exit-intent-guia .form-submit-button .btn {
			padding: 10px 25px;
			font-size: 1rem;
			width: 100%; /* Botão ocupa toda a largura no pop-up */
			max-width: 300px;
		}

		/* Mensagens de feedback para o formulário do pop-up */
		#exit-form-feedback-messages {
			margin-bottom: 1rem;
			text-align: left;
		}
		
		.video-section-background-wrapper {
			background-color: #fff2d7; /* Exemplo: Cor de fundo suave (azul claro da sua paleta) */
                               /* Escolha a cor que desejar */
			width: 100%;
			/* O padding vertical será aplicado pela <section> interna */
}
		
		/* Seção Vídeo Explicativo YouTube */
		#video-explicativo-youtube {
			/* padding: 60px 0; Já definido em 'section' */
			text-align: center; /* Centraliza o H2, H3 e o wrapper do vídeo se ele tiver margem auto */
			padding-top: 50px;
			
		}

		#video-explicativo-youtube h2 {
			/* Estilos padrão de h2 */
			margin-bottom: 0.5rem; /* Ajuste se usar subheadline */
			font-size: 2.2rem;
		}



		.video-youtube-wrapper {
			position: relative;
			width: 100%;
			max-width: 854px; /* Largura máxima comum para vídeos 16:9 (ex: 480p * 16/9) ou 720p */
                     /* Ajuste conforme a largura desejada para o vídeo */
			margin: 2.5rem auto 0 auto; /* Centraliza o wrapper do vídeo e dá espaço acima */
			padding-bottom: 56.25%; /* Proporção 16:9 (9 / 16 = 0.5625 ou 56.25%) */
                             /* Para outras proporções: (altura / largura) * 100% */
			height: 0;
			overflow: hidden;
			border-radius: 8px; /* Opcional: bordas arredondadas para o vídeo */
			box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Opcional: sombra */
			
		}

		.video-youtube-wrapper iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0; /* Remove a borda padrão do iframe */
		}

		/* Ajuste para o botão de CTA abaixo do vídeo */
		#video-explicativo-youtube .cta-buttons {
			margin-top: 2.5rem; /* Espaço entre o vídeo e o botão */
		}
		
		.video-aida-text {
			max-width: 750px; /* Largura máxima para o texto AIDA */
			margin: 2rem auto 0 auto; /* Espaço acima, centralizado, sem margem inferior (o botão CTA cuidará disso) */
			padding: 0 15px; /* Padding lateral pequeno para não colar nas bordas em telas estreitas */
			text-align: center; /* Centraliza o texto */
		}

		.video-aida-text p {
			font-size: 1.3rem; /* Tamanho da fonte para o texto AIDA */
			color: #454545;    /* Cor do texto */
			line-height: 1.65;
			margin-bottom: 1rem; /* Espaço entre os parágrafos do AIDA */
			padding-bottom: 1rem;
		}

		.video-aida-text p:last-child {
			margin-bottom: 0; /* Remove margem do último parágrafo antes do botão CTA */
			font-weight: 500; /* Um pouco mais de destaque para a chamada final */
		}

		.video-aida-text strong {
			color: #0a3d62; /* Cor de destaque para palavras-chave */
		}
		
		#video-explicativo-youtube .cta-buttons {
			margin-top: 1.8rem; /* Reduzir um pouco se o texto AIDA já adicionou espaço */
		}
		
		/* Seção Divisora com Imagem de Fundo */
		.image-divider-section {
			position: relative;
			width: 100%;
			padding: 0; /* Remove o padding padrão da section, pois o overlay cuidará disso */
			min-height: 45vh; /* Altura do divisor, ajuste conforme necessário (ex: 300px, 400px, 40vh) */
    /*
        !!!! IMPORTANTE !!!!
        SUBSTITUA 'images/sua-imagem-de-fundo-divisor.jpg' PELO CAMINHO REAL DA SUA IMAGEM.
        Use uma imagem de boa qualidade e com proporção adequada para um banner.
    */
		background-image: url('images/divorcio-online3.jpg');
		background-size: cover;       /* Cobre toda a área, mantendo a proporção e cortando o excesso */
		background-position: center 20%; /* Centraliza a imagem */
		background-repeat: no-repeat;
		background-attachment: fixed; /* EFEITO PARALLAX: a imagem fica fixa enquanto a página rola */
                                  /* Remova se não quiser o efeito parallax ou se causar problemas de performance */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #fff; /* Cor padrão do texto sobre a imagem */
	}

	.image-divider-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(10, 61, 98, 0.65); /* Overlay azul escuro semi-transparente (cor primária da sua paleta) */
                                             /* Ajuste a cor e a opacidade (0.65) para garantir legibilidade do texto */
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40px 0; /* Padding interno para o conteúdo */
	}

	.image-divider-content { /* Esta div já terá a classe .container */
		position: relative; /* Garante que fique acima do overlay se necessário, mas o fluxo deve bastar */
		z-index: 2;
		/* O .container já limita a largura e centraliza horizontalmente */
	}

	.image-divider-content h2 {
		font-size: 2.2rem; /* Tamanho do título no divisor */
		color: #fff;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
		margin-bottom: 0.8rem;
	}
	
	.image-divider-content h2::after {
		content: none; /* Remove a linha do h2 padrão */
	}

	.image-divider-content p {
		font-size: 1.15rem;
		color: #f0f0f0; /* Cor clara para o parágrafo */
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1.8rem;
		line-height: 1.6;
		text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
	}

	.image-divider-content .cta-buttons .btn {
		background-color: #f0ad4e; /* Cor do botão primário */
		/* Outros estilos do .btn já são aplicados */
		/* Se precisar de um estilo diferente para o botão aqui, crie uma classe adicional */
		padding: 14px 28px; /* Botão um pouco maior */
		font-size: 1.05rem;
	}
	
	.image-divider-content .cta-buttons .btn i {
		margin-right: 8px;
	}

        /* Responsividade */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            .hero h1 {
                font-size: 2.5rem;
            }
            h2 {
                font-size: 1.8rem;
            }

            .hero {
                padding: 60px 0;
            }

            .cta-buttons {
                text-align: center;
            }

            .btn {
                padding: 10px 20px;
                font-size: 0.9rem;
                display: block;
                margin: 10px auto;
                max-width: 300px;
            }

            #como-funciona .steps,
            #por-que-escolher .features,
            #depoimentos .testimonial-grid {
                grid-template-columns: 1fr;
            }

             #e-notariado .content-split {
                 flex-direction: column;
             }
			 
			 .advogado-layout {
				/* flex-wrap-reverse já faz a imagem aparecer primeiro (order 2 no CSS)
				quando flex-direction é column */
				flex-direction: column-reverse; /* Texto abaixo da imagem no mobile */
				align-items: center; /* Centraliza os itens */
			}

			.advogado-texto {
				order: 2; /* Texto vem depois da imagem no mobile */
				text-align: center; /* Centraliza o texto no mobile */
				margin-top: 2rem; /* Espaço acima do texto quando abaixo da imagem */
			}
			.advogado-texto h3 {
				text-align: center; /* Centraliza nome do advogado */
			}
			.advogado-texto p {
				text-align: left; /* Ou mantenha justificado/left conforme preferir */
			}


			.advogado-imagem-container {
				order: 1; /* Imagem vem primeiro no mobile */
				width: 70%; /* Ajusta a largura da imagem no mobile */
				max-width: 480px; /* Limita a largura máxima */
			}

			.advogado-social-links {
				text-align: center; /* Centraliza links sociais no mobile */
			}
			.advogado-social-links a {
				margin-right: 0.5rem;
				margin-left: 0.5rem;
			}
			
			.guia-layout {
				flex-direction: column; /* Empilha no mobile */
				align-items: center;   /* Centraliza os itens */
			}

			.guia-imagem-container {
				width: 80%;       /* Define uma largura para o container da imagem (ex: 80% da tela) */
				max-width: 300px; /* Mas não maior que 300px */
				margin-left: auto;  /* Adicionado para centralizar o container se width < 100% da área do flex-item */
				margin-right: auto; /* Adicionado para centralizar o container */
				margin-bottom: 2rem;
			}
			
			.guia-capa-img {
				width: 100%; /* Imagem preenche 100% do seu .guia-imagem-container */
				height: auto;
				display: block; /* display: block já ajuda, mas margin auto no pai é mais robusto para o container */
				/* Se você quisesse a imagem menor que o container dela E centralizada: */
				/* width: 70%; */
				/* margin-left: auto; */
				/* margin-right: auto; */
				border-radius: 8px; /* Mantido de antes */
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Mantido de antes */
			}
			
			.guia-form-container {
				width: 100%; /* Formulário ocupa toda a largura no mobile */
			}

			.guia-form-container {
				width: 100%; /* Formulário ocupa toda a largura no mobile */
			}

			.form-group-half {
				flex-direction: column; /* Empilha Cidade e Estado no mobile */
				gap: 0; /* Remove o gap horizontal, o margin-bottom do form-group cuidará do vertical */
			}
			.form-group-half > div {
				margin-bottom: 1.2rem; /* Adiciona margem inferior quando empilhado */
			}
			.form-group-half > div:last-child {
				margin-bottom: 0;
			}

			#form-download-guia .form-submit-button {
				text-align: center;
			}
			#form-download-guia .form-submit-button .btn {
				width: 100%;
				max-width: 350px;
			}
			
			/* Centralizar conteúdo da seção "Entendendo o Divórcio Online" no mobile */
			#entendendo-divorcio-online .info-content {
				text-align: center; /* Centraliza os parágrafos e outros elementos inline/inline-block */
			}

			#entendendo-divorcio-online .info-content h4 {
				text-align: center; /* Centraliza os subtítulos H4 também */
				/* Se os H4 já estiverem centralizados por herança ou outra regra, isso pode ser redundante */
			}

			#entendendo-divorcio-online .info-content ul {
				/* Para listas, centralizar o texto dentro dos <li> é o mais comum.
				Se quiser centralizar o bloco da lista em si, precisaria de display: table ou inline-block e margin: auto,
				mas geralmente para listas informativas, o texto do item centralizado é suficiente. */
				padding-left: 0; /* Remove o padding para que o texto possa centralizar melhor se os itens forem curtos */
				/* list-style-position: inside; /* Se usar bullets padrão, isso ajuda na centralização */
			}

			#entendendo-divorcio-online .info-content ul li {
				text-align: center; /* Ou 'center' se quiser que cada item da lista seja centralizado.
                             'left' é mais comum para listas, mesmo que o bloco da lista esteja
                             dentro de um container centralizado. Teste o que fica melhor. */
							/* Se você estiver usando os ticks personalizados com ::before e padding-left no li,
							centralizar o texto do li pode parecer estranho. Mantenha 'left' para o texto do li
							e o bloco <ul> em si será centralizado pelo text-align: center do .info-content se
							o <ul> for display: inline-block ou similar.
							No entanto, como <ul> é block por padrão, o text-align:center do .info-content
							NÃO centralizará o bloco <ul>. Ele centralizará o TEXTO DENTRO do <ul>. */
			}

			/* Se quiser que a lista UL em si fique centralizada como um bloco: */
    
			#entendendo-divorcio-online .info-content ul {
				display: inline-block; 
				text-align: left;      
				padding-left: 0;       
				list-style-position: inside; 
			}
    

			#entendendo-divorcio-online .info-content .cta-buttons {
				text-align: center;
			}

			/* Centralizar conteúdo da seção "e-Notariado" no mobile */
			#e-notariado .text-content,
			#e-notariado .how-it-works {
				text-align: center; /* Centraliza o texto dentro desses blocos */
			}

			#e-notariado .how-it-works h3 { /* O h3 dentro de .how-it-works */
				text-align: center; /* Garante que o título da lista também centralize */
			}

			#e-notariado .how-it-works ul {
				display: inline-block; /* Para o bloco da lista poder ser centralizado pelo text-align do pai */
				text-align: left;      /* Mantém o texto dos itens da lista alinhado à esquerda */
				padding-left: 0;       /* Remove padding para os ticks personalizados funcionarem bem */
				/* Se você usa bullets padrão e não ticks, ajuste o padding-left e talvez list-style-position */
			}
    

			#advogado-responsavel .advogado-texto {
				text-align: center; /* Centraliza parágrafos e outros elementos inline dentro de .advogado-texto */
				/* order: 2; /* Você já tem isso na sua media query para esta seção, mantém */
				/* margin-top: 2rem; /* Você já tem isso, mantém */
			}

			#advogado-responsavel .advogado-texto h3 {
				text-align: center; /* Centraliza o nome do advogado */
			}

			#advogado-responsavel .advogado-texto p {
				/* Você tinha text-align: left; ou justify. Mude para center se quiser tudo centralizado.
				Se preferir manter os parágrafos justificados ou à esquerda no mobile,
				mesmo que o H3 esteja centralizado, deixe como estava ou use: */
				text-align: center; /* Ou 'justify' ou 'center' conforme preferir para os parágrafos */
			}

			#advogado-responsavel .advogado-social-links {
				text-align: center; /* Você já tem isso, mantém */
			}
			
			#advogado-responsavel .advogado-layout .cta-buttons { /* Botões de CTA específicos dos advogados */
				text-align: center; /* Garante centralização do container do botão */
			}
    
    
			#advogado-responsavel .advogado-layout .cta-buttons .btn {
				display: inline-block; 
				margin-left: auto;
				margin-right: auto;
				max-width: 280px; 
			}	

			.image-divider-section {
				min-height: 35vh; /* Altura menor no mobile */
				background-attachment: scroll; /* Desativa o parallax em mobile para melhor performance e evitar issues */
			}
			
			.image-divider-overlay {
				padding: 30px 0;
			}
			
			.image-divider-content h2 {
				font-size: 1.8rem;
			}
			
			.image-divider-content p {
				font-size: 1rem;
			}	

			.image-divider-section {
				min-height: 30vh;
			}
		
			.image-divider-content h2 {
				font-size: 1.6rem;
			}
		
			.image-divider-content p {
				font-size: 0.95rem;
			}
			
			.depoimentos-layout {
				flex-direction: column;
				align-items: center;
			}

			.depoimentos-imagem-container {
				width: 80%; /* Imagem ocupa 80% da largura da tela */
				max-width: 350px; /* Mas não mais que 350px */
				margin-bottom: 2rem;
			}

			.testimonial-grid-wrapper {
				width: 100%;
			}
			
			.top-navbar {
        /* Se o conteúdo empilhado precisar de mais altura: */
        /* min-height: auto; */ /* Permite que a altura cresça conforme o conteúdo */
        /* padding: 15px 0; */ /* Aumenta o padding vertical se necessário */
    }
		
		.navbar-container {
			flex-direction: column; /* Empilha logo e botão */
			justify-content: center; /* Centraliza verticalmente (agora na direção da coluna) */
			align-items: center;    /* Centraliza horizontalmente */
			gap: 10px; /* Espaço entre o logo e o botão quando empilhados */
			padding: 10px 0; /* Adiciona padding interno para não colar nas bordas da barra */
		}

		.navbar-logo-link {
        /* O logo já estará no topo devido ao flex-direction: column */
		}
    
		.navbar-logo-img {
			height: 45px; /* Pode reduzir um pouco mais o logo no mobile */
		}

		.navbar-cta {
		/* O botão já estará abaixo devido ao flex-direction: column */
		}
    
		.btn-navbar-cta {
			width: 100%; /* Faz o botão ocupar mais largura no mobile, se desejado */
			max-width: 280px; /* Limita a largura máxima do botão */
			text-align: center;
		}
		
		.video-aida-text p {
			font-size: 1.05rem;
		}
		
	}

        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
             .hero h1 {
                font-size: 2rem;
            }
            h2 {
                font-size: 1.6rem;
            }

            .hero p { /* Se voltar a usar o <p> no hero, este é o estilo mobile */
                 font-size: 1rem;
             }

            .container {
                padding: 0 15px;
            }

             section {
                 padding: 40px 0;
             }

             #faq summary {
                 padding: 0.8rem 1rem;
             }
              #faq summary::after {
                 right: 1rem;
                 font-size: 1.3rem;
              }
             #faq .faq-answer {
                padding: 0 1rem 1rem 1rem;
             }
			 
			 .navbar-logo-img {
				height: 40px; /* Ainda menor em telas bem pequenas */
			}
			
			.btn-navbar-cta {
				font-size: 0.85rem;
				padding: 8px 15px;
			}
			
			.video-aida-text p {
				font-size: 1rem;
			}
    
			#video-explicativo-youtube .cta-buttons {
				margin-top: 1.5rem;
			}
        }
		
		/* Responsividade para a seção de depoimentos */
		@media (max-width: 992px) {
			.depoimentos-imagem-container {
				max-width: 300px;
				min-height: 450px; /* Reduz um pouco a altura mínima em telas médias */
			}
			
			.testimonial-grid-wrapper {
				flex-basis: 480px;
			}
		}

		@media (max-width: 768px) { /* Ponto de quebra para mobile */
			

		
}