:root{

  --wine:#76070d;

  --wine-dark:#5d080d;

  --wine-light:#8a1118;

  --gold:#b47a19;

  --cream:#f6edda;

  --cream-2:#fbf7ed;

  --paper:#fffdf8;

  --ink:#4b2a22;

  --muted:#74655b;

  --line:#d9c7a4;

  --white:#fff;

  --shadow:0 12px 30px rgba(73,39,22,.12);

}



*{

  box-sizing:border-box;

}



html{

  scroll-behavior:smooth;

}



body{

  margin:0;

  background:var(--paper);

  color:var(--ink);

  font-family:Inter,Arial,sans-serif;

  line-height:1.55;

}



img{

  display:block;

  max-width:100%;

}



a{

  color:inherit;

  text-decoration:none;

}



button,

input{

  font:inherit;

}



/* =========================================================
   TOPO
   ========================================================= */



.top-header{

  height:74px;

  background:var(--wine);

  border-bottom:1px solid rgba(255,255,255,.14);

}



.top-header-inner{

  width:calc(100% - 32px);

  height:100%;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

}



.institutional-brand{

  display:flex;

  align-items:center;

  height:100%;

  overflow:hidden;

}



.top-ufma-brand{

  display:flex;

  align-items:center;

  gap:10px;

  height:100%;

}



.top-logo-ufma{

  width:70px;

  height:64px;

  object-fit:contain;

  object-position:center;

  border-radius:0;

}



.top-ufma-name{

  color:#fff;

  font-size:11px;

  line-height:1.12;

  font-weight:500;

  white-space:nowrap;

  text-align:left;

}



.top-brand-divider{

  width:1px;

  height:46px;

  background:rgba(255,255,255,.35);

  margin:0 17px;

  flex:none;

}



/* =========================================================
   SIBI DO TOPO
   ========================================================= */



.top-logo-sibi{

  width:120px;

  height:62px;

  object-fit:contain;

  object-position:center;

}



/* =========================================================
   BUSCA
   ========================================================= */



.top-search{

  width:245px;

  height:38px;

  border-radius:20px;

  background:#fff;

  display:flex;

  align-items:center;

  overflow:hidden;

  flex:none;

}



.top-search input{

  width:100%;

  height:100%;

  border:0;

  outline:0;

  background:transparent;

  padding:0 14px;

  color:var(--ink);

  font-size:12px;

}



.top-search input::placeholder{

  color:#8b8177;

}



.top-search button{

  width:40px;

  height:100%;

  border:0;

  background:transparent;

  color:var(--wine);

  font-size:20px;

  cursor:pointer;

}



/* =========================================================
   MENU
   ========================================================= */



.main-nav{

  height:53px;

  background:var(--cream);

  border-bottom:1px solid #e2d5ba;

}



.nav-inner{

  width:calc(100% - 32px);

  height:100%;

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:center;

}



.nav-links{

  height:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:0;

}



.nav-links a{

  height:100%;

  display:flex;

  align-items:center;

  padding:0 25px;

  border-right:1px solid #eadfc9;

  font-family:'Cormorant Garamond',Georgia,serif;

  font-size:18px;

  font-weight:700;

  white-space:nowrap;

  position:relative;

  text-shadow:0 1px 1px rgba(75,42,34,.18);

}



.nav-links a:first-child{

  border-left:1px solid #eadfc9;

}



.nav-links a:hover,

.nav-links a.active{

  color:var(--wine);

  background:#f3ead7;

}



.nav-links a.active:after{

  content:'';

  position:absolute;

  left:0;

  right:0;

  bottom:0;

  height:4px;

  background:var(--wine);

}



.mobile-menu{

  display:none;

  border:0;

  background:none;

  color:var(--wine);

  font-size:26px;

  cursor:pointer;

}



/* =========================================================
   HERO
   ========================================================= */



.hero{

  width:100%;

  background:#ead9b7;

  overflow:hidden;

}



.hero-banner{

  width:100%;

  height:auto;

  display:block;

  object-fit:cover;

}



/* =========================================================
   ACESSOS RÁPIDOS
   ========================================================= */



.quick-access{

  background:var(--cream);

  border-bottom:1px solid #e3d5b8;

  padding:22px 0 30px;

}



.quick-access-inner{

  width:calc(100% - 32px);

  margin:auto;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:34px;

}



