/* componentes */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Space Grotesk", sans-serif;
font-weight: 400;
}
body.hidden-scrolling {
overflow-y: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
p {
font-size: 0.9rem;
color: #424242;
line-height: 1.6;
margin-bottom: 16px;
}
.pt-100 {
padding-top: 100px;
}
@media (max-width: 991px) {
.pt-100 {
padding-top: 50px;
}
}
.pb-100 {
padding-bottom: 100px;
}
@media (max-width: 991px) {
.pb-100 {
padding-bottom: 50px;
}
}
.section-padding {
padding-top: 100px;
padding-bottom: 100px;
}
@media (max-width: 991px) {
.section-padding {
padding-top: 50px;
padding-bottom: 50px;
}
}
@media (max-width: 767px) {
.o1 {
order: 1;
}
.o2 {
order: 2;
}
}
@media (max-width: 767px) {
.centraliza-responsivo {
text-align: center;
}
}
.mapsite i {
color: #987200;
}
.mapsite-link {
display: inline-block;
color: #424242;
transition: 0.5s;
line-height: 2;
}
.mapsite-link::first-letter {
text-transform: uppercase;
}
.mapsite-link:hover {
color: #ffbf00;
}
.header {
position: relative;
width: 100%;
left: 0;
top: 0;
z-index: 99;
}
.header .header-info {
display: block;
background: #ffbf00;
padding: 8px;
}
@media (max-width: 767px) {
.header .header-info {
display: none;
}
}
.header .header-info .social-item {
background: #ffffff;
margin-right: 16px;
color: #ffbf00;
transition: 0.5s;
padding: 5px;
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
}
.header .header-info .social-item i {
display: flex;
align-items: center;
justify-content: center;
}
.header .header-info .contact-link {
font-size: 0.8rem;
color: #ffffff;
margin-right: 32px;
}
.header .header-info .contact-link i {
margin-right: 5px;
}
.header .header-main {
background-color: #ffffff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-radius: 4px;
}
.header .nav-menu {
padding: 0 15px;
}
.header .menu .menu-item {
display: inline-block;
margin-left: 30px;
position: relative;
}
.header .menu .menu-item a {
display: block;
padding: 12px 0;
font-size: 1rem;
font-weight: 500;
color: #424242;
transition: all 0.3s ease;
}
.header .menu .menu-item a:hover {
color: #987200;
}
.header .menu .menu-item .sub-menu {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 220px;
position: absolute;
left: 0;
top: 100%;
background-color: #ffffff;
padding: 10px 0;
border-top: 3px solid #987200;
transform: translateY(10px);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.header .menu .menu-item .sub-menu .menu-item {
display: block;
margin: 0;
}
.header .menu .menu-item .sub-menu .menu-item a {
display: block;
padding: 10px 20px;
font-size: 0.9rem;
color: #424242;
transition: all 0.3s ease;
}
.header .menu .menu-item .sub-menu .menu-item a:hover {
color: #987200;
}
.header .menu .menu-item-has-children:hover .sub-menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.header .open-nav-menu {
height: 34px;
width: 40px;
margin-right: 15px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
color: #987200;
}
.header .open-nav-menu span {
display: block;
height: 2px;
width: 30px;
background-color: #003ea4;
position: relative;
}
.header .open-nav-menu span::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: #003ea4;
box-sizing: border-box;
top: -7px;
}
.header .open-nav-menu span::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
background-color: #003ea4;
box-sizing: border-box;
top: 7px;
}
.header .close-nav-menu {
width: 100%;
cursor: pointer;
display: none;
align-items: center;
justify-content: end;
padding: 15px;
}
.header .close-nav-menu i {
color: #ffffff;
font-size: 22px;
}
.header .menu-overlay {
position: fixed;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
@media (max-width: 991px) {
.header .menu-overlay.active {
visibility: visible;
opacity: 1;
}
.header .nav-menu {
position: fixed;
right: -280px;
visibility: hidden;
width: 280px;
height: 100%;
top: 0;
overflow-y: auto;
background-color: #ffbf00;
z-index: 1000;
padding: 15px 0;
transition: all 0.5s ease;
}
.header .nav-menu.open {
visibility: visible;
right: 0px;
}
.header .menu .menu-item {
display: block;
margin: 0;
}
.header .menu .menu-item a {
color: #ffffff;
padding: 12px 15px;
border-bottom: 1px solid rgba(0, 96, 255, 0.14);
}
.header .menu .menu-item .sub-menu {
width: 100%;
position: relative;
opacity: 1;
visibility: visible;
border: none;
background-color: transparent;
box-shadow: none;
transform: translateY(0px);
padding: 0px;
left: auto;
top: auto;
max-height: 0;
overflow: hidden;
}
.header .menu .menu-item .sub-menu .menu-item a {
padding: 12px 45px;
color: #ffffff;
border-bottom: 1px solid rgba(0, 96, 255, 0.14);
}
.header .menu .menu-item-has-children a {
display: flex;
justify-content: space-between;
align-items: center;
}
.header .menu .menu-item-has-children:hover .sub-menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.header .close-nav-menu,
.header .open-nav-menu {
display: flex;
}
}
.img-logo {
max-width: 150px;
}
@media (max-width: 991px) {
.img-logo {
max-width: 130px;
}
}
.container-menu {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container-menu {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-menu {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-menu {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container-menu {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-menu {
max-width: 1320px;
}
}
.banner {
background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
.banner .title small {
color: #ffffff;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
bottom: 8px;
}
.banner .title small::before {
content: "";
position: absolute;
bottom: -5px;
width: 30px;
height: 1px;
background: #01caf9;
}
.banner .title h1 {
color: #ffffff;
font-weight: 700;
font-size: 60px;
line-height: 1.2;
margin-bottom: 16px;
letter-spacing: 1px;
}
@media (max-width: 767px) {
.banner .title h1 {
font-size: 2.5em;
}
}
.banner .title p {
color: #d7d7d7;
margin-bottom: 16px;
}
@media (max-width: 767px) {
.banner .title p {
font-size: 0.8rem;
}
}
.banner .title a {
display: inline-block;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
padding: 13px 40px;
color: #ffffff;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 12px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.banner .title a::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.banner .title a:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
border-color: rgba(255, 255, 255, 0.3);
}
.banner .title a:hover::before {
left: 100%;
}
.banner .title a i {
margin-left: 8px;
transition: transform 0.3s ease;
}
.banner .title a:hover i {
transform: translateX(5px);
}
@media (max-width: 767px) {
.banner .title a {
padding: 13px 30px;
font-size: 0.8rem;
}
}
@media (max-width: 767px) {
.banner .title {
text-align: center;
}
}
@media (max-width: 991px) {
.banner .title {
padding: 100px 0;
}
}
.banner .container {
height: 100%;
display: flex;
align-items: center;
}
.banner .row {
width: 100%;
align-items: center;
}
@media (max-width: 767px) {
.banner img {
display: none;
}
}
html {
scroll-behavior: smooth;
}
/* ===== ABOUT SECTION STYLES ===== */
.about-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
overflow: hidden;
}
.about-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.about-section::after {
content: "";
position: absolute;
top: 50%;
left: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 191, 0, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
}
.about-section .container {
position: relative;
z-index: 2;
}
.about-image-wrapper {
position: relative;
}
.about-image-container {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.about-image-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
z-index: 1;
}
.about-image {
width: 100%;
height: 500px;
object-fit: cover;
transition: transform 0.6s ease;
}
.about-image-container:hover .about-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
padding: 2rem 1.5rem 1.5rem;
z-index: 2;
}
.overlay-content {
display: flex;
align-items: center;
gap: 0.75rem;
color: #ffffff;
}
.overlay-content i {
font-size: 1.5rem;
color: #ffbf00;
}
.overlay-content span {
font-weight: 600;
font-size: 1rem;
}
.about-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}
.about-content .section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 191, 0, 0.4);
}
.about-content .section-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.about-content .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 2rem;
line-height: 1.2;
}
.about-content .section-title .highlight {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.about-content .section-title .highlight::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.about-content .about-description .lead-text {
font-size: 1.25rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 2.5rem;
font-weight: 500;
}
.about-content .about-description .lead-text strong {
color: #ffbf00;
font-weight: 700;
}
.achievements-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.achievement-item {
background: #ffffff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.achievement-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.achievement-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(255, 191, 0, 0.3);
}
.achievement-icon i {
color: #ffffff;
font-size: 1.25rem;
}
.achievement-content {
flex: 1;
}
.achievement-content h4 {
font-size: 1.125rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.achievement-content p {
color: #757575;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.achievement-content p strong {
color: #ffbf00;
font-weight: 700;
}
.about-cta .cta-text {
font-size: 1.1rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 2rem;
}
.about-cta .cta-text strong {
color: #ffbf00;
font-weight: 700;
}
.about-cta .btn-about {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(255, 191, 0, 0.4);
transition: all 0.3s ease;
border: 3px solid transparent;
}
.about-cta .btn-about:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(255, 191, 0, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.about-cta .btn-about i {
transition: transform 0.3s ease;
}
.about-cta .btn-about:hover i {
transform: translateX(5px);
}
@media (max-width: 767px) {
.about-section {
padding: 3rem 0;
}
.about-section .section-title {
font-size: 2.5rem;
}
.about-section .lead-text {
font-size: 1.1rem;
}
.about-image {
height: 350px;
}
.achievements-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.achievement-item {
padding: 1.25rem;
}
}
@media (max-width: 991px) {
.about-section {
padding: 4rem 0;
}
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.about-section {
padding: 5rem 0;
}
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.about-section {
will-change: transform;
}
.achievement-item {
will-change: transform;
}
@media print {
.about-section {
background: white;
padding: 2rem 0;
}
.achievement-item {
box-shadow: none;
border: 1px solid #ddd;
}
.achievement-item:hover {
transform: none;
}
.image-overlay {
display: none;
}
}
.service-area {
background: #f6f9fe;
}
.service-area .card-service {
background-color: #ffffff;
border-radius: 8px;
transition: 0.3s;
}
.service-area .card-service img {
position: relative;
width: 100%;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.service-area .card-service .content {
position: relative;
}
.service-area .card-service .content .icon-service {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: -60px;
}
.service-area .card-service .content .icon-service i {
display: flex;
align-items: center;
justify-content: center;
background: #ffbf00;
color: #ffffff;
font-size: 36px;
height: 110px;
width: 110px;
border-radius: 50%;
border: 15px solid #ffffff;
}
.service-area .card-service .content .text-service {
padding: 20px;
position: relative;
text-align: center;
}
.service-area .card-service .content .text-service h3 {
color: #1e1e1e;
font-size: 1.4rem;
font-weight: 800;
margin-top: 40px;
}
.service-area .card-service .content .text-service p {
font-weight: 300;
}
.service-area .card-service .content .text-service span {
border: none;
display: block;
background: transparent;
color: #e8ae01;
margin: 0 auto;
font-weight: 600;
}
.service-area .card-service .content .text-service span i {
margin-left: 8px;
}
.service-area .card-service:hover {
background: #ffbf00;
}
.service-area .card-service:hover .content .text-service h3 {
color: #ffffff;
}
.service-area .card-service:hover .content .text-service p {
color: #e1e1e1;
}
.service-area .card-service:hover .content .text-service span {
color: #987200;
}
.feedback-area {
background: #987200;
position: relative;
display: block;
overflow: hidden;
}
.feedback-area .before-one {
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
border-radius: 50%;
border: 35px solid rgba(255, 255, 255, 0.18);
background: #ffbf00;
}
@media (max-width: 767px) {
.feedback-area .before-one {
width: 200px;
height: 200px;
top: -90px;
}
}
.feedback-area .subtitle small {
color: #ffffff;
}
.feedback-area .subtitle h2 span {
color: #ffffff;
}
@media (max-width: 991px) {
.feedback-area .subtitle {
text-align: center;
}
}
.feedback-area .card-feedback {
padding: 10px;
}
.feedback-area .card-feedback .text-feedback {
background: #fff;
padding: 15px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
position: relative;
right: -10px;
}
.feedback-area .card-feedback .text-feedback p {
font-size: 0.8rem;
color: #ffbf00;
}
.feedback-area .card-feedback .img-feedback {
margin-top: 8px;
margin-left: -24px;
}
@media (max-width: 991px) {
.feedback-area .card-feedback .img-feedback {
margin-left: -16px;
}
}
.feedback-area .card-feedback .img-feedback img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.feedback-area .card-feedback .img-feedback span {
color: #ffffff;
}
.list-contact li {
line-height: 2;
color: #ffbf00;
}
.list-contact li i {
color: #987200;
margin-right: 8px;
}
.form-contact .form-group {
margin-bottom: 30px;
}
.form-contact .form-control {
border: 1px solid #e5e6e9;
border-radius: 0px;
height: 48px;
padding-left: 18px;
font-size: 0.8rem;
background: transparent;
}
.form-contact .form-control:focus {
outline: 0;
box-shadow: none;
}
.form-contact .form-control::placeholder {
font-weight: 300;
color: #999999;
}
.form-contact textarea {
border-radius: 0px;
height: 100% !important;
}
.form-contact .button-form {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
border: 3px solid transparent;
width: 100%;
border-radius: 12px;
overflow: hidden;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}
.form-contact .button-form::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.form-contact .button-form:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.6);
border-color: rgba(255, 255, 255, 0.3);
}
.form-contact .button-form:hover::before {
left: 100%;
}
.form-contact .button-form:active {
transform: translateY(-1px);
}
.form-contact .button-form .text {
padding: 0 15px;
}
.form-contact .button-form .text p {
color: #ffffff;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0;
}
.form-contact .button-form .icon-bg {
display: flex;
background: rgba(255, 255, 255, 0.1);
height: 100%;
padding: 20px 20px;
transition: background 0.3s ease;
}
.form-contact .button-form .icon-bg i {
color: #ffffff;
font-size: 23px;
transition: transform 0.3s ease;
}
.form-contact .button-form:hover .icon-bg {
background: rgba(255, 255, 255, 0.2);
}
.form-contact .button-form:hover .icon-bg i {
transform: translateX(3px);
}
.contact-us {
display: flex;
margin-bottom: 30px;
}
.contact-us .icon-contact {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 206, 251, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.contact-us .icon-contact i {
font-size: 22px;
color: #ffbf00;
}
.text-contact {
margin-left: 20px;
}
.text-contact h3 {
font-size: 18px;
font-weight: 700;
color: #424242;
}
footer {
background: #f6f9fe;
}
footer .footer-top {
padding-top: 100px;
padding-bottom: 50px;
}
footer .footer-bottom {
border-top: 1px solid #ffbf00;
padding-bottom: 50px;
padding-top: 30px;
}
footer .info-footer p {
font-size: 0.9em;
}
footer .title-footer h3 {
color: #ffbf00;
font-size: 1.3rem;
position: relative;
bottom: 8px;
}
footer .title-footer h3::before {
content: "";
position: absolute;
width: 40px;
height: 2px;
background: #987200;
bottom: -5px;
}
footer .footer-itens ul li {
line-height: 2;
font-size: 1rem;
}
footer .footer-itens ul li a {
display: flex;
align-items: center;
color: #424242;
transition: 0.3s;
}
footer .footer-itens ul li a i {
color: #987200;
font-size: 10px;
margin-right: 8px;
transform: rotate(180deg);
}
footer .footer-itens ul li a:hover {
color: #987200;
}
@media (max-width: 767px) {
footer .footer-itens ul li a {
justify-content: center;
text-align: center;
}
footer .footer-itens ul li a i {
display: none;
}
}
footer .footer-contact ul li {
line-height: 2;
font-size: 1rem;
}
footer .footer-contact ul li a {
color: #424242;
transition: 0.3s;
}
footer .footer-contact ul li a i {
color: #987200;
margin-right: 8px;
font-size: 15px;
}
footer .footer-contact ul li a:hover {
color: #987200;
}
.back-top {
display: flex;
align-items: center;
justify-content: center;
background: #987200;
height: 50px;
width: 50px;
right: 31px;
bottom: 18px;
position: fixed;
z-index: 10;
font-size: 20px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0);
box-shadow: 0 0 10px 3px rgba(108, 98, 98, 0.2);
}
.back-top i {
color: #ffffff;
}
.lgpd {
width: 30%;
background: rgb(255, 255, 255);
position: fixed;
bottom: 0;
padding: 15px;
margin-left: 10px;
border-radius: 8px;
z-index: 99999999999999;
box-shadow: 0 0 10px 3px rgba(108, 98, 98, 0.2);
}
@media (max-width: 767px) {
.lgpd {
width: 90%;
}
}
.lgpd .lgpd-txt span {
display: block;
margin-bottom: 8px;
color: #212529;
font-weight: 700;
font-size: 18px;
}
.lgpd .lgpd-txt span i {
margin-right: 8px;
}
.lgpd .lgpd-txt p {
color: #424242;
font-size: 0.8rem;
margin-bottom: 0;
}
@media (max-width: 767px) {
.lgpd .lgpd-txt p {
font-size: 11px;
}
}
.lgpd .lgpd-txt a {
color: #987200;
text-decoration: underline;
}
@media (max-width: 767px) {
.lgpd .lgpd-txt {
display: block;
}
}
.lgpd .lgpd-button {
display: flex;
justify-content: end;
margin-top: 8px;
}
.lgpd .lgpd-button button {
border: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #987200;
padding: 10px 15px;
font-size: 0.8rem;
color: #ffffff;
width: 100px;
height: 35px;
margin-left: 24px;
cursor: pointer;
}
@media (max-width: 767px) {
.lgpd .lgpd-button button {
font-size: 11px;
margin-left: 0;
margin-top: 10px;
}
}
.breadcrumb {
background-image: url(../img/banner/banner1.webp);
background-repeat: no-repeat;
background-size: cover;
display: block;
}
.breadcrumb-height {
height: 300px;
}
.bread-overly {
position: relative;
z-index: 1;
}
.bread-overly::before {
content: "";
position: absolute;
background-color: rgba(0, 0, 0, 0.32);
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: -1;
}
.breadcrumb_iner {
padding: 100px 0;
text-align: center;
}
.breadcrumb_iner .breadcrumb_iner_item h1 {
color: #fff;
font-size: 3.3rem;
}
@media (max-width: 767px) {
.breadcrumb_iner .breadcrumb_iner_item h1 {
font-size: 2.5em;
}
}
.breadcrumb_iner .breadcrumb_iner_item p,
.breadcrumb_iner .breadcrumb_iner_item a {
color: #ffffff;
font-size: 0.9rem;
}
.breadcrumb_iner .breadcrumb_iner_item p i,
.breadcrumb_iner .breadcrumb_iner_item a i {
color: #987200;
font-size: 0.7rem;
}
.count-area {
background: rgb(2, 0, 36);
background: linear-gradient(90deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 35%, rgb(0, 212, 255) 100%);
}
.count-area .count-card {
text-align: center;
}
.count-area .count-card span {
display: block;
}
.count-area .count-card .counter {
color: #ffffff;
font-size: 4rem;
font-weight: 700;
}
.count-area .count-card .text {
color: #ffffff;
font-size: 1rem;
font-weight: 100;
}
/* ===== COMO FUNCIONA SECTION STYLES ===== */
.como-funciona-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.como-funciona-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.como-funciona-hero::after {
content: "";
position: absolute;
top: 50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 191, 0, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
}
.como-funciona-hero .container {
position: relative;
z-index: 2;
}
.hero-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}
.hero-content .section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 191, 0, 0.4);
}
.hero-content .section-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.hero-content .hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
color: #424242;
margin-bottom: 2rem;
line-height: 1.2;
}
.hero-content .hero-title .highlight {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-content .hero-title .highlight::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.hero-content .hero-description .lead-text {
font-size: 1.25rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 1.5rem;
font-weight: 500;
}
.hero-content .hero-description .lead-text strong {
color: #ffbf00;
font-weight: 700;
}
.hero-content .hero-description .description-text {
font-size: 1.1rem;
color: #757575;
line-height: 1.7;
margin-bottom: 2rem;
font-weight: 400;
}
.hero-content .hero-description .description-text strong {
color: #ffbf00;
font-weight: 700;
}
.hero-content .hero-cta .btn-hero {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.hero-content .hero-cta .btn-hero::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.hero-content .hero-cta .btn-hero:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.hero-content .hero-cta .btn-hero:hover::before {
left: 100%;
}
.hero-content .hero-cta .btn-hero i {
transition: transform 0.3s ease;
}
.hero-content .hero-cta .btn-hero:hover i {
transform: translateX(5px);
}
.hero-image-wrapper {
position: relative;
}
.hero-image-container {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.hero-image-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
z-index: 1;
}
.hero-image {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.6s ease;
}
.hero-image-container:hover .hero-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
padding: 2rem 1.5rem 1.5rem;
z-index: 2;
}
.overlay-content {
display: flex;
align-items: center;
gap: 0.75rem;
color: #ffffff;
}
.overlay-content i {
font-size: 1.5rem;
color: #ffbf00;
}
.overlay-content span {
font-weight: 600;
font-size: 1rem;
}
.process-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.process-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.section-header .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.section-header .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.section-header .section-subtitle {
font-size: 1.1rem;
color: #757575;
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.section-header .section-subtitle strong {
color: #ffbf00;
font-weight: 700;
}
.process-steps .process-step {
background: #ffffff;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.process-steps .process-step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.process-steps .process-step:last-child {
margin-bottom: 0;
}
.step-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.step-header .step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.5rem;
font-weight: 800;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.step-header .step-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.step-header .step-icon i {
color: #ffbf00;
font-size: 1.25rem;
}
.step-header .step-title {
font-size: 1.5rem;
font-weight: 700;
color: #424242;
margin: 0;
line-height: 1.3;
}
.step-content p {
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin: 0;
font-size: 1rem;
}
.step-content p strong {
color: #ffbf00;
font-weight: 700;
}
.solutions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
margin: 1.5rem 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.solution-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.05), rgba(255, 218, 106, 0.05));
border-radius: 12px;
border: 1px solid rgba(255, 191, 0, 0.1);
transition: all 0.3s ease;
}
.solution-item:hover {
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
border-color: rgba(255, 191, 0, 0.2);
transform: translateX(5px);
}
.solution-item i {
color: #ffbf00;
font-size: 1.25rem;
width: 24px;
text-align: center;
}
.solution-item span {
color: #424242;
font-size: 0.95rem;
line-height: 1.4;
}
.solution-item span strong {
color: #ffbf00;
font-weight: 700;
}
.process-sidebar {
position: sticky;
top: 2rem;
}
.sidebar-card {
background: #ffffff;
border-radius: 24px;
padding: 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 191, 0, 0.1);
}
.sidebar-header {
text-align: center;
margin-bottom: 2rem;
}
.sidebar-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
}
.sidebar-header p {
color: #757575;
font-size: 0.95rem;
margin: 0;
}
.sidebar-nav {
margin-bottom: 2rem;
}
.sidebar-nav ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step-counter;
}
.sidebar-nav ol li {
counter-increment: step-counter;
margin-bottom: 1rem;
}
.sidebar-nav ol li:last-child {
margin-bottom: 0;
}
.sidebar-nav ol li::before {
content: counter(step-counter);
display: inline-block;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 24px;
font-size: 0.75rem;
font-weight: 700;
margin-right: 0.75rem;
}
.sidebar-nav .nav-link {
color: #424242;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.sidebar-nav .nav-link:hover {
color: #ffbf00;
transform: translateX(5px);
}
.sidebar-cta {
margin-bottom: 2rem;
}
.sidebar-cta .btn-sidebar {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.sidebar-cta .btn-sidebar::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.sidebar-cta .btn-sidebar:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4);
color: #ffffff;
}
.sidebar-cta .btn-sidebar:hover::before {
left: 100%;
}
.sidebar-cta .btn-sidebar i {
font-size: 1.1rem;
}
.sidebar-features .feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.sidebar-features .feature-item:last-child {
margin-bottom: 0;
}
.sidebar-features .feature-item i {
color: #ffbf00;
font-size: 1rem;
width: 20px;
text-align: center;
}
.sidebar-features .feature-item span {
color: #757575;
font-size: 0.9rem;
}
.coverage-section {
background: linear-gradient(135deg, rgba(255, 191, 0, 0.05), rgba(255, 218, 106, 0.05));
position: relative;
}
.coverage-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.coverage-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.coverage-content .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.coverage-content .section-description {
font-size: 1.1rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
max-width: 800px;
margin: 0 auto;
}
.coverage-content .section-description strong {
color: #ffbf00;
font-weight: 700;
}
.security-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.security-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.security-content {
text-align: center;
}
.security-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.security-content .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.security-content .section-description {
font-size: 1.1rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
max-width: 800px;
margin: 0 auto;
}
.security-content .section-description strong {
color: #ffbf00;
font-weight: 700;
}
.final-cta-section {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
position: relative;
overflow: hidden;
}
.final-cta-section::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.final-cta-section::after {
content: "";
position: absolute;
bottom: -30%;
left: -15%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.final-cta-section .container {
position: relative;
z-index: 2;
}
.cta-content .cta-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cta-content .cta-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.cta-content .cta-title .highlight {
background: linear-gradient(135deg, #ffffff, #f0f0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content .cta-description {
font-size: 1.25rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.95;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-content .cta-description strong {
font-weight: 700;
}
.cta-content .cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.cta-content .cta-buttons {
flex-direction: row;
justify-content: center;
}
}
.cta-content .btn-primary {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-content .btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.cta-content .btn-primary:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
color: #ffffff;
}
.cta-content .btn-primary:hover::before {
left: 100%;
}
.cta-content .btn-primary i {
transition: transform 0.3s ease;
}
.cta-content .btn-primary:hover i {
transform: translateX(5px);
}
.cta-content .btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 1rem;
background: #25d366;
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
}
.cta-content .btn-whatsapp:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6);
color: #ffffff;
}
@media (max-width: 767px) {
.como-funciona-hero {
padding: 3rem 0;
}
.como-funciona-hero .hero-title {
font-size: 2.5rem;
}
.como-funciona-hero .lead-text {
font-size: 1.1rem;
}
.como-funciona-hero .description-text {
font-size: 1rem;
}
.hero-image {
height: 300px;
}
.step-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.step-header .step-title {
font-size: 1.25rem;
}
.solutions-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.sidebar-card {
padding: 1.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 991px) {
.como-funciona-hero {
padding: 4rem 0;
}
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.como-funciona-hero {
padding: 5rem 0;
}
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.como-funciona-hero,
.process-section,
.coverage-section,
.security-section,
.final-cta-section {
will-change: transform;
}
.process-step,
.sidebar-card,
.solution-item {
will-change: transform;
}
@media print {
.como-funciona-hero,
.process-section,
.coverage-section,
.security-section,
.final-cta-section {
background: white;
padding: 2rem 0;
}
.process-step,
.sidebar-card,
.solution-item {
box-shadow: none;
border: 1px solid #ddd;
}
.process-step:hover,
.sidebar-card:hover,
.solution-item:hover {
transform: none;
}
.image-overlay {
display: none;
}
}
/* ===== CONSULTORIA SECTION STYLES ===== */
.consultoria-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.consultoria-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.consultoria-hero::after {
content: "";
position: absolute;
top: 50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 191, 0, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
}
.consultoria-hero .container {
position: relative;
z-index: 2;
}
.hero-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}
.hero-content .section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 191, 0, 0.4);
}
.hero-content .section-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.hero-content .hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
color: #424242;
margin-bottom: 2rem;
line-height: 1.2;
}
.hero-content .hero-title .highlight {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-content .hero-title .highlight::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.hero-content .hero-description .lead-text {
font-size: 1.25rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 2rem;
font-weight: 500;
}
.hero-content .hero-description .lead-text strong {
color: #ffbf00;
font-weight: 700;
}
.hero-content .hero-cta .btn-hero {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.hero-content .hero-cta .btn-hero::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.hero-content .hero-cta .btn-hero:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.hero-content .hero-cta .btn-hero:hover::before {
left: 100%;
}
.hero-content .hero-cta .btn-hero i {
transition: transform 0.3s ease;
}
.hero-content .hero-cta .btn-hero:hover i {
transform: translateX(5px);
}
.hero-image-wrapper {
position: relative;
}
.hero-image-container {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.hero-image-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
z-index: 1;
}
.hero-image {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.6s ease;
}
.hero-image-container:hover .hero-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
padding: 2rem 1.5rem 1.5rem;
z-index: 2;
}
.overlay-content {
display: flex;
align-items: center;
gap: 0.75rem;
color: #ffffff;
}
.overlay-content i {
font-size: 1.5rem;
color: #ffbf00;
}
.overlay-content span {
font-weight: 600;
font-size: 1rem;
}
.intro-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.intro-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.intro-content .intro-card {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 191, 0, 0.1);
display: flex;
align-items: flex-start;
gap: 2rem;
transition: all 0.3s ease;
}
.intro-content .intro-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.intro-content .intro-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.intro-content .intro-icon i {
color: #ffffff;
font-size: 2rem;
}
.intro-content .intro-text {
flex: 1;
}
.intro-content .intro-text p {
font-size: 1.1rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin: 0;
}
.intro-content .intro-text p strong {
color: #ffbf00;
font-weight: 700;
}
.process-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.process-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.section-header .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.section-header .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.section-header .section-subtitle {
font-size: 1.1rem;
color: #757575;
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.section-header .section-subtitle strong {
color: #ffbf00;
font-weight: 700;
}
.process-steps .process-step {
background: #ffffff;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.process-steps .process-step:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.process-steps .process-step:last-child {
margin-bottom: 0;
}
.step-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.step-header .step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.5rem;
font-weight: 800;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.step-header .step-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.step-header .step-icon i {
color: #ffbf00;
font-size: 1.25rem;
}
.step-header .step-title {
font-size: 1.5rem;
font-weight: 700;
color: #424242;
margin: 0;
line-height: 1.3;
}
.step-content p {
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin: 0;
font-size: 1rem;
}
.step-content p strong {
color: #ffbf00;
font-weight: 700;
}
.process-sidebar {
position: sticky;
top: 2rem;
}
.sidebar-card {
background: #ffffff;
border-radius: 24px;
padding: 2rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 191, 0, 0.1);
}
.sidebar-header {
text-align: center;
margin-bottom: 2rem;
}
.sidebar-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
}
.sidebar-header p {
color: #757575;
font-size: 0.95rem;
margin: 0;
}
.sidebar-nav {
margin-bottom: 2rem;
}
.sidebar-nav ol {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step-counter;
}
.sidebar-nav ol li {
counter-increment: step-counter;
margin-bottom: 1rem;
}
.sidebar-nav ol li:last-child {
margin-bottom: 0;
}
.sidebar-nav ol li::before {
content: counter(step-counter);
display: inline-block;
width: 24px;
height: 24px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 24px;
font-size: 0.75rem;
font-weight: 700;
margin-right: 0.75rem;
}
.sidebar-nav .nav-link {
color: #424242;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.sidebar-nav .nav-link:hover {
color: #ffbf00;
transform: translateX(5px);
}
.sidebar-cta {
margin-bottom: 2rem;
}
.sidebar-cta .btn-sidebar {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1rem 1.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.sidebar-cta .btn-sidebar::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.sidebar-cta .btn-sidebar:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4);
color: #ffffff;
}
.sidebar-cta .btn-sidebar:hover::before {
left: 100%;
}
.sidebar-cta .btn-sidebar i {
font-size: 1.1rem;
}
.sidebar-features .feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.sidebar-features .feature-item:last-child {
margin-bottom: 0;
}
.sidebar-features .feature-item i {
color: #ffbf00;
font-size: 1rem;
width: 20px;
text-align: center;
}
.sidebar-features .feature-item span {
color: #757575;
font-size: 0.9rem;
}
.economy-examples-section {
background: linear-gradient(135deg, rgba(255, 191, 0, 0.05), rgba(255, 218, 106, 0.05));
position: relative;
}
.economy-examples-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.examples-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.examples-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.examples-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.example-item {
background: #ffffff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.example-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.example-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(255, 191, 0, 0.3);
}
.example-icon i {
color: #ffffff;
font-size: 1.25rem;
}
.example-content {
flex: 1;
}
.example-content h4 {
font-size: 1.125rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.example-content p {
color: #757575;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.example-content p strong {
color: #ffbf00;
font-weight: 700;
}
.who-can-hire-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.who-can-hire-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.clients-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.clients-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.clients-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.client-category {
background: #ffffff;
border-radius: 20px;
padding: 2rem;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.client-category:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.category-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.category-icon i {
color: #ffffff;
font-size: 2rem;
}
.client-category h4 {
font-size: 1.25rem;
font-weight: 700;
color: #424242;
margin-bottom: 1rem;
line-height: 1.3;
}
.client-category ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
flex-grow: 1;
}
.client-category ul li {
color: #757575;
line-height: 1.6;
margin-bottom: 0.5rem;
}
.client-category ul li:last-child {
margin-bottom: 0;
}
.sp-focus-section {
background: linear-gradient(135deg, rgba(255, 191, 0, 0.05), rgba(255, 218, 106, 0.05));
position: relative;
}
.sp-focus-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.focus-content {
text-align: center;
}
.focus-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.focus-content .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.focus-content .focus-description {
font-size: 1.1rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 2rem;
}
.focus-content .focus-description strong {
color: #ffbf00;
font-weight: 700;
}
.cities-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.cities-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.cities-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.city-group {
background: #ffffff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.city-group:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.city-group h4 {
font-size: 1.125rem;
font-weight: 700;
color: #ffbf00;
margin-bottom: 1rem;
text-align: center;
}
.city-group ul {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
}
.city-group ul li {
color: #757575;
line-height: 1.6;
margin-bottom: 0.5rem;
font-size: 0.95rem;
text-align: center;
}
.city-group ul li:last-child {
margin-bottom: 0;
}
.service-highlight {
background: linear-gradient(135deg, rgba(255, 191, 0, 0.08), rgba(255, 218, 106, 0.08));
padding: 2rem;
border-radius: 20px;
border: 2px solid rgba(255, 191, 0, 0.15);
}
.service-highlight p {
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin: 0;
font-size: 1.1rem;
text-align: center;
}
.service-highlight p strong {
color: #ffbf00;
font-weight: 700;
}
.why-hire-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.why-hire-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.benefits-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.benefit-item {
background: #ffffff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.benefit-item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.benefit-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(255, 191, 0, 0.3);
}
.benefit-icon i {
color: #ffffff;
font-size: 1.25rem;
}
.benefit-content {
flex: 1;
}
.benefit-content h4 {
font-size: 1.125rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.benefit-content p {
color: #757575;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.final-cta-section {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
position: relative;
overflow: hidden;
}
.final-cta-section::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.final-cta-section::after {
content: "";
position: absolute;
bottom: -30%;
left: -15%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
border-radius: 50%;
}
.final-cta-section .container {
position: relative;
z-index: 2;
}
.cta-content .cta-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cta-content .cta-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.cta-content .cta-title .highlight {
background: linear-gradient(135deg, #ffffff, #f0f0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content .cta-description {
font-size: 1.25rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.95;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-content .cta-description strong {
font-weight: 700;
}
.cta-content .cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.cta-content .cta-buttons {
flex-direction: row;
justify-content: center;
}
}
.cta-content .btn-primary {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cta-content .btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.cta-content .btn-primary:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
color: #ffffff;
}
.cta-content .btn-primary:hover::before {
left: 100%;
}
.cta-content .btn-primary i {
transition: transform 0.3s ease;
}
.cta-content .btn-primary:hover i {
transform: translateX(5px);
}
.cta-content .btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 1rem;
background: #25d366;
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
}
.cta-content .btn-whatsapp:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6);
color: #ffffff;
}
.contact-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.contact-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.contact-info .contact-features {
margin-bottom: 2rem;
}
.contact-feature {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 2rem;
}
.contact-feature:last-child {
margin-bottom: 0;
}
.contact-feature .feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 20px rgba(255, 191, 0, 0.3);
}
.contact-feature .feature-icon i {
color: #ffffff;
font-size: 1.5rem;
}
.contact-feature .feature-content {
flex: 1;
}
.contact-feature .feature-content h3 {
font-size: 1.125rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.contact-feature .feature-content p {
color: #757575;
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.contact-feature-card {
background: #ffffff;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
margin-bottom: 1.5rem;
}
.contact-feature-card:last-child {
margin-bottom: 0;
}
.contact-feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
border-color: rgba(255, 191, 0, 0.2);
}
.contact-form-wrapper {
background: #ffffff;
padding: 2.5rem;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 191, 0, 0.1);
}
@media (max-width: 767px) {
.consultoria-hero {
padding: 3rem 0;
}
.consultoria-hero .hero-title {
font-size: 2.5rem;
}
.consultoria-hero .lead-text {
font-size: 1.1rem;
}
.hero-image {
height: 300px;
}
.intro-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.step-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.step-header .step-title {
font-size: 1.25rem;
}
.examples-grid,
.clients-grid,
.cities-grid,
.benefits-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.sidebar-card {
padding: 1.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.contact-form-wrapper {
padding: 1.5rem;
}
}
@media (max-width: 991px) {
.consultoria-hero {
padding: 4rem 0;
}
.examples-grid,
.clients-grid,
.cities-grid,
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.consultoria-hero {
padding: 5rem 0;
}
.examples-grid,
.clients-grid,
.cities-grid,
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.consultoria-hero,
.intro-section,
.process-section,
.economy-examples-section,
.who-can-hire-section,
.sp-focus-section,
.why-hire-section,
.final-cta-section,
.contact-section {
will-change: transform;
}
.process-step,
.sidebar-card,
.example-item,
.client-category,
.city-group,
.benefit-item {
will-change: transform;
}
@media print {
.consultoria-hero,
.intro-section,
.process-section,
.economy-examples-section,
.who-can-hire-section,
.sp-focus-section,
.why-hire-section,
.final-cta-section,
.contact-section {
background: white;
padding: 2rem 0;
}
.process-step,
.sidebar-card,
.example-item,
.client-category,
.city-group,
.benefit-item {
box-shadow: none;
border: 1px solid #ddd;
}
.process-step:hover,
.sidebar-card:hover,
.example-item:hover,
.client-category:hover,
.city-group:hover,
.benefit-item:hover {
transform: none;
}
.image-overlay {
display: none;
}
}
/* ===== PÁGINAS DE SERVIÇO PROFISSIONAIS ===== */
.servico-page {
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
min-height: 100vh;
}
/* HERO SECTION */
.servico-hero {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
color: #ffffff;
position: relative;
overflow: hidden;
}
.servico-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.servico-hero .hero-content {
position: relative;
z-index: 2;
}
.servico-hero .section-badge {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #10b981;
padding: 0.75rem 1.5rem;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
}
.servico-hero .hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
}
.servico-hero .hero-title .highlight {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.servico-hero .hero-description {
max-width: 800px;
margin: 0 auto;
}
.servico-hero .lead-text {
font-size: clamp(1.125rem, 3vw, 1.25rem);
line-height: 1.6;
opacity: 0.9;
}
/* FEATURED IMAGE SECTION */
.featured-image-section {
padding: 3rem 0;
background: #ffffff;
}
.featured-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.featured-image-wrapper:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}
.featured-image {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.featured-image-wrapper:hover .featured-image {
transform: scale(1.02);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);
color: #ffffff;
padding: 1.5rem;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.featured-image-wrapper:hover .image-overlay {
transform: translateY(0);
}
.overlay-content {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
}
.overlay-content i {
font-size: 1.25rem;
}
/* CONTENT SECTION */
.content-section {
background: #ffffff;
}
.content-wrapper {
max-width: 1000px;
margin: 0 auto;
}
/* SERVICE CARDS - ESTILO SIMPLIFICADO (COMO ERA ANTES) */
.service-card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
padding-top: 12px;
height: 100%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
min-height: 400px;
}
/* Garantir que os cards tenham a mesma altura em cada linha */
.row.g-4 > [class*="col-"] {
display: flex;
flex-direction: column;
}
.row.g-4 > [class*="col-"] .service-card {
flex: 1;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.card-icon {
width: 60px;
height: 60px;
background: #ffbf00;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(255, 191, 0, 0.3);
transition: all 0.3s ease;
}
.card-icon i {
font-size: 1.5rem;
color: #ffffff;
}
.card-number {
font-size: 2.5rem;
font-weight: 700;
color: rgba(255, 191, 0, 0.2);
line-height: 1;
}
.card-title {
font-size: 1.5rem;
font-weight: 600;
color: #424242;
margin-bottom: 1rem;
}
.card-text {
font-size: 1rem;
line-height: 1.6;
color: #757575;
margin-bottom: 1.5rem;
flex: 1;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
background: rgba(255, 191, 0, 0.1);
color: #ffbf00;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid rgba(255, 191, 0, 0.2);
transition: all 0.3s ease;
}
.tag:hover {
background: rgba(255, 191, 0, 0.2);
color: #ffbf00;
}
/* CTA SECTION */
.cta-section {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
color: #ffffff;
}
.cta-content h3 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 1rem;
}
.cta-content p {
font-size: 1.125rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.cta-content .btn-primary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
padding: 1.25rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.125rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.cta-content .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: #ffffff;
text-decoration: none;
}
.cta-content .btn-primary i {
transition: transform 0.3s ease;
}
.cta-content .btn-primary:hover i {
transform: translateX(5px);
}
/* BACK SECTION */
.back-section {
padding: 3rem 0;
background: #f8fafc;
}
.btn-back {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: #6b7280;
text-decoration: none;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 50px;
border: 2px solid rgba(16, 185, 129, 0.2);
background: #ffffff;
transition: all 0.3s ease;
}
.btn-back:hover {
color: #10b981;
border-color: #10b981;
background: rgba(16, 185, 129, 0.05);
transform: translateY(-2px);
text-decoration: none;
}
.btn-back i {
transition: transform 0.3s ease;
}
.btn-back:hover i {
transform: translateX(-5px);
}
/* BANDEIRAS ESPECÍFICAS */
.bandeira-verde .card-icon {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.bandeira-amarela .card-icon {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.bandeira-vermelha .card-icon {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.solucoes .card-icon {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}
/* RESPONSIVIDADE MOBILE PRIMEIRA PRIORIDADE */
@media (max-width: 768px) {
/* Garantir que todos os cards tenham a mesma altura */
.service-card {
height: auto;
min-height: 450px;
}
.service-card .card-body {
height: 100%;
}
.servico-hero {
padding: 3rem 0;
}
.servico-hero .hero-title {
font-size: clamp(2rem, 8vw, 2.5rem);
line-height: 1.3;
}
.servico-hero .lead-text {
font-size: 1rem;
line-height: 1.5;
}
.servico-hero .section-badge {
padding: 0.5rem 1rem;
font-size: 0.75rem;
gap: 0.5rem;
}
.featured-image-section {
padding: 2rem 0;
}
/* CORREÇÃO DOS BLOCOS DE CONTEÚDO NO MOBILE */
.service-card {
padding: 2rem;
text-align: center;
min-height: 450px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-header {
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
text-align: center;
}
.card-icon {
width: 80px;
height: 80px;
margin: 0 auto;
}
.card-icon i {
font-size: 2rem;
}
.card-number {
font-size: 3rem;
align-self: center;
margin-top: 0.5rem;
}
.card-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-title {
font-size: 1.75rem;
margin-bottom: 1.5rem;
text-align: center;
line-height: 1.3;
}
.card-title::after {
left: 50%;
transform: translateX(-50%);
width: 60px;
}
.card-text {
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 2rem;
text-align: center;
flex: 1;
}
.card-tags {
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.tag {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
text-align: center;
min-width: 120px;
}
.cta-content h3 {
font-size: 1.75rem;
}
.cta-content p {
font-size: 1rem;
}
.cta-content .btn-primary {
padding: 1rem 2rem;
font-size: 1rem;
width: 100%;
justify-content: center;
}
.btn-back {
width: 100%;
justify-content: center;
padding: 1rem;
}
}
@media (max-width: 576px) {
.servico-hero {
padding: 2rem 0;
}
.servico-hero .hero-title {
font-size: 1.75rem;
}
/* AJUSTES PARA TELAS MUITO PEQUENAS */
.service-card {
padding: 1.5rem;
min-height: 400px;
}
.card-header {
gap: 1rem;
margin-bottom: 1.5rem;
}
.card-icon {
width: 60px;
height: 60px;
}
.card-icon i {
font-size: 1.5rem;
}
.card-number {
font-size: 2.5rem;
}
.card-title {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.card-title::after {
width: 50px;
height: 3px;
bottom: -10px;
}
.card-text {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.card-tags {
gap: 0.5rem;
}
.tag {
padding: 0.6rem 1rem;
font-size: 0.8rem;
min-width: 100px;
}
.cta-content .btn-primary {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
}
/* ANIMAÇÕES SUAVES */
.service-card {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* OTIMIZAÇÕES DE PERFORMANCE */
.service-card {
will-change: transform;
backface-visibility: hidden;
}
.featured-image-wrapper {
will-change: transform;
}
/* ESTADOS DE FOCUS PARA ACESSIBILIDADE */
.service-card:focus-within {
outline: 3px solid #10b981;
outline-offset: 2px;
}
.btn-primary:focus,
.btn-back:focus {
outline: 3px solid #ffffff;
outline-offset: 2px;
}
/* ===== POSTS STYLES WITH ANIMATIONS ===== */
.texto-otimizado {
padding: 4rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
min-height: 100vh;
}
.texto-otimizado .container {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.post-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
text-align: center;
margin-bottom: 3rem;
position: relative;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out forwards;
}
.post-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.post-subtitle {
font-size: 1.25rem;
color: #757575;
text-align: center;
margin-bottom: 3rem;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease-out 0.2s forwards;
}
.imagem-post {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
margin: 2rem 0;
opacity: 0;
transform: scale(0.95);
animation: fadeInScale 1s ease-out 0.4s forwards;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.imagem-post:hover {
transform: scale(1.02);
box-shadow: 0 12px 50px rgba(0, 0, 0, 0.2);
}
.post-content p {
font-size: 1.1rem;
line-height: 1.8;
color: #424242;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.6s ease-out forwards;
}
.post-content p strong {
color: #ffbf00;
font-weight: 700;
}
.post-content p a {
color: #ffbf00;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease;
}
.post-content p a:hover {
border-bottom-color: #ffbf00;
}
.post-heading {
font-size: 1.8rem;
font-weight: 700;
color: #424242;
margin: 3rem 0 1.5rem;
padding: 1rem 0;
position: relative;
opacity: 0;
transform: translateX(-30px);
animation: slideInLeft 0.8s ease-out forwards;
}
.post-heading::before {
content: "";
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 60%;
background: linear-gradient(180deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.post-heading span.emoji {
display: inline-block;
margin-right: 0.5rem;
font-size: 1.5rem;
animation: bounce 2s infinite;
}
.cta-central {
text-align: center;
margin: 4rem 0;
padding: 3rem;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
border-radius: 20px;
border: 2px solid transparent;
background-clip: padding-box;
position: relative;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out 1s forwards;
}
.cta-central::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20px;
padding: 2px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.btn-principal {
display: inline-block;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
padding: 1rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
position: relative;
overflow: hidden;
}
.btn-principal::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-principal:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.6);
}
.btn-principal:hover::before {
left: 100%;
}
.btn-principal:active {
transform: translateY(-1px);
}
.btn-leia {
display: inline-block;
color: #ffbf00;
text-decoration: none;
font-weight: 600;
padding: 0.5rem 1rem;
border: 2px solid #ffbf00;
border-radius: 25px;
transition: all 0.3s ease;
margin-top: 2rem;
}
.btn-leia:hover {
background: #ffbf00;
color: #ffffff;
transform: translateX(-5px);
}
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease-out;
}
.fade-in.animate {
opacity: 1;
transform: translateY(0);
}
.slide-in-left {
opacity: 0;
transform: translateX(-50px);
transition: all 0.8s ease-out;
}
.slide-in-left.animate {
opacity: 1;
transform: translateX(0);
}
.slide-in-right {
opacity: 0;
transform: translateX(50px);
transition: all 0.8s ease-out;
}
.slide-in-right.animate {
opacity: 1;
transform: translateX(0);
}
.scale-in {
opacity: 0;
transform: scale(0.8);
transition: all 0.8s ease-out;
}
.scale-in.animate {
opacity: 1;
transform: scale(1);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
.post-content p:nth-child(1) {
animation-delay: 0.6s;
}
.post-content p:nth-child(2) {
animation-delay: 0.8s;
}
.post-content p:nth-child(3) {
animation-delay: 1s;
}
.post-content p:nth-child(4) {
animation-delay: 1.2s;
}
.post-content p:nth-child(5) {
animation-delay: 1.4s;
}
.post-content p:nth-child(6) {
animation-delay: 1.6s;
}
.post-content p:nth-child(7) {
animation-delay: 1.8s;
}
.post-content p:nth-child(8) {
animation-delay: 2s;
}
.post-heading:nth-child(1) {
animation-delay: 0.7s;
}
.post-heading:nth-child(2) {
animation-delay: 0.9s;
}
.post-heading:nth-child(3) {
animation-delay: 1.1s;
}
.post-heading:nth-child(4) {
animation-delay: 1.3s;
}
.post-heading:nth-child(5) {
animation-delay: 1.5s;
}
@media (max-width: 767px) {
.texto-otimizado {
padding: 2rem 0;
}
.texto-otimizado .container {
padding: 0 1rem;
}
.post-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.post-heading {
font-size: 1.5rem;
margin: 2rem 0 1rem;
}
.cta-central {
padding: 2rem 1rem;
margin: 3rem 0;
}
.btn-principal {
padding: 0.875rem 2rem;
font-size: 1rem;
}
}
@media (max-width: 991px) {
.post-title {
font-size: 2.5rem;
}
.post-heading {
font-size: 1.6rem;
}
}
html {
scroll-behavior: smooth;
}
.imagem-post.loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.btn-principal:focus,
.btn-leia:focus {
outline: 3px solid rgba(255, 191, 0, 0.5);
outline-offset: 2px;
}
@media print {
.texto-otimizado {
background: white;
padding: 1rem 0;
}
.cta-central,
.btn-principal,
.btn-leia {
display: none;
}
}
/* ===== BLOG SECTION STYLES ===== */
.blog-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
padding: 5rem 0;
position: relative;
}
.blog-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.blog-section .container {
position: relative;
z-index: 2;
}
.section-header {
margin-bottom: 4rem;
}
.section-header .section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
box-shadow: 0 4px 20px rgba(255, 191, 0, 0.3);
}
.section-header .section-badge i {
font-size: 1rem;
}
.section-header .section-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.section-header .section-subtitle {
font-size: 1.1rem;
color: #757575;
line-height: 1.7;
max-width: 800px;
margin: 0 auto;
}
.section-header .section-subtitle strong {
color: #ffbf00;
font-weight: 700;
}
.row {
margin: 0 -1rem;
}
.row .col-lg-4,
.row .col-md-6,
.row .col-sm-12 {
padding: 0 1rem;
}
.blog-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.blog-card:hover .card-img {
transform: scale(1.02);
}
.blog-card:hover .card-overlay {
opacity: 1;
}
.card-image {
position: relative;
overflow: hidden;
height: 200px;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.read-more-btn {
color: #ffffff;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
padding: 0.75rem 1.5rem;
border: 2px solid #ffffff;
border-radius: 25px;
transition: all 0.3s ease;
}
.read-more-btn:hover {
background: #ffffff;
color: #333333;
}
.read-more-btn i {
transition: transform 0.3s ease;
}
.read-more-btn:hover i {
transform: translateX(3px);
}
.card-content {
padding: 1.5rem;
position: relative;
}
.card-icon {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background: #ffbf00;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card-icon i {
color: #ffffff;
font-size: 1.25rem;
}
.card-title {
margin: 1rem 0 0.75rem 0;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
}
.card-title a {
color: #424242;
text-decoration: none;
transition: color 0.3s ease;
}
.card-title a:hover {
color: #ffbf00;
}
.card-excerpt {
color: #757575;
margin-bottom: 1rem;
line-height: 1.5;
font-size: 0.9rem;
}
.card-meta {
display: flex;
gap: 1rem;
font-size: 0.8rem;
color: #757575;
flex-wrap: wrap;
}
.card-meta .meta-date,
.card-meta .meta-read-time {
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-meta .meta-date i,
.card-meta .meta-read-time i {
color: #ffbf00;
font-size: 0.9rem;
}
@media (max-width: 767px) {
.blog-section {
padding: 3rem 0;
}
.blog-section .section-header {
margin-bottom: 3rem;
}
.blog-section .section-header .section-title {
font-size: 2rem;
}
.blog-section .section-header .section-subtitle {
font-size: 1rem;
}
.row {
margin: 0 -0.5rem;
}
.row .col-lg-4,
.row .col-md-6,
.row .col-sm-12 {
padding: 0 0.5rem;
margin-bottom: 2rem;
}
.blog-card {
border-radius: 16px;
}
.blog-card .card-content {
padding: 1.5rem;
}
.blog-card .card-title {
font-size: 1.1rem;
}
.blog-card .card-excerpt {
font-size: 0.9rem;
}
.blog-card .card-meta {
gap: 1rem;
font-size: 0.8rem;
}
}
@media (max-width: 991px) {
.blog-section {
padding: 4rem 0;
}
.blog-section .section-header {
margin-bottom: 3.5rem;
}
.blog-section .section-header .section-title {
font-size: 2.5rem;
}
.row {
margin: 0 -0.75rem;
}
.row .col-lg-4,
.row .col-md-6,
.row .col-sm-12 {
padding: 0 0.75rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.blog-section {
padding: 5rem 0;
}
.row {
margin: 0 -1rem;
}
.row .col-lg-4,
.row .col-md-6,
.row .col-sm-12 {
padding: 0 1rem;
}
}
.blog-card {
will-change: transform;
}
.blog-card .card-img {
will-change: transform;
}
.blog-card .card-overlay {
will-change: opacity;
}
.blog-card .card-icon {
will-change: transform;
}
.card-img.loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.blog-card:focus-within {
outline: 3px solid rgba(255, 191, 0, 0.5);
outline-offset: 2px;
}
.read-more-btn:focus {
outline: 3px solid rgba(255, 255, 255, 0.8);
outline-offset: 2px;
}
@media print {
.blog-section {
background: white;
padding: 2rem 0;
}
.blog-card {
box-shadow: none;
border: 1px solid #ddd;
}
.blog-card:hover {
transform: none;
}
.card-overlay {
display: none;
}
}
/* ===== BLOG PAGE STYLES ===== */
.page-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.page-hero::after {
content: "";
position: absolute;
top: 50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 191, 0, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
}
.page-hero .container {
position: relative;
z-index: 2;
}
.hero-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}
.hero-content .section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 191, 0, 0.4);
}
.hero-content .section-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.hero-content .hero-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: #424242;
margin-bottom: 2rem;
line-height: 1.2;
}
.hero-content .hero-title .highlight {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-content .hero-title .highlight::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.hero-content .hero-description {
font-size: 1.25rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 0;
font-weight: 500;
}
.hero-content .hero-description strong {
color: #ffbf00;
font-weight: 700;
}
.blog-section {
background: #ffffff;
position: relative;
}
.blog-section .container {
position: relative;
z-index: 2;
}
@media (max-width: 767px) {
.page-hero {
padding: 3rem 0;
}
.page-hero .hero-title {
font-size: 2.5rem;
}
.page-hero .hero-description {
font-size: 1.1rem;
}
}
@media (max-width: 991px) {
.page-hero {
padding: 4rem 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.page-hero {
padding: 5rem 0;
}
}
.page-hero {
will-change: transform;
}
@media print {
.page-hero {
background: white;
padding: 2rem 0;
}
}
/* ===== TEXTO PRINCIPAL SECTION STYLES ===== */
.hero-text-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.hero-text-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.hero-text-section::after {
content: "";
position: absolute;
top: 50%;
right: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 191, 0, 0.05) 0%, transparent 70%);
border-radius: 50%;
transform: translateY(-50%);
z-index: 0;
}
.hero-text-section .container {
position: relative;
z-index: 2;
}
.hero-content .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}
.hero-content .section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 191, 0, 0.4);
}
.hero-content .section-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.hero-content .hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
color: #424242;
margin-bottom: 2rem;
line-height: 1.2;
}
.hero-content .hero-title .highlight {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-content .hero-title .highlight::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.hero-content .hero-description .lead-text {
font-size: 1.25rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 2rem;
font-weight: 500;
}
.hero-content .hero-description .lead-text strong {
color: #ffbf00;
font-weight: 700;
}
.hero-content .hero-description .description-text {
font-size: 1.125rem;
color: #757575;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.hero-content .hero-description .description-text strong {
color: #ffbf00;
font-weight: 700;
}
.hero-content .hero-cta .btn-hero {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.hero-content .hero-cta .btn-hero::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.hero-content .hero-cta .btn-hero:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.hero-content .hero-cta .btn-hero:hover::before {
left: 100%;
}
.hero-content .hero-cta .btn-hero i {
transition: transform 0.3s ease;
}
.hero-content .hero-cta .btn-hero:hover i {
transform: translateX(5px);
}
.hero-image-wrapper {
position: relative;
}
.hero-image-container {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.hero-image-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 191, 0, 0.1), rgba(255, 218, 106, 0.1));
z-index: 1;
}
.hero-image {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.6s ease;
}
.hero-image-container:hover .hero-image {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
padding: 2rem 1.5rem 1.5rem;
z-index: 2;
}
.overlay-content {
display: flex;
align-items: center;
gap: 0.75rem;
color: #ffffff;
}
.overlay-content i {
font-size: 1.5rem;
color: #ffbf00;
}
.overlay-content span {
font-weight: 600;
font-size: 1rem;
}
.features-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.features-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.section-header .section-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
transform: translateY(0);
transition: all 0.3s ease;
}
.section-header .section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 191, 0, 0.4);
}
.section-header .section-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
.section-header .section-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: #424242;
margin-bottom: 1rem;
line-height: 1.3;
}
.section-header .section-subtitle {
font-size: 1.125rem;
color: #757575;
line-height: 1.6;
margin-bottom: 0;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
align-items: stretch;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.feature-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
@media (max-width: 420px) {
.feature-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.feature-item {
background: #ffffff;
border-radius: 20px;
padding: 2rem 1.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 191, 0, 0.1);
transition: all 0.3s ease;
text-align: center;
height: 450px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.feature-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.feature-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
flex-shrink: 0;
}
.feature-icon i {
color: #ffffff;
font-size: 1.8rem;
}
.feature-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.feature-content h3 {
font-size: 1.3rem;
font-weight: 700;
color: #424242;
margin-bottom: 1rem;
line-height: 1.3;
min-height: 2.6rem;
display: flex;
align-items: center;
justify-content: center;
}
.feature-content p {
font-size: 0.95rem;
color: #757575;
line-height: 1.6;
margin-bottom: 0;
text-align: left;
flex-grow: 1;
display: flex;
align-items: flex-start;
overflow: hidden;
}
.feature-content p strong {
color: #ffbf00;
font-weight: 700;
}
.coverage-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.coverage-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.coverage-content h3 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.coverage-content p {
font-size: 1.125rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.coverage-content p strong {
color: #ffbf00;
font-weight: 700;
}
.coverage-content .coverage-details {
font-size: 1rem;
color: rgb(129.75, 129.75, 129.75);
line-height: 1.6;
margin-bottom: 0;
}
.success-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.success-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.success-content h3 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.success-content p {
font-size: 1.125rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 0;
}
.success-content p strong {
color: #ffbf00;
font-weight: 700;
}
.beneficios-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.beneficios-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.benefit-card {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 191, 0, 0.1);
transition: all 0.3s ease;
text-align: center;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 191, 0, 0.2);
}
.benefit-header {
text-align: center;
padding: 2.5rem 2rem 1.5rem;
position: relative;
}
.benefit-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.benefit-icon i {
color: #ffffff;
font-size: 2rem;
}
.benefit-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.benefit-card p {
font-size: 1rem;
color: #757575;
line-height: 1.7;
margin-bottom: 0;
}
.cta-hero-section {
background: linear-gradient(135deg, #ffbf00 0%, #ffda6a 100%);
position: relative;
overflow: hidden;
}
.cta-hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.1;
}
.cta-hero-content {
position: relative;
z-index: 2;
}
.cta-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cta-badge i {
font-size: 1.1rem;
animation: pulse 2s infinite;
}
.cta-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
color: #ffffff;
margin-bottom: 1.5rem;
line-height: 1.3;
}
.cta-title .highlight {
color: rgba(255, 255, 255, 0.9);
position: relative;
}
.cta-title .highlight::after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
}
.cta-description {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
margin-bottom: 2.5rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-description strong {
color: #ffffff;
font-weight: 700;
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
margin-bottom: 3rem;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.cta-buttons {
flex-direction: row;
justify-content: center;
}
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-primary:hover {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.btn-primary:hover::before {
left: 100%;
}
.btn-primary i {
transition: transform 0.3s ease;
}
.btn-primary:hover i {
transform: translateX(5px);
}
.btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 1rem;
background: #25D366;
color: #ffffff;
text-decoration: none;
padding: 1.25rem 2.5rem;
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
border: 3px solid transparent;
}
.btn-whatsapp:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(37, 211, 102, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.btn-whatsapp i {
font-size: 1.25rem;
}
.cta-features {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.cta-features {
flex-direction: row;
justify-content: center;
gap: 2rem;
}
}
.cta-feature {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-weight: 500;
}
.cta-feature i {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
}
.contact-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
position: relative;
}
.contact-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.contact-info .contact-features {
margin-bottom: 3rem;
}
.contact-info .contact-feature {
display: flex;
align-items: flex-start;
gap: 1.5rem;
margin-bottom: 2rem;
}
.contact-info .contact-feature .feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.contact-info .contact-feature .feature-icon i {
color: #ffffff;
font-size: 1.5rem;
}
.contact-info .contact-feature .feature-content h3 {
font-size: 1.25rem;
font-weight: 700;
color: #424242;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.contact-info .contact-feature .feature-content p {
font-size: 1rem;
color: #757575;
line-height: 1.6;
margin-bottom: 0;
}
.contact-cta {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 20px;
padding: 2rem;
text-align: center;
color: #ffffff;
}
.contact-cta h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.3;
}
.contact-cta p {
font-size: 1rem;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.btn-whatsapp-contact {
display: inline-flex;
align-items: center;
gap: 1rem;
background: #25D366;
color: #ffffff;
text-decoration: none;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.btn-whatsapp-contact:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
.btn-whatsapp-contact i {
font-size: 1.1rem;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.servico-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
padding: 4rem 0;
}
.servico-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);
}
.servico-hero .hero-title {
font-size: clamp(2.5rem, 6vw, 3.5rem);
font-weight: 700;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.servico-hero .hero-title .highlight {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.servico-hero .lead-text {
font-size: 1.25rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin-bottom: 2rem;
}
.servico-hero .btn-hero {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.servico-hero .btn-hero:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: #ffffff;
text-decoration: none;
}
.servico-hero .btn-hero i {
transition: transform 0.3s ease;
}
.servico-hero .btn-hero:hover i {
transform: translateX(5px);
}
.banner-section {
padding: 2rem 0;
background: #ffffff;
}
.banner-section .banner-image-wrapper {
max-width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.banner-section .banner-image-wrapper .banner-image {
width: 100%;
height: auto;
display: block;
}
.intro-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.intro-section .intro-card {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 191, 0, 0.1);
display: flex;
align-items: flex-start;
gap: 2rem;
}
.intro-section .intro-card .intro-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 8px 25px rgba(255, 191, 0, 0.3);
}
.intro-section .intro-card .intro-icon i {
color: #ffffff;
font-size: 2rem;
}
.intro-section .intro-card .intro-text {
flex: 1;
}
.intro-section .intro-card .intro-text p {
font-size: 1.125rem;
color: #424242;
line-height: 1.7;
margin: 0;
}
.intro-section .intro-card .intro-text p strong {
color: #ffbf00;
font-weight: 700;
}
.content-sections {
background: #ffffff;
}
.content-sections .content-blocks .content-block {
margin-bottom: 3rem;
padding: 2rem;
background: #f8f9fa;
border-radius: 16px;
border-left: 4px solid #ffbf00;
}
.content-sections .content-blocks .content-block:last-child {
margin-bottom: 0;
}
.content-sections .content-blocks .content-block h2 {
font-size: 1.5rem;
font-weight: 700;
color: #424242;
margin-bottom: 1rem;
line-height: 1.3;
}
.content-sections .content-blocks .content-block p {
font-size: 1rem;
color: rgb(104.25, 104.25, 104.25);
line-height: 1.7;
margin: 0;
}
.content-sections .content-blocks .content-block p strong {
color: #ffbf00;
font-weight: 600;
}
.sidebar {
position: sticky;
top: 2rem;
}
.sidebar .sidebar-card {
background: #ffffff;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 191, 0, 0.1);
margin-bottom: 2rem;
}
.sidebar .sidebar-card:last-child {
margin-bottom: 0;
}
.sidebar .sidebar-card .sidebar-image {
margin-bottom: 1.5rem;
}
.sidebar .sidebar-card .sidebar-image img {
width: 100%;
height: auto;
border-radius: 12px;
}
.sidebar .sidebar-card .sidebar-content h3 {
font-size: 1.25rem;
font-weight: 700;
color: #424242;
margin-bottom: 1rem;
}
.sidebar .sidebar-card .sidebar-content .page-index ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar .sidebar-card .sidebar-content .page-index ul li {
margin-bottom: 0.75rem;
}
.sidebar .sidebar-card .sidebar-content .page-index ul li:last-child {
margin-bottom: 0;
}
.sidebar .sidebar-card .sidebar-content .page-index ul li a {
color: #757575;
text-decoration: none;
font-size: 0.95rem;
line-height: 1.5;
transition: all 0.3s ease;
display: block;
padding: 0.5rem 0;
border-bottom: 1px solid transparent;
}
.sidebar .sidebar-card .sidebar-content .page-index ul li a:hover {
color: #ffbf00;
border-bottom-color: rgba(255, 191, 0, 0.3);
text-decoration: none;
}
.sidebar .sidebar-card.cta-card {
background: linear-gradient(135deg, #ffbf00, #ffda6a);
color: #ffffff;
text-align: center;
}
.sidebar .sidebar-card.cta-card h3 {
color: #ffffff;
margin-bottom: 1rem;
}
.sidebar .sidebar-card.cta-card p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
}
.sidebar .sidebar-card.cta-card .btn-primary {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0.875rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.sidebar .sidebar-card.cta-card .btn-primary:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
color: #ffffff;
text-decoration: none;
}
.sidebar .sidebar-card.cta-card .btn-primary i {
transition: transform 0.3s ease;
}
.sidebar .sidebar-card.cta-card .btn-primary:hover i {
transform: translateX(3px);
}
.cta-section {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.cta-section .cta-content h2 {
font-size: clamp(2rem, 5vw, 2.5rem);
font-weight: 700;
color: #424242;
margin-bottom: 1rem;
}
.cta-section .cta-content p {
font-size: 1.125rem;
color: #757575;
margin-bottom: 2rem;
}
.cta-section .cta-content .cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.cta-section .cta-content .cta-buttons .btn-primary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.cta-section .cta-content .cta-buttons .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: #ffffff;
text-decoration: none;
}
.cta-section .cta-content .cta-buttons .btn-primary i {
transition: transform 0.3s ease;
}
.cta-section .cta-content .cta-buttons .btn-primary:hover i {
transform: translateX(5px);
}
.cta-section .cta-content .cta-buttons .btn-whatsapp {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: #25d366;
color: #ffffff;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3);
}
.cta-section .cta-content .cta-buttons .btn-whatsapp:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(37, 211, 102, 0.4);
background: #128c7e;
color: #ffffff;
text-decoration: none;
}
.cta-section .cta-content .cta-buttons .btn-whatsapp i {
font-size: 1.2rem;
}
/* MAPA / LOCALIZAÇÃO */
.map-section .section-badge { display:inline-flex; gap:.5rem; align-items:center; }
.map-embed {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.map-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 767px) {
.servico-hero {
padding: 2rem 0;
}
.servico-hero .hero-title {
font-size: 2rem;
}
.servico-hero .lead-text {
font-size: 1.1rem;
}
.intro-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.intro-card .intro-icon {
margin: 0 auto 1rem;
}
.content-blocks .content-block {
padding: 1.5rem;
}
.sidebar {
position: static;
margin-top: 2rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn-primary,
.cta-buttons .btn-whatsapp {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.servico-hero .hero-title {
font-size: 2.5rem;
}
.intro-card {
padding: 2rem;
}
}
@media (max-width: 420px) {
.servico-hero .hero-title {
font-size: 2rem;
}
.intro-card {
padding: 1.5rem;
}
.content-blocks .content-block {
padding: 1rem;
}
}
/* ===== RESPONSIVE ENHANCEMENTS - PROFESSIONAL MOBILE OPTIMIZATION ===== */
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 420px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media (max-width: 576px) {
.container {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
@media (max-width: 767px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (max-width: 420px) {
h1, .h1 {
font-size: clamp(1.75rem, 8vw, 2.25rem);
line-height: 1.2;
}
}
@media (max-width: 576px) {
h1, .h1 {
font-size: clamp(2rem, 9vw, 2.5rem);
line-height: 1.3;
}
}
@media (max-width: 767px) {
h1, .h1 {
font-size: clamp(2.25rem, 10vw, 2.75rem);
line-height: 1.3;
}
}
@media (max-width: 420px) {
h2, .h2 {
font-size: clamp(1.5rem, 7vw, 2rem);
line-height: 1.3;
}
}
@media (max-width: 576px) {
h2, .h2 {
font-size: clamp(1.75rem, 8vw, 2.25rem);
line-height: 1.3;
}
}
@media (max-width: 767px) {
h2, .h2 {
font-size: clamp(2rem, 9vw, 2.5rem);
line-height: 1.3;
}
}
@media (max-width: 420px) {
h3, .h3 {
font-size: clamp(1.25rem, 6vw, 1.5rem);
line-height: 1.4;
}
}
@media (max-width: 576px) {
h3, .h3 {
font-size: clamp(1.5rem, 7vw, 1.75rem);
line-height: 1.4;
}
}
@media (max-width: 767px) {
h3, .h3 {
font-size: clamp(1.75rem, 8vw, 2rem);
line-height: 1.4;
}
}
@media (max-width: 420px) {
p, .lead-text, .description-text {
font-size: clamp(0.875rem, 4vw, 1rem);
line-height: 1.6;
}
}
@media (max-width: 576px) {
p, .lead-text, .description-text {
font-size: clamp(1rem, 4.5vw, 1.125rem);
line-height: 1.6;
}
}
@media (max-width: 767px) {
p, .lead-text, .description-text {
font-size: clamp(1.125rem, 5vw, 1.25rem);
line-height: 1.7;
}
}
@media (max-width: 420px) {
.row {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
}
@media (max-width: 576px) {
.row {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
}
@media (max-width: 767px) {
.row {
margin-left: -1rem;
margin-right: -1rem;
}
}
@media (max-width: 420px) {
.col-lg-4, .col-md-6, .col-sm-12 {
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.col-lg-4, .col-md-6, .col-sm-12 {
padding-left: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.col-lg-4, .col-md-6, .col-sm-12 {
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.blog-card, .benefit-card, .feature-item, .achievement-item, .process-step {
padding: 1rem;
border-radius: 12px;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.blog-card, .benefit-card, .feature-item, .achievement-item, .process-step {
padding: 1.25rem;
border-radius: 16px;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.blog-card, .benefit-card, .feature-item, .achievement-item, .process-step {
padding: 1.5rem;
border-radius: 20px;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.card-content, .feature-content, .achievement-content {
padding: 0.75rem;
}
}
@media (max-width: 576px) {
.card-content, .feature-content, .achievement-content {
padding: 1rem;
}
}
@media (max-width: 767px) {
.card-content, .feature-content, .achievement-content {
padding: 1.25rem;
}
}
@media (max-width: 420px) {
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
padding: 0.875rem 1.5rem;
font-size: 0.875rem;
border-radius: 25px;
}
}
@media (max-width: 576px) {
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
padding: 1rem 2rem;
font-size: 1rem;
border-radius: 30px;
}
}
@media (max-width: 767px) {
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
padding: 1.25rem 2.5rem;
font-size: 1.125rem;
border-radius: 50px;
}
}
@media (max-width: 420px) {
.cta-buttons, .cta-features {
flex-direction: column;
gap: 0.75rem;
align-items: center;
}
}
@media (max-width: 576px) {
.cta-buttons, .cta-features {
flex-direction: column;
gap: 1rem;
align-items: center;
}
}
@media (max-width: 767px) {
.cta-buttons, .cta-features {
flex-direction: column;
gap: 1rem;
align-items: center;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.cta-buttons, .cta-features {
flex-direction: row;
justify-content: center;
}
}
@media (max-width: 420px) {
.hero-image, .about-image, .card-img {
height: 200px;
border-radius: 12px;
}
}
@media (max-width: 576px) {
.hero-image, .about-image, .card-img {
height: 250px;
border-radius: 16px;
}
}
@media (max-width: 767px) {
.hero-image, .about-image, .card-img {
height: 300px;
border-radius: 20px;
}
}
@media (max-width: 420px) {
.hero-image-container, .about-image-container, .card-image {
border-radius: 12px;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.hero-image-container, .about-image-container, .card-image {
border-radius: 16px;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.hero-image-container, .about-image-container, .card-image {
border-radius: 20px;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.section-padding, .hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (max-width: 576px) {
.section-padding, .hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
@media (max-width: 767px) {
.section-padding, .hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media (max-width: 991px) {
.section-padding, .hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
@media (max-width: 1199px) {
.section-padding, .hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
padding-top: 5rem;
padding-bottom: 5rem;
}
}
@media (max-width: 420px) {
.feature-grid, .benefits-grid, .achievements-grid, .examples-grid, .clients-grid, .cities-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (max-width: 576px) {
.feature-grid, .benefits-grid, .achievements-grid, .examples-grid, .clients-grid, .cities-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 767px) {
.feature-grid, .benefits-grid, .achievements-grid, .examples-grid, .clients-grid, .cities-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.feature-grid, .benefits-grid, .achievements-grid, .examples-grid, .clients-grid, .cities-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.feature-grid, .benefits-grid, .achievements-grid, .examples-grid, .clients-grid, .cities-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
@media (max-width: 420px) {
.feature-icon, .achievement-icon, .benefit-icon, .category-icon, .step-header .step-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
@media (max-width: 576px) {
.feature-icon, .achievement-icon, .benefit-icon, .category-icon, .step-header .step-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
}
@media (max-width: 767px) {
.feature-icon, .achievement-icon, .benefit-icon, .category-icon, .step-header .step-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
@media (max-width: 420px) {
.benefit-icon, .category-icon, .step-header .step-number {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.benefit-icon, .category-icon, .step-header .step-number {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
}
@media (max-width: 767px) {
.benefit-icon, .category-icon, .step-header .step-number {
width: 80px;
height: 80px;
font-size: 2rem;
}
}
@media (max-width: 420px) {
.section-badge, .cta-badge {
padding: 0.625rem 1.25rem;
font-size: 0.75rem;
border-radius: 25px;
}
}
@media (max-width: 576px) {
.section-badge, .cta-badge {
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
border-radius: 30px;
}
}
@media (max-width: 767px) {
.section-badge, .cta-badge {
padding: 0.875rem 1.75rem;
font-size: 0.875rem;
border-radius: 50px;
}
}
@media (max-width: 420px) {
.contact-form-wrapper {
padding: 1rem;
border-radius: 16px;
}
}
@media (max-width: 576px) {
.contact-form-wrapper {
padding: 1.25rem;
border-radius: 20px;
}
}
@media (max-width: 767px) {
.contact-form-wrapper {
padding: 1.5rem;
border-radius: 24px;
}
}
@media (max-width: 420px) {
.form-control, input, textarea, select {
font-size: 0.875rem;
padding: 0.75rem;
height: 44px;
}
}
@media (max-width: 576px) {
.form-control, input, textarea, select {
font-size: 1rem;
padding: 0.875rem;
height: 48px;
}
}
@media (max-width: 767px) {
.form-control, input, textarea, select {
font-size: 1rem;
padding: 1rem;
height: 52px;
}
}
@media (max-width: 420px) {
.header .nav-menu {
width: 100%;
right: -100%;
}
}
@media (max-width: 576px) {
.header .nav-menu {
width: 280px;
right: -280px;
}
}
@media (max-width: 767px) {
.header .nav-menu {
width: 300px;
right: -300px;
}
}
@media (max-width: 420px) {
.header .menu .menu-item a {
padding: 1rem 1rem;
font-size: 0.875rem;
}
}
@media (max-width: 576px) {
.header .menu .menu-item a {
padding: 1.125rem 1.25rem;
font-size: 1rem;
}
}
@media (max-width: 767px) {
.header .menu .menu-item a {
padding: 1.25rem 1.5rem;
font-size: 1rem;
}
}
@media (max-width: 420px) {
footer .footer-top {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (max-width: 576px) {
footer .footer-top {
padding-top: 3rem;
padding-bottom: 2.5rem;
}
}
@media (max-width: 767px) {
footer .footer-top {
padding-top: 4rem;
padding-bottom: 3rem;
}
}
@media (max-width: 991px) {
footer .footer-top {
padding-top: 5rem;
padding-bottom: 4rem;
}
}
@media (max-width: 420px) {
footer .footer-itens ul li a {
justify-content: center;
text-align: center;
font-size: 0.875rem;
}
}
@media (max-width: 576px) {
footer .footer-itens ul li a {
justify-content: center;
text-align: center;
font-size: 1rem;
}
}
@media (max-width: 767px) {
footer .footer-itens ul li a {
justify-content: center;
text-align: center;
font-size: 1rem;
}
}
@media (max-width: 420px) {
.lgpd {
width: 95%;
margin: 0 0.5rem 0.5rem 0.5rem;
padding: 1rem;
}
}
@media (max-width: 576px) {
.lgpd {
width: 90%;
margin: 0 1rem 1rem 1rem;
padding: 1.25rem;
}
}
@media (max-width: 767px) {
.lgpd {
width: 85%;
margin: 0 1.5rem 1.5rem 1.5rem;
padding: 1.5rem;
}
}
@media (max-width: 767px) {
.fade-in, .slide-in-left, .slide-in-right, .scale-in {
animation-duration: 0.6s;
}
.btn-hero:hover, .btn-primary:hover, .btn-whatsapp:hover {
transform: translateY(-3px) scale(1.02);
}
.feature-item:hover, .benefit-card:hover, .blog-card:hover {
transform: translateY(-3px);
}
}
@media (max-width: 767px) {
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
min-height: 44px;
min-width: 44px;
}
.feature-item, .benefit-card, .blog-card {
cursor: pointer;
}
.hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
-webkit-overflow-scrolling: touch;
}
}
@media print {
.hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero,
.beneficios-section, .cta-hero-section, .contact-section {
background: white !important;
padding: 1rem 0 !important;
}
.feature-item, .benefit-card, .blog-card, .achievement-item, .process-step {
box-shadow: none !important;
border: 1px solid #ddd !important;
break-inside: avoid;
}
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
display: none !important;
}
.image-overlay, .card-overlay {
display: none !important;
}
}
.btn-hero:focus, .btn-primary:focus, .btn-whatsapp:focus,
.btn-about:focus, .btn-sidebar:focus {
outline: 3px solid rgba(255, 191, 0, 0.5);
outline-offset: 2px;
}
.blog-card:focus-within {
outline: 3px solid rgba(255, 191, 0, 0.5);
outline-offset: 2px;
}
@media (max-width: 767px) {
.hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero,
.beneficios-section, .cta-hero-section, .contact-section {
will-change: auto;
}
.feature-item, .benefit-card, .blog-card, .achievement-item, .process-step {
will-change: auto;
}
}
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media (max-width: 767px) {
body {
overflow-x: hidden;
width: 100%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 3640px) {
.container {
max-width: 1400px;
}
}
@media (max-width: 767px) {
.d-mobile-block {
display: block !important;
}
}
@media (max-width: 767px) {
.d-mobile-none {
display: none !important;
}
}
@media (max-width: 767px) {
.text-mobile-center {
text-align: center !important;
}
}
@media (max-width: 767px) {
.mb-mobile-0 {
margin-bottom: 0 !important;
}
}
@media (max-width: 767px) {
.mb-mobile-1 {
margin-bottom: 0.5rem !important;
}
}
@media (max-width: 767px) {
.mb-mobile-2 {
margin-bottom: 1rem !important;
}
}
@media (max-width: 767px) {
.mb-mobile-3 {
margin-bottom: 1.5rem !important;
}
}
@media (max-width: 767px) {
.mb-mobile-4 {
margin-bottom: 2rem !important;
}
}
@media (max-width: 767px) {
.mb-mobile-5 {
margin-bottom: 2.5rem !important;
}
}
/* ===== PAGE-SPECIFIC RESPONSIVE FIXES ===== */
@media (max-width: 420px) {
.banner {
min-height: 80vh;
padding: 1rem 0;
}
}
@media (max-width: 576px) {
.banner {
min-height: 85vh;
padding: 1.5rem 0;
}
}
@media (max-width: 767px) {
.banner {
min-height: 90vh;
padding: 2rem 0;
}
}
@media (max-width: 420px) {
.banner .title h1 {
font-size: clamp(1.5rem, 10vw, 2rem);
line-height: 1.1;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.banner .title h1 {
font-size: clamp(2rem, 12vw, 2.5rem);
line-height: 1.2;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.banner .title h1 {
font-size: clamp(2.5rem, 15vw, 3rem);
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.banner .title p {
font-size: 0.75rem;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.banner .title p {
font-size: 0.875rem;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.banner .title p {
font-size: 1rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.banner .title a {
padding: 0.75rem 1.5rem;
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
.banner .title a {
padding: 1rem 2rem;
font-size: 0.875rem;
}
}
@media (max-width: 767px) {
.banner .title a {
padding: 1.25rem 2.5rem;
font-size: 1rem;
}
}
@media (max-width: 420px) {
.hero-text-section {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.hero-text-section {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.hero-text-section {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.hero-title {
font-size: clamp(1.75rem, 8vw, 2.25rem);
line-height: 1.2;
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: clamp(2rem, 9vw, 2.5rem);
line-height: 1.3;
margin-bottom: 1.75rem;
}
}
@media (max-width: 767px) {
.hero-title {
font-size: clamp(2.25rem, 10vw, 2.75rem);
line-height: 1.3;
margin-bottom: 2rem;
}
}
@media (max-width: 420px) {
.lead-text {
font-size: clamp(0.875rem, 4vw, 1rem);
line-height: 1.6;
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.lead-text {
font-size: clamp(1rem, 4.5vw, 1.125rem);
line-height: 1.6;
margin-bottom: 1.75rem;
}
}
@media (max-width: 767px) {
.lead-text {
font-size: clamp(1.125rem, 5vw, 1.25rem);
line-height: 1.7;
margin-bottom: 2rem;
}
}
@media (max-width: 420px) {
.description-text {
font-size: clamp(0.8rem, 3.5vw, 0.95rem);
line-height: 1.6;
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.description-text {
font-size: clamp(0.9rem, 4vw, 1rem);
line-height: 1.6;
margin-bottom: 1.75rem;
}
}
@media (max-width: 767px) {
.description-text {
font-size: clamp(1rem, 4.5vw, 1.125rem);
line-height: 1.7;
margin-bottom: 2rem;
}
}
@media (max-width: 420px) {
.feature-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 2rem;
}
}
@media (max-width: 576px) {
.feature-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
}
@media (max-width: 767px) {
.feature-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 3rem;
}
}
@media (max-width: 420px) {
.feature-item {
padding: 1rem;
gap: 1rem;
}
}
@media (max-width: 576px) {
.feature-item {
padding: 1.25rem;
gap: 1.25rem;
}
}
@media (max-width: 767px) {
.feature-item {
padding: 1.5rem;
gap: 1.5rem;
}
}
@media (max-width: 420px) {
.process-step {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.process-step {
padding: 1.75rem;
margin-bottom: 1.75rem;
}
}
@media (max-width: 767px) {
.process-step {
padding: 2rem;
margin-bottom: 2rem;
}
}
@media (max-width: 420px) {
.step-header {
flex-direction: column;
text-align: center;
gap: 1rem;
margin-bottom: 1.25rem;
}
}
@media (max-width: 576px) {
.step-header {
flex-direction: column;
text-align: center;
gap: 1.25rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 767px) {
.step-header {
flex-direction: column;
text-align: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.step-header {
flex-direction: row;
text-align: left;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.step-header .step-title {
font-size: 1.125rem;
}
}
@media (max-width: 576px) {
.step-header .step-title {
font-size: 1.25rem;
}
}
@media (max-width: 767px) {
.step-header .step-title {
font-size: 1.5rem;
}
}
@media (max-width: 420px) {
.solutions-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
margin: 1.25rem 0;
}
}
@media (max-width: 576px) {
.solutions-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin: 1.5rem 0;
}
}
@media (max-width: 767px) {
.solutions-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin: 1.5rem 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.solutions-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 420px) {
.intro-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
gap: 1.5rem;
}
}
@media (max-width: 576px) {
.intro-card {
flex-direction: column;
text-align: center;
padding: 1.75rem;
gap: 1.75rem;
}
}
@media (max-width: 767px) {
.intro-card {
flex-direction: column;
text-align: center;
padding: 2rem;
gap: 2rem;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.intro-card {
flex-direction: row;
text-align: left;
padding: 2.5rem;
gap: 2rem;
}
}
@media (max-width: 420px) {
.intro-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.intro-icon {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
}
@media (max-width: 767px) {
.intro-icon {
width: 80px;
height: 80px;
font-size: 2rem;
}
}
@media (max-width: 420px) {
.examples-grid, .clients-grid, .cities-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (max-width: 576px) {
.examples-grid, .clients-grid, .cities-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 767px) {
.examples-grid, .clients-grid, .cities-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.examples-grid, .clients-grid, .cities-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.examples-grid, .clients-grid, .cities-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
@media (max-width: 420px) {
.blog-card {
border-radius: 12px;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.blog-card {
border-radius: 16px;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.blog-card {
border-radius: 20px;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.blog-card .card-content {
padding: 1rem;
}
}
@media (max-width: 576px) {
.blog-card .card-content {
padding: 1.25rem;
}
}
@media (max-width: 767px) {
.blog-card .card-content {
padding: 1.5rem;
}
}
@media (max-width: 420px) {
.blog-card .card-title {
font-size: 1rem;
margin: 1rem 0 0.75rem 0;
}
}
@media (max-width: 576px) {
.blog-card .card-title {
font-size: 1.125rem;
margin: 1.25rem 0 1rem 0;
}
}
@media (max-width: 767px) {
.blog-card .card-title {
font-size: 1.25rem;
margin: 1.5rem 0 1rem 0;
}
}
@media (max-width: 420px) {
.blog-card .card-excerpt {
font-size: 0.8rem;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.blog-card .card-excerpt {
font-size: 0.875rem;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.blog-card .card-excerpt {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.blog-card .card-meta {
gap: 0.75rem;
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
.blog-card .card-meta {
gap: 1rem;
font-size: 0.8rem;
}
}
@media (max-width: 767px) {
.blog-card .card-meta {
gap: 1rem;
font-size: 0.875rem;
}
}
@media (max-width: 420px) {
.texto-otimizado {
padding: 1.5rem 0;
}
}
@media (max-width: 576px) {
.texto-otimizado {
padding: 2rem 0;
}
}
@media (max-width: 767px) {
.texto-otimizado {
padding: 2.5rem 0;
}
}
@media (max-width: 420px) {
.texto-otimizado .container {
padding: 0 0.75rem;
}
}
@media (max-width: 576px) {
.texto-otimizado .container {
padding: 0 1rem;
}
}
@media (max-width: 767px) {
.texto-otimizado .container {
padding: 0 1.25rem;
}
}
@media (max-width: 420px) {
.post-title {
font-size: clamp(1.5rem, 8vw, 2rem);
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.post-title {
font-size: clamp(1.75rem, 9vw, 2.25rem);
margin-bottom: 2rem;
}
}
@media (max-width: 767px) {
.post-title {
font-size: clamp(2rem, 10vw, 2.5rem);
margin-bottom: 2.5rem;
}
}
@media (max-width: 420px) {
.post-heading {
font-size: 1.25rem;
margin: 1.5rem 0 1rem 0;
}
}
@media (max-width: 576px) {
.post-heading {
font-size: 1.5rem;
margin: 2rem 0 1.25rem 0;
}
}
@media (max-width: 767px) {
.post-heading {
font-size: 1.8rem;
margin: 3rem 0 1.5rem 0;
}
}
@media (max-width: 420px) {
.cta-central {
padding: 1.5rem 0.75rem;
margin: 2rem 0;
}
}
@media (max-width: 576px) {
.cta-central {
padding: 2rem 1rem;
margin: 2.5rem 0;
}
}
@media (max-width: 767px) {
.cta-central {
padding: 2.5rem 1.5rem;
margin: 3rem 0;
}
}
@media (max-width: 420px) {
.about-section {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.about-section {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.about-section {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.about-image {
height: 250px;
}
}
@media (max-width: 576px) {
.about-image {
height: 300px;
}
}
@media (max-width: 767px) {
.about-image {
height: 350px;
}
}
@media (max-width: 420px) {
.achievements-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 2rem;
}
}
@media (max-width: 576px) {
.achievements-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
}
@media (max-width: 767px) {
.achievements-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.achievements-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media (max-width: 420px) {
.contact-section {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.contact-section {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.contact-section {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.contact-form-wrapper {
padding: 1rem;
border-radius: 16px;
}
}
@media (max-width: 576px) {
.contact-form-wrapper {
padding: 1.25rem;
border-radius: 20px;
}
}
@media (max-width: 767px) {
.contact-form-wrapper {
padding: 1.5rem;
border-radius: 24px;
}
}
@media (max-width: 420px) {
footer .footer-top {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (max-width: 576px) {
footer .footer-top {
padding-top: 3rem;
padding-bottom: 2.5rem;
}
}
@media (max-width: 767px) {
footer .footer-top {
padding-top: 4rem;
padding-bottom: 3rem;
}
}
@media (max-width: 420px) {
footer .footer-bottom {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
footer .footer-bottom {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
@media (max-width: 767px) {
footer .footer-bottom {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
@media (max-width: 420px) {
.header .header-main {
padding: 0.5rem;
}
}
@media (max-width: 576px) {
.header .header-main {
padding: 0.75rem;
}
}
@media (max-width: 767px) {
.header .header-main {
padding: 1rem;
}
}
@media (max-width: 420px) {
.img-logo {
max-width: 100px;
}
}
@media (max-width: 576px) {
.img-logo {
max-width: 120px;
}
}
@media (max-width: 767px) {
.img-logo {
max-width: 130px;
}
}
@media (max-width: 420px) {
.cta-hero-section, .final-cta-section {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.cta-hero-section, .final-cta-section {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.cta-hero-section, .final-cta-section {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.cta-title {
font-size: clamp(1.75rem, 8vw, 2.25rem);
margin-bottom: 1.25rem;
}
}
@media (max-width: 576px) {
.cta-title {
font-size: clamp(2rem, 9vw, 2.5rem);
margin-bottom: 1.5rem;
}
}
@media (max-width: 767px) {
.cta-title {
font-size: clamp(2.25rem, 10vw, 2.75rem);
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.cta-description {
font-size: clamp(0.875rem, 4vw, 1rem);
margin-bottom: 2rem;
}
}
@media (max-width: 576px) {
.cta-description {
font-size: clamp(1rem, 4.5vw, 1.125rem);
margin-bottom: 2.5rem;
}
}
@media (max-width: 767px) {
.cta-description {
font-size: clamp(1.125rem, 5vw, 1.25rem);
margin-bottom: 3rem;
}
}
@media (max-width: 420px) {
.beneficios-section {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.beneficios-section {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.beneficios-section {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.benefits-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
@media (max-width: 576px) {
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
}
@media (max-width: 767px) {
.benefits-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.benefits-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
@media (max-width: 420px) {
.service-area {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.service-area {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.service-area {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.card-service {
margin-bottom: 1.5rem;
}
}
@media (max-width: 576px) {
.card-service {
margin-bottom: 2rem;
}
}
@media (max-width: 767px) {
.card-service {
margin-bottom: 2.5rem;
}
}
@media (max-width: 420px) {
.card-service .content .text-service {
padding: 1rem;
}
}
@media (max-width: 576px) {
.card-service .content .text-service {
padding: 1.25rem;
}
}
@media (max-width: 767px) {
.card-service .content .text-service {
padding: 1.5rem;
}
}
@media (max-width: 420px) {
.card-service .content .text-service h3 {
font-size: 1.125rem;
margin-top: 2rem;
}
}
@media (max-width: 576px) {
.card-service .content .text-service h3 {
font-size: 1.25rem;
margin-top: 2.5rem;
}
}
@media (max-width: 767px) {
.card-service .content .text-service h3 {
font-size: 1.4rem;
margin-top: 3rem;
}
}
@media (max-width: 420px) {
.feedback-area {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.feedback-area {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.feedback-area {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.card-feedback {
padding: 0.5rem;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.card-feedback {
padding: 0.75rem;
margin-bottom: 1.25rem;
}
}
@media (max-width: 767px) {
.card-feedback {
padding: 1rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 420px) {
.card-feedback .text-feedback {
padding: 1rem;
font-size: 0.75rem;
}
}
@media (max-width: 576px) {
.card-feedback .text-feedback {
padding: 1.25rem;
font-size: 0.8rem;
}
}
@media (max-width: 767px) {
.card-feedback .text-feedback {
padding: 1.5rem;
font-size: 0.875rem;
}
}
@media (max-width: 420px) {
.count-area {
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.count-area {
padding: 2.5rem 0;
}
}
@media (max-width: 767px) {
.count-area {
padding: 3rem 0;
}
}
@media (max-width: 420px) {
.count-card .counter {
font-size: 2.5rem;
}
}
@media (max-width: 576px) {
.count-card .counter {
font-size: 3rem;
}
}
@media (max-width: 767px) {
.count-card .counter {
font-size: 3.5rem;
}
}
@media (max-width: 991px) {
.count-card .counter {
font-size: 4rem;
}
}
@media (max-width: 420px) {
.count-card .text {
font-size: 0.875rem;
}
}
@media (max-width: 576px) {
.count-card .text {
font-size: 0.95rem;
}
}
@media (max-width: 767px) {
.count-card .text {
font-size: 1rem;
}
}
@media (max-width: 420px) {
.breadcrumb {
background-size: cover;
}
}
@media (max-width: 576px) {
.breadcrumb {
background-size: cover;
}
}
@media (max-width: 767px) {
.breadcrumb {
background-size: cover;
}
}
@media (max-width: 420px) {
.breadcrumb-height {
height: 200px;
}
}
@media (max-width: 576px) {
.breadcrumb-height {
height: 250px;
}
}
@media (max-width: 767px) {
.breadcrumb-height {
height: 300px;
}
}
@media (max-width: 420px) {
.breadcrumb_iner {
padding: 3rem 0;
}
}
@media (max-width: 576px) {
.breadcrumb_iner {
padding: 4rem 0;
}
}
@media (max-width: 767px) {
.breadcrumb_iner {
padding: 5rem 0;
}
}
@media (max-width: 991px) {
.breadcrumb_iner {
padding: 7rem 0;
}
}
@media (max-width: 420px) {
.breadcrumb_iner .breadcrumb_iner_item h1 {
font-size: 1.75rem;
}
}
@media (max-width: 576px) {
.breadcrumb_iner .breadcrumb_iner_item h1 {
font-size: 2rem;
}
}
@media (max-width: 767px) {
.breadcrumb_iner .breadcrumb_iner_item h1 {
font-size: 2.5rem;
}
}
@media (max-width: 991px) {
.breadcrumb_iner .breadcrumb_iner_item h1 {
font-size: 3.3rem;
}
}
@media (max-width: 767px) {
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
margin: 0.5rem;
}
.blog-card, .benefit-card, .feature-item, .achievement-item, .process-step {
margin-bottom: 1.5rem;
}
section {
margin-bottom: 0;
}
.form-control, input, textarea, select {
margin-bottom: 1rem;
}
}
@media (max-width: 420px) {
.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.section-padding, .hero-text-section, .about-section, .como-funciona-hero, .consultoria-hero {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.btn-hero, .btn-primary, .btn-whatsapp, .btn-about, .btn-sidebar {
padding: 0.75rem 1.25rem;
font-size: 0.8rem;
}
.blog-card, .benefit-card, .feature-item, .achievement-item, .process-step {
padding: 0.75rem;
}
}
/* ===== FLOATING BUTTONS - PROFESSIONAL FIXED POSITIONING ===== */
.back-top {
position: fixed !important;
bottom: 20px !important;
right: 20px !important;
z-index: 9999 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #987200 !important;
height: 50px !important;
width: 50px !important;
font-size: 20px !important;
border-radius: 50% !important;
border: 2px solid rgba(0, 0, 0, 0) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(20px) !important;
}
.back-top.show {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.back-top:hover {
background: rgb(101, 75.75, 0) !important;
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
}
.back-top:active {
transform: translateY(-1px) !important;
}
.back-top i {
color: #ffffff !important;
transition: transform 0.3s ease !important;
}
.back-top:hover i {
transform: translateY(-2px) !important;
}
.back-top a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
text-decoration: none !important;
color: inherit !important;
}
@media (max-width: 420px) {
.back-top {
bottom: 15px !important;
right: 15px !important;
height: 45px !important;
width: 45px !important;
font-size: 18px !important;
}
}
@media (max-width: 576px) {
.back-top {
bottom: 18px !important;
right: 18px !important;
height: 48px !important;
width: 48px !important;
font-size: 19px !important;
}
}
@media (max-width: 767px) {
.back-top {
bottom: 20px !important;
right: 20px !important;
height: 50px !important;
width: 50px !important;
font-size: 20px !important;
}
}
@media (max-width: 991px) {
.back-top {
bottom: 25px !important;
right: 25px !important;
height: 55px !important;
width: 55px !important;
font-size: 22px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.back-top {
bottom: 30px !important;
right: 30px !important;
height: 60px !important;
width: 60px !important;
font-size: 24px !important;
}
}
#whatsclub-widget {
position: fixed !important;
bottom: 90px !important;
right: 20px !important;
z-index: 9998 !important;
font-family: inherit !important;
}
@media (max-width: 420px) {
#whatsclub-widget {
bottom: 75px !important;
right: 15px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget {
bottom: 80px !important;
right: 18px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget {
bottom: 85px !important;
right: 20px !important;
}
}
@media (max-width: 991px) {
#whatsclub-widget {
bottom: 100px !important;
right: 25px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#whatsclub-widget {
bottom: 110px !important;
right: 30px !important;
}
}
#whatsclub-widget .wc--button-fab {
max-width: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
outline: 0 !important;
border-radius: 100% !important;
border: none !important;
background: #25d366 !important;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
}
#whatsclub-widget .wc--button-fab:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
}
#whatsclub-widget .wc--button-fab:active {
transform: translateY(-1px) !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--button-fab {
max-width: 45px !important;
min-width: 45px !important;
min-height: 45px !important;
max-height: 45px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--button-fab {
max-width: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--button-fab {
max-width: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
max-height: 50px !important;
}
}
@media (max-width: 991px) {
#whatsclub-widget .wc--button-fab {
max-width: 55px !important;
min-width: 55px !important;
min-height: 55px !important;
max-height: 55px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#whatsclub-widget .wc--button-fab {
max-width: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
}
}
#whatsclub-widget .wc--button-fab .wc--icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
#whatsclub-widget .wc--button-fab .wc--icon img {
width: 25px !important;
height: 25px !important;
transition: transform 0.3s ease !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--button-fab .wc--icon img {
width: 22px !important;
height: 22px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--button-fab .wc--icon img {
width: 24px !important;
height: 24px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--button-fab .wc--icon img {
width: 25px !important;
height: 25px !important;
}
}
@media (max-width: 991px) {
#whatsclub-widget .wc--button-fab .wc--icon img {
width: 28px !important;
height: 28px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#whatsclub-widget .wc--button-fab .wc--icon img {
width: 30px !important;
height: 30px !important;
}
}
#whatsclub-widget .wc--float-ballon {
position: absolute !important;
display: flex !important;
flex-direction: column !important;
width: 280px !important;
max-width: calc(100vw - 40px) !important;
bottom: 16px !important;
right: 62px !important;
padding: 0 !important;
background: #fff !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
border-radius: 16px !important;
transition: all 0.3s ease !important;
opacity: 0 !important;
transform: translateY(20px) !important;
overflow: hidden !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon {
width: calc(100vw - 30px) !important;
max-width: calc(100vw - 30px) !important;
right: 53px !important;
border-radius: 12px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon {
width: calc(100vw - 36px) !important;
max-width: calc(100vw - 36px) !important;
right: 58px !important;
border-radius: 14px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon {
width: calc(100vw - 40px) !important;
max-width: calc(100vw - 40px) !important;
right: 62px !important;
border-radius: 16px !important;
}
}
@media (max-width: 991px) {
#whatsclub-widget .wc--float-ballon {
width: 320px !important;
max-width: calc(100vw - 50px) !important;
right: 70px !important;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
#whatsclub-widget .wc--float-ballon {
width: 350px !important;
max-width: calc(100vw - 60px) !important;
right: 80px !important;
}
}
#whatsclub-widget .wc--float-ballon.wc--float-ballon---open {
opacity: 1 !important;
transform: translateY(0) !important;
animation: showBallon 0.4s ease forwards !important;
}
#whatsclub-widget .wc--float-ballon.wc--float-ballon---close {
display: none !important;
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--title {
background: #25d366 !important;
height: 54px !important;
overflow: hidden !important;
border-radius: 16px 16px 0 0 !important;
display: flex !important;
align-items: center !important;
padding: 0 16px !important;
color: #fff !important;
font-size: 18px !important;
font-weight: 600 !important;
border-bottom: solid 1px rgba(255, 255, 255, 0.1) !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--title {
height: 48px !important;
font-size: 16px !important;
padding: 0 12px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--title {
height: 50px !important;
font-size: 17px !important;
padding: 0 14px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--title {
height: 52px !important;
font-size: 18px !important;
padding: 0 16px !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content {
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
max-height: calc(100vh - 200px) !important;
overflow: auto !important;
padding: 16px !important;
justify-content: flex-start !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content {
padding: 12px !important;
max-height: calc(100vh - 180px) !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content {
padding: 14px !important;
max-height: calc(100vh - 190px) !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content {
padding: 16px !important;
max-height: calc(100vh - 200px) !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--text {
width: 100% !important;
font-size: 16px !important;
line-height: 1.5 !important;
margin: 0 0 16px 0 !important;
color: #333 !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--text {
font-size: 14px !important;
line-height: 1.4 !important;
margin: 0 0 12px 0 !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--text {
font-size: 15px !important;
line-height: 1.45 !important;
margin: 0 0 14px 0 !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--text {
font-size: 16px !important;
line-height: 1.5 !important;
margin: 0 0 16px 0 !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user {
display: flex !important;
background: #f8f9fa !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
border-radius: 8px !important;
margin-bottom: 12px !important;
padding: 12px !important;
transition: all 0.3s ease !important;
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user:hover {
background: #e9ecef !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user {
padding: 10px !important;
margin-bottom: 10px !important;
border-radius: 6px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user {
padding: 11px !important;
margin-bottom: 11px !important;
border-radius: 7px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user {
padding: 12px !important;
margin-bottom: 12px !important;
border-radius: 8px !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user---thumb {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
object-fit: cover !important;
margin: 0 12px 0 0 !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user---thumb {
width: 40px !important;
height: 40px !important;
margin: 0 10px 0 0 !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user---thumb {
width: 44px !important;
height: 44px !important;
margin: 0 11px 0 0 !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user---thumb {
width: 48px !important;
height: 48px !important;
margin: 0 12px 0 0 !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content {
flex-grow: 1 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---name {
font-size: 16px !important;
font-weight: 600 !important;
color: #333 !important;
margin-bottom: 4px !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---name {
font-size: 14px !important;
margin-bottom: 3px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---name {
font-size: 15px !important;
margin-bottom: 3px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---name {
font-size: 16px !important;
margin-bottom: 4px !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---phone {
font-size: 14px !important;
color: #666 !important;
display: block !important;
margin-bottom: 8px !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---phone {
font-size: 12px !important;
margin-bottom: 6px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---phone {
font-size: 13px !important;
margin-bottom: 7px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---phone {
font-size: 14px !important;
margin-bottom: 8px !important;
}
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---button {
display: flex !important;
width: 100% !important;
height: 36px !important;
background: #075e54 !important;
color: #fff !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(7, 94, 84, 0.2) !important;
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---button:hover {
background: rgb(3.4653465347, 46.5346534653, 41.5841584158) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(7, 94, 84, 0.3) !important;
}
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---button:active {
transform: translateY(0) !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---button {
height: 32px !important;
font-size: 13px !important;
border-radius: 5px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---button {
height: 34px !important;
font-size: 13px !important;
border-radius: 5px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc--float-ballon--content .wc--float-ballon--user .wc--float-ballon--user--content .wc--float-ballon--user--content---button {
height: 36px !important;
font-size: 14px !important;
border-radius: 6px !important;
}
}
#whatsclub-widget .wc--float-ballon .wc-float-ballon--button-close {
position: absolute !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0, 0, 0, 0.1) !important;
border: none !important;
outline: 0 !important;
right: 8px !important;
top: 8px !important;
opacity: 0.6 !important;
color: #666 !important;
font-size: 18px !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
}
#whatsclub-widget .wc--float-ballon .wc-float-ballon--button-close:hover {
opacity: 1 !important;
background: rgba(0, 0, 0, 0.15) !important;
}
@media (max-width: 420px) {
#whatsclub-widget .wc--float-ballon .wc-float-ballon--button-close {
width: 24px !important;
height: 24px !important;
font-size: 16px !important;
right: 6px !important;
top: 6px !important;
}
}
@media (max-width: 576px) {
#whatsclub-widget .wc--float-ballon .wc-float-ballon--button-close {
width: 26px !important;
height: 26px !important;
font-size: 17px !important;
right: 7px !important;
top: 7px !important;
}
}
@media (max-width: 767px) {
#whatsclub-widget .wc--float-ballon .wc-float-ballon--button-close {
width: 28px !important;
height: 28px !important;
font-size: 18px !important;
right: 8px !important;
top: 8px !important;
}
}
@keyframes showBallon {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.back-top {
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(20px) !important;
}
.back-top.show {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
@media (max-width: 767px) {
.back-top,
#whatsclub-widget .wc--button-fab {
min-height: 44px !important;
min-width: 44px !important;
}
.back-top:active,
#whatsclub-widget .wc--button-fab:active {
transform: scale(0.95) !important;
}
.back-top,
#whatsclub-widget {
-webkit-overflow-scrolling: touch !important;
will-change: transform !important;
}
}
.back-top:focus,
#whatsclub-widget .wc--button-fab:focus {
outline: 3px solid rgba(255, 191, 0, 0.5) !important;
outline-offset: 2px !important;
}
@media print {
.back-top,
#whatsclub-widget {
display: none !important;
}
}
@media (prefers-contrast: high) {
.back-top {
border: 2px solid #000 !important;
}
#whatsclub-widget .wc--button-fab {
border: 2px solid #000 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.back-top,
#whatsclub-widget .wc--button-fab,
#whatsclub-widget .wc--float-ballon {
transition: none !important;
animation: none !important;
}
.back-top:hover,
#whatsclub-widget .wc--button-fab:hover {
transform: none !important;
}
}
/* Estilos para botões em seções CTA sem .cta-buttons */
.cta-section .cta-content .btn-primary {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}
.cta-section .cta-content .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4);
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: #ffffff;
text-decoration: none;
}
.cta-section .cta-content .btn-primary i {
transition: transform 0.3s ease;
}
.cta-section .cta-content .btn-primary:hover i {
transform: translateX(5px);
}
/* ===== CONTACT SECTION - RESPONSIVIDADE PROFISSIONAL ===== */
/* Responsividade para tablets */
@media (max-width: 991px) {
.contact-section {
padding: 4rem 0;
}
.contact-section .section-header {
margin-bottom: 3rem;
}
.contact-section .section-title {
font-size: 2.25rem;
}
.contact-section .section-subtitle {
font-size: 1.1rem;
}
.contact-info {
margin-bottom: 2rem;
}
.contact-feature {
gap: 1.25rem;
margin-bottom: 1.75rem;
}
.contact-feature .feature-icon {
width: 55px;
height: 55px;
}
.contact-feature .feature-icon i {
font-size: 1.4rem;
}
.contact-feature .feature-content h3 {
font-size: 1.1rem;
}
.contact-feature .feature-content p {
font-size: 0.9rem;
}
.contact-cta {
text-align: center;
padding: 1.5rem;
border-radius: 16px;
background: rgba(255, 191, 0, 0.05);
border: 1px solid rgba(255, 191, 0, 0.1);
}
.contact-form-wrapper {
padding: 2rem;
border-radius: 20px;
}
}
/* Responsividade para mobile grande */
@media (max-width: 767px) {
.contact-section {
padding: 3rem 0;
}
.contact-section .section-header {
margin-bottom: 2.5rem;
}
.contact-section .section-title {
font-size: 2rem;
}
.contact-section .section-subtitle {
font-size: 1rem;
}
.contact-info {
margin-bottom: 1.5rem;
}
.contact-feature {
flex-direction: column;
text-align: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.contact-feature .feature-icon {
width: 50px;
height: 50px;
margin: 0 auto;
}
.contact-feature .feature-icon i {
font-size: 1.3rem;
}
.contact-feature .feature-content h3 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
}
.contact-feature .feature-content p {
font-size: 0.85rem;
line-height: 1.5;
}
.contact-cta {
padding: 1.25rem;
margin-top: 1rem;
}
.contact-cta h3 {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.contact-cta p {
font-size: 0.9rem;
margin-bottom: 1rem;
}
.btn-whatsapp-contact {
width: 100%;
justify-content: center;
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.contact-form-wrapper {
padding: 1.5rem;
border-radius: 18px;
margin-top: 1rem;
}
}
/* Responsividade para mobile médio */
@media (max-width: 576px) {
.contact-section {
padding: 2.5rem 0;
}
.contact-section .section-header {
margin-bottom: 2rem;
}
.contact-section .section-title {
font-size: 1.75rem;
}
.contact-section .section-subtitle {
font-size: 0.95rem;
}
.contact-feature {
padding: 1rem;
margin-bottom: 1.25rem;
}
.contact-feature .feature-icon {
width: 45px;
height: 45px;
}
.contact-feature .feature-icon i {
font-size: 1.2rem;
}
.contact-feature .feature-content h3 {
font-size: 1rem;
}
.contact-feature .feature-content p {
font-size: 0.8rem;
}
.contact-cta {
padding: 1rem;
}
.contact-cta h3 {
font-size: 1.1rem;
}
.contact-cta p {
font-size: 0.85rem;
}
.btn-whatsapp-contact {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
.contact-form-wrapper {
padding: 1.25rem;
border-radius: 16px;
}
}
/* Responsividade para mobile pequeno */
@media (max-width: 420px) {
.contact-section {
padding: 2rem 0;
}
.contact-section .section-header {
margin-bottom: 1.75rem;
}
.contact-section .section-title {
font-size: 1.6rem;
}
.contact-section .section-subtitle {
font-size: 0.9rem;
}
.contact-feature {
padding: 0.875rem;
margin-bottom: 1rem;
}
.contact-feature .feature-icon {
width: 40px;
height: 40px;
}
.contact-feature .feature-icon i {
font-size: 1.1rem;
}
.contact-feature .feature-content h3 {
font-size: 0.95rem;
}
.contact-feature .feature-content p {
font-size: 0.75rem;
}
.contact-cta {
padding: 0.875rem;
}
.contact-cta h3 {
font-size: 1rem;
}
.contact-cta p {
font-size: 0.8rem;
}
.btn-whatsapp-contact {
padding: 0.7rem 1rem;
font-size: 0.85rem;
}
.contact-form-wrapper {
padding: 1rem;
border-radius: 14px;
}
}
/* Melhorias específicas para formulário responsivo */
@media (max-width: 767px) {
.contact-form-wrapper .form-group {
margin-bottom: 1.25rem;
}
.contact-form-wrapper .form-control {
padding: 0.875rem 1rem;
font-size: 0.95rem;
border-radius: 12px;
}
.contact-form-wrapper .btn-primary {
width: 100%;
padding: 1rem 1.5rem;
font-size: 1rem;
border-radius: 12px;
}
}
@media (max-width: 576px) {
.contact-form-wrapper .form-control {
padding: 0.75rem 0.875rem;
font-size: 0.9rem;
border-radius: 10px;
}
.contact-form-wrapper .btn-primary {
padding: 0.875rem 1.25rem;
font-size: 0.95rem;
border-radius: 10px;
}
}
/* Otimizações para orientação landscape em mobile */
@media (max-width: 767px) and (orientation: landscape) {
.contact-section {
padding: 2rem 0;
}
.contact-feature {
flex-direction: row;
text-align: left;
gap: 1rem;
}
.contact-feature .feature-icon {
margin: 0;
}
}
/* Melhorias para dispositivos de alta densidade */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.contact-feature .feature-icon {
box-shadow: 0 2px 10px rgba(255, 191, 0, 0.2);
}
.contact-form-wrapper {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
}
/* ===== BREADCRUMB RESPONSIVO PARA PÁGINA DE CONTATO ===== */
.breadcrumb .breadcrumb_iner_item h1 {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.2;
}
/* Responsividade específica para breadcrumb de contato */
@media (max-width: 767px) {
.breadcrumb .breadcrumb_iner_item h1 {
font-size: 1.8rem;
line-height: 1.3;
}
.breadcrumb .breadcrumb_iner_item p {
font-size: 0.9rem;
line-height: 1.4;
}
}
@media (max-width: 576px) {
.breadcrumb .breadcrumb_iner_item h1 {
font-size: 1.6rem;
line-height: 1.3;
}
.breadcrumb .breadcrumb_iner_item p {
font-size: 0.85rem;
line-height: 1.4;
}
}
@media (max-width: 420px) {
.breadcrumb .breadcrumb_iner_item h1 {
font-size: 1.4rem;
line-height: 1.3;
}
.breadcrumb .breadcrumb_iner_item p {
font-size: 0.8rem;
line-height: 1.4;
}
}
/* ===== ESTILOS PARA TEXTOS FORA DOS CARDS - PÁGINAS DE SERVIÇO ===== */
.content-intro,
.content-conclusion {
background: #ffffff;
border-radius: 20px;
padding: 2.5rem;
margin-bottom: 2rem;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(255, 191, 0, 0.1);
text-align: center;
position: relative;
overflow: hidden;
}
.content-intro::before,
.content-conclusion::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 20px 20px 0 0;
}
.content-intro h2,
.content-conclusion h2 {
font-size: 1.75rem;
font-weight: 700;
color: #424242;
margin-bottom: 1.5rem;
line-height: 1.3;
position: relative;
}
.content-intro h2::after,
.content-conclusion h2::after {
content: '';
position: absolute;
bottom: -0.75rem;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(135deg, #ffbf00, #ffda6a);
border-radius: 2px;
}
.content-intro p,
.content-conclusion p {
font-size: 1.1rem;
line-height: 1.7;
color: #757575;
margin-bottom: 1.25rem;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.content-intro p:last-child,
.content-conclusion p:last-child {
margin-bottom: 0;
}
.content-intro p strong,
.content-conclusion p strong {
color: #ffbf00;
font-weight: 700;
}
/* Responsividade para content-intro e content-conclusion */
@media (max-width: 768px) {
.content-intro,
.content-conclusion {
padding: 2rem;
margin-bottom: 1.5rem;
}
.content-intro h2,
.content-conclusion h2 {
font-size: 1.5rem;
margin-bottom: 1.25rem;
}
.content-intro p,
.content-conclusion p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
}
@media (max-width: 576px) {
.content-intro,
.content-conclusion {
padding: 1.5rem;
margin-bottom: 1rem;
border-radius: 16px;
}
.content-intro h2,
.content-conclusion h2 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.content-intro p,
.content-conclusion p {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0.875rem;
}
.content-intro h2::after,
.content-conclusion h2::after {
width: 50px;
height: 2px;
bottom: -0.5rem;
}
}
@media (max-width: 420px) {
.content-intro,
.content-conclusion {
padding: 1.25rem;
border-radius: 14px;
}
.content-intro h2,
.content-conclusion h2 {
font-size: 1.2rem;
margin-bottom: 0.875rem;
}
.content-intro p,
.content-conclusion p {
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
}
/*# sourceMappingURL=style.css.map */
@media (max-width: 992px) {
.feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.feature-grid { grid-template-columns: 1fr; }
}
/* Evitar cortar conteúdo dentro do card */
.feature-item { height: auto; min-height: 450px; text-align: left; }