/* Definición de variables de color (opcional, pero útil) */
:root {
    --pink-light: #ff6699;
    --orange-light: #ff9966;
    --blue-light: #6699ff;
    --yellow-light: #fce38a;
    --dark-text: #333;
}

/* -------------------------------------- */
/* Estilos Globales y Títulos */
/* -------------------------------------- */

body {
    font-family: sans-serif; /* Un tipo de letra simple y legible */
    color: var(--dark-text);
}

.gallery-title {
       color: #ce67bb;
    font-family: 'Bevellier';
    font-size: 3rem;
    letter-spacing: 3px;
}
.gallery-title-nuevo {
    color: #fa8a4a;
    font-family: 'Bevellier';
    font-size: 3rem;
    letter-spacing: 3px;
}

@font-face {
  font-family: 'Bevellier';
  src: url('..//fonts/Bevellier/Bevellier-Bold.woff');
  font-weight: bold;
  font-style: bold;
}
@font-face {
  font-family: 'nunito';
  src: url('..//fonts/Nunito/Nunito-VariableFont_wght.ttf');
  font-weight: normal;
  font-style: normal;
}

.text-uppercase {
    text-transform: uppercase !important;
    font-family: 'Bevellier';
    font-size: 1.5rem;
    letter-spacing: 2px;
}
/* -------------------------------------- */
/* Sección de Galería */
/* -------------------------------------- */

.pink-text { color: var(--pink-light); }
.blue-text { color: var(--blue-light); }

