/* Estilos Generales y Reset Básico */
body {
    font-family: 'Montserrat', sans-serif; /* ¡Aquí aplicamos la tipografía Montserrat! */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #e0dedd; /* Un gris muy claro, casi blanco */
    color: #333333; /* Texto principal en gris oscuro */
    line-height: 1.6;
}

/* Encabezado */
.main-header {
 padding: 20px;
 background-image: url('images/header.png');
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
 color: #8f065b;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 display: flex; /* Enable flexbox for the header */
 flex-direction: column; /* Stack content vertically by default */
 align-items:normal; /* Center items horizontally */
}

.header-content {
 width: 100%;
 display: flex;
 justify-content: space-between; /* Space out logo and text */
 align-items: center; /* Vertically align logo and text */
 padding: 10px 20px; /* Add some padding around the content */
 max-width: 1200px; /* Match the max-width of other content areas if needed */
 box-sizing: border-box;
}

.header-text {
 text-align: right; /* Align text to the right */
}

.logo {
 /* Adjust logo size as needed */
}


.logo img {
 height: 50px; /* Example height, adjust based on your logo */
}

.header-text p {
 font-size: 1.1em;
 color: #8f065b;
 margin-bottom: 0;
}

.main-header h1 {
    margin-bottom: 15px;
    text-align: center;
    font-size: 2.8em; /* Tamaño de fuente ligeramente más grande para el título */
    font-weight: 700;
}

.main-header nav {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    z-index: 2; /* Asegura que la navegación esté por encima del overlay */
}

.main-header nav ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.main-header nav a {
    text-decoration: none;
    color: #8f065b; /* Color inicial del texto del enlace */
    font-weight: 600;
    padding: 8px 15px; /* Más padding para hacer el área de clic más grande */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    position: relative; /* Necesario para la animación de la línea inferior */
    overflow: hidden; /* Oculta partes de la animación que sobresalgan */
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves para todas las propiedades animadas */
}

/* Animación al pasar el ratón */
.main-header nav a:hover {
    color: #FFFFFF; /* Texto blanco puro al pasar el ratón */
    background-color: rgba(143, 6, 91, 1); /* Fondo muy sutil y transparente */
    transform: translateY(-3px); /* Pequeña elevación */
}

/* Animación de línea inferior (opcional, pero le da un toque elegante) */
.main-header nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* Grosor de la línea */
    background-color: #FFFFFF; /* Color de la línea */
    transform: scaleX(0); /* Inicialmente invisible (ancho 0) */
    transform-origin: bottom right; /* La animación comienza desde la derecha */
    transition: transform 0.3s ease-out; /* Animación suave de la línea */
}

.main-header nav a:hover::after {
    transform: scaleX(1); /* La línea se extiende a su ancho completo al pasar el ratón */
    transform-origin: bottom left; /* La animación termina hacia la izquierda */
}

/* Puedes añadir un estilo para la página activa si quieres */
.main-header nav a.active {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.15);
}
.main-header nav a.active::after {
    transform: scaleX(1); /* La línea siempre visible si está activo */
    background-color: #FFFFFF; /* O un color diferente para el activo, como #BBBBBB */
}

/* Media Queries para Responsividad (asegurarse de que el menú se vea bien en móvil) */
@media (max-width: 768px) {
    .main-header nav ul {
        flex-direction: column; /* Apila los elementos en columnas */
        gap: 15px; /* Reduce el espacio entre ellos */
    }

    .main-header nav a {
        padding: 10px; /* Ajusta el padding para móviles */
        width: 100%; /* Haz que los enlaces ocupen todo el ancho disponible */
        box-sizing: border-box; /* Incluye padding en el ancho */
        text-align: center; /* Centra el texto */
    }

    .main-header nav a::after {
        height: 2px; /* Línea más delgada en móviles */
    }
}

