/* Variables de color y tipografía */
:root {
    --color-principal: #333; /* Gris oscuro para header/footer, texto general, y títulos de tarjetas */
    --color-secundario: #f4f4f4; 
    --color-acento: #007bff; 
    --fuente-base: 'Arial', sans-serif;
    
    /* Colores Navideños ACTUALIZADOS */
    --rojo-intenso: #580204; 
    --rojo-suave: #d1040b; 
    
    /* Color de contraste para títulos/botones (DORADO NAVIDEÑO) */
    --color-dorado: #DAA520; /* Color dorado ajustado */
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-base);
    color: var(--color-principal);
    line-height: 1.6;
    background-color: #fff;
}

/* Estilos de Tipografía */
h1, h2, h3 {
    margin-bottom: 0.5em;
}

/* Contenedor principal para centrar el contenido (ancho limitado) */
.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden;
    padding: 20px 0;
}

/* -------------------------------------- */
/* HEADER Y NAVEGACIÓN                  */
/* -------------------------------------- */
header {
    background: var(--color-principal); /* Gris oscuro */
    color: #fff;
    padding: 0.1rem 0; 
}

header h1 {
    margin: 0; 
    font-size: 1.5rem; 
}


nav ul {
    list-style: none;
    text-align: center;
    padding: 0; 
    margin: 0; 
}

/* Mobile First: Los ítems de navegación están apilados si la pantalla es pequeña (por defecto) */
nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
}

nav ul li a:hover {
    color: var(--color-dorado); /* Dorado al pasar el ratón */
}

/* -------------------------------------- */
/* MAIN (CONTENIDO CENTRAL CON DEGRADADO)*/
/* -------------------------------------- */
main {
    /* APLICAMOS EL DEGRADADO SOLO AL CONTENIDO BAJO EL BANNER */
    background: linear-gradient(to bottom, var(--rojo-intenso), var(--rojo-suave));
    color: #fff;
    padding-bottom: 30px;
}

/* Títulos y textos dentro del main */
main h2, main h3, main p {
    color: #fff; 
}

/* Título de página para que sea dorado y destaque sobre el rojo oscuro (ESTILO ESTANDARIZADO) */
.titulo-pagina {
    color: var(--color-dorado) !important;
    text-align: center;
    padding-top: 10px;
    margin-bottom: 25px !important; 
    font-size: 2rem;
}


/* -------------------------------------- */
/* BANNER (SECTION FUERA DEL MAIN - SIN DEGRADADO)  */
/* -------------------------------------- */
.banner {
    position: relative; 
    padding-bottom: 0;
    background-color: #fff; 
}

/* Gestión de Imágenes de Banner (Mobile First) */
.banner-img {
    width: 100%;
    /* Altura definida por padding-top para mantener el ratio */
    padding-top: 50%; /* AUMENTADO para dar más espacio al texto en móvil */
    height: 0; 
    /* RUTA CORREGIDA: Se usa ../ para subir de la carpeta 'css' */
    background-image: url('../img/banner_small.jpg'); 
    background-size: cover;
    background-position: center;
}

/* -- Posicionamiento del texto sobre el Banner -- */
.banner-texto {
    position: absolute;
    /* AJUSTE CLAVE: Lo bajamos al 40% del contenedor */
    top: 40%; 
    left: 50%;
    /* AJUSTE CLAVE: Trasladamos solo la mitad del ancho, no la altura. Esto lo centra horizontalmente y lo alinea verticalmente al 40% */
    transform: translate(-50%, 0); 
    width: 90%; 
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
    z-index: 10;
}

.banner-texto h2 {
    font-size: 1.4rem; /* REDUCIDO para caber en móvil */
    margin-bottom: 5px; /* Reducido el espacio */
    color: var(--color-dorado); /* Título principal en dorado */
    word-break: break-word; /* Para asegurar el ajuste de texto */
    line-height: 1.1; 
}

