/* Replaced: compact, landing-page style (mais "enchuto") */
:root{
  --container:1100px;
  --page-bg:#e5e7eb;
  --text:#0f1724;
  --muted:#52606a;
  --primary:#0b86c2;
  --card:#ffffff;
  --banner-h:340px;
  --banner-h-sm:180px;
  --radius:10px;
  --gap:18px;
  --easing:cubic-bezier(.2,.9,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--text);background:var(--page-bg);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:18px}

/* header */
.site-header{background:rgba(255,255,255,0.8);backdrop-filter:blur(8px);border-bottom:1px solid rgba(15,23,36,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo{width:52px;height:52px;border-radius:8px;overflow:hidden;flex-shrink:0;border:1px solid rgba(15,23,36,0.03)}
.logo-img{width:100%;height:100%;object-fit:cover;display:block}
.brand-name{font-weight:700;font-size:16px}
.brand-sub{font-size:12px;color:var(--muted)}
.site-nav a{margin-left:12px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px}

/* banner */
.banner{border-radius:10px;overflow:hidden;background:#071422;margin-bottom:18px;box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.banner-img{display:block;width:100%;height:var(--banner-h);object-fit:cover;object-position:center}

/* institucional grid - layout conforme wireframe */
.institucional{padding:20px 0 40px}
.institucional-grid{
  display:grid;
  grid-template-columns: 2fr 1fr; /* 2/3 esquerda + 1/3 direita */
  grid-template-rows: auto auto auto; /* 3 linhas principais */
  gap:24px;
  max-width:1100px;
  margin:0 auto;
  align-items:start;
}

/* Linha 1: informações (esquerda) + carrossel (direita) */
.left-column{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display:block; /* sem sub-grid, apenas empilha os cards */
}

#visual{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self:start;
}

/* Linha 2: informação centralizada (full width) */
.big-info{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

/* Linha 3: contato (full width) */
.contato-institucional{
  grid-column: 1 / -1;
  margin-top: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(2,6,23,0.08);
}

/* cards na coluna esquerda: empilhados verticalmente */
.left-column .institucional-card{
  margin-bottom:16px;
}
.left-column .institucional-card:last-child{
  margin-bottom:0;
}

/* card base - seguindo wireframe */
.institucional-card{
  background:var(--card);
  padding:18px;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.05);
  box-shadow:0 4px 12px rgba(2,6,23,0.06);
  color:var(--text);
  transition:transform .2s ease, box-shadow .2s ease;
  min-height:120px;
}

.institucional-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(2,6,23,0.08);
}

.institucional-card h2{margin:0 0 12px 0;font-weight:700;font-size:18px;color:var(--text)}
.institucional-card h3{margin:0 0 10px 0;font-weight:700;font-size:16px;color:var(--text)}
.institucional-card p{color:var(--muted);line-height:1.6;margin:0 0 12px;font-size:14px}
.institucional-card ul{margin:0 0 12px 20px;padding:0;color:var(--muted);font-size:14px}

/* card principal mais destacado */
#conheca{
  background:linear-gradient(180deg, #ffffff, #fafbfc);
  border:1px solid rgba(14,165,233,0.08);
  padding:24px;
}

/* carousel conforme wireframe */
.institucional-carousel{
  min-height:380px;
  position:relative;
}
.institucional-carousel .visual-carousel{
  height:320px;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow:0 4px 16px rgba(2,6,23,0.08);
}
.institucional-carousel .v-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .4s var(--easing);
}
.institucional-carousel .v-slide.show{opacity:1}
.institucional-carousel .visual-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.institucional-carousel .visual-dots button{
  width:10px;height:10px;border-radius:50%;border:none;background:rgba(15,23,36,0.15);cursor:pointer;padding:0;transition:all .2s ease
}
.institucional-carousel .visual-dots button.active{background:var(--primary);transform:scale(1.1)}