.gallery-frame {
    padding: 1rem; /* Espacio entre el marco y la imagen */
    border-radius: 1.5rem; /* Bordes redondeados grandes */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.orange-border { border: 5px solid var(--orange-light); }
.blue-border { border: 5px solid var(--blue-light); }
.pink-border { border: 5px solid var(--pink-light); }

.gallery-frame img {
    /* Asegura que la imagen no sobrepase el tamaño del contenedor */
    display: block; 
}

/* Simulación de flechas de navegación */
.carousel-control-prev-simulated,
.carousel-control-next-simulated {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 50%;
    padding: 0.5rem 0.75rem;
    color: var(--dark-text);
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 10;
}

.carousel-control-prev-simulated { left: 5px; }
.carousel-control-next-simulated { right: 5px; }
.carousel-control-prev-simulated:hover,
.carousel-control-next-simulated:hover { opacity: 1; }


/* -------------------------------------- */
/* Sección de Contacto */
/* -------------------------------------- */

.contact-section {
    background-color: #fff; /* Fondo blanco */
    border: 3px dashed var(--pink-light); /* Borde punteado rosa */
    padding: 3rem !important;
}

.contact-title {
    color: var(--pink-light);
}

.contact-icon {
    color: var(--pink-light);
    font-size: 1.5rem;
}

.contact-link, .contact-link:hover {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
}

/* Ícono de Redes Sociales (Instagram) */
.social-icon {
    color: white;
    background-color: var(--pink-light);
    transition: background-color 0.2s;
}

.social-icon:hover {
    background-color: #d15082; /* Tono más oscuro al pasar el ratón */
}

/* Estilo para el icono de ubicación */
.location-icon {
    color: var(--pink-light);
    font-size: 1.5rem;
}

/* Estilo para el contenedor del mapa */
.map-container {
    height: 450px; /* Altura fija para el mapa simulado */
}


/* ... (Mantén todos los estilos de color y de marcos de la respuesta anterior) ... */

/* Nuevo estilo de texto si no estaba definido */
.orange-text { 
    color: var(--orange-light, #ff9966); /* Usa la variable si existe, sino usa el color */
}

/* -------------------------------------- */
/* Estilos para la Galería (Revisión) */
/* -------------------------------------- */

.gallery-section {
    padding-bottom: 3rem; /* Espacio extra al final de la sección */
    background-image: url(../images/huellas-amarillitas.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
}
.mb-5-galery {
    margin-bottom: 5rem !important;
}

.gallery-frame {
    /* Asegura que todos los contenedores de imagen mantengan el mismo estilo visual */
    padding: 1rem; 
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* El uso de la clase 'row' de Bootstrap (`row justify-content-center g-4`)
   maneja automáticamente el espaciado entre las filas. */
   /* ... (Mantén las definiciones de colores y las clases .pink-text, .blue-text, etc.) ... */

/* -------------------------------------- */
/* Estilos del Frame de Galería */
/* -------------------------------------- */

.gallery-frame {
    /* Mantenemos el marco visual que le da estilo a la galería */
    padding: 0.8rem; /* Un poco menos de padding para que el carrusel se vea mejor */
    border-radius: 1.5rem; 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    /* El borde se aplica en las clases de color */
}

.orange-border { border: 5px solid var(--orange-light); }
.blue-border { border: 5px solid var(--blue-light); }
.pink-border { border: 5px solid var(--pink-light); }


/* -------------------------------------- */
/* Ajustes para el Carrusel de Bootstrap */
/* -------------------------------------- */

/* Asegura que el carrusel herede el borde redondeado dentro del frame */
.carousel-inner {
    border-radius: 1rem; /* Borde redondeado de la imagen */
}

.carru-gale-item img {
    /* Asegura que las imágenes dentro del carrusel llenen su espacio */
    width: 100%;
    height: 350px; /* Alto fijo para uniformidad, ajusta según necesidad */
    object-fit: cover; /* Recorta la imagen para cubrir el alto y ancho */
}

/* Opcional: Estilo de los indicadores del carrusel (los puntos) */
.carousel-indicators button {
    background-color: var(--pink-light, #ff6699); /* Puntos en color rosa */
}

/* Opcional: Estilo de las flechas del carrusel */
.carru-gale-control-prev-icon,
.carru-gale-control-next-icon {
    /* Puedes cambiar el color de los iconos de navegación si lo deseas */
    filter: invert(30%) sepia(90%) saturate(1000%) hue-rotate(330deg) brightness(80%) contrast(100%); /* Simula un color rosa */
}
/* ... (Mantén todas las definiciones de colores y estilos de carrusel anteriores) ... */

/* -------------------------------------- */
/* Estilos para el Zoom/Lightbox */
/* -------------------------------------- */

.gallery-image-clickable {
    cursor: pointer; /* Cambia el cursor para indicar que la imagen es clickeable */
    transition: transform 0.5s ease-in-out; /* Efecto suave al pasar el mouse */
}

.gallery-image-clickable:hover {
    transform: scale(1.02); /* Ligerísimo zoom al pasar el mouse */
}

/* Ajustes para el Modal de Imagen */
#imageModal .modal-content {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente para el contenido del modal */
    box-shadow: none;
}

#imageModal .modal-body {
    padding: 1rem; /* Pequeño padding alrededor de la imagen en el modal */
}

#imageModal .btn-close-white {
    filter: invert(1); /* Hace que el botón de cerrar sea blanco */
    opacity: 0.8;
}

#imageModal .btn-close-white:hover {
    opacity: 1;
}

#imageModal .modal-xl {
    --bs-modal-width: 90%; /* Hace el modal un poco más ancho en pantallas grandes */
}

/* Asegura que la imagen dentro del modal no se desborde */
#modalImage {
    max-width: 100%;
    max-height: 80vh; /* Ocupa hasta el 80% del alto de la ventana visible */
    object-fit: contain; /* Asegura que la imagen completa sea visible */
}

/* -------------------------------------- */
/* Estilos del Frame de Galería (revisión) */
/* -------------------------------------- */

.gallery-frame {
    padding: 0.8rem;
    border-radius: 1.5rem; 
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    /* No es necesario un 'position: relative' explícito aquí si ya lo maneja Bootstrap */
}

/* ... (Resto de tus estilos CSS anteriores) ... */
.lead {
    font-family: nunito;
    font-size: 1.25rem;
    font-weight: 300;
    position: relative;
    top: 2rem;
}
@media (max-width: 567px){
    .gallery-title {
    color: #ce67bb;
    font-family: 'Bevellier';
    font-size: 3rem;
    letter-spacing: 3px;
    text-align: center;
}

.gallery-section {

        background-image: none;
        padding-top: 2rem;
    
}
}