/* Media query for smaller screens to stack logo and text */
@media (max-width: 768px) {
 .main-header {
  align-items: stretch; /* Make header take full width */
 }


 .header-content {
  flex-direction: column;
  align-items: center;
  text-align: center;
 }


 .header-text {
  text-align: center;
  margin-top: 10px;
 }


 .main-header nav ul {
  margin-top: 20px;
 }
}

/* Estilo de cada Bloque de Sección */
.section-block {
    padding: 20px 20px;
    margin: 0 auto;
    max-width: 1000px; /* Ancho máximo para el contenido de las secciones */
    background-color: #ededed; /* Fondo blanco para las secciones */
    border-bottom: 1px solid #EAEAEA; /* Línea divisoria sutil */
    text-align: center; /* Centrar contenido por defecto */
}

/* Para alternar colores de fondo si se desea un patrón sutil */
.section-block:nth-child(even) {
    background-color: ededed;
}

.section-block h2 {
    font-size: 2.5em; /* Tamaño de título ligeramente más grande */
    color: #333333;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.section-block h2::after { /* Línea decorativa debajo de los títulos */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px; /* Ancho ligeramente mayor */
    height: 3px;
    background-color: #BBBBBB; /* Un gris medio */
    border-radius: 2px;
}

.section-block p {
    font-size: 1.15em; /* Texto un poco más grande para mejor lectura */
    color: #555555;
    margin-bottom: 25px; /* Más espacio abajo */
    line-height: 1.8;
}

.section-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.section-block#home { /* Apunta específicamente a la sección home si quieres estilos únicos */
    text-align: left; /* Alineamos el texto a la izquierda dentro de esta sección */
    padding: 20px 20px; /* Más padding para la sección home si se ve mejor */
}

.home-content {
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    gap: 40px; /* Espacio entre la imagen y el texto */
    align-items: center; /* Alinea verticalmente la imagen y el texto en el centro */
    max-width: 1000px; /* Asegura que no se estire demasiado en pantallas grandes */
    margin: 0 auto; /* Centra el contenedor home-content */
}

.home-image {
    flex: 1; /* Permite que la imagen ocupe espacio flexible */
    min-width: 300px; /* Ancho mínimo para la imagen antes de envolver */
    text-align: center; /* Centra la imagen si es más pequeña que su contenedor */
}

.home-image img {
    max-width: 100%; /* Asegura que la imagen no desborde su contenedor */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin: 0; /* Quita el margen superior predeterminado de .section-image */
}

.home-text {
    flex: 1.5; /* Permite que el texto ocupe más espacio flexible que la imagen */
    min-width: 5%; /* Ancho mínimo para el texto antes de envolver */
    padding: 0 10px; /* Pequeño padding interno si es necesario */
}

.home-text h2 {
    font-size: 2.2em; /* Ajusta el tamaño del título si lo deseas */
    color: #333333;
    margin-bottom: 15px; /* Espacio debajo de los títulos */
    text-align: left; /* Alinea los títulos a la izquierda */
}

.home-text h2::after { /* Ajusta la línea decorativa para que esté a la izquierda */
    left: 0;
    transform: translateX(0);
    width: 60px; /* Ancho de la línea */
}


}

.home-text p {
    font-size: 1.15em;
    color: #555555;
    margin-bottom: 20px;
    line-height: 1.8;
    text-align: left; /* Alinea los párrafos a la izquierda */
}

/* Media Query para responsividad de la sección HOME */
@media (max-width: 768px) {
    .home-content {
        flex-direction: column; /* Apila la imagen y el texto en pantallas pequeñas */
        gap: 20px; /* Reduce el espacio entre ellos */
    }

    .home-image {
        width: 100%; /* Imagen ocupa todo el ancho */
        max-width: 400px; /* Limita el tamaño de la imagen apilada */
        margin: 0 auto; /* Centra la imagen cuando está apilada */
    }

    .home-text {
        width: 100%; /* Texto ocupa todo el ancho */
        text-align: center; /* Centra el texto en pantallas pequeñas */
    }

    .home-text h2 {
        font-size: 2em;
        text-align: center;
    }

    .home-text h2::after {
        left: 50%; /* Centra la línea de nuevo para pantallas pequeñas */
        transform: translateX(-50%);
    }

    .home-text p {
        font-size: 1.05em;
        text-align: center;
    }
}

