*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
body{font-family:'Roboto',sans-serif;line-height:1.6;color:#333;background:#fff}



.main-header{text-align:center;padding:2rem 1rem;background:#00A1FF;color:#fff}
.main-title{font-family:'Archivo Black',sans-serif;font-size:clamp(2rem,5vw,3.5rem);line-height:1.2}

.featured-images{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:0;
  width:100%
}
.image-card{position:relative;overflow:hidden}
.image-card img{
  width:100%;
  height:280px;
  object-fit:cover;
  transition:transform .3s ease;
  display:block
}
.image-card:hover img{transform:scale(1.03)}
.image-card h3{
  position:absolute;bottom:0;left:0;right:0;
  padding:1rem;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  color:#fff;font-size:1.1rem;font-weight:700
}


.posts-list{padding:2rem 1rem;max-width:1200px;margin:0 auto}
#posts-container{display:grid;gap:1.2rem}
.post-item{
  display:flex;gap:1rem;padding:1.2rem;border-left:4px solid #00A1FF;
  background:#f9f9f9;border-radius:0 8px 8px 0;transition:background .2s
}
.post-item:hover{background:#f0f0f0}
.post-arrow{font-size:1.5rem;color:#00A1FF;font-weight:bold;line-height:1}
.post-content{flex:1}
.post-title{font-size:1.1rem;font-weight:700;margin-bottom:.3rem;color:#111}
.post-text{font-size:.95rem;color:#444;margin-bottom:.5rem}
.post-date{font-size:.85rem;color:#777;font-style:italic}


.cinematic-footer{position:relative;height:200px;overflow:hidden}
.footer-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4)}
.footer-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.footer-content{text-align:center;color:#fff;font-size:1.1rem}
.footer-content p{margin:.3rem 0}

.footer-link,
.footer-link:link,
.footer-link:visited,
.footer-link:hover,
.footer-link:active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* iOS Safari */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent; /* Remove highlight azul ao tocar */
  transition: opacity 0.2s ease;
}
.footer-link:hover,
.footer-link:active {
  opacity: 0.85;
  text-decoration: underline;
}

@media (max-width:768px){
  .featured-images{grid-template-columns:1fr}
  .image-card img{height:220px}
  .post-item{flex-direction:column;gap:.5rem}
  .cinematic-footer{height:160px}
}
@media (max-width:480px){
  .main-title{font-size:1.8rem}
  .image-card img{height:180px}
  .posts-list{padding:1.5rem .8rem}
}