
/*
	[ --- MapaTecnologias --- ]
	info@mapatecnologias.pt
	License: free
*/


:root {
	--fonte-cursiva: 'Comforter', cursive;
	--tamanho-h1: 1.5em;
    --tamanho-h1-cursiva: 1.7em;
	
	--cor-base: #FFFFFF;
	--cor-primaria: #197519; 	/* Verde escuro */
	--cor-media: #8ac28a; 		/* Verde media */
	--cor-secundaria: #c6e7c6;	/* Verde claro #5E9E5E */
	
		/* laranja 1 		#ffa500; #ffc04c; */
		/* laranja Claro 	#E48529; #F79D40; */
		/* Tom amarelo 		#FDBF0F; #FDD257; */
		/* azul Escura: #1a73e8 média: #d0e3ff Clara: #f0f7ff */
	
}



/* Header */	
	
	/*  #header {
		border-bottom: solid 2px; */ /* rever
	}  */

	/* fonte-default */
	#header > h1 {
		font-size: var(--tamanho-h1);
		/* color: var(--cor-primaria) !important;  */		
	}

	/* fonte-cursiva */
	#header > h1 a.h1-titulo {
		font-family: var(--fonte-cursiva);
		font-size: 2.5em;
		/* color: var(--cor-primaria);  */		
	}
	
		@media screen and (max-width: 980px) {
			#header {
				height: auto !important;
			}
		}
	
		@media screen and (max-width: 410px) {
			#header {
				height: auto !important;
			}
		
			#header > h1 a.h1-titulo {
				font-size: 1.75em;
			}
		}
	
	
	
/* Header EXTRAS - Alterar cor da barra  */ 
	
	/* Define cor do botão [menu] */
	#header > a[href="#menu"] {
		color: auto;
	}
	
	/* Define cor do botão [menu] - Após scroll  */ 
	#header.reveal:not(.alt) > a[href="#menu"] {
		background-color: transparent;
		color: auto;
	}

	/* Define cor da barra topo */
	/* #header {
		background-color:transparent; 
		transition: background-color 0.3s ease;
	} */
	
	/* Define cor da barra topo - Após scroll */
	/* #header.reveal:not(.alt) {
		background-color: green;
		border-width: 2px;
		border-color: white;
	} */



	
/* Menu */
	
	/* Definições ahref do blog e loja */
	.blog-loja {
		text-align:center;
	}
	
	/* Definicoes Botão barra menu */
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		padding: 0 0.8em; /* 1825 */
	}
	
	input[type="submit"].primary,
	input[type="reset"].primary,
	input[type="button"].primary,
	button.primary,
	.button.primary {
		background-color: var(--cor-primaria);
	}
	
		input[type="submit"].primary:hover,
		input[type="reset"].primary:hover,
		input[type="button"].primary:hover,
		button.primary:hover,
		.button.primary:hover {
			background-color: var(--cor-media);
		}
	
	#menu {
		background-color: #303639;
	}

	#menu.visible {
		background-color: #303639;
		color: white;
	}

	.button-tel {
		background-color: #FFFFFF;
		/* border: 1px solid #a7f3d0 
		box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.2); */
	}		

	.button-tel:hover {
		background-color: #E5E5E5;
	}
	
	/* Definicoes menu > sub-menu */
	#menu ul.links1 {
		list-style: none !important;
		padding: 0;
		background-color: rgba(0, 0, 0, 0.1); /* Fundo ligeiramente diferente */
	}

		#menu ul.links1 > li {
			padding: 0;
		}

		#menu ul.links1 > li > a:not(.button) {
			border: 0;
			border-top: solid 1px rgba(144, 144, 144, 0.15);
			color: inherit;
			display: block;
			line-height: 3em; /* Altura menor que o menu principal */
			text-decoration: none;
			padding-left: 2em; /* Indentação para mostrar hierarquia */
			font-size: 0.9em; /* Texto ligeiramente menor */
			opacity: 0.85; /* Leve transparência */
		}

		#menu ul.links1 > li > a:not(.button):hover {
			opacity: 1;
			padding-left: 2.5em; /* Efeito ao passar o rato */
			transition: all 0.2s ease;
		}

		#menu ul.links1 > li > .button {
			display: block;
			margin: 0.5em 0 0 0;
		}

		#menu ul.links1 > li:first-child > a:not(.button) {
			border-top: 0 !important;
		}
	
	

