.hero {
display: flex;
align-items: flex-start; justify-content: flex-end;
padding: 50px; height: 100vh;
box-sizing: border-box;
position: relative;
overflow: hidden;
color: white;
} .hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, rgba(46, 229, 157, 0.35) 30%, rgba(0, 0, 0, 0.4) 100%);
z-index: 1;
pointer-events: none;
} .hero-content {
position: relative;
max-width: 90%;
text-align: center;
z-index: 2;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start; gap: 30px; }
.hero-content h1 {
font-size: clamp(24px, 6vw, 48px);
font-weight: 900;
margin-bottom: 10px;
line-height: 1.2;
white-space: nowrap;
font-family: 'Montserrat', sans-serif;
}
.hero-content h2 {
font-size: clamp(24px, 6vw, 48px);
line-height: 1.2;
font-family: 'Montserrat', sans-serif;
color: #fff !important;
margin-bottom: 50px !important; }
.hero-content p {
font-size: clamp(16px, 5.5vw, 25px);
margin-bottom: 30px;
font-family: 'Montserrat', sans-serif;
} @media (max-width: 768px) {
.hero-content {
max-width: 100%;
text-align: center;
padding: 0 15px;
}
.hero-content h1 {
white-space: normal;
font-size: clamp(20px, 8vw, 36px);
}
.hero-content p {
font-size: clamp(14px, 6vw, 20px);
}
} .highlight {
position: relative;
color: white;
padding: 5px 10px;
border-radius: 4px;
display: inline-block;
overflow: hidden;
z-index: 0;
font-family: 'Montserrat', 'Poppins', 'Helvetica Neue', sans-serif;
}
.highlight::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background: #2ee59d;
border-radius: 4px;
z-index: -1;
animation: expandBg 1s forwards ease-out;
}
@keyframes expandBg {
to {
width: 100%;
}
}  button { --button_radius: 0.75em;
--button_color: #e8e8e8;
--button_outline_color: #000000;
font-size: 17px;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: var(--button_radius);
background: var(--button_outline_color);
}
.button_top {
display: block;
box-sizing: border-box;
border: 2px solid var(--button_outline_color);
border-radius: var(--button_radius);
padding: 0.75em 1.5em;
background: var(--button_color);
color: var(--button_outline_color);
transform: translateY(-0.2em);
transition: transform 0.1s ease;
}
.button_top:hover {
transform: translateY(-0.33em);
}
.button_top:active {
transform: translateY(0);
} .full-width-section {
background-color: #242222;
color: #ffffff;
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
padding: 60px 20px;
box-sizing: border-box;
overflow: hidden; } .content-row {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;  
justify-content: flex-start;
} .content-row > * + * {
margin-left: 16px;
} .content-row > * {
display: inline-flex;
align-items: center;
width: auto;
min-width: 0;  
flex: 0 0 auto; 
} .block-header {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
white-space: nowrap;
color: #ffffff;
} .arrow {
width: 24px;
height: 24px;
display: inline-flex;
justify-content: center;
align-items: center;
color: #4f9dff;
}
.arrow svg {
width: 100%;
height: 100%;
display: block;
} .text-wrap {
flex: 1 1 auto; 
min-width: 0;
display: inline-flex;
align-items: center;
overflow: hidden;
}
.target-link {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #4f9dff;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
}
.target-link:hover,
.target-link:focus {
text-decoration: underline;
} @media (max-width: 600px) {
.content-row {
flex-wrap: wrap;
}
.content-row > * + * {
margin-left: 0;
margin-top: 10px;
}
.text-wrap {
flex-basis: 100%;
width: 100%;
}
.target-link {
white-space: normal;
}
}
.button_test {
--button_radius: 0.75em !important;
--button_color: #e8e8e8 !important;
--button_outline_color: #000000 !important;
font-size: 17px !important;
font-weight: bold !important;
border: 2px solid var(--button_outline_color) !important;
border-radius: var(--button_radius) !important;
cursor: pointer !important;
padding: 0.75em 1.5em !important;
background: var(--button_color) !important;
color: var(--button_outline_color) !important;
transition: transform 0.1s ease, background 0.2s ease !important;
display: inline-block !important;
margin-top: 15px !important;
text-decoration: none !important;
}
.button_test:hover {
transform: translateY(-0.2em) !important;
background: #35E587 !important;
}
.button_test:active {
transform: translateY(0) !important;
} .hero-content .button_test {
font-family: 'Montserrat', 'Poppins', 'Helvetica Neue', sans-serif;
font-size: 17px;
font-weight: bold;
padding: 0.75em 1.5em;
border-radius: 0.75em;
border: 2px solid #000000;
background-color: #e8e8e8;
color: #000000;
cursor: pointer;
display: inline-block;
margin-top: 15px;
text-decoration: none;
transition: transform 0.1s ease, background 0.2s ease, color 0.2s ease;
} .hero-content .button_test:hover {
transform: translateY(-0.2em);
background-color: #35E587;
color: #ffffff;
} .hero-content .button_test:active {
transform: translateY(0);
}
@media (max-width: 768px) {
.hero-content .button_test {
width: auto;
text-align: center;
}
}
.button_home {
position: relative;
background-color: #35E587;
color: #ffffff;
padding: 0.75em 1.5em;
border: none;
border-radius: 0.75em;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: bold;
z-index: 1;
opacity: 0;
transform: translateX(-50px);
animation: slideInLeft 0.6s ease-out forwards;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.button_home::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 100%;
height: 100%;
border: 1px solid #000000;
border-radius: 0.75em;
z-index: -1;
box-sizing: border-box; } @keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
} .button_home:hover {
transform: translate(6px, 6px);
background-color: #2cc16d; }
.div-centro {
display: flex;
justify-content: center;
align-items: center;
} .seo-services-home {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 700px; margin: 0 auto; }
.seo-services-home .img-wrapper {
width: 100%; aspect-ratio: 1 / 1; border: 1px solid black;
border-radius: 0.75em;
box-sizing: border-box;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.seo-services-home .img-wrapper img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(100%) brightness(50%);
transition: filter 0.3s ease, border-color 0.3s ease;
border-radius: 4px;
}
.seo-services-home .img-wrapper img:hover {
filter: none;
border-color: #35E587;
} .h2-gris-home {
font-size: 5rem; color: #d3d3d3; text-transform: uppercase; margin-left: 5%; margin-right: 5%; width: 90%; text-align: center; line-height: 1.2; font-family: 'Montserrat', sans-serif; font-weight: bold; }
.h2-gris-home:hover {
color: #35E587; }
@media screen and (max-width: 768px) {
.h2-gris-home {
font-size: 2rem; line-height: 1.3; padding: 0 10px; word-break: break-word; }
} .p-gris-home {
font-size: 1.25rem; color: #3A3A3A; text-transform: uppercase; margin-left: 5%; margin-right: 5%; width: 90%; text-align: center; line-height: 1.2; font-family: 'Montserrat', sans-serif; font-weight: bold; }