/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&display=swap');

/* Estilos generales */
* {
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
}

html {
scroll-behavior: smooth;
}
/* ***************** */
/* SECCION I N I C I O */
/* ***************** */
#inicio {
  height: auto;
  display: flex;
  flex-direction: column;
}


#inicio header {
width: 100%;
}
#inicio header .contenido-header {
max-width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 15px;
position: relative;
}

#inicio header .contenido-header .logo {
color: #ff8f46;
font-size: 20px;
display: flex;
align-items: center;
}

#inicio header .contenido-header nav {
position: absolute;
right: 0px;
}

#inicio header .contenido-header nav ul {
display: flex;
list-style: none;
}

#inicio header .contenido-header nav ul li {
text-align: center;
}

#inicio header .contenido-header nav ul li i {
display: block;
color: #a8a8a8;
margin-bottom: 3px;
}

#inicio header .contenido-header nav ul li a {
display: block;
text-decoration: none;
color: #a8a8a8;
margin: 0 20px;
}

#inicio header .contenido-header nav ul li:hover i {
color: #ff8f46;
}

#inicio header .contenido-header .social a {
display: inline-block;
background-color: #ff8f46;
text-decoration: none;
color: #fff;
padding: 10px 20px;
border-radius: 30px;
}

#inicio header .contenido-header .social > i {
display: inline-block;
color: #a8a8a8;
margin-left: 10px;
}

/* Estilos generales para el menú de navegación */
#nav {
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}

#nav ul {
display: flex; /* Mantener los elementos en fila para pantallas grandes */
list-style: none;
margin: 0;
padding: 0;
}
#nav.responsive ul {
display: block;
}
/* Estilo para subrayar los elementos del menú */
#nav ul li a {
display: block;
padding: 16px 0; /* Espacio arriba y abajo del texto */
border-bottom: 7px solid #ccc; /* Línea debajo de cada elemento */
text-align: center; /* Alineación centrada para el texto */
}
/* Remover el subrayado en pantallas más grandes si es necesario */
@media (min-width: 768px) {
#nav ul li a {
border-bottom: none; /* Quitar la línea en pantallas grandes */
}
}
/* Añadir efecto de hover para cambiar el color del subrayado */
#nav ul li a:hover {
border-bottom: 2px solid #ff0000; /* Cambia el color al pasar el ratón */
}
#nav li {
margin: 0 1px; /* Separación entre los ítems en pantallas grandes */
}
#nav a {
text-decoration: none;
color: black;
font-size: 18px;
}
.nav-responsive {
display: none; /* Ocultar el botón hamburguesa en pantallas grandes */
}


/* Ocultar el menú de navegación en pantallas pequeñas */
@media screen and (max-width: 768px) {
#nav {
display: none; /* Ocultar el menú en pantallas pequeñas */
flex-direction: column; /* Apilar los elementos verticalmente */
align-items: center; /* Centrar los ítems del menú */
background-color: white;
width: 100%;
position: absolute;
top: 60px;
left: 0;
z-index: 100;
}

#nav.responsive {
display: flex; /* Mostrar el menú cuando se haga clic en el botón hamburguesa */
}    

#nav ul {
flex-direction: column; /* Apilar los elementos verticalmente */
width: 100%;
text-align: center;
padding: 0;
}

#nav li {
margin: 10px 0; /* Agregar un margen vertical entre los ítems de menú */
}

#nav a {
padding: 15px;
display: block; /* Hacer que el enlace ocupe toda la anchura */
width: 100%;
text-align: center; /* Centrar el texto */
}

/* Mostrar el botón hamburguesa */
.nav-responsive {
display: block; /* Mostrar como bloque */
position: absolute; /* Posición absoluta dentro del contenedor del encabezado */
top: 20px; /* Mantener a 20px de la parte superior */
right: 20px; /* A 20px de la derecha */
z-index: 1000; /* Asegurar que esté por delante del contenido */
background-color: #333; /* Fondo oscuro */
color: white; /* Color del ícono */
padding: 10px;
border-radius: 5px;
cursor: pointer; /* Cambiar el cursor al pasar por encima */
}