/*
   Cada botão agora é uma imagem independente.
   Não existe mais recorte de botoes-memorar.png.
*/



.quick-button{

  flex:0 0 auto;

  width:auto;

  min-width:0;

  display:flex;

  align-items:center;

  justify-content:center;

  transition:
    transform .2s ease,
    opacity .2s ease;

}



.quick-button img{

  width:180px;

  height:auto;

  max-height:154px;

  object-fit:contain;

}



.quick-button:hover{

  transform:translateY(-3px);

  opacity:.94;

}



/* =========================================================
   ÁREAS GERAIS
   ========================================================= */



.section-paper{

  background:var(--paper);

}



.content-width{

  width:calc(100% - 32px);

  margin:auto;

}



/* =========================================================
   SOBRE / PROJETO
   ========================================================= */



.welcome{

  padding:64px 0 62px;

  border-bottom:1px solid #efe5d2;

}



.welcome-grid{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:55px;

  align-items:center;

}



.kicker{

  display:block;

  color:var(--gold);

  font-size:11px;

  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;

  margin-bottom:7px;

}



.welcome h1{

  font:700 58px/1 'Cormorant Garamond',Georgia,serif;

  color:var(--wine);

  margin:0 0 20px;

}



.welcome-copy p{

  max-width:560px;

  margin:0 0 15px;

  font-size:15px;

  color:#62574f;

  line-height:1.62;

}



.primary-button,

.outline-button{

  display:inline-flex;

  align-items:center;

  gap:13px;

  border-radius:25px;

  padding:12px 21px;

  font-size:12px;

  font-weight:700;

  transition:.2s;

}



.primary-button{

  background:var(--wine);

  color:#fff;

  margin-top:9px;

}



.primary-button:hover{

  background:var(--wine-light);

  transform:translateY(-1px);

}



.primary-button span,

.outline-button span{

  font-size:16px;

  line-height:1;

}



.feature-image{

  position:relative;

  border-radius:9px;

  overflow:hidden;

  min-height:340px;

  box-shadow:var(--shadow);

  background:#321c15;

}



.feature-image>img{

  width:100%;

  height:100%;

  min-height:340px;

  object-fit:cover;

}



.feature-overlay{

  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:42px;

  background:linear-gradient(
    90deg,
    rgba(61,18,12,.86),
    rgba(61,18,12,.12) 78%
  );

  color:#fff;

}



.feature-overlay p{

  font:500 31px/1.03 'Cormorant Garamond',Georgia,serif;

  margin:0;

  max-width:310px;

  text-shadow:0 1px 2px rgba(0,0,0,.2);

}



.feature-overlay em{

  font-style:italic;

}



.feature-arrow{

  font-size:28px;

  margin-top:10px;

  color:#f0d49b;

}



.slider-dots{

  position:absolute;

  bottom:13px;

  left:50%;

  transform:translateX(-50%);

  display:flex;

  gap:7px;

}



.slider-dots span{

  width:7px;

  height:7px;

  border-radius:50%;

  border:1px solid #fff;

  display:block;

}



.slider-dots span.selected{

  background:#fff;

}



.slide-button{

  position:absolute;

  bottom:8px;

  width:34px;

  height:34px;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.65);

  background:rgba(53,22,17,.45);

  color:#fff;

  font-size:25px;

  line-height:27px;

  cursor:pointer;

}



.slide-button.prev{

  left:12px;

}



.slide-button.next{

  right:12px;

}



/* =========================================================
   MEMÓRIA
   ========================================================= */



.memory{

  background:var(--cream);

  padding:62px 0 78px;

  border-bottom:1px solid var(--line);

}



.memory-heading{

  margin-bottom:38px;

}



.memory-heading h2{

  margin:0 0 12px;

  color:var(--wine);

  font:700 49px/1 'Cormorant Garamond',Georgia,serif;

}



.memory-heading p{

  max-width:900px;

  margin:0;

  color:#675b53;

  font-size:15px;

}



.memory-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:27px;

}



.memory-card{

  background:#fffdfa;

  border:1px solid #dfcfb1;

  box-shadow:0 7px 20px rgba(76,45,24,.07);

  overflow:hidden;

}



.memory-image{

  height:260px;

  background:#eee2cc;

  overflow:hidden;

}



.memory-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:transform .35s ease;

}



.memory-card:hover .memory-image img{

  transform:scale(1.035);

}



.memory-card-body{

  padding:22px 25px 26px;

}



