* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}

main {
    max-width: 1200px;
    margin: 0 auto;
}

header, section{
    background: rgb(232, 232, 232);
}

body {
    background-color: black;
}

.carousel-container {
    position: relative;
    margin-top: 30px;
    width: 80%;
    max-width: 600px;
    overflow: hidden;
    margin: 0 auto;
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel img {
    height:auto;
    width:100%;
    display: block;
    object-fit: contain;
}

.button-container {
    margin-top: 20px; /* Espacio entre la galería y el botón */
    display: flex;
    justify-content: center;
    width: 100%;
}

#toggleBtn {
    padding: 10px 20px;
    background-color: darkorange;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
    border-radius: 5px;
}

#toggleBtn:hover {
    background-color: #555;
}

#logo{ 
    display: flex;
    justify-content: center;
}

.parrafada{
    text-align: justify;
    margin: 2%;
    padding: 2%;
}

h1, h2{
    color: darkorange;
    text-align: center;
    font-size: 240%;
}

#firma{
    display: flex;
    justify-content: center;
}

#tocar{
    color: orange;
    text-align: center;
}

.gallery{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

figure{
    margin: 0;
    text-align: center;
}    

.gallery img{
    width: 100%;
    height: auto;
}

figcaption{
    text-align: center;
    color: darkorange;
}

.gallery2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.gallery2 img{
    width: 100%;
    height: auto;
}

footer {
    padding: 12%;
    margin:auto;
    justify-content: center;
    background-color: lightgray;
    text-align: center;
}

#enviarComentario {
    text-decoration: none; /* Elimina el subrayado del enlace */
    background-color: darkorange; /* Color de fondo azul */
    color: white; /* Color del texto */
    padding: 12px 24px; /* Espaciado interno del enlace */
    border-radius: 8px; /* Bordes redondeados */
    font-size: 18px; /* Tamaño de la fuente */
    text-align: center; /* Asegura que el texto esté centrado */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
}

/* Efecto cuando el ratón pasa por encima */
#enviarComentario:hover {
    background-color: #555; /* Cambia el color al pasar el ratón */
    transform: translateY(-3px); /* Eleva el enlace un poco */
}

/* Efecto cuando el enlace es clickeado */
#enviarComentario:active {
    transform: translateY(1px); /* Da un pequeño "empujón" al hacer clic */
}

/* Adaptación para pantallas pequeñas en horizontal */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .gallery img,
  .gallery2 img {
    max-height: 40vh;         /* Limita la altura al 40% del viewport */
    object-fit: contain;      /* Asegura que la imagen se vea completa */
  }
}

/* Extra: Mejora para móviles en vertical */
@media screen and (max-width: 480px) and (orientation: portrait) {
  .gallery img,
  .gallery2 img {
    max-height: 60vh;         /* Un poco más de espacio vertical en vertical */
    object-fit: contain;
  }
}