/* OliP Engenharia — réplica estática do site olipeng.com
   Fontes: Jost (substituto de Futura PT) + Nunito Sans (substituto de Proxima Nova) */

:root{
  --bg:#fcfcfc;
  --text:#575757;
  --heading:#222;
  --muted:#999;
  --rule:#ddd;
  --accent:#84a0ae;
  --dark:#111;
  --title:#404040;
  --sans:"Nunito Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;font-weight:300;line-height:27px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;border:0;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}

h1,h2,h3,h4{
  font-family:var(--display);font-weight:300;color:var(--heading);
  text-transform:uppercase;margin:0 0 12px;
}
h1{font-size:28px;letter-spacing:1.7px;line-height:1.2}
h2{font-size:24px;letter-spacing:1.44px;line-height:28.8px}
h3{font-size:17px;letter-spacing:1.02px;line-height:24px}

.rich{overflow-wrap:anywhere}
.rich a{color:var(--accent);border-bottom:1px solid rgba(132,160,174,.5)}
.rich a:hover{color:var(--heading);border-color:var(--heading)}
.rich strong{font-weight:600;color:#3f3f3f}

/* ---------- anúncio ---------- */
#announcement{background:var(--accent);color:#fff;font-size:13px;line-height:1.4;text-align:center;position:relative}
#announcement .inner{padding:8px 44px}
#announcement button{
  position:absolute;top:0;right:4px;height:100%;width:36px;background:none;border:0;
  color:#fff;font-size:18px;line-height:1;cursor:pointer;opacity:.8;font-family:var(--sans)
}
#announcement button:hover{opacity:1}
#announcement.is-hidden{display:none}

/* ---------- estrutura ---------- */
#canvas{max-width:var(--maxw);margin:0 auto;padding:0 20px 20px}
.divider{border-bottom:1px solid var(--rule);height:1px}

/* ---------- cabeçalho ---------- */
#header{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 0 16px}
#logo{flex:0 1 auto;min-width:0}
#logo h1{margin:0}
#logo img{width:388px;max-width:100%;height:auto}
.logo-subtitle{
  font-family:var(--display);font-size:11px;letter-spacing:.85px;color:var(--muted);
  text-transform:uppercase;line-height:1.4;padding:0 0 14px
}
#topNav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px}
#topNav a{
  font-family:var(--display);font-size:16px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  transition:color .2s
}
#topNav a:hover{color:var(--dark)}
#topNav li.active a{color:var(--dark)}

#mobileMenuLink{display:none}
#mobileNav{display:none}

/* ---------- conteúdo ---------- */
#page{padding:38px 0 10px;min-height:280px}
.page-narrow{max-width:830px;margin:0 auto}
.text-center{text-align:center}

/* ---------- grade de projetos ---------- */
#projectThumbs{padding-top:10px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.thumb{display:block}
.thumb figure{margin:0;overflow:hidden;background:#f1f1f1;aspect-ratio:4/3}
.thumb img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  transition:opacity .35s ease, transform .6s ease;
}
.thumb:hover img{opacity:.78}
.thumb .project-title{
  font-family:var(--display);font-size:14px;letter-spacing:.84px;line-height:22.4px;
  text-transform:uppercase;color:var(--title);text-align:center;padding:10px 4px 0
}
.thumb:hover .project-title{color:var(--dark)}

/* ---------- página de projeto ---------- */
.project-layout{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
/* itens de grid têm min-width:auto por padrão: sem isto, a faixa de miniaturas
   (que pode ter 24 itens) define a largura mínima da coluna e estoura o layout */
.project-layout > *{min-width:0}

.slideshow{position:relative;background:#f4f4f4}
.slideshow .stage{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden}
.slideshow .stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .45s ease;background:#f4f4f4
}
.slideshow .stage img.is-active{opacity:1}
.slide-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:28px;height:52px;border:0;cursor:pointer;
  background:rgba(255,255,255,.72);color:#4a4a4a;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s
}
.slide-btn:hover{background:#fff;color:#111}
.slide-btn.prev{left:12px}
.slide-btn.next{right:12px}

.strip{display:flex;gap:10px;overflow-x:auto;padding:10px 0 2px;scrollbar-width:thin;min-width:0;max-width:100%}
.strip button{
  flex:0 0 auto;width:60px;height:60px;padding:0;border:0;cursor:pointer;background:#eee;
  opacity:.5;transition:opacity .2s
}
.strip button img{width:100%;height:100%;object-fit:cover}
.strip button.is-active,.strip button:hover{opacity:1}

.project-text h1,.project-text h2{color:var(--heading)}
.project-counter{
  font-family:var(--display);font-size:12px;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;padding-top:12px
}

.project-controls{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--display);font-size:14px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);padding:34px 0 8px;border-top:1px solid var(--rule);margin-top:40px
}
.project-controls a{color:var(--muted)}
.project-controls a:hover{color:var(--dark)}
.project-controls .sep{padding:0 6px}

/* ---------- quem somos ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 34px;padding-top:40px;align-items:start}
.service{text-align:center}
.service img{height:110px;width:auto;max-width:70%;object-fit:contain;margin:0 auto 18px}
.service h3{color:var(--heading)}

/* ---------- contato ---------- */
.contact-grid{max-width:830px;margin:0 auto}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin:0 0 18px}
.field label,fieldset > legend{
  display:block;font-family:var(--display);font-size:12px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--muted);padding-bottom:6px
}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--text);
  background:#fff;border:1px solid #d6d6d6;padding:10px 12px;border-radius:2px
}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--accent)}
.field textarea{min-height:150px;resize:vertical}
fieldset{border:0;margin:0 0 18px;padding:0}
.btn{
  display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:1.2px;
  text-transform:uppercase;background:var(--accent);color:#fff;border:0;
  padding:12px 34px;cursor:pointer;transition:background .2s
}
.btn:hover{background:#6f8b99}
.form-note{font-size:13px;color:var(--muted);padding-top:12px}

/* ---------- rodapé ---------- */
#footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0}
#footer p{margin:0;font-size:15px}
#footer strong{font-weight:600}
.social{display:flex;gap:10px}
.social a{
  width:36px;height:36px;border-radius:50%;background:#dcdcdc;color:#fcfcfc;
  display:flex;align-items:center;justify-content:center;transition:background .2s
}
.social a:hover{background:var(--accent)}
.social svg{width:18px;height:18px;fill:currentColor;display:block}

/* ---------- responsivo ---------- */
@media (max-width:1000px){
  .project-layout{grid-template-columns:1fr;gap:26px}
  .thumbs{gap:26px}
}
@media (max-width:860px){
  #header{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0 12px}
  #logo img{width:300px}
  #topNav ul{gap:20px}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .thumbs{grid-template-columns:1fr;gap:22px}
  .services{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr;gap:0}
  #footer{flex-direction:column;align-items:flex-start;gap:12px}
  #topNav a{font-size:14px}
  .slideshow .stage{aspect-ratio:4/3}
}