/*Estilos de template*/
body {font-family: helvetica, sans-serif;
font-size: 1em;
background-color: black;
text-align: justify;}

#menu {width: 100%;
height: 50px;
;}

#menu ul li { display: inline-block;
list-style: none; }

#menu ul li a {text-decoration: none;
color: white;
padding-top: 15px;
font-weight: bold;
width: 100px; height: 35px;
display: block;
text-align: center;}

#menu ul li a:hover {background-color: darkred;
transition: ease-in-out 500ms;
height: 40px;
border-radius: 30px;
}
#contenidos {background-color: darkred;}

#contenidos h1, #contenidos h2, #contenidos h3 {
    background-image: url("../image/ojo.png");
    background-repeat: no-repeat;
    background-position: left center; /* Centra el ojo verticalmente a la izquierda */
    background-size: 35px 35px;       /* Redimensiona el ojo para que se adapte perfecto al texto */
    padding-top: 10px;                /* Da espacio arriba para que no se corte */
    padding-bottom: 10px;             /* Da espacio abajo */
    margin: 10px 0;
    text-indent: 50px;                /* Mueve el texto a la derecha para no tapar el ojo */
    display: flex;                    /* Alineación moderna */
    align-items: center;              /* Centra perfectamente el ojo con las letras */
    min-height: 35px;                 /* Asegura que el título mida mínimo lo mismo que el ojo */
}

#contenidos p {margin: 10px 0}

@media all and (max-width: 800px)
body { font-size: 2em}


/*Galley Grid*/
.gallery{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	padding: 20px;
}

/*Images*/
.gallery img{
	width: 100%;
	border-radius: 10px;
	transition: 0.3s;
}

/*Hover Effect*/
.gallery img:hover{
	transform: scale(1.05);
}

/* Esto controla el contenedor de las fotos para que se alineen bien */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espacio de separación entre las fotos */
    justify-content: center; /* Centra las imágenes en la pantalla */
}

/* Esto obliga a todas las miniaturas a tener exactamente el mismo tamaño */
.gallery a img {
    width: 250px;       /* Elige el ancho que prefieras (puedes usar px o %) */
    height: 250px;      /* Elige el alto que prefieras, igual al ancho para que sean cuadradas */
    object-fit: cover;  /* ¡Esta es la clave! Corta la imagen para que llene el espacio sin deformarse */
    border-radius: 5px; /* Opcional: un toque de bordes redondeados */
    transition: transform 0.3s ease; /* Opcional: un efecto suave al pasar el mouse */
}

/* Opcional: un pequeño efecto visual cuando pasas el cursor */
.gallery a img:hover {
    transform: scale(1.05);
}

.bloque-categoria {
    margin-bottom: 50px; /* Separa una categoría de la siguiente */
    width: 100%;
}

/* Estilo para los títulos de las fotos */
.bloque-categoria h1 {
    font-size: 2rem;
    color: #black;         /* Cambia el color a tu gusto */
    margin-bottom: 20px; /* Separa el título de sus fotos */
    border-bottom: 2px solid #darkred; /* Opcional: una línea sutil decorativa debajo del título */
    padding-bottom: 5px;
}
/* fin de imagenes */

/* Inicio de pie de pagina*/
#pie {
    clear: both; /* ¡Esta es la clave! Rompe cualquier flotado anterior y obliga al pie a ir abajo */
    display: block;
    width: 100%;
    margin-top: 50px; /* Opcional: le da un espacio de separación con las últimas fotos */
}

/* Por si la imagen dentro del pie se deforma o desborda */
#pie img {
    width: 100%;
    height: auto;
    display: block;
}

/* 1. El truco definitivo para que el contenedor principal recupere su altura */
/* Usamos este método para que el efecto de zoom (:hover) de tus fotos no se corte */
#contenidos::after {
    content: "";
    display: table;
    clear: both;
}

/* 2. Forzar al pie de página a posicionarse estrictamente abajo de todo */
#pie {
    clear: both;      /* Rompe cualquier flotación anterior */
    display: block;
    width: 100%;
    margin-top: 60px; /* Le da un espacio de separación elegante con la última foto */
}

/* 3. Asegurar que la imagen del pie se adapte correctamente al ancho */
#pie img {
    width: 100%;
    height: auto;
    display: block;
}

/*Fin pie de pagina*/



/* Quita el diseño de enlace común a los títulos de la galería */
#contenidos h1 a {
    text-decoration: none; /* Quita el subrayado */
    color: inherit;        /* Hace que herede el color original del h1 (negro/gris) */
    cursor: pointer;       /* Muestra la manita del cursor para saber que es cliqueable */
}

/* Opcional: Un pequeño efecto visual cuando pases el mouse sobre el título para avisar que se puede hacer clic */
#contenidos h1 a:hover {
    color: #cc0000;       /* Cambia al color que te guste (ej. el rojo de tu fondo) */
    transition: color 0.2s ease;
}



