/* === Base === */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:#0e0e10; color:#fff;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
}
.container{ width:min(1200px,92vw); margin:0 auto; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; }
.site-top{ position:sticky; top:0; z-index:50; padding:18px 0; background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0)); }
.brand img{ height:44px; width:auto; display:block; }
.main-nav{ display:flex; align-items:center; gap:10px; color:#fff; opacity:.95; justify-self:center; }
.main-nav .sep{ opacity:.4; }
.nav-link{ position:relative; text-decoration:none; color:#fff; padding:4px 6px; display:inline-block; }
.nav-link::after{ content:""; position:absolute; left:6px; right:6px; bottom:0; height:1.5px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-link:hover{ color:#ef4444; }
.socials{ display:flex; gap:8px; justify-self:end; }
.icon-btn{ height:28px; width:28px; display:inline-flex; align-items:center; justify-content:center; color:#fff; opacity:.7; text-decoration:none; border-radius:8px; }
.icon-btn:hover{ color:#ef4444; opacity:1; }

/* === Head === */
.page.container{ grid-template-columns:1fr; gap:0; padding-top:32px; }
.head{ padding:100px 0 8px; }
.kicker{ opacity:.85; margin:0 0 14px; }
.title{ font-size:64px; font-weight:900; letter-spacing:.01em; margin:0 0 3px; }
.sub{ opacity:.8; margin:0 0 20px; }

/* === List + Preview === */
.list-wrap{ display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:start; }
@media (max-width:980px){ .list-wrap{ grid-template-columns:1fr; } .preview{ display:none; } }
.list{ list-style:none; margin:0; padding:0; }
.row{ position:relative; padding:16px 0; border-bottom:1px solid #232325; }
.row-link{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; text-decoration:none; color:#fff; }
.idx{ opacity:.5; min-width:36px; text-align:right; font-variant-numeric:tabular-nums; }
.row-year{ opacity:.7; font-weight:800; letter-spacing:.1em; }

/* Título com “flame” opcional */
.row-title{
  display:block; line-height:1.1; color:#dcdcdc;
  text-transform:uppercase; font-size:36px; font-weight:900; letter-spacing:.01em;
}
.row-title .t{ display:inline; vertical-align:baseline; }
.row-title .t::after{
  content:""; display:inline-block; width:30px; height:30px; margin-left:10px;
  vertical-align:baseline; background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'><path d='M12 2c1.5 4-1 5.5-1 7 0 1.2.8 2.2 2 2.2 2.8 0 5-2.4 5-5.3 3.5 3.2 4 7.6 1.6 10.8C17.8 20.7 15 22 12 22s-5.8-1.3-7.6-5.3C3 13.5 4.5 10.6 7.5 8c-.3 3 1.9 5.2 4.5 5.2 1.1 0 2-.9 2-2 0-2.2-2.5-2.9-2-9.2z'/></svg>");
  opacity:0; transform:translateY(-2px) scale(.9); transition:opacity .25s, transform .25s;
}
.row:hover .row-title{ color:#fff; }
.row:hover .row-title .t::after{ opacity:1; transform:translateY(-2px) scale(1); }

/* Preview (retangular, com descrição) */
.preview{ position:sticky; top:110px; display:block; min-height:240px; visibility:hidden;
  background:#111; padding:15px; border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,0.4);
}
.preview.show{ visibility:visible; }
.preview img{ width:100%; display:block; border:1px solid #1b1b1b; border-radius:8px; margin-bottom:12px; }

/* Descrição do preview */
.work-description{ font-size:14px; line-height:1.6; color:#ddd; }
.work-description p{ margin:6px 0; display:flex; align-items:flex-start; }
.work-description strong{ min-width:110px; color:#e10600; font-weight:700; flex-shrink:0; }
.work-description span{ flex:1; }
.preview-desc{
  margin:10px 0 0; padding:12px 14px; font-size:14px; line-height:1.45; color:#bbb;
  background:#121212; border:1px solid #1b1b1b; border-radius:0;
}

/* Espaço antes do footer */
#list{ margin-bottom:60px !important; }
.site-footer{ margin-bottom:40px; }

/* Footer */
.footer{ display:flex; justify-content:space-between; align-items:center; padding:1.5rem 5%; background:#111; font-size:.9rem; color:#ccc; }
.footer .container{ display:flex; justify-content:space-between; align-items:center; }
.footer-left{ display:flex; align-items:center; gap:.8rem; }
.footer-logo{ height:22px; opacity:.9; }

/* CTA */
.cta-section{
  text-align:center; padding:60px 20px; background:#222;
  margin-top:0; margin-bottom:60px; border-radius:8px;
}
.cta-section h2{ font-size:2.5rem; font-weight:700; line-height:1.3; margin-bottom:20px; color:#fff; }
.cta-content{ display:flex; align-items:center; justify-content:center; gap:20px; }
.cta-content h2{ margin:0; font-size:2rem; }
.cta-content .highlight{ color:#e63946; }
.cta-btn{
  display:inline-block; padding:10px 20px; border:1px solid #e63946; border-radius:20px;
  color:#e63946; text-decoration:none; font-weight:500; transition:all .3s ease;
}
.cta-btn:hover{ background:#e63946; color:#fff; }

/* Header scrolled + “More” */
header{ transition:background .3s ease, box-shadow .3s ease; background:transparent; }
header.scrolled{ background:rgba(12,12,12,.9); backdrop-filter:blur(6px); box-shadow:0 2px 6px rgba(0,0,0,.2); }
.and-more{ text-align:left; font-size:1rem; font-weight:700; color:#fff; margin:-2rem 0 4rem; letter-spacing:4px; opacity:.8; }