.banner-texto p {
    font-size: 0.8rem; /* REDUCIDO para el subtítulo en móvil */
    margin-bottom: 10px; /* Reducido el espacio */
    color: #fff;
}

/* Estilo del Botón (BTN) */
.btn-agenda {
    display: inline-block;
    background-color: var(--color-dorado); /* Fondo Dorado */
    color: var(--color-principal); /* Texto en Gris oscuro */
    padding: 6px 15px; /* REDUCIDO el padding del botón en móvil */
    font-size: 0.8rem; /* REDUCIDA la fuente del botón en móvil */
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s;
    /* Sombra de texto en blanco */
    text-shadow: 1px 1px 1px #fff; 
}

.btn-agenda:hover {
    background-color: #ffe89f;
}

/* -------------------------------------- */
/* CONTENEDOR ESPECÍFICO DE HISTORIA Y CONTACTO */
/* -------------------------------------- */
.contenedor-historia {
    background-color: #fff; /* Fondo Blanco */
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 30px; 
    border-radius: 30px; 
    color: var(--color-principal); 
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 
}

.contenedor-historia h3 {
    color: var(--rojo-intenso); 
    margin-top: 1.5rem;
    font-size: 1.4rem;
}
.contenedor-historia p {
    color: var(--color-principal); 
    margin-bottom: 1.5rem;
}

/* ESTILOS ESPECÍFICOS DE CONTACTO */
.contenedor-contacto {
    /* Asegura que el contenido interno de contacto esté centrado */
    text-align: center;
}

.datos-contacto {
    margin: 30px 0;
}

.contacto-item {
    font-size: 1.2rem;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center; /* Centra el icono y el texto juntos */
}

.contacto-item a {
    color: var(--color-principal); /* Color de texto estándar */
    text-decoration: none;
    transition: color 0.2s;
    font-weight: bold;
}

.contacto-item a:hover {
    color: var(--rojo-suave); /* Resalte al pasar el ratón */
}

.icono-contacto {
    color: var(--color-principal); /* Color Gris Oscuro del footer */
    font-size: 1.5rem;
    margin-right: 15px; /* Espacio entre el icono y el texto */
    width: 30px; /* Asegura que todos los iconos tengan el mismo ancho */
    text-align: center;
}


/* -------------------------------------- */
/* GRILLA DE GALERÍA (MINIATURAS) */
/* -------------------------------------- */
.grilla-galeria {
    display: grid;
    /* 2 columnas en móvil por defecto */
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px;
    margin-top: 30px;
}

.galeria-item {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.galeria-item:hover {
    transform: scale(1.05);
}

.galeria-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsión */
}


/* -------------------------------------- */
/* ESTILOS DEL MODAL (LIGHTBOX) */
/* -------------------------------------- */
.modal-galeria {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9); /* Fondo negro semitransparente */
    opacity: 0; /* Por defecto, invisible */
    pointer-events: none;
    z-index: 1000; /* Asegura que esté por encima de todo */
    transition: opacity 0.3s ease;
}

/* El modal se muestra cuando el ancla (#modal-id) está activo en la URL */
.modal-galeria:target {
    opacity: 1;
    pointer-events: auto;
}

.modal-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    max-width: 90%; /* Limita el ancho de la imagen */
    max-height: 90vh; /* Limita la altura al 90% del viewport height */
    margin: 0;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.5);
}

