:root{
  --azul:#4285F4;
  --vermelho:#CC0045;
  --amarelo:#FBBC05;
  --preto:#111111;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:"Montserrat",Arial,Helvetica,sans-serif;
  background:#000;
  color:#333;
}

a{text-decoration:none;color:inherit}

/* ===== MOLDURA ===== */
.site-wrapper{
  position:relative;
  background:white;
  min-height:100vh;
  overflow:hidden;
}

.site-wrapper::before{
  content:"";
  position:absolute;
  inset:0;
  padding:26px;
  background:
    linear-gradient(var(--azul) 0 0) top / 100% 26px no-repeat,
    linear-gradient(var(--amarelo) 0 0) right / 26px 100% no-repeat,
    linear-gradient(var(--vermelho) 0 0) bottom / 100% 26px no-repeat,
    linear-gradient(var(--azul) 0 0) left / 26px 100% no-repeat;
  pointer-events:none;
  z-index:0;
}

/* ===== LATERAIS ===== */
.decor-left,.decor-right{
  position:absolute;
  top:0;bottom:0;
  width:46px;
  display:flex;
  flex-direction:column;
  animation:floatColors 6s infinite alternate ease-in-out;
  z-index:10;          /* sobe as bordas */
  pointer-events:none; /* não atrapalha clique no conteúdo */
}
.decor-left{left:0}
.decor-right{right:0}

.decor-left span,
.decor-right span{flex:1}

.decor-left span{border-radius:0 26px 26px 0}
.decor-right span{border-radius:26px 0 0 26px}

.decor-left span:nth-child(1),
.decor-right span:nth-child(1){background:var(--azul)}
.decor-left span:nth-child(2),
.decor-right span:nth-child(2){background:var(--vermelho)}
.decor-left span:nth-child(3),
.decor-right span:nth-child(3){background:var(--amarelo)}
.decor-left span:nth-child(4),
.decor-right span:nth-child(4){background:var(--azul)}
.decor-left span:nth-child(5),
.decor-right span:nth-child(5){background:var(--vermelho)}
.decor-left span:nth-child(6),
.decor-right span:nth-child(6){background:var(--amarelo)}
.decor-left span:nth-child(7),
.decor-right span:nth-child(7){background:var(--azul)}
.decor-left span:nth-child(8),
.decor-right span:nth-child(8){background:var(--vermelho)}
.decor-left span:nth-child(9),
.decor-right span:nth-child(9){background:var(--amarelo)}

@keyframes floatColors{
  from{filter:brightness(1)}
  to{filter:brightness(1.12)}
}

/* ===== HEADER ===== */
header{
  background:#f7f7f7; 
  color:#000000;
  padding:20px 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:5;
  position:relative;
}

header img{height:75px; width: 300px;}

/* ===== HOVER DO MENU DO HEADER (IGUAL AO FOOTER) ===== */
header nav a{
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 14px;
  transition: .3s;
}

/* LINHA DO HOVER */
header nav a::after{
  content:"";
  position:absolute;
  left: 0;           /* LINHA NASCE DA ESQUERDA */
  right: auto;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--vermelho);
  transition: .3s;
}


header nav a:hover{
  color: var(--vermelho);
}

header nav a:hover::after{
  width: 28px;       /* MESMO TAMANHO DO FOOTER */
}


nav a{
  margin:0 18px;
  font-weight:600;
  letter-spacing:1px;
  font-size:14px;
}

/* ===== BOTÃO ===== */
.btn{
  background:var(--vermelho);
  color:#fff;
  padding:12px 26px;
  border-radius:30px;
  font-weight:700;
  letter-spacing:1px;
  display:inline-block;
  transition:.3s;
}
.btn:hover{transform:scale(1.05)}

/* ===== HERO ===== */
.hero{
  height:92vh;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
  url('image9.jpg') center/cover;
  display:flex;
  align-items:center;
  padding:0 90px;
  color:white;
  position:relative;
  z-index:5;
}

.hero h1{
  font-size:48px;
  font-weight:800;
  line-height:1.15;
  margin-bottom:26px;
}

.hero p{
  font-size:18px;
  line-height:1.7;
  margin-bottom:28px;
}

/* ===== SEÇÕES ===== */
section{
  padding:100px 70px;
  position:relative;
  z-index:5;
}

h2{
  text-align:center;
  font-size:38px;
  font-weight:800;
  letter-spacing:2px;
  margin-bottom:70px;
}

/* ===== CARDS ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 5px 25px rgba(0,0,0,.15);
  overflow:hidden;
  transition:.3s;
}

.card:hover{transform:translateY(-8px)}
.card img{width:100%;height:220px;object-fit:cover}
.card div{padding:26px}

.card h3{
  margin-bottom:12px;
  color:var(--azul);
  font-size:20px;
}

/* ===== WHATSAPP ===== */
.whatsapp-btn{
  background:#25D366;
  color:white;
  padding:20px 36px;
  border-radius:60px;
  font-size:18px;
  font-weight:700;
  display:inline-block;
  transition:.3s;
}

.whatsapp-btn:hover{transform:translateY(-8px)}

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #25D366;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: .3s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

/* LINHA SEPARADORA DO FOOTER */
.footer-divider{
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--azul),
    var(--vermelho),
    var(--amarelo)
  );
}

/* ===== FOOTER CENTRALIZADO E COMPACTO ===== */
footer{
 background:#f7f7f7; 
  color:#000;
  padding:40px 20px;              /* menos “vazio” laterais */
  display:flex;                  /* TROCA GRID POR FLEX */
  justify-content:center;        /* CENTRALIZA O CONTEÚDO */
  position:relative;
  z-index:5;
}