.nav-responsive i {
font-size: 30px; /* Tamaño del ícono hamburguesa */
}
	
	
}/*<-llave sirve para cerrar todo lo que esta arriba y no afecte abajo*/
/* Carrusel slider automatico parte de arriba*/
#inicio .carrusel {
position: relative;
height: 100%;
}

#inicio .carrusel .info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
text-align: center;
color: #fff;
}

#inicio .carrusel .info h2 {
font-size: 50px;
margin-bottom: 20px;
font-family: 'Dancing Script', cursive;
}

#inicio .carrusel .info button {
display: inline-block;
margin-top: 20px;
font-size: 20px;
border: none;
background-color: #ff8f46;
color: #fff;
padding: 7px 25px;
border-radius: 30px;
cursor: pointer;
}

#inicio .gallery {
width: 100%;
height: 100%;
}

#inicio .gallery-cell {
width: 100%;
margin-right: 10px;
height: 100%;
}

#inicio .gallery-cell img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover;
}

/* Contenedores de imágenes */
#imagenes-iniciales, #imagenes-adicionales-1, #imagenes-adicionales-2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

#imagenes-iniciales .item, #imagenes-adicionales-1 .item, #imagenes-adicionales-2 .item {
    text-align: center;
    width: 100%;
    max-width: 300px;
}

#imagenes-iniciales .icono img, #imagenes-adicionales-1 .icono img, #imagenes-adicionales-2 .icono img {
    width: 100%;
    height: auto;
    max-width: 300px;
}

/* Estilos específicos para pantallas pequeñas */
@media (max-width: 768px) {
    #imagenes-iniciales, #imagenes-adicionales-1, #imagenes-adicionales-2 {
        flex-direction: column;
        align-items: center;
    }

    #imagenes-iniciales .item, #imagenes-adicionales-1 .item, #imagenes-adicionales-2 .item {
        margin-bottom: 20px;
    }
}

/* SECCION Pirotecnia */
#blog {
padding: 30px 0;
text-align: center;
margin-top: 5px;	
}
#blog h2 {
font-family:sans-serif;
display: inline-block;
text-align: center;
padding: 1px;
border-radius: 8px;
border: 2px solid #000080; /* Borde verde alrededor del cuadro */
color: darkred;
box-shadow: 0px 0px 15px 5px rgba(0, 150, 0, 0.7);
font-size: 25px;
margin-bottom: 3px;
}

#blog h3 {
display: inline-block;	
padding: 7px;
border-radius: 8px;
border: 2px solid #000080; /* Borde verde alrededor del cuadro */
color: darkred;
font-size: 15px;	
box-shadow: 0px 0px 15px 5px rgba(0, 150, 0, 0.7);

}
.galeria-blog {
max-width: 800px;
margin: 50px auto;
}
.galeria-blog .gallery-cell .item {
display: flex;
align-items: center;
margin: 0 80px;
}
.galeria-blog .gallery-cell img {
display: block;
width: 100px;
border-radius: 50%;
border: 2px solid #ff8f46;
margin-right: 30px;
}
.galeria-blog .gallery-cell h3 {
margin-bottom: 7px;
}

.galeria-blog .gallery-cell p {
color: #a8a8a8;
font-style: italic;
}
#blog button {
display: block;
width: fit-content;
margin: auto;
margin-top: 20px;
font-size: 20px;
border: none;
background-color: #ff8f46;
color: #fff;
padding: 7px 25px;
border-radius: 30px;
cursor: pointer;
}
/* Estilos para el modal */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 7px solid black;
width: 100%;
max-width: 550px;
position: relative;
text-align: center;
height: 80%;
max-height: calc(85vh - 150px);
overflow: auto;
}
.close {
position: absolute;
right: 18px;
top: 10px;
font-size: 24px;
cursor: pointer;
}
.modal-button {
display: block;
width: fit-content;
margin: auto;
font-size: 20px;
border: none;
background-color: #ff8f46;
color: #fff;
padding: 7px 25px;
border-radius: 30px;
cursor: pointer;
}
.modal-button:hover {
background-color: #e07b39;
}
.modal-button-red {
color: #ff0000;
}

