/* Estilos generales para todas las tablas */
.contenedor-centrado-tabla {
  max-width: 50%;
  margin: 0 auto;
}

.enlace-imagenes-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px; 
}

.enlace-imagen-celda {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); 
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.enlace-imagen-celda:hover {
  transform: translateY(-3px);
}

.enlace-imagen-celda a {
  text-decoration: none;
  color: #333;
}

.enlace-imagen-celda img {
  width: 100%;
  height: auto;
  display: block;
}

.enlace-imagen-celda h4 {
  text-align: center;
  margin: 10px 0;
  font-size: 1em;
}

/* Estilos específicos para la tabla pequeña (2x2) */
.tabla-pequena .enlace-imagen-celda {
  width: calc(50% - 7.5px);
}

/* Estilos para la tabla grande (3x2) */
.elementor-widget-container .tabla-grande {
  max-width: 75%;
  margin: 0 auto;
}

.tabla-grande .enlace-imagen-celda {
  width: calc(33.333% - 10px);
  box-shadow: none;
  border-radius: 0;
  overflow: visible; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabla-grande .enlace-imagen-celda a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabla-grande .enlace-imagen-celda h4 {
  text-align: center;
  margin: 10px 0;
  font-size: 1em;
}

.tabla-grande .imagen-circular-contenedor {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.tabla-grande .imagen-circular-contenedor img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Estilos para la tabla de una fila con 4 columnas */
/* Estilos generales para todas las tablas */
.contenedor-centrado-tabla {
  max-width: 50%;
  margin: 0 auto;
}

.enlace-imagenes-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
}

.enlace-imagen-celda {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); 
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.enlace-imagen-celda:hover {
  transform: translateY(-3px);
}

.enlace-imagen-celda a {
  text-decoration: none;
  color: #333;
}

.enlace-imagen-celda img {
  width: 100%;
  height: auto;
  display: block;
}

.enlace-imagen-celda h4 {
  text-align: center;
  margin: 10px 0;
  font-size: 1em;
}

/* Estilos específicos para la tabla pequeña (2x2) */
.tabla-pequena .enlace-imagen-celda {
  width: calc(50% - 7.5px);
}


/* Media Query para pantallas de 2 columnas */
@media (max-width: 768px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
}
/* Media Query para móviles muy pequeños: 1 columna */
@media (max-width: 480px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 90%;
    }
}
/* Estilos para las celdas circulares e invisibles (aplicables a ambas tablas) */
.tabla-grande .enlace-imagen-celda,
.tabla-una-fila .enlace-imagen-celda {
    /* Propiedades de diseño compartido */
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tabla-grande .enlace-imagen-celda:hover,
.tabla-una-fila .enlace-imagen-celda:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el cursor */
}

/* Estilos de las imágenes circulares */
.tabla-grande .enlace-imagen-celda a img,
.tabla-una-fila .enlace-imagen-celda a img {
    border-radius: 50%; /* Hace las imágenes circulares */
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Mantiene una relación de aspecto cuadrada */
    margin-bottom: 15px; /* Espacio entre imagen y texto */
}

/* Estilos de los títulos */
.tabla-grande .enlace-imagen-celda a h4,
.tabla-una-fila .enlace-imagen-celda a h4 {
    font-size: 1em;
    color: #333;
    margin: 0;
    text-align: center;
}

---
## Estilos de contenedor para cada tabla

/* --- CAMBIO CRÍTICO AQUÍ --- */
.site-content .tabla-grande {
    max-width: 90% !important; /* Aumenta el ancho de la tabla grande para dar más espacio a las imágenes */
    margin: 0 auto;
}

.tabla-grande .enlace-imagenes-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.tabla-grande .enlace-imagen-celda {
    flex: 0 0 calc(33.333% - 15px); /* 3 columnas */
}

/* Estilos para la tabla de una fila con 5 elementos */
.tabla-una-fila .enlace-imagenes-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.tabla-una-fila .enlace-imagen-celda {
    flex: 0 0 calc(20% - 16px); /* 5 columnas */
}

---
## Responsive Styles

@media (max-width: 992px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(33.333% - 15px);
    }
}
@media (max-width: 768px) {
    .tabla-grande .enlace-imagen-celda,
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
}
@media (max-width: 480px) {
    .tabla-grande .enlace-imagen-celda,
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 90%;
    }
}

/* Estilos para la tabla grande (2x3) */
.tabla-grande {
    max-width: 90%; /* Ajusta el ancho de la tabla para que las imágenes sean más grandes */
    margin: 0 auto;
}

