:root { --azul: #174a7c; --azul-claro: #eaf3fb; --texto: #222; }
		* { box-sizing: border-box; }
		body { margin: 0; font-family: Arial, sans-serif; color: var(--texto); background: #f5f5f5; }
		header { padding: 28px 20px; text-align: center; color: white; background: var(--azul); }
		header h1 { margin: 0 0 8px; font-size: 2rem; }
		header p { margin: 0; }
		.layout { display: flex; max-width: 1200px; margin: 24px auto; padding: 0 16px; gap: 24px; }
		nav { flex: 0 0 245px; align-self: flex-start; overflow: hidden; border: 1px solid #ccd7e2; border-radius: 6px; background: white; }
		nav h2 { margin: 0; padding: 15px; color: white; font-size: 1.15rem; background: #23679d; }
		.menu-button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 15px; border: 0; border-bottom: 1px solid #dbe3ea; color: #123b62; font-size: 1rem; text-align: left; cursor: pointer; background: white; }
		.menu-button:hover, .menu-button[aria-expanded="true"] { background: var(--azul-claro); }
		.arrow { transition: transform .2s; }
		.menu-button[aria-expanded="true"] .arrow { transform: rotate(180deg); }
		.submenu { max-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; background: #f8fbfe; transition: max-height .25s ease; }
		.submenu.open { max-height: 240px; }
		.submenu a { display: block; padding: 9px 15px 9px 30px; color: #245b89; text-decoration: none; }
		.submenu a:hover, .submenu a:focus { color: #102f4b; background: #e1eef9; }
		main { flex: 1; min-width: 0; padding: 28px; border: 1px solid #ddd; border-radius: 6px; background: white; }
		main h2 { margin-top: 0; color: var(--azul); }
		main h3 { color: #23679d; }
		footer { padding: 18px; color: #666; text-align: center; font-size: .9rem; }
		@media (max-width: 700px) { .layout { display: block; } nav { margin-bottom: 20px; } main { padding: 20px; } }