/* =====================================================
INTERFACE TECNOLOGIA
Main Stylesheet
===================================================== */
/* ===============================
VARIABLES
================================ */
:root {
--primary: #005A2C;
--secondary: #AEC90B;
--dark: #005A2C;
--dark-light: #172033;
--gray: #666;
--light: #f0f0f0;
--white: #ffffff;
--shadow:
0 15px 35px rgba(0,0,0,.12);
--radius:
10px;
--transition:
.3s ease;
}
/* ===============================
RESET
================================ */
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
body {
font-family:
'Poppins',
sans-serif;
color:#ffffff;
background:
var(--light);
line-height:
1.6;
overflow-x:hidden;
}
img {
max-width:100%;
display:block;
}
a {
text-decoration:none;
color:inherit;
}
ul {
list-style:none;
}
.container {
width:100%;
max-width:1200px;
margin:auto;
}
/* ===============================
HEADER
================================ */
#header {
position:fixed;
width:100%;
top:0;
left:0;
z-index:999;
background:
transparent;
transition:
var(--transition);
}
#header.scrolled {
/* Barra con el color de fondo de la página (#f0f0f0) */
background:var(--light);
/* línea verde inferior (sin cambiar la altura) + sombra suave */
box-shadow:
0 3px 0 var(--secondary),
0 10px 25px rgba(0,0,0,.12);
}
#header .container {
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo {
font-size:12px;
font-weight:700;
color:
var(--white);
}
.logo span {
color:
var(--secondary);
}
nav ul {
display:flex;
gap:35px;
margin-right:220px;
margin-top: 95px;
}
nav a {
color:
white;
font-size:16px;
font-weight:500;
transition:
var(--transition);
}
nav a:hover {
color:
var(--secondary);
}
nav2 ul {
display:flex;
gap:35px;
margin-right:180px;
margin-top: 95px;
}
nav2 a {
color:
white;
font-size:16px;
font-weight:500;
transition:
var(--transition);
}
nav2 a:hover {
color:
var(--secondary);
}
.menu-mobile {
display:none;
background:none;
border:none;
color:#005A2C;
font-size:25px;
}
/* ===============================
HERO
================================ */
.hero {
height:100vh;
min-height:600px;
background:
var(--light);
display:flex;
align-items:center;
}
.hero-content {
width:90%;
max-width:900px;
margin:auto;
color:#FFFFFF;
text-align:center;
}
.hero h1 {
font-size:
clamp(35px,5vw,65px);
line-height:1.1;
margin-bottom:25px;
font-weight:700;
}
.hero p {
font-size:20px;
max-width:750px;
margin:auto;
margin-bottom:40px;
}
.hero-buttons {
display:flex;
justify-content:center;
gap:20px;
}
.btn-primary,
.btn-secondary {
padding:
14px 35px;
border-radius:
50px;
font-weight:600;
transition:
var(--transition);
}
.btn-primary {
background:
var(--primary);
color:#FFFFFF;
}
.btn-primary:hover {
background:
var(--secondary);
transform:
translateY(-4px);
}
.btn-secondary {
border:
2px solid white;
color:white;
}
.btn-secondary:hover {
background:white;
color:
var(--dark);
}
/* ===============================
SECTIONS
================================ */
section {
padding:
100px 0;
}
.section-tag {
color:
var(--primary);
font-weight:600;
text-transform:uppercase;
letter-spacing:2px;
display:block;
margin-bottom:15px;
}
h2 {
font-size:
38px;
color:
var(--dark);
margin-bottom:25px;
}
.grid-2 {
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:60px;
align-items:center;
}
/* ===============================
SECTION BANNERS (Home, Empresa, Produtos, Soluções)
================================ */
.section-banner {
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
margin-bottom:40px;
margin-top:45px;
}
.section-banner img {
width:100%;
height:400px;
object-fit:fill;
display:block;
border-radius:0;
box-shadow:none;
}
/* ===============================
TEXTO INCRUSTADO SOBRE EL BANNER
(Layer19 / Layer20 sobre fondo3.jpg,
y cualquier otro texto superpuesto a
una imagen de .section-banner)
================================ */
.banner-overlay {
position:absolute;
top:154px;
left:37px;
right:0;
bottom:0;
display:flex;
flex-direction:column;
justify-content:center;
/* padding en % del ancho del banner: se mueve junto con la imagen
en vez de quedar fijo en px */
padding:0 18% 0 10%;
width: 1400px;
}
#Layer19 {
margin-bottom:1.5%;
}
#Layer19 .Estilo3,
#Layer20 .Estilo4 {
/* tamaño de letra que también escala con el ancho de pantalla,
en vez de quedar fijo */
font-size:clamp(14px, 1.6vw, 15px);
}
#Layer20 {
max-width:900px;
}
/* Evita que el header fijo tape el contenido al hacer scroll con el menú */
section[id] {
scroll-margin-top:100px;
}
/* ===============================
ABOUT
================================ */
.about {
background:
linear-gradient(
rgba(0,0,0,0),
rgba(121,121,121,.17)
);
}
.about p {
margin-bottom:20px;
color:
var(--gray);
}
.about-image img {
border-radius:
var(--radius);
box-shadow:
var(--shadow);
}
/* ===============================
SERVICES
================================ */
.services {
background:
var(--light);
/* linear-gradient(
rgba(81,255,0,.30),
rgba(181,255,0,.30)
),; */
text-align:center;
}
.cards {
margin-top:50px;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:30px;
}
.card {
background:white;
padding:40px 30px;
border-radius:
var(--radius);
box-shadow:
var(--shadow);
transition:
var(--transition);
}
.card:hover {
transform:
translateY(-10px);
}
.card i {
font-size:45px;
color:
var(--primary);
margin-bottom:20px;
}
.card h3 {
margin-bottom:15px;
color:
var(--dark);
}
.card p {
color:
var(--gray);
}
/* ===============================
NUMBERS
================================ */
.numbers {
background:
linear-gradient(
120deg,
var(--primary),
var(--secondary)
);
color:white;
}
.numbers-grid {
display:grid;
grid-template-columns:
repeat(4,1fr);
text-align:center;
}
.numbers h2 {
color:white;
font-size:45px;
}
.numbers span {
font-size:18px;
}
/* ===============================
SOLUTIONS
================================ */
.solutions {
text-align:center;
}
.solution-grid {
display:grid;
grid-template-columns:
repeat(6,1fr);
gap:20px;
margin-top:40px;
}
.solution-grid div {
background:
var(--light);
padding:30px 10px;
border-radius:
var(--radius);
transition:
var(--transition);
}
.solution-grid div:hover {
background:
var(--primary)
}
.solution-grid i {
font-size:35px;
margin-bottom:15px;
}
/* ===============================
CLIENTS
================================ */
.clients {
background:
var(--light);
text-align:center;
}
.carousel-clientes {
position:relative;
width:100%;
overflow:hidden;
background:
transparent;
-webkit-mask-image:
linear-gradient(
to right,
transparent 0,
#000 40px,
#000 calc(100% - 40px),
transparent 100%
);
mask-image:
linear-gradient(
to right,
transparent 0,
#000 40px,
#000 calc(100% - 40px),
transparent 100%
);
}
.carousel-track {
display:flex;
width:max-content;
animation:
carousel-scroll 25s linear infinite;
}
.carousel-clientes:hover .carousel-track {
animation-play-state:paused;
}
.carousel-slide {
flex:0 0 auto;
width:250px;
aspect-ratio: 2471 / 1438;
display:flex;
align-items:center;
justify-content:center;
background:
transparent;
overflow:hidden;
}
.carousel-slide img {
width:80%;
height:80%;
object-fit:cover;
filter:
grayscale(100%);
opacity:.85;
transition:
var(--transition);
}
.carousel-slide img:hover {
filter:none;
opacity:1;
}
@keyframes carousel-scroll {
from {
transform:
translateX(0);
}
to {
transform:
translateX(-50%);
}
}
@media(max-width:600px){
.carousel-slide {
width:200px;
}
}
/* ===============================
CTA
================================ */
.cta {
text-align:center;
}
.cta h2 {
color:white;
}
.cta p {
margin-bottom:30px;
}
/* ===============================
CONTACT
================================ */
.contact {
background:var(--light);
}
form {
display:flex;
flex-direction:column;
gap:20px;
}
input,
textarea {
padding:15px;
border:
1px solid #ddd;
border-radius:8px;
font-family:inherit;
}
form button {
padding:15px;
border:none;
border-radius:50px;
background:
var(--primary);
color:white;
font-weight:600;
cursor:pointer;
}
/* Campo honeypot: invisível para humanos, presente no DOM para os bots */
.hp-field {
position:absolute;
left:-9999px;
top:-9999px;
width:1px;
height:1px;
overflow:hidden;
opacity:0;
}
/* Campo de validação de segurança (captcha) */
.captcha-field {
display:flex;
flex-direction:column;
gap:8px;
}
.captcha-field label {
font-size:14px;
color:var(--gray);
}
.captcha-field input {
max-width:150px;
}
.form-error {
color:#c0392b;
font-size:14px;
min-height:20px;
}
.form-success {
color:var(--primary);
font-size:14px;
font-weight:600;
min-height:20px;
}
/* ===============================
FOOTER
================================ */
footer {
background:
var(--dark);
color:white;
padding-top:60px;
}
.footer-grid {
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:40px;
}
footer h3,
footer h4 {
margin-bottom:20px;
}
footer li {
margin-bottom:10px;
}
.social {
display:flex;
gap:15px;
}
.social a {
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:
var(--primary);
border-radius:50%;
}
.copyright {
text-align:center;
padding:25px;
margin-top:40px;
border-top:
1px solid rgba(255,255,255,.1);
}
/* ===============================
RESPONSIVE
================================ */
@media(max-width:992px){
.cards {
grid-template-columns:
repeat(2,1fr);
}
.solution-grid {
grid-template-columns:
repeat(3,1fr);
}
.logos {
grid-template-columns:
repeat(3,1fr);
}
.numbers-grid {
grid-template-columns:
repeat(2,1fr);
gap:40px;
}
}
@media(max-width:768px){
nav {
display:none;
}
.menu-mobile {
display:block;
}
.grid-2 {
grid-template-columns:1fr;
}
.cards {
grid-template-columns:1fr;
}
.hero-buttons {
flex-direction:column;
}
.solution-grid {
grid-template-columns:
repeat(2,1fr);
}
.footer-grid {
grid-template-columns:1fr;
}
h2 {
font-size:30px;
}
.banner-overlay {
padding:0 6%;
}
#Layer20 {
max-width:100%;
}
}
@media(max-width:480px){
.solution-grid {
grid-template-columns:1fr;
}
.numbers-grid {
grid-template-columns:1fr;
}
.hero p {
font-size:16px;
}
}
/* ===============================
BANNER CLICÁVEL (SERVIÇOS TI)
Animação ao passar o mouse
================================ */
.banner-link {
cursor:pointer;
overflow:hidden;
}
.banner-link img {
transition:transform .6s ease, filter .6s ease;
}
.banner-link:hover img {
transform:scale(1.05);
filter:brightness(1.12);
}
/* Título: sublinhado animado + deslocamento suave */
.banner-link #Layer19 a {
display:inline-block;
position:relative;
transition:transform .3s ease, color .3s ease;
}
.banner-link #Layer19 a::after {
content:"";
position:absolute;
left:0;
bottom:-4px;
width:0;
height:3px;
background:var(--secondary);
transition:width .4s ease;
}
.banner-link:hover #Layer19 a {
transform:translateX(10px);
color:var(--secondary);
}
.banner-link:hover #Layer19 a::after {
width:100%;
}
/* Botão "Saiba mais": aparece e a seta se move */
.banner-cta {
display:inline-flex;
align-items:center;
gap:10px;
align-self:flex-start;
margin-top:18px;
padding:10px 26px;
border-radius:50px;
background:var(--secondary);
color:var(--primary);
font-weight:600;
font-size:15px;
opacity:0;
transform:translateY(12px);
transition:opacity .4s ease, transform .4s ease, background .3s ease, color .3s ease;
pointer-events:none;
cursor:pointer;
}
.banner-link:hover .banner-cta,
.banner-hover-cta:hover .banner-cta {
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.banner-cta:hover {
background:var(--primary);
color:var(--white);
}
.banner-link:hover .banner-cta i,
.banner-hover-cta:hover .banner-cta i {
animation:seta-mover .8s ease-in-out infinite;
}
@keyframes seta-mover {
0%,100% { transform:translateX(0); }
50% { transform:translateX(7px); }
}
/* Em telas touch não existe hover: mostra o botão sempre */
@media(hover:none){
.banner-cta {
opacity:1;
transform:none;
pointer-events:auto;
}
}
/* ===============================
HOTSPOTS CLICÁVEIS (banner PRODUTOS)
Substituem as do