/* ==========================
   index.css
========================== */

.about-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url('../images/FOTOABOUT.jpg') no-repeat center 12%;
  background-size: cover;
  z-index: 0;
  padding: 50px 0;
}


.overlay {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}

.about-content-box {
  position: relative;
  z-index: 2;
  background-color: transparent;
  color: white;
  text-align: left;
  padding: 40px;
  max-width: 600px;
  margin-top: -80px;

}
.oblique{
 color: #dbbba6;
 font-family: 'Playfair Display', serif;
 font-style: italic;
 font-size: 40px; 
 
}

 

.toggle-btn {
  margin-top: 1rem;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: none;
  border-radius: var(--border-radius-base);
  cursor: pointer;
  
}
.toggle-btn:hover {
  background-color: #dbbba6;
}
.texto-oculto { 
display: none;
margin-top: 1rem; 

}


@media (max-width: 768px) {
  
  .about-hero {
    background-repeat: no-repeat;
    background-size: contain;
  
   background-color: black;
   height: 100vh;
    background-image: url(/images/FOTOABOUT.jpg);
    

    background-position: center ; 
  }
}
 

@media (max-width: 768px) {
  #cookieModal > div {
    padding: 20px 15px;
    font-size: 0.95rem;
  }
  #cookieModal h2 {
    font-size: 1.3rem;
  }
  #cookieModal p {
    font-size: 0.9rem;
  }
  #acceptAll {
    width: 100%;
    font-size: 1rem;
  }
}