html, body{
  display: flex;
  flex-direction: column;
  margin: 0;
  scroll-behavior: smooth;
}
.top-menu{
  position: sticky;
  top: 0;
  z-index: 9997;
  background-color: rgb(163, 230, 53);
  display: flex;
  flex-direction: row;
  z-index: 9997;
  flex-direction: row;
 }

.titulo{
  margin-left: 20px;
}
.menu-lateral{
  margin-left: auto;
  align-items: end;
  background-color: rgb(56, 56, 56);
  color: white;
}
.menu-lateral:hover, .theme-toggle:hover { background: #444; 
}
.barra-lateral {
position: fixed; top: 0; right: -260px;
width: 260px; height: 100%; background: #333;
padding-top: 60px; transition: right var(--transition);
z-index: 9999; overflow-y: auto;
transition: right 0.3s ease;
}
.barra-lateral.open { right: 0; }
.barra-lateral .cerrar {
position: absolute; top: 10px; right: 10px;
background: red; color: #fff;
}
.opciones a {
display: block; padding: 15px;
color: #fff; text-decoration: none;
border-bottom: 1px solid #444;
transition: right 0.3s ease;
}
.heroe {
  display: flex;
  justify-content: flex-end;     
  align-items: center;
  gap: 2rem;                     
  padding: 60px 5%;               
  background-color: #383838;     
}
.logos img {
  width: 300px;
  height: auto;
  border-radius: 20px;           
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transform: rotate(-2deg);       
  transition: transform 0.5s ease,
              box-shadow 0.5s ease;
}
.logos img:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
.texto {
  display: flex;
  flex-direction: column;
  color: #fff;
  text-align: left;
}
.texto h2:first-child {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  opacity: 0.8;
  margin: 0;
}
.texto h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 2px;
  margin: 0.5rem 0;
  text-shadow: 0 4px 10px rgba(0,0,0,0.6);
  position: relative;
}
.texto h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #a3e635;      
  border-radius: 2px;
  margin-top: 10px;
}
.texto h2:last-child {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  opacity: 0.9;
  margin: 0.5rem 0 0;
  letter-spacing: 1px;
}
.acerca{
  height: 35dvh;
  display: flex;
}
.adentro,
.acercas {
flex: 1;                   
min-width: 240px;          
background: linear-gradient(135deg, #4fc664 0%, #3cbf58 100%);
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
align-items: center;      
justify-content: center;  
padding: 15px;
margin: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adentro:hover,
.acercas:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}


.adentro h3,
.acercas h3 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}


.adentro p,
.acercas p {
font-size: 1rem;
line-height: 1.6;
color: #f5f5f5;
text-align: center;
max-width: 320px;
}
.servicios{
  height: auto;
  width: 100%;
  background-color: rgb(56, 56, 56);
  justify-items: center;
}
.services-grid{
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.titulos{
  text-align: center;
  color: white;
}
.icono{
  background-color: #3cbf58;
  border-radius: 20px;
  width: 10dvh;
  height: 11dvh;
  text-align: center;
}
.servs p {
  max-width: 5px;
  text-align: center;
}
.icono img{
  padding-top: 5px;
}
.servs:hover {
  transform: scale(1.05);
  color: white;
}
.contacto {
  background-color: #3cbf58;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.contacto-container h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.contacto-container ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.contacto-container li {
  margin: 10px 0;
  font-size: 1rem;
}

.contacto-container a {
  color: #ffffff;
  text-decoration: underline;
}
.booking-button {
  background-color: #a3e635;
  color: #383838;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
footer {
  background-color: #2d2d2d;
  color: #f5f5f5;
  text-align: center;
  padding: 20px 10px;
  font-size: 0.9rem;
}

footer a {
  color: #a3e635;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .heroe {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .acerca {
      display: flex;            
      flex-direction: column;   
      align-items: center;      
      gap: 20px;                
      height: auto;             
      padding-top: 20px;
    }
  
    .adentro,
    .acercas {
      width: 70%;               
      max-width: 400px;
      margin-top: 1px;
      margin-bottom: 20px;           
    }
}