/* style.css */

/* --- Reseteo Básico y Fuentes --- */
body, h1, p, img, div, header, main, footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #f9f9f9;
}
/* --- Contenedor Principal de la Página --- */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border: 1px solid #ddd;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
    background-color: white;
}
/* --- Estilos del Encabezado (Header) --- */
.page-header {
    padding: 30px 20px;
}
.header-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.logo-container {
    margin-right: 30px;
    flex-shrink: 0;
}
.anpicems-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;
}
.titles-and-nit-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el bloque de títulos y el NIT horizontalmente */
    flex-grow: 1;
    text-align: center; /* Centra el texto dentro de este grupo */
}
/* Contenedor de los párrafos del título */
.header-titles {
    font-family: 'Dancing Script', cursive; /* APLICACIÓN DE LA FUENTE SCRIPT */
    font-style: normal; /* Dancing Script ya es cursiva */
    color: #006400;
    line-height: 1.2; /* Espacio entre líneas del título */
    margin-bottom: 5px; /* Espacio entre los títulos y el NIT */
    max-width: 100%;
}
/* Estilo para TODAS las líneas del título: mismo tamaño y negrita */
.header-titles p { /* APPLICA A TODOS LOS PÁRRAFOS DENTRO DE .header-titles */
    font-size: 1.8em; /* TAMAÑO UNIFORME para todas las líneas (ajústalo si lo quieres más grande o pequeño) */
    font-weight: 700; /* NEGRITA para todas las líneas (700 es el peso bold en Dancing Script) */
    line-height: 1.1; /* Ajusta el espacio entre líneas para un aspecto más compacto */
    margin: 0; /* Asegura que no haya márgenes predeterminados entre los párrafos */
    padding: 0; /* Asegura que no haya padding predeterminado entre los párrafos */
}
/* Estilos para el número NIT */
.nit {
    font-size: 1em;
    color: #555;
    text-align: center;
    margin-top: 10px;
}
/* --- Estilos para el Menú de Navegación Principal --- */
.main-menu {
    background-color: #006400; /* Fondo verde oscuro para el menú */
    padding: 10px 0;
    margin-top: 20px; /* Espacio entre el encabezado y el menú */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra suave */
}
.main-menu ul {
    list-style: none; /* Elimina las viñetas */
    margin: 0;
    padding: 0;
    display: flex; /* Hace que los elementos de la lista se muestren en una fila */
    justify-content: center; /* Centra los elementos del menú */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.main-menu li {
    margin: 0 15px; /* Espacio entre los elementos del menú */
}

.main-menu a {
    display: block;
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: #ffffff; /* Color de texto blanco */
    font-weight: 700; /* Texto en negrita */
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.main-menu a:hover {
    background-color: #004d00; /* Un verde más oscuro al pasar el ratón */
    color: #f0f0f0; /* Color de texto ligeramente más claro al pasar el ratón */
}

/* --- Estilos del Contenido Principal (Main) --- */
.page-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.construction-content {
    max-width: 800px; /* Limita el ancho máximo del contenido de texto para que las líneas no sean demasiado largas. Puedes ajustar 800px si quieres que sea más estrecho o ancho. */
    width: 100%;     /* Asegura que ocupe el 100% del ancho disponible de su padre (hasta el max-width) */
    margin: 0 auto;  /* **Esto centra el div horizontalmente en la página.** */
    padding: 20px;   /* Añade un espacio interno alrededor del texto para que no toque los bordes */
    box-sizing: border-box; /* Asegura que el padding se incluya en el width y max-width */
    line-height: 1.6; /* Mejora la separación entre líneas de texto para mayor legibilidad */
    text-align: justify; /* Justifica todo el texto dentro del div para una apariencia más uniforme */
    background-color: #ffffff; /* Opcional: un fondo blanco para el contenido si lo deseas */
    border-radius: 8px; /* Opcional: bordes redondeados */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Opcional: una sombra suave */
}

/* Estilos para los títulos dentro de construction-content */
.construction-content h2,
.construction-content h3 {
    text-align: center; /* Centra los títulos */
    margin-bottom: 20px; /* Espacio debajo de los títulos */
    color: #0056b3; /* Color azul para los títulos, puedes cambiarlo */
}

/* Estilos para los párrafos dentro de construction-content */
.construction-content p {
    margin-bottom: 10px; /* Espacio entre párrafos */
}

.construction-main-image {
    max-width: 700px; /* La imagen no será más ancha de 700px */
    width: 90%;      /* Ocupa el 90% del ancho de su contenedor */
    max-height: 400px; /* Altura máxima para la imagen */
    object-fit: cover; /* La imagen cubrirá el espacio manteniendo su relación de aspecto, recortando si es necesario. */
    display: block;
    margin: 0 auto;
}

/* --- Estilos del Pie de Página (Footer) --- */
.page-footer {
    background-color: #f9f9f9;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #eee;
    font-size: 0.85em;
    color: #666;
    flex-wrap: wrap;
}

.contact-info, .contact-email {
    margin: 5px 0;
}

.contact-info p, .contact-email p {
    line-height: 1.4;
}

/* --- Media Queries para Responsividad del Header y Footer --- */
@media (max-width: 768px) {
    .header-content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logo-container {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .titles-and-nit-group {
        align-items: center;
        text-align: center;
    }

    /* Ajuste de tamaño para móviles */
    .header-titles p {
        font-size: 1.4em; /* Un poco más pequeño en móviles para que quepa */
        line-height: 1.2;
    }

    .nit {
        font-size: 0.9em;
    }

    .main-menu ul {
        flex-direction: column; /* Apila los elementos del menú en pantallas pequeñas */
        align-items: center; /* Centra los elementos apilados */
    }

    .main-menu li {
        margin: 5px 0; /* Espacio vertical entre elementos del menú en móvil */
    }
}

@media (max-width: 600px) {
    .page-container {
        border: none;
        box-shadow: none;
    }

    .page-header {
        padding: 20px 10px;
    }

    .construction-main-image {
        max-width: 95%;
    }

    .page-footer {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 15px 10px;
    }
}

/* --- Estilos para el Menú Lateral (Sidebar) y Contenido Principal --- */

/* Contenedor principal de la sección de contenido y el sidebar */
.content-with-sidebar-wrapper {
    display: flex;
    width: 100%;
    max-width: 900px; /* Alineado con el header-content-wrapper */
    margin: 20px auto; /* Espacio superior y centrado */
    align-items: flex-start; /* Alinea los elementos en la parte superior */
}

/* Estilos para el menú lateral */
.sidebar-menu {
    flex: 0 0 100px; /* Ancho fijo para el sidebar */
    background-color: #f0f0f0; /* Fondo gris claro */
    padding: 20px 0;
    border-right: 1px solid #ddd;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
}

.sidebar-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    margin-bottom: 5px;
}

.sidebar-menu a {
    display: block; /* Para que el área clicable ocupe todo el ancho */
    text-decoration: none;
    color: #333;
    padding: 10px 20px;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-menu a:hover {
    background-color: #e0e0e0; /* Gris más oscuro al pasar el ratón */
    color: #006400; /* Verde oscuro */
}

/* Ajuste del contenido principal para que ocupe el espacio restante */
.page-main .construction-content {
    flex-grow: 1; /* Permite que el contenido tome el espacio restante */
    padding-left: 30px; /* Espacio entre el sidebar y el contenido */
    display: flex; /* Asegura que la imagen siga centrada */
    justify-content: center;
    align-items: center;
}

/* Media Queries para Responsividad del Menú Lateral y Contenido */
@media (max-width: 768px) {
    .content-with-sidebar-wrapper {
        flex-direction: column; /* Apila el sidebar y el contenido */
        align-items: center; /* Centra los elementos */
    }

    .sidebar-menu {
        width: 100%; /* El sidebar ocupa todo el ancho */
        border-right: none;
        border-bottom: 1px solid #ddd; /* Separador en la parte inferior */
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        flex: none; /* Elimina el ancho fijo */
        padding: 10px 0;
        margin-bottom: 20px; /* Espacio entre el sidebar y el contenido */
    }
    .sidebar-menu ul {
        display: flex;
        flex-wrap: wrap; /* Permite que los botones de sucursal se envuelvan */
        justify-content: center; /* Centra los botones */
    }
    .sidebar-menu li {
        margin: 5px 10px; /* Espacio entre los botones */
    }
    .sidebar-menu a {
        padding: 8px 15px; /* Ajusta el padding de los botones */
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        font-size: 0.9em;
    }
    .sidebar-menu a:hover {
        background-color: #e0e0e0;
    }

    .page-main .construction-content {
        padding-left: 0; /* Elimina el padding lateral en móvil */
        width: 100%; /* Asegura que el contenido ocupe el ancho */
    }
}
@media (max-width: 600px) {
    /* Ajustes menores para pantallas más pequeñas */
    .sidebar-menu a {
        font-size: 0.85em;
        padding: 6px 12px;
    }
}

/* Estilos para el Contenido de Ciudades (reemplaza o añade a construction-content) */
.city-content {
    flex-grow: 1; /* Permite que el contenido tome el espacio restante */
    padding-left: 30px; /* Espacio entre el sidebar y el contenido */
    display: flex;
    flex-direction: column; /* Apila el título, imagen y párrafos */
    align-items: center; /* Centra el contenido horizontalmente */
    text-align: center; /* Centra el texto */
    padding-top: 20px; /* Espacio superior */
}
.city-content h2 {
    font-size: 2em;
    color: #006400;
    margin-bottom: 20px;
}
.city-content .city-image {
    max-width: 80%; /* Ajusta el tamaño máximo de la imagen */
    height: auto;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin-bottom: 25px; /* Espacio debajo de la imagen */
}
.city-content p {
    max-width: 700px; /* Limita el ancho del texto para mejor legibilidad */
    text-align: justify; /* Justifica el texto para un aspecto más profesional */
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
    padding: 0 15px; /* Pequeño padding lateral para evitar que el texto toque los bordes en móvil */
}

/* Media Queries para Responsividad (ajusta también estos si has usado city-content) */
@media (max-width: 768px) {
    .city-content {
        padding-left: 0; /* Elimina el padding lateral en móvil */
        width: 100%; /* Asegura que el contenido ocupe el ancho */
        padding-top: 15px;
    }
    .city-content h2 {
        font-size: 1.7em;
        margin-bottom: 15px;
    }
    .city-content .city-image {
        max-width: 95%; /* La imagen puede ser más grande en pantallas pequeñas */
    }
    .city-content p {
        text-align: left; /* Puede ser mejor no justificar en pantallas muy pequeñas */
    }
}

/* Estilos para la Página de Contacto */
.contact-form-container {
    flex-grow: 1;
    padding: 20px 30px; /* Ajusta el padding para que no sea solo a la izquierda */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    max-width: 700px; /* Limita el ancho del formulario */
    margin: 20px auto; /* Centra el contenedor del formulario */
}
.contact-form-container h2 {
    font-size: 2.2em;
    color: #006400;
    text-align: center;
    margin-bottom: 20px;
}
.contact-form-container p {
    text-align: center;
    margin-bottom: 30px;
    color: #555;
    line-height: 1.5;
}
.contact-form .form-group {
    margin-bottom: 20px;
}
.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #333;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Roboto', sans-serif; /* Asegura que use la fuente definida */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    transition: border-color 0.3s ease;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #006400; /* Borde verde al enfocar */
    outline: none;
}
.contact-form textarea {
    resize: vertical; /* Permite redimensionar verticalmente */
}
.contact-form .submit-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #006400; /* Verde oscuro */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.contact-form .submit-button:hover {
    background-color: #004d00; /* Verde más oscuro al pasar el ratón */
}
.additional-contact-info {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}
.additional-contact-info h3 {
    color: #006400;
    margin-bottom: 15px;
}
.additional-contact-info p {
    margin-bottom: 10px;
    line-height: 1.4;
    color: #555;
    text-align: center; /* Asegura que el texto esté centrado */
}

/* Media Queries para el formulario en móvil */
@media (max-width: 768px) {
    .contact-form-container {
        padding: 20px 15px; /* Más padding en los lados en móvil */
        margin: 15px auto;
        max-width: 95%; /* Ocupa más ancho en pantallas pequeñas */
    }
    .contact-form-container h2 {
        font-size: 1.8em;
    }

    .contact-form-container p {
        font-size: 0.95em;
    }
}
.designer-info {
    text-align: center; /* Centra el texto */
    margin-top: 15px; /* Espacio encima de la línea */
    padding-top: 10px; /* Pequeño padding interno superior */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea divisoria sutil */
    color: rgba(255, 255, 255, 0.7); /* Color de texto más claro que el principal */
    font-size: 0.85em; /* Tamaño de fuente más pequeño */
    width: 100%; /* Esto fuerza al div a ocupar todo el ancho */
}
.designer-info a {
    color: rgba(255, 255, 255, 0.9); /* Color del enlace, un poco más visible */
    text-decoration: none; /* Sin subrayado por defecto */
    transition: color 0.3s ease;
}
.designer-info a:hover {
    color: #fff; /* Blanco puro al pasar el ratón */
    text-decoration: underline; /* Subrayado al pasar el ratón */
}
.image-gallery {
    display: grid; /* Usa CSS Grid para un diseño responsivo */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas automáticas, mínimo 250px */
    gap: 15px; /* Espacio entre las imágenes */
    margin-top: 20px; /* Margen superior para separarla del texto */
    padding: 10px; /* Pequeño padding alrededor de la galería */
    background-color: #f8f8f8; /* Un ligero fondo para la galería */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

.image-gallery img {
    width: 100%; /* Las imágenes ocuparán todo el ancho de su celda */
    height: 200px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Recorta la imagen para que cubra el espacio sin distorsionarse */
    border-radius: 5px; /* Bordes ligeramente redondeados para las imágenes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave para cada imagen */
    transition: transform 0.3s ease-in-out; /* Animación suave al pasar el ratón */
}

.image-gallery img:hover {
    transform: scale(1.05); /* Agranda ligeramente la imagen al pasar el ratón */
}
/* Estilos para el contenedor del PDF */
.pdf-container {
    margin: 2rem auto;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1));
    border-radius: 8px;
    overflow: hidden;
    max-width: 900px;
    height: 100vh; /* Ajusta la altura del visor del PDF */
}

.pdf-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Media Queries para Responsividad (si es necesario ajustar el tamaño del PDF en móviles) */
@media (max-width: 768px) {
    .pdf-container {
        height: 80vh; /* Se ajusta para que el usuario pueda ver más de la página en móviles */
    }
}
/* Estilos para el video */


.video-container {
    max-width: 700px;
    margin: 20px auto;
}

.video-container video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para la galería de videos responsiva */
.video-gallery {
    display: grid; /* Usa la cuadrícula CSS para una mejor disposición */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Crea columnas flexibles que se ajustan automáticamente */
    gap: 20px; /* Espacio entre los videos */
    margin: 20px auto; /* Centra la galería y agrega margen */
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.video-item {
    display: flex; /* Centra el video dentro de su contenedor */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta cualquier parte del video que se salga */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para cada video */
}

.video-item video {
    width: 40%; /* El video ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción del video */
    display: block;
}

/* Ajustes de responsividad para pantallas más pequeñas */
@media (max-width: 768px) {
    .video-gallery {
        grid-template-columns: 1fr; /* Una sola columna en dispositivos móviles para una mejor visualización */
    }
}