.tabla-grande .enlace-imagenes-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Estilos de las celdas circulares e invisibles */
.tabla-grande .enlace-imagen-celda {
    flex: 0 0 calc(33.333% - 15px); /* Clave para el diseño 2x3 */
    max-width: 250px;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tabla-grande .enlace-imagen-celda:hover {
    transform: translateY(-5px);
}

.tabla-grande .enlace-imagen-celda a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos de las imágenes circulares */
.tabla-grande .enlace-imagen-celda img {
    border-radius: 50%; /* Esto hace que la imagen sea circular */
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1; /* Mantiene la proporción 1:1 para evitar deformaciones */
    margin-bottom: 15px;
}

.tabla-grande .enlace-imagen-celda h4 {
    font-size: 1em;
    color: #333;
    margin: 0;
    text-align: center;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px); /* 2 columnas en tablets */
    }
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(33.333% - 15px); /* 3 columnas en tablets */
    }
}
@media (max-width: 768px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px); /* 2 columnas en móviles */
    }
}
@media (max-width: 480px) {
    .tabla-grande .enlace-imagen-celda,
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 90%; /* 1 columna en móviles pequeños */
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px); /* 2 columnas en tablets */
    }
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(33.333% - 15px); /* 3 columnas en tablets */
    }
}
@media (max-width: 768px) {
    .tabla-grande .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px); /* 2 columnas en móviles */
    }
}
@media (max-width: 480px) {
    .tabla-grande .enlace-imagen-celda,
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 90%; /* 1 columna en móviles pequeños */
    }
}

/* Tablet: 3 columns */
@media (max-width: 992px) {
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(33.333% - 15px);
    }
}
/* Mobile: 2 columns */
@media (max-width: 768px) {
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
}
/* Small Mobile: 1 column */
@media (max-width: 480px) {
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 90%;
    }
}

/* Media Query para pantallas más pequeñas: 3 columnas */
@media (max-width: 992px) {
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(33.333% - 15px);
    }
}
/* Media Query para móviles: 2 columnas */
@media (max-width: 768px) {
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 calc(50% - 15px);
    }
}
/* Media Query para móviles muy pequeños: 1 columna */
@media (max-width: 480px) {
    .tabla-una-fila .enlace-imagen-celda {
        flex: 0 0 90%;
    }
}

/* Media Queries para dispositivos más pequeños (móviles) */
@media (max-width: 480px) {
  .enlace-imagen-celda {
    width: 100%;
  }
}

.site-content h1.titulo-con-fondo {
  background-color: #0073e6; /* Change this color code to your preference */
  color: #ffffff; /* Font color */
  padding: 5px; /* Internal spacing around the text */
  text-align: center; /* Center the text */
  margin-left: calc(-50vw + 50%); /* Push the element to the left */
  margin-right: calc(-50vw + 50%); /* Push the element to the right */
}

.search-container {
    /* ----- CAMBIOS AQUÍ ----- */
    background-image: url('http://candyeventos.es/wp-content/uploads/2025/08/fondo-regalos-scaled.jpeg'); /* ¡IMPORTANTE! Cambia esta URL por la de tu imagen */
    background-size: cover; /* Ajusta la imagen para cubrir todo el contenedor */
    background-position: center center; /* Centra la imagen en el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    /* background-attachment: fixed; */ /* Opcional: Descomenta si quieres que la imagen de fondo sea fija al hacer scroll */
    /* ----- FIN CAMBIOS ----- */

    padding: 40px 20px;
    text-align: center;
    border-radius: 8px; /* Puedes quitar esto si quieres esquinas rectas de lado a lado */
    
    width: 100vw; 
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* Añade un color de fondo de reserva si la imagen no carga */
    background-color: #f2f2f2; 
}

.search-title {
    color: #ffffff; /* Cambiado a blanco para mejor contraste con imágenes oscuras */
    font-size: 2.5em;
    margin-bottom: 20px;
    /* Opcional: Añade una sombra de texto para mejorar la legibilidad */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.search-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.dropdown-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.dropdown-wrapper select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    /* Opcional: Fondo semitransparente para los desplegables para que la imagen se vea detrás */
    background-color: rgba(255, 255, 255, 0.8); 
}

.search-button {
    background-color: #0073e6;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #005bb5;
}

@media (max-width: 600px) {
    .dropdown-wrapper {
        flex-direction: column;
    }
}

.precio-container {
    background-color: #f9f9f9; /* Color de fondo */
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    margin: 30px auto;
}

.precio-titulo {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
}

.precio-subtitulo {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 20px;
}

.botones-precio-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los botones se envuelvan en la siguiente línea en pantallas pequeñas */
    gap: 15px;
}

.boton-precio {
    display: block; /* Para que el enlace ocupe todo el espacio del botón */
    padding: 12px 25px;
    background-color: #0073e6;
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none; /* Elimina el subrayado del enlace */
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.2s;
    flex-grow: 1; /* Permite que los botones se expandan para llenar el espacio, si es necesario */
    max-width: 250px; /* Limita el tamaño de los botones en pantallas grandes */
}