.card-kicker{

  display:block;

  color:var(--gold);

  font-size:10px;

  font-weight:700;

  letter-spacing:.16em;

  margin-bottom:8px;

}



.memory-card h3{

  font:700 28px/1.05 'Cormorant Garamond',Georgia,serif;

  color:var(--wine);

  margin:0 0 8px;

}



.memory-card p{

  font-size:14px;

  color:#655a52;

  margin:0;

  line-height:1.55;

}



/* =========================================================
   NOTÍCIAS
   ========================================================= */



.news{

  padding:48px 0 0;

  background:var(--cream-2);

}



.section-title-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  border-bottom:1px solid #cdbb97;

  padding:0 0 14px;

  margin-bottom:0;

}



.section-title-row h2{

  margin:0;

  color:var(--wine);

  font:700 38px/1 'Cormorant Garamond',Georgia,serif;

}



.section-title-row a{

  font:600 13px 'Cormorant Garamond',Georgia,serif;

  color:#6c3b29;

  white-space:nowrap;

}



.news-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  border-bottom:1px solid #d9c8a8;

}



.news-item{

  display:grid;

  grid-template-columns:120px 1fr;

  gap:18px;

  padding:23px 20px 27px 0;

  border-right:1px solid #d9c8a8;

}



.news-item:not(:first-child){

  padding-left:20px;

}



.news-item:last-child{

  border-right:0;

}



.news-item img{

  width:120px;

  height:92px;

  object-fit:cover;

}



.news-item time{

  display:block;

  font-size:10px;

  color:#7c6d62;

  margin-bottom:5px;

}



.news-item h3{

  font:600 19px/1.08 'Cormorant Garamond',Georgia,serif;

  margin:0 0 10px;

  color:#4b2a22;

}



.news-item a{

  font-size:10px;

  font-weight:700;

  color:var(--wine);

}



.news-item a span{

  font-size:14px;

}



/* =========================================================
   DOCUMENTOS
   ========================================================= */



.documents{

  padding:42px 0 54px;

  background:#fffdf9;

  border-top:1px solid #eee1ca;

}



.documents-box{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

}



.documents h2{

  margin:0 0 7px;

  font:700 32px/1.05 'Cormorant Garamond',Georgia,serif;

  color:var(--wine);

}



.documents p{

  margin:0;

  max-width:780px;

  font-size:14px;

  color:#75685f;

}



.outline-button{

  border:1px solid var(--wine);

  color:var(--wine);

  background:transparent;

  padding:14px 23px;

  border-radius:28px;

  white-space:nowrap;

}



.outline-button:hover{

  background:var(--wine);

  color:#fff;

}



/* =========================================================
   CONTATO
   ========================================================= */



.contact{

  padding:66px 0 72px;

  background:var(--cream);

}



.contact-grid{

  display:grid;

  grid-template-columns:1.45fr .85fr;

  gap:55px;

  align-items:center;

}



.contact h2{

  font:700 48px/1 'Cormorant Garamond',Georgia,serif;

  color:var(--wine);

  margin:0 0 16px;

}



.contact > .content-width > div:first-child p{

  max-width:700px;

  color:#62574f;

  font-size:15px;

  margin:0;

}



.contact-info{

  border-left:1px solid #d6bd8c;

  padding-left:40px;

}



.contact-info h3{

  font:700 25px/1.1 'Cormorant Garamond',Georgia,serif;

  color:var(--wine);

  margin:0 0 12px;

}



.contact-info p{

  margin:4px 0;

  color:#5f544c;

  font-size:15px;

}



/* =========================================================
   RODAPÉ
   ========================================================= */



.footer{

  background:var(--wine);

  color:#fff;

  border-top:4px solid #7e181d;

}



.footer-inner{

  width:calc(100% - 32px);

  margin:auto;

  min-height:155px;

  display:grid;

  grid-template-columns:
    1.05fr
    .95fr
    1fr
    1.15fr;

  align-items:center;

  gap:25px;

}



.footer-logo{

  display:flex;

  align-items:center;

  min-width:0;

}



.footer-logo img{

  object-fit:contain;

  opacity:.98;

}



.footer-logo.ufma-logo{

  justify-content:center;

  gap:12px;

}



.footer-logo.ufma-logo img{

  width:78px;

  height:82px;

}



