@font-face {
	font-family: "Montserrat-Regular";
	src: url("/scosmart/javax.faces.resource/fonts/Montserrat/Montserrat-Regular.ttf.jsf");
}
@font-face {
	font-family: "Montserrat-SemiBold";
	src: url("/scosmart/javax.faces.resource/fonts/Montserrat/Montserrat-SemiBold.ttf.jsf");
}
@font-face {
	font-family: "OpenSans-Regular";
	src: url("/scosmart/javax.faces.resource/fonts/OpenSans/OpenSans-Regular.ttf.jsf");
}
@font-face {
	font-family: "OpenSans-Semibold";
	src: url("/scosmart/javax.faces.resource/fonts/OpenSans/OpenSans-Semibold.ttf.jsf");
}
@font-face {
	font-family: "OpenSans-Bold";
	src: url("/scosmart/javax.faces.resource/fonts/OpenSans/OpenSans-Bold.ttf.jsf");
}
@font-face {
	font-family: "OpenSans-ExtraBold";
	src: url("/scosmart/javax.faces.resource/fonts/OpenSans/OpenSans-ExtraBold.ttf.jsf");
}
            /* Reseteo básico para evitar desbordamientos */
            body {
                margin: 0;
                padding: 0;
                font-family: Arial, sans-serif;
                background-color: #f4f7f9; /* Color de fondo institucional */
            }
            /* Contenedor principal del encabezado */
            .container_top {
                width: 100%;
                background-color: #0286BA; /* Azul corporativo */
                display: flex;
                flex-direction: column;
                align-items: center;
                box-sizing: border-box;
            }   
            /* Logotipo o banner principal */
            .logo_principal {
                width: 100%;
                max-width: 100%;
                height: auto;
                border: none;
                display: block;    
                background-color: #0286BA;
            }                    
            /* Barra de navegación responsiva usando Flexbox */
            .nav_menubar { 
                width: 100%;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap; /* Clave: Envuelve las opciones en móviles */
                justify-content: center;
                align-items: center;
                background-color: #0286BA;
                padding: 10px 0;
            }       
            /* Estilo para cada contenedor de enlace/opción */
            .menu_item {
                /* Distribución proporcional: 7 elementos en PC ocupan aprox 14% cada uno */
                flex: 1 1 14%; 
                min-width: 110px; /* Evita que las imágenes se vuelvan diminutas en móviles */
                max-width: 160px; /* Evita que crezcan demasiado en pantallas grandes */
                text-align: center;
                padding: 0px;
                box-sizing: border-box;
            }            
            /* Imágenes internas de los botones de navegación */
            .opcion_menu_bar2 {
                width: 100%;
                height: auto;   
                display: block;
                transition: transform 0.2s ease;
            }

            /* Efecto sutil al pasar el mouse (para PC) */
            .opcion_menu_bar2:hover {
                transform: scale(1.05);
            }            
            
                  
            /* Contenedor principal que se estira y adapta */
            .main-wrapper {
                display: flex;
                flex-direction: column;
                min-height: 100vh;
                width: 100%;
                padding: 0px 10px 0px 10px;
                box-sizing: border-box;
            }
            .borde-gradiente {
                position: relative;
                background: #f4f7f9;
                padding: 0px;
                z-index: 0;
                overflow: hidden;
                flex-grow: 1; /* Permite que el contenedor crezca */
                display: flex;
                flex-direction: column;
            }
            /* Bordes sutiles responsivos */
            .borde-gradiente::before,
            .borde-gradiente::after {
                content: '';
                position: absolute;
                top: 0;
                width: 4px;
                height: 100%;
                z-index: 1;
                pointer-events: none;
            }
            .borde-gradiente::before {
                left: 0;
                background: linear-gradient(to right, rgba(2,134,186,0.1), transparent);
            }
            .borde-gradiente::after {
                right: 0;
                background: linear-gradient(to left, rgba(2,134,186,0.1), transparent);
            }
            /* Contenedor central responsivo */
            .container_content {
                width: 100%;
                max-width: 100%;
                flex-grow: 1; /* Empuja el footer hacia abajo si hay poco contenido */
                border: none !important;
                background-color: #f4f7f9;
                box-sizing: border-box;
                /*padding: 15px;*/ /* Espaciado interno cómodo para móviles */
            }            
            /* Media query opcional para ajustar en pantallas grandes */
            @media (min-width: 768px) {
                .container_content {
                    /*padding: 20px;*/
                    padding:0px;
                }
            }

/*Utilizados para el pie de pagina*/
.reservados {
  font-family: "Montserrat-Regular";
  font-size:11px; 
  color: #FFFFFF;
}  
/* Adaptación del Botón de Envío de PrimeFaces */
.prime-btn-submit {
  width: 100% !important;
  background: #025a7a !important;
  color: #FFFFFF !important;
  font-family: "Montserrat-Regular", sans-serif;
  font-weight: bold;
  border-radius: 25px !important;
  padding: 8px 0 !important;
  border: 2px solid white !important;
}
.prime-btn-submit:hover { background: #12095C !important; }

            /* --- FORMULARIO Y SECCIÓN INTERNA AZUL --- */
            .contact-flex-grid {
                display: flex;
                flex-direction: column;
                gap: 40px;
                width: 100%;
            }
            .contact-title {
                font-family: "OpenSans-ExtraBold", sans-serif;
                font-size: 28px;
                line-height: 1.2;
                font-weight: 900;
                margin-bottom: 25px;
            }
            .contact-text {
                font-family: "Montserrat-Regular", sans-serif;
                font-size: 16px; 
                color: #666;
                line-height: 1.6;
                margin-bottom: 30px;
            }
            .contact-methods {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .method-label {
                font-family: "Montserrat-Regular", sans-serif;
                display: block;
                font-size: 0.75rem;
                font-weight: 800;
                letter-spacing: 1px;
                margin-bottom: 5px;
            }
            .method-value {
                font-family: "Montserrat-Regular", sans-serif;
                font-size: 14px;
                font-weight: 700;
            }
            .method-divider {
                display: none;
            }