/* Estilo de Botones */
.button {
    display: inline-block;
    background-color: #a8015c; /* Gris oscuro para botones */
    color: #FFFFFF;
    padding: 14px 30px; /* Más padding para que sean más grandes */
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em; /* Texto más grande en botones */
    margin-top: 30px; /* Más margen superior */
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: none; /* Asegura que no haya borde por defecto en botones de formulario */
    cursor: pointer; /* Indica que es clickeable */
}

.button:hover {
    background-color: #750040; /* Gris un poco más claro al pasar el mouse */
    transform: translateY(-3px); /* Efecto de elevación más pronunciado */
}

/* Secciones específicas */

/* Servicios */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); /* Columnas responsivas */
    gap: 10px;
    margin-top: 10px;
    text-align: left; /* Alinear texto de servicios a la izquierda */
}

.service-item {
    background-color: #e0dedd;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.service-item h3 {
    color: #333333;
    font-size: 1.5em; /* Título de servicio más grande */
    margin-bottom: 15px;
}

.service-item ul {
    list-style: none; /* Eliminar viñetas por defecto */
    padding: 0;
    margin-top: 15px;
}

.service-item ul li {
    margin-bottom: 8px;
    color: #666666;
    position: relative;
    padding-left: 20px;
    font-size: 1.05em;
}

.service-item ul li::before { /* Icono de check o punto */
    content: '✓';
    color: #888888;
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
}

/* NEW SECTION: Galería y Eventos */
.section-block#galeria-y-eventos {
    text-align: center; /* Center the overall section title and button */
}

/* Flexbox container for the first row */
.galeria-row-1 {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center items if they don't fill the space */
    gap: 25px; /* Space between elements in the row */
    margin-bottom: 40px; /* Space between the two rows */
    max-width: 1000px; /* Constrain width and center */
    margin-left: auto;
    margin-right: auto;
}

/* Flexbox container for the second row */
.galeria-row-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 25px;
    max-width: 1000px; /* Constrain width and center */
    margin-left: auto;
    margin-right: auto;
}

/* Styling for the text containers within the rows */
.galeria-text-1,
.galeria-text-2 {
    flex: 1; /* Allow text to grow and shrink */
    min-width: 250px; /* Minimum width before wrapping */
    text-align: left; /* Align text within its container */
}

/* Specific adjustments for the first text block to be on the left of images */
.galeria-text-1 {
    order: -1; /* Place text first visually, before images */
    /* Adjust flex-basis or width if you want it to take a specific amount of space */
    flex-basis: 300px; /* Example: give it a base width */
}

/* Specific adjustments for the second text block to be on the right of images */
.galeria-text-2 {
    order: 1; /* Place text last visually, after images */
    /* Adjust flex-basis or width if you want it to take a specific amount of space */
    flex-basis: 300px; /* Example: give it a base width */
}


.galeria-text-1 p,
.galeria-text-2 p {
    font-size: 1.1em;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 0; /* Remove default paragraph margin */
}

/* Styling for image containers */
.galeria-image-container {
    flex: 1; /* Allow images to grow and shrink */
    min-width: 250px; /* Minimum width for each image container */
    max-width: 300px; /* Max width to keep them from getting too big */
    box-sizing: border-box; /* Include padding/border in width */
    text-align: center; /* Center image within its container if it's smaller */
}

.galeria-image {
    max-width: 100%; /* Ensure image fits container */
    height: auto;
    display: block; /* Remove extra space below image */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.galeria-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Adjustments for the H2 within this section */
#galeria-y-eventos h2 {
    font-size: 2.5em;
    color: #333333;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

#galeria-y-eventos h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: #BBBBBB;
    border-radius: 2px;
}