.footer-ufma-name{

  color:#fff;

  font-size:11px;

  line-height:1.12;

  font-weight:500;

  white-space:nowrap;

  text-align:left;

}



/*
   SIBI correto do rodapé.
*/



.footer-logo.sibi-logo{

  justify-content:center;

  border-left:1px solid rgba(255,255,255,.25);

  border-right:1px solid rgba(255,255,255,.25);

  height:70px;

}



.footer-logo.sibi-logo img{

  width:165px;

  height:70px;

  object-fit:contain;

}



.footer-support{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

}



.footer-support small{

  font-size:11px;

}



.footer-support img{

  width:165px;

  height:78px;

  object-fit:contain;

}



.footer-memorar{

  display:flex;

  justify-content:center;

  border-left:1px solid rgba(255,255,255,.25);

  padding-left:20px;

}



.footer-memorar img{

  width:215px;

  height:auto;

  object-fit:contain;

}



.footer-bottom{

  border-top:1px solid rgba(255,255,255,.17);

  text-align:center;

  padding:11px 20px;

  font-size:10px;

  color:#e6d9cf;

}



.toast{

  position:fixed;

  left:50%;

  bottom:20px;

  transform:translate(-50%,100px);

  padding:11px 17px;

  background:#271715;

  color:#fff;

  border-radius:20px;

  font-size:12px;

  box-shadow:var(--shadow);

  transition:.25s;

  z-index:50;

}



.toast.show{

  transform:translate(-50%,0);

}



/* =========================================================
   TEXTOS JUSTIFICADOS
   ========================================================= */



.page-hero p,

.content-section p,

.welcome-copy p,

.memory-heading p,

.memory-card p,

.news-item p,

.documents p,

.contact p,

.contact-info p,

.single-info-box p{

  text-align:justify;

}



/* =========================================================
   TABLET
   ========================================================= */



@media(max-width:1050px){



  .nav-links a{

    padding:0 13px;

    font-size:14px;

  }



  .top-header-inner,

  .nav-inner,

  .content-width,

  .footer-inner{

    width:calc(100% - 32px);

  }



  .quick-access-inner{

    width:calc(100% - 32px);

    gap:22px;

  }



  .quick-button img{

    max-height:180px;

  }



  .memory-image{

    height:225px;

  }



  .news-item{

    grid-template-columns:95px 1fr;

  }



  .news-item img{

    width:95px;

    height:76px;

  }



}



/* =========================================================
   MOBILE
   ========================================================= */



@media(max-width:780px){



  .top-header{

    height:64px;

  }



  .top-header-inner{

    width:calc(100% - 28px);

  }



  .top-ufma-brand{

    gap:6px;

  }



  .top-logo-ufma{

    width:48px;

    height:58px;

  }



  .top-ufma-name{

    font-size:8px;

  }



  .top-brand-divider{

    height:40px;

    margin:0 8px;

  }



  .top-logo-sibi{

    width:90px;

    height:55px;

  }



  .top-search{

    width:185px;

    height:34px;

  }



  .main-nav{

    height:48px;

  }



  .nav-inner{

    justify-content:flex-end;

    width:calc(100% - 28px);

  }



  .mobile-menu{

    display:block;

  }



  .nav-links{

    display:none;

    position:absolute;

    top:112px;

    left:14px;

    right:14px;

    height:auto;

    flex-direction:column;

    background:var(--cream);

    box-shadow:var(--shadow);

    z-index:20;

    border:1px solid #e0d1b2;

  }



  .nav-links.open{

    display:flex;

  }



  .nav-links a{

    width:100%;

    height:43px;

    border:0;

    border-bottom:1px solid #e8dcc5;

    padding:0 18px;

  }



  .nav-links a:first-child{

    border-left:0;

  }



  .hero-banner{

    min-height:150px;

    object-fit:cover;

  }



  /* BOTÕES */



  .quick-access{

    padding:18px 0 25px;

  }



  .quick-access-inner{

    width:100%;

    padding:0 18px;

    display:flex;

    justify-content:flex-start;

    align-items:center;

    gap:20px;

    overflow-x:auto;

    scrollbar-width:none;

  }



  .quick-access-inner::-webkit-scrollbar{

    display:none;

  }



  .quick-button{

    flex:0 0 155px;

  }



  .quick-button img{

    width:100%;

    max-height:none;

  }



  .welcome{

    padding:42px 0;

  }



  .welcome-grid{

    grid-template-columns:1fr;

    gap:30px;

  }



  .welcome h1{

    font-size:46px;

  }



  .feature-image{

    min-height:270px;

  }



  .feature-image>img{

    min-height:270px;

  }



  .memory{

    padding:48px 0 55px;

  }



  .memory-heading h2{

    font-size:42px;

  }



  .memory-grid{

    grid-template-columns:1fr;

    gap:22px;

  }



  .memory-image{

    height:240px;

  }



  .news{

    padding-top:35px;

  }



  .news-grid{

    grid-template-columns:1fr;

  }



  .news-item,

  .news-item:not(:first-child){

    padding:18px 0;

    border-right:0;

    border-bottom:1px solid #d9c8a8;

  }



  .news-item:last-child{

    border-bottom:0;

  }



  .news-item img{

    width:120px;

    height:90px;

  }



  .documents-box{

    display:block;

  }



  .outline-button{

    margin-top:18px;

  }



  .contact-grid{

    grid-template-columns:1fr;

    gap:30px;

  }



  .contact h2{

    font-size:42px;

  }



  .contact-info{

    border-left:0;

    border-top:1px solid #d6bd8c;

    padding:25px 0 0;

  }



  .footer-inner{

    grid-template-columns:1fr 1fr;

    gap:16px;

    padding:22px 0;

  }



  .footer-logo.sibi-logo{

    border:0;

  }



  .footer-logo.sibi-logo img{

    width:145px;

    height:65px;

  }



  .footer-memorar{

    justify-content:flex-start;

    border-left:0;

    padding-left:0;

  }



}



