/*
  Refinamento institucional — Portal IEMA IP Pindaré-Mirim
  Base preservada: iemapindare-pages-central-atendimentos-completa(1).zip
  Objetivo: reduzir aparência de template genérico sem alterar as funções do portal.
*/

:root{
  --blue:#075f9b;
  --blue-dark:#123d66;
  --blue-deep:#082f52;
  --green:#087b68;
  --red:#e23d46;
  --orange:#f0a43b;
  --ink:#17334b;
  --muted:#617386;
  --bg:#f6f8fa;
  --line:#d9e2e9;
  --shadow:0 10px 24px rgba(18,61,102,.10);
}

body{
  font-family:"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#fff;
}

/* Cabeçalho: mais institucional e menos "landing page" */
.top{
  border-bottom:1px solid #d8e2e9;
  box-shadow:0 2px 8px rgba(8,47,82,.05);
  background:#fff;
}
.top::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,
    #e63d47 0 34%,
    #f1a13d 34% 49%,
    #04a4be 49% 65%,
    #075f9b 65% 100%);
}
.top .container{min-height:88px;gap:20px;padding-top:4px}
.brand{gap:12px}
.mark{
  width:74px;
  height:62px;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}
.mark img{object-fit:contain}
.brand-copy small{font-size:10px;letter-spacing:.17em;color:#526a7d}
.brand-copy strong{font-size:19px;color:var(--blue-deep);letter-spacing:.01em}
.brand-copy span{font-size:12px;color:#6b7d8d;margin-top:4px}
.nav{gap:18px}
.nav a{
  position:relative;
  padding:8px 0;
  color:#294b66;
  font-size:13px;
  font-weight:700;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:2px;
  height:2px;
  background:var(--blue);
  transition:right .18s ease;
}
.nav a:hover::after{right:0}
.login-btn,.primary,.secondary,.danger,
.role-tabs button,.mgmt-nav button,.calendar-filter{
  border-radius:6px!important;
  box-shadow:none!important;
}
.login-btn,.primary{background:var(--blue)!important}
.login-btn:hover,.primary:hover{background:#064d7e!important}
.secondary{background:#fff!important;border-color:#c7d6e0!important}

/* Hero: foto real + linguagem institucional. Sem ornamentos abstratos. */
.hero{
  background:#0b385c;
  padding:64px 0 62px;
  min-height:390px;
  display:flex;
  align-items:center;
}
.hero::after{display:none!important}
.hero-grid{grid-template-columns:minmax(0,760px) 1fr;gap:34px}
.eyebrow{
  color:#fff;
  font-size:11px;
  letter-spacing:.18em;
  opacity:.9;
}
.hero h1{
  font-size:clamp(38px,4.6vw,60px);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:10px 0 17px;
}
.hero p{
  font-size:17px;
  line-height:1.6;
  max-width:650px;
  color:#f2f7fa;
}
.hero-slogan{
  max-width:640px!important;
  margin-top:19px!important;
  padding:10px 0 10px 15px;
  border-left:3px solid var(--orange);
  font-size:14px!important;
  font-weight:650;
  color:#fff!important;
}

/* Títulos e seções */
.section{padding:62px 0}
.section.alt{background:var(--bg)}
.section-head{margin-bottom:27px}
.section-head h2{
  position:relative;
  font-size:30px;
  color:var(--blue-deep);
  padding-bottom:10px;
}
.section-head h2::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:46px;height:3px;
  background:var(--red);
}
.section-head p{font-size:15px;color:var(--muted)}

/* Cursos: cartões compactos, ícones SVG consistentes */
.course-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.course{
  position:relative;
  min-height:104px;
  display:flex;
  align-items:center;
  gap:15px;
  border-radius:7px;
  padding:17px 44px 17px 17px;
  box-shadow:none;
  border:1px solid #d8e2e9;
  border-left:4px solid var(--blue);
  background:#fff;
  transform:none!important;
}
.course::after{
  content:"›";
  position:absolute;
  right:17px;
  top:50%;
  transform:translateY(-52%);
  font-size:25px;
  font-weight:400;
  color:#8aa0b1;
}
.course:hover{
  transform:none!important;
  box-shadow:0 7px 18px rgba(8,47,82,.08)!important;
  border-color:#bfcfda;
  border-left-color:var(--red);
}
.course-icon{
  flex:0 0 46px;
  width:46px;height:46px;
  border-radius:7px;
  background:#eef5f9;
  color:var(--blue-dark);
  display:grid;
  place-items:center;
  margin:0;
  font-size:0;
}
.course-icon svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.course strong{font-size:15px;color:#173b58}
.course-hero .course-icon{width:58px;height:58px;flex-basis:58px}
.course-hero .course-icon svg{width:34px;height:34px}

/* Notícias com tratamento editorial, sem "cards flutuantes" */
.news-grid{gap:26px}
.news-card{
  min-height:0;
  padding:18px 4px 20px;
  background:transparent;
  border:0;
  border-top:3px solid var(--blue);
  border-radius:0;
  box-shadow:none!important;
  transform:none!important;
}
.news-card:hover{box-shadow:none!important;transform:none!important;border-top-color:var(--red)}
.news-date{font-size:11px;letter-spacing:.045em;text-transform:uppercase;color:var(--green)}
.news-card h3{font-size:19px;line-height:1.32;margin:10px 0 9px;color:var(--blue-deep)}
.news-card p{font-size:14px;line-height:1.55}
.news-read{font-size:13px;margin-top:14px;color:var(--blue-dark)}
.news-more{
  border:1px solid #cddae3;
  background:#fff;
  border-radius:6px;
  box-shadow:none!important;
  transform:none!important;
}

/* Calendário: informação acima de decoração */
.calendar-section{background:#f5f8fa!important}
.calendar-filters{margin-bottom:18px}
.calendar-filter{
  border-radius:4px!important;
  padding:8px 12px;
  box-shadow:none!important;
  background:#fff;
}
.calendar-card{
  border-radius:7px!important;
  box-shadow:none!important;
  border:1px solid #d5e0e8!important;
  padding:14px!important;
}
.calendar-card.has-image:hover{transform:none!important;box-shadow:0 6px 16px rgba(8,47,82,.08)!important}
.calendar-date{
  background:var(--blue)!important;
  border-radius:5px!important;
}
.calendar-icon{font-size:19px}

/* Galeria: moldura simples, fotografia em destaque */
.gallery-card{
  border-radius:7px!important;
  box-shadow:none!important;
  border:1px solid #d8e2e9!important;
}
.gallery-card img{height:205px!important}
.gallery-card div{padding:14px 15px!important}
.gallery-card h3{font-size:17px;color:var(--blue-deep)}
.gallery-lightbox-inner{border-radius:8px!important}

/* Institucional: menos marketing, mais informação */
.diff-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.diff{
  display:grid;
  grid-template-columns:46px 1fr;
  column-gap:14px;
  align-items:start;
  border-radius:7px;
  border:1px solid #d8e2e9;
  border-top:3px solid var(--blue);
  padding:18px;
  box-shadow:none;
}
.diff-icon{
  grid-row:1 / span 2;
  width:46px;height:46px;
  display:grid;place-items:center;
  background:#eef5f9;
  color:var(--blue-dark);
  border-radius:7px;
}
.diff-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.diff strong{margin:1px 0 5px;font-size:16px;color:var(--blue-deep)}
.diff p{font-size:14px}
.diff span:first-child{font-size:0}

/* Rodapé e superfícies restritas */
.footer{background:#082f52;padding:44px 0;border-top:5px solid #075f9b}
.footer h3{font-size:19px}
.footer p,.footer a{font-size:13px}
.modal,.panel,.stat,.list-item,.quick button,.archive button{border-radius:8px!important}
.quick button,.panel,.stat{box-shadow:none!important}
.quick button:hover{transform:none!important;box-shadow:0 5px 14px rgba(8,47,82,.07)!important}

/* Remove o efeito de "flutuação" recorrente típico de templates. */
.login-btn,.primary,.secondary,.danger,
.role-tabs button,.mgmt-nav button,.quick button,.course,.news-card,.news-more,.editor-toolbar button{
  transform:none!important;
}

@media(max-width:1024px){
  .top{position:relative!important;top:auto!important}
  .top .container{min-height:78px;flex-wrap:wrap;padding:10px 0 12px;gap:10px 16px}
  .mark{width:62px;height:54px}
  .brand-copy strong{font-size:17px}
  .nav{order:3;width:100%;overflow-x:auto;gap:16px;padding:2px 0 3px;scrollbar-width:thin}
  .nav a{white-space:nowrap}
  .tools{margin-left:auto}
  .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{min-height:360px}
}

@media(max-width:720px){
  .container{width:min(100% - 28px,1180px)}
  .brand-copy span{display:none}
  .flags{display:none}
  .hero{padding:48px 0 46px;min-height:350px}
  .hero-grid{display:block}
  .hero h1{font-size:clamp(35px,11vw,48px)}
  .hero p{font-size:15px}
  .section{padding:50px 0}
  .section-head h2{font-size:27px}
  .course-grid,.diff-grid{grid-template-columns:1fr}
  .course{min-height:92px}
  .news-grid{grid-template-columns:1fr;gap:12px}
  .news-card{padding-top:15px}
  .calendar-card{grid-template-columns:1fr!important}
  .calendar-date{align-items:center}
  .footer-grid{grid-template-columns:1fr;gap:18px}
}

@media(max-width:460px){
  .top .container{width:min(100% - 22px,1180px)}
  .mark{width:56px;height:49px}
  .brand-copy small{font-size:9px}
  .brand-copy strong{font-size:15px}
  .login-btn{padding:9px 12px;font-size:13px}
  .hero h1{font-size:36px}
}