.boton-precio:hover {
    background-color: #005bb5;
    transform: translateY(-2px);
}

.beneficios-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 40px 20px;
    background-color: #ffffff; /* Color de fondo, cámbialo si quieres */
    text-align: center;
}

.beneficio-item {
    flex: 1 1 30%; /* Permite que cada columna ocupe aproximadamente el 30% del ancho */
    max-width: 300px;
    padding: 10px;
}

.beneficio-item img {
    width: 80px; /* Tamaño de la imagen, ajústalo si es necesario */
    height: auto;
    margin-bottom: 15px;
}

.beneficio-item h3 {
    font-size: 1.2em;
    color: #333;
}

/* Para pantallas más pequeñas, los ítems se apilarán */
@media (max-width: 768px) {
    .beneficios-contenedor {
        flex-direction: column;
        align-items: center;
    }
}

.carrusel-resenas-contenedor {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 50px;
    background-color: #f0f0f0;
}

.resena-carrusel-item {
    flex: 1 1 30%;
    max-width: 350px;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.resena-carrusel-item p {
    font-size: 1.1em;
    color: #555;
    font-style: italic;
    margin-bottom: 20px;
}

.resena-autor {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.resena-autor img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.resena-autor h4 {
    font-size: 1em;
    font-weight: bold;
    color: #333;
}

@media (max-width: 768px) {
    .carrusel-resenas-contenedor {
        flex-direction: column;
        align-items: center;
    }
}
.custom-product-grid-fix {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-gap: 20px !important;
}

/* Estilos para la nueva tabla de 1x4 */
.tabla-cuatro-columnas .contenedor-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.tabla-cuatro-columnas .celda-rectangular {
  flex: 0 0 calc(25% - 12px); /* Clave para el diseño de 4 columnas */
  max-width: 400px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.tabla-cuatro-columnas .celda-rectangular:hover {
  transform: translateY(-3px);
}

.tabla-cuatro-columnas .celda-rectangular a {
  text-decoration: none;
  color: #333;
}

.tabla-cuatro-columnas .celda-rectangular img {
  width: 100%;
  height: auto;
  display: block;
}

.tabla-cuatro-columnas .celda-rectangular h3 {
  text-align: center;
  margin: 10px 0;
  font-size: 1em;
}

/* Estilos responsive para pantallas más pequeñas */
@media (max-width: 768px) {
  .tabla-cuatro-columnas .celda-rectangular {
    flex: 0 0 calc(50% - 10px); /* 2 columnas en tablets */
  }
}

@media (max-width: 480px) {
  .tabla-cuatro-columnas .celda-rectangular {
    flex: 0 0 calc(100% - 10px); /* 1 columna en móviles */
  }
}

/* Estilos responsive para pantallas más pequeñas */
@media (max-width: 768px) {
  .tabla-cuatro-columnas .celda-rectangular {
    flex: 0 0 calc(50% - 10px); /* 2 columnas en tablets */
  }
}

@media (max-width: 480px) {
  .tabla-cuatro-columnas .celda-rectangular {
    flex: 0 0 calc(100% - 10px); /* 1 columna en móviles */
  }
}

/* Estilos responsive para pantallas más pequeñas */
@media (max-width: 768px) {
  .tabla-cuatro-columnas .celda-rectangular {
    flex: 0 0 calc(50% - 10px); /* 2 columnas en tablets */
  }
}

@media (max-width: 480px) {
  .tabla-cuatro-columnas .celda-rectangular {
    flex: 0 0 calc(100% - 10px); /* 1 columna en móviles */
  }
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  .tabla-pequena .enlace-imagen-celda {
    flex: 0 0 calc(50% - 10px); /* 2 columns on tablets */
  }
}

@media (max-width: 480px) {
  .tabla-pequena .enlace-imagen-celda {
    flex: 0 0 calc(100% - 10px); /* 1 column on mobile */
  }
	/* Estilo definitivo para el menú desplegable en Astra */
.main-header-menu .sub-menu {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #e0e0e0 !important;
}

.main-header-menu .sub-menu a {
    color: #000000 !important;
}

.main-header-menu .sub-menu a:hover {
    background-color: #f5f5f5 !important;
}
	
/* --- ESTILOS GENERALES DEL CONTENEDOR FAQ (SIN CAMBIOS) --- */
.faq-container {
    max-width: 800px; 
    margin: 40px auto;
    padding: 0 20px;
}

/* --- ESTILOS PARA CADA DESPLEGABLE (EL RECUADRO) --- */
.faq-item {
    /* Aquí definimos el recuadro que engloba todo */
    border: 2px solid #007bff; /* Borde más visible, puedes cambiar el color (e.g., a tu color de marca) */
    border-radius: 8px; 
    margin-bottom: 20px; /* Aumentamos el espacio para separarlos */
    overflow: hidden; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para darle profundidad */
}

}