/* styles.css
   Encadeado por blocos e subclasses.
   Mantém aparência igual ao original, código limpo e responsivo.
*/

:root{
  --top-bg:#fafafa;
  --page-bg:#ffffff;
  --text:#1d2c38;
  --muted:#6b7280;
  --accent:#1d2c38;
  --button-bg:#1d2c38;
  --button-color:#ffffff;
  --container:1100px;
  --gap:24px;
  --radius:8px;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

a{color:inherit;text-decoration:none;font-weight: 800;}
a:focus{outline:2px solid rgba(29,44,56,0.12); outline-offset:3px; border-radius:4px}

/* layout container used throughout */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:40px 24px;
}

/* Skip link (accessible) */
.skip-link{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:#fff; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* Top (header + hero area) */
.top{ width:100%; background:var(--top-bg); }
.top .wrap header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:8px 0 0;
}

/* Brand */
.brand h1{ margin:0; font-size:15px; }
.brand a{ color:var(--text); font-weight:400; transition: font-weight .12s ease, color .12s ease; }
.brand a.active, .brand a:hover{ font-weight:700; }

/* Nav */
nav{ display:flex; gap:20px; align-items:center; font-size:14px; }
nav a{
  position:relative;
  padding:8px 6px 14px;
  color:var(--muted);
  font-weight:400;
}
nav a::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  bottom:6px;
  width:36px;height:3px;
  background:var(--accent);
  border-radius:3px;
  transition:transform .14s ease;
}
nav a:hover, nav a.active{ color:var(--accent); font-weight:700; }
nav a:hover::after, nav a.active::after{ transform:translateX(-50%) scaleX(1); }

/* Hero */
.hero{ padding:20px 0 0 0; }
.hero .hero-inner{ max-width:900px; text-align:left; }
.hero .hero-inner h2{ margin:0 0 8px; font-weight:400; font-size:26px; line-height:1.2; }
.hero .hero-inner p{ margin:0; color:var(--muted); font-size:14px; }

/* hero meta (line + social) */
.hero-meta{ margin-top:18px; display:flex; gap:12px; align-items:center; }
.hero-line{ width:84px; height:2px; background:#e6e6e6; border-radius:2px; }
.social{ display:flex; gap:12px; align-items:center; }
.social a{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:6px; color:var(--muted); transition: transform .12s ease, color .12s ease, background .12s ease; }
.social a:hover{ transform:translateY(-2px); color:var(--accent); background:rgba(29,44,56,0.04); }
.social svg{ width:20px; height:18px; display:block; fill:currentColor; }

/* Main grid: works + destaque */
.grid{ display:grid; grid-template-columns:1fr 490px; gap:48px; align-items:start; margin-bottom:56px; }

/* Works area */
.works h2{ margin:0 0 8px; font-size:36px; font-weight:400; color:var(--text); }
.works p{ margin:0 0 16px; font-size:18px; color:var(--text); }
.btn{
  display:inline-block;
  background:var(--button-bg);
  color:var(--button-color);
  padding:10px 18px;
  border-radius:22px;
  font-weight:600;
  font-size:13px;
  text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,0.06);
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:hover{ transform:translateY(-3px) scale(1.02); opacity:.95; box-shadow:0 10px 24px rgba(2,6,23,0.08); }

/* Destaque image */
.ProofWork img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:8px;}

/* Clients (kept for parity) */
.clients-section{ margin-top:28px; }
.clients-grid{ display:grid; grid-template-columns:repeat(4,0.2fr); gap:22px; align-items:center; justify-items:center; margin-top:8px; }
.client{ width:100px; height:54px; background:#e9e9e9; border-radius:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.client img{ max-width:100%; max-height:100%; display:block; filter:grayscale(100%); transition:filter .18s ease, transform .18s ease; object-fit:contain; padding:8px; }
.client:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(2,6,23,0.06); }
.client:hover img{ filter:none; transform:scale(1.05); }

/* Profile */
.profile{ display:flex; gap:24px; margin:48px 0; align-items:flex-start; flex-wrap:wrap; }
.profile .photo{ flex:0 0 50%; padding:0; }
.profile .photo img{ width:467px; height:536px; object-fit:cover; border-radius:8px; display:block; max-width:100%; }
.profile .about{ flex:1; padding:10px; }
.profile .about h2{ margin-top:0; font-size:36px; font-weight:400; color:var(--text); }
.profile .about p{ margin-bottom:12px; font-size:18px; color:var(--text); }
.cv-btn{ display:inline-block; background:var(--button-bg); color:var(--button-color); padding:9px 16px; border-radius:18px; font-size:13px; font-weight:600; text-decoration:none; transition: transform .16s ease; }
.cv-btn:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 10px 24px rgba(2,6,23,0.08); }

/* Contact */
.contact{ width:100%; margin:40px 0; padding:20px; text-align:center; }
.contact h3{ margin:0 0 8px; font-size:26px; font-weight:400; color:var(--text); }
.contact p{ margin:0 0 8px; font-size:18px; color:var(--text); }

/* Footer */
footer.site-footer{ margin:60px 0 0 0; text-align:center; color:var(--muted); font-size:13px; }

/* Projetos list (trabalhos page) */
#projetos{ display:flex; flex-direction:column; gap:60px; padding:20px 0; }
.project-card{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.project-card:nth-child(even){ flex-direction:row-reverse; }
.project-card figure{ flex:0 0 480px; margin:0; border-radius:6px; overflow:hidden; }
.project-card img{ width:100%; height:auto; display:block; }
.project-card .texto{ flex:1; min-width:280px; }
.project-card .texto h3{ margin:0 0 8px; }
.project-card .texto p{ margin:0 0 12px; color:var(--muted); }

/* Responsive */
@media (max-width:1100px){
  .grid{ grid-template-columns:1fr 360px; gap:28px; }
  .destaque-link{ width:100%; height:auto }
  .destaque-link img{ height:auto }
  .profile .photo img{ width:100%; height:auto }
}
@media (max-width:980px){
  .grid{ grid-template-columns:1fr; gap:28px; }
  .profile{ flex-direction:column; }
  .clients-grid{ grid-template-columns:repeat(3,1fr); }
  .project-card{ flex-direction:column; text-align:center; }
  .project-card:nth-child(even){ flex-direction:column; }
}
@media (max-width:640px){
  .wrap{ padding:28px 18px; }
  nav{ gap:12px; }
  .project-card figure{ flex:auto; margin:0; border-radius:6px; overflow:hidden; }
  .clients-grid{ grid-template-columns:repeat(2,1fr); }
  .client{ width:110px; height:64px; }
  .hero .hero-inner h2{ font-size:14px; }
}