/* --- CSS para la cabecera (header) y menú de ancho completo --- */

/* 1. Contenedor principal del header/navegación */
/* Asegura que el contenedor principal ocupe todo el ancho */
.t3-header, /* Ejemplo de clase común en plantillas T3 Framework */
.navbar-wrapper, /* Otra clase común para el menú */
.main-header-area { /* Clase hipotética para el área de la cabecera */
    width: 100% !important; /* Fuerza el ancho al 100% */
    max-width: 100% !important; /* Asegura que no tenga un max-width limitado */
    padding: 0 !important; /* Elimina cualquier padding que limite el ancho */
    margin-left: auto !important; /* Centra el elemento, aunque ya ocupe todo el ancho */
    margin-right: auto !important; /* Centra el elemento */
    box-sizing: border-box; /* Asegura que el padding y el borde no aumenten el ancho */
}

/* 2. Contenedor del menú de navegación (si es diferente al header principal) */
.t3-mainnav, /* Ejemplo de clase para la barra de navegación principal */
.navbar, /* Otra clase común para la barra de navegación */
.ja-mainnav { /* Clase específica de JA Purity IV si la tiene */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #f8f8f8; /* O el color de fondo de tu menú */
    box-sizing: border-box;
}

/* 3. Contenedor de la imagen de cabecera (hero image/banner) */
/* Si la imagen es un <img> */
.hero-image-container img, /* Selector si la imagen está dentro de un contenedor */
.main-banner img, /* Otro ejemplo */
.t3-masthead img { /* Ejemplo para T3 Framework */
    width: 100% !important;
    height: auto !important; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacio extra debajo de la imagen */
    max-width: 100% !important;
}

/* Si la imagen es un background-image de un div */
.hero-section, /* Clase del div con imagen de fondo */
.t3-slideshow { /* Ejemplo para T3 Framework */
    width: 100% !important;
    max-width: 100% !important;
    background-size: cover; /* Asegura que la imagen de fondo cubra el área */
    background-position: center center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* Evita que se repita la imagen de fondo */
    min-height: 200px; /* Altura mínima para que la imagen de fondo sea visible */
    padding: 0; /* Asegura que no tenga padding que limite el ancho */
    margin: 0; /* Asegura que no tenga margen que limite el ancho */
}


/* 4. Alinear el contenido del menú si está afectado */
/* Si los elementos del menú se quedan flotando o no se centran bien */
.t3-mainnav .container, /* Si usa un contenedor interno para limitar el ancho */
.navbar .container {
    max-width: 100% !important; /* Expande el contenedor interno si lo hay */
    padding: 0 15px !important; /* Pequeño padding lateral para que el contenido no pegue a los bordes */
}

/* Asegúrate de que los elementos internos del menú también se estiren si es necesario */
.t3-mainnav .nav > li > a {
    /* Puedes ajustar padding, line-height si es necesario */
}

/* --- Fin del CSS personalizado --- */