/* Banner */ 
	
	/* Alterar cor bottão do banner */
	#banner input[type="submit"].primary,
	#banner input[type="reset"].primary,
	#banner input[type="button"].primary,
	#banner button.primary,
	#banner .button.primary {
			background-color: var(--cor-primaria);
		}

			#banner input[type="submit"].primary:hover,
			#banner input[type="reset"].primary:hover,
			#banner input[type="button"].primary:hover,
			#banner button.primary:hover,
			#banner .button.primary:hover {
					background-color: var(--cor-media);
				}
	
	/* Alterar imagem banner */ 
	#banner {
    position: relative;

    /* Imagem + overlay escuro REAL */
    background-image:
        linear-gradient(
            to top,
            rgba(32, 38, 45, 0.55),
            rgba(32, 38, 45, 0.55)
        ),
        url("../../images/banner.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

	
/* Icon */ 
	.icon.major:before {
			color: var(--cor-primaria);
		}
		

/* Imagem */ 
	
	.image img {
		border-radius: 10px;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	}
	
	/* Adiciona Margem ao blockquote */
	.image.left ~ blockquote {
		overflow: hidden;
	}
	
	
	/* Adiciona Margem a lista */
	/* .image.left ~ ul {
		overflow: hidden;
	} */

		
/* main */ 
	ul {
		list-style: inside;
		list-style-type: circle;
	}	

	.lista-check {
		margin-top: 1rem;
		list-style: none;
	}

		.lista-check li::before {
			content: "✓ ";
			margin-right: 0.4em; /* ajuste o valor conforme necessário */
		}
		
	#main.fundo {
		background: #F7F7F7;
		border-bottom: none;		 
	}
		
		#main > header {
			background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg");
			background-image: -webkit-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg");
			background-image: -ms-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg");
			background-image: linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg");
		}

/* Breadcrumb */		
	ul.breadcrumb {
		padding: 10px 16px;
		list-style: none;
		background-color: #eee; /* #eee */
	}
		ul.breadcrumb li {
			display: inline;
			font-size: 1em;
		}
		ul.breadcrumb li+li:before {
			padding: 8px;
			color: black;
			content: "/\00a0";
		}
		ul.breadcrumb li a {
			color: var(--cor-primaria);
			text-decoration: none;
		}
		ul.breadcrumb li a:hover {
			color: var(--cor-media);
			text-decoration: underline;
		}

/* Filtros JS */  
			.filter-section {
				text-align: center;
				margin-bottom: 50px;
			}

			.filter-section h3 {
				color: #333;
				margin-bottom: 20px;
				font-size: 18px;
			}

			.filter-buttons {
				display: flex;
				justify-content: center;
				gap: 15px;
				margin-bottom: 40px;
				flex-wrap: wrap;
			}

			[data-filter-btn] {
				border: 2px solid var(--cor-primaria);
				background: white;
				color: #1a5f3d;
				border-radius: 18px;
				cursor: pointer;
				transition: all 0.3s ease;
				font-weight: 600;
				font-size: 0.7em;
			}

			[data-filter-btn]:hover {
				background-color: #f0f0f0;
			}

			[data-filter-btn].active {
				background-color: var(--cor-primaria); /* #1a5f3d */
				color: white !important;
			}


/* Features */
	
	.features section {
		border-radius: 20px; /* 20px */
		padding: 2em 2em 1em 2em ;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	}

		
	
	/* CARD Opção 2: Esconder + reduzir espaço vertical */
	/* ver ficheiro CARD Opção 2.css */
	
	
/* Wrapper */	
	.wrapper.style1 {
		border-radius: 20px;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
		margin: 10px;
	}
	

	/* Features 1 */	
	.features.features1 section {
			width: calc(100% - 1em);
	}
	
		@media screen and (max-width: 980px) {
			.features.features1 section {
				width: 100%;
			}
		}
		
		@media screen and (max-width: 736px) {
			.features.features1 section {
				width: 100%;
			}
		}
		
		@media screen and (max-width: 480px) {
			.features.features1 section {
				width: 100%;
			}
		}
		
	.wrapper-per h3, 
	.wrapper-per h4,
	.wrapper-per b {
		font-weight: bold;
	}

	.anchor-target strong, b {
		font-weight: bold;
	}


