/* ====== PALETA CLARA (HOME) ====== */
:root{
  --bg:#F8F8F8;
  --ink:#C2A676;           /* dourado suave */
  --ink-strong:#A58B5A;    /* dourado mais escuro */
  --muted:#D6C7A1;
  --line:#EDE9E2;
  --card:#FFFFFF;
  --accent:#D4B87A;
  --accent-ink:#725E2B;
}

body{ background:var(--bg); color:var(--ink); margin:0; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial; }
a{ color:var(--ink); text-decoration:none }
a:hover{ color:var(--accent) }

.shell{ max-width:860px; margin:0 auto; padding:22px 12px } /* mais “enxuto” nas bordas */

/* Header minimal */
.head{ display:flex; align-items:center; justify-content:space-between; padding:6px 0 10px; border-bottom:1px solid var(--line); margin-bottom:16px }
.brand{ font-weight:700; letter-spacing:.2px; color:var(--ink-strong); font-size:15px }
.nav{ display:flex; gap:14px }
.nav a{ color:var(--ink); font-size:13px; opacity:.9 }
.nav a:hover{ opacity:1; color:var(--accent) }

/* Hero */
.hero{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:#FAFAFA; min-height:46vh; display:grid; align-items:end; margin-bottom:24px }
.hero-img{ position:absolute; inset:0; background:center/cover no-repeat; opacity:.68; filter:grayscale(8%) saturate(1.05) }
.hero-grad{ position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(255,255,255,.88)) }
.hero-inner{ position:relative; padding:20px }
.h1{ font-size:25px; line-height:1.25; margin:8px 0 4px; font-weight:700; color:var(--ink-strong) }
.p{ color:var(--ink); max-width:62ch; opacity:.9; font-size:13px }

/* Seções */
section{ padding:0 0 22px; border-bottom:1px solid var(--line) }
section:last-of-type{ border-bottom:none }

/* SOBRE full-width */
.sobre{ width:100%; margin:34px 0; padding:0 }
.sobre-texto{ max-width:100%; width:100%; padding:0 }
.sobre-texto .h1{ font-size:22px }
.sobre-texto p{ font-size:13px; line-height:1.65; color:var(--ink-strong); text-align:justify; margin-top:12px; width:100% }

/* --- Portfólio grid (HOME) --- */
.grid{ display:grid; gap:10px }
.g3{ grid-template-columns:repeat(3,1fr) }
@media (max-width:820px){ .g3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .g3{ grid-template-columns:1fr } }

/* Card do portfólio com “preenchimento” desfocado:
   - a pseudo-layer preenche o bloco inteiro com um cover desfocado
   - a imagem real fica por cima, em contain (sem cortes) */
.tile{
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  height:220px;                       /* altura consistente do grid */
  display:flex;
  align-items:center;
  justify-content:center;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}

/* camada de fundo (fill) usando a própria imagem */
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background: center/cover no-repeat var(--src); /* usa a var do style inline */
  filter: blur(14px) saturate(1.05) brightness(0.95);
  transform: scale(1.08);              /* evita bordas vazando no blur */
  z-index:0;
}

/* imagem real, sem cortes */
.tile .img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;                   /* mostra 100% da foto */
  object-position:center;
  display:block;
  background: transparent;              /* sem “barras” sólidas */
  padding:0;                            /* sem padding visível */
  transition: transform .35s ease, opacity .25s ease;
}

/* hover suave */
.tile:hover{
  transform:translateY(-2px);
  border-color:#E5D7B5;
  box-shadow:0 4px 16px rgba(212,184,122,.22);
}
.tile:hover .img{ transform:scale(1.01); }

/* Contato */
.contact{ display:grid; grid-template-columns:1fr .8fr; gap:10px }
@media (max-width:820px){ .contact{ grid-template-columns:1fr } }
.card{ border:1px solid var(--line); border-radius:12px; padding:14px; background:var(--card) }
.muted{ color:var(--ink); opacity:.85; font-size:13px }
.btn{ display:inline-block; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:#FFF6E2; color:var(--accent-ink); font-weight:600; font-size:13px }
.btn:hover{ border-color:#E5D7B5; box-shadow:0 3px 12px rgba(212,184,122,.25) }

/* Acessibilidade de movimento */
@media (prefers-reduced-motion: reduce){
  .tile, .img{ transition:none }
}