@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --cor1: #f2f2f2;
  --cor2: #030a8c;
  --cor3: #063573;
  --cor4: #047f8c;
  --cor5: #0d0d0d;
  --texto1: Verdana, Geneva, Tahoma, sans-serif;
  --texto2: "roboto", Arial, Helvetica, sans-serif;
  --texto3: Arial, Helvetica, sans-serif;
}

/* Espaçamento da Navbar no Desktop */
header {
  padding: 10px 5%;
}

.menu-list {
  display: flex;
  align-items: center;
}

.menu-list > li {
  display: flex;
  align-items: center;
  position: relative;
}

.menu-list > li > a {
  font-weight: bold;
  color: var(--cor5);
  font-size: 15px;
}

.menu-list > li > a.active,
.menu-list > li > a:hover {
  color: var(--cor4);
}

/* Barras Diagonais (Exclusivo Desktop) */
.menu-list > li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 18px;
  background-color: var(--cor4);
  margin: 0 15px;
  transform: skewX(-25deg);
}

/* Submenu Dropdown */
.submenu {
  list-style: none;
  padding: 10px 0;
  background-color: var(--cor1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-top: 3px solid var(--cor4);
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 100;
}

.submenu li a {
  display: block;
  padding: 12px 20px;
  color: var(--cor5);
  font-size: 14px;
}

.submenu li a:hover {
  background-color: #f8f9fa;
  color: #17a2b8;
}

/* Mostrar Submenu */
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Esconde o botão hambúrguer no desktop */
.menu-toggle {
  display: none;
}

/* Estrutura do carrossel */
.carrossel {
  max-width: 100%;
  /* Limita a largura no desktop */
  height: 500px;
  /* Altura fixa opcional */
}

.prev,
.next {
  padding: 20px;
  font-size: 2rem;
  transition: background 0.3s;
  z-index: 100;
  /* Garante que o botão fique visível e clicável */
  cursor: pointer;
  /* Garante que o cursor de "mãozinha" apareça */
}

.prev:hover {
  background-color: var(--cor2);
  transition: background 0.3s;
}

.next:hover {
  background-color: var(--cor2);
  transition: background 0.3s;
}

.carrossel-controls {
  position: absolute;
  bottom: 30px; /* Sobe 30px da base da imagem */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100; /* Garante que está acima da imagem e das setas */
  display: flex;
  align-items: center;
  background: rgba(
    0,
    0,
    0,
    0.3
  ); /* Um fundo escuro ajuda a ver os botões brancos */
  padding: 10px 20px;
  border-radius: 30px;
}
/* conteudo */

/* Alinha os blocos lado a lado no desktop de forma limpa */
.page-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4%;
}

/* Define que cada bloco ocupará quase metade da tela */
.inssecao-texto,
.secao-beneficios {
  width: 100%;
}

/* Ajuste fino para alinhar o parágrafo explicativo do benefício */
.secao-beneficios p {
  padding-left: 15px;
}

/*  seção de card*/

.servicos-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* Cards ocupam 2 partes, Texto ocupa 1 parte */
  gap: 20px;
  max-width: 98%;
  margin: 0 auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 colunas de cards */
  gap: 15px;
}

.servicos-texto {
  display: block;
  /* Faz o texto aparecer no desktop */
  background-color: var(--cor4);
  /* Cor esmeralda/ciano do exemplo */
  color: white;
  padding: 40px;
  border-radius: 4px;
}

.servicos-texto h2 {
  font-size: 2rem;
  margin-bottom: 30px;
}

/* Estilo das "tags" brancas arredondadas */
.servicos-texto span {
  display: inline-block;
  background: var(--cor1);
  color: var(--cor2);
  padding: 5px 20px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 0.8rem;
  margin-bottom: 15px;
}

/* Seção de portifolio */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.portfolio-item img {
  height: 400px;
  /* Altura fixa para alinhar no desktop */
}

.portfolio-item img:hover {
  transform: scale(1.05);
}

/* formatação rodapé */

.footer-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  /* Divide em duas colunas */
  gap: 50px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.contact-item.align-top {
  align-items: flex-start;
}

/* Formulário Lado a Lado */

.footer-form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Divide em duas colunas iguais */
  gap: 15px;
  align-items: start; /* Garante que os campos comecem no topo */
}

.form-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* CONTAINER DA DIREITA: Mensagem + Botão */
.form-actions {
  display: flex;
  flex-direction: column;
  /* Empilha o textarea e o botão */
  gap: 15px;
  height: 100%;
  /* Faz o container ocupar a altura total dos inputs ao lado */
}

.footer-form textarea {
  flex-grow: 1; /* Faz o textarea ocupar todo o espaço disponível acima do botão */
  min-height: 80px; /* Ajuste conforme a altura dos 3 inputs da esquerda */
  resize: none;
}

.btn-send {
  align-self: flex-end; /* Alinha o botão à direita, se desejar, ou 'stretch' para largura total */
  width: 320px; /* Largura fixa conforme a imagem original */
  padding: 15px;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border: none;
}

.contact-text {
  margin-top: 5px;
}

.icon-box {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}

/* Pag_contato|header */

.media {
  min-height: 50vh;
  background:
    linear-gradient(rgba(64, 77, 148, 0.7), rgba(27, 121, 209, 0.26)),
    url("/_img/WhatsApp\ Image\ 2026-02-01\ at\ 23.28.06\ \(4\).jpeg")
      center/cover; /* Opcional: imagem de fundo leve */
}

.media h1 {
  font-size: 1.5rem;
  color: var(--cor1);
}

.media h2 {
  font-size: 2.5rem;
  color: var(--cor1);
}

.media p {
  font-size: 1.6rem;
  font-family: var(--texto3);
  line-height: 1.5; /* Espaçamento entre as linhas */
  color: var(--cor1);
}

#esq_media {
  min-height: 50vh;
  background:
    linear-gradient(rgba(64, 77, 148, 0.7), rgba(27, 121, 209, 0.26)),
    url("/_img/esquadrias-aluminio.jpeg") center/cover; /* Opcional: imagem de fundo leve */
}

/* Pag_contato|formulario */

.form-container {
  max-width: 100%;
}

.grid-options {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Duas colunas no desktop */
  gap: 12px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 4px;
}

.subtitle {
  font-size: 1rem;
}

.forbtn {
  margin: auto;
}

.forbtn:hover {
  background-color: #333;
  transition: 0.3s;
}

/* Pag_contato|contato extras */

.contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.contact-channels-header h2 {
  font-size: 2.2rem;
}

/* Efeitos Interativos */
.channel-card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.channel-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.channel-link:hover {
  color: #007bff;
}

/* Pag_contato|endereço */

.container-contato {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.maps iframe {
  height: 400px;
}

/* Pag_sobre| Por Que Escolher a Glassminium */

.section-title {
  font-size: 2.5rem;
  margin-bottom: 50px;
}

/* Grid de 4 colunas ou responsivo */
.grid-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.subtexto {
  text-align: center;
}

/* pag_esquadria| Conteudo */

.modelos_extras p {
  margin-bottom: 30px;
  text-align: center;
  font-size: 1.2rem;
}

.modelos_extras {
  max-width: 100%;
  margin: 0 auto;
  padding: 40px;
}

.grid-tipologias {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Dois por linha ou mais */
  gap: 30px;
}

.tipo {
  transition: transform 0.3s ease;
}

.tipo:hover {
  transform: translateY(-5px);
}