:root{
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666;
  --link: #0b57d0;
  --border: #e5e7eb;
  --card: #fafafa;
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{max-width: 920px; margin: 0 auto; padding: 24px}
.header{
  display:flex; gap:20px; align-items:center; padding:20px 0 12px; border-bottom:1px solid var(--border);
}
.header img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: center top; /* mostra mais a parte de cima da foto */
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  transform: scale(0.85);
}
  
}
.brand{flex:1}
.brand h1{font-size:1.8rem; margin:0}
.brand p{margin:4px 0 0; color:var(--muted)}

nav{margin-top:12px;}
nav a{
  margin-right:16px; text-decoration:none; color:var(--link);
  font-weight: 600;
}
nav a[aria-current="page"]{text-decoration:underline}

.main{padding: 24px 0}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.grid{display:grid; gap:16px}
@media (min-width: 860px){
  .grid-2{grid-template-columns: 1.1fr 1fr}
}

h2{margin: 0 0 8px}
h3{margin: 16px 0 8px}

ul{padding-left: 20px; margin-top: 8px}
.footer{
  border-top:1px solid var(--border);
  margin-top: 32px; padding: 16px 0; color: var(--muted); font-size: 0.95rem;
}
.cta {
  color: var(--link);
  text-decoration: none;
  font-weight: 600;
}

.cta:hover {
  text-decoration: underline; /* sublinhado ao passar o mouse */
}
kbd{
  background:#f3f4f6; border:1px solid #e5e7eb; padding:2px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  justify-items: center;
  align-items: start;
  margin-top: 1rem;
}

.gallery figure {
  margin: 0;
  text-align: center;
  overflow: hidden; /* evita que a imagem estoure o container */
}

.gallery img {
  width: 100%;
  height: 300px; /* altura fixa para padronizar */
  object-fit: cover; /* recorta proporcionalmente sem distorcer */
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: block;
}

.gallery figcaption {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.5rem;
}