/* Estilos generales */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap");

.gift-table-title {
font-size: 36px;
font-weight: normal;
margin-bottom: 20px;
color: #333; /* Color inicial */
text-align: center; /* Centrado */
animation: colorChange 6s infinite alternate; /* Animación de cambio de color */
}

@keyframes colorChange {
0% {
color: #eeac99;
} /* Rosa suave */
20% {
color: #c6e5d9;
} /* Verde agua */
40% {
color: #f3d8e2;
} /* Rosa viejo */
60% {
color: #bac7e8;
} /* Azul claro */
80% {
color: #f5b0cb;
} /* Rosa claro */
100% {
color: #eeac99;
} /* Rosa suave */
}

.char {
display: inline-block;
font-size: 60px;
animation: colorChange 6s infinite alternate; /* Animación de cambio de color */
}

.char:nth-child(2n) {
animation-delay: 3s; /* Retraso para animar la segunda mitad */
}

.ribbon-slider {
margin-top: 20px;
width: 100%;
overflow: hidden;
position: relative;
background-color: #fff;
display: flex;
justify-content: center;
}

.ribbon-slider-track {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Alinea la imagen y el botón en columna */
}

.ribbon-slide {
flex: 0 0 200px;
height: 80px;
margin: 10px;
background-color: #c6dbe4;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: transform 0.3s ease, filter 0.3s ease;
}

.ribbon-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}

.copy-button {
background-color: #5c8da2;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 30px;
font-family: "Times New Roman", Times, serif;
margin-top: 15px; /* Separación entre la imagen y el botón */
transition: background-color 0.3s ease;
}

.copy-button:hover {
background-color: #3e6575;
}

.ribbon-slide.active {
transform: scale(1.07);
filter: none;
}

.ribbon-slide.inactive {
filter: grayscale(100%);
}

.ribbon-slide:hover {
transform: scale(1.07);
filter: none;
animation-play-state: paused;
}

@media (max-width: 768px) {
.ribbon-slider {
padding: 10px 0;
}

.ribbon-slider-track {
flex-wrap: wrap; /* Permite que los elementos se envuelvan */
justify-content: center;
}

.ribbon-slide {
flex: 0 0 45%; /* Toma aproximadamente el 45% del ancho disponible */
height: 100px;
margin: 0px;
margin-top: -50px;
}

.char {
display: inline-block;
font-size: 45px;
animation: colorChange 6s infinite alternate; /* Animación de cambio de color */
}

.copy-button {
width: 85%;
font-size: 25px; /* Ajusta el tamaño de la fuente */
padding: 8px 10px; /* Reduce el padding */
}
}

@media (max-width: 468px) {
.ribbon-slider {
padding: 10px 0;
}

.ribbon-slider-track {
flex-wrap: wrap; /* Permite que los elementos se envuelvan */
justify-content: center;
}

.ribbon-slide {
flex: 0 0 45%; /* Toma aproximadamente el 45% del ancho disponible */
height: 90px;
margin: 5px;
}

.char {
display: inline-block;
font-size: 40px;
animation: colorChange 6s infinite alternate; /* Animación de cambio de color */
}
}

#sings {
background-image: url("../img/fondo_sobre.png");
background-color: #f9f9f9;
padding: 40px 20px;
text-align: center;
}

.signs {
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
}

.signtext {
font-size: 55px;
margin-top: 0px;
color: #003366;
margin-bottom: 20px;
text-shadow: 0 0 10px #1eb5fa, 0 0 20px #1eb5fa;
font-family: "Dancing Script", serif;
}

#commentsSection {
margin-top: 20px;
max-height: 300px;
overflow-y: auto;
}

.comment {
background-color: #f1f1f1;
border-left: 5px solid #003366;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
}

.comment-text {
font-size: 16px;
color: #333;
}

.comment-author {
display: block;
font-weight: bold;
margin-top: 5px;
color: #555;
}

/* Sección de regalos */
.gift-section {
background-color: #ffffff; /* Fondo blanco puro */
border: 2px solid #000000; /* Borde en verde grisáceo */
border-radius: 15px;
padding: 50px 20px;
text-align: center;
width: 80%;
max-width: 800px; /* Limita el ancho para centrar el contenido */
margin: 50px auto; /* Centrado */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Título principal */
.gift-title {
font-size: 2.8rem;
font-family: "Lora", serif;
color: #2d3036; /* Verde grisáceo oscuro */
font-weight: bold;
}

/* Frase */
.gift-quote {
font-size: 1.6rem;
font-family: "Lora", serif;
color: #2d3036; /* Verde grisáceo medio */
margin: 20px auto;
max-width: 600px;
}

/* Botón principal */
.gift-box {
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 15px;
border-radius: 10px;
font-size: 2rem;
font-family: "Lora", serif;
color: #2d3036;
font-weight: bold;
cursor: pointer;
width: 100%;
max-width: 600px;
margin: 30px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
border: 2px solid #a7a8b4;
transition: all 0.3s ease;
}

.gift-box:hover {
background-color: #e1e7e4; /* Suave gris verdoso */
}

/* Ícono */
.gift-box img {
width: 30px;
height: 30px;
}

/* Contenedor de datos bancarios */
.bank-details {
display: none;
background-color: #ffffff;
padding: 15px;
border-radius: 10px;
font-size: 1.8rem;
font-family: "Times New Roman", Times, serif;
color: #2d3036;
width: 90%;
max-width: 600px;
margin: 0 auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: left;
border: 2px solid #2d3036;
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.4s ease, transform 0.4s ease;
margin-top: -40px;
}

/* Mostrar datos bancarios */
.bank-details.show {
display: block;
opacity: 1;
transform: translateY(10px);
}

/* Responsivo */
@media (max-width: 768px) {
.gift-section {
width: 80%;
padding: 30px;
margin-bottom: -30px;
}

.gift-title {
font-size: 2.2rem;
}

.gift-quote {
font-size: 1.4rem;
}

.gift-box {
width: 90%;
font-size: 1.6rem;
padding: 12px;
}

.gift-box img {
width: 25px;
height: 25px;
}

.bank-details {
width: 88%;
font-size: 1.3rem;
}
}