.modal-cerrar {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-cerrar:hover {
    color: var(--rojo-suave);
}


/* -------------------------------------- */
/* TARJETAS DE DESTACADOS (CARDS)       */
/* -------------------------------------- */
.destacados {
    display: flex; 
    flex-direction: column; 
    gap: 20px;
    margin-top: 30px;
    padding: 0;
}

.card {
    background-color: #fff; 
    color: var(--color-principal); 
    padding: 20px;
    border: 1px solid var(--rojo-suave); 
    border-radius: 15px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card h3 {
    color: var(--color-principal); 
    font-weight: bold;
}

.card p {
    color: var(--color-principal); 
}


/* -------------------------------------- */
/* FOOTER                               */
/* -------------------------------------- */
footer {
    background: var(--color-principal); /* Gris oscuro */
    color: #fff;
    text-align: center;
    /* Reducimos el padding vertical, el contenedor interno lo ajusta */
    padding: 10px 0; 
    font-size: 0.9rem; /* Establece tamaño uniforme para todos los textos */
}

/* Estilos para el nuevo footer con tabla */
footer table {
    /* Aseguramos que la tabla dentro del contenedor ocupe el 100% del ancho limitado */
    max-width: 1200px;
    width: 90%; /* Se alinea con el ancho del .contenedor */
    margin: auto;
    border-collapse: collapse; /* Quitamos bordes si los hubiera */
    text-align: left; /* Alineación por defecto */
}
footer table tr td {
    /* Quitamos cualquier padding extra en celdas y alineamos el contenido */
    padding: 0;
    vertical-align: middle;
}

/* Estilos para el texto de la segunda columna (créditos) */
.footer-creditos {
    text-align: right; /* Alineamos a la derecha */
    color: #fff; 
}

/* REGLA PARA AJUSTAR EL TAMAÑO DE LA IMAGEN DENTRO DEL FOOTER */
.footer-creditos img {
    height: 50px; /* Tamaño fijo para que se ajuste a la línea */
    width: auto; /* Mantiene el ratio de aspecto */
    vertical-align: middle; /* Alinea verticalmente con el texto circundante */
}

.footer-creditos a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.footer-creditos a:hover {
    color: var(--color-dorado);
}



/* ======================================= */
/* ESTILOS DE VISIBILIDAD PARA CHAT N8N (SOBRESCRITURA DE VARIABLES) */
/* ======================================= */

#n8n-chat .chat-messages-list * {
  color: #000080 !important; /* Azul oscuro forzado */
  font-weight: normal !important; /* Letra normal */
}

/* -------------------------------------- */
/* RESPONSIVIDAD / MEDIA QUERIES          */
/* -------------------------------------- */

/* Media Query para Tabletas y PC (Desktop) */
@media (min-width: 768px) {
    
    /* GRILLA DE GALERÍA en PC (4 columnas) */
    .grilla-galeria {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Ajuste de ancho del contenedor de historia para PC */
    .contenedor-historia {
        width: 70%; 
    }

    /* Gestión de Imágenes de Banner para PC */
    .banner-img {
        /* Vuelve al ratio original para PC */
        padding-top: 31.25%; 
        /* RUTA CORREGIDA: Se usa ../ para subir de la carpeta 'css' */
        background-image: url('../img/banner.jpg'); 
    }
    
    /* Ajuste para PC para que el texto también quede más abajo (si es necesario) */
    .banner-texto {
        /* Restablece el centrado horizontal y mantiene el 40% superior */
        top: 40%;
        transform: translate(-50%, 0);
    }


    /* Restaurar el tamaño grande del texto en PC */
    .banner-texto h2 {
        font-size: 2.5rem; /* Vuelve al tamaño de PC */
        margin-bottom: 10px; 
    }
    .banner-texto p {
        font-size: 1.2rem; /* Vuelve al tamaño de PC */
        margin-bottom: 15px;
    }
    .btn-agenda {
        padding: 10px 25px; /* Vuelve al tamaño de PC */
        font-size: 1rem;
    }

    /* Navegación en PC */
    nav ul {
        display: flex;
        justify-content: flex-end;
    }
    
    /* Cards en PC (se muestran en fila) */
    .destacados {
        flex-direction: row;
        justify-content: space-between;
    }

    .card {
        flex: 1;
    }
    
    /* FOOTER en PC: Reajustamos la tabla a los límites del contenedor */
    footer table {
        width: 100%;
    }
    
    /* Footer en PC: Alineamos el texto de copyright a la izquierda */
    footer table tr td:first-child {
        text-align: left;
    }

}