/* Volver horizontal el menú de categorías */
#menu-categorias ul {
    list-style: none;     /* Quita los puntitos de la lista */
    padding: 0;
    margin: 0;
    display: flex;        /* ¡La magia! Pone los elementos en fila horizontal */
    gap: 20px;            /* Espacio de separación entre cada opción */
    padding-top: 10px;    /* Espacio arriba para que no se pegue al menú principal */
    padding-bottom: 10px; /* Espacio abajo antes de la imagen grande */
}

/* Darle estilo a los enlaces del segundo menú (Igual al primero) */
#menu-categorias ul li a {
    color: white;         /* Letras blancas */
    text-decoration: none;/* Quita la línea azul de abajo */
    font-weight: bold;    /* Letra gruesa/negrita */
    font-family: sans-serif; /* Tipo de letra limpia */
    font-size: 16px;
    transition: color 0.2s ease;
}

/* Efecto opcional: cambia de color gris claro al pasar el mouse */
#menu-categorias ul li a:hover {
background-color: darkred;
transition: ease-in-out 500ms;
height: 80px;
border-radius: 90px;

}

/* Tamaño y estilo para los videos de YouTube en la galería */
.gallery .video-galeria {
    width: 350px;       /* Ancho rectangular */
    height: 200px;      /* Alto igual al de tus fotos */
    border-radius: 5px; /* Bordes redondeados sutiles */
    border: none;       /* Quita el borde gris por defecto */
}


/* ==========================================================================
   ESTILOS PARA EL FORMULARIO DE CONTACTO
   ========================================================================== */

.formulario-contacto {
    max-width: 600px;
    margin: 30px auto;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro semitransparente que resalta sobre el fondo rojo */
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.formulario-instrucciones {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.campo-form {
    margin-bottom: 20px;
}

.campo-form label {
    display: block;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 14px;
}

.campo-form input[type="text"],
.campo-form input[type="email"],
.campo-form textarea {
    width: 100%;
    padding: 12px;
    background-color: #ffffff;
    border: 2px solid transparent;
    border-radius: 4px;
    color: #333333;
    font-size: 15px;
    box-sizing: border-box; /* Evita que el padding deforme el ancho */
    transition: all 0.3s ease;
}

/* Efecto cuando el usuario hace clic para escribir */
.campo-form input:focus,
.campo-form textarea:focus {
    outline: none;
    border-color: #000000; /* Borde negro al seleccionar */
    background-color: #f9f9f9;
}

/* Estilos para el botón de enviar */
.boton-enviar {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: #000000; /* Botón negro para hacer contraste */
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Efecto cuando pasas el ratón sobre el botón */
.boton-enviar:hover {
    background-color: #222222;
}



/* Contenedor de la galería */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

/* Hace que los videos se adapten perfectamente a las pantallas */
.video-item {
    flex: 1 1 350px; /* Tamaño mínimo de 350px por video */
    max-width: 560px;
}

.video-item iframe {
    width: 100%;
    height: 250px; /* Altura controlada para que se vea estético */
    border-radius: 8px;
    border: none;
}


/* ==========================================
   ESTILOS PARA MENÚ HAMBURGUESA EN MÓVILES (CORREGIDO)
   ========================================== */
@media screen and (max-width: 768px) {
    
    /* Quitamos el alto fijo de 50px para que el menú pueda crecer hacia abajo */
    #menu {
        position: relative;
        height: auto !important; 
        padding: 10px !important;
        background-color: #111 !important; 
    }

    /* Mostramos el botón de hamburguesa */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 10px auto; /* Lo centra horizontalmente */
        z-index: 10;
    }

    /* Estilo de las 3 líneas blancas */
    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #ffffff !important; 
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Lista desplegable (oculta por defecto) */
    #menu ul {
        display: none !important; 
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #111; 
        padding: 0;
        margin: 0;
        list-style: none;
        z-index: 9;
    }

    /* CORRECCIÓN PRINCIPAL: Forzamos a los elementos de la lista a ocupar todo el ancho */
    #menu ul li {
        display: block !important;
        width: 100%;
        text-align: center;
    }

    #menu ul li a {
        display: block;
        width: 100% !important;
        height: auto !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #222;
        color: #fff !important;
    }

    /* Cuando el menú tenga la clase .active (al hacer click), se muestra en Flex */
    #menu.active ul {
        display: flex !important;
    }

    /* Animación para que las líneas formen la "X" al abrir */
    #menu.active .menu-toggle .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    #menu.active .menu-toggle .bar:nth-child(2) {
        opacity: 0;
    }
    #menu.active .menu-toggle .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* Hacer que todas las imágenes del sitio se adapten al tamaño de su contenedor */
img {
    max-width: 100%;
    height: auto;
    display: block;
}