:root {

     --corEscura: #612c2c;

     --corBase: #8a3939;

     --corClara: #ac5454;

     --corLight: #f5cbcb;

     --corSuperLight: #ffe7e7;

 }

 

 * {

     margin: 0;

     padding: 0;

     box-sizing: border-box;

     font-family: 'Open Sans';

 }

 

 body,

 html {

     height: 100vh;

 }

 

 a {

     cursor: pointer;

     text-decoration: none;

 }

 

 h1 {

     margin: 0;

 }

 

 h2 {

     margin: 40px 0;

     font-weight: normal;

 }

 

 .material-symbols-outlined {

     font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24

 }

 

 .cheio {

     font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48

 }

 /* ************************************** */

 

 section {

     position: relative;

 }

 

 section .conteudo {

     width: 80%;

     margin: auto;

     display: flex;

     align-items: center;

     justify-content: space-between;

 }

 

 section .el-1 {

     width: 80%;

 }

 

 section .titulo {

     font-size: 60px;

 }

 

 @media(max-width:990px) {

     section .conteudo {

         width: 90%;

         flex-direction: column;

     }

     section .titulo {

         font-size: 45px;

     }

 }

 /*  */

 

 .a-direita {

     text-align: right;

 }

 

 .pad-100 {

     padding: 100px 0;

 }

 /*  */

 

 .corEscura {

     color: var(--corEscura);

 }

 

 .corBase {

     color: var(--corBase);

 }

 

 .corClara {

     color: var(--corClara);

 }

 

 .corLight {

     color: var(--corLight);

 }

 

 .corSuperLight {

     color: var(--corSuperLight);

 }

 /*  */

 

 .bg-gradiente {

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     z-index: -1;

     margin: 0;

     padding: 0;

     overflow: hidden;

 }

 

 .bg-gradiente img {

     width: 100%;

     height: 100%;

 }

 

 .bg-gradiente::before {

     content: "";

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background: linear-gradient(to right, white 30%, transparent);

 }

 /*  */

 /* ************************************** */

 

 header {

     width: 100%;

     height: 90px;

     position: fixed;

     padding: 0 10%;

     display: flex;

     justify-content: space-between;

     align-items: center;

     background-image: linear-gradient(to bottom, #FFFFFF 70%, transparent);

     z-index: 100;

 }

 

 header.scrolled {

     background-color: white;

     box-shadow: 0 0 5px #ccc;

 }

 

 header #logo {

     height: 40px;

 }

 

 header #ico-menu,

 header #ico-person {

     display: none;

 }

 

 header nav ul {

     list-style: none;

 }

 

 header nav ul li {

     display: flex;

 }

 

 header nav ul li a {

     color: gray;

     padding: 10px 20px;

     &:hover {

         background-color: #dddddd;

         color: black;

         border-radius: 10px;

         transition: all 0.5s;

     }

 }

 

 @media(max-width:990px) {

     header {

         padding: 0 10px;

         position: fixed;

         height: 70px;

     }

     header #logo {

         height: 30px;

     }

     header #ico-person {

         width: 35px;

         height: 35px;

         position: absolute;

         top: 15px;

         right: 65px;

         display: flex;

         align-items: center;

         justify-content: center;

         border-radius: 20px;

         background-color: var(--corClara);

         color: var(--corLight);

         z-index: 300;

     }

     header #ico-person .material-symbols-outlined {

         font-size: 35px;

     }

     header #ico-menu {

         display: block;

         position: absolute;

         top: 15px;

         right: 10px;

         z-index: 300;

         font-size: 40px;

     }

     header nav {

         position: fixed;

         top: 60px;

         right: 10px;

         background-color: white;

         opacity: 0;

         visibility: hidden;

         pointer-events: none;

         /* Impede interação enquanto invisível */

         transition: opacity 0.5s ease, visibility 0s 0.5s, pointer-events 0s 0.5s;

     }

     header nav.show {

         border-radius: 10px 0 10px 10px;

         box-shadow: 0 0 10px gray;

         opacity: 1;

         visibility: visible;

         pointer-events: auto;

         /* Permite interação quando visível */

         transition: opacity 0.5s ease, visibility 0s 0s, pointer-events 0s 0s;

     }

     header nav ul li {

         flex-direction: column;

     }

 }

 /* ************************************** */

 

 #main {

     width: 100%;

     height: 100%;

     display: flex;

     align-items: center;

     justify-content: center;

 }

 

 #iconeLogo {

     width: 150px;

 }

 

 @media (max-width:990px) {

     #iconeLogo {

         width: 30%;

     }

 }

 /* ************************************** */

 

 #apresentacao {

     padding-top: 90px;

     height: 100vh;

     display: flex;

     align-items: center;

     justify-content: space-between;

     position: relative;

     z-index: 1;

 }

 

 #apresentacao .chamada {

     color: var(--corBase);

 }

 

 #apresentacao h1 {

     font-size: 70px;

     font-weight: 700;

 }

 

 #apresentacao h2 {

     margin: 40px 0;

     font-weight: normal;

 }

 

 #apresentacao .conteudo>div {

     width: 50%;

 }

 

 #apresentacao .conteudo>div:nth-child(2) {

     text-align: center;

 }

 

 @media(max-width:990px) {

     #apresentacao {

         flex-direction: column;

         padding: 90px 20px 20px 20px;

         height: 100%;

     }

     #apresentacao h1 {

         font-size: 45px;

         line-height: 45px;

     }

     #apresentacao h2 {

         margin: 25px 0;

         font-size: 20px;

     }

     #apresentacao img {

         width: 100%;

     }

     #apresentacao .conteudo>div {

         width: 100%;

         margin-bottom: 20px;

     }

 }

 /* ************************************** */

 

 .btn {

     padding: 10px 30px;

     background-color: var(--corBase);

     color: white;

     border-radius: 20px;

     cursor: pointer;

     &:hover {

         background-color: var(--corClara);

         box-shadow: 0 0 10px 10px var(--corLight);

         transition: all 1s ease;

     }

 }

 

 .btn-2 {

     padding: 10px 30px;

     background-color: transparent;

     color: black;

     border: 2px solid var(--corBase);

     border-radius: 20px;

     cursor: pointer;

     &:hover {

         color: white;

         box-shadow: none;

         transition: all 0.5s ease;

     }

 }

 

 #btns {

     display: flex;

 }

 

 #tel {

     font-weight: 900;

     font-size: 30px;

     margin-left: 20px;

     display: flex;

     align-items: center;

     color: gray;

 }

 

 #tel .material-symbols-outlined {

     font-size: 30px;

     margin-right: 10px;

 }

 

 #tel .fa,

 #tel .fab {

     font-size: 30px;

     margin-right: 10px;

 }

 

 @media(max-width:990px) {

     #btns,

     .btn-2 {

         display: none;

     }

 }

 /* ************************************** */

 /* PLANOS */

 

 .plano {

     background-color: #fff;

     border: 1px solid #ddd;

     border-radius: 10px;

     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

     width: 30%;

     padding: 20px;

     text-align: center;

     position: relative;

     &:hover {

         background-color: #dfdfdf;

         color: #000;

         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);

     }

 }

 

 .plano.popular {

     /* background-color: #df8f8f; */

     background-image: url(cdn/img/bg11.jpg);

     color: #000;

     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);

     &:hover {

         background-image: none;

         background-color: #dfdfdf;

         color: #000;

         box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);

     }

 }

 

 .plano.popular .badge {

     position: absolute;

     top: -10px;

     left: 50%;

     transform: translateX(-50%);

     background-color: #fff;

     color: var(--corBase);

     padding: 5px 10px;

     border-radius: 5px;

     font-size: 0.9em;

     font-weight: bold;

     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

 }

 

 .plano h3 {

     font-size: 1.5em;

     margin: 0 0 10px;

     color: var(--corBase);

 }

 

 .plano .price {

     font-size: 2.5em;

     font-weight: bold;

     margin: 10px 0;

 }

 

 .plano .price span {

     font-size: 0.5em;

     font-weight: normal;

 }

 

 .plano .description {

     font-size: 0.9em;

     color: white#555;

     margin: 10px 0 20px;

 }

 

 .plano hr {

     border: none;

     border-top: 1px solid #ddd;

     margin: 20px 0;

 }

 

 .plano ul {

     list-style: none;

     padding: 0;

     margin: 0;

     text-align: left;

 }

 

 .plano ul li {

     margin: 10px 0;

     font-size: 0.9em;

 }

 

 .plano button {

     background-color: var(--corBase);

     color: #fff;

     border: none;

     border-radius: 5px;

     padding: 10px 20px;

     font-size: 1em;

     cursor: pointer;

     margin-top: 20px;

     &:hover {

         background-color: var(--corEscura);

     }

 }

 

 .plano.popular button {

     background-color: #fff;

     color: var(--corBase);

     &:hover {

         background-color: var(--corBase);

         color: white;

     }

 }

 

 .div-80 {

     width: 80%;

     padding: 50px 0;

     display: flex;

     justify-content: space-between;

     margin: auto;

 }

 

 @media(max-width:990px) {

     .div-80 {

         flex-direction: column;

     }

     .plano {

         width: 100%;

         margin-bottom: 30px;

     }

 }

 /* ************************************* */

 

 #sessao-3 {

     display: flex;

     height: 100vh;

 }

 

 #sessao-3 .image-background {

     flex: 1;

     background-image: url('/cdn/img/fale-conosco.jpg');

     background-size: cover;

     background-position: center;

     background-repeat: no-repeat;

 }

 /*  */

 

 #sessao-3 .contact-form {

     background: white;

     padding: 2rem;

     border-radius: 10px;

     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

     width: 100%;

     max-width: 400px;

 }

 

 #sessao-3 .contact-form h2 {

     margin-bottom: 1.5rem;

     font-size: 1.5rem;

     color: #333;

 }

 

 #sessao-3 .form-group {

     margin-bottom: 1rem;

 }

 

 #sessao-3 .form-group label {

     display: block;

     margin-bottom: 0.5rem;

     color: #555;

 }

 

 #sessao-3 .form-group input,

 #sessao-3 .form-group textarea {

     width: 100%;

     padding: 0.75rem;

     border: 1px solid #ddd;

     border-radius: 5px;

     font-size: 1rem;

 }

 

 #sessao-3 .form-group textarea {

     resize: vertical;

 }

 

 #sessao-3 button {

     width: 100%;

     padding: 0.75rem;

     background-color: var(--corBase);

     color: white;

     border: none;

     border-radius: 5px;

     font-size: 1rem;

     cursor: pointer;

     transition: background-color 0.3s ease;

 }

 

 #sessao-3 button:hover {

     background-color: var(--corEscura);

 }

 /* ************************************ */

 

 footer {

     /* display: flex;

            justify-content: space-between; */

     padding: 2rem;

     background-color: #333;

     color: white;

 }

 

 footer .conteudo {

     display: flex;

     width: 80%;

     margin: auto;

 }

 

 .footer-column {

     flex: 1;

     margin: 0 1rem;

 }

 

 .footer-column h3 {

     margin-bottom: 1rem;

     font-size: 1.25rem;

     color: #fff;

 }

 

 .footer-column ul {

     list-style: none;

     padding: 0;

 }

 

 .footer-column ul li {

     margin-bottom: 0.75rem;

 }

 

 .footer-column ul li a {

     color: #ccc;

     text-decoration: none;

     transition: color 0.3s ease;

 }

 

 .footer-column ul li a:hover {

     color: #fff;

 }

 

 .footer-column img {

     max-width: 100%;

     height: auto;

     display: block;

     margin: 0 auto;

 }

 

 @media (max-width:990px) {

     footer .conteudo {

         flex-direction: column;

     }

 }