/* Modalidades */
	.gradient h2,
	.gradient h3 {
		color: var(--cor-primaria);
	}
			
	.esquerda,
	.direita {
		border-radius: 20px;
		padding: 2em 2em 1em 2em;
		box-shadow: 
			0 -10px 20px rgba(0, 0, 0, 0.15),
			10px 20px 40px rgba(0, 0, 0, 0.1);
	}
			
	
		.inner .esquerda span.image.left img {
			mix-blend-mode: multiply;
			box-shadow: none;
		}
						
		.inner .direita span.image.right img {
			mix-blend-mode: multiply;
			box-shadow: none;
		}

		.direita p strong, 
		.direita ul li strong {
			color: black;
		}
			
		.esquerda p strong, 
		.esquerda ul li strong {
			color: black;
		}
			
	.servicos-adicionais {
		background: linear-gradient(135deg, #fff5e6 0%, #fff 100%);
		border-left: 5px solid #ff9800;
		padding: 30px;
		border-radius: 8px;
	}

		.servicos-adicionais h3 {
			color: #ff9800;
			font-size: 1.5em;
			margin-bottom: 15px;
		}

		.servicos-adicionais p {
			color: #666;
			font-size: 1.05em;
			line-height: 1.7;
		}
	
	
	/* Features 1-in */	
	.features.features1-in section {
		width: calc(100% - 1em);
		box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.1);	 
	}
	
		@media screen and (max-width: 980px) {
			.features.features1-in section {
				width: 100%;
			}
		}
		
		@media screen and (max-width: 736px) {
			.features.features1-in section {
				width: 100%;
			}
		}
		
		@media screen and (max-width: 480px) {
			.features.features1-in section {
				width: 100%;
			}
		}
	
	
	/* Features 4 */
	.features4 {
		width: 100%;
	}
	
		.features4 section {
			width: calc(25% - 1em);
			padding: 2em 1em 0.5em 1em ;		
		}

		@media screen and (max-width: 980px) {
			.features4 section {
				width: calc(33.33333% - 1em);
			}
		}

		@media screen and (max-width: 736px) {
			.features4 section {
				width: calc(50% - 1em);
			}
		}

		@media screen and (max-width: 480px) {
			.features4 section {
				width: 100%;
			}
		}
 	
/* Methodology */
	/* .methodology-content {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .methodology-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        } */
        
		.methodology-item {
            padding: 0.8rem 1.5rem;
            border-radius: 30px;
			border: 1px solid var(--cor-media);
            font-size: 0.9rem;
			position: relative;
            display: inline-block;
            cursor: pointer;
			/* background-color: var(--cor-secundaria); */
			background: var(--cor-base); 
            color: var(--cor-primaria);
        }
        
		.tooltip {
            visibility: hidden;
			background-color: #333;
            color: white;
			border-radius: 6px;
			padding: 8px 12px;
			position: absolute;
			z-index: 1;
			opacity: 0;
			transform: translateX(-50%);
			top: 100%;
			left: 65%;
			margin-left: -65px;
        }

		.methodology-item:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

/* Marcas */
	.marcas-lista {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            list-style: none;
            margin-bottom: 30px;
        }
        
        .marca-item {
            background-color: var(--cor-secundaria); /* #f0f7ff */
            padding: 12px 20px;
            border-radius: 30px;
            font-weight: 500;
            color: var(--cor-primaria); /* #1a73e8 */
            border: 1px solid var(--cor-media); /* #d0e3ff */
            transition: all 0.3s ease;
        }
        
        .marca-item:hover {
            background-color: var(--cor-primaria); /* #1a73e8 */
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(26, 115, 232, 0.2);
        }

	
/* Mostra 100px antes da tag id */
	.anchor-target::before {
		content: '';
		display: block;
		height: 100px;
		margin-top: -100px;
		visibility: hidden;
	}


/* Especialidades-box */
	.especialidades-box {
		width: 100%;
		text-align: center;	
		margin-bottom: 1.2rem;		
	}
	
		.especialidades-classe {
			list-style-type: none;
			text-align: center;
			padding: 0; /* Remove o padding padrão */
			margin: 0;  /* Remove a margem padrão */
		}
	
		/* Garantir que as colunas se comportem bem em mobile */
		@media screen and (max-width: 736px) {
			.row > .especialidades-box {
				width: 50%; /* 2 caixas por linha em mobile */
				padding: 0 0.5rem;
			}
		}

		@media screen and (max-width: 480px) {
			.row > .especialidades-box {
				width: 100%; /* 1 caixa por linha em ecrãs muito pequenos */
				padding: 0 0.5rem;
			}
		}

/* Footer */	
	.footer-titulo {
		font-family: var(--fonte-cursiva);
		font-size: 2em ;
		color: var(--cor-base);
		text-shadow: 2px 2px 5px #BCBCBC;
	}
	
	#footer {
		background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner-rodape.jpg");
		background-image: -webkit-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner-rodape.jpg");
		background-image: -ms-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner-rodape.jpg");
		background-image: linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner-rodape.jpg");
	}


 
/* Eliminar a classe rever na verão final */
.rever {
	background-color: yellow;	
}