/* container interno do footer */
.footer-container{
  width:100%;
  max-width:1100px;              /* LIMITA A LARGURA CENTRAL */
  display:grid;
  grid-template-columns:1fr 1fr; /* DUAS COLUNAS */
  gap:60px;
  align-items:center;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

footer img{
  height:48px;
  width:auto;
}

.footer-brand p{
  font-size:14px;
  color:#444;
}

.social-icons{
  display:flex;
  gap:10px;
  margin-top:8px;
}

.social-icons a{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
}

.social-icons a:hover{
  transform:translateY(-3px);
}

.social-icons img{
  width:25px;
  height: 25px;
}

.footer-menu{
  display:flex;
  flex-direction:column;
  align-items:flex-end;   /* alinha bloco à direita */
}

.footer-menu strong{
  margin-bottom:10px;
  font-size:15px;
}

.footer-menu a{
  display:block;
  margin:6px 0;
  color:#000;
  transition:.3s;
  position:relative;
  text-align:right;
}

.footer-menu a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:var(--vermelho);
  transition:.3s;
}

.footer-menu a:hover{
  color:var(--vermelho);
}

.footer-menu a:hover::after{
  width:22px;
}

/* BOTÃO DE EMAIL */
.email-btn {
  background: #444;              /* cor do botão (pode trocar) */
  color: white;
  padding: 20px 36px;
  border-radius: 60px;
  font-size: 18px;
  font-weight: 700;
  display: inline-block;
  transition: .3s;
  border: none;
  cursor: pointer;
}

.email-btn:hover {
  background: #333;
}

.email-btn:hover{transform:translateY(-8px)}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 20px;
}

.modal-content {
  background: #fff;
  width: 100%;
  max-width: 450px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  animation: modalOpen .25s ease-out;
  position: relative;
}

@keyframes modalOpen {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}


.modal-content h3 {
  margin-top: 0;
  text-align: center;
}

.modal-content input,
.modal-content textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0 15px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.send-btn {
  background: #2d8fdd;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.cancel-btn {
  background: #999;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  margin-left: 10px;
  cursor: pointer;
}

.close {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 22px;
  cursor: pointer;
}

/* TOAST (notificação moderna) */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #25D366; /* verde estilo WhatsApp */
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(-20px);
  transition: all .3s ease;
  z-index: 10000;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}


/* ===== MOBILE ===== */
@media(max-width:900px){
  .hero{padding:40px}
  section{padding:70px 40px}
}
@media(max-width:600px){
  header{flex-direction:column;gap:20px}
  .hero h1{font-size:36px}
  h2{font-size:28px}
  footer{grid-template-columns:1fr}
}

/* ===== AJUSTE DA BORDA NO MOBILE ===== */
@media (max-width: 600px){

  /* BORDA PRINCIPAL */
  .site-wrapper::before{
    padding:12px; /* antes era 26px */
    background:
      linear-gradient(var(--azul) 0 0) top / 100% 12px no-repeat,
      linear-gradient(var(--amarelo) 0 0) right / 12px 100% no-repeat,
      linear-gradient(var(--vermelho) 0 0) bottom / 100% 12px no-repeat,
      linear-gradient(var(--azul) 0 0) left / 12px 100% no-repeat;
  }

  /* LATERAIS COLORIDAS */
  .decor-left,
  .decor-right{
    width:22px;   /* antes era 46px */
  }

  .decor-left span{
    border-radius:0 14px 14px 0;
  }

  .decor-right span{
    border-radius:14px 0 0 14px;
  }

}

@media (max-width: 600px){

  header{
    flex-direction: column; /* mantém logo em cima */
    align-items: center;
  }

  nav{
    display: flex;
    flex-direction: row;     /* LINKS LADO A LADO */
    justify-content: center;
    flex-wrap: wrap;         /* se faltar espaço, quebra bonito */
    gap: 18px;
    margin-top: 10px;
  }

  nav a{
    margin: 0;               /* remove espaçamento antigo */
    font-size: 13px;
  }
}

/* ===== FOOTER MOBILE ===== */
@media (max-width: 700px){

  footer{
    padding:30px 20px;
  }

  .footer-container{
    grid-template-columns: 1fr;  /* vira 1 coluna */
    gap:30px;
    text-align:center;
  }

  .footer-brand{
    align-items:center;          /* centraliza logo + texto + redes */
  }

  .social-icons{
    justify-content:center;     /* centraliza os ícones */
  }

  .footer-menu{
    align-items:center;         /* centraliza menu */
  }

  .footer-menu a{
    text-align:center;          /* texto do menu central */
  }

  .footer-menu a::after{
    left:50%;                   /* linha agora nasce do centro */
    right:auto;
    transform:translateX(-50%);
  }
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}


/* ================= RESPONSIVO ================= */
@media (max-width: 480px) {
  .modal-content {
    width: 92%;
    padding: 18px;
    border-radius: 8px;
  }

  .modal-content h3 {
    font-size: 18px;
  }

  .modal-content input,
  .modal-content textarea {
    font-size: 14px;
    padding: 8px;
  }

  .send-btn,
  .cancel-btn {
    font-size: 14px;
    padding: 10px;
    width: 100%;
    margin: 6px 0;
  }

  .cancel-btn {
    margin-left: 0;
  }

  .close {
    font-size: 20px;
    right: 10px;
    top: 6px;
  }
}