/* big-info: bloco central conforme wireframe */
.big-info{
  background:var(--card);
  padding:20px;
  border-radius:10px;
  border:1px solid rgba(15,23,36,0.05);
  box-shadow:0 4px 12px rgba(2,6,23,0.06);
  text-align:left;
}
.big-info h3{margin:0 0 12px 0;font-weight:700;font-size:16px;color:var(--text)}
.big-info p{color:var(--muted);line-height:1.6;margin:0 0 12px;font-size:14px}

/* Contato melhorado com mapa */
.contato-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.contato-info h3{
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.contato-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  border: 1px solid rgba(15,23,36,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contato-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(2,6,23,0.08);
}

.contato-icon{
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), #0891b2);
  border-radius: 50%;
  flex-shrink: 0;
  filter: grayscale(0.2);
}

.contato-item strong{
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  font-size: 14px;
}

.contato-item p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.contato-item a{
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.contato-item a:hover{
  text-decoration: underline;
}

/* Mapa */
.contato-mapa{
  position: relative;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(2,6,23,0.12);
  border: 1px solid rgba(15,23,36,0.08);
}

.mapa-iframe{
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: grayscale(0.1) contrast(1.1);
}

.mapa-overlay{
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.95);
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px; /* Aumentado de 8px para 12px */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(15,23,36,0.1);
}

.marker-pin{
  font-size: 16px;
  animation: bounce 2s infinite;
}

.marker-label{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Redes sociais acima do mapa - sem círculo de fundo */
.redes-sociais{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
  border: 1px solid rgba(15,23,36,0.06);
}

.redes-sociais a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  text-decoration: none;
  font-size: 32px;
  transition: all 0.3s ease;
  padding: 8px;
}

.redes-sociais .facebook{
  background: none;
  color: inherit;
  border-radius: 0;
}

.redes-sociais .facebook img{
  width: 40px !important;
  height: 40px !important;
  transition: transform 0.3s ease;
}

.redes-sociais .facebook:hover img{
  transform: scale(1.1);
}

.redes-sociais .instagram,
.redes-sociais .tiktok{
  background: none;
  color: inherit;
  border-radius: 0;
}

.redes-sociais a:hover{
  transform: translateY(-2px) scale(1.05);
}

@media (max-width: 600px){
  .redes-sociais{
    gap: 12px;
    padding: 10px;
  }
  
  .redes-sociais a{
    font-size: 28px;
    padding: 6px;
  }
  
  .redes-sociais .facebook img{
    width: 32px !important;
    height: 32px !important;
  }
}

/* responsive - empilha conforme wireframe em mobile */
@media (max-width:1000px){
  .institucional-grid{
    grid-template-columns:1fr;
    grid-template-rows: auto auto auto auto; /* 4 linhas em mobile */
    gap:18px;
  }
  .left-column{
    grid-column:1 / -1;
    grid-row:1 / 2;
  }
  #visual{
    grid-column:1 / -1;
    grid-row:2 / 3;
  }
  .big-info{
    grid-column:1 / -1;
    grid-row:3 / 4;
  }
  .contato-institucional{
    grid-column:1 / -1;
    grid-row:4 / 5;
  }
  .institucional-carousel .visual-carousel{height:240px}
  .banner-img{height:var(--banner-h-sm)}
}

/* Responsividade para tablets */
@media (max-width:768px) and (min-width:601px){
  .contato-content{
    gap: 24px;
  }
  
  .contato-mapa{
    height: 280px; /* Mantém altura padrão */
  }
  
  .redes-sociais{
    gap: 14px;
    padding: 10px;
  }
  
  .redes-sociais img{
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width:600px){
  .institucional-carousel .visual-carousel{height:200px}
  .institucional-card{min-height:auto;padding:16px}
  .container{padding:12px}
  
  /* Layout do contato em coluna única no mobile */
  .contato-content{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  /* Mapa mantém tamanho normal no mobile */
  .contato-mapa{
    height: 280px; /* Mantém altura normal */
    /* Remove as margens negativas para não expandir */
  }
  
  /* Redes sociais no mobile */
  .redes-sociais{
    padding: 8px;
    gap: 12px;
    border-radius: 8px;
  }
  
  .redes-sociais img{
    width: 20px !important;
    height: 20px !important;
  }
}