/* =========================================================
   CELULAR PEQUENO
   ========================================================= */



@media(max-width:480px){



  .top-header-inner{

    gap:8px;

  }



  .top-logo-ufma{

    width:42px;

  }



  .top-ufma-name{

    font-size:7px;

  }



  .top-brand-divider{

    margin:0 5px;

  }



  .top-logo-sibi{

    width:70px;

    height:50px;

  }



  .top-search{

    width:145px;

  }



  .top-search input{

    font-size:10px;

    padding-left:10px;

  }



  .hero-banner{

    min-height:125px;

  }



  .content-width{

    width:calc(100% - 28px);

  }



  .feature-overlay p{

    font-size:25px;

  }



  .section-title-row h2{

    font-size:32px;

  }



  .quick-button{

    flex-basis:145px;

  }



  .quick-access-inner{

    gap:16px;

  }



  .footer-inner{

    grid-template-columns:1fr;

  }



  .footer-logo.sibi-logo{

    justify-content:flex-start;

  }



}



/* =========================================================
   OCULTAR RÓTULOS AMARELOS
   ========================================================= */



.kicker,

.card-kicker{

  display:none;

}



/* =========================================================
   AJUSTE FINAL — ESPAÇAMENTO MAIOR NAS LATERAIS
   ========================================================= */



.top-header-inner,

.nav-inner,

.quick-access-inner,

.content-width,

.footer-inner{

  width:calc(100% - 120px);

  max-width:none;

  margin-left:auto;

  margin-right:auto;

}



@media(max-width:1050px){



  .top-header-inner,

  .nav-inner,

  .content-width,

  .footer-inner,

  .quick-access-inner{

    width:calc(100% - 80px);

    max-width:none;

    margin-left:auto;

    margin-right:auto;

  }



}



@media(max-width:780px){



  .top-header-inner,

  .nav-inner,

  .content-width,

  .footer-inner,

  .quick-access-inner{

    width:calc(100% - 36px);

    max-width:none;

    margin-left:auto;

    margin-right:auto;

  }



  .quick-access-inner{

    padding-left:0;

    padding-right:0;

  }



}



@media(max-width:480px){



  .top-header-inner,

  .nav-inner,

  .content-width,

  .footer-inner,

  .quick-access-inner{

    width:calc(100% - 28px);

    max-width:none;

    margin-left:auto;

    margin-right:auto;

  }



}



/* =========================================================
   AJUSTE FINAL — BANNER DOS BOTÕES MAIS FINO E BOTÕES MAIS ALTOS
   ========================================================= */



.quick-button{

  transform:translateY(-10px);

}



.quick-button:hover{

  transform:translateY(-13px);

  opacity:.94;

}



@media(max-width:780px){



  .quick-button{

    transform:translateY(-6px);

  }



  .quick-button:hover{

    transform:translateY(-9px);

  }



}