body { font-family: 'Arial', sans-serif; background: #f9e2e2; margin: 0; padding: 5px; }

header { text-align: center; padding: 10px 0; }

.conteudo-header {
  max-width: 800px;
  margin: 10px auto;
  text-align: center;
}

.busca-container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

input { padding: 12px; width: 100%; max-width: 300px; border: 2px solid #ddd; border-radius: 25px; outline: none; }

button { padding: 12px 25px; background: #ff6b6b; color: white; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; }

.galeria-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 25px; 
    max-width: 1100px; 
    margin: 0 auto; 
}

.card-repositorio { 
    background: white; 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.imagem-prato { width: 100%; height: 180px; object-fit: cover; }

.titulo { padding: 15px 15px 5px; margin: 0; color: #333; font-size: 1.2rem; }

.descricao { padding: 0 15px; color: #777; font-size: 0.9rem; flex-grow: 1; }

.link-repo { display: block; 
    margin: 15px; 
    padding: 10px; 
    text-align: center; 
    background: #ff6b6b; 
    color: white; 
    text-decoration: none; 
    border-radius: 8px; 
}

p{font-family: 'Poppins', sans-serif;
   font-size: 20px;
   font-weight: bold;
   text-align: center;
}

h1{font-family: 'Playfair Display', serif;
   font-weight: bold;
   text-align: center;
}

h2 {font-family: 'Playfair Display', serif;}

.overlay h1 { font-size: 70px; font-weight: 700;}

.overlay h2 { font-size: 50px; font-weight: 600;}

.hero {
  position: relative;
  width: calc(100% - 60px); 
  max-width: 2000px;
  margin: 20px;           
  border-radius: 25px;    
  overflow: hidden;     
  border: 20px solid rgba(255,255,255,0.9); 
  box-sizing: border-box;
  border-width: 10px;
}

/* imagem translúcida */
.hero-img {
  display: block;
  width: 100%;
  margin: 10px auto;
  height: 40vh;
  min-height: 200px;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 50ms;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 10px;
}

.overlay h1,
.overlay h2 {
  margin: 4px 0;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  z-index: 3;
  font-size: clamp(28px, 6vw, 70px);
}

.overlay h2 { font-size: clamp(16px, 4vw, 50px); font-weight: 600; opacity: 0.95;}