/*** Pie de página ***/
#contacto {
background-color: #ff8f46;
padding: 10px 0;
}

#contacto .fila {
max-width: 1100px;
margin: auto;
display: flex;
justify-content: center; /* Centra las columnas */
color: #fff;
gap: 12px; /* Espacio entre las columnas */
}

.col {
flex: 1; /* Permite que cada columna ocupe el mismo espacio */
max-width: 250px; /* Limita el ancho máximo de cada columna */
text-align: center; /* Centra el contenido en cada columna */
}

.redes-sociales {
display: flex;
flex-direction: column; /* Alinea los elementos en una columna */
align-items: center; /* Centra horizontalmente los elementos */
text-align: center; /* Centra el texto dentro de los enlaces */
}

/* Estilo para subrayar los botones */

#contacto a {
text-decoration:  underline; /* Subrayar los elementos */
color: #fff;
display: block;
margin-bottom: 2px;
}
#contacto a:hover {
color: darkred;
}

#contacto h3 {
color: yellow;
margin-bottom: 3px;
}

#contacto .media {
display: flex;
align-items: center;
}

#contacto .media i {
margin-right: 10px;
}

#contacto button {
background-color: #fff;
color: #ff8f46;
border: 1px solid #ff8f46;
padding: 8px 15px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
border-radius: 12px;
}

#contacto button:hover {
background-color: #ff8f46;
color: #fff;
}
 
/* color en la parte de abajo*/
.texto-empresa {
  font-size: 22px;
  font-weight: bold;
  background: linear-gradient(to right, #ff5fed, #ffc399); /* Degradado rosa a naranja */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin-bottom: 10px;
}

.texto-fuegos {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(to right, #4facfe, #00f2fe); /* Degradado azul claro a celeste */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}




/* Estilos para las imágenes de los métodos de pago */
.metodos-pago {
background-color:chocolate; /* Fondo naranja */
padding: 0px; /* Espaciado interno para que no estén pegadas las imágenes al borde */
text-align: center; /* Alineación centrada de las imágenes */
border-radius: 0px; /* Bordes redondeados opcional */
}

.metodos-pago img {
width: 60px; /* Tamaño pequeño de las imágenes */
margin: 0 10px; /* Espaciado entre las imágenes */
vertical-align: middle; /* Alineación vertical */
transition: width 0.3s ease; /* Transición suave al cambiar el tamaño */
border-radius: 20px;
}

/* Estilos de la barra de copyright */
.barra-copyright {
text-align: center; /* Centra el texto */
padding: 10px 0; /* Espaciado vertical */
background-color: #333; /* Color de fondo */
color: #fff; /* Color de texto */
font-size: 14px;
}

.barra-copyright hr {
border: none;
border-top: 1px solid #555; /* Línea separadora */
margin: 10px 1; /* Espaciado alrededor de la línea */
}

.barra-copyright p {
margin: 0; /* Quita los márgenes del párrafo */
font-family: 'Arial', sans-serif; /* Fuente simple */
}

/* Media Queries para dispositivos pequeños */
@media (max-width: 768px) {
.metodos-pago img {
width: 50px; /* Reduce el tamaño de las imágenes en pantallas medianas */
}

.fila {
gap: 15px; /* Disminuye el espacio entre imágenes en pantallas medianas */
}
}

@media (max-width: 480px) {
.metodos-pago img {
width: 40px; /* Aún más pequeño en pantallas pequeñas */
}

.fila {
gap: 10px; /* Reduce aún más el espacio entre las imágenes */
}
}