/* =============================
   IPS – Estilos (Bootstrap + custom) – VERSÃO VERDE
   Azul substituído por verde. Hover dos botões = verde claro.
   Paleta: #145A32 (primário), #27AE60 (verde claro / apoio)
   ============================= */
:root{
  --ips-primary:#145A32;   /* verde institucional */
  --ips-secondary:#27AE60; /* verde claro */
  --ips-cta:#145A32;       /* CTA também verde */
  --ips-neutral-100:#ffffff;
  --ips-neutral-200:#f5f5f5;
  --ips-neutral-700:#333333;
}

body{ font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.title, h1,h2,h3,h4,h5{ font-family:'Montserrat', 'Open Sans', Arial, sans-serif; }

/* Navbar */
.navbar .nav-link{ color:#444; }
.navbar .nav-link:hover{ color:var(--ips-secondary); } /* hover verde claro */
.navbar-brand img{
  height:44px; width:auto;
  image-rendering: -webkit-optimize-contrast;
}
@media (min-width: 1200px){
  .navbar-brand img{ height:44px; }
}

/* Botões */
.btn-cta{
  --bs-btn-bg: var(--ips-primary);
  --bs-btn-border-color: var(--ips-primary);
  --bs-btn-hover-bg: var(--ips-secondary);          /* hover verde claro */
  --bs-btn-hover-border-color: var(--ips-secondary);
  --bs-btn-active-bg: #0f3f22;                      /* verde mais escuro */
  --bs-btn-active-border-color: #0f3f22;
  --bs-btn-color: #fff;
}

/* Hover universal para todos os .btn */
.btn:hover, .btn:focus{
  background-color: var(--ips-secondary) !important;
  border-color: var(--ips-secondary) !important;
  color: #fff !important;
}

/* Placeholders (trocar por imagens reais nos cards) */
.placeholder-image{
  width:100%;height:100%;
  background: linear-gradient(135deg,#fbfbfb,#f1f1f1);
  border: 2px dashed #e1e1e1;
}
.icon-placeholder{
  width:56px;height:56px;
  background: linear-gradient(135deg,#fbfbfb,#f1f1f1);
  border: 2px dashed #e1e1e1;
}

/* CTA band (degradê de verdes) */
.cta-band{
  background: linear-gradient(90deg, var(--ips-primary), var(--ips-secondary));
}

/* Áreas – carrossel horizontal */
.areas-scroll{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.areas-scroll::-webkit-scrollbar{ height: 8px; }
.areas-scroll::-webkit-scrollbar-thumb{ background: #d2d2d2; border-radius: 8px; }
.area-card{ min-width: 260px; scroll-snap-align: start; border-radius: 1rem; }
.dragging{ cursor: grabbing; }

/* Cards */
.card{ border-radius: 1rem; }
.card .ratio{ border-top-left-radius: 1rem; border-top-right-radius: 1rem; overflow: hidden; }

/* Footer */
footer{ font-size: .95rem; }

/* Smooth anchor offset (considerando navbar fixa) */
:target::before{
  content: ""; display:block; height:72px; margin-top:-72px; visibility:hidden;
}


/* Utilitário para compatibilidade (caso o Bootstrap não inclua): */
.object-fit-contain { object-fit: contain; }
/* Ajuste do <picture> dentro de .ratio para ocupar 100% */
.ratio > picture, .ratio > picture > img { width: 100%; height: 100%; display: block; }

.area-icon{ width:56px; height:56px; object-fit:contain; background:#145A32; padding:6px; }


/* Banners de projetos (imagens reais via Unsplash) */
.object-fit-cover{ object-fit: cover; }
.card .ratio picture, .card .ratio picture img{ width:100%; height:100%; display:block; }
/* overlay opcional para legibilidade (aplique .has-overlay no .ratio se quiser) */
.banner-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.40) 100%); border-top-left-radius:var(--bs-border-radius-lg); border-top-right-radius:var(--bs-border-radius-lg); }