/* Media Queries for Responsiveness (adjust how items stack on small screens) */
@media (max-width: 768px) {
    .galeria-row-1,
    .galeria-row-2 {
        flex-direction: column; /* Stack all items vertically */
        gap: 20px; /* Reduce gap */
    }

    .galeria-text-1,
    .galeria-text-2 {
        order: unset; /* Remove order to maintain natural flow when stacked */
        min-width: auto; /* Reset min-width */
        width: 100%; /* Take full width */
        text-align: center; /* Center text when stacked */
    }

    .galeria-image-container {
        min-width: auto; /* Reset min-width */
        width: 100%; /* Take full width */
        max-width: 350px; /* Limit image size when stacked */
        margin: 0 auto; /* Center images when stacked */
    }

    #galeria-y-eventos h2 {
        font-size: 2em; /* Adjust title size for mobile */
    }
}

/* Adjustments for very small screens if needed */
@media (max-width: 480px) {
    .galeria-row-1,
    .galeria-row-2 {
        gap: 15px;
    }

    .galeria-text-1 p,
    .galeria-text-2 p {
        font-size: 1em; /* Smaller font size for paragraphs */
    }
}

/* Quiénes Somos */
.about-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
    margin-top: 40px;
    text-align: left;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-image {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.section-block ul { /* Estilo general para listas no ordenadas en secciones */
    list-style: none;
    padding: 0;
    text-align: left;
    max-width: 600px;
    margin: 20px auto;
}

.section-block ul li {
    margin-bottom: 10px;
    color: #555555;
    font-size: 1.1em;
    position: relative;
    padding-left: 25px;
}

.section-block ul li strong {
    color: #333333;
}

.section-block ul li::before {
    content: '▪'; /* Viñeta cuadrada o un círculo */
    color: #BBBBBB;
    font-size: 1.2em;
    position: absolute;
    left: 0;
    top: 0;
}

/* Contacto */
.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 40px auto 20px auto;
    padding: 30px;
    background-color: #FDFDFD;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    text-align: left;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"], /* Añadido tipo tel */
.form-group textarea {
    width: calc(100% - 22px); /* Ajusta para padding y borde */
    padding: 10px;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    font-size: 1em;
    color: #555555;
    background-color: #FFFFFF;
    transition: border-color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    border-color: #AAAAAA; /* Borde más oscuro al enfocar */
    outline: none; /* Quita el contorno de enfoque predeterminado del navegador */
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form button.button {
    width: 100%;
    padding: 15px;
    font-size: 1.2em;
}

.contact-info {
    margin-top: 30px;
    font-size: 1.1em;
    color: #555555;
}

.contact-info a {
    color: #555555;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
    color: #333333;
}


/* Pie de Página */
.main-footer {
    text-align: center;
    padding: 30px 20px;
    background-color: #e0dedd; /* Negro muy oscuro, igual que el header */
    color: #BBBBBB; /* Gris claro para el texto del footer */
    font-size: 0.9em;
    margin-top: 0;
}


/* Media Queries para Responsividad */
@media (max-width: 768px) {
    .main-header h1 {
        font-size: 2.2em;
    }

    .main-header p {
        font-size: 1em;
    }

    .main-header nav ul {
        flex-direction: column;
        gap: 15px;
    }

    .section-block {
        padding: 20px 15px;
    }

    .section-block h2 {
        font-size: 2em;
    }

    .section-block p {
        font-size: 1.05em;
    }

    .service-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }

    .about-content {
        flex-direction: column; /* Apilar en pantallas pequeñas */
        gap: 20px;
    }

    .button {
        padding: 12px 25px;
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .main-header h1 {
        font-size: 1.8em;
    }

    .section-block h2 {
        font-size: 1.8em;
    }

    .section-block p, .section-block ul li, .contact-info p, .service-item ul li {
        font-size: 0.95em;
    }

    .contact-form {